WIP! A BB-style forum, on the ATmosphere!
We're still working... we'll be back soon when we have something to show off!
node
typescript
hono
htmx
atproto
docs: ATB-48 modlog UI implementation plan and completion notes
+759
+741
docs/plans/2026-03-01-atb-48-modlog-ui.md
+741
docs/plans/2026-03-01-atb-48-modlog-ui.md
···
1
+
# ATB-48: Admin Mod Action Log UI (/admin/modlog) Implementation Plan
2
+
3
+
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
4
+
5
+
**Goal:** Add `GET /admin/modlog` — a paginated, read-only audit log of moderation actions — to the web app's admin panel.
6
+
7
+
**Architecture:** The web server proxies `GET /api/admin/modlog?limit=50&offset=N` from the AppView (already implemented in ATB-46), renders the result as an HTML table, and serves offset-based pagination via Next/Previous links. All permission gating uses the existing `canViewModLog()` session helper.
8
+
9
+
**Tech Stack:** Hono (web server), Hono JSX (templates), Vitest (tests). No new files — only `apps/web/src/routes/admin.tsx` and `apps/web/src/routes/__tests__/admin.test.tsx` are touched.
10
+
11
+
---
12
+
13
+
## Context You Need to Know
14
+
15
+
### File locations
16
+
- **Route to modify:** `apps/web/src/routes/admin.tsx` (add new route before `return app;` at line ~1249)
17
+
- **Test file to modify:** `apps/web/src/routes/__tests__/admin.test.tsx` (add new `describe` block at the end)
18
+
- **Session helpers:** `apps/web/src/lib/session.ts` — `canViewModLog()` already exists
19
+
- **AppView endpoint already exists:** `GET /api/admin/modlog` in `apps/appview/src/routes/admin.ts`
20
+
21
+
### AppView response shape
22
+
```json
23
+
{
24
+
"actions": [
25
+
{
26
+
"id": "123",
27
+
"action": "space.atbb.modAction.ban",
28
+
"moderatorDid": "did:plc:abc",
29
+
"moderatorHandle": "alice.bsky.social",
30
+
"subjectDid": "did:plc:xyz",
31
+
"subjectHandle": "bob.bsky.social",
32
+
"subjectPostUri": null,
33
+
"reason": "Spam",
34
+
"createdAt": "2026-02-26T12:01:00Z"
35
+
}
36
+
],
37
+
"total": 42,
38
+
"offset": 0,
39
+
"limit": 50
40
+
}
41
+
```
42
+
43
+
### Actual action token values (from mod.ts — differ from design doc)
44
+
| Token | Human label |
45
+
|-------|-------------|
46
+
| `space.atbb.modAction.ban` | Ban |
47
+
| `space.atbb.modAction.unban` | Unban |
48
+
| `space.atbb.modAction.lock` | Lock |
49
+
| `space.atbb.modAction.unlock` | Unlock |
50
+
| `space.atbb.modAction.delete` | Hide |
51
+
| `space.atbb.modAction.undelete` | Unhide |
52
+
53
+
### Subject column logic
54
+
- If `subjectPostUri` is non-null → show the post URI (post-targeting action)
55
+
- Else if `subjectHandle` is non-null → show the handle (user-targeting action)
56
+
- Else → show `subjectDid` as fallback (handle not indexed)
57
+
58
+
### Permission gate
59
+
Any of: `space.atbb.permission.moderatePosts`, `space.atbb.permission.banUsers`, `space.atbb.permission.lockTopics` (or `*`). Use `canViewModLog(auth)` from session.ts.
60
+
61
+
### Pagination design
62
+
- 50 rows per page, read `?offset` from query string (default 0)
63
+
- Previous link: `href="/admin/modlog?offset={offset - 50}"` (hidden when offset === 0)
64
+
- Next link: `href="/admin/modlog?offset={offset + 50}"` (hidden when offset + limit >= total)
65
+
- Page indicator: `Page {currentPage} of {totalPages}`
66
+
67
+
### Test pattern (copy from existing describe blocks)
68
+
Each `describe` block in the test file:
69
+
1. `beforeEach` stubs global `fetch`, `APPVIEW_URL`, and calls `vi.resetModules()`
70
+
2. `afterEach` unstubs everything
71
+
3. `setupSession(permissions)` mock sets up the two-call auth sequence (session + members/me)
72
+
4. `loadAdminRoutes()` does dynamic import to get a fresh Hono app per test
73
+
74
+
---
75
+
76
+
## Task 1: Add types and helpers to admin.tsx
77
+
78
+
**Files:**
79
+
- Modify: `apps/web/src/routes/admin.tsx` (add after the `BoardEntry` interface, around line 48)
80
+
81
+
**Step 1: Add `ModLogEntry` interface and `ACTION_LABELS` map**
82
+
83
+
Add these after the `BoardEntry` interface (before the `// ─── Helpers ───` section):
84
+
85
+
```typescript
86
+
interface ModLogEntry {
87
+
id: string;
88
+
action: string;
89
+
moderatorDid: string;
90
+
moderatorHandle: string;
91
+
subjectDid: string | null;
92
+
subjectHandle: string | null;
93
+
subjectPostUri: string | null;
94
+
reason: string | null;
95
+
createdAt: string;
96
+
}
97
+
98
+
const ACTION_LABELS: Record<string, string> = {
99
+
"space.atbb.modAction.ban": "Ban",
100
+
"space.atbb.modAction.unban": "Unban",
101
+
"space.atbb.modAction.lock": "Lock",
102
+
"space.atbb.modAction.unlock": "Unlock",
103
+
"space.atbb.modAction.delete": "Hide",
104
+
"space.atbb.modAction.undelete": "Unhide",
105
+
};
106
+
```
107
+
108
+
**Step 2: Add `formatModLogDate` helper**
109
+
110
+
Add after `formatJoinedDate` in the `// ─── Helpers ───` section:
111
+
112
+
```typescript
113
+
function formatModLogDate(isoString: string): string {
114
+
const d = new Date(isoString);
115
+
if (isNaN(d.getTime())) return "—";
116
+
return d.toLocaleString("en-US", {
117
+
year: "numeric",
118
+
month: "2-digit",
119
+
day: "2-digit",
120
+
hour: "2-digit",
121
+
minute: "2-digit",
122
+
hour12: false,
123
+
});
124
+
}
125
+
```
126
+
127
+
**Step 3: No test to run yet — verify TypeScript compiles**
128
+
129
+
Run: `PATH=/path/to/.devenv/profile/bin:/bin:/usr/bin pnpm --filter @atbb/web build` (or skip — build happens in Task 3 after route is added)
130
+
131
+
**Step 4: No commit yet — combine with Task 2**
132
+
133
+
---
134
+
135
+
## Task 2: Add ModLogRow component to admin.tsx
136
+
137
+
**Files:**
138
+
- Modify: `apps/web/src/routes/admin.tsx` (add in the `// ─── Components ───` section, after `MemberRow`)
139
+
140
+
**Step 1: Add `ModLogRow` component**
141
+
142
+
Add after the `MemberRow` component (around line 122):
143
+
144
+
```tsx
145
+
function ModLogRow({ entry }: { entry: ModLogEntry }) {
146
+
const label = ACTION_LABELS[entry.action] ?? entry.action;
147
+
const subject = entry.subjectPostUri
148
+
? entry.subjectPostUri
149
+
: (entry.subjectHandle ?? entry.subjectDid ?? "—");
150
+
151
+
return (
152
+
<tr>
153
+
<td class="modlog-table__time">{formatModLogDate(entry.createdAt)}</td>
154
+
<td class="modlog-table__moderator">{entry.moderatorHandle}</td>
155
+
<td class="modlog-table__action">
156
+
<span class={`modlog-action-badge modlog-action-badge--${label.toLowerCase()}`}>
157
+
{label}
158
+
</span>
159
+
</td>
160
+
<td class="modlog-table__subject">{subject}</td>
161
+
<td class="modlog-table__reason">{entry.reason ?? "—"}</td>
162
+
</tr>
163
+
);
164
+
}
165
+
```
166
+
167
+
**Step 2: No commit yet — combine with Task 3**
168
+
169
+
---
170
+
171
+
## Task 3: Add GET /admin/modlog route to admin.tsx
172
+
173
+
**Files:**
174
+
- Modify: `apps/web/src/routes/admin.tsx` (add before `return app;` at the end of `createAdminRoutes`)
175
+
176
+
**Step 1: Write the failing test first (see Task 4, Step 1)**
177
+
178
+
Skip ahead to Task 4 to write one smoke-test first, then come back here.
179
+
180
+
**Step 2: Add the route**
181
+
182
+
Add before `return app;` (around line 1249):
183
+
184
+
```tsx
185
+
// ── GET /admin/modlog ─────────────────────────────────────────────────────
186
+
187
+
app.get("/admin/modlog", async (c) => {
188
+
const auth = await getSessionWithPermissions(appviewUrl, c.req.header("cookie"));
189
+
190
+
if (!auth.authenticated) {
191
+
return c.redirect("/login");
192
+
}
193
+
194
+
if (!canViewModLog(auth)) {
195
+
return c.html(
196
+
<BaseLayout title="Access Denied — atBB Forum" auth={auth}>
197
+
<PageHeader title="Mod Action Log" />
198
+
<p>You don't have permission to view the mod action log.</p>
199
+
</BaseLayout>,
200
+
403
201
+
);
202
+
}
203
+
204
+
const rawOffset = c.req.query("offset");
205
+
const offset = rawOffset !== undefined && /^\d+$/.test(rawOffset)
206
+
? parseInt(rawOffset, 10)
207
+
: 0;
208
+
const limit = 50;
209
+
210
+
const cookie = c.req.header("cookie") ?? "";
211
+
212
+
let modlogRes: Response;
213
+
try {
214
+
modlogRes = await fetch(
215
+
`${appviewUrl}/api/admin/modlog?limit=${limit}&offset=${offset}`,
216
+
{ headers: { Cookie: cookie } }
217
+
);
218
+
} catch (error) {
219
+
if (isProgrammingError(error)) throw error;
220
+
logger.error("Network error fetching mod action log", {
221
+
operation: "GET /admin/modlog",
222
+
error: error instanceof Error ? error.message : String(error),
223
+
});
224
+
return c.html(
225
+
<BaseLayout title="Mod Action Log — atBB Forum" auth={auth}>
226
+
<PageHeader title="Mod Action Log" />
227
+
<ErrorDisplay
228
+
message="Unable to load mod action log"
229
+
detail="The forum is temporarily unavailable. Please try again."
230
+
/>
231
+
</BaseLayout>,
232
+
503
233
+
);
234
+
}
235
+
236
+
if (!modlogRes.ok) {
237
+
if (modlogRes.status === 401) {
238
+
return c.redirect("/login");
239
+
}
240
+
logger.error("AppView returned error for mod action log", {
241
+
operation: "GET /admin/modlog",
242
+
status: modlogRes.status,
243
+
});
244
+
return c.html(
245
+
<BaseLayout title="Mod Action Log — atBB Forum" auth={auth}>
246
+
<PageHeader title="Mod Action Log" />
247
+
<ErrorDisplay
248
+
message="Something went wrong"
249
+
detail="Could not load mod action log. Please try again."
250
+
/>
251
+
</BaseLayout>,
252
+
500
253
+
);
254
+
}
255
+
256
+
const data = (await modlogRes.json()) as {
257
+
actions: ModLogEntry[];
258
+
total: number;
259
+
offset: number;
260
+
limit: number;
261
+
};
262
+
263
+
const { actions, total } = data;
264
+
const totalPages = total === 0 ? 1 : Math.ceil(total / limit);
265
+
const currentPage = Math.floor(offset / limit) + 1;
266
+
const hasPrev = offset > 0;
267
+
const hasNext = offset + limit < total;
268
+
269
+
return c.html(
270
+
<BaseLayout title="Mod Action Log — atBB Forum" auth={auth}>
271
+
<PageHeader title="Mod Action Log" />
272
+
{actions.length === 0 ? (
273
+
<EmptyState message="No moderation actions yet" />
274
+
) : (
275
+
<div class="card">
276
+
<table class="modlog-table">
277
+
<thead>
278
+
<tr>
279
+
<th scope="col">Time</th>
280
+
<th scope="col">Moderator</th>
281
+
<th scope="col">Action</th>
282
+
<th scope="col">Subject</th>
283
+
<th scope="col">Reason</th>
284
+
</tr>
285
+
</thead>
286
+
<tbody>
287
+
{actions.map((entry) => (
288
+
<ModLogRow entry={entry} />
289
+
))}
290
+
</tbody>
291
+
</table>
292
+
</div>
293
+
)}
294
+
<div class="modlog-pagination">
295
+
{hasPrev && (
296
+
<a href={`/admin/modlog?offset=${offset - limit}`} class="btn btn-secondary">
297
+
← Previous
298
+
</a>
299
+
)}
300
+
<span class="modlog-pagination__indicator">
301
+
Page {currentPage} of {totalPages}
302
+
</span>
303
+
{hasNext && (
304
+
<a href={`/admin/modlog?offset=${offset + limit}`} class="btn btn-secondary">
305
+
Next →
306
+
</a>
307
+
)}
308
+
</div>
309
+
</BaseLayout>
310
+
);
311
+
});
312
+
```
313
+
314
+
**Step 3: Run tests (after writing them in Task 4)**
315
+
316
+
Run: `PATH=/path/to/.devenv/profile/bin:/bin:/usr/bin pnpm --filter @atbb/web test`
317
+
Expected: All tests pass
318
+
319
+
**Step 4: Commit**
320
+
321
+
```bash
322
+
git add apps/web/src/routes/admin.tsx apps/web/src/routes/__tests__/admin.test.tsx
323
+
git commit -m "feat(web): admin mod action log page — /admin/modlog (ATB-48)"
324
+
```
325
+
326
+
---
327
+
328
+
## Task 4: Add tests to admin.test.tsx
329
+
330
+
**Files:**
331
+
- Modify: `apps/web/src/routes/__tests__/admin.test.tsx` (add new `describe` block at the end)
332
+
333
+
**Step 1: Write the describe block with all required tests**
334
+
335
+
Append to the end of `admin.test.tsx`:
336
+
337
+
```typescript
338
+
describe("createAdminRoutes — GET /admin/modlog", () => {
339
+
beforeEach(() => {
340
+
vi.stubGlobal("fetch", mockFetch);
341
+
vi.stubEnv("APPVIEW_URL", "http://localhost:3000");
342
+
vi.resetModules();
343
+
});
344
+
345
+
afterEach(() => {
346
+
vi.unstubAllGlobals();
347
+
vi.unstubAllEnvs();
348
+
mockFetch.mockReset();
349
+
});
350
+
351
+
function mockResponse(body: unknown, ok = true, status = 200) {
352
+
return {
353
+
ok,
354
+
status,
355
+
statusText: ok ? "OK" : "Error",
356
+
json: () => Promise.resolve(body),
357
+
};
358
+
}
359
+
360
+
function setupSession(permissions: string[]) {
361
+
mockFetch.mockResolvedValueOnce(
362
+
mockResponse({ authenticated: true, did: "did:plc:admin", handle: "admin.bsky.social" })
363
+
);
364
+
mockFetch.mockResolvedValueOnce(mockResponse({ permissions }));
365
+
}
366
+
367
+
async function loadAdminRoutes() {
368
+
const { createAdminRoutes } = await import("../admin.js");
369
+
return createAdminRoutes("http://localhost:3000");
370
+
}
371
+
372
+
const SAMPLE_ACTIONS = [
373
+
{
374
+
id: "1",
375
+
action: "space.atbb.modAction.ban",
376
+
moderatorDid: "did:plc:alice",
377
+
moderatorHandle: "alice.bsky.social",
378
+
subjectDid: "did:plc:bob",
379
+
subjectHandle: "bob.bsky.social",
380
+
subjectPostUri: null,
381
+
reason: "Spam",
382
+
createdAt: "2026-02-26T12:01:00.000Z",
383
+
},
384
+
{
385
+
id: "2",
386
+
action: "space.atbb.modAction.delete",
387
+
moderatorDid: "did:plc:alice",
388
+
moderatorHandle: "alice.bsky.social",
389
+
subjectDid: null,
390
+
subjectHandle: null,
391
+
subjectPostUri: "at://did:plc:bob/space.atbb.post/abc123",
392
+
reason: "Inappropriate",
393
+
createdAt: "2026-02-26T11:30:00.000Z",
394
+
},
395
+
];
396
+
397
+
// ── Auth & permission gates ──────────────────────────────────────────────
398
+
399
+
it("redirects unauthenticated users to /login", async () => {
400
+
const routes = await loadAdminRoutes();
401
+
const res = await routes.request("/admin/modlog");
402
+
expect(res.status).toBe(302);
403
+
expect(res.headers.get("location")).toBe("/login");
404
+
});
405
+
406
+
it("returns 403 for user without any mod permission", async () => {
407
+
setupSession(["space.atbb.permission.manageCategories"]);
408
+
const routes = await loadAdminRoutes();
409
+
const res = await routes.request("/admin/modlog", {
410
+
headers: { cookie: "atbb_session=token" },
411
+
});
412
+
expect(res.status).toBe(403);
413
+
const html = await res.text();
414
+
expect(html).toContain("permission");
415
+
});
416
+
417
+
it("allows access for moderatePosts permission", async () => {
418
+
setupSession(["space.atbb.permission.moderatePosts"]);
419
+
mockFetch.mockResolvedValueOnce(
420
+
mockResponse({ actions: [], total: 0, offset: 0, limit: 50 })
421
+
);
422
+
const routes = await loadAdminRoutes();
423
+
const res = await routes.request("/admin/modlog", {
424
+
headers: { cookie: "atbb_session=token" },
425
+
});
426
+
expect(res.status).toBe(200);
427
+
});
428
+
429
+
it("allows access for banUsers permission", async () => {
430
+
setupSession(["space.atbb.permission.banUsers"]);
431
+
mockFetch.mockResolvedValueOnce(
432
+
mockResponse({ actions: [], total: 0, offset: 0, limit: 50 })
433
+
);
434
+
const routes = await loadAdminRoutes();
435
+
const res = await routes.request("/admin/modlog", {
436
+
headers: { cookie: "atbb_session=token" },
437
+
});
438
+
expect(res.status).toBe(200);
439
+
});
440
+
441
+
it("allows access for lockTopics permission", async () => {
442
+
setupSession(["space.atbb.permission.lockTopics"]);
443
+
mockFetch.mockResolvedValueOnce(
444
+
mockResponse({ actions: [], total: 0, offset: 0, limit: 50 })
445
+
);
446
+
const routes = await loadAdminRoutes();
447
+
const res = await routes.request("/admin/modlog", {
448
+
headers: { cookie: "atbb_session=token" },
449
+
});
450
+
expect(res.status).toBe(200);
451
+
});
452
+
453
+
// ── Table rendering ──────────────────────────────────────────────────────
454
+
455
+
it("renders table with moderator handle and action label", async () => {
456
+
setupSession(["space.atbb.permission.banUsers"]);
457
+
mockFetch.mockResolvedValueOnce(
458
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 2, offset: 0, limit: 50 })
459
+
);
460
+
const routes = await loadAdminRoutes();
461
+
const res = await routes.request("/admin/modlog", {
462
+
headers: { cookie: "atbb_session=token" },
463
+
});
464
+
const html = await res.text();
465
+
expect(html).toContain("alice.bsky.social");
466
+
expect(html).toContain("Ban");
467
+
expect(html).toContain("bob.bsky.social");
468
+
expect(html).toContain("Spam");
469
+
});
470
+
471
+
it("maps space.atbb.modAction.delete to 'Hide' label", async () => {
472
+
setupSession(["space.atbb.permission.moderatePosts"]);
473
+
mockFetch.mockResolvedValueOnce(
474
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 2, offset: 0, limit: 50 })
475
+
);
476
+
const routes = await loadAdminRoutes();
477
+
const res = await routes.request("/admin/modlog", {
478
+
headers: { cookie: "atbb_session=token" },
479
+
});
480
+
const html = await res.text();
481
+
expect(html).toContain("Hide");
482
+
});
483
+
484
+
it("shows post URI in subject column for post-targeting actions", async () => {
485
+
setupSession(["space.atbb.permission.moderatePosts"]);
486
+
mockFetch.mockResolvedValueOnce(
487
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 2, offset: 0, limit: 50 })
488
+
);
489
+
const routes = await loadAdminRoutes();
490
+
const res = await routes.request("/admin/modlog", {
491
+
headers: { cookie: "atbb_session=token" },
492
+
});
493
+
const html = await res.text();
494
+
expect(html).toContain("at://did:plc:bob/space.atbb.post/abc123");
495
+
});
496
+
497
+
it("shows handle in subject column for user-targeting actions", async () => {
498
+
setupSession(["space.atbb.permission.banUsers"]);
499
+
mockFetch.mockResolvedValueOnce(
500
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 2, offset: 0, limit: 50 })
501
+
);
502
+
const routes = await loadAdminRoutes();
503
+
const res = await routes.request("/admin/modlog", {
504
+
headers: { cookie: "atbb_session=token" },
505
+
});
506
+
const html = await res.text();
507
+
expect(html).toContain("bob.bsky.social");
508
+
});
509
+
510
+
it("shows empty state when no actions", async () => {
511
+
setupSession(["space.atbb.permission.banUsers"]);
512
+
mockFetch.mockResolvedValueOnce(
513
+
mockResponse({ actions: [], total: 0, offset: 0, limit: 50 })
514
+
);
515
+
const routes = await loadAdminRoutes();
516
+
const res = await routes.request("/admin/modlog", {
517
+
headers: { cookie: "atbb_session=token" },
518
+
});
519
+
const html = await res.text();
520
+
expect(html).toContain("No moderation actions");
521
+
});
522
+
523
+
// ── Pagination ───────────────────────────────────────────────────────────
524
+
525
+
it("renders 'Page 1 of 2' indicator for 51 total actions", async () => {
526
+
setupSession(["space.atbb.permission.banUsers"]);
527
+
mockFetch.mockResolvedValueOnce(
528
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 51, offset: 0, limit: 50 })
529
+
);
530
+
const routes = await loadAdminRoutes();
531
+
const res = await routes.request("/admin/modlog", {
532
+
headers: { cookie: "atbb_session=token" },
533
+
});
534
+
const html = await res.text();
535
+
expect(html).toContain("Page 1 of 2");
536
+
});
537
+
538
+
it("shows Next link when more pages exist", async () => {
539
+
setupSession(["space.atbb.permission.banUsers"]);
540
+
mockFetch.mockResolvedValueOnce(
541
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 51, offset: 0, limit: 50 })
542
+
);
543
+
const routes = await loadAdminRoutes();
544
+
const res = await routes.request("/admin/modlog", {
545
+
headers: { cookie: "atbb_session=token" },
546
+
});
547
+
const html = await res.text();
548
+
expect(html).toContain('href="/admin/modlog?offset=50"');
549
+
expect(html).toContain("Next");
550
+
});
551
+
552
+
it("hides Next link on last page", async () => {
553
+
setupSession(["space.atbb.permission.banUsers"]);
554
+
mockFetch.mockResolvedValueOnce(
555
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 51, offset: 50, limit: 50 })
556
+
);
557
+
const routes = await loadAdminRoutes();
558
+
const res = await routes.request("/admin/modlog?offset=50", {
559
+
headers: { cookie: "atbb_session=token" },
560
+
});
561
+
const html = await res.text();
562
+
expect(html).not.toContain('href="/admin/modlog?offset=100"');
563
+
});
564
+
565
+
it("shows Previous link when not on first page", async () => {
566
+
setupSession(["space.atbb.permission.banUsers"]);
567
+
mockFetch.mockResolvedValueOnce(
568
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 51, offset: 50, limit: 50 })
569
+
);
570
+
const routes = await loadAdminRoutes();
571
+
const res = await routes.request("/admin/modlog?offset=50", {
572
+
headers: { cookie: "atbb_session=token" },
573
+
});
574
+
const html = await res.text();
575
+
expect(html).toContain('href="/admin/modlog?offset=0"');
576
+
expect(html).toContain("Previous");
577
+
});
578
+
579
+
it("hides Previous link on first page", async () => {
580
+
setupSession(["space.atbb.permission.banUsers"]);
581
+
mockFetch.mockResolvedValueOnce(
582
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 51, offset: 0, limit: 50 })
583
+
);
584
+
const routes = await loadAdminRoutes();
585
+
const res = await routes.request("/admin/modlog", {
586
+
headers: { cookie: "atbb_session=token" },
587
+
});
588
+
const html = await res.text();
589
+
expect(html).not.toContain('href="/admin/modlog?offset=-50"');
590
+
expect(html).not.toContain("Previous");
591
+
});
592
+
593
+
it("passes offset query param to AppView", async () => {
594
+
setupSession(["space.atbb.permission.banUsers"]);
595
+
mockFetch.mockResolvedValueOnce(
596
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 100, offset: 50, limit: 50 })
597
+
);
598
+
const routes = await loadAdminRoutes();
599
+
await routes.request("/admin/modlog?offset=50", {
600
+
headers: { cookie: "atbb_session=token" },
601
+
});
602
+
// Third fetch call (index 2) is the modlog API call
603
+
const modlogCall = mockFetch.mock.calls[2];
604
+
expect(modlogCall[0]).toContain("offset=50");
605
+
expect(modlogCall[0]).toContain("limit=50");
606
+
});
607
+
608
+
it("ignores invalid offset and defaults to 0", async () => {
609
+
setupSession(["space.atbb.permission.banUsers"]);
610
+
mockFetch.mockResolvedValueOnce(
611
+
mockResponse({ actions: SAMPLE_ACTIONS, total: 2, offset: 0, limit: 50 })
612
+
);
613
+
const routes = await loadAdminRoutes();
614
+
const res = await routes.request("/admin/modlog?offset=notanumber", {
615
+
headers: { cookie: "atbb_session=token" },
616
+
});
617
+
expect(res.status).toBe(200);
618
+
const modlogCall = mockFetch.mock.calls[2];
619
+
expect(modlogCall[0]).toContain("offset=0");
620
+
});
621
+
622
+
// ── Error handling ───────────────────────────────────────────────────────
623
+
624
+
it("returns 503 on AppView network error", async () => {
625
+
setupSession(["space.atbb.permission.banUsers"]);
626
+
mockFetch.mockRejectedValueOnce(new Error("fetch failed"));
627
+
const routes = await loadAdminRoutes();
628
+
const res = await routes.request("/admin/modlog", {
629
+
headers: { cookie: "atbb_session=token" },
630
+
});
631
+
expect(res.status).toBe(503);
632
+
const html = await res.text();
633
+
expect(html).toContain("error-display");
634
+
});
635
+
636
+
it("returns 500 on AppView server error", async () => {
637
+
setupSession(["space.atbb.permission.banUsers"]);
638
+
mockFetch.mockResolvedValueOnce(mockResponse({}, false, 500));
639
+
const routes = await loadAdminRoutes();
640
+
const res = await routes.request("/admin/modlog", {
641
+
headers: { cookie: "atbb_session=token" },
642
+
});
643
+
expect(res.status).toBe(500);
644
+
const html = await res.text();
645
+
expect(html).toContain("error-display");
646
+
});
647
+
648
+
it("redirects to /login when AppView returns 401", async () => {
649
+
setupSession(["space.atbb.permission.banUsers"]);
650
+
mockFetch.mockResolvedValueOnce(mockResponse({}, false, 401));
651
+
const routes = await loadAdminRoutes();
652
+
const res = await routes.request("/admin/modlog", {
653
+
headers: { cookie: "atbb_session=token" },
654
+
});
655
+
expect(res.status).toBe(302);
656
+
expect(res.headers.get("location")).toBe("/login");
657
+
});
658
+
});
659
+
```
660
+
661
+
**Step 2: Run the tests (all should fail — route not added yet)**
662
+
663
+
Run: `PATH=/path/to/.devenv/profile/bin:/bin:/usr/bin pnpm --filter @atbb/web test`
664
+
Expected: New modlog tests FAIL ("Cannot read properties of undefined" or similar)
665
+
666
+
**Step 3: Now go implement Tasks 1–3 (types, component, route)**
667
+
668
+
**Step 4: Run tests again**
669
+
670
+
Run: `PATH=/path/to/.devenv/profile/bin:/bin:/usr/bin pnpm --filter @atbb/web test`
671
+
Expected: All tests PASS
672
+
673
+
**Step 5: Commit**
674
+
675
+
```bash
676
+
git add apps/web/src/routes/admin.tsx apps/web/src/routes/__tests__/admin.test.tsx
677
+
git commit -m "feat(web): admin mod action log page — /admin/modlog (ATB-48)"
678
+
```
679
+
680
+
---
681
+
682
+
## Task 5: Run full test suite
683
+
684
+
**Step 1: Run all tests**
685
+
686
+
Run: `PATH=/path/to/.devenv/profile/bin:/bin:/usr/bin pnpm test`
687
+
Expected: All tests pass
688
+
689
+
**Step 2: If tests fail** — check whether it's a Turbo env var issue. See CLAUDE.md section "Environment Variables in Tests".
690
+
691
+
---
692
+
693
+
## Task 6: Update documentation
694
+
695
+
**Step 1: Move plan doc to complete/**
696
+
697
+
No — plan docs only move to `docs/plans/complete/` after work is *shipped* (merged). Leave this plan in `docs/plans/` until the PR is merged.
698
+
699
+
**Step 2: Update docs/atproto-forum-plan.md**
700
+
701
+
In `docs/atproto-forum-plan.md`, find the ATB-48 entry and mark it `[x]`. Add a note: `ATB-48: /admin/modlog UI — see PR`.
702
+
703
+
**Step 3: Update Linear**
704
+
705
+
- Change ATB-48 status from Backlog → In Progress → Done
706
+
- Add a comment: "Implemented `GET /admin/modlog` in `apps/web/src/routes/admin.tsx`. Permission gate uses `canViewModLog()`. Offset pagination with 50 rows per page. Action labels mapped from actual `space.atbb.modAction.*` tokens."
707
+
708
+
**Step 4: Commit doc update (after PR is approved)**
709
+
710
+
```bash
711
+
git add docs/atproto-forum-plan.md
712
+
git commit -m "docs: mark ATB-48 complete"
713
+
```
714
+
715
+
---
716
+
717
+
## Task 7: Open PR
718
+
719
+
```bash
720
+
git push -u origin HEAD
721
+
gh pr create \
722
+
--title "feat(web): admin mod action log UI — /admin/modlog (ATB-48)" \
723
+
--body "$(cat <<'EOF'
724
+
## Summary
725
+
- Adds `GET /admin/modlog` to the web admin panel
726
+
- Permission gate: any of `moderatePosts`, `banUsers`, `lockTopics`
727
+
- Renders a table with timestamp, moderator, action (human-readable label), subject, and reason
728
+
- Offset-based pagination: 50 rows per page, Previous/Next links
729
+
- Action tokens mapped to labels: `space.atbb.modAction.delete` → Hide, `space.atbb.modAction.lock` → Lock, etc.
730
+
- Subject column shows handle for user-targeting actions, AT URI for post-targeting actions
731
+
- Error handling: 503 for network errors, 500 for server errors, redirect for 401
732
+
733
+
## Test plan
734
+
- [ ] All new tests in `admin.test.tsx` pass
735
+
- [ ] Full `pnpm test` passes
736
+
- [ ] Manual smoke: log in with a mod permission, navigate to `/admin/modlog`
737
+
- [ ] Manual: verify pagination Next/Previous links work with offset param
738
+
- [ ] Manual: verify the admin landing page mod log card links to `/admin/modlog`
739
+
EOF
740
+
)"
741
+
```
+18
docs/plans/complete/atproto-forum-plan.md
+18
docs/plans/complete/atproto-forum-plan.md
···
280
280
- `canManageRoles` session helper added to `apps/web/src/lib/session.ts`
281
281
- 31 integration tests: auth guards, table render, role form visibility, HTMX success/error paths, 503/500 error display
282
282
- Files: `apps/web/src/routes/admin.tsx`, `apps/web/src/lib/session.ts`, `apps/web/public/static/css/theme.css`, `apps/appview/src/routes/admin.ts`
283
+
- [x] **ATB-46: Admin panel: mod action log AppView endpoint** — **Complete:** 2026-03-02
284
+
- `GET /api/admin/modlog` — paginated, reverse-chronological list; requires any of `moderatePosts`, `banUsers`, or `lockTopics`
285
+
- Joins `users` table twice via Drizzle `alias()` pattern: one alias for moderator handle, one for subject handle
286
+
- `subjectDid`/`subjectHandle` null for post-targeting actions (hide/lock); `subjectPostUri` null for user-targeting actions (ban)
287
+
- `moderatorHandle` falls back to `moderatorDid` when user record lacks an indexed handle
288
+
- Files: `apps/appview/src/routes/admin.ts`, `bruno/AppView API/Admin/Get Mod Action Log.bru`
289
+
- [x] **ATB-47: Admin panel: forum structure management UI (`/admin/structure`)** — **Complete:** 2026-03-01
290
+
- `GET /admin/structure` — full CRUD for categories and boards; permission gate: `manageCategories`
291
+
- Web-layer POST proxy routes translate to the correct HTTP method (PUT/DELETE) for AppView
292
+
- Inline edit forms and `<dialog>` confirmation for delete; AppView 409 (referential integrity) rendered as human-readable inline error
293
+
- Files: `apps/web/src/routes/admin.tsx`, `apps/web/public/static/css/theme.css`
294
+
- [x] **ATB-48: Admin panel: mod action log UI (`/admin/modlog`)** — **Complete:** 2026-03-01
295
+
- `GET /admin/modlog` — read-only paginated table; permission gate: `canViewModLog()` (any of `moderatePosts`, `banUsers`, `lockTopics`)
296
+
- `ACTION_LABELS` constant maps full lexicon tokens (e.g. `space.atbb.modAction.ban`) to labels ("Ban", "Hide", "Lock", etc.); falls back to raw token for unknown actions
297
+
- Subject column: `subjectPostUri` shown for post-targeting actions; `subjectHandle ?? subjectDid` for user-targeting
298
+
- Offset pagination: Previous/Next links, 50 rows per page; invalid offset defaults to 0
299
+
- 18 integration tests covering auth gates, table render, action label mapping, subject column logic, pagination, error display
300
+
- Files: `apps/web/src/routes/admin.tsx`, `apps/web/src/routes/__tests__/admin.test.tsx`, `apps/web/public/static/css/theme.css`
283
301
- [x] Basic responsive design
284
302
- ATB-32 | Mobile-first responsive breakpoints (375px/768px/1024px), CSS-only hamburger nav via `<details>`/`<summary>`, token overrides for mobile, accessibility improvements (skip link, focus-visible, ARIA attributes, semantic HTML), 404 page, visual polish (transitions, hover states), SVG favicon
285
303
- [x] Show author handles in posts