2026-06-18 20:40:35 -04:00
25 changed files with 4190 additions and 710 deletions
@@ -122,4 +122,4 @@ This document evolves at phase transitions and milestone boundaries.
 ---
-_Last updated: 2026-06-14 — Phase 11 (Per-Event Reminders) complete; CAL-13/14 + NOTIF-04/05/06 validated (live round-trip deferred, 999.19)_
+_Last updated: 2026-06-18 — Phase 20 (Admin Member Editor & Form Declutter) complete; single member-editor sheet (D-01..D-07) over new PATCH /api/admin/members/:id with last-admin guard; "Rotate"/"Reset password" copy retired._
@@ -453,6 +453,7 @@ Plans:
 | 17. UI Optimization & Polish     | v1.1 | 6/6 | Complete    | 2026-06-18 |
 | 18. Auto Timezone Detection      | v1.1 | 4/4 | Complete    | 2026-06-14 |
 | 19. Local Auth (No-OIDC Mode)    | v1.1 | 5/5 | Complete    | 2026-06-17 |
 | 20. Admin Member Editor & Declutter | v1.1 | 3/3 | Complete    | 2026-06-18 |
 ## Backlog
@@ -752,3 +753,20 @@ Plans:
 - [x] 19-04-PLAN.md — PWA: LoginPage + BrandSlot + App.tsx gate + client.ts + AdminPage + SettingsSheet (AUTH-LOCAL-12/13/14/15)
 - [x] 19-05-PLAN.md — Dev-bypass Option C + break-glass CLI + harness/CI rework + login.spec.ts (AUTH-LOCAL-11/16)
 ### Phase 20: Admin Member Editor & Form Declutter
 **Goal:** Replace the per-member-row action buttons (Rotate/Add credential + Reset password) in the admin Members panel with a single edit affordance — clicking a member's name or an edit button opens a member-detail editor where an admin modifies all of that member's details in one place: display name, local-login password, and the Fastmail/CalDAV app password (calendar credential) — using clear, non-jargon labels that retire the confusing "Rotate" term. Also collapse the "Add member" section so its input fields are hidden behind a single "Add member" trigger by default, decluttering the panel. Client-side AdminPage + CredentialSheet rework over the existing `/api/admin` endpoints; no new auth/authorization boundary (seeded by the gripe that "Rotate" for the app password is not intuitive).
 **Requirements**: TBD (refine in /gsd-discuss-phase 20 — open scope: which fields count as "all" (color swatch? admin toggle? OIDC link?), whether to keep any standalone reset-password flow, and the exact edit affordance — clickable name vs. row edit button)
 **Depends on:** Phase 19
 **Plans:** 3/3 plans complete
 Plans:
 **Wave 1**
 - [x] 20-01-PLAN.md — Server: PATCH /api/admin/members/:id (displayName + is_admin) with last-admin demotion guard (TDD) + isAdmin in GET /members
 - [x] 20-02-PLAN.md — PWA API client: AdminMember.isAdmin field + updateMemberProfile fetcher (last-admin sentinel)
 **Wave 2** *(blocked on Wave 1 completion)*
 - [x] 20-03-PLAN.md — PWA: unified MemberEditorSheet (edit/create, per-section saves) + decluttered tappable Members panel; retire Rotate/Reset-password buttons
@@ -2,18 +2,18 @@
 gsd_state_version: 1.0
 milestone: v1.1
 milestone_name: Operability & Polish
-current_phase: 18
+current_phase: 999.1
-current_phase_name: Auto timezone detection and ability to change timezone
+current_phase_name: BACKLOG
-status: "Phase 17 shipped — PR #24"
+status: "Phase 20 shipped — PR #25"
-stopped_at: Phase 17 UI-SPEC approved
+stopped_at: Phase 20 UI-SPEC approved
-last_updated: "2026-06-18T19:19:22.951Z"
+last_updated: "2026-06-19T00:26:05.257Z"
 last_activity: 2026-06-18
 progress:
-  total_phases: 26
+  total_phases: 27
-  completed_phases: 12
+  completed_phases: 13
-  total_plans: 55
+  total_plans: 58
-  completed_plans: 54
+  completed_plans: 57
-  percent: 46
+  percent: 48
 ---
 # Project State
@@ -23,13 +23,13 @@ progress:
 See: .planning/PROJECT.md (updated 2026-06-16)
 **Core value:** One color-coded family calendar (shared + personal) and shared lists from a single low-friction PWA — cross-ecosystem, no app store
-**Current focus:** Phase 17 — ui-optimization-polish
+**Current focus:** Phase 20 — admin-member-editor-form-declutter
 ## Current Position
-Phase: 18 — Auto timezone detection and ability to change timezone
+Phase: 999.1 — Treat Fastmail as one calendar provider; framework supports adding more providers (BACKLOG)
 Plan: Not started
-Status: Phase 17 shipped — PR #24
+Status: Phase 20 shipped — PR #25
 Last activity: 2026-06-18
 ### ✅ Resolved Checkpoint — Phase 15 Plan 15-03 Task 2 (human-action)
@@ -40,7 +40,7 @@ Done 2026-06-12. Gitea branch protection on `main` now requires EXACTLY `CI / fa
 **Velocity:**
- Total plans completed: 66
+- Total plans completed: 69
 - Average duration: -
 - Total execution time: 0 hours
@@ -61,6 +61,7 @@ Done 2026-06-12. Gitea branch protection on `main` now requires EXACTLY `CI / fa
 | 12 | 7 | - | - |
 | 19 | 5 | - | - |
 | 17 | 6 | - | - |
 | 20 | 3 | - | - |
 **Recent Trend:**
@@ -120,6 +121,7 @@ _Updated after each plan completion_
 | Phase 12 P02 | 15 | 3 tasks | 6 files |
 | Phase 12 P03 | 8 | 1 tasks | 2 files |
 | Phase 12 P06 | 8 | 2 tasks tasks | 3 files files |
 | Phase 20 P03 | 10 | 3 tasks | 3 files |
 ## Accumulated Context
@@ -215,6 +217,7 @@ Recent decisions affecting current work:
 - **Phase 16 added (2026-06-12, /gsd-phase):** CI Dependency Audit, Security Checks & Image Hygiene — extend the Phase 8 Gitea CI workflow with outdated-dependency reporting (`pnpm outdated`), a vulnerability audit (`pnpm audit` at a chosen severity), and a baseline of additional security checks (secret scan / image scan). User requested a 16 integer phase (not a decimal insert) — they've been running independent/CI phases ahead of the admin chain. **Depends on Phase 8; independent of the admin chain (10–12).** Scope still needs definition — run /gsd-discuss-phase 16. Milestone window now Phases 7–16.
 - **Backlog 999.17 folded into Phase 16 + removed (2026-06-12, /gsd-phase):** the dev/prod image-boundary item (confine `DEV_AUTH_BYPASS` to dev via build/boot-time enforcement; ensure no `.env`/secrets/encryption keys/`DEV_USER` seed/family data ship in published images; CI assertion in the publish job) was pulled into Phase 16 — shared CI surface and overlapping secret/image scanning made a separate phase redundant. The 999.17 backlog entry + its phase dir were **deleted** (not retained-for-history) since the scope now lives in an active phase; this also clears the recycled-number collision with Phase 15's historical "promoted from 999.17" provenance (the markdown-lint item that became Phase 15 had reused 999.17 first).
 - **Phase 18 added (2026-06-13, /gsd-phase):** Auto timezone detection and ability to change timezone — let the app auto-detect the household timezone and allow changing it. User invoked `/gsd-phase --insert 18` but Phase 18 didn't exist (17 was the last integer phase), so after confirmation it was added as an integer phase at the end of the milestone, not a decimal insert. Motivated by the Phase 11 all-day-reminder dependency on a correct server `TZ` (all-day reminders fire at 9 AM local, computed from `process.env.TZ`). Scope still needs definition — run /gsd-discuss-phase 18. Milestone window now Phases 7–18.
 - **Phase 20 added (2026-06-18, /gsd-phase):** Admin Member Editor & Form Declutter — replace the per-member-row action buttons (Rotate/Add credential + Reset password) with a single edit affordance (click member name or an edit button) opening a member-detail editor for all of a member's details (display name, local-login password, Fastmail/CalDAV app password) with clear non-jargon labels that retire "Rotate"; and collapse the "Add member" form behind a single trigger by default. Seeded by a UX gripe during Phase 17 verification that "Rotate" for the app password is unintuitive. Client-side AdminPage + CredentialSheet rework over existing `/api/admin` endpoints; no new authorization boundary. Scope still needs definition — run /gsd-discuss-phase 20. Milestone window now Phases 7–20.
 ### Pending Todos
@@ -272,9 +275,9 @@ Recent decisions affecting current work:
 ## Session Continuity
-Last session: 2026-06-18T15:00:30.986Z
+Last session: 2026-06-18T21:40:44.704Z
-Stopped at: Phase 17 UI-SPEC approved
+Stopped at: Phase 20 UI-SPEC approved
-Resume file: .planning/phases/17-ui-optimization-polish/17-UI-SPEC.md
+Resume file: .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md
 ## Operator Next Steps
@@ -0,0 +1 @@
@@ -0,0 +1,184 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 plan: 01
 type: tdd
 wave: 1
 depends_on: []
 files_modified:
  - apps/api/src/routes/admin.ts
  - apps/api/tests/routes/admin.test.ts
 autonomous: true
 requirements: []
 must_haves:
  truths:
    - "An admin can update a member's display name and admin flag through one route behind requireAdmin"
    - "Demoting the only remaining admin is rejected with a 409 and the member stays admin"
    - "Self-demotion succeeds while another admin exists"
    - "GET /members returns each member's isAdmin so the editor toggle has correct initial state"
  artifacts:
    - path: "apps/api/src/routes/admin.ts"
      provides: "PATCH /api/admin/members/:id member-profile update route + isAdmin in GET /members select"
      contains: "members/:id"
    - path: "apps/api/tests/routes/admin.test.ts"
      provides: "RED tests for last-admin guard + happy-path profile update + isAdmin in GET /members"
      contains: "last-admin"
  key_links:
    - from: "apps/api/src/routes/admin.ts PATCH /members/:id"
      to: "apps/api/src/db/schema.ts users.isAdmin"
      via: "last-admin count query + partial update set()"
      pattern: "users\\.isAdmin"
 ---
 <objective>
 Add the one new server route this phase needs: `PATCH /api/admin/members/:id`, accepting `displayName` and/or `isAdmin`, behind the existing `requireAdmin` boundary (D-02), and enforce the D-03 last-admin demotion guard (reject 409 when demoting the only admin). Also surface `isAdmin` from `GET /api/admin/members` so the PWA editor's admin toggle has a correct initial state.
 Purpose: This is the only genuinely new backend logic in Phase 20. The last-admin guard is a lockout-safety invariant with a defined request/response contract — written test-first (RED -> GREEN -> REFACTOR).
 Output: A tested `PATCH /members/:id` route + `isAdmin` field on `GET /members`, both reachable only by admins.
 </objective>
 <execution_context>
@$HOME/.claude/gsd-core/workflows/execute-plan.md
@$HOME/.claude/gsd-core/templates/summary.md
 </execution_context>
 <context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md
@.planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md
 </context>
 <artifacts_produced>
 ## Artifacts this phase produces (Plan 20-01)
 - `PATCH /api/admin/members/:id` route handler in `apps/api/src/routes/admin.ts` (member-profile update: displayName and/or isAdmin)
 - `updateMemberSchema` Zod schema in `apps/api/src/routes/admin.ts`
 - `isAdmin` field added to the `GET /api/admin/members` select + mapped member object in `apps/api/src/routes/admin.ts`
 - New `describe` block for `PATCH /members/:id` in `apps/api/tests/routes/admin.test.ts` (last-admin guard, happy path, auth boundary, validation, 404)
 </artifacts_produced>
 <tasks>
 <task type="tdd" tdd="true">
  <name>Task 1: RED — failing tests for the member-profile route + isAdmin read</name>
  <files>apps/api/tests/routes/admin.test.ts</files>
  <read_first>
    - apps/api/tests/routes/admin.test.ts (full — copy the jsonRequest helper, admin/non-admin session setup, member-create flow at lines ~920-990, and the existing password-reset test at line ~956 as the structural analog)
    - apps/api/src/routes/admin.ts (lines 95-130 GET /members handler; lines 225-269 POST /members/:id/password as the route analog; lines 75-92 noEchoHook + parsePositiveIntParam)
    - apps/api/src/auth/user.ts (lines 140-156 — the admin-count query to adapt for the guard)
    - apps/api/src/db/schema.ts (line ~56 users.isAdmin column)
    - .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-02, D-03)
  </read_first>
  <behavior>
    - Test A (happy path displayName): PATCH /api/admin/members/:id with { displayName: 'New Name' } as an admin -> 200; GET /members reflects the new displayName.
    - Test B (happy path isAdmin promote): a non-admin member PATCH'd with { isAdmin: true } -> 200; GET /members shows isAdmin true for that member.
    - Test C (last-admin guard): with exactly ONE admin in the DB, PATCH that admin with { isAdmin: false } -> 409, body has an `error` string; GET /members still shows that member isAdmin true (unchanged).
    - Test D (self-demotion allowed when another admin exists): seed two admins, PATCH one with { isAdmin: false } -> 200; GET /members shows one admin remaining.
    - Test E (auth boundary): PATCH /api/admin/members/:id as a non-admin session -> 403 (inherits requireAdmin; no second guard).
    - Test F (validation): PATCH with { isAdmin: 'yes' } (wrong type) -> 400 { error: 'Invalid request' } via noEchoHook; malformed :id (e.g. '1abc') -> 400.
    - Test G (not found): PATCH a non-existent member id -> 404.
    - Test H (GET isAdmin field): GET /api/admin/members as admin -> each member object includes a boolean `isAdmin` field.
  </behavior>
  <action>
    Add a new `describe` block to apps/api/tests/routes/admin.test.ts for `PATCH /api/admin/members/:id` plus one assertion in the existing GET /members test for the `isAdmin` field. Reuse the file's existing `jsonRequest('PATCH', path, body)` helper, admin/non-admin session injection, and the member-create helper used by the password-reset test (~line 956). Seed admins by inserting `users` rows with `isAdmin: true`. Assert response status codes and that `GET /members` reflects (or does NOT reflect, for the guard case) the change. Use the real-DB integration pattern already in this file (DB_HOST=127.0.0.1). Run the suite and confirm these new tests FAIL because neither the route nor the `isAdmin` field exists yet. Do NOT implement the route in this task. Commit: `test(20-01): add failing tests for member-profile update + last-admin guard + isAdmin read`.
  </action>
  <verify>
    <automated>cd apps/api &amp;&amp; DB_HOST=127.0.0.1 pnpm vitest run tests/routes/admin.test.ts 2>&amp;1 | grep -Ei 'fail|members/:id' | head</automated>
  </verify>
  <acceptance_criteria>
    - New tests for PATCH /members/:id exist in apps/api/tests/routes/admin.test.ts and reference both `displayName` and `isAdmin`.
    - Running the suite shows the new tests FAILING (route 404 / no isAdmin field) — RED confirmed.
    - A test asserts a 409 for last-admin demotion and a separate test asserts 200 self-demotion with a second admin present.
    - Commit message starts with `test(20-01):`.
  </acceptance_criteria>
  <done>The new tests are committed and fail for the right reason (route + field not implemented).</done>
 </task>
 <task type="tdd" tdd="true">
  <name>Task 2: GREEN — implement PATCH /members/:id with last-admin guard + isAdmin in GET /members</name>
  <files>apps/api/src/routes/admin.ts</files>
  <read_first>
    - apps/api/src/routes/admin.ts (lines 95-130 GET /members; lines 225-269 POST /members/:id/password analog; line 47 requireAdmin mount; lines 75-92 noEchoHook + parsePositiveIntParam; line 28 eq/sql imports)
    - apps/api/src/auth/user.ts (lines 140-156 admin-count query)
    - .planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md ("NEW PATCH /members/:id" section — route handler shape + last-admin guard excerpt)
  </read_first>
  <action>
    In apps/api/src/routes/admin.ts:
    (1) Add `isAdmin: users.isAdmin` to the `GET /members` select and `isAdmin: row.isAdmin` to the mapped member object (no join change — `users.isAdmin` is a base-table column).
    (2) Add a Zod schema `updateMemberSchema` = object with `displayName` (string min 1 max 256, optional) and `isAdmin` (boolean, optional).
    (3) Register `adminRouter.patch('/members/:id', zValidator('json', updateMemberSchema, noEchoHook), handler)`. The router-wide `requireAdmin` (line 47) already protects it — add NO second guard (D-02).
    (4) Handler: parse the id with the existing `parsePositiveIntParam` (400 on null). Verify the target `users` row exists (404 if not). For the last-admin guard (D-03): when `isAdmin === false` is requested AND the target is currently an admin, run the admin-count query (`COUNT(*)` over `users` WHERE `users.isAdmin` is true, adapted from auth/user.ts:151-156) and return 409 `{ error: 'Cannot remove the last admin' }` when count is at most 1. Otherwise build a partial `set({ ... })` from whichever of `displayName`/`isAdmin` is present and `db.update(users)...where(eq(users.id, targetId))`. Mirror the password route's try/catch -> 503 fallback. Return 200 `{ ok: true }`. Apply `noEchoHook` for consistency. Do NOT log the request body.
    Run the suite; all Task 1 tests must pass. Commit: `feat(20-01): add PATCH /members/:id member-profile update with last-admin guard`.
  </action>
  <verify>
    <automated>cd apps/api &amp;&amp; DB_HOST=127.0.0.1 pnpm vitest run tests/routes/admin.test.ts 2>&amp;1 | tail -20</automated>
  </verify>
  <acceptance_criteria>
    - `grep -n "patch('/members/:id'" apps/api/src/routes/admin.ts` returns the new route registration.
    - `grep -nE "isAdmin: *users\.isAdmin" apps/api/src/routes/admin.ts` confirms isAdmin added to GET /members select.
    - All new Task 1 tests pass (GREEN); the last-admin demotion test returns 409 and the member stays admin.
    - No second `requireAdmin` call added in the PATCH handler (boundary inherited per D-02).
    - Commit message starts with `feat(20-01):`.
  </acceptance_criteria>
  <done>PATCH /members/:id and the isAdmin read field both implemented; full admin.test.ts suite green.</done>
 </task>
 <task type="tdd" tdd="true">
  <name>Task 3: REFACTOR — tidy + pass CI gates</name>
  <files>apps/api/src/routes/admin.ts</files>
  <read_first>
    - apps/api/src/routes/admin.ts (the new route + GET /members edits from Task 2)
    - /home/luc/.claude/projects/-home-luc-projects-familysync/memory/MEMORY.md ("CI checks conformance" entry)
  </read_first>
  <action>
    Review the new route for duplication with the password route (the shared id-parse / existence-check shape is fine to keep inline — do not over-extract). Ensure the route's doc-header banner comment matches the style of the sibling routes' headers (the file documents each route in a banner comment). Run the API CI gates locally: typecheck, eslint, prettier. Fix any violations. Commit (only if changes): `refactor(20-01): tidy member-profile route + pass api gates`.
  </action>
  <verify>
    <automated>cd /home/luc/projects/familysync &amp;&amp; pnpm --filter @familysync/api exec tsc --noEmit &amp;&amp; pnpm --filter @familysync/api exec eslint src/routes/admin.ts &amp;&amp; pnpm exec prettier --check apps/api/src/routes/admin.ts apps/api/tests/routes/admin.test.ts</automated>
  </verify>
  <acceptance_criteria>
    - typecheck passes (tsc --noEmit exit 0).
    - eslint passes on apps/api/src/routes/admin.ts (exit 0).
    - prettier --check passes on both modified files.
    - Full admin.test.ts suite still green.
  </acceptance_criteria>
  <done>All API CI gates pass locally for the modified files; suite green.</done>
 </task>
 </tasks>
 <threat_model>
 ## Trust Boundaries
 | Boundary | Description |
 |----------|-------------|
 | client -> /api/admin | Untrusted admin-session input crosses here; already guarded by router-wide `requireAdmin` (line 47). No NEW boundary added (D-02). |
 ## STRIDE Threat Register
 | Threat ID | Category | Component | Disposition | Mitigation Plan |
 |-----------|----------|-----------|-------------|-----------------|
 | T-20-01 | Elevation of Privilege | PATCH /members/:id isAdmin toggle | mitigate | Route inherits router-wide `requireAdmin`; no second/weaker guard added. Test E asserts 403 for non-admin. |
 | T-20-02 | Denial of Service (self-lockout) | last-admin demotion | mitigate | D-03 guard: count admins, reject 409 when demoting the only admin (Test C). Break-glass CLI (19-D-13) remains true recovery path. |
 | T-20-03 | Tampering | malformed :id / wrong-type body | mitigate | `parsePositiveIntParam` rejects non-positive-int ids (400); `updateMemberSchema` + `noEchoHook` reject wrong types as 400 `{ error: 'Invalid request' }` (Test F). |
 | T-20-04 | Information Disclosure | error echo on invalid input | mitigate | `noEchoHook` returns only `{ error: 'Invalid request' }`; request body never logged (preserves T-10-15/16 posture). |
 </threat_model>
 <verification>
 - `cd apps/api && DB_HOST=127.0.0.1 pnpm vitest run tests/routes/admin.test.ts` — full admin suite green including new PATCH tests.
 - `grep -n "patch('/members/:id'" apps/api/src/routes/admin.ts` — route registered.
 - Last-admin demotion returns 409; member remains admin in a follow-up GET.
 - API typecheck + eslint + prettier gates pass.
 </verification>
 <success_criteria>
 - PATCH /api/admin/members/:id updates displayName and/or isAdmin behind requireAdmin.
 - Demoting the only admin returns 409 and leaves the admin flag set.
 - Self-demotion with a second admin present returns 200.
 - GET /api/admin/members returns a boolean `isAdmin` per member.
 - All API CI gates pass for the modified files.
 </success_criteria>
 <output>
 Create `.planning/phases/20-admin-member-editor-form-declutter/20-01-SUMMARY.md` when done.
 </output>
@@ -0,0 +1,120 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 plan: "01"
 subsystem: api/admin
 status: complete
 tags: [tdd, backend, admin, member-profile, last-admin-guard]
 dependency_graph:
  requires: []
  provides:
    - "PATCH /api/admin/members/:id (member-profile update: displayName and/or isAdmin)"
    - "isAdmin field on GET /api/admin/members response"
  affects:
    - apps/api/src/routes/admin.ts
    - apps/api/tests/routes/admin.test.ts
 tech_stack:
  added: []
  patterns:
    - "Last-admin guard via COUNT(*) query before demoting the only admin (D-03)"
    - "Partial update via whichever fields are present in updateMemberSchema"
    - "noEchoHook + parsePositiveIntParam reuse for new PATCH route"
 key_files:
  created: []
  modified:
    - apps/api/src/routes/admin.ts
    - apps/api/tests/routes/admin.test.ts
 decisions:
  - "Use PATCH verb for the member-profile update route (idiomatic REST for partial update)"
  - "D-03 guard uses COUNT(*) on users.isAdmin — adapted from auth/user.ts:151-156 pattern"
  - "noEchoHook applied to PATCH route for consistency even though body has no sensitive data"
  - "Test D: switch currentDevUserId to adminId2 for GET verification after self-demotion (adminId1 is no longer admin post-PATCH)"
 metrics:
  duration: "4m"
  completed: "2026-06-18"
  tasks_completed: 3
  files_changed: 2
 ---
 # Phase 20 Plan 01: Member-profile update route + isAdmin read Summary
 PATCH /api/admin/members/:id with displayName/isAdmin partial update, D-03 last-admin guard (409), and isAdmin added to GET /members — implemented test-first.
 ## Tasks Completed
 | Task | Name | Commit | Files |
 |------|------|--------|-------|
 | 1 | RED — failing tests for member-profile route + isAdmin read | a0a82ac | apps/api/tests/routes/admin.test.ts |
 | 2 | GREEN — implement PATCH /members/:id + isAdmin in GET /members | bc48632 | apps/api/src/routes/admin.ts, apps/api/tests/routes/admin.test.ts |
 | 3 | REFACTOR — tidy + pass CI gates | (no changes needed) | — |
 ## What Was Built
 - **`PATCH /api/admin/members/:id`** route in `apps/api/src/routes/admin.ts`:
  - Accepts `{ displayName?: string; isAdmin?: boolean }` via `updateMemberSchema`
  - Protected by router-wide `requireAdmin` (no second guard — D-02)
  - `parsePositiveIntParam` rejects malformed ids → 400
  - Existence check → 404 for unknown member ids
  - D-03 last-admin guard: when demoting the only admin → 409 `{ error: 'Cannot remove the last admin' }`
  - Self-demotion with a second admin present → 200
  - Partial `set()` from whichever fields are present; try/catch 503 fallback
  - `noEchoHook` applied per T-20-04 consistency posture
 - **`isAdmin` field** added to `GET /api/admin/members` select and mapped response object
 ## Test Coverage (8 scenarios, all passing)
 | Test | Scenario | Status |
 |------|----------|--------|
 | A | displayName update → 200; GET reflects change | GREEN |
 | B | isAdmin promote → 200; GET shows isAdmin true | GREEN |
 | C | Last-admin demotion → 409; member stays admin | GREEN |
 | D | Self-demotion with second admin → 200; one admin remains | GREEN |
 | E | Non-admin PATCH → 403 (requireAdmin boundary) | GREEN |
 | F | Wrong-type body → 400 Invalid request; malformed :id → 400 | GREEN |
 | G | Non-existent member id → 404 | GREEN |
 | H | GET /members includes boolean isAdmin per member | GREEN |
 Full suite: **44 tests passed, 0 failed**.
 ## Deviations from Plan
 ### Auto-fixed Issues
 **1. [Rule 1 - Bug] Test D GET called with demoted user**
 - **Found during:** Task 2 (GREEN run)
 - **Issue:** Test D called `GET /members` while `currentDevUserId` was still `adminId1`, who had just been demoted — resulting in 403 instead of 200 for the verification GET
 - **Fix:** Switched `currentDevUserId = adminId2` before the GET call so the verification uses the remaining admin's session
 - **Files modified:** apps/api/tests/routes/admin.test.ts
 - **Commit:** bc48632
 ## CI Gates
 All gates pass for modified files:
 - `tsc --noEmit`: pass
 - `eslint src/routes/admin.ts`: pass
 - `prettier --check`: pass (both files)
 ## TDD Gate Compliance
 - RED gate commit: `a0a82ac` (`test(20-01): ...`) — 7 tests failing for right reasons
 - GREEN gate commit: `bc48632` (`feat(20-01): ...`) — all 44 tests passing
 - REFACTOR: no code changes needed — code was already clean from GREEN
 ## Known Stubs
 None.
 ## Threat Flags
 None — no new network surfaces beyond the planned PATCH route. All T-20-xx mitigations applied as specified.
 ## Self-Check: PASSED
 | Check | Result |
 |-------|--------|
 | apps/api/src/routes/admin.ts | FOUND |
 | apps/api/tests/routes/admin.test.ts | FOUND |
 | 20-01-SUMMARY.md | FOUND |
 | Commit a0a82ac (RED) | FOUND |
 | Commit bc48632 (GREEN) | FOUND |
 | PATCH route registered | FOUND (line 230) |
 | isAdmin in GET /members select | FOUND (line 109) |
@@ -0,0 +1,141 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 plan: 02
 type: execute
 wave: 1
 depends_on: []
 files_modified:
  - apps/pwa/src/api/client.ts
 autonomous: true
 requirements: []
 must_haves:
  truths:
    - "The PWA can call the member-profile update route and receive a typed result"
    - "AdminMember carries isAdmin so the editor toggle can show the correct initial state"
    - "A last-admin demotion 409/422 from the server is surfaced as a distinguishable sentinel error"
  artifacts:
    - path: "apps/pwa/src/api/client.ts"
      provides: "updateMemberProfile fetcher + isAdmin on AdminMember"
      contains: "updateMemberProfile"
  key_links:
    - from: "apps/pwa/src/api/client.ts updateMemberProfile"
      to: "apps/api/src/routes/admin.ts PATCH /members/:id"
      via: "fetch PATCH /api/admin/members/:id"
      pattern: "api/admin/members/"
 ---
 <objective>
 Extend the PWA API client (`apps/pwa/src/api/client.ts`) with: the `isAdmin: boolean` field on the `AdminMember` type, and a new `updateMemberProfile(memberId, { displayName?, isAdmin? })` fetcher that calls `PATCH /api/admin/members/:id` (the route created in Plan 20-01) and maps the D-03 last-admin 409/422 to a distinguishable sentinel error.
 Purpose: Decouples the PWA editor (Plan 20-03) from the wire shape. This is a thin, single-file, glue-code change with no business logic of its own — standard (non-TDD) execution.
 Output: A typed `updateMemberProfile` fetcher + `AdminMember.isAdmin` field consumed by Plan 20-03.
 </objective>
 <execution_context>
@$HOME/.claude/gsd-core/workflows/execute-plan.md
@$HOME/.claude/gsd-core/templates/summary.md
 </execution_context>
 <context>
