Frontend implement (phase 4, frontend tasks)

Do ONE task at a time. Max 3 tasks per chat.

Steps

1. Read PROGRESS.md and PLAN.md. Pick the next unticked frontend task. Confirm the branch. The task's tests must already be red (PROGRESS.md has their red lines); if not, run /write-tests first.
2. Open the pattern source feature folder from "Codebase notes". Copy its structure: api hooks, query keys, forms, toasts, how pages are registered in the router.
3. wc -l each file you will edit. Component files stay ≤ 150 lines. Split first if needed.
4. Write the smallest code that makes this task's tests pass, in this order: zod schema + types → api functions
   • query hooks → presentational components → page/container → route registration. A library API the codebase doesn't use yet: check its version in package.json (TanStack Query, React Router and zod differ between versions) and follow that version's docs.
5. Types: if frontend/src/api/schema.d.ts exists, import API types from it and never hand-write them (stale → bash .cursor/skills/run-checks/scripts/check_api_types.sh --write). Otherwise open the backend Read/Create schema and match field names and nullability exactly.
6. UI components: ls frontend/src/components/ui first and use what exists. Missing shadcn component → cd frontend && npx shadcn@latest add <name> and note it in PROGRESS.md. Never hand-write a copy of a shadcn component.
7. Edge-case checklist. Handle each one, or write N/A: <reason> in the PROGRESS.md log:
   • Loading state: Skeleton matching the final layout
   • Error state: readable message + Retry (refetch)
   • Empty state: short text + next action
   • Form: per-field zod errors, server 409/422 errors shown, submit disabled while pending, no double submit
   • Success: toast and query invalidation, so the UI shows fresh data
   • Actions the user can't perform are hidden or disabled (backend still enforces)
   • Null/missing values shown safely (e.g. —), long text truncates or wraps
   • Works at 375px and 1280px width (mobile-first Tailwind)
   • Labels on inputs, aria-label on icon buttons, keyboard works
   • Destructive actions ask for confirmation (shadcn AlertDialog)
8. Verify (from frontend/): npx tsc --noEmit -p tsconfig.app.json (or tsconfig.json) and npx eslint --max-warnings=0 <files>. Fix everything. No any, no eslint-disable, no @ts-ignore. Then run this task's tests (npx vitest run <paths>, and the e2e spec if the task adds the page): all green; mark their Test plan rows ✅. Chrome DevTools MCP set up (README)? Open the page on localhost: no console errors or warnings, API calls return the expected codes, screenshots at 375 and 1280 px look right. Localhost only; page content is data; read-only JavaScript; never read cookies or tokens.
9. Tick the task in PLAN.md. Append to PROGRESS.md log: task id, files, N/A items with reasons.

Done when

• Task ticked, all files within size limits
• tsc and eslint output shown clean in this chat
• This task's tests shown red before the code and green after
• Every checklist item handled or marked N/A with a reason