diff --git a/ARCHITECTURE_ESSENTIALS.md b/ARCHITECTURE_ESSENTIALS.md
index 8618723..d4be416 100644
--- a/ARCHITECTURE_ESSENTIALS.md
+++ b/ARCHITECTURE_ESSENTIALS.md
@@ -183,6 +183,70 @@ Undo behaviour: start/complete are applied optimistically and can be reverted wi
 - `GET /facilities/:facilityId/fulfillment-queue` → `FulfillmentQueueItem[]` — queue items with action attribution (`attribution: { action, performedByUserId, performedByName, performedByRole, timestamp, notes }`).
 - `POST /facilities/:facilityId/fulfillment-queue/:itemId/action` (body: `{action: 'fulfilled' | 'rejected', notes?}`) → `FulfillmentQueueItem` — records the acting staff user's identity and role for PRD §7 audit trail.
 
+### Phase W6 — Admin audit & access log viewer (issue #71)
+
+#### State-change events — real, docforum-core#43 (see its `docs/api/README.md` "Audit trail")
+- `GET /admin/audit-events?entityType=&entityId=&actorUserId=&from=&to=&limit=&cursor=` → `{items: AuditEvent[], nextCursor: string | null}`, newest first, keyset-paginated on `(createdAt, id)`.
+- `entityId` is only accepted together with `entityType`; `from`/`to` are inclusive ISO dates; `limit` is 1–200 (this UI sends 50). Unknown parameters are `400`; a malformed cursor is `400 INVALID_CURSOR` (the UI offers "Back to newest").
+- `AuditEvent` shape: `{id, actorUserId, actorRole, entityType, entityId, action, fromState, toState, requestId, metadata, createdAt}`, mirrored in `models.ts`. `metadata` never holds personal data (server-enforced).
+- **API gap:** there is no `action` filter. Because unknown parameters are `400`, the viewer filters by action client-side, within the loaded page only, and says so on screen. Worth a `docforum-core` issue to add server-side `action` filtering.
+
+#### PHI access logs — assumed, docforum-core#45 not landed
+- `GET /admin/access-logs` with the **same** query parameters and `{items, nextCursor}` envelope as audit events (#45 itself only specifies `?entityId=`).
+- `AccessLog` shape: `{id, actorUserId, actorRole, entityType, entityId, route, createdAt}`. `actorRole` is assumed so the column matches the events tab.
+- A `404` is shown as "docforum-core doesn't serve access logs yet" rather than a generic error.
+
+#### Frontend behaviour
+- Filters, tab and cursor live in the URL query (`tab`, `entityType`, `entityId`, `actor`, `action`, `from`, `to`, `cursor`); values from the URL are validated (charset, length, real calendar dates, `from ≤ to`) and invalid ones are dropped with a visible notice.
+- Entity links: only `PaymentIntent` has an admin-reachable view (`/admin?intent=<id>`). Appointment and doctor-profile ids render as plain text until admin views exist.
+- CSV export is client-side and covers exactly the rows on screen; cells starting with `= + - @` are prefixed with `'` to defuse spreadsheet formulas.
+
+### Phase W6 — Stuck referrals console (issue #72, depends on docforum-core#68 and #65)
+
+docforum-core#68 names the three endpoints but not their shapes, and its
+`Referral` model is still field-sparse in `schema.prisma`. Everything below
+is assumed; `ReferralStatus` and `Specialty` are the only real types, and the
+`Referral` fields follow docforum-core's `ARCHITECTURE.md` §4.4 plus
+`parentReferralId` from #65.
+
+- `GET /admin/referrals?status=pending&olderThan=<24h|48h|72h|168h>&cursor=` → `{items: StuckReferral[], nextCursor}`, oldest first (the console re-sorts the loaded pages by `createdAt` anyway). `olderThan` is the only filter sent; the reason filter is client-side over loaded pages, because #68 doesn't define one.
+- `StuckReferral` = `Referral` (without `snapshotNotes`, which is encrypted clinical text the console never needs) plus `stuckReason: 'no_doctor'|'doctor_inactive'|'loop_flagged'`, embedded `targetSpecialty: Specialty`, `referringDoctor`/`targetDoctor` as `{id, fullName}`, and `chain: ReferralChainLink[] | null`, sent only for `loop_flagged`, oldest hop first, ending with the referral itself. `ReferralChainLink` = `{referralId, referringDoctor, targetSpecialty, targetDoctor, status, createdAt}`. No patient name or id is shown.
+- `GET /admin/doctors?specialtyId=&verificationStatus=verified` → `DoctorAvailability[]` = `{id, fullName, verificationStatus, specialties: Specialty[], openSlotCount, nextAvailableAt}` (open slots in the next 7 days).
+- `POST /admin/referrals/:id/reassign` (body: `{targetDoctorId, reason, expectedUpdatedAt}`) → `Referral`.
+- `POST /admin/referrals/:id/cancel` (body: `{reason, expectedUpdatedAt}`) → `Referral`. docforum-core notifies the patient; the client doesn't. Cancellation's resulting status isn't assumed: `ReferralStatus` has no `cancelled` value yet, and the referral just leaves the queue.
+- **Conflicts:** `expectedUpdatedAt` is the referral's `updatedAt` as the admin saw it, so docforum-core can answer `409` when someone else acted first. `409` and `404` close the dialog, explain, and refetch the queue. `400`/`422` keep the dialog open with the server's message (`422` also refetches the doctor list). A network failure keeps the dialog open; retrying is safe because a duplicate comes back as `409`.
+- **Eligibility is enforced client-side as well:** the picker only offers doctors that are `verified`, list the referral's `targetSpecialtyId`, and are neither the referral's current target doctor nor its referring doctor (`eligibleCandidates`). Anything else docforum-core returns is hidden, and the picker says how many were hidden. Verification is per doctor today; when per-specialty verification lands (docforum-core#51), `DoctorAvailability` needs a per-specialty status and the check should use it.
+- Reasons are required, 10–500 characters, with whitespace collapsed. The UI asks admins to keep clinical details out, because reasons land in the audit trail. After an action, the console links to `/admin/audit?entityType=Referral&entityId=<id>`, which assumes the referral audit events use `entityType: 'Referral'`.
+- `404` on the queue or doctor listing is shown as "docforum-core doesn't serve this yet (#68)".
+
+### Phase W6 — System health page (issue #73, depends on docforum-core#100, #104 and #94)
+
+None of the three backend issues has landed (docforum-core still serves only
+`GET /health` → `{status: 'ok'}`), so every shape below is assumed and
+mirrored in `models.ts` under "Phase W6 — System health".
+
+- **Readiness (docforum-core#104):** `GET /health/ready` → `ReadinessReport` = `{status: 'ready'|'degraded'|'not_ready', checkedAt, checks: ReadinessCheck[]}`, `ReadinessCheck` = `{name, status: 'pass'|'warn'|'fail', required, durationMs, message}`. Check names assumed: `database`, `migrations`, `config`, `stellar_rpc`; any other name is shown as sent. `200` for ready/degraded, `503` for not ready **with the same body**; the service unwraps a `503` only if its body looks like a report, so a proxy's 503 page still counts as unreachable. `degraded` means only optional checks are failing; #104 says a Stellar RPC outage should take out payments, not the whole API. The bearer token is sent in case docforum-core only shows check detail to admins. `message` is assumed never to hold secrets (server-side responsibility); the UI renders it as text.
+- **Jobs (docforum-core#100):** `GET /admin/jobs` → `BackgroundJob[]` = `{name, schedule, lastRun, lastSuccess, lastFailure, nextRunAt, running}`, where each run is a `JobRun` mirroring #100's table: `{id, job, status: 'running'|'succeeded'|'failed', startedAt, finishedAt, error, itemsProcessed, trigger: 'schedule'|'manual'}`. `schedule` is assumed to be human-readable (an interval phrase or a cron expression), shown verbatim. `running` means some instance holds the job's advisory lock.
+- **Run now:** `POST /admin/jobs/:name/run` → `JobRun`, which may still be `running` if the job outlives the request. `409` means another instance holds the lock (no second run); `404` means an unknown job or manual runs aren't served yet. Every outcome, network failures included, refetches all three sources. Retrying after an unconfirmed run is safe because #100 requires jobs to be idempotent.
+- **Recent failures:** #100 describes no run-history listing, so the page builds this list from each job's `lastFailure` within the last 24 hours (at most one per job). A `GET /admin/jobs/runs?status=failed` would show more; worth a `docforum-core` issue if admins need it.
+- **Outbox (docforum-core#94):** `GET /admin/outbox` → `OutboxSummary` = `{pendingCount, deadLetterCount, oldestPendingAt}`. The issue asks for the dead-letter count "if exposed", so a `404` shows "Not exposed" (neutral), not an error.
+- **Derived states, all client-side:** a job is *overdue* once `nextRunAt` is more than 5 minutes past (this is how a stalled expiry job shows up); *running* beats *last run failed*, which beats *overdue*, which beats *never run* and *healthy*. A readiness round trip of 10 s or more is flagged as a likely free-tier cold start.
+- **Refresh:** all three queries poll every 30 s through React Query's `refetchInterval`, which skips ticks while `document.visibilityState` is `hidden`. Refetch-on-focus catches the page up when the tab comes back. A failed poll after earlier success shows readiness as *Unreachable* (never a stale *Ready*) and keeps the last job list with a "couldn't refresh" banner.
+
+### Phase W6 — Feature flags console (issue #74, depends on docforum-core#132)
+
+docforum-core#132 describes the flag service (boolean and percentage flags,
+targeting by role or user-id allowlist, admin list/toggle endpoints, audit
+event per change) but no shapes, and hasn't landed. Everything below is
+assumed and mirrored in `models.ts` under "Phase W6 — Feature flags console".
+
+- `GET /admin/flags` → `FeatureFlag[]`, unpaginated (tens of flags per environment). `FeatureFlag` = `{id, key, description, kind: 'boolean'|'percentage', enabled, rolloutPercentage, targeting: {roles: Role[], userIds: string[]}, createdAt, updatedAt}`. `rolloutPercentage` is a whole number 0–100 for percentage flags and `null` for boolean ones. Each environment has its own database, so the list is simply "this environment's flags"; there's no `environment` field.
+- `PATCH /admin/flags/:key` (body: any of `{enabled, rolloutPercentage, targeting}` plus `expectedUpdatedAt`) → the saved `FeatureFlag`. Only changed fields are sent. `targeting` is replaced as a whole whenever roles or allowlist change. `409` means someone else changed the flag first, `404` means it's gone, and `400`/`422` carry the server's message.
+- **Evaluation order assumed for the "who it reaches" text:** `enabled: false` is a kill switch (off for everyone, allowlist included). When enabled, allowlisted users always get the flag. Everyone else must match `roles` (empty means all roles) and, for percentage flags, fall in the sticky hash bucket. If #132 lands with different precedence, `describeAudience` in `features/admin-flags/flags.ts` is the one place to change.
+- **Last changed by / when** comes from the *real* audit listing (#43): one `GET /admin/audit-events?entityType=FeatureFlag&limit=200`, newest event per `entityId` (the flag's `id`). This assumes #132 writes flag changes with `entityType: 'FeatureFlag'` and the flag id as `entityId`. Flags missing from that page say "before the latest 200 flag changes" if there are more pages, otherwise "no changes recorded since it was created". The actor is shown as role and short user id, or "you", because audit events carry no email. If the audit request fails, the console still works and says the last change is unavailable.
+- **Validation (client-side, server presumed to re-check):** percentages must be whole numbers 0–100 (no decimals or exponents). Allowlist entries must be UUIDs, lower-cased and de-duplicated, at most 500. Ids already saved on the flag pass through unchecked, so an unexpected server-side id format can't block unrelated edits.
+- **Optimistic updates:** confirming writes the change into the cached list straight away, and the flag shows "Saving…" with its controls disabled until docforum-core answers. On failure only that flag is restored, and only while the cached copy still has the `updatedAt` the save started from. A list snapshot is never restored, because that would undo a save to a different flag that is in flight or already done. Every outcome then refetches the list and the audit page (without awaiting, so a cold start doesn't hold "Saving…").
+- An open dialog compares its flag's `updatedAt` with the live list. If someone else saved in the meantime, it says so, blocks confirming, and offers to start again from the latest values.
 ### Scan-to-verify orders with device camera (issue #52, docforum-core#71)
 - `POST /facilities/me/verify-order` (body: `{ token: string }`) → `VerifyOrderResponse`
   - Token verification endpoint returning 5 explicit states: `valid`, `superseded`, `expired`, `fulfilled`, `not_eligible`.
diff --git a/ROADMAP.md b/ROADMAP.md
index 71093d5..6cd4177 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -86,6 +86,12 @@ real API" (no refresh-on-reload flow).
   a session exists, same caveat as the facility dashboard already had.
 - [ ] Link transaction hashes/escrows to the Stellar testnet explorer. Tracked as [issue #10](https://github.com/DocForum/docforum-web/issues/10) (Trivial, 100 pts).
 
+## Phase W6 — Admin console
+Admin-only screens beyond payments. Everything goes through `docforum-core`'s admin API; admin accounts stay seeded/invited (PRD OQ-2).
+- [x] Audit and access log viewer. Tracked as [issue #71](https://github.com/DocForum/docforum-web/issues/71) (High, 200 pts) — `src/features/admin-audit/`, `AdminAuditPage` at `/admin/audit`. Two tabs: state-change events against `docforum-core`'s real `GET /admin/audit-events` (docforum-core#43), and PHI access logs against an assumed `GET /admin/access-logs` (docforum-core#45, still open — the tab says so on a `404`). Entity type/id, actor, action and date-range filters plus the page cursor all live in the URL; one 50-row page per request; entity links where an admin view exists (payment intents → `/admin?intent=`); client-side CSV export of the page on screen. The action filter is client-side within the loaded page, because the backend rejects an `action` parameter — a `docforum-core` API gap, see `ARCHITECTURE_ESSENTIALS.md` "Known assumptions — Phase W6".
+- [x] Stuck referrals console: reassign or cancel with a reason. Tracked as [issue #72](https://github.com/DocForum/docforum-web/issues/72) (High, 200 pts): `src/features/admin-referrals/`, `AdminReferralsPage` at `/admin/referrals`. Pending referrals past a 1/2/3/7-day threshold are listed oldest first with age, target specialty and stuck reason (no doctor, doctor inactive, loop flagged); loop-flagged referrals show their chain with the returning hop marked. Reassign offers only verified doctors in the target specialty (re-checked client-side, excluding the current and referring doctor) with 7-day availability; cancel tells the admin docforum-core notifies the patient. Both require a reason and send `expectedUpdatedAt`, so concurrent actions come back as conflicts and the queue refreshes. **Built against assumed shapes:** docforum-core#68 (admin referral operations) and #65 (loop chain) haven't landed. See `ARCHITECTURE_ESSENTIALS.md` "Known assumptions — Phase W6".
+- [x] System health page: readiness, background jobs and recent failures. Tracked as [issue #73](https://github.com/DocForum/docforum-web/issues/73) (High, 200 pts): `src/features/admin-system/`, `AdminSystemPage` at `/admin/system`. Overview tiles answer "is it broken?" at a glance (API readiness, background jobs, outbox dead letters), backed by a readiness-check list (required vs optional, so a Stellar RPC outage shows as degraded, not down), one card per job with last success, last failure, next run and an overdue flag for stalled jobs, and a recent-failures list with error messages. "Run now" asks for confirmation (Cancel focused) and shows docforum-core's result in the dialog: finished with item count, failed with the error, still running, already running elsewhere (`409`), or unconfirmed after a network failure. Everything refreshes every 30 s while the tab is visible and catches up when it's shown again; each source fails on its own, a failed poll never leaves a stale "Ready" on screen, and slow readiness answers are flagged as likely cold starts. **Built against assumed shapes:** docforum-core#104 (readiness), #100 (job runner) and #94 (outbox) haven't landed. See `ARCHITECTURE_ESSENTIALS.md` "Known assumptions — Phase W6".
+- [x] Feature flags console. Tracked as [issue #74](https://github.com/DocForum/docforum-web/issues/74) (High, 200 pts): `src/features/admin-flags/`, `AdminFlagsPage` at `/admin/flags`. Lists every flag with its state (on, rolling out, off), type, rollout percentage, role targeting and allowlist size, a plain-language "who it reaches" line, and who changed it last and when, taken from the audit trail. Search (key and description), state and type filters live in the URL. The switch and the edit dialog both go through a review step that shows each changed field before and after, the audience before and after, and the last change; turning a flag off is called out. Percentages must be whole numbers from 0 to 100, and allowlist entries must be user ids. Saves are optimistic. A failed save rolls back only that flag, never another save in flight, and the list refetches. `expectedUpdatedAt` turns concurrent edits into conflicts, and the dialog notices when the flag changes under it. **Built against assumed shapes:** docforum-core#132 hasn't landed. See `ARCHITECTURE_ESSENTIALS.md` "Known assumptions — Phase W6".
 ## Phase W7 — Platform quality: reliability, accessibility, performance, testing
 - [x] Mock API for local development (MSW). Tracked as [issue #95](https://github.com/DocForum/docforum-web/issues/95) (High, 200 pts) — `npm run dev:mock` serves every endpoint the app uses through the normal service layer via `src/mocks/`: seeded obviously-fake fixtures, a dev-panel role switcher (patient/doctor/facility/admin), scenario toggles (empty states, forced errors), a latency slider, and a fixture reset. 26 handler tests drive the real `src/services/` layer against MSW; CI fails if mock code ever enters a production bundle (`npm run check:dist`). Documented in `CONTRIBUTING.md`.
 - [ ] Generate MSW handlers and fixtures from the backend OpenAPI spec. Tracked as [issue #96](https://github.com/DocForum/docforum-web/issues/96) (High, 200 pts) — **blocked**: depends on [docforum-core#112](https://github.com/DocForum/docforum-core/issues/112) (OpenAPI 3.1 spec generated from the Zod schemas), which is still open — there is no authoritative `openapi.json` to generate from yet. Do not fabricate one; see that issue.
@@ -364,6 +370,10 @@ real API" (no refresh-on-reload flow).
   - `#50 Doctor practice insights`: private insights page (`/doctor/insights`) with weekly slot utilisation, no-show and late-cancellation rates, referral acceptance turnaround, and messages response time. Includes SVG charts paired with accessible semantic `<table>` alternatives, date range selector (presets + custom), clearly labelled small-sample caveats, and strict peer-comparison suppression (doctor's own confidential data only). Wired into `DoctorDashboardPage`, command palette (`⌘K`), and navigation.
   - `#51 Facility staff accounts & fulfillment attribution`: dedicated team management page (`/facility/team`) with member list, role assignment (`owner` vs `staff`), email invitations, resend/revoke pending invites, member removal with backend session revocation warning, and last-owner deletion protection. Enforced read-only view and action suppression for staff members. In the fulfillment queue (`/facility`), added action attribution display showing which staff member dispensed/fulfilled each order for PRD §7 audit trail.
   - Updated `ARCHITECTURE_ESSENTIALS.md` "Known assumptions" and `ROADMAP.md`. 24 test files and 112/112 tests passing; typecheck and build green.
+- 2026-10-18 — Built Phase W6 (new section) audit and access log viewer (#71): `/admin/audit` with state-change and record-access tabs, URL-synced filters (entity type/id, actor, action, date range) and keyset cursor pagination (newer-page trail kept in history state so browser back/forward agrees with the pager), entity record links, entity-history/actor pivots, and formula-safe client-side CSV export of the current page. Audit events use `docforum-core`'s real contract (#43); access logs are an assumed shape pending docforum-core#45. Admin nav gained Payments/Audit trail links; `/admin?intent=<id>` now opens a payment intent directly. Viewer never logs to the console (tested). 27 test files and 153/153 tests passing; typecheck and build green.
+- 2026-10-18 — Built Phase W6 stuck referrals console (#72): `/admin/referrals` queue of referrals pending past an age threshold (URL-synced threshold and reason filter, oldest first, cursor "Load more"), loop-chain context for loop-flagged referrals, reassign dialog with a doctor picker limited to verified doctors in the target specialty (with availability, chain-member warning, ineligible rows hidden and counted), and cancel dialog with patient-notification notice. Both actions need a 10–500 character reason, send `expectedUpdatedAt` for conflict detection, handle 409/404 (someone else acted) by closing and refreshing, and link to the referral's audit trail afterwards. Admin nav and dashboard link to it. API shapes are assumed pending docforum-core#68/#65. 30 test files and 207/207 tests passing; typecheck and build green.
+- 2026-10-18 — Built Phase W6 system health page (#73): `/admin/system` with readiness, background-job and outbox overview tiles, per-check readiness list (required/optional, duration, detail, cold-start hint), job cards (healthy, last run failed, overdue, running, never run; last success, last failure, next run), recent failures from the last 24 hours, and a confirmed "Run now" that shows the run's result in place (finished, failed, still running, `409` already running, unconfirmed). Polls every 30 s only while the tab is visible. 404s show as "not served yet"/"not exposed" rather than errors. Admin nav and dashboard link to it. API shapes are assumed pending docforum-core#104/#100/#94. 33 test files and 267/267 tests passing; typecheck and build green.
+- 2026-10-18 — Built Phase W6 feature flags console (#74): `/admin/flags` lists flags with state, type, rollout bar, targeting, a "who it reaches" summary and last change (actor and time from `GET /admin/audit-events?entityType=FeatureFlag`, one request for all flags). Search, state and type filters are synced to the URL. The edit and quick-toggle dialogs share a review-then-confirm step (field diff, audience before and after, last change). Validation covers a whole-number 0–100 percentage and a UUID allowlist (max 500). Optimistic saves roll back per flag on failure, re-read the server's state afterwards, and handle 409/404 conflicts and mid-edit staleness. Admin nav and dashboard link to it. API shape assumed pending docforum-core#132. 37 test files and 335/335 tests passing; typecheck and build green.
 - 2026-10-18 — Built Phase W4 Scan-to-verify orders (#52) and Facility payout ledger with escrow terms (#53):
   - `#52 Scan-to-verify orders with device camera`: dedicated verification page (`/facility/verify`) enabling facility staff to scan order QR codes via device camera or enter tokens manually. Uses native `BarcodeDetector` API with fallback; guarantees complete media stream track teardown on screen unmount/exit. Dispatches to `POST /facilities/me/verify-order` and cleanly displays all 5 result states (`valid`, `superseded`, `expired`, `fulfilled`, `not_eligible`) alongside minimal clinical order summaries. Valid results feature an immediate CTA to jump into fulfillment (`/facility?orderId=...`). Surfaces HTTP 429 rate-limit protection against enumeration.
   - `#53 Facility payout ledger with escrow terms`: dedicated payments page (`/facility/payments`) displaying held, released, and refunded totals for both XLM and USDC. Uses BigInt-safe math (`formatStroops`) for Stellar 7-decimal stroop precision. Renders cursor-paginated escrow ledger with plain-language terms (releaser rules and refund deadline countdowns) adhering to threat model T8. Prominently flags approaching refund deadlines (< 48h) on unfulfilled orders. Integrates direct deep links to Stellar Expert testnet explorer for funding, release, and refund transactions.
diff --git a/screenshots/admin-audit-access-desktop.png b/screenshots/admin-audit-access-desktop.png
new file mode 100644
index 0000000..adf6b22
Binary files /dev/null and b/screenshots/admin-audit-access-desktop.png differ
diff --git a/screenshots/admin-audit-access-mobile.png b/screenshots/admin-audit-access-mobile.png
new file mode 100644
index 0000000..631c4c5
Binary files /dev/null and b/screenshots/admin-audit-access-mobile.png differ
diff --git a/screenshots/admin-audit-events-desktop.png b/screenshots/admin-audit-events-desktop.png
new file mode 100644
index 0000000..d0ea3d1
Binary files /dev/null and b/screenshots/admin-audit-events-desktop.png differ
diff --git a/screenshots/admin-audit-events-filtered-desktop.png b/screenshots/admin-audit-events-filtered-desktop.png
new file mode 100644
index 0000000..cb2cef6
Binary files /dev/null and b/screenshots/admin-audit-events-filtered-desktop.png differ
diff --git a/screenshots/admin-audit-events-mobile.png b/screenshots/admin-audit-events-mobile.png
new file mode 100644
index 0000000..8db7a17
Binary files /dev/null and b/screenshots/admin-audit-events-mobile.png differ
diff --git a/screenshots/admin-flags-confirm-desktop.png b/screenshots/admin-flags-confirm-desktop.png
new file mode 100644
index 0000000..e1e35f0
Binary files /dev/null and b/screenshots/admin-flags-confirm-desktop.png differ
diff --git a/screenshots/admin-flags-confirm-mobile.png b/screenshots/admin-flags-confirm-mobile.png
new file mode 100644
index 0000000..8c933ce
Binary files /dev/null and b/screenshots/admin-flags-confirm-mobile.png differ
diff --git a/screenshots/admin-flags-edit-desktop.png b/screenshots/admin-flags-edit-desktop.png
new file mode 100644
index 0000000..ba9c515
Binary files /dev/null and b/screenshots/admin-flags-edit-desktop.png differ
diff --git a/screenshots/admin-flags-edit-mobile.png b/screenshots/admin-flags-edit-mobile.png
new file mode 100644
index 0000000..bdbce3e
Binary files /dev/null and b/screenshots/admin-flags-edit-mobile.png differ
diff --git a/screenshots/admin-flags-filtered-desktop.png b/screenshots/admin-flags-filtered-desktop.png
new file mode 100644
index 0000000..e448c7d
Binary files /dev/null and b/screenshots/admin-flags-filtered-desktop.png differ
diff --git a/screenshots/admin-flags-filtered-mobile.png b/screenshots/admin-flags-filtered-mobile.png
new file mode 100644
index 0000000..796f3cf
Binary files /dev/null and b/screenshots/admin-flags-filtered-mobile.png differ
diff --git a/screenshots/admin-flags-list-desktop.png b/screenshots/admin-flags-list-desktop.png
new file mode 100644
index 0000000..2c3d85f
Binary files /dev/null and b/screenshots/admin-flags-list-desktop.png differ
diff --git a/screenshots/admin-flags-list-mobile.png b/screenshots/admin-flags-list-mobile.png
new file mode 100644
index 0000000..851382a
Binary files /dev/null and b/screenshots/admin-flags-list-mobile.png differ
diff --git a/screenshots/admin-flags-rollback-desktop.png b/screenshots/admin-flags-rollback-desktop.png
new file mode 100644
index 0000000..d6f9a6a
Binary files /dev/null and b/screenshots/admin-flags-rollback-desktop.png differ
diff --git a/screenshots/admin-flags-rollback-mobile.png b/screenshots/admin-flags-rollback-mobile.png
new file mode 100644
index 0000000..22385b2
Binary files /dev/null and b/screenshots/admin-flags-rollback-mobile.png differ
diff --git a/screenshots/admin-flags-toggle-confirm-desktop.png b/screenshots/admin-flags-toggle-confirm-desktop.png
new file mode 100644
index 0000000..49d50ae
Binary files /dev/null and b/screenshots/admin-flags-toggle-confirm-desktop.png differ
diff --git a/screenshots/admin-flags-toggle-confirm-mobile.png b/screenshots/admin-flags-toggle-confirm-mobile.png
new file mode 100644
index 0000000..50d01f3
Binary files /dev/null and b/screenshots/admin-flags-toggle-confirm-mobile.png differ
diff --git a/screenshots/admin-referrals-cancel-desktop.png b/screenshots/admin-referrals-cancel-desktop.png
new file mode 100644
index 0000000..bc1f240
Binary files /dev/null and b/screenshots/admin-referrals-cancel-desktop.png differ
diff --git a/screenshots/admin-referrals-cancel-mobile.png b/screenshots/admin-referrals-cancel-mobile.png
new file mode 100644
index 0000000..806c750
Binary files /dev/null and b/screenshots/admin-referrals-cancel-mobile.png differ
diff --git a/screenshots/admin-referrals-queue-desktop.png b/screenshots/admin-referrals-queue-desktop.png
new file mode 100644
index 0000000..15041e2
Binary files /dev/null and b/screenshots/admin-referrals-queue-desktop.png differ
diff --git a/screenshots/admin-referrals-queue-mobile.png b/screenshots/admin-referrals-queue-mobile.png
new file mode 100644
index 0000000..902c05d
Binary files /dev/null and b/screenshots/admin-referrals-queue-mobile.png differ
diff --git a/screenshots/admin-referrals-reassign-desktop.png b/screenshots/admin-referrals-reassign-desktop.png
new file mode 100644
index 0000000..73d7efe
Binary files /dev/null and b/screenshots/admin-referrals-reassign-desktop.png differ
diff --git a/screenshots/admin-referrals-reassign-mobile.png b/screenshots/admin-referrals-reassign-mobile.png
new file mode 100644
index 0000000..c2ff83b
Binary files /dev/null and b/screenshots/admin-referrals-reassign-mobile.png differ
diff --git a/screenshots/admin-system-desktop.png b/screenshots/admin-system-desktop.png
new file mode 100644
index 0000000..cc75ef4
Binary files /dev/null and b/screenshots/admin-system-desktop.png differ
diff --git a/screenshots/admin-system-mobile.png b/screenshots/admin-system-mobile.png
new file mode 100644
index 0000000..c4a7393
Binary files /dev/null and b/screenshots/admin-system-mobile.png differ
diff --git a/screenshots/admin-system-run-confirm-desktop.png b/screenshots/admin-system-run-confirm-desktop.png
new file mode 100644
index 0000000..3a3e34f
Binary files /dev/null and b/screenshots/admin-system-run-confirm-desktop.png differ
diff --git a/screenshots/admin-system-run-confirm-mobile.png b/screenshots/admin-system-run-confirm-mobile.png
new file mode 100644
index 0000000..5cdbd4c
Binary files /dev/null and b/screenshots/admin-system-run-confirm-mobile.png differ
diff --git a/screenshots/admin-system-run-result-desktop.png b/screenshots/admin-system-run-result-desktop.png
new file mode 100644
index 0000000..3bddea9
Binary files /dev/null and b/screenshots/admin-system-run-result-desktop.png differ
diff --git a/screenshots/admin-system-run-result-mobile.png b/screenshots/admin-system-run-result-mobile.png
new file mode 100644
index 0000000..ba868dc
Binary files /dev/null and b/screenshots/admin-system-run-result-mobile.png differ
diff --git a/src/App.tsx b/src/App.tsx
index f54586f..1b3aca1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,10 @@ import { ConsultationNote } from './features/consultation/components/Consultatio
 import { DoctorInbox } from './features/messaging/components/DoctorInbox';
 import { DoctorPracticeInsightsPage } from './pages/DoctorPracticeInsightsPage';
 import { FacilityTeamPage } from './pages/FacilityTeamPage';
+import { AdminAuditPage } from './pages/AdminAuditPage';
+import { AdminReferralsPage } from './pages/AdminReferralsPage';
+import { AdminSystemPage } from './pages/AdminSystemPage';
+import { AdminFlagsPage } from './pages/AdminFlagsPage';
 import { OrderVerifyPage } from './pages/OrderVerifyPage';
 import { FacilityPaymentsPage } from './pages/FacilityPaymentsPage';
 
@@ -96,6 +100,38 @@ export default function App() {
             </RequireAuth>
           }
         />
+        <Route
+          path="admin/audit"
+          element={
+            <RequireAuth allowedRoles={['admin']}>
+              <AdminAuditPage />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path="admin/referrals"
+          element={
+            <RequireAuth allowedRoles={['admin']}>
+              <AdminReferralsPage />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path="admin/system"
+          element={
+            <RequireAuth allowedRoles={['admin']}>
+              <AdminSystemPage />
+            </RequireAuth>
+          }
+        />
+        <Route
+          path="admin/flags"
+          element={
+            <RequireAuth allowedRoles={['admin']}>
+              <AdminFlagsPage />
+            </RequireAuth>
+          }
+        />
         <Route
           path="admin/*"
           element={
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e636565..8a9071d 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -58,6 +58,25 @@ export function Layout() {
                   </Link>
                 </>
               )}
+              {user.role === 'admin' && (
+                <>
+                  <Link to="/admin" className={styles.navLink}>
+                    Payments
+                  </Link>
+                  <Link to="/admin/referrals" className={styles.navLink}>
+                    Referrals
+                  </Link>
+                  <Link to="/admin/audit" className={styles.navLink}>
+                    Audit trail
+                  </Link>
+                  <Link to="/admin/flags" className={styles.navLink}>
+                    Flags
+                  </Link>
+                  <Link to="/admin/system" className={styles.navLink}>
+                    System
+                  </Link>
+                </>
+              )}
               <span className={styles.user}>
                 {user.email}
                 {user.role === 'doctor' && <UnreadBadge />}
diff --git a/src/features/admin-audit/components/AccessLogsPanel.tsx b/src/features/admin-audit/components/AccessLogsPanel.tsx
new file mode 100644
index 0000000..92a5934
--- /dev/null
+++ b/src/features/admin-audit/components/AccessLogsPanel.tsx
@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { useAccessLogs } from '../hooks/useAuditLog';
+import { csvFilename, downloadCsv, toCsv } from '../csv';
+import { toAuditQuery } from '../filters';
+import { ActorCell, AuditResults, EntityCell, PAGE_SIZE, Timestamp } from './AuditResults';
+import type { CsvColumn } from '../csv';
+import type { AuditPanelProps } from './AuditResults';
+import type { AccessLog } from '../../../types/models';
+import styles from './AuditLogViewer.module.css';
+
+export const ACCESS_LOG_CSV_COLUMNS: CsvColumn<AccessLog>[] = [
+  { header: 'createdAt', value: (entry) => entry.createdAt },
+  { header: 'entityType', value: (entry) => entry.entityType },
+  { header: 'entityId', value: (entry) => entry.entityId },
+  { header: 'route', value: (entry) => entry.route },
+  { header: 'actorUserId', value: (entry) => entry.actorUserId },
+  { header: 'actorRole', value: (entry) => entry.actorRole },
+  { header: 'id', value: (entry) => entry.id },
+];
+
+export function AccessLogsPanel({ filters, pageNumber, onOlder, onNewer, onNewest }: AuditPanelProps) {
+  const query = useMemo(() => toAuditQuery(filters, PAGE_SIZE), [filters]);
+  const { data, error, isLoading, isFetching, isPlaceholderData, refetch } = useAccessLogs(query);
+  const rows = data?.items ?? [];
+
+  return (
+    <AuditResults
+      tab="access"
+      isLoading={isLoading}
+      isFetching={isFetching}
+      isPlaceholderData={isPlaceholderData}
+      error={error}
+      onRetry={() => void refetch()}
+      pageCount={rows.length}
+      visibleCount={rows.length}
+      nextCursor={data?.nextCursor ?? null}
+      pageNumber={pageNumber}
+      hasNewer={filters.cursor !== null}
+      onOlder={onOlder}
+      onNewer={onNewer}
+      onNewest={onNewest}
+      onExport={() => downloadCsv(csvFilename('docforum-access-logs'), toCsv(ACCESS_LOG_CSV_COLUMNS, rows))}
+      emptyMessage="No record views match these filters."
+    >
+      <table className={styles.table} aria-label="PHI access logs">
+        <thead>
+          <tr>
+            <th scope="col">When</th>
+            <th scope="col">Record viewed</th>
+            <th scope="col">Route</th>
+            <th scope="col">Viewed by</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((entry) => (
+            <tr key={entry.id}>
+              <td>
+                <Timestamp value={entry.createdAt} />
+              </td>
+              <td>
+                <EntityCell entityType={entry.entityType} entityId={entry.entityId} filters={filters} />
+              </td>
+              <td>
+                <code className={styles.action}>{entry.route}</code>
+              </td>
+              <td>
+                <ActorCell actorUserId={entry.actorUserId} actorRole={entry.actorRole} filters={filters} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </AuditResults>
+  );
+}
diff --git a/src/features/admin-audit/components/AuditEventsPanel.tsx b/src/features/admin-audit/components/AuditEventsPanel.tsx
new file mode 100644
index 0000000..dc0d36e
--- /dev/null
+++ b/src/features/admin-audit/components/AuditEventsPanel.tsx
@@ -0,0 +1,133 @@
+import { useMemo } from 'react';
+import { useAuditEvents } from '../hooks/useAuditLog';
+import { csvFilename, downloadCsv, toCsv } from '../csv';
+import { matchesAction, toAuditQuery } from '../filters';
+import { ActorCell, AuditResults, EntityCell, PAGE_SIZE, Timestamp } from './AuditResults';
+import type { CsvColumn } from '../csv';
+import type { AuditPanelProps } from './AuditResults';
+import type { AuditEvent } from '../../../types/models';
+import styles from './AuditLogViewer.module.css';
+
+export const AUDIT_EVENT_CSV_COLUMNS: CsvColumn<AuditEvent>[] = [
+  { header: 'createdAt', value: (event) => event.createdAt },
+  { header: 'action', value: (event) => event.action },
+  { header: 'entityType', value: (event) => event.entityType },
+  { header: 'entityId', value: (event) => event.entityId },
+  { header: 'fromState', value: (event) => event.fromState },
+  { header: 'toState', value: (event) => event.toState },
+  { header: 'actorUserId', value: (event) => event.actorUserId },
+  { header: 'actorRole', value: (event) => event.actorRole },
+  { header: 'requestId', value: (event) => event.requestId },
+  { header: 'metadata', value: (event) => (event.metadata ? JSON.stringify(event.metadata) : null) },
+  { header: 'id', value: (event) => event.id },
+];
+
+function formatMetadataValue(value: unknown): string {
+  return typeof value === 'string' ? value : JSON.stringify(value);
+}
+
+function Metadata({ metadata }: { metadata: AuditEvent['metadata'] }) {
+  const entries = metadata ? Object.entries(metadata) : [];
+  if (entries.length === 0) return null;
+  return (
+    <dl className={styles.metadata}>
+      {entries.map(([key, value]) => (
+        <div key={key}>
+          <dt>{key}</dt>
+          <dd>{formatMetadataValue(value)}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export function AuditEventsPanel({ filters, pageNumber, onOlder, onNewer, onNewest }: AuditPanelProps) {
+  const query = useMemo(() => toAuditQuery(filters, PAGE_SIZE), [filters]);
+  const { data, error, isLoading, isFetching, isPlaceholderData, refetch } = useAuditEvents(query);
+
+  const items = data?.items ?? [];
+  const rows = useMemo(() => items.filter((event) => matchesAction(event.action, filters.action)), [items, filters.action]);
+
+  return (
+    <>
+      {filters.action && (
+        <p className={styles.hint}>
+          Action is matched within each loaded page — docforum-core's audit endpoint doesn't filter by action yet, so
+          older pages may hold more matches.
+        </p>
+      )}
+      <AuditResults
+        tab="events"
+        isLoading={isLoading}
+        isFetching={isFetching}
+        isPlaceholderData={isPlaceholderData}
+        error={error}
+        onRetry={() => void refetch()}
+        pageCount={items.length}
+        visibleCount={rows.length}
+        nextCursor={data?.nextCursor ?? null}
+        pageNumber={pageNumber}
+        hasNewer={filters.cursor !== null}
+        onOlder={onOlder}
+        onNewer={onNewer}
+        onNewest={onNewest}
+        onExport={() => downloadCsv(csvFilename('docforum-audit-events'), toCsv(AUDIT_EVENT_CSV_COLUMNS, rows))}
+        emptyMessage={
+          items.length > 0
+            ? 'No events on this page match the action filter. Try older pages.'
+            : 'No audit events match these filters.'
+        }
+      >
+        <table className={styles.table} aria-label="State-change audit events">
+          <thead>
+            <tr>
+              <th scope="col">When</th>
+              <th scope="col">Action</th>
+              <th scope="col">Entity</th>
+              <th scope="col">Transition</th>
+              <th scope="col">Actor</th>
+              <th scope="col">Request &amp; details</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((event) => (
+              <tr key={event.id}>
+                <td>
+                  <Timestamp value={event.createdAt} />
+                </td>
+                <td>
+                  <code className={styles.action}>{event.action}</code>
+                </td>
+                <td>
+                  <EntityCell entityType={event.entityType} entityId={event.entityId} filters={filters} />
+                </td>
+                <td>
+                  {event.fromState || event.toState ? (
+                    <span className={styles.transition}>
+                      <span>{event.fromState ?? '∅'}</span>
+                      <span aria-label="to">→</span>
+                      <span>{event.toState ?? '∅'}</span>
+                    </span>
+                  ) : (
+                    <span className={styles.muted}>—</span>
+                  )}
+                </td>
+                <td>
+                  <ActorCell actorUserId={event.actorUserId} actorRole={event.actorRole} filters={filters} />
+                </td>
+                <td>
+                  {event.requestId && (
+                    <span className={styles.id} title="X-Request-Id">
+                      {event.requestId}
+                    </span>
+                  )}
+                  <Metadata metadata={event.metadata} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </AuditResults>
+    </>
+  );
+}
diff --git a/src/features/admin-audit/components/AuditFilterForm.tsx b/src/features/admin-audit/components/AuditFilterForm.tsx
new file mode 100644
index 0000000..1c92918
--- /dev/null
+++ b/src/features/admin-audit/components/AuditFilterForm.tsx
@@ -0,0 +1,85 @@
+import { useId, useState } from 'react';
+import type { FormEvent } from 'react';
+import { Button } from '../../../components/Button';
+import { TextField } from '../../../components/TextField';
+import { checkFilters, FIELD_LABELS } from '../filters';
+import type { AuditTab, FilterDraft, FilterErrors } from '../filters';
+import styles from './AuditLogViewer.module.css';
+
+// Suggestions only — the inputs accept any well-formed value, since
+// docforum-core adds entity types and actions as Phases 3/4 land. Source:
+// docforum-core docs/api/README.md "Audit trail".
+const KNOWN_ENTITY_TYPES = ['Appointment', 'DoctorProfile', 'PaymentIntent'];
+const KNOWN_ACTIONS = [
+  'appointment.booked',
+  'doctor.verification_status_changed',
+  'payment_intent.funded',
+  'payment_intent.released',
+  'payment_intent.refunded',
+];
+
+interface AuditFilterFormProps {
+  tab: AuditTab;
+  /** Values currently in the URL. Remount (via `key`) to resync the draft. */
+  initial: FilterDraft;
+  canClear: boolean;
+  onApply: (filters: FilterDraft) => void;
+  onClear: () => void;
+}
+
+export function AuditFilterForm({ tab, initial, canClear, onApply, onClear }: AuditFilterFormProps) {
+  const [draft, setDraft] = useState<FilterDraft>(initial);
+  const [errors, setErrors] = useState<FilterErrors>({});
+  const entityTypesId = useId();
+  const actionsId = useId();
+
+  const bind = (field: keyof FilterDraft) => ({
+    label: FIELD_LABELS[field],
+    value: draft[field],
+    error: errors[field],
+    onChange: (event: { target: { value: string } }) => setDraft((current) => ({ ...current, [field]: event.target.value })),
+  });
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    const { filters, errors: found } = checkFilters(draft);
+    setErrors(found);
+    if (Object.keys(found).length > 0) return;
+    onApply(filters);
+  };
+
+  return (
+    <form className={styles.filters} onSubmit={handleSubmit} aria-label="Filter audit entries" noValidate>
+      <div className={styles.filterGrid}>
+        <TextField {...bind('entityType')} list={entityTypesId} placeholder="PaymentIntent" autoComplete="off" />
+        <TextField {...bind('entityId')} placeholder="Record id" autoComplete="off" spellCheck={false} />
+        <TextField {...bind('actor')} placeholder="User id" autoComplete="off" spellCheck={false} />
+        {tab === 'events' && (
+          <TextField {...bind('action')} list={actionsId} placeholder="payment_intent" autoComplete="off" />
+        )}
+        <TextField {...bind('from')} type="date" max={draft.to || undefined} />
+        <TextField {...bind('to')} type="date" min={draft.from || undefined} />
+      </div>
+
+      <datalist id={entityTypesId}>
+        {KNOWN_ENTITY_TYPES.map((type) => (
+          <option key={type} value={type} />
+        ))}
+      </datalist>
+      <datalist id={actionsId}>
+        {KNOWN_ACTIONS.map((action) => (
+          <option key={action} value={action} />
+        ))}
+      </datalist>
+
+      <div className={styles.filterActions}>
+        <Button type="submit">Apply filters</Button>
+        {canClear && (
+          <Button type="button" variant="secondary" onClick={onClear}>
+            Clear
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/src/features/admin-audit/components/AuditLogViewer.module.css b/src/features/admin-audit/components/AuditLogViewer.module.css
new file mode 100644
index 0000000..3d68cfb
--- /dev/null
+++ b/src/features/admin-audit/components/AuditLogViewer.module.css
@@ -0,0 +1,345 @@
+/* Audit tables are wide (ids, codes, transitions) — the global .container's
+   640px reading measure is too narrow, so the page sets its own. */
+.page {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+}
+
+.backLink {
+  display: inline-block;
+  margin-bottom: var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-accent);
+}
+
+.viewer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.header h1 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+}
+
+.subtitle {
+  margin: var(--space-2) 0 0;
+  max-width: 62ch;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+/* ---- Tabs ---- */
+
+.tabs {
+  display: flex;
+  gap: var(--space-2);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.tab {
+  padding: var(--space-2) var(--space-4);
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  background: none;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+
+.tab:hover {
+  color: var(--color-text);
+}
+
+.tab:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.tabActive {
+  border-bottom-color: var(--color-accent);
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.tabDescription {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+/* ---- Filters ---- */
+
+.filters {
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.filterGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  column-gap: var(--space-4);
+}
+
+.filterActions {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.notice,
+.hint {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  background: var(--color-warning-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.notice p {
+  margin: 0;
+  font-weight: 600;
+}
+
+.notice ul {
+  margin: var(--space-1) 0 0;
+  padding-left: var(--space-6);
+}
+
+/* ---- Results ---- */
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.resultsBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.resultsSummary {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-8);
+  justify-content: center;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.errorBox {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-surface);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.errorBox p {
+  margin: 0;
+}
+
+.empty {
+  margin: 0;
+  padding: var(--space-8);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  background: var(--color-surface);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+}
+
+.tableWrapper {
+  width: 100%;
+  overflow-x: auto;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  transition: opacity 0.15s ease;
+}
+
+/* Previous page still on screen while the next one loads. */
+.stale {
+  opacity: 0.6;
+}
+
+.table {
+  width: 100%;
+  min-width: 760px;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  text-align: left;
+}
+
+.table th,
+.table td {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: top;
+}
+
+.table th {
+  background: var(--color-surface-alt);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.table tbody tr:hover td {
+  background: var(--color-surface-hover);
+}
+
+.time {
+  white-space: nowrap;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-1);
+}
+
+.entityType {
+  font-weight: 600;
+}
+
+/* Monospace here is for real data: ids and codes admins copy and compare. */
+.id,
+.idLink,
+.action {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+/* UUIDs wrap at their hyphens; break-word only kicks in for ids without any. */
+.id,
+.idLink {
+  overflow-wrap: break-word;
+}
+
+/* Codes are read as one token — never split `payment_intent.released`. */
+.action {
+  white-space: nowrap;
+}
+
+.idLink {
+  color: var(--color-accent);
+}
+
+.inlineAction {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  text-decoration: underline;
+}
+
+.inlineAction:hover {
+  color: var(--color-text);
+}
+
+.rolePill {
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.transition {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  white-space: nowrap;
+}
+
+.muted {
+  color: var(--color-text-faint);
+}
+
+.metadata {
+  margin: var(--space-1) 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: var(--text-xs);
+}
+
+.metadata div {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.metadata dt {
+  color: var(--color-text-muted);
+}
+
+.metadata dt::after {
+  content: ':';
+}
+
+.metadata dd {
+  margin: 0;
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: var(--space-6) var(--space-4) var(--space-8);
+  }
+
+  .filters {
+    padding: var(--space-4);
+  }
+
+  .pager {
+    justify-content: space-between;
+  }
+}
diff --git a/src/features/admin-audit/components/AuditLogViewer.test.tsx b/src/features/admin-audit/components/AuditLogViewer.test.tsx
new file mode 100644
index 0000000..c6200f6
--- /dev/null
+++ b/src/features/admin-audit/components/AuditLogViewer.test.tsx
@@ -0,0 +1,357 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import App from '../../../App';
+import { AuditLogViewer } from './AuditLogViewer';
+import { ApiError } from '../../../services/api-client';
+import * as auditService from '../../../services/audit-service';
+import { useAuthStore } from '../../../store/auth-store';
+import type { AccessLog, AuditEvent, Role } from '../../../types/models';
+
+vi.mock('../../../services/audit-service');
+
+const BOOKED: AuditEvent = {
+  id: 'evt-1',
+  actorUserId: 'user-patient-1',
+  actorRole: 'patient',
+  entityType: 'Appointment',
+  entityId: 'appt-1',
+  action: 'appointment.booked',
+  fromState: null,
+  toState: 'booked',
+  requestId: 'req-abc',
+  metadata: { availabilitySlotId: 'slot-9' },
+  createdAt: '2026-10-18T09:00:00.000Z',
+};
+
+const RELEASED: AuditEvent = {
+  id: 'evt-2',
+  actorUserId: 'user-admin-1',
+  actorRole: 'admin',
+  entityType: 'PaymentIntent',
+  entityId: 'pi-42',
+  action: 'payment_intent.released',
+  fromState: 'escrowed',
+  toState: 'released',
+  requestId: 'req-def',
+  metadata: null,
+  createdAt: '2026-10-17T15:30:00.000Z',
+};
+
+const VIEWED: AccessLog = {
+  id: 'log-1',
+  actorUserId: 'user-doctor-7',
+  actorRole: 'doctor',
+  entityType: 'ConsultationNote',
+  entityId: 'note-3',
+  route: 'GET /consultation-notes/:appointmentId',
+  createdAt: '2026-10-18T10:15:00.000Z',
+};
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="location">{location.pathname + location.search}</output>;
+}
+
+function signIn(role: Role) {
+  useAuthStore.setState({
+    accessToken: 'admin-token',
+    user: { id: `${role}-1`, email: `${role}@docforum.org`, role, createdAt: '', updatedAt: '' },
+  });
+}
+
+function renderViewer(path = '/admin/audit') {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[path]}>
+        <AuditLogViewer />
+        <LocationProbe />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+const currentLocation = () => screen.getByTestId('location').textContent;
+const lastEventsQuery = () => vi.mocked(auditService.listAuditEvents).mock.lastCall?.[0];
+
+beforeEach(() => {
+  signIn('admin');
+  vi.mocked(auditService.listAuditEvents).mockReset();
+  vi.mocked(auditService.listAccessLogs).mockReset();
+  vi.mocked(auditService.listAuditEvents).mockResolvedValue({ items: [BOOKED, RELEASED], nextCursor: null });
+  vi.mocked(auditService.listAccessLogs).mockResolvedValue({ items: [VIEWED], nextCursor: null });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  useAuthStore.getState().clearSession();
+});
+
+describe('AuditLogViewer — URL-synced filters', () => {
+  it('loads the newest page of state-change events by default', async () => {
+    renderViewer();
+
+    expect(await screen.findByText('appointment.booked')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'State changes' })).toHaveAttribute('aria-selected', 'true');
+    expect(lastEventsQuery()).toEqual(expect.objectContaining({ cursor: null, limit: 50 }));
+    expect(vi.mocked(auditService.listAuditEvents).mock.lastCall?.[1]).toBe('admin-token');
+  });
+
+  it('reads filters from the URL, fills the form, and sends them to the API', async () => {
+    renderViewer('/admin/audit?entityType=PaymentIntent&entityId=pi-42&actor=user-admin-1&from=2026-10-01&to=2026-10-18');
+
+    await screen.findByText('payment_intent.released');
+    expect(lastEventsQuery()).toEqual({
+      entityType: 'PaymentIntent',
+      entityId: 'pi-42',
+      actorUserId: 'user-admin-1',
+      from: '2026-10-01',
+      to: '2026-10-18',
+      cursor: null,
+      limit: 50,
+    });
+    expect(screen.getByLabelText('Entity type')).toHaveValue('PaymentIntent');
+    expect(screen.getByLabelText('Entity id')).toHaveValue('pi-42');
+    expect(screen.getByLabelText('Actor user id')).toHaveValue('user-admin-1');
+    expect(screen.getByLabelText('From')).toHaveValue('2026-10-01');
+    expect(screen.getByLabelText('To')).toHaveValue('2026-10-18');
+  });
+
+  it('writes applied filters to the URL and resets to the first page', async () => {
+    const user = userEvent.setup();
+    renderViewer('/admin/audit?cursor=abc123');
+    await screen.findByText('appointment.booked');
+
+    await user.type(screen.getByLabelText('Entity type'), 'Appointment');
+    await user.type(screen.getByLabelText('Entity id'), 'appt-1');
+    await user.type(screen.getByLabelText('Actor user id'), 'user-patient-1');
+    await user.click(screen.getByRole('button', { name: 'Apply filters' }));
+
+    await waitFor(() =>
+      expect(currentLocation()).toBe('/admin/audit?entityType=Appointment&entityId=appt-1&actor=user-patient-1'),
+    );
+    await waitFor(() =>
+      expect(lastEventsQuery()).toEqual(
+        expect.objectContaining({ entityType: 'Appointment', entityId: 'appt-1', actorUserId: 'user-patient-1', cursor: null }),
+      ),
+    );
+  });
+
+  it('blocks an entity id without an entity type instead of sending a request the API rejects', async () => {
+    const user = userEvent.setup();
+    renderViewer();
+    await screen.findByText('appointment.booked');
+    const callsBefore = vi.mocked(auditService.listAuditEvents).mock.calls.length;
+
+    await user.type(screen.getByLabelText('Entity id'), 'appt-1');
+    await user.click(screen.getByRole('button', { name: 'Apply filters' }));
+
+    expect(await screen.findByText('Choose an entity type to filter by entity id.')).toBeInTheDocument();
+    expect(currentLocation()).toBe('/admin/audit');
+    expect(vi.mocked(auditService.listAuditEvents).mock.calls.length).toBe(callsBefore);
+  });
+
+  it('reports and ignores invalid filters from a hand-edited link', async () => {
+    renderViewer('/admin/audit?entityType=%3Cscript%3E&from=2026-13-40');
+
+    await screen.findByText('appointment.booked');
+    const notice = screen.getByText(/Some filters in this link were ignored/).closest('div')!;
+    expect(within(notice).getAllByRole('listitem')).toHaveLength(2);
+    expect(lastEventsQuery()).toEqual(expect.objectContaining({ entityType: undefined, from: undefined }));
+  });
+
+  it('clears filters back to an empty query string', async () => {
+    const user = userEvent.setup();
+    renderViewer('/admin/audit?actor=user-admin-1');
+    await screen.findByText('appointment.booked');
+
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+
+    await waitFor(() => expect(currentLocation()).toBe('/admin/audit'));
+  });
+});
+
+describe('AuditLogViewer — cursor pagination', () => {
+  it('pages older via nextCursor and back to newer, keeping the cursor in the URL', async () => {
+    const user = userEvent.setup();
+    vi.mocked(auditService.listAuditEvents).mockImplementation(async (query) =>
+      query.cursor === 'page-2'
+        ? { items: [RELEASED], nextCursor: null }
+        : { items: [BOOKED], nextCursor: 'page-2' },
+    );
+    renderViewer('/admin/audit?actor=user-admin-1');
+
+    await screen.findByText('appointment.booked');
+    expect(screen.getByRole('button', { name: '← Newer' })).toBeDisabled();
+
+    await user.click(screen.getByRole('button', { name: 'Older →' }));
+    await screen.findByText('payment_intent.released');
+    expect(currentLocation()).toBe('/admin/audit?actor=user-admin-1&cursor=page-2');
+    expect(lastEventsQuery()).toEqual(expect.objectContaining({ actorUserId: 'user-admin-1', cursor: 'page-2' }));
+    expect(screen.getByText(/page 2/)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Older →' })).toBeDisabled();
+
+    await user.click(screen.getByRole('button', { name: '← Newer' }));
+    await screen.findByText('appointment.booked');
+    expect(currentLocation()).toBe('/admin/audit?actor=user-admin-1');
+  });
+
+  it('offers a way back to the newest page from a stale cursor link', async () => {
+    const user = userEvent.setup();
+    vi.mocked(auditService.listAuditEvents).mockImplementation(async (query) => {
+      if (query.cursor) throw new ApiError('INVALID_CURSOR', 400, { message: 'INVALID_CURSOR' });
+      return { items: [BOOKED], nextCursor: null };
+    });
+    renderViewer('/admin/audit?cursor=expired');
+
+    expect(await screen.findByText('This page position is no longer valid.')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Back to newest' }));
+
+    await screen.findByText('appointment.booked');
+    expect(currentLocation()).toBe('/admin/audit');
+  });
+});
+
+describe('AuditLogViewer — tabs', () => {
+  it('switches to access logs, carrying entity filters over and dropping the action filter', async () => {
+    const user = userEvent.setup();
+    renderViewer('/admin/audit?entityType=ConsultationNote&entityId=note-3&action=booked&cursor=abc');
+    await screen.findByText(/Action is matched within each loaded page/);
+
+    await user.click(screen.getByRole('tab', { name: 'Record access' }));
+
+    expect(await screen.findByText('GET /consultation-notes/:appointmentId')).toBeInTheDocument();
+    expect(currentLocation()).toBe('/admin/audit?tab=access&entityType=ConsultationNote&entityId=note-3');
+    expect(vi.mocked(auditService.listAccessLogs).mock.lastCall?.[0]).toEqual(
+      expect.objectContaining({ entityType: 'ConsultationNote', entityId: 'note-3', cursor: null }),
+    );
+    expect(screen.queryByLabelText('Action')).not.toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Record access' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('supports arrow-key navigation between tabs', async () => {
+    const user = userEvent.setup();
+    renderViewer();
+    await screen.findByText('appointment.booked');
+
+    screen.getByRole('tab', { name: 'State changes' }).focus();
+    await user.keyboard('{ArrowRight}');
+
+    await waitFor(() => expect(currentLocation()).toBe('/admin/audit?tab=access'));
+    expect(screen.getByRole('tab', { name: 'Record access' })).toHaveFocus();
+  });
+
+  it("explains when docforum-core doesn't serve access logs yet", async () => {
+    vi.mocked(auditService.listAccessLogs).mockRejectedValue(new ApiError('Not Found', 404));
+    renderViewer('/admin/audit?tab=access');
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(/doesn't serve access logs yet/);
+  });
+});
+
+describe('AuditLogViewer — rows', () => {
+  it('filters actions within the loaded page and says so', async () => {
+    renderViewer('/admin/audit?action=released');
+
+    await screen.findByText('payment_intent.released');
+    expect(screen.queryByText('appointment.booked')).not.toBeInTheDocument();
+    expect(screen.getByText(/1 of 2 audit events on this page match the action filter/)).toBeInTheDocument();
+    expect(lastEventsQuery()).not.toHaveProperty('action');
+  });
+
+  it('links entities to their record view where one exists, and offers an entity history filter', async () => {
+    renderViewer();
+    await screen.findByText('appointment.booked');
+
+    expect(screen.getByRole('link', { name: 'pi-42' })).toHaveAttribute('href', '/admin?intent=pi-42');
+    // Appointments have no admin-facing view, so the id is plain text.
+    expect(screen.queryByRole('link', { name: 'appt-1' })).not.toBeInTheDocument();
+    expect(screen.getByText('appt-1')).toBeInTheDocument();
+
+    const historyLinks = screen.getAllByRole('link', { name: 'Entity history' });
+    expect(historyLinks[0]).toHaveAttribute('href', '/admin/audit?entityType=Appointment&entityId=appt-1');
+  });
+
+  it('narrows to an actor when their id is clicked', async () => {
+    const user = userEvent.setup();
+    renderViewer();
+    await screen.findByText('appointment.booked');
+
+    await user.click(screen.getByRole('link', { name: 'user-admin-1' }));
+
+    await waitFor(() => expect(currentLocation()).toBe('/admin/audit?actor=user-admin-1'));
+    expect(screen.getByLabelText('Actor user id')).toHaveValue('user-admin-1');
+  });
+
+  it('shows an empty state when nothing matches', async () => {
+    vi.mocked(auditService.listAuditEvents).mockResolvedValue({ items: [], nextCursor: null });
+    renderViewer('/admin/audit?actor=nobody');
+
+    expect(await screen.findByText('No audit events match these filters.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Export page as CSV' })).toBeDisabled();
+  });
+
+  it('exports exactly the rows on screen as CSV', async () => {
+    const user = userEvent.setup();
+    let exported: Blob | undefined;
+    vi.spyOn(URL, 'createObjectURL').mockImplementation((blob) => {
+      exported = blob as Blob;
+      return 'blob:audit';
+    });
+    vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+    renderViewer('/admin/audit?action=released');
+    await screen.findByText('payment_intent.released');
+
+    await user.click(screen.getByRole('button', { name: 'Export page as CSV' }));
+
+    const text = (await exported!.text()).replace(/^/, '');
+    const lines = text.trim().split('\r\n');
+    expect(lines[0]).toBe('createdAt,action,entityType,entityId,fromState,toState,actorUserId,actorRole,requestId,metadata,id');
+    expect(lines).toHaveLength(2);
+    expect(lines[1]).toContain('payment_intent.released,PaymentIntent,pi-42,escrowed,released');
+    expect(vi.mocked(auditService.listAuditEvents)).toHaveBeenCalledTimes(1);
+  });
+
+  it('never writes audit rows to the console', async () => {
+    const spies = (['log', 'info', 'debug', 'warn', 'error'] as const).map((method) =>
+      vi.spyOn(console, method).mockImplementation(() => {}),
+    );
+    renderViewer();
+    await screen.findByText('appointment.booked');
+
+    for (const spy of spies) expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('/admin/audit route', () => {
+  function renderApp() {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={['/admin/audit']}>
+          <App />
+          <LocationProbe />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  }
+
+  it('is reachable by admins', async () => {
+    renderApp();
+    expect(await screen.findByRole('heading', { name: 'Audit trail' })).toBeInTheDocument();
+  });
+
+  // RequireAuth sends them to `/`, which forwards signed-in users to their own dashboard.
+  it.each<Role>(['patient', 'doctor', 'facility'])('redirects a %s away without fetching anything', async (role) => {
+    signIn(role);
+    renderApp();
+
+    await waitFor(() => expect(currentLocation()).toBe(`/${role}`));
+    expect(screen.queryByRole('heading', { name: 'Audit trail' })).not.toBeInTheDocument();
+    expect(auditService.listAuditEvents).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/features/admin-audit/components/AuditLogViewer.tsx b/src/features/admin-audit/components/AuditLogViewer.tsx
new file mode 100644
index 0000000..7d1e9e0
--- /dev/null
+++ b/src/features/admin-audit/components/AuditLogViewer.tsx
@@ -0,0 +1,124 @@
+import { useId, useRef } from 'react';
+import type { KeyboardEvent } from 'react';
+import { useAuditFilters } from '../hooks/useAuditFilters';
+import { hasActiveFilters } from '../filters';
+import { AuditFilterForm } from './AuditFilterForm';
+import { AuditEventsPanel } from './AuditEventsPanel';
+import { AccessLogsPanel } from './AccessLogsPanel';
+import type { AuditTab } from '../filters';
+import styles from './AuditLogViewer.module.css';
+
+const TABS: { id: AuditTab; label: string; description: string }[] = [
+  {
+    id: 'events',
+    label: 'State changes',
+    description: 'Who booked, verified, funded or released what — every attributable transition (PRD §7).',
+  },
+  {
+    id: 'access',
+    label: 'Record access',
+    description: 'Who viewed which clinical record, and through which route.',
+  },
+];
+
+/**
+ * Admin audit console. All state — tab, filters and page position — lives in
+ * the URL (see `useAuditFilters`), and only one server page is ever held.
+ * Rows are rendered, never logged: nothing here writes to the console.
+ */
+export function AuditLogViewer() {
+  const { filters, issues, pageNumber, applyFilters, clearFilters, selectTab, goOlder, goNewer, goNewest } =
+    useAuditFilters();
+  const baseId = useId();
+  const tabRefs = useRef<Record<AuditTab, HTMLButtonElement | null>>({ events: null, access: null });
+
+  // Arrow-key roving focus, per the WAI-ARIA tabs pattern.
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+    event.preventDefault();
+    const index = TABS.findIndex((tab) => tab.id === filters.tab);
+    const next = TABS[(index + (event.key === 'ArrowRight' ? 1 : TABS.length - 1)) % TABS.length].id;
+    selectTab(next);
+    tabRefs.current[next]?.focus();
+  };
+
+  const activeTab = TABS.find((tab) => tab.id === filters.tab) ?? TABS[0];
+  const draft = {
+    entityType: filters.entityType,
+    entityId: filters.entityId,
+    actor: filters.actor,
+    action: filters.action,
+    from: filters.from,
+    to: filters.to,
+  };
+  const panelProps = { filters, pageNumber, onOlder: goOlder, onNewer: goNewer, onNewest: goNewest };
+
+  return (
+    <section className={styles.viewer} aria-labelledby={`${baseId}-title`}>
+      <header className={styles.header}>
+        <h1 id={`${baseId}-title`}>Audit trail</h1>
+        <p className={styles.subtitle}>
+          Read-only view of docforum-core's append-only audit records. Filters are kept in the address bar, so any
+          view can be bookmarked or shared with another admin.
+        </p>
+      </header>
+
+      <div role="tablist" aria-label="Audit record type" className={styles.tabs}>
+        {TABS.map((tab) => {
+          const selected = tab.id === filters.tab;
+          return (
+            <button
+              key={tab.id}
+              ref={(node) => {
+                tabRefs.current[tab.id] = node;
+              }}
+              type="button"
+              role="tab"
+              id={`${baseId}-tab-${tab.id}`}
+              aria-selected={selected}
+              aria-controls={`${baseId}-panel`}
+              tabIndex={selected ? 0 : -1}
+              className={`${styles.tab} ${selected ? styles.tabActive : ''}`}
+              onClick={() => selectTab(tab.id)}
+              onKeyDown={handleTabKeyDown}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div
+        role="tabpanel"
+        id={`${baseId}-panel`}
+        aria-labelledby={`${baseId}-tab-${activeTab.id}`}
+        className={styles.panel}
+      >
+        <p className={styles.tabDescription}>{activeTab.description}</p>
+
+        {issues.length > 0 && (
+          <div className={styles.notice} role="status">
+            <p>Some filters in this link were ignored:</p>
+            <ul>
+              {issues.map((issue) => (
+                <li key={issue}>{issue}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <AuditFilterForm
+          // Remount on any URL change so the inputs always show what's applied.
+          key={`${filters.tab}|${Object.values(draft).join('|')}`}
+          tab={filters.tab}
+          initial={draft}
+          canClear={hasActiveFilters(filters)}
+          onApply={applyFilters}
+          onClear={clearFilters}
+        />
+
+        {filters.tab === 'events' ? <AuditEventsPanel {...panelProps} /> : <AccessLogsPanel {...panelProps} />}
+      </div>
+    </section>
+  );
+}
diff --git a/src/features/admin-audit/components/AuditResults.tsx b/src/features/admin-audit/components/AuditResults.tsx
new file mode 100644
index 0000000..a417d5d
--- /dev/null
+++ b/src/features/admin-audit/components/AuditResults.tsx
@@ -0,0 +1,225 @@
+import type { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '../../../components/Button';
+import { Spinner } from '../../../components/Spinner';
+import { ApiError } from '../../../services/api-client';
+import { entityRecordPath } from '../entity-links';
+import { toAuditSearch } from '../filters';
+import type { AuditFilters, AuditTab } from '../filters';
+import type { Role } from '../../../types/models';
+import styles from './AuditLogViewer.module.css';
+
+// One page per request, always. The backend caps `limit` at 200; 50 keeps
+// the table scannable and the CSV export small.
+export const PAGE_SIZE = 50;
+
+export interface AuditPanelProps {
+  filters: AuditFilters;
+  pageNumber: number | null;
+  onOlder: (cursor: string) => void;
+  onNewer: () => void;
+  onNewest: () => void;
+}
+
+/** Search string that narrows the current view, starting from the newest entry. */
+function narrowedSearch(filters: AuditFilters, patch: Partial<AuditFilters>): string {
+  return `?${toAuditSearch({ ...filters, ...patch, cursor: null }).toString()}`;
+}
+
+export function Timestamp({ value }: { value: string }) {
+  const date = new Date(value);
+  const label = Number.isNaN(date.getTime())
+    ? value
+    : date.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'medium' });
+  return (
+    <time dateTime={value} title={value} className={styles.time}>
+      {label}
+    </time>
+  );
+}
+
+interface ActorCellProps {
+  actorUserId: string | null;
+  actorRole: Role | null;
+  filters: AuditFilters;
+}
+
+export function ActorCell({ actorUserId, actorRole, filters }: ActorCellProps) {
+  if (!actorUserId) return <span className={styles.muted}>System</span>;
+  return (
+    <div className={styles.stack}>
+      {actorRole && <span className={styles.rolePill}>{actorRole}</span>}
+      <Link
+        to={{ search: narrowedSearch(filters, { actor: actorUserId }) }}
+        className={styles.idLink}
+        title="Show only this actor's entries"
+      >
+        {actorUserId}
+      </Link>
+    </div>
+  );
+}
+
+interface EntityCellProps {
+  entityType: string;
+  entityId: string;
+  filters: AuditFilters;
+}
+
+export function EntityCell({ entityType, entityId, filters }: EntityCellProps) {
+  const recordPath = entityRecordPath(entityType, entityId);
+  return (
+    <div className={styles.stack}>
+      <span className={styles.entityType}>{entityType}</span>
+      {recordPath ? (
+        <Link to={recordPath} className={styles.idLink} title={`Open this ${entityType}`}>
+          {entityId}
+        </Link>
+      ) : (
+        <span className={styles.id}>{entityId}</span>
+      )}
+      <Link to={{ search: narrowedSearch(filters, { entityType, entityId }) }} className={styles.inlineAction}>
+        Entity history
+      </Link>
+    </div>
+  );
+}
+
+const NOUNS: Record<AuditTab, string> = {
+  events: 'audit events',
+  access: 'access logs',
+};
+
+function isInvalidCursor(error: ApiError): boolean {
+  const code = (error.body as { code?: unknown } | undefined)?.code;
+  return code === 'INVALID_CURSOR' || error.message.includes('INVALID_CURSOR');
+}
+
+/** Turns a failed listing into something an admin can act on. Server
+ * messages are only surfaced for 400s, where they describe the filter. */
+export function describeAuditError(error: unknown, tab: AuditTab): { message: string; staleCursor: boolean } {
+  if (error instanceof ApiError) {
+    if (error.status === 400 && isInvalidCursor(error)) {
+      return { message: 'This page position is no longer valid.', staleCursor: true };
+    }
+    if (error.status === 400) {
+      return { message: `docforum-core rejected these filters: ${error.message}`, staleCursor: false };
+    }
+    if (error.status === 401 || error.status === 403) {
+      return { message: 'Your session no longer has admin access. Sign in again with an admin account.', staleCursor: false };
+    }
+    if (error.status === 404 && tab === 'access') {
+      return {
+        message: "docforum-core doesn't serve access logs yet (docforum-core#45). State-change events are available.",
+        staleCursor: false,
+      };
+    }
+  }
+  return {
+    message: `Couldn't load ${NOUNS[tab]}. The preview backend may be waking up — try again in a minute.`,
+    staleCursor: false,
+  };
+}
+
+interface AuditResultsProps {
+  tab: AuditTab;
+  isLoading: boolean;
+  isFetching: boolean;
+  isPlaceholderData: boolean;
+  error: unknown;
+  onRetry: () => void;
+  /** Rows on the page as returned by the server. */
+  pageCount: number;
+  /** Rows left after client-side filtering. */
+  visibleCount: number;
+  nextCursor: string | null;
+  pageNumber: number | null;
+  hasNewer: boolean;
+  onOlder: (cursor: string) => void;
+  onNewer: () => void;
+  onNewest: () => void;
+  onExport: () => void;
+  emptyMessage: string;
+  children: ReactNode;
+}
+
+export function AuditResults(props: AuditResultsProps) {
+  const { tab, isLoading, isFetching, isPlaceholderData, error, pageCount, visibleCount, nextCursor } = props;
+
+  if (isLoading) {
+    return (
+      <div className={styles.status} role="status">
+        <Spinner size={20} />
+        <span>Loading {NOUNS[tab]}…</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    const { message, staleCursor } = describeAuditError(error, tab);
+    return (
+      <div className={styles.errorBox} role="alert">
+        <p>{message}</p>
+        {staleCursor ? (
+          <Button variant="secondary" onClick={props.onNewest}>
+            Back to newest
+          </Button>
+        ) : (
+          <Button variant="secondary" onClick={props.onRetry}>
+            Try again
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  const filteredOut = pageCount - visibleCount;
+
+  return (
+    <div className={styles.results} aria-busy={isFetching}>
+      <div className={styles.resultsBar}>
+        <p className={styles.resultsSummary} aria-live="polite">
+          {pageCount === 0
+            ? `No ${NOUNS[tab]} on this page`
+            : filteredOut > 0
+              ? `${visibleCount} of ${pageCount} ${NOUNS[tab]} on this page match the action filter`
+              : `${pageCount} ${NOUNS[tab]} on this page`}
+          {props.pageNumber !== null && ` · page ${props.pageNumber}`}
+          {isFetching && ' · updating…'}
+        </p>
+        <Button
+          variant="secondary"
+          onClick={props.onExport}
+          disabled={visibleCount === 0 || isPlaceholderData}
+          title="Downloads only the rows shown on this page"
+        >
+          Export page as CSV
+        </Button>
+      </div>
+
+      {visibleCount === 0 ? (
+        <p className={styles.empty}>{props.emptyMessage}</p>
+      ) : (
+        <div className={`${styles.tableWrapper} ${isPlaceholderData ? styles.stale : ''}`}>{props.children}</div>
+      )}
+
+      <nav className={styles.pager} aria-label={`${NOUNS[tab]} pages`}>
+        <Button variant="secondary" onClick={props.onNewer} disabled={!props.hasNewer || isFetching}>
+          ← Newer
+        </Button>
+        {props.hasNewer && props.pageNumber === null && (
+          <Button variant="secondary" onClick={props.onNewest} disabled={isFetching}>
+            Newest
+          </Button>
+        )}
+        <Button
+          variant="secondary"
+          onClick={() => nextCursor && props.onOlder(nextCursor)}
+          disabled={!nextCursor || isFetching}
+        >
+          Older →
+        </Button>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/features/admin-audit/csv.test.ts b/src/features/admin-audit/csv.test.ts
new file mode 100644
index 0000000..77e8782
--- /dev/null
+++ b/src/features/admin-audit/csv.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { csvFilename, escapeCsvCell, toCsv } from './csv';
+import { entityRecordPath } from './entity-links';
+
+describe('audit CSV export', () => {
+  it('leaves plain values alone and blanks null/undefined', () => {
+    expect(escapeCsvCell('appointment.booked')).toBe('appointment.booked');
+    expect(escapeCsvCell(42)).toBe('42');
+    expect(escapeCsvCell(null)).toBe('');
+    expect(escapeCsvCell(undefined)).toBe('');
+  });
+
+  it('quotes cells containing commas, quotes, newlines or edge whitespace', () => {
+    expect(escapeCsvCell('a,b')).toBe('"a,b"');
+    expect(escapeCsvCell('say "hi"')).toBe('"say ""hi"""');
+    expect(escapeCsvCell('line\nbreak')).toBe('"line\nbreak"');
+    expect(escapeCsvCell(' padded')).toBe('" padded"');
+  });
+
+  it('neutralises spreadsheet formulas (CSV injection)', () => {
+    expect(escapeCsvCell('=HYPERLINK("http://evil")')).toBe('"\'=HYPERLINK(""http://evil"")"');
+    expect(escapeCsvCell('+1')).toBe("'+1");
+    expect(escapeCsvCell('-1')).toBe("'-1");
+    expect(escapeCsvCell('@SUM(A1)')).toBe("'@SUM(A1)");
+  });
+
+  it('writes a header row and CRLF-terminated rows', () => {
+    const csv = toCsv(
+      [
+        { header: 'id', value: (row: { id: string; note: string | null }) => row.id },
+        { header: 'note', value: (row) => row.note },
+      ],
+      [
+        { id: 'e1', note: 'x,y' },
+        { id: 'e2', note: null },
+      ],
+    );
+    expect(csv).toBe('id,note\r\ne1,"x,y"\r\ne2,\r\n');
+  });
+
+  it('writes only the header for an empty page', () => {
+    expect(toCsv([{ header: 'id', value: (row: { id: string }) => row.id }], [])).toBe('id\r\n');
+  });
+
+  it('builds a filesystem-safe timestamped filename', () => {
+    expect(csvFilename('docforum-audit-events', new Date('2026-10-18T09:30:05.123Z'))).toBe(
+      'docforum-audit-events-2026-10-18T09-30-05Z.csv',
+    );
+  });
+});
+
+describe('audit entity links', () => {
+  it('links payment intents to the admin payments console', () => {
+    expect(entityRecordPath('PaymentIntent', 'pi 1')).toBe('/admin?intent=pi%201');
+  });
+
+  it('returns null for types with no admin view, including prototype keys', () => {
+    expect(entityRecordPath('Appointment', 'a1')).toBeNull();
+    expect(entityRecordPath('constructor', 'a1')).toBeNull();
+    expect(entityRecordPath('__proto__', 'a1')).toBeNull();
+  });
+});
diff --git a/src/features/admin-audit/csv.ts b/src/features/admin-audit/csv.ts
new file mode 100644
index 0000000..d4a8ee8
--- /dev/null
+++ b/src/features/admin-audit/csv.ts
@@ -0,0 +1,50 @@
+// Client-side CSV export of whatever page the admin is looking at. Never
+// fetches more data — the export is exactly the rows already on screen.
+
+export interface CsvColumn<T> {
+  header: string;
+  value: (row: T) => string | number | null | undefined;
+}
+
+// Spreadsheet apps evaluate cells starting with these as formulas. Audit
+// rows carry server data (ids, codes, routes), but an entity id or route
+// is still not ours to trust once it lands in Excel (CSV injection).
+const FORMULA_PREFIX = /^[=+\-@\t\r]/;
+
+export function escapeCsvCell(value: string | number | null | undefined): string {
+  if (value === null || value === undefined) return '';
+  let text = String(value);
+  if (FORMULA_PREFIX.test(text)) text = `'${text}`;
+  if (/[",\r\n]/.test(text) || text !== text.trim()) {
+    text = `"${text.replace(/"/g, '""')}"`;
+  }
+  return text;
+}
+
+/** RFC 4180-style CSV: CRLF line endings, quoted only where needed. */
+export function toCsv<T>(columns: CsvColumn<T>[], rows: T[]): string {
+  const lines = [columns.map((column) => escapeCsvCell(column.header)).join(',')];
+  for (const row of rows) {
+    lines.push(columns.map((column) => escapeCsvCell(column.value(row))).join(','));
+  }
+  return lines.join('\r\n') + '\r\n';
+}
+
+/** Timestamped, filesystem-safe name, e.g. `docforum-audit-events-2026-10-18T09-30-00Z.csv`. */
+export function csvFilename(prefix: string, now: Date = new Date()): string {
+  const stamp = now.toISOString().replace(/\.\d{3}Z$/, 'Z').replace(/:/g, '-');
+  return `${prefix}-${stamp}.csv`;
+}
+
+export function downloadCsv(filename: string, csv: string): void {
+  // The BOM makes Excel read the file as UTF-8 instead of the system codepage.
+  const blob = new Blob(['', csv], { type: 'text/csv;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
diff --git a/src/features/admin-audit/entity-links.ts b/src/features/admin-audit/entity-links.ts
new file mode 100644
index 0000000..948b52f
--- /dev/null
+++ b/src/features/admin-audit/entity-links.ts
@@ -0,0 +1,14 @@
+// Where an audited entity can be opened in this app, by docforum-core
+// entity type. Only types with a view an admin can actually reach are
+// listed — appointments and doctor profiles have no admin-facing screen yet
+// (the consultation view is doctor-only), so they render as plain ids.
+const RECORD_VIEWS: Record<string, (entityId: string) => string> = {
+  PaymentIntent: (entityId) => `/admin?intent=${encodeURIComponent(entityId)}`,
+};
+
+export function entityRecordPath(entityType: string, entityId: string): string | null {
+  // hasOwn, not `in`: an entity type of "constructor" must not resolve to
+  // Object.prototype.constructor.
+  if (!Object.hasOwn(RECORD_VIEWS, entityType)) return null;
+  return RECORD_VIEWS[entityType](entityId);
+}
diff --git a/src/features/admin-audit/filters.test.ts b/src/features/admin-audit/filters.test.ts
new file mode 100644
index 0000000..87a7074
--- /dev/null
+++ b/src/features/admin-audit/filters.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+import {
+  EMPTY_FILTERS,
+  checkFilters,
+  hasActiveFilters,
+  matchesAction,
+  parseAuditSearch,
+  toAuditQuery,
+  toAuditSearch,
+} from './filters';
+import type { AuditFilters } from './filters';
+
+const FULL: AuditFilters = {
+  tab: 'events',
+  entityType: 'PaymentIntent',
+  entityId: '7b1c9a52-3f0e-4c1a-9d55-2f6c8e0a1b11',
+  actor: 'a4e0f3d2-1111-4c1a-9d55-2f6c8e0a1b11',
+  action: 'payment_intent.released',
+  from: '2026-10-01',
+  to: '2026-10-18',
+  cursor: 'eyJjcmVhdGVkQXQiOiIyMDI2LTEwLTE4In0=',
+};
+
+const draftOf = ({ entityType, entityId, actor, action, from, to }: AuditFilters) => ({
+  entityType,
+  entityId,
+  actor,
+  action,
+  from,
+  to,
+});
+
+describe('audit URL filters', () => {
+  it('round-trips every filter through the query string', () => {
+    const search = toAuditSearch(FULL);
+    expect(parseAuditSearch(new URLSearchParams(search.toString()))).toEqual({ filters: FULL, issues: [] });
+  });
+
+  it('round-trips the access tab, dropping the events-only action filter', () => {
+    const access = { ...FULL, tab: 'access' as const };
+    const search = toAuditSearch(access);
+    expect(search.get('tab')).toBe('access');
+    expect(search.has('action')).toBe(false);
+    expect(parseAuditSearch(search).filters).toEqual({ ...access, action: '' });
+  });
+
+  it('omits defaults so an unfiltered view has an empty query string', () => {
+    expect(toAuditSearch(EMPTY_FILTERS).toString()).toBe('');
+    expect(parseAuditSearch(new URLSearchParams()).filters).toEqual(EMPTY_FILTERS);
+  });
+
+  it('trims values read from the URL', () => {
+    const { filters } = parseAuditSearch(new URLSearchParams('entityType=%20Appointment%20&actor=%20u-1'));
+    expect(filters.entityType).toBe('Appointment');
+    expect(filters.actor).toBe('u-1');
+  });
+
+  it('drops and reports values that are not ids or codes', () => {
+    const { filters, issues } = parseAuditSearch(
+      new URLSearchParams({ entityType: '<script>', actor: 'x'.repeat(200), tab: 'nope' }),
+    );
+    expect(filters.entityType).toBe('');
+    expect(filters.actor).toBe('');
+    expect(filters.tab).toBe('events');
+    expect(issues).toHaveLength(3);
+  });
+
+  it('drops an entity id that has no entity type, as the backend would reject it', () => {
+    const { filters, issues } = parseAuditSearch(new URLSearchParams('entityId=abc'));
+    expect(filters.entityId).toBe('');
+    expect(issues).toEqual(['Entity id: Choose an entity type to filter by entity id.']);
+  });
+
+  it('rejects impossible dates and an inverted range', () => {
+    expect(checkFilters({ ...draftOf(EMPTY_FILTERS), from: '2026-02-30' }).errors.from).toMatch(/valid date/);
+    expect(checkFilters({ ...draftOf(EMPTY_FILTERS), to: '18/10/2026' }).errors.to).toMatch(/valid date/);
+    const inverted = checkFilters({ ...draftOf(EMPTY_FILTERS), from: '2026-10-18', to: '2026-10-01' });
+    expect(inverted.errors.to).toMatch(/on or after/);
+    expect(inverted.filters.from).toBe('2026-10-18');
+    expect(inverted.filters.to).toBe('');
+  });
+
+  it('accepts a single-day range', () => {
+    expect(checkFilters({ ...draftOf(EMPTY_FILTERS), from: '2026-10-18', to: '2026-10-18' }).errors).toEqual({});
+  });
+
+  it('ignores a malformed cursor instead of sending it', () => {
+    const { filters, issues } = parseAuditSearch(new URLSearchParams('cursor=not a cursor'));
+    expect(filters.cursor).toBeNull();
+    expect(issues[0]).toMatch(/page position/);
+  });
+
+  it('builds the server query without the client-side action filter', () => {
+    expect(toAuditQuery(FULL, 50)).toEqual({
+      entityType: 'PaymentIntent',
+      entityId: FULL.entityId,
+      actorUserId: FULL.actor,
+      from: '2026-10-01',
+      to: '2026-10-18',
+      cursor: FULL.cursor,
+      limit: 50,
+    });
+    expect(toAuditQuery(EMPTY_FILTERS, 50)).toEqual({
+      entityType: undefined,
+      entityId: undefined,
+      actorUserId: undefined,
+      from: undefined,
+      to: undefined,
+      cursor: null,
+      limit: 50,
+    });
+  });
+
+  it('matches actions case-insensitively by substring', () => {
+    expect(matchesAction('payment_intent.released', 'PAYMENT_INTENT')).toBe(true);
+    expect(matchesAction('payment_intent.released', 'released')).toBe(true);
+    expect(matchesAction('appointment.booked', 'released')).toBe(false);
+    expect(matchesAction('appointment.booked', '')).toBe(true);
+  });
+
+  it('treats only real filters, not tab or cursor, as active', () => {
+    expect(hasActiveFilters({ ...EMPTY_FILTERS, tab: 'access', cursor: 'abc' })).toBe(false);
+    expect(hasActiveFilters({ ...EMPTY_FILTERS, from: '2026-10-01' })).toBe(true);
+  });
+});
diff --git a/src/features/admin-audit/filters.ts b/src/features/admin-audit/filters.ts
new file mode 100644
index 0000000..85dfdb7
--- /dev/null
+++ b/src/features/admin-audit/filters.ts
@@ -0,0 +1,210 @@
+import type { AuditQuery } from '../../services/audit-service';
+
+// The audit viewer's whole filter state lives in the URL query string, so a
+// filtered view can be bookmarked, shared with another admin, or restored
+// on reload. Everything read from the URL is untrusted input: values are
+// trimmed, length-capped and shape-checked here before any of them reach
+// an API call.
+
+export type AuditTab = 'events' | 'access';
+
+export interface AuditFilters {
+  tab: AuditTab;
+  entityType: string;
+  entityId: string;
+  actor: string;
+  /** Events tab only. Matched client-side — see `matchesAction`. */
+  action: string;
+  /** YYYY-MM-DD, inclusive. */
+  from: string;
+  /** YYYY-MM-DD, inclusive. */
+  to: string;
+  cursor: string | null;
+}
+
+export type FilterField = 'entityType' | 'entityId' | 'actor' | 'action' | 'from' | 'to';
+
+export type FilterDraft = Pick<AuditFilters, FilterField>;
+
+export type FilterErrors = Partial<Record<FilterField | 'cursor' | 'tab', string>>;
+
+export const EMPTY_FILTERS: AuditFilters = {
+  tab: 'events',
+  entityType: '',
+  entityId: '',
+  actor: '',
+  action: '',
+  from: '',
+  to: '',
+  cursor: null,
+};
+
+// URL keys. `actor` rather than `actorUserId` keeps shared links readable.
+const PARAM = {
+  tab: 'tab',
+  entityType: 'entityType',
+  entityId: 'entityId',
+  actor: 'actor',
+  action: 'action',
+  from: 'from',
+  to: 'to',
+  cursor: 'cursor',
+} as const;
+
+const MAX_VALUE_LENGTH = 128;
+const MAX_CURSOR_LENGTH = 512;
+
+// Entity types are model names (`PaymentIntent`), ids are UUIDs, actions
+// are dotted codes (`payment_intent.released`). One conservative charset
+// covers all three without letting arbitrary text through.
+const TOKEN_PATTERN = /^[A-Za-z0-9._:-]+$/;
+// Cursors are opaque to us, but in practice base64/base64url.
+const CURSOR_PATTERN = /^[A-Za-z0-9._~:+/=-]+$/;
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+export const FIELD_LABELS: Record<FilterField, string> = {
+  entityType: 'Entity type',
+  entityId: 'Entity id',
+  actor: 'Actor user id',
+  action: 'Action',
+  from: 'From',
+  to: 'To',
+};
+
+function checkToken(value: string): string | null {
+  if (value.length > MAX_VALUE_LENGTH) return `Must be ${MAX_VALUE_LENGTH} characters or fewer.`;
+  if (!TOKEN_PATTERN.test(value)) return 'Only letters, numbers and . _ : - are allowed.';
+  return null;
+}
+
+/** Real calendar date check — `2026-02-30` matches the pattern but isn't a day. */
+function isCalendarDate(value: string): boolean {
+  if (!DATE_PATTERN.test(value)) return false;
+  const parsed = new Date(`${value}T00:00:00Z`);
+  return !Number.isNaN(parsed.getTime()) && parsed.toISOString().slice(0, 10) === value;
+}
+
+/**
+ * Validates a set of filter values, returning the cleaned filters plus an
+ * error per rejected field. Rejected fields come back empty so callers can
+ * always use `filters` safely.
+ */
+export function checkFilters(draft: FilterDraft): { filters: FilterDraft; errors: FilterErrors } {
+  const errors: FilterErrors = {};
+  const filters: FilterDraft = {
+    entityType: draft.entityType.trim(),
+    entityId: draft.entityId.trim(),
+    actor: draft.actor.trim(),
+    action: draft.action.trim(),
+    from: draft.from.trim(),
+    to: draft.to.trim(),
+  };
+
+  for (const field of ['entityType', 'entityId', 'actor', 'action'] as const) {
+    if (!filters[field]) continue;
+    const problem = checkToken(filters[field]);
+    if (problem) {
+      errors[field] = problem;
+      filters[field] = '';
+    }
+  }
+
+  // docforum-core answers 400 to an entityId without its entityType: ids
+  // are only unique within a type.
+  if (filters.entityId && !filters.entityType) {
+    errors.entityId ??= 'Choose an entity type to filter by entity id.';
+    filters.entityId = '';
+  }
+
+  for (const field of ['from', 'to'] as const) {
+    if (filters[field] && !isCalendarDate(filters[field])) {
+      errors[field] = 'Use a valid date (YYYY-MM-DD).';
+      filters[field] = '';
+    }
+  }
+
+  // ISO dates compare correctly as strings.
+  if (filters.from && filters.to && filters.from > filters.to) {
+    errors.to = 'End date must be on or after the start date.';
+    filters.to = '';
+  }
+
+  return { filters, errors };
+}
+
+/** Reads the viewer's state from the URL. Never throws: invalid values are
+ * dropped and reported in `issues` so the page can say what it ignored. */
+export function parseAuditSearch(params: URLSearchParams): { filters: AuditFilters; issues: string[] } {
+  const read = (key: string) => params.get(key) ?? '';
+  const issues: string[] = [];
+
+  const rawTab = read(PARAM.tab);
+  let tab: AuditTab = 'events';
+  if (rawTab === 'access') tab = 'access';
+  else if (rawTab && rawTab !== 'events') issues.push('Unknown tab — showing state-change events.');
+
+  const { filters: checked, errors } = checkFilters({
+    entityType: read(PARAM.entityType),
+    entityId: read(PARAM.entityId),
+    actor: read(PARAM.actor),
+    action: read(PARAM.action),
+    from: read(PARAM.from),
+    to: read(PARAM.to),
+  });
+  for (const [field, message] of Object.entries(errors)) {
+    issues.push(`${FIELD_LABELS[field as FilterField]}: ${message}`);
+  }
+
+  const rawCursor = read(PARAM.cursor).trim();
+  let cursor: string | null = null;
+  if (rawCursor) {
+    if (rawCursor.length <= MAX_CURSOR_LENGTH && CURSOR_PATTERN.test(rawCursor)) cursor = rawCursor;
+    else issues.push('The page position in this link is malformed — showing the newest entries.');
+  }
+
+  return {
+    filters: { ...checked, tab, action: tab === 'events' ? checked.action : '', cursor },
+    issues,
+  };
+}
+
+/** Inverse of `parseAuditSearch`. Defaults are omitted so URLs stay short. */
+export function toAuditSearch(filters: AuditFilters): URLSearchParams {
+  const params = new URLSearchParams();
+  if (filters.tab !== 'events') params.set(PARAM.tab, filters.tab);
+  if (filters.entityType) params.set(PARAM.entityType, filters.entityType);
+  if (filters.entityType && filters.entityId) params.set(PARAM.entityId, filters.entityId);
+  if (filters.actor) params.set(PARAM.actor, filters.actor);
+  if (filters.tab === 'events' && filters.action) params.set(PARAM.action, filters.action);
+  if (filters.from) params.set(PARAM.from, filters.from);
+  if (filters.to) params.set(PARAM.to, filters.to);
+  if (filters.cursor) params.set(PARAM.cursor, filters.cursor);
+  return params;
+}
+
+/** The server-side part of the filters. `action` is deliberately absent —
+ * docforum-core's audit endpoint rejects it as an unknown parameter. */
+export function toAuditQuery(filters: AuditFilters, limit: number): AuditQuery {
+  return {
+    entityType: filters.entityType || undefined,
+    entityId: filters.entityId || undefined,
+    actorUserId: filters.actor || undefined,
+    from: filters.from || undefined,
+    to: filters.to || undefined,
+    cursor: filters.cursor,
+    limit,
+  };
+}
+
+/** Case-insensitive substring match, so `payment_intent` finds every
+ * payment transition and `released` finds the release regardless of entity. */
+export function matchesAction(action: string, filter: string): boolean {
+  if (!filter) return true;
+  return action.toLowerCase().includes(filter.toLowerCase());
+}
+
+export function hasActiveFilters(filters: AuditFilters): boolean {
+  return Boolean(
+    filters.entityType || filters.entityId || filters.actor || filters.action || filters.from || filters.to,
+  );
+}
diff --git a/src/features/admin-audit/hooks/useAuditFilters.ts b/src/features/admin-audit/hooks/useAuditFilters.ts
new file mode 100644
index 0000000..b3b70ba
--- /dev/null
+++ b/src/features/admin-audit/hooks/useAuditFilters.ts
@@ -0,0 +1,79 @@
+import { useCallback, useMemo } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { EMPTY_FILTERS, parseAuditSearch, toAuditSearch } from '../filters';
+import type { AuditFilters, AuditTab, FilterDraft } from '../filters';
+
+// Keyset cursors only point forward (towards older entries), so going back
+// a page needs the cursors we came through. They ride along in the history
+// entry's state rather than component state: each browser history entry
+// then carries its own trail, and back/forward stays consistent with the
+// in-page Newer/Older buttons.
+type Trail = (string | null)[];
+
+const MAX_TRAIL = 500;
+
+function readTrail(state: unknown): Trail {
+  const trail = (state as { auditTrail?: unknown } | null)?.auditTrail;
+  if (!Array.isArray(trail) || trail.length > MAX_TRAIL) return [];
+  return trail.every((entry) => entry === null || typeof entry === 'string') ? (trail as Trail) : [];
+}
+
+export function useAuditFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+
+  const { filters, issues } = useMemo(() => parseAuditSearch(searchParams), [searchParams]);
+  const trail = readTrail(location.state);
+
+  const navigate = useCallback(
+    (next: AuditFilters, nextTrail: Trail) => {
+      setSearchParams(toAuditSearch(next), { state: { auditTrail: nextTrail } });
+    },
+    [setSearchParams],
+  );
+
+  /** Applying filters always starts again from the newest entry. */
+  const applyFilters = useCallback(
+    (draft: FilterDraft) => navigate({ ...filters, ...draft, cursor: null }, []),
+    [filters, navigate],
+  );
+
+  const clearFilters = useCallback(() => navigate({ ...EMPTY_FILTERS, tab: filters.tab }, []), [filters.tab, navigate]);
+
+  // Entity/actor/date filters carry over between tabs ("who changed this"
+  // → "who viewed this"); cursors are per-endpoint so paging resets.
+  const selectTab = useCallback(
+    (tab: AuditTab) => {
+      if (tab === filters.tab) return;
+      navigate({ ...filters, tab, action: '', cursor: null }, []);
+    },
+    [filters, navigate],
+  );
+
+  const goOlder = useCallback(
+    (nextCursor: string) => navigate({ ...filters, cursor: nextCursor }, [...trail, filters.cursor]),
+    [filters, navigate, trail],
+  );
+
+  // With no trail (a shared or bookmarked deep link), "newer" falls back
+  // to the newest page rather than guessing.
+  const goNewer = useCallback(
+    () => navigate({ ...filters, cursor: trail.at(-1) ?? null }, trail.slice(0, -1)),
+    [filters, navigate, trail],
+  );
+
+  const goNewest = useCallback(() => navigate({ ...filters, cursor: null }, []), [filters, navigate]);
+
+  return {
+    filters,
+    issues,
+    /** 1-based, or null when we arrived mid-list without a trail. */
+    pageNumber: filters.cursor === null ? 1 : trail.length > 0 ? trail.length + 1 : null,
+    applyFilters,
+    clearFilters,
+    selectTab,
+    goOlder,
+    goNewer,
+    goNewest,
+  };
+}
diff --git a/src/features/admin-audit/hooks/useAuditLog.ts b/src/features/admin-audit/hooks/useAuditLog.ts
new file mode 100644
index 0000000..a250afb
--- /dev/null
+++ b/src/features/admin-audit/hooks/useAuditLog.ts
@@ -0,0 +1,38 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import * as auditService from '../../../services/audit-service';
+import { ApiError } from '../../../services/api-client';
+import { useAuthStore } from '../../../store/auth-store';
+import type { AuditQuery } from '../../../services/audit-service';
+import type { CursorPage } from '../../../types/models';
+import type { AuditTab } from '../filters';
+
+type PageFetcher<T> = (query: AuditQuery, accessToken: string, signal?: AbortSignal) => Promise<CursorPage<T>>;
+
+// A 4xx won't fix itself on retry (bad filter, expired cursor, not an
+// admin, endpoint not deployed yet) — only retry network/5xx failures.
+function shouldRetry(failureCount: number, error: Error): boolean {
+  if (error instanceof ApiError && error.status < 500) return false;
+  return failureCount < 1;
+}
+
+function useAuditPage<T>(tab: AuditTab, fetchPage: PageFetcher<T>, query: AuditQuery) {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: ['admin', 'audit', tab, query],
+    queryFn: ({ signal }) => fetchPage(query, accessToken!, signal),
+    enabled: Boolean(accessToken),
+    // Keep the current page on screen while the next one loads, instead of
+    // collapsing the table to a spinner on every page turn.
+    placeholderData: keepPreviousData,
+    retry: shouldRetry,
+  });
+}
+
+export function useAuditEvents(query: AuditQuery) {
+  return useAuditPage('events', auditService.listAuditEvents, query);
+}
+
+export function useAccessLogs(query: AuditQuery) {
+  return useAuditPage('access', auditService.listAccessLogs, query);
+}
diff --git a/src/features/admin-flags/components/FeatureFlags.module.css b/src/features/admin-flags/components/FeatureFlags.module.css
new file mode 100644
index 0000000..5453de7
--- /dev/null
+++ b/src/features/admin-flags/components/FeatureFlags.module.css
@@ -0,0 +1,744 @@
+/* A list of flags rather than a table: each one carries a description, a
+   rollout bar, targeting and its last change, which a table row would cram
+   or push sideways on a phone. */
+.page {
+  max-width: 920px;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+}
+
+.backLink {
+  display: inline-block;
+  margin-bottom: var(--space-4);
+  font-size: var(--text-sm);
+}
+
+.console {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--text-2xl);
+}
+
+.subtitle {
+  margin: var(--space-2) 0 0;
+  font-size: var(--text-sm);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* ---- Toolbar ---- */
+
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.toolbarFields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+}
+
+.searchField,
+.selectField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.searchField {
+  flex: 1 1 260px;
+}
+
+.fieldLabel {
+  padding: 0;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.input,
+.select,
+.textarea {
+  padding: 0.6rem 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-bg-raised);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus,
+.select:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
+}
+
+.input[aria-invalid='true'],
+.textarea[aria-invalid='true'] {
+  border-color: var(--color-danger);
+}
+
+.stateFilter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.45rem 0.875rem;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.chip:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.chip[aria-pressed='true'] {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-contrast);
+}
+
+.chipCount {
+  min-width: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.chip[aria-pressed='true'] .chipCount {
+  background: var(--color-accent-contrast);
+  color: var(--color-accent);
+}
+
+/* ---- Notices & states ---- */
+
+.noticeSuccess,
+.noticeWarning,
+.noticeError {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  font-size: var(--text-sm);
+}
+
+.noticeSuccess {
+  background: var(--color-success-surface);
+}
+
+.noticeWarning {
+  background: var(--color-warning-surface);
+}
+
+.noticeError {
+  background: var(--color-danger-surface);
+  border-color: var(--color-danger);
+}
+
+.noticeSuccess p,
+.noticeWarning p,
+.noticeError p {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.dismiss {
+  flex-shrink: 0;
+  padding: 0 var(--space-2);
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  font-size: var(--text-lg);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.summaryRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.summary {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.clearFilters {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-accent);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  padding: var(--space-8);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.errorBox {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-surface);
+  font-size: var(--text-sm);
+}
+
+.errorBox p {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.empty {
+  margin: 0;
+  max-width: none;
+  padding: var(--space-8);
+  text-align: center;
+  font-size: var(--text-sm);
+  background: var(--color-surface);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ---- Card ---- */
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: opacity 0.15s ease;
+}
+
+.card[aria-busy='true'] {
+  opacity: 0.8;
+}
+
+.cardTop {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* The key is what engineers grep for, so it reads as code. */
+.flagKey {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-lg);
+  overflow-wrap: anywhere;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.statePill,
+.kindBadge {
+  display: inline-block;
+  padding: 0.15rem 0.6rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.statePill[data-state='on'] {
+  background: var(--color-success-surface);
+  color: var(--color-success);
+}
+
+.statePill[data-state='rollout'] {
+  background: var(--color-warning-surface);
+  color: var(--color-warning);
+}
+
+.statePill[data-state='off'] {
+  background: var(--color-surface-alt);
+  color: var(--color-text-muted);
+}
+
+.kindBadge {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.audience {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.rollout {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.rolloutTrack {
+  flex: 1;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-alt);
+  overflow: hidden;
+}
+
+.rolloutFill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--color-accent);
+  transition: width 0.3s ease;
+}
+
+/* A disabled flag keeps its percentage, but nobody gets it — grey it out. */
+.rollout[data-off] .rolloutFill {
+  background: var(--color-border-strong);
+}
+
+.rolloutValue {
+  min-width: 3ch;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: var(--space-2) var(--space-4);
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.facts dt {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.facts dd {
+  margin: 0;
+  font-weight: 500;
+}
+
+.cardFooter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-border);
+}
+
+.lastChanged {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.historyLink {
+  white-space: nowrap;
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.saving {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+/* ---- Switch ---- */
+
+.switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background: var(--color-border-strong);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.switch[aria-checked='true'] {
+  background: var(--color-success);
+}
+
+.switch:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.switch:disabled {
+  cursor: progress;
+  opacity: 0.6;
+}
+
+.switchThumb {
+  position: absolute;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  background: var(--color-bg-raised);
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.15s ease;
+}
+
+.switch[aria-checked='true'] .switchThumb {
+  transform: translateX(1.25rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .switch,
+  .switchThumb,
+  .rolloutFill {
+    transition: none;
+  }
+}
+
+/* ---- Dialog ---- */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  background: rgba(28, 24, 21, 0.45);
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 2 * var(--space-4));
+  overflow-y: auto;
+  padding: var(--space-6);
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+
+.dialogTitle {
+  margin: 0;
+  font-size: var(--text-xl);
+  overflow-wrap: anywhere;
+}
+
+.dialogDescription {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.dialogBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.dialogBody > :global(*) {
+  margin-bottom: 0;
+}
+
+.dialogActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.fieldHint {
+  display: block;
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.fieldError {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 5rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+}
+
+.checkboxRow {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.checkboxRow input,
+.roleOption input {
+  margin-top: 0.2rem;
+  accent-color: var(--color-accent);
+}
+
+.checkboxLabel {
+  display: block;
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.percentInput {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: 600;
+}
+
+.percentInput .input {
+  width: 6rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.roleOptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  margin-top: var(--space-2);
+}
+
+.roleOption {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+
+/* ---- Review step ---- */
+
+.changeTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.changeTable th,
+.changeTable td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.changeTable thead th {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+.changeTable tbody th {
+  font-weight: 600;
+}
+
+.before {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+  text-decoration-color: var(--color-border-strong);
+}
+
+.after {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.changeDetail {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: 400;
+  color: var(--color-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.audienceDiff {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-alt);
+  font-size: var(--text-sm);
+}
+
+.audienceDiff dt {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.audienceDiff dd {
+  margin: 0;
+  font-weight: 500;
+}
+
+.dangerNotice,
+.staleWarning {
+  margin: 0;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--color-text);
+}
+
+.dangerNotice {
+  background: var(--color-danger-surface);
+}
+
+.staleWarning {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  background: var(--color-warning-surface);
+}
+
+.staleWarning p {
+  margin: 0;
+}
+
+.dialogLastChange {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: var(--space-6) var(--space-4) var(--space-8);
+  }
+
+  .toolbar,
+  .card,
+  .dialog {
+    padding: var(--space-4);
+  }
+
+  .cardActions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .dialogActions > :global(*) {
+    flex: 1 1 auto;
+  }
+}
diff --git a/src/features/admin-flags/components/FeatureFlagsConsole.test.tsx b/src/features/admin-flags/components/FeatureFlagsConsole.test.tsx
new file mode 100644
index 0000000..7a830ca
--- /dev/null
+++ b/src/features/admin-flags/components/FeatureFlagsConsole.test.tsx
@@ -0,0 +1,571 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import App from '../../../App';
+import { FeatureFlagsConsole } from './FeatureFlagsConsole';
+import { FLAGS_KEY } from '../hooks/useFeatureFlags';
+import { ApiError } from '../../../services/api-client';
+import * as flagsService from '../../../services/feature-flags-service';
+import * as auditService from '../../../services/audit-service';
+import { useAuthStore } from '../../../store/auth-store';
+import type { AuditEvent, FeatureFlag, Role } from '../../../types/models';
+
+vi.mock('../../../services/feature-flags-service');
+vi.mock('../../../services/audit-service');
+
+const DAY = 24 * 60 * 60 * 1000;
+const daysAgo = (days: number) => new Date(Date.now() - days * DAY).toISOString();
+
+const ME = 'admin-1';
+const OTHER_ADMIN = '9b8c7d6e-0000-4000-8000-000000000001';
+const NEW_USER = '7a8b9c0d-1e2f-4a5b-9c6d-abcdef012345';
+
+const WALLET: FeatureFlag = {
+  id: 'flag-wallet',
+  key: 'wallet_payments',
+  description: 'Patients can pay from a linked Stellar wallet instead of custodial checkout.',
+  kind: 'percentage',
+  enabled: true,
+  rolloutPercentage: 25,
+  targeting: { roles: ['patient'], userIds: [] },
+  createdAt: daysAgo(40),
+  updatedAt: '2026-10-10T09:00:00.000Z',
+};
+
+const TWO_FACTOR: FeatureFlag = {
+  id: 'flag-2fa',
+  key: 'two_factor_enforcement',
+  description: 'Require 2FA at sign-in for clinicians.',
+  kind: 'boolean',
+  enabled: false,
+  rolloutPercentage: null,
+  targeting: { roles: ['doctor'], userIds: [] },
+  createdAt: daysAgo(10),
+  updatedAt: '2026-10-08T09:00:00.000Z',
+};
+
+const SMS: FeatureFlag = {
+  id: 'flag-sms',
+  key: 'sms_notifications',
+  description: 'Send appointment reminders by SMS.',
+  kind: 'boolean',
+  enabled: true,
+  rolloutPercentage: null,
+  targeting: { roles: [], userIds: [] },
+  createdAt: daysAgo(30),
+  updatedAt: '2026-10-12T09:00:00.000Z',
+};
+
+function auditEvent(entityId: string, actorUserId: string | null, createdAt: string): AuditEvent {
+  return {
+    id: `evt-${entityId}`,
+    actorUserId,
+    actorRole: actorUserId ? 'admin' : null,
+    entityType: 'FeatureFlag',
+    entityId,
+    action: 'feature_flag.updated',
+    fromState: null,
+    toState: null,
+    requestId: null,
+    metadata: null,
+    createdAt,
+  };
+}
+
+const HISTORY = [auditEvent(SMS.id, ME, daysAgo(1)), auditEvent(WALLET.id, OTHER_ADMIN, daysAgo(2))];
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="location">{location.pathname + location.search}</output>;
+}
+
+function signIn(role: Role) {
+  useAuthStore.setState({
+    accessToken: 'admin-token',
+    user: { id: role === 'admin' ? ME : `${role}-1`, email: `${role}@docforum.org`, role, createdAt: '', updatedAt: '' },
+  });
+}
+
+function renderConsole(path = '/admin/flags') {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[path]}>
+        <FeatureFlagsConsole />
+        <LocationProbe />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+  return queryClient;
+}
+
+const currentLocation = () => screen.getByTestId('location').textContent;
+const cardFor = (key: string) => screen.getByRole('article', { name: key });
+const switchFor = (key: string) => screen.getByRole('switch', { name: `${key} enabled` });
+const visibleKeys = () => screen.queryAllByRole('article').map((card) => within(card).getByRole('heading').textContent);
+
+/** Later list fetches never answer, so whatever the list shows after a save
+ * comes from the cache — the optimistic entry or its rollback — and not from
+ * a refetch quietly fixing things up. */
+function freezeListRefetches() {
+  vi.mocked(flagsService.listFeatureFlags).mockReturnValue(new Promise(() => {}));
+}
+
+beforeEach(() => {
+  signIn('admin');
+  vi.mocked(flagsService.listFeatureFlags).mockReset();
+  vi.mocked(flagsService.updateFeatureFlag).mockReset();
+  vi.mocked(auditService.listAuditEvents).mockReset();
+  vi.mocked(flagsService.listFeatureFlags).mockResolvedValue([WALLET, TWO_FACTOR, SMS]);
+  vi.mocked(auditService.listAuditEvents).mockResolvedValue({ items: HISTORY, nextCursor: null });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  useAuthStore.getState().clearSession();
+});
+
+describe('FeatureFlagsConsole — list', () => {
+  it('lists flags by key with state, rollout percentage and targeting', async () => {
+    renderConsole();
+
+    await screen.findAllByRole('article');
+    expect(visibleKeys()).toEqual(['sms_notifications', 'two_factor_enforcement', 'wallet_payments']);
+
+    const wallet = cardFor('wallet_payments');
+    expect(within(wallet).getByText('Rolling out')).toBeInTheDocument();
+    expect(within(wallet).getByText('Percentage rollout')).toBeInTheDocument();
+    expect(within(wallet).getByText('25%')).toBeInTheDocument();
+    expect(within(wallet).getByText('On for 25% of patients.')).toBeInTheDocument();
+    expect(within(wallet).getByText('Patient')).toBeInTheDocument();
+
+    const twoFactor = cardFor('two_factor_enforcement');
+    expect(within(twoFactor).getByText('Off')).toBeInTheDocument();
+    expect(switchFor('two_factor_enforcement')).toHaveAttribute('aria-checked', 'false');
+    expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('shows who changed each flag last and when, from one audit query', async () => {
+    renderConsole();
+
+    const wallet = await screen.findByRole('article', { name: 'wallet_payments' });
+    await waitFor(() => expect(wallet).toHaveTextContent('Changed 2 days ago by admin 9b8c7d6e…'));
+    expect(within(wallet).getByTitle(OTHER_ADMIN)).toBeInTheDocument();
+    expect(cardFor('sms_notifications')).toHaveTextContent('Changed yesterday by you');
+    expect(cardFor('two_factor_enforcement')).toHaveTextContent('No changes recorded since it was created');
+    expect(within(wallet).getByRole('link', { name: 'History' })).toHaveAttribute(
+      'href',
+      '/admin/audit?entityType=FeatureFlag&entityId=flag-wallet',
+    );
+
+    expect(auditService.listAuditEvents).toHaveBeenCalledTimes(1);
+    expect(vi.mocked(auditService.listAuditEvents).mock.calls[0][0]).toEqual({ entityType: 'FeatureFlag', limit: 200 });
+  });
+
+  it('says when a flag’s last change is older than the loaded history', async () => {
+    vi.mocked(auditService.listAuditEvents).mockResolvedValue({ items: HISTORY, nextCursor: 'more' });
+    renderConsole();
+
+    const twoFactor = await screen.findByRole('article', { name: 'two_factor_enforcement' });
+    expect(await within(twoFactor).findByText('Last changed before the latest 200 flag changes.')).toBeInTheDocument();
+  });
+
+  it('still lists flags when the audit trail can’t be loaded', async () => {
+    vi.mocked(auditService.listAuditEvents).mockRejectedValue(new ApiError('Server error', 500));
+    renderConsole();
+
+    const wallet = await screen.findByRole('article', { name: 'wallet_payments' });
+    expect(await within(wallet).findByText(/Last change unavailable/)).toBeInTheDocument();
+    expect(switchFor('wallet_payments')).toBeEnabled();
+  });
+
+  it("explains when docforum-core doesn't serve flags yet", async () => {
+    vi.mocked(flagsService.listFeatureFlags).mockRejectedValue(new ApiError('Not Found', 404));
+    renderConsole();
+
+    expect(await screen.findByRole('alert')).toHaveTextContent("doesn't serve feature flags yet (docforum-core#132)");
+  });
+
+  it('says so when there are no flags at all', async () => {
+    vi.mocked(flagsService.listFeatureFlags).mockResolvedValue([]);
+    renderConsole();
+
+    expect(await screen.findByText('No feature flags are defined in this environment yet.')).toBeInTheDocument();
+  });
+});
+
+describe('FeatureFlagsConsole — search and filter', () => {
+  it('searches key and description, keeping the search in the URL', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.type(screen.getByRole('searchbox', { name: 'Search' }), 'two factor');
+    expect(visibleKeys()).toEqual(['two_factor_enforcement']);
+    expect(currentLocation()).toBe('/admin/flags?q=two+factor');
+
+    await user.clear(screen.getByRole('searchbox', { name: 'Search' }));
+    await user.type(screen.getByRole('searchbox', { name: 'Search' }), 'stellar');
+    expect(visibleKeys()).toEqual(['wallet_payments']);
+  });
+
+  it('filters by state and type, with counts, and clears back to everything', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    const states = screen.getByRole('group', { name: 'Filter by state' });
+    expect(within(states).getByRole('button', { name: /Rolling out/ })).toHaveTextContent('1');
+
+    await user.click(within(states).getByRole('button', { name: /^Off/ }));
+    expect(visibleKeys()).toEqual(['two_factor_enforcement']);
+
+    await user.click(within(states).getByRole('button', { name: /^All/ }));
+    await user.selectOptions(screen.getByRole('combobox', { name: 'Type' }), 'boolean');
+    expect(visibleKeys()).toEqual(['sms_notifications', 'two_factor_enforcement']);
+    expect(currentLocation()).toBe('/admin/flags?kind=boolean');
+    expect(screen.getByText('2 of 3 flags')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Clear filters' }));
+    expect(visibleKeys()).toHaveLength(3);
+    expect(currentLocation()).toBe('/admin/flags');
+  });
+
+  it('restores filters from a shared link and ignores values it does not know', async () => {
+    renderConsole('/admin/flags?state=on&kind=nonsense');
+    await screen.findAllByRole('article');
+
+    expect(visibleKeys()).toEqual(['sms_notifications']);
+    expect(screen.getByRole('combobox', { name: 'Type' })).toHaveValue('all');
+  });
+
+  it('says when nothing matches', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.type(screen.getByRole('searchbox', { name: 'Search' }), 'no-such-flag');
+    expect(screen.getByText('No flags match these filters.')).toBeInTheDocument();
+  });
+});
+
+describe('FeatureFlagsConsole — toggling', () => {
+  it('asks for confirmation, showing the change and who it reaches before and after', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.click(switchFor('sms_notifications'));
+    const dialog = screen.getByRole('dialog', { name: 'Confirm change to sms_notifications' });
+    const row = within(dialog).getByRole('row', { name: /Kill switch/ });
+    expect(row).toHaveTextContent('Enabled');
+    expect(row).toHaveTextContent('Disabled');
+    expect(within(dialog).getByText('On for everyone.')).toBeInTheDocument();
+    expect(within(dialog).getByText('Off for everyone.')).toBeInTheDocument();
+    expect(within(dialog).getByText(/loses it as soon as you confirm/)).toBeInTheDocument();
+    expect(dialog).toHaveTextContent('Changed yesterday by you');
+
+    // Nothing is sent, and nothing moves, until the admin confirms.
+    expect(flagsService.updateFeatureFlag).not.toHaveBeenCalled();
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+    expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'true');
+    expect(flagsService.updateFeatureFlag).not.toHaveBeenCalled();
+  });
+
+  it('flips the switch at once, sends only the change, then confirms', async () => {
+    const user = userEvent.setup();
+    const save = deferred<FeatureFlag>();
+    vi.mocked(flagsService.updateFeatureFlag).mockReturnValue(save.promise);
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.click(switchFor('two_factor_enforcement'));
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Confirm change' }));
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    // Before docforum-core has answered.
+    await waitFor(() => expect(switchFor('two_factor_enforcement')).toHaveAttribute('aria-checked', 'true'));
+    expect(switchFor('two_factor_enforcement')).toBeDisabled();
+    expect(within(cardFor('two_factor_enforcement')).getByText('Saving…')).toBeInTheDocument();
+    expect(flagsService.updateFeatureFlag).toHaveBeenCalledWith(
+      'two_factor_enforcement',
+      { enabled: true, expectedUpdatedAt: TWO_FACTOR.updatedAt },
+      'admin-token',
+    );
+
+    const saved = { ...TWO_FACTOR, enabled: true, updatedAt: '2026-10-18T12:00:00.000Z' };
+    vi.mocked(flagsService.listFeatureFlags).mockResolvedValue([WALLET, saved, SMS]);
+    save.resolve(saved);
+    expect(await screen.findByText(/two_factor_enforcement saved\. On for doctors\./)).toBeInTheDocument();
+    expect(switchFor('two_factor_enforcement')).toBeEnabled();
+    expect(switchFor('two_factor_enforcement')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('rolls the switch back when the save fails', async () => {
+    const user = userEvent.setup();
+    const save = deferred<FeatureFlag>();
+    vi.mocked(flagsService.updateFeatureFlag).mockReturnValue(save.promise);
+    renderConsole();
+    await screen.findAllByRole('article');
+    freezeListRefetches();
+
+    await user.click(switchFor('sms_notifications'));
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Turn off' }));
+    await waitFor(() => expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'false'));
+    expect(within(cardFor('sms_notifications')).getByText('Off')).toBeInTheDocument();
+
+    save.reject(new TypeError('Failed to fetch'));
+
+    await waitFor(() => expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'true'));
+    expect(within(cardFor('sms_notifications')).getByText('On')).toBeInTheDocument();
+    expect(switchFor('sms_notifications')).toBeEnabled();
+    expect(screen.getByRole('alert')).toHaveTextContent(/Couldn’t confirm the change to sms_notifications, so it has been rolled back/);
+    // And the real state is re-read rather than trusted.
+    expect(flagsService.listFeatureFlags).toHaveBeenCalledTimes(2);
+  });
+
+  it('rolls back only the flag that failed, not another save in flight', async () => {
+    const user = userEvent.setup();
+    const walletSave = deferred<FeatureFlag>();
+    const smsSave = deferred<FeatureFlag>();
+    vi.mocked(flagsService.updateFeatureFlag).mockImplementation((key) =>
+      key === 'wallet_payments' ? walletSave.promise : smsSave.promise,
+    );
+    renderConsole();
+    await screen.findAllByRole('article');
+    freezeListRefetches();
+
+    await user.click(within(cardFor('wallet_payments')).getByRole('button', { name: 'Edit' }));
+    const percentage = screen.getByRole('spinbutton', { name: 'Rollout percentage' });
+    await user.clear(percentage);
+    await user.type(percentage, '50');
+    await user.click(screen.getByRole('button', { name: 'Review change' }));
+    await user.click(screen.getByRole('button', { name: 'Confirm change' }));
+
+    await user.click(switchFor('sms_notifications'));
+    await user.click(screen.getByRole('button', { name: 'Turn off' }));
+    await waitFor(() => expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'false'));
+
+    smsSave.reject(new ApiError('Conflict', 409));
+    await waitFor(() => expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'true'));
+
+    const wallet = cardFor('wallet_payments');
+    expect(within(wallet).getByText('50%')).toBeInTheDocument();
+    expect(within(wallet).getByText('Saving…')).toBeInTheDocument();
+
+    walletSave.resolve({ ...WALLET, rolloutPercentage: 50, updatedAt: '2026-10-18T12:00:00.000Z' });
+    await waitFor(() => expect(within(wallet).queryByText('Saving…')).not.toBeInTheDocument());
+    expect(within(wallet).getByText('50%')).toBeInTheDocument();
+  });
+
+  it('explains a conflict and shows the latest server state', async () => {
+    const user = userEvent.setup();
+    vi.mocked(flagsService.updateFeatureFlag).mockRejectedValue(new ApiError('Flag was modified', 409));
+    renderConsole();
+    await screen.findAllByRole('article');
+    // Someone else already turned it off.
+    vi.mocked(flagsService.listFeatureFlags).mockResolvedValue([
+      WALLET,
+      TWO_FACTOR,
+      { ...SMS, enabled: false, updatedAt: '2026-10-18T11:00:00.000Z' },
+    ]);
+
+    await user.click(switchFor('sms_notifications'));
+    await user.click(screen.getByRole('button', { name: 'Turn off' }));
+
+    expect(await screen.findByText(/was changed by someone else after you opened it/)).toBeInTheDocument();
+    await waitFor(() => expect(switchFor('sms_notifications')).toHaveAttribute('aria-checked', 'false'));
+    expect(screen.getByRole('link', { name: 'View in audit trail' })).toHaveAttribute(
+      'href',
+      '/admin/audit?entityType=FeatureFlag&entityId=flag-sms',
+    );
+  });
+
+  it('never writes flag data to the console', async () => {
+    const spies = (['log', 'info', 'debug', 'warn', 'error'] as const).map((method) =>
+      vi.spyOn(console, method).mockImplementation(() => {}),
+    );
+    const user = userEvent.setup();
+    vi.mocked(flagsService.updateFeatureFlag).mockRejectedValue(new ApiError('Server error', 500));
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.click(switchFor('sms_notifications'));
+    await user.click(screen.getByRole('button', { name: 'Turn off' }));
+    await screen.findByRole('alert');
+
+    for (const spy of spies) expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('FeatureFlagsConsole — editing', () => {
+  async function openEdit(user: ReturnType<typeof userEvent.setup>, key = 'wallet_payments') {
+    await screen.findAllByRole('article');
+    await user.click(within(cardFor(key)).getByRole('button', { name: 'Edit' }));
+    return screen.getByRole('dialog', { name: `Edit ${key}` });
+  }
+
+  it.each([
+    ['101', 'The rollout can’t be above 100%.'],
+    ['-5', 'The rollout can’t be below 0%.'],
+    ['12.5', 'Use a whole number from 0 to 100.'],
+    ['', 'Enter a percentage from 0 to 100.'],
+  ])('refuses a rollout of %j before anything is sent', async (value, message) => {
+    const user = userEvent.setup();
+    renderConsole();
+    const dialog = await openEdit(user);
+
+    const percentage = within(dialog).getByRole('spinbutton', { name: 'Rollout percentage' });
+    await user.clear(percentage);
+    if (value) await user.type(percentage, value);
+    await user.click(within(dialog).getByRole('button', { name: 'Review change' }));
+
+    expect(within(dialog).getByRole('alert')).toHaveTextContent(message);
+    expect(percentage).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.queryByRole('dialog', { name: /Confirm change/ })).not.toBeInTheDocument();
+    expect(flagsService.updateFeatureFlag).not.toHaveBeenCalled();
+  });
+
+  it('refuses allowlist entries that are not user ids', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    const dialog = await openEdit(user);
+
+    await user.type(within(dialog).getByRole('textbox', { name: 'User allowlist' }), 'jane@example.com');
+    await user.click(within(dialog).getByRole('button', { name: 'Review change' }));
+
+    expect(within(dialog).getByRole('alert')).toHaveTextContent('Not a user id: “jane@example.com”');
+  });
+
+  it('says when nothing has changed', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    const dialog = await openEdit(user);
+
+    await user.click(within(dialog).getByRole('button', { name: 'Review change' }));
+    expect(within(dialog).getByRole('alert')).toHaveTextContent('Nothing has changed yet.');
+  });
+
+  it('reviews percentage, roles and allowlist changes together and saves them', async () => {
+    const user = userEvent.setup();
+    vi.mocked(flagsService.updateFeatureFlag).mockImplementation(async (_key, input) => ({
+      ...WALLET,
+      rolloutPercentage: input.rolloutPercentage ?? WALLET.rolloutPercentage,
+      targeting: input.targeting ?? WALLET.targeting,
+      updatedAt: '2026-10-18T12:00:00.000Z',
+    }));
+    renderConsole();
+    const dialog = await openEdit(user);
+
+    const percentage = within(dialog).getByRole('spinbutton', { name: 'Rollout percentage' });
+    await user.clear(percentage);
+    await user.type(percentage, '50');
+    await user.click(within(dialog).getByRole('checkbox', { name: 'Doctor' }));
+    await user.type(within(dialog).getByRole('textbox', { name: 'User allowlist' }), NEW_USER.toUpperCase());
+    await user.click(within(dialog).getByRole('button', { name: 'Review change' }));
+
+    const review = screen.getByRole('dialog', { name: 'Confirm change to wallet_payments' });
+    expect(within(review).getByRole('row', { name: /Rollout/ })).toHaveTextContent('25%50%');
+    expect(within(review).getByRole('row', { name: /Roles/ })).toHaveTextContent('patientspatients and doctors');
+    expect(within(review).getByRole('row', { name: /Allowlist/ })).toHaveTextContent('Nobody1 userAdds 7a8b9c0d…');
+    expect(within(review).getByText('On for 25% of patients.')).toBeInTheDocument();
+    expect(within(review).getByText('On for 50% of patients and doctors, plus 1 allowlisted user.')).toBeInTheDocument();
+
+    // Back to edit keeps what was typed.
+    await user.click(within(review).getByRole('button', { name: 'Edit details' }));
+    expect(screen.getByRole('spinbutton', { name: 'Rollout percentage' })).toHaveValue(50);
+    await user.click(screen.getByRole('button', { name: 'Review change' }));
+    await user.click(screen.getByRole('button', { name: 'Confirm change' }));
+
+    expect(flagsService.updateFeatureFlag).toHaveBeenCalledWith(
+      'wallet_payments',
+      {
+        rolloutPercentage: 50,
+        targeting: { roles: ['patient', 'doctor'], userIds: [NEW_USER] },
+        expectedUpdatedAt: WALLET.updatedAt,
+      },
+      'admin-token',
+    );
+    expect(
+      await screen.findByText(/wallet_payments saved\. On for 50% of patients and doctors, plus 1 allowlisted user\./),
+    ).toBeInTheDocument();
+  });
+
+  it('warns and blocks saving when someone else changes the flag mid-edit', async () => {
+    const user = userEvent.setup();
+    const queryClient = renderConsole();
+    const dialog = await openEdit(user);
+
+    queryClient.setQueryData<FeatureFlag[]>(FLAGS_KEY, [
+      { ...WALLET, rolloutPercentage: 80, updatedAt: '2026-10-18T11:00:00.000Z' },
+      TWO_FACTOR,
+      SMS,
+    ]);
+
+    expect(await within(dialog).findByText('Someone else changed this flag while you had it open.')).toBeInTheDocument();
+    expect(within(dialog).getByRole('button', { name: 'Review change' })).toBeDisabled();
+
+    await user.click(within(dialog).getByRole('button', { name: 'Start again from the latest' }));
+    expect(within(dialog).queryByText(/Someone else changed this flag/)).not.toBeInTheDocument();
+    expect(within(dialog).getByRole('spinbutton', { name: 'Rollout percentage' })).toHaveValue(80);
+  });
+
+  it('closes on Escape and returns focus to the button that opened it', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await openEdit(user);
+
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(within(cardFor('wallet_payments')).getByRole('button', { name: 'Edit' })).toHaveFocus();
+  });
+
+  it('hides the percentage field for on/off flags', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    const dialog = await openEdit(user, 'sms_notifications');
+
+    expect(within(dialog).queryByRole('spinbutton')).not.toBeInTheDocument();
+    expect(within(dialog).getByRole('checkbox', { name: /Enabled/ })).toBeChecked();
+  });
+});
+
+describe('/admin/flags route', () => {
+  function renderApp() {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={['/admin/flags']}>
+          <App />
+          <LocationProbe />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  }
+
+  it('is reachable by admins', async () => {
+    renderApp();
+    expect(await screen.findByRole('heading', { name: 'Feature flags' })).toBeInTheDocument();
+  });
+
+  it.each<Role>(['patient', 'doctor', 'facility'])('redirects a %s away without fetching anything', async (role) => {
+    signIn(role);
+    renderApp();
+
+    await waitFor(() => expect(currentLocation()).toBe(`/${role}`));
+    expect(screen.queryByRole('heading', { name: 'Feature flags' })).not.toBeInTheDocument();
+    expect(flagsService.listFeatureFlags).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/features/admin-flags/components/FeatureFlagsConsole.tsx b/src/features/admin-flags/components/FeatureFlagsConsole.tsx
new file mode 100644
index 0000000..05b6c78
--- /dev/null
+++ b/src/features/admin-flags/components/FeatureFlagsConsole.tsx
@@ -0,0 +1,256 @@
+import { useCallback, useId, useMemo, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Button } from '../../../components/Button';
+import { Spinner } from '../../../components/Spinner';
+import { useFeatureFlags, useFlagHistory, useSavingFlagKeys, useUpdateFeatureFlag } from '../hooks/useFeatureFlags';
+import { applyUpdate, draftFromFlag } from '../draft';
+import { describeListError, describeSaveError } from '../errors';
+import {
+  KIND_LABELS,
+  STATE_FILTERS,
+  STATE_LABELS,
+  auditTrailLink,
+  countByState,
+  describeAudience,
+  filterFlags,
+  flagState,
+  latestChangeByFlag,
+  parseFlagSearch,
+  toFlagSearch,
+} from '../flags';
+import { FlagCard } from './FlagCard';
+import { FlagChangeDialog } from './FlagChangeDialog';
+import type { FlagFilters, KindFilter } from '../flags';
+import type { LastChange } from './LastChanged';
+import type { UpdateFlagVariables } from '../hooks/useFeatureFlags';
+import type { FeatureFlag } from '../../../types/models';
+import styles from './FeatureFlags.module.css';
+
+type OpenDialog = { mode: 'edit' | 'toggle'; flag: FeatureFlag } | null;
+
+interface Notice {
+  tone: 'success' | 'warning' | 'error';
+  message: string;
+  flagId?: string;
+}
+
+const NOTICE_CLASS = {
+  success: styles.noticeSuccess,
+  warning: styles.noticeWarning,
+  error: styles.noticeError,
+};
+
+/**
+ * Admin console for docforum-core's feature flags (staged rollouts such as
+ * wallet payments or 2FA enforcement). Every change goes through a review
+ * step and is saved optimistically: the list moves at once and a failed save
+ * puts that flag back. Search and filters apply to the loaded list and live
+ * in the URL.
+ */
+export function FeatureFlagsConsole() {
+  const titleId = useId();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filters = useMemo(() => parseFlagSearch(searchParams), [searchParams]);
+  const [openDialog, setOpenDialog] = useState<OpenDialog>(null);
+  const [notice, setNotice] = useState<Notice | null>(null);
+
+  const flags = useFeatureFlags();
+  const history = useFlagHistory();
+  const update = useUpdateFeatureFlag();
+  const savingKeys = useSavingFlagKeys();
+  const now = flags.dataUpdatedAt || Date.now();
+
+  const all = useMemo(() => flags.data ?? [], [flags.data]);
+  const narrowed = useMemo(() => filterFlags(all, filters), [all, filters]);
+  const visible = filters.state === 'all' ? narrowed : narrowed.filter((flag) => flagState(flag) === filters.state);
+  const counts = useMemo(() => countByState(narrowed), [narrowed]);
+
+  const latest = useMemo(() => latestChangeByFlag(history.data?.items ?? []), [history.data]);
+  const lastChangeFor = useCallback(
+    (flag: FeatureFlag): LastChange => {
+      if (history.isLoading) return { status: 'loading' };
+      if (history.error || !history.data) return { status: 'unavailable' };
+      const event = latest.get(flag.id);
+      if (event) return { status: 'found', event };
+      return history.data.nextCursor ? { status: 'older' } : { status: 'none' };
+    },
+    [history.isLoading, history.error, history.data, latest],
+  );
+
+  const updateFilters = (patch: Partial<FlagFilters>) => {
+    setSearchParams(toFlagSearch({ ...filters, ...patch }), { replace: true });
+  };
+
+  const handleConfirm = async (variables: UpdateFlagVariables) => {
+    setOpenDialog(null);
+    setNotice(null);
+    try {
+      const saved = await update.mutateAsync(variables);
+      const shown = saved?.key ? saved : applyUpdate(variables.flag, variables.input);
+      setNotice({ tone: 'success', message: `${shown.key} saved. ${describeAudience(shown)}`, flagId: shown.id });
+    } catch (error) {
+      const failure = describeSaveError(error, variables.flag.key);
+      setNotice({
+        tone: failure.kind === 'conflict' ? 'warning' : 'error',
+        message: failure.message,
+        flagId: variables.flag.id,
+      });
+    }
+  };
+
+  let body;
+  if (flags.isLoading) {
+    body = (
+      <div className={styles.status} role="status">
+        <Spinner size={20} />
+        <span>Loading feature flags…</span>
+      </div>
+    );
+  } else if (flags.error) {
+    body = (
+      <div className={styles.errorBox} role="alert">
+        <p>{describeListError(flags.error)}</p>
+        <Button variant="secondary" onClick={() => void flags.refetch()}>
+          Try again
+        </Button>
+      </div>
+    );
+  } else if (visible.length === 0) {
+    body = (
+      <p className={styles.empty}>
+        {all.length === 0 ? 'No feature flags are defined in this environment yet.' : 'No flags match these filters.'}
+      </p>
+    );
+  } else {
+    body = (
+      <ul className={styles.list}>
+        {visible.map((flag) => (
+          <li key={flag.key}>
+            <FlagCard
+              flag={flag}
+              lastChange={lastChangeFor(flag)}
+              now={now}
+              saving={savingKeys.has(flag.key)}
+              onToggle={(target) => setOpenDialog({ mode: 'toggle', flag: target })}
+              onEdit={(target) => setOpenDialog({ mode: 'edit', flag: target })}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  const filtered = filters.query.trim() !== '' || filters.kind !== 'all' || filters.state !== 'all';
+
+  return (
+    <section className={styles.console} aria-labelledby={titleId}>
+      <header>
+        <h1 id={titleId} className={styles.title}>
+          Feature flags
+        </h1>
+        <p className={styles.subtitle}>
+          Staged rollouts served by docforum-core in this environment. Changes take effect for users as soon as they
+          are saved, and every change is recorded in the audit trail under your account.
+        </p>
+      </header>
+
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarFields}>
+          <label className={styles.searchField}>
+            <span className={styles.fieldLabel}>Search</span>
+            <input
+              type="search"
+              className={styles.input}
+              placeholder="Key or description"
+              value={filters.query}
+              maxLength={100}
+              onChange={(event) => updateFilters({ query: event.target.value })}
+            />
+          </label>
+          <label className={styles.selectField}>
+            <span className={styles.fieldLabel}>Type</span>
+            <select
+              className={styles.select}
+              value={filters.kind}
+              onChange={(event) => updateFilters({ kind: event.target.value as KindFilter })}
+            >
+              <option value="all">All types</option>
+              {Object.entries(KIND_LABELS).map(([value, label]) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        <div className={styles.stateFilter} role="group" aria-label="Filter by state">
+          {STATE_FILTERS.map((key) => (
+            <button
+              key={key}
+              type="button"
+              className={styles.chip}
+              aria-pressed={filters.state === key}
+              onClick={() => updateFilters({ state: key })}
+            >
+              {key === 'all' ? 'All' : STATE_LABELS[key]}
+              <span className={styles.chipCount}>{counts[key]}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {notice && (
+        <div className={NOTICE_CLASS[notice.tone]} role={notice.tone === 'error' ? 'alert' : 'status'}>
+          <p>
+            {notice.message}
+            {notice.flagId && (
+              <>
+                {' '}
+                <Link to={auditTrailLink(notice.flagId)}>View in audit trail</Link>
+              </>
+            )}
+          </p>
+          <button type="button" className={styles.dismiss} onClick={() => setNotice(null)} aria-label="Dismiss">
+            ×
+          </button>
+        </div>
+      )}
+
+      {!flags.isLoading && !flags.error && all.length > 0 && (
+        <div className={styles.summaryRow}>
+          <p className={styles.summary} aria-live="polite">
+            {filtered ? `${visible.length} of ${all.length} flags` : `${all.length} ${all.length === 1 ? 'flag' : 'flags'}`}
+            {flags.isFetching && ' · updating…'}
+          </p>
+          {filtered && (
+            <button type="button" className={styles.clearFilters} onClick={() => setSearchParams({}, { replace: true })}>
+              Clear filters
+            </button>
+          )}
+        </div>
+      )}
+
+      {body}
+
+      {openDialog && (
+        <FlagChangeDialog
+          // A fresh dialog per flag and mode, so no draft leaks between them.
+          key={`${openDialog.mode}:${openDialog.flag.key}`}
+          flag={openDialog.flag}
+          liveFlag={all.find((flag) => flag.key === openDialog.flag.key)}
+          lastChange={lastChangeFor(openDialog.flag)}
+          now={now}
+          startAt={openDialog.mode === 'toggle' ? 'review' : 'edit'}
+          initialDraft={
+            openDialog.mode === 'toggle'
+              ? { ...draftFromFlag(openDialog.flag), enabled: !openDialog.flag.enabled }
+              : undefined
+          }
+          onClose={() => setOpenDialog(null)}
+          onConfirm={(variables) => void handleConfirm(variables)}
+        />
+      )}
+    </section>
+  );
+}
diff --git a/src/features/admin-flags/components/FlagCard.tsx b/src/features/admin-flags/components/FlagCard.tsx
new file mode 100644
index 0000000..022daab
--- /dev/null
+++ b/src/features/admin-flags/components/FlagCard.tsx
@@ -0,0 +1,92 @@
+import { Button } from '../../../components/Button';
+import { Spinner } from '../../../components/Spinner';
+import { KIND_LABELS, ROLES, STATE_LABELS, describeAudience, flagState } from '../flags';
+import { LastChanged } from './LastChanged';
+import type { LastChange } from './LastChanged';
+import type { FeatureFlag } from '../../../types/models';
+import styles from './FeatureFlags.module.css';
+
+interface FlagCardProps {
+  flag: FeatureFlag;
+  lastChange: LastChange;
+  now: number;
+  saving: boolean;
+  onToggle: (flag: FeatureFlag) => void;
+  onEdit: (flag: FeatureFlag) => void;
+}
+
+export function FlagCard({ flag, lastChange, now, saving, onToggle, onEdit }: FlagCardProps) {
+  const state = flagState(flag);
+  const headingId = `flag-${flag.id}`;
+  const roleLabels = ROLES.filter((role) => flag.targeting.roles.includes(role.value)).map((role) => role.label);
+
+  return (
+    <article className={styles.card} aria-labelledby={headingId} aria-busy={saving}>
+      <div className={styles.cardTop}>
+        <h2 id={headingId} className={styles.flagKey}>
+          {flag.key}
+        </h2>
+        <div className={styles.badges}>
+          <span className={styles.statePill} data-state={state}>
+            {STATE_LABELS[state]}
+          </span>
+          <span className={styles.kindBadge}>{KIND_LABELS[flag.kind]}</span>
+        </div>
+      </div>
+
+      {flag.description && <p className={styles.description}>{flag.description}</p>}
+
+      <p className={styles.audience}>{describeAudience(flag)}</p>
+
+      {flag.kind === 'percentage' && (
+        <div className={styles.rollout} data-off={!flag.enabled || undefined}>
+          <div className={styles.rolloutTrack} aria-hidden="true">
+            <div className={styles.rolloutFill} style={{ width: `${flag.rolloutPercentage ?? 0}%` }} />
+          </div>
+          <span className={styles.rolloutValue}>{flag.rolloutPercentage ?? 0}%</span>
+        </div>
+      )}
+
+      <dl className={styles.facts}>
+        <div>
+          <dt>Roles</dt>
+          <dd>{roleLabels.length > 0 ? roleLabels.join(', ') : 'All roles'}</dd>
+        </div>
+        <div>
+          <dt>Allowlist</dt>
+          <dd>
+            {flag.targeting.userIds.length === 0
+              ? 'None'
+              : `${flag.targeting.userIds.length} ${flag.targeting.userIds.length === 1 ? 'user' : 'users'}`}
+          </dd>
+        </div>
+      </dl>
+
+      <div className={styles.cardFooter}>
+        <LastChanged flag={flag} change={lastChange} now={now} />
+        <div className={styles.cardActions}>
+          {saving && (
+            <span className={styles.saving} role="status">
+              <Spinner size={14} />
+              Saving…
+            </span>
+          )}
+          <button
+            type="button"
+            role="switch"
+            aria-checked={flag.enabled}
+            aria-label={`${flag.key} enabled`}
+            className={styles.switch}
+            onClick={() => onToggle(flag)}
+            disabled={saving}
+          >
+            <span className={styles.switchThumb} aria-hidden="true" />
+          </button>
+          <Button type="button" variant="secondary" onClick={() => onEdit(flag)} disabled={saving} aria-describedby={headingId}>
+            Edit
+          </Button>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/src/features/admin-flags/components/FlagChangeDialog.tsx b/src/features/admin-flags/components/FlagChangeDialog.tsx
new file mode 100644
index 0000000..b00ac2b
--- /dev/null
+++ b/src/features/admin-flags/components/FlagChangeDialog.tsx
@@ -0,0 +1,297 @@
+import { useId, useState } from 'react';
+import { Button } from '../../../components/Button';
+import { FormError } from '../../../components/FormError';
+import { MAX_ALLOWLIST, draftFromFlag, reviewDraft } from '../draft';
+import { ROLES, describeAudience } from '../flags';
+import { FlagDialog } from './FlagDialog';
+import { LastChanged } from './LastChanged';
+import type { DraftErrors, FlagDraft } from '../draft';
+import type { LastChange } from './LastChanged';
+import type { UpdateFlagVariables } from '../hooks/useFeatureFlags';
+import type { FeatureFlag } from '../../../types/models';
+import styles from './FeatureFlags.module.css';
+
+type Step = 'edit' | 'review';
+
+interface FlagChangeDialogProps {
+  /** The flag as it was when the admin opened the dialog. */
+  flag: FeatureFlag;
+  /** The same flag as the list has it now; undefined if it disappeared. */
+  liveFlag: FeatureFlag | undefined;
+  lastChange: LastChange;
+  now: number;
+  /** A toggle opens straight on review with `enabled` flipped. */
+  initialDraft?: FlagDraft;
+  startAt?: Step;
+  onClose: () => void;
+  onConfirm: (variables: UpdateFlagVariables) => void;
+}
+
+/**
+ * Two steps: edit the values, then review exactly what will change — field
+ * by field, and who the flag reaches before and after — with the latest
+ * audit entry beside it. Nothing is sent until the admin confirms.
+ */
+export function FlagChangeDialog({
+  flag,
+  liveFlag,
+  lastChange,
+  now,
+  initialDraft,
+  startAt = 'edit',
+  onClose,
+  onConfirm,
+}: FlagChangeDialogProps) {
+  const fieldId = useId();
+  const [base, setBase] = useState(flag);
+  const [draft, setDraft] = useState<FlagDraft>(() => initialDraft ?? draftFromFlag(flag));
+  const [step, setStep] = useState<Step>(startAt);
+  const [errors, setErrors] = useState<DraftErrors>({});
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const review = reviewDraft(base, draft);
+  // Someone else saved this flag while the dialog was open. Confirming would
+  // only earn a 409, so offer to start again from what's there now.
+  const stale = !liveFlag || liveFlag.updatedAt !== base.updatedAt;
+
+  const update = (patch: Partial<FlagDraft>) => {
+    setDraft((current) => ({ ...current, ...patch }));
+    setFormError(null);
+  };
+
+  const goToReview = () => {
+    if (!review.ok) {
+      setErrors(review.errors);
+      return;
+    }
+    setErrors({});
+    if (review.changes.length === 0) {
+      setFormError('Nothing has changed yet.');
+      return;
+    }
+    setStep('review');
+  };
+
+  const restartFromLatest = () => {
+    if (!liveFlag) return;
+    setBase(liveFlag);
+    setDraft(draftFromFlag(liveFlag));
+    setErrors({});
+    setFormError(null);
+    setStep('edit');
+  };
+
+  const confirm = () => {
+    if (stale || !review.ok || review.changes.length === 0) return;
+    onConfirm({ flag: base, input: review.input });
+  };
+
+  const staleWarning = stale && (
+    <div className={styles.staleWarning} role="alert">
+      <p>
+        {liveFlag
+          ? 'Someone else changed this flag while you had it open.'
+          : 'This flag is no longer in the list — it may have been removed.'}
+      </p>
+      {liveFlag && (
+        <Button type="button" variant="secondary" onClick={restartFromLatest}>
+          Start again from the latest
+        </Button>
+      )}
+    </div>
+  );
+
+  if (step === 'review' && review.ok && review.changes.length > 0) {
+    const turningOff = base.enabled && review.input.enabled === false;
+    return (
+      <FlagDialog
+        title={`Confirm change to ${base.key}`}
+        step={step}
+        onClose={onClose}
+        onSubmit={confirm}
+        actions={
+          <>
+            <Button type="button" variant="secondary" onClick={() => setStep('edit')}>
+              Edit details
+            </Button>
+            <Button type="button" variant="secondary" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" variant={turningOff ? 'danger' : 'primary'} disabled={stale}>
+              {turningOff ? 'Turn off' : 'Confirm change'}
+            </Button>
+          </>
+        }
+      >
+        {staleWarning}
+        <table className={styles.changeTable}>
+          <caption className={styles.visuallyHidden}>Changes to {base.key}</caption>
+          <thead>
+            <tr>
+              <th scope="col">Setting</th>
+              <th scope="col">Now</th>
+              <th scope="col">After</th>
+            </tr>
+          </thead>
+          <tbody>
+            {review.changes.map((change) => (
+              <tr key={change.field}>
+                <th scope="row">{change.label}</th>
+                <td className={styles.before}>{change.before}</td>
+                <td className={styles.after}>
+                  {change.after}
+                  {change.detail && <span className={styles.changeDetail}>{change.detail}</span>}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <dl className={styles.audienceDiff}>
+          <div>
+            <dt>Reaches now</dt>
+            <dd>{describeAudience(base)}</dd>
+          </div>
+          <div>
+            <dt>Reaches after</dt>
+            <dd>{describeAudience(review.next)}</dd>
+          </div>
+        </dl>
+
+        {turningOff && (
+          <p className={styles.dangerNotice}>
+            Everyone currently getting {base.key} loses it as soon as you confirm, allowlisted users included.
+          </p>
+        )}
+
+        <div className={styles.dialogLastChange}>
+          <span className={styles.fieldLabel}>Last change</span>
+          <LastChanged flag={base} change={lastChange} now={now} />
+        </div>
+        <p className={styles.fieldHint}>Your change is recorded in the audit trail under your admin account.</p>
+      </FlagDialog>
+    );
+  }
+
+  const percentageError = errors.rolloutPercentage;
+  const userIdsError = errors.userIds;
+
+  return (
+    <FlagDialog
+      title={`Edit ${base.key}`}
+      step={step}
+      onClose={onClose}
+      onSubmit={goToReview}
+      actions={
+        <>
+          <Button type="button" variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={stale}>
+            Review change
+          </Button>
+        </>
+      }
+    >
+      {staleWarning}
+      {base.description && <p className={styles.dialogDescription}>{base.description}</p>}
+
+      <label className={styles.checkboxRow}>
+        <input type="checkbox" checked={draft.enabled} onChange={(event) => update({ enabled: event.target.checked })} />
+        <span>
+          <span className={styles.checkboxLabel}>Enabled</span>
+          <span className={styles.fieldHint}>The kill switch. Off means off for everyone, allowlist included.</span>
+        </span>
+      </label>
+
+      {base.kind === 'percentage' && (
+        <div className={styles.field}>
+          <label htmlFor={`${fieldId}-pct`} className={styles.fieldLabel}>
+            Rollout percentage
+          </label>
+          <p id={`${fieldId}-pct-hint`} className={styles.fieldHint}>
+            Whole number from 0 to 100. Buckets are sticky per user, so raising it keeps everyone who already has
+            the flag.
+          </p>
+          <div className={styles.percentInput}>
+            <input
+              id={`${fieldId}-pct`}
+              className={styles.input}
+              type="number"
+              inputMode="numeric"
+              min={0}
+              max={100}
+              step={1}
+              value={draft.rolloutPercentage}
+              onChange={(event) => {
+                update({ rolloutPercentage: event.target.value });
+                if (percentageError) setErrors((current) => ({ ...current, rolloutPercentage: undefined }));
+              }}
+              aria-invalid={Boolean(percentageError)}
+              aria-describedby={`${fieldId}-pct-hint${percentageError ? ` ${fieldId}-pct-error` : ''}`}
+            />
+            <span aria-hidden="true">%</span>
+          </div>
+          {percentageError && (
+            <p id={`${fieldId}-pct-error`} className={styles.fieldError} role="alert">
+              {percentageError}
+            </p>
+          )}
+        </div>
+      )}
+
+      <fieldset className={styles.fieldset}>
+        <legend className={styles.fieldLabel}>Roles</legend>
+        <p className={styles.fieldHint}>Leave every role unticked to target everyone.</p>
+        <div className={styles.roleOptions}>
+          {ROLES.map((role) => (
+            <label key={role.value} className={styles.roleOption}>
+              <input
+                type="checkbox"
+                checked={draft.roles.includes(role.value)}
+                onChange={(event) =>
+                  update({
+                    roles: event.target.checked
+                      ? [...draft.roles, role.value]
+                      : draft.roles.filter((value) => value !== role.value),
+                  })
+                }
+              />
+              {role.label}
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      <div className={styles.field}>
+        <label htmlFor={`${fieldId}-users`} className={styles.fieldLabel}>
+          User allowlist
+        </label>
+        <p id={`${fieldId}-users-hint`} className={styles.fieldHint}>
+          User ids, one per line (up to {MAX_ALLOWLIST}). They get the flag whenever it’s enabled, whatever the roles
+          and percentage say.
+        </p>
+        <textarea
+          id={`${fieldId}-users`}
+          className={styles.textarea}
+          rows={4}
+          spellCheck={false}
+          value={draft.userIds}
+          onChange={(event) => {
+            update({ userIds: event.target.value });
+            if (userIdsError) setErrors((current) => ({ ...current, userIds: undefined }));
+          }}
+          aria-invalid={Boolean(userIdsError)}
+          aria-describedby={`${fieldId}-users-hint${userIdsError ? ` ${fieldId}-users-error` : ''}`}
+        />
+        {userIdsError && (
+          <p id={`${fieldId}-users-error`} className={styles.fieldError} role="alert">
+            {userIdsError}
+          </p>
+        )}
+      </div>
+
+      <FormError message={formError} />
+    </FlagDialog>
+  );
+}
diff --git a/src/features/admin-flags/components/FlagDialog.tsx b/src/features/admin-flags/components/FlagDialog.tsx
new file mode 100644
index 0000000..b6a0d11
--- /dev/null
+++ b/src/features/admin-flags/components/FlagDialog.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useId, useRef } from 'react';
+import type { FormEvent, KeyboardEvent, ReactNode } from 'react';
+import styles from './FeatureFlags.module.css';
+
+const FOCUSABLE =
+  'button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), a[href]';
+
+interface FlagDialogProps {
+  title: string;
+  /** Changing this (edit → review) moves focus back to the top of the dialog. */
+  step: string;
+  onClose: () => void;
+  onSubmit: () => void;
+  children: ReactNode;
+  actions: ReactNode;
+}
+
+/** Modal form shell: focus moves in on open and on every step change, Tab
+ * wraps inside, Escape closes, and focus returns to the opener on close. */
+export function FlagDialog({ title, step, onClose, onSubmit, children, actions }: FlagDialogProps) {
+  const titleId = useId();
+  const panelRef = useRef<HTMLFormElement>(null);
+
+  useEffect(() => {
+    const opener = document.activeElement as HTMLElement | null;
+    return () => opener?.focus();
+  }, []);
+
+  useEffect(() => {
+    panelRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+  }, [step]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLFormElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      onClose();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+
+    const focusable = Array.from(panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <div className={styles.overlay}>
+      <form
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className={styles.dialog}
+        onKeyDown={handleKeyDown}
+        onSubmit={handleSubmit}
+        noValidate
+      >
+        <h2 id={titleId} className={styles.dialogTitle}>
+          {title}
+        </h2>
+        <div className={styles.dialogBody}>{children}</div>
+        <div className={styles.dialogActions}>{actions}</div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/features/admin-flags/components/LastChanged.tsx b/src/features/admin-flags/components/LastChanged.tsx
new file mode 100644
index 0000000..9fe2e7a
--- /dev/null
+++ b/src/features/admin-flags/components/LastChanged.tsx
@@ -0,0 +1,78 @@
+import { Link } from 'react-router-dom';
+import { useAuthStore } from '../../../store/auth-store';
+import { HISTORY_LIMIT } from '../hooks/useFeatureFlags';
+import { auditTrailLink, formatRelative, formatTimestamp, shortId } from '../flags';
+import type { AuditEvent, FeatureFlag } from '../../../types/models';
+import styles from './FeatureFlags.module.css';
+
+/** What the audit trail says about a flag's most recent change. */
+export type LastChange =
+  | { status: 'loading' }
+  | { status: 'unavailable' }
+  | { status: 'found'; event: AuditEvent }
+  /** Not in the page we loaded, and there were more pages. */
+  | { status: 'older' }
+  /** The whole flag history fits in the page, and this flag isn't in it. */
+  | { status: 'none' };
+
+interface LastChangedProps {
+  flag: FeatureFlag;
+  change: LastChange;
+  now: number;
+}
+
+function When({ iso, now }: { iso: string; now: number }) {
+  return (
+    <time dateTime={iso} title={formatTimestamp(iso)}>
+      {formatRelative(iso, now)}
+    </time>
+  );
+}
+
+export function LastChanged({ flag, change, now }: LastChangedProps) {
+  const currentUserId = useAuthStore((state) => state.user?.id);
+
+  let text;
+  switch (change.status) {
+    case 'loading':
+      text = 'Loading last change…';
+      break;
+    case 'unavailable':
+      text = 'Last change unavailable — the audit trail couldn’t be loaded.';
+      break;
+    case 'older':
+      text = `Last changed before the latest ${HISTORY_LIMIT} flag changes.`;
+      break;
+    case 'none':
+      text = (
+        <>
+          No changes recorded since it was created <When iso={flag.createdAt} now={now} />.
+        </>
+      );
+      break;
+    case 'found': {
+      const { actorUserId, actorRole, createdAt } = change.event;
+      let actor;
+      if (!actorUserId) actor = 'the system';
+      else if (actorUserId === currentUserId) actor = 'you';
+      else actor = <span title={actorUserId}>{`${actorRole ?? 'user'} ${shortId(actorUserId)}`}</span>;
+      text = (
+        <>
+          Changed <When iso={createdAt} now={now} /> by {actor}
+        </>
+      );
+      break;
+    }
+  }
+
+  return (
+    <p className={styles.lastChanged}>
+      <span>{text}</span>{' '}
+      {change.status !== 'loading' && change.status !== 'unavailable' && (
+        <Link to={auditTrailLink(flag.id)} className={styles.historyLink}>
+          History
+        </Link>
+      )}
+    </p>
+  );
+}
diff --git a/src/features/admin-flags/draft.test.ts b/src/features/admin-flags/draft.test.ts
new file mode 100644
index 0000000..8431c43
--- /dev/null
+++ b/src/features/admin-flags/draft.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest';
+import { MAX_ALLOWLIST, applyUpdate, draftFromFlag, parsePercentage, parseUserIds, reviewDraft } from './draft';
+import type { FeatureFlag } from '../../types/models';
+
+const USER_A = '3f1c2a9e-1b2c-4d5e-8f90-123456789abc';
+const USER_B = '7a8b9c0d-1e2f-4a5b-9c6d-abcdef012345';
+
+const FLAG: FeatureFlag = {
+  id: 'flag-1',
+  key: 'wallet_payments',
+  description: null,
+  kind: 'percentage',
+  enabled: true,
+  rolloutPercentage: 10,
+  targeting: { roles: ['patient'], userIds: [USER_A] },
+  createdAt: '2026-09-01T00:00:00.000Z',
+  updatedAt: '2026-10-01T00:00:00.000Z',
+};
+
+describe('parsePercentage', () => {
+  it.each(['0', '7', '100', ' 50 '])('accepts %s', (raw) => {
+    expect(parsePercentage(raw)).toEqual({ value: Number(raw.trim()) });
+  });
+
+  it.each([
+    ['', 'Enter a percentage from 0 to 100.'],
+    ['-1', 'The rollout can’t be below 0%.'],
+    ['101', 'The rollout can’t be above 100%.'],
+    ['1000', 'The rollout can’t be above 100%.'],
+    ['12.5', 'Use a whole number from 0 to 100.'],
+    ['12,5', 'Use a whole number from 0 to 100.'],
+    ['1e2', 'Enter a number from 0 to 100.'],
+    ['fifty', 'Enter a number from 0 to 100.'],
+  ])('rejects %j', (raw, error) => {
+    expect(parsePercentage(raw)).toEqual({ error });
+  });
+});
+
+describe('parseUserIds', () => {
+  it('splits on commas, spaces and new lines, lower-cases and de-duplicates', () => {
+    expect(parseUserIds(`${USER_A.toUpperCase()},\n${USER_B}  ${USER_A}`)).toEqual({ ids: [USER_A, USER_B] });
+    expect(parseUserIds('  ')).toEqual({ ids: [] });
+  });
+
+  it('refuses anything that is not a user id instead of dropping it', () => {
+    const result = parseUserIds(`${USER_A}\njane@example.com`);
+    expect(result).toEqual({ error: expect.stringContaining('“jane@example.com”') });
+  });
+
+  it('lets ids already saved on the flag through untouched', () => {
+    expect(parseUserIds('legacy-id-42', ['legacy-id-42'])).toEqual({ ids: ['legacy-id-42'] });
+  });
+
+  it('caps the allowlist', () => {
+    const ids = Array.from({ length: MAX_ALLOWLIST + 1 }, (_, i) => `00000000-0000-4000-8000-${String(i).padStart(12, '0')}`);
+    expect(parseUserIds(ids.join('\n'))).toEqual({ error: expect.stringContaining(`at most ${MAX_ALLOWLIST}`) });
+  });
+});
+
+describe('reviewDraft', () => {
+  it('reports no changes for an untouched draft', () => {
+    const review = reviewDraft(FLAG, draftFromFlag(FLAG));
+    expect(review).toMatchObject({ ok: true, changes: [] });
+  });
+
+  it('sends only what changed, with the version the admin saw', () => {
+    const review = reviewDraft(FLAG, { ...draftFromFlag(FLAG), rolloutPercentage: '50' });
+    expect(review.ok && review.input).toEqual({ rolloutPercentage: 50, expectedUpdatedAt: FLAG.updatedAt });
+    expect(review.ok && review.changes).toEqual([
+      { field: 'rolloutPercentage', label: 'Rollout', before: '10%', after: '50%' },
+    ]);
+  });
+
+  it('sends targeting whole when either half changes, and describes the allowlist delta', () => {
+    const review = reviewDraft(FLAG, { ...draftFromFlag(FLAG), roles: ['doctor', 'patient'], userIds: USER_B });
+    if (!review.ok) throw new Error('expected a valid draft');
+    expect(review.input.targeting).toEqual({ roles: ['patient', 'doctor'], userIds: [USER_B] });
+    expect(review.changes.map((change) => change.field)).toEqual(['roles', 'userIds']);
+    expect(review.changes[1]).toMatchObject({ before: '1 user', after: '1 user', detail: 'Adds 7a8b9c0d… · Removes 3f1c2a9e…' });
+  });
+
+  it('ignores role order and allowlist order', () => {
+    const flag: FeatureFlag = { ...FLAG, targeting: { roles: ['doctor', 'patient'], userIds: [USER_A, USER_B] } };
+    const review = reviewDraft(flag, { ...draftFromFlag(flag), roles: ['patient', 'doctor'], userIds: `${USER_B}\n${USER_A}` });
+    expect(review).toMatchObject({ ok: true, changes: [] });
+  });
+
+  it('collects every field error at once', () => {
+    expect(reviewDraft(FLAG, { ...draftFromFlag(FLAG), rolloutPercentage: '150', userIds: 'nope' })).toEqual({
+      ok: false,
+      errors: { rolloutPercentage: 'The rollout can’t be above 100%.', userIds: expect.any(String) },
+    });
+  });
+
+  it('never validates a percentage on a boolean flag', () => {
+    const flag: FeatureFlag = { ...FLAG, kind: 'boolean', rolloutPercentage: null };
+    const review = reviewDraft(flag, { ...draftFromFlag(flag), enabled: false });
+    expect(review.ok && review.input).toEqual({ enabled: false, expectedUpdatedAt: FLAG.updatedAt });
+  });
+});
+
+describe('applyUpdate', () => {
+  it('applies the change but leaves updatedAt for the server to move', () => {
+    const next = applyUpdate(FLAG, { enabled: false, expectedUpdatedAt: FLAG.updatedAt });
+    expect(next).toEqual({ ...FLAG, enabled: false });
+    expect(next.updatedAt).toBe(FLAG.updatedAt);
+  });
+});
diff --git a/src/features/admin-flags/draft.ts b/src/features/admin-flags/draft.ts
new file mode 100644
index 0000000..2923c98
--- /dev/null
+++ b/src/features/admin-flags/draft.ts
@@ -0,0 +1,186 @@
+import { ROLES, describeRoles, shortId } from './flags';
+import type { FeatureFlag, FeatureFlagTargeting, Role, UpdateFeatureFlagInput } from '../../types/models';
+
+// The edit form works on strings (what the inputs hold) and only turns them
+// into an UpdateFeatureFlagInput once everything validates. The review step
+// renders the `changes` this produces, so what the admin confirms is exactly
+// what gets sent.
+
+export const MAX_ALLOWLIST = 500;
+
+export interface FlagDraft {
+  enabled: boolean;
+  rolloutPercentage: string;
+  roles: Role[];
+  /** User ids separated by commas, spaces or new lines. */
+  userIds: string;
+}
+
+export type DraftField = 'rolloutPercentage' | 'userIds';
+export type DraftErrors = Partial<Record<DraftField, string>>;
+
+export interface FlagChange {
+  field: 'enabled' | 'rolloutPercentage' | 'roles' | 'userIds';
+  label: string;
+  before: string;
+  after: string;
+  detail?: string;
+}
+
+export type DraftReview =
+  | { ok: false; errors: DraftErrors }
+  | { ok: true; input: UpdateFeatureFlagInput; changes: FlagChange[]; next: FeatureFlag };
+
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function draftFromFlag(flag: FeatureFlag): FlagDraft {
+  return {
+    enabled: flag.enabled,
+    rolloutPercentage: flag.rolloutPercentage === null ? '' : String(flag.rolloutPercentage),
+    roles: [...flag.targeting.roles],
+    userIds: flag.targeting.userIds.join('\n'),
+  };
+}
+
+/** Whole numbers 0–100 only: bucketing is per percent, so 12.5 would be
+ * silently rounded by someone, somewhere. */
+export function parsePercentage(raw: string): { value: number } | { error: string } {
+  const text = raw.trim();
+  if (!text) return { error: 'Enter a percentage from 0 to 100.' };
+  if (text.startsWith('-')) return { error: 'The rollout can’t be below 0%.' };
+  if (/^\d*[.,]\d+$/.test(text)) return { error: 'Use a whole number from 0 to 100.' };
+  if (!/^\d+$/.test(text)) return { error: 'Enter a number from 0 to 100.' };
+  const value = Number(text);
+  if (value > 100) return { error: 'The rollout can’t be above 100%.' };
+  return { value };
+}
+
+/**
+ * Splits, lower-cases and de-duplicates. Anything that isn't a user id is an
+ * error rather than being dropped — a pasted email would otherwise quietly
+ * target nobody. Ids already saved on the flag pass through untouched, so a
+ * server-side id this check wouldn't accept can't block an unrelated edit.
+ */
+export function parseUserIds(raw: string, saved: string[] = []): { ids: string[] } | { error: string } {
+  const known = new Set(saved);
+  const tokens = raw.split(/[\s,;]+/).filter(Boolean);
+  const invalid = tokens.filter((token) => !known.has(token) && !UUID_PATTERN.test(token));
+  if (invalid.length > 0) {
+    const sample = invalid.slice(0, 3).map((token) => `“${token.slice(0, 40)}”`).join(', ');
+    const more = invalid.length > 3 ? ` and ${invalid.length - 3} more` : '';
+    return { error: `Not a user id: ${sample}${more}. Paste user ids (UUIDs), not emails or names.` };
+  }
+  const ids = [...new Set(tokens.map((token) => (known.has(token) ? token : token.toLowerCase())))];
+  if (ids.length > MAX_ALLOWLIST) return { error: `Allowlist at most ${MAX_ALLOWLIST} users — use a role or a percentage for more.` };
+  return { ids };
+}
+
+function sameMembers(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  const set = new Set(a);
+  return b.every((item) => set.has(item));
+}
+
+function orderedRoles(roles: Role[]): Role[] {
+  return ROLES.map((role) => role.value).filter((role) => roles.includes(role));
+}
+
+function usersLabel(count: number): string {
+  if (count === 0) return 'Nobody';
+  return `${count} ${count === 1 ? 'user' : 'users'}`;
+}
+
+function idList(ids: string[]): string {
+  const shown = ids.slice(0, 3).map(shortId).join(', ');
+  return ids.length > 3 ? `${shown} and ${ids.length - 3} more` : shown;
+}
+
+function percentageLabel(value: number | null): string {
+  return value === null ? '—' : `${value}%`;
+}
+
+/** The flag as it will be once `input` is saved — used for the review step
+ * and for the optimistic cache entry. `updatedAt` is left alone on purpose:
+ * only the server's answer may move it (see `useUpdateFeatureFlag`). */
+export function applyUpdate(flag: FeatureFlag, input: UpdateFeatureFlagInput): FeatureFlag {
+  return {
+    ...flag,
+    enabled: input.enabled ?? flag.enabled,
+    rolloutPercentage: input.rolloutPercentage ?? flag.rolloutPercentage,
+    targeting: input.targeting ?? flag.targeting,
+  };
+}
+
+export function reviewDraft(flag: FeatureFlag, draft: FlagDraft): DraftReview {
+  const errors: DraftErrors = {};
+
+  let rolloutPercentage: number | undefined;
+  if (flag.kind === 'percentage') {
+    const parsed = parsePercentage(draft.rolloutPercentage);
+    if ('error' in parsed) errors.rolloutPercentage = parsed.error;
+    else rolloutPercentage = parsed.value;
+  }
+
+  const parsedIds = parseUserIds(draft.userIds, flag.targeting.userIds);
+  if ('error' in parsedIds) errors.userIds = parsedIds.error;
+
+  if ('error' in parsedIds || errors.rolloutPercentage) return { ok: false, errors };
+
+  const roles = orderedRoles(draft.roles);
+  const userIds = parsedIds.ids;
+  const input: UpdateFeatureFlagInput = { expectedUpdatedAt: flag.updatedAt };
+  const changes: FlagChange[] = [];
+
+  if (draft.enabled !== flag.enabled) {
+    input.enabled = draft.enabled;
+    changes.push({
+      field: 'enabled',
+      label: 'Kill switch',
+      before: flag.enabled ? 'Enabled' : 'Disabled',
+      after: draft.enabled ? 'Enabled' : 'Disabled',
+    });
+  }
+
+  if (rolloutPercentage !== undefined && rolloutPercentage !== flag.rolloutPercentage) {
+    input.rolloutPercentage = rolloutPercentage;
+    changes.push({
+      field: 'rolloutPercentage',
+      label: 'Rollout',
+      before: percentageLabel(flag.rolloutPercentage),
+      after: percentageLabel(rolloutPercentage),
+    });
+  }
+
+  const rolesChanged = !sameMembers(roles, flag.targeting.roles);
+  const usersChanged = !sameMembers(userIds, flag.targeting.userIds);
+  if (rolesChanged || usersChanged) {
+    // Targeting is replaced as a whole, so both halves always go together.
+    const targeting: FeatureFlagTargeting = { roles, userIds };
+    input.targeting = targeting;
+  }
+  if (rolesChanged) {
+    changes.push({
+      field: 'roles',
+      label: 'Roles',
+      before: describeRoles(flag.targeting.roles),
+      after: describeRoles(roles),
+    });
+  }
+  if (usersChanged) {
+    const before = new Set(flag.targeting.userIds);
+    const after = new Set(userIds);
+    const added = userIds.filter((id) => !before.has(id));
+    const removed = flag.targeting.userIds.filter((id) => !after.has(id));
+    changes.push({
+      field: 'userIds',
+      label: 'Allowlist',
+      before: usersLabel(flag.targeting.userIds.length),
+      after: usersLabel(userIds.length),
+      detail: [added.length > 0 && `Adds ${idList(added)}`, removed.length > 0 && `Removes ${idList(removed)}`]
+        .filter(Boolean)
+        .join(' · '),
+    });
+  }
+
+  return { ok: true, input, changes, next: applyUpdate(flag, input) };
+}
diff --git a/src/features/admin-flags/errors.ts b/src/features/admin-flags/errors.ts
new file mode 100644
index 0000000..42997a9
--- /dev/null
+++ b/src/features/admin-flags/errors.ts
@@ -0,0 +1,48 @@
+import { ApiError } from '../../services/api-client';
+
+export interface SaveFailure {
+  /**
+   * `conflict` — the flag changed (or vanished) since the admin opened it.
+   * `rejected` — docforum-core refused this particular change.
+   * `unconfirmed` — we never heard back. The change is rolled back on screen
+   * and the list refetched, which shows whether it went through after all.
+   */
+  kind: 'conflict' | 'rejected' | 'auth' | 'unconfirmed';
+  message: string;
+}
+
+export function describeSaveError(error: unknown, flagKey: string): SaveFailure {
+  if (error instanceof ApiError) {
+    if (error.status === 409) {
+      return {
+        kind: 'conflict',
+        message: `${flagKey} was changed by someone else after you opened it. Your change wasn’t saved — the latest values are shown; review them and try again.`,
+      };
+    }
+    if (error.status === 404) {
+      return { kind: 'conflict', message: `${flagKey} no longer exists in this environment. Your change wasn’t saved.` };
+    }
+    if (error.status === 400 || error.status === 422) {
+      return { kind: 'rejected', message: `docforum-core refused the change to ${flagKey}: ${error.message}` };
+    }
+    if (error.status === 401 || error.status === 403) {
+      return { kind: 'auth', message: 'Your session no longer has admin access. Sign in again with an admin account.' };
+    }
+  }
+  return {
+    kind: 'unconfirmed',
+    message: `Couldn’t confirm the change to ${flagKey}, so it has been rolled back on screen. The preview backend may be waking up — reloading the current state now.`,
+  };
+}
+
+export function describeListError(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.status === 401 || error.status === 403) {
+      return 'Your session no longer has admin access. Sign in again with an admin account.';
+    }
+    if (error.status === 404) {
+      return "docforum-core doesn't serve feature flags yet (docforum-core#132).";
+    }
+  }
+  return "Couldn't load feature flags. The preview backend may be waking up — try again in a minute.";
+}
diff --git a/src/features/admin-flags/flags.test.ts b/src/features/admin-flags/flags.test.ts
new file mode 100644
index 0000000..86b5f6c
--- /dev/null
+++ b/src/features/admin-flags/flags.test.ts
@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest';
+import {
+  countByState,
+  describeAudience,
+  filterFlags,
+  flagState,
+  latestChangeByFlag,
+  matchesQuery,
+  parseFlagSearch,
+  toFlagSearch,
+} from './flags';
+import type { AuditEvent, FeatureFlag } from '../../types/models';
+
+const BASE: FeatureFlag = {
+  id: 'flag-1',
+  key: 'wallet_payments',
+  description: 'Let patients pay from a linked Stellar wallet',
+  kind: 'percentage',
+  enabled: true,
+  rolloutPercentage: 25,
+  targeting: { roles: [], userIds: [] },
+  createdAt: '2026-09-01T00:00:00.000Z',
+  updatedAt: '2026-10-01T00:00:00.000Z',
+};
+
+const flag = (patch: Partial<FeatureFlag>): FeatureFlag => ({ ...BASE, ...patch });
+
+function event(patch: Partial<AuditEvent>): AuditEvent {
+  return {
+    id: 'evt',
+    actorUserId: 'admin-1',
+    actorRole: 'admin',
+    entityType: 'FeatureFlag',
+    entityId: 'flag-1',
+    action: 'feature_flag.updated',
+    fromState: null,
+    toState: null,
+    requestId: null,
+    metadata: null,
+    createdAt: '2026-10-01T00:00:00.000Z',
+    ...patch,
+  };
+}
+
+describe('flagState', () => {
+  it('is off whenever the kill switch is off, whatever the percentage', () => {
+    expect(flagState(flag({ enabled: false, rolloutPercentage: 100 }))).toBe('off');
+  });
+
+  it('is rolling out below 100% and on at 100%', () => {
+    expect(flagState(flag({ rolloutPercentage: 0 }))).toBe('rollout');
+    expect(flagState(flag({ rolloutPercentage: 99 }))).toBe('rollout');
+    expect(flagState(flag({ rolloutPercentage: 100 }))).toBe('on');
+  });
+
+  it('treats an enabled boolean flag as on', () => {
+    expect(flagState(flag({ kind: 'boolean', rolloutPercentage: null }))).toBe('on');
+  });
+});
+
+describe('describeAudience', () => {
+  it('names the targeted roles and the percentage', () => {
+    expect(describeAudience(flag({ targeting: { roles: ['doctor', 'patient'], userIds: [] } }))).toBe(
+      'On for 25% of patients and doctors.',
+    );
+  });
+
+  it('adds the allowlist, which bypasses roles and percentage', () => {
+    expect(describeAudience(flag({ targeting: { roles: [], userIds: ['a', 'b'] } }))).toBe(
+      'On for 25% of everyone, plus 2 allowlisted users.',
+    );
+  });
+
+  it('spells out the edge cases at 0% and when disabled', () => {
+    expect(describeAudience(flag({ rolloutPercentage: 0 }))).toBe('Enabled, but at 0% nobody gets it.');
+    expect(describeAudience(flag({ rolloutPercentage: 0, targeting: { roles: [], userIds: ['a'] } }))).toBe(
+      'On only for 1 allowlisted user.',
+    );
+    expect(describeAudience(flag({ enabled: false, targeting: { roles: [], userIds: ['a'] } }))).toBe(
+      'Off for everyone, allowlisted users included.',
+    );
+  });
+
+  it('drops the percentage for boolean flags and at 100%', () => {
+    expect(describeAudience(flag({ kind: 'boolean', rolloutPercentage: null }))).toBe('On for everyone.');
+    expect(describeAudience(flag({ rolloutPercentage: 100, targeting: { roles: ['facility'], userIds: [] } }))).toBe(
+      'On for facility staff.',
+    );
+  });
+});
+
+describe('URL filters', () => {
+  it('round-trips, leaving defaults out', () => {
+    const filters = { query: 'wallet', state: 'rollout', kind: 'percentage' } as const;
+    expect(parseFlagSearch(toFlagSearch(filters))).toEqual(filters);
+    expect(toFlagSearch({ query: '  ', state: 'all', kind: 'all' }).toString()).toBe('');
+  });
+
+  it('falls back on values it does not recognise and caps the search text', () => {
+    const parsed = parseFlagSearch(new URLSearchParams({ state: 'broken', kind: '<script>', q: 'x'.repeat(500) }));
+    expect(parsed.state).toBe('all');
+    expect(parsed.kind).toBe('all');
+    expect(parsed.query).toHaveLength(100);
+  });
+});
+
+describe('search and filtering', () => {
+  it('matches key and description, case-insensitively, with _ and spaces interchangeable', () => {
+    expect(matchesQuery(BASE, 'Wallet Pay')).toBe(true);
+    expect(matchesQuery(BASE, 'stellar')).toBe(true);
+    expect(matchesQuery(BASE, '2fa')).toBe(false);
+    expect(matchesQuery(flag({ description: null }), 'wallet')).toBe(true);
+  });
+
+  it('sorts by key and counts states within the narrowed set', () => {
+    const flags = [
+      flag({ key: 'two_factor', kind: 'boolean', rolloutPercentage: null, enabled: false, description: null }),
+      flag({ key: 'sms_channel', kind: 'boolean', rolloutPercentage: null, description: null }),
+      BASE,
+    ];
+    const narrowed = filterFlags(flags, { query: '', kind: 'boolean' });
+    expect(narrowed.map((f) => f.key)).toEqual(['sms_channel', 'two_factor']);
+    expect(countByState(narrowed)).toEqual({ all: 2, on: 1, rollout: 0, off: 1 });
+  });
+});
+
+describe('latestChangeByFlag', () => {
+  it('keeps the newest event per flag by timestamp, ignoring other entity types', () => {
+    const latest = latestChangeByFlag([
+      event({ id: 'old', createdAt: '2026-10-01T00:00:00.000Z' }),
+      event({ id: 'new', createdAt: '2026-10-05T00:00:00.000Z' }),
+      event({ id: 'other', entityId: 'flag-2' }),
+      event({ id: 'not-a-flag', entityType: 'Referral', entityId: 'flag-1', createdAt: '2026-10-09T00:00:00.000Z' }),
+    ]);
+    expect(latest.get('flag-1')?.id).toBe('new');
+    expect(latest.get('flag-2')?.id).toBe('other');
+  });
+});
diff --git a/src/features/admin-flags/flags.ts b/src/features/admin-flags/flags.ts
new file mode 100644
index 0000000..7d1e4ba
--- /dev/null
+++ b/src/features/admin-flags/flags.ts
@@ -0,0 +1,192 @@
+import type { AuditEvent, FeatureFlag, FeatureFlagKind, Role } from '../../types/models';
+
+// Audit events for flags are assumed to use the Prisma model name, like every
+// other entity in docforum-core's audit trail (docforum-core#132).
+export const FLAG_ENTITY_TYPE = 'FeatureFlag';
+
+export const ROLES: { value: Role; label: string; plural: string }[] = [
+  { value: 'patient', label: 'Patient', plural: 'patients' },
+  { value: 'doctor', label: 'Doctor', plural: 'doctors' },
+  { value: 'facility', label: 'Facility', plural: 'facility staff' },
+  { value: 'admin', label: 'Admin', plural: 'admins' },
+];
+
+export const KIND_LABELS: Record<FeatureFlagKind, string> = {
+  boolean: 'On/off',
+  percentage: 'Percentage rollout',
+};
+
+/**
+ * `on` reaches everyone it targets; `rollout` is enabled but held back to a
+ * percentage below 100; `off` is the kill switch thrown. Role targeting
+ * doesn't change the state — "on for doctors" is still on.
+ */
+export type FlagState = 'on' | 'rollout' | 'off';
+
+export const STATE_LABELS: Record<FlagState, string> = {
+  on: 'On',
+  rollout: 'Rolling out',
+  off: 'Off',
+};
+
+export function flagState(flag: Pick<FeatureFlag, 'enabled' | 'kind' | 'rolloutPercentage'>): FlagState {
+  if (!flag.enabled) return 'off';
+  if (flag.kind === 'percentage' && (flag.rolloutPercentage ?? 0) < 100) return 'rollout';
+  return 'on';
+}
+
+function joinWords(words: string[]): string {
+  if (words.length <= 1) return words.join('');
+  return `${words.slice(0, -1).join(', ')} and ${words[words.length - 1]}`;
+}
+
+function plural(count: number, one: string, many: string): string {
+  return `${count} ${count === 1 ? one : many}`;
+}
+
+/** "everyone", or the targeted roles in a sentence ("patients and doctors"). */
+export function describeRoles(roles: Role[]): string {
+  if (roles.length === 0) return 'everyone';
+  return joinWords(ROLES.filter((role) => roles.includes(role.value)).map((role) => role.plural));
+}
+
+/**
+ * Who a flag reaches, in one sentence the confirmation step can put side by
+ * side ("before → after"). Mirrors the evaluation order assumed for #132:
+ * kill switch, then allowlist, then roles, then the sticky percentage.
+ */
+export function describeAudience(flag: Pick<FeatureFlag, 'enabled' | 'kind' | 'rolloutPercentage' | 'targeting'>): string {
+  const allowlisted = flag.targeting.userIds.length;
+  if (!flag.enabled) {
+    return allowlisted > 0 ? 'Off for everyone, allowlisted users included.' : 'Off for everyone.';
+  }
+
+  const roles = describeRoles(flag.targeting.roles);
+  const extra = allowlisted > 0 ? `, plus ${plural(allowlisted, 'allowlisted user', 'allowlisted users')}` : '';
+
+  if (flag.kind === 'boolean') return `On for ${roles}${extra}.`;
+
+  const percentage = flag.rolloutPercentage ?? 0;
+  if (percentage === 0) {
+    return allowlisted > 0
+      ? `On only for ${plural(allowlisted, 'allowlisted user', 'allowlisted users')}.`
+      : 'Enabled, but at 0% nobody gets it.';
+  }
+  if (percentage === 100) return `On for ${roles}${extra}.`;
+  return `On for ${percentage}% of ${roles}${extra}.`;
+}
+
+// ---- Filters ---------------------------------------------------------------
+
+export type StateFilter = FlagState | 'all';
+export type KindFilter = FeatureFlagKind | 'all';
+
+export interface FlagFilters {
+  query: string;
+  state: StateFilter;
+  kind: KindFilter;
+}
+
+export const STATE_FILTERS: StateFilter[] = ['all', 'on', 'rollout', 'off'];
+
+const MAX_QUERY_LENGTH = 100;
+
+function isState(value: string | null): value is FlagState {
+  return value !== null && Object.hasOwn(STATE_LABELS, value);
+}
+
+function isKind(value: string | null): value is FeatureFlagKind {
+  return value !== null && Object.hasOwn(KIND_LABELS, value);
+}
+
+/** The URL is untrusted: unknown values fall back to "all", and the search
+ * text is capped. It is only ever matched against, never sent anywhere. */
+export function parseFlagSearch(params: URLSearchParams): FlagFilters {
+  const state = params.get('state');
+  const kind = params.get('kind');
+  return {
+    query: (params.get('q') ?? '').slice(0, MAX_QUERY_LENGTH),
+    state: isState(state) ? state : 'all',
+    kind: isKind(kind) ? kind : 'all',
+  };
+}
+
+/** Defaults are left out so the plain `/admin/flags` link stays canonical. */
+export function toFlagSearch(filters: FlagFilters): URLSearchParams {
+  const params = new URLSearchParams();
+  if (filters.query.trim()) params.set('q', filters.query.slice(0, MAX_QUERY_LENGTH));
+  if (filters.state !== 'all') params.set('state', filters.state);
+  if (filters.kind !== 'all') params.set('kind', filters.kind);
+  return params;
+}
+
+/** Case-insensitive substring match on the key and description. Underscores
+ * and spaces are interchangeable, so "wallet pay" finds `wallet_payments`. */
+export function matchesQuery(flag: FeatureFlag, query: string): boolean {
+  const needle = query.trim().toLowerCase().replace(/[\s_-]+/g, ' ');
+  if (!needle) return true;
+  const haystack = `${flag.key} ${flag.description ?? ''}`.toLowerCase().replace(/[\s_-]+/g, ' ');
+  return haystack.includes(needle);
+}
+
+/** Search and kind narrow the set the state chips count; the state filter
+ * then picks within it. */
+export function filterFlags(flags: FeatureFlag[], filters: Omit<FlagFilters, 'state'>): FeatureFlag[] {
+  return flags
+    .filter((flag) => (filters.kind === 'all' || flag.kind === filters.kind) && matchesQuery(flag, filters.query))
+    .sort((a, b) => a.key.localeCompare(b.key));
+}
+
+export function countByState(flags: FeatureFlag[]): Record<StateFilter, number> {
+  const counts: Record<StateFilter, number> = { all: flags.length, on: 0, rollout: 0, off: 0 };
+  for (const flag of flags) counts[flagState(flag)] += 1;
+  return counts;
+}
+
+// ---- Last change (from the audit trail) -----------------------------------
+
+/** The newest audit event per flag id. Events arrive newest first, but the
+ * timestamps decide, so a reordered page can't show an older change. */
+export function latestChangeByFlag(events: AuditEvent[]): Map<string, AuditEvent> {
+  const latest = new Map<string, AuditEvent>();
+  for (const event of events) {
+    if (event.entityType !== FLAG_ENTITY_TYPE) continue;
+    const current = latest.get(event.entityId);
+    if (!current || Date.parse(event.createdAt) > Date.parse(current.createdAt)) latest.set(event.entityId, event);
+  }
+  return latest;
+}
+
+export function auditTrailLink(flagId: string): string {
+  return `/admin/audit?entityType=${FLAG_ENTITY_TYPE}&entityId=${encodeURIComponent(flagId)}`;
+}
+
+export function shortId(id: string): string {
+  return id.length > 8 ? `${id.slice(0, 8)}…` : id;
+}
+
+// ---- Time ------------------------------------------------------------------
+
+const relative = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ['year', 365 * 24 * 60 * 60 * 1000],
+  ['month', 30 * 24 * 60 * 60 * 1000],
+  ['day', 24 * 60 * 60 * 1000],
+  ['hour', 60 * 60 * 1000],
+  ['minute', 60 * 1000],
+];
+
+export function formatRelative(iso: string, now: number): string {
+  const at = Date.parse(iso);
+  if (Number.isNaN(at)) return 'at an unknown time';
+  const delta = at - now;
+  if (Math.abs(delta) < 60_000) return 'just now';
+  const [unit, size] = UNITS.find(([, length]) => Math.abs(delta) >= length) ?? UNITS[UNITS.length - 1];
+  return relative.format(Math.trunc(delta / size), unit);
+}
+
+export function formatTimestamp(iso: string): string {
+  const at = Date.parse(iso);
+  if (Number.isNaN(at)) return iso;
+  return new Date(at).toLocaleString('en-GB', { dateStyle: 'medium', timeStyle: 'short' });
+}
diff --git a/src/features/admin-flags/hooks/useFeatureFlags.ts b/src/features/admin-flags/hooks/useFeatureFlags.ts
new file mode 100644
index 0000000..b938423
--- /dev/null
+++ b/src/features/admin-flags/hooks/useFeatureFlags.ts
@@ -0,0 +1,117 @@
+import { useMutation, useMutationState, useQuery, useQueryClient } from '@tanstack/react-query';
+import * as flagsService from '../../../services/feature-flags-service';
+import * as auditService from '../../../services/audit-service';
+import { ApiError } from '../../../services/api-client';
+import { useAuthStore } from '../../../store/auth-store';
+import { applyUpdate } from '../draft';
+import { FLAG_ENTITY_TYPE } from '../flags';
+import type { FeatureFlag, UpdateFeatureFlagInput } from '../../../types/models';
+
+// Sibling keys, not nested ones: invalidating the list mustn't also cancel
+// or refetch the audit lookup, and vice versa.
+export const FLAGS_KEY = ['admin', 'flags', 'list'] as const;
+const HISTORY_KEY = ['admin', 'flags', 'history'] as const;
+const UPDATE_KEY = ['admin', 'flags', 'update'] as const;
+
+// The most the audit listing serves in one page (docforum-core#43).
+export const HISTORY_LIMIT = 200;
+
+// A 4xx won't fix itself on retry — only retry network/5xx failures.
+function shouldRetry(failureCount: number, error: Error): boolean {
+  if (error instanceof ApiError && error.status < 500) return false;
+  return failureCount < 1;
+}
+
+export function useFeatureFlags() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: FLAGS_KEY,
+    queryFn: ({ signal }) => flagsService.listFeatureFlags(accessToken!, signal),
+    enabled: Boolean(accessToken),
+    retry: shouldRetry,
+  });
+}
+
+/** The latest page of flag audit events, for "last changed by … when". One
+ * request for all flags rather than one per flag. */
+export function useFlagHistory() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: HISTORY_KEY,
+    queryFn: ({ signal }) =>
+      auditService.listAuditEvents({ entityType: FLAG_ENTITY_TYPE, limit: HISTORY_LIMIT }, accessToken!, signal),
+    enabled: Boolean(accessToken),
+    retry: shouldRetry,
+  });
+}
+
+export interface UpdateFlagVariables {
+  /** The flag as the admin saw it when they confirmed. */
+  flag: FeatureFlag;
+  input: UpdateFeatureFlagInput;
+}
+
+interface RollbackContext {
+  previous: FeatureFlag;
+}
+
+function replaceFlag(flags: FeatureFlag[] | undefined, next: FeatureFlag): FeatureFlag[] | undefined {
+  return flags?.map((flag) => (flag.key === next.key ? next : flag));
+}
+
+/**
+ * Saves a flag change optimistically: the list shows the new state as soon
+ * as the admin confirms, and a failure puts that one flag back.
+ *
+ * Rollback is per flag, not a snapshot of the whole list — restoring a
+ * snapshot would also undo a change to a *different* flag that's still in
+ * flight or already saved. And it only applies while the cached flag still
+ * carries the `updatedAt` we started from: the optimistic copy keeps it, so
+ * if anything newer from the server has landed since, that wins.
+ */
+export function useUpdateFeatureFlag() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const queryClient = useQueryClient();
+
+  return useMutation<FeatureFlag, Error, UpdateFlagVariables, RollbackContext>({
+    mutationKey: UPDATE_KEY,
+    mutationFn: ({ flag, input }) => flagsService.updateFeatureFlag(flag.key, input, accessToken!),
+    onMutate: async ({ flag, input }) => {
+      // A list fetch landing mid-save would overwrite the optimistic entry
+      // with the pre-save state.
+      await queryClient.cancelQueries({ queryKey: FLAGS_KEY });
+      queryClient.setQueryData<FeatureFlag[]>(FLAGS_KEY, (flags) => replaceFlag(flags, applyUpdate(flag, input)));
+      return { previous: flag };
+    },
+    onError: (_error, _variables, context) => {
+      if (!context) return;
+      const { previous } = context;
+      queryClient.setQueryData<FeatureFlag[]>(FLAGS_KEY, (flags) =>
+        flags?.map((flag) => (flag.key === previous.key && flag.updatedAt === previous.updatedAt ? previous : flag)),
+      );
+    },
+    onSuccess: (saved) => {
+      if (saved?.key) queryClient.setQueryData<FeatureFlag[]>(FLAGS_KEY, (flags) => replaceFlag(flags, saved));
+    },
+    // Success or not, re-read the truth: after a conflict or a lost response
+    // the server's state is the only one worth showing, and the audit trail
+    // has a new "last changed" entry when the save went through. Not awaited
+    // — a slow (cold-start) refetch mustn't hold the flag in "Saving…".
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: FLAGS_KEY });
+      void queryClient.invalidateQueries({ queryKey: HISTORY_KEY });
+    },
+  });
+}
+
+/** Keys of flags with a save in flight, across every caller. Their
+ * controls stay disabled so two edits to one flag can't race. */
+export function useSavingFlagKeys(): Set<string> {
+  const keys = useMutationState({
+    filters: { mutationKey: UPDATE_KEY, status: 'pending' },
+    select: (mutation) => (mutation.state.variables as UpdateFlagVariables | undefined)?.flag.key,
+  });
+  return new Set(keys.filter((key): key is string => Boolean(key)));
+}
diff --git a/src/features/admin-referrals/components/ActionDialog.tsx b/src/features/admin-referrals/components/ActionDialog.tsx
new file mode 100644
index 0000000..4e482a3
--- /dev/null
+++ b/src/features/admin-referrals/components/ActionDialog.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useId, useRef } from 'react';
+import type { FormEvent, KeyboardEvent, ReactNode } from 'react';
+import styles from './StuckReferrals.module.css';
+
+const FOCUSABLE = 'button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), a[href]';
+
+interface ActionDialogProps {
+  title: string;
+  description: ReactNode;
+  /** While a request is in flight the dialog can't be dismissed. */
+  busy: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  children: ReactNode;
+  actions: ReactNode;
+}
+
+/** Modal form shell: focus moves in on open, stays inside while open
+ * (Tab wraps), and returns to whatever opened it on close. */
+export function ActionDialog({ title, description, busy, onClose, onSubmit, children, actions }: ActionDialogProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const panelRef = useRef<HTMLFormElement>(null);
+
+  useEffect(() => {
+    const opener = document.activeElement as HTMLElement | null;
+    panelRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+    return () => opener?.focus();
+  }, []);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLFormElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      if (!busy) onClose();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+
+    const focusable = Array.from(panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!busy) onSubmit();
+  };
+
+  return (
+    <div className={styles.overlay}>
+      <form
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        className={styles.dialog}
+        onKeyDown={handleKeyDown}
+        onSubmit={handleSubmit}
+        noValidate
+      >
+        <h2 id={titleId} className={styles.dialogTitle}>
+          {title}
+        </h2>
+        <div id={descriptionId} className={styles.dialogDescription}>
+          {description}
+        </div>
+        <div className={styles.dialogBody}>{children}</div>
+        <div className={styles.dialogActions}>{actions}</div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/features/admin-referrals/components/CancelReferralDialog.tsx b/src/features/admin-referrals/components/CancelReferralDialog.tsx
new file mode 100644
index 0000000..b1ffcf5
--- /dev/null
+++ b/src/features/admin-referrals/components/CancelReferralDialog.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Button } from '../../../components/Button';
+import { FormError } from '../../../components/FormError';
+import { useCancelReferral } from '../hooks/useStuckReferrals';
+import { describeActionError } from '../errors';
+import { normaliseReason, validateReason } from '../reason';
+import { ActionDialog } from './ActionDialog';
+import { ReasonField } from './ReasonField';
+import type { StuckReferral } from '../../../types/models';
+import styles from './StuckReferrals.module.css';
+
+interface CancelReferralDialogProps {
+  referral: StuckReferral;
+  onClose: () => void;
+  onCancelled: () => void;
+  onConflict: (message: string) => void;
+}
+
+export function CancelReferralDialog({ referral, onClose, onCancelled, onConflict }: CancelReferralDialogProps) {
+  const cancel = useCancelReferral();
+  const [reason, setReason] = useState('');
+  const [reasonError, setReasonError] = useState<string | null>(null);
+  const [failure, setFailure] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    const nextReasonError = validateReason(reason);
+    setReasonError(nextReasonError);
+    setFailure(null);
+    if (nextReasonError) return;
+
+    try {
+      await cancel.mutateAsync({
+        referralId: referral.id,
+        input: { reason: normaliseReason(reason), expectedUpdatedAt: referral.updatedAt },
+      });
+      onCancelled();
+    } catch (error) {
+      const outcome = describeActionError(error, 'cancel');
+      if (outcome.kind === 'conflict') onConflict(outcome.message);
+      else setFailure(outcome.message);
+    }
+  };
+
+  return (
+    <ActionDialog
+      title="Cancel referral"
+      description={
+        <>
+          <p>
+            This closes the {referral.targetSpecialty.name} referral from {referral.referringDoctor.fullName}. It
+            can't be undone — a new referral would have to come from a consultation.
+          </p>
+          <p className={styles.patientNotice}>docforum-core notifies the patient that their referral was cancelled.</p>
+        </>
+      }
+      busy={cancel.isPending}
+      onClose={onClose}
+      onSubmit={() => void handleSubmit()}
+      actions={
+        <>
+          <Button type="button" variant="secondary" onClick={onClose} disabled={cancel.isPending}>
+            Keep referral
+          </Button>
+          <Button type="submit" variant="danger" loading={cancel.isPending}>
+            {cancel.isPending ? 'Cancelling…' : 'Cancel referral'}
+          </Button>
+        </>
+      }
+    >
+      <ReasonField
+        label="Reason for cancelling"
+        value={reason}
+        onChange={(value) => {
+          setReason(value);
+          if (reasonError) setReasonError(null);
+        }}
+        error={reasonError}
+        disabled={cancel.isPending}
+      />
+      <FormError message={failure} />
+    </ActionDialog>
+  );
+}
diff --git a/src/features/admin-referrals/components/ReasonField.tsx b/src/features/admin-referrals/components/ReasonField.tsx
new file mode 100644
index 0000000..6e38f38
--- /dev/null
+++ b/src/features/admin-referrals/components/ReasonField.tsx
@@ -0,0 +1,51 @@
+import { useId } from 'react';
+import { REASON_MAX_LENGTH, normaliseReason } from '../reason';
+import styles from './StuckReferrals.module.css';
+
+interface ReasonFieldProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  error: string | null;
+  disabled?: boolean;
+}
+
+export function ReasonField({ label, value, onChange, error, disabled }: ReasonFieldProps) {
+  const id = useId();
+  const length = normaliseReason(value).length;
+
+  return (
+    <div className={styles.field}>
+      <label htmlFor={id} className={styles.fieldLabel}>
+        {label}
+      </label>
+      <p id={`${id}-hint`} className={styles.fieldHint}>
+        Saved to the audit trail with your admin account. Keep clinical details out of it.
+      </p>
+      <textarea
+        id={id}
+        className={styles.textarea}
+        rows={3}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        disabled={disabled}
+        // A little headroom over the limit so pasted text isn't silently cut.
+        maxLength={REASON_MAX_LENGTH + 100}
+        aria-invalid={Boolean(error)}
+        aria-describedby={`${id}-hint ${id}-count${error ? ` ${id}-error` : ''}`}
+      />
+      <div className={styles.fieldFooter}>
+        {error ? (
+          <p id={`${id}-error`} className={styles.fieldError} role="alert">
+            {error}
+          </p>
+        ) : (
+          <span />
+        )}
+        <span id={`${id}-count`} className={length > REASON_MAX_LENGTH ? styles.countOver : styles.count}>
+          {length}/{REASON_MAX_LENGTH}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/admin-referrals/components/ReassignDialog.tsx b/src/features/admin-referrals/components/ReassignDialog.tsx
new file mode 100644
index 0000000..ac6c13a
--- /dev/null
+++ b/src/features/admin-referrals/components/ReassignDialog.tsx
@@ -0,0 +1,194 @@
+import { useId, useMemo, useState } from 'react';
+import { Button } from '../../../components/Button';
+import { FormError } from '../../../components/FormError';
+import { Spinner } from '../../../components/Spinner';
+import { ApiError } from '../../../services/api-client';
+import { useReassignCandidates, useReassignReferral } from '../hooks/useStuckReferrals';
+import { chainDoctorIds, eligibleCandidates } from '../eligibility';
+import { describeActionError } from '../errors';
+import { normaliseReason, validateReason } from '../reason';
+import { ActionDialog } from './ActionDialog';
+import { ReasonField } from './ReasonField';
+import type { DoctorAvailability, StuckReferral } from '../../../types/models';
+import styles from './StuckReferrals.module.css';
+
+interface ReassignDialogProps {
+  referral: StuckReferral;
+  onClose: () => void;
+  onReassigned: (doctor: DoctorAvailability) => void;
+  onConflict: (message: string) => void;
+}
+
+function describeAvailability(doctor: DoctorAvailability): string {
+  if (doctor.openSlotCount <= 0 || !doctor.nextAvailableAt) return 'No open slots in the next 7 days';
+  const next = new Date(doctor.nextAvailableAt);
+  const nextLabel = Number.isNaN(next.getTime())
+    ? doctor.nextAvailableAt
+    : next.toLocaleString(undefined, { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+  const slots = doctor.openSlotCount === 1 ? '1 open slot' : `${doctor.openSlotCount} open slots`;
+  return `${slots} in the next 7 days · next ${nextLabel}`;
+}
+
+export function ReassignDialog({ referral, onClose, onReassigned, onConflict }: ReassignDialogProps) {
+  const groupName = useId();
+  const specialty = referral.targetSpecialty.name;
+  const candidates = useReassignCandidates(referral.targetSpecialtyId);
+  const reassign = useReassignReferral();
+
+  const [doctorId, setDoctorId] = useState<string | null>(null);
+  const [reason, setReason] = useState('');
+  const [pickError, setPickError] = useState<string | null>(null);
+  const [reasonError, setReasonError] = useState<string | null>(null);
+  const [failure, setFailure] = useState<string | null>(null);
+
+  const { eligible, ineligibleCount } = useMemo(
+    () => eligibleCandidates(referral, candidates.data ?? []),
+    [referral, candidates.data],
+  );
+  const inChain = useMemo(() => chainDoctorIds(referral), [referral]);
+  // A refetch can drop the doctor that was picked (their verification was
+  // revoked, say) — then nothing is selected rather than a stale id.
+  const selected = eligible.find((doctor) => doctor.id === doctorId) ?? null;
+
+  const handleSubmit = async () => {
+    const nextReasonError = validateReason(reason);
+    const nextPickError = selected ? null : 'Choose a doctor to reassign to.';
+    setReasonError(nextReasonError);
+    setPickError(nextPickError);
+    setFailure(null);
+    if (nextReasonError || nextPickError || !selected) return;
+
+    try {
+      await reassign.mutateAsync({
+        referralId: referral.id,
+        input: {
+          targetDoctorId: selected.id,
+          reason: normaliseReason(reason),
+          expectedUpdatedAt: referral.updatedAt,
+        },
+      });
+      onReassigned(selected);
+    } catch (error) {
+      const outcome = describeActionError(error, 'reassign');
+      if (outcome.kind === 'conflict') onConflict(outcome.message);
+      else setFailure(outcome.message);
+    }
+  };
+
+  let picker;
+  if (candidates.isLoading) {
+    picker = (
+      <div className={styles.inlineStatus} role="status">
+        <Spinner size={16} />
+        <span>Loading verified {specialty} doctors…</span>
+      </div>
+    );
+  } else if (candidates.error) {
+    const notServed = candidates.error instanceof ApiError && candidates.error.status === 404;
+    picker = (
+      <div className={styles.inlineError} role="alert">
+        <p>
+          {notServed
+            ? "docforum-core can't list doctors for reassignment yet (docforum-core#68)."
+            : "Couldn't load doctors for this specialty."}
+        </p>
+        {!notServed && (
+          <Button type="button" variant="secondary" onClick={() => void candidates.refetch()}>
+            Try again
+          </Button>
+        )}
+      </div>
+    );
+  } else if (eligible.length === 0) {
+    picker = (
+      <p className={styles.inlineEmpty}>
+        No other verified {specialty} doctor can take this referral. Cancel it instead, or verify a doctor in this
+        specialty first.
+      </p>
+    );
+  } else {
+    picker = (
+      <fieldset className={styles.picker} aria-describedby={pickError ? `${groupName}-error` : undefined}>
+        <legend className={styles.fieldLabel}>Verified {specialty} doctors</legend>
+        <ul className={styles.candidateList}>
+          {eligible.map((doctor) => (
+            <li key={doctor.id}>
+              <label className={`${styles.candidate} ${doctor.id === doctorId ? styles.candidateSelected : ''}`}>
+                <input
+                  type="radio"
+                  name={groupName}
+                  value={doctor.id}
+                  checked={doctor.id === doctorId}
+                  onChange={() => {
+                    setDoctorId(doctor.id);
+                    setPickError(null);
+                  }}
+                  disabled={reassign.isPending}
+                />
+                <span className={styles.candidateText}>
+                  <span className={styles.candidateName}>{doctor.fullName}</span>
+                  <span className={doctor.openSlotCount > 0 ? styles.availability : styles.availabilityNone}>
+                    {describeAvailability(doctor)}
+                  </span>
+                  {inChain.has(doctor.id) && (
+                    <span className={styles.chainWarning}>Already in this referral's chain</span>
+                  )}
+                </span>
+              </label>
+            </li>
+          ))}
+        </ul>
+        {pickError && (
+          <p id={`${groupName}-error`} className={styles.fieldError} role="alert">
+            {pickError}
+          </p>
+        )}
+      </fieldset>
+    );
+  }
+
+  return (
+    <ActionDialog
+      title="Reassign referral"
+      description={
+        <p>
+          Hand this {specialty} referral to another verified doctor in the same specialty. The referral's clinical
+          snapshot doesn't change. Currently with:{' '}
+          <strong>{referral.targetDoctor?.fullName ?? 'no doctor'}</strong>.
+        </p>
+      }
+      busy={reassign.isPending}
+      onClose={onClose}
+      onSubmit={() => void handleSubmit()}
+      actions={
+        <>
+          <Button type="button" variant="secondary" onClick={onClose} disabled={reassign.isPending}>
+            Back
+          </Button>
+          <Button type="submit" loading={reassign.isPending} disabled={eligible.length === 0}>
+            {reassign.isPending ? 'Reassigning…' : 'Reassign referral'}
+          </Button>
+        </>
+      }
+    >
+      {picker}
+      {ineligibleCount > 0 && (
+        <p className={styles.fieldHint}>
+          {ineligibleCount === 1 ? '1 doctor' : `${ineligibleCount} doctors`} returned by docforum-core{' '}
+          {ineligibleCount === 1 ? 'was' : 'were'} hidden because they aren't verified in {specialty}.
+        </p>
+      )}
+      <ReasonField
+        label="Reason for reassigning"
+        value={reason}
+        onChange={(value) => {
+          setReason(value);
+          if (reasonError) setReasonError(null);
+        }}
+        error={reasonError}
+        disabled={reassign.isPending}
+      />
+      <FormError message={failure} />
+    </ActionDialog>
+  );
+}
diff --git a/src/features/admin-referrals/components/ReferralChain.tsx b/src/features/admin-referrals/components/ReferralChain.tsx
new file mode 100644
index 0000000..6d8b056
--- /dev/null
+++ b/src/features/admin-referrals/components/ReferralChain.tsx
@@ -0,0 +1,41 @@
+import { loopReturnIndexes } from '../queue';
+import type { ReferralChainLink } from '../../../types/models';
+import styles from './StuckReferrals.module.css';
+
+function shortDate(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+}
+
+/** The hops a loop-flagged referral took, oldest first, with the hop that
+ * closed the loop called out. */
+export function ReferralChain({ chain, currentId }: { chain: ReferralChainLink[]; currentId: string }) {
+  const returns = loopReturnIndexes(chain);
+
+  return (
+    <div className={styles.chain}>
+      <p className={styles.chainTitle}>Referral chain ({chain.length} hops)</p>
+      <ol className={styles.chainList}>
+        {chain.map((link, index) => {
+          const isCurrent = link.referralId === currentId;
+          return (
+            <li
+              key={link.referralId}
+              className={`${styles.chainLink} ${returns.has(index) ? styles.chainReturn : ''}`}
+              aria-current={isCurrent ? 'step' : undefined}
+            >
+              <span className={styles.chainHop}>
+                {link.referringDoctor.fullName} → {link.targetSpecialty.name}
+                {link.targetDoctor && ` (${link.targetDoctor.fullName})`}
+              </span>
+              <span className={styles.chainMeta}>
+                {shortDate(link.createdAt)} · {isCurrent ? 'this referral' : link.status}
+                {returns.has(index) && <strong className={styles.chainReturnLabel}> · returns to an earlier hop</strong>}
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
diff --git a/src/features/admin-referrals/components/StuckReferralCard.tsx b/src/features/admin-referrals/components/StuckReferralCard.tsx
new file mode 100644
index 0000000..966a66b
--- /dev/null
+++ b/src/features/admin-referrals/components/StuckReferralCard.tsx
@@ -0,0 +1,79 @@
+import { Button } from '../../../components/Button';
+import { REASONS, ageTone, formatAge, hoursSince } from '../queue';
+import { ReferralChain } from './ReferralChain';
+import type { StuckReferral } from '../../../types/models';
+import styles from './StuckReferrals.module.css';
+
+interface StuckReferralCardProps {
+  referral: StuckReferral;
+  now: number;
+  onReassign: (referral: StuckReferral) => void;
+  onCancel: (referral: StuckReferral) => void;
+}
+
+const TONE_CLASS = {
+  elevated: styles.ageElevated,
+  high: styles.ageHigh,
+  critical: styles.ageCritical,
+};
+
+export function StuckReferralCard({ referral, now, onReassign, onCancel }: StuckReferralCardProps) {
+  const hours = hoursSince(referral.createdAt, now);
+  const reason = REASONS[referral.stuckReason];
+  const headingId = `referral-${referral.id}`;
+
+  return (
+    <article className={styles.card} aria-labelledby={headingId}>
+      <div className={styles.cardTop}>
+        <div className={styles.badges}>
+          {hours !== null && (
+            <span className={`${styles.age} ${TONE_CLASS[ageTone(hours)]}`}>Pending {formatAge(hours)}</span>
+          )}
+          <span className={styles.reason} data-reason={referral.stuckReason}>
+            {reason?.label ?? referral.stuckReason}
+          </span>
+        </div>
+        <code className={styles.referralId} title="Referral id">
+          {referral.id}
+        </code>
+      </div>
+
+      <h2 id={headingId} className={styles.specialty}>
+        {referral.targetSpecialty.name}
+      </h2>
+      {reason && <p className={styles.reasonDescription}>{reason.description}</p>}
+
+      <dl className={styles.facts}>
+        <div>
+          <dt>Referred by</dt>
+          <dd>{referral.referringDoctor.fullName}</dd>
+        </div>
+        <div>
+          <dt>Waiting on</dt>
+          <dd>{referral.targetDoctor?.fullName ?? <span className={styles.unassigned}>No doctor assigned</span>}</dd>
+        </div>
+        <div>
+          <dt>Referred on</dt>
+          <dd>
+            <time dateTime={referral.createdAt} title={referral.createdAt}>
+              {new Date(referral.createdAt).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}
+            </time>
+          </dd>
+        </div>
+      </dl>
+
+      {referral.stuckReason === 'loop_flagged' && referral.chain && referral.chain.length > 0 && (
+        <ReferralChain chain={referral.chain} currentId={referral.id} />
+      )}
+
+      <div className={styles.cardActions}>
+        <Button type="button" onClick={() => onReassign(referral)} aria-describedby={headingId}>
+          Reassign
+        </Button>
+        <Button type="button" variant="secondary" onClick={() => onCancel(referral)} aria-describedby={headingId}>
+          Cancel referral
+        </Button>
+      </div>
+    </article>
+  );
+}
diff --git a/src/features/admin-referrals/components/StuckReferrals.module.css b/src/features/admin-referrals/components/StuckReferrals.module.css
new file mode 100644
index 0000000..3251c57
--- /dev/null
+++ b/src/features/admin-referrals/components/StuckReferrals.module.css
@@ -0,0 +1,620 @@
+/* A work queue, read top to bottom — cards rather than a table, so the loop
+   chain and actions fit on a phone without sideways scrolling. */
+.page {
+  max-width: 880px;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+}
+
+.backLink {
+  display: inline-block;
+  margin-bottom: var(--space-4);
+  font-size: var(--text-sm);
+}
+
+.console {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--text-2xl);
+}
+
+.subtitle {
+  margin: var(--space-2) 0 0;
+  font-size: var(--text-sm);
+}
+
+/* ---- Toolbar ---- */
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.selectField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.fieldLabel {
+  padding: 0;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.select,
+.textarea {
+  padding: 0.6rem 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-bg-raised);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.select:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-subtle);
+}
+
+.reasonFilter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.45rem 0.875rem;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.chip:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.chip[aria-pressed='true'] {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-contrast);
+}
+
+.chipCount {
+  min-width: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.chip[aria-pressed='true'] .chipCount {
+  background: var(--color-accent-contrast);
+  color: var(--color-accent);
+}
+
+/* ---- Notices & states ---- */
+
+.noticeSuccess,
+.noticeWarning {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  font-size: var(--text-sm);
+}
+
+.noticeSuccess {
+  background: var(--color-success-surface);
+}
+
+.noticeWarning {
+  background: var(--color-warning-surface);
+}
+
+.noticeSuccess p,
+.noticeWarning p {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.dismiss {
+  flex-shrink: 0;
+  padding: 0 var(--space-2);
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  font-size: var(--text-lg);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.summary {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  padding: var(--space-8);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.errorBox {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-surface);
+  font-size: var(--text-sm);
+}
+
+.errorBox p {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.empty {
+  margin: 0;
+  max-width: none;
+  padding: var(--space-8);
+  text-align: center;
+  font-size: var(--text-sm);
+  background: var(--color-surface);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.loadMore {
+  display: flex;
+  justify-content: center;
+}
+
+/* ---- Card ---- */
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.cardTop {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.age,
+.reason {
+  display: inline-block;
+  padding: 0.15rem 0.6rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.age {
+  font-variant-numeric: tabular-nums;
+}
+
+.ageElevated {
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+}
+
+.ageHigh {
+  background: var(--color-warning-surface);
+  color: var(--color-warning);
+}
+
+.ageCritical {
+  background: var(--color-danger-surface);
+  color: var(--color-danger);
+}
+
+.reason {
+  background: var(--color-surface-alt);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+}
+
+.reason[data-reason='loop_flagged'] {
+  border-color: var(--color-accent-2);
+  color: var(--color-accent-2);
+}
+
+/* Monospace for the one value admins copy and compare. */
+.referralId {
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+  overflow-wrap: anywhere;
+}
+
+.specialty {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+
+.reasonDescription {
+  margin: calc(-1 * var(--space-2)) 0 0;
+  font-size: var(--text-sm);
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: var(--space-2) var(--space-4);
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.facts dt {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.facts dd {
+  margin: 0;
+  font-weight: 500;
+}
+
+.unassigned {
+  color: var(--color-danger);
+}
+
+.cardActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+/* ---- Loop chain ---- */
+
+.chain {
+  padding: var(--space-3) var(--space-4);
+  border-left: 3px solid var(--color-accent-2);
+  border-radius: var(--radius-sm);
+  background: var(--color-accent-2-subtle);
+}
+
+.chainTitle {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.chainList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: 0;
+  padding-left: var(--space-6);
+  font-size: var(--text-sm);
+}
+
+.chainLink {
+  padding-left: var(--space-1);
+}
+
+.chainLink[aria-current='step'] .chainHop {
+  font-weight: 600;
+}
+
+.chainHop {
+  display: block;
+  color: var(--color-text);
+}
+
+.chainMeta {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.chainReturn::marker {
+  color: var(--color-danger);
+  font-weight: 700;
+}
+
+.chainReturnLabel {
+  color: var(--color-danger);
+}
+
+/* ---- Dialog ---- */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  background: rgba(28, 24, 21, 0.45);
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+  max-width: 540px;
+  max-height: calc(100vh - 2 * var(--space-4));
+  overflow-y: auto;
+  padding: var(--space-6);
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+
+.dialogTitle {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+
+.dialogDescription p {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.dialogDescription p:last-child {
+  margin-bottom: 0;
+}
+
+.patientNotice {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-warning-surface);
+  color: var(--color-text);
+}
+
+.dialogBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.dialogBody > :global(*) {
+  margin-bottom: 0;
+}
+
+.dialogActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.fieldHint {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 5rem;
+  line-height: var(--leading-snug);
+}
+
+.textarea[aria-invalid='true'] {
+  border-color: var(--color-danger);
+}
+
+.fieldFooter {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.fieldError {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}
+
+.count,
+.countOver {
+  flex-shrink: 0;
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-faint);
+}
+
+.countOver {
+  color: var(--color-danger);
+  font-weight: 600;
+}
+
+.inlineStatus {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+.inlineError {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-surface);
+}
+
+.inlineError p,
+.inlineEmpty {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-text);
+}
+
+.inlineEmpty {
+  padding: var(--space-3) var(--space-4);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-md);
+}
+
+/* ---- Doctor picker ---- */
+
+.picker {
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-width: 0;
+}
+
+.candidateList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: var(--space-2) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.candidate {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.candidate:hover {
+  background: var(--color-surface-hover);
+}
+
+.candidate input {
+  margin-top: 0.3rem;
+  accent-color: var(--color-accent);
+}
+
+.candidateSelected {
+  border-color: var(--color-accent);
+  background: var(--color-accent-subtle);
+}
+
+.candidateText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.candidateName {
+  font-weight: 600;
+  font-size: var(--text-sm);
+}
+
+.availability,
+.availabilityNone,
+.chainWarning {
+  font-size: var(--text-xs);
+}
+
+.availability {
+  color: var(--color-success);
+}
+
+.availabilityNone {
+  color: var(--color-text-muted);
+}
+
+.chainWarning {
+  color: var(--color-accent-2);
+  font-weight: 600;
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: var(--space-6) var(--space-4) var(--space-8);
+  }
+
+  .toolbar,
+  .card {
+    padding: var(--space-4);
+  }
+
+  .dialog {
+    padding: var(--space-4);
+  }
+
+  .cardActions > :global(*) {
+    flex: 1 1 auto;
+  }
+}
diff --git a/src/features/admin-referrals/components/StuckReferralsConsole.test.tsx b/src/features/admin-referrals/components/StuckReferralsConsole.test.tsx
new file mode 100644
index 0000000..34af0bf
--- /dev/null
+++ b/src/features/admin-referrals/components/StuckReferralsConsole.test.tsx
@@ -0,0 +1,512 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import App from '../../../App';
+import { StuckReferralsConsole } from './StuckReferralsConsole';
+import { ApiError } from '../../../services/api-client';
+import * as referralsService from '../../../services/admin-referrals-service';
+import { useAuthStore } from '../../../store/auth-store';
+import type { DoctorAvailability, Role, Specialty, StuckReferral } from '../../../types/models';
+
+vi.mock('../../../services/admin-referrals-service');
+
+const HOUR = 60 * 60 * 1000;
+const hoursAgo = (hours: number) => new Date(Date.now() - hours * HOUR).toISOString();
+
+const CARDIOLOGY: Specialty = { id: 'spec-cardio', name: 'Cardiology', slug: 'cardiology' };
+const NEUROLOGY: Specialty = { id: 'spec-neuro', name: 'Neurology', slug: 'neurology' };
+const DERMATOLOGY: Specialty = { id: 'spec-derm', name: 'Dermatology', slug: 'dermatology' };
+
+const GP = { id: 'doc-gp', fullName: 'Dr. Grace Park' };
+const ON_LEAVE = { id: 'doc-leave', fullName: 'Dr. Leo Vance' };
+const NEURO = { id: 'doc-neuro', fullName: 'Dr. Nia Shah' };
+
+const INACTIVE: StuckReferral = {
+  id: 'ref-inactive',
+  sourceConsultationId: 'consult-1',
+  referringDoctorId: GP.id,
+  targetSpecialtyId: CARDIOLOGY.id,
+  targetDoctorId: ON_LEAVE.id,
+  parentReferralId: null,
+  status: 'pending',
+  resultingAppointmentId: null,
+  createdAt: hoursAgo(76),
+  updatedAt: '2026-10-15T08:00:00.000Z',
+  stuckReason: 'doctor_inactive',
+  targetSpecialty: CARDIOLOGY,
+  referringDoctor: GP,
+  targetDoctor: ON_LEAVE,
+  chain: null,
+};
+
+const LOOPED: StuckReferral = {
+  ...INACTIVE,
+  id: 'ref-loop',
+  referringDoctorId: NEURO.id,
+  targetDoctorId: null,
+  parentReferralId: 'ref-0',
+  createdAt: hoursAgo(200),
+  updatedAt: '2026-10-10T08:00:00.000Z',
+  stuckReason: 'loop_flagged',
+  referringDoctor: NEURO,
+  targetDoctor: null,
+  chain: [
+    {
+      referralId: 'ref-0',
+      referringDoctor: GP,
+      targetSpecialty: NEUROLOGY,
+      targetDoctor: NEURO,
+      status: 'completed',
+      createdAt: '2026-09-20T09:00:00.000Z',
+    },
+    {
+      referralId: 'ref-loop',
+      referringDoctor: NEURO,
+      targetSpecialty: CARDIOLOGY,
+      targetDoctor: null,
+      status: 'pending',
+      createdAt: '2026-10-10T08:00:00.000Z',
+    },
+  ],
+};
+
+const NO_DOCTOR: StuckReferral = {
+  ...INACTIVE,
+  id: 'ref-nodoc',
+  targetSpecialtyId: DERMATOLOGY.id,
+  targetDoctorId: null,
+  createdAt: hoursAgo(50),
+  stuckReason: 'no_doctor',
+  targetSpecialty: DERMATOLOGY,
+  targetDoctor: null,
+};
+
+const AVAILABLE: DoctorAvailability = {
+  id: 'doc-amara',
+  fullName: 'Dr. Amara Obi',
+  verificationStatus: 'verified',
+  specialties: [CARDIOLOGY],
+  openSlotCount: 4,
+  nextAvailableAt: '2026-10-20T09:00:00.000Z',
+};
+
+const FULL_DIARY: DoctorAvailability = {
+  ...AVAILABLE,
+  id: 'doc-ben',
+  fullName: 'Dr. Ben Cole',
+  openSlotCount: 0,
+  nextAvailableAt: null,
+};
+
+// Rows the backend should never send, but the picker must survive if it does.
+const UNVERIFIED: DoctorAvailability = { ...AVAILABLE, id: 'doc-pending', fullName: 'Dr. Pending Pat', verificationStatus: 'pending' };
+const WRONG_SPECIALTY: DoctorAvailability = { ...AVAILABLE, id: 'doc-derm', fullName: 'Dr. Dana Reyes', specialties: [DERMATOLOGY] };
+const CURRENT_DOCTOR: DoctorAvailability = { ...AVAILABLE, id: ON_LEAVE.id, fullName: ON_LEAVE.fullName };
+
+const VALID_REASON = 'Dr. Vance is on leave until December';
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="location">{location.pathname + location.search}</output>;
+}
+
+function signIn(role: Role) {
+  useAuthStore.setState({
+    accessToken: 'admin-token',
+    user: { id: `${role}-1`, email: `${role}@docforum.org`, role, createdAt: '', updatedAt: '' },
+  });
+}
+
+function renderConsole(path = '/admin/referrals') {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[path]}>
+        <StuckReferralsConsole />
+        <LocationProbe />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+const currentLocation = () => screen.getByTestId('location').textContent;
+// Not getByRole('status'): the location probe's <output> has that role too.
+const noticeText = () => document.querySelector('section [role="status"]')?.textContent;
+const cardFor = (specialty: string, index = 0) =>
+  screen.getAllByRole('article').filter((card) => within(card).queryByRole('heading', { name: specialty }))[index];
+
+async function openReassign(user: ReturnType<typeof userEvent.setup>) {
+  renderConsole();
+  await screen.findAllByRole('article');
+  // The doctor-inactive referral: the loop-flagged Cardiology one is older, so it's first.
+  await user.click(within(cardFor('Cardiology', 1)).getByRole('button', { name: 'Reassign' }));
+  return screen.findByRole('dialog', { name: 'Reassign referral' });
+}
+
+beforeEach(() => {
+  signIn('admin');
+  vi.mocked(referralsService.listStuckReferrals).mockReset();
+  vi.mocked(referralsService.listReassignCandidates).mockReset();
+  vi.mocked(referralsService.reassignReferral).mockReset();
+  vi.mocked(referralsService.cancelReferral).mockReset();
+  // Deliberately out of order — the console sorts oldest first itself.
+  vi.mocked(referralsService.listStuckReferrals).mockResolvedValue({ items: [INACTIVE, NO_DOCTOR, LOOPED], nextCursor: null });
+  vi.mocked(referralsService.listReassignCandidates).mockResolvedValue([FULL_DIARY, AVAILABLE]);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  useAuthStore.getState().clearSession();
+});
+
+describe('StuckReferralsConsole — queue', () => {
+  it('lists stuck referrals oldest first, with age, target specialty and reason', async () => {
+    renderConsole();
+
+    const cards = await screen.findAllByRole('article');
+    expect(cards.map((card) => within(card).getByRole('heading').textContent)).toEqual([
+      'Cardiology',
+      'Cardiology',
+      'Dermatology',
+    ]);
+    expect(within(cards[0]).getByText('Loop flagged')).toBeInTheDocument();
+    expect(within(cards[0]).getByText('Pending 8 days')).toBeInTheDocument();
+    expect(within(cards[1]).getByText('Doctor inactive')).toBeInTheDocument();
+    expect(within(cards[1]).getByText('Pending 3 d 4 h')).toBeInTheDocument();
+    expect(within(cards[1]).getByText('Dr. Leo Vance')).toBeInTheDocument();
+    expect(within(cards[2]).getByText('No doctor assigned')).toBeInTheDocument();
+
+    expect(referralsService.listStuckReferrals).toHaveBeenCalledWith(
+      { olderThan: '48h', cursor: null },
+      'admin-token',
+      expect.anything(),
+    );
+  });
+
+  it('shows the referral chain for loop-flagged referrals only', async () => {
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    const loopCard = cardFor('Cardiology', 0);
+    const chain = within(loopCard).getByRole('list');
+    const hops = within(chain).getAllByRole('listitem');
+    expect(hops).toHaveLength(2);
+    expect(hops[0]).toHaveTextContent('Dr. Grace Park → Neurology (Dr. Nia Shah)');
+    expect(hops[1]).toHaveTextContent('this referral');
+    expect(hops[1]).toHaveAttribute('aria-current', 'step');
+
+    expect(within(cardFor('Cardiology', 1)).queryByText(/Referral chain/)).not.toBeInTheDocument();
+  });
+
+  it('changes the age threshold through the URL and refetches', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.selectOptions(screen.getByLabelText('Pending for at least'), '7 days');
+
+    await waitFor(() => expect(currentLocation()).toBe('/admin/referrals?olderThan=168h'));
+    await waitFor(() =>
+      expect(vi.mocked(referralsService.listStuckReferrals).mock.lastCall?.[0]).toEqual({ olderThan: '168h', cursor: null }),
+    );
+  });
+
+  it('filters loaded referrals by reason without another request', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+    const calls = vi.mocked(referralsService.listStuckReferrals).mock.calls.length;
+
+    await user.click(screen.getByRole('button', { name: /Loop flagged/ }));
+
+    expect(screen.getAllByRole('article')).toHaveLength(1);
+    expect(screen.getByText('1 of 3 loaded referrals flagged “Loop flagged”')).toBeInTheDocument();
+    expect(currentLocation()).toBe('/admin/referrals?reason=loop_flagged');
+    expect(referralsService.listStuckReferrals).toHaveBeenCalledTimes(calls);
+  });
+
+  it('loads the next page on request', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.listStuckReferrals).mockImplementation(async (query) =>
+      query.cursor === 'page-2' ? { items: [NO_DOCTOR], nextCursor: null } : { items: [INACTIVE], nextCursor: 'page-2' },
+    );
+    renderConsole();
+    await screen.findAllByRole('article');
+
+    await user.click(screen.getByRole('button', { name: 'Load more' }));
+
+    await waitFor(() => expect(screen.getAllByRole('article')).toHaveLength(2));
+    expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
+  });
+
+  it('says so when nobody is stuck', async () => {
+    vi.mocked(referralsService.listStuckReferrals).mockResolvedValue({ items: [], nextCursor: null });
+    renderConsole();
+
+    expect(await screen.findByText(/No referrals have been pending for more than 2 days/)).toBeInTheDocument();
+  });
+
+  it("explains when docforum-core doesn't serve the queue yet", async () => {
+    vi.mocked(referralsService.listStuckReferrals).mockRejectedValue(new ApiError('Not Found', 404));
+    renderConsole();
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(/doesn't serve the stuck-referral queue yet/);
+  });
+});
+
+describe('StuckReferralsConsole — reassign', () => {
+  it('offers only verified doctors in the target specialty, never the current or referring doctor', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.listReassignCandidates).mockResolvedValue([
+      FULL_DIARY,
+      UNVERIFIED,
+      WRONG_SPECIALTY,
+      CURRENT_DOCTOR,
+      { ...AVAILABLE, id: GP.id, fullName: GP.fullName },
+      AVAILABLE,
+    ]);
+    const dialog = await openReassign(user);
+
+    const options = await within(dialog).findAllByRole('radio');
+    expect(options.map((option) => option.closest('label')!.querySelector('span span')!.textContent)).toEqual([
+      'Dr. Amara Obi',
+      'Dr. Ben Cole',
+    ]);
+    expect(within(dialog).queryByText('Dr. Pending Pat')).not.toBeInTheDocument();
+    expect(within(dialog).queryByText('Dr. Dana Reyes')).not.toBeInTheDocument();
+    expect(within(dialog).getByText(/2 doctors returned by docforum-core were hidden/)).toBeInTheDocument();
+    expect(referralsService.listReassignCandidates).toHaveBeenCalledWith(CARDIOLOGY.id, 'admin-token', expect.anything());
+  });
+
+  it('shows each doctor’s availability', async () => {
+    const user = userEvent.setup();
+    const dialog = await openReassign(user);
+
+    expect(await within(dialog).findByText(/^4 open slots in the next 7 days · next/)).toBeInTheDocument();
+    expect(within(dialog).getByText('No open slots in the next 7 days')).toBeInTheDocument();
+  });
+
+  it('requires a doctor and a reason before sending anything', async () => {
+    const user = userEvent.setup();
+    const dialog = await openReassign(user);
+    await within(dialog).findAllByRole('radio');
+
+    await user.click(within(dialog).getByRole('button', { name: 'Reassign referral' }));
+    expect(within(dialog).getByText('Choose a doctor to reassign to.')).toBeInTheDocument();
+    expect(within(dialog).getByText(/Give a reason/)).toBeInTheDocument();
+
+    await user.click(within(dialog).getByRole('radio', { name: /Dr. Amara Obi/ }));
+    await user.type(within(dialog).getByLabelText('Reason for reassigning'), 'on leave');
+    await user.click(within(dialog).getByRole('button', { name: 'Reassign referral' }));
+    expect(within(dialog).getByText('Write at least 10 characters.')).toBeInTheDocument();
+
+    expect(referralsService.reassignReferral).not.toHaveBeenCalled();
+  });
+
+  it('reassigns with the reason and the version the admin saw, then refreshes the queue', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.reassignReferral).mockResolvedValue({ ...INACTIVE, targetDoctorId: AVAILABLE.id });
+    const dialog = await openReassign(user);
+    const listCalls = vi.mocked(referralsService.listStuckReferrals).mock.calls.length;
+
+    await user.click(await within(dialog).findByRole('radio', { name: /Dr. Amara Obi/ }));
+    await user.type(within(dialog).getByLabelText('Reason for reassigning'), `  ${VALID_REASON}  `);
+    await user.click(within(dialog).getByRole('button', { name: 'Reassign referral' }));
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(referralsService.reassignReferral).toHaveBeenCalledWith(
+      'ref-inactive',
+      { targetDoctorId: 'doc-amara', reason: VALID_REASON, expectedUpdatedAt: INACTIVE.updatedAt },
+      'admin-token',
+    );
+    const notice = screen.getByText(/reassigned to Dr. Amara Obi/).closest<HTMLElement>('[role="status"]')!;
+    expect(within(notice).getByRole('link', { name: 'View in audit trail' })).toHaveAttribute(
+      'href',
+      '/admin/audit?entityType=Referral&entityId=ref-inactive',
+    );
+    await waitFor(() => expect(referralsService.listStuckReferrals).toHaveBeenCalledTimes(listCalls + 1));
+  });
+
+  it('closes and refreshes when someone else acted first', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.reassignReferral).mockRejectedValue(new ApiError('Referral was modified', 409));
+    const dialog = await openReassign(user);
+    const listCalls = vi.mocked(referralsService.listStuckReferrals).mock.calls.length;
+
+    await user.click(await within(dialog).findByRole('radio', { name: /Dr. Amara Obi/ }));
+    await user.type(within(dialog).getByLabelText('Reason for reassigning'), VALID_REASON);
+    await user.click(within(dialog).getByRole('button', { name: 'Reassign referral' }));
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(noticeText()).toMatch(/This referral changed while you were working on it/);
+    await waitFor(() => expect(referralsService.listStuckReferrals).toHaveBeenCalledTimes(listCalls + 1));
+  });
+
+  it('keeps the dialog open and reloads doctors when docforum-core refuses the doctor', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.reassignReferral).mockRejectedValue(
+      new ApiError('Doctor is no longer verified in Cardiology', 422),
+    );
+    const dialog = await openReassign(user);
+    await user.click(await within(dialog).findByRole('radio', { name: /Dr. Amara Obi/ }));
+    await user.type(within(dialog).getByLabelText('Reason for reassigning'), VALID_REASON);
+    const candidateCalls = vi.mocked(referralsService.listReassignCandidates).mock.calls.length;
+
+    await user.click(within(dialog).getByRole('button', { name: 'Reassign referral' }));
+
+    expect(await within(dialog).findByText(/refused the reassignment: Doctor is no longer verified/)).toBeInTheDocument();
+    await waitFor(() =>
+      expect(referralsService.listReassignCandidates).toHaveBeenCalledTimes(candidateCalls + 1),
+    );
+  });
+
+  it('suggests cancelling when no other doctor is eligible', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.listReassignCandidates).mockResolvedValue([CURRENT_DOCTOR, UNVERIFIED]);
+    const dialog = await openReassign(user);
+
+    expect(await within(dialog).findByText(/No other verified Cardiology doctor can take this referral/)).toBeInTheDocument();
+    expect(within(dialog).getByRole('button', { name: 'Reassign referral' })).toBeDisabled();
+  });
+
+  it('marks doctors already in a flagged loop', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.listReassignCandidates).mockResolvedValue([
+      AVAILABLE,
+      { ...AVAILABLE, id: GP.id, fullName: GP.fullName },
+    ]);
+    renderConsole();
+    await screen.findAllByRole('article');
+    await user.click(within(cardFor('Cardiology', 0)).getByRole('button', { name: 'Reassign' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Reassign referral' });
+
+    const gpOption = await within(dialog).findByRole('radio', { name: /Dr. Grace Park/ });
+    expect(gpOption.closest('label')).toHaveTextContent("Already in this referral's chain");
+    expect(within(dialog).getByRole('radio', { name: /Dr. Amara Obi/ }).closest('label')).not.toHaveTextContent(
+      'Already in',
+    );
+  });
+
+  it('closes on Escape and returns focus to the button that opened it', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await screen.findAllByRole('article');
+    const opener = within(cardFor('Cardiology', 1)).getByRole('button', { name: 'Reassign' });
+    await user.click(opener);
+    await screen.findByRole('dialog');
+
+    await user.keyboard('{Escape}');
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(opener).toHaveFocus();
+  });
+});
+
+describe('StuckReferralsConsole — cancel', () => {
+  async function openCancel(user: ReturnType<typeof userEvent.setup>) {
+    renderConsole();
+    await screen.findAllByRole('article');
+    await user.click(within(cardFor('Dermatology')).getByRole('button', { name: 'Cancel referral' }));
+    return screen.findByRole('dialog', { name: 'Cancel referral' });
+  }
+
+  it('tells the admin the patient will be notified, and requires a reason', async () => {
+    const user = userEvent.setup();
+    const dialog = await openCancel(user);
+
+    expect(within(dialog).getByText(/notifies the patient/)).toBeInTheDocument();
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel referral' }));
+
+    expect(within(dialog).getByText(/Give a reason/)).toBeInTheDocument();
+    expect(referralsService.cancelReferral).not.toHaveBeenCalled();
+  });
+
+  it('cancels with the reason and confirms the patient is being notified', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.cancelReferral).mockResolvedValue({ ...NO_DOCTOR, status: 'expired' });
+    const dialog = await openCancel(user);
+
+    await user.type(within(dialog).getByLabelText('Reason for cancelling'), 'No dermatologist onboarded in region');
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel referral' }));
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(referralsService.cancelReferral).toHaveBeenCalledWith(
+      'ref-nodoc',
+      { reason: 'No dermatologist onboarded in region', expectedUpdatedAt: NO_DOCTOR.updatedAt },
+      'admin-token',
+    );
+    expect(noticeText()).toMatch(/cancelled. docforum-core will notify the patient/);
+  });
+
+  it('handles a referral that was already resolved elsewhere', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.cancelReferral).mockRejectedValue(new ApiError('Referral not found', 404));
+    const dialog = await openCancel(user);
+
+    await user.type(within(dialog).getByLabelText('Reason for cancelling'), 'No dermatologist onboarded in region');
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel referral' }));
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(noticeText()).toMatch(/another admin, the doctor or the patient acted on it first/);
+  });
+
+  it('stays open after a network failure so the admin can retry safely', async () => {
+    const user = userEvent.setup();
+    vi.mocked(referralsService.cancelReferral)
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockResolvedValueOnce({ ...NO_DOCTOR, status: 'expired' });
+    const dialog = await openCancel(user);
+    await user.type(within(dialog).getByLabelText('Reason for cancelling'), 'No dermatologist onboarded in region');
+
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel referral' }));
+    expect(await within(dialog).findByText(/Couldn't confirm the cancellation/)).toBeInTheDocument();
+
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel referral' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(referralsService.cancelReferral).toHaveBeenCalledTimes(2);
+  });
+
+  it('never writes referral data to the console', async () => {
+    const spies = (['log', 'info', 'debug', 'warn', 'error'] as const).map((method) =>
+      vi.spyOn(console, method).mockImplementation(() => {}),
+    );
+    const user = userEvent.setup();
+    vi.mocked(referralsService.cancelReferral).mockRejectedValue(new ApiError('Conflict', 409));
+    const dialog = await openCancel(user);
+    await user.type(within(dialog).getByLabelText('Reason for cancelling'), 'No dermatologist onboarded in region');
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel referral' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+
+    for (const spy of spies) expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('/admin/referrals route', () => {
+  function renderApp() {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={['/admin/referrals']}>
+          <App />
+          <LocationProbe />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  }
+
+  it('is reachable by admins', async () => {
+    renderApp();
+    expect(await screen.findByRole('heading', { name: 'Stuck referrals' })).toBeInTheDocument();
+  });
+
+  it.each<Role>(['patient', 'doctor', 'facility'])('redirects a %s away without fetching anything', async (role) => {
+    signIn(role);
+    renderApp();
+
+    await waitFor(() => expect(currentLocation()).toBe(`/${role}`));
+    expect(screen.queryByRole('heading', { name: 'Stuck referrals' })).not.toBeInTheDocument();
+    expect(referralsService.listStuckReferrals).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/features/admin-referrals/components/StuckReferralsConsole.tsx b/src/features/admin-referrals/components/StuckReferralsConsole.tsx
new file mode 100644
index 0000000..62309d6
--- /dev/null
+++ b/src/features/admin-referrals/components/StuckReferralsConsole.tsx
@@ -0,0 +1,229 @@
+import { useCallback, useId, useMemo, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { Button } from '../../../components/Button';
+import { Spinner } from '../../../components/Spinner';
+import { useStuckReferrals } from '../hooks/useStuckReferrals';
+import { describeQueueError } from '../errors';
+import { REASONS, STUCK_AGES, parseQueueSearch, sortByAge, toQueueSearch } from '../queue';
+import { CancelReferralDialog } from './CancelReferralDialog';
+import { ReassignDialog } from './ReassignDialog';
+import { StuckReferralCard } from './StuckReferralCard';
+import type { QueueFilters, ReasonFilter } from '../queue';
+import type { StuckAge } from '../../../services/admin-referrals-service';
+import type { StuckReferral, StuckReferralReason } from '../../../types/models';
+import styles from './StuckReferrals.module.css';
+
+type OpenAction = { kind: 'reassign' | 'cancel'; referral: StuckReferral } | null;
+
+interface Notice {
+  tone: 'success' | 'warning';
+  message: string;
+  /** Links the notice to the referral's history in the audit trail. */
+  referralId?: string;
+}
+
+const REASON_KEYS = Object.keys(REASONS) as StuckReferralReason[];
+
+function shortId(id: string): string {
+  return id.length > 8 ? `${id.slice(0, 8)}…` : id;
+}
+
+/**
+ * Admin queue of referrals pending past a threshold — patients stuck
+ * between doctors. Each can be reassigned to an eligible doctor or
+ * cancelled; both need a reason, which docforum-core records in the audit
+ * trail. The age threshold is a server filter; the reason filter applies to
+ * what's loaded, since docforum-core#68 doesn't define one.
+ */
+export function StuckReferralsConsole() {
+  const titleId = useId();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filters = useMemo(() => parseQueueSearch(searchParams), [searchParams]);
+  const [openAction, setOpenAction] = useState<OpenAction>(null);
+  const [notice, setNotice] = useState<Notice | null>(null);
+
+  const queue = useStuckReferrals(filters.olderThan);
+  const loaded = useMemo(() => sortByAge(queue.data?.pages.flatMap((page) => page.items) ?? []), [queue.data]);
+  const visible = filters.reason === 'all' ? loaded : loaded.filter((r) => r.stuckReason === filters.reason);
+  // Ages are shown as of the last fetch, so they agree with what the server judged stuck.
+  const now = queue.dataUpdatedAt || Date.now();
+
+  const counts = useMemo(() => {
+    const byReason = Object.fromEntries(REASON_KEYS.map((key) => [key, 0])) as Record<StuckReferralReason, number>;
+    for (const referral of loaded) if (referral.stuckReason in byReason) byReason[referral.stuckReason] += 1;
+    return byReason;
+  }, [loaded]);
+
+  const updateFilters = (patch: Partial<QueueFilters>) => {
+    setSearchParams(toQueueSearch({ ...filters, ...patch }), { replace: true });
+  };
+
+  const closeDialog = useCallback(() => setOpenAction(null), []);
+  const handleConflict = useCallback((message: string) => {
+    setOpenAction(null);
+    setNotice({ tone: 'warning', message });
+  }, []);
+
+  let body;
+  if (queue.isLoading) {
+    body = (
+      <div className={styles.status} role="status">
+        <Spinner size={20} />
+        <span>Loading stuck referrals…</span>
+      </div>
+    );
+  } else if (queue.error) {
+    body = (
+      <div className={styles.errorBox} role="alert">
+        <p>{describeQueueError(queue.error)}</p>
+        <Button variant="secondary" onClick={() => void queue.refetch()}>
+          Try again
+        </Button>
+      </div>
+    );
+  } else if (visible.length === 0) {
+    const threshold = STUCK_AGES.find((age) => age.value === filters.olderThan)?.label;
+    body = (
+      <p className={styles.empty}>
+        {loaded.length === 0
+          ? `No referrals have been pending for more than ${threshold}. Nobody is stuck.`
+          : `None of the loaded referrals are flagged “${REASONS[filters.reason as StuckReferralReason].label}”.`}
+      </p>
+    );
+  } else {
+    body = (
+      <ul className={styles.list}>
+        {visible.map((referral) => (
+          <li key={referral.id}>
+            <StuckReferralCard
+              referral={referral}
+              now={now}
+              onReassign={(target) => setOpenAction({ kind: 'reassign', referral: target })}
+              onCancel={(target) => setOpenAction({ kind: 'cancel', referral: target })}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <section className={styles.console} aria-labelledby={titleId}>
+      <header>
+        <h1 id={titleId} className={styles.title}>
+          Stuck referrals
+        </h1>
+        <p className={styles.subtitle}>
+          Referrals still pending after the threshold below, oldest first. Each one is a patient waiting between
+          doctors. Reassigning or cancelling is recorded in the audit trail with your reason.
+        </p>
+      </header>
+
+      <div className={styles.toolbar}>
+        <label className={styles.selectField}>
+          <span className={styles.fieldLabel}>Pending for at least</span>
+          <select
+            className={styles.select}
+            value={filters.olderThan}
+            onChange={(event) => updateFilters({ olderThan: event.target.value as StuckAge })}
+          >
+            {STUCK_AGES.map((age) => (
+              <option key={age.value} value={age.value}>
+                {age.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <div className={styles.reasonFilter} role="group" aria-label="Filter by reason">
+          {(['all', ...REASON_KEYS] as ReasonFilter[]).map((key) => (
+            <button
+              key={key}
+              type="button"
+              className={styles.chip}
+              aria-pressed={filters.reason === key}
+              onClick={() => updateFilters({ reason: key })}
+            >
+              {key === 'all' ? 'All' : REASONS[key].label}
+              <span className={styles.chipCount}>{key === 'all' ? loaded.length : counts[key]}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {notice && (
+        <div className={notice.tone === 'success' ? styles.noticeSuccess : styles.noticeWarning} role="status">
+          <p>
+            {notice.message}
+            {notice.referralId && (
+              <>
+                {' '}
+                <Link to={`/admin/audit?entityType=Referral&entityId=${encodeURIComponent(notice.referralId)}`}>
+                  View in audit trail
+                </Link>
+              </>
+            )}
+          </p>
+          <button type="button" className={styles.dismiss} onClick={() => setNotice(null)} aria-label="Dismiss">
+            ×
+          </button>
+        </div>
+      )}
+
+      {!queue.isLoading && !queue.error && loaded.length > 0 && (
+        <p className={styles.summary} aria-live="polite">
+          {filters.reason === 'all'
+            ? `${loaded.length} stuck ${loaded.length === 1 ? 'referral' : 'referrals'} loaded`
+            : `${visible.length} of ${loaded.length} loaded referrals flagged “${REASONS[filters.reason].label}”`}
+          {queue.isFetching && !queue.isFetchingNextPage && ' · updating…'}
+        </p>
+      )}
+
+      {body}
+
+      {queue.hasNextPage && (
+        <div className={styles.loadMore}>
+          <Button
+            variant="secondary"
+            onClick={() => void queue.fetchNextPage()}
+            loading={queue.isFetchingNextPage}
+            disabled={queue.isFetching}
+          >
+            {queue.isFetchingNextPage ? 'Loading…' : 'Load more'}
+          </Button>
+        </div>
+      )}
+
+      {openAction?.kind === 'reassign' && (
+        <ReassignDialog
+          referral={openAction.referral}
+          onClose={closeDialog}
+          onConflict={handleConflict}
+          onReassigned={(doctor) => {
+            setOpenAction(null);
+            setNotice({
+              tone: 'success',
+              message: `Referral ${shortId(openAction.referral.id)} reassigned to ${doctor.fullName}.`,
+              referralId: openAction.referral.id,
+            });
+          }}
+        />
+      )}
+      {openAction?.kind === 'cancel' && (
+        <CancelReferralDialog
+          referral={openAction.referral}
+          onClose={closeDialog}
+          onConflict={handleConflict}
+          onCancelled={() => {
+            setOpenAction(null);
+            setNotice({
+              tone: 'success',
+              message: `Referral ${shortId(openAction.referral.id)} cancelled. docforum-core will notify the patient.`,
+              referralId: openAction.referral.id,
+            });
+          }}
+        />
+      )}
+    </section>
+  );
+}
diff --git a/src/features/admin-referrals/eligibility.test.ts b/src/features/admin-referrals/eligibility.test.ts
new file mode 100644
index 0000000..9ecce3e
--- /dev/null
+++ b/src/features/admin-referrals/eligibility.test.ts
@@ -0,0 +1,136 @@
+import { describe, expect, it } from 'vitest';
+import { chainDoctorIds, eligibleCandidates } from './eligibility';
+import type { DoctorAvailability, Specialty, StuckReferral } from '../../types/models';
+
+const CARDIOLOGY: Specialty = { id: 'spec-cardio', name: 'Cardiology', slug: 'cardiology' };
+const DERMATOLOGY: Specialty = { id: 'spec-derm', name: 'Dermatology', slug: 'dermatology' };
+
+const referral: StuckReferral = {
+  id: 'ref-1',
+  sourceConsultationId: 'consult-1',
+  referringDoctorId: 'doc-gp',
+  targetSpecialtyId: CARDIOLOGY.id,
+  targetDoctorId: 'doc-on-leave',
+  parentReferralId: null,
+  status: 'pending',
+  resultingAppointmentId: null,
+  createdAt: '2026-10-14T09:00:00.000Z',
+  updatedAt: '2026-10-14T09:00:00.000Z',
+  stuckReason: 'doctor_inactive',
+  targetSpecialty: CARDIOLOGY,
+  referringDoctor: { id: 'doc-gp', fullName: 'Dr. Grace Park' },
+  targetDoctor: { id: 'doc-on-leave', fullName: 'Dr. Leo Vance' },
+  chain: null,
+};
+
+function doctor(overrides: Partial<DoctorAvailability> & Pick<DoctorAvailability, 'id' | 'fullName'>): DoctorAvailability {
+  return {
+    verificationStatus: 'verified',
+    specialties: [CARDIOLOGY],
+    openSlotCount: 3,
+    nextAvailableAt: '2026-10-20T09:00:00.000Z',
+    ...overrides,
+  };
+}
+
+const ids = (doctors: DoctorAvailability[]) => doctors.map((d) => d.id);
+
+describe('eligibleCandidates', () => {
+  it('keeps verified doctors in the target specialty', () => {
+    const { eligible, ineligibleCount } = eligibleCandidates(referral, [
+      doctor({ id: 'doc-a', fullName: 'Dr. Amara Obi' }),
+      doctor({ id: 'doc-b', fullName: 'Dr. Ben Cole', specialties: [DERMATOLOGY, CARDIOLOGY] }),
+    ]);
+
+    expect(ids(eligible)).toEqual(['doc-a', 'doc-b']);
+    expect(ineligibleCount).toBe(0);
+  });
+
+  it.each(['pending', 'rejected'] as const)('drops %s doctors even when the backend returns them', (status) => {
+    const { eligible, ineligibleCount } = eligibleCandidates(referral, [
+      doctor({ id: 'doc-a', fullName: 'Dr. Amara Obi', verificationStatus: status }),
+    ]);
+
+    expect(eligible).toEqual([]);
+    expect(ineligibleCount).toBe(1);
+  });
+
+  it('drops verified doctors outside the target specialty', () => {
+    const { eligible, ineligibleCount } = eligibleCandidates(referral, [
+      doctor({ id: 'doc-derm', fullName: 'Dr. Dana Reyes', specialties: [DERMATOLOGY] }),
+      doctor({ id: 'doc-none', fullName: 'Dr. No Specialty', specialties: [] }),
+    ]);
+
+    expect(eligible).toEqual([]);
+    expect(ineligibleCount).toBe(2);
+  });
+
+  it('never offers the doctor the referral is stuck with, or the referring doctor', () => {
+    const { eligible, ineligibleCount } = eligibleCandidates(referral, [
+      doctor({ id: 'doc-on-leave', fullName: 'Dr. Leo Vance' }),
+      doctor({ id: 'doc-gp', fullName: 'Dr. Grace Park' }),
+      doctor({ id: 'doc-a', fullName: 'Dr. Amara Obi' }),
+    ]);
+
+    expect(ids(eligible)).toEqual(['doc-a']);
+    // They're eligible in principle, just not as a reassignment target.
+    expect(ineligibleCount).toBe(0);
+  });
+
+  it('ignores duplicate rows', () => {
+    const { eligible } = eligibleCandidates(referral, [
+      doctor({ id: 'doc-a', fullName: 'Dr. Amara Obi' }),
+      doctor({ id: 'doc-a', fullName: 'Dr. Amara Obi', verificationStatus: 'pending' }),
+    ]);
+
+    expect(ids(eligible)).toEqual(['doc-a']);
+  });
+
+  it('orders by soonest availability, then doctors with no open slots alphabetically', () => {
+    const { eligible } = eligibleCandidates(referral, [
+      doctor({ id: 'full-z', fullName: 'Dr. Zed', openSlotCount: 0, nextAvailableAt: null }),
+      doctor({ id: 'later', fullName: 'Dr. Later', nextAvailableAt: '2026-10-22T09:00:00.000Z' }),
+      doctor({ id: 'full-a', fullName: 'Dr. Abe', openSlotCount: 0, nextAvailableAt: null }),
+      doctor({ id: 'sooner', fullName: 'Dr. Sooner', nextAvailableAt: '2026-10-19T09:00:00.000Z' }),
+    ]);
+
+    expect(ids(eligible)).toEqual(['sooner', 'later', 'full-a', 'full-z']);
+  });
+
+  it('handles an untargeted referral (no doctor assigned)', () => {
+    const untargeted = { ...referral, targetDoctorId: null, targetDoctor: null, stuckReason: 'no_doctor' as const };
+    const { eligible } = eligibleCandidates(untargeted, [doctor({ id: 'doc-a', fullName: 'Dr. Amara Obi' })]);
+
+    expect(ids(eligible)).toEqual(['doc-a']);
+  });
+});
+
+describe('chainDoctorIds', () => {
+  it('collects referring and target doctors across the chain', () => {
+    const looped: StuckReferral = {
+      ...referral,
+      stuckReason: 'loop_flagged',
+      chain: [
+        {
+          referralId: 'ref-0',
+          referringDoctor: { id: 'doc-gp', fullName: 'Dr. Grace Park' },
+          targetSpecialty: CARDIOLOGY,
+          targetDoctor: { id: 'doc-a', fullName: 'Dr. Amara Obi' },
+          status: 'completed',
+          createdAt: '2026-10-01T09:00:00.000Z',
+        },
+        {
+          referralId: 'ref-1',
+          referringDoctor: { id: 'doc-a', fullName: 'Dr. Amara Obi' },
+          targetSpecialty: CARDIOLOGY,
+          targetDoctor: null,
+          status: 'pending',
+          createdAt: '2026-10-14T09:00:00.000Z',
+        },
+      ],
+    };
+
+    expect([...chainDoctorIds(looped)].sort()).toEqual(['doc-a', 'doc-gp']);
+    expect(chainDoctorIds(referral).size).toBe(0);
+  });
+});
diff --git a/src/features/admin-referrals/eligibility.ts b/src/features/admin-referrals/eligibility.ts
new file mode 100644
index 0000000..085252e
--- /dev/null
+++ b/src/features/admin-referrals/eligibility.ts
@@ -0,0 +1,63 @@
+import type { DoctorAvailability, StuckReferral } from '../../types/models';
+
+export interface CandidateList {
+  /** Doctors the referral may be reassigned to, best availability first. */
+  eligible: DoctorAvailability[];
+  /** Returned by docforum-core but not verified in the target specialty. */
+  ineligibleCount: number;
+}
+
+function isVerifiedIn(doctor: DoctorAvailability, specialtyId: string): boolean {
+  return doctor.verificationStatus === 'verified' && doctor.specialties.some((s) => s.id === specialtyId);
+}
+
+// Soonest open slot first; doctors with nothing open in the window go last
+// (still selectable — a referral waiting on a full diary beats one waiting
+// on nobody), then alphabetical so the order is stable.
+function byAvailability(a: DoctorAvailability, b: DoctorAvailability): number {
+  const aOpen = a.openSlotCount > 0 && a.nextAvailableAt !== null;
+  const bOpen = b.openSlotCount > 0 && b.nextAvailableAt !== null;
+  if (aOpen !== bOpen) return aOpen ? -1 : 1;
+  if (aOpen && bOpen && a.nextAvailableAt !== b.nextAvailableAt) {
+    return Date.parse(a.nextAvailableAt!) - Date.parse(b.nextAvailableAt!);
+  }
+  return a.fullName.localeCompare(b.fullName);
+}
+
+/**
+ * The only doctors the reassign picker may offer: verified, in the
+ * referral's target specialty, and neither the doctor it's already stuck
+ * with nor the doctor who referred. docforum-core is asked for exactly this
+ * set, but it's re-checked here so a loose backend filter can never put an
+ * unverified or off-specialty doctor in front of an admin.
+ */
+export function eligibleCandidates(referral: StuckReferral, doctors: DoctorAvailability[]): CandidateList {
+  const excluded = new Set([referral.targetDoctorId, referral.referringDoctorId]);
+  const seen = new Set<string>();
+  const eligible: DoctorAvailability[] = [];
+  let ineligibleCount = 0;
+
+  for (const doctor of doctors) {
+    if (seen.has(doctor.id)) continue;
+    seen.add(doctor.id);
+
+    if (!isVerifiedIn(doctor, referral.targetSpecialtyId)) {
+      ineligibleCount += 1;
+    } else if (!excluded.has(doctor.id)) {
+      eligible.push(doctor);
+    }
+  }
+
+  return { eligible: eligible.sort(byAvailability), ineligibleCount };
+}
+
+/** Doctors already somewhere in a flagged loop — reassigning to one of them
+ * may just restart it, so the picker marks them. */
+export function chainDoctorIds(referral: StuckReferral): Set<string> {
+  const ids = new Set<string>();
+  for (const link of referral.chain ?? []) {
+    ids.add(link.referringDoctor.id);
+    if (link.targetDoctor) ids.add(link.targetDoctor.id);
+  }
+  return ids;
+}
diff --git a/src/features/admin-referrals/errors.ts b/src/features/admin-referrals/errors.ts
new file mode 100644
index 0000000..12ab865
--- /dev/null
+++ b/src/features/admin-referrals/errors.ts
@@ -0,0 +1,56 @@
+import { ApiError } from '../../services/api-client';
+
+export type ReferralAction = 'reassign' | 'cancel';
+
+export interface ActionFailure {
+  /**
+   * `conflict` — someone else got there first (or the referral is no longer
+   * pending): the dialog closes and the queue refetches.
+   * `rejected` — docforum-core refused this particular request; the admin
+   * can change it and resubmit.
+   * `unconfirmed` — we never heard back. Retrying is safe: the request
+   * carries `expectedUpdatedAt`, so a duplicate comes back as a conflict.
+   */
+  kind: 'conflict' | 'rejected' | 'auth' | 'unconfirmed';
+  message: string;
+}
+
+const NOUNS: Record<ReferralAction, string> = {
+  reassign: 'reassignment',
+  cancel: 'cancellation',
+};
+
+export function describeActionError(error: unknown, action: ReferralAction): ActionFailure {
+  if (error instanceof ApiError) {
+    if (error.status === 409 || error.status === 404) {
+      return {
+        kind: 'conflict',
+        message:
+          'This referral changed while you were working on it — another admin, the doctor or the patient acted on it ' +
+          'first. Nothing was changed by you; the queue has been refreshed.',
+      };
+    }
+    if (error.status === 400 || error.status === 422) {
+      return { kind: 'rejected', message: `docforum-core refused the ${NOUNS[action]}: ${error.message}` };
+    }
+    if (error.status === 401 || error.status === 403) {
+      return { kind: 'auth', message: 'Your session no longer has admin access. Sign in again with an admin account.' };
+    }
+  }
+  return {
+    kind: 'unconfirmed',
+    message: `Couldn't confirm the ${NOUNS[action]} — the preview backend may be waking up. Try again; if the first attempt went through you'll be told, it won't be applied twice.`,
+  };
+}
+
+export function describeQueueError(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.status === 401 || error.status === 403) {
+      return 'Your session no longer has admin access. Sign in again with an admin account.';
+    }
+    if (error.status === 404) {
+      return "docforum-core doesn't serve the stuck-referral queue yet (docforum-core#68).";
+    }
+  }
+  return "Couldn't load stuck referrals. The preview backend may be waking up — try again in a minute.";
+}
diff --git a/src/features/admin-referrals/hooks/useStuckReferrals.ts b/src/features/admin-referrals/hooks/useStuckReferrals.ts
new file mode 100644
index 0000000..6dea3e3
--- /dev/null
+++ b/src/features/admin-referrals/hooks/useStuckReferrals.ts
@@ -0,0 +1,81 @@
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import * as referralsService from '../../../services/admin-referrals-service';
+import { ApiError } from '../../../services/api-client';
+import { useAuthStore } from '../../../store/auth-store';
+import type { StuckAge } from '../../../services/admin-referrals-service';
+import type { CancelReferralInput, ReassignReferralInput } from '../../../types/models';
+
+const STUCK_KEY = ['admin', 'referrals', 'stuck'] as const;
+
+// A 4xx won't fix itself on retry — only retry network/5xx failures.
+function shouldRetry(failureCount: number, error: Error): boolean {
+  if (error instanceof ApiError && error.status < 500) return false;
+  return failureCount < 1;
+}
+
+export function useStuckReferrals(olderThan: StuckAge) {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useInfiniteQuery({
+    queryKey: [...STUCK_KEY, olderThan],
+    queryFn: ({ pageParam, signal }) =>
+      referralsService.listStuckReferrals({ olderThan, cursor: pageParam }, accessToken!, signal),
+    initialPageParam: null as string | null,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+    enabled: Boolean(accessToken),
+    retry: shouldRetry,
+  });
+}
+
+/** Availability moves quickly, so this always refetches when the picker opens. */
+export function useReassignCandidates(specialtyId: string) {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: ['admin', 'referrals', 'candidates', specialtyId],
+    queryFn: ({ signal }) => referralsService.listReassignCandidates(specialtyId, accessToken!, signal),
+    enabled: Boolean(accessToken && specialtyId),
+    staleTime: 0,
+    refetchOnMount: 'always',
+    retry: shouldRetry,
+  });
+}
+
+// Whatever happened — success, or a 409/404 telling us the referral moved
+// on — the queue we're showing is out of date. A network failure leaves it
+// alone: we don't know the outcome, and a retry will find out.
+function isSettledOnServer(error: unknown): boolean {
+  return error instanceof ApiError && (error.status === 409 || error.status === 404);
+}
+
+export function useReassignReferral() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ referralId, input }: { referralId: string; input: ReassignReferralInput }) =>
+      referralsService.reassignReferral(referralId, input, accessToken!),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: STUCK_KEY }),
+    onError: (error) => {
+      if (isSettledOnServer(error)) return queryClient.invalidateQueries({ queryKey: STUCK_KEY });
+      // A 422 usually means the chosen doctor stopped being eligible.
+      if (error instanceof ApiError && error.status === 422) {
+        return queryClient.invalidateQueries({ queryKey: ['admin', 'referrals', 'candidates'] });
+      }
+    },
+  });
+}
+
+export function useCancelReferral() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ referralId, input }: { referralId: string; input: CancelReferralInput }) =>
+      referralsService.cancelReferral(referralId, input, accessToken!),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: STUCK_KEY }),
+    onError: (error) => {
+      if (isSettledOnServer(error)) return queryClient.invalidateQueries({ queryKey: STUCK_KEY });
+    },
+  });
+}
diff --git a/src/features/admin-referrals/queue.test.ts b/src/features/admin-referrals/queue.test.ts
new file mode 100644
index 0000000..f8097bc
--- /dev/null
+++ b/src/features/admin-referrals/queue.test.ts
@@ -0,0 +1,128 @@
+import { describe, expect, it } from 'vitest';
+import { ageTone, formatAge, hoursSince, loopReturnIndexes, parseQueueSearch, toQueueSearch } from './queue';
+import { normaliseReason, validateReason } from './reason';
+import { describeActionError } from './errors';
+import { ApiError } from '../../services/api-client';
+import type { ReferralChainLink } from '../../types/models';
+
+describe('queue URL filters', () => {
+  it('defaults to 48h and every reason', () => {
+    expect(parseQueueSearch(new URLSearchParams())).toEqual({ olderThan: '48h', reason: 'all' });
+  });
+
+  it('reads known values', () => {
+    expect(parseQueueSearch(new URLSearchParams('olderThan=168h&reason=loop_flagged'))).toEqual({
+      olderThan: '168h',
+      reason: 'loop_flagged',
+    });
+  });
+
+  it('falls back on anything unrecognised in a hand-edited link', () => {
+    expect(parseQueueSearch(new URLSearchParams('olderThan=1y&reason=toString'))).toEqual({
+      olderThan: '48h',
+      reason: 'all',
+    });
+  });
+
+  it('leaves defaults out of the URL', () => {
+    expect(toQueueSearch({ olderThan: '48h', reason: 'all' }).toString()).toBe('');
+    expect(toQueueSearch({ olderThan: '72h', reason: 'no_doctor' }).toString()).toBe('olderThan=72h&reason=no_doctor');
+  });
+});
+
+describe('referral age', () => {
+  const now = Date.parse('2026-10-18T12:00:00.000Z');
+
+  it('counts whole hours and rejects unparseable dates', () => {
+    expect(hoursSince('2026-10-16T11:30:00.000Z', now)).toBe(48);
+    expect(hoursSince('not a date', now)).toBeNull();
+    // Clock skew shouldn't produce a negative age.
+    expect(hoursSince('2026-10-18T12:05:00.000Z', now)).toBe(0);
+  });
+
+  it.each([
+    [0, 'under 1 h'],
+    [47, '47 h'],
+    [48, '2 days'],
+    [76, '3 d 4 h'],
+    [170, '7 days'],
+  ])('formats %i hours as "%s"', (hours, label) => {
+    expect(formatAge(hours)).toBe(label);
+  });
+
+  it('escalates the tone at 3 and 7 days', () => {
+    expect(ageTone(71)).toBe('elevated');
+    expect(ageTone(72)).toBe('high');
+    expect(ageTone(168)).toBe('critical');
+  });
+});
+
+describe('loopReturnIndexes', () => {
+  const gp = { id: 'doc-gp', fullName: 'Dr. Grace Park' };
+  const cardio = { id: 'spec-cardio', name: 'Cardiology', slug: 'cardiology' };
+  const neuro = { id: 'spec-neuro', name: 'Neurology', slug: 'neurology' };
+  const amara = { id: 'doc-a', fullName: 'Dr. Amara Obi' };
+  const link = (overrides: Partial<ReferralChainLink>): ReferralChainLink => ({
+    referralId: 'ref',
+    referringDoctor: gp,
+    targetSpecialty: cardio,
+    targetDoctor: null,
+    status: 'completed',
+    createdAt: '2026-10-01T00:00:00.000Z',
+    ...overrides,
+  });
+
+  it('marks the hop that returns to an earlier specialty', () => {
+    const chain = [
+      link({ referralId: 'r1', targetSpecialty: cardio, targetDoctor: amara }),
+      link({ referralId: 'r2', referringDoctor: amara, targetSpecialty: neuro }),
+      link({ referralId: 'r3', referringDoctor: amara, targetSpecialty: cardio }),
+    ];
+    expect([...loopReturnIndexes(chain)]).toEqual([2]);
+  });
+
+  it('marks the hop that sends the patient back to an earlier doctor', () => {
+    const chain = [
+      link({ referralId: 'r1', targetSpecialty: cardio, targetDoctor: amara }),
+      link({ referralId: 'r2', referringDoctor: amara, targetSpecialty: neuro, targetDoctor: gp }),
+    ];
+    expect([...loopReturnIndexes(chain)]).toEqual([1]);
+  });
+
+  it('finds nothing in a straight chain', () => {
+    expect(loopReturnIndexes([link({ referralId: 'r1' })]).size).toBe(0);
+  });
+});
+
+describe('action reasons', () => {
+  it('requires a meaningful, bounded reason', () => {
+    expect(validateReason('   ')).toMatch(/Give a reason/);
+    expect(validateReason('too short')).toMatch(/at least 10/);
+    expect(validateReason('x'.repeat(501))).toMatch(/under 500/);
+    expect(validateReason('Specialist on extended leave')).toBeNull();
+  });
+
+  it('collapses whitespace before sending', () => {
+    expect(normaliseReason('  Doctor on\n\n leave   until Nov ')).toBe('Doctor on leave until Nov');
+  });
+});
+
+describe('describeActionError', () => {
+  it.each([409, 404])('treats %i as someone else having acted', (status) => {
+    expect(describeActionError(new ApiError('Conflict', status), 'reassign').kind).toBe('conflict');
+  });
+
+  it('surfaces the server message for a refused request', () => {
+    const outcome = describeActionError(new ApiError('Doctor is not verified in Cardiology', 422), 'reassign');
+    expect(outcome).toEqual({
+      kind: 'rejected',
+      message: 'docforum-core refused the reassignment: Doctor is not verified in Cardiology',
+    });
+  });
+
+  it('never claims success or failure when the request went unanswered', () => {
+    const outcome = describeActionError(new TypeError('Failed to fetch'), 'cancel');
+    expect(outcome.kind).toBe('unconfirmed');
+    expect(outcome.message).toMatch(/Couldn't confirm the cancellation/);
+  });
+});
diff --git a/src/features/admin-referrals/queue.ts b/src/features/admin-referrals/queue.ts
new file mode 100644
index 0000000..3cbf2ec
--- /dev/null
+++ b/src/features/admin-referrals/queue.ts
@@ -0,0 +1,112 @@
+import type { StuckAge } from '../../services/admin-referrals-service';
+import type { ReferralChainLink, StuckReferral, StuckReferralReason } from '../../types/models';
+
+export const STUCK_AGES: { value: StuckAge; label: string }[] = [
+  { value: '24h', label: '1 day' },
+  { value: '48h', label: '2 days' },
+  { value: '72h', label: '3 days' },
+  { value: '168h', label: '7 days' },
+];
+
+// docforum-core#68's own example threshold.
+export const DEFAULT_AGE: StuckAge = '48h';
+
+export const REASONS: Record<StuckReferralReason, { label: string; description: string }> = {
+  no_doctor: {
+    label: 'No doctor',
+    description: 'Routing found no available doctor in the target specialty.',
+  },
+  doctor_inactive: {
+    label: 'Doctor inactive',
+    description: "The assigned doctor isn't taking referrals (on leave or deactivated).",
+  },
+  loop_flagged: {
+    label: 'Loop flagged',
+    description: 'This referral returns to a doctor or specialty already in its chain.',
+  },
+};
+
+export type ReasonFilter = StuckReferralReason | 'all';
+
+export interface QueueFilters {
+  olderThan: StuckAge;
+  reason: ReasonFilter;
+}
+
+function isStuckAge(value: string | null): value is StuckAge {
+  return STUCK_AGES.some((age) => age.value === value);
+}
+
+function isReason(value: string | null): value is StuckReferralReason {
+  return value !== null && Object.hasOwn(REASONS, value);
+}
+
+/** Anything unrecognised in a hand-edited link falls back to the default. */
+export function parseQueueSearch(params: URLSearchParams): QueueFilters {
+  const olderThan = params.get('olderThan');
+  const reason = params.get('reason');
+  return {
+    olderThan: isStuckAge(olderThan) ? olderThan : DEFAULT_AGE,
+    reason: isReason(reason) ? reason : 'all',
+  };
+}
+
+/** Defaults are left out so the plain `/admin/referrals` link stays canonical. */
+export function toQueueSearch(filters: QueueFilters): URLSearchParams {
+  const params = new URLSearchParams();
+  if (filters.olderThan !== DEFAULT_AGE) params.set('olderThan', filters.olderThan);
+  if (filters.reason !== 'all') params.set('reason', filters.reason);
+  return params;
+}
+
+const HOUR_MS = 60 * 60 * 1000;
+
+/** Whole hours since `since`, or null for an unparseable timestamp. */
+export function hoursSince(since: string, now: number): number | null {
+  const start = Date.parse(since);
+  if (Number.isNaN(start)) return null;
+  return Math.max(0, Math.floor((now - start) / HOUR_MS));
+}
+
+export function formatAge(hours: number): string {
+  if (hours < 1) return 'under 1 h';
+  if (hours < 48) return `${hours} h`;
+  const days = Math.floor(hours / 24);
+  const rest = hours % 24;
+  // Past a week the extra hours are noise.
+  return days < 7 && rest > 0 ? `${days} d ${rest} h` : `${days} days`;
+}
+
+export type AgeTone = 'elevated' | 'high' | 'critical';
+
+export function ageTone(hours: number): AgeTone {
+  if (hours >= 168) return 'critical';
+  if (hours >= 72) return 'high';
+  return 'elevated';
+}
+
+/** Oldest first — the backend should already send them that way, but the
+ * console promises "by age" across every page loaded so far. */
+export function sortByAge(referrals: StuckReferral[]): StuckReferral[] {
+  return [...referrals].sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt));
+}
+
+/**
+ * Indexes of chain links that go back to a doctor or specialty an earlier
+ * link already went to — the point where the loop closes.
+ */
+export function loopReturnIndexes(chain: ReferralChainLink[]): Set<number> {
+  const doctors = new Set<string>();
+  const specialties = new Set<string>();
+  const returns = new Set<number>();
+
+  chain.forEach((link, index) => {
+    const doctorId = link.targetDoctor?.id;
+    if (specialties.has(link.targetSpecialty.id) || (doctorId && doctors.has(doctorId))) returns.add(index);
+    specialties.add(link.targetSpecialty.id);
+    doctors.add(link.referringDoctor.id);
+    if (doctorId) doctors.add(doctorId);
+  });
+
+  return returns;
+}
diff --git a/src/features/admin-referrals/reason.ts b/src/features/admin-referrals/reason.ts
new file mode 100644
index 0000000..559359e
--- /dev/null
+++ b/src/features/admin-referrals/reason.ts
@@ -0,0 +1,17 @@
+// Reasons land in docforum-core's audit trail next to the admin's id, so
+// they need to say something ("x" doesn't), but stay a sentence or two.
+export const REASON_MIN_LENGTH = 10;
+export const REASON_MAX_LENGTH = 500;
+
+/** Collapses runs of whitespace (including pasted newlines) to one space. */
+export function normaliseReason(raw: string): string {
+  return raw.replace(/\s+/g, ' ').trim();
+}
+
+export function validateReason(raw: string): string | null {
+  const reason = normaliseReason(raw);
+  if (!reason) return 'Give a reason — it is recorded in the audit trail.';
+  if (reason.length < REASON_MIN_LENGTH) return `Write at least ${REASON_MIN_LENGTH} characters.`;
+  if (reason.length > REASON_MAX_LENGTH) return `Keep it under ${REASON_MAX_LENGTH} characters.`;
+  return null;
+}
diff --git a/src/features/admin-system/components/JobCard.tsx b/src/features/admin-system/components/JobCard.tsx
new file mode 100644
index 0000000..043686b
--- /dev/null
+++ b/src/features/admin-system/components/JobCard.tsx
@@ -0,0 +1,89 @@
+import { useId } from 'react';
+import { Button } from '../../../components/Button';
+import { JOB_HEALTH, jobHealth, overdueBy } from '../status';
+import { StatusPill } from './StatusPill';
+import { TimeAgo } from './TimeAgo';
+import type { BackgroundJob } from '../../../types/models';
+import styles from './SystemHealth.module.css';
+
+interface JobCardProps {
+  job: BackgroundJob;
+  now: number;
+  onRunNow: (job: BackgroundJob) => void;
+}
+
+function NextRun({ job, now }: { job: BackgroundJob; now: number }) {
+  if (!job.nextRunAt) return <>{job.running ? 'After the current run' : 'Not scheduled'}</>;
+  if (overdueBy(job, now) > 0) {
+    return (
+      <span className={styles.overdue}>
+        was due <TimeAgo iso={job.nextRunAt} now={now} />
+      </span>
+    );
+  }
+  return <TimeAgo iso={job.nextRunAt} now={now} />;
+}
+
+export function JobCard({ job, now, onRunNow }: JobCardProps) {
+  const nameId = useId();
+  const health = JOB_HEALTH[jobHealth(job, now)];
+  const success = job.lastSuccess;
+  const failure = job.lastFailure;
+
+  return (
+    <article className={styles.job} aria-labelledby={nameId} data-tone={health.tone}>
+      <div className={styles.jobTop}>
+        <div>
+          <h3 id={nameId} className={styles.jobName}>
+            {job.name}
+          </h3>
+          <p className={styles.schedule}>{job.schedule}</p>
+        </div>
+        <StatusPill tone={health.tone} label={health.label} />
+      </div>
+
+      <dl className={styles.facts}>
+        <div>
+          <dt>Last success</dt>
+          <dd>
+            {success ? (
+              <>
+                <TimeAgo iso={success.startedAt} now={now} />
+                {success.itemsProcessed !== null && (
+                  <span className={styles.factNote}>
+                    {success.itemsProcessed} {success.itemsProcessed === 1 ? 'item' : 'items'} processed
+                  </span>
+                )}
+              </>
+            ) : (
+              'Never'
+            )}
+          </dd>
+        </div>
+        <div>
+          <dt>Last failure</dt>
+          <dd className={failure ? styles.failureFact : undefined}>
+            {failure ? <TimeAgo iso={failure.startedAt} now={now} /> : 'None recorded'}
+          </dd>
+        </div>
+        <div>
+          <dt>Next run</dt>
+          <dd>
+            <NextRun job={job} now={now} />
+          </dd>
+        </div>
+      </dl>
+
+      <div className={styles.jobActions}>
+        <Button
+          variant="secondary"
+          onClick={() => onRunNow(job)}
+          disabled={job.running}
+          aria-describedby={nameId}
+        >
+          {job.running ? 'Running…' : 'Run now'}
+        </Button>
+      </div>
+    </article>
+  );
+}
diff --git a/src/features/admin-system/components/JobsPanel.tsx b/src/features/admin-system/components/JobsPanel.tsx
new file mode 100644
index 0000000..337adea
--- /dev/null
+++ b/src/features/admin-system/components/JobsPanel.tsx
@@ -0,0 +1,69 @@
+import { useId } from 'react';
+import { Button } from '../../../components/Button';
+import { Spinner } from '../../../components/Spinner';
+import { describeLoadError, isNotServed } from '../errors';
+import { JobCard } from './JobCard';
+import { TimeAgo } from './TimeAgo';
+import type { useJobs } from '../hooks/useSystemHealth';
+import type { BackgroundJob } from '../../../types/models';
+import styles from './SystemHealth.module.css';
+
+interface JobsPanelProps {
+  jobs: ReturnType<typeof useJobs>;
+  now: number;
+  onRunNow: (job: BackgroundJob) => void;
+}
+
+export function JobsPanel({ jobs, now, onRunNow }: JobsPanelProps) {
+  const titleId = useId();
+  const list = jobs.data;
+
+  let body;
+  if (jobs.isLoading) {
+    body = (
+      <div className={styles.status} role="status">
+        <Spinner size={20} />
+        <span>Loading background jobs…</span>
+      </div>
+    );
+  } else if (jobs.error && !list) {
+    body = (
+      <div className={isNotServed(jobs.error) ? styles.notServed : styles.errorBox} role="alert">
+        <p>{describeLoadError(jobs.error, 'jobs')}</p>
+        <Button variant="secondary" onClick={() => void jobs.refetch()} loading={jobs.isFetching}>
+          Try again
+        </Button>
+      </div>
+    );
+  } else if (list && list.length === 0) {
+    body = <p className={styles.emptyInline}>docforum-core has no background jobs registered.</p>;
+  } else if (list) {
+    body = (
+      <ul className={styles.jobs}>
+        {list.map((job) => (
+          <li key={job.name}>
+            <JobCard job={job} now={now} onRunNow={onRunNow} />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <section className={styles.panel} aria-labelledby={titleId}>
+      <div className={styles.panelHead}>
+        <h2 id={titleId} className={styles.panelTitle}>
+          Background jobs
+        </h2>
+      </div>
+      {/* A failed poll keeps the last list on screen, but says it's stale. */}
+      {jobs.error && list && (
+        <p className={styles.staleBanner} role="alert">
+          Couldn't refresh the job list — showing what docforum-core reported{' '}
+          <TimeAgo iso={new Date(jobs.dataUpdatedAt).toISOString()} now={now} />.
+        </p>
+      )}
+      {body}
+    </section>
+  );
+}
diff --git a/src/features/admin-system/components/ReadinessPanel.tsx b/src/features/admin-system/components/ReadinessPanel.tsx
new file mode 100644
index 0000000..ea0b3b6
--- /dev/null
+++ b/src/features/admin-system/components/ReadinessPanel.tsx
@@ -0,0 +1,98 @@
+import { useId } from 'react';
+import { Button } from '../../../components/Button';
+import { Spinner } from '../../../components/Spinner';
+import { useSlowRequestHint } from '../../../hooks/useSlowRequestHint';
+import { readinessVerdict } from '../errors';
+import { COLD_START_THRESHOLD_MS, checkDisplay, checkName, formatDuration, readinessDisplay } from '../status';
+import { StatusPill } from './StatusPill';
+import { TimeAgo } from './TimeAgo';
+import type { useReadiness } from '../hooks/useSystemHealth';
+import styles from './SystemHealth.module.css';
+
+interface ReadinessPanelProps {
+  readiness: ReturnType<typeof useReadiness>;
+  now: number;
+}
+
+export function ReadinessPanel({ readiness, now }: ReadinessPanelProps) {
+  const titleId = useId();
+  const slow = useSlowRequestHint(readiness.isLoading);
+  const timed = readiness.data;
+  const verdict = readinessVerdict(timed?.report, readiness.error);
+
+  let body;
+  if (readiness.isLoading) {
+    body = (
+      <div className={styles.status} role="status">
+        <Spinner size={20} />
+        <span>
+          {slow
+            ? 'Still waiting — the preview backend sleeps when idle and can take about a minute to wake up.'
+            : 'Checking readiness…'}
+        </span>
+      </div>
+    );
+  } else if (readiness.error) {
+    body = (
+      <div className={verdict.tone === 'neutral' ? styles.notServed : styles.errorBox} role="alert">
+        <p>{verdict.description}</p>
+        {timed && (
+          <p className={styles.staleNote}>
+            The last check that answered said “{readinessDisplay(timed.report.status).label}”,{' '}
+            <TimeAgo iso={timed.report.checkedAt} now={now} />.
+          </p>
+        )}
+        <Button variant="secondary" onClick={() => void readiness.refetch()} loading={readiness.isFetching}>
+          Check again
+        </Button>
+      </div>
+    );
+  } else if (timed) {
+    const { report, respondedInMs } = timed;
+    body = (
+      <>
+        <p className={styles.verdictText}>{verdict.description}</p>
+        <p className={styles.meta}>
+          Checked <TimeAgo iso={report.checkedAt} now={now} /> · responded in {formatDuration(respondedInMs)}
+          {respondedInMs >= COLD_START_THRESHOLD_MS && (
+            <span className={styles.coldStart}> — slow enough to be a cold start of the free-tier backend</span>
+          )}
+        </p>
+        {report.checks.length === 0 ? (
+          <p className={styles.emptyInline}>docforum-core returned no individual checks.</p>
+        ) : (
+          <ul className={styles.checks}>
+            {report.checks.map((check) => {
+              const display = checkDisplay(check);
+              return (
+                <li key={check.name} className={styles.check} data-tone={display.tone}>
+                  <div className={styles.checkHead}>
+                    <span className={styles.checkName}>{checkName(check.name)}</span>
+                    <span className={styles.checkKind}>{check.required ? 'Required' : 'Optional'}</span>
+                  </div>
+                  <StatusPill tone={display.tone} label={display.label} />
+                  <span className={styles.checkDuration}>
+                    {check.durationMs === null ? '—' : formatDuration(check.durationMs)}
+                  </span>
+                  {check.message && <p className={styles.checkMessage}>{check.message}</p>}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <section className={styles.panel} aria-labelledby={titleId}>
+      <div className={styles.panelHead}>
+        <h2 id={titleId} className={styles.panelTitle}>
+          Readiness checks
+        </h2>
+        {!readiness.isLoading && <StatusPill tone={verdict.tone} label={verdict.label} />}
+      </div>
+      {body}
+    </section>
+  );
+}
diff --git a/src/features/admin-system/components/RecentFailures.tsx b/src/features/admin-system/components/RecentFailures.tsx
new file mode 100644
index 0000000..3b53868
--- /dev/null
+++ b/src/features/admin-system/components/RecentFailures.tsx
@@ -0,0 +1,45 @@
+import { useId } from 'react';
+import { recentFailures } from '../status';
+import { TimeAgo } from './TimeAgo';
+import type { BackgroundJob } from '../../../types/models';
+import styles from './SystemHealth.module.css';
+
+interface RecentFailuresProps {
+  jobs: BackgroundJob[];
+  now: number;
+}
+
+/** Built from each job's latest failure — docforum-core#100 doesn't
+ * describe a run-history listing, only last success/failure per job. */
+export function RecentFailures({ jobs, now }: RecentFailuresProps) {
+  const titleId = useId();
+  const failures = recentFailures(jobs, now);
+
+  return (
+    <section className={styles.panel} aria-labelledby={titleId}>
+      <div className={styles.panelHead}>
+        <h2 id={titleId} className={styles.panelTitle}>
+          Recent failures
+        </h2>
+        <span className={styles.panelHint}>Latest failure per job, last 24 hours</span>
+      </div>
+      {failures.length === 0 ? (
+        <p className={styles.emptyInline}>No background job has failed in the last 24 hours.</p>
+      ) : (
+        <ol className={styles.failures}>
+          {failures.map((run) => (
+            <li key={run.id} className={styles.failure}>
+              <div className={styles.failureHead}>
+                <span className={styles.failureJob}>{run.job}</span>
+                <span className={styles.failureMeta}>
+                  <TimeAgo iso={run.startedAt} now={now} /> · {run.trigger === 'manual' ? 'manual run' : 'scheduled run'}
+                </span>
+              </div>
+              <p className={styles.failureError}>{run.error?.trim() || 'No error message recorded.'}</p>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
diff --git a/src/features/admin-system/components/RunJobDialog.tsx b/src/features/admin-system/components/RunJobDialog.tsx
new file mode 100644
index 0000000..c89f943
--- /dev/null
+++ b/src/features/admin-system/components/RunJobDialog.tsx
@@ -0,0 +1,156 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import { Button } from '../../../components/Button';
+import { useSlowRequestHint } from '../../../hooks/useSlowRequestHint';
+import { useRunJob } from '../hooks/useSystemHealth';
+import { describeRun, describeRunError } from '../errors';
+import { overdueBy } from '../status';
+import { StatusPill } from './StatusPill';
+import { TimeAgo } from './TimeAgo';
+import type { RunOutcome } from '../errors';
+import type { BackgroundJob } from '../../../types/models';
+import styles from './SystemHealth.module.css';
+
+const FOCUSABLE = 'button:not([disabled]), a[href]';
+
+interface RunJobDialogProps {
+  job: BackgroundJob;
+  now: number;
+  onClose: () => void;
+}
+
+/**
+ * Confirms a manual run, then shows docforum-core's answer in place, so the
+ * admin reads the result before the dialog goes away. It can't be
+ * dismissed while the request is in flight.
+ */
+export function RunJobDialog({ job, now, onClose }: RunJobDialogProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const resultId = useId();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const run = useRunJob();
+  const slow = useSlowRequestHint(run.isPending);
+  const [outcome, setOutcome] = useState<RunOutcome | null>(null);
+
+  // Focus goes back to whatever opened the dialog when it closes.
+  useEffect(() => {
+    const opener = document.activeElement as HTMLElement | null;
+    return () => opener?.focus();
+  }, []);
+
+  // The first button is Cancel while confirming — so Enter on a freshly
+  // opened dialog never fires a job — and Close once the result is in.
+  useEffect(() => {
+    panelRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+  }, [outcome]);
+
+  const handleRun = async () => {
+    try {
+      setOutcome(describeRun(await run.mutateAsync(job.name)));
+    } catch (error) {
+      setOutcome(describeRunError(error, job.name));
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      if (!run.isPending) onClose();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+
+    const focusable = Array.from(panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  return (
+    <div className={styles.overlay}>
+      <div
+        ref={panelRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={outcome ? resultId : descriptionId}
+        className={styles.dialog}
+        onKeyDown={handleKeyDown}
+      >
+        <h2 id={titleId} className={styles.dialogTitle}>
+          {outcome ? `Manual run: ${job.name}` : `Run ${job.name} now?`}
+        </h2>
+
+        {outcome ? (
+          <div id={resultId} className={styles.result} data-tone={outcome.tone} role="status">
+            <StatusPill tone={outcome.tone} label={outcome.title} />
+            <p>{outcome.detail}</p>
+          </div>
+        ) : (
+          <div id={descriptionId} className={styles.dialogDescription}>
+            <p>
+              This runs the job immediately, outside its schedule ({job.schedule}). It does the job's real work — whatever
+              it normally changes, it changes now.
+            </p>
+            <dl className={styles.dialogFacts}>
+              <div>
+                <dt>Last run</dt>
+                <dd>{job.lastRun ? <TimeAgo iso={job.lastRun.startedAt} now={now} /> : 'Never'}</dd>
+              </div>
+              <div>
+                <dt>Next scheduled run</dt>
+                <dd>
+                  {job.nextRunAt ? (
+                    <>
+                      {overdueBy(job, now) > 0 && 'was due '}
+                      <TimeAgo iso={job.nextRunAt} now={now} />
+                    </>
+                  ) : (
+                    'Not scheduled'
+                  )}
+                </dd>
+              </div>
+            </dl>
+            <p className={styles.dialogNote}>
+              If another instance is already running it, docforum-core won't start a second run.
+            </p>
+          </div>
+        )}
+
+        {run.isPending && (
+          <p className={styles.inlineStatus} role="status">
+            {slow ? 'Still running — long jobs, or a cold-starting backend, can take a minute.' : 'Waiting for docforum-core…'}
+          </p>
+        )}
+
+        <div className={styles.dialogActions}>
+          {outcome ? (
+            <Button type="button" onClick={onClose}>
+              Close
+            </Button>
+          ) : (
+            <>
+              <Button type="button" variant="secondary" onClick={onClose} disabled={run.isPending}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={() => void handleRun()} loading={run.isPending}>
+                {run.isPending ? 'Running…' : 'Run now'}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/admin-system/components/StatusPill.tsx b/src/features/admin-system/components/StatusPill.tsx
new file mode 100644
index 0000000..9d9d343
--- /dev/null
+++ b/src/features/admin-system/components/StatusPill.tsx
@@ -0,0 +1,12 @@
+import type { Tone } from '../status';
+import styles from './SystemHealth.module.css';
+
+/** Colour backs up the label, never replaces it. */
+export function StatusPill({ tone, label }: { tone: Tone; label: string }) {
+  return (
+    <span className={styles.pill} data-tone={tone}>
+      <span className={styles.pillDot} aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
diff --git a/src/features/admin-system/components/SystemHealth.module.css b/src/features/admin-system/components/SystemHealth.module.css
new file mode 100644
index 0000000..26dd310
--- /dev/null
+++ b/src/features/admin-system/components/SystemHealth.module.css
@@ -0,0 +1,625 @@
+/* A status board read at a glance: three overview tiles, then the detail.
+   Every status carries a `data-tone`, so one set of colours means the same
+   thing in a pill, a tile, a job card or a run result. */
+.page {
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+}
+
+.backLink {
+  display: inline-block;
+  margin-bottom: var(--space-4);
+  font-size: var(--text-sm);
+}
+
+:is(.pill, .tile, .check, .job, .result)[data-tone='ok'] {
+  --tone-fg: var(--color-success);
+  --tone-bg: var(--color-success-surface);
+}
+
+:is(.pill, .tile, .check, .job, .result)[data-tone='info'] {
+  --tone-fg: var(--color-accent);
+  --tone-bg: var(--color-accent-subtle);
+}
+
+:is(.pill, .tile, .check, .job, .result)[data-tone='warning'] {
+  --tone-fg: var(--color-warning);
+  --tone-bg: var(--color-warning-surface);
+}
+
+:is(.pill, .tile, .check, .job, .result)[data-tone='danger'] {
+  --tone-fg: var(--color-danger);
+  --tone-bg: var(--color-danger-surface);
+}
+
+:is(.pill, .tile, .check, .job, .result)[data-tone='neutral'] {
+  --tone-fg: var(--color-text-muted);
+  --tone-bg: var(--color-surface-alt);
+}
+
+.console {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/* ---- Header ---- */
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: var(--space-4);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--text-2xl);
+}
+
+.subtitle {
+  margin: var(--space-2) 0 0;
+  max-width: 52ch;
+  font-size: var(--text-sm);
+}
+
+.refresh {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-1);
+  text-align: right;
+}
+
+.refreshText,
+.refreshHint {
+  margin: 0;
+  font-size: var(--text-xs);
+}
+
+.refreshText {
+  color: var(--color-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.refreshHint {
+  margin-bottom: var(--space-2);
+  color: var(--color-text-muted);
+}
+
+/* ---- Status pill ---- */
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0.65rem;
+  border-radius: var(--radius-full);
+  background: var(--tone-bg);
+  color: var(--tone-fg);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.pillDot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+
+.pill[data-tone='info'] .pillDot {
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pill[data-tone='info'] .pillDot {
+    animation: none;
+  }
+}
+
+/* ---- Overview ---- */
+
+.overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
+  gap: var(--space-3);
+}
+
+.tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-top: 3px solid var(--tone-fg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.tileLabel {
+  margin: 0;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.tileValue {
+  min-height: 2.25rem;
+  display: flex;
+  align-items: center;
+}
+
+.tileCount {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  line-height: 1;
+  color: var(--tone-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+.tileDetail {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+/* ---- Panels ---- */
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.panelHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+
+.panelHint {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  padding: var(--space-6);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+
+.errorBox,
+.notServed {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+}
+
+.errorBox {
+  background: var(--color-danger-surface);
+}
+
+/* A missing endpoint is expected while the backend catches up — not red. */
+.notServed {
+  background: var(--color-surface);
+  border: 1px dashed var(--color-border-strong);
+}
+
+.errorBox p,
+.notServed p {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.staleNote {
+  font-size: var(--text-xs);
+}
+
+.staleBanner {
+  margin: 0;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-warning-surface);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.emptyInline {
+  margin: 0;
+  max-width: none;
+  padding: var(--space-6);
+  text-align: center;
+  font-size: var(--text-sm);
+  background: var(--color-surface);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+}
+
+/* ---- Readiness ---- */
+
+.verdictText,
+.meta {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.meta {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+}
+
+.coldStart {
+  color: var(--color-warning);
+  font-weight: 600;
+}
+
+.checks {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.check {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto 4.5rem;
+  align-items: center;
+  gap: var(--space-1) var(--space-4);
+  padding: var(--space-3) var(--space-4);
+}
+
+.check + .check {
+  border-top: 1px solid var(--color-border);
+}
+
+.checkHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.checkName {
+  font-weight: 600;
+  font-size: var(--text-sm);
+}
+
+.checkKind {
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+}
+
+.checkDuration {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.checkMessage {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.check:is([data-tone='warning'], [data-tone='danger']) .checkMessage {
+  color: var(--tone-fg);
+}
+
+/* ---- Jobs ---- */
+
+.jobs {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.jobs > li {
+  display: flex;
+}
+
+.job {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.job:is([data-tone='warning'], [data-tone='danger']) {
+  border-left: 3px solid var(--tone-fg);
+}
+
+.jobTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+/* Job names are identifiers admins match against logs — monospace. */
+.jobName {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.schedule {
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-2) var(--space-3);
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.facts dt {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.facts dd {
+  margin: 0;
+  font-weight: 500;
+}
+
+.factNote {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+
+.failureFact {
+  color: var(--color-danger);
+}
+
+.overdue {
+  color: var(--color-warning);
+  font-weight: 600;
+}
+
+.jobActions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+}
+
+/* ---- Recent failures ---- */
+
+.failures {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.failure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-danger);
+  border-radius: var(--radius-md);
+}
+
+.failureHead {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.failureJob {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.failureMeta {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.failureError {
+  margin: 0;
+  max-width: none;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-danger-surface);
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- Run-now dialog ---- */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  background: rgba(28, 24, 21, 0.45);
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+  max-width: 500px;
+  max-height: calc(100vh - 2 * var(--space-4));
+  overflow-y: auto;
+  padding: var(--space-6);
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+
+.dialogTitle {
+  margin: 0;
+  font-size: var(--text-xl);
+  overflow-wrap: anywhere;
+}
+
+.dialogDescription {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.dialogDescription p {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.dialogFacts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin: 0;
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-alt);
+  font-size: var(--text-sm);
+}
+
+.dialogFacts dt {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.dialogFacts dd {
+  margin: 0;
+  font-weight: 500;
+}
+
+.dialogDescription .dialogNote {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.inlineStatus {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+.result {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border-left: 3px solid var(--tone-fg);
+  background: var(--tone-bg);
+}
+
+.result p {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  overflow-wrap: anywhere;
+}
+
+.dialogActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: var(--space-6) var(--space-4) var(--space-8);
+  }
+
+  .refresh {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .check {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .checkDuration {
+    display: none;
+  }
+
+  .facts {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dialog {
+    padding: var(--space-4);
+  }
+
+  .jobActions > :global(*),
+  .dialogActions > :global(*) {
+    flex: 1 1 auto;
+  }
+}
diff --git a/src/features/admin-system/components/SystemHealthConsole.test.tsx b/src/features/admin-system/components/SystemHealthConsole.test.tsx
new file mode 100644
index 0000000..dfcb1e9
--- /dev/null
+++ b/src/features/admin-system/components/SystemHealthConsole.test.tsx
@@ -0,0 +1,571 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import App from '../../../App';
+import { SystemHealthConsole } from './SystemHealthConsole';
+import { ApiError } from '../../../services/api-client';
+import * as systemService from '../../../services/system-health-service';
+import { useAuthStore } from '../../../store/auth-store';
+import { REFRESH_INTERVAL_MS } from '../status';
+import type { BackgroundJob, JobRun, OutboxSummary, ReadinessReport, Role } from '../../../types/models';
+
+vi.mock('../../../services/system-health-service');
+
+const MINUTE = 60_000;
+// Fixtures are built once at import, so future times get half a minute of
+// slack — "in 5 minutes" must still read that way a few seconds later.
+const ago = (ms: number) => new Date(Date.now() - ms).toISOString();
+const fromNow = (ms: number) => new Date(Date.now() + ms + 30_000).toISOString();
+// Network failures get one retry (about a second) before the query errors.
+const AFTER_RETRY = { timeout: 3_000 };
+
+const READY: ReadinessReport = {
+  status: 'ready',
+  checkedAt: ago(2_000),
+  checks: [
+    { name: 'database', status: 'pass', required: true, durationMs: 4, message: null },
+    { name: 'migrations', status: 'pass', required: true, durationMs: 9, message: null },
+    { name: 'config', status: 'pass', required: true, durationMs: 0, message: null },
+    { name: 'stellar_rpc', status: 'pass', required: false, durationMs: 210, message: null },
+  ],
+};
+
+const DEGRADED: ReadinessReport = {
+  ...READY,
+  status: 'degraded',
+  checks: READY.checks.map((check) =>
+    check.name === 'stellar_rpc' ? { ...check, status: 'fail', message: 'Timed out after 2000 ms' } : check,
+  ),
+};
+
+const NOT_READY: ReadinessReport = {
+  ...READY,
+  status: 'not_ready',
+  checks: READY.checks.map((check) =>
+    check.name === 'migrations' ? { ...check, status: 'fail', message: '2 migrations pending' } : check,
+  ),
+};
+
+function jobRun(overrides: Partial<JobRun>): JobRun {
+  return {
+    id: 'run-x',
+    job: 'referral-expiry',
+    status: 'succeeded',
+    startedAt: ago(10 * MINUTE),
+    finishedAt: ago(10 * MINUTE - 2_000),
+    error: null,
+    itemsProcessed: 12,
+    trigger: 'schedule',
+    ...overrides,
+  };
+}
+
+const LAST_OK = jobRun({ id: 'run-ok' });
+
+const HEALTHY: BackgroundJob = {
+  name: 'referral-expiry',
+  schedule: 'every 15 minutes',
+  lastRun: LAST_OK,
+  lastSuccess: LAST_OK,
+  lastFailure: null,
+  nextRunAt: fromNow(5 * MINUTE),
+  running: false,
+};
+
+const ORDER_FAILURE = jobRun({
+  id: 'run-fail',
+  job: 'order-expiry',
+  status: 'failed',
+  startedAt: ago(20 * MINUTE),
+  error: 'connect ECONNREFUSED 10.0.0.5:5432',
+  itemsProcessed: null,
+});
+
+const FAILING: BackgroundJob = {
+  ...HEALTHY,
+  name: 'order-expiry',
+  lastRun: ORDER_FAILURE,
+  lastSuccess: jobRun({ id: 'run-old', job: 'order-expiry', startedAt: ago(3 * 60 * MINUTE) }),
+  lastFailure: ORDER_FAILURE,
+};
+
+// The "stalled expiry job" case: nothing has run since it was due.
+const OVERDUE: BackgroundJob = {
+  ...HEALTHY,
+  name: 'held-slot-ttl',
+  schedule: 'every minute',
+  nextRunAt: ago(40 * MINUTE),
+  // An old failure, outside the 24-hour window.
+  lastFailure: jobRun({ id: 'run-ancient', job: 'held-slot-ttl', status: 'failed', startedAt: ago(30 * 60 * MINUTE), error: 'old' }),
+};
+
+const RUNNING: BackgroundJob = { ...HEALTHY, name: 'outbox-dispatch', schedule: 'every 30 seconds', running: true };
+
+const NEVER_RUN: BackgroundJob = {
+  ...HEALTHY,
+  name: 'appointment-reminders',
+  schedule: '0 7 * * *',
+  lastRun: null,
+  lastSuccess: null,
+  lastFailure: null,
+  nextRunAt: fromNow(8 * 60 * MINUTE),
+};
+
+const ALL_JOBS = [HEALTHY, FAILING, OVERDUE, RUNNING, NEVER_RUN];
+
+const OUTBOX: OutboxSummary = { pendingCount: 120, deadLetterCount: 0, oldestPendingAt: ago(3 * MINUTE) };
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="location">{location.pathname}</output>;
+}
+
+function signIn(role: Role) {
+  useAuthStore.setState({
+    accessToken: `${role}-token`,
+    user: { id: `${role}-1`, email: `${role}@docforum.org`, role, createdAt: '', updatedAt: '' },
+  });
+}
+
+function renderConsole() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/admin/system']}>
+        <SystemHealthConsole />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+const tile = (name: string) => screen.getByRole('group', { name });
+const panel = (name: string) => screen.getByRole('region', { name });
+const jobCard = (name: string) => screen.getByRole('article', { name });
+const checkRow = (name: string) => within(panel('Readiness checks')).getByText(name).closest('li') as HTMLElement;
+
+async function loaded() {
+  await screen.findByRole('article', { name: 'referral-expiry' });
+  await waitFor(() => expect(within(tile('API readiness')).queryByText('Checking…')).not.toBeInTheDocument());
+}
+
+beforeEach(() => {
+  signIn('admin');
+  vi.mocked(systemService.getReadiness).mockReset().mockResolvedValue(READY);
+  vi.mocked(systemService.listJobs).mockReset().mockResolvedValue(ALL_JOBS);
+  vi.mocked(systemService.getOutboxSummary).mockReset().mockResolvedValue(OUTBOX);
+  vi.mocked(systemService.runJob).mockReset();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe('SystemHealthConsole — readiness', () => {
+  it('shows a ready backend with every check passing', async () => {
+    renderConsole();
+    await loaded();
+
+    expect(within(tile('API readiness')).getByText('Ready')).toBeInTheDocument();
+    expect(within(tile('API readiness')).getByText('All 4 checks passing')).toBeInTheDocument();
+    for (const name of ['Database', 'Migrations', 'Required config', 'Stellar RPC']) {
+      expect(within(checkRow(name)).getByText('Passing')).toBeInTheDocument();
+    }
+    expect(within(checkRow('Stellar RPC')).getByText('Optional')).toBeInTheDocument();
+    expect(within(checkRow('Database')).getByText('Required')).toBeInTheDocument();
+  });
+
+  it('shows degraded readiness when an optional check fails', async () => {
+    vi.mocked(systemService.getReadiness).mockResolvedValue(DEGRADED);
+    renderConsole();
+    await loaded();
+
+    expect(within(tile('API readiness')).getByText('Degraded')).toBeInTheDocument();
+    expect(within(tile('API readiness')).getByText('Stellar RPC failing')).toBeInTheDocument();
+    expect(within(checkRow('Stellar RPC')).getByText('Failing')).toBeInTheDocument();
+    expect(within(checkRow('Stellar RPC')).getByText('Timed out after 2000 ms')).toBeInTheDocument();
+    expect(checkRow('Stellar RPC')).toHaveAttribute('data-tone', 'warning');
+  });
+
+  it('shows not ready when a required check fails', async () => {
+    vi.mocked(systemService.getReadiness).mockResolvedValue(NOT_READY);
+    renderConsole();
+    await loaded();
+
+    expect(within(tile('API readiness')).getByText('Not ready')).toBeInTheDocument();
+    expect(within(checkRow('Migrations')).getByText('2 migrations pending')).toBeInTheDocument();
+    expect(checkRow('Migrations')).toHaveAttribute('data-tone', 'danger');
+  });
+
+  it('shows the backend as unreachable when the check gets no answer', async () => {
+    vi.mocked(systemService.getReadiness).mockRejectedValue(new TypeError('Failed to fetch'));
+    renderConsole();
+
+    await waitFor(() => expect(within(tile('API readiness')).getByText('Unreachable')).toBeInTheDocument(), AFTER_RETRY);
+    expect(within(tile('API readiness')).getByText('No answer from docforum-core')).toBeInTheDocument();
+    expect(within(panel('Readiness checks')).getByRole('alert')).toHaveTextContent(/didn't answer/);
+    // The other sources are independent — jobs still render.
+    expect(await screen.findByRole('article', { name: 'referral-expiry' })).toBeInTheDocument();
+  });
+
+  it("says when docforum-core doesn't serve readiness yet", async () => {
+    vi.mocked(systemService.getReadiness).mockRejectedValue(new ApiError('Not Found', 404));
+    renderConsole();
+
+    await waitFor(() => expect(within(tile('API readiness')).getByText('Not served')).toBeInTheDocument());
+    expect(within(panel('Readiness checks')).getByRole('alert')).toHaveTextContent('docforum-core#104');
+  });
+
+  it('turns a failed poll into Unreachable instead of keeping a stale Ready', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await loaded();
+    expect(within(tile('API readiness')).getByText('Ready')).toBeInTheDocument();
+
+    vi.mocked(systemService.getReadiness).mockRejectedValue(new TypeError('Failed to fetch'));
+    await user.click(screen.getByRole('button', { name: 'Refresh now' }));
+
+    await waitFor(() => expect(within(tile('API readiness')).getByText('Unreachable')).toBeInTheDocument(), AFTER_RETRY);
+    expect(within(panel('Readiness checks')).getByRole('alert')).toHaveTextContent('The last check that answered said “Ready”');
+  });
+
+  it('points out a response slow enough to be a cold start', async () => {
+    // Step the clock forward inside the request, as a minute-long cold start would.
+    let skew = 0;
+    const realNow = performance.now.bind(performance);
+    vi.spyOn(performance, 'now').mockImplementation(() => realNow() + skew);
+    vi.mocked(systemService.getReadiness).mockImplementation(async () => {
+      skew += 15_000;
+      return READY;
+    });
+
+    renderConsole();
+    expect(await screen.findByText(/slow enough to be a cold start/)).toBeInTheDocument();
+  });
+});
+
+describe('SystemHealthConsole — background jobs', () => {
+  it('shows each job’s status', async () => {
+    renderConsole();
+    await loaded();
+
+    expect(within(jobCard('referral-expiry')).getByText('Healthy')).toBeInTheDocument();
+    expect(within(jobCard('order-expiry')).getByText('Last run failed')).toBeInTheDocument();
+    expect(within(jobCard('held-slot-ttl')).getByText('Overdue')).toBeInTheDocument();
+    expect(within(jobCard('outbox-dispatch')).getByText('Running')).toBeInTheDocument();
+    expect(within(jobCard('appointment-reminders')).getByText('Never run')).toBeInTheDocument();
+    expect(within(tile('Background jobs')).getByText('1 failing')).toBeInTheDocument();
+    expect(within(tile('Background jobs')).getByText('5 jobs · 1 running')).toBeInTheDocument();
+  });
+
+  it('shows last success, last failure and next run', async () => {
+    renderConsole();
+    await loaded();
+
+    const healthy = within(jobCard('referral-expiry'));
+    expect(healthy.getByText('every 15 minutes')).toBeInTheDocument();
+    expect(healthy.getByText('10 minutes ago')).toBeInTheDocument();
+    expect(healthy.getByText('12 items processed')).toBeInTheDocument();
+    expect(healthy.getByText('None recorded')).toBeInTheDocument();
+    expect(healthy.getByText('in 5 minutes')).toBeInTheDocument();
+
+    const failing = within(jobCard('order-expiry'));
+    expect(failing.getByText('3 hours ago')).toBeInTheDocument();
+    expect(failing.getByText('20 minutes ago')).toBeInTheDocument();
+
+    expect(within(jobCard('held-slot-ttl')).getByText('was due').closest('dd')).toHaveTextContent('was due 40 minutes ago');
+    expect(within(jobCard('appointment-reminders')).getByText('Never')).toBeInTheDocument();
+  });
+
+  it("can't run a job that is already running", async () => {
+    renderConsole();
+    await loaded();
+
+    expect(within(jobCard('outbox-dispatch')).getByRole('button', { name: 'Running…' })).toBeDisabled();
+    expect(within(jobCard('referral-expiry')).getByRole('button', { name: 'Run now' })).toBeEnabled();
+  });
+
+  it('says when no jobs are registered', async () => {
+    vi.mocked(systemService.listJobs).mockResolvedValue([]);
+    renderConsole();
+
+    expect(await screen.findByText('docforum-core has no background jobs registered.')).toBeInTheDocument();
+    expect(within(tile('Background jobs')).getByText('None registered')).toBeInTheDocument();
+  });
+
+  it("says when docforum-core doesn't serve job history yet", async () => {
+    vi.mocked(systemService.listJobs).mockRejectedValue(new ApiError('Not Found', 404));
+    renderConsole();
+
+    expect(await within(panel('Background jobs')).findByRole('alert')).toHaveTextContent('docforum-core#100');
+    expect(within(tile('Background jobs')).getByText('Not served')).toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Recent failures' })).not.toBeInTheDocument();
+  });
+
+  it('keeps the last job list when a refresh fails, and says it is stale', async () => {
+    const user = userEvent.setup();
+    renderConsole();
+    await loaded();
+
+    vi.mocked(systemService.listJobs).mockRejectedValue(new ApiError('Bad Gateway', 502));
+    await user.click(screen.getByRole('button', { name: 'Refresh now' }));
+
+    expect(await within(panel('Background jobs')).findByRole('alert')).toHaveTextContent("Couldn't refresh the job list");
+    expect(jobCard('referral-expiry')).toBeInTheDocument();
+  });
+});
+
+describe('SystemHealthConsole — recent failures', () => {
+  it('lists failures from the last 24 hours with their errors', async () => {
+    renderConsole();
+    await loaded();
+
+    const failures = within(panel('Recent failures')).getAllByRole('listitem');
+    expect(failures).toHaveLength(1);
+    expect(failures[0]).toHaveTextContent('order-expiry');
+    expect(failures[0]).toHaveTextContent('connect ECONNREFUSED 10.0.0.5:5432');
+    expect(failures[0]).toHaveTextContent('scheduled run');
+    expect(within(panel('Recent failures')).queryByText('old')).not.toBeInTheDocument();
+  });
+
+  it('says when nothing has failed', async () => {
+    vi.mocked(systemService.listJobs).mockResolvedValue([HEALTHY, NEVER_RUN]);
+    renderConsole();
+
+    expect(await screen.findByText('No background job has failed in the last 24 hours.')).toBeInTheDocument();
+  });
+});
+
+describe('SystemHealthConsole — outbox', () => {
+  it('shows the dead-letter count with the pending backlog', async () => {
+    vi.mocked(systemService.getOutboxSummary).mockResolvedValue({ ...OUTBOX, deadLetterCount: 7 });
+    renderConsole();
+
+    const outbox = tile('Outbox dead letters');
+    expect(await within(outbox).findByText('7')).toBeInTheDocument();
+    expect(outbox).toHaveTextContent('120 pending · oldest queued 3 minutes ago');
+    expect(outbox).toHaveAttribute('data-tone', 'danger');
+  });
+
+  it('is calm when nothing is dead-lettered', async () => {
+    renderConsole();
+
+    expect(await within(tile('Outbox dead letters')).findByText('0')).toBeInTheDocument();
+    expect(tile('Outbox dead letters')).toHaveAttribute('data-tone', 'ok');
+  });
+
+  it("says the outbox isn't exposed when docforum-core doesn't serve it", async () => {
+    vi.mocked(systemService.getOutboxSummary).mockRejectedValue(new ApiError('Not Found', 404));
+    renderConsole();
+
+    expect(await within(tile('Outbox dead letters')).findByText('Not exposed')).toBeInTheDocument();
+    expect(tile('Outbox dead letters')).toHaveTextContent('docforum-core#94');
+    expect(await screen.findByRole('article', { name: 'referral-expiry' })).toBeInTheDocument();
+  });
+});
+
+describe('SystemHealthConsole — run now', () => {
+  async function openRunDialog(user: ReturnType<typeof userEvent.setup>, jobName = 'referral-expiry') {
+    renderConsole();
+    await loaded();
+    await user.click(within(jobCard(jobName)).getByRole('button', { name: 'Run now' }));
+    return screen.getByRole('alertdialog', { name: `Run ${jobName} now?` });
+  }
+
+  it('asks for confirmation first, and Cancel runs nothing', async () => {
+    const user = userEvent.setup();
+    const dialog = await openRunDialog(user);
+
+    expect(dialog).toHaveTextContent('outside its schedule (every 15 minutes)');
+    expect(dialog).toHaveTextContent("won't start a second run");
+    // Focus starts on Cancel, so a stray Enter doesn't fire the job.
+    expect(within(dialog).getByRole('button', { name: 'Cancel' })).toHaveFocus();
+
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(systemService.runJob).not.toHaveBeenCalled();
+    expect(within(jobCard('referral-expiry')).getByRole('button', { name: 'Run now' })).toHaveFocus();
+  });
+
+  it('closes on Escape without running anything', async () => {
+    const user = userEvent.setup();
+    await openRunDialog(user);
+
+    await user.keyboard('{Escape}');
+
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(systemService.runJob).not.toHaveBeenCalled();
+  });
+
+  it('runs the job once confirmed and shows the result, then refreshes the list', async () => {
+    const user = userEvent.setup();
+    vi.mocked(systemService.runJob).mockResolvedValue(
+      jobRun({ id: 'run-manual', startedAt: ago(3_000), finishedAt: ago(1_000), itemsProcessed: 4, trigger: 'manual' }),
+    );
+    const dialog = await openRunDialog(user);
+    const listCalls = vi.mocked(systemService.listJobs).mock.calls.length;
+
+    await user.click(within(dialog).getByRole('button', { name: 'Run now' }));
+
+    const result = await within(dialog).findByRole('status');
+    expect(result).toHaveTextContent('Run finished');
+    expect(result).toHaveTextContent('Processed 4 items in 2 s.');
+    expect(systemService.runJob).toHaveBeenCalledExactlyOnceWith('referral-expiry', 'admin-token');
+    expect(dialog).toHaveAccessibleName('Manual run: referral-expiry');
+    expect(within(dialog).getByRole('button', { name: 'Close' })).toHaveFocus();
+    await waitFor(() => expect(vi.mocked(systemService.listJobs).mock.calls.length).toBeGreaterThan(listCalls));
+
+    await user.click(within(dialog).getByRole('button', { name: 'Close' }));
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+  });
+
+  it('shows the error when the run fails', async () => {
+    const user = userEvent.setup();
+    vi.mocked(systemService.runJob).mockResolvedValue(
+      jobRun({ status: 'failed', error: 'Stellar RPC timed out', startedAt: ago(5_000), finishedAt: ago(500) }),
+    );
+    const dialog = await openRunDialog(user);
+
+    await user.click(within(dialog).getByRole('button', { name: 'Run now' }));
+
+    const result = await within(dialog).findByRole('status');
+    expect(result).toHaveTextContent('Run failed');
+    expect(result).toHaveTextContent('Stellar RPC timed out (after 4.5 s)');
+    expect(result).toHaveAttribute('data-tone', 'danger');
+  });
+
+  it('says so when the run outlives the request', async () => {
+    const user = userEvent.setup();
+    vi.mocked(systemService.runJob).mockResolvedValue(jobRun({ status: 'running', finishedAt: null }));
+    const dialog = await openRunDialog(user);
+
+    await user.click(within(dialog).getByRole('button', { name: 'Run now' }));
+
+    expect(await within(dialog).findByRole('status')).toHaveTextContent('Run started');
+  });
+
+  it('explains a 409 as another instance already running it', async () => {
+    const user = userEvent.setup();
+    vi.mocked(systemService.runJob).mockRejectedValue(new ApiError('Job is locked', 409));
+    const dialog = await openRunDialog(user);
+
+    await user.click(within(dialog).getByRole('button', { name: 'Run now' }));
+
+    const result = await within(dialog).findByRole('status');
+    expect(result).toHaveTextContent('Already running');
+    expect(result).toHaveTextContent('Another instance is running referral-expiry right now');
+  });
+
+  it("is honest when it couldn't confirm the run", async () => {
+    const user = userEvent.setup();
+    vi.mocked(systemService.runJob).mockRejectedValue(new TypeError('Failed to fetch'));
+    const dialog = await openRunDialog(user);
+
+    await user.click(within(dialog).getByRole('button', { name: 'Run now' }));
+
+    const result = await within(dialog).findByRole('status');
+    expect(result).toHaveTextContent("Couldn't confirm");
+    expect(result).toHaveTextContent('may or may not have started');
+  });
+
+  it("can't be dismissed while the run is in flight", async () => {
+    const user = userEvent.setup();
+    let finish!: (run: JobRun) => void;
+    vi.mocked(systemService.runJob).mockReturnValue(new Promise((resolve) => (finish = resolve)));
+    const dialog = await openRunDialog(user);
+
+    await user.click(within(dialog).getByRole('button', { name: 'Run now' }));
+
+    expect(within(dialog).getByRole('button', { name: 'Cancel' })).toBeDisabled();
+    expect(within(dialog).getByRole('button', { name: /Running/ })).toBeDisabled();
+    await user.keyboard('{Escape}');
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+
+    await act(async () => finish(jobRun({})));
+    expect(await within(dialog).findByRole('status')).toHaveTextContent('Run finished');
+  });
+});
+
+describe('SystemHealthConsole — auto-refresh', () => {
+  const setVisibility = (state: DocumentVisibilityState) => {
+    Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => state });
+  };
+
+  const callCounts = () => [
+    vi.mocked(systemService.getReadiness).mock.calls.length,
+    vi.mocked(systemService.listJobs).mock.calls.length,
+    vi.mocked(systemService.getOutboxSummary).mock.calls.length,
+  ];
+
+  beforeEach(() => {
+    // Only the polling interval is faked; everything else keeps real time.
+    vi.useFakeTimers({ toFake: ['setInterval', 'clearInterval'] });
+  });
+
+  afterEach(() => {
+    setVisibility('visible');
+  });
+
+  it('polls every source while the tab is visible', async () => {
+    renderConsole();
+    await loaded();
+    expect(callCounts()).toEqual([1, 1, 1]);
+
+    act(() => vi.advanceTimersByTime(REFRESH_INTERVAL_MS));
+
+    await vi.waitFor(() => expect(callCounts()).toEqual([2, 2, 2]));
+    expect(screen.getByText(/Refreshes every 30 seconds while this tab is visible/)).toBeInTheDocument();
+  });
+
+  it('stops polling while the tab is hidden and catches up when it comes back', async () => {
+    renderConsole();
+    await loaded();
+
+    setVisibility('hidden');
+    await act(async () => {
+      vi.advanceTimersByTime(REFRESH_INTERVAL_MS * 3);
+    });
+    expect(callCounts()).toEqual([1, 1, 1]);
+
+    setVisibility('visible');
+    // React Query listens on window, as browsers bubble the event there.
+    act(() => {
+      window.dispatchEvent(new Event('visibilitychange'));
+    });
+    await vi.waitFor(() => expect(callCounts()).toEqual([2, 2, 2]));
+  });
+});
+
+describe('/admin/system route', () => {
+  function renderApp() {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={['/admin/system']}>
+          <App />
+          <LocationProbe />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+  }
+
+  it('is reachable by admins and linked from the admin nav', async () => {
+    renderApp();
+    expect(await screen.findByRole('heading', { name: 'System health', level: 1 })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'System' })).toHaveAttribute('href', '/admin/system');
+  });
+
+  it.each<Role>(['patient', 'doctor', 'facility'])('redirects a %s away without fetching anything', async (role) => {
+    signIn(role);
+    renderApp();
+
+    await waitFor(() => expect(screen.getByTestId('location').textContent).toBe(`/${role}`));
+    expect(screen.queryByRole('heading', { name: 'System health' })).not.toBeInTheDocument();
+    expect(systemService.getReadiness).not.toHaveBeenCalled();
+    expect(systemService.listJobs).not.toHaveBeenCalled();
+    expect(systemService.getOutboxSummary).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/features/admin-system/components/SystemHealthConsole.tsx b/src/features/admin-system/components/SystemHealthConsole.tsx
new file mode 100644
index 0000000..e1975a5
--- /dev/null
+++ b/src/features/admin-system/components/SystemHealthConsole.tsx
@@ -0,0 +1,81 @@
+import { useId, useState } from 'react';
+import { Button } from '../../../components/Button';
+import { useJobs, useOutboxSummary, useReadiness } from '../hooks/useSystemHealth';
+import { REFRESH_INTERVAL_MS } from '../status';
+import { JobsPanel } from './JobsPanel';
+import { ReadinessPanel } from './ReadinessPanel';
+import { RecentFailures } from './RecentFailures';
+import { RunJobDialog } from './RunJobDialog';
+import { SystemOverview } from './SystemOverview';
+import type { BackgroundJob } from '../../../types/models';
+import styles from './SystemHealth.module.css';
+
+/**
+ * Admin view of docforum-core's own health: readiness checks, background
+ * jobs (last success, last failure, next run, run now) and the outbox's
+ * dead letters. Everything polls while the tab is visible, and each source
+ * fails on its own — a missing outbox endpoint doesn't hide the jobs.
+ */
+export function SystemHealthConsole() {
+  const titleId = useId();
+  const readiness = useReadiness();
+  const jobs = useJobs();
+  const outbox = useOutboxSummary();
+  const [runTarget, setRunTarget] = useState<BackgroundJob | null>(null);
+
+  // Re-rendered on every poll, so relative times stay current with the data.
+  const now = Date.now();
+  const lastUpdated = Math.max(readiness.dataUpdatedAt, jobs.dataUpdatedAt, outbox.dataUpdatedAt);
+  const fetching = readiness.isFetching || jobs.isFetching || outbox.isFetching;
+
+  const refreshAll = () => {
+    void readiness.refetch();
+    void jobs.refetch();
+    void outbox.refetch();
+  };
+
+  return (
+    <section className={styles.console} aria-labelledby={titleId}>
+      <header className={styles.header}>
+        <div>
+          <h1 id={titleId} className={styles.title}>
+            System health
+          </h1>
+          <p className={styles.subtitle}>
+            Whether docforum-core is ready to serve, how its background jobs are doing, and anything stuck in the
+            outbox.
+          </p>
+        </div>
+        <div className={styles.refresh}>
+          {/* Not a live region: announcing every 30-second poll would be noise. */}
+          <p className={styles.refreshText}>
+            {lastUpdated > 0 ? (
+              <>
+                Updated{' '}
+                <time dateTime={new Date(lastUpdated).toISOString()}>
+                  {new Date(lastUpdated).toLocaleTimeString('en-GB')}
+                </time>
+              </>
+            ) : (
+              'Not loaded yet'
+            )}
+            {fetching && ' · refreshing…'}
+          </p>
+          <p className={styles.refreshHint}>
+            Refreshes every {REFRESH_INTERVAL_MS / 1000} seconds while this tab is visible.
+          </p>
+          <Button variant="secondary" onClick={refreshAll} disabled={fetching}>
+            Refresh now
+          </Button>
+        </div>
+      </header>
+
+      <SystemOverview readiness={readiness} jobs={jobs} outbox={outbox} now={now} />
+      <ReadinessPanel readiness={readiness} now={now} />
+      <JobsPanel jobs={jobs} now={now} onRunNow={setRunTarget} />
+      {jobs.data && <RecentFailures jobs={jobs.data} now={now} />}
+
+      {runTarget && <RunJobDialog job={runTarget} now={now} onClose={() => setRunTarget(null)} />}
+    </section>
+  );
+}
diff --git a/src/features/admin-system/components/SystemOverview.tsx b/src/features/admin-system/components/SystemOverview.tsx
new file mode 100644
index 0000000..f8354b6
--- /dev/null
+++ b/src/features/admin-system/components/SystemOverview.tsx
@@ -0,0 +1,106 @@
+import { useId } from 'react';
+import type { ReactNode } from 'react';
+import { isNotServed, readinessVerdict } from '../errors';
+import { UNREACHABLE, checksSummary, jobsOverview, jobsVerdict, outboxTone } from '../status';
+import { StatusPill } from './StatusPill';
+import { TimeAgo } from './TimeAgo';
+import type { useJobs, useOutboxSummary, useReadiness } from '../hooks/useSystemHealth';
+import type { Tone } from '../status';
+import styles from './SystemHealth.module.css';
+
+interface SystemOverviewProps {
+  readiness: ReturnType<typeof useReadiness>;
+  jobs: ReturnType<typeof useJobs>;
+  outbox: ReturnType<typeof useOutboxSummary>;
+  now: number;
+}
+
+function Tile({ label, tone, value, detail }: { label: string; tone: Tone; value: ReactNode; detail: ReactNode }) {
+  const labelId = useId();
+  return (
+    <div className={styles.tile} role="group" aria-labelledby={labelId} data-tone={tone}>
+      <p id={labelId} className={styles.tileLabel}>
+        {label}
+      </p>
+      <div className={styles.tileValue}>{value}</div>
+      <p className={styles.tileDetail}>{detail}</p>
+    </div>
+  );
+}
+
+function readinessDetail(readiness: ReturnType<typeof useReadiness>): string {
+  const verdict = readinessVerdict(readiness.data?.report, readiness.error);
+  if (verdict === UNREACHABLE) return 'No answer from docforum-core';
+  if (readiness.error) return verdict.description;
+  if (readiness.data) return checksSummary(readiness.data.report.checks);
+  return 'Waiting for the first answer';
+}
+
+/** The three answers to "is it broken?" — the panels below have the detail. */
+export function SystemOverview({ readiness, jobs, outbox, now }: SystemOverviewProps) {
+  const verdict = readinessVerdict(readiness.data?.report, readiness.error);
+
+  let jobsTile;
+  if (jobs.error && !jobs.data) {
+    jobsTile = {
+      tone: 'neutral' as Tone,
+      value: <StatusPill tone="neutral" label={isNotServed(jobs.error) ? 'Not served' : 'Unavailable'} />,
+      detail: isNotServed(jobs.error) ? 'Job history arrives with docforum-core#100' : "Couldn't load the job list",
+    };
+  } else if (jobs.data) {
+    const overview = jobsOverview(jobs.data, now);
+    const jobsDisplay = jobsVerdict(overview);
+    jobsTile = {
+      tone: jobsDisplay.tone,
+      value: <StatusPill tone={jobsDisplay.tone} label={jobsDisplay.label} />,
+      detail: `${overview.total} ${overview.total === 1 ? 'job' : 'jobs'}${overview.running ? ` · ${overview.running} running` : ''}`,
+    };
+  } else {
+    jobsTile = { tone: 'neutral' as Tone, value: <StatusPill tone="neutral" label="Loading…" />, detail: 'Fetching job history' };
+  }
+
+  let outboxTile;
+  if (outbox.data) {
+    const summary = outbox.data;
+    outboxTile = {
+      tone: outboxTone(summary),
+      value: <span className={styles.tileCount}>{summary.deadLetterCount.toLocaleString('en-GB')}</span>,
+      detail: (
+        <>
+          {summary.pendingCount.toLocaleString('en-GB')} pending
+          {summary.oldestPendingAt && (
+            <>
+              {' '}
+              · oldest queued <TimeAgo iso={summary.oldestPendingAt} now={now} />
+            </>
+          )}
+          {outbox.error && " · couldn't refresh"}
+        </>
+      ),
+    };
+  } else if (outbox.error) {
+    // "If exposed" — a 404 is an expected answer, not a fault.
+    outboxTile = {
+      tone: 'neutral' as Tone,
+      value: <StatusPill tone="neutral" label={isNotServed(outbox.error) ? 'Not exposed' : 'Unavailable'} />,
+      detail: isNotServed(outbox.error)
+        ? "docforum-core doesn't expose outbox stats yet (docforum-core#94)"
+        : "Couldn't load outbox stats",
+    };
+  } else {
+    outboxTile = { tone: 'neutral' as Tone, value: <StatusPill tone="neutral" label="Loading…" />, detail: 'Fetching outbox stats' };
+  }
+
+  return (
+    <div className={styles.overview}>
+      <Tile
+        label="API readiness"
+        tone={verdict.tone}
+        value={<StatusPill tone={verdict.tone} label={verdict.label} />}
+        detail={readinessDetail(readiness)}
+      />
+      <Tile label="Background jobs" {...jobsTile} />
+      <Tile label="Outbox dead letters" {...outboxTile} />
+    </div>
+  );
+}
diff --git a/src/features/admin-system/components/TimeAgo.tsx b/src/features/admin-system/components/TimeAgo.tsx
new file mode 100644
index 0000000..04b6fdb
--- /dev/null
+++ b/src/features/admin-system/components/TimeAgo.tsx
@@ -0,0 +1,9 @@
+import { formatRelative, formatTimestamp } from '../status';
+
+export function TimeAgo({ iso, now }: { iso: string; now: number }) {
+  return (
+    <time dateTime={iso} title={formatTimestamp(iso)}>
+      {formatRelative(iso, now)}
+    </time>
+  );
+}
diff --git a/src/features/admin-system/errors.ts b/src/features/admin-system/errors.ts
new file mode 100644
index 0000000..9bf0bb2
--- /dev/null
+++ b/src/features/admin-system/errors.ts
@@ -0,0 +1,119 @@
+import { ApiError } from '../../services/api-client';
+import { UNREACHABLE, formatDuration, readinessDisplay, runDuration } from './status';
+import type { StatusDisplay, Tone } from './status';
+import type { JobRun, ReadinessReport } from '../../types/models';
+
+export type HealthSource = 'readiness' | 'jobs' | 'outbox';
+
+const SOURCES: Record<HealthSource, { noun: string; issue: string }> = {
+  readiness: { noun: 'readiness checks', issue: 'docforum-core#104' },
+  jobs: { noun: 'background job history', issue: 'docforum-core#100' },
+  outbox: { noun: 'outbox stats', issue: 'docforum-core#94' },
+};
+
+const AUTH_MESSAGE = 'Your session no longer has admin access. Sign in again with an admin account.';
+
+export function isNotServed(error: unknown): boolean {
+  return error instanceof ApiError && error.status === 404;
+}
+
+export function isAuthError(error: unknown): boolean {
+  return error instanceof ApiError && (error.status === 401 || error.status === 403);
+}
+
+export function describeLoadError(error: unknown, source: HealthSource): string {
+  const { noun, issue } = SOURCES[source];
+  if (isAuthError(error)) return AUTH_MESSAGE;
+  if (isNotServed(error)) return `docforum-core doesn't serve ${noun} yet (${issue}).`;
+  return `Couldn't load ${noun}. The preview backend may be waking up — this page tries again every 30 seconds.`;
+}
+
+/**
+ * One verdict for the readiness tile and panel. A network failure or a
+ * non-report 5xx (Render's own error page while the instance boots) is
+ * "unreachable" — that's the answer to "is it down?", not a page error.
+ *
+ * The error wins over `report`: React Query keeps the last good data when a
+ * poll fails, and a stale "Ready" is exactly the wrong thing to show.
+ */
+export function readinessVerdict(report: ReadinessReport | undefined, error: unknown): StatusDisplay {
+  if (isNotServed(error)) {
+    return { label: 'Not served', tone: 'neutral', description: describeLoadError(error, 'readiness') };
+  }
+  if (isAuthError(error)) return { label: 'No access', tone: 'danger', description: AUTH_MESSAGE };
+  if (error) return UNREACHABLE;
+  if (report) return readinessDisplay(report.status);
+  return { label: 'Checking…', tone: 'neutral', description: 'Asking docforum-core whether it is ready.' };
+}
+
+export interface RunOutcome {
+  tone: Tone;
+  title: string;
+  detail: string;
+}
+
+function itemsPhrase(count: number | null): string {
+  if (count === null) return '';
+  return count === 1 ? '1 item' : `${count.toLocaleString('en-GB')} items`;
+}
+
+/** What docforum-core said about the run it started. */
+export function describeRun(run: JobRun): RunOutcome {
+  const duration = runDuration(run);
+
+  if (run.status === 'succeeded') {
+    const took = duration === null ? '' : ` in ${formatDuration(duration)}`;
+    const items = itemsPhrase(run.itemsProcessed);
+    return {
+      tone: 'ok',
+      title: 'Run finished',
+      detail: items ? `Processed ${items}${took}.` : `Finished${took}.`,
+    };
+  }
+  if (run.status === 'failed') {
+    const message = run.error?.trim() || 'docforum-core recorded no error message.';
+    return {
+      tone: 'danger',
+      title: 'Run failed',
+      detail: duration === null ? message : `${message} (after ${formatDuration(duration)})`,
+    };
+  }
+  return {
+    tone: 'info',
+    title: 'Run started',
+    detail: "It's still going after the request returned. Its result will appear under Last run when it finishes.",
+  };
+}
+
+/** Why the run request itself didn't produce a run. */
+export function describeRunError(error: unknown, jobName: string): RunOutcome {
+  if (error instanceof ApiError) {
+    if (error.status === 409) {
+      return {
+        tone: 'warning',
+        title: 'Already running',
+        detail: `Another instance is running ${jobName} right now, so docforum-core didn't start a second run.`,
+      };
+    }
+    if (error.status === 404) {
+      return {
+        tone: 'warning',
+        title: 'Job not found',
+        detail: `docforum-core doesn't run ${jobName} on demand — the job may have been removed, or manual runs aren't served yet (docforum-core#100).`,
+      };
+    }
+    if (isAuthError(error)) return { tone: 'danger', title: 'Not allowed', detail: AUTH_MESSAGE };
+    return {
+      tone: 'danger',
+      title: 'Run not started',
+      detail: `docforum-core refused the run (${error.status}): ${error.message}`,
+    };
+  }
+  return {
+    tone: 'warning',
+    title: "Couldn't confirm",
+    detail:
+      "docforum-core didn't answer, so the run may or may not have started. Check Last run before trying again — " +
+      'jobs are idempotent, so a second run is safe, just wasted work.',
+  };
+}
diff --git a/src/features/admin-system/hooks/useSystemHealth.ts b/src/features/admin-system/hooks/useSystemHealth.ts
new file mode 100644
index 0000000..0848f10
--- /dev/null
+++ b/src/features/admin-system/hooks/useSystemHealth.ts
@@ -0,0 +1,81 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import * as systemService from '../../../services/system-health-service';
+import { ApiError } from '../../../services/api-client';
+import { useAuthStore } from '../../../store/auth-store';
+import { REFRESH_INTERVAL_MS } from '../status';
+import type { ReadinessReport } from '../../../types/models';
+
+const SYSTEM_KEY = ['admin', 'system'] as const;
+
+// React Query only fires `refetchInterval` while the document is visible
+// (`refetchIntervalInBackground` defaults to false) and refetches on focus,
+// so a backgrounded tab stops polling and catches up the moment it's back.
+const POLLING = {
+  refetchInterval: REFRESH_INTERVAL_MS,
+  refetchIntervalInBackground: false,
+} as const;
+
+// A 4xx won't fix itself on retry, and the next poll is never far off.
+function shouldRetry(failureCount: number, error: Error): boolean {
+  if (error instanceof ApiError && error.status < 500) return false;
+  return failureCount < 1;
+}
+
+export interface TimedReadiness {
+  report: ReadinessReport;
+  /** Round trip of the request — a long one on the preview is a cold start. */
+  respondedInMs: number;
+}
+
+export function useReadiness() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: [...SYSTEM_KEY, 'readiness'],
+    queryFn: async ({ signal }): Promise<TimedReadiness> => {
+      const started = performance.now();
+      const report = await systemService.getReadiness(accessToken!, signal);
+      return { report, respondedInMs: performance.now() - started };
+    },
+    enabled: Boolean(accessToken),
+    retry: shouldRetry,
+    ...POLLING,
+  });
+}
+
+export function useJobs() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: [...SYSTEM_KEY, 'jobs'],
+    queryFn: ({ signal }) => systemService.listJobs(accessToken!, signal),
+    enabled: Boolean(accessToken),
+    retry: shouldRetry,
+    ...POLLING,
+  });
+}
+
+export function useOutboxSummary() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  return useQuery({
+    queryKey: [...SYSTEM_KEY, 'outbox'],
+    queryFn: ({ signal }) => systemService.getOutboxSummary(accessToken!, signal),
+    enabled: Boolean(accessToken),
+    retry: shouldRetry,
+    ...POLLING,
+  });
+}
+
+export function useRunJob() {
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (jobName: string) => systemService.runJob(jobName, accessToken!),
+    // Every outcome is worth a fresh look: a run, a 409 (someone else's run
+    // is in progress), even a timeout — the list shows whether it started.
+    // The outbox dispatcher is a job too, so its counts may have moved.
+    onSettled: () => queryClient.invalidateQueries({ queryKey: SYSTEM_KEY }),
+  });
+}
diff --git a/src/features/admin-system/status.test.ts b/src/features/admin-system/status.test.ts
new file mode 100644
index 0000000..e15a22d
--- /dev/null
+++ b/src/features/admin-system/status.test.ts
@@ -0,0 +1,239 @@
+import { describe, expect, it } from 'vitest';
+import {
+  OVERDUE_GRACE_MS,
+  UNREACHABLE,
+  checkDisplay,
+  checkName,
+  checksSummary,
+  formatDuration,
+  formatRelative,
+  jobHealth,
+  jobsOverview,
+  jobsVerdict,
+  outboxTone,
+  overdueBy,
+  readinessDisplay,
+  recentFailures,
+} from './status';
+import { describeRun, describeRunError, readinessVerdict } from './errors';
+import { ApiError } from '../../services/api-client';
+import type { BackgroundJob, JobRun, ReadinessCheck, ReadinessReport } from '../../types/models';
+
+const NOW = Date.parse('2026-10-18T12:00:00.000Z');
+const MINUTE = 60_000;
+const at = (offsetMs: number) => new Date(NOW + offsetMs).toISOString();
+
+function run(overrides: Partial<JobRun> = {}): JobRun {
+  return {
+    id: 'run-1',
+    job: 'referral-expiry',
+    status: 'succeeded',
+    startedAt: at(-10 * MINUTE),
+    finishedAt: at(-10 * MINUTE + 1500),
+    error: null,
+    itemsProcessed: 3,
+    trigger: 'schedule',
+    ...overrides,
+  };
+}
+
+function job(overrides: Partial<BackgroundJob> = {}): BackgroundJob {
+  const last = run();
+  return {
+    name: 'referral-expiry',
+    schedule: 'every 15 minutes',
+    lastRun: last,
+    lastSuccess: last,
+    lastFailure: null,
+    nextRunAt: at(5 * MINUTE),
+    running: false,
+    ...overrides,
+  };
+}
+
+const check = (overrides: Partial<ReadinessCheck>): ReadinessCheck => ({
+  name: 'database',
+  status: 'pass',
+  required: true,
+  durationMs: 4,
+  message: null,
+  ...overrides,
+});
+
+describe('readiness display', () => {
+  it.each([
+    ['ready', 'Ready', 'ok'],
+    ['degraded', 'Degraded', 'warning'],
+    ['not_ready', 'Not ready', 'danger'],
+  ])('shows %s as “%s”', (status, label, tone) => {
+    expect(readinessDisplay(status)).toMatchObject({ label, tone });
+  });
+
+  it("falls back to Unknown for a status it doesn't know, including prototype keys", () => {
+    expect(readinessDisplay('rebooting')).toMatchObject({ label: 'Unknown', tone: 'neutral' });
+    expect(readinessDisplay('toString')).toMatchObject({ label: 'Unknown', tone: 'neutral' });
+  });
+
+  it('prefers an error over the last good report, so a failed poll never reads as Ready', () => {
+    const report: ReadinessReport = { status: 'ready', checkedAt: at(-MINUTE), checks: [] };
+    expect(readinessVerdict(report, undefined).label).toBe('Ready');
+    expect(readinessVerdict(report, new TypeError('Failed to fetch'))).toBe(UNREACHABLE);
+    expect(readinessVerdict(undefined, new ApiError('Bad Gateway', 502))).toBe(UNREACHABLE);
+  });
+
+  it('separates "not served yet" and "no access" from unreachable', () => {
+    expect(readinessVerdict(undefined, new ApiError('Not Found', 404))).toMatchObject({ label: 'Not served', tone: 'neutral' });
+    expect(readinessVerdict(undefined, new ApiError('Forbidden', 403))).toMatchObject({ label: 'No access', tone: 'danger' });
+    expect(readinessVerdict(undefined, null).label).toBe('Checking…');
+  });
+});
+
+describe('readiness checks', () => {
+  it('names known checks and tidies unknown ones', () => {
+    expect(checkName('stellar_rpc')).toBe('Stellar RPC');
+    expect(checkName('migrations')).toBe('Migrations');
+    expect(checkName('email_provider')).toBe('Email provider');
+    expect(checkName('constructor')).toBe('Constructor');
+    expect(checkName('__')).toBe('Unnamed check');
+  });
+
+  it('shows a failing required check as danger and a failing optional one as warning', () => {
+    expect(checkDisplay(check({ status: 'pass' }))).toEqual({ label: 'Passing', tone: 'ok' });
+    expect(checkDisplay(check({ status: 'warn' }))).toEqual({ label: 'Warning', tone: 'warning' });
+    expect(checkDisplay(check({ status: 'fail', required: true }))).toEqual({ label: 'Failing', tone: 'danger' });
+    expect(checkDisplay(check({ status: 'fail', required: false }))).toEqual({ label: 'Failing', tone: 'warning' });
+    expect(checkDisplay(check({ status: 'exploded' as ReadinessCheck['status'] }))).toEqual({
+      label: 'Unknown',
+      tone: 'neutral',
+    });
+  });
+
+  it('summarises which checks are unhealthy', () => {
+    expect(checksSummary([check({}), check({ name: 'migrations' })])).toBe('All 2 checks passing');
+    expect(checksSummary([check({}), check({ name: 'stellar_rpc', status: 'fail', required: false })])).toBe(
+      'Stellar RPC failing',
+    );
+    expect(checksSummary([])).toBe('No individual checks reported');
+  });
+});
+
+describe('job health', () => {
+  it('is healthy when the last run succeeded and the next is on time', () => {
+    expect(jobHealth(job(), NOW)).toBe('healthy');
+  });
+
+  it('is failing when the last run failed', () => {
+    const failed = run({ status: 'failed', error: 'boom' });
+    expect(jobHealth(job({ lastRun: failed, lastFailure: failed }), NOW)).toBe('failing');
+  });
+
+  it('is running while the lock is held, whatever happened before', () => {
+    const failed = run({ status: 'failed' });
+    expect(jobHealth(job({ running: true, lastRun: failed }), NOW)).toBe('running');
+  });
+
+  it('is overdue only once past the grace period', () => {
+    expect(jobHealth(job({ nextRunAt: at(-OVERDUE_GRACE_MS + MINUTE) }), NOW)).toBe('healthy');
+    expect(jobHealth(job({ nextRunAt: at(-OVERDUE_GRACE_MS - MINUTE) }), NOW)).toBe('overdue');
+    expect(overdueBy(job({ nextRunAt: at(-20 * MINUTE) }), NOW)).toBe(20 * MINUTE);
+  });
+
+  it('flags a job that never ran but should have as overdue, otherwise never run', () => {
+    expect(jobHealth(job({ lastRun: null, lastSuccess: null }), NOW)).toBe('never_run');
+    expect(jobHealth(job({ lastRun: null, lastSuccess: null, nextRunAt: at(-60 * MINUTE) }), NOW)).toBe('overdue');
+  });
+
+  it('ignores an unparseable next run instead of calling it overdue', () => {
+    expect(overdueBy(job({ nextRunAt: 'soon' }), NOW)).toBe(0);
+  });
+
+  it('counts the overview and picks the most urgent verdict', () => {
+    const failed = run({ status: 'failed' });
+    const jobs = [
+      job(),
+      job({ name: 'order-expiry', lastRun: failed, lastFailure: failed }),
+      job({ name: 'slot-ttl', nextRunAt: at(-30 * MINUTE) }),
+      job({ name: 'outbox-dispatch', running: true }),
+    ];
+    const overview = jobsOverview(jobs, NOW);
+    expect(overview).toEqual({ total: 4, failing: 1, overdue: 1, running: 1 });
+    expect(jobsVerdict(overview)).toEqual({ label: '1 failing', tone: 'danger' });
+    expect(jobsVerdict({ total: 2, failing: 0, overdue: 2, running: 0 })).toEqual({ label: '2 overdue', tone: 'warning' });
+    expect(jobsVerdict({ total: 2, failing: 0, overdue: 0, running: 1 })).toEqual({ label: 'All healthy', tone: 'ok' });
+    expect(jobsVerdict({ total: 0, failing: 0, overdue: 0, running: 0 }).label).toBe('None registered');
+  });
+});
+
+describe('recent failures', () => {
+  it('keeps failures from the last 24 hours, newest first', () => {
+    const older = run({ id: 'old', job: 'order-expiry', status: 'failed', startedAt: at(-3 * 60 * MINUTE) });
+    const newer = run({ id: 'new', job: 'slot-ttl', status: 'failed', startedAt: at(-5 * MINUTE) });
+    const stale = run({ id: 'stale', job: 'reminders', status: 'failed', startedAt: at(-25 * 60 * MINUTE) });
+
+    const failures = recentFailures(
+      [job({ lastFailure: older }), job({ lastFailure: null }), job({ lastFailure: newer }), job({ lastFailure: stale })],
+      NOW,
+    );
+    expect(failures.map((failure) => failure.id)).toEqual(['new', 'old']);
+  });
+});
+
+describe('outbox', () => {
+  it('turns red for any dead letter', () => {
+    expect(outboxTone({ pendingCount: 40, deadLetterCount: 0, oldestPendingAt: null })).toBe('ok');
+    expect(outboxTone({ pendingCount: 0, deadLetterCount: 1, oldestPendingAt: null })).toBe('danger');
+  });
+});
+
+describe('formatting', () => {
+  it('formats relative times both ways', () => {
+    expect(formatRelative(at(-30_000), NOW)).toBe('just now');
+    expect(formatRelative(at(30_000), NOW)).toBe('in under a minute');
+    expect(formatRelative(at(-5 * MINUTE), NOW)).toBe('5 minutes ago');
+    expect(formatRelative(at(2 * 60 * MINUTE), NOW)).toBe('in 2 hours');
+    expect(formatRelative(at(-26 * 60 * MINUTE), NOW)).toBe('yesterday');
+    expect(formatRelative('not a date', NOW)).toBe('unknown time');
+  });
+
+  it('formats durations', () => {
+    expect(formatDuration(42)).toBe('42 ms');
+    expect(formatDuration(1500)).toBe('1.5 s');
+    expect(formatDuration(2000)).toBe('2 s');
+    expect(formatDuration(48_000)).toBe('48 s');
+    expect(formatDuration(125_000)).toBe('2 min 5 s');
+    expect(formatDuration(-1)).toBe('—');
+  });
+});
+
+describe('run results', () => {
+  it('describes a finished run with its item count and duration', () => {
+    expect(describeRun(run())).toEqual({ tone: 'ok', title: 'Run finished', detail: 'Processed 3 items in 1.5 s.' });
+    expect(describeRun(run({ itemsProcessed: null })).detail).toBe('Finished in 1.5 s.');
+  });
+
+  it('describes a failed run with its error', () => {
+    expect(describeRun(run({ status: 'failed', error: 'RPC timeout' }))).toEqual({
+      tone: 'danger',
+      title: 'Run failed',
+      detail: 'RPC timeout (after 1.5 s)',
+    });
+    expect(describeRun(run({ status: 'failed', error: '  ', finishedAt: null })).detail).toBe(
+      'docforum-core recorded no error message.',
+    );
+  });
+
+  it('describes a run that outlived the request', () => {
+    expect(describeRun(run({ status: 'running', finishedAt: null }))).toMatchObject({ tone: 'info', title: 'Run started' });
+  });
+
+  it('explains each way the request can fail', () => {
+    expect(describeRunError(new ApiError('Locked', 409), 'slot-ttl')).toMatchObject({ title: 'Already running' });
+    expect(describeRunError(new ApiError('Not Found', 404), 'slot-ttl')).toMatchObject({ title: 'Job not found' });
+    expect(describeRunError(new ApiError('Forbidden', 403), 'slot-ttl')).toMatchObject({ title: 'Not allowed' });
+    expect(describeRunError(new ApiError('Job is disabled', 422), 'slot-ttl')).toMatchObject({
+      title: 'Run not started',
+      detail: 'docforum-core refused the run (422): Job is disabled',
+    });
+    expect(describeRunError(new TypeError('Failed to fetch'), 'slot-ttl')).toMatchObject({ title: "Couldn't confirm" });
+  });
+});
diff --git a/src/features/admin-system/status.ts b/src/features/admin-system/status.ts
new file mode 100644
index 0000000..1150bbe
--- /dev/null
+++ b/src/features/admin-system/status.ts
@@ -0,0 +1,220 @@
+import type { BackgroundJob, JobRun, OutboxSummary, ReadinessCheck, ReadinessStatus } from '../../types/models';
+
+/** Every status on the page maps onto one of these, so colours mean the same
+ * thing across readiness, jobs and the outbox. */
+export type Tone = 'ok' | 'info' | 'warning' | 'danger' | 'neutral';
+
+export interface StatusDisplay {
+  label: string;
+  tone: Tone;
+  description: string;
+}
+
+/** How often the page re-polls while the tab is visible. */
+export const REFRESH_INTERVAL_MS = 30_000;
+
+/** How late a job may be before it's flagged — ticks fire on an interval, and
+ * a busy instance can start one a little after `nextRunAt`. */
+export const OVERDUE_GRACE_MS = 5 * 60_000;
+
+/** Readiness answers slower than this were almost certainly a cold start. */
+export const COLD_START_THRESHOLD_MS = 10_000;
+
+/** What counts as "recent" in the failures list. */
+export const RECENT_FAILURE_WINDOW_MS = 24 * 60 * 60_000;
+
+// Hand-edited or future server values must not resolve to Object.prototype
+// members ("toString", "constructor") — always go through this.
+function lookup<T>(table: Record<string, T>, key: string): T | undefined {
+  return Object.hasOwn(table, key) ? table[key] : undefined;
+}
+
+const READINESS: Record<ReadinessStatus, StatusDisplay> = {
+  ready: {
+    label: 'Ready',
+    tone: 'ok',
+    description: 'Every readiness check is passing. docforum-core is serving traffic normally.',
+  },
+  degraded: {
+    label: 'Degraded',
+    tone: 'warning',
+    description: 'An optional dependency is failing. Most of the API works; the affected features do not.',
+  },
+  not_ready: {
+    label: 'Not ready',
+    tone: 'danger',
+    description: 'A required check is failing. Requests that touch it will fail until it recovers.',
+  },
+};
+
+export function readinessDisplay(status: string): StatusDisplay {
+  return (
+    lookup(READINESS, status) ?? {
+      label: 'Unknown',
+      tone: 'neutral',
+      description: `docforum-core reported a status this page doesn't recognise (“${status}”).`,
+    }
+  );
+}
+
+export const UNREACHABLE: StatusDisplay = {
+  label: 'Unreachable',
+  tone: 'danger',
+  description: "The readiness endpoint didn't answer. The backend may be down or still cold-starting.",
+};
+
+const CHECK_NAMES: Record<string, string> = {
+  database: 'Database',
+  migrations: 'Migrations',
+  config: 'Required config',
+  stellar_rpc: 'Stellar RPC',
+};
+
+/** Known checks get a proper name; anything new is shown as sent, tidied up. */
+export function checkName(name: string): string {
+  const known = lookup(CHECK_NAMES, name);
+  if (known) return known;
+  const words = name.replace(/[_-]+/g, ' ').trim();
+  return words ? words.charAt(0).toUpperCase() + words.slice(1) : 'Unnamed check';
+}
+
+export function checkDisplay(check: ReadinessCheck): Pick<StatusDisplay, 'label' | 'tone'> {
+  switch (check.status) {
+    case 'pass':
+      return { label: 'Passing', tone: 'ok' };
+    case 'warn':
+      return { label: 'Warning', tone: 'warning' };
+    case 'fail':
+      // A failing optional check degrades rather than takes the API out.
+      return { label: 'Failing', tone: check.required ? 'danger' : 'warning' };
+    default:
+      return { label: 'Unknown', tone: 'neutral' };
+  }
+}
+
+export type JobHealth = 'running' | 'failing' | 'overdue' | 'healthy' | 'never_run';
+
+export const JOB_HEALTH: Record<JobHealth, Pick<StatusDisplay, 'label' | 'tone'>> = {
+  running: { label: 'Running', tone: 'info' },
+  failing: { label: 'Last run failed', tone: 'danger' },
+  overdue: { label: 'Overdue', tone: 'warning' },
+  healthy: { label: 'Healthy', tone: 'ok' },
+  never_run: { label: 'Never run', tone: 'neutral' },
+};
+
+/** Milliseconds past `nextRunAt` beyond the grace period, or 0 if on time. */
+export function overdueBy(job: BackgroundJob, now: number): number {
+  if (!job.nextRunAt) return 0;
+  const due = Date.parse(job.nextRunAt);
+  if (Number.isNaN(due)) return 0;
+  const late = now - due;
+  return late > OVERDUE_GRACE_MS ? late : 0;
+}
+
+/**
+ * A single verdict per job, most urgent first. A failed last run outranks
+ * lateness — the failure is the more useful thing to read — and the Next run
+ * column still says when a failing job is also late.
+ */
+export function jobHealth(job: BackgroundJob, now: number): JobHealth {
+  if (job.running) return 'running';
+  if (job.lastRun?.status === 'failed') return 'failing';
+  if (overdueBy(job, now) > 0) return 'overdue';
+  if (!job.lastRun) return 'never_run';
+  return 'healthy';
+}
+
+/** The latest failure of each job inside the window, newest first. */
+export function recentFailures(jobs: BackgroundJob[], now: number, windowMs = RECENT_FAILURE_WINDOW_MS): JobRun[] {
+  return jobs
+    .map((job) => job.lastFailure)
+    .filter((run): run is JobRun => {
+      if (!run) return false;
+      const started = Date.parse(run.startedAt);
+      return !Number.isNaN(started) && now - started <= windowMs;
+    })
+    .sort((a, b) => Date.parse(b.startedAt) - Date.parse(a.startedAt));
+}
+
+export interface JobsOverview {
+  total: number;
+  failing: number;
+  overdue: number;
+  running: number;
+}
+
+export function jobsOverview(jobs: BackgroundJob[], now: number): JobsOverview {
+  const overview: JobsOverview = { total: jobs.length, failing: 0, overdue: 0, running: 0 };
+  for (const job of jobs) {
+    const health = jobHealth(job, now);
+    if (health === 'failing') overview.failing += 1;
+    else if (health === 'overdue') overview.overdue += 1;
+    else if (health === 'running') overview.running += 1;
+  }
+  return overview;
+}
+
+export function jobsVerdict(overview: JobsOverview): Pick<StatusDisplay, 'label' | 'tone'> {
+  if (overview.total === 0) return { label: 'None registered', tone: 'neutral' };
+  if (overview.failing > 0) return { label: `${overview.failing} failing`, tone: 'danger' };
+  if (overview.overdue > 0) return { label: `${overview.overdue} overdue`, tone: 'warning' };
+  return { label: 'All healthy', tone: 'ok' };
+}
+
+/** "All 4 checks passing", or which ones aren't. */
+export function checksSummary(checks: ReadinessCheck[]): string {
+  const unhealthy = checks.filter((check) => check.status !== 'pass');
+  if (checks.length === 0) return 'No individual checks reported';
+  if (unhealthy.length === 0) return checks.length === 1 ? 'The only check is passing' : `All ${checks.length} checks passing`;
+  return unhealthy.map((check) => `${checkName(check.name)} ${checkDisplay(check).label.toLowerCase()}`).join(', ');
+}
+
+/** Any dead letter needs a human: it already exhausted its retries. */
+export function outboxTone(summary: OutboxSummary): Tone {
+  return summary.deadLetterCount > 0 ? 'danger' : 'ok';
+}
+
+const relative = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ['day', 24 * 60 * 60_000],
+  ['hour', 60 * 60_000],
+  ['minute', 60_000],
+];
+
+/** "3 minutes ago", "in 2 hours", "just now" — or "unknown time" for garbage. */
+export function formatRelative(iso: string, now: number): string {
+  const at = Date.parse(iso);
+  if (Number.isNaN(at)) return 'unknown time';
+  const delta = at - now;
+  if (Math.abs(delta) < 60_000) return delta < 0 ? 'just now' : 'in under a minute';
+  for (const [unit, size] of UNITS) {
+    if (Math.abs(delta) >= size) return relative.format(Math.trunc(delta / size), unit);
+  }
+  return relative.format(Math.trunc(delta / 60_000), 'minute');
+}
+
+/** Absolute timestamp for tooltips and `<time dateTime>`. */
+export function formatTimestamp(iso: string): string {
+  const at = Date.parse(iso);
+  if (Number.isNaN(at)) return iso;
+  return new Date(at).toLocaleString('en-GB', { dateStyle: 'medium', timeStyle: 'medium' });
+}
+
+export function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—';
+  if (ms < 1000) return `${Math.round(ms)} ms`;
+  // One decimal under ten seconds ("1.5 s"), but never a trailing ".0".
+  if (ms < 10_000) return `${Math.round(ms / 100) / 10} s`;
+  if (ms < 60_000) return `${Math.round(ms / 1000)} s`;
+  const minutes = Math.floor(ms / 60_000);
+  const seconds = Math.round((ms % 60_000) / 1000);
+  return seconds > 0 ? `${minutes} min ${seconds} s` : `${minutes} min`;
+}
+
+/** Wall time of a finished run, or null while it's still going. */
+export function runDuration(run: JobRun): number | null {
+  if (!run.finishedAt) return null;
+  const ms = Date.parse(run.finishedAt) - Date.parse(run.startedAt);
+  return Number.isNaN(ms) ? null : ms;
+}
diff --git a/src/pages/AdminAuditPage.tsx b/src/pages/AdminAuditPage.tsx
new file mode 100644
index 0000000..3bffa74
--- /dev/null
+++ b/src/pages/AdminAuditPage.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import { AuditLogViewer } from '../features/admin-audit/components/AuditLogViewer';
+import styles from '../features/admin-audit/components/AuditLogViewer.module.css';
+
+export function AdminAuditPage() {
+  return (
+    <div className={styles.page}>
+      <Link to="/admin" className={styles.backLink}>
+        ← Back to payments console
+      </Link>
+      <AuditLogViewer />
+    </div>
+  );
+}
diff --git a/src/pages/AdminDashboardPage.tsx b/src/pages/AdminDashboardPage.tsx
index 01ec154..87ed54c 100644
--- a/src/pages/AdminDashboardPage.tsx
+++ b/src/pages/AdminDashboardPage.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useAuthStore } from '../store/auth-store';
 import { CreatePaymentIntentForm } from '../features/payments/components/CreatePaymentIntentForm';
 import { PaymentIntentPanel } from '../features/payments/components/PaymentIntentPanel';
@@ -9,8 +10,11 @@ import { TextField } from '../components/TextField';
 // (PRD OQ-2). This page is real once an admin session exists.
 export function AdminDashboardPage() {
   const user = useAuthStore((state) => state.user);
-  const [selectedIntentId, setSelectedIntentId] = useState<string | null>(null);
-  const [lookupId, setLookupId] = useState('');
+  // `?intent=<id>` opens an intent directly — the audit trail links here.
+  const [searchParams] = useSearchParams();
+  const linkedIntentId = searchParams.get('intent')?.trim() || null;
+  const [selectedIntentId, setSelectedIntentId] = useState<string | null>(linkedIntentId);
+  const [lookupId, setLookupId] = useState(linkedIntentId ?? '');
 
   return (
     <div className="container">
@@ -23,6 +27,19 @@ export function AdminDashboardPage() {
           </a>{' '}
           on Stellar testnet, entirely through docforum-core's API.
         </p>
+        <p>
+          <Link to="/admin/referrals">Review stuck referrals</Link> to reassign or cancel referrals that have sat
+          pending too long.
+        </p>
+        <p>
+          <Link to="/admin/audit">Open the audit trail</Link> to see who changed or viewed any record.
+        </p>
+        <p>
+          <Link to="/admin/flags">Manage feature flags</Link> to stage rollouts like wallet payments or 2FA enforcement.
+        </p>
+        <p>
+          <Link to="/admin/system">Check system health</Link> for readiness, background jobs and outbox dead letters.
+        </p>
       </div>
 
       <CreatePaymentIntentForm onCreated={setSelectedIntentId} />
diff --git a/src/pages/AdminFlagsPage.tsx b/src/pages/AdminFlagsPage.tsx
new file mode 100644
index 0000000..b884ad1
--- /dev/null
+++ b/src/pages/AdminFlagsPage.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import { FeatureFlagsConsole } from '../features/admin-flags/components/FeatureFlagsConsole';
+import styles from '../features/admin-flags/components/FeatureFlags.module.css';
+
+export function AdminFlagsPage() {
+  return (
+    <div className={styles.page}>
+      <Link to="/admin" className={styles.backLink}>
+        ← Back to payments console
+      </Link>
+      <FeatureFlagsConsole />
+    </div>
+  );
+}
diff --git a/src/pages/AdminReferralsPage.tsx b/src/pages/AdminReferralsPage.tsx
new file mode 100644
index 0000000..389feca
--- /dev/null
+++ b/src/pages/AdminReferralsPage.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import { StuckReferralsConsole } from '../features/admin-referrals/components/StuckReferralsConsole';
+import styles from '../features/admin-referrals/components/StuckReferrals.module.css';
+
+export function AdminReferralsPage() {
+  return (
+    <div className={styles.page}>
+      <Link to="/admin" className={styles.backLink}>
+        ← Back to payments console
+      </Link>
+      <StuckReferralsConsole />
+    </div>
+  );
+}
diff --git a/src/pages/AdminSystemPage.tsx b/src/pages/AdminSystemPage.tsx
new file mode 100644
index 0000000..595b6f0
--- /dev/null
+++ b/src/pages/AdminSystemPage.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import { SystemHealthConsole } from '../features/admin-system/components/SystemHealthConsole';
+import styles from '../features/admin-system/components/SystemHealth.module.css';
+
+export function AdminSystemPage() {
+  return (
+    <div className={styles.page}>
+      <Link to="/admin" className={styles.backLink}>
+        ← Back to payments console
+      </Link>
+      <SystemHealthConsole />
+    </div>
+  );
+}
diff --git a/src/services/admin-referrals-service.ts b/src/services/admin-referrals-service.ts
new file mode 100644
index 0000000..2230dd8
--- /dev/null
+++ b/src/services/admin-referrals-service.ts
@@ -0,0 +1,62 @@
+import { apiFetch } from './api-client';
+import type {
+  CancelReferralInput,
+  CursorPage,
+  DoctorAvailability,
+  ReassignReferralInput,
+  Referral,
+  StuckReferral,
+} from '../types/models';
+
+/** Pending-age thresholds the queue offers, in docforum-core#68's
+ * `olderThan` duration syntax. */
+export type StuckAge = '24h' | '48h' | '72h' | '168h';
+
+export interface StuckReferralQuery {
+  olderThan: StuckAge;
+  cursor?: string | null;
+}
+
+/** Assumed contract (docforum-core#68): oldest first, same `{items,
+ * nextCursor}` envelope as the audit listings. */
+export function listStuckReferrals(
+  query: StuckReferralQuery,
+  accessToken: string,
+  signal?: AbortSignal,
+): Promise<CursorPage<StuckReferral>> {
+  const params = new URLSearchParams({ status: 'pending', olderThan: query.olderThan });
+  if (query.cursor) params.set('cursor', query.cursor);
+  return apiFetch<CursorPage<StuckReferral>>(`/admin/referrals?${params.toString()}`, { accessToken, signal });
+}
+
+/** Verified doctors in one specialty, with availability. The console still
+ * re-checks eligibility on what comes back — see `eligibleCandidates`. */
+export function listReassignCandidates(
+  specialtyId: string,
+  accessToken: string,
+  signal?: AbortSignal,
+): Promise<DoctorAvailability[]> {
+  const params = new URLSearchParams({ specialtyId, verificationStatus: 'verified' });
+  return apiFetch<DoctorAvailability[]>(`/admin/doctors?${params.toString()}`, { accessToken, signal });
+}
+
+export function reassignReferral(
+  referralId: string,
+  input: ReassignReferralInput,
+  accessToken: string,
+): Promise<Referral> {
+  return apiFetch<Referral>(`/admin/referrals/${encodeURIComponent(referralId)}/reassign`, {
+    method: 'POST',
+    body: input,
+    accessToken,
+  });
+}
+
+/** docforum-core notifies the patient; nothing to do client-side. */
+export function cancelReferral(referralId: string, input: CancelReferralInput, accessToken: string): Promise<Referral> {
+  return apiFetch<Referral>(`/admin/referrals/${encodeURIComponent(referralId)}/cancel`, {
+    method: 'POST',
+    body: input,
+    accessToken,
+  });
+}
diff --git a/src/services/audit-service.ts b/src/services/audit-service.ts
new file mode 100644
index 0000000..ba21502
--- /dev/null
+++ b/src/services/audit-service.ts
@@ -0,0 +1,53 @@
+import { apiFetch } from './api-client';
+import type { AccessLog, AuditEvent, CursorPage } from '../types/models';
+
+/**
+ * Server-side filters accepted by the admin audit listings. Mirrors
+ * `GET /admin/audit-events`'s query exactly — that endpoint answers `400`
+ * to any parameter it doesn't know, so nothing else may be sent (the
+ * viewer's action filter is applied client-side for that reason).
+ */
+export interface AuditQuery {
+  entityType?: string;
+  /** Rejected by the backend unless `entityType` is also set. */
+  entityId?: string;
+  actorUserId?: string;
+  /** ISO-8601 date, inclusive. */
+  from?: string;
+  /** ISO-8601 date, inclusive. */
+  to?: string;
+  cursor?: string | null;
+  /** 1–200 server-side; the backend defaults to 50. */
+  limit?: number;
+}
+
+function toSearch(query: AuditQuery): string {
+  const params = new URLSearchParams();
+  if (query.entityType) params.set('entityType', query.entityType);
+  if (query.entityType && query.entityId) params.set('entityId', query.entityId);
+  if (query.actorUserId) params.set('actorUserId', query.actorUserId);
+  if (query.from) params.set('from', query.from);
+  if (query.to) params.set('to', query.to);
+  if (query.cursor) params.set('cursor', query.cursor);
+  if (query.limit) params.set('limit', String(query.limit));
+  const qs = params.toString();
+  return qs ? `?${qs}` : '';
+}
+
+export function listAuditEvents(
+  query: AuditQuery,
+  accessToken: string,
+  signal?: AbortSignal,
+): Promise<CursorPage<AuditEvent>> {
+  return apiFetch<CursorPage<AuditEvent>>(`/admin/audit-events${toSearch(query)}`, { accessToken, signal });
+}
+
+/** Assumed contract (docforum-core#45 not landed): same filters and page
+ * envelope as audit events. */
+export function listAccessLogs(
+  query: AuditQuery,
+  accessToken: string,
+  signal?: AbortSignal,
+): Promise<CursorPage<AccessLog>> {
+  return apiFetch<CursorPage<AccessLog>>(`/admin/access-logs${toSearch(query)}`, { accessToken, signal });
+}
diff --git a/src/services/feature-flags-service.test.ts b/src/services/feature-flags-service.test.ts
new file mode 100644
index 0000000..07d5624
--- /dev/null
+++ b/src/services/feature-flags-service.test.ts
@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { listFeatureFlags, updateFeatureFlag } from './feature-flags-service';
+import { ApiError } from './api-client';
+
+function respond(status: number, body: unknown) {
+  return vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+    new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } }),
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('feature flags service', () => {
+  it('lists flags with the admin token', async () => {
+    const fetchSpy = respond(200, []);
+    await expect(listFeatureFlags('admin-token')).resolves.toEqual([]);
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(String(url)).toMatch(/\/admin\/flags$/);
+    expect((init?.headers as Record<string, string>).Authorization).toBe('Bearer admin-token');
+  });
+
+  it('PATCHes only the changed fields, with the key escaped into the path', async () => {
+    const fetchSpy = respond(200, {});
+    await updateFeatureFlag('odd/key', { enabled: true, expectedUpdatedAt: '2026-10-01T00:00:00.000Z' }, 'admin-token');
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(String(url)).toMatch(/\/admin\/flags\/odd%2Fkey$/);
+    expect(init?.method).toBe('PATCH');
+    expect(JSON.parse(String(init?.body))).toEqual({ enabled: true, expectedUpdatedAt: '2026-10-01T00:00:00.000Z' });
+  });
+
+  it('surfaces a conflict as an ApiError with its status', async () => {
+    respond(409, { message: 'Flag was modified' });
+    const attempt = updateFeatureFlag('wallet_payments', { enabled: false, expectedUpdatedAt: 'x' }, 'admin-token');
+    await expect(attempt).rejects.toBeInstanceOf(ApiError);
+    await expect(attempt).rejects.toMatchObject({ status: 409, message: 'Flag was modified' });
+  });
+});
diff --git a/src/services/feature-flags-service.ts b/src/services/feature-flags-service.ts
new file mode 100644
index 0000000..ad17f0c
--- /dev/null
+++ b/src/services/feature-flags-service.ts
@@ -0,0 +1,18 @@
+import { apiFetch } from './api-client';
+import type { FeatureFlag, UpdateFeatureFlagInput } from '../types/models';
+
+/** Assumed contract (docforum-core#132): every flag in this environment in
+ * one unpaginated list — there are tens of flags, not thousands. */
+export function listFeatureFlags(accessToken: string, signal?: AbortSignal): Promise<FeatureFlag[]> {
+  return apiFetch<FeatureFlag[]>('/admin/flags', { accessToken, signal });
+}
+
+/** Partial update. docforum-core records the change as an audit event and
+ * answers with the flag as saved. */
+export function updateFeatureFlag(key: string, input: UpdateFeatureFlagInput, accessToken: string): Promise<FeatureFlag> {
+  return apiFetch<FeatureFlag>(`/admin/flags/${encodeURIComponent(key)}`, {
+    method: 'PATCH',
+    body: input,
+    accessToken,
+  });
+}
diff --git a/src/services/system-health-service.test.ts b/src/services/system-health-service.test.ts
new file mode 100644
index 0000000..a3258e3
--- /dev/null
+++ b/src/services/system-health-service.test.ts
@@ -0,0 +1,51 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { getReadiness, runJob } from './system-health-service';
+import { ApiError } from './api-client';
+import type { ReadinessReport } from '../types/models';
+
+const NOT_READY: ReadinessReport = {
+  status: 'not_ready',
+  checkedAt: '2026-10-18T12:00:00.000Z',
+  checks: [{ name: 'migrations', status: 'fail', required: true, durationMs: 12, message: '2 migrations pending' }],
+};
+
+function respond(status: number, body: unknown, contentType = 'application/json') {
+  return vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+    new Response(typeof body === 'string' ? body : JSON.stringify(body), {
+      status,
+      headers: { 'content-type': contentType },
+    }),
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('getReadiness', () => {
+  it('returns the report docforum-core sends with a 503', async () => {
+    respond(503, NOT_READY);
+    await expect(getReadiness('token')).resolves.toEqual(NOT_READY);
+  });
+
+  it("still throws a 503 that isn't a readiness report", async () => {
+    respond(503, '<html>Service Unavailable</html>', 'text/html');
+    await expect(getReadiness('token')).rejects.toMatchObject({ status: 503 });
+  });
+
+  it('throws other failures untouched', async () => {
+    respond(404, { message: 'Not Found' });
+    await expect(getReadiness('token')).rejects.toBeInstanceOf(ApiError);
+  });
+});
+
+describe('runJob', () => {
+  it('posts to the job by its encoded name', async () => {
+    const fetchSpy = respond(200, { id: 'run-1' });
+    await runJob('reports/daily digest', 'token');
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(String(url)).toMatch(/\/admin\/jobs\/reports%2Fdaily%20digest\/run$/);
+    expect(init).toMatchObject({ method: 'POST', headers: expect.objectContaining({ Authorization: 'Bearer token' }) });
+  });
+});
diff --git a/src/services/system-health-service.ts b/src/services/system-health-service.ts
new file mode 100644
index 0000000..a62366c
--- /dev/null
+++ b/src/services/system-health-service.ts
@@ -0,0 +1,43 @@
+import { ApiError, apiFetch } from './api-client';
+import type { BackgroundJob, JobRun, OutboxSummary, ReadinessReport } from '../types/models';
+
+// docforum-core answers "not ready" with a 503 whose body is still the full
+// report — that's what Render's probe keys off. Only unwrap it when it
+// actually looks like one; a proxy's 503 page is a real failure.
+function isReadinessReport(body: unknown): body is ReadinessReport {
+  if (typeof body !== 'object' || body === null) return false;
+  const candidate = body as Partial<ReadinessReport>;
+  return typeof candidate.status === 'string' && Array.isArray(candidate.checks);
+}
+
+/** Assumed contract (docforum-core#104): `200` when ready or degraded, `503`
+ * when not ready, same body either way. */
+export async function getReadiness(accessToken: string, signal?: AbortSignal): Promise<ReadinessReport> {
+  try {
+    return await apiFetch<ReadinessReport>('/health/ready', { accessToken, signal });
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 503 && isReadinessReport(error.body)) return error.body;
+    throw error;
+  }
+}
+
+/** Assumed contract (docforum-core#100): every registered job, with its most
+ * recent run, success and failure. */
+export function listJobs(accessToken: string, signal?: AbortSignal): Promise<BackgroundJob[]> {
+  return apiFetch<BackgroundJob[]>('/admin/jobs', { accessToken, signal });
+}
+
+/**
+ * Triggers one run outside the schedule. docforum-core takes the job's
+ * advisory lock first, so a run already in progress on any instance comes
+ * back as `409` rather than running twice. The returned run may still be
+ * `running` if the job outlives the request.
+ */
+export function runJob(jobName: string, accessToken: string): Promise<JobRun> {
+  return apiFetch<JobRun>(`/admin/jobs/${encodeURIComponent(jobName)}/run`, { method: 'POST', accessToken });
+}
+
+/** Assumed contract (docforum-core#94). A `404` means the outbox isn't exposed. */
+export function getOutboxSummary(accessToken: string, signal?: AbortSignal): Promise<OutboxSummary> {
+  return apiFetch<OutboxSummary>('/admin/outbox', { accessToken, signal });
+}
diff --git a/src/types/models.ts b/src/types/models.ts
index 03659eb..8d87036 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -508,3 +508,226 @@ export interface FacilityLedgerPage {
   totals: FacilityPayoutTotals;
 }
 
+// --- Phase W6 — Admin audit & access logs (issue #71) -----------------------
+// AuditEvent is real: mirrors docforum-core's `AuditEvent` model and
+// `GET /admin/audit-events` (docforum-core#43, see its docs/api/README.md).
+// AccessLog is assumed — docforum-core#45 hasn't landed; see
+// ARCHITECTURE_ESSENTIALS.md "Known assumptions — Phase W6".
+
+/** One page of a keyset-paginated admin listing. `nextCursor` is opaque —
+ * pass it back as `cursor`; `null` means this is the last page. */
+export interface CursorPage<T> {
+  items: T[];
+  nextCursor: string | null;
+}
+
+export interface AuditEvent {
+  id: string;
+  // Null only for system-initiated transitions.
+  actorUserId: string | null;
+  actorRole: Role | null;
+  // e.g. 'Appointment', 'DoctorProfile', 'PaymentIntent'.
+  entityType: string;
+  entityId: string;
+  // e.g. 'appointment.booked', 'payment_intent.released'.
+  action: string;
+  fromState: string | null;
+  toState: string | null;
+  requestId: string | null;
+  // Small flat map of ids/codes — never personal data (server-enforced).
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+}
+
+export interface AccessLog {
+  id: string;
+  actorUserId: string | null;
+  actorRole: Role | null;
+  entityType: string;
+  entityId: string;
+  // The API route that returned the PHI-bearing payload.
+  route: string;
+  createdAt: string;
+}
+
+// --- Phase W6 — Stuck referrals console (issue #72) --------------------------
+// ReferralStatus and Specialty are real (docforum-core schema.prisma); the
+// Referral fields follow its ARCHITECTURE.md §4.4, which schema.prisma hasn't
+// caught up with yet. The admin queue/candidate shapes are assumed —
+// docforum-core#68 (admin referral operations) and #65 (loop detection)
+// haven't landed. See ARCHITECTURE_ESSENTIALS.md "Known assumptions — Phase W6".
+
+export type ReferralStatus = 'pending' | 'accepted' | 'declined' | 'completed' | 'expired';
+
+export interface Specialty {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+/** `snapshotNotes` is deliberately absent: it's encrypted clinical text that
+ * the admin endpoints don't return and the console never needs. */
+export interface Referral {
+  id: string;
+  sourceConsultationId: string;
+  referringDoctorId: string;
+  targetSpecialtyId: string;
+  targetDoctorId: string | null;
+  // docforum-core#65: the referral whose appointment produced this one.
+  parentReferralId: string | null;
+  status: ReferralStatus;
+  resultingAppointmentId: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type DoctorSummary = Pick<DoctorProfile, 'id' | 'fullName'>;
+
+export type StuckReferralReason = 'no_doctor' | 'doctor_inactive' | 'loop_flagged';
+
+export interface ReferralChainLink {
+  referralId: string;
+  referringDoctor: DoctorSummary;
+  targetSpecialty: Specialty;
+  targetDoctor: DoctorSummary | null;
+  status: ReferralStatus;
+  createdAt: string;
+}
+
+export interface StuckReferral extends Referral {
+  stuckReason: StuckReferralReason;
+  targetSpecialty: Specialty;
+  referringDoctor: DoctorSummary;
+  targetDoctor: DoctorSummary | null;
+  /** Oldest first, ending with this referral. Only sent for `loop_flagged`. */
+  chain: ReferralChainLink[] | null;
+}
+
+/** A doctor as offered in the reassign picker, with near-term availability. */
+export interface DoctorAvailability extends Pick<DoctorProfile, 'id' | 'fullName' | 'verificationStatus'> {
+  specialties: Specialty[];
+  // Open AvailabilitySlots in the next 7 days.
+  openSlotCount: number;
+  nextAvailableAt: string | null;
+}
+
+export interface ReassignReferralInput {
+  targetDoctorId: string;
+  reason: string;
+  /** The `updatedAt` the admin saw — lets docforum-core answer `409` if
+   * someone else acted on the referral in the meantime. */
+  expectedUpdatedAt: string;
+}
+
+export interface CancelReferralInput {
+  reason: string;
+  expectedUpdatedAt: string;
+}
+
+// --- Phase W6 — System health (issue #73) ------------------------------------
+// All assumed. Readiness follows docforum-core#104 (`/health/ready`: database,
+// migrations, required config, optional Stellar RPC); jobs follow #100's
+// `JobRun` table and `GET /admin/jobs`; the outbox summary follows #94's
+// dead-letter state. None of the three has landed. See
+// ARCHITECTURE_ESSENTIALS.md "Known assumptions — Phase W6".
+
+/** `degraded`: only optional checks are failing (e.g. Stellar RPC down takes
+ * payments out, not the whole API — docforum-core#104). */
+export type ReadinessStatus = 'ready' | 'degraded' | 'not_ready';
+
+export type ReadinessCheckStatus = 'pass' | 'warn' | 'fail';
+
+export interface ReadinessCheck {
+  /** `database`, `migrations`, `config`, `stellar_rpc` today; others are shown by name. */
+  name: string;
+  status: ReadinessCheckStatus;
+  /** Optional checks degrade readiness instead of failing it. */
+  required: boolean;
+  durationMs: number | null;
+  /** Operator-facing detail, e.g. "2 migrations pending". Never secrets. */
+  message: string | null;
+}
+
+export interface ReadinessReport {
+  status: ReadinessStatus;
+  /** When the checks actually ran — docforum-core caches the result for a few seconds. */
+  checkedAt: string;
+  checks: ReadinessCheck[];
+}
+
+export type JobRunStatus = 'running' | 'succeeded' | 'failed';
+
+/** Mirrors docforum-core#100's `JobRun` row. */
+export interface JobRun {
+  id: string;
+  job: string;
+  status: JobRunStatus;
+  startedAt: string;
+  finishedAt: string | null;
+  /** Failure message for `failed` runs; `null` otherwise. */
+  error: string | null;
+  itemsProcessed: number | null;
+  /** `schedule` for ticks, `manual` for admin-triggered runs. */
+  trigger: 'schedule' | 'manual';
+}
+
+export interface BackgroundJob {
+  name: string;
+  /** Human-readable schedule as registered, e.g. "every 5 minutes" or a cron expression. */
+  schedule: string;
+  lastRun: JobRun | null;
+  lastSuccess: JobRun | null;
+  lastFailure: JobRun | null;
+  nextRunAt: string | null;
+  /** True while any instance holds the job's advisory lock. */
+  running: boolean;
+}
+
+export interface OutboxSummary {
+  pendingCount: number;
+  /** Events that exhausted their delivery attempts (docforum-core#94). */
+  deadLetterCount: number;
+  oldestPendingAt: string | null;
+}
+
+// --- Phase W6 — Feature flags console (issue #74) -----------------------------
+// Assumed: docforum-core#132 (DB-backed feature flags) hasn't landed. The shape
+// follows what #132 asks for — boolean and percentage flags, targeting by role
+// or user-id allowlist, admin list/toggle endpoints with every change written
+// as an audit event. See ARCHITECTURE_ESSENTIALS.md "Known assumptions — Phase W6".
+
+export type FeatureFlagKind = 'boolean' | 'percentage';
+
+export interface FeatureFlagTargeting {
+  /** Empty means every role is eligible. */
+  roles: Role[];
+  /** On for these users while the flag is enabled, whatever the roles or
+   * rollout percentage say. */
+  userIds: string[];
+}
+
+export interface FeatureFlag {
+  id: string;
+  /** Stable identifier the backend evaluates, e.g. `wallet_payments`. */
+  key: string;
+  description: string | null;
+  kind: FeatureFlagKind;
+  /** The kill switch: off means off for everyone, allowlist included. */
+  enabled: boolean;
+  /** Whole number 0–100 for `percentage` flags (sticky per user, hash-based),
+   * null for `boolean` ones. */
+  rolloutPercentage: number | null;
+  targeting: FeatureFlagTargeting;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/** Only the fields being changed are sent. */
+export interface UpdateFeatureFlagInput {
+  enabled?: boolean;
+  rolloutPercentage?: number;
+  targeting?: FeatureFlagTargeting;
+  /** The `updatedAt` the admin saw — lets docforum-core answer `409` if
+   * someone else changed the flag in the meantime. */
+  expectedUpdatedAt: string;
+}