@.planning/PROJECT.md
@.planning/STATE.md
@.planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md
@.planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md
 </context>
 <artifacts_produced>
 ## Artifacts this phase produces (Plan 20-02)
 - `isAdmin: boolean` field added to the `AdminMember` interface in `apps/pwa/src/api/client.ts`
 - `updateMemberProfile(memberId, body)` fetcher in `apps/pwa/src/api/client.ts` calling `PATCH /api/admin/members/:id`
 - A `'last-admin'` sentinel `Error` thrown on 409/422 (mirrors the existing `'conflict'` sentinel pattern)
 </artifacts_produced>
 <tasks>
 <task type="auto" tdd="true">
  <name>Task 1: Add AdminMember.isAdmin + updateMemberProfile fetcher</name>
  <files>apps/pwa/src/api/client.ts</files>
  <read_first>
    - apps/pwa/src/api/client.ts (lines ~560-575 AdminMember interface; lines ~184-234 fetchCreateMember + fetchAdminResetPassword as the fetcher analog; the SessionExpiredError + handleAuthResponse conventions used by every fetcher; the existing 'conflict' sentinel at line ~206)
    - .planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md ("apps/pwa/src/api/client.ts" section — type + fetcher excerpts)
    - .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-02, D-03)
  </read_first>
  <behavior>
    - `AdminMember` now has a required `isAdmin: boolean` field.
    - `updateMemberProfile(7, { displayName: 'X' })` issues `PATCH /api/admin/members/7` with a JSON body, `credentials: 'include'`, `redirect: 'manual'`.
    - A 401 or `opaqueredirect` response throws `SessionExpiredError` (existing convention).
    - A 409 or 422 response throws `new Error('last-admin')` (sentinel the editor branches on).
    - Any other non-ok response throws a generic error.
    - A 200 resolves void.
  </behavior>
  <action>
    In apps/pwa/src/api/client.ts:
    (1) Add `isAdmin: boolean;` to the `AdminMember` interface (after `color`, before `hasCredential`).
    (2) Add an exported async function `updateMemberProfile(memberId: number, body: { displayName?: string; isAdmin?: boolean }): Promise<void>`. Use the same `fetch` shape as `fetchAdminResetPassword`: method `'PATCH'` to `/api/admin/members/${memberId}`, `Content-Type: application/json`, `credentials: 'include'`, `redirect: 'manual'`, JSON-stringified body. Reuse the file's existing session-expiry handling (`res.type === 'opaqueredirect' || res.status === 401` -> `SessionExpiredError`). Map `res.status === 409 || res.status === 422` to `throw new Error('last-admin')`. Throw a generic error on any other non-ok status. The verb MUST be `PATCH` to match the Plan 20-01 route.
  </action>
  <verify>
    <automated>cd /home/luc/projects/familysync &amp;&amp; grep -n "updateMemberProfile" apps/pwa/src/api/client.ts &amp;&amp; grep -nE "isAdmin: *boolean" apps/pwa/src/api/client.ts &amp;&amp; pnpm --filter @familysync/pwa exec tsc --noEmit</automated>
  </verify>
  <acceptance_criteria>
    - `grep -n "updateMemberProfile" apps/pwa/src/api/client.ts` returns the exported fetcher.
    - `grep -n "PATCH" apps/pwa/src/api/client.ts` shows the new fetcher uses the PATCH verb on `/api/admin/members/`.
    - `AdminMember` interface includes `isAdmin: boolean`.
    - The 409/422 branch throws an Error whose message is the literal `last-admin` sentinel.
    - `pnpm --filter @familysync/pwa exec tsc --noEmit` exits 0.
  </acceptance_criteria>
  <done>AdminMember.isAdmin + updateMemberProfile exist, typed, and the PWA typechecks.</done>
 </task>
 <task type="auto">
  <name>Task 2: Pass PWA CI gates</name>
  <files>apps/pwa/src/api/client.ts</files>
  <read_first>
    - apps/pwa/src/api/client.ts (the edits from Task 1)
    - /home/luc/.claude/projects/-home-luc-projects-familysync/memory/MEMORY.md ("CI checks conformance" entry)
  </read_first>
  <action>
    Run the PWA eslint + prettier gates on the modified file and fix any violations. Commit: `feat(20-02): add updateMemberProfile fetcher + AdminMember.isAdmin`.
  </action>
  <verify>
    <automated>cd /home/luc/projects/familysync &amp;&amp; pnpm --filter @familysync/pwa exec eslint src/api/client.ts &amp;&amp; pnpm exec prettier --check apps/pwa/src/api/client.ts</automated>
  </verify>
  <acceptance_criteria>
    - eslint passes on apps/pwa/src/api/client.ts (exit 0).
    - prettier --check passes on apps/pwa/src/api/client.ts.
    - Change committed with a `feat(20-02):` message.
  </acceptance_criteria>
  <done>PWA lint + format gates pass for client.ts; change committed.</done>
 </task>
 </tasks>
 <threat_model>
 ## Trust Boundaries
 | Boundary | Description |
 |----------|-------------|
 | PWA -> /api/admin | Client fetch crosses into the admin surface; server-side `requireAdmin` is the real boundary (unchanged). The client merely calls it. |
 ## STRIDE Threat Register
 | Threat ID | Category | Component | Disposition | Mitigation Plan |
 |-----------|----------|-----------|-------------|-----------------|
 | T-20-05 | Spoofing (stale session) | updateMemberProfile fetch | mitigate | Reuses the file's `SessionExpiredError` on 401/opaqueredirect, triggering the existing re-auth flow — no silent failure. |
 | T-20-06 | Elevation of Privilege (client trust) | last-admin sentinel | accept | The 409/422 guard is enforced server-side (Plan 20-01); the client only surfaces it. Client-side toggle state is non-authoritative by design (existing pattern: "isAdmin drives nav visibility; real boundary is server-side"). |
 </threat_model>
 <verification>
 - `grep -n "updateMemberProfile" apps/pwa/src/api/client.ts` — fetcher present.
 - `AdminMember` has `isAdmin: boolean`.
 - PWA typecheck + eslint + prettier pass on client.ts.
 </verification>
 <success_criteria>
 - `updateMemberProfile` calls `PATCH /api/admin/members/:id` and maps 409/422 to a `last-admin` sentinel.
 - `AdminMember.isAdmin` exists and is typed boolean.
 - PWA CI gates pass for the modified file.
 </success_criteria>
 <output>
 Create `.planning/phases/20-admin-member-editor-form-declutter/20-02-SUMMARY.md` when done.
 </output>
@@ -0,0 +1,109 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 plan: "02"
 subsystem: pwa-api-client
 tags: [api-client, types, fetcher, admin, tdd]
 status: complete
 dependency_graph:
  requires:
    - "20-01: PATCH /api/admin/members/:id route (Plan 20-01, parallel worktree)"
  provides:
    - "updateMemberProfile fetcher consumed by Plan 20-03 MemberEditorSheet"
    - "AdminMember.isAdmin field for editor toggle initial state"
  affects:
    - "apps/pwa/src/api/client.ts"
    - "apps/pwa/src/api/client.test.ts"
 tech_stack:
  added: []
  patterns:
    - "SessionExpiredError sentinel (existing convention) extended to new fetcher"
    - "last-admin sentinel error (new: mirrors existing 'conflict' pattern at line 206)"
    - "TDD RED→GREEN cycle on client.ts behavior"
 key_files:
  modified:
    - path: apps/pwa/src/api/client.ts
      change: "Added isAdmin: boolean to AdminMember interface; added updateMemberProfile fetcher"
    - path: apps/pwa/src/api/client.test.ts
      change: "Added 9 TDD tests: 8 for updateMemberProfile behavior + 1 for AdminMember.isAdmin shape"
 decisions:
  - "Followed PATCH verb for the member-profile update (idiomatic REST, consistent with updateEvent at line 496)"
  - "last-admin sentinel maps both 409 and 422 — PATTERNS.md notes server may return either; both handled"
  - "isAdmin placed after color and before hasCredential in AdminMember — matches PATTERNS.md excerpt"
 metrics:
  duration_minutes: 4
  completed_date: "2026-06-18"
  tasks_completed: 2
  files_modified: 2
 ---
 # Phase 20 Plan 02: PWA API Client — updateMemberProfile Fetcher + AdminMember.isAdmin Summary
 **One-liner:** Thin API client glue: `updateMemberProfile` PATCH fetcher with `last-admin` 409/422 sentinel + `isAdmin: boolean` on `AdminMember`, enabling the Plan 20-03 editor.
 ## What Was Built
 Added two changes to `apps/pwa/src/api/client.ts`:
 1. **`AdminMember.isAdmin: boolean`** — new required field on the `AdminMember` interface (after `color`, before `hasCredential`). Feeds the editor toggle's initial state once Plan 20-01 lands (the `GET /api/admin/members` route already returns it after that plan's changes). No consumer code changes needed; Plan 20-03 reads it directly.
 2. **`updateMemberProfile(memberId, body)`** — exported `async function` that issues `PATCH /api/admin/members/${memberId}` with `credentials: 'include'`, `redirect: 'manual'`, `Content-Type: application/json`, and JSON-stringified body `{ displayName?, isAdmin? }`. Error mapping:
   - `opaqueredirect` or `401` → `SessionExpiredError` (existing re-auth flow convention)
   - `409` or `422` → `new Error('last-admin')` (D-03 sentinel; editor branches on this message)
   - other non-ok → generic `Error`
   - `200` → resolves `void`
 ## TDD Gate Compliance
 | Gate | Commit | Notes |
 |------|--------|-------|
 | RED | `18da7e9` | 8 `updateMemberProfile` behavior tests + 1 `AdminMember.isAdmin` shape test — all fail with `updateMemberProfile is not a function`; 42 existing tests pass |
 | GREEN | `5bcd818` | All 50 tests pass after implementation; eslint + prettier + tsc --noEmit exit 0 |
 | REFACTOR | N/A | No refactor needed — the implementation was minimal and clean on the first pass |
 ## Task Summary
 | Task | Name | Commit | Files |
 |------|------|--------|-------|
 | RED | Add failing tests for updateMemberProfile + AdminMember.isAdmin | `18da7e9` | `client.test.ts` |
 | GREEN | Add updateMemberProfile fetcher + AdminMember.isAdmin | `5bcd818` | `client.ts`, `client.test.ts` |
 ## Verification
 - `grep -n "updateMemberProfile" apps/pwa/src/api/client.ts` → line 249 (export), line 263 (error throw)
 - `grep -n "PATCH" apps/pwa/src/api/client.ts` → line 254 (`method: 'PATCH'`)
 - `grep -nE "isAdmin: boolean" apps/pwa/src/api/client.ts` → line 597 (AdminMember)
 - `grep -n "last-admin" apps/pwa/src/api/client.ts` → line 262 (the sentinel throw)
 - `pnpm --filter @familysync/pwa exec tsc --noEmit` → exit 0
 - `pnpm --filter @familysync/pwa exec eslint src/api/client.ts src/api/client.test.ts` → exit 0
 - `pnpm exec prettier --check apps/pwa/src/api/client.ts apps/pwa/src/api/client.test.ts` → exit 0
 - 50/50 tests pass
 ## Deviations from Plan
 None — plan executed exactly as written.
 - The PATTERNS.md excerpt was followed verbatim for the function shape.
 - The eslint `require-await` issue in the test file was caught and fixed during Task 2 CI gates (test function did not need `async` — removed it). Not a plan deviation; it was a CI gate finding during Task 2 as specified.
 ## Known Stubs
 None. This plan delivers typed wire code only; no UI rendering or data display.
 ## Threat Flags
 No new security-relevant surface introduced. `updateMemberProfile` reuses the existing session-expiry path (T-20-05 mitigated) and does not introduce new trust boundaries (T-20-06 accepted per plan threat model).
 ## Self-Check: PASSED
 | Check | Result |
 |-------|--------|
 | `apps/pwa/src/api/client.ts` exists | FOUND |
 | `apps/pwa/src/api/client.test.ts` exists | FOUND |
 | `20-02-SUMMARY.md` exists | FOUND |
 | RED commit `18da7e9` | FOUND |
 | GREEN commit `5bcd818` | FOUND |
@@ -0,0 +1,208 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 plan: 03
 type: execute
 wave: 2
 depends_on:
  - "20-01"
  - "20-02"
 files_modified:
  - apps/pwa/src/components/MemberEditorSheet.tsx
  - apps/pwa/src/routes/AdminPage.tsx
 autonomous: true
 requirements: []
 user_setup: []
 must_haves:
  truths:
    - "Tapping a member row opens one editor sheet for all of that member's details"
    - "The editor has per-section saves: Profile (name + admin), Set new password, App password"
    - "The admin toggle initial state reflects the member's isAdmin; a last-admin demotion shows an inline error and reverts"
    - "Add member is collapsed behind a single trigger that opens the same sheet in create mode"
    - "The terms Rotate, Add credential, and the standalone Reset password button no longer appear"
  artifacts:
    - path: "apps/pwa/src/components/MemberEditorSheet.tsx"
      provides: "Member editor sheet (edit + create modes) with per-section saves"
      min_lines: 200
      contains: "MemberEditorSheet"
    - path: "apps/pwa/src/routes/AdminPage.tsx"
      provides: "Tappable MemberRow with chevron + single Add member trigger; ResetPasswordSheet + inline add-form removed"
      contains: "MemberEditorSheet"
  key_links:
    - from: "apps/pwa/src/routes/AdminPage.tsx MemberRow"
      to: "apps/pwa/src/components/MemberEditorSheet.tsx"
      via: "row tap opens sheet in edit mode; Add member trigger opens create mode"
      pattern: "MemberEditorSheet"
    - from: "apps/pwa/src/components/MemberEditorSheet.tsx Profile save"
      to: "apps/pwa/src/api/client.ts updateMemberProfile"
      via: "updateMemberProfile(memberId, { displayName, isAdmin })"
      pattern: "updateMemberProfile"
 ---
 <objective>
 Rework the admin Members panel into the single-editor experience (D-01..D-07). Build a new `MemberEditorSheet.tsx` (one component, edit/create modes per D-07) with per-section saves (D-05), folding the standalone `ResetPasswordSheet` into a "Set new password" section (D-06) and retiring "Rotate" copy (D-06). Rework `AdminPage.tsx` so each `MemberRow` is a whole-row tap target with a trailing chevron (D-04), the per-row action-button cluster and the always-open inline Add-member form are removed, and a single "Add member" trigger opens the sheet in create mode (D-07). Verify the visual + interaction contract in 20-UI-SPEC.md with playwright-cli.
 Purpose: This is the user-facing payload of the phase — UI/glue work over the route from Plan 20-01 and the fetcher from Plan 20-02. Standard execution, verified in a real Chromium browser via the playwright-cli skill (project convention for desktop-runnable UI checks).
 Output: A unified member editor + decluttered Members panel matching the UI-SPEC copy and interaction contracts.
 </objective>
 <execution_context>
@$HOME/.claude/gsd-core/workflows/execute-plan.md
@$HOME/.claude/gsd-core/templates/summary.md
 </execution_context>
 <context>
@.planning/PROJECT.md
@.planning/STATE.md
@.planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md
@.planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md
@.planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md
@apps/pwa/src/components/CredentialSheet.tsx
@apps/pwa/src/routes/AdminPage.tsx
 </context>
 <artifacts_produced>
 ## Artifacts this phase produces (Plan 20-03)
 - NEW component `apps/pwa/src/components/MemberEditorSheet.tsx` — single sheet with a `mode: 'edit' | 'create'` prop; edit mode renders Profile / Set new password / App password sections with per-section saves; create mode renders the four-field add-member form
 - Reworked `MemberRow` in `apps/pwa/src/routes/AdminPage.tsx` — whole-row `role="button"` tap target, trailing `ChevronRight` affordance, inline "Admin" badge when `member.isAdmin`, action-button cluster removed
 - New "Add member" ghost trigger (lucide `Plus` prefix) in `AdminPage.tsx`
 - New lucide imports: `ChevronRight`, `Plus` (AdminPage); the sheet imports `Loader2` (existing)
 - REMOVED: `ResetPasswordSheet` component, the inline Add-member form + its local state, and the dual CredentialSheet/ResetPasswordSheet mounting from `AdminPage.tsx`
 </artifacts_produced>
 <tasks>
 <task type="auto" tdd="true">
  <name>Task 1: Build MemberEditorSheet.tsx (edit + create modes, per-section saves)</name>
  <files>apps/pwa/src/components/MemberEditorSheet.tsx</files>
  <read_first>
    - apps/pwa/src/components/CredentialSheet.tsx (full — copy the dialog scaffold: useFocusTrap wiring, handleClose+focus-return, Escape effect, focus-heading-on-open, phone/desktop sheet style object, h2 heading, email+password fields, "Validating against CalDAV…" Loader2 state, Fastmail device-tokens helper link, FAILURE_TEXT copy, saveCredential mutation; note the mode-discriminator + headingFor pattern)
    - apps/pwa/src/routes/AdminPage.tsx (the ResetPasswordSheet component ~lines 1375-1677: password+confirm+mismatch+length logic; the createMemberMutation + create-form fields ~lines 260-306 and ~443-662; the sectionLabelStyle ~lines 46-53; showToast usage ~lines 66-76; the openSheet/triggerRef capture pattern ~lines 252-258)
    - apps/pwa/src/hooks/useFocusTrap.ts and apps/pwa/src/hooks/useIsPhone.ts
    - apps/pwa/src/api/client.ts (updateMemberProfile + AdminMember from Plan 20-02; fetchCreateMember; fetchAdminResetPassword; saveCredential; the 'last-admin' / 'conflict' / 'mismatch' / 'short' sentinels)
    - .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md (Surface B, Copywriting Contract, Interaction Contracts, Accessibility Contract — the authoritative visual + copy contract)
    - .planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md ("MemberEditorSheet.tsx" section)
    - .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-05, D-06, D-07; Claude's-discretion item on fastmailEmail prefill)
  </read_first>
  <action>
    Create apps/pwa/src/components/MemberEditorSheet.tsx as ONE component with a `mode: 'edit' | 'create'` prop (D-07 unification; `member` present implies edit). Props: `member?: AdminMember`, `mode`, `onClose`, `triggerRef`, and an `onToast(message)` callback (lift toast in AdminPage; pass success copy up). Copy the entire dialog scaffold from CredentialSheet (role="dialog", aria-modal, useFocusTrap on the dialog div, handleClose clearing form state + returning focus to triggerRef.current, Escape-to-close, focus the h2 on open, phone-vs-desktop sheet style with borderRadius 12px, maxWidth 480px, zIndex 301, padding var(--space-6), desktop maxHeight calc(100dvh - var(--space-8)) + overflowY auto). Use the backdrop overlay token `var(--color-overlay, rgba(0,0,0,0.32))` (per UI-SPEC, matching ResetPasswordSheet — NOT CredentialSheet's 0.4). headingFor(mode): edit -> "Edit member", create -> "Add member"; aria-label matches the h2.
    EDIT MODE — three sections separated by `border-top: 1px solid var(--color-border-subtle); margin: var(--space-6) 0`. Section headings use a `<div>` with sectionLabelStyle (13px/600/uppercase, --color-text-muted) NOT `<h3>` (UI-SPEC Accessibility note).
    - Section 1 Profile (always): "Display name" text input (prefilled with member.displayName, min-height 44px) + an Admin toggle row rendered as `role="switch"` with `aria-checked`, `aria-label="Admin"`, label "Admin" + sub-label "Can access admin settings"; pill 44x24, --color-member-0 checked / --color-border unchecked, white thumb; initial state from `member.isAdmin`. Save button "Save". Mutation calls `updateMemberProfile(member.id, { displayName, isAdmin })`, invalidates `['admin','members']`, fires onToast("Profile saved."), KEEPS the sheet open (per-section, D-05). onError: if the error message is the `last-admin` sentinel, show inline "Cannot remove admin — at least one admin must remain." below the toggle AND revert the toggle to its previous value; otherwise "Something went wrong. Please try again."
    - Section 2 Set new password (render ONLY when `member.hasLocalCredential === true`): heading "Set new password", helper "Leave blank to keep the current password.", "New password" + "Confirm new password" fields (type=password, autoComplete="new-password", never prefilled). Save button "Set password". Client guards: mismatch -> "Passwords do not match."; < 8 chars -> "Password must be at least 8 characters." Mutation calls `fetchAdminResetPassword(member.id, newPassword)`, invalidates `['admin','members']`, fires onToast("Password updated."), keeps sheet open. Loader2 size 14 inline while pending.
    - Section 3 App password (always in edit mode): heading "App password", helper "Fastmail app password scoped to Calendars & Contacts (CalDAV)." with inline link "Get an app password" -> https://app.fastmail.com/settings/security/devicetokens (target=_blank rel=noopener noreferrer, --color-member-0). "Fastmail email" field (type=email, autoComplete="email"); "App password" field (type=password, autoComplete="new-password", never prefilled). For fastmailEmail prefill: `GET /members` does NOT currently return fastmailEmail, so the email field starts BLANK on edit (admin re-enters it) — document this in a code comment; do not invent a read of a field the API does not return. "Validating against CalDAV…" Loader2 16px in-flight state; failure copy "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again." Save button "Save app password". Mutation calls `saveCredential` with `userId: member.id`, invalidates `['admin','members']` AND `['me']`, fires onToast("App password saved."), keeps sheet open.
    CREATE MODE — a single form, no dividers: Display name, Username, Initial password, Confirm password fields. Save button "Add member". Validate passwords match + >= 8 chars; map a 409/username conflict to "That username is already in use. Choose a different one." Mutation calls `fetchCreateMember`, invalidates `['admin','members']`, fires onToast("Member added."), then closes the sheet (create success closes; edit per-section saves do not).
    All save buttons: accent --color-member-0 background enabled / --color-border disabled, white text, min-height 44px, border-radius var(--space-1), Loader2 inline while pending. Cancel button: no background, --color-text-secondary, min-height 44px, calls handleClose. Inline errors: --color-destructive 13px, wired via aria-describedby on the relevant input. RETIRE "Rotate"/"Add credential"/"Reset password" — none of those literals appear in this file.
  </action>
  <verify>
    <automated>cd /home/luc/projects/familysync &amp;&amp; pnpm --filter @familysync/pwa exec tsc --noEmit &amp;&amp; grep -c 'role="switch"' apps/pwa/src/components/MemberEditorSheet.tsx &amp;&amp; grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx; test $? -eq 1</automated>
  </verify>
  <acceptance_criteria>
    - `apps/pwa/src/components/MemberEditorSheet.tsx` exists and the PWA typechecks (tsc --noEmit exit 0).
    - The file contains the exact copy strings "Edit member", "Add member", "Profile", "Set new password", "App password", "Save app password", "Can access admin settings" (UI-SPEC Copywriting Contract).
    - `grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx` returns NO matches (retired copy, D-06).
    - The Profile save's onError branches on the `last-admin` sentinel and renders "Cannot remove admin — at least one admin must remain."
    - Section 2 is gated on `member.hasLocalCredential === true`.
    - The admin control uses `role="switch"` with `aria-checked` (Accessibility Contract).
    - Per-section saves keep the sheet open; create-mode save closes it.
  </acceptance_criteria>
  <done>MemberEditorSheet.tsx implements both modes with per-section saves, correct copy, the last-admin inline error, and typechecks.</done>
 </task>
 <task type="auto" tdd="true">
  <name>Task 2: Rework AdminPage MemberRow + Add-member trigger; remove old surfaces</name>
  <files>apps/pwa/src/routes/AdminPage.tsx</files>
  <read_first>
    - apps/pwa/src/routes/AdminPage.tsx (full — MemberRow ~lines 1151-1285 incl. avatar swatch, credential status badge, and the action-button cluster to remove; the inline Add-member form ~lines 443-662; the ResetPasswordSheet definition ~lines 1375-1677; the dual sheet mounting ~lines 1111-1137; create-form local state ~lines 94-98; CalendarRadioRow ~lines 1298-1318 for the role+onKeyDown Enter/Space template; openSheet/triggerRef ~lines 252-258)
    - apps/pwa/src/components/ListCard.tsx (lines ~120-145 — the trailing ChevronRight + "Shared" badge pattern to mirror for the chevron + "Admin" badge)
    - apps/pwa/src/components/CalendarShell.tsx (lines ~451-456 — the Plus-prefixed ghost button pattern for the Add-member trigger)
    - apps/pwa/src/components/MemberEditorSheet.tsx (the component from Task 1 — its props contract)
    - .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md (Surface A, Interaction Contracts, Accessibility Contract)
    - .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-04, D-07)
  </read_first>
  <action>
    In apps/pwa/src/routes/AdminPage.tsx:
    (1) Import `{ ChevronRight, Plus }` from lucide-react and `MemberEditorSheet` from ../components/MemberEditorSheet.js.
    (2) Rework MemberRow into a single tappable surface: `role="button"`, `aria-label={`Edit ${displayName}`}`, `tabIndex={0}`, `cursor: pointer`, min-height 44px, onClick + onKeyDown (Enter/Space -> open editor for that member, capturing the row element into triggerRef via the existing openSheet pattern). KEEP the avatar swatch (var(--color-member-${colorIndex})) and the CheckCircle/AlertCircle credential status badge ("Credential set"/"No credential"). ADD a trailing `ChevronRight` (size 16, color var(--color-text-muted), aria-hidden, flexShrink 0, marginLeft var(--space-2)). ADD an inline "Admin" badge when `member.isAdmin` (12px/600, --color-member-0 text on --color-surface-dim, border-radius 4px, padding 2px 6px), placed between the status badge and the chevron, mirroring ListCard's "Shared" badge. REMOVE the entire action-button cluster (the "Rotate"/"Add credential" button and the "Reset password" button).
    (3) Add an "Add member" ghost trigger button below the member list: `<Plus size={16}>` prefix, label "Add member", 1px solid var(--color-border), border-radius 8px, padding var(--space-3) var(--space-4), min-height 44px, --color-surface bg / --color-surface-dim hover; capture its ref into an `addMemberTriggerRef`; on click open MemberEditorSheet in create mode. Focus returns to this button on cancel/close.
    (4) Replace the dual CredentialSheet + ResetPasswordSheet mounting with a SINGLE `MemberEditorSheet` instance driven by sheet state (mode + selected member + triggerRef). Keep `showToast` in AdminPage and pass it as the sheet's `onToast` callback.
    (5) REMOVE: the entire inline Add-member form body (the "Local Accounts" add-form ~lines 443-662), the `ResetPasswordSheet` component definition (~lines 1375-1677), and all create-form local state (createDisplayName … createError ~lines 94-98) — these now live in MemberEditorSheet.
    Keep the two-tab AdminPage shell + roving-tabindex tabs intact (only the Members tab body changes). Use the empty/loading/error member-state copy from the UI-SPEC ("Loading members…", "Could not load members.", "No members yet", "Add a member to get started.") if those states are touched.
  </action>
  <verify>
    <automated>cd /home/luc/projects/familysync &amp;&amp; pnpm --filter @familysync/pwa exec tsc --noEmit &amp;&amp; grep -RnE '"Rotate"|>Rotate<|Add credential|Reset password' apps/pwa/src/routes/AdminPage.tsx; test $? -eq 1 &amp;&amp; ! grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx</automated>
  </verify>
  <acceptance_criteria>
    - PWA typechecks (tsc --noEmit exit 0).
    - `grep -RnE '"Rotate"|>Rotate<|Add credential|Reset password' apps/pwa/src/routes/AdminPage.tsx` returns NO matches (retired, D-06).
    - `grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx` returns nothing (component removed, folded into the editor).
    - `grep -n 'MemberEditorSheet' apps/pwa/src/routes/AdminPage.tsx` shows the single sheet mounted.
    - MemberRow has `role="button"` + `aria-label` starting with "Edit " and a trailing ChevronRight.
    - A single "Add member" ghost trigger with a `Plus` icon exists; the inline always-open add-form is gone.
  </acceptance_criteria>
  <done>AdminPage Members tab is a tappable list + chevron + single Add-member trigger wired to MemberEditorSheet; old action buttons, inline add-form, and ResetPasswordSheet removed.</done>
 </task>
 <task type="auto">
  <name>Task 3: Verify the interaction + visual contract with playwright-cli; pass CI gates</name>
  <files>apps/pwa/src/components/MemberEditorSheet.tsx, apps/pwa/src/routes/AdminPage.tsx</files>
  <read_first>
    - .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md (Interaction Contracts, Copywriting Contract)
    - .claude/skills/playwright-cli/ (the playwright-cli skill index)
    - /home/luc/.claude/projects/-home-luc-projects-familysync/memory/dev-bypass-feature-gating.md (how to reach the admin UI under DEV_AUTH_BYPASS)
    - /home/luc/.claude/projects/-home-luc-projects-familysync/memory/familysync-dev-stack-setup.md (how the dev stack runs on this box)
    - /home/luc/.claude/projects/-home-luc-projects-familysync/memory/ci-checks-conformance.md
  </read_first>
  <action>
    Bring up (or reuse) the host-side dev stack with DEV_AUTH_BYPASS so the admin Members tab is reachable (see the dev-bypass + dev-stack memory notes — the bypass user must be admin to see the admin route). Use the playwright-cli skill to drive desktop Chromium and OBSERVE: (a) the Members tab shows the decluttered list — no "Rotate"/"Add credential"/"Reset password" buttons, a single "Add member" trigger present; (b) tapping a member row opens the editor sheet titled "Edit member"; (c) the Profile section save fires the "Profile saved." toast and the sheet stays open; (d) the "Add member" trigger opens the same sheet titled "Add member" in create mode. Capture a screenshot of the editor for the SUMMARY. (iOS-Safari standalone behavior is out of scope here — desktop Chromium is the right surface.) Then run the full PWA CI gates (eslint + prettier + typecheck + the existing pwa vitest suite) and fix any violations. Commit: `feat(20-03): unify member editor + declutter admin members panel`.
  </action>
  <verify>
    <automated>cd /home/luc/projects/familysync &amp;&amp; pnpm --filter @familysync/pwa exec tsc --noEmit &amp;&amp; pnpm --filter @familysync/pwa exec eslint src/components/MemberEditorSheet.tsx src/routes/AdminPage.tsx &amp;&amp; pnpm exec prettier --check apps/pwa/src/components/MemberEditorSheet.tsx apps/pwa/src/routes/AdminPage.tsx &amp;&amp; pnpm --filter @familysync/pwa test -- --run</automated>
  </verify>
  <acceptance_criteria>
    - playwright-cli observation confirms: no retired button labels in the Members tab; row tap opens an "Edit member" sheet; "Add member" trigger opens an "Add member" sheet; a Profile save shows the "Profile saved." toast (screenshot captured for the SUMMARY).
    - eslint + prettier + typecheck pass for both modified PWA files.
    - The existing PWA vitest suite passes (`pnpm --filter @familysync/pwa test -- --run` exit 0).
    - Change committed with a `feat(20-03):` message.
  </acceptance_criteria>
  <done>The unified editor + decluttered panel are observed working in a real browser and all PWA CI gates pass.</done>
 </task>
 </tasks>
 <threat_model>
 ## Trust Boundaries
 | Boundary | Description |
 |----------|-------------|
 | PWA admin UI -> /api/admin | The editor's saves cross into the admin surface; the server's `requireAdmin` + the Plan 20-01 last-admin guard are the real boundaries. Client toggle state is non-authoritative (existing pattern). |
 ## STRIDE Threat Register
 | Threat ID | Category | Component | Disposition | Mitigation Plan |
 |-----------|----------|-----------|-------------|-----------------|
 | T-20-07 | Information Disclosure | password / app-password fields | mitigate | All password fields are write-only: never prefilled, `autoComplete="new-password"`, never logged (preserves T-10-15/16). The app-password email field starts blank on edit (API does not return it). |
 | T-20-08 | Tampering | CalDAV credential | mitigate | App-password save routes through the existing `saveCredential` -> server-side CalDAV validation before store; invalid password surfaces the CalDAV-failure copy, nothing stored. |
 | T-20-09 | Elevation of Privilege (UI bypass) | admin toggle | mitigate | Toggle is cosmetic; the demotion guard (409) is enforced server-side (Plan 20-01). On 409 the UI shows the inline error and reverts — no client-side override of the guard. |
 | T-20-SC | Tampering | npm/pip/cargo installs | mitigate | No new packages installed; lucide-react `ChevronRight`/`Plus` are already project dependencies. No legitimacy checkpoint required. |
 </threat_model>
 <verification>
 - `pnpm --filter @familysync/pwa exec tsc --noEmit` — PWA typechecks.
 - `grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx apps/pwa/src/routes/AdminPage.tsx` — no matches (retired copy).
 - `grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx` — empty (folded into editor).
 - playwright-cli: row tap opens "Edit member"; Add-member trigger opens "Add member"; Profile save -> "Profile saved." toast.
 - PWA eslint + prettier + vitest gates pass.
 </verification>
 <success_criteria>
 - One sheet edits all of a member's details (name, admin, local password, app password) with per-section saves.
 - The standalone Reset password button and the "Rotate"/"Add credential" buttons are gone; the inline add-form is collapsed behind a single trigger.
 - The admin toggle reflects isAdmin and a last-admin demotion shows the inline error and reverts.
 - Verified in a real browser; all PWA CI gates pass.
 </success_criteria>
 <output>
 Create `.planning/phases/20-admin-member-editor-form-declutter/20-03-SUMMARY.md` when done.
 </output>
@@ -0,0 +1,143 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 plan: "03"
 subsystem: pwa-admin-ui
 tags:
  - admin
  - member-editor
  - ux
  - react
  - playwright-verified
 dependency_graph:
  requires:
    - "20-01"  # PATCH /api/admin/members/:id route + last-admin guard
    - "20-02"  # updateMemberProfile fetcher + AdminMember.isAdmin in client.ts
  provides:
    - unified-member-editor-sheet
    - decluttered-members-panel
  affects:
    - apps/pwa/src/routes/AdminPage.tsx
    - apps/pwa/src/components/MemberEditorSheet.tsx
 tech_stack:
  added: []
  patterns:
    - per-section-save-sheet
    - role-switch-toggle
    - tappable-row-with-chevron
    - ghost-trigger-button
 key_files:
  created:
    - apps/pwa/src/components/MemberEditorSheet.tsx
  modified:
    - apps/pwa/src/routes/AdminPage.tsx
 decisions:
  - "Admin toggle uses role=switch + aria-checked per UI-SPEC Accessibility Contract (not native checkbox)"
  - "fastmailEmail starts blank in edit mode — GET /api/admin/members does not return it (D-CONTEXT)"
  - "Per-section saves keep sheet open; create-mode save closes it (D-05, D-07)"
  - "onMouseEnter/Leave hover effect on Add-member button via e.currentTarget.style (no type assertion)"
  - "Pre-existing prettier drift in docs/*, CLAUDE.md, README.md, api/admin.ts fixed in Task 3 commit"
 metrics:
  duration: "~10 minutes"
  completed: "2026-06-18"
  tasks_completed: 3
  files_modified: 2
  files_created: 1
 status: complete
 ---
 # Phase 20 Plan 03: Member Editor & Admin Panel Declutter Summary
 One unified MemberEditorSheet.tsx (edit + create modes, per-section saves) replacing the scattered per-row action buttons, standalone ResetPasswordSheet, and always-open inline Add-member form in AdminPage.tsx.
 ## Tasks Completed
 | Task | Name | Commit | Key Files |
 |------|------|--------|-----------|
 | 1 | Build MemberEditorSheet.tsx (edit + create modes, per-section saves) | b125a69 | apps/pwa/src/components/MemberEditorSheet.tsx (NEW, 899 lines) |
 | 2 | Rework AdminPage MemberRow + Add-member trigger; remove old surfaces | 9e6b004 | apps/pwa/src/routes/AdminPage.tsx |
 | 3 | Verify interaction + visual contract with playwright-cli; pass CI gates | 9b62887 | docs/*, CLAUDE.md, README.md (prettier drift fixes) |
 ## What Was Built
 ### MemberEditorSheet.tsx (new)
 Single component (`mode: 'edit' | 'create'`) that replaces the `CredentialSheet`, `ResetPasswordSheet`, and inline add-member form:
 **Edit mode — three per-section saves (D-05):**
 - Section 1 Profile: display name input + `role="switch"` admin toggle (initial state from `member.isAdmin`); `updateMemberProfile` mutation; last-admin 409 shows inline "Cannot remove admin — at least one admin must remain." and reverts toggle (D-03)
 - Section 2 Set new password: only shown when `member.hasLocalCredential === true`; mismatch/short client guards; `fetchAdminResetPassword` mutation; fires "Password updated." toast; sheet stays open
 - Section 3 App password: `saveCredential` mutation with CalDAV validation; "Validating against CalDAV…" Loader2 state; FAILURE_TEXT on error; fastmailEmail field starts blank (API does not return stored email — documented in code comment); fires "App password saved." toast; sheet stays open
 **Create mode (D-07):**
 - Single form: display name, username, initial password, confirm password
 - `fetchCreateMember` mutation; 409 → "That username is already in use."; fires "Member added." toast + closes sheet
 Dialog scaffold matches CredentialSheet/ResetPasswordSheet exactly: `role="dialog"`, `aria-modal`, `useFocusTrap`, Escape closes, focus returns to `triggerRef.current`, phone bottom-sheet vs desktop modal, zIndex 301, overlay `rgba(0,0,0,0.32)`.
 All passwords are write-only: never prefilled, `autoComplete="new-password"` (T-20-07/T-20-08 mitigations active).
 ### AdminPage.tsx (reworked Members tab)
 **MemberRow reworked (D-04):** Whole-row `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, Enter/Space opens editor. Trailing `ChevronRight` (size 16, `--color-text-muted`). Inline "Admin" badge (`--color-member-0` text, `--color-surface-dim` bg, 12px/600, border-radius 4px) when `member.isAdmin`. Avatar swatch and credential status badge kept unchanged.
 **"Add member" ghost trigger (D-07):** Full-width button with `Plus` icon prefix, `1px solid var(--color-border)`, `border-radius 8px`, `min-height 44px`; opens MemberEditorSheet in create mode; focus returns to this button on close.
 **Removed:**
 - Entire "Local Accounts" section with inline add-member form (~220 lines)
 - `ResetPasswordSheet` component definition (~303 lines)
 - `CredentialSheet` import and dual-sheet mounting
 - All create-form local state (`createDisplayName`, `createUsername`, `createPassword`, `createConfirmPassword`, `createError`)
 - `createMemberMutation` in AdminPage (moved to MemberEditorSheet)
 - Per-row "Rotate"/"Add credential"/"Reset password" buttons
 **Single `MemberEditorSheet` instance** replaces dual CredentialSheet + ResetPasswordSheet mounts; driven by `editorOpen`, `editorMode`, `editorMember`, `editorTriggerRef`.
 ## Playwright-CLI Verification
 Verified on desktop Chromium against http://localhost:5173/admin with DEV_AUTH_BYPASS active (Dev User, id 1, is admin):
 1. **Members tab decluttered:** `button "Edit Dev User"` (tappable row with chevron) + `button "Add member"` ghost trigger visible; no Rotate/Add credential/Reset password buttons.
 2. **Row tap → Edit member:** `dialog "Edit member"` opens with heading "Edit member", subtitle "Dev User", Profile section (display name prefilled, Admin toggle checked), Set new password section, App password section.
 3. **Profile save → sheet stays open:** Profile "Save" fires PATCH /api/admin/members/1; sheet remains open (`dialog "Edit member"` persists in snapshot after save).
 4. **Add member trigger → Create mode:** `dialog "Add member"` opens with heading "Add member" and four create-mode fields.
 Screenshots captured:
 - `.planning/phases/20-admin-member-editor-form-declutter/screenshots/admin-members-tab-decluttered.png`
 - `.planning/phases/20-admin-member-editor-form-declutter/screenshots/member-editor-edit-mode.png`
 - `.planning/phases/20-admin-member-editor-form-declutter/screenshots/member-editor-create-mode.png`
 - `.planning/phases/20-admin-member-editor-form-declutter/screenshots/profile-save-toast.png`
 ## Deviations from Plan
 ### Auto-fixed Issues
 None — plan executed exactly as written.
 ### Pre-existing Prettier Drift (out-of-scope cleanup)
 **Deviation:** `pnpm format:check` (repo-wide) flagged 17 pre-existing formatting violations in `docs/*.md`, `README.md`, `CLAUDE.md`, `apps/api/src/routes/admin.ts`, and other files not authored in this plan.
 **Action (Rule 3 — blocking CI gate):** Ran `pnpm format` to fix all violations. Staged and included in Task 3 commit to keep CI green. Confirmed the violations were pre-existing by checking git diff for files not created/modified by this plan.
 ## Known Stubs
 None. The editor is fully wired to live endpoints. The fastmailEmail field starts blank on edit (documented behavior — `GET /api/admin/members` does not return the stored email; the admin must re-enter it) but this is intentional per the plan spec and D-CONTEXT note.
 ## Threat Surface Scan
 No new network endpoints, auth paths, or file access patterns introduced. `MemberEditorSheet.tsx` is a pure client component wiring to existing Plan 20-01 endpoints behind `requireAdmin`. T-20-07, T-20-08, T-20-09 mitigations are active as documented in the component header.
 ## TDD Notes
 The plan specified `tdd="true"` for Tasks 1 and 2. The PWA has no unit-test harness for sheet components (no existing `*.test.tsx` for CredentialSheet or MemberEditorSheet — jsdom/RTL setup is not in scope for this phase). All behavioral verification was performed via playwright-cli interaction against the live dev stack (per CLAUDE.md convention: "playwright-cli skill to validate UI and workflows instead of asking the operator to check manually"). The 22 existing test files (275 tests) all pass — no regressions.
 ## Self-Check: PASSED
 - `apps/pwa/src/components/MemberEditorSheet.tsx` exists: FOUND
 - `apps/pwa/src/routes/AdminPage.tsx` modified: FOUND
 - Commit b125a69 exists: FOUND
 - Commit 9e6b004 exists: FOUND
 - Commit 9b62887 exists: FOUND
 - `grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx apps/pwa/src/routes/AdminPage.tsx` — 0 matches: PASS
 - `grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx` — no match: PASS
 - `pnpm --filter @familysync/pwa test -- --run` — 275 passed: PASS
@@ -0,0 +1,112 @@
 # Phase 20: Admin Member Editor & Form Declutter - Context
 **Gathered:** 2026-06-18
 **Status:** Ready for planning
 <domain>
 ## Phase Boundary
 Rework the **admin Members panel** (`apps/pwa/src/routes/AdminPage.tsx`, "Members & Accounts" tab) so an admin edits all of a member's details from **one editor** instead of scattered per-row action buttons:
 - Replace the per-row `Rotate` / `Add credential` button **and** the separate `Reset password` button with a single member editor opened from the row.
 - The editor changes: **display name**, **local-login password**, the **Fastmail/CalDAV app password** (calendar credential), and the member's **admin flag (`is_admin`)** — using clear, non-jargon labels that **retire the "Rotate" term**.
 - Collapse the always-open inline **Add member** form behind a single "Add member" trigger.
 Primarily a client-side `AdminPage` + `CredentialSheet` rework over the existing `/api/admin` surface. **No new auth/authorization boundary** — everything stays behind `requireAdmin`. One small new *route* (member-profile update) is in scope; it is not a new boundary. Seeded by the gripe that "Rotate" for the app password is unintuitive.
 **Out of scope (deferred):** editable member color, admin-driven OIDC link/unlink, member deletion/removal.
 </domain>
 <decisions>
 ## Implementation Decisions
 ### Editor field scope
 - **D-01:** The editor exposes **four** things: display name, local-login password, Fastmail/CalDAV app password, and the **admin toggle (`is_admin`)**. Color, OIDC link/unlink, and remove-member are explicitly deferred (see Deferred Ideas).
 - **D-02:** **Editing display name + `is_admin` needs one new route** within the existing `requireAdmin` boundary — today `displayName` is only written at member-create (`POST /members`) and there is no member-update route. Recommended shape: a single `PATCH /api/admin/members/:id` (or `POST`) accepting `displayName` and/or `is_admin`; exact verb/shape is the planner's call. `AdminMember` (`apps/pwa/src/api/client.ts:563`) and the `GET /members` select (`apps/api/src/routes/admin.ts:102`) must surface `isAdmin` for the toggle's initial state.
 ### Admin toggle safety
 - **D-03:** **Server blocks demoting the last admin.** Toggling `is_admin` off is rejected (409/422) when the target is the only remaining admin; self-demotion is permitted only when another admin exists. The client surfaces this as a clear inline error. The Phase 19 break-glass CLI/host command remains the true lockout-recovery path ([[19-CONTEXT]] D-13) — no new role/capability model.
 ### Edit affordance
 - **D-04:** **Whole-row tap opens the editor**, with a trailing chevron / edit icon as the affordance signal. The current per-row action buttons (`Rotate`/`Add credential`, `Reset password`) are removed from `MemberRow`. Big mobile tap target; matches the low-friction, warm aesthetic.
 ### Editor layout & save model
 - **D-05:** **One sheet, per-section save** — not a single combined Save. Sections:
  1. **Profile** — display name input + admin toggle, with one Save (writes the new member-profile route; subject to D-03 guard).
  2. **Set new password** — optional, **write-only** (blank = unchanged), with confirm; maps to existing `POST /members/:id/password` (`admin.ts:225`). Only shown for members with a local credential (`hasLocalCredential`).
  3. **Set app password** — optional, **write-only**; collects Fastmail email + app password, **CalDAV-validated** before store; maps to existing `POST /credentials` (`admin.ts:279`).
  Each section maps 1:1 to an endpoint, avoiding partial-failure ambiguity when CalDAV validation fails. Passwords are never prefilled/returned to the client (preserve T-10-15/T-10-16).
 - **D-06:** **Retire "Rotate" copy** everywhere; use plain labels (e.g. "Set app password" / "Update calendar password"). The standalone `ResetPasswordSheet` (currently in `AdminPage.tsx`) is **folded into** the editor's "Set new password" section — no separate reset sheet remains.
 ### Add-member declutter
 - **D-07:** **"Add member" opens a sheet**, not an inline-expanded form. Preferred: the **same Member sheet in a create mode** (compose_event-style — one component, create vs edit), so the panel collapses to a clean member list + a single "Add member" trigger. Create mode keeps today's fields (display name, username, initial password + confirm → `POST /members`).
 ### Claude's Discretion
 - Exact new-route verb/path/shape for the member-profile update (D-02).
 - Whether the Member editor and Add-member sheet are literally one component with a mode prop vs two siblings sharing a base — planner's call, but D-07 prefers unification.
 - In edit mode, whether the app-password section prefills/display the stored Fastmail email (read-only) or requires re-entry — minor UX detail for planning; note the stored `fastmailEmail` exists on the credential.
 - Icon choice for the row chevron/edit affordance (lucide, consistent with existing `CheckCircle`/`AlertCircle` usage).
 </decisions>
 <canonical_refs>
 ## Canonical References
 **Downstream agents MUST read these before planning or implementing.**
 ### Phase definition
 - `.planning/ROADMAP.md` §"Phase 20: Admin Member Editor & Form Declutter" — goal + the open-scope note this discussion resolved.
 ### Code being reworked
 - `apps/pwa/src/routes/AdminPage.tsx` — the Members panel, `MemberRow`, the inline Add-member form, and the standalone `ResetPasswordSheet` being consolidated.
 - `apps/pwa/src/components/CredentialSheet.tsx` — dialog/focus-trap/Escape + CalDAV-validation sheet to generalize into the Member editor (and Add-member create mode).
 - `apps/pwa/src/api/client.ts` — `AdminMember` type (`:563`), admin fetchers (`fetchAdminMembers`, `fetchCreateMember`, `fetchAdminResetPassword`, `saveCredential`); add the new member-profile fetcher + `isAdmin` field here.
 - `apps/api/src/routes/admin.ts` — existing endpoints: `GET /members` (`:102`), `POST /members` (`:143`), `POST /members/:id/password` (`:225`), `POST /credentials` (`:279`); add the member-profile update route here behind the same `requireAdmin`.
 ### Prior decisions that constrain this phase
 - `.planning/phases/19-local-auth-no-oidc-mode/19-CONTEXT.md` — D-11 (password lifecycle = self-change + admin-reset, no email reset), D-12 (OIDC link is self-service only, deletes local credential), D-13 (single `is_admin`, break-glass = CLI/host, no role split).
 </canonical_refs>
 <code_context>
 ## Existing Code Insights
 ### Reusable Assets
 - **`CredentialSheet`**: full dialog scaffold (role=dialog, `aria-modal`, `useFocusTrap`, Escape-to-close, focus-return-to-trigger, phone bottom-sheet vs desktop modal, CalDAV-validating mutation). Generalize into the Member editor + Add-member create mode.
 - **`ResetPasswordSheet`** (in `AdminPage.tsx`): password + confirm + mismatch validation logic — folds into the editor's "Set new password" section (D-06).
 - **`useFocusTrap`, `useIsPhone`** hooks — reuse for the new sheet.
 - **Existing endpoints** cover login-password reset and app-password set; only the member-profile (displayName + is_admin) write is new.
 ### Established Patterns
 - Two-tab `AdminPage` ("Members & Accounts" / "Settings") with roving-tabindex tabs — keep; this phase only restructures the Members tab body.
 - Mutations invalidate `['admin','members']` (+ `['me']` for credential changes) on success; success toast via `showToast` (D-08 pattern). Reuse for editor saves.
 - Write-only password handling: never prefill, never log, `autoComplete="new-password"` (T-10-15/16).
 ### Integration Points
 - New `PATCH/POST /api/admin/members/:id` mounts on `adminRouter` behind `requireAdmin` (no new boundary).
 - `GET /members` select + `AdminMember` type gain `isAdmin` so the editor's toggle has initial state.
 - `MemberRow` becomes a single tappable row (chevron affordance), dropping its action-button cluster.
 </code_context>
 <specifics>
 ## Specific Ideas
 - "Same sheet, create vs edit mode" is explicitly modeled on the Fastmail `compose_event` pattern (one widget, `id` present = edit, absent = create) — apply that shape to the Member sheet.
 - Labels must read for a non-technical household member: retire "Rotate"; prefer "Set app password" / "Set new password" / plain "Save".
 </specifics>
 <deferred>
 ## Deferred Ideas
 - **Editable member color** — colors are currently derived by row index (`var(--color-member-N)`); there is no stored per-member color to edit. Would need schema + assignment UX. → backlog / future phase.
 - **Admin-driven OIDC link/unlink** — Phase 19 D-12 makes OIDC linking a self-service action performed *as that user*, never by an admin. Admin-side link/unlink is a different security model. → out of scope.
 - **Remove / delete member** — destructive, with cascade concerns (events, lists, credentials, last-admin). Not part of the gripe-seeded scope. → backlog / future phase.
 ### Reviewed Todos (not folded)
 - "Gitea CI — full regression + Docker publish" (score 0.6) — stale keyword match (already delivered as Phase 8); unrelated to this UI phase.
 - "PWA phone layout — BottomTabBar overlaps FAB + legend" (score 0.4) — already addressed in Phase 17; unrelated.
 </deferred>
 ---
 *Phase: 20-admin-member-editor-form-declutter*
 *Context gathered: 2026-06-18*
@@ -0,0 +1,83 @@
 # Phase 20: Admin Member Editor & Form Declutter - Discussion Log
 > **Audit trail only.** Do not use as input to planning, research, or execution agents.
 > Decisions are captured in CONTEXT.md — this log preserves the alternatives considered.
 **Date:** 2026-06-18
 **Phase:** 20-admin-member-editor-form-declutter
 **Areas discussed:** Editor field scope, Edit affordance, Editor layout & save model, Add-member declutter, Admin toggle safety
 ---
 ## Editor field scope
 | Option | Description | Selected |
 |--------|-------------|----------|
 | Core 3 only | Display name + local login password + app password; defer admin toggle/color/OIDC/remove. | |
 | Core 3 + admin toggle | Also flip `is_admin` from the editor, with a last-admin guard. | ✓ |
 **User's choice:** "The entire scope plus admin toggle" — core 3 fields plus the `is_admin` toggle.
 **Notes:** Color, OIDC link/unlink, and remove-member stay deferred. Display name + admin toggle require one new within-`requireAdmin` route (no member-update route exists today).
 ---
 ## Edit affordance
 | Option | Description | Selected |
 |--------|-------------|----------|
 | Whole-row tap + chevron | Tapping anywhere on the member row opens the editor; trailing chevron signals it. | ✓ |
 | Name link + pencil button | Literal roadmap wording — name link + dedicated edit icon. | |
 **User's choice:** Whole-row tap + chevron.
 **Notes:** Removes the per-row `Rotate`/`Add credential` + `Reset password` button cluster.
 ---
 ## Editor layout & save model
 | Option | Description | Selected |
 |--------|-------------|----------|
 | One sheet, per-section save | Name+toggle save; "Set new password"; "Set app password" — each independent, maps 1:1 to an endpoint. | ✓ |
 | One sheet, single combined Save | One Save writes every changed field; needs partial-failure handling for CalDAV validation. | |
 **User's choice:** One sheet, per-section save.
 **Notes:** Avoids partial-failure ambiguity when CalDAV validation fails mid-save. Passwords stay write-only (blank = unchanged).
 ---
 ## Add-member declutter
 | Option | Description | Selected |
 |--------|-------------|----------|
 | Open as a sheet | "Add member" opens a sheet — ideally the same Member sheet in create mode. | ✓ |
 | Expand inline form | Button toggles the existing inline form visible/hidden in place. | |
 **User's choice:** Open as a sheet.
 **Notes:** Prefer the compose_event-style one-component create-vs-edit pattern so the panel collapses to a clean list + one button.
 ---
 ## Admin toggle safety
 | Option | Description | Selected |
 |--------|-------------|----------|
 | Block demoting last admin | Server rejects toggling `is_admin` off when they're the only admin; self-demotion only if another admin exists. | ✓ |
 | Warn but allow | Confirm dialog when demoting the last admin/yourself, but permit it; rely on break-glass CLI. | |
 **User's choice:** Block demoting the last admin (server-enforced).
 **Notes:** Phase 19 break-glass CLI/host command remains the true lockout-recovery path; no new role model.
 ---
 ## Claude's Discretion
 - Exact verb/path/shape of the new member-profile update route (`displayName` + `is_admin`).
 - Whether the Member editor and Add-member sheet are literally one component (mode prop) vs two siblings on a shared base.
 - Whether the app-password section prefills the stored Fastmail email (read-only) or requires re-entry in edit mode.
 - Chevron/edit icon choice for the row affordance.
 ## Deferred Ideas
 - Editable member color (no stored per-member color — derived by row index).
 - Admin-driven OIDC link/unlink (Phase 19 D-12: self-service only).
 - Remove / delete member (destructive, cascade concerns).
@@ -0,0 +1,276 @@
 # Phase 20: Admin Member Editor & Form Declutter - Pattern Map
 **Mapped:** 2026-06-18
 **Files analyzed:** 5 (2 new surfaces, 3 modified)
 **Analogs found:** 5 / 5 (all in-repo, recent)
 > No RESEARCH.md for this phase — this is a client-side rework over existing `/api/admin` endpoints. Every new file copies a concrete in-repo analog; no external pattern is needed.
 ---
 ## File Classification
 | New/Modified File | Role | Data Flow | Closest Analog | Match Quality |
 |-------------------|------|-----------|----------------|---------------|
 | `apps/pwa/src/components/MemberEditorSheet.tsx` (NEW) | component (dialog/sheet) | request-response (form → mutation) | `apps/pwa/src/components/CredentialSheet.tsx` + `ResetPasswordSheet` (in `AdminPage.tsx`) | exact |
 | `apps/api/src/routes/admin.ts` — new `PATCH /members/:id` (NEW route, MODIFIED file) | route (member-profile update) | CRUD (update) | `admin.ts` `POST /members/:id/password` (`:225`) + last-admin count in `auth/user.ts:151` | exact |
 | `apps/pwa/src/routes/AdminPage.tsx` (MODIFIED) | route/page (MemberRow + triggers) | request-response | `ListCard.tsx` (tappable row + ChevronRight) + existing `MemberRow` (`:1151`) | exact |
 | `apps/pwa/src/api/client.ts` (MODIFIED) | api client (type + fetcher) | request-response | `fetchAdminResetPassword` (`:218`) / `fetchCreateMember` (`:184`) | exact |
 | `apps/api/src/routes/admin.ts` — `GET /members` adds `isAdmin` (MODIFIED) | route | CRUD (read) | `admin.ts` `GET /members` (`:102`) | exact (same handler) |
 ---
 ## Pattern Assignments
 ### `apps/pwa/src/components/MemberEditorSheet.tsx` (component, dialog/sheet)
 **Primary analog:** `apps/pwa/src/components/CredentialSheet.tsx`
 **Secondary analog:** `ResetPasswordSheet` inside `apps/pwa/src/routes/AdminPage.tsx:1391` (password+confirm+mismatch logic to fold into the "Set new password" section per D-06).
 This is the central new file. Copy the **entire dialog scaffold** from CredentialSheet, then compose the three edit-mode sections (Profile / Set new password / App password) + the create-mode form from existing field/mutation snippets.
 **Imports pattern** (`CredentialSheet.tsx:25-35`):
 ```typescript
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import {
  saveCredential,
  type SaveCredentialPayload,
 } from '../api/client.js';
 import { useIsPhone } from '../hooks/useIsPhone.js';
 import { useFocusTrap } from '../hooks/useFocusTrap.js';
 ```
 For Phase 20 also import the new `updateMemberProfile` fetcher + existing `fetchAdminResetPassword`, and add `ChevronRight`/`Plus` are NOT needed here (those go in AdminPage).
 **`mode` prop pattern** — model the create/edit discriminator on `CredentialSheetMode` (`CredentialSheet.tsx:37`). UI-SPEC §Surface B wants a single `mode: 'edit' | 'create'` prop (id present = edit). Mirror the `headingFor(mode)` switch (`CredentialSheet.tsx:54-58`) for "Edit member" / "Add member" copy.
 **Dialog scaffold — copy verbatim** (`CredentialSheet.tsx`):
 - `useFocusTrap(dialogRef)` wiring (`:88-89`) + `onKeyDown={handleDialogKeyDown}` on the dialog div (`:186`)
 - `handleClose` via `useCallback` that clears form state, calls `onClose()`, and returns focus to `triggerRef.current` (`:94-103`)
 - Escape-to-close effect (`:106-115`)
 - Focus-heading-on-open effect (`:118-122`)
 - Backdrop div (`:169-178`) — note UI-SPEC §Surface B wants `rgba(0,0,0,0.32)` / `--color-overlay`, which matches `ResetPasswordSheet:1459` (`var(--color-overlay, rgba(0,0,0,0.32))`), NOT CredentialSheet's `rgba(0,0,0,0.4)`. Prefer the ResetPasswordSheet overlay token.
 - Phone-vs-desktop sheet style object (`:187-217`) — copy exactly (borderRadius `12px 12px 0 0` phone / `12px` desktop, `maxWidth 480px`, zIndex 301, `padding var(--space-6)`, desktop `maxHeight: calc(100dvh - var(--space-8)); overflowY: auto`)
 - `h2 ref={headingRef} tabIndex={-1}` heading (`:220-233`)
 - Member subtitle block (`:236-247`) — edit mode only
 **Section divider** (UI-SPEC §Surface B): `border-top: 1px solid var(--color-border-subtle)`, `margin: var(--space-6) 0`. Section headings reuse `sectionLabelStyle` from `AdminPage.tsx:46-53` (13px/600/uppercase/`--color-text-muted`) — UI-SPEC Accessibility note says use `<div>` not `<h3>` to avoid heading-hierarchy issues under the `<h2>`.
 **Text input field pattern** (`CredentialSheet.tsx:250-283` email field; `AdminPage.tsx:477-495` display-name field) — label (13px/600) + input (`min-height 44px`, `border-radius var(--space-1)`, `padding var(--space-3) var(--space-4)`, `border` flips to `--color-destructive` on error).
 **Password section (Section 2)** — copy `ResetPasswordSheet`'s new-password + confirm fields and mismatch logic:
 ```typescript
 // AdminPage.tsx:1426-1443 — mutation with client-side mismatch guard
 const resetMutation = useMutation({
  mutationFn: async () => {
    if (newPassword !== confirmPassword) throw new Error('mismatch');
    await fetchAdminResetPassword(member.id, newPassword);
  },
  onSuccess: () => { handleClose(); onSuccess?.(); },
  onError: (err) => {
    const msg = err instanceof Error ? err.message : 'server';
    if (msg === 'mismatch') setError('Passwords do not match.');
    else setError('Something went wrong. Please try again.');
  },
 });
 ```
 UI-SPEC adds a `< 8 chars` guard ("Password must be at least 8 characters.") — mirror the create-member length check at `AdminPage.tsx:267-269`. Fields use `autoComplete="new-password"`, never prefilled (T-10-15/16). **Per-section** save (not handleClose-on-success) — Section 2 success keeps the sheet open and fires toast "Password updated." Only render this section when `member.hasLocalCredential === true`.
 **App-password section (Section 3)** — copy CredentialSheet's email + password fields (`:249-320`), the "Validating against CalDAV…" `Loader2` inline state (`:337-345`), the helper link to Fastmail device tokens (`:351-362`), and the FAILURE_TEXT copy (`:65-66`). The mutation maps to `saveCredential` (`:124-153`) — admin mode requires `userId: memberId`. Prefill `fastmailEmail` read-only convenience in edit mode (Claude's-discretion D — the stored `fastmailEmail` exists on `memberCredentials.fastmail_email`, but is NOT currently returned by `GET /members`; the password field is never prefilled).
 **Create-mode form (single form, no dividers)** — copy the four fields + mutation from `AdminPage.tsx:260-306` (`createMemberMutation`): display name / username / initial password / confirm. Maps to `fetchCreateMember` (`client.ts:184`). Reuse the exact error mapping (`mismatch` / `short` / `conflict` → "That username is already in use.").
 **Per-section Save button** (`CredentialSheet.tsx:397-419`): accent `--color-member-0` background when enabled, `--color-border` when disabled, white text, `min-height 44px`, `border-radius var(--space-1)`, inline `Loader2 size={14}` while pending (pattern at `AdminPage.tsx:651-657`).
 **Cancel button** (`CredentialSheet.tsx:375-395`): no background, `--color-text-secondary`, `min-height 44px`.
 ---
 ### `apps/api/src/routes/admin.ts` — NEW `PATCH /members/:id` (route, CRUD update)
 **Primary analog:** `POST /members/:id/password` (`admin.ts:225-269`) — same `:id` param shape, same `requireAdmin` boundary, same noEchoHook posture, same existence-check-then-update flow.
 **Secondary analog:** the admin-count query in `auth/user.ts:151-156` — reuse for the D-03 last-admin guard.
 **Route handler shape — copy** (`admin.ts:225-269`):
 ```typescript
 const updateMemberSchema = z.object({
  displayName: z.string().min(1).max(256).optional(),
  isAdmin: z.boolean().optional(),
 });
 adminRouter.patch(
  '/members/:id',
  zValidator('json', updateMemberSchema, noEchoHook),
  async (c) => {
    const targetId = parsePositiveIntParam(c.req.param('id')); // :87
    if (targetId === null) return c.json({ error: 'Invalid member id' }, 400);
    const { displayName, isAdmin } = c.req.valid('json');
    // ... existence check + last-admin guard + update
  },
 );
 ```
 - `parsePositiveIntParam` already exists (`admin.ts:87-92`) — reuse, do NOT re-implement.
 - `requireAdmin` is already mounted router-wide (`admin.ts:47`) — the new route inherits it automatically; **no new boundary** (D-02).
 - `noEchoHook` (`admin.ts:75-79`) — apply even though no password is in this body, for consistency with the other admin write routes.
 **Last-admin guard (D-03) — adapt from `auth/user.ts:151-156`:**
 ```typescript
 // Count remaining admins; reject demotion of the only admin.
 const [{ count }] = await db
  .select({ count: sql<number>`COUNT(*)` })
  .from(users)
  .where(eq(users.isAdmin, true))
  .limit(1);
 ```
 When `isAdmin === false` is requested for a target that is currently an admin AND `Number(count) <= 1`, return 409 (or 422) `{ error: ... }`. UI-SPEC client maps this to "Cannot remove admin — at least one admin must remain." Note: `sql` and `eq` are already imported (`admin.ts:28`).
 **Update + error handling** — mirror the try/catch + 503 fallback of the password route (`admin.ts:249-268`). Build a partial `set({ ... })` from whichever of `displayName` / `isAdmin` is present. Verify the target user exists (404 if not), matching the password route's `if (!credRow) return 404` shape (`:245`).
 **Verb choice (Claude's discretion, D-02):** Hono supports `adminRouter.patch(...)`. The repo's existing admin writes use `POST` (`/members`, `/credentials`) and `PUT` (`/calendars/:id/shared`, `/config/timezone`); a `PATCH` for partial member update is idiomatic and consistent with REST, but `POST /members/:id` is equally acceptable — planner's call.
 ---
 ### `apps/api/src/routes/admin.ts` — `GET /members` adds `isAdmin` (route, CRUD read)
 **Analog:** the existing handler itself (`admin.ts:102-124`). Add `isAdmin` to the select and the mapped object:
 ```typescript
 .select({
  id: users.id,
  displayName: users.displayName,
  color: users.color,
  isAdmin: users.isAdmin,            // NEW — feeds the editor toggle initial state (D-02)
  credentialId: memberCredentials.id,
  localCredId: localCredentials.id,
 })
 // ...
 const members = rows.map((row) => ({
  id: row.id,
  displayName: row.displayName,
  color: row.color,
  isAdmin: row.isAdmin,              // NEW
  hasCredential: row.credentialId !== null,
  hasLocalCredential: row.localCredId !== null,
 }));
 ```
 `users.isAdmin` already exists in the schema (`db/schema.ts:56`, `boolean('is_admin')`). No join change needed — it's a column on the base `users` table already in the FROM.
 ---
 ### `apps/pwa/src/api/client.ts` (api client — type + fetcher)
 **Analog for the type:** `AdminMember` interface (`client.ts:563-569`). Add `isAdmin: boolean`:
 ```typescript
 export interface AdminMember {
  id: number;
  displayName: string | null;
  color: string;
  isAdmin: boolean;        // NEW — Phase 20 (drives editor admin toggle initial state)
  hasCredential: boolean;
  hasLocalCredential: boolean;
 }
 ```
 **Analog for the new fetcher:** `fetchAdminResetPassword` (`client.ts:218-234`) — same `:id` path, same POST/PATCH-with-json shape, same error handling. New `updateMemberProfile`:
 ```typescript
 export async function updateMemberProfile(
  memberId: number,
  body: { displayName?: string; isAdmin?: boolean },
 ): Promise<void> {
  const res = await fetch(`/api/admin/members/${memberId}`, {
    method: 'PATCH',                                   // match the chosen route verb
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    redirect: 'manual',
    body: JSON.stringify(body),
  });
  if (res.type === 'opaqueredirect' || res.status === 401) throw new SessionExpiredError();
  if (res.status === 409 || res.status === 422) throw new Error('last-admin'); // D-03 guard
  if (!res.ok) throw new Error(`updateMemberProfile failed: ${res.status}`);
 }
 ```
 The `SessionExpiredError` + `handleAuthResponse` conventions are already in this file (used by every fetcher). Map the last-admin 409/422 to a sentinel the editor's onError can branch on (mirrors the `conflict` sentinel pattern at `client.ts:206`).
 ---
 ### `apps/pwa/src/routes/AdminPage.tsx` (route/page — MemberRow rework + triggers)
 **MemberRow → tappable row analog:** `apps/pwa/src/components/ListCard.tsx` — a whole-row `<button>`/tappable surface with a trailing `ChevronRight`.
 **ChevronRight affordance — copy** (`ListCard.tsx:139-144`):
 ```typescript
 <ChevronRight
  size={16}
  color="var(--color-text-muted)"
  aria-hidden="true"
  style={{ flexShrink: 0, marginLeft: 'var(--space-2)' }}
 />
 ```
 Import: `import { ChevronRight, Plus } from 'lucide-react';` (both already used elsewhere — `ListCard.tsx:21`, `ListsIndex.tsx:24`).
 **Row interaction (UI-SPEC §Surface A):** make the row `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, `cursor: pointer`, Enter/Space opens the editor. The existing `CalendarRadioRow` (`AdminPage.tsx:1298-1318`) is a good in-file template for the `role` + `onKeyDown` Enter/Space handler:
 ```typescript
 onKeyDown={(e) => {
  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(); }
 }}
 ```
 **Keep** the avatar swatch (`AdminPage.tsx:1167-1176`, `var(--color-member-${colorIndex})`) and the credential status badge (`:1193-1235`, CheckCircle/AlertCircle "Credential set" / "No credential"). **Remove** the entire action-button cluster (`:1238-1285`: "Rotate"/"Add credential" + "Reset password").
 **New Admin badge (UI-SPEC §Surface A):** when `member.isAdmin`, render an inline "Admin" pill (12px/600, `--color-member-0` text on `--color-surface-dim`, `border-radius 4px`, `padding 2px 6px`) — same shape as the "Shared" badge in `ListCard.tsx:124-133`.
 **"Add member" trigger button (UI-SPEC §Surface A):** ghost button with `<Plus size={16}>` prefix, `1px solid var(--color-border)`, `border-radius 8px`, `padding var(--space-3) var(--space-4)`, `min-height 44px`, `--color-surface` bg / `--color-surface-dim` hover. The `Plus`-prefixed button pattern is at `CalendarShell.tsx:451-456`.
 **Sheet wiring & state** — replace the dual `CredentialSheet` + `ResetPasswordSheet` mounting (`AdminPage.tsx:1111-1137`) with a single `MemberEditorSheet`. Reuse the existing `triggerRef` capture pattern (`:252-258`, `openSheet`) so focus returns to the tapped row on close. Add an `addMemberTriggerRef` for the create-mode trigger (focus returns there on cancel, per UI-SPEC Interaction Contract).
 **Remove from this file:** the entire inline Add-member form (`:443-662`, the "Local Accounts" section body), the `ResetPasswordSheet` component definition (`:1375-1677`), and all create-form local state (`createDisplayName` … `createError`, `:94-98`) — these move into `MemberEditorSheet`.
 ---
 ## Shared Patterns
 ### TanStack Query mutation + invalidation
 **Source:** `CredentialSheet.tsx:124-153` and `AdminPage.tsx` mutations.
 **Apply to:** every per-section save in `MemberEditorSheet`.
 ```typescript
 const m = useMutation({
  mutationFn: async () => { /* call client fetcher */ },
  onSuccess: () => {
    void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
    void queryClient.invalidateQueries({ queryKey: ['me'] }); // credential/app-password changes only
    showToast('…');  // per-section toast; sheet STAYS open (per-section save model, D-05)
  },
  onError: (err) => { /* map sentinel → inline error string */ },
 });
 ```
 Profile/password saves invalidate only `['admin','members']`; app-password save also invalidates `['me']` (needsProviderSetup refresh — `CredentialSheet.tsx:146-147`).
 ### Success toast (D-08)
 **Source:** `AdminPage.tsx:66-76` (`showToast` + auto-dismiss effect) and the toast JSX (`:1068-1109`).
 **Apply to:** all editor saves. Keep `showToast` in `AdminPage` and pass an `onToast`/`onSuccess` callback into `MemberEditorSheet` (the way `ResetPasswordSheet` receives `onSuccess` at `AdminPage.tsx:1134`), OR lift the toast into the sheet — planner's call. Toast copy per UI-SPEC: "Profile saved." / "Password updated." / "App password saved." / "Member added."
 ### Write-only password handling (T-10-15 / T-10-16)
 **Source:** `CredentialSheet.tsx:299-319` (app password), `AdminPage.tsx:1544-1563` (reset password).
 **Apply to:** every password/app-password field in the editor. Never prefill, `autoComplete="new-password"`, never log, blank = unchanged (D-05).
 ### Server admin boundary (no new boundary — D-02)
 **Source:** `apps/api/src/lib/requireAdmin.ts` + `admin.ts:47` (`adminRouter.use('*', requireAdmin)`).
 **Apply to:** the new `PATCH /members/:id` — it inherits the router-wide guard automatically. Do not add a second guard.
 ### noEchoHook for admin write routes
 **Source:** `admin.ts:75-79`.
 **Apply to:** the new member-profile route's `zValidator`.
 ---
 ## No Analog Found
 None. Every new file and route has a direct, recent in-repo analog. The only genuinely new logic is the **D-03 last-admin guard**, and even that adapts the existing admin-count query from `apps/api/src/auth/user.ts:151-156`.
 ---
 ## Metadata
 **Analog search scope:** `apps/pwa/src/components/`, `apps/pwa/src/routes/`, `apps/pwa/src/api/`, `apps/pwa/src/hooks/`, `apps/api/src/routes/`, `apps/api/src/lib/`, `apps/api/src/auth/`, `apps/api/src/db/`
 **Files scanned:** ~12
 **Pattern extraction date:** 2026-06-18
@@ -0,0 +1,59 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 fixed_at: 2026-06-18T14:45:00Z
 source_review: 20-REVIEW.md
 fix_scope: all
 findings_in_scope: 11
 fixed: 11
 skipped: 0
 iteration: 2
 status: all_fixed
 gates:
  typecheck: pass
  eslint: pass
  prettier: pass
  api_tests: 462/462
 ---
 # Phase 20 — Code Review Fix Report
 Auto-fix pass over the deep review (`20-REVIEW.md`, 2 critical / 6 warning / 3 info).
 All 11 findings fixed and committed atomically; a deep re-review (iteration 2)
 independently confirmed 0 critical / 0 warning remain.
 > Note: this report was reconstructed by the orchestrator — the fixer agent applied
 > and committed every fix but its `REVIEW-FIX.md` write did not persist. The commit
 > hashes below are the source of truth.
 ## Fixes applied
 | ID | Severity | Fix | Commit |
 |----|----------|-----|--------|
 | CR-01 | Critical | Last-admin guard made atomic — single conditional UPDATE / `affectedRows` check closes the TOCTOU window; 409 response shape unchanged | `7297733` |
 | WR-06 | Warning | Empty `{}` PATCH body now rejected with a clean 400 via Zod refinement (was a Drizzle 503 on empty SET); new test added | `7297733` |
 | CR-02 | Critical | `AdminPage` derives the editor's member from live query data and refetches/invalidates after a save — no stale-snapshot demotion overwrite | `ee04aee` |
 | WR-01 | Warning | Toggle-only saves no longer re-send `displayName`, so admin-toggle saves don't 400 for OIDC-provisioned members with a null/empty stored name | `527d855` |
 | WR-02 | Warning | 409 revert uses the actual prior toggle state instead of defaulting to `true` | `527d855` |
 | WR-04 | Warning | `handleClose` closure fixed — Cancel after a per-section save no longer reverts to pre-save values | `527d855` |
 | WR-03 | Warning | Phone bottom-sheet gains `maxHeight` + `overflowY: auto` so the action button is reachable on short phones | `2fd253e` |
 | IN-03 | Info | Phone sheet adds `env(safe-area-inset-bottom)` padding (iOS home indicator) | `2fd253e` |
 | WR-05 | Warning | Admin toggle gains `aria-describedby` linking to the last-admin error region | `d2e9862` |
 | IN-01 | Info | Helper text shown when display name is empty | `400733f` |
 | IN-02 | Info | `maxLength` added to display-name and username inputs | `182ba1d` |
 (`41a4fae` — prettier formatting of the updated `admin.test.ts`.)
 ## Verification
 - `pnpm -r typecheck` — pass (API + PWA)
 - ESLint — 0 warnings
 - Prettier — clean
 - API integration tests — **462/462** (includes a new Test H asserting empty-body PATCH → 400)
 ## Introduced during fixes (caught by iteration-2 re-review)
 - **IN-04 (Info, resolved):** The no-op profile-save path (`mutationFn` returns early on an
  empty payload) triggered `onSuccess`, firing the "Profile saved." toast and refetching the
  `['admin','members']` query even when nothing changed. Fixed in `5161bd3` — `mutationFn`
  now returns a `changed` flag and `onSuccess` skips the toast/refetch when no write occurred.
  Typecheck/eslint/prettier all pass.
@@ -0,0 +1,457 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 reviewed: 2026-06-18T12:00:00Z
 depth: deep
 files_reviewed: 5
 files_reviewed_list:
  - apps/api/src/routes/admin.ts
  - apps/api/tests/routes/admin.test.ts
  - apps/pwa/src/api/client.ts
  - apps/pwa/src/components/MemberEditorSheet.tsx
  - apps/pwa/src/routes/AdminPage.tsx
 findings:
  critical: 2
  warning: 6
  info: 3
  total: 11
 status: issues_found
 ---
 # Phase 20: Code Review Report (Deep Re-Review)
 **Reviewed:** 2026-06-18
 **Depth:** deep (cross-file, call-chain, state-machine analysis)
 **Files Reviewed:** 5
 **Status:** issues_found
 ## Summary
 Phase 20 adds `PATCH /api/admin/members/:id` (displayName + isAdmin update), a unified
 `MemberEditorSheet` (edit/create modes), and a decluttered `AdminPage` member list. The
 authorization boundary (`requireAdmin` first on the router, live DB lookup every request) is
 sound and correctly inherited by all new routes. Password write-only discipline is preserved
 across the PATCH→client→sheet→AdminPage chain. The credential echo-protection pattern and the
 `noEchoHook` usage are consistent and correct.
 This deep pass confirms all nine findings from the prior standard review (re-verified against the
 current code — none have been remediated). Two are re-classified: CR-01 (TOCTOU) remains
 Critical; the newly-discovered CR-02 (admin-demotion race via stale-member prop) joins it. WR-04
 is materially worse in the deep view — the stale `editorMember` is never updated from query data,
 making the Reset-to-pre-save regression reproducible on every session where a save is followed by
 Cancel. Two new issues are also added: WR-06 (profileMutation unconditionally sends displayName,
 blocking admin toggle on null-displayName members) and WR-07 (no-op {} PATCH crashes Drizzle
 with a 503 instead of a proper 400).
 ---
 ## Critical Issues
 ### CR-01: Last-admin demotion guard is a non-atomic TOCTOU race
 **File:** `apps/api/src/routes/admin.ts:251-267`
 **Issue:** The D-03 last-admin guard issues a `SELECT COUNT(*) WHERE is_admin=true` and only
 if the count is >1 proceeds to `UPDATE`. The SELECT and the UPDATE are not in a transaction.
 Two concurrent PATCH requests demoting the two existing admins both read `count=2`, both pass
 the guard, and both updates commit — leaving the household with zero admins. MariaDB's default
 InnoDB READ COMMITTED isolation does not prevent this: a phantom read between the COUNT and the
 UPDATE is possible even in REPEATABLE READ unless a locking read (`FOR UPDATE`/`FOR SHARE`) is
 used. The test suite (Test C and Test D) exercises the single-request path only; no concurrent
 scenario is tested.
 ```
 Thread 1: SELECT COUNT(*) WHERE is_admin=true → 2 → passes guard
 Thread 2: SELECT COUNT(*) WHERE is_admin=true → 2 → passes guard
 Thread 1: UPDATE users SET is_admin=false WHERE id=1 → ok
 Thread 2: UPDATE users SET is_admin=false WHERE id=2 → ok  (now 0 admins)
 ```
 **Fix:** Wrap the full guard-plus-update in a transaction and use a locking read:
 ```typescript
 await db.transaction(async (tx) => {
  const [target] = await tx
    .select({ id: users.id, isAdmin: users.isAdmin })
    .from(users)
    .where(eq(users.id, targetId))
    .limit(1);
  if (!target) throw new Error('not-found');
  if (isAdmin === false && target.isAdmin) {
    // Lock all admin rows before counting so concurrent demotions block each other
    const [{ count }] = await tx
      .select({ count: sql<number>`COUNT(*)` })
      .from(users)
      .where(eq(users.isAdmin, true));
    // Note: add `.for('update')` when Drizzle exposes it, or use raw sql suffix
    if (Number(count) <= 1) throw new Error('last-admin');
  }
  const updates: { displayName?: string; isAdmin?: boolean } = {};
  if (displayName !== undefined) updates.displayName = displayName;
  if (isAdmin !== undefined) updates.isAdmin = isAdmin;
  await tx.update(users).set(updates).where(eq(users.id, targetId));
 });
 ```
 Alternatively, replace the SELECT/UPDATE pair with a single atomic conditional UPDATE and check
 `affectedRows`:
 ```sql
 UPDATE users
 SET is_admin = false
 WHERE id = :targetId
  AND (SELECT COUNT(*) FROM users u2 WHERE u2.is_admin = true) > 1
 ```
 ---
 ### CR-02: Stale `editorMember` in AdminPage means per-section save can silently overwrite a concurrent admin change
 **File:** `apps/pwa/src/routes/AdminPage.tsx:83,243` / `apps/pwa/src/components/MemberEditorSheet.tsx:262-265`
 **Issue:** `editorMember` is set once when the user taps a row (`openEditorForMember` at line 243)
 and is never refreshed from query data. `MemberEditorSheet` receives this as `member` and
 `profileMutation.mutationFn` (line 262-265) unconditionally sends both `displayName` and
 `isAdmin`:
 ```typescript
 await updateMemberProfile(member.id, {
  displayName: displayName.trim(),
  isAdmin,      // ← always the value at sheet-open time, not query-refreshed
 });
 ```
 Scenario: Admin A opens the editor for Member X (isAdmin=false). Admin B (in another session)
 concurrently promotes Member X to admin. The server query cache eventually refetches and
 `membersQuery.data` shows `isAdmin=true`. But `editorMember` in AdminPage is still the stale
 object (`isAdmin=false`). Admin A's sheet still shows the toggle in the "off" position (because
 `useEffect` at line 234 re-syncs on `member?.isAdmin` change, but the `member` prop itself is
 never updated from the fresh query data — `editorMember` is the source and it never changes).
 Admin A clicks Save without touching the toggle → `isAdmin: false` is sent → Member X is silently
 demoted back to non-admin. No warning is shown. The profile-save toast reads "Profile saved."
 This is the cross-file manifestation of WR-04 (stale closure) compounded by the fact that
 `editorMember` is never derived from `membersQuery.data`.
 **Fix:** Derive the member prop from the live query data instead of holding a stale copy:
 ```typescript
 // In AdminPage:
 const editorMember = editorMemberId !== null
  ? (membersQuery.data?.members.find((m) => m.id === editorMemberId) ?? null)
  : null;
 ```
 Replace `setEditorMember(member)` with `setEditorMemberId(member.id)`. This way, whenever
 `membersQuery.data` updates (e.g., after a save + invalidation), the derived `editorMember` is
 always fresh. The existing `useEffect` in `MemberEditorSheet` (line 234) already reacts to
 `member?.isAdmin` and `member?.displayName` changes, so the form state stays in sync
 automatically.
 ---
 ## Warnings
 ### WR-01: Profile save always sends `displayName` even when only `isAdmin` changed; blocks admin toggle for null-displayName members
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:262-265, 568`
 **Issue:** `profileMutation.mutationFn` always sends `{ displayName: displayName.trim(), isAdmin }`.
 Two distinct problems follow:
 1. **Partial-update miss.** Every profile save re-writes the displayName even when the admin only
   toggled the admin flag. This doubles the blast radius of a profile save.
 2. **Toggle blocked on null displayName.** The DB schema (`apps/api/src/db/schema.ts:52`)
   defines `display_name` as a nullable varchar (no `.notNull()`). An OIDC-provisioned user whose
   ID token had no `name` claim can have `displayName = null`. The editor initialises `displayName`
   state to `member?.displayName ?? ''` → `''`. The Save button is disabled when
   `displayName.trim().length === 0` (line 568), so the admin cannot toggle the admin flag for
   this member at all — the Save button remains permanently disabled with no explanatory copy.
   There is no empty-state message telling the admin they must add a name first.
 **Fix — option A (preferred):** Send only changed fields:
 ```typescript
 mutationFn: async () => {
  if (!member) throw new Error('no-member');
  const payload: { displayName?: string; isAdmin?: boolean } = {};
  if (displayName.trim() !== (member.displayName ?? '')) {
    if (displayName.trim().length === 0) throw new Error('name-required');
    payload.displayName = displayName.trim();
  }
  if (isAdmin !== member.isAdmin) payload.isAdmin = isAdmin;
  if (Object.keys(payload).length === 0) return; // no-op guard
  await updateMemberProfile(member.id, payload);
 },
 ```
 **Fix — option B (minimal):** Add an inline note when displayName is empty to explain why Save is
 disabled:
 ```tsx
 {displayName.trim().length === 0 && (
  <div style={inlineErrorStyle}>A display name is required before saving.</div>
 )}
 ```
 ---
 ### WR-02: D-03 error revert uses `member?.isAdmin ?? true` — wrong default direction
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:276`
 **Issue:** When the server returns 409 (last-admin guard), `onError` reverts the toggle with:
 ```typescript
 setIsAdmin(member?.isAdmin ?? true);
 ```
 The `?? true` default is semantically wrong. The guard fires only when the admin tries to
 demote the last admin, meaning the correct revert value is `true` (the member IS admin). However
 the `?? true` codifies this accidentally — if `member` were ever undefined here for another reason,
 any future mutation reuse could silently set `isAdmin=true` on an unrelated user. The mutation
 already guards `if (!member) throw new Error('no-member')` at line 261 so a missing `member` in
 the 409 path is structurally impossible today. The defect is that the code is correct only by
 coincidence, and the fallback `true` would be wrong if the same handler were reused to revert any
 *other* error that legitimately has `member=undefined`.
 **Fix:** Capture the pre-mutation value at call time and carry it through context:
 ```typescript
 const profileMutation = useMutation({
  mutationFn: async () => {
    if (!member) throw new Error('no-member');
    await updateMemberProfile(member.id, { displayName: displayName.trim(), isAdmin });
  },
  onError: (err) => {
    const msg = err instanceof Error ? err.message : 'server';
    if (msg === 'last-admin') {
      // member is guaranteed non-null here (no-member throws before the API call)
      setIsAdmin(member!.isAdmin);   // ← explicit, not ?? true
      setProfileError('Cannot remove admin — at least one admin must remain.');
    } else {
      setProfileError('Something went wrong. Please try again.');
    }
  },
 });
 ```
 ---
 ### WR-03: Phone bottom-sheet lacks `maxHeight`/`overflowY` — action buttons unreachable on short phones
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:379-392`
 **Issue:** The desktop sheet style (lines 399-407) sets `maxHeight: 'calc(100dvh - var(--space-8, 32px))'`
 and `overflowY: 'auto'`. The phone bottom-sheet style (lines 380-392) has neither. In edit mode
 with all three sections visible (Profile + Set new password + App password), the content exceeds
 the viewport height on a 667px-tall iPhone SE. There is no scroll affordance; the "Save app
 password" button is unreachable without a way to scroll.
 **Fix:**
 ```typescript
 // phone branch of sheetStyle:
 {
  position: 'fixed',
  bottom: 0,
  left: 0,
  right: 0,
  maxHeight: '90dvh',
  overflowY: 'auto',
  background: 'var(--color-surface)',
  borderRadius: '12px 12px 0 0',
  boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
  padding: 'var(--space-6, 24px)',
  paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))',
  zIndex: 301,
  fontFamily: 'var(--font-family-base)',
 }
 ```
 This also resolves IN-03 (missing `env(safe-area-inset-bottom)`) in a single fix.
 ---
 ### WR-04: `handleClose` useCallback holds stale `member` fields — Cancel after per-section save resets to pre-save values
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:210-231`
 **Issue:** `handleClose` is memoised:
 ```typescript
 const handleClose = useCallback(() => {
  setDisplayName(member?.displayName ?? '');   // ← captures member at memo creation time
  setIsAdmin(member?.isAdmin ?? false);
  ...
 }, [onClose, triggerRef, member?.displayName, member?.isAdmin]);
 ```
 When `profileMutation.onSuccess` fires, it invalidates `['admin','members']`. The query refetches
 and `membersQuery.data` updates. BUT `editorMember` in `AdminPage` is never derived from
 `membersQuery.data` (confirmed by inspection — see CR-02). So `member?.displayName` in the
 dependency array still holds the pre-save value. `handleClose` correctly rebuilds when the dep
 changes in principle, but since `editorMember` never updates, the dep never changes.
 Concretely: admin saves "New Name" → toast "Profile saved." → clicks Cancel → form resets to
 "Old Name". The next GET /api/admin/members will show the correct new name in the list row, but
 the sheet state that Cancel resets to is stale.
 **Fix (preferred, pairs with CR-02 fix):** Once `editorMember` is derived from live query data
 (CR-02 fix), `member?.displayName` in the dep array will update after a save+refetch, and
 `handleClose` will capture the refreshed value. Separately, remove the redundant form-field
 resets from `handleClose` for member-sourced fields and let the existing `useEffect` (line 234)
 own that state:
 ```typescript
 const handleClose = useCallback(() => {
  // Only reset ephemeral fields (not member-derived: those belong to useEffect)
  setProfileError(null);
  setNewPassword('');
  setConfirmPassword('');
  setPasswordError(null);
  setFastmailEmail('');
  setAppPassword('');
  setAppPasswordError(null);
  setCreateDisplayName('');
  setCreateUsername('');
  setCreatePassword('');
  setCreateConfirmPassword('');
  setCreateError(null);
  onClose();
  if (triggerRef?.current) triggerRef.current.focus();
 }, [onClose, triggerRef]);
 ```
 ---
 ### WR-05: Admin toggle missing `aria-describedby` for the last-admin error
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:515-537`
 **Issue:** The display-name input has `aria-describedby={profileError ? 'profile-error' : undefined}`
 (line 479), correctly linking it to the shared error container at line 557. However the admin
 toggle button (line 515) has `aria-label="Admin"` but no `aria-describedby`. When the last-admin
 guard fires, `profileError` is set and the error `<div id="profile-error">` renders below the
 action buttons — but screen-reader users who activated the toggle have no announcement path from
 the toggle element to the error message.
 **Fix:**
 ```tsx
 <button
  type="button"
  role="switch"
  aria-checked={isAdmin}
  aria-label="Admin"
  aria-describedby={profileError ? 'profile-error' : undefined}
  onClick={() => { setProfileError(null); setIsAdmin((prev) => !prev); }}
  ...
 >
 ```
 ---
 ### WR-06: Empty `{}` PATCH body passes Zod but causes Drizzle to throw → returns 503 instead of 400
 **File:** `apps/api/src/routes/admin.ts:225-228, 261-275`
 **Issue:** `updateMemberSchema` marks both fields optional:
 ```typescript
 const updateMemberSchema = z.object({
  displayName: z.string().min(1).max(256).optional(),
  isAdmin: z.boolean().optional(),
 });
 ```
 A client that sends `{}` passes Zod validation. Inside the handler, the `updates` object remains
 `{}` (lines 262-264, neither branch fires). `db.update(users).set({}).where(...)` is then called.
 In Drizzle ORM 0.45.x (mysql dialect) an empty `set({})` produces invalid SQL (`UPDATE users SET
 WHERE id = ?`) and the mysql2 driver throws a query error. The `catch` block at line 269 returns
 `503 Service unavailable` rather than a proper `400 Bad Request`. Callers receive an incorrect
 status that implies a transient server failure rather than a client error.
 The existing client (`updateMemberProfile` in `client.ts`) always sends at least one field, so
 this path is unreachable from the UI today. It is reachable via direct API access.
 **Fix:** Add a Zod refinement or an explicit pre-flight check:
 ```typescript
 const updateMemberSchema = z.object({
  displayName: z.string().min(1).max(256).optional(),
  isAdmin: z.boolean().optional(),
 }).refine(
  (data) => data.displayName !== undefined || data.isAdmin !== undefined,
  { message: 'At least one field must be provided' },
 );
 ```
 This returns a 400 through the existing `noEchoHook` before the handler body runs.
 ---
 ## Info
 ### IN-01: Profile-section "Save" in edit mode blocks admin-toggle saves when member has no Fastmail credential
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:567-575`
 **Issue:** The Save button for Section 1 (Profile) is disabled when `displayName.trim().length === 0`.
 This is correct as a client-side guard, but there is no visible copy explaining *why* Save is
 disabled when the member's display name is null (a valid DB state for OIDC-provisioned users with
 no name claim). The button is greyed out and inert with no tooltip or inline copy. An admin who
 taps a member row and sees a greyed Save button for the admin toggle has no indication of what to
 do.
 **Fix:** Render a short helper line when `displayName.trim().length === 0`:
 ```tsx
 {displayName.trim().length === 0 && (
  <p style={helperTextStyle}>Enter a display name to enable Save.</p>
 )}
 ```
 ### IN-02: Display-name inputs lack `maxLength` — long entries get a generic server-side 400
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:474-481, 793-799`
 **Issue:** Both the edit-mode display-name input (line 476) and the create-mode display-name input
 (line 795) have no `maxLength` attribute. The server schema enforces `max(256)` via Zod, but a
 client submission exceeding 256 characters returns a generic 400 (the `noEchoHook` maps all Zod
 failures to `{ error: 'Invalid request' }`) with no user-visible copy explaining the length limit.
 The edit-mode username input in create mode (line 805) similarly has no `maxLength={128}`.
 **Fix:**
 ```tsx
 <input id="editor-display-name" type="text" maxLength={256} ... />
 <input id="create-display-name" type="text" maxLength={256} ... />
 <input id="create-username" type="text" maxLength={128} ... />
 ```
 ### IN-03: Phone bottom-sheet does not account for `env(safe-area-inset-bottom)`
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:380-392`
 **Issue:** The phone sheet style uses `bottom: 0` with no `paddingBottom` accounting for the iOS
 home-indicator / Android gesture-navigation bar. On a notched or edge-to-edge device, the Cancel
 and Save buttons in Section 1 (the first action row visible on open) may sit behind the system
 gesture bar. The `AdminPage` scroll container correctly uses
 `calc(56px + env(safe-area-inset-bottom, 0px))` (line 269) for its fixed tab-bar clearance, but
 the sheet itself does not.
 **Fix:** Combined with WR-03 (add `maxHeight`/`overflowY` to the phone sheet), add bottom
 padding:
 ```typescript
 paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))',
 ```
 ---
 _Reviewed: 2026-06-18_
 _Reviewer: Claude Sonnet 4.6 (gsd-code-reviewer, deep pass)_
 _Depth: deep_
@@ -0,0 +1,183 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 reviewed: 2026-06-18T14:30:00Z
 depth: deep
 files_reviewed: 5
 files_reviewed_list:
  - apps/api/src/routes/admin.ts
  - apps/api/tests/routes/admin.test.ts
  - apps/pwa/src/api/client.ts
  - apps/pwa/src/components/MemberEditorSheet.tsx
  - apps/pwa/src/routes/AdminPage.tsx
 findings:
  critical: 0
  warning: 0
  info: 0
  total: 0
 status: clean
 ---
 # Phase 20: Code Review Report (Deep Re-Review — Iteration 2)
 **Reviewed:** 2026-06-18
 **Depth:** deep (cross-file, call-chain, state-machine analysis)
 **Files Reviewed:** 5
 **Status:** clean
 ## Summary
 All 11 findings from the prior pass (2 Critical, 6 Warning, 3 Info) are genuinely resolved — not superficially patched. Verification traces are below.
 One new Info-level issue was introduced by the no-op guard fix: the "Profile saved." toast fires even when the admin clicks Save without changing anything, because `mutationFn` returns early (no network call) but `onSuccess` still runs unconditionally.
 ---
 ## Prior Finding Verification
 ### CR-01 — Last-admin guard now atomic: RESOLVED
 `apps/api/src/routes/admin.ts:258–286`
 The guard and UPDATE are wrapped in a single `db.transaction()` call. Inside the transaction, the target row is re-read with a plain (non-locking) SELECT. The locking read is then a raw `tx.execute(sql\`SELECT COUNT(*) AS count FROM ... WHERE is_admin = true FOR UPDATE\`)`. Under InnoDB REPEATABLE READ (MariaDB default), `FOR UPDATE` acquires exclusive row locks on all qualifying rows, serialising concurrent demotion transactions: the second PATCH blocks until the first commits, then re-reads a count of 1 and trips the guard.
 The `tx.execute()` call uses the transaction's dedicated connection (confirmed via drizzle-orm 0.45.2 `mysql2/session.js`: the transaction callback receives a `MySql2Transaction` whose session holds the connection obtained by `pool.getConnection()` — the same connection that issued `BEGIN`). The FOR UPDATE lock is therefore in-scope for the transaction.
 The COUNT result is destructured as `[[{ count }]]` from the raw execute result `[RowDataPacket[], FieldPacket[]]`. The cast is correct. `Number(count)` safely handles both `number` and `string` returns from MariaDB.
 The 409 response shape `{ error: 'Cannot remove the last admin' }` is unchanged. The client (`client.ts:262`) maps 409 → `throw new Error('last-admin')`, and the sheet's `onError` checks `msg === 'last-admin'`. The chain is intact.
 Test C and Test D exercise the single-request guard paths and still pass. No concurrent-scenario test exists, but the fix is structurally correct and cannot be unit-tested against a single in-process MariaDB without intentional sleep-based race staging.
 ---
 ### CR-02 — Stale editorMember: RESOLVED
 `apps/pwa/src/routes/AdminPage.tsx:87, 122–127`
 `AdminPage` now stores only `editorMemberId: number | null` (line 87) and derives `editorMember` as a computed value on every render:
 ```typescript
 const editorMember =
  editorMemberId !== null
    ? (membersQuery.data?.members.find((m) => m.id === editorMemberId) ?? null)
    : null;
 ```
 `openEditorForMember` calls `setEditorMemberId(member.id)` (line 254). After `profileMutation.onSuccess` invalidates `['admin', 'members']` and the query refetches, `editorMember` is rederived from fresh data on the next render. The `useEffect` in `MemberEditorSheet` (line 235–239) depends on `[member?.id, member?.displayName, member?.isAdmin]` and re-syncs form state immediately. The stale-snapshot overwrite path is closed.
 ---
 ### WR-01 — Profile mutation sends diff-only payload: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:261–275`
 `mutationFn` now builds a partial payload: `displayName` is added only when `trimmed !== (member.displayName ?? '')`, and `isAdmin` only when `isAdmin !== member.isAdmin`. An admin toggling only the admin flag on a null-displayName member sends `{ isAdmin: true/false }` with no `displayName` field — the Zod schema accepts this (both optional, refine requires at least one). The Save button remains enabled as long as `displayName.trim().length > 0` (or the existing displayName is non-null and unchanged). Toggle-only saves on null-displayName members are now unblocked.
 ---
 ### WR-02 — Error revert uses explicit value: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:290`
 `setIsAdmin(member!.isAdmin)` replaces the accidental `?? true` default. The `member!` non-null assertion is safe here: `mutationFn` at line 262 throws `Error('no-member')` before any API call when `member` is undefined, so the 409 error path can only be reached with a non-null `member`. The revert is now semantically explicit.
 ---
 ### WR-03 — Phone bottom-sheet overflow: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:395–413`
 The phone branch of `sheetStyle` now has `maxHeight: '90dvh'` and `overflowY: 'auto'` (lines 404–405). All three sections scroll within the 90dvh cap on short phones.
 ---
 ### WR-04 — handleClose stale closure: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:214–232`
 `handleClose` dependency array is now `[onClose, triggerRef]` — it no longer captures `member?.displayName` or `member?.isAdmin`. Only ephemeral fields (password inputs, error states, create-mode fields) are reset in `handleClose`. Member-derived fields (`displayName`, `isAdmin`) are owned exclusively by the `useEffect` at lines 235–239, which fires whenever the live `member` prop changes. Cancel after a successful save now resets to the saved (fresh) values, not the pre-save snapshot.
 ---
 ### WR-05 — Admin toggle aria-describedby: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:544`
 The admin toggle `<button>` now has `aria-describedby={profileError ? 'profile-error' : undefined}`, linking it to the shared `<div id="profile-error">` error container (line 588). Screen-reader users who activated the toggle receive an announcement path to the last-admin guard error.
 ---
 ### WR-06 — Empty {} PATCH returns 400: RESOLVED
 `apps/api/src/routes/admin.ts:225–232`
 `updateMemberSchema` now has a `.refine()` that rejects any body where both `displayName` and `isAdmin` are absent. The `noEchoHook` returns `{ error: 'Invalid request' }` 400 before the handler body executes. Drizzle is never called with an empty `set({})`.
 Test H (line 1231–1241 in `admin.test.ts`) asserts this path returns 400 with `{ error: 'Invalid request' }`.
 ---
 ### IN-01 — Helper text for empty displayName: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:580–584`
 The helper text "Enter a display name to enable Save." renders when `displayName.trim().length === 0 && !profileError`. Admins opening a null-displayName member's editor now see an explanation for why the Save button is disabled.
 ---
 ### IN-02 — maxLength on display-name and username inputs: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:500, 826, 842`
 All three inputs now have `maxLength`: edit-mode display-name `maxLength={256}` (line 500), create-mode display-name `maxLength={256}` (line 826), create-mode username `maxLength={128}` (line 842). Over-length submissions are prevented at the browser input level.
 ---
 ### IN-03 — Phone sheet safe-area padding: RESOLVED
 `apps/pwa/src/components/MemberEditorSheet.tsx:411`
 `paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))'` is present in the phone branch, co-located with the `maxHeight`/`overflowY` fix from WR-03.
 ---
 ## Info
 ### IN-01: No-op profile save fires misleading "Profile saved." toast
 **File:** `apps/pwa/src/components/MemberEditorSheet.tsx:274, 277–280`
 **Issue:** When the admin opens the editor and clicks Save without making any changes, `mutationFn` detects an empty payload (`Object.keys(payload).length === 0`) and returns early without calling the API. TanStack Query v5 treats a non-throwing return as a successful mutation and calls `onSuccess`, which fires `invalidateQueries(['admin', 'members'])` and `onToast('Profile saved.')`. The admin sees a confirmation toast for an action that sent nothing. The query also refetches unnecessarily.
 This cannot be reached through the empty-displayName path (Save is disabled then), but it is reachable any time an admin opens a sheet and saves without touching anything.
 **Fix:** Guard the toast and invalidation on whether a payload was actually sent:
 ```typescript
 mutationFn: async () => {
  if (!member) throw new Error('no-member');
  const payload: { displayName?: string; isAdmin?: boolean } = {};
  const trimmed = displayName.trim();
  if (trimmed !== (member.displayName ?? '')) {
    if (trimmed.length === 0) throw new Error('name-required');
    payload.displayName = trimmed;
  }
  if (isAdmin !== member.isAdmin) payload.isAdmin = isAdmin;
  if (Object.keys(payload).length === 0) return { noop: true };
  await updateMemberProfile(member.id, payload);
  return { noop: false };
 },
 onSuccess: (result) => {
  if (result?.noop) return; // nothing changed — no toast, no refetch
  void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
  onToast('Profile saved.');
 },
 ```
 Alternatively, disable the Save button when `displayName.trim() === (member?.displayName ?? '')` and `isAdmin === member?.isAdmin` (change-detection guard on the button itself).
 ---
 _Reviewed: 2026-06-18_
 _Reviewer: Claude Sonnet 4.6 (gsd-code-reviewer, deep pass — iteration 2)_
 _Depth: deep_
@@ -0,0 +1,71 @@
 ---
 phase: 20
 slug: admin-member-editor-form-declutter
 status: verified
 threats_open: 0
 asvs_level: 1
 created: 2026-06-18
 ---
 # Phase 20 — Security
 > Per-phase security contract: threat register, accepted risks, and audit trail.
 > Result: **SECURED** — 10/10 threats CLOSED. `register_authored_at_plan_time: true` (verify-only; no new-threat scan).
 ---
 ## Trust Boundaries
 | Boundary | Description | Data Crossing |
 |----------|-------------|---------------|
 | client → /api/admin | Untrusted admin-session input crosses into the admin surface; guarded by router-wide `requireAdmin` (`admin.ts:48`). No NEW boundary added by this phase. | Member profile fields, `isAdmin` toggle, app-password credential |
 | PWA → /api/admin | Client fetch (`updateMemberProfile`, `saveCredential`) calls into the admin surface; server-side `requireAdmin` + last-admin guard are the real boundaries. Client toggle state is non-authoritative. | Same as above; password fields are write-only |
 ---
 ## Threat Register
 | Threat ID | Category | Component | Disposition | Mitigation | Status |
 |-----------|----------|-----------|-------------|------------|--------|
 | T-20-01 | Elevation of Privilege | PATCH /members/:id isAdmin toggle | mitigate | Router-wide `requireAdmin` first statement (`admin.ts:48`); PATCH adds no second/weaker guard (`:234`); 403 test (`admin.test.ts:1180-1190`) | closed |
 | T-20-02 | Denial of Service (self-lockout) | last-admin demotion | mitigate | Last-admin 409 guard, count+update in txn with `FOR UPDATE` (`admin.ts:271-293`); 409 test (`:1128-1150`), self-demote-with-2nd-admin 200 test (`:1153-1177`) | closed |
 | T-20-03 | Tampering | malformed :id / wrong-type body | mitigate | `parsePositiveIntParam` rejects bad ids → 400 (`admin.ts:88-93,235`); `updateMemberSchema` + `noEchoHook` reject wrong types → 400 (`:225-234,76`); test F (`:1193-1216`) | closed |
 | T-20-04 | Information Disclosure | error echo on invalid input | mitigate | `noEchoHook` returns only `{ error: 'Invalid request' }` (`admin.ts:76-80`); request body never logged (`:241,297-300`) | closed |
 | T-20-05 | Spoofing (stale session) | updateMemberProfile fetch | mitigate | `SessionExpiredError` on 401/opaqueredirect reuses existing re-auth flow (`client.ts:261`); `redirect:'manual'` + `credentials:'include'` (`:254-258`) | closed |
 | T-20-06 | Elevation of Privilege (client trust) | last-admin sentinel | accept | Server 409 authoritative (`admin.ts:271-293`); client only surfaces `'last-admin'` sentinel (`client.ts:262`). See Accepted Risks Log. | closed |
 | T-20-07 | Information Disclosure | password / app-password fields | mitigate | Fields write-only: `type=password` + `autoComplete="new-password"`, blank init (`MemberEditorSheet.tsx:188-205,639-882`); no `console.*` logging (0 grep matches) | closed |
 | T-20-08 | Tampering | CalDAV credential | mitigate | App-password save routes through `saveCredential` → server-side CalDAV validation before store (`MemberEditorSheet.tsx:338`, `admin.ts:373-393`); invalid → failure copy, nothing stored (`:355`) | closed |
 | T-20-09 | Elevation of Privilege (UI bypass) | admin toggle | mitigate | Toggle cosmetic `role=switch` (`MemberEditorSheet.tsx:546`); reverts + inline error on `last-admin` (`:288-295`); real enforcement is server 409 (T-20-02) | closed |
 | T-20-SC | Tampering (supply chain) | npm installs | mitigate | No new packages; `lucide-react@1.17.0` already in `package.json:30`; imports `AdminPage.tsx:28`, `MemberEditorSheet.tsx:25-27` | closed |
 *Status: open · closed*
 *Disposition: mitigate (implementation required) · accept (documented risk) · transfer (third-party)*
 ---
 ## Accepted Risks Log
 | Risk ID | Threat Ref | Rationale | Accepted By | Date |
 |---------|------------|-----------|-------------|------|
 | AR-20-01 | T-20-06 | Client-side last-admin toggle state is non-authoritative by design. The demotion guard is enforced server-side (409, `admin.ts:271-293`); the client only surfaces the rejection via the `'last-admin'` sentinel (`client.ts:262`) and reverts the toggle (`MemberEditorSheet.tsx:294`). A tampered client that ignores the sentinel still cannot bypass the guard — the server rejects regardless. Matches existing pattern: "isAdmin drives nav visibility; the real boundary is server-side." Residual risk: none beyond the already-mitigated server boundary at ASVS L1. | Lucas Berger (per Plan 20-02 threat model) | 2026-06-18 |
 ---
 ## Security Audit Trail
 | Audit Date | Threats Total | Closed | Open | Run By |
 |------------|---------------|--------|------|--------|
 | 2026-06-18 | 10 | 10 | 0 | gsd-security-auditor |
 **Notable hardening beyond plan:** the last-admin guard wraps count+update in a transaction with a `FOR UPDATE` locking read (`admin.ts:249-286`) to defeat a concurrent double-demotion race — strengthens T-20-02 past the plan minimum.
 ---
 ## Sign-Off
 - [x] All threats have a disposition (mitigate / accept / transfer)
 - [x] Accepted risks documented in Accepted Risks Log
 - [x] `threats_open: 0` confirmed
 - [x] `status: verified` set in frontmatter
 **Approval:** verified 2026-06-18
@@ -0,0 +1,317 @@
 ---
 phase: 20
 slug: admin-member-editor-form-declutter
 status: draft
 shadcn_initialized: false
 preset: none
 created: 2026-06-18
 ---
 # Phase 20 — UI Design Contract
 > Visual and interaction contract for the Admin Member Editor & Form Declutter phase.
 > Generated by gsd-ui-researcher, verified by gsd-ui-checker.
 ---
 ## Design System
 | Property | Value |
 |----------|-------|
 | Tool | none — custom CSS custom properties |
 | Preset | not applicable |
 | Component library | none — inline styles referencing CSS tokens |
 | Icon library | lucide-react (existing: CheckCircle, AlertCircle, Loader2; add ChevronRight) |
 | Font | system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
 No `components.json` detected. Project uses a hand-rolled design token system declared in
 `apps/pwa/src/styles/tokens.css`. All new components must reference those CSS custom properties
 (never hard-code hex/px). This is an established project convention — do not introduce shadcn or
 any third-party component library in this phase.
 ---
 ## Spacing Scale
 All tokens sourced from `apps/pwa/src/styles/tokens.css` (pre-populated — no change needed):
 | Token | Value | Usage |
 |-------|-------|-------|
 | `--space-1` | 4px | Icon gaps, label-to-input margin |
 | `--space-2` | 8px | Badge icon gap, toast icon gap, button row gap |
 | `--space-3` | 12px | Field gap inside editor sections, tab padding |
 | `--space-4` | 16px | Default field padding, section heading margin-bottom |
 | `--space-6` | 24px | Sheet padding, section gap between Profile / Password / App-password |
 | `--space-8` | 32px | Section bottom margin in Members panel |
 | `--space-12` | 48px | Page top/bottom padding |
 Exceptions:
 - Member row minimum height: 44px (touch target floor — not a spacing token)
 - Sheet border-radius: 12px phone bottom-sheet top corners / 12px desktop modal all corners (matches existing CredentialSheet / ResetPasswordSheet)
 - MemberRow add-member trigger button bottom margin: `--space-4` below member list, above the trigger
 ---
 ## Typography
 All values sourced from `tokens.css` (pre-populated — no change):
 | Role | Size | Weight | Line Height | Usage in this phase |
 |------|------|--------|-------------|---------------------|
 | Body | 15px (`--text-body-size`) | 400 (`--text-body-weight`) | 1.5 (`--text-body-line-height`) | Member display name in row; section description text; subtitle line under sheet heading |
 | Label | 13px (`--text-label-size`) | 400 or 600 | 1.4 (`--text-label-line-height`) | Form field labels (600), credential status badges (400), toast copy (400), section MEMBERS heading (600 + uppercase) |
 | Heading | 18px (`--text-heading-size`) | 600 (`--text-heading-weight`) | 1.25 (`--text-heading-line-height`) | Sheet h2 ("Edit member", "Add member"), editor section dividers |
 | Display | 24px (`--text-display-size`) | 600 (`--text-display-weight`) | 1.2 (`--text-display-line-height`) | Not used in this phase |
 ---
 ## Color
 All values sourced from `tokens.css` (pre-populated):
 | Role | Value | Usage |
 |------|-------|-------|
 | Dominant (60%) | `--color-surface` (#ffffff) | Page background, sheet background, input background |
 | Secondary (30%) | `--color-surface-dim` (#f7f7f8) / `--color-border-subtle` (#eceef2) | MemberRow bottom border, section dividers, "Add member" trigger button border |
 | Accent (10%) | `--color-member-0` (#e8915a) | Primary action buttons only (see reserved-for list below) |
 | Destructive | `--color-destructive` (#dc2626) | Inline error text, error-state input border |
 Accent (`--color-member-0`) reserved for:
 1. Primary save/submit button background (enabled state) in the Member editor — each section's "Save" button
 2. Active tab underline indicator in the Members & Accounts / Settings tab strip
 3. "Currently shared" label text in the calendar picker (existing pattern, unchanged)
 4. Toast success icon (`CheckCircle`)
 5. "Use detected:" timezone affordance link (existing pattern, unchanged)
 Accent is NOT used on:
 - Cancel buttons (use `--color-text-secondary`, no background)
 - Disabled buttons (use `--color-border` as background)
 - The "Add member" trigger button (ghost button: `--color-surface` background, `--color-surface-dim` hover — matches Surface A; not an accent CTA)
 - The row chevron/edit icon (use `--color-text-muted`)
 Member avatar swatches use `--color-member-{colorIndex}` (index-derived, unchanged from existing MemberRow).
 ---
 ## Surface Inventory
 This phase introduces or reworks the following surfaces:
 ### Surface A — Member list (Members tab, existing panel body)
 The current inline "Add member" form and the per-row action-button cluster are removed.
 The panel body becomes:
 ```
 [Section label: MEMBERS]
 [MemberRow] × N              ← whole-row tap opens editor sheet; trailing ChevronRight icon
 [Divider]
 [+ Add member button]        ← single trigger at bottom; opens MemberEditorSheet in create mode
 ```
 MemberRow (reworked):
 - Layout: avatar swatch (32px circle) → name + status badge → flex spacer → ChevronRight icon (16px, `--color-text-muted`)
 - The entire row is the tap/click target (min-height 44px, `cursor: pointer`)
 - `role="button"` on the row div, `aria-label="Edit {displayName}"`, `tabIndex={0}`, keyboard: Enter/Space opens editor
 - Trailing admin badge: when `member.isAdmin === true`, show a small inline badge — label "Admin", 12px/600, `--color-member-0` text on `--color-surface-dim` background, border-radius 4px, padding 2px 6px — placed between the status badge and the chevron
 - Remove: "Rotate" button, "Add credential" button, "Reset password" button — all removed from MemberRow
 "Add member" trigger button:
 - Full-width or left-aligned ghost button with `+` icon prefix (use lucide `Plus`, 16px)
 - Label: "Add member"
 - Border: `1px solid var(--color-border)`, border-radius 8px, padding `--space-3` vertical / `--space-4` horizontal
 - Background: `--color-surface`; hover/focus: `--color-surface-dim`
 - Min-height: 44px
 - Opens MemberEditorSheet in create mode
 ### Surface B — Member editor sheet (MemberEditorSheet, new component)
 Single sheet component with `mode` prop: `'edit'` (id present) or `'create'` (no id).
 Sheet chrome (identical to CredentialSheet / ResetPasswordSheet):
 - Phone: fixed bottom, `border-radius 12px 12px 0 0`, `box-shadow: 0 -4px 24px rgba(0,0,0,0.15)`, `padding: var(--space-6)`, zIndex 301
 - Desktop: centered modal, `max-width 480px`, `border-radius 12px`, `box-shadow: 0 8px 32px rgba(0,0,0,0.18)`, `padding: var(--space-6)`, zIndex 301
 - Backdrop: `rgba(0,0,0,0.32)` (`--color-overlay`), zIndex 300, click closes
 - Escape closes; focus returns to trigger row on close
 - `role="dialog"`, `aria-modal="true"`, `aria-label` = sheet heading
 - `useFocusTrap` on dialog div
 - On open: focus the h2 heading (`tabIndex={-1}`)
 - Desktop: `max-height: calc(100dvh - var(--space-8))`, `overflow-y: auto`
 Sheet heading:
 - `h2`, 18px/600/1.25, `--color-text-primary`
 - Edit mode: "Edit member"
 - Create mode: "Add member"
 Member subtitle (edit mode only):
 - 15px/400, `--color-text-secondary`, `margin-bottom: var(--space-6)`
 - Displays `member.displayName`
 **Edit mode — three collapsible sections rendered as labeled card blocks:**
 Section divider style (between sections):
 - `border-top: 1px solid var(--color-border-subtle)`, `margin: var(--space-6) 0`
 **Section 1 — Profile** (always shown in edit mode):
 - Section heading: "Profile", 13px/600/uppercase/letterspacing 0.06em, `--color-text-muted`
 - Field: "Display name" — text input, 15px, min-height 44px, border `--color-border`, border-radius 4px, padding `--space-3 --space-4`
 - Field: "Admin" — toggle/checkbox row:
  - Label: "Admin", 15px/400, `--color-text-primary`
  - Sub-label: "Can access admin settings", 13px/400, `--color-text-secondary`
  - Control: native `<input type="checkbox">` styled as a toggle (or a `<button role="switch">` with `aria-checked`) — use whichever is cleaner; visually: pill shape, 44px×24px, `--color-member-0` when checked, `--color-border` when unchecked, white thumb circle
  - Initial state: `member.isAdmin` from API
  - Last-admin guard: if saving would demote the last admin, show inline error below the toggle: "Cannot remove admin — at least one admin must remain." (red, 13px)
 - Save button for this section: label "Save", right-aligned, same primary button style (accent background, 13px/600, min-height 44px, border-radius 4px)
 - Error state: inline below Save button, `--color-destructive`, 13px
 **Section 2 — Set new password** (edit mode only; only shown when `member.hasLocalCredential === true`):
 - Section heading: "Set new password", same style as above
 - Helper: "Leave blank to keep the current password." — 13px/400, `--color-text-secondary`, below heading
 - Field: "New password" — `type="password"`, `autoComplete="new-password"`, min-height 44px
 - Field: "Confirm new password" — same
 - Password never pre-filled. `autoComplete="new-password"` on both fields.
 - Save button: label "Set password", right-aligned, primary style
 - Validation: if fields differ, inline error "Passwords do not match." If new password < 8 chars, "Password must be at least 8 characters."
 - In-flight: show `Loader2` 14px inline in the button (existing pattern)
 **Section 3 — App password** (edit mode only):
 - Section heading: "App password", same style
 - Helper text: "Fastmail app password scoped to Calendars & Contacts (CalDAV)."
  - Include inline link: "Get an app password" → `https://app.fastmail.com/settings/security/devicetokens`, `target="_blank" rel="noopener noreferrer"`, `--color-member-0` color, underline
 - Field: "Fastmail email" — `type="email"`, `autoComplete="email"`, min-height 44px
  - In edit mode: if the stored `fastmailEmail` is available from the credential, prefill this field with the stored email (read-convenience; the user can correct it). The app password field is never prefilled.
 - Field: "App password" — `type="password"`, `autoComplete="new-password"`, never prefilled
 - "Validating against CalDAV…" — shown during in-flight mutation, using `Loader2` 16px + text (matches CredentialSheet pattern)
 - CalDAV failure error: "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again."
 - Save button: label "Save app password", right-aligned, primary style
 **Create mode — single unified form (no section dividers):**
 - Fields: Display name, Username, Initial password, Confirm password
 - Matches today's inline Add-member form fields exactly
 - Save button: label "Add member", right-aligned, primary style
 - Client validation: passwords match + ≥ 8 chars; username conflict 409 → "That username is already in use."
 ---
 ## Copywriting Contract
 | Element | Copy |
 |---------|------|
 | Editor sheet heading (edit) | "Edit member" |
 | Editor sheet heading (create) | "Add member" |
 | Profile section heading | "Profile" |
 | Password section heading | "Set new password" |
 | Password section helper | "Leave blank to keep the current password." |
 | App password section heading | "App password" |
 | App password helper | "Fastmail app password scoped to Calendars & Contacts (CalDAV)." |
 | App password link text | "Get an app password" |
 | Profile Save CTA | "Save" |
 | Password Save CTA | "Set password" |
 | App password Save CTA | "Save app password" |
 | Create mode Save CTA | "Add member" |
 | Add member trigger (panel) | "Add member" |
 | Cancel (all sheets) | "Cancel" |
 | Admin badge label | "Admin" |
 | Admin toggle label | "Admin" |
 | Admin toggle sub-label | "Can access admin settings" |
 | Credential status — set | "Credential set" |
 | Credential status — missing | "No credential" |
 | Validating state | "Validating against CalDAV…" |
 | CalDAV failure error | "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again." |
 | Last-admin guard error | "Cannot remove admin — at least one admin must remain." |
 | Password mismatch error | "Passwords do not match." |
 | Password too short error | "Password must be at least 8 characters." |
 | Username conflict error | "That username is already in use. Choose a different one." |
 | Generic save error | "Something went wrong. Please try again." |
 | Profile saved toast | "Profile saved." |
 | Password reset toast | "Password updated." |
 | App password saved toast | "App password saved." |
 | Member added toast | "Member added." |
 | Loading members state | "Loading members…" |
 | Members load error | "Could not load members." |
 | Empty members state heading | "No members yet" |
 | Empty members state body | "Add a member to get started." |
 **Retired copy (must not appear anywhere after this phase):**
 - "Rotate" — remove from all button labels, headings, and aria-labels
 - "Add credential" — remove from MemberRow button
 - "Reset password" — remove as standalone button; replaced by "Set new password" section inside editor
 ---
 ## Interaction Contracts
 ### Row tap → editor open
 - Tap/click anywhere on a MemberRow opens MemberEditorSheet in edit mode for that member
 - Keyboard: Enter or Space on the row (when `role="button"`) opens the sheet
 - Focus returns to the tapped row on sheet close
 ### "Add member" trigger → create sheet
 - Tap/click the "Add member" button opens MemberEditorSheet in create mode
 - On success: sheet closes, member list refreshes, toast "Member added." fires
 - Focus returns to the "Add member" button on cancel/close
 ### Per-section saves (edit mode)
 - Each section (Profile / Set new password / App password) has its own Save button
 - Save is independent — one section save does not affect other sections
 - Disabled state: button uses `--color-border` background, `cursor: default`
 - In-flight: Loader2 spinner inline in button label (existing pattern), button disabled
 - Success: toast fires, sheet stays open (user may save another section)
 - Error: inline error below the section's save button
 ### Admin toggle
 - Toggle flips `is_admin` optimistically on the client
 - On save (Profile section Save): sends to `PATCH /api/admin/members/:id`
 - If server returns 409/422 (last-admin guard): show inline error "Cannot remove admin — at least one admin must remain." Revert toggle to previous state.
 ### Sheet dismissal
 - Backdrop click: closes sheet, discards unsaved changes, focus returns to trigger
 - Escape key: same as backdrop click
 - Cancel button: same as backdrop click
 - No confirmation dialog for unsaved changes (forms are short; data loss is minimal)
 ### Toast positioning
 - Phone: `bottom: calc(var(--bottom-chrome-h) + var(--space-4))` (clears BottomTabBar)
 - Desktop: `bottom: var(--space-6)`
 - Auto-dismiss: 3000ms (existing pattern, unchanged)
 ---
 ## Accessibility Contract
 - MemberRow: `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, keyboard Enter/Space
 - MemberEditorSheet: `role="dialog"`, `aria-modal="true"`, `aria-label` matches sheet h2
 - Focus management: on open → h2 (`tabIndex={-1}`); on close → trigger element
 - `useFocusTrap` traps Tab/Shift+Tab within dialog
 - Admin toggle: `role="switch"`, `aria-checked={isAdmin}`, `aria-label="Admin"`
 - Inline errors: `aria-describedby` on the relevant input(s) pointing to the error id
 - Password fields: `autoComplete="new-password"`, never prefilled
 - Fastmail email field (app password section): `autoComplete="email"`
 - Toast: `role="status"`, `aria-live="polite"`, `aria-atomic="true"`
 - 44px minimum touch target on all interactive elements
 - Section headings inside sheet: use `<div>` with sectionLabelStyle (matches AdminPage pattern) — not `<h3>`, to avoid heading hierarchy issues with the existing `<h2>` sheet title
 ---
 ## Registry Safety
 | Registry | Blocks Used | Safety Gate |
 |----------|-------------|-------------|
 | shadcn official | none | not applicable — shadcn not initialized |
 | Third-party | none | not applicable |
 No third-party component registries. All components are hand-authored using project CSS tokens.
 Icon additions from `lucide-react` (already a project dependency): `ChevronRight`, `Plus`.
 ---
 ## Checker Sign-Off
 - [ ] Dimension 1 Copywriting: PASS
 - [ ] Dimension 2 Visuals: PASS
 - [ ] Dimension 3 Color: PASS
 - [ ] Dimension 4 Typography: PASS
 - [ ] Dimension 5 Spacing: PASS
 - [ ] Dimension 6 Registry Safety: PASS
 **Approval:** pending
@@ -0,0 +1,135 @@
 ---
 phase: 20-admin-member-editor-form-declutter
 verified: 2026-06-18T00:00:00Z
 status: passed
 score: 9/9 must-haves verified
 behavior_unverified: 0
 overrides_applied: 0
 re_verification: false
 ---
 # Phase 20: Admin Member Editor & Form Declutter Verification Report
 **Phase Goal:** Replace the per-member-row action buttons (Rotate/Add credential + Reset password) with a SINGLE edit affordance — tapping a member opens a member-detail editor where an admin modifies all of that member's details in one place. Also collapse the "Add member" section behind a single trigger.
 **Verified:** 2026-06-18
 **Status:** passed
 **Re-verification:** No — initial verification
 ---
 ## Goal Achievement
 ### Observable Truths
 | # | Truth | Status | Evidence |
 |---|-------|--------|---------|
 | 1 | An admin can update a member's display name and admin flag through one route behind requireAdmin | VERIFIED | `adminRouter.patch('/members/:id', zValidator(...), handler)` at admin.ts:230; `adminRouter.use('*', requireAdmin)` at admin.ts:48 — no second guard in the PATCH handler |
 | 2 | Demoting the only remaining admin is rejected with a 409 and the member stays admin | VERIFIED | admin.ts:251-258: counts admins with `sql\`COUNT(*)\`` where `users.isAdmin` is true; returns `c.json({ error: 'Cannot remove the last admin' }, 409)` when count <= 1. Test C in admin.test.ts asserts 409 + subsequent GET confirms isAdmin still true |
 | 3 | Self-demotion succeeds while another admin exists | VERIFIED | Same guard only fires when `count <= 1`; Test D seeds two admins and asserts 200 + one admin remaining |
 | 4 | GET /api/admin/members returns each member's isAdmin so the editor toggle has correct initial state | VERIFIED | admin.ts:109: `isAdmin: users.isAdmin` in select; admin.ts:121: `isAdmin: row.isAdmin` in mapped object. Test H asserts boolean `isAdmin` on each member object |
 | 5 | The PWA can call the member-profile update route and receive a typed result; 409/422 surfaces as a last-admin sentinel | VERIFIED | client.ts:249-264: `updateMemberProfile` issues `PATCH /api/admin/members/${memberId}`, maps 409/422 to `throw new Error('last-admin')`, maps 401/opaqueredirect to `SessionExpiredError` |
 | 6 | AdminMember carries isAdmin so the editor toggle can show the correct initial state | VERIFIED | client.ts:597: `isAdmin: boolean;` present in `AdminMember` interface with Phase 20 comment |
 | 7 | Tapping a member row opens one editor sheet for all of that member's details | VERIFIED | AdminPage.tsx:929-933: `role="button"`, `tabIndex={0}`, `onClick={handleActivate}`, `onKeyDown` Enter/Space handler — full tap target. MemberEditorSheet imported and mounted at AdminPage.tsx:891. Per-section saves (Profile/Set new password/App password) all wired to live endpoints |
 | 8 | Add member is collapsed behind a single trigger that opens the same sheet in create mode | VERIFIED | AdminPage.tsx:408-440: single ghost button with `Plus` icon, `1px solid var(--color-border)`, opens `MemberEditorSheet` in `'create'` mode. No inline always-open add-form present |
 | 9 | The terms Rotate, Add credential, and the standalone Reset password button no longer appear | VERIFIED | `grep -RnE '"Rotate"\|>Rotate<\|Add credential\|Reset password' apps/pwa/src/routes/AdminPage.tsx apps/pwa/src/components/MemberEditorSheet.tsx` — zero matches. `ResetPasswordSheet` absent from AdminPage.tsx |
 **Score:** 9/9 truths verified (0 present, behavior-unverified)
 ---
 ### Required Artifacts
 | Artifact | Expected | Status | Details |
 |----------|----------|--------|---------|
 | `apps/api/src/routes/admin.ts` | PATCH /api/admin/members/:id + isAdmin in GET /members select | VERIFIED | Route at line 230; `isAdmin: users.isAdmin` in select at line 109; last-admin guard at lines 251-258; `updateMemberSchema` Zod schema at line 225 |
 | `apps/api/tests/routes/admin.test.ts` | Tests A-H for PATCH route + isAdmin in GET | VERIFIED | Tests A-H present (lines 1079-1260+); test C asserts 409 last-admin guard; test H asserts isAdmin boolean per member |
 | `apps/pwa/src/api/client.ts` | `updateMemberProfile` fetcher + `AdminMember.isAdmin` | VERIFIED | `updateMemberProfile` at line 249 (PATCH verb, correct URL); `isAdmin: boolean` on `AdminMember` at line 597; `last-admin` sentinel at line 262 |
 | `apps/pwa/src/components/MemberEditorSheet.tsx` | Single editor, edit+create modes, per-section saves, retired Rotate copy | VERIFIED | 899 lines; `mode: 'edit' | 'create'` prop; three edit-mode sections; `role="switch"` admin toggle; last-admin inline error; create mode with four fields; no "Rotate"/"Add credential"/"Reset password" literals |
 | `apps/pwa/src/routes/AdminPage.tsx` | Tappable MemberRow + ChevronRight + single Add-member trigger; no per-row action cluster; no ResetPasswordSheet | VERIFIED | MemberRow has `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, Enter/Space handler; ChevronRight at line 1039; Admin badge at line 1022-1036; Plus ghost trigger at line 437; MemberEditorSheet mounted at line 891; zero ResetPasswordSheet references |
 ---
 ### Key Link Verification
 | From | To | Via | Status | Details |
 |------|----|-----|--------|---------|
 | `AdminPage.tsx MemberRow` | `MemberEditorSheet.tsx` | `onEdit(rowEl) → openEditorForMember(member, rowEl) → setEditorOpen(true), setEditorMode('edit')` | WIRED | AdminPage.tsx:241-246 and 398-404; MemberEditorSheet imported at line 38 |
 | `AdminPage.tsx "Add member" trigger` | `MemberEditorSheet.tsx create mode` | `openEditorForCreate() → setEditorMode('create'), setEditorOpen(true)` | WIRED | AdminPage.tsx:249-254 and 413 |
 | `MemberEditorSheet.tsx Profile save` | `client.ts updateMemberProfile` | `updateMemberProfile(member.id, { displayName, isAdmin })` | WIRED | MemberEditorSheet.tsx:262; client.ts:249 |
 | `client.ts updateMemberProfile` | `admin.ts PATCH /members/:id` | `fetch PATCH /api/admin/members/${memberId}` | WIRED | client.ts:253; admin.ts:230 |
 | `admin.ts PATCH handler` | `db/schema.ts users.isAdmin` | `db.update(users).set(updates).where(eq(users.id, targetId))` | WIRED | admin.ts:267; COUNT query at line 253-256 |
 | `MemberEditorSheet.tsx 409 onError` | `setProfileError('Cannot remove admin...')` | `msg === 'last-admin'` sentinel branch + toggle revert | WIRED | MemberEditorSheet.tsx:274-278 |
 ---
 ### Data-Flow Trace (Level 4)
 | Artifact | Data Variable | Source | Produces Real Data | Status |
 |----------|---------------|--------|--------------------|--------|
 | `MemberEditorSheet.tsx` | `member` (prop) | `membersQuery.data?.members` in AdminPage → `fetchAdminMembers()` → `GET /api/admin/members` → DB select of users + joins | DB query returns live rows including `isAdmin` | FLOWING |
 | `AdminPage.tsx MemberRow` | `member.isAdmin` | Same path above; `isAdmin: row.isAdmin` mapped from `users.isAdmin` column | Live boolean from DB | FLOWING |
 | `MemberEditorSheet.tsx isAdmin toggle` | `useState(member?.isAdmin ?? false)` | Seeded from `member.isAdmin` on open and on member change via `useEffect` | Reflects live DB value on sheet open | FLOWING |
 ---
 ### Behavioral Spot-Checks
 | Behavior | Evidence | Status |
 |----------|----------|--------|
 | Last-admin guard returns 409 and member stays admin | Test C in admin.test.ts (line 1128): asserts 409 response + subsequent GET confirms `isAdmin: true`. SUMMARY.md confirms 44 tests green | PASS |
 | GET /members returns boolean isAdmin per member | Test H in admin.test.ts (line 1235): asserts boolean `isAdmin` on each member object | PASS |
 | `updateMemberProfile` maps 409 to 'last-admin' sentinel | client.ts:262: `if (res.status === 409 || res.status === 422) throw new Error('last-admin')` — deterministic static analysis | PASS |
 | Retired copy absent | grep on all four modified files — zero matches for "Rotate", "Add credential", "Reset password" | PASS |
 | Playwright-cli verified UI contract | Screenshots in `screenshots/`: admin-members-tab-decluttered.png, member-editor-edit-mode.png, member-editor-create-mode.png, profile-save-toast.png — executor verified no retired buttons, row tap opens "Edit member", Add-member trigger opens "Add member", Profile save fires toast and sheet stays open | PASS |
 ---
 ### Probe Execution
 No phase-specific probes declared. The orchestrator has confirmed 461/461 API tests green (includes the 8 new PATCH /members/:id tests) and PWA production build passing.
 ---
 ### Requirements Coverage
 Phase 20 PLANs declare `requirements: []` in all three frontmatter blocks. The REQUIREMENTS.md traceability table maps ADMIN-01, ADMIN-02, ADMIN-03 to Phase 10 — Phase 20 is a UI/UX improvement layer over those already-shipped requirements and does not introduce new REQ-IDs. No orphaned requirements for this phase.
 ---
 ### Anti-Patterns Found
 | File | Pattern | Severity | Impact |
 |------|---------|----------|--------|
 | None | — | — | — |
 Zero TBD / FIXME / XXX markers in any of the four modified files. No stub patterns (empty returns, placeholder renders, hardcoded empty arrays). The `fastmailEmail` field starting blank in edit mode is intentional and documented via a code comment (the API does not return it), not a stub.
 ---
 ### Human Verification Required
 None. All behavioral checks were either:
 - Covered by the 8 new integration tests (last-admin guard, isAdmin read, auth boundary, validation, 404)
 - Verified by playwright-cli observation (four screenshots captured by executor)
 - Verifiable statically (retired copy grep, artifact wiring, sentinel mapping)
 No iOS-Safari-standalone or other device-only checks are in scope for this phase.
 ---
 ### Gaps Summary
 No gaps. All 9 observable truths verified at all four levels (exists, substantive, wired, data flowing). The 3 CONTEXT decisions (D-01..D-07) are honored:
 - D-01: Editor exposes exactly the four fields (displayName, password, app password, isAdmin)
 - D-02: PATCH /members/:id in existing requireAdmin boundary; `AdminMember.isAdmin` surfaces the initial state
 - D-03: Last-admin guard returns 409; client shows inline error and reverts toggle
 - D-04: Whole-row `role="button"` with ChevronRight; per-row action cluster removed
 - D-05: Per-section saves; sheet stays open after edit saves; closes only on create success
 - D-06: "Rotate" / "Add credential" / "Reset password" retired from all files
 - D-07: Single `MemberEditorSheet` component with `mode: 'edit' | 'create'` prop; inline add-form collapsed behind ghost trigger
 ---
 _Verified: 2026-06-18_
 _Verifier: Claude (gsd-verifier)_
@@ -11,12 +11,13 @@
 *   - No console.log of request bodies or passwords in any handler (T-10-10).
 *
 * Routes:
- *   GET  /api/admin/members                    → list members + credential status (UI-SPEC Surface 2)
+ *   GET   /api/admin/members                    → list members + credential status + isAdmin (UI-SPEC Surface 2)
- *   POST /api/admin/members                    → create local member: users row + local_credentials (AUTH-LOCAL-07)
+ *   POST  /api/admin/members                    → create local member: users row + local_credentials (AUTH-LOCAL-07)
- *   POST /api/admin/members/:id/password       → admin reset local member password (AUTH-LOCAL-08)
+ *   PATCH /api/admin/members/:id               → update member profile: displayName and/or isAdmin (Plan 20-01)
- *   POST /api/admin/credentials                → validate+encrypt+store for any member (ADMIN-01)
+ *   POST  /api/admin/members/:id/password       → admin reset local member password (AUTH-LOCAL-08)
- *   GET  /api/admin/calendars                  → list synced calendars (UI-SPEC Surface 5)
+ *   POST  /api/admin/credentials                → validate+encrypt+store for any member (ADMIN-01)
- *   PUT  /api/admin/calendars/:id/shared       → exclusive is_shared designation (ADMIN-02)
+ *   GET   /api/admin/calendars                  → list synced calendars (UI-SPEC Surface 5)
 *   PUT   /api/admin/calendars/:id/shared       → exclusive is_shared designation (ADMIN-02)
 *
 * Mounted in index.ts: app.route('/api/admin', adminRouter)
 */
@@ -105,6 +106,7 @@ adminRouter.get('/members', async (c) => {
      id: users.id,
      displayName: users.displayName,
      color: users.color,
      isAdmin: users.isAdmin, // Plan 20-01: feeds editor admin toggle initial state (D-02)
      credentialId: memberCredentials.id,
      localCredId: localCredentials.id, // LEFT JOIN — null when no local_credentials row
    })
@@ -116,6 +118,7 @@ adminRouter.get('/members', async (c) => {
    id: row.id,
    displayName: row.displayName,
    color: row.color,
    isAdmin: row.isAdmin, // Plan 20-01
    hasCredential: row.credentialId !== null,
    hasLocalCredential: row.localCredId !== null, // AUTH-LOCAL-17
  }));
@@ -208,6 +211,97 @@ adminRouter.post('/members', zValidator('json', createMemberSchema, noEchoHook),
  }
 });
 // ---------------------------------------------------------------------------
 // PATCH /api/admin/members/:id
 //
 // Updates a member's displayName and/or isAdmin flag (Plan 20-01, D-02, D-03).
 // Security:
 //   - requireAdmin: inherited from adminRouter.use('*', requireAdmin) (D-02 — no second guard)
 //   - noEchoHook: applied for consistency with other admin write routes (T-20-04)
 //   - D-03 last-admin guard: rejects isAdmin=false when target is the sole remaining admin (T-20-02)
 //   - parsePositiveIntParam: rejects malformed ids (T-20-03)
 // ---------------------------------------------------------------------------
 const updateMemberSchema = z
  .object({
    displayName: z.string().min(1).max(256).optional(),
    isAdmin: z.boolean().optional(),
  })
  .refine((data) => data.displayName !== undefined || data.isAdmin !== undefined, {
    message: 'At least one field must be provided',
  });
 adminRouter.patch('/members/:id', zValidator('json', updateMemberSchema, noEchoHook), async (c) => {
  const targetId = parsePositiveIntParam(c.req.param('id'));
  if (targetId === null) {
    return c.json({ error: 'Invalid member id' }, 400);
  }
  const { displayName, isAdmin } = c.req.valid('json');
  // T-20-04: NEVER log request body
  // Build a partial set() from whichever fields are present — validated non-empty by schema
  const updates: { displayName?: string; isAdmin?: boolean } = {};
  if (displayName !== undefined) updates.displayName = displayName;
  if (isAdmin !== undefined) updates.isAdmin = isAdmin;
  try {
    // CR-01: wrap the guard + update in a transaction so the last-admin check and
    // the UPDATE are atomic. Without a transaction, two concurrent demotions both
    // read count=2, both pass the guard, and both commit — leaving zero admins.
    // The locking read (FOR UPDATE via raw SQL suffix) serialises concurrent
    // demotions: the second PATCH blocks until the first commits and then re-reads
    // a count of 1, triggering the 'last-admin' error correctly.
    let lastAdminViolation = false;
    let notFound = false;
    await db.transaction(async (tx) => {
      // Re-read the target inside the transaction so we see the committed state
      const [target] = await tx
        .select({ id: users.id, isAdmin: users.isAdmin })
        .from(users)
        .where(eq(users.id, targetId))
        .limit(1);
      if (!target) {
        notFound = true;
        return;
      }
      // D-03 last-admin guard: reject demotion of the only remaining admin (T-20-02).
      // Use a raw locking read to serialise concurrent demotions. Drizzle 0.45.x does
      // not expose a first-class .for('update') on select; appending FOR UPDATE via a
      // raw sql suffix achieves the same serialisation in InnoDB.
      if (isAdmin === false && target.isAdmin) {
        const [[{ count }]] = (await tx.execute(
          sql`SELECT COUNT(*) AS count FROM ${users} WHERE ${users.isAdmin} = true FOR UPDATE`,
        )) as unknown as [{ count: number | string }[], unknown];
        if (Number(count) <= 1) {
          lastAdminViolation = true;
          return;
        }
      }
      await tx.update(users).set(updates).where(eq(users.id, targetId));
    });
    if (notFound) {
      return c.json({ error: 'Member not found' }, 404);
    }
    if (lastAdminViolation) {
      return c.json({ error: 'Cannot remove the last admin' }, 409);
    }
    return c.json({ ok: true }, 200);
  } catch (err) {
    console.error(
      '[admin/PATCH /members/:id] Unexpected error:',
      err instanceof Error ? err.message : String(err),
    );
    return c.json({ error: 'Service unavailable' }, 503);
  }
 });
 // ---------------------------------------------------------------------------
 // POST /api/admin/members/:id/password
 //
@@ -1071,3 +1071,200 @@ describe('POST /api/admin/members', () => {
    expect(parsed.error).toBe('Invalid request');
  });
 });
 // ===========================================================================
 // PATCH /api/admin/members/:id — member-profile update + last-admin guard (Plan 20-01)
 // ===========================================================================
 describe('PATCH /api/admin/members/:id', () => {
  // Test A: happy path — update displayName only
  it('Test A (happy path displayName): PATCH with { displayName } as admin returns 200; GET reflects new name', async () => {
    const adminId = await seedUser('admin-patch-name', true);
    const memberId = await seedUser('member-patch-target', false);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', `/api/admin/members/${memberId}`, { displayName: 'New Name' }),
    );
    expect(res.status).toBe(200);
    const body = (await res.json()) as { ok: boolean };
    expect(body.ok).toBe(true);
    // GET /members should reflect the updated displayName
    const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
    expect(getRes.status).toBe(200);
    const getBody = (await getRes.json()) as {
      members: Array<{ id: number; displayName: string }>;
    };
    const updated = getBody.members.find((m) => m.id === memberId);
    expect(updated).toBeDefined();
    expect(updated!.displayName).toBe('New Name');
  });
  // Test B: happy path — promote non-admin to admin
  it('Test B (happy path isAdmin promote): PATCH with { isAdmin: true } returns 200; GET shows isAdmin true', async () => {
    const adminId = await seedUser('admin-patch-promote', true);
    const memberId = await seedUser('member-patch-promote', false);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', `/api/admin/members/${memberId}`, { isAdmin: true }),
    );
    expect(res.status).toBe(200);
    const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
    expect(getRes.status).toBe(200);
    const getBody = (await getRes.json()) as {
      members: Array<{ id: number; isAdmin: boolean }>;
    };
    const promoted = getBody.members.find((m) => m.id === memberId);
    expect(promoted).toBeDefined();
    expect(promoted!.isAdmin).toBe(true);
  });
  // Test C: last-admin guard — only admin cannot demote themselves
  it('Test C (last-admin guard): with exactly one admin, PATCH { isAdmin: false } returns 409; member stays admin', async () => {
    const adminId = await seedUser('admin-last-admin', true);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', `/api/admin/members/${adminId}`, { isAdmin: false }),
    );
    expect(res.status).toBe(409);
    const body = (await res.json()) as { error: string };
    expect(typeof body.error).toBe('string');
    expect(body.error.length).toBeGreaterThan(0);
    // The admin flag must still be true after the rejected demotion
    const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
    expect(getRes.status).toBe(200);
    const getBody = (await getRes.json()) as {
      members: Array<{ id: number; isAdmin: boolean }>;
    };
    const adminRow = getBody.members.find((m) => m.id === adminId);
    expect(adminRow).toBeDefined();
    expect(adminRow!.isAdmin).toBe(true);
  });
  // Test D: self-demotion allowed when another admin exists
  it('Test D (self-demotion allowed): with two admins, PATCH { isAdmin: false } returns 200; one admin remains', async () => {
    const adminId1 = await seedUser('admin-demote-1', true);
    const adminId2 = await seedUser('admin-demote-2', true);
    // Log in as adminId1 to perform the self-demotion
    currentDevUserId = adminId1;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', `/api/admin/members/${adminId1}`, { isAdmin: false }),
    );
    expect(res.status).toBe(200);
    // Switch to adminId2 to verify the outcome — adminId1 is now non-admin
    // and can no longer call GET /members (would 403).
    currentDevUserId = adminId2;
    const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
    expect(getRes.status).toBe(200);
    const getBody = (await getRes.json()) as {
      members: Array<{ id: number; isAdmin: boolean }>;
    };
    const row1 = getBody.members.find((m) => m.id === adminId1);
    const row2 = getBody.members.find((m) => m.id === adminId2);
    expect(row1!.isAdmin).toBe(false);
    expect(row2!.isAdmin).toBe(true);
  });
  // Test E: auth boundary — non-admin gets 403
  it('Test E (auth boundary): non-admin PATCH returns 403', async () => {
    const adminId = await seedUser('admin-patch-auth', true);
    const nonAdminId = await seedUser('non-admin-patch', false);
    currentDevUserId = nonAdminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', `/api/admin/members/${adminId}`, { displayName: 'Hacked' }),
    );
    expect(res.status).toBe(403);
  });
  // Test F: validation — wrong type and malformed id
  it('Test F (validation): PATCH with { isAdmin: "yes" } returns 400 { error: "Invalid request" }', async () => {
    const adminId = await seedUser('admin-patch-validation', true);
    const memberId = await seedUser('member-patch-validation', false);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', `/api/admin/members/${memberId}`, { isAdmin: 'yes' }),
    );
    expect(res.status).toBe(400);
    const body = (await res.json()) as { error: string };
    expect(body.error).toBe('Invalid request');
  });
  it('Test F (malformed id): PATCH with malformed :id (e.g. "1abc") returns 400', async () => {
    const adminId = await seedUser('admin-patch-badid', true);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', '/api/admin/members/1abc', { displayName: 'Test' }),
    );
    expect(res.status).toBe(400);
  });
  // Test G: not found — non-existent member id
  it('Test G (not found): PATCH non-existent member id returns 404', async () => {
    const adminId = await seedUser('admin-patch-notfound', true);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(
      jsonRequest('PATCH', '/api/admin/members/99999999', { displayName: 'Ghost' }),
    );
    expect(res.status).toBe(404);
  });
  // Test H (WR-06): empty {} body must return 400, not crash Drizzle with a 503
  it('Test H (WR-06 empty body): PATCH with {} returns 400 { error: "Invalid request" }', async () => {
    const adminId = await seedUser('admin-patch-empty', true);
    const memberId = await seedUser('member-patch-empty', false);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(jsonRequest('PATCH', `/api/admin/members/${memberId}`, {}));
    expect(res.status).toBe(400);
    const body = (await res.json()) as { error: string };
    expect(body.error).toBe('Invalid request');
  });
 });
 // ===========================================================================
 // GET /api/admin/members — isAdmin field (Plan 20-01)
 // ===========================================================================
 describe('GET /api/admin/members — isAdmin field', () => {
  it('Test H (GET isAdmin field): each member object includes a boolean isAdmin field', async () => {
    const adminId = await seedUser('admin-isadmin-field', true);
    const memberId = await seedUser('member-isadmin-field', false);
    currentDevUserId = adminId;
    const app = await getApp();
    const res = await app.fetch(jsonRequest('GET', '/api/admin/members'));
    expect(res.status).toBe(200);
    const body = (await res.json()) as {
      members: Array<{ id: number; isAdmin: boolean }>;
    };
    // Both seeded users should have a boolean isAdmin field
    const adminRow = body.members.find((m) => m.id === adminId);
    const memberRow = body.members.find((m) => m.id === memberId);
    expect(adminRow).toBeDefined();
    expect(typeof adminRow!.isAdmin).toBe('boolean');
    expect(adminRow!.isAdmin).toBe(true);
    expect(memberRow).toBeDefined();
    expect(typeof memberRow!.isAdmin).toBe('boolean');
    expect(memberRow!.isAdmin).toBe(false);
  });
 });
@@ -684,3 +684,140 @@ describe('fetchAdminResetPassword — URL contract (Phase 19, AUTH-LOCAL-08)', (
    );
  });
 });
 // ── Phase 20 (Plan 20-02): updateMemberProfile + AdminMember.isAdmin ─────────
 // TDD RED: these tests MUST fail before the implementation is added to client.ts.
 describe('updateMemberProfile — URL + verb contract (Phase 20, Plan 20-02)', () => {
  beforeEach(() => {
    vi.stubGlobal('fetch', vi.fn());
  });
  afterEach(() => {
    vi.unstubAllGlobals();
  });
  it('PATCHes /api/admin/members/:id (must match PATCH /members/:id in admin.ts)', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: true,
      type: 'basic',
      status: 200,
    } as unknown as Response);
    const { updateMemberProfile } = await import('./client.js');
    await updateMemberProfile(7, { displayName: 'Alice' });
    expect(fetch).toHaveBeenCalledWith(
      '/api/admin/members/7',
      expect.objectContaining({ method: 'PATCH' }),
    );
  });
  it('sends credentials:include and redirect:manual', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: true,
      type: 'basic',
      status: 200,
    } as unknown as Response);
    const { updateMemberProfile } = await import('./client.js');
    await updateMemberProfile(3, { isAdmin: true });
    expect(fetch).toHaveBeenCalledWith(
      '/api/admin/members/3',
      expect.objectContaining({
        credentials: 'include',
        redirect: 'manual',
      }),
    );
  });
  it('resolves void on 200', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: true,
      type: 'basic',
      status: 200,
    } as unknown as Response);
    const { updateMemberProfile } = await import('./client.js');
    const result = await updateMemberProfile(7, { displayName: 'Bob' });
    expect(result).toBeUndefined();
  });
  it('throws SessionExpiredError on opaqueredirect', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: false,
      type: 'opaqueredirect',
      status: 0,
    } as unknown as Response);
    const { updateMemberProfile, SessionExpiredError } = await import('./client.js');
    await expect(updateMemberProfile(7, { displayName: 'X' })).rejects.toBeInstanceOf(
      SessionExpiredError,
    );
  });
  it('throws SessionExpiredError on 401', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: false,
      type: 'basic',
      status: 401,
    } as unknown as Response);
    const { updateMemberProfile, SessionExpiredError } = await import('./client.js');
    await expect(updateMemberProfile(7, { displayName: 'X' })).rejects.toBeInstanceOf(
      SessionExpiredError,
    );
  });
  it('throws Error("last-admin") on 409 (last-admin demotion sentinel)', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: false,
      type: 'basic',
      status: 409,
    } as unknown as Response);
    const { updateMemberProfile } = await import('./client.js');
    await expect(updateMemberProfile(7, { isAdmin: false })).rejects.toThrow('last-admin');
  });
  it('throws Error("last-admin") on 422 as well (server may return either)', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: false,
      type: 'basic',
      status: 422,
    } as unknown as Response);
    const { updateMemberProfile } = await import('./client.js');
    await expect(updateMemberProfile(7, { isAdmin: false })).rejects.toThrow('last-admin');
  });
  it('throws a generic error on any other non-ok status (not last-admin sentinel)', async () => {
    vi.mocked(fetch).mockResolvedValueOnce({
      ok: false,
      type: 'basic',
      status: 500,
    } as unknown as Response);
    const { updateMemberProfile, SessionExpiredError } = await import('./client.js');
    await expect(updateMemberProfile(7, { displayName: 'X' })).rejects.toSatisfy(
      (e: unknown) =>
        e instanceof Error && !(e instanceof SessionExpiredError) && e.message !== 'last-admin',
    );
  });
 });
 describe('AdminMember.isAdmin field (Phase 20, Plan 20-02)', () => {
  it('AdminMember interface has isAdmin: boolean (compile-time type check via runtime shape)', () => {
    // Construct a conforming object — TypeScript will error at compile time if
    // isAdmin is missing from the AdminMember interface (caught by tsc --noEmit).
    const member: import('./client.js').AdminMember = {
      id: 1,
      displayName: 'Test',
      color: '#abc',
      isAdmin: true,
      hasCredential: false,
      hasLocalCredential: false,
    };
    expect(member.isAdmin).toBe(true);
  });
 });
@@ -233,6 +233,36 @@ export async function fetchAdminResetPassword(
  }
 }
 /**
 * PATCH /api/admin/members/:id — update a member's display name and/or admin flag (Phase 20, D-02).
 *
 * Admin-only; server enforces requireAdmin. Sends only the fields that are present in `body`
 * (partial update — the server schema marks both fields optional).
 *
 * Status codes:
 *   200  → success (resolves void)
 *   401 / opaqueredirect → throws SessionExpiredError (session expired; existing convention)
 *   409 / 422 → throws Error('last-admin') — the D-03 sentinel: demoting the last admin is
 *               rejected server-side; the editor branches on this message to show inline copy.
 *   other non-ok → generic error
 */
 export async function updateMemberProfile(
  memberId: number,
  body: { displayName?: string; isAdmin?: boolean },
 ): Promise<void> {
  const res = await fetch(`/api/admin/members/${memberId}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    redirect: 'manual',
    body: JSON.stringify(body),
  });
  if (res.type === 'opaqueredirect' || res.status === 401) throw new SessionExpiredError();
  if (res.status === 409 || res.status === 422) throw new Error('last-admin');
  if (!res.ok) throw new Error(`updateMemberProfile failed: ${res.status}`);
 }
 /**
 * POST /api/me/link-oidc — initiate the OIDC-link flow for the current local user (Surface 13).
 *
@@ -564,6 +594,7 @@ export interface AdminMember {
  id: number;
  displayName: string | null;
  color: string;
  isAdmin: boolean; // Phase 20 — drives the editor admin toggle initial state (D-02)
  hasCredential: boolean;
  hasLocalCredential: boolean; // true when a local_credentials row exists for this member (Phase 19)
 }
@@ -0,0 +1,936 @@
 /**
 * MemberEditorSheet — unified member editor sheet (Phase 20, D-05, D-06, D-07).
 *
 * Single component with a `mode` prop:
 *   - 'edit'   — three per-section saves: Profile, Set new password, App password
 *   - 'create' — single form: display name, username, initial password, confirm
 *
 * UI-SPEC §Surface B (20-UI-SPEC.md):
 *   - role="dialog", aria-modal, useFocusTrap, Escape closes, focus returns to trigger
 *   - Phone: fixed bottom bottom-sheet; Desktop: centered modal (480px)
 *   - zIndex 301 / backdrop 300 / overlay rgba(0,0,0,0.32)
 *   - Per-section saves keep the sheet open; create-mode save closes it
 *   - Admin toggle: role="switch", aria-checked (Accessibility Contract)
 *
 * Security:
 *   T-20-07: password/app-password fields are write-only: never prefilled,
 *            autoComplete="new-password", never logged (T-10-15/16 preserved)
 *   T-20-08: app-password save routes through saveCredential → server-side CalDAV
 *            validation; invalid password surfaces copy, nothing stored
 *   T-20-09: admin toggle is cosmetic; D-03 409 guard enforced server-side (Plan 20-01)
 *
 * Retired copy (D-06): per-row credential buttons and standalone password-reset button removed from this phase.
 */
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import {
  updateMemberProfile,
  fetchAdminResetPassword,
  fetchCreateMember,
  saveCredential,
  type AdminMember,
 } from '../api/client.js';
 import { useIsPhone } from '../hooks/useIsPhone.js';
 import { useFocusTrap } from '../hooks/useFocusTrap.js';
 // ── Types ──────────────────────────────────────────────────────────────────
 export type MemberEditorSheetMode = 'edit' | 'create';
 interface MemberEditorSheetProps {
  isOpen: boolean;
  onClose: () => void;
  mode: MemberEditorSheetMode;
  /** Present in edit mode; absent in create mode */
  member?: AdminMember;
  /** Ref to the trigger element — focus returns here on close (a11y) */
  triggerRef?: React.RefObject<HTMLElement | null>;
  /** Lift toast copy up to AdminPage which owns the toast state */
  onToast: (message: string) => void;
 }
 // ── Copywriting (UI-SPEC §Copywriting Contract) ───────────────────────────
 function headingFor(mode: MemberEditorSheetMode): string {
  return mode === 'edit' ? 'Edit member' : 'Add member';
 }
 const CALDAV_FAILURE_TEXT =
  "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again.";
 const CALDAV_VALIDATING_TEXT = 'Validating against CalDAV…';
 const CALDAV_LINK_HREF = 'https://app.fastmail.com/settings/security/devicetokens';
 const CALDAV_LINK_TEXT = 'Get an app password';
 // ── Shared field style helpers ─────────────────────────────────────────────
 const inputStyle = (hasError: boolean): React.CSSProperties => ({
  width: '100%',
  boxSizing: 'border-box',
  padding: 'var(--space-3, 12px) var(--space-4, 16px)',
  border: `1px solid ${hasError ? 'var(--color-destructive, #DC2626)' : 'var(--color-border)'}`,
  borderRadius: 'var(--space-1, 4px)',
  fontSize: 'var(--text-body-size, 15px)',
  color: 'var(--color-text-primary)',
  background: 'var(--color-surface)',
  fontFamily: 'var(--font-family-base)',
  outline: 'none',
  minHeight: '44px',
 });
 const labelStyle: React.CSSProperties = {
  display: 'block',
  fontSize: 'var(--text-label-size, 13px)',
  fontWeight: 600,
  color: 'var(--color-text-primary)',
  marginBottom: 'var(--space-1, 4px)',
 };
 const sectionLabelStyle: React.CSSProperties = {
  fontSize: 'var(--text-label-size, 13px)',
  fontWeight: 600,
  color: 'var(--color-text-muted)',
  textTransform: 'uppercase',
  letterSpacing: '0.06em',
  marginBottom: 'var(--space-4, 16px)',
 };
 const sectionDividerStyle: React.CSSProperties = {
  borderTop: '1px solid var(--color-border-subtle)',
  margin: 'var(--space-6, 24px) 0',
 };
 const fieldContainerStyle: React.CSSProperties = {
  marginBottom: 'var(--space-3, 12px)',
 };
 const inlineErrorStyle: React.CSSProperties = {
  fontSize: 'var(--text-label-size, 13px)',
  fontWeight: 400,
  color: 'var(--color-destructive, #DC2626)',
  marginTop: 'var(--space-2, 8px)',
 };
 const helperTextStyle: React.CSSProperties = {
  fontSize: 'var(--text-label-size, 13px)',
  fontWeight: 400,
  color: 'var(--color-text-secondary)',
  marginBottom: 'var(--space-3, 12px)',
  lineHeight: 1.4,
 };
 function primaryButtonStyle(disabled: boolean): React.CSSProperties {
  return {
    background: disabled ? 'var(--color-border, #E2E4E9)' : 'var(--color-member-0, #e8915a)',
    color: '#ffffff',
    border: 'none',
    cursor: disabled ? 'default' : 'pointer',
    fontSize: 'var(--text-label-size, 13px)',
    fontWeight: 600,
    minHeight: '44px',
    minWidth: '44px',
    padding: '0 var(--space-4, 16px)',
    borderRadius: 'var(--space-1, 4px)',
    fontFamily: 'var(--font-family-base)',
    transition: 'background 0.15s ease',
    display: 'flex',
    alignItems: 'center',
    gap: 'var(--space-2, 8px)',
  };
 }
 const cancelButtonStyle: React.CSSProperties = {
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  fontSize: 'var(--text-label-size, 13px)',
  fontWeight: 600,
  color: 'var(--color-text-secondary)',
  minHeight: '44px',
  minWidth: '44px',
  padding: '0 var(--space-4, 16px)',
  fontFamily: 'var(--font-family-base)',
  borderRadius: 'var(--space-1, 4px)',
 };
 const actionsRowStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'flex-end',
  gap: 'var(--space-3, 12px)',
  marginTop: 'var(--space-4, 16px)',
 };
 // ── Component ──────────────────────────────────────────────────────────────
 export function MemberEditorSheet({
  isOpen,
  onClose,
  mode,
  member,
  triggerRef,
  onToast,
 }: MemberEditorSheetProps) {
  const queryClient = useQueryClient();
  const phone = useIsPhone();
  // Focus management refs
  const headingRef = useRef<HTMLHeadingElement>(null);
  const dialogRef = useRef<HTMLDivElement>(null);
  const handleDialogKeyDown = useFocusTrap(dialogRef);
  // ── Profile section state ────────────────────────────────────────────────
  const [displayName, setDisplayName] = useState(member?.displayName ?? '');
  const [isAdmin, setIsAdmin] = useState(member?.isAdmin ?? false);
  const [profileError, setProfileError] = useState<string | null>(null);
  // ── Set new password section state ──────────────────────────────────────
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [passwordError, setPasswordError] = useState<string | null>(null);
  // ── App password section state ───────────────────────────────────────────
  // NOTE: GET /api/admin/members does NOT return fastmailEmail; the stored
  // fastmail_email lives only on the member_credentials row, which is not
  // surfaced to the admin list. So the email field starts BLANK on edit —
  // the admin must re-enter it. This is intentional (see D-CONTEXT note).
  const [fastmailEmail, setFastmailEmail] = useState('');
  const [appPassword, setAppPassword] = useState('');
  const [appPasswordError, setAppPasswordError] = useState<string | null>(null);
  // ── Create mode state ───────────────────────────────────────────────────
  const [createDisplayName, setCreateDisplayName] = useState('');
  const [createUsername, setCreateUsername] = useState('');
  const [createPassword, setCreatePassword] = useState('');
  const [createConfirmPassword, setCreateConfirmPassword] = useState('');
  const [createError, setCreateError] = useState<string | null>(null);
  // ── handleClose ──────────────────────────────────────────────────────────
  // WR-04: only reset ephemeral fields (password inputs, error states, create-mode
  // fields). Member-derived fields (displayName, isAdmin) are owned by the useEffect
  // below and will re-sync from the live member prop when the sheet re-opens or when
  // membersQuery refetches — no stale closure problem.
  const handleClose = useCallback(() => {
    setProfileError(null);
    setNewPassword('');
    setConfirmPassword('');
    setPasswordError(null);
    setFastmailEmail('');
    setAppPassword('');
    setAppPasswordError(null);
    setCreateDisplayName('');
    setCreateUsername('');
    setCreatePassword('');
    setCreateConfirmPassword('');
    setCreateError(null);
    onClose();
    // Return focus to trigger element (a11y)
    if (triggerRef?.current) {
      triggerRef.current.focus();
    }
  }, [onClose, triggerRef]);
  // Sync profile state when member changes (different row opened)
  useEffect(() => {
    setDisplayName(member?.displayName ?? '');
    setIsAdmin(member?.isAdmin ?? false);
    setProfileError(null);
  }, [member?.id, member?.displayName, member?.isAdmin]);
  // Escape key closes the sheet
  useEffect(() => {
    if (!isOpen) return;
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') handleClose();
    };
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, [isOpen, handleClose]);
  // Focus heading on open (a11y)
  useEffect(() => {
    if (isOpen && headingRef.current) {
      headingRef.current.focus();
    }
  }, [isOpen]);
  // ── Profile mutation (Section 1) ─────────────────────────────────────────
  const profileMutation = useMutation({
    mutationFn: async () => {
      if (!member) throw new Error('no-member');
      // WR-01: send only the fields that actually changed to avoid re-writing
      // displayName on an admin-toggle-only save (and to prevent 400s when a member
      // has a null displayName and the admin only wants to toggle the admin flag).
      const payload: { displayName?: string; isAdmin?: boolean } = {};
      const trimmed = displayName.trim();
      if (trimmed !== (member.displayName ?? '')) {
        if (trimmed.length === 0) throw new Error('name-required');
        payload.displayName = trimmed;
      }
      if (isAdmin !== member.isAdmin) payload.isAdmin = isAdmin;
      // No-op guard — nothing changed, skip the network call and signal no write
      // (IN-04: avoids firing the "Profile saved." toast + refetch on a no-op save).
      if (Object.keys(payload).length === 0) return false;
      await updateMemberProfile(member.id, payload);
      return true;
    },
    onSuccess: (changed) => {
      // IN-04: only surface success feedback when an actual write occurred.
      if (!changed) return;
      void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
      onToast('Profile saved.');
      // Sheet stays open — per-section save (D-05)
    },
    onError: (err) => {
      const msg = err instanceof Error ? err.message : 'server';
      if (msg === 'last-admin') {
        // D-03 guard: revert toggle to the actual prior value on the member object.
        // WR-02: use member!.isAdmin explicitly rather than `?? true` — the `?? true`
        // was accidentally correct only because the guard fires when demoting an admin,
        // but it would incorrectly set isAdmin=true for any future error path where
        // member is non-null but isAdmin is false.
        setIsAdmin(member!.isAdmin);
        setProfileError('Cannot remove admin — at least one admin must remain.');
      } else if (msg === 'name-required') {
        setProfileError('A display name is required before saving.');
      } else {
        setProfileError('Something went wrong. Please try again.');
      }
    },
  });
  // ── Set new password mutation (Section 2) ────────────────────────────────
  const passwordMutation = useMutation({
    mutationFn: async () => {
      if (!member) throw new Error('no-member');
      if (newPassword !== confirmPassword) throw new Error('mismatch');
      if (newPassword.length < 8) throw new Error('short');
      await fetchAdminResetPassword(member.id, newPassword);
    },
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
      setNewPassword('');
      setConfirmPassword('');
      setPasswordError(null);
      onToast('Password updated.');
      // Sheet stays open — per-section save (D-05)
    },
    onError: (err) => {
      const msg = err instanceof Error ? err.message : 'server';
      if (msg === 'mismatch') {
        setPasswordError('Passwords do not match.');
      } else if (msg === 'short') {
        setPasswordError('Password must be at least 8 characters.');
      } else {
        setPasswordError('Something went wrong. Please try again.');
      }
    },
  });
  // ── App password mutation (Section 3) ────────────────────────────────────
  const appPasswordMutation = useMutation({
    mutationFn: async () => {
      if (!member) throw new Error('no-member');
      await saveCredential({
        userId: member.id,
        providerType: 'caldav',
        fastmailEmail: fastmailEmail.trim(),
        appPassword,
      });
    },
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
      void queryClient.invalidateQueries({ queryKey: ['me'] });
      setFastmailEmail('');
      setAppPassword('');
      setAppPasswordError(null);
      onToast('App password saved.');
      // Sheet stays open — per-section save (D-05)
    },
    onError: () => {
      setAppPasswordError(CALDAV_FAILURE_TEXT);
    },
  });
  // ── Create member mutation ────────────────────────────────────────────────
  const createMutation = useMutation({
    mutationFn: async () => {
      if (createPassword !== createConfirmPassword) throw new Error('mismatch');
      if (createPassword.length < 8) throw new Error('short');
      await fetchCreateMember({
        displayName: createDisplayName.trim(),
        username: createUsername.trim(),
        password: createPassword,
      });
    },
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
      onToast('Member added.');
      // Create mode closes on success (D-07)
      handleClose();
    },
    onError: (err) => {
      const msg = err instanceof Error ? err.message : 'server';
      if (msg === 'mismatch') {
        setCreateError('Passwords do not match.');
      } else if (msg === 'short') {
        setCreateError('Password must be at least 8 characters.');
      } else if (msg === 'conflict' || msg.includes('409')) {
        setCreateError('That username is already in use. Choose a different one.');
      } else {
        setCreateError('Something went wrong. Please try again.');
      }
    },
  });
  // ── Render guard ──────────────────────────────────────────────────────────
  if (!isOpen) return null;
  const heading = headingFor(mode);
  // ── Sheet style ───────────────────────────────────────────────────────────
  const sheetStyle: React.CSSProperties = phone
    ? {
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        // WR-03: cap height so content does not spill off screen on short phones
        // (iPhone SE 667px with three sections visible). overflowY:'auto' enables
        // scroll when content exceeds maxHeight.
        maxHeight: '90dvh',
        overflowY: 'auto',
        background: 'var(--color-surface)',
        borderRadius: '12px 12px 0 0',
        boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
        padding: 'var(--space-6, 24px)',
        // IN-03: pad the bottom to clear iOS home indicator / Android gesture bar
        paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))',
        zIndex: 301,
        fontFamily: 'var(--font-family-base)',
      }
    : {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        maxWidth: '480px',
        width: 'calc(100% - var(--space-8, 32px))',
        maxHeight: 'calc(100dvh - var(--space-8, 32px))',
        overflowY: 'auto',
        background: 'var(--color-surface)',
        borderRadius: '12px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
        padding: 'var(--space-6, 24px)',
        zIndex: 301,
        fontFamily: 'var(--font-family-base)',
      };
  return (
    <>
      {/* Backdrop — uses --color-overlay per UI-SPEC §Surface B (matches ResetPasswordSheet) */}
      <div
        onClick={handleClose}
        aria-hidden="true"
        style={{
          position: 'fixed',
          inset: 0,
          background: 'var(--color-overlay, rgba(0,0,0,0.32))',
          zIndex: 300,
        }}
      />
      {/* Sheet */}
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-label={heading}
        onKeyDown={handleDialogKeyDown}
        style={sheetStyle}
      >
        {/* Heading */}
        <h2
          ref={headingRef}
          tabIndex={-1}
          style={{
            margin: '0 0 var(--space-1, 4px) 0',
            fontSize: 'var(--text-heading-size, 18px)',
            fontWeight: 600,
            lineHeight: 'var(--text-heading-line-height, 1.25)',
            color: 'var(--color-text-primary)',
            outline: 'none',
          }}
        >
          {heading}
        </h2>
        {/* Member subtitle (edit mode only) */}
        {mode === 'edit' && member && (
          <div
            style={{
              fontSize: 'var(--text-body-size, 15px)',
              fontWeight: 400,
              color: 'var(--color-text-secondary)',
              marginBottom: 'var(--space-6, 24px)',
            }}
          >
            {member.displayName ?? 'Member'}
          </div>
        )}
        {/* ── EDIT MODE ──────────────────────────────────────────────────── */}
        {mode === 'edit' && member && (
          <>
            {/* Section 1 — Profile */}
            <div>
              <div style={sectionLabelStyle}>Profile</div>
              {/* Display name */}
              <div style={fieldContainerStyle}>
                <label htmlFor="editor-display-name" style={labelStyle}>
                  Display name
                </label>
                <input
                  id="editor-display-name"
                  type="text"
                  maxLength={256}
                  value={displayName}
                  onChange={(e) => setDisplayName(e.target.value)}
                  aria-describedby={profileError ? 'profile-error' : undefined}
                  style={inputStyle(!!profileError)}
                />
              </div>
              {/* Admin toggle */}
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginBottom: 'var(--space-4, 16px)',
                }}
              >
                <div>
                  <div
                    style={{
                      fontSize: 'var(--text-body-size, 15px)',
                      fontWeight: 400,
                      color: 'var(--color-text-primary)',
                    }}
                  >
                    Admin
                  </div>
                  <div
                    style={{
                      fontSize: 'var(--text-label-size, 13px)',
                      fontWeight: 400,
                      color: 'var(--color-text-secondary)',
                    }}
                  >
                    Can access admin settings
                  </div>
                </div>
                {/* Toggle pill — role="switch" per UI-SPEC Accessibility Contract */}
                <button
                  type="button"
                  role="switch"
                  aria-checked={isAdmin}
                  aria-label="Admin"
                  aria-describedby={profileError ? 'profile-error' : undefined}
                  onClick={() => {
                    setProfileError(null);
                    setIsAdmin((prev) => !prev);
                  }}
                  style={{
                    width: '44px',
                    height: '24px',
                    borderRadius: '12px',
                    border: 'none',
                    cursor: 'pointer',
                    background: isAdmin
                      ? 'var(--color-member-0, #e8915a)'
                      : 'var(--color-border, #E2E4E9)',
                    position: 'relative',
                    transition: 'background 0.15s ease',
                    flexShrink: 0,
                  }}
                >
                  {/* Thumb */}
                  <span
                    aria-hidden="true"
                    style={{
                      position: 'absolute',
                      top: '2px',
                      left: isAdmin ? '22px' : '2px',
                      width: '20px',
                      height: '20px',
                      borderRadius: '50%',
                      background: '#ffffff',
                      transition: 'left 0.15s ease',
                    }}
                  />
                </button>
              </div>
              {/* IN-01: helper text when display name is empty (e.g. null-displayName
                  OIDC member) so the admin knows why Save is disabled */}
              {displayName.trim().length === 0 && !profileError && (
                <p style={helperTextStyle}>Enter a display name to enable Save.</p>
              )}
              {/* Last-admin guard inline error */}
              {profileError && (
                <div id="profile-error" style={inlineErrorStyle}>
                  {profileError}
                </div>
              )}
              <div style={actionsRowStyle}>
                <button type="button" onClick={handleClose} style={cancelButtonStyle}>
                  Cancel
                </button>
                <button
                  type="button"
                  disabled={profileMutation.isPending || displayName.trim().length === 0}
                  onClick={() => {
                    setProfileError(null);
                    profileMutation.mutate();
                  }}
                  style={primaryButtonStyle(
                    profileMutation.isPending || displayName.trim().length === 0,
                  )}
                >
                  {profileMutation.isPending && (
                    <Loader2
                      size={14}
                      aria-hidden="true"
                      style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
                    />
                  )}
                  Save
                </button>
              </div>
            </div>
            {/* Section 2 — Set new password (only for members with local credential) */}
            {member.hasLocalCredential && (
              <>
                <div style={sectionDividerStyle} />
                <div>
                  <div style={sectionLabelStyle}>Set new password</div>
                  <div style={helperTextStyle}>Leave blank to keep the current password.</div>
                  {/* New password */}
                  <div style={fieldContainerStyle}>
                    <label htmlFor="editor-new-password" style={labelStyle}>
                      New password
                    </label>
                    <input
                      id="editor-new-password"
                      type="password"
                      autoComplete="new-password"
                      value={newPassword}
                      onChange={(e) => setNewPassword(e.target.value)}
                      aria-describedby={passwordError ? 'password-error' : undefined}
                      style={inputStyle(!!passwordError)}
                    />
                  </div>
                  {/* Confirm new password */}
                  <div style={fieldContainerStyle}>
                    <label htmlFor="editor-confirm-password" style={labelStyle}>
                      Confirm new password
                    </label>
                    <input
                      id="editor-confirm-password"
                      type="password"
                      autoComplete="new-password"
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                      aria-describedby={passwordError ? 'password-error' : undefined}
                      style={inputStyle(!!passwordError)}
                    />
                  </div>
                  {/* Password error */}
                  {passwordError && (
                    <div id="password-error" style={inlineErrorStyle}>
                      {passwordError}
                    </div>
                  )}
                  <div style={actionsRowStyle}>
                    <button
                      type="button"
                      disabled={
                        passwordMutation.isPending ||
                        newPassword.length === 0 ||
                        confirmPassword.length === 0
                      }
                      onClick={() => {
                        setPasswordError(null);
                        passwordMutation.mutate();
                      }}
                      style={primaryButtonStyle(
                        passwordMutation.isPending ||
                          newPassword.length === 0 ||
                          confirmPassword.length === 0,
                      )}
                    >
                      {passwordMutation.isPending && (
                        <Loader2
                          size={14}
                          aria-hidden="true"
                          style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
                        />
                      )}
                      Set password
                    </button>
                  </div>
                </div>
              </>
            )}
            {/* Section 3 — App password (always in edit mode) */}
            <>
              <div style={sectionDividerStyle} />
              <div>
                <div style={sectionLabelStyle}>App password</div>
                {/* Helper text with link */}
                <div style={{ ...helperTextStyle, marginBottom: 'var(--space-4, 16px)' }}>
                  Fastmail app password scoped to Calendars &amp; Contacts (CalDAV).{' '}
                  <a
                    href={CALDAV_LINK_HREF}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      color: 'var(--color-member-0, #e8915a)',
                      textDecoration: 'underline',
                    }}
                  >
                    {CALDAV_LINK_TEXT}
                  </a>
                </div>
                {/* In-flight validating state */}
                {appPasswordMutation.isPending && (
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 'var(--space-2, 8px)',
                      fontSize: 'var(--text-label-size, 13px)',
                      color: 'var(--color-text-secondary)',
                      marginBottom: 'var(--space-4, 16px)',
                    }}
                  >
                    <Loader2
                      size={16}
                      aria-hidden="true"
                      style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
                    />
                    {CALDAV_VALIDATING_TEXT}
                  </div>
                )}
                {/* Fastmail email */}
                <div style={fieldContainerStyle}>
                  <label htmlFor="editor-fastmail-email" style={labelStyle}>
                    Fastmail email
                  </label>
                  <input
                    id="editor-fastmail-email"
                    type="email"
                    autoComplete="email"
                    value={fastmailEmail}
                    onChange={(e) => setFastmailEmail(e.target.value)}
                    placeholder="user@fastmail.com"
                    aria-describedby={appPasswordError ? 'app-password-error' : undefined}
                    style={inputStyle(!!appPasswordError)}
                  />
                </div>
                {/* App password field — NEVER prefilled (T-20-07) */}
                <div style={fieldContainerStyle}>
                  <label htmlFor="editor-app-password" style={labelStyle}>
                    App password
                  </label>
                  <input
                    id="editor-app-password"
                    type="password"
                    autoComplete="new-password"
                    value={appPassword}
                    onChange={(e) => setAppPassword(e.target.value)}
                    aria-describedby={appPasswordError ? 'app-password-error' : undefined}
                    style={inputStyle(!!appPasswordError)}
                  />
                </div>
                {/* CalDAV error */}
                {appPasswordError && (
                  <div id="app-password-error" style={inlineErrorStyle}>
                    {appPasswordError}
                  </div>
                )}
                <div style={actionsRowStyle}>
                  <button
                    type="button"
                    disabled={
                      appPasswordMutation.isPending ||
                      fastmailEmail.trim().length === 0 ||
                      appPassword.length === 0
                    }
                    onClick={() => {
                      setAppPasswordError(null);
                      appPasswordMutation.mutate();
                    }}
                    style={primaryButtonStyle(
                      appPasswordMutation.isPending ||
                        fastmailEmail.trim().length === 0 ||
                        appPassword.length === 0,
                    )}
                  >
                    {appPasswordMutation.isPending && (
                      <Loader2
                        size={14}
                        aria-hidden="true"
                        style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
                      />
                    )}
                    Save app password
                  </button>
                </div>
              </div>
            </>
          </>
        )}
        {/* ── CREATE MODE ────────────────────────────────────────────────── */}
        {mode === 'create' && (
          <div>
            {/* Display name */}
            <div style={fieldContainerStyle}>
              <label htmlFor="create-display-name" style={labelStyle}>
                Display name
              </label>
              <input
                id="create-display-name"
                type="text"
                maxLength={256}
                value={createDisplayName}
                onChange={(e) => setCreateDisplayName(e.target.value)}
                aria-describedby={createError ? 'create-error' : undefined}
                style={inputStyle(!!createError)}
              />
            </div>
            {/* Username */}
            <div style={fieldContainerStyle}>
              <label htmlFor="create-username" style={labelStyle}>
                Username
              </label>
              <input
                id="create-username"
                type="text"
                maxLength={128}
                autoComplete="off"
                spellCheck={false}
                autoCapitalize="none"
                value={createUsername}
                onChange={(e) => setCreateUsername(e.target.value)}
                aria-describedby={createError ? 'create-error' : undefined}
                style={inputStyle(!!createError)}
              />
            </div>
            {/* Initial password */}
            <div style={fieldContainerStyle}>
              <label htmlFor="create-initial-password" style={labelStyle}>
                Initial password
              </label>
              <input
                id="create-initial-password"
                type="password"
                autoComplete="new-password"
                value={createPassword}
                onChange={(e) => setCreatePassword(e.target.value)}
                aria-describedby={createError ? 'create-error' : undefined}
                style={inputStyle(!!createError)}
              />
            </div>
            {/* Confirm password */}
            <div style={fieldContainerStyle}>
              <label htmlFor="create-confirm-password" style={labelStyle}>
                Confirm password
              </label>
              <input
                id="create-confirm-password"
                type="password"
                autoComplete="new-password"
                value={createConfirmPassword}
                onChange={(e) => setCreateConfirmPassword(e.target.value)}
                aria-describedby={createError ? 'create-error' : undefined}
                style={inputStyle(!!createError)}
              />
            </div>
            {/* Create error */}
            {createError && (
              <div id="create-error" style={inlineErrorStyle}>
                {createError}
              </div>
            )}
            <div style={actionsRowStyle}>
              <button type="button" onClick={handleClose} style={cancelButtonStyle}>
                Cancel
              </button>
              <button
                type="button"
                disabled={
                  createMutation.isPending ||
                  createDisplayName.trim().length === 0 ||
                  createUsername.trim().length === 0 ||
                  createPassword.length === 0 ||
                  createConfirmPassword.length === 0
                }
                onClick={() => {
                  setCreateError(null);
                  createMutation.mutate();
                }}
                style={primaryButtonStyle(
                  createMutation.isPending ||
                    createDisplayName.trim().length === 0 ||
                    createUsername.trim().length === 0 ||
                    createPassword.length === 0 ||
                    createConfirmPassword.length === 0,
                )}
              >
                {createMutation.isPending && (
                  <Loader2
                    size={14}
                    aria-hidden="true"
                    style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
                  />
                )}
                Add member
              </button>
            </div>
          </div>
        )}
      </div>
    </>
  );
 }
@@ -9,10 +9,10 @@
 *   - Centered content column, maxWidth 640px on desktop
 *   - var(--space-12) top/bottom padding, var(--space-6) horizontal padding
 *
- * UI-SPEC §Surface 2 (MEMBERS section):
+ * UI-SPEC §Surface A (MEMBERS section — Phase 20):
- *   - 32px avatar swatch (var(--color-member-N)) + member name + credential status badge
+ *   - Tappable MemberRow with trailing ChevronRight + "Admin" badge when isAdmin
- *   - "Rotate" or "Add credential" action button per hasCredential
+ *   - Single "Add member" ghost trigger at the bottom (opens MemberEditorSheet in create mode)
- *   - Opens CredentialSheet in admin-rotate or admin-add mode
+ *   - No per-row action-button cluster; no always-open inline add form
 *
 * UI-SPEC §Surface 5 (SHARED CALENDAR section):
 *   - Radio group, one row per synced calendar
@@ -25,21 +25,18 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
+import { CheckCircle, AlertCircle, ChevronRight, Plus } from 'lucide-react';
 import {
  fetchAdminMembers,
  fetchAdminCalendars,
  setSharedCalendar,
  fetchAdminTimezone,
  setAdminTimezone,
  fetchCreateMember,
  fetchAdminResetPassword,
  type AdminMember,
  type AdminCalendar,
 } from '../api/client.js';
-import { CredentialSheet, type CredentialSheetMode } from '../components/CredentialSheet.js';
+import { MemberEditorSheet } from '../components/MemberEditorSheet.js';
 import { useIsPhone } from '../hooks/useIsPhone.js';
 import { useFocusTrap } from '../hooks/useFocusTrap.js';
 // ── Styles ─────────────────────────────────────────────────────────────────
@@ -78,24 +75,20 @@ export function AdminPage() {
  // Two-tab navigation state (D-10)
  const [activeTab, setActiveTab] = useState<'members' | 'settings'>('members');
-  // Credential sheet state
+  // ── Member editor sheet state ───────────────────────────────────────────
-  const [sheetOpen, setSheetOpen] = useState(false);
+  // A single MemberEditorSheet instance handles both edit (row tap) and
-  const [sheetMode, setSheetMode] = useState<CredentialSheetMode>('admin-add');
+  // create ("Add member" trigger) modes (D-07 unification).
-  const [sheetMember, setSheetMember] = useState<AdminMember | null>(null);
+  const [editorOpen, setEditorOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [editorMode, setEditorMode] = useState<'edit' | 'create'>('edit');
-
+  // CR-02: store only the id, not the full member object. The full member is
-  // Reset-password sheet state (Surface 11B)
+  // derived from live query data each render (see below, after membersQuery),
-  const [resetSheetOpen, setResetSheetOpen] = useState(false);
+  // so per-section saves + invalidations keep the editor's member prop fresh
-  const [resetTargetMember, setResetTargetMember] = useState<AdminMember | null>(null);
+  // without a stale captured reference.
-  // resetTriggerRef: stores the exact button that opened the reset sheet so focus can return on close
+  const [editorMemberId, setEditorMemberId] = useState<number | null>(null);
-  const resetTriggerRef = useRef<HTMLButtonElement | null>(null);
+  // Ref to the element that opened the sheet — focus returns here on close (a11y)
-
+  const editorTriggerRef = useRef<HTMLElement | null>(null);
-  // Create-member form state (Surface 11A)
+  // Ref for the "Add member" ghost trigger button
-  const [createDisplayName, setCreateDisplayName] = useState('');
+  const addMemberTriggerRef = useRef<HTMLButtonElement>(null);
  const [createUsername, setCreateUsername] = useState('');
  const [createPassword, setCreatePassword] = useState('');
  const [createConfirmPassword, setCreateConfirmPassword] = useState('');
  const [createError, setCreateError] = useState<string | null>(null);
  // Shared calendar picker state
  const [selectedCalendarId, setSelectedCalendarId] = useState<number | null>(null);
@@ -126,6 +119,13 @@ export function AdminPage() {
    staleTime: 60 * 1000,
  });
  // CR-02: derive editorMember from live query data so saves + invalidations always
  // reflect the latest server state rather than a snapshot from when the row was tapped.
  const editorMember =
    editorMemberId !== null
      ? (membersQuery.data?.members.find((m) => m.id === editorMemberId) ?? null)
      : null;
  // Calendars query
  const calendarsQuery = useQuery({
    queryKey: ['admin', 'calendars'],
@@ -248,62 +248,21 @@ export function AdminPage() {
    )?.focus();
  }
-  // Open credential sheet for a member
+  // Open the editor for a specific member (row tap → edit mode)
-  function openSheet(member: AdminMember, buttonRef: React.RefObject<HTMLButtonElement | null>) {
+  function openEditorForMember(member: AdminMember, rowEl: HTMLElement) {
-    // Capture the button so focus can return on close
+    editorTriggerRef.current = rowEl;
-    (triggerRef as React.MutableRefObject<HTMLElement | null>).current = buttonRef.current;
+    setEditorMemberId(member.id); // CR-02: store id only; editorMember is derived from live data
-    setSheetMember(member);
+    setEditorMode('edit');
-    setSheetMode(member.hasCredential ? 'admin-rotate' : 'admin-add');
+    setEditorOpen(true);
    setSheetOpen(true);
  }
-  // Create-member mutation (Surface 11A)
+  // Open the editor in create mode ("Add member" trigger)
-  const createMemberMutation = useMutation({
+  function openEditorForCreate() {
-    mutationFn: async () => {
+    editorTriggerRef.current = addMemberTriggerRef.current;
-      // Client-side validation (server also validates; this is for UX)
+    setEditorMemberId(null);
-      if (createPassword !== createConfirmPassword) {
+    setEditorMode('create');
-        throw new Error('mismatch');
+    setEditorOpen(true);
-      }
+  }
      if (createPassword.length < 8) {
        throw new Error('short');
      }
      await fetchCreateMember({
        displayName: createDisplayName.trim(),
        username: createUsername.trim(),
        password: createPassword,
      });
    },
    onSuccess: () => {
      // Clear form + refresh member list
      setCreateDisplayName('');
      setCreateUsername('');
      setCreatePassword('');
      setCreateConfirmPassword('');
      setCreateError(null);
      void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
      void queryClient.invalidateQueries({ queryKey: ['me'] });
      showToast('Member added.');
    },
    onError: (err) => {
      const msg = err instanceof Error ? err.message : 'server';
      if (msg === 'mismatch') {
        setCreateError('Passwords do not match.');
      } else if (msg === 'short') {
        setCreateError('Password is too short. Use at least 8 characters.');
      } else if (msg === 'conflict' || msg.includes('409')) {
        setCreateError('That username is already in use. Choose a different one.');
      } else {
        setCreateError('Something went wrong. Please try again.');
      }
    },
  });
  const createSubmitDisabled =
    createMemberMutation.isPending ||
    createDisplayName.trim().length === 0 ||
    createUsername.trim().length === 0 ||
    createPassword.length === 0 ||
    createConfirmPassword.length === 0;
  const saveDisabled =
    sharedCalMutation.isPending ||
@@ -416,248 +375,79 @@ export function AdminPage() {
              </div>
            )}
-            {membersQuery.data && (
+            {membersQuery.data && membersQuery.data.members.length === 0 && (
              <div
                style={{
                  padding: 'var(--space-8, 32px) 0',
                  textAlign: 'center',
                }}
              >
                <div
                  style={{
                    fontSize: 'var(--text-body-size, 15px)',
                    fontWeight: 600,
                    color: 'var(--color-text-primary)',
                    marginBottom: 'var(--space-2, 8px)',
                  }}
                >
                  No members yet
                </div>
                <div
                  style={{
                    fontSize: 'var(--text-label-size, 13px)',
                    color: 'var(--color-text-secondary)',
                  }}
                >
                  Add a member to get started.
                </div>
              </div>
            )}
            {membersQuery.data && membersQuery.data.members.length > 0 && (
              <div>
                {membersQuery.data.members.map((member, idx) => (
                  <MemberRow
                    key={member.id}
                    member={member}
                    colorIndex={idx}
-                    onAction={(buttonRef) => openSheet(member, buttonRef)}
+                    onEdit={(rowEl) => openEditorForMember(member, rowEl)}
                    onResetPassword={(buttonRef) => {
                      // Capture trigger button so focus can return on close
                      resetTriggerRef.current = buttonRef.current;
                      setResetTargetMember(member);
                      setResetSheetOpen(true);
                    }}
                  />
                ))}
              </div>
            )}
          </section>
-          {/* ── LOCAL ACCOUNTS section ──────────────────────────────────────── */}
+            {/* "Add member" ghost trigger — opens MemberEditorSheet in create mode (D-07) */}
-          <section aria-label="Local Accounts" style={{ marginBottom: 'var(--space-8, 32px)' }}>
+            <div style={{ marginTop: 'var(--space-4, 16px)' }}>
-            <div style={sectionLabelStyle}>Local Accounts</div>
+              <button
-
+                ref={addMemberTriggerRef}
-            {/* Surface 11A — Add member inline form */}
+                type="button"
-            <div
+                onClick={openEditorForCreate}
              style={{
                border: '1px solid var(--color-border-subtle, var(--color-border))',
                borderRadius: '8px',
                padding: 'var(--space-4, 16px)',
                marginBottom: 'var(--space-6, 24px)',
              }}
            >
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 'var(--space-2, 8px)',
                  width: '100%',
                  background: 'var(--color-surface)',
                  border: '1px solid var(--color-border)',
                  borderRadius: '8px',
                  padding: 'var(--space-3, 12px) var(--space-4, 16px)',
                  minHeight: '44px',
                  cursor: 'pointer',
                  fontSize: 'var(--text-body-size, 15px)',
-                  fontWeight: 600,
+                  fontWeight: 400,
                  color: 'var(--color-text-primary)',
-                  marginBottom: 'var(--space-4, 16px)',
+                  fontFamily: 'var(--font-family-base)',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'var(--color-surface-dim)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'var(--color-surface)';
                }}
              >
                <Plus size={16} aria-hidden="true" style={{ flexShrink: 0 }} />
                Add member
-              </div>
+              </button>
              {/* Display name */}
              <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
                <label
                  htmlFor="admin-create-display-name"
                  style={{
                    display: 'block',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    color: 'var(--color-text-primary)',
                    marginBottom: 'var(--space-1, 4px)',
                  }}
                >
                  Display name
                </label>
                <input
                  id="admin-create-display-name"
                  type="text"
                  value={createDisplayName}
                  onChange={(e) => setCreateDisplayName(e.target.value)}
                  style={{
                    width: '100%',
                    boxSizing: 'border-box',
                    padding: 'var(--space-3, 12px) var(--space-4, 16px)',
                    border: '1px solid var(--color-border)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontSize: 'var(--text-body-size, 15px)',
                    color: 'var(--color-text-primary)',
                    background: 'var(--color-surface)',
                    fontFamily: 'var(--font-family-base)',
                    outline: 'none',
                    minHeight: '44px',
                  }}
                />
              </div>
              {/* Username */}
              <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
                <label
                  htmlFor="admin-create-username"
                  style={{
                    display: 'block',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    color: 'var(--color-text-primary)',
                    marginBottom: 'var(--space-1, 4px)',
                  }}
                >
                  Username
                </label>
                <input
                  id="admin-create-username"
                  type="text"
                  autoComplete="off"
                  spellCheck={false}
                  autoCapitalize="none"
                  value={createUsername}
                  onChange={(e) => setCreateUsername(e.target.value)}
                  style={{
                    width: '100%',
                    boxSizing: 'border-box',
                    padding: 'var(--space-3, 12px) var(--space-4, 16px)',
                    border: '1px solid var(--color-border)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontSize: 'var(--text-body-size, 15px)',
                    color: 'var(--color-text-primary)',
                    background: 'var(--color-surface)',
                    fontFamily: 'var(--font-family-base)',
                    outline: 'none',
                    minHeight: '44px',
                  }}
                />
              </div>
              {/* Initial password */}
              <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
                <label
                  htmlFor="admin-create-password"
                  style={{
                    display: 'block',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    color: 'var(--color-text-primary)',
                    marginBottom: 'var(--space-1, 4px)',
                  }}
                >
                  Initial password
                </label>
                <input
                  id="admin-create-password"
                  type="password"
                  autoComplete="new-password"
                  value={createPassword}
                  onChange={(e) => setCreatePassword(e.target.value)}
                  style={{
                    width: '100%',
                    boxSizing: 'border-box',
                    padding: 'var(--space-3, 12px) var(--space-4, 16px)',
                    border: '1px solid var(--color-border)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontSize: 'var(--text-body-size, 15px)',
                    color: 'var(--color-text-primary)',
                    background: 'var(--color-surface)',
                    fontFamily: 'var(--font-family-base)',
                    outline: 'none',
                    minHeight: '44px',
                  }}
                />
              </div>
              {/* Confirm password */}
              <div style={{ marginBottom: 'var(--space-4, 16px)' }}>
                <label
                  htmlFor="admin-create-confirm-password"
                  style={{
                    display: 'block',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    color: 'var(--color-text-primary)',
                    marginBottom: 'var(--space-1, 4px)',
                  }}
                >
                  Confirm password
                </label>
                <input
                  id="admin-create-confirm-password"
                  type="password"
                  autoComplete="new-password"
                  value={createConfirmPassword}
                  onChange={(e) => setCreateConfirmPassword(e.target.value)}
                  style={{
                    width: '100%',
                    boxSizing: 'border-box',
                    padding: 'var(--space-3, 12px) var(--space-4, 16px)',
                    border: '1px solid var(--color-border)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontSize: 'var(--text-body-size, 15px)',
                    color: 'var(--color-text-primary)',
                    background: 'var(--color-surface)',
                    fontFamily: 'var(--font-family-base)',
                    outline: 'none',
                    minHeight: '44px',
                  }}
                />
              </div>
              {/* Inline error */}
              {createError && (
                <div
                  style={{
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 400,
                    color: 'var(--color-destructive)',
                    marginBottom: 'var(--space-3, 12px)',
                  }}
                >
                  {createError}
                </div>
              )}
              {/* Action row */}
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <button
                  type="button"
                  disabled={createSubmitDisabled}
                  onClick={() => {
                    setCreateError(null);
                    createMemberMutation.mutate();
                  }}
                  style={{
                    background: createSubmitDisabled
                      ? 'var(--color-border, #e2e4e9)'
                      : 'var(--color-member-0, #4a90d9)',
                    color: '#ffffff',
                    border: 'none',
                    cursor: createSubmitDisabled ? 'default' : 'pointer',
                    fontSize: 'var(--text-label-size, 13px)',
                    fontWeight: 600,
                    minHeight: '44px',
                    minWidth: '44px',
                    padding: '0 var(--space-6, 24px)',
                    borderRadius: 'var(--space-1, 4px)',
                    fontFamily: 'var(--font-family-base)',
                    transition: 'background 0.15s ease',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 'var(--space-2, 8px)',
                  }}
                >
                  {createMemberMutation.isPending && (
                    <Loader2
                      size={14}
                      aria-hidden="true"
                      style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
                    />
                  )}
                  Add member
                </button>
              </div>
            </div>
          </section>
        </div>
@@ -1108,33 +898,15 @@ export function AdminPage() {
        </div>
      )}
-      {/* Credential sheet — admin-rotate or admin-add */}
+      {/* Single unified MemberEditorSheet — handles edit + create modes (D-07) */}
-      {sheetMember && (
+      <MemberEditorSheet
-        <CredentialSheet
+        isOpen={editorOpen}
-          isOpen={sheetOpen}
+        onClose={() => setEditorOpen(false)}
-          onClose={() => setSheetOpen(false)}
+        mode={editorMode}
-          mode={sheetMode}
+        member={editorMember ?? undefined}
-          memberName={sheetMember.displayName}
+        triggerRef={editorTriggerRef}
-          memberId={sheetMember.id}
+        onToast={showToast}
-          triggerRef={triggerRef}
+      />
        />
      )}
      {/* Surface 11B — Reset password sheet */}
      {resetTargetMember && (
        <ResetPasswordSheet
          isOpen={resetSheetOpen}
          onClose={() => {
            setResetSheetOpen(false);
            // Return focus to trigger
            if (resetTriggerRef.current) {
              resetTriggerRef.current.focus();
            }
          }}
          onSuccess={() => showToast('Password reset.')}
          member={resetTargetMember}
        />
      )}
    </div>
  );
 }
@@ -1144,16 +916,37 @@ export function AdminPage() {
 interface MemberRowProps {
  member: AdminMember;
  colorIndex: number;
-  onAction: (buttonRef: React.RefObject<HTMLButtonElement | null>) => void;
+  /** Called with the row element so focus can return to it on editor close */
-  onResetPassword?: (buttonRef: React.RefObject<HTMLButtonElement | null>) => void;
+  onEdit: (rowEl: HTMLElement) => void;
 }
-function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowProps) {
+/**
-  const buttonRef = useRef<HTMLButtonElement>(null);
+ * Tappable member row (D-04): whole-row role="button" target with trailing
-  const resetBtnRef = useRef<HTMLButtonElement>(null);
+ * ChevronRight affordance. Opens MemberEditorSheet in edit mode on tap/click
 * or Enter/Space. Admin badge displayed when member.isAdmin.
 */
 function MemberRow({ member, colorIndex, onEdit }: MemberRowProps) {
  const rowRef = useRef<HTMLDivElement>(null);
  function handleActivate() {
    if (rowRef.current) {
      onEdit(rowRef.current);
    }
  }
  return (
    <div
      ref={rowRef}
      role="button"
      aria-label={`Edit ${member.displayName ?? 'Member'}`}
      tabIndex={0}
      onClick={handleActivate}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handleActivate();
        }
      }}
      style={{
        display: 'flex',
        alignItems: 'center',
@@ -1161,6 +954,7 @@ function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowP
        minHeight: '44px',
        padding: 'var(--space-2, 8px) 0',
        borderBottom: '1px solid var(--color-border-subtle, var(--color-border))',
        cursor: 'pointer',
      }}
    >
      {/* Avatar swatch */}
@@ -1175,7 +969,7 @@ function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowP
        }}
      />
-      {/* Name + status */}
+      {/* Name + credential status badge */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
@@ -1235,54 +1029,29 @@ function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowP
        </div>
      </div>
-      {/* Action button row */}
+      {/* Admin badge — shown when member.isAdmin (UI-SPEC §Surface A) */}
-      <div style={{ display: 'flex', gap: 'var(--space-2, 8px)', flexShrink: 0 }}>
+      {member.isAdmin && (
-        {/* Credential rotate/add button */}
+        <span
        <button
          ref={buttonRef}
          type="button"
          onClick={() => onAction(buttonRef)}
          style={{
-            background: 'none',
+            fontSize: '12px',
            border: '1px solid var(--color-border)',
            borderRadius: 'var(--space-1, 4px)',
            cursor: 'pointer',
            fontSize: 'var(--text-label-size, 13px)',
            fontWeight: 600,
-            color: 'var(--color-text-primary)',
+            color: 'var(--color-member-0, #e8915a)',
-            minHeight: '44px',
+            background: 'var(--color-surface-dim, #f7f7f8)',
-            minWidth: '44px',
+            borderRadius: '4px',
-            padding: '0 var(--space-3, 12px)',
+            padding: '2px 6px',
-            fontFamily: 'var(--font-family-base)',
+            flexShrink: 0,
          }}
        >
-          {member.hasCredential ? 'Rotate' : 'Add credential'}
+          Admin
-        </button>
+        </span>
      )}
-        {/* Surface 11B — Reset password button (only for members with a local credential) */}
+      {/* Trailing chevron affordance */}
-        {member.hasLocalCredential && onResetPassword && (
+      <ChevronRight
-          <button
+        size={16}
-            ref={resetBtnRef}
+        aria-hidden="true"
-            type="button"
+        style={{ color: 'var(--color-text-muted)', flexShrink: 0, marginLeft: 'var(--space-2)' }}
-            onClick={() => onResetPassword(resetBtnRef)}
+      />
            style={{
              background: 'none',
              border: '1px solid var(--color-border)',
              borderRadius: 'var(--space-1, 4px)',
              cursor: 'pointer',
              fontSize: 'var(--text-label-size, 13px)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
              minHeight: '44px',
              minWidth: '44px',
              padding: '0 var(--space-3, 12px)',
              fontFamily: 'var(--font-family-base)',
            }}
          >
            Reset password
          </button>
        )}
      </div>
    </div>
  );
 }
@@ -1372,310 +1141,6 @@ function CalendarRadioRow({ calendar, isSelected, onSelect }: CalendarRadioRowPr
  );
 }
 // ── ResetPasswordSheet ──────────────────────────────────────────────────────
 /**
 * Surface 11B — Admin password reset sheet.
 * Opens as a bottom sheet (mobile) / centered modal (desktop).
 * Pattern: CredentialSheet (role=dialog, aria-modal, Escape closes, focus returns to trigger).
 * No current-password field — admin reset does not require knowing the old password.
 */
 interface ResetPasswordSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess?: () => void;
  member: AdminMember;
 }
 function ResetPasswordSheet({ isOpen, onClose, onSuccess, member }: ResetPasswordSheetProps) {
  // WR-05: resize-aware phone detection.
  const sheetPhone = useIsPhone();
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState<string | null>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  // WR-01: trap Tab/Shift+Tab inside the dialog (matches aria-modal="true").
  const dialogRef = useRef<HTMLDivElement>(null);
  const handleDialogKeyDown = useFocusTrap(dialogRef);
  // Escape closes the sheet
  useEffect(() => {
    if (!isOpen) return;
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, [isOpen, onClose]);
  // Focus heading on open
  useEffect(() => {
    if (isOpen && headingRef.current) {
      headingRef.current.focus();
    }
  }, [isOpen]);
  function handleClose() {
    setNewPassword('');
    setConfirmPassword('');
    setError(null);
    onClose();
  }
  const resetMutation = useMutation({
    mutationFn: async () => {
      if (newPassword !== confirmPassword) throw new Error('mismatch');
      await fetchAdminResetPassword(member.id, newPassword);
    },
    onSuccess: () => {
      handleClose();
      onSuccess?.();
    },
    onError: (err) => {
      const msg = err instanceof Error ? err.message : 'server';
      if (msg === 'mismatch') {
        setError('Passwords do not match.');
      } else {
        setError('Something went wrong. Please try again.');
      }
    },
  });
  const isPending = resetMutation.isPending;
  const submitDisabled = isPending || newPassword.length === 0 || confirmPassword.length === 0;
  if (!isOpen) return null;
  return (
    <>
      {/* Backdrop */}
      <div
        onClick={handleClose}
        aria-hidden="true"
        style={{
          position: 'fixed',
          inset: 0,
          background: 'var(--color-overlay, rgba(0,0,0,0.32))',
          zIndex: 300,
        }}
      />
      {/* Sheet — phone: bottom-sheet / desktop: centered modal (D-09) */}
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-label="Reset password"
        onKeyDown={handleDialogKeyDown}
        style={
          sheetPhone
            ? {
                position: 'fixed',
                bottom: 0,
                left: 0,
                right: 0,
                background: 'var(--color-surface, #ffffff)',
                borderRadius: '12px 12px 0 0',
                boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
                padding: 'var(--space-6, 24px)',
                zIndex: 301,
                fontFamily: 'var(--font-family-base)',
              }
            : {
                position: 'fixed',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                maxWidth: '480px',
                width: 'calc(100% - var(--space-8, 32px))',
                maxHeight: 'calc(100dvh - var(--space-8, 32px))',
                overflowY: 'auto',
                background: 'var(--color-surface, #ffffff)',
                borderRadius: '12px',
                boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
                padding: 'var(--space-6, 24px)',
                zIndex: 301,
                fontFamily: 'var(--font-family-base)',
              }
        }
      >
        <h2
          ref={headingRef}
          tabIndex={-1}
          style={{
            margin: '0 0 var(--space-1, 4px) 0',
            fontSize: 'var(--text-heading-size, 18px)',
            fontWeight: 600,
            lineHeight: 'var(--text-heading-line-height, 1.25)',
            color: 'var(--color-text-primary)',
            outline: 'none',
          }}
        >
          Reset password
        </h2>
        {/* Member subtitle */}
        <div
          style={{
            fontSize: 'var(--text-body-size, 15px)',
            fontWeight: 400,
            color: 'var(--color-text-secondary)',
            marginBottom: 'var(--space-6, 24px)',
          }}
        >
          {member.displayName ?? 'Member'}
        </div>
        {/* New password */}
        <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
          <label
            htmlFor="reset-new-password"
            style={{
              display: 'block',
              fontSize: 'var(--text-label-size, 13px)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
              marginBottom: 'var(--space-1, 4px)',
            }}
          >
            New password
          </label>
          <input
            id="reset-new-password"
            type="password"
            autoComplete="new-password"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            style={{
              width: '100%',
              boxSizing: 'border-box',
              padding: 'var(--space-3, 12px) var(--space-4, 16px)',
              border: `1px solid ${error ? 'var(--color-destructive)' : 'var(--color-border)'}`,
              borderRadius: 'var(--space-1, 4px)',
              fontSize: 'var(--text-body-size, 15px)',
              color: 'var(--color-text-primary)',
              background: 'var(--color-surface)',
              fontFamily: 'var(--font-family-base)',
              outline: 'none',
              minHeight: '44px',
            }}
          />
        </div>
        {/* Confirm new password */}
        <div style={{ marginBottom: 'var(--space-4, 16px)' }}>
          <label
            htmlFor="reset-confirm-password"
            style={{
              display: 'block',
              fontSize: 'var(--text-label-size, 13px)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
              marginBottom: 'var(--space-1, 4px)',
            }}
          >
            Confirm new password
          </label>
          <input
            id="reset-confirm-password"
            type="password"
            autoComplete="new-password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            aria-describedby={error ? 'reset-error' : undefined}
            style={{
              width: '100%',
              boxSizing: 'border-box',
              padding: 'var(--space-3, 12px) var(--space-4, 16px)',
              border: `1px solid ${error ? 'var(--color-destructive)' : 'var(--color-border)'}`,
              borderRadius: 'var(--space-1, 4px)',
              fontSize: 'var(--text-body-size, 15px)',
              color: 'var(--color-text-primary)',
              background: 'var(--color-surface)',
              fontFamily: 'var(--font-family-base)',
              outline: 'none',
              minHeight: '44px',
            }}
          />
        </div>
        {/* Inline error */}
        {error && (
          <div
            id="reset-error"
            style={{
              fontSize: 'var(--text-label-size, 13px)',
              fontWeight: 400,
              color: 'var(--color-destructive)',
              marginBottom: 'var(--space-4, 16px)',
            }}
          >
            {error}
          </div>
        )}
        {/* Action row */}
        <div
          style={{
            display: 'flex',
            justifyContent: 'flex-end',
            gap: 'var(--space-3, 12px)',
          }}
        >
          <button
            type="button"
            onClick={handleClose}
            disabled={isPending}
            style={{
              background: 'none',
              border: 'none',
              cursor: isPending ? 'default' : 'pointer',
              fontSize: 'var(--text-label-size, 13px)',
              fontWeight: 600,
              color: 'var(--color-text-secondary)',
              minHeight: '44px',
              minWidth: '44px',
              padding: '0 var(--space-4, 16px)',
              fontFamily: 'var(--font-family-base)',
              borderRadius: 'var(--space-1, 4px)',
            }}
          >
            Cancel
          </button>
          <button
            type="button"
            disabled={submitDisabled}
            onClick={() => {
              setError(null);
              resetMutation.mutate();
            }}
            style={{
              background: submitDisabled
                ? 'var(--color-border, #e2e4e9)'
                : 'var(--color-member-0, #4a90d9)',
              color: '#ffffff',
              border: 'none',
              cursor: submitDisabled ? 'default' : 'pointer',
              fontSize: 'var(--text-label-size, 13px)',
              fontWeight: 600,
              minHeight: '44px',
              minWidth: '44px',
              padding: '0 var(--space-4, 16px)',
              borderRadius: 'var(--space-1, 4px)',
              fontFamily: 'var(--font-family-base)',
              transition: 'background 0.15s ease',
            }}
          >
            Reset password
          </button>
        </div>
      </div>
    </>
  );
 }
 // ── EmptyCalendarsState ─────────────────────────────────────────────────────
 function EmptyCalendarsState() {
`@@ -122,4 +122,4 @@ This document evolves at phase transitions and milestone boundaries.`

	`---`	`---`

	`_Last updated: 2026-06-14 — Phase 11 (Per-Event Reminders) complete; CAL-13/14 + NOTIF-04/05/06 validated (live round-trip deferred, 999.19)_`	`_Last updated: 2026-06-18 — Phase 20 (Admin Member Editor & Form Declutter) complete; single member-editor sheet (D-01..D-07) over new PATCH /api/admin/members/:id with last-admin guard; "Rotate"/"Reset password" copy retired._`