diff --git a/docs/contributing/testing.md b/docs/contributing/testing.md
index fd0a7d434..18e2a30b2 100644
--- a/docs/contributing/testing.md
+++ b/docs/contributing/testing.md
@@ -11,6 +11,7 @@ is about choosing and writing tests.
 | Pure logic: statistics, time zones, cadence, parsers, unit conversion, formatting                                                       | `src/**/__tests__/*.test.ts` (unit)         | `pnpm test`             |
 | Laws of that logic over random inputs                                                                                                   | `*.property.test.ts` next to the unit tests | `pnpm test`             |
 | What a component renders for a given state                                                                                              | `src/**/__tests__/*.test.tsx` (unit)        | `pnpm test`             |
+| How a component behaves when someone types, clicks or presses keys, and what it sends                                                   | `src/**/__tests__/*.browser.test.tsx`       | `pnpm test`             |
 | A structural rule about the tree (a guard)                                                                                              | `src/__tests__/` with a stated floor        | `pnpm test`             |
 | A route: auth, scope, validation, what it stores and what it answers                                                                    | `tests/integration/routes/` with the kit    | `pnpm test:integration` |
 | Anything whose truth lives in Postgres: constraints, `where` semantics, transactions, locks, cascades, time zones in SQL, backups, jobs | `tests/integration/`                        | `pnpm test:integration` |
@@ -27,6 +28,28 @@ ones: `src/__tests__/test-realism-ratchet.test.ts` counts route tests that mock
 those numbers may only fall. Mock at the process boundary you do not own instead: provider HTTP
 (`safeFetch`), APNs, SMTP, the model.
 
+## Critical journeys
+
+A few e2e journeys carry `@critical` in their test titles: signing in with a
+password and a passkey and signing out, a reading reaching the dashboard, a
+dose moving compliance, a mood entry, a lab CSV import, a questionnaire in
+German and Brazilian Portuguese, a setting that persists, a backup coming
+back, sharing a record, and the offline page. `pnpm e2e:critical` runs them.
+
+They run against the real server and a seeded Postgres. A spec file that
+carries the tag may not intercept anything under `/api`, directly or through
+a helper it imports; `src/__tests__/e2e-critical-no-api-stub-guard.test.ts`
+refuses it and keeps a floor on the number of tagged tests. Stubbing an
+unreachable third-party host that is not the journey's subject is allowed,
+with the reason next to the call.
+
+A journey that writes gets an account nobody else writes. The accounts in
+`e2e/setup/critical-fixture.ts` are seeded by global setup, one per journey
+and per Chromium project, so a journey runs at both widths without the two
+projects meeting. Reset what a previous run left with `resetCriticalAccount`
+in a `beforeEach`, and read results through the app's own routes rather than
+through the database.
+
 ## The route test kit
 
 `tests/kit/` holds two modules for tests under `tests/integration/`.
@@ -114,6 +137,43 @@ into a fresh account and reads it back there. A new setting column without a
 table entry fails the file. A column with no write route says why in its
 entry.
 
+## Browser tests
+
+Interaction belongs in the `browser` project: `*.browser.test.tsx` files run
+in headless Chromium through Vitest's Playwright provider, as part of
+`pnpm test`. Run them alone with `pnpm test --project browser`, or one file
+with `pnpm exec vitest run --project browser <path>`. The Node projects never
+collect these files and this project collects nothing else. CI installs the
+browser it needs (`playwright install --only-shell chromium`); locally, run
+that once.
+
+Reach for it when the claim is about behaviour a markup test cannot see:
+focus, keys, an open menu, a pending state, the body a form posts, the URL a
+filter writes. A `renderToStaticMarkup` grep stays the tool for what a given
+state renders, and bottom-sheet gestures stay in `e2e/`.
+
+The helper is `tests/browser/`:
+
+- `renderWithApp(ui, { locale, user })` mounts the app's own providers: a real
+  TanStack `QueryClient` (no retries) and `I18nProvider` with the real
+  catalog. The signed-in account is seeded where `useAuth` reads it, with
+  `authUser()` defaults under `user`. The app stylesheet and the default
+  theme class are loaded, so layout, visibility and colour tokens resolve.
+- `stubFetch()` replaces `fetch` and nothing above it. Answer a route with
+  `.on(method, path, { status, data, error, meta })`, hold one with
+  `.deferred(...)` to assert a pending state, and read the parsed bodies from
+  `.calls(method, path)`. An unmatched request gets a 404 envelope and is
+  recorded. Do not mock `@tanstack/react-query` or `@/lib/api/api-fetch`.
+- `next/navigation` is aliased to a shim over the page's real `location` and
+  `history`; `url.ts` sets the starting query, records pushes and replaces,
+  and simulates Back or an edited address.
+- `pinDate(iso)` fakes `Date` only, so timers and animation frames still run.
+
+Every test gets the real `fetch`, clock, address and an empty `localStorage`
+back afterwards. Locate by role and accessible name, the way a person finds a
+control; a `Label` adds a colon to its name, so match a labelled combobox with
+`/^Type/` rather than `"Type"`.
+
 ## The integration database
 
 Global setup boots one Postgres container and migrates one template database.
@@ -152,7 +212,8 @@ node scripts/test-durations.mjs unit unit.json
 The nightly workflow (`.github/workflows/test-nightly.yml`) uploads a file
 regenerated from CI timings, which is the better source.
 
-The unit suite is three projects, decided per file from its source
+The unit suite is three Node projects and the `browser` project above. The
+Node ones are decided per file from its source
 (`tests/unit-projects.ts`): `guards` and `unit` share a module graph within a
 worker, `isolated` gives each file a fresh one. A file lands in `isolated` when
 it mocks, spies, stubs env or globals, fakes timers or resets modules. If a
diff --git a/docs/contributing/ui-standards.md b/docs/contributing/ui-standards.md
index ee32c5dd8..fe3074434 100644
--- a/docs/contributing/ui-standards.md
+++ b/docs/contributing/ui-standards.md
@@ -101,7 +101,7 @@ No `text-[9px]`. No off-scale sizes (`text-[28px]`); round to the neighbouring s
 | A sheet from the bottom edge (phones)                                                                                       | `<SheetContent side="bottom">` or `ResponsiveSheet`, both of which render `BottomSheetContent` (`ui/bottom-sheet.tsx`): grip, swipe to close, X on the title row. `preview="58dvh"` for a sheet that opens part-way and pulls up to 90 dvh (its footer `data-sheet-footer`, its scroll body `data-sheet-body`); `draggable={false}` only for a sheet that fills the window                                 | a hand-rolled grab handle or drag; a `fixed bottom-0` panel standing in for a sheet                                                                                                                   |
 | Date / time entry                                                                                                           | `DateField` / `TimeField` / `DateTimeField`                                                                                                                                                                                                                                                                                                                                                                | native `type="date                                                                                                                                                                                    | time | datetime-local"` inputs (browser-locale trap, v1.25.4) |
 | Small text action inside a line (Open schedule, Select all, View all, Retry, Learn more)                                    | `InlineAction` (`ui/inline-action.tsx`): tone `primary` / `muted` / `foreground`, size `xs` / `sm`, `asChild` for a `Link`; owns the focus ring and `pointer-coarse:min-h-11`                                                                                                                                                                                                                              | a hand-rolled underlined `<button>` / `<Link>` (`inline-action-guard.test.ts`)                                                                                                                        |
-| Mutually exclusive choice on one track (range, zoom, cards vs table, recent vs all)                                         | `Segmented` (`ui/segmented.tsx`): no track, the chosen segment filled in primary (the chart tabs' look; a muted track with a raised segment was tried in 1.43.8 and dropped in 1.43.10 as too heavy); `mode="radio"` (default, roving focus) or `"toggle"` (view switches, form sheets), `iconOnly` for icon segments, `size="sm"` for range rows in a chart header; 44 px per segment on a coarse pointer | a row of ghost/secondary Buttons, a fifth segmented variant (`segmented.test.tsx` holds the definition to one module)                                                                                 |
+| Mutually exclusive choice on one track (range, zoom, cards vs table, recent vs all)                                         | `Segmented` (`ui/segmented.tsx`): no track, the chosen segment filled in primary (the chart tabs' look; a muted track with a raised segment was tried in 1.43.8 and dropped in 1.43.10 as too heavy); `mode="radio"` (default, roving focus) or `"toggle"` (view switches, form sheets), `iconOnly` for icon segments, `size="sm"` for range rows in a chart header; 44 px per segment on a coarse pointer | a row of ghost/secondary Buttons, a fifth segmented variant (`segmented-single-implementation.test.ts` holds the definition to one module)                                                            |
 | A grade beside a reading (confidence, score gain, band, lab range flag)                                                     | `ScorePill` (`ui/score-pill.tsx`): tone `success` / `info` / `warning` / `destructive` / `neutral`, `numeric` for figures; `CONFIDENCE_TONE` maps both confidence scales                                                                                                                                                                                                                                   | a hand-rolled `rounded-full px-2 py-0.5 text-xs bg-*/15` chip (`score-pill-guard.test.ts`); `TagChip` (neutral label) and `Badge` (connection/account state) stay what they are                       |
 | "This vital on these days vs those days" board                                                                              | `MetricCrosstab` (`insights/metric-crosstab.tsx`): caller formats the numbers, the board owns row, neutral signed delta, confidence chip, dismissal                                                                                                                                                                                                                                                        | a fourth copy of the crosstab list                                                                                                                                                                    |
 | A trend / stat tile in a grid (KPI strip, derived tiles, their skeletons and building states)                               | `TrendTile` (`ui/trend-tile.tsx`)                                                                                                                                                                                                                                                                                                                                                                          | the hand-spelled `bg-card border-border … p-4 md:p-6` frame                                                                                                                                           |
diff --git a/e2e/backup-restore-journey.spec.ts b/e2e/backup-restore-journey.spec.ts
index 9104ec5f6..a5193ca58 100644
--- a/e2e/backup-restore-journey.spec.ts
+++ b/e2e/backup-restore-journey.spec.ts
@@ -18,7 +18,11 @@
  *   5. what was deleted is back under its ORIGINAL id, and what arrived after
  *      the snapshot is gone — which is what "the restore replaces the
  *      account's data tables" in `docs/ops/backup-restore.md` means when it is
- *      spelled out.
+ *      spelled out;
+ *   6. a second person downloads their own full backup, their account is
+ *      recreated empty under the same id (the runbook's new host), the admin
+ *      uploads the file and restores it, and the person signs in to the same
+ *      rows under the same ids.
  *
  * Refusing controls, because a restore path that cannot say no is worse than
  * none: a stored copy with one flipped ciphertext byte is refused and changes
@@ -36,19 +40,20 @@
  *
  * Everything the journey does, it does through the app: the readings and the
  * document ride the page's own `fetch`, the archive and the snapshot ride the
- * real buttons, the restore rides the typed-confirmation dialog. The only two
+ * real buttons, the restore rides the typed-confirmation dialog. The only
  * things reaching Postgres directly are the ones a browser cannot express —
- * resetting the account between repetitions, and corrupting one stored copy so
- * the authenticated envelope has something to refuse. Both live in
- * `setup/backup-journey-fixture.ts`.
+ * resetting the accounts between repetitions, corrupting one stored copy so
+ * the authenticated envelope has something to refuse (both in
+ * `setup/backup-journey-fixture.ts`), and recreating the second account under
+ * its own id (`setup/critical-fixture.ts`).
  *
- * Serial and single-project: the four tests are four acts of one journey, they
- * mutate the account destructively, and the last one moves a session's record
+ * Serial and single-project: the five tests are five acts of one journey, they
+ * mutate the accounts destructively, and the last one moves a session's record
  * selector. Its jar is its own for the reason `global-setup.ts` spells out.
  */
 import { readFile } from "node:fs/promises";
 
-import type { Page } from "@playwright/test";
+import type { Page, Response } from "@playwright/test";
 
 import { EXPORT_ARGON2_PARAMS } from "@/lib/export/passphrase-archive";
 
@@ -65,6 +70,13 @@ import {
   storedMeasurements,
   storeTamperedCopy,
 } from "./setup/backup-journey-fixture";
+import {
+  accountRowCounts,
+  clearLoginBuckets,
+  criticalAccount,
+  recreateCriticalAccount,
+  resetCriticalAccount,
+} from "./setup/critical-fixture";
 import {
   actWithReproof,
   completeReproofWithPassword,
@@ -91,6 +103,8 @@ const RESTORED_WEIGHT_KG = 81.4;
 const UNTOUCHED_PULSE_BPM = 58;
 /** The reading that arrives AFTER the snapshot and must not survive it. */
 const POST_SNAPSHOT_PULSE_BPM = 66;
+/** The second account's reading, carried through its own backup. */
+const FRESH_ACCOUNT_WEIGHT_KG = 67.3;
 
 const MEDICATION_NAME = "E2E Backup Tablet";
 
@@ -291,6 +305,45 @@ async function restoreThroughDialog(page: Page, id: string) {
   return answered;
 }
 
+/**
+ * Wait for a queued restore to finish, and fail with its code if it failed.
+ *
+ * The restore runs on the `backup-restore` queue: the request answers 202
+ * with the job and its status route, and the worker inside the server under
+ * test does the work. Nothing after this is read until the job says it is
+ * done, so every assertion is about the finished restore rather than a moment
+ * in the middle of it.
+ */
+async function awaitRestore(page: Page, response: Response): Promise<void> {
+  expect(response.status()).toBe(202);
+  const queued = (await response.json()) as {
+    data: { jobId: string; status: string; statusUrl: string };
+  };
+  expect(queued.data.status).toBe("queued");
+  expect(queued.data.statusUrl).toBe(
+    `/api/admin/backups/restores/${queued.data.jobId}`,
+  );
+  await expect
+    .poll(
+      async () => {
+        const res = await page.request.get(queued.data.statusUrl);
+        const body = (await res.json()) as {
+          data: {
+            status: string;
+            failure: { code: string } | null;
+          } | null;
+        };
+        // A failed job ends the wait with its code in the message instead of
+        // running the clock out on a state that will never change.
+        return body.data?.status === "failed"
+          ? `failed: ${body.data.failure?.code ?? "unknown"}`
+          : body.data?.status;
+      },
+      { timeout: 60_000, intervals: [250, 500, 1_000] },
+    )
+    .toBe("succeeded");
+}
+
 test.describe("Backup and restore, through the settings surfaces", () => {
   test.use({ storageState: BACKUP_STORAGE_STATE_PATH });
 
@@ -319,7 +372,7 @@ test.describe("Backup and restore, through the settings surfaces", () => {
     tamperedCopyId = null;
   });
 
-  test("a record is written, sealed into an HLX1 archive, and snapshotted", async ({
+  test("a record is written, sealed into an HLX1 archive, and snapshotted @critical", async ({
     page,
   }) => {
     await page.goto("/measurements", { waitUntil: "domcontentloaded" });
@@ -505,7 +558,7 @@ test.describe("Backup and restore, through the settings surfaces", () => {
     expect(await storedMeasurements()).toEqual(before);
   });
 
-  test("the snapshot puts back what was deleted and drops what came after", async ({
+  test("the snapshot puts back what was deleted and drops what came after @critical", async ({
     page,
   }) => {
     const record = requireSeeded();
@@ -563,39 +616,10 @@ test.describe("Backup and restore, through the settings surfaces", () => {
     expect(beforeRestore.map((m) => m.id)).toContain(laterId);
 
     await openBackupsConsole(page);
-    const response = await restoreThroughDialog(page, requireSnapshot());
-    // The restore runs on the `backup-restore` queue: the request answers 202
-    // with the job and its status route, and the worker inside the server
-    // under test does the work. Nothing below is read until the job says it
-    // is done, so every assertion is about the finished restore rather than
-    // a moment in the middle of it.
-    expect(response.status()).toBe(202);
-    const queued = (await response.json()) as {
-      data: { jobId: string; status: string; statusUrl: string };
-    };
-    expect(queued.data.status).toBe("queued");
-    expect(queued.data.statusUrl).toBe(
-      `/api/admin/backups/restores/${queued.data.jobId}`,
+    await awaitRestore(
+      page,
+      await restoreThroughDialog(page, requireSnapshot()),
     );
-    await expect
-      .poll(
-        async () => {
-          const res = await page.request.get(queued.data.statusUrl);
-          const body = (await res.json()) as {
-            data: {
-              status: string;
-              failure: { code: string } | null;
-            } | null;
-          };
-          // A failed job ends the wait with its code in the message instead
-          // of running the clock out on a state that will never change.
-          return body.data?.status === "failed"
-            ? `failed: ${body.data.failure?.code ?? "unknown"}`
-            : body.data?.status;
-        },
-        { timeout: 60_000, intervals: [250, 500, 1_000] },
-      )
-      .toBe("succeeded");
 
     const afterRestore = await storedMeasurements();
 
@@ -650,6 +674,166 @@ test.describe("Backup and restore, through the settings surfaces", () => {
       ),
     ).toHaveCount(0);
   });
+
+  test("a full backup the operator restores brings the record back into a fresh account @critical", async ({
+    page,
+    browser,
+  }, testInfo) => {
+    // The second account: a person with a record of their own, who downloads
+    // the file the export card offers. Its jar is its own; the act below
+    // gives it a session that needs a re-proof, like the admin's.
+    const person = criticalAccount("restore", testInfo);
+    await resetCriticalAccount(person, [
+      "DELETE FROM measurement_rollups WHERE user_id = $1",
+      "DELETE FROM measurements WHERE user_id = $1",
+      "DELETE FROM mood_entry_rollups WHERE user_id = $1",
+      "DELETE FROM mood_entries WHERE user_id = $1",
+      "DELETE FROM rate_limits WHERE key = 'export:' || $1",
+    ]);
+
+    const context = await browser.newContext({
+      storageState: person.storageStatePath,
+      baseURL: testInfo.project.use.baseURL,
+    });
+    let backupPath = "";
+    let written: { weightId: string; moodId: string };
+    try {
+      const own = await context.newPage();
+      const endOwnSession = await useStaleSession(own, person.username);
+      try {
+        await own.goto("/measurements", { waitUntil: "domcontentloaded" });
+        await expect(own.locator(MEASUREMENTS_SETTLED).first()).toBeVisible({
+          timeout: 30_000,
+        });
+        written = await own.evaluate(async (weightKg: number) => {
+          const post = async (path: string, body: unknown) => {
+            const res = await fetch(path, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(body),
+            });
+            const json = (await res.json()) as { data: { id: string } | null };
+            if (!res.ok || !json.data) {
+              throw new Error(`${path} answered ${res.status}`);
+            }
+            return json.data.id;
+          };
+          const at = new Date(Date.now() - 90 * 60_000).toISOString();
+          return {
+            weightId: await post("/api/measurements", {
+              type: "WEIGHT",
+              value: weightKg,
+              measuredAt: at,
+            }),
+            moodId: await post("/api/mood-entries", {
+              mood: "OKAY",
+              moodLoggedAt: at,
+            }),
+          };
+        }, FRESH_ACCOUNT_WEIGHT_KG);
+
+        await own.goto("/settings/export", { waitUntil: "domcontentloaded" });
+        await expect(own.getByTestId("export-card-full-backup")).toBeVisible({
+          timeout: 30_000,
+        });
+        const download = own.waitForEvent("download");
+        await actWithReproof(own, person.password, () =>
+          own.getByTestId("export-action-full-backup").click(),
+        );
+        // Kept past the context: a download's own file goes with it.
+        backupPath = testInfo.outputPath("full-backup.json");
+        await (await download).saveAs(backupPath);
+      } finally {
+        await endOwnSession();
+      }
+    } finally {
+      await context.close();
+    }
+
+    // ── the account is gone, and comes back empty under the same id ──────
+    // What a new host is to the runbook (`docs/ops/backup-restore.md`): the
+    // backup names its owner by id, so the account is recreated under it
+    // before the upload. A browser cannot express this; it is the one act
+    // here that goes to Postgres.
+    await recreateCriticalAccount(person);
+    expect(await accountRowCounts(person)).toEqual({
+      measurements: 0,
+      moodEntries: 0,
+    });
+
+    // ── the operator uploads the file and restores it ───────────────────
+    await openBackupsConsole(page);
+    const uploaded = page.waitForResponse(
+      (res) =>
+        new URL(res.url()).pathname === "/api/admin/backups/upload" &&
+        res.request().method() === "POST" &&
+        res.status() !== 401,
+    );
+    await actWithReproof(page, E2E_BACKUP_ADMIN.password, () =>
+      page
+        .locator('input[type="file"][accept*="application/gzip"]')
+        .setInputFiles(backupPath),
+    );
+    const upload = await uploaded;
+    expect(upload.status(), (await upload.text()).slice(0, 400)).toBe(201);
+    const uploadId = ((await upload.json()) as { data: { id: string } }).data
+      .id;
+    await expect(snapshotRow(page, uploadId)).toHaveCount(1, {
+      timeout: 30_000,
+    });
+    await awaitRestore(page, await restoreThroughDialog(page, uploadId));
+
+    // ── and the person signs in to their record ──────────────────────────
+    const back = await browser.newContext({
+      baseURL: testInfo.project.use.baseURL,
+    });
+    try {
+      await clearLoginBuckets();
+      const login = await back.request.post("/api/auth/login", {
+        data: { email: person.username, password: person.password },
+      });
+      expect(login.status()).toBe(200);
+      const signedIn = await back.newPage();
+
+      // The same rows, under their own ids: a restore, not a re-entry.
+      const measurements = (
+        (await (await signedIn.request.get("/api/measurements")).json()) as {
+          data: { measurements: Array<{ id: string; value: number }> };
+        }
+      ).data.measurements;
+      expect(measurements).toEqual([
+        expect.objectContaining({
+          id: written.weightId,
+          value: FRESH_ACCOUNT_WEIGHT_KG,
+        }),
+      ]);
+      const moods = (
+        (await (await signedIn.request.get("/api/mood-entries")).json()) as {
+          data: { entries: Array<{ id: string; mood: string }> };
+        }
+      ).data.entries;
+      expect(moods).toEqual([
+        expect.objectContaining({ id: written.moodId, mood: "OKAY" }),
+      ]);
+
+      await signedIn.goto("/measurements", { waitUntil: "domcontentloaded" });
+      await expect(
+        signedIn
+          .locator(
+            '[data-testid="measurement-row"][data-measurement-type="WEIGHT"]' +
+              `[data-measurement-value="${FRESH_ACCOUNT_WEIGHT_KG}"]`,
+          )
+          .first(),
+      ).toBeVisible({ timeout: 30_000 });
+    } finally {
+      await back.close();
+    }
+
+    // The admin's own record is untouched by a restore aimed at somebody else.
+    expect(
+      (await storedMeasurements()).filter((m) => m.deletedAt === null),
+    ).toHaveLength(2);
+  });
 });
 
 test.describe("A read-level delegate inside the record", () => {
diff --git a/e2e/delegated-writes.spec.ts b/e2e/delegated-writes.spec.ts
index 5c7cfa565..f63b54f5c 100644
--- a/e2e/delegated-writes.spec.ts
+++ b/e2e/delegated-writes.spec.ts
@@ -136,7 +136,7 @@ test.describe("delegated writes", () => {
     ).toBeVisible();
   }
 
-  test("the owner invites at a level that may add entries", async () => {
+  test("the owner invites at a level that may add entries @critical", async () => {
     await openInviteForm();
 
     const identifier = ownerPage.locator(
@@ -183,7 +183,9 @@ test.describe("delegated writes", () => {
     ).toBe(WRITE_LEVEL_VALUE);
   });
 
-  test("the delegate accepts and opens the record", async ({ page }) => {
+  test("the delegate accepts and opens the record @critical", async ({
+    page,
+  }) => {
     await page.goto("/settings/access");
     await page.locator('[data-slot="grant-accept"]').first().click();
 
@@ -203,7 +205,9 @@ test.describe("delegated writes", () => {
     await expect(banner).not.toContainText("read it, not change it");
   });
 
-  test("the reading they add lands in the owner's record", async ({ page }) => {
+  test("the reading they add lands in the owner's record @critical", async ({
+    page,
+  }) => {
     await page.goto("/measurements");
     await expect(
       page.locator('[data-slot="shared-record-banner"]'),
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
index 4a0b4ea49..07761eecc 100644
--- a/e2e/login.spec.ts
+++ b/e2e/login.spec.ts
@@ -1,24 +1,89 @@
+import type { BrowserContext, Page } from "@playwright/test";
+
 import { expect, test } from "./setup/test";
 
+import {
+  clearLoginBuckets,
+  criticalAccount,
+  resetCriticalAccount,
+  type CriticalAccount,
+} from "./setup/critical-fixture";
+
 /**
- * Smoke checks on the login surface — must render, must wire the
- * password-manager autofill hints (autoComplete="username" /
- * "current-password"), must let the user submit.
+ * Signing in and out, against the real server.
  *
- * These do NOT log in (no DB seed required); the password-flow
- * roundtrip is exercised by the integration test in
- * tests/integration/auth-flow.test.ts.
+ * Every test starts without a session and signs in through the form, so what
+ * it reads is what the login route, the session table and the shell did, not
+ * a payload typed into the test. The account is the sign-in journey's own
+ * (one per project, see `critical-fixture.ts`): it gets no jar from global
+ * setup, because the tests here end the sessions they open and a jar captured
+ * once would be dead for a retry.
+ *
+ * The passkey half runs through Chromium's virtual authenticator, attached
+ * over CDP. It is a real authenticator as far as the page and the server are
+ * concerned: the registration and the assertion are signed, and the server
+ * verifies both against the origin and RP id the suite runs under.
  */
-async function openPasswordForm(page: import("@playwright/test").Page) {
+test.use({ storageState: { cookies: [], origins: [] } });
+
+const SESSION_COOKIE = "healthlog_session";
+
+async function openPasswordForm(page: Page): Promise<void> {
   await page.goto("/auth/login");
-  // The login page defaults to passkey mode; the password form is
-  // mounted only after clicking the "Login with password" / "Mit
-  // Passwort anmelden" outline button.
-  await page
-    .getByRole("button", {
-      name: /sign in with password|login with password|mit passwort/i,
-    })
-    .click();
+  // The login page opens in passkey mode; the password form mounts after
+  // this button. The button is server-rendered, so the click is retried
+  // until the form it mounts is there.
+  const usePassword = page.getByTestId("login-use-password");
+  const email = page.getByTestId("login-email");
+  await expect(async () => {
+    await usePassword.click({ timeout: 2_000 });
+    await expect(email).toBeVisible({ timeout: 2_000 });
+  }).toPass({ timeout: 30_000 });
+}
+
+async function signInWithPassword(
+  page: Page,
+  account: CriticalAccount,
+): Promise<void> {
+  await openPasswordForm(page);
+  await page.getByTestId("login-email").fill(account.username);
+  await page.getByTestId("login-password").fill(account.password);
+  // The login route allows five attempts per IP per quarter hour and the
+  // whole suite is one IP; see `clearLoginBuckets`.
+  await clearLoginBuckets();
+  await page.getByTestId("login-password-submit").click();
+  await page.waitForURL((url) => url.pathname === "/", { timeout: 30_000 });
+}
+
+async function sessionCookie(context: BrowserContext): Promise<string> {
+  const cookie = (await context.cookies()).find(
+    (c) => c.name === SESSION_COOKIE,
+  );
+  expect(cookie, "the login answered without a session cookie").toBeTruthy();
+  return cookie!.value;
+}
+
+/** The username `/api/auth/me` answers for this context's session. */
+async function signedInAs(page: Page): Promise<string | null> {
+  const res = await page.request.get("/api/auth/me");
+  if (res.status() !== 200) return null;
+  return ((await res.json()) as { data: { username: string } }).data.username;
+}
+
+async function signOutThroughTheMenu(page: Page): Promise<void> {
+  // The desktop sidebar and the phone top bar each carry a user menu; only
+  // one of them is on screen at a given width.
+  const trigger = page
+    .getByRole("button", { name: "User menu" })
+    .filter({ visible: true })
+    .first();
+  const signOut = page.getByRole("menuitem", { name: "Sign out" });
+  await expect(async () => {
+    await trigger.click({ timeout: 2_000 });
+    await expect(signOut).toBeVisible({ timeout: 2_000 });
+  }).toPass({ timeout: 30_000 });
+  await signOut.click();
+  await page.waitForURL((url) => url.pathname === "/auth/login");
 }
 
 test.describe("login page", () => {
@@ -27,47 +92,166 @@ test.describe("login page", () => {
   }) => {
     await openPasswordForm(page);
 
-    const username = page
-      .getByLabel(/username|benutzername|email|e-mail/i)
-      .first();
+    const username = page.getByTestId("login-email");
     await expect(username).toBeVisible();
     await expect(username).toHaveAttribute("autoComplete", /username|email/);
 
-    const password = page.locator('input[type="password"]').first();
+    const password = page.getByTestId("login-password");
     await expect(password).toBeVisible();
     await expect(password).toHaveAttribute("autoComplete", "current-password");
   });
 
-  test("rejects an obviously-wrong credential pair", async ({ page }) => {
+  test("refuses a wrong password and opens no session", async ({
+    page,
+    context,
+  }, testInfo) => {
+    const account = criticalAccount("auth", testInfo);
     await openPasswordForm(page);
-
-    await page
-      .getByLabel(/username|benutzername|email|e-mail/i)
-      .first()
-      .fill("nobody-here");
-    await page.locator('input[type="password"]').first().fill("not-the-pw");
-
-    // Intercept the API call so the test does not depend on a real
-    // backend rejecting the credentials. The login form's error
-    // surfacing is what we actually want to prove here.
-    await page.route("**/api/auth/login", (route) =>
-      route.fulfill({
-        status: 401,
-        contentType: "application/json",
-        body: JSON.stringify({ error: "Invalid credentials" }),
-      }),
+    await page.getByTestId("login-email").fill(account.username);
+    await page.getByTestId("login-password").fill("not-this-account-password");
+    await clearLoginBuckets();
+    const answer = page.waitForResponse(
+      (res) =>
+        res.url().endsWith("/api/auth/login") &&
+        res.request().method() === "POST",
     );
+    await page.getByTestId("login-password-submit").click();
 
-    // The form has multiple buttons matching /sign in/ — both the
-    // passkey CTA and the password submit. Filter to the submit button
-    // so the click lands on the right one.
-    await page
-      .locator('button[type="submit"]')
-      .filter({ hasText: /login|anmelden|sign in/i })
-      .click();
-
-    await expect(
-      page.getByText(/invalid credentials|ungültig|falsch/i),
-    ).toBeVisible({ timeout: 5_000 });
+    expect((await answer).status()).toBe(401);
+    await expect(page.getByText("Invalid credentials")).toBeVisible();
+    await expect(page).toHaveURL(/\/auth\/login/);
+    expect(
+      (await context.cookies()).some((c) => c.name === SESSION_COOKIE),
+    ).toBe(false);
+  });
+});
+
+test.describe("signing in and out", () => {
+  test("a password sign-in lands on the dashboard as that account @critical", async ({
+    page,
+  }, testInfo) => {
+    const account = criticalAccount("auth", testInfo);
+    await signInWithPassword(page, account);
+
+    await expect(page.locator("main")).toBeVisible();
+    expect(await signedInAs(page)).toBe(account.username);
+  });
+
+  test("signing out ends the session on the server, not only in the browser @critical", async ({
+    page,
+    context,
+    playwright,
+    baseURL,
+  }, testInfo) => {
+    const account = criticalAccount("auth", testInfo);
+    await signInWithPassword(page, account);
+    const cookie = await sessionCookie(context);
+    // A second client holding the same cookie, the way a copied jar or a
+    // stolen cookie would.
+    const replay = await playwright.request.newContext({
+      baseURL,
+      extraHTTPHeaders: { cookie: `${SESSION_COOKIE}=${cookie}` },
+    });
+    try {
+      // Positive control: the replayed cookie is a working session before
+      // the sign-out, so the 401 below is about the sign-out.
+      expect((await replay.get("/api/auth/me")).status()).toBe(200);
+
+      await signOutThroughTheMenu(page);
+
+      // The browser dropped its cookie; that alone would pass with a server
+      // that kept the row. The proof is the old cookie being refused.
+      expect(await signedInAs(page)).toBeNull();
+      expect((await replay.get("/api/auth/me")).status()).toBe(401);
+      expect((await replay.get("/api/measurements?limit=1")).status()).toBe(
+        401,
+      );
+    } finally {
+      await replay.dispose();
+    }
+
+    // And the protected shell sends the browser back to the form.
+    await page.goto("/");
+    await page.waitForURL((url) => url.pathname === "/auth/login");
+  });
+
+  test("a passkey registered in settings signs the account back in @critical", async ({
+    page,
+    context,
+  }, testInfo) => {
+    const account = criticalAccount("auth", testInfo);
+    // A retry, or the last run, may have left a credential on the account;
+    // the list below has to count only the one this test registers.
+    await resetCriticalAccount(account, [
+      "DELETE FROM passkeys WHERE user_id = $1",
+    ]);
+
+    const cdp = await context.newCDPSession(page);
+    await cdp.send("WebAuthn.enable");
+    const { authenticatorId } = await cdp.send(
+      "WebAuthn.addVirtualAuthenticator",
+      {
+        options: {
+          protocol: "ctap2",
+          transport: "internal",
+          hasResidentKey: true,
+          hasUserVerification: true,
+          isUserVerified: true,
+          automaticPresenceSimulation: true,
+        },
+      },
+    );
+
+    try {
+      await signInWithPassword(page, account);
+
+      await test.step("register a passkey under the current password", async () => {
+        await page.goto("/settings/security");
+        await page.getByRole("button", { name: "Add passkey" }).click();
+        const dialog = page.getByRole("alertdialog");
+        await expect(dialog).toBeVisible();
+        await dialog.locator('input[type="password"]').fill(account.password);
+        await dialog.getByRole("button", { name: "Verify and add" }).click();
+
+        await expect(dialog).toBeHidden();
+        await expect(
+          page.getByTestId("passkeys-list").locator("li"),
+        ).toHaveCount(1);
+        const stored = await cdp.send("WebAuthn.getCredentials", {
+          authenticatorId,
+        });
+        expect(stored.credentials).toHaveLength(1);
+        expect(stored.credentials[0].isResidentCredential).toBe(true);
+      });
+
+      await signOutThroughTheMenu(page);
+      expect(await signedInAs(page)).toBeNull();
+
+      await test.step("sign in with it", async () => {
+        await clearLoginBuckets();
+        await page
+          .getByRole("button", { name: "Sign in with Passkey" })
+          .click();
+        await page.waitForURL((url) => url.pathname === "/", {
+          timeout: 30_000,
+        });
+        expect(await signedInAs(page)).toBe(account.username);
+
+        // The server recorded the use against the stored credential.
+        const res = await page.request.get("/api/auth/passkeys");
+        expect(res.status()).toBe(200);
+        const passkeys = (
+          (await res.json()) as {
+            data: Array<{ lastUsedAt: string | null }>;
+          }
+        ).data;
+        expect(passkeys).toHaveLength(1);
+        expect(passkeys[0].lastUsedAt).not.toBeNull();
+      });
+    } finally {
+      await cdp
+        .send("WebAuthn.removeVirtualAuthenticator", { authenticatorId })
+        .catch(() => undefined);
+    }
   });
 });
diff --git a/e2e/measurement-flow.spec.ts b/e2e/measurement-flow.spec.ts
index 414dba6f6..7cc228024 100644
--- a/e2e/measurement-flow.spec.ts
+++ b/e2e/measurement-flow.spec.ts
@@ -1,140 +1,92 @@
+import type { Page } from "@playwright/test";
+
 import { expect, test } from "./setup/test";
 
-import { STORAGE_STATE_PATH } from "./setup/global-setup";
+import {
+  criticalAccount,
+  criticalStorageState,
+  resetCriticalAccount,
+} from "./setup/critical-fixture";
 import { openMenu } from "./open-menu";
 
 /**
- * Add-measurement flow — exercises the dashboard's quick-entry dropdown,
- * the dialog-mounted MeasurementForm, the POST to /api/measurements, and
- * the resulting query invalidation that surfaces the row on
- * `/measurements`.
+ * Add-measurement flow, against the real server: the dashboard's quick-entry
+ * menu, the dialog-mounted MeasurementForm, the real POST to
+ * `/api/measurements`, and then every surface that has to agree about the
+ * reading afterwards: the dashboard tile, the weight chart (through the data
+ * table that lists exactly the points it drew) and the day view.
  *
- * Weight is the simplest type (single numeric input + datetime), so it
- * keeps the spec focused on the round-trip rather than the BP three-field
- * batched submit.
+ * Until v1.46 this spec answered its own POST and its own list read with a
+ * route stub, so it proved that the list renders a row the test typed in.
+ * Nothing here is stubbed now. The account is the measurement journey's own,
+ * one per project (`critical-fixture.ts`), and is emptied of readings before
+ * the test, so "the tile shows the weight" can only mean the weight this test
+ * entered.
+ *
+ * Weight is the simplest type (single numeric input + datetime), so it keeps
+ * the spec on the round trip rather than on the blood-pressure batch.
  */
+
+/** Distinct from anything a fixture seeds, so a match is this reading. */
+const WEIGHT_KG = "81.7";
+
+/** Today in the browser's zone (`timezoneId` in `playwright.config.ts`). */
+function todayInBerlin(): string {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Europe/Berlin",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(new Date());
+}
+
+/** The account's weight readings, as the list route answers them. */
+async function storedWeights(
+  page: Page,
+): Promise<Array<{ value: number; unit: string }>> {
+  const res = await page.request.get("/api/measurements?type=WEIGHT");
+  expect(res.status()).toBe(200);
+  const { data } = (await res.json()) as {
+    data: { measurements: Array<{ value: number; unit: string }> };
+  };
+  return data.measurements.map(({ value, unit }) => ({ value, unit }));
+}
+
 test.describe("add measurement flow", () => {
-  test.use({ storageState: STORAGE_STATE_PATH });
+  test.use({ storageState: criticalStorageState("measurement") });
 
   // This journey lands on the dashboard, which is the most expensive page in
-  // the product to render cold: the route segment suspends behind the server
-  // render and shows `loading.tsx` until it resolves. On a shared runner with
-  // the whole suite in flight that has overrun the 30 s default, and the test
-  // then died on the quick-add trigger rather than on anything it is about.
-  // The subject here is the add-then-appears round trip, not the dashboard's
-  // cold-start latency, so the budget is the page's and the assertions stay
-  // exactly as tight as they were.
+  // the product to render cold, and then reads three more surfaces. The
+  // assertions stay as tight as they are; the budget is the pages'.
   test.setTimeout(90_000);
 
-  test("creating a weight reading surfaces it in the list", async ({
+  test.beforeEach(async ({}, testInfo) => {
+    // Fixture hygiene: what a previous run or a retry left on the account.
+    await resetCriticalAccount(criticalAccount("measurement", testInfo), [
+      "DELETE FROM measurement_rollups WHERE user_id = $1",
+      "DELETE FROM measurements WHERE user_id = $1",
+    ]);
+  });
+
+  test("a weight entered on the dashboard reaches the tile, the chart and the day view @critical", async ({
     page,
   }) => {
-    // Capture the POST payload so we can assert against it independently
-    // of any list-fetch response Playwright might cache. Match both
-    // `/api/measurements` (POST creates a reading) and the list query
-    // `/api/measurements?type=...&limit=...&offset=...` (GET).
-    let postedBody: unknown = null;
-    await page.route("**/api/measurements*", async (route) => {
-      const req = route.request();
-      if (req.method() === "POST") {
-        postedBody = JSON.parse(req.postData() ?? "null");
-        await route.fulfill({
-          status: 200,
-          contentType: "application/json",
-          body: JSON.stringify({
-            data: { id: "m_e2e_1", success: true },
-            error: null,
-          }),
-        });
-        return;
-      }
-      // GET — return the just-posted reading so the list view shows it.
-      // The list expects `data.measurements: Measurement[]` plus
-      // `data.meta.total`; chart fetches use the same envelope.
-      const body = postedBody as {
-        type?: string;
-        value?: number;
-        measuredAt?: string;
-      } | null;
-      // The list-page `Measurement` shape requires `unit` and `source`
-      // — without them the row crashes the render and the e2e poll
-      // never sees "78.4". Mock with the same fields a real reading
-      // carries.
-      const measurements = body
-        ? [
-            {
-              id: "m_e2e_1",
-              type: body.type,
-              value: body.value,
-              unit: body.type === "WEIGHT" ? "kg" : "",
-              source: "MANUAL",
-              measuredAt: body.measuredAt,
-              notes: null,
-            },
-          ]
-        : [];
-      await route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          data: { measurements, meta: { total: measurements.length } },
-          error: null,
-        }),
-      });
-    });
-
-    // Dashboard's analytics fetch — empty summaries are fine; we only
-    // need the page to render so we can click "Add".
-    //
-    // v1.4.39.3 — match `/api/analytics` AND any sliced variant
-    // (`?slice=summaries`). The v1.4.39.2 dashboard split fires both
-    // requests in parallel; the previous string glob missed the slim
-    // variant which then fell through to the real route and slowed
-    // the page paint enough that the post-mutation list query never
-    // surfaced inside the 10 s window.
-    await page.route(/\/api\/analytics(\?|$)/, (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          data: { summaries: {}, bpInTargetPct: null, glucoseByContext: {} },
-          error: null,
-        }),
-      }),
-    );
-    await page.route("**/api/mood/analytics", (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          data: { entries: [], summary: { count: 0 } },
-          error: null,
-        }),
-      }),
-    );
-
     await page.goto("/", { waitUntil: "domcontentloaded" });
 
-    // Open the "Add" dropdown — the dashboard's quick-entry trigger sits
-    // at the top-right of `<main>`. Scope the locator there so we don't
-    // accidentally match an "Add" button on the sidebar.
-    const main = page.locator("main");
-    const addTrigger = main
+    // The quick-entry trigger sits at the top of `<main>`. Waiting for it,
+    // rather than for the route skeleton to go, is waiting for the thing the
+    // next line clicks.
+    const addTrigger = page
+      .locator("main")
       .getByRole("button", { name: /^add$|hinzufügen|hinzufuegen/i })
       .first();
-    // Wait for the trigger itself rather than for the route-level skeleton to
-    // go. The skeleton is also absent while the protected shell holds the
-    // whole page behind its hydration gate, so its disappearance is not a
-    // statement about the suspended segment having resolved; the control the
-    // next line clicks is. `networkidle` says nothing about either.
     await expect(addTrigger).toBeVisible({ timeout: 60_000 });
-    await page.waitForLoadState("networkidle");
+    // The account holds no weight yet, so whatever the surfaces below show
+    // can only come from this reading.
+    expect(await storedWeights(page)).toEqual([]);
 
     await openMenu(page, addTrigger);
 
-    // v1.5: the menu items now have distinct labels — the
-    // measurement entry says "Measurement" / "Messung" instead of "Add",
-    // so we can target it directly.
     // The desktop rail opens a dropdown, the phone shell the capture sheet
     // the bottom nav's plus opens; the measurement entry is in either.
     await page
@@ -143,52 +95,63 @@ test.describe("add measurement flow", () => {
       .first()
       .click();
 
-    // Form should be visible inside the dialog. Switch type to WEIGHT
-    // (combo-box defaults to BLOOD_PRESSURE).
     const dialog = page.getByRole("dialog");
     await expect(dialog).toBeVisible();
 
-    // The Select trigger renders the current label — click to open and
-    // pick the weight option.
+    // The type select defaults to blood pressure.
     await dialog.getByRole("combobox").first().click();
     await page
       .getByRole("option", { name: /weight|gewicht/i })
       .first()
       .click();
+    await dialog.locator("#value").fill(WEIGHT_KG);
 
-    // Weight is single-value mode — fill the value field with 78.4 kg.
-    const valueInput = dialog.locator("#value");
-    await valueInput.fill("78.4");
-
-    // Save
+    const created = page.waitForResponse(
+      (res) =>
+        new URL(res.url()).pathname === "/api/measurements" &&
+        res.request().method() === "POST",
+    );
     await dialog.getByRole("button", { name: /save|speichern/i }).click();
+    const response = await created;
+    expect(response.status()).toBe(201);
+    await expect(dialog).toBeHidden();
 
-    // Dialog closes when the mutation succeeds
-    await expect(dialog).toBeHidden({ timeout: 5_000 });
-
-    // Assert the POST went through with the expected shape
-    expect(postedBody).toMatchObject({
-      type: "WEIGHT",
-      value: 78.4,
+    await test.step("the server stored exactly that reading", async () => {
+      expect(await storedWeights(page)).toEqual([
+        { value: Number(WEIGHT_KG), unit: "kg" },
+      ]);
     });
 
-    // Navigate to the list and confirm the entry surfaces. The list
-    // page renders entries from /api/measurements which we've mocked
-    // to echo the just-posted row.
-    await page.goto("/measurements", { waitUntil: "domcontentloaded" });
+    await test.step("the dashboard tile", async () => {
+      await page.goto("/", { waitUntil: "domcontentloaded" });
+      const tile = page.locator(
+        '[data-slot="dashboard-tile-link"][data-tile-id="weight"]',
+      );
+      await expect(tile).toBeVisible({ timeout: 60_000 });
+      await expect(tile.locator('[data-slot="trend-card-value"]')).toHaveText(
+        WEIGHT_KG,
+      );
+    });
 
-    // The list renders a desktop table AND a mobile card grid (one is
-    // hidden via `md:hidden`/`hidden md:block`). At least one match
-    // means our row landed in the DOM regardless of viewport.
-    await expect
-      .poll(
-        async () =>
-          await page
-            .locator("main")
-            .getByText(/78[.,]4/)
-            .count(),
-        { timeout: 10_000 },
-      )
-      .toBeGreaterThanOrEqual(1);
+    await test.step("the weight chart", async () => {
+      await page.goto("/insights/weight", { waitUntil: "domcontentloaded" });
+      const table = page.locator('[data-slot="chart-data-table"]').first();
+      await expect(table).toBeVisible({ timeout: 30_000 });
+      await table.locator('[data-slot="chart-data-table-toggle"]').click();
+      const rows = table.locator('[data-slot="chart-data-table-row"]');
+      await expect(rows).toHaveCount(1);
+      await expect(rows.first()).toContainText(WEIGHT_KG);
+    });
+
+    await test.step("the day view", async () => {
+      await page.goto(`/measurements?day=${todayInBerlin()}`, {
+        waitUntil: "domcontentloaded",
+      });
+      const value = page.locator(
+        '[data-slot="day-view"] [data-slot="day-value"][data-type="WEIGHT"]',
+      );
+      await expect(value).toBeVisible({ timeout: 30_000 });
+      await expect(value).toContainText(WEIGHT_KG);
+    });
   });
 });
diff --git a/e2e/medication-compliance-journey.spec.ts b/e2e/medication-compliance-journey.spec.ts
index 83f01b3dc..809f7120e 100644
--- a/e2e/medication-compliance-journey.spec.ts
+++ b/e2e/medication-compliance-journey.spec.ts
@@ -363,7 +363,7 @@ test.describe("medication adherence journey", () => {
     });
   });
 
-  test("a taken and a skipped dose move the card, the history and the dashboard tile", async ({
+  test("a taken and a skipped dose move the card, the history and the dashboard tile @critical", async ({
     page,
   }) => {
     // The wizard is a seven-step dialog with per-step validation gating Next;
diff --git a/e2e/mental-health-check-in.spec.ts b/e2e/mental-health-check-in.spec.ts
index 85e4b77bb..399bf49f2 100644
--- a/e2e/mental-health-check-in.spec.ts
+++ b/e2e/mental-health-check-in.spec.ts
@@ -2,6 +2,11 @@ import AxeBuilder from "@axe-core/playwright";
 import type { Page } from "@playwright/test";
 import { expect, test } from "./setup/test";
 
+import {
+  criticalAccount,
+  criticalStorageState,
+  resetCriticalAccount,
+} from "./setup/critical-fixture";
 import { STORAGE_STATE_PATH } from "./setup/global-setup";
 
 /**
@@ -37,9 +42,16 @@ const CASES: readonly Case[] = [
 
 async function expectNoSeriousViolations(page: Page, label: string) {
   // The pointer rests where the last tap landed; a hover tint under it is
-  // not what the screen shows at rest.
+  // not what the screen shows at rest. Moving it away starts the tint's
+  // transition back, so the scan waits for every transition to settle rather
+  // than for a guessed number of milliseconds. Transitions only: a spinner's
+  // or a skeleton's endless animation would never settle.
   await page.mouse.move(0, 0);
-  await page.waitForTimeout(300);
+  await page.waitForFunction(() =>
+    document
+      .getAnimations()
+      .every((a) => !(a instanceof CSSTransition) || a.playState !== "running"),
+  );
   const results = await new AxeBuilder({ page })
     .include(
       '[data-slot="mental-health-check-in"], [data-slot="mental-health-result"]',
@@ -346,3 +358,177 @@ test.describe("mental-health check-in, in the reader's language", () => {
     ).toHaveCount(0);
   });
 });
+
+/**
+ * A WHO-5 check-in, word for word, in German and in Brazilian Portuguese,
+ * on the wellbeing journey's own account (one per project,
+ * `critical-fixture.ts`) against the real server.
+ *
+ * The journeys above anchor on data attributes so they read the same in every
+ * language; this one reads the words. The German text is the validated WHO
+ * translation, which the form has to reproduce exactly; the Brazilian one is
+ * HealthLog's own and has to say so. Either way the stored assessment records
+ * the language and the kind of wording it was answered in, and the score the
+ * server computed is the one on screen.
+ *
+ * The strings are written out here rather than imported from
+ * `src/lib/mental-health/wording/`: a test that read the expected text from
+ * the module it checks would pass on any edit to that module.
+ */
+const WHO5_WORDING = {
+  de: {
+    validated: true,
+    progress: "Frage 1 von 5",
+    stem: "In den letzten zwei Wochen …",
+    first: "… war ich froh und guter Laune",
+    last: "… war mein Alltag voller Dinge, die mich interessieren",
+    // In the order the form prints them, best first.
+    anchors: [
+      "Die ganze Zeit",
+      "Meistens",
+      "Etwas mehr als die Hälfte der Zeit",
+      "Etwas weniger als die Hälfte der Zeit",
+      "Ab und zu",
+      "Zu keinem Zeitpunkt",
+    ],
+  },
+  "pt-BR": {
+    validated: false,
+    progress: "Pergunta 1 de 5",
+    stem: "Nas últimas duas semanas …",
+    first: "Eu me senti alegre e de bom humor",
+    last: "Meu dia a dia foi preenchido com coisas que me interessam",
+    anchors: [
+      "O tempo todo",
+      "A maior parte do tempo",
+      "Mais da metade do tempo",
+      "Menos da metade do tempo",
+      "Algumas vezes",
+      "Em nenhum momento",
+    ],
+  },
+} as const;
+
+/** The account's stored assessments, as the list route answers them. */
+async function storedAssessments(page: Page): Promise<
+  Array<{
+    instrument: string;
+    locale: string;
+    wording: string | null;
+    totalScore: number;
+  }>
+> {
+  const res = await page.request.get("/api/mental-health/assessments");
+  expect(res.status()).toBe(200);
+  const { data } = (await res.json()) as {
+    data: {
+      assessments: Array<{
+        instrument: string;
+        locale: string;
+        wording: string | null;
+        totalScore: number;
+      }>;
+    };
+  };
+  return data.assessments.map(
+    ({ instrument, locale, wording, totalScore }) => ({
+      instrument,
+      locale,
+      wording,
+      totalScore,
+    }),
+  );
+}
+
+test.describe("WHO-5 check-in, word for word", () => {
+  test.use({ storageState: criticalStorageState("wellbeing") });
+  // Both locales write to the one account of the project, and each test
+  // empties it first; in order, so neither empties the other's mid-run.
+  test.describe.configure({ mode: "default" });
+
+  test.beforeEach(async ({}, testInfo) => {
+    // Fixture hygiene: what a previous run or a retry left on the account.
+    await resetCriticalAccount(criticalAccount("wellbeing", testInfo), [
+      "DELETE FROM mental_health_assessments WHERE user_id = $1",
+    ]);
+  });
+
+  for (const [locale, words] of Object.entries(WHO5_WORDING)) {
+    test(`${locale}: the form reads the ${words.validated ? "validated" : "HealthLog"} translation and the result is stored in it @critical`, async ({
+      page,
+    }) => {
+      test.setTimeout(90_000);
+      await openInLocale(page, locale);
+      await expect(page.locator("html")).toHaveAttribute("lang", locale);
+      await page
+        .locator('[data-slot="instrument-card"][data-instrument="WHO5"]')
+        .locator('[data-slot="instrument-card-start"]')
+        .click();
+
+      const wizard = page.locator(
+        '[data-slot="mental-health-check-in"][data-instrument="WHO5"]',
+      );
+      const step = (n: number) =>
+        wizard.locator(`[data-slot="check-in-step"][data-step="${n}"]`);
+
+      await expect(step(1)).toBeVisible();
+      await expect(
+        wizard.locator('[data-slot="check-in-progress"]'),
+      ).toContainText(words.progress);
+      await expect(step(1).locator('[data-slot="check-in-stem"]')).toHaveText(
+        words.stem,
+      );
+      await expect(
+        step(1).locator('[data-slot="check-in-question"]'),
+      ).toHaveText(words.first);
+      await expect(step(1).locator('[role="radio"]')).toHaveText([
+        ...words.anchors,
+      ]);
+      await expect(
+        wizard.locator('[data-slot="check-in-unvalidated-note"]'),
+      ).toHaveCount(words.validated ? 0 : 1);
+
+      // "Meistens" / "A maior parte do tempo" (value 4) on every item.
+      for (let n = 1; n <= 5; n++) {
+        await expect(step(n)).toBeVisible();
+        if (n === 5) {
+          await expect(
+            step(n).locator('[data-slot="check-in-question"]'),
+          ).toHaveText(words.last);
+        }
+        await step(n).getByRole("radio", { name: words.anchors[1] }).click();
+      }
+
+      await expect(
+        wizard.locator('[data-slot="check-in-review"]'),
+      ).toBeVisible();
+      const created = page.waitForResponse(
+        (res) =>
+          new URL(res.url()).pathname === "/api/mental-health/assessments" &&
+          res.request().method() === "POST",
+      );
+      await wizard.locator('[data-slot="check-in-submit"]').click();
+      expect((await created).status()).toBe(201);
+
+      // Five items at 4, times WHO-5's multiplier of 4.
+      const result = page.locator(
+        '[data-slot="mental-health-result"][data-instrument="WHO5"]',
+      );
+      await expect(result.locator('[data-slot="result-score"]')).toContainText(
+        "80",
+      );
+      await expect(
+        result.locator('[data-slot="result-wording-note"]'),
+      ).toHaveCount(words.validated ? 0 : 1);
+
+      expect(await storedAssessments(page)).toEqual([
+        {
+          instrument: "WHO5",
+          locale,
+          wording: words.validated ? "validated" : "unvalidated_translation",
+          totalScore: 80,
+        },
+      ]);
+    });
+  }
+});
diff --git a/e2e/mood-timestamp.spec.ts b/e2e/mood-timestamp.spec.ts
index f157aa674..92f0a43f9 100644
--- a/e2e/mood-timestamp.spec.ts
+++ b/e2e/mood-timestamp.spec.ts
@@ -1,39 +1,53 @@
+import type { Page } from "@playwright/test";
+
 import { expect, test } from "./setup/test";
 
-import { STORAGE_STATE_PATH } from "./setup/global-setup";
+import {
+  criticalAccount,
+  criticalStorageState,
+  resetCriticalAccount,
+} from "./setup/critical-fixture";
+
+/**
+ * Logging a mood through the form, against the real server: the time stays
+ * visible while the details are collapsed, the instant typed into it is the
+ * instant stored, and the entry is in the list afterwards.
+ *
+ * Until v1.46 this spec answered the POST and the list read itself, so the
+ * list was always empty and the POST always succeeded. The account is now the
+ * mood journey's own, one per project (`critical-fixture.ts`), emptied before
+ * the test; the empty state the form opens from is the account's real one.
+ */
+
+/** The account's mood entries, as the list route answers them. */
+async function storedMoods(
+  page: Page,
+): Promise<Array<{ mood: string; moodLoggedAt: string }>> {
+  const res = await page.request.get("/api/mood-entries");
+  expect(res.status()).toBe(200);
+  const { data } = (await res.json()) as {
+    data: { entries: Array<{ mood: string; moodLoggedAt: string }> };
+  };
+  return data.entries.map(({ mood, moodLoggedAt }) => ({ mood, moodLoggedAt }));
+}
 
 test.describe("mood timestamp capture", () => {
-  test.use({ storageState: STORAGE_STATE_PATH });
+  test.use({ storageState: criticalStorageState("mood") });
 
-  test("keeps Time visible while details are collapsed and submits the selected instant", async ({
+  test.beforeEach(async ({}, testInfo) => {
+    // Fixture hygiene: what a previous run or a retry left on the account.
+    await resetCriticalAccount(criticalAccount("mood", testInfo), [
+      "DELETE FROM mood_entry_rollups WHERE user_id = $1",
+      "DELETE FROM mood_entries WHERE user_id = $1",
+    ]);
+  });
+
+  test("a mood logged at a chosen time is stored at that instant and listed @critical", async ({
     page,
   }) => {
-    let submitted: Record<string, unknown> | null = null;
-
-    await page.route("**/api/mood-entries*", async (route) => {
-      if (route.request().method() === "POST") {
-        submitted = route.request().postDataJSON() as Record<string, unknown>;
-        await route.fulfill({
-          status: 201,
-          contentType: "application/json",
-          body: JSON.stringify({ data: { id: "created-mood" }, error: null }),
-        });
-        return;
-      }
-
-      await route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          data: { entries: [], meta: { total: 0, limit: 50, offset: 0 } },
-          error: null,
-        }),
-      });
-    });
-
     await page.goto("/mood", { waitUntil: "domcontentloaded" });
-    // The list is mocked empty, so its empty state carries the add action
-    // (the header drops its own while there is nothing to list).
+    // An empty list carries the add action in its empty state (the header
+    // drops its own while there is nothing to list).
     await page.getByRole("button", { name: "Log your first mood" }).click();
     await page.getByRole("radio", { name: "Amazing" }).click();
 
@@ -53,12 +67,32 @@ test.describe("mood timestamp capture", () => {
     await timeInput.fill("09:45");
     await timeInput.blur();
 
+    const created = page.waitForResponse(
+      (res) =>
+        new URL(res.url()).pathname === "/api/mood-entries" &&
+        res.request().method() === "POST",
+    );
     await page.getByRole("button", { name: "Save", exact: true }).click();
+    expect((await created).status()).toBe(201);
 
-    await expect.poll(() => submitted).not.toBeNull();
-    expect(submitted).toMatchObject({
-      mood: "SUPER_GUT",
-      moodLoggedAt: "2026-01-15T08:45:00.000Z",
+    // 09:45 in Berlin in January is 08:45 UTC.
+    expect(await storedMoods(page)).toEqual([
+      { mood: "SUPER_GUT", moodLoggedAt: "2026-01-15T08:45:00.000Z" },
+    ]);
+
+    // The list shows it, at either width (the table and the phone cards each
+    // carry the marker; one of them is on screen).
+    const rows = page.locator('[data-slot="mood-rows"]').filter({
+      visible: true,
     });
+    await expect(rows).toBeVisible();
+    await expect(rows).toContainText("Amazing");
+    await expect(rows).toContainText("09:45");
+
+    // And still after a reload, which reads the list from the server again
+    // rather than from the cache the mutation updated.
+    await page.reload({ waitUntil: "domcontentloaded" });
+    await expect(rows).toContainText("Amazing");
+    await expect(rows).toContainText("09:45");
   });
 });
diff --git a/e2e/pwa-offline.spec.ts b/e2e/pwa-offline.spec.ts
index 05701ce0d..28b34c16a 100644
--- a/e2e/pwa-offline.spec.ts
+++ b/e2e/pwa-offline.spec.ts
@@ -25,7 +25,7 @@ import { MOBILE_ROUTES_STORAGE_STATE_PATH } from "./setup/global-setup";
 test.describe("offline, with the service worker", () => {
   test.use({ storageState: MOBILE_ROUTES_STORAGE_STATE_PATH });
 
-  test("an open page says it is offline, a new one opens the offline page, and both recover", async ({
+  test("an open page says it is offline, a new one opens the offline page, and both recover @critical", async ({
     page,
     context,
   }) => {
diff --git a/e2e/record-csv-import.spec.ts b/e2e/record-csv-import.spec.ts
index 5ad83d964..d1168700a 100644
--- a/e2e/record-csv-import.spec.ts
+++ b/e2e/record-csv-import.spec.ts
@@ -1,29 +1,69 @@
+import type { Page } from "@playwright/test";
+
 import { expect, test } from "./setup/test";
 
-import { STORAGE_STATE_PATH } from "./setup/global-setup";
+import {
+  criticalAccount,
+  criticalStorageState,
+  resetCriticalAccount,
+} from "./setup/critical-fixture";
 
 /**
- * Lab results from a spreadsheet (#1215), at phone width, against the real
- * server: the mapping is suggested from the headers, the check reports a
- * refused row by line and writes nothing, the import writes the rest, and a
- * second import of the same file only finds duplicates.
+ * Lab results from a spreadsheet (#1215), against the real server: the
+ * mapping is suggested from the headers, the check reports a refused row by
+ * line and writes nothing, the import writes the rest, the imported row is on
+ * the labs page, and a second import of the same file only finds duplicates.
+ *
+ * The account is the labs journey's own, one per project
+ * (`critical-fixture.ts`), emptied of results first. Before v1.46 this ran on
+ * the shared account in both projects, so the "only duplicates" verdict of
+ * one project could be the other project's first import.
  */
+
+const ANALYTE = "E2E Marker CSV";
+
 function csv(): string {
   const day = new Date(Date.now() - 30 * 86_400_000).toISOString().slice(0, 10);
   return [
     "Analyte;Value;Unit;Date",
-    `E2E Marker CSV;5,4;mmol/L;${day}`,
-    `E2E Marker CSV;1.234;mmol/L;${day}`,
+    // A decimal comma, as a German lab export writes it.
+    `${ANALYTE};5,4;mmol/L;${day}`,
+    // Either 1.234 or 1234: refused as ambiguous rather than guessed.
+    `${ANALYTE};1.234;mmol/L;${day}`,
   ].join("\n");
 }
 
+/** The account's lab results, as the list route answers them. */
+async function storedResults(
+  page: Page,
+): Promise<Array<{ analyte: string; value: number | null; unit: string }>> {
+  const res = await page.request.get("/api/labs");
+  expect(res.status()).toBe(200);
+  const { data } = (await res.json()) as {
+    data: {
+      results: Array<{ analyte: string; value: number | null; unit: string }>;
+    };
+  };
+  return data.results.map(({ analyte, value, unit }) => ({
+    analyte,
+    value,
+    unit,
+  }));
+}
+
 test.describe("record CSV import", () => {
-  test.use({
-    storageState: STORAGE_STATE_PATH,
-    viewport: { width: 390, height: 844 },
+  test.use({ storageState: criticalStorageState("labs") });
+
+  test.beforeEach(async ({}, testInfo) => {
+    // Fixture hygiene: what a previous run or a retry left on the account.
+    await resetCriticalAccount(criticalAccount("labs", testInfo), [
+      "DELETE FROM lab_results WHERE user_id = $1",
+    ]);
   });
 
-  test("checks, imports and then only finds duplicates", async ({ page }) => {
+  test("checks, imports, lists the result and then only finds duplicates @critical", async ({
+    page,
+  }) => {
     await page.goto("/settings/export");
     await page.locator('[data-slot="record-import-open-labs"]').click();
     const sheet = page.locator('[data-slot="record-import-sheet"]');
@@ -48,19 +88,42 @@ test.describe("record CSV import", () => {
     await expect(
       page.locator('[data-slot="record-import-error-row"]'),
     ).toHaveCount(1);
+    // The check is a dry run.
+    expect(await storedResults(page)).toEqual([]);
 
     await page.locator('[data-slot="record-import-run"]').click();
     await expect(
       page.locator('[data-slot="record-import-done"]'),
     ).toBeVisible();
+    expect(await storedResults(page)).toEqual([
+      { analyte: ANALYTE, value: 5.4, unit: "mmol/L" },
+    ]);
 
-    // Second run of the same file.
-    await page.keyboard.press("Escape");
-    await page.locator('[data-slot="record-import-open-labs"]').click();
-    await page.locator('[data-slot="record-import-file"]').setInputFiles(file);
-    await page.locator('[data-slot="record-import-check"]').click();
-    await expect(
-      page.locator('[data-slot="record-import-run"]'),
-    ).toBeDisabled();
+    await test.step("the result is on the labs page", async () => {
+      await page.goto("/labs");
+      const analyte = page
+        .locator('[data-slot="lab-list-analyte"]')
+        .filter({ hasText: ANALYTE })
+        .filter({ visible: true });
+      await expect(analyte).toHaveCount(1);
+      // The cell the name heads carries the latest reading under it.
+      await expect(analyte.locator("xpath=../..")).toContainText("5.4");
+    });
+
+    await test.step("a second run of the same file", async () => {
+      await page.goto("/settings/export");
+      await page.locator('[data-slot="record-import-open-labs"]').click();
+      await page
+        .locator('[data-slot="record-import-file"]')
+        .setInputFiles(file);
+      await page.locator('[data-slot="record-import-check"]').click();
+      await expect(
+        page.locator('[data-slot="record-import-checked"]'),
+      ).toBeVisible();
+      await expect(
+        page.locator('[data-slot="record-import-run"]'),
+      ).toBeDisabled();
+      expect(await storedResults(page)).toHaveLength(1);
+    });
   });
 });
diff --git a/e2e/settings-persistence.spec.ts b/e2e/settings-persistence.spec.ts
new file mode 100644
index 000000000..cdf7399de
--- /dev/null
+++ b/e2e/settings-persistence.spec.ts
@@ -0,0 +1,82 @@
+import type { Page } from "@playwright/test";
+
+import { expect, test } from "./setup/test";
+
+import {
+  criticalAccount,
+  criticalStorageState,
+  resetCriticalAccount,
+} from "./setup/critical-fixture";
+
+/**
+ * A settings change is the server's, not the tab's.
+ *
+ * The time-format choice is changed through the account settings, then read
+ * back three ways that a client-side cache could not fake: after a reload, in
+ * a second browser context that shares the session but none of the first
+ * one's storage, and on `/api/auth/me`, which every client renders from.
+ *
+ * The account is the settings journey's own, one per project
+ * (`critical-fixture.ts`), and is put back to the default first.
+ */
+
+async function openTimeFormat(page: Page) {
+  await page.goto("/settings/account");
+  const select = page.getByTestId("settings-time-format-select");
+  await expect(select).toBeVisible({ timeout: 30_000 });
+  // The control is disabled until the account payload has landed.
+  await expect(select).toBeEnabled();
+  return select;
+}
+
+async function publishedTimeFormat(page: Page): Promise<string> {
+  const res = await page.request.get("/api/auth/me");
+  expect(res.status()).toBe(200);
+  return ((await res.json()) as { data: { timeFormat: string } }).data
+    .timeFormat;
+}
+
+test.describe("settings persistence", () => {
+  test.use({ storageState: criticalStorageState("settings") });
+
+  test.beforeEach(async ({}, testInfo) => {
+    await resetCriticalAccount(criticalAccount("settings", testInfo), [
+      "UPDATE users SET time_format = 'AUTO' WHERE id = $1",
+    ]);
+  });
+
+  test("a time-format change survives a reload and reaches a second browser @critical", async ({
+    page,
+    browser,
+  }, testInfo) => {
+    const select = await openTimeFormat(page);
+    await expect(select).toHaveValue("AUTO");
+
+    const saved = page.waitForResponse(
+      (res) =>
+        new URL(res.url()).pathname === "/api/user/profile" &&
+        res.request().method() === "PATCH",
+    );
+    await select.selectOption("H12");
+    expect((await saved).status()).toBe(200);
+    expect(await publishedTimeFormat(page)).toBe("H12");
+
+    await page.reload();
+    await expect(page.getByTestId("settings-time-format-select")).toHaveValue(
+      "H12",
+    );
+
+    // Same session cookie, nothing else: no local storage, no IndexedDB
+    // query snapshot, no in-memory cache.
+    const other = await browser.newContext({
+      storageState: criticalAccount("settings", testInfo).storageStatePath,
+      baseURL: testInfo.project.use.baseURL,
+    });
+    try {
+      const second = await other.newPage();
+      await expect(await openTimeFormat(second)).toHaveValue("H12");
+    } finally {
+      await other.close();
+    }
+  });
+});
diff --git a/e2e/setup/critical-fixture.ts b/e2e/setup/critical-fixture.ts
new file mode 100644
index 000000000..e7ec87b76
--- /dev/null
+++ b/e2e/setup/critical-fixture.ts
@@ -0,0 +1,253 @@
+/**
+ * Accounts for the `@critical` journeys: one per journey AND per project.
+ *
+ * The `@critical` journeys run against the real server with no `/api` stubs
+ * (`src/__tests__/e2e-critical-no-api-stub-guard.test.ts` holds that line), so
+ * every verdict they read is a statement about a real record. Two things would
+ * make those verdicts somebody else's:
+ *
+ *   - a sibling spec writing into the same account. The shared fixture account
+ *     is read and written by sixty files, so "the dashboard tile shows the
+ *     weight I just entered" is only true of an account nobody else writes;
+ *   - the same journey running in the other project. Every other journey that
+ *     owns its account answers that by running in ONE project (the long list in
+ *     `playwright.config.ts`). These journeys are the release gate and are
+ *     meant to hold at both widths, so instead of dropping a project each
+ *     project gets its own account: `chromium-desktop` and `chromium-mobile`
+ *     run the same file in parallel and never meet.
+ *
+ * The accounts are seeded and signed in by `global-setup.ts`, like every
+ * other fixture account; this module only names them and resets what the
+ * journeys write. It talks to Postgres through `pg` for the reason
+ * `global-setup.ts` gives (Playwright's loader cannot load the generated
+ * Prisma client).
+ */
+import { resolve } from "node:path";
+
+import type { TestInfo } from "@playwright/test";
+import pg from "pg";
+
+/** The journeys that own an account pair. */
+export const CRITICAL_JOURNEYS = [
+  "auth",
+  "measurement",
+  "mood",
+  "labs",
+  "wellbeing",
+  "settings",
+  // The fresh account a full backup is imported into. The backup journey
+  // runs in the desktop project only (`playwright.config.ts` says why), so
+  // only the desktop account of this pair is ever written.
+  "restore",
+] as const;
+
+export type CriticalJourney = (typeof CRITICAL_JOURNEYS)[number];
+
+/**
+ * Journeys that sign in through the form in every test and so get no jar.
+ * The sign-in journey ends the sessions it opens; a jar captured once in
+ * global setup would be dead for a retry, and a retry has to start from the
+ * same place as the first attempt.
+ */
+export const FORM_SIGN_IN_JOURNEYS: ReadonlySet<CriticalJourney> = new Set([
+  "auth",
+]);
+
+/** The projects the journeys run in; each gets its own account per journey. */
+export const CRITICAL_PROJECTS = {
+  "chromium-desktop": "d",
+  "chromium-mobile": "m",
+} as const;
+
+type CriticalProject = keyof typeof CRITICAL_PROJECTS;
+
+export interface CriticalAccount {
+  username: string;
+  email: string;
+  password: string;
+  storageStatePath: string;
+}
+
+function accountFor(
+  journey: CriticalJourney,
+  suffix: (typeof CRITICAL_PROJECTS)[CriticalProject],
+): CriticalAccount {
+  const username = `e2e-critical-${journey}-${suffix}`;
+  return {
+    username,
+    email: `${username}@healthlog.test`,
+    // Fixture credential for a throwaway test database, like every other
+    // account in `global-setup.ts`. Long and mixed so it would also clear the
+    // registration strength gate.
+    password: `Cq7!${journey}-${suffix}-Wz4pLx`,
+    storageStatePath: resolve(
+      process.cwd(),
+      `e2e/setup/storageStateCritical-${journey}-${suffix}.json`,
+    ),
+  };
+}
+
+/** Every critical account, for `global-setup.ts` to seed and sign in. */
+export function allCriticalAccounts(): Array<
+  CriticalAccount & { journey: CriticalJourney }
+> {
+  return CRITICAL_JOURNEYS.flatMap((journey) =>
+    Object.values(CRITICAL_PROJECTS).map((suffix) => ({
+      journey,
+      ...accountFor(journey, suffix),
+    })),
+  );
+}
+
+/**
+ * The account a journey uses in the project the test is running in. A project
+ * outside the map has no account on purpose: a critical journey that grows a
+ * third project has to say which account it reads.
+ */
+export function criticalAccount(
+  journey: CriticalJourney,
+  testInfo: TestInfo,
+): CriticalAccount {
+  const suffix = CRITICAL_PROJECTS[testInfo.project.name as CriticalProject];
+  if (!suffix) {
+    throw new Error(
+      `[critical-fixture] no ${journey} account for project ${testInfo.project.name}`,
+    );
+  }
+  return accountFor(journey, suffix);
+}
+
+/**
+ * A `test.use({ storageState })` value that picks the jar of the running
+ * project's account.
+ */
+export function criticalStorageState(journey: CriticalJourney) {
+  return async (
+    {}: object,
+    use: (path: string) => Promise<void>,
+    testInfo: TestInfo,
+  ): Promise<void> => {
+    await use(criticalAccount(journey, testInfo).storageStatePath);
+  };
+}
+
+async function withPool<T>(fn: (pool: pg.Pool) => Promise<T>): Promise<T> {
+  const url = process.env.DATABASE_URL;
+  if (!url) throw new Error("[critical-fixture] DATABASE_URL is not set");
+  const pool = new pg.Pool({ connectionString: url });
+  try {
+    return await fn(pool);
+  } finally {
+    await pool.end();
+  }
+}
+
+/**
+ * Run statements against one critical account, with `$1` bound to its id.
+ * Fixture hygiene only: what a previous run or a retry left behind. Nothing a
+ * journey asserts is written here.
+ */
+export async function resetCriticalAccount(
+  account: CriticalAccount,
+  statements: readonly string[],
+): Promise<void> {
+  await withPool(async (pool) => {
+    const res = await pool.query<{ id: string }>(
+      "SELECT id FROM users WHERE username = $1",
+      [account.username],
+    );
+    const id = res.rows[0]?.id;
+    if (!id) {
+      throw new Error(
+        `[critical-fixture] ${account.username} not seeded — global-setup must run first`,
+      );
+    }
+    for (const sql of statements) await pool.query(sql, [id]);
+  });
+}
+
+/**
+ * Clear the login buckets. The ceiling is five attempts per IP per quarter
+ * hour, the suite shares one IP, and global setup alone signs in more than
+ * twenty times; a journey that signs in through the form would otherwise meet
+ * the fixture's 429 rather than the product. Only the auth surfaces' buckets
+ * are touched, exactly as global setup does between its own logins.
+ */
+export async function clearLoginBuckets(): Promise<void> {
+  await withPool(async (pool) => {
+    await pool.query(`DELETE FROM rate_limits WHERE key LIKE 'auth:%'`);
+  });
+}
+
+/**
+ * Delete a critical account and create it again, empty, under the same id,
+ * username and password. The backup journey restores a person's file into
+ * the account the way the runbook brings one back on a new host, where the
+ * file names its owner by id; a browser cannot delete and recreate a row
+ * under a chosen id, so this is the fixture's act, not the journey's.
+ */
+export async function recreateCriticalAccount(
+  account: CriticalAccount,
+): Promise<void> {
+  await withPool(async (pool) => {
+    const client = await pool.connect();
+    try {
+      await client.query("BEGIN");
+      const res = await client.query<{
+        id: string;
+        password_hash: string;
+        module_preferences_json: unknown;
+      }>(
+        `SELECT id, password_hash, module_preferences_json
+         FROM users WHERE username = $1`,
+        [account.username],
+      );
+      const row = res.rows[0];
+      if (!row) {
+        throw new Error(`[critical-fixture] ${account.username} not seeded`);
+      }
+      await client.query("DELETE FROM users WHERE id = $1", [row.id]);
+      await client.query(
+        `INSERT INTO users
+          (id, username, email, password_hash, role, created_at, updated_at,
+           onboarding_completed_at, onboarding_tour_completed,
+           module_preferences_json)
+         VALUES ($1, $2, $3, $4, 'USER', NOW(), NOW(), NOW(), true, $5::jsonb)`,
+        [
+          row.id,
+          account.username,
+          account.email,
+          row.password_hash,
+          JSON.stringify(row.module_preferences_json),
+        ],
+      );
+      await client.query("COMMIT");
+    } catch (err) {
+      await client.query("ROLLBACK");
+      throw err;
+    } finally {
+      client.release();
+    }
+  });
+}
+
+/** How many measurements and mood entries a critical account holds. */
+export async function accountRowCounts(
+  account: CriticalAccount,
+): Promise<{ measurements: number; moodEntries: number }> {
+  return withPool(async (pool) => {
+    const res = await pool.query<{ measurements: string; mood: string }>(
+      `SELECT
+         (SELECT count(*) FROM measurements m
+            JOIN users u ON u.id = m.user_id WHERE u.username = $1)
+           AS measurements,
+         (SELECT count(*) FROM mood_entries e
+            JOIN users u ON u.id = e.user_id WHERE u.username = $1) AS mood`,
+      [account.username],
+    );
+    return {
+      measurements: Number(res.rows[0]?.measurements ?? 0),
+      moodEntries: Number(res.rows[0]?.mood ?? 0),
+    };
+  });
+}
diff --git a/e2e/setup/global-setup.ts b/e2e/setup/global-setup.ts
index faf10ceb1..493b36f80 100644
--- a/e2e/setup/global-setup.ts
+++ b/e2e/setup/global-setup.ts
@@ -33,6 +33,7 @@ import {
 } from "@playwright/test";
 import pg from "pg";
 
+import { allCriticalAccounts, FORM_SIGN_IN_JOURNEYS } from "./critical-fixture";
 import { seedDayDoorsRecord } from "./day-doors-fixture";
 import { seedMobileRoutesRecord } from "./mobile-routes-fixture";
 
@@ -1539,6 +1540,49 @@ export default async function globalSetup(config: FullConfig): Promise<void> {
       [cuid(), now, E2E_BACKUP_ADMIN.username, E2E_BACKUP_DELEGATE.username],
     );
 
+    // ── the @critical journeys' accounts ─────────────────────────────────
+    //
+    // One per journey and per project; `critical-fixture.ts` says why. Every
+    // module a journey reaches is switched on (wellbeing and labs are opt-in),
+    // and the passkeys the sign-in journey registers go with the row's reset,
+    // so a re-run registers into an empty list rather than beside the last
+    // run's credential.
+    for (const account of allCriticalAccounts()) {
+      await pool.query(
+        `INSERT INTO users
+          (id, username, email, password_hash, role, created_at, updated_at,
+           onboarding_completed_at, onboarding_tour_completed,
+           module_preferences_json)
+         VALUES ($1, $2, $3, $4, 'USER', $5, $5, $5, true, $6::jsonb)
+         ON CONFLICT (username) DO UPDATE SET
+           email = EXCLUDED.email,
+           password_hash = EXCLUDED.password_hash,
+           updated_at = EXCLUDED.updated_at,
+           onboarding_completed_at = EXCLUDED.onboarding_completed_at,
+           onboarding_tour_completed = EXCLUDED.onboarding_tour_completed,
+           module_preferences_json = EXCLUDED.module_preferences_json,
+           totp_confirmed_at = NULL`,
+        [
+          cuid(),
+          account.username,
+          account.email,
+          await hashPassword(account.password),
+          now,
+          JSON.stringify({
+            mood: true,
+            labs: true,
+            mentalHealth: true,
+            medications: true,
+          }),
+        ],
+      );
+      await pool.query(
+        `DELETE FROM passkeys
+         WHERE user_id = (SELECT id FROM users WHERE username = $1)`,
+        [account.username],
+      );
+    }
+
     // Console (instead of structured logging) is intentional here —
     // global-setup runs outside the app's logging context, and the
     // line is useful when debugging a CI failure where the seed didn't
@@ -1708,6 +1752,13 @@ export default async function globalSetup(config: FullConfig): Promise<void> {
       `UPDATE users SET totp_confirmed_at = $2 WHERE username = $1`,
       [E2E_SETUP_CHILD.username, now],
     );
+
+    // The @critical journeys' jars. The sign-in journey signs in through the
+    // form in every test, so its account gets none.
+    for (const account of allCriticalAccounts()) {
+      if (FORM_SIGN_IN_JOURNEYS.has(account.journey)) continue;
+      await capture(account, account.storageStatePath);
+    }
   } finally {
     await pool.end();
   }
diff --git a/e2e/setup/setup-flow-fixture.ts b/e2e/setup/setup-flow-fixture.ts
index 36c1b40ff..7df89848a 100644
--- a/e2e/setup/setup-flow-fixture.ts
+++ b/e2e/setup/setup-flow-fixture.ts
@@ -57,7 +57,8 @@ export async function resetSetupFlow(username: string): Promise<void> {
         WHERE key IN (
           'onboarding-answers:' || $1,
           'onboarding-restart:' || $1,
-          'managed-profile:create:' || $1
+          'managed-profile:create:' || $1,
+          'record-write:' || $1
         )`,
       [id],
     );
diff --git a/e2e/v142-qol.spec.ts b/e2e/v142-qol.spec.ts
index a252891b7..c4bee695c 100644
--- a/e2e/v142-qol.spec.ts
+++ b/e2e/v142-qol.spec.ts
@@ -22,13 +22,28 @@ import { mockPopulatedInsights } from "./utils/mock-populated-insights";
 
 test.use({ storageState: STORAGE_STATE_PATH });
 
-async function resetDocumentsLayout(page: Page): Promise<void> {
+async function putDocumentsLayout(
+  page: Page,
+  arrangement: "stacked" | "flow",
+): Promise<void> {
   const res = await page.request.put("/api/documents/inbound/layout", {
-    data: { version: 1, view: "cards", arrangement: "stacked" },
+    data: { version: 1, view: "cards", arrangement },
   });
   expect(res.status()).toBe(200);
 }
 
+/** The journey starts from the stacked arrangement so the flip is visible. */
+const resetDocumentsLayout = (page: Page) =>
+  putDocumentsLayout(page, "stacked");
+
+/**
+ * The account is shared with `documents.spec.ts`, which reads the default
+ * (flowing) arrangement, so the journey hands the account back on the
+ * default rather than on the state it started from.
+ */
+const restoreDefaultDocumentsLayout = (page: Page) =>
+  putDocumentsLayout(page, "flow");
+
 test.describe("documents", () => {
   test.beforeAll(async () => {
     await ensureVaultFixture();
@@ -87,7 +102,7 @@ test.describe("documents", () => {
       ).toHaveAttribute("data-arrangement", "flow");
       await second.close();
     } finally {
-      await resetDocumentsLayout(page);
+      await restoreDefaultDocumentsLayout(page);
     }
   });
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index ce53edc99..50a13361d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -214,6 +214,9 @@ const eslintConfig = defineConfig([
       "src/components/charts/chart-runtime.ts",
       "src/components/admin/host-metrics-chart.tsx",
       "src/components/charts/health-chart.tsx",
+      // HealthChart's plot layers, imported by health-chart.tsx alone, so
+      // they sit inside the same chart-runtime graph.
+      "src/components/charts/health-chart/chart-layers.tsx",
       "src/components/charts/medication-compliance-chart.tsx",
       "src/components/charts/mood-chart.tsx",
       "src/components/charts/nutrient-daily-bar-chart.tsx",
diff --git a/knip.jsonc b/knip.jsonc
index 46380cd23..78b2aac64 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -100,6 +100,9 @@
     "e2e/**/*.test.ts",
     "tests/**/*.test.ts",
     "tests/**/setup.ts",
+    // Reached only through the browser project's `next/navigation` alias in
+    // vitest.config.mts, which no import statement names.
+    "tests/browser/next-navigation.ts",
     "vitest.config.ts",
     "vitest.config.integration.ts",
     "playwright.config.ts",
@@ -111,6 +114,7 @@
     "src/**/*.{ts,tsx}!",
     "scripts/**/*.{ts,mjs}!",
     "tests/**/*.ts",
+    "tests/**/*.tsx",
     "e2e/**/*.ts",
   ],
   "ignore": [
diff --git a/package.json b/package.json
index 97e90130a..1d968ef8d 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "test:watch": "vitest",
     "test:integration": "vitest run --config vitest.integration.config.mts",
     "e2e": "playwright test",
+    "e2e:critical": "playwright test --grep @critical",
     "e2e:ui": "playwright test --ui",
     "openapi:generate": "npx tsx scripts/generate-openapi.ts",
     "openapi:check": "npx tsx scripts/check-openapi.ts",
@@ -120,6 +121,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/web-push": "^3.6.4",
+    "@vitest/browser-playwright": "^5.0.5",
     "@vitest/coverage-v8": "^5.0.5",
     "ajv": "^8.20.0",
     "eslint": "^9",
@@ -136,6 +138,7 @@
     "testcontainers": "^12.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6",
-    "vitest": "^5.0.5"
+    "vitest": "^5.0.5",
+    "vitest-browser-react": "^2.3.0"
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
index 9a53b27c1..cd8a69347 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -27,6 +27,14 @@ import {
  *
  * To run locally: `pnpm dlx playwright install --with-deps chromium`
  * once, then `pnpm e2e`.
+ *
+ * The journeys tagged `@critical` (`pnpm e2e:critical`) are the exception to
+ * the route interception above: they intercept nothing under `/api`, which
+ * `src/__tests__/e2e-critical-no-api-stub-guard.test.ts` holds. Most of them
+ * run in both Chromium projects on an account per project
+ * (`e2e/setup/critical-fixture.ts`), so they need no entry in the
+ * `chromium-mobile` ignore list below; the ones that are on that list are
+ * there for the reason written beside them.
  */
 /**
  * Drawn once here, before any server or worker exists, and published through
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9343b3210..88a0075bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -241,9 +241,12 @@ importers:
       '@types/web-push':
         specifier: ^3.6.4
         version: 3.6.4
+      '@vitest/browser-playwright':
+        specifier: ^5.0.5
+        version: 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(playwright@1.64.1)(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))(vitest@5.0.5)
       '@vitest/coverage-v8':
         specifier: ^5.0.5
-        version: 5.0.5(vitest@5.0.5)
+        version: 5.0.5(@vitest/browser@5.0.5)(vitest@5.0.5)
       ajv:
         specifier: ^8.20.0
         version: 8.20.0
@@ -291,7 +294,10 @@ importers:
         version: 6.0.3
       vitest:
         specifier: ^5.0.5
-        version: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+        version: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      vitest-browser-react:
+        specifier: ^2.3.0
+        version: 2.3.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vitest@5.0.5)
 
 packages:
 
@@ -708,6 +714,9 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@blazediff/core@1.10.0':
+    resolution: {integrity: sha512-AOQff0zgR7cGsZL+4E7hVkmujoPUpm0J9xzWGWZj5wCjd3gmxESXAPfKyuzs93VdpQNFhHlBhfOjrcZ+XTERtQ==}
+
   '@cfworker/json-schema@4.1.1':
     resolution: {integrity: sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==}
 
@@ -3403,6 +3412,17 @@ packages:
   '@visx/vendor@4.0.0-alpha.0':
     resolution: {integrity: sha512-6I+MuqXBcv9jnlcVowHoHKSdk9gXTWkHLKyqBwRWg7LY6A3Ei8SHfubpqGV5rBUSppxMq2RszPJUS6w+H0YgmQ==}
 
+  '@vitest/browser-playwright@5.0.5':
+    resolution: {integrity: sha512-lcdThFUUcMV9mGGV1SUiZXPxfjgW4CssA7o3STxzh8WK0tT2r526kc12tZIBRZfoLMwkhxjLmMXkWXONzdsDQw==}
+    peerDependencies:
+      playwright: '*'
+      vitest: 5.0.5
+
+  '@vitest/browser@5.0.5':
+    resolution: {integrity: sha512-IDMoZX/iZ8rkilw7weaSgN8tJ7iZ9hUv0wYoKXyiyjWjWFwLSWAY707DcVTgxTYOudWC1E3HA9LYn7kVa9a7uQ==}
+    peerDependencies:
+      vitest: 5.0.5
+
   '@vitest/coverage-v8@5.0.5':
     resolution: {integrity: sha512-4KpkGdIrSqBihx/JyP/e+S+IKB98etg1XDQiLAxksLfcShnwi1VReGeOT9NI43hLHbknosKp/1CCLn9Zgcs8mg==}
     peerDependencies:
@@ -3431,9 +3451,20 @@ packages:
       vite:
         optional: true
 
+  '@vitest/pretty-format@5.0.5':
+    resolution: {integrity: sha512-24sSdIlMA9DVPXnYiB9siwU0bTd887Y9jX3+vabztCSsvHwo7ipvJ/a2L3Rljw8+2rK1f5fCj3h5U9I/Jsqgbw==}
+
   '@vitest/spy@5.0.5':
     resolution: {integrity: sha512-lwJRExuH417257Q5wv9QYugN9IMJkoxcrKrYxGPQkBzl7wlNpTUxD/5yNX4ESKVUIShKPgkGchYPFMWOOk0wzw==}
 
+  '@vitest/ui@5.0.5':
+    resolution: {integrity: sha512-dCoGUOdgmCaSB2g+WQ/spPCBkytAWdNUkFSXY4z+eYp2d8JEOY8v0uDRaJTG9qf/kTlTVZ4CuYMYMz/f1HS/qQ==}
+    peerDependencies:
+      vitest: 5.0.5
+
+  '@vitest/utils@5.0.5':
+    resolution: {integrity: sha512-/rBu7gzLDQI/SC79Tn98b5DwOgaHU/Gt4I9OVeP3YofzNaYtbImRCOJQmT1S6vOJg9gEIlWC+r3QxKkjuSa1nQ==}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -5973,6 +6004,10 @@ packages:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}
 
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -6521,6 +6556,10 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -7057,6 +7096,20 @@ packages:
       yaml:
         optional: true
 
+  vitest-browser-react@2.3.0:
+    resolution: {integrity: sha512-S5vdGHHA93j2Z6dbmIJI1wtxT3AXPTRlmC1Meo+ekG011yNnEutMAnHrwyj8qFlGhgBYA8ENGK6+o1Q+vnFz6A==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+      vitest: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   vitest@5.0.5:
     resolution: {integrity: sha512-cPODOMF8YnkiiYtDdHo6n4wWmBrOBBbOIYH2d33M4l3CdNn72h+qMmO6uXffUN6A5AZFXNND/d+krS9mgkXRfg==}
     engines: {node: ^22.12.0 || ^24.0.0 || >=26.0.0}
@@ -7189,6 +7242,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.22.0:
+    resolution: {integrity: sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   wsl-utils@1.0.1:
     resolution: {integrity: sha512-c16PKLIRxBYpR3jSWsdS7SFp0COm5SOQdiFjY818dYFHJbMGuLBszpF07LBWmOS1uzrHa9VGdynsEgoeKy0oOQ==}
     engines: {node: '>=20'}
@@ -7877,6 +7942,8 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@blazediff/core@1.10.0': {}
+
   '@cfworker/json-schema@4.1.1':
     optional: true
 
@@ -10042,7 +10109,7 @@ snapshots:
       '@stryker-mutator/util': 10.0.0
       semver: 7.8.5
       tslib: 2.8.1
-      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
 
   '@swc/helpers@0.5.23':
     dependencies:
@@ -10549,7 +10616,38 @@ snapshots:
       d3-time-format: 4.1.0
       internmap: 2.0.3
 
-  '@vitest/coverage-v8@5.0.5(vitest@5.0.5)':
+  '@vitest/browser-playwright@5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(playwright@1.64.1)(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))(vitest@5.0.5)':
+    dependencies:
+      '@vitest/browser': 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/mocker': 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      playwright: 1.64.1
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))(vitest@5.0.5)':
+    dependencies:
+      '@blazediff/core': 1.10.0
+      '@vitest/mocker': 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      '@vitest/ui': 5.0.5(vitest@5.0.5)
+      '@vitest/utils': 5.0.5
+      magic-string: 1.4.3
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      ws: 8.22.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/coverage-v8@5.0.5(@vitest/browser@5.0.5)(vitest@5.0.5)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/istanbul-lib-coverage': 1.0.2
@@ -10559,7 +10657,9 @@ snapshots:
       obug: 3.0.0
       std-env: 4.3.0
       tinyrainbow: 3.2.0
-      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+    optionalDependencies:
+      '@vitest/browser': 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))(vitest@5.0.5)
 
   '@vitest/istanbul-lib-coverage@1.0.2': {}
 
@@ -10577,8 +10677,28 @@ snapshots:
       msw: 2.14.6(@types/node@26.6.5)(typescript@6.0.3)
       vite: 8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)
 
+  '@vitest/pretty-format@5.0.5':
+    dependencies:
+      tinyrainbow: 3.2.0
+
   '@vitest/spy@5.0.5': {}
 
+  '@vitest/ui@5.0.5(vitest@5.0.5)':
+    dependencies:
+      '@vitest/utils': 5.0.5
+      fflate: 0.8.3
+      flatted: 3.4.4
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+
+  '@vitest/utils@5.0.5':
+    dependencies:
+      '@vitest/pretty-format': 5.0.5
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.2.0
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -13201,6 +13321,8 @@ snapshots:
 
   pngjs@5.0.0: {}
 
+  pngjs@7.0.0: {}
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-selector-parser@7.1.6:
@@ -13882,6 +14004,12 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   sisteransi@1.0.5: {}
 
   smart-buffer@4.2.0: {}
@@ -14468,7 +14596,16 @@ snapshots:
       jiti: 2.7.0
       yaml: 2.9.1
 
-  vitest@5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)):
+  vitest-browser-react@2.3.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(vitest@5.0.5):
+    dependencies:
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      vitest: 5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+    optionalDependencies:
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+
+  vitest@5.0.5(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(@vitest/browser-playwright@5.0.5)(@vitest/coverage-v8@5.0.5)(@vitest/ui@5.0.5)(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/mocker': 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
@@ -14487,7 +14624,9 @@ snapshots:
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
       '@types/node': 26.6.5
-      '@vitest/coverage-v8': 5.0.5(vitest@5.0.5)
+      '@vitest/browser-playwright': 5.0.5(msw@2.14.6(@types/node@26.6.5)(typescript@6.0.3))(playwright@1.64.1)(vite@8.1.6(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))(vitest@5.0.5)
+      '@vitest/coverage-v8': 5.0.5(@vitest/browser@5.0.5)(vitest@5.0.5)
+      '@vitest/ui': 5.0.5(vitest@5.0.5)
     transitivePeerDependencies:
       - msw
 
@@ -14610,6 +14749,8 @@ snapshots:
 
   ws@7.5.13: {}
 
+  ws@8.22.0: {}
+
   wsl-utils@1.0.1:
     dependencies:
       is-wsl: 3.1.1
diff --git a/src/__tests__/ai-capability-surface-guard.test.ts b/src/__tests__/ai-capability-surface-guard.test.ts
index b82232e09..931f1066f 100644
--- a/src/__tests__/ai-capability-surface-guard.test.ts
+++ b/src/__tests__/ai-capability-surface-guard.test.ts
@@ -139,7 +139,7 @@ const AI_REQUEST_SITES: Record<string, RequestSite> = {
   },
   "components/documents/use-document-assist.ts": {
     capability: "documentAi",
-    gate: "components/documents/document-detail-sheet.tsx",
+    gate: "components/documents/detail/use-document-detail-ai.ts",
   },
 };
 
diff --git a/src/__tests__/baselines/source-function-lines.json b/src/__tests__/baselines/source-function-lines.json
index 513e279ce..d7c1b5530 100644
--- a/src/__tests__/baselines/source-function-lines.json
+++ b/src/__tests__/baselines/source-function-lines.json
@@ -1,7 +1,7 @@
 {
   "$comment": "Production functions over 200 lines, keyed \"file :: name\", and their length. Maintained by src/__tests__/source-size-ratchet.test.ts.",
-  "count": 366,
-  "total": 126106,
+  "count": 355,
+  "total": 114858,
   "entries": {
     "app/achievements/page.tsx :: AchievementsPage": 206,
     "app/api/admin/backups/upload/route.ts :: apiHandler(arg)": 314,
@@ -51,14 +51,10 @@
     "app/labs/page.tsx :: LabsPage": 228,
     "app/medications/page-client.tsx :: MedicationsPageClient": 590,
     "app/notifications/page.tsx :: NotificationsPage": 327,
-    "app/page-client.tsx :: DashboardPageClient": 2131,
-    "app/page-client.tsx :: DashboardPageClient > (anonymous)": 1279,
     "components/activity/activity-calendar-card.tsx :: ActivityCalendarCard": 470,
     "components/admin/admin-shell.tsx :: AdminShell": 254,
     "components/admin/api-token-overview-section.tsx :: ApiTokenOverviewSection": 212,
     "components/admin/app-log-preview-section.tsx :: AppLogPreviewSection": 341,
-    "components/admin/backups-section.tsx :: BackupsSection": 618,
-    "components/admin/backups-section.tsx :: RestoreRowDialog": 226,
     "components/admin/central-codex-section.tsx :: CentralCodexSection": 241,
     "components/admin/encryption-section.tsx :: EncryptionSection": 303,
     "components/admin/general-settings-section.tsx :: GeneralSettingsSection": 220,
@@ -74,7 +70,7 @@
     "components/auth/claim-profile.tsx :: ClaimProfile": 429,
     "components/auth/mfa-login-step.tsx :: MfaLoginStep": 217,
     "components/charts/compliance-heatmap.tsx :: ComplianceHeatmap": 325,
-    "components/charts/health-chart.tsx :: HealthChart": 1929,
+    "components/charts/health-chart.tsx :: HealthChart": 488,
     "components/charts/medication-compliance-chart.tsx :: MedicationComplianceChart": 543,
     "components/charts/mood-chart.tsx :: MoodChart": 896,
     "components/charts/mood-heatmap.tsx :: MoodHeatmap": 296,
@@ -98,13 +94,13 @@
     "components/documents/document-ai-section.tsx :: DocumentAiSection": 262,
     "components/documents/document-bulk-bar.tsx :: DocumentBulkBar": 204,
     "components/documents/document-card.tsx :: DocumentCard": 354,
-    "components/documents/document-detail-sheet.tsx :: DocumentDetailSheet": 935,
+    "components/documents/document-detail-sheet.tsx :: DocumentDetailSheet": 325,
     "components/documents/document-facts-review.tsx :: DocumentFactsSection": 252,
     "components/documents/document-facts-review.tsx :: FactRow": 262,
     "components/documents/document-filter-bar.tsx :: DocumentFilterBar": 348,
     "components/documents/document-record-links.tsx :: DocumentRecordLinks": 202,
     "components/documents/document-timeline.tsx :: DocumentTimeline": 314,
-    "components/documents/documents-view.tsx :: DocumentsView": 969,
+    "components/documents/documents-view.tsx :: DocumentsView": 303,
     "components/documents/sources/document-source-picker.tsx :: DocumentSourcePicker": 565,
     "components/illness/log-day-sheet.tsx :: LogDaySheet": 265,
     "components/illness/new-episode-sheet.tsx :: NewEpisodeSheet": 264,
@@ -154,17 +150,11 @@
     "components/layout/top-bar.tsx :: TopBar": 212,
     "components/links/entity-link-picker.tsx :: EntityLinkPicker": 392,
     "components/measurement-reminders/vorsorge-dashboard-card.tsx :: VorsorgeDashboardCard": 215,
-    "components/measurement-reminders/vorsorge-section.tsx :: VorsorgeCard": 635,
-    "components/measurement-reminders/vorsorge-section.tsx :: VorsorgeSection": 618,
+    "components/measurement-reminders/vorsorge-section.tsx :: VorsorgeSection": 352,
     "components/measurements/measurement-form.tsx :: MeasurementForm": 500,
-    "components/measurements/measurement-list.tsx :: MeasurementList": 1586,
-    "components/measurements/measurement-list.tsx :: MeasurementList > data.measurements.map(arg)": 223,
-    "components/measurements/measurement-list.tsx :: MeasurementList > data.measurements.map(arg) #2": 229,
     "components/medications/detail/efficacy/efficacy-chart.tsx :: EfficacyChart": 361,
     "components/medications/detail/medication-detail-tabs.tsx :: MedicationDetailTabs": 771,
     "components/medications/dose-history-add-dialog.tsx :: LedgerAddDialog": 223,
-    "components/medications/dose-history-ledger.tsx :: DoseHistoryLedger": 404,
-    "components/medications/dose-history-ledger.tsx :: LedgerRowItem": 314,
     "components/medications/dose-strength-curve.tsx :: DoseStrengthCurve": 266,
     "components/medications/glp1-medication-card.tsx :: Glp1MedicationCard": 405,
     "components/medications/injection-site-picker.tsx :: InjectionSitePicker": 287,
@@ -213,7 +203,6 @@
     "components/settings/api-section.tsx :: ApiTokensCard": 366,
     "components/settings/coach-nudge-card.tsx :: CoachNudgeCard": 251,
     "components/settings/coach-prefs-section.tsx :: CoachPrefsSection": 350,
-    "components/settings/dashboard-layout-section.tsx :: DashboardLayoutSection": 620,
     "components/settings/environment-section.tsx :: EnvironmentSection": 666,
     "components/settings/import-panel/apple-health-import-card.tsx :: AppleHealthImportCard": 298,
     "components/settings/import-panel/csv-import-card.tsx :: CsvImportCard": 212,
diff --git a/src/__tests__/baselines/test-source-reads.json b/src/__tests__/baselines/test-source-reads.json
index d0d61d7bd..ff3077a13 100644
--- a/src/__tests__/baselines/test-source-reads.json
+++ b/src/__tests__/baselines/test-source-reads.json
@@ -1,7 +1,7 @@
 {
   "$comment": "tests that read a source file by path, per test file under src/. Maintained by src/__tests__/test-realism-ratchet.test.ts.",
-  "count": 348,
-  "total": 348,
+  "count": 337,
+  "total": 337,
   "entries": {
     "__tests__/account-payload-consumer-guard.test.ts": 1,
     "__tests__/admin-data-wipe-completeness.test.ts": 1,
@@ -143,18 +143,13 @@
     "__tests__/utc-day-key-allowlist-guard.test.ts": 1,
     "__tests__/v1341-locale-parity.test.ts": 1,
     "__tests__/visit-link-guard.test.ts": 1,
-    "__tests__/weight-tile-direction-guard.test.ts": 1,
     "__tests__/workout-canonical-identity-guard.test.ts": 1,
     "__tests__/write-rate-limit-guard.test.ts": 1,
     "__tests__/written-outcome-response-consumer-guard.test.ts": 1,
     "__tests__/zod-refusal-issue-list-guard.test.ts": 1,
-    "app/__tests__/dashboard-analytics-split.test.ts": 1,
-    "app/__tests__/dashboard-chart-reveal.test.tsx": 1,
     "app/__tests__/dashboard-demo-checklist.test.ts": 1,
     "app/__tests__/dashboard-hero-wiring.test.ts": 1,
     "app/__tests__/dashboard-hrv-rmssd-fallback.test.tsx": 1,
-    "app/__tests__/dashboard-suspense-boundaries.test.ts": 1,
-    "app/__tests__/dashboard-tile-strip-skeleton.test.ts": 1,
     "app/__tests__/i18n-boot-script-strategy.test.ts": 1,
     "app/__tests__/insights-b3-wiring.test.ts": 1,
     "app/__tests__/insights-polish.test.ts": 1,
@@ -192,11 +187,9 @@
     "components/charts/__tests__/touch-action-guard.test.ts": 1,
     "components/cycle/__tests__/use-cycle-ring-has-dial.test.tsx": 1,
     "components/dashboard/__tests__/medication-intake-quick-add.test.tsx": 1,
-    "components/dashboard/__tests__/tile-destinations.test.ts": 1,
     "components/day/__tests__/day-door-coverage-guard.test.ts": 1,
     "components/day/__tests__/day-not-here-guard.test.ts": 1,
     "components/documents/__tests__/document-coach-launch-wiring.test.ts": 1,
-    "components/documents/__tests__/document-detail-download.test.ts": 1,
     "components/documents/__tests__/documents-delete-confirm-guard.test.ts": 1,
     "components/forms/__tests__/use-seeded-form-dismissal.test.ts": 1,
     "components/i18n/__tests__/maintainership-banner.test.tsx": 1,
@@ -219,8 +212,6 @@
     "components/layout/__tests__/offline-banner.test.tsx": 1,
     "components/layout/__tests__/sidebar-nav.test.tsx": 1,
     "components/measurements/__tests__/duration-read-as.test.tsx": 1,
-    "components/measurements/__tests__/measurement-form-glucose-unit.test.tsx": 1,
-    "components/measurements/__tests__/measurement-list-glucose-unit.test.tsx": 1,
     "components/medications/__tests__/add-inventory-dialog.test.tsx": 1,
     "components/medications/__tests__/detail-page-cascade.test.tsx": 1,
     "components/medications/__tests__/inventory-section-dates.test.tsx": 1,
@@ -270,8 +261,6 @@
     "components/timeline/__tests__/no-template-key-guard.test.ts": 1,
     "components/ui/__tests__/card-density.test.tsx": 1,
     "components/ui/__tests__/card-header-rows.test.ts": 1,
-    "components/ui/__tests__/filter-bar.test.tsx": 1,
-    "components/ui/__tests__/segmented.test.tsx": 1,
     "hooks/__tests__/use-insight-status.test.ts": 1,
     "lib/__tests__/geo-offline-detection.test.ts": 1,
     "lib/__tests__/query-keys.test.ts": 1,
diff --git a/src/__tests__/baselines/version-stamp-comments.json b/src/__tests__/baselines/version-stamp-comments.json
index 4c4344c25..32b18fa49 100644
--- a/src/__tests__/baselines/version-stamp-comments.json
+++ b/src/__tests__/baselines/version-stamp-comments.json
@@ -1,7 +1,7 @@
 {
   "$comment": "Comment lines that open with a release version, per file under src/. Maintained by src/__tests__/version-stamp-ratchet.test.ts.",
-  "count": 2909,
-  "total": 9577,
+  "count": 2898,
+  "total": 9297,
   "entries": {
     "__tests__/account-payload-consumer-guard.test.ts": 2,
     "__tests__/acting-account-boundary-guard.test.ts": 7,
@@ -671,7 +671,6 @@
     "app/onboarding/[step]/page.tsx": 1,
     "app/onboarding/handover/page.tsx": 1,
     "app/onboarding/page.tsx": 2,
-    "app/page-client.tsx": 81,
     "app/privacy/__tests__/page.test.tsx": 1,
     "app/privacy/page.tsx": 1,
     "app/settings/[section]/page.tsx": 1,
@@ -708,7 +707,6 @@
     "components/admin/api-token-overview-section.tsx": 5,
     "components/admin/app-log-preview-section.tsx": 1,
     "components/admin/assistant-section.tsx": 1,
-    "components/admin/backups-section.tsx": 4,
     "components/admin/coach-feedback-section.tsx": 1,
     "components/admin/danger-zone-section.tsx": 1,
     "components/admin/general-settings-section.tsx": 1,
@@ -761,7 +759,6 @@
     "components/charts/chart-tooltip.tsx": 1,
     "components/charts/compliance-heatmap.tsx": 6,
     "components/charts/health-chart-dynamic.tsx": 3,
-    "components/charts/health-chart.tsx": 82,
     "components/charts/medication-compliance-chart.tsx": 21,
     "components/charts/mini-window.ts": 1,
     "components/charts/mood-chart.tsx": 33,
@@ -828,10 +825,8 @@
     "components/documents/document-ai-transport.ts": 2,
     "components/documents/document-bulk-bar.tsx": 1,
     "components/documents/document-card.tsx": 2,
-    "components/documents/document-detail-sheet.tsx": 6,
     "components/documents/document-facts-review.tsx": 2,
     "components/documents/document-summary-block.tsx": 2,
-    "components/documents/documents-view.tsx": 3,
     "components/documents/use-content-index.ts": 1,
     "components/documents/use-document-assist.ts": 1,
     "components/documents/use-document-facts.ts": 1,
@@ -1116,9 +1111,7 @@
     "components/layout/top-bar.tsx": 4,
     "components/measurement-reminders/__tests__/vorsorge-section.test.tsx": 7,
     "components/measurement-reminders/vorsorge-dashboard-card.tsx": 2,
-    "components/measurement-reminders/vorsorge-section.tsx": 26,
     "components/measurement-reminders/vorsorge-settings.tsx": 2,
-    "components/measurements/__tests__/measurement-form-unit-label.test.tsx": 1,
     "components/measurements/__tests__/measurement-list-apple-health-badge.test.tsx": 4,
     "components/measurements/__tests__/measurement-list-bp-badge.test.tsx": 3,
     "components/measurements/__tests__/measurement-list-empty.test.tsx": 1,
@@ -1126,7 +1119,6 @@
     "components/measurements/__tests__/measurement-list-locked-type.test.tsx": 2,
     "components/measurements/__tests__/measurement-list-step-grouping.test.tsx": 1,
     "components/measurements/measurement-form.tsx": 11,
-    "components/measurements/measurement-list.tsx": 39,
     "components/medications/__tests__/add-inventory-dialog.test.tsx": 1,
     "components/medications/__tests__/card-parts.test.tsx": 13,
     "components/medications/__tests__/detail-page-cascade.test.tsx": 1,
@@ -1168,7 +1160,6 @@
     "components/medications/detail/medication-detail-tabs.tsx": 28,
     "components/medications/dose-history-add-dialog.tsx": 2,
     "components/medications/dose-history-ledger-compute.ts": 5,
-    "components/medications/dose-history-ledger.tsx": 7,
     "components/medications/dose-strength-curve.tsx": 2,
     "components/medications/drug-level-chart.tsx": 2,
     "components/medications/glp1-medication-card.tsx": 36,
@@ -1374,7 +1365,6 @@
     "components/settings/coach-prefs-section.tsx": 2,
     "components/settings/coach-reminders-section.tsx": 2,
     "components/settings/coach-section.tsx": 3,
-    "components/settings/dashboard-layout-section.tsx": 30,
     "components/settings/dashboard-section.tsx": 1,
     "components/settings/environment-section.tsx": 3,
     "components/settings/export-section.tsx": 4,
@@ -1445,7 +1435,6 @@
     "components/timeline/__tests__/timeline-view-keys.test.tsx": 1,
     "components/timeline/__tests__/value-options.test.ts": 1,
     "components/timeline/life-event-form.lazy.tsx": 1,
-    "components/ui/__tests__/filter-bar.test.tsx": 1,
     "components/ui/back-link.tsx": 1,
     "components/ui/button.tsx": 1,
     "components/ui/card.tsx": 1,
diff --git a/src/__tests__/client-poll-inventory-guard.test.ts b/src/__tests__/client-poll-inventory-guard.test.ts
index c3e14afa2..6fa158b6a 100644
--- a/src/__tests__/client-poll-inventory-guard.test.ts
+++ b/src/__tests__/client-poll-inventory-guard.test.ts
@@ -84,12 +84,12 @@ const INVENTORY: Readonly<Record<string, Poll>> = {
     shape: "until-done",
     cadence: "2 s until the job reports a terminal status",
   },
-  "components/admin/backups-section.tsx": {
+  "components/admin/backups/use-backup-restores.ts": {
     sites: 1,
     shape: "until-done",
     cadence: "2 s until no restore is active",
   },
-  "components/documents/documents-view.tsx": {
+  "components/documents/vault/use-vault-library.ts": {
     sites: 1,
     shape: "until-done",
     cadence:
diff --git a/src/__tests__/daily-reads-refetch-guard.test.ts b/src/__tests__/daily-reads-refetch-guard.test.ts
index 97bfa839b..0102123dc 100644
--- a/src/__tests__/daily-reads-refetch-guard.test.ts
+++ b/src/__tests__/daily-reads-refetch-guard.test.ts
@@ -242,7 +242,7 @@ describe("daily-reads refetch guard", () => {
       expect(read(rel)).toMatch(/invalidateMedicationReads\(/);
     }
     const pairInPlace = [
-      "components/medications/dose-history-ledger.tsx",
+      "components/medications/dose-history/use-dose-history-ledger.ts",
       "components/medications/dose-history-add-dialog.tsx",
     ];
     for (const rel of pairInPlace) {
diff --git a/src/__tests__/dashboard-tile-eligibility-bucket-guard.test.ts b/src/__tests__/dashboard-tile-eligibility-bucket-guard.test.ts
index 2fc4e3a07..64344ca4d 100644
--- a/src/__tests__/dashboard-tile-eligibility-bucket-guard.test.ts
+++ b/src/__tests__/dashboard-tile-eligibility-bucket-guard.test.ts
@@ -46,6 +46,7 @@ const WRITTEN_REASON = /tile-eligibility-exempt:\s*\S/;
 const SURFACES = [
   "src/app/page-client.tsx",
   ...listSourceFiles("src/components/dashboard"),
+  ...listSourceFiles("src/components/dashboard/tiles"),
   ...listSourceFiles("src/lib/dashboard"),
 ];
 
diff --git a/src/__tests__/date-order-explicit-formatter-guard.test.ts b/src/__tests__/date-order-explicit-formatter-guard.test.ts
index a31307fcb..36a2688f7 100644
--- a/src/__tests__/date-order-explicit-formatter-guard.test.ts
+++ b/src/__tests__/date-order-explicit-formatter-guard.test.ts
@@ -252,15 +252,15 @@ const RAW_ALLOWLIST: ReadonlyArray<{ file: string; why: string }> = [
     why: "The `yyyy-MM-dd` key the ledger groups doses by. The heading a reader sees is rendered separately, through the preference-aware `formatDateWithWeekdaySmart`.",
   },
   {
-    file: "src/components/medications/dose-history-ledger.tsx",
+    file: "src/components/medications/dose-history/use-dose-history-ledger.ts",
     why: "The same key shape for `today`, compared against those buckets. A comparison, not a label.",
   },
   {
-    file: "src/components/charts/health-chart.tsx",
+    file: "src/components/charts/health-chart/series-math.ts",
     why: "`makeDayKeyFormatter` — the per-row bucketing key. Its fields are read back through `formatToParts` and reassembled as `YYYY-MM-DD`.",
   },
   {
-    file: "src/components/measurement-reminders/vorsorge-section.tsx",
+    file: "src/components/measurement-reminders/checkups/postpone-sheet.tsx",
     why: "The ISO day the postpone request writes to the API. A wire value, and the wire format is ISO whatever the reader prefers.",
   },
   {
diff --git a/src/__tests__/destructive-control-guard.test.ts b/src/__tests__/destructive-control-guard.test.ts
index d95443811..dcbff7a92 100644
--- a/src/__tests__/destructive-control-guard.test.ts
+++ b/src/__tests__/destructive-control-guard.test.ts
@@ -316,7 +316,8 @@ const REGISTRY: DestructiveEntry[] = [
     confirm: ["ConfirmButton"],
   },
   {
-    file: "components/settings/dashboard-layout-section.tsx",
+    file: "components/settings/dashboard-layout/use-dashboard-layout-draft.ts",
+    triggers: ["components/settings/dashboard-layout-section.tsx"],
     destroys:
       "the dashboard arrangement: tile order, hidden tiles, ring choice",
     recovery: "permanent",
@@ -350,8 +351,13 @@ const REGISTRY: DestructiveEntry[] = [
 
   // ── Measurements, mood, labs, illness — the undo-and-restore surfaces ────
   {
-    file: "components/measurements/measurement-list.tsx",
+    file: "components/measurements/list/use-measurement-list-data.ts",
     destroys: "one measurement, or every selected measurement",
+    triggers: [
+      "components/measurements/measurement-list.tsx",
+      "components/measurements/list/row-actions.tsx",
+      "components/measurements/list/measurement-edit-sheet.tsx",
+    ],
     recovery: "restorable",
     confirm: ["DeleteButton", "SelectionActionBar", "AlertDialog"],
   },
@@ -442,7 +448,10 @@ const REGISTRY: DestructiveEntry[] = [
   {
     file: "hooks/use-measurement-reminders.ts",
     destroys: "a checkup or measurement reminder with its schedule",
-    triggers: ["components/measurement-reminders/vorsorge-section.tsx"],
+    triggers: [
+      "components/measurement-reminders/vorsorge-section.tsx",
+      "components/measurement-reminders/checkups/checkup-card.tsx",
+    ],
     recovery: "tombstoned-no-restore",
     confirm: ["AlertDialog"],
   },
@@ -519,8 +528,9 @@ const REGISTRY: DestructiveEntry[] = [
     confirm: ["AlertDialog"],
   },
   {
-    file: "components/medications/dose-history-ledger.tsx",
+    file: "components/medications/dose-history/use-dose-history-ledger.ts",
     destroys: "one intake event",
+    triggers: ["components/medications/dose-history/ledger-confirms.tsx"],
     recovery: "tombstoned-no-restore",
     confirm: ["AlertDialog"],
   },
@@ -588,8 +598,9 @@ const REGISTRY: DestructiveEntry[] = [
 
   // ── Documents ───────────────────────────────────────────────────────────
   {
-    file: "components/documents/document-detail-sheet.tsx",
+    file: "components/documents/detail/use-document-detail.ts",
     destroys: "one document in the vault",
+    triggers: ["components/documents/detail/detail-sections.tsx"],
     recovery: "restorable",
     confirm: [],
     unconfirmed: [
@@ -601,9 +612,10 @@ const REGISTRY: DestructiveEntry[] = [
     ],
   },
   {
-    file: "components/documents/documents-view.tsx",
+    file: "components/documents/vault/use-vault-bulk.ts",
     destroys: "every selected document, or one document from a focused card",
     triggers: [
+      "components/documents/documents-view.tsx",
       "components/documents/document-bulk-bar.tsx",
       "components/documents/document-card.tsx",
     ],
diff --git a/src/__tests__/display-transform-rounding-guard.test.ts b/src/__tests__/display-transform-rounding-guard.test.ts
index 470ed94b8..f6d32f37a 100644
--- a/src/__tests__/display-transform-rounding-guard.test.ts
+++ b/src/__tests__/display-transform-rounding-guard.test.ts
@@ -59,7 +59,9 @@ const UNROUNDED_IMPORTERS = ["lib/targets/target-unit-display.ts"];
  * screen unrounded.
  */
 const RAW_SCALE_SURFACES = [
-  "app/page-client.tsx",
+  // The dashboard's chart cards; the values the dashboard renders itself
+  // convert in the tile context (see `CONVERTS_IN`).
+  "components/dashboard/tiles/chart-tiles.tsx",
   // The insights trends row: a single transformed series hands its scale
   // and offset to the mini chart, which formats every value itself.
   "components/insights/trends-row.tsx",
@@ -68,6 +70,16 @@ const RAW_SCALE_SURFACES = [
   "components/insights/device-score-tile.tsx",
 ];
 
+/**
+ * A surface whose rendered values convert in a sibling module: the dashboard's
+ * chart cards read the preference through the tile context every dashboard
+ * tile is built from.
+ */
+const CONVERTS_IN: Readonly<Record<string, string>> = {
+  "components/dashboard/tiles/chart-tiles.tsx":
+    "components/dashboard/tiles/tile-context.ts",
+};
+
 /** Matches a `factor` / `offset` read off a display transform. */
 const RAW_SCALE_READ =
   /\b\w*[Tt]ransform(?:For\([^)]*\))?\??\.(factor|offset)\b/;
@@ -192,10 +204,11 @@ describe("display-transform rounding guard — the bypass freeze", () => {
     // The justification for holding the raw multiplier at all: the chart
     // takes it as a prop. A file that stops passing it has no reason to be
     // reading `.factor` any more and belongs back behind the helpers.
-    // The prop as it is actually passed — a bare substring would still
+    // The prop as it is actually passed (as a JSX attribute or as a key of
+    // the props a chart builder spreads) — a bare substring would still
     // match a renamed identifier that no longer reaches any chart.
     const offenders = RAW_SCALE_SURFACES.filter(
-      (rel) => !/\bvalueScale=/.test(read(rel)),
+      (rel) => !/\bvalueScale[=:]/.test(read(rel)),
     );
     expect(offenders).toEqual([]);
   });
@@ -207,7 +220,10 @@ describe("display-transform rounding guard — the bypass freeze", () => {
     // `useUnitDisplayOnceMounted()`, which is the same sugar with the
     // preference withheld from the hydration render.
     const offenders = RAW_SCALE_SURFACES.filter(
-      (rel) => !/\buseUnitDisplay(OnceMounted)?\(\)/.test(read(rel)),
+      (rel) =>
+        !/\buseUnitDisplay(OnceMounted)?\(\)/.test(
+          read(CONVERTS_IN[rel] ?? rel),
+        ),
     );
     expect(offenders).toEqual([]);
   });
diff --git a/src/__tests__/e2e-critical-no-api-stub-guard.test.ts b/src/__tests__/e2e-critical-no-api-stub-guard.test.ts
new file mode 100644
index 000000000..983d71d8b
--- /dev/null
+++ b/src/__tests__/e2e-critical-no-api-stub-guard.test.ts
@@ -0,0 +1,280 @@
+/**
+ * Structural guard: an `@critical` e2e journey talks to the real server.
+ *
+ * The `@critical` tag marks the journeys a release is gated on — sign-in,
+ * a reading reaching the dashboard, a dose moving compliance, a backup coming
+ * back. They are only worth that role if the server under them is the one
+ * that ships. A spec that stubs `/api/*` with `page.route(...)` proves that
+ * the UI renders a payload somebody typed into the test, which is how a broken
+ * write path stays green: the mock answers 200 whatever the route does.
+ *
+ * So a spec FILE that carries `@critical` anywhere may not intercept the app's
+ * API, and the rule is per file rather than per test because a route armed in
+ * a `beforeEach` or a `describe`-level hook covers every test beside it.
+ * What it catches:
+ *
+ *   - `.route(` / `.routeFromHAR(` in the spec whose first argument mentions
+ *     `api`, or is not a literal at all (a pattern held in a variable cannot be
+ *     shown to miss `/api`, so it is refused rather than trusted);
+ *   - a helper imported from a relative module whose exported function arms
+ *     such a route (`stubDashboardAnalytics`, `mockMedicationsApi`, …). The
+ *     helper is read, its exported functions are cut apart at each top-level
+ *     `export`, and any that intercepts `/api` may not be imported by name.
+ *
+ * Stubbing a third-party host that is unreachable from CI and is not the
+ * journey's subject stays possible: a literal pattern without `api` passes.
+ * The spec is expected to say why next to the call.
+ *
+ * It is a tripwire with a scanner's limits, not a parser: a route armed
+ * through a helper that is not imported by name (a default export, a
+ * re-export chain) is not followed. The synthetic cases at the bottom prove
+ * each matcher fires; the floor proves the sweep found the tagged tests at
+ * all.
+ */
+import { existsSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+
+import { describe, expect, it } from "vitest";
+
+import {
+  readSourceText,
+  requireFloor,
+  walkSourceFiles,
+} from "./helpers/source-files";
+
+const E2E = join(process.cwd(), "e2e");
+
+/**
+ * The `@critical` tests found in `e2e/*.spec.ts`. Pinned at the real count:
+ * the set is the release gate, so a journey that loses its tag is a change
+ * somebody should see here. It counts title literals in the source, so a
+ * title written once inside a loop counts once however many tests it names.
+ */
+const CRITICAL_TEST_FLOOR = 16;
+
+/** A test whose title literal carries the tag, however the call is spelled. */
+const CRITICAL_TEST =
+  /\btest(?:\.(?:only|skip|fixme|fail|slow))?\(\s*(["'`])((?:(?!\1)[\s\S])*?@critical(?:(?!\1)[\s\S])*?)\1/g;
+
+/** A route interception call; the first argument is examined separately. */
+const ROUTE_CALL = /\.route(?:FromHAR)?\(\s*/g;
+
+/**
+ * The source without its comment LINES: a line whose first non-blank text is
+ * `//`, and a block that opens at the start of a line. Deliberately not the
+ * shared `stripComments`, which opens a block at any `/*` — and route globs
+ * (`"**\/api/day/**"`, `"https://host/**"`) are full of them, so it would
+ * swallow the code after the first glob, including any `.route(` there. Prose
+ * about this rule lives in comment lines, which is what has to go.
+ */
+function stripCommentLines(source: string): string {
+  return source
+    .replace(/^[ \t]*\/\*[\s\S]*?\*\//gm, "")
+    .replace(/^[ \t]*\/\/.*$/gm, "");
+}
+
+interface StubFinding {
+  /** Where the interception lives (the spec, or the helper it imports). */
+  where: string;
+  /** What was found. */
+  detail: string;
+}
+
+/**
+ * The first argument of a call whose open paren ends at `start`: a string,
+ * template or regex literal is returned whole; anything else is returned up to
+ * the first comma or closing paren and flagged as not a literal.
+ */
+function firstArgument(
+  source: string,
+  start: number,
+): { text: string; literal: boolean } {
+  const opener = source[start];
+  if (opener === '"' || opener === "'" || opener === "`") {
+    const end = source.indexOf(opener, start + 1);
+    return { text: source.slice(start, end + 1), literal: true };
+  }
+  if (opener === "/") {
+    // A regex literal: up to the next unescaped slash.
+    let i = start + 1;
+    while (i < source.length && !(source[i] === "/" && source[i - 1] !== "\\"))
+      i += 1;
+    return { text: source.slice(start, i + 1), literal: true };
+  }
+  const rest = source.slice(start);
+  const stop = rest.search(/[,)]/);
+  return { text: rest.slice(0, stop === -1 ? 80 : stop), literal: false };
+}
+
+/** Every `/api` (or unprovable) interception in one source text. */
+function apiStubsIn(source: string): string[] {
+  const code = stripCommentLines(source);
+  const hits: string[] = [];
+  for (const m of code.matchAll(ROUTE_CALL)) {
+    const arg = firstArgument(code, (m.index ?? 0) + m[0].length);
+    if (!arg.literal) {
+      hits.push(`route pattern is not a literal: ${arg.text.trim()}`);
+    } else if (/api/i.test(arg.text)) {
+      hits.push(`route intercepts the app's API: ${arg.text}`);
+    }
+  }
+  return hits;
+}
+
+/** The names a spec imports from each relative module. */
+function relativeImports(
+  source: string,
+): Array<{ names: string[]; from: string }> {
+  const code = stripCommentLines(source);
+  const out: Array<{ names: string[]; from: string }> = [];
+  for (const m of code.matchAll(
+    /import\s*(?:type\s*)?\{([^}]*)\}\s*from\s*["'](\.{1,2}\/[^"']+)["']/g,
+  )) {
+    const names = m[1]
+      .split(",")
+      .map((n) =>
+        n
+          .trim()
+          .replace(/^type\s+/, "")
+          .split(/\s+as\s+/)[0]
+          .trim(),
+      )
+      .filter(Boolean);
+    out.push({ names, from: m[2] });
+  }
+  return out;
+}
+
+/**
+ * Exported functions of a helper that intercept `/api`, by name. The helper is
+ * cut at each top-level `export`, so each slice is one export's body.
+ */
+function stubbingExports(helperSource: string): string[] {
+  const code = stripCommentLines(helperSource);
+  const starts = [...code.matchAll(/^export\s+/gm)].map((m) => m.index ?? 0);
+  const names: string[] = [];
+  starts.forEach((start, i) => {
+    const slice = code.slice(start, starts[i + 1] ?? code.length);
+    const name = slice.match(
+      /^export\s+(?:async\s+)?(?:function\s*\*?\s*|const\s+|let\s+)([A-Za-z0-9_$]+)/,
+    )?.[1];
+    if (name && apiStubsIn(slice).length > 0) names.push(name);
+  });
+  return names;
+}
+
+function resolveHelper(specRel: string, from: string): string | null {
+  const base = join(E2E, dirname(specRel), from);
+  for (const candidate of [`${base}.ts`, `${base}/index.ts`, base]) {
+    if (candidate.endsWith(".ts") && existsSync(candidate)) return candidate;
+  }
+  return null;
+}
+
+/** Everything that stubs `/api` in one spec file, its imported helpers included. */
+function findApiStubs(
+  specRel: string,
+  source: string,
+  readHelper: (absolute: string) => string = readSourceText,
+): StubFinding[] {
+  const findings: StubFinding[] = apiStubsIn(source).map((detail) => ({
+    where: specRel,
+    detail,
+  }));
+  for (const { names, from } of relativeImports(source)) {
+    const helper = resolveHelper(specRel, from);
+    if (!helper) continue;
+    const stubbing = new Set(stubbingExports(readHelper(helper)));
+    for (const name of names) {
+      if (stubbing.has(name)) {
+        findings.push({
+          where: relative(E2E, helper),
+          detail: `\`${name}\` (imported by ${specRel}) intercepts the app's API`,
+        });
+      }
+    }
+  }
+  return findings;
+}
+
+function specFiles(): string[] {
+  return walkSourceFiles(E2E, { floor: 100, extensions: [".ts"] }).filter(
+    (rel) => !rel.includes("/") && rel.endsWith(".spec.ts"),
+  );
+}
+
+function criticalTests(): Array<{ file: string; title: string }> {
+  const tests: Array<{ file: string; title: string }> = [];
+  for (const file of specFiles()) {
+    const code = stripCommentLines(readSourceText(join(E2E, file)));
+    for (const m of code.matchAll(CRITICAL_TEST)) {
+      tests.push({ file, title: m[2] });
+    }
+  }
+  return tests;
+}
+
+describe("@critical e2e journeys run against the real API", () => {
+  it("finds the tagged journeys", () => {
+    requireFloor("@critical e2e tests", criticalTests(), CRITICAL_TEST_FLOOR);
+  });
+
+  it("no file carrying @critical intercepts /api, directly or through a helper", () => {
+    const files = new Set(criticalTests().map((t) => t.file));
+    // A file that mentions the tag outside a test title (a describe title, a
+    // `grep` option) is held to the same rule.
+    for (const file of specFiles()) {
+      if (
+        stripCommentLines(readSourceText(join(E2E, file))).includes("@critical")
+      )
+        files.add(file);
+    }
+    const offenders = [...files].flatMap((file) =>
+      findApiStubs(file, readSourceText(join(E2E, file))).map(
+        (f) => `${f.where}: ${f.detail}`,
+      ),
+    );
+    expect(offenders).toEqual([]);
+  });
+
+  describe("the matchers fire", () => {
+    it("on a glob, a regex and a non-literal pattern", () => {
+      expect(
+        apiStubsIn(`await page.route("**/api/measurements*", f);`),
+      ).toHaveLength(1);
+      expect(
+        apiStubsIn(`await page.route(/\\/api\\/analytics(\\?|$)/, f);`),
+      ).toHaveLength(1);
+      expect(apiStubsIn(`await context.route(PATTERN, f);`)).toHaveLength(1);
+      expect(
+        apiStubsIn(`await page.routeFromHAR("api.har", { update: false });`),
+      ).toHaveLength(1);
+    });
+
+    it("not on a third-party host, a comment, or an unrelated call", () => {
+      expect(
+        apiStubsIn(`await page.route("https://tiles.example.org/**", f);`),
+      ).toEqual([]);
+      expect(apiStubsIn(`// page.route("**/api/x", f)`)).toEqual([]);
+      expect(apiStubsIn(`router.push("/api/x");`)).toEqual([]);
+    });
+
+    it("on a stubbing helper imported by name, and not on its siblings", () => {
+      const helper = [
+        `export function mockThings(page) {`,
+        `  void page.route("**/api/things**", (r) => r.fulfill({}));`,
+        `}`,
+        `export async function openThing(page) {`,
+        `  await page.goto("/things");`,
+        `}`,
+      ].join("\n");
+      expect(stubbingExports(helper)).toEqual(["mockThings"]);
+
+      const read = () => helper;
+      const uses = `import { mockThings, openThing } from "./medications-wizard-helpers";`;
+      expect(findApiStubs("x.spec.ts", uses, read)).toHaveLength(1);
+      const clean = `import { openThing } from "./medications-wizard-helpers";`;
+      expect(findApiStubs("x.spec.ts", clean, read)).toEqual([]);
+    });
+  });
+});
diff --git a/src/__tests__/helpers/dashboard-source.ts b/src/__tests__/helpers/dashboard-source.ts
new file mode 100644
index 000000000..18f2def65
--- /dev/null
+++ b/src/__tests__/helpers/dashboard-source.ts
@@ -0,0 +1,37 @@
+/**
+ * The dashboard's source, for the guards that pin how it is wired.
+ *
+ * The dashboard is a composer (`src/app/page-client.tsx`) over a tile
+ * registry (`src/components/dashboard/tiles/`): the reads, the tile context,
+ * the strip and chart definitions and the rendering of both rows each live in
+ * their own module there. A guard that used to read the one page file reads
+ * all of them through here, so a rule about the dashboard holds wherever in
+ * the registry the code it watches sits, and moving code between the files
+ * cannot turn a negative assertion green. The folder read carries a floor,
+ * and the page read an anchor, so a rename fails loudly instead of returning
+ * less text.
+ */
+import { readSource, readSourceFolder } from "./source-files";
+
+export const DASHBOARD_PAGE = "src/app/page-client.tsx";
+export const DASHBOARD_TILES_DIR = "src/components/dashboard/tiles";
+
+/** Each dashboard module as `[repo-relative path, text]`. */
+export function dashboardSourceFiles(): Array<[string, string]> {
+  const page = readSource(DASHBOARD_PAGE, "DashboardPageClient");
+  const tiles = readSourceFolder(DASHBOARD_TILES_DIR, {
+    floor: 5,
+    include: (rel) => !rel.includes("__tests__"),
+  }).map(([rel, text]): [string, string] => [
+    `${DASHBOARD_TILES_DIR}/${rel}`,
+    text,
+  ]);
+  return [[DASHBOARD_PAGE, page], ...tiles];
+}
+
+/** The dashboard modules' text, concatenated in a stable order. */
+export function dashboardSource(): string {
+  return dashboardSourceFiles()
+    .map(([, text]) => text)
+    .join("\n");
+}
diff --git a/src/__tests__/helpers/document-detail-source.ts b/src/__tests__/helpers/document-detail-source.ts
new file mode 100644
index 000000000..2ec0d1ff7
--- /dev/null
+++ b/src/__tests__/helpers/document-detail-source.ts
@@ -0,0 +1,20 @@
+/**
+ * The document detail sheet's source, for the checks that pin how it is
+ * wired: the sheet (`document-detail-sheet.tsx`) and the hooks and sections
+ * it is built from (`documents/detail/`). Read together, so a rule about the
+ * sheet holds wherever in those modules the code sits. The folder read has a
+ * floor and the sheet an anchor, so a rename fails instead of reading less.
+ */
+import { readSource, readSourceFolder } from "./source-files";
+
+export function documentDetailSource(): string {
+  return [
+    readSource(
+      "src/components/documents/document-detail-sheet.tsx",
+      "DocumentDetailSheet",
+    ),
+    ...readSourceFolder("src/components/documents/detail", { floor: 4 }).map(
+      ([, text]) => text,
+    ),
+  ].join("\n");
+}
diff --git a/src/__tests__/intake-toast-single-decision.test.ts b/src/__tests__/intake-toast-single-decision.test.ts
index 39e73fbb1..0c3927a20 100644
--- a/src/__tests__/intake-toast-single-decision.test.ts
+++ b/src/__tests__/intake-toast-single-decision.test.ts
@@ -151,7 +151,7 @@ describe("the intake confirmation is decided in one place", () => {
     expect(posting.length).toBeGreaterThan(2);
     for (const rel of [
       "components/medications/use-medication-intake.ts",
-      "components/medications/dose-history-ledger.tsx",
+      "components/medications/dose-history/use-dose-history-ledger.ts",
       "components/dashboard/medication-intake-quick-add.tsx",
       "components/medications/dose-history-add-dialog.tsx",
     ]) {
diff --git a/src/__tests__/pulse-day-mean-reader-guard.test.ts b/src/__tests__/pulse-day-mean-reader-guard.test.ts
index 19919be8d..049725d57 100644
--- a/src/__tests__/pulse-day-mean-reader-guard.test.ts
+++ b/src/__tests__/pulse-day-mean-reader-guard.test.ts
@@ -141,7 +141,7 @@ const TS_READERS: Record<string, Entry> = {
     exempt:
       "means several readings of a type the day route sends one by one (weight, blood pressure, glucose); pulse arrives as one server-side day value (`dayValueShape` in lib/day/values.ts)",
   },
-  "components/charts/health-chart.tsx": {
+  "components/charts/health-chart/series-math.ts": {
     exempt:
       "a rolling average over the points the chart draws: display smoothing, not a stated figure",
   },
diff --git a/src/__tests__/read-failure-markup-guard.test.ts b/src/__tests__/read-failure-markup-guard.test.ts
index b8c46a4c6..1c30d446b 100644
--- a/src/__tests__/read-failure-markup-guard.test.ts
+++ b/src/__tests__/read-failure-markup-guard.test.ts
@@ -107,6 +107,18 @@ function framedRowsInCards(source: string): number[] {
   return lines;
 }
 
+/**
+ * Read failures that draw their own markup on purpose, each with its reason.
+ * Keyed by file, and held live by the case below: an entry whose file no
+ * longer hand-rolls a branch fails rather than lingering as a blind spot.
+ */
+const HAND_ROLLED_BY_DESIGN = new Map<string, string>([
+  [
+    "components/admin/backups/restore-dialog.tsx",
+    "the restore preview never blocks the restore: a failed preview states its own absence in the dialog, and names the missing key when that is why",
+  ],
+]);
+
 const files = walk(SRC).map((file) => ({
   file: relative(SRC, file),
   source: readFileSync(file, "utf8"),
@@ -143,12 +155,24 @@ describe("read failures render through a primitive", () => {
 
   it("never hand-rolls one beside a read", () => {
     const offenders = files.flatMap(({ file, source }) =>
-      readErrorBranches(source)
-        .filter((b) => b.handRolled)
-        .map((b) => `${file}:${b.line}`),
+      HAND_ROLLED_BY_DESIGN.has(file)
+        ? []
+        : readErrorBranches(source)
+            .filter((b) => b.handRolled)
+            .map((b) => `${file}:${b.line}`),
     );
     expect(offenders).toEqual([]);
   });
+
+  it("keeps every deliberate exception live", () => {
+    const stale = [...HAND_ROLLED_BY_DESIGN.keys()].filter((name) => {
+      const entry = files.find(({ file }) => file === name);
+      return (
+        !entry || !readErrorBranches(entry.source).some((b) => b.handRolled)
+      );
+    });
+    expect(stale).toEqual([]);
+  });
 });
 
 describe("an error row inside a card draws no frame of its own", () => {
diff --git a/src/__tests__/record-settings-ui.test.tsx b/src/__tests__/record-settings-ui.test.tsx
index abea892d3..f5a890036 100644
--- a/src/__tests__/record-settings-ui.test.tsx
+++ b/src/__tests__/record-settings-ui.test.tsx
@@ -1,10 +1,25 @@
-import { readFile } from "node:fs/promises";
+import { readdir, readFile } from "node:fs/promises";
 import { resolve } from "node:path";
 
 import { describe, expect, it } from "vitest";
 
 const fromRoot = (...segments: string[]) => resolve(process.cwd(), ...segments);
 
+/** The managed settings section and every family form it composes. */
+async function readManagedSettingsView(): Promise<string> {
+  const folder = fromRoot("src/components/settings/managed-record");
+  const forms = (await readdir(folder)).filter((name) => name.endsWith(".tsx"));
+  expect(forms.length).toBeGreaterThanOrEqual(7);
+  const sources = await Promise.all([
+    readFile(
+      fromRoot("src/components/settings/managed-record-settings-section.tsx"),
+      "utf8",
+    ),
+    ...forms.map((name) => readFile(resolve(folder, name), "utf8")),
+  ]);
+  return sources.join("\n");
+}
+
 function expectMatchingMessageKeys(expected: unknown, actual: unknown): void {
   if (
     expected === null ||
@@ -40,10 +55,7 @@ describe("managed record settings UI", () => {
         fromRoot("src/components/settings/managed-integration-status.tsx"),
         "utf8",
       ),
-      readFile(
-        fromRoot("src/components/settings/managed-record-settings-section.tsx"),
-        "utf8",
-      ),
+      readManagedSettingsView(),
       readFile(fromRoot("src/app/settings/[section]/page.tsx"), "utf8"),
       readFile(fromRoot("src/app/settings/layout/[module]/page.tsx"), "utf8"),
       readFile(
diff --git a/src/__tests__/resolved-field-consumer-guard.test.ts b/src/__tests__/resolved-field-consumer-guard.test.ts
index ce04c11d1..6f7b21916 100644
--- a/src/__tests__/resolved-field-consumer-guard.test.ts
+++ b/src/__tests__/resolved-field-consumer-guard.test.ts
@@ -144,7 +144,7 @@ const RULES: ResolvedFieldRule[] = [
     allow: {
       "src/hooks/use-module-toggle.ts":
         "the module switch for the Coach (Settings hub and command palette): its checked state is the stored opt-out it writes",
-      "src/components/settings/managed-record-settings-section.tsx":
+      "src/components/settings/managed-record/coach-form.tsx":
         "the managed record's own settings form: the field's default is the record's stored opt-out",
       "src/hooks/use-auth.ts":
         "the `/me` payload normaliser: coerces the field against a stale payload, decides nothing",
@@ -346,7 +346,10 @@ const V143_FIELDS: ResolvedFieldEntry[] = [
     field: "GET /api/dashboard/snapshot tiles.directions",
     props: ["insights/schemas.ts#directions"],
     readers: [
-      { file: "src/app/page-client.tsx", pattern: /tiles\.directions/ },
+      {
+        file: "src/components/dashboard/tiles/tile-context.ts",
+        pattern: /tiles\.directions/,
+      },
     ],
   },
   {
diff --git a/src/__tests__/source-size-ratchet.test.ts b/src/__tests__/source-size-ratchet.test.ts
index e17e1fe8f..b1db6ba8c 100644
--- a/src/__tests__/source-size-ratchet.test.ts
+++ b/src/__tests__/source-size-ratchet.test.ts
@@ -92,7 +92,10 @@ describe("source size ratchet", () => {
   it("reads the whole tree", () => {
     expect(m.files).toBeGreaterThan(3000);
     expect(m.functionsSeen).toBeGreaterThan(20_000);
-    requireFloor("files over the cap", Object.keys(m.fileLines), 100);
+    // The floor follows the ratchet down: 115 files sat over the cap before
+    // the large-component splits, 96 after. It guards the matcher, so it sits
+    // under the real count, not at it.
+    requireFloor("files over the cap", Object.keys(m.fileLines), 80);
     requireFloor("functions over the cap", Object.keys(m.functionLines), 300);
   });
 
diff --git a/src/__tests__/step-up-web-caller-guard.test.ts b/src/__tests__/step-up-web-caller-guard.test.ts
index 0e9e3646e..cd07e2ffa 100644
--- a/src/__tests__/step-up-web-caller-guard.test.ts
+++ b/src/__tests__/step-up-web-caller-guard.test.ts
@@ -319,7 +319,7 @@ function findGatedWebCalls(): GatedCall[] {
 const PRECHECKED = new Set<string>([
   // `upload.mutationFn` asks first, then calls `uploadOnce`, so a large file
   // is not sent once only to be refused.
-  "components/admin/backups-section.tsx -> POST /api/admin/backups/upload",
+  "components/admin/backups/use-backup-upload.ts -> POST /api/admin/backups/upload",
 ]);
 
 describe("fresh-proof gates on the web", () => {
diff --git a/src/__tests__/success-affordance-guard.test.ts b/src/__tests__/success-affordance-guard.test.ts
index 361c8afa2..7290edcf5 100644
--- a/src/__tests__/success-affordance-guard.test.ts
+++ b/src/__tests__/success-affordance-guard.test.ts
@@ -97,7 +97,10 @@ const PINNED_AFFORDANCES: Record<
   "src/components/admin/assistant-section.tsx": { "toast.success": 1 },
   // v1.43 — the AI usage bounds: a settings save, not a write with counts.
   "src/components/admin/ai-usage-section.tsx": { "toast.success": 1 },
-  "src/components/admin/backups-section.tsx": { "toast.success": 4 },
+  // The run, the download, the upload and the finished restore, one toast each.
+  "src/components/admin/backups/use-backup-actions.ts": { "toast.success": 2 },
+  "src/components/admin/backups/use-backup-restores.ts": { "toast.success": 1 },
+  "src/components/admin/backups/use-backup-upload.ts": { "toast.success": 1 },
   "src/components/admin/central-codex-section.tsx": { "toast.success": 2 },
   "src/components/admin/danger-zone-section.tsx": { "text-success": 1 },
   "src/components/admin/encryption-section.tsx": {
@@ -176,8 +179,18 @@ const PINNED_AFFORDANCES: Record<
   },
   "src/components/dashboard/range-display.tsx": { "text-success": 2 },
   "src/components/documents/document-card.tsx": { "text-success": 1 },
-  "src/components/documents/document-detail-sheet.tsx": { "toast.success": 2 },
-  "src/components/documents/documents-view.tsx": { "toast.success": 3 },
+  "src/components/documents/detail/use-document-detail-ai.ts": {
+    "toast.success": 1,
+  },
+  "src/components/documents/detail/use-document-detail.ts": {
+    "toast.success": 1,
+  },
+  "src/components/documents/vault/use-vault-library.ts": {
+    "toast.success": 1,
+  },
+  "src/components/documents/vault/use-vault-bulk.ts": {
+    "toast.success": 2,
+  },
   // The document picker's per-row result: tinted only for the `imported` /
   // `duplicate` outcome the import route returned for that one document, i.e.
   // a document the vault now holds. The run's headline goes through
@@ -228,12 +241,14 @@ const PINNED_AFFORDANCES: Record<
   "src/components/measurement-reminders/vorsorge-dashboard-card.tsx": {
     CheckCircle2: 2,
   },
-  "src/components/measurement-reminders/vorsorge-section.tsx": {
+  "src/components/measurement-reminders/checkups/checkup-card.tsx": {
     CheckCircle2: 2,
     "text-success": 1,
   },
   "src/components/measurements/measurement-form.tsx": { "toast.success": 1 },
-  "src/components/measurements/measurement-list.tsx": { "toast.success": 3 },
+  "src/components/measurements/list/use-measurement-list-data.ts": {
+    "toast.success": 3,
+  },
   "src/components/medications/card-parts/medication-status-pill.tsx": {
     "text-success": 1,
   },
@@ -241,8 +256,13 @@ const PINNED_AFFORDANCES: Record<
   "src/components/medications/dose-history-add-dialog.tsx": {
     "toast.success": 2,
   },
-  "src/components/medications/dose-history-ledger.tsx": {
-    "text-success": 2,
+  "src/components/medications/dose-history/ledger-row-item.tsx": {
+    "text-success": 1,
+  },
+  "src/components/medications/dose-history/ledger-summary-chart.tsx": {
+    "text-success": 1,
+  },
+  "src/components/medications/dose-history/use-dose-history-ledger.ts": {
     "toast.success": 4,
   },
   "src/components/medications/intake-edit-dialog.tsx": { "toast.success": 1 },
@@ -348,7 +368,7 @@ const PINNED_AFFORDANCES: Record<
   },
   "src/components/settings/coach-memory-section.tsx": { "toast.success": 2 },
   "src/components/settings/coach-prefs-section.tsx": { "toast.success": 1 },
-  "src/components/settings/dashboard-layout-section.tsx": {
+  "src/components/settings/dashboard-layout/use-dashboard-layout-draft.ts": {
     "toast.success": 2,
   },
   "src/components/settings/environment-section.tsx": { "toast.success": 4 },
diff --git a/src/__tests__/unit-preference-display-guard.test.ts b/src/__tests__/unit-preference-display-guard.test.ts
index 0f9126d56..79c26c6fd 100644
--- a/src/__tests__/unit-preference-display-guard.test.ts
+++ b/src/__tests__/unit-preference-display-guard.test.ts
@@ -85,6 +85,9 @@ const HEIGHT_CONTROL = join(
 function sweptFiles(): string[] {
   return [
     join(SRC, "app", "page-client.tsx"),
+    ...walkSourceFiles(join(SRC, "components", "dashboard", "tiles"), {
+      floor: 5,
+    }).map((rel) => join(SRC, "components", "dashboard", "tiles", rel)),
     ...walkSourceFiles(SRC, { floor: 700, extensions: [".tsx"] })
       .filter(
         (rel) => rel.startsWith("app/insights/") && rel.endsWith("/page.tsx"),
@@ -295,10 +298,15 @@ const UNIT_LITERAL_ALLOWLIST: Record<
     reason:
       "input parsing: canonical units of the entry table, replaced by the transform's unit at render and inverted on save",
   },
-  "components/measurements/measurement-list.tsx": {
-    lines: 2,
+  "components/measurements/list/use-measurement-edit.ts": {
+    lines: 1,
     reason: "input parsing: the inline edit inverts an mmol/L entry to mg/dL",
   },
+  "components/measurements/list/use-measurement-row-display.ts": {
+    lines: 1,
+    reason:
+      "input parsing: decides whether the inline edit's input is in mmol/L and so needs inverting",
+  },
   "components/settings/import-panel/import-examples.ts": {
     lines: 3,
     reason: "input parsing: CSV examples showing the units an import accepts",
diff --git a/src/__tests__/unit-suite-browser-install-guard.test.ts b/src/__tests__/unit-suite-browser-install-guard.test.ts
index 8e80cc492..3771c14ea 100644
--- a/src/__tests__/unit-suite-browser-install-guard.test.ts
+++ b/src/__tests__/unit-suite-browser-install-guard.test.ts
@@ -12,6 +12,12 @@
  * same suite: every dependency bump failed on a launch error that said nothing
  * about the bump. One workflow was fixed, one class was not.
  *
+ * Since v1.46 the suite also carries the `browser` project
+ * (`*.browser.test.tsx`, see `tests/browser/`), which launches the same
+ * headless shell through Vitest's Playwright provider for every interaction
+ * test. A slice without the browser now fails on many files rather than one;
+ * the install it needs is the same, so this guard covers both.
+ *
  * The sweep is textual and file-scoped, which is its limit: a workflow with two
  * jobs, only one of which installs the browser, satisfies it. It catches the
  * thing that actually went wrong — a whole workflow running the suite with no
@@ -58,8 +64,8 @@ describe("the browser the unit suite measures with", () => {
     expect(
       missing,
       "a workflow runs the unit suite without installing the headless " +
-        "Chromium the hero-geometry check measures with — that check refuses " +
-        "to skip under CI, so the job fails on a launch error instead",
+        "Chromium the hero-geometry check and the browser project launch — " +
+        "neither skips under CI, so the job fails on a launch error instead",
     ).toEqual([]);
   });
 });
diff --git a/src/__tests__/url-state-writes-guard.test.ts b/src/__tests__/url-state-writes-guard.test.ts
index 8c0740162..bb4a087f9 100644
--- a/src/__tests__/url-state-writes-guard.test.ts
+++ b/src/__tests__/url-state-writes-guard.test.ts
@@ -24,7 +24,7 @@ const ALLOWED: Record<string, string> = {
   "lib/url-state.ts": "the helper itself",
   "components/clinician/share-unlock-gate.tsx":
     "scrubs a passphrase from the fragment synchronously, before the unlock request leaves; no query state",
-  "components/documents/documents-view.tsx":
+  "components/documents/vault/selection-history.ts":
     "closeDocumentSelectionHistoryEntry takes a history-shaped argument for its tests; the page passes `urlStateHistory`",
 };
 
diff --git a/src/__tests__/vorsorge-due-bucket-single-home-guard.test.ts b/src/__tests__/vorsorge-due-bucket-single-home-guard.test.ts
index 1539b8772..b45198ef3 100644
--- a/src/__tests__/vorsorge-due-bucket-single-home-guard.test.ts
+++ b/src/__tests__/vorsorge-due-bucket-single-home-guard.test.ts
@@ -36,7 +36,7 @@ const HOME_IMPORT = 'from "@/lib/measurement-reminders/due-day"';
  * shared body, that is the regression, not a reason to relax the test.
  */
 const RENDERING_SURFACES = [
-  "components/measurement-reminders/vorsorge-section.tsx",
+  "components/measurement-reminders/checkups/checkup-card.tsx",
   "components/measurement-reminders/vorsorge-dashboard-card.tsx",
 ];
 
diff --git a/src/__tests__/weight-tile-direction-guard.test.ts b/src/__tests__/weight-tile-direction-guard.test.ts
index 7f246b7c3..e706d6125 100644
--- a/src/__tests__/weight-tile-direction-guard.test.ts
+++ b/src/__tests__/weight-tile-direction-guard.test.ts
@@ -2,67 +2,54 @@
  * The dashboard weight tile colours its trend by the resolved target
  * direction, never by a literal (#1006).
  *
- * Every other tile on the strip passes a literal `directionSentiment`, because
- * for resting pulse or steps the good direction is a property of the metric.
+ * For resting pulse or steps the good direction is a property of the metric.
  * Weight is the exception: which way is progress depends on the person's own
  * target, and it is resolved on the server (`tiles.weightTrend` on the
- * snapshot, `src/lib/targets/weight-trend.ts`). A literal `"up-bad"` here is
- * exactly the defect the issue reported — a person below their target saw
- * every gain coloured as a setback — and it would type-check and render
- * without complaint, so this pins the attribute rather than the pixels.
+ * snapshot, `src/lib/targets/weight-trend.ts`). A literal `"up-bad"` is
+ * exactly the defect the issue reported (a person below their target saw
+ * every gain coloured as a setback), and it would type-check and render
+ * without complaint.
  *
- * Structural rather than rendered because the dashboard page early-returns a
- * loading gate under SSR, and the property is about the source: the weight
- * `<TrendCard>` names `weightTrend.direction`, or it does not.
+ * The tile is built from the registry with each resolved direction in turn,
+ * and the card has to carry the one it was handed.
  */
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-
-import ts from "typescript";
+import type { ReactElement } from "react";
 import { describe, expect, it } from "vitest";
 
-const PAGE = join(process.cwd(), "src/app/page-client.tsx");
+import { STRIP_TILES } from "@/components/dashboard/tiles/strip-tiles";
+import type { DashboardTileContext } from "@/components/dashboard/tiles/tile-context";
 
-function weightTileDirections(): string[] {
-  const text = readFileSync(PAGE, "utf8");
-  const file = ts.createSourceFile(
-    PAGE,
-    text,
-    ts.ScriptTarget.Latest,
-    true,
-    ts.ScriptKind.TSX,
-  );
-  const found: string[] = [];
-  const visit = (node: ts.Node) => {
-    if (
-      ts.isJsxSelfClosingElement(node) &&
-      node.tagName.getText(file) === "TrendCard"
-    ) {
-      const attrs = node.attributes.properties.filter(ts.isJsxAttribute);
-      const key = attrs.find((a) => a.name.getText(file) === "key");
-      const isWeight =
-        key?.initializer &&
-        ts.isStringLiteral(key.initializer) &&
-        key.initializer.text === "weight";
-      if (isWeight) {
-        const direction = attrs.find(
-          (a) => a.name.getText(file) === "directionSentiment",
-        );
-        found.push(direction?.initializer?.getText(file) ?? "<absent>");
-      }
-    }
-    ts.forEachChild(node, visit);
-  };
-  visit(file);
-  return found;
+function weightCards(direction: string) {
+  const ctx = {
+    t: (key: string) => key,
+    fmt: { number: (v: number) => String(v) },
+    td: (_type: string, v: number | null | undefined) => v ?? null,
+    tdd: (_type: string, v: number | null | undefined) => v ?? null,
+    unitDisplay: { unitFor: () => "kg" },
+    summaries: { WEIGHT: { count: 3, latest: 80, avg7: 80, avg30: 81 } },
+    weightRange: null,
+    weightHintRange: null,
+    weightTrend: { direction },
+    compareBaseline: "none",
+    tileCompareDelta: () => null,
+    tileStaleDays: () => null,
+    directionOf: () => "up-bad",
+  } as unknown as DashboardTileContext;
+  const tiles = STRIP_TILES.filter((tile) => tile.widget === "weight");
+  return tiles.flatMap((tile) => tile.cards(ctx));
 }
 
 describe("dashboard weight tile direction", () => {
   it("finds exactly one weight tile, so an empty match cannot pass", () => {
-    expect(weightTileDirections()).toHaveLength(1);
+    expect(weightCards("down-good")).toHaveLength(1);
   });
 
   it("reads the resolved target direction rather than a literal", () => {
-    expect(weightTileDirections()).toEqual(["{weightTrend.direction}"]);
+    for (const direction of ["down-good", "up-good", "neutral"]) {
+      const [card] = weightCards(direction);
+      const props = (card.node as ReactElement<{ directionSentiment: string }>)
+        .props;
+      expect(props.directionSentiment).toBe(direction);
+    }
   });
 });
diff --git a/src/app/__tests__/dashboard-analytics-split.test.ts b/src/app/__tests__/dashboard-analytics-split.test.ts
index d093f6f2c..f895ff77f 100644
--- a/src/app/__tests__/dashboard-analytics-split.test.ts
+++ b/src/app/__tests__/dashboard-analytics-split.test.ts
@@ -1,6 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
 
 /**
  * v1.4.39.2 — dashboard analytics slim/thick split.
@@ -26,16 +25,10 @@ import { join } from "node:path";
  * slim/thick split still drives the page, so the protective intent
  * holds; the matchers only relaxed to tolerate the `enabled` arg.
  */
-const ROOT = join(__dirname, "../../..");
-const PAGE_PATH = join(ROOT, "src/app/page-client.tsx");
-
-function load(path: string): string {
-  return readFileSync(path, "utf8");
-}
 
 describe("v1.4.39.2 — dashboard analytics slim/thick split", () => {
   it("mounts both the slim slice and the thick slice in parallel", () => {
-    const src = load(PAGE_PATH);
+    const src = dashboardSource();
     // Slim slice — `?slice=summaries` paints the per-type tile strip.
     expect(src).toMatch(/useAnalyticsQuery\(\{\s*\n?\s*slice:\s*"summaries"/);
     // Thick slice — the no-slice `useAnalyticsQuery` feeds the
@@ -45,7 +38,7 @@ describe("v1.4.39.2 — dashboard analytics slim/thick split", () => {
   });
 
   it("merges slim and thick results so call-sites stay shape-stable", () => {
-    const src = load(PAGE_PATH);
+    const src = dashboardSource();
     // The merge contract: slim wins on overlapping fields, thick fills
     // in `bpInTargetPct*` and `glucoseByContext`. The text anchors
     // protect against a future refactor accidentally dropping one of
diff --git a/src/app/__tests__/dashboard-chart-reveal.test.tsx b/src/app/__tests__/dashboard-chart-reveal.test.tsx
index 9bc8ebada..c9ab1216b 100644
--- a/src/app/__tests__/dashboard-chart-reveal.test.tsx
+++ b/src/app/__tests__/dashboard-chart-reveal.test.tsx
@@ -21,11 +21,17 @@
  * `resolveChartRevealState` resolver, the markup through
  * `renderToStaticMarkup`, and the page wiring through textual pins.
  */
-import { describe, it, expect } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
+import type { ReactElement } from "react";
+import { describe, it, expect, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
+import {
+  CHART_TILES,
+  revealChartIds,
+  type ChartTileContext,
+} from "@/components/dashboard/tiles/chart-tiles";
+
 import {
   CHART_REVEAL_TIMEOUT_MS,
   DashboardChartCell,
@@ -34,8 +40,6 @@ import {
 import { TrendCardSkeleton } from "@/components/charts/trend-card-skeleton";
 import { I18nProvider } from "@/lib/i18n/context";
 
-const PAGE_PATH = join(process.cwd(), "src/app/page-client.tsx");
-
 describe("resolveChartRevealState", () => {
   it("stays hidden while the gate is not armed (no visible charts yet)", () => {
     expect(
@@ -145,46 +149,65 @@ describe("TrendCardSkeleton", () => {
   });
 });
 
-describe("dashboard chart-reveal wiring (page.tsx)", () => {
-  const src = readFileSync(PAGE_PATH, "utf8");
+describe("dashboard chart-reveal wiring (the chart registry)", () => {
+  const GATED = [
+    "weight-chart",
+    "bmi-chart",
+    "bp-chart",
+    "pulse-chart",
+    "bodyFat-chart",
+    "mood-chart",
+    "sleep-chart",
+    "steps-chart",
+    "medications",
+  ];
 
-  it("derives the gated id list from the chart visibility gates", () => {
-    expect(src).toMatch(/const\s+revealChartIds:\s*string\[\]\s*=\s*\[\];/);
-    expect(src).toMatch(/useDashboardChartReveal\(revealChartIds\)/);
+  it("derives the gated id list from the visible chart cards", () => {
+    expect(revealChartIds(CHART_TILES)).toEqual(GATED);
+    // A hidden card drops out of the list the reveal waits for.
+    expect(
+      revealChartIds(CHART_TILES.filter((tile) => tile.id !== "bp-chart")),
+    ).toEqual(GATED.filter((id) => id !== "bp-chart"));
+    expect(dashboardSource()).toMatch(
+      /useDashboardChartReveal\(revealChartIds\(chartTiles\)\)/,
+    );
   });
 
   it("every data-backed chart reports through onDataReady", () => {
-    for (const id of [
-      "weight-chart",
-      "bmi-chart",
-      "bp-chart",
-      "pulse-chart",
-      "bodyFat-chart",
-      "mood-chart",
-      "sleep-chart",
-      "steps-chart",
-      "medications",
-    ]) {
-      expect(src).toContain(`onDataReady={() => markChartReady("${id}")}`);
+    const markChartReady = vi.fn();
+    const ctx = {
+      t: (key: string) => key,
+      unitDisplay: {
+        unitFor: () => "kg",
+        transformFor: () => ({ factor: 1, offset: 0 }),
+      },
+      user: { heightCm: 180, timezone: "Europe/Berlin" },
+      summaries: {},
+      compareBaseline: "none",
+      preloadedSeries: undefined,
+      markChartReady,
+    } as unknown as ChartTileContext;
+    for (const tile of CHART_TILES.filter((t) => GATED.includes(t.id))) {
+      const node = tile.render(ctx) as ReactElement<{
+        onDataReady?: () => void;
+      }>;
+      node.props.onDataReady?.();
+      expect(markChartReady).toHaveBeenLastCalledWith(tile.id);
     }
+    expect(markChartReady).toHaveBeenCalledTimes(GATED.length);
   });
 
   it("gated entries render inside DashboardChartCell", () => {
-    expect(src).toMatch(
+    expect(dashboardSource()).toMatch(
       /entry\.revealGated\s*\?[\s\S]*?<DashboardChartCell revealed=\{chartsRevealed\}>/,
     );
   });
 
   it("self-skeletoning cards (achievements / workouts) stay outside the gate", () => {
-    // Their entries never set `revealGated`, so the ungated branch
-    // renders them directly.
-    const achievements = src.match(
-      /charts\.push\(\{\s*id:\s*"achievements"[\s\S]*?\}\);/,
-    );
-    const workouts = src.match(
-      /charts\.push\(\{\s*id:\s*"recentWorkouts"[\s\S]*?\}\);/,
-    );
-    expect(achievements?.[0]).not.toContain("revealGated");
-    expect(workouts?.[0]).not.toContain("revealGated");
+    for (const id of ["achievements", "recentWorkouts", "vorsorge"]) {
+      const tile = CHART_TILES.find((t) => t.id === id);
+      expect(tile, id).toBeDefined();
+      expect(tile?.revealGated, id).toBeUndefined();
+    }
   });
 });
diff --git a/src/app/__tests__/dashboard-demo-checklist.test.ts b/src/app/__tests__/dashboard-demo-checklist.test.ts
index 0e7f0b50f..f96f909ab 100644
--- a/src/app/__tests__/dashboard-demo-checklist.test.ts
+++ b/src/app/__tests__/dashboard-demo-checklist.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
@@ -13,7 +14,6 @@ import { join } from "node:path";
  * client mounts the checklist only without it.
  */
 const PAGE_PATH = join(process.cwd(), "src/app/page.tsx");
-const CLIENT_PATH = join(process.cwd(), "src/app/page-client.tsx");
 
 describe("dashboard setup checklist on a demo instance", () => {
   it("threads DEMO_MODE into every render of the dashboard client", () => {
@@ -27,7 +27,7 @@ describe("dashboard setup checklist on a demo instance", () => {
   });
 
   it("mounts the checklist only outside demo mode", () => {
-    const src = readFileSync(CLIENT_PATH, "utf8");
+    const src = dashboardSource();
     const mounts = src.match(/<GettingStartedChecklist\b[^>]*\/>/g) ?? [];
     expect(mounts).toHaveLength(1);
     expect(src).toContain("{demoMode ? null : <GettingStartedChecklist />}");
diff --git a/src/app/__tests__/dashboard-hero-wiring.test.ts b/src/app/__tests__/dashboard-hero-wiring.test.ts
index b6c5811cb..9c0fbfd13 100644
--- a/src/app/__tests__/dashboard-hero-wiring.test.ts
+++ b/src/app/__tests__/dashboard-hero-wiring.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
@@ -16,14 +17,13 @@ import { join } from "node:path";
  *     once carried it — is gone), while the page itself derives no
  *     welcome text.
  */
-const PAGE_PATH = join(process.cwd(), "src/app/page-client.tsx");
 const HEADER_PATH = join(
   process.cwd(),
   "src/components/dashboard/dashboard-header.tsx",
 );
 
 describe("dashboard hero — page wiring", () => {
-  const src = readFileSync(PAGE_PATH, "utf8");
+  const src = dashboardSource();
 
   it("mounts the TodayHero above the tile strip", () => {
     const heroIdx = src.indexOf("<TodayHero");
@@ -80,7 +80,7 @@ describe("dashboard hero — header greeting", () => {
   });
 
   it("the page mounts the header without a greeting prop", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toContain(
       "<DashboardHeader onQuickEntry={setQuickEntryDialog} />",
     );
diff --git a/src/app/__tests__/dashboard-hrv-rmssd-fallback.test.tsx b/src/app/__tests__/dashboard-hrv-rmssd-fallback.test.tsx
index 6ed76d946..e9283bba1 100644
--- a/src/app/__tests__/dashboard-hrv-rmssd-fallback.test.tsx
+++ b/src/app/__tests__/dashboard-hrv-rmssd-fallback.test.tsx
@@ -1,3 +1,4 @@
+import type { ReactElement } from "react";
 import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
@@ -19,7 +20,8 @@ import {
 import { moduleForMeasurementType } from "@/lib/modules/measurement-scope";
 import { locales } from "@/lib/i18n/config";
 import type { DataSummary } from "@/lib/analytics/trends";
-import { readSource } from "@/__tests__/helpers/source-files";
+import { STRIP_TILES } from "@/components/dashboard/tiles/strip-tiles";
+import type { DashboardTileContext } from "@/components/dashboard/tiles/tile-context";
 
 /**
  * The dashboard HRV tile must accept either HRV type.
@@ -245,20 +247,37 @@ describe("the tile the user actually sees", () => {
     }
   });
 
-  it("does not read freshness off a hardcoded SDNN type", () => {
-    // The one source-level check kept, and deliberately a NEGATIVE one: it
-    // names the exact expression the bug lived on rather than asserting the
-    // current formatting of the replacement, so reformatting cannot break
-    // it. Freshness is per-type and captioning a live RMSSD tile from the
-    // SDNN lookup is the failure it guards.
-    const page = readSource("src/app/page-client.tsx", [
-      "const tileStaleDays",
-      "HEART_RATE_VARIABILITY",
-    ]);
-    expect(page).not.toContain('tileStaleDays("HEART_RATE_VARIABILITY")');
-    expect(page).not.toContain(
-      "const hrvSummary = data?.summaries?.HEART_RATE_VARIABILITY",
-    );
+  it("reads freshness off the series the tile shows", () => {
+    // Freshness is per type, and captioning a live RMSSD tile from the SDNN
+    // lookup marked it permanently stale. The registry's HRV tile is built
+    // with a context whose freshness differs per type, so the caption it
+    // asks for names the type it used.
+    const hrvTile = STRIP_TILES.find((tile) => tile.widget === "hrv");
+    expect(hrvTile).toBeDefined();
+    for (const [summaries, type, days] of [
+      [{ HRV_RMSSD: summary(30, 42) }, "HRV_RMSSD", 12],
+      [
+        { HEART_RATE_VARIABILITY: summary(9, 55) },
+        "HEART_RATE_VARIABILITY",
+        20,
+      ],
+    ] as const) {
+      const ctx = {
+        t: (key: string) => key,
+        summaries,
+        hrv: pickHrvSummary(summaries),
+        compareBaseline: "none",
+        directionOf: () => "neutral",
+        tileCompareDelta: () => null,
+        tileStaleDays: (t: string | null | undefined) =>
+          t === "HRV_RMSSD" ? 12 : t === "HEART_RATE_VARIABILITY" ? 20 : null,
+      } as unknown as DashboardTileContext;
+      expect(hrvTile?.visible(ctx), type).toBe(true);
+      const [card] = hrvTile?.cards(ctx) ?? [];
+      const props = (card.node as ReactElement<{ staleDays: number | null }>)
+        .props;
+      expect(props.staleDays, type).toBe(days);
+    }
   });
 });
 
diff --git a/src/app/__tests__/dashboard-suspense-boundaries.test.ts b/src/app/__tests__/dashboard-suspense-boundaries.test.ts
index 417643651..0e20a0e51 100644
--- a/src/app/__tests__/dashboard-suspense-boundaries.test.ts
+++ b/src/app/__tests__/dashboard-suspense-boundaries.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
+import { readSource } from "@/__tests__/helpers/source-files";
 
 /**
  * v1.4.40 — dashboard Suspense boundaries.
@@ -22,22 +22,16 @@ import { join } from "node:path";
  * a future refactor that drops the boundary lands a failing test
  * rather than silently regressing the streaming-composition contract.
  */
-const ROOT = join(__dirname, "../../..");
-const PAGE_PATH = join(ROOT, "src/app/page-client.tsx");
-
-function load(path: string): string {
-  return readFileSync(path, "utf8");
-}
 
 describe("v1.4.40 — dashboard per-cell Suspense boundaries", () => {
   it("imports Suspense from React", () => {
-    const src = load(PAGE_PATH);
+    const src = dashboardSource();
     expect(src).toMatch(/from\s+"react"/);
     expect(src).toMatch(/\bSuspense\b/);
   });
 
   it("wraps the chart-row cell in a `<Suspense fallback={<ChartSkeleton />}>` boundary", () => {
-    const src = load(PAGE_PATH);
+    const src = dashboardSource();
     // `<Suspense fallback={<ChartSkeleton />}>{entry.node}</Suspense>`
     // exact contract: the chart row's per-cell fallback uses the same
     // ChartSkeleton primitive the dynamic-loaded charts already paint
@@ -48,7 +42,7 @@ describe("v1.4.40 — dashboard per-cell Suspense boundaries", () => {
   });
 
   it("wraps each tile-strip cell in a `<Suspense>` boundary with a layout-stable placeholder", () => {
-    const src = load(PAGE_PATH);
+    const src = dashboardSource();
     // v1.4.41 W-FRONTEND-FACTORY (UX M1) swapped the prior `null`
     // fallback for an `aria-hidden` placeholder div; v1.16.0 upgraded
     // it to the structured `<TrendCardSkeleton>` silhouette (the
@@ -64,18 +58,20 @@ describe("v1.4.40 — dashboard per-cell Suspense boundaries", () => {
   });
 
   it("hoists DASHBOARD_QUERY_OPTS to module scope (audit-M2)", () => {
-    const src = load(PAGE_PATH);
-    // Module-scope declaration — search outside the component body.
-    // Pre-fix the const was declared inside `DashboardPage` so every
-    // render created a fresh `{}` reference.
-    const moduleSliceEnd = src.indexOf("export default function DashboardPage");
+    const src = readSource(
+      "src/components/dashboard/tiles/use-dashboard-data.ts",
+      "export function useDashboardData",
+    );
+    // Module-scope declaration — search outside the hook body. Declared
+    // inside it, every render would create a fresh `{}` reference.
+    const moduleSliceEnd = src.indexOf("export function useDashboardData");
     expect(moduleSliceEnd).toBeGreaterThan(0);
     const moduleSlice = src.slice(0, moduleSliceEnd);
     expect(moduleSlice).toMatch(/const\s+DASHBOARD_QUERY_OPTS\s*=\s*\{/);
   });
 
   it("keeps the per-render Intl hour walk off the page (audit-H4 successor)", () => {
-    const src = load(PAGE_PATH);
+    const src = dashboardSource();
     // The audit-H4 `useMemo(getHourForTimeZone, [userTimezone])` pin
     // moved off the page with the greeting itself: the greeting now
     // lives in the header (`dashboard-header.tsx`), so the page no
diff --git a/src/app/__tests__/dashboard-tile-strip-skeleton.test.ts b/src/app/__tests__/dashboard-tile-strip-skeleton.test.ts
index d1404b7b9..5e3caab19 100644
--- a/src/app/__tests__/dashboard-tile-strip-skeleton.test.ts
+++ b/src/app/__tests__/dashboard-tile-strip-skeleton.test.ts
@@ -1,12 +1,11 @@
 import { describe, it, expect } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
 
 import {
   resolveChartRowPlaceholderCount,
   resolveConfiguredTileCount,
   resolveDashboardFirstPaintGate,
-} from "../page-client";
+} from "@/components/dashboard/dashboard-gates";
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
 import {
   DEFAULT_DASHBOARD_LAYOUT,
   type DashboardLayout,
@@ -33,7 +32,6 @@ import {
  * snapshot fetch. The pure `resolveDashboardFirstPaintGate` carries the
  * behaviour; textual pins keep the wiring honest.
  */
-const PAGE_PATH = join(process.cwd(), "src/app/page-client.tsx");
 
 describe("resolveDashboardFirstPaintGate", () => {
   const base = {
@@ -173,14 +171,14 @@ describe("resolveChartRowPlaceholderCount (v1.16.8)", () => {
 
 describe("v1.4.43 W11 — dashboard tile-strip skeleton (wiring)", () => {
   it("derives `configuredTileCount` through the tile-capable resolver", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toMatch(
       /const\s+configuredTileCount\s*=\s*resolveConfiguredTileCount\(layout\);/,
     );
   });
 
   it("reserves the chart row while the primary query loads", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     // The placeholder count keys off the layout config minus the
     // already-mounted (layout-gated) cells, and only while loading.
     // `mounted &&` pins the hydration render to the SSR output — the
@@ -189,7 +187,7 @@ describe("v1.4.43 W11 — dashboard tile-strip skeleton (wiring)", () => {
     expect(src).toMatch(
       /const\s+chartRowPlaceholderCount\s*=\s*primaryLoading[\s\S]*?resolveChartRowPlaceholderCount\(layout,[\s\S]*?hasHeightCm:\s*mounted\s*&&\s*Boolean\(user\?\.heightCm\)/,
     );
-    expect(src).toMatch(/-\s*charts\.length/);
+    expect(src).toMatch(/-\s*chartEntries\.length/);
     // The reserved cells render as aria-hidden ChartSkeletons in their
     // own slot.
     const skeletonBlock = src.match(
@@ -201,7 +199,7 @@ describe("v1.4.43 W11 — dashboard tile-strip skeleton (wiring)", () => {
   });
 
   it("derives `primaryLoading` from the snapshot vs slim query", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     // v1.16.4 — `!mounted` pins SSR + the hydration render to the
     // skeleton branch so a late-hydrating boundary can't disagree with
     // the server HTML (React #418); see `useMounted`.
@@ -211,21 +209,21 @@ describe("v1.4.43 W11 — dashboard tile-strip skeleton (wiring)", () => {
   });
 
   it("routes the gate through `resolveDashboardFirstPaintGate`", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toMatch(
       /resolveDashboardFirstPaintGate\(\{[\s\S]*?primaryLoading,[\s\S]*?\}\)/,
     );
   });
 
   it("renders the skeleton with the same auto-fit grid track the real strip uses", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toMatch(
       /showTileStripSkeleton\s*&&\s*\(\s*<div[\s\S]*?\[grid-template-columns:repeat\(auto-fit,minmax\(min\(100%,11rem\),1fr\)\)\]/,
     );
   });
 
   it("keys the skeleton card count off configuredTileCount", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toMatch(
       /Array\.from\(\{\s*length:\s*configuredTileCount\s*\}\)/,
     );
@@ -237,7 +235,7 @@ describe("v1.4.43 W11 — dashboard tile-strip skeleton (wiring)", () => {
     // Reduced motion moved into the component (the `<Skeleton>` primitive
     // carries `motion-reduce:animate-none`); the per-component test in
     // `dashboard-chart-reveal.test.tsx` pins that.
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     const skeletonBlock = src.match(
       /showTileStripSkeleton\s*&&[\s\S]*?<\/div>\s*\)\}/,
     );
@@ -248,12 +246,12 @@ describe("v1.4.43 W11 — dashboard tile-strip skeleton (wiring)", () => {
   });
 
   it("uses the structured silhouette as the per-tile Suspense fallback", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toMatch(/<Suspense fallback=\{<TrendCardSkeleton \/>\}>/);
   });
 
   it("gates the EmptyState on the resolved `showEmptyState` flag", () => {
-    const src = readFileSync(PAGE_PATH, "utf8");
+    const src = dashboardSource();
     expect(src).toMatch(/if\s*\(showEmptyState\)\s*\{/);
   });
 });
diff --git a/src/app/__tests__/insights-polish.test.ts b/src/app/__tests__/insights-polish.test.ts
index 59cb8e354..258c3e767 100644
--- a/src/app/__tests__/insights-polish.test.ts
+++ b/src/app/__tests__/insights-polish.test.ts
@@ -1,7 +1,12 @@
+import type { ReactElement } from "react";
 import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
+import { STRIP_TILES } from "@/components/dashboard/tiles/strip-tiles";
+import type { DashboardTileContext } from "@/components/dashboard/tiles/tile-context";
+
 /**
  * v1.4.19 — guards for the polish pass on `/insights` and the
  * dashboard:
@@ -28,7 +33,6 @@ import { join } from "node:path";
  */
 
 const ROOT = join(__dirname, "../../..");
-const DASHBOARD_PATH = join(ROOT, "src/app/page-client.tsx");
 const INSIGHTS_PATH = join(ROOT, "src/app/insights/page-client.tsx");
 const INSIGHTS_LAYOUT_PATH = join(ROOT, "src/app/insights/layout.tsx");
 
@@ -38,7 +42,7 @@ function load(path: string): string {
 
 describe("v1.4.19 A3 — dashboard polish", () => {
   it("dashboard page does NOT render <CompareToggle />", () => {
-    const src = load(DASHBOARD_PATH);
+    const src = dashboardSource();
     // The component import + JSX use are both gone. The toggle still
     // lives on /insights via a separate import there.
     expect(src).not.toMatch(/<CompareToggle\b/);
@@ -52,9 +56,9 @@ describe("v1.4.19 A3 — dashboard polish", () => {
     // baseline plumbing along with the toggle, every chart on the
     // dashboard would lose its comparison overlay silently. The
     // resolved layout still carries the value to each chart.
-    const src = load(DASHBOARD_PATH);
-    expect(src).toContain("comparisonBaseline");
-    expect(src).toContain("compareBaseline");
+    const src = dashboardSource();
+    expect(src).toContain("layout.comparisonBaseline");
+    expect(src).toContain("compareBaseline={ctx.compareBaseline}");
   });
 });
 
@@ -203,13 +207,34 @@ describe("v1.4.22 W5 reconcile (Code-H2) — BD-Zielbereich tile compareDelta us
    * window (priorMonth / priorYear) instead of all-time.
    */
   it("subtracts bpInTargetPctPriorMonth when comparisonBaseline=lastMonth", () => {
-    const src = load(DASHBOARD_PATH);
-    // The fix introduces `bpComparePrior` keyed by `compareBaseline`.
-    expect(src).toContain("bpInTargetPctPriorMonth");
-    expect(src).toContain("bpInTargetPctPriorYear");
-    // The all-time shortcut from v1.4.22 A2 must not subtract `bpAll`
-    // for the comparison delta any more.
-    expect(src).not.toMatch(/bp30\s*-\s*bpAll/);
+    // The tile is built from the registry with a 30-day share of 80 % and
+    // prior periods of 70 % (month), 50 % (year) and 40 % (all time): the
+    // delta follows the chosen baseline and never the all-time share.
+    const tile = STRIP_TILES.find((t) => t.widget === "bpInTarget");
+    const deltaFor = (compareBaseline: string) => {
+      const ctx = {
+        t: (key: string) => key,
+        compareBaseline,
+        directionOf: () => "neutral",
+        data: {
+          bpInTargetPct: 75,
+          bpInTargetPct7d: 78,
+          bpInTargetPct30d: 80,
+          bpInTargetPctAllTime: 40,
+          bpInTargetPctPriorMonth: 70,
+          bpInTargetPctPriorYear: 50,
+          bpInTargetCount90: 200,
+          bpInTargetSpanDays90: 90,
+        },
+      } as unknown as DashboardTileContext;
+      expect(tile?.visible(ctx)).toBe(true);
+      const [card] = tile?.cards(ctx) ?? [];
+      return (card.node as ReactElement<{ compareDelta: number | null }>).props
+        .compareDelta;
+    };
+    expect(deltaFor("lastMonth")).toBe(10);
+    expect(deltaFor("lastYear")).toBe(30);
+    expect(deltaFor("none")).toBeNull();
   });
 
   it("ships priorMonth + priorYear pcts in the analytics envelope", () => {
diff --git a/src/app/__tests__/root-loading-silhouette.test.tsx b/src/app/__tests__/root-loading-silhouette.test.tsx
index 146f7ca3b..d42a9ea4c 100644
--- a/src/app/__tests__/root-loading-silhouette.test.tsx
+++ b/src/app/__tests__/root-loading-silhouette.test.tsx
@@ -1,3 +1,4 @@
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
 import { describe, it, expect } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import { readFileSync } from "node:fs";
@@ -86,10 +87,7 @@ describe("RootLoading — single skeleton source (wiring pins)", () => {
     join(process.cwd(), "src/app/loading.tsx"),
     "utf8",
   );
-  const pageSrc = readFileSync(
-    join(process.cwd(), "src/app/page-client.tsx"),
-    "utf8",
-  );
+  const pageSrc = dashboardSource();
 
   it("imports the same silhouette components the page's loading phase uses", () => {
     expect(loadingSrc).toContain(
diff --git a/src/app/page-client.tsx b/src/app/page-client.tsx
index 5e7e0bb45..92c43a62e 100644
--- a/src/app/page-client.tsx
+++ b/src/app/page-client.tsx
@@ -1,208 +1,51 @@
 "use client";
 
-import { MEASUREMENT_TYPE_LABEL_KEYS } from "@/lib/measurements/type-label-keys";
-import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
-import React, { Suspense, useCallback, useMemo, useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useAccountOnceMounted, useAuth } from "@/hooks/use-auth";
-import { useUnitDisplayOnceMounted } from "@/hooks/use-unit-display";
-import { useMounted } from "@/hooks/use-mounted";
-import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
-import { PullToRefreshIndicator } from "@/components/ui/pull-to-refresh-indicator";
-import {
-  Activity,
-  Bone,
-  Droplet,
-  Droplets,
-  Dumbbell,
-  Footprints,
-  Gauge,
-  GlassWater,
-  Heart,
-  HeartPulse,
-  Moon,
-  Percent,
-  Plus,
-  Smile,
-  Target,
-  Thermometer,
-  TrendingUp,
-  Wind,
-} from "lucide-react";
-import {
-  convertGlucose,
-  glucoseFractionDigits,
-  resolveGlucoseUnit,
-} from "@/lib/glucose";
-import { cn } from "@/lib/utils";
-import {
-  resolveDashboardLayout,
-  type DashboardLayout,
-} from "@/lib/dashboard-layout";
-import { PRIORITY_ITEM_KINDS } from "@/lib/daily/priority-item";
-import type { DashboardAnalyticsData as AnalyticsData } from "@/types/analytics";
-import dynamic from "next/dynamic";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { EmptyState } from "@/components/ui/empty-state";
-import { QueryErrorCard } from "@/components/ui/query-error-card";
-import { ChartErrorBoundary } from "@/components/charts/chart-error-state";
-import { ChartSkeleton } from "@/components/charts/chart-skeleton";
-import { HealthChartDynamic } from "@/components/charts/health-chart-dynamic";
-import { importWithRetry } from "@/lib/retry-import";
-import {
-  DashboardChartCell,
-  useDashboardChartReveal,
-} from "@/components/dashboard/chart-reveal";
+import { useCallback, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useDashboardChartReveal } from "@/components/dashboard/chart-reveal";
 import { DashboardHeader } from "@/components/dashboard/dashboard-header";
+import { EnvironmentChip } from "@/components/dashboard/environment-chip";
 import { KeyBackupBanner } from "@/components/dashboard/key-backup-banner";
-import { TodayHero } from "@/components/daily/today-hero";
-import { TodayHeroSkeleton } from "@/components/daily/today-hero-skeleton";
 import {
   QuickEntrySheets,
   type QuickEntryDialog,
 } from "@/components/dashboard/quick-entry-sheets";
 import {
-  getRangeColorClass,
-  getRangeHint,
-  toHoursSummary,
-} from "@/components/dashboard/range-display";
-import { TrendCard } from "@/components/charts/trend-card";
-import { TrendCardSkeleton } from "@/components/charts/trend-card-skeleton";
-import { TrendHint } from "@/components/charts/trend-hint";
-import { summaryToTrend7Delta } from "@/lib/analytics/trend-delta";
+  buildChartEntries,
+  revealChartIds,
+  visibleChartTiles,
+} from "@/components/dashboard/tiles/chart-tiles";
+import { DashboardTiles } from "@/components/dashboard/tiles/dashboard-tiles";
+import { buildStripEntries } from "@/components/dashboard/tiles/strip-tiles";
+import { useDashboardTileContext } from "@/components/dashboard/tiles/tile-context";
+import { useDashboardData } from "@/components/dashboard/tiles/use-dashboard-data";
+import { TodayHero } from "@/components/daily/today-hero";
+import { TodayHeroSkeleton } from "@/components/daily/today-hero-skeleton";
 import { GettingStartedChecklist } from "@/components/onboarding/getting-started-checklist";
-import { RecentAchievementsCard } from "@/components/gamification/recent-achievements-card";
-import { RecentWorkoutsTile } from "@/components/dashboard/recent-workouts-tile";
-import { EnvironmentChip } from "@/components/dashboard/environment-chip";
-import { SleepSourceDiscrepancyMarker } from "@/components/insights/sleep-source-discrepancy-marker";
-import { VorsorgeDashboardCard } from "@/components/measurement-reminders/vorsorge-dashboard-card";
-
-// v1.4.40 — module-scope so the option object is stable across
-// renders (audit-M2). Pre-fix the same literal was declared inside the
-// component body, so every render created a fresh `{}` reference;
-// TanStack does a shallow compare and shrugs at the equivalent values,
-// but the slot is one future-callback-field away from cache poisoning.
-const DASHBOARD_QUERY_OPTS = {
-  staleTime: 60_000,
-  // v1.28.28 — refetch on window focus: the dashboard is exactly the surface
-  // a user leaves open in a background tab while editing its tile selection
-  // elsewhere; without a focus refetch the stale layout sat visible for up to
-  // the poll interval ("saved but nothing changed"). staleTime still bounds
-  // the cost to at most one refetch per minute, and the server side is SWR-
-  // cached, so a focus flick is a cheap cache hit.
-  refetchOnWindowFocus: true,
-} as const;
-
-// v1.19.0 — day-span the batched dashboard series (`series-batch`) fetches.
-// Threaded to every chart as `preloadedCoverageDays` so a chart reads the
-// batched slice ONLY for a range tab whose window fits within it (7 / 30);
-// the 90 / All tabs exceed it and self-fetch the wider window.
-//
-// v1.30.9 — `BATCH_COVERAGE_DAYS` + the type-set + window derivations moved to
-// the client-safe `@/lib/dashboard/batch-chart-types` module so the RSC
-// prefetch (page.tsx) and this client read the SAME code — the batched-series
-// cache key is byte-identical on both sides or the prefetch silently no-ops.
-
-// v1.16.8 — the loaders retry a rejected chunk import once (a lazy
-// import caches its rejection permanently, so a transient 404 from a
-// stale shell used to brick the card for the session) and each mount
-// wraps in `<ChartErrorBoundary>` so a chunk that still fails degrades
-// to ONE error card instead of bubbling to the route-level `error.tsx`.
-const MoodChartLazy = dynamic(
-  () =>
-    importWithRetry(() => import("@/components/charts/chart-runtime")).then(
-      (mod) => ({ default: mod.MoodChart }),
-    ),
-  { ssr: false, loading: () => <ChartSkeleton /> },
-);
-const MoodChart = (props: React.ComponentProps<typeof MoodChartLazy>) => (
-  <ChartErrorBoundary>
-    <MoodChartLazy {...props} />
-  </ChartErrorBoundary>
-);
-const MedicationComplianceChartLazy = dynamic(
-  () =>
-    importWithRetry(() => import("@/components/charts/chart-runtime")).then(
-      (mod) => ({ default: mod.MedicationComplianceChart }),
-    ),
-  { ssr: false, loading: () => <ChartSkeleton /> },
-);
-const MedicationComplianceChart = (
-  props: React.ComponentProps<typeof MedicationComplianceChartLazy>,
-) => (
-  <ChartErrorBoundary>
-    <MedicationComplianceChartLazy {...props} />
-  </ChartErrorBoundary>
-);
-
-// v1.30.9 — warm the shared `chart-runtime` chunk during hydration. The
-// dashboard charts mount through `ssr:false` dynamics, which begin their
-// import only at mount (post-hydration); firing the import at module
-// evaluation lets the chunk download overlap hydration instead of queueing
-// behind the first chart mount. No render-path change — the dynamics still
-// resolve through the same `importWithRetry` promise (a warm module cache),
-// and the `<ChartSkeleton>` fallback is untouched.
-if (typeof window !== "undefined") {
-  void importWithRetry(() => import("@/components/charts/chart-runtime"));
-}
-import { useTranslations, useFormatters } from "@/lib/i18n/context";
-import { queryKeys } from "@/lib/query-keys";
-import { useAnalyticsQuery } from "@/lib/queries/use-analytics-query";
-import { useDashboardSnapshot } from "@/lib/queries/use-dashboard-snapshot";
-import { useDailyDigest } from "@/lib/queries/use-daily-digest";
-import { useSurfaceVisible } from "@/hooks/use-surface-visible";
-import { hideModuleWidgets } from "@/lib/dashboard/widget-modules";
-import { isDashboardSnapshotEnabled } from "@/lib/dashboard/snapshot-flag";
-import {
-  BATCH_COVERAGE_DAYS,
-  deriveBatchChartTypes,
-  computeLocalBatchWindow,
-  type BatchWindow,
-} from "@/lib/dashboard/batch-chart-types";
-import type { DataSummary } from "@/lib/analytics/trends";
-import { mergeSlimAndThickAnalytics } from "@/lib/analytics/merge-slim-thick";
-import { isWindowSufficient } from "@/lib/analytics/window-confidence";
-import { buildDashboardBands, viewerBandProfile } from "@/lib/dashboard/bands";
-import { resolveWeightTargetOverride } from "@/lib/analytics/effective-range";
-import {
-  resolveWeightTrend,
-  weightTrendReferenceKg,
-} from "@/lib/targets/weight-trend";
-import type { TrendDirectionSentiment } from "@/lib/insights/trend-sentiment";
-import { toProfileSex } from "@/lib/profile/sex";
-import { apiGet } from "@/lib/api/api-fetch";
-
-// v1.18.6 — the pure first-paint / skeleton-reservation gates moved to
-// `@/components/dashboard/dashboard-gates`. Re-exported here so the
-// existing `../page` unit-test imports stay valid while `page.tsx` thins
-// to an orchestrator.
-export {
-  resolveDashboardFirstPaintGate,
-  resolveConfiguredTileCount,
-  resolveChartRowPlaceholderCount,
-} from "@/components/dashboard/dashboard-gates";
-import { dashboardTileHref } from "@/components/dashboard/tile-destinations";
-import {
-  resolveDashboardFirstPaintGate,
-  resolveConfiguredTileCount,
-  resolveChartRowPlaceholderCount,
-  pickHrvSummary,
-  resolveGlucoseTiles,
-} from "@/components/dashboard/dashboard-gates";
+import { PullToRefreshIndicator } from "@/components/ui/pull-to-refresh-indicator";
+import { QueryErrorCard } from "@/components/ui/query-error-card";
+import { useAccountOnceMounted, useAuth } from "@/hooks/use-auth";
+import { useMounted } from "@/hooks/use-mounted";
+import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import type { BatchWindow } from "@/lib/dashboard/batch-chart-types";
+import { PRIORITY_ITEM_KINDS } from "@/lib/daily/priority-item";
 
+/**
+ * The dashboard: the header, the Today hero, and the tiles and charts the
+ * layout switches on. Which tiles exist, what each reads, when each shows and
+ * where it sits is the registry under `components/dashboard/tiles/`; this
+ * component only composes.
+ */
 export default function DashboardPageClient({
-  batchWindow: batchWindowProp,
+  batchWindow,
   demoMode = false,
 }: {
   /**
-   * v1.30.9 — the batched-series ISO window computed server-side from the
-   * PROFILE timezone and threaded down as an RSC prop. Present only when the
-   * RSC prefetch ran (snapshot mode, `DASHBOARD_SSR_PREFETCH !== "false"`);
-   * absent on the legacy / prefetch-off / fail-soft paths, where the client
-   * falls back to its browser-local window. Adopting the prop verbatim keeps
-   * the `chartSeriesBatch` key byte-identical to the key the RSC dehydrated
-   * under, so the prefetched slice lands instead of triggering a refetch.
+   * The batched-series ISO window computed server-side from the PROFILE time
+   * zone, present only when the RSC prefetch ran. Adopted verbatim so the
+   * `chartSeriesBatch` key matches the key the RSC dehydrated under.
    */
   batchWindow?: BatchWindow;
   /**
@@ -215,736 +58,56 @@ export default function DashboardPageClient({
   const { isAuthenticated } = useAuth();
   const mounted = useMounted();
   // The account payload is withheld until this boundary has mounted, so the
-  // hydration render paints exactly what the server streamed. The dashboard
-  // hydrates after the app shell, whose mount already fetched `/api/auth/me`,
-  // and every account-derived branch below — the BMI chart's `heightCm` gate,
-  // the personalised weight bands, the module gates, the unit labels — would
-  // otherwise render one thing on the server and another here. With the RSC
-  // prefetch on, that costs the whole streamed dashboard: React #418, tree
-  // discarded, the prefetch paid for and thrown away. See
+  // hydration render paints exactly what the server streamed. Every
+  // account-derived branch (the BMI chart's height gate, the personalised
+  // bands, the module gates, the unit labels) would otherwise render one
+  // thing on the server and another here, and with the RSC prefetch on that
+  // costs the whole streamed dashboard (React #418). See
   // `useAccountOnceMounted`.
   const user = useAccountOnceMounted();
-  const { t } = useTranslations();
-  const fmt = useFormatters();
   const queryClient = useQueryClient();
-  // v1.32.26 — metric/imperial display choke point for the dashboard tiles +
-  // weight chart. `td` converts an ABSOLUTE reading (affine, so a temperature
-  // picks up the °F offset); `tdd` converts a DELTA / slope (factor only, so a
-  // Δ never inherits the offset). Metric users take the identity path.
-  const unitDisplay = useUnitDisplayOnceMounted();
-  const td = (type: string, value: number | null | undefined): number | null =>
-    value == null ? null : unitDisplay.toDisplay(type, value);
-  const tdd = (
-    type: string,
-    value: number | null | undefined,
-  ): number | null =>
-    value == null ? null : unitDisplay.toDisplayDelta(type, value);
   const { canWriteDomain } = useRecordCapabilities();
   const canAddMeasurement = canWriteDomain("measurements");
   const [quickEntryDialog, setQuickEntryDialog] =
     useState<QuickEntryDialog>(null);
 
-  // v1.30.1 — pull-to-refresh parity for the dashboard, named as one
-  // of the sharpest PWA-resume-staleness surfaces in the audit (it
-  // already opts back into `refetchOnWindowFocus`, but a PWA resumed
-  // from the home screen/app-switcher, not a browser tab focus event,
-  // is the more common mobile path and that never fires a focus event).
-  // The dashboard fans out into a dozen-plus independent per-tile/chart
-  // queries, so — like `/insights` — refetching every currently-active
-  // query is the only tractable "refresh everything visible" shape.
+  // Pull to refresh: a PWA resumed from the home screen never fires a focus
+  // event, and the dashboard fans out into a dozen independent reads, so
+  // refetching every active query is the one tractable "refresh everything
+  // visible".
   const refreshDashboard = useCallback(
     () => queryClient.refetchQueries({ type: "active" }),
     [queryClient],
   );
   const pull = usePullToRefresh({ onRefresh: refreshDashboard });
-  // v1.4.29 — the three inline dashboard queries default to a
-  // 0-ms `staleTime`, so a tab-focus-and-return triggered a refetch
-  // storm. None of these are real-time data; minute-scale staleness
-  // is fine and the dashboard's chart queries already match this
-  // cadence.
-  //
-  // v1.4.40 — `DASHBOARD_QUERY_OPTS` hoisted to module scope
-  // (audit-M2 — stable reference across renders).
 
-  // v1.4.39.2 — split the dashboard's analytics consumption so the
-  // tile-strip paints from the slim slice and the BD-Zielbereich +
-  // glucose tiles stream in from the thick slice afterwards.
-  //
-  // Pre-fix: a single `useAnalyticsQuery()` against `/api/analytics`
-  // (thick slice) blocked every per-type tile until the heavy fan-out
-  // resolved. Mood and medication tiles paint from their own dedicated
-  // endpoints and arrived first; the per-type measurement tiles then
-  // arrived as one burst once the full slice landed — the maintainer reported
-  // this "blocked-then-burst" pattern as "etwas nervig".
-  //
-  // Post-fix: two parallel queries. The slim slice (`?slice=summaries`)
-  // resolves the per-type DataSummary headlines + `lastSeenByType` and
-  // typically returns in well under a second once the rollup tier is
-  // warm; that paints every per-type tile in the strip. The thick
-  // slice resolves `bpInTargetPct*` + `glucoseByContext` for the
-  // BD-Zielbereich and glucose tiles, which stream in independently.
-  // Both queries share `caches.analytics` server-side so warm hits
-  // stay free, and TanStack's parallel-mounting keeps the network fan-
-  // out flat.
-  // Unified first-paint snapshot (reversible rollout flag, default ON).
-  // Every tile hydrates from ONE un-gated `/api/dashboard/snapshot` cell
-  // so the whole strip shares one completion moment and the
-  // `/api/auth/me` round-trip leaves the cold critical path. Set
-  // `NEXT_PUBLIC_DASHBOARD_SNAPSHOT=false` to fall back to the legacy
-  // four independent cells.
-  const snapshotEnabled = isDashboardSnapshotEnabled();
-  const snapshotQuery = useDashboardSnapshot(snapshotEnabled);
-
-  // The Today hero reads the unified daily digest (the S1 DTO) from
-  // its own cached route. It is the day's data, so no module owns it: the
-  // `insights` key means AI analysis, and the digest leaves its model-written
-  // lead out on its own when that is off. Gated on auth only.
-  const digestQuery = useDailyDigest(isAuthenticated);
-
-  // v1.29.1 — the v1.29.0 selected-score-ring cluster is removed from the web
-  // hero (live use: uneven, wasted tile space). The snapshot still
-  // resolves `scoreRings` server-side for the iOS selection contract; the web
-  // hero just no longer renders them, so no client-side ring ordering here.
-
-  const analyticsSlimQuery = useAnalyticsQuery({
-    slice: "summaries",
-    enabled: !snapshotEnabled && isAuthenticated,
+  const dashboard = useDashboardData({
+    isAuthenticated,
+    mounted,
+    user,
+    batchWindowProp: batchWindow,
   });
-  const analyticsThickQuery = useAnalyticsQuery({
-    enabled: !snapshotEnabled && isAuthenticated,
-  });
-  const data = useMemo<AnalyticsData | undefined>(() => {
-    // v1.7.0 — snapshot path: assemble the same `AnalyticsData`
-    // shape from the single snapshot cell so every downstream tile
-    // reads unchanged. `extras` is null on a rollup-coverage miss
-    // (two-phase contract) → the BD-Zielbereich + glucose fields stay
-    // undefined and those tiles render their per-tile shimmer while the
-    // rest of the strip paints.
-    if (snapshotEnabled) {
-      const snap = snapshotQuery.data;
-      if (!snap) return undefined;
-      return {
-        summaries: snap.tiles.summaries,
-        lastSeenByType: snap.tiles.lastSeenByType,
-        // v1.28.x — latest-night source-discrepancy annotation for the
-        // sleep tile's discreet "sources disagree" marker. Optional on
-        // the snapshot (additive contract), so `?? null` here.
-        sleepSourceDiscrepancy: snap.tiles.sleepSourceDiscrepancy ?? null,
-        bpInTargetPct: snap.extras?.bpInTargetPct ?? null,
-        bpInTargetPct7d: snap.extras?.bpInTargetPct7d ?? null,
-        bpInTargetPct30d: snap.extras?.bpInTargetPct30d ?? null,
-        bpInTargetPctAllTime: snap.extras?.bpInTargetPctAllTime ?? null,
-        bpInTargetPctPriorMonth: snap.extras?.bpInTargetPctPriorMonth ?? null,
-        bpInTargetPctPriorYear: snap.extras?.bpInTargetPctPriorYear ?? null,
-        bpInTargetCount90: snap.extras?.bpInTargetCount90 ?? null,
-        bpInTargetSpanDays90: snap.extras?.bpInTargetSpanDays90 ?? null,
-        glucoseByContext: snap.extras?.glucoseByContext as
-          Record<string, DataSummary> | undefined,
-      };
-    }
-    // v1.4.39.3 — the merge moved to `mergeSlimAndThickAnalytics` so
-    // the empty-slim-vs-populated-thick edge has direct unit
-    // coverage. Pre-fix the inline `slim?.summaries ?? thick?.summaries`
-    // short-circuited on a truthy-but-empty `{}` from the slim slice
-    // and blanked the tile strip even when thick carried the full
-    // payload — the regression the maintainer's v1.4.39.3 e2e CI flagged across
-    // eight dashboard / chart specs. The helper falls back to thick
-    // when slim resolves with no content and otherwise keeps the
-    // v1.4.39.2 slim-wins-first progressive-paint contract.
-    const merged = mergeSlimAndThickAnalytics(
-      analyticsSlimQuery.data,
-      analyticsThickQuery.data,
-    );
-    if (!merged) return undefined;
-    return {
-      summaries: merged.summaries,
-      lastSeenByType: merged.lastSeenByType,
-      sleepSourceDiscrepancy: merged.sleepSourceDiscrepancy,
-      bpInTargetPct: merged.bpInTargetPct,
-      bpInTargetPct7d: merged.bpInTargetPct7d,
-      bpInTargetPct30d: merged.bpInTargetPct30d,
-      bpInTargetPctAllTime: merged.bpInTargetPctAllTime,
-      bpInTargetPctPriorMonth: merged.bpInTargetPctPriorMonth,
-      bpInTargetPctPriorYear: merged.bpInTargetPctPriorYear,
-      bpInTargetCount90: merged.bpInTargetCount90,
-      bpInTargetSpanDays90: merged.bpInTargetSpanDays90,
-      glucoseByContext: merged.glucoseByContext as
-        Record<string, DataSummary> | undefined,
-    };
-  }, [
-    snapshotEnabled,
-    snapshotQuery.data,
-    analyticsSlimQuery.data,
-    analyticsThickQuery.data,
-  ]);
+  const { digestQuery, layout, primaryLoading } = dashboard;
+  const tileContext = useDashboardTileContext({ dashboard, user });
 
-  // The user's own targets, for the legacy (snapshot-disabled) band fallback
-  // only. In snapshot mode the server resolves the same overrides into
-  // `targetBands` and this query never fires; the fallback would otherwise
-  // keep shading the default band for someone who has set a target.
-  const { data: thresholdsData } = useQuery({
-    queryKey: queryKeys.userThresholds(),
-    queryFn: async () => {
-      return apiGet<{
-        overrides: Record<string, { min: number; max: number }>;
-      }>("/api/user/thresholds");
-    },
-    enabled: !snapshotEnabled && isAuthenticated,
-    ...DASHBOARD_QUERY_OPTS,
-  });
-
-  const { data: layoutDataLegacy } = useQuery({
-    queryKey: queryKeys.dashboardWidgets(),
-    queryFn: async () => {
-      return apiGet<DashboardLayout>("/api/dashboard/widgets");
-    },
-    enabled: !snapshotEnabled && isAuthenticated,
-    ...DASHBOARD_QUERY_OPTS,
-  });
-  // The snapshot publishes its layout with switched-off modules' widgets
-  // already hidden. The legacy feed is the stored layout as saved (Settings
-  // edits that exact value), so the same mask is applied here, from the same
-  // surface map, before anything paints.
-  const layoutData = snapshotEnabled
-    ? snapshotQuery.data?.layout
-    : layoutDataLegacy && hideModuleWidgets(layoutDataLegacy, user?.modules);
-  const moodWidgetVisible = useSurfaceVisible("widget:mood");
-
-  const { data: moodDataLegacy } = useQuery({
-    queryKey: queryKeys.moodAnalytics(),
-    queryFn: async () => {
-      return apiGet<{
-        entries: Array<{ date: string; score: number; samples: number }>;
-        summary: DataSummary;
-      }>("/api/mood/analytics");
-    },
-    // The route refuses with the mood module off; do not ask.
-    enabled: !snapshotEnabled && isAuthenticated && moodWidgetVisible,
-    ...DASHBOARD_QUERY_OPTS,
-  });
-  const moodData = snapshotEnabled
-    ? snapshotQuery.data
-      ? {
-          entries: snapshotQuery.data.tiles.mood.entries,
-          summary: (snapshotQuery.data.tiles.mood.summary ??
-            undefined) as DataSummary,
-        }
-      : undefined
-    : moodDataLegacy;
-
-  // v1.4.27 — the dashboard's `<InsightsCardPreview>` retired (it
-  // duplicated the much-richer `/insights` advisor surface). The advisor
-  // query lives on `/insights` directly; the dashboard no longer needs
-  // its own hook subscription, so the local `useInsightsAdvisorQuery`
-  // call dropped with the preview.
-
-  // v1.4.27 — per-tile availability gates live a few lines below as the
-  // existing `hasWeight` / `hasBp` / `hasPulse` / `hasBodyFat` / `hasMood` /
-  // `hasSleep` / `hasSteps` flags. They mirror `hasMetricData` from
-  // `src/lib/insights/metric-availability.ts` for the routed Insights
-  // surfaces — both branches read `summaries[METRIC].count > 0`.
-
-  const w = data?.summaries?.WEIGHT;
-  const sys = data?.summaries?.BLOOD_PRESSURE_SYS;
-  const dia = data?.summaries?.BLOOD_PRESSURE_DIA;
-  const p = data?.summaries?.PULSE;
-  // v1.15.12 — the resting-pulse target band is judged against the
-  // RESTING_HEART_RATE series (Apple's clean daily resting figure), not
-  // raw PULSE which mixes in workout HR. When the user has resting rows,
-  // the pulse tile shows the resting figure + the resting-band colour;
-  // when only raw PULSE exists, the tile shows heart rate WITHOUT the
-  // resting-band colour overlay (no "outside target" over workout HR).
-  const rhr = data?.summaries?.RESTING_HEART_RATE;
-  const hasRestingHr = (rhr?.count ?? 0) > 0;
-  const pulseTileSummary = hasRestingHr ? rhr : p;
-  // The pulse widget shows ONE of two statistics, and its name says which:
-  // with resting rows it is the resting heart rate (one figure a day, the
-  // same series the day view names "Resting heart rate"); without them it
-  // is the pulse, whose latest value is the latest day's pulse (the mean of
-  // its hours' means, `summaries-slice.ts`), the number the day view shows
-  // as "Pulse" for that day. Calling the resting figure "Pulse" put 62 on
-  // the dashboard beside a day view reading 77 for the same name.
-  const pulseLabel = hasRestingHr
-    ? t(MEASUREMENT_TYPE_LABEL_KEYS.RESTING_HEART_RATE)
-    : t("dashboard.pulseShort");
-  const pulseTitle = hasRestingHr
-    ? t(MEASUREMENT_TYPE_LABEL_KEYS.RESTING_HEART_RATE)
-    : t("dashboard.pulse");
-  const bf = data?.summaries?.BODY_FAT;
-  const sleepSummary = data?.summaries?.SLEEP_DURATION;
-  // v1.11.4 — `summaries.SLEEP_DURATION` now carries per-NIGHT time-asleep
-  // totals in MINUTES (the server collapses the per-stage rows into one
-  // night value; see `summaries-slice.ts`). The sleep tile renders hours,
-  // so convert every value field minutes→hours here while keeping the
-  // staleness / count metadata untouched. This is the web-parity twin of
-  // the iOS dashboard-summary route which already emits `unit:"h"`.
-  const sleepSummaryHours = sleepSummary
-    ? toHoursSummary(sleepSummary)
-    : undefined;
-  const stepsSummary = data?.summaries?.ACTIVITY_STEPS;
-  // v1.4.25 — VO2 max secondary-metric tile. /api/analytics
-  // auto-populates this summary because the route iterates over the
-  // full measurementTypeEnum.options list; no backend change needed.
-  const vo2Summary = data?.summaries?.VO2_MAX;
-  // v1.28.52 — additional vitals + body-composition summaries. Each rides
-  // the same summaries slice (`computeSummariesSlice` iterates the full
-  // measurement-type enum), so no backend change was needed; the strip
-  // tiles below self-gate on `count > 0`.
-  // HRV is stored under two types and the tile has to accept either: SDNN
-  // (`HEART_RATE_VARIABILITY`, Apple Health / Health Connect) or nightly
-  // RMSSD (`HRV_RMSSD`, Oura / Polar / WHOOP / Fitbit / Google Health and
-  // bridge pushes). Reading
-  // SDNN alone left a ring / strap account with a Settings toggle that
-  // rendered nothing while `/insights/hrv` charted the same data. The
-  // helper keeps the union in one place and hands back which type won, so
-  // the freshness caption and the label below follow the series shown.
-  const {
-    summary: hrvSummary,
-    type: hrvType,
-    labelKey: hrvLabelKey,
-  } = pickHrvSummary(data?.summaries);
-  const spo2Summary = data?.summaries?.OXYGEN_SATURATION;
-  const respRateSummary = data?.summaries?.RESPIRATORY_RATE;
-  const wristTempSummary = data?.summaries?.WRIST_TEMPERATURE;
-  const muscleMassSummary = data?.summaries?.MUSCLE_MASS;
-  const bodyWaterSummary = data?.summaries?.TOTAL_BODY_WATER;
-  const boneMassSummary = data?.summaries?.BONE_MASS;
-  // v1.29 — fluid intake strip tile. Synthetic summary key, not a real
-  // MeasurementType — derived server-side from `NutrientIntakeDay`
-  // (nutrient="water", summed across sources); see `dashboard/snapshot.ts`.
-  const waterIntakeSummary = data?.summaries?.NUTRIENT_WATER;
-  const moodSummary = moodData?.summary;
-
-  // Resolve full dashboard layout — controls visibility + order of every widget
-  const layout = resolveDashboardLayout(layoutData);
   const renderFilteredHeroAllClear =
     (layout.enabledHeroItemKinds ?? PRIORITY_ITEM_KINDS).length <
     PRIORITY_ITEM_KINDS.length;
-  /**
-   * v1.4.16 — comparison baseline (Vormonat / Vorjahr) read
-   * from the resolved layout so every chart + tile on the dashboard
-   * receives the same value. "none" = comparison off (pre-B8 default).
-   */
-  const compareBaseline = layout.comparisonBaseline ?? "none";
 
-  /**
-   * v1.4.16 — derive the tile-delta value (current 30d avg
-   * minus prior-period 30d avg) for any DataSummary. Returns null
-   * when comparison is off OR either side is missing data so the
-   * tile can suppress the callout cleanly.
-   */
-  const tileCompareDelta = (
-    summary: DataSummary | null | undefined,
-  ): number | null => {
-    if (!summary || compareBaseline === "none") return null;
-    const current = summary.avg30 ?? null;
-    const prior =
-      compareBaseline === "lastMonth"
-        ? (summary.avg30LastMonth ?? null)
-        : (summary.avg30LastYear ?? null);
-    if (current === null || prior === null) return null;
-    return Math.round((current - prior) * 100) / 100;
-  };
-
-  /**
-   * v1.4.34 — read the per-type freshness map and surface the
-   * `daysAgo` value when the metric is older than a week. The
-   * tile-strip below forwards the result to `<TrendCard staleDays>`
-   * which picks the bucket-aware copy (Xd / X weeks / X months) and
-   * paints the caption on the tile. Returns `null` for metrics with no
-   * reading yet OR within the fresh window so call sites stay
-   * undefined-safe and tiles with recent data paint byte-identical
-   * with the pre-v1.4.34 contract.
-   */
-  const tileStaleDays = (type: string | null | undefined): number | null => {
-    if (!type) return null;
-    const entry = data?.lastSeenByType?.[type];
-    if (!entry) return null;
-    return entry.daysAgo > 7 ? entry.daysAgo : null;
-  };
-  /** Whether the widget's *chart* (lower row) shows. */
-  const isChartVisible = (id: string) =>
-    layout.widgets.find((widget) => widget.id === id)?.visible ?? false;
-  /**
-   * v1.4.15 — whether the widget's *tile* in the strip shows.
-   * Independent of the chart visibility so the user can hide chart but
-   * keep the tile (or vice versa) from Settings → Dashboard. Falls back
-   * to chart visibility for layouts saved before v1.4.15.
-   */
-  const isTileVisible = (id: string) => {
-    const widget = layout.widgets.find((w) => w.id === id);
-    if (!widget) return false;
-    return typeof widget.tileVisible === "boolean"
-      ? widget.tileVisible
-      : widget.visible;
-  };
-  const widgetOrder = (id: string) =>
-    layout.widgets.find((widget) => widget.id === id)?.order ?? 999;
-
-  // Data-floor gates (widget shows iff visible AND has data)
-  const hasWeight = (w?.count ?? 0) > 0;
-  const hasBp = (sys?.count ?? 0) > 0 || (dia?.count ?? 0) > 0;
-  // v1.15.12 — the pulse tile shows resting HR when available, else
-  // raw PULSE; either signal having data shows the tile.
-  const hasPulse = (p?.count ?? 0) > 0 || (rhr?.count ?? 0) > 0;
-  const hasBodyFat = (bf?.count ?? 0) > 0;
-  const hasMood = (moodSummary?.count ?? 0) > 0;
-  const hasSleep = (sleepSummary?.count ?? 0) > 0;
-  const hasSteps = (stepsSummary?.count ?? 0) > 0;
-  const hasVo2 = (vo2Summary?.count ?? 0) > 0;
-  // v1.28.52 — data floors for the new vitals + body-composition tiles.
-  const hasHrv = (hrvSummary?.count ?? 0) > 0;
-  const hasSpo2 = (spo2Summary?.count ?? 0) > 0;
-  const hasRespRate = (respRateSummary?.count ?? 0) > 0;
-  const hasWristTemp = (wristTempSummary?.count ?? 0) > 0;
-  const hasMuscleMass = (muscleMassSummary?.count ?? 0) > 0;
-  const hasBodyWater = (bodyWaterSummary?.count ?? 0) > 0;
-  const hasBoneMass = (boneMassSummary?.count ?? 0) > 0;
-  // v1.29 — data floor for the fluid-intake strip tile.
-  const hasWaterIntake = (waterIntakeSummary?.count ?? 0) > 0;
-  /**
-   * v1.4.33 — gate the BD-Zielbereich tile so a literal "0,0 %"
-   * placeholder doesn't ride on the dashboard when none of the user's
-   * paired readings sit inside the target band. The historical
-   * behaviour (`!= null`) painted the tile whenever the analytics
-   * route emitted a numeric percentage, including the legitimate-but-
-   * misleading zero. The corrected gate requires at least one window
-   * (7d, 30d, all-time) to report a non-zero share. When every
-   * window is zero, the tile is hidden — the user sees the BP charts
-   * + the Insights blood-pressure target panel for the deeper analysis
-   * instead.
-   * The audit's F4 reproduction sat on 540 BP samples with all sub-
-   * windows reading 0 % because the seed data straddled the target
-   * ceiling; the tile keeps its place once even one sub-window
-   * crosses zero.
-   */
-  const hasBpInTarget =
-    data?.bpInTargetPct != null &&
-    [
-      data?.bpInTargetPct,
-      data?.bpInTargetPct7d,
-      data?.bpInTargetPct30d,
-      data?.bpInTargetPctAllTime,
-    ].some((pct) => pct != null && pct > 0);
-
-  // Tile (strip) gates — controlled by the new `tileVisible` flag.
-  const showWeightTile = isTileVisible("weight") && hasWeight;
-  const showBpTiles = isTileVisible("bp") && hasBp;
-  const showPulseTile = isTileVisible("pulse") && hasPulse;
-  const showBodyFatTile = isTileVisible("bodyFat") && hasBodyFat;
-  const showMoodTile = isTileVisible("mood") && hasMood;
-  const showSleepTile = isTileVisible("sleep") && hasSleep;
-  // v1.18.0 — steps are activity data tied to the workouts module
-  // surface; AND the resolved module flag (fail-open: only an explicit
-  // `false` hides it) so a disabled-workouts account drops the tile.
-  const showStepsTile =
-    isTileVisible("steps") && hasSteps && user?.modules?.workouts !== false;
-  const showVo2Tile = isTileVisible("vo2Max") && hasVo2;
-  // v1.28.52 — strip-tile gates for the new vitals + body-composition
-  // metrics. Each follows the VO2max precedent: layout toggle AND a
-  // non-empty summary, so an account without that metric sees no tile.
-  const showHrvTile = isTileVisible("hrv") && hasHrv;
-  const showSpo2Tile = isTileVisible("oxygenSaturation") && hasSpo2;
-  const showRespRateTile = isTileVisible("respiratoryRate") && hasRespRate;
-  const showWristTempTile = isTileVisible("wristTemperature") && hasWristTemp;
-  const showMuscleMassTile = isTileVisible("muscleMass") && hasMuscleMass;
-  const showBodyWaterTile = isTileVisible("totalBodyWater") && hasBodyWater;
-  const showBoneMassTile = isTileVisible("boneMass") && hasBoneMass;
-  // v1.29 — fluid intake strip tile gate: layout toggle AND a non-empty
-  // summary, same precedent as the vitals/body-composition tiles above.
-  const showWaterIntakeTile = isTileVisible("waterIntake") && hasWaterIntake;
-  const showBpInTargetTile = isTileVisible("bpInTarget") && hasBpInTarget;
-
-  // Chart (lower row) gates — controlled by the legacy `visible` flag.
-  const showWeightChart = isChartVisible("weight") && hasWeight;
-  const showBpCharts = isChartVisible("bp") && hasBp;
-  const showPulseChart = isChartVisible("pulse") && hasPulse;
-  const showBodyFatChart = isChartVisible("bodyFat") && hasBodyFat;
-  const showMoodChart = isChartVisible("mood") && hasMood;
-  const showSleepChart = isChartVisible("sleep") && hasSleep;
-  const showStepsChart = isChartVisible("steps") && hasSteps;
-  const showMedicationsCard = isChartVisible("medications");
-  // v1.18.2 — Vorsorge summary card on the chart row (opt-in). Always-on
-  // data surface, so it gates on the layout toggle alone.
-  const showVorsorgeCard = isChartVisible("vorsorge");
-  // `layoutData` is undefined until the real layout (snapshot or legacy
-  // widgets) resolves; `resolveDashboardLayout(undefined)` falls back to
-  // DEFAULT_DASHBOARD_LAYOUT, where `achievements` is visible by default.
-  // Gating layout-toggle-only cards on that fallback flashed them in for
-  // the load window and then retracted them for any user who had turned
-  // the widget OFF (their real layout arriving after first paint). The
-  // data-driven tiles tolerate the fallback because they also gate on a
-  // data floor; the achievements + recent-workouts cards have no floor,
-  // so wait for the real layout before committing them.
-  const layoutResolved = layoutData != null;
-  // v1.4.15 — recent unlocks dashboard surface. The card itself
-  // self-handles the loading skeleton + empty state (CTA → /achievements),
-  // so we only need the layout-toggle gate here. No data-floor check (the
-  // empty card is intentional — the maintainer wants the user to discover
-  // the feature).
-  const showAchievementsCard = layoutResolved && isChartVisible("achievements");
-  // v1.4.32 — recent workouts dashboard tile. Self-gates on the
-  // workouts query response so we only need the layout toggle here;
-  // the tile renders an Apple-Health-onboarding hint when empty. Same
-  // layout-resolved gate as the achievements card — default-visible with
-  // no data floor, so it would otherwise flash in then retract for a user
-  // who hid it.
-  const showRecentWorkoutsTile =
-    layoutResolved &&
-    isChartVisible("recentWorkouts") &&
-    user?.modules?.workouts !== false;
-
-  // v1.16.0 — shared reveal gate for the chart row. Every data-backed
-  // chart mounts as soon as its visibility gate flips (so the per-chart
-  // queries fan out in parallel), but the cells hold their layout-stable
-  // skeletons until EVERY gated chart reported its data settled — or the
-  // 2 s timeout fires so one slow widget cannot block the row (see
-  // `chart-reveal.tsx`). Pre-fix the cheap `/api/mood/analytics` read
-  // made the mood chart paint first and the measurement charts trickle
-  // in one after another. The id list mirrors the `charts[]` entry ids
-  // below; the achievements + recent-workouts cards stay outside the
-  // gate (they self-skeleton and carry no chart-shaped footprint).
-  const revealChartIds: string[] = [];
-  if (showWeightChart) {
-    revealChartIds.push("weight-chart");
-    if (user?.heightCm) revealChartIds.push("bmi-chart");
-  }
-  if (showBpCharts) revealChartIds.push("bp-chart");
-  if (showPulseChart) revealChartIds.push("pulse-chart");
-  if (showBodyFatChart) revealChartIds.push("bodyFat-chart");
-  if (showMoodChart) revealChartIds.push("mood-chart");
-  if (showSleepChart) revealChartIds.push("sleep-chart");
-  if (showStepsChart) revealChartIds.push("steps-chart");
-  if (showMedicationsCard) revealChartIds.push("medications");
+  // Every data-backed chart mounts as soon as its gate flips (so the chart
+  // reads fan out in parallel), but the cells hold their skeletons until
+  // every gated chart reported its data settled, or the reveal timeout fired
+  // (see `chart-reveal.tsx`), so the row swaps in one frame.
+  const chartTiles = visibleChartTiles(tileContext);
   const { revealed: chartsRevealed, markReady: markChartReady } =
-    useDashboardChartReveal(revealChartIds);
-
-  // Glucose widget — visible iff layout enables it AND at least one reading exists.
-  // Glucose has no separate chart slot today, so the tile flag is the
-  // single source of truth for it.
-  const glucoseWidgetVisible = isTileVisible("glucose");
-  const displayGlucoseUnit = resolveGlucoseUnit(user?.glucoseUnit ?? null);
-  const glucoseByContext = data?.glucoseByContext ?? {};
-  // #943 — eligibility comes from `resolveGlucoseTiles`, which walks the
-  // untagged bucket alongside the four named contexts. The gate used to be
-  // an inline filter over the named contexts only, so an account whose
-  // source never writes a meal-time tag saw nothing.
-  const glucoseTiles = resolveGlucoseTiles(glucoseByContext);
-  const showGlucoseCards = glucoseWidgetVisible && glucoseTiles.length > 0;
-  // v1.18.6 — band / target math is computed SERVER-side in the snapshot
-  // DTO (`targetBands`) so the client stops recomputing it from the
-  // profile (audit finding #3). When snapshot mode is on, read the
-  // resolved numbers straight from `snapshotQuery.data.targetBands`; the
-  // `!snapshotEnabled` branch keeps the legacy client-compute path so the
-  // non-snapshot fallback still works. The two produce byte-identical
-  // numbers (the server calls the SAME helpers — see
-  // `buildTargetBands` + its parity test).
-  const serverBands = snapshotEnabled
-    ? snapshotQuery.data?.targetBands
-    : undefined;
-  // Resolve the bands through the SAME `buildDashboardBands` helper the
-  // server snapshot uses, so the snapshot path and the client fallback
-  // are byte-identical by construction (no second inline copy of the
-  // band math to drift). Always compute the client copy from the profile
-  // — it is pure + cheap — so a still-loading snapshot frame keeps real
-  // bands rather than blank charts; `serverBands ?? clientBands` then
-  // prefers the authoritative server numbers the moment they arrive.
-  // Inputs only change with profile facts, so memoise the band math — it
-  // ran on every dashboard render (and got discarded by `serverBands ??`
-  // in the snapshot steady state) before this. Keyed on the `user` object
-  // identity so the React Compiler can preserve the memo (a narrower
-  // property list trips `preserve-manual-memoization`).
-  // v1.34 — the user's own targets ride the same memo. In snapshot mode
-  // `thresholdsData` is never fetched, so the client copy falls back to the
-  // default bands for the frames before `serverBands` lands — exactly
-  // as it already did for every other profile-derived number.
-  // v1.36.x — the profile this fallback reads is the CALLER's, and under a
-  // switch the caller is the delegate. `viewerBandProfile` is where that is
-  // decided and argued; the effect here is that a delegated visit draws no
-  // client-side band at all and waits for the snapshot's, which resolve
-  // against the record.
-  const inSharedRecord = user?.accountAccess?.active != null;
-  const clientBandProfile = useMemo(
-    () =>
-      viewerBandProfile(
-        {
-          dateOfBirth: user?.dateOfBirth ? new Date(user.dateOfBirth) : null,
-          gender: toProfileSex(user?.gender),
-          heightCm: user?.heightCm ?? null,
-          thresholdsJson: thresholdsData?.overrides ?? null,
-        },
-        inSharedRecord,
-      ),
-    [user, thresholdsData, inSharedRecord],
-  );
-  const clientBands = useMemo(
-    () => buildDashboardBands(clientBandProfile),
-    [clientBandProfile],
-  );
-  const bands = serverBands ?? clientBands;
-  // v1.39 — which way a weight change counts as progress, judged against the
-  // stored target. The snapshot carries the server's answer; the
-  // snapshot-disabled fallback asks the same resolver from the same profile
-  // the band fallback above reads, so the two paths cannot disagree.
-  const weightTrend =
-    (snapshotEnabled ? snapshotQuery.data?.tiles.weightTrend : undefined) ??
-    resolveWeightTrend(
-      resolveWeightTargetOverride(clientBandProfile.thresholdsJson),
-      weightTrendReferenceKg(w),
-    );
-  // v1.43 — every other tile's direction comes resolved from the server
-  // (`tiles.directions`, against the record's own targets and profile). The
-  // snapshot-disabled path has no resolved answer and renders neutral rather
-  // than guessing a polarity.
-  const tileDirections = snapshotEnabled
-    ? snapshotQuery.data?.tiles.directions
-    : undefined;
-  const directionOf = (key: string): TrendDirectionSentiment =>
-    tileDirections?.[key]?.direction ?? "neutral";
-  const bpTargets = bands.bpTargets;
-  const weightRange = bands.weightRange;
-  // The range hint tooltip prints its band bounds in the display unit, so scale
-  // the kg thresholds by the weight factor (offset-free). The colour-classing
-  // below stays in canonical kg — it compares a canonical avg against the
-  // canonical range, so both sides remain in the same unit.
-  const weightHintRange = weightRange
-    ? {
-        greenMin: unitDisplay.toDisplay("WEIGHT", weightRange.greenMin),
-        greenMax: unitDisplay.toDisplay("WEIGHT", weightRange.greenMax),
-        orangeMin: unitDisplay.toDisplay("WEIGHT", weightRange.orangeMin),
-        orangeMax: unitDisplay.toDisplay("WEIGHT", weightRange.orangeMax),
-      }
-    : weightRange;
-  const weightBands = bands.weightBands ?? undefined;
-  // Scale the kg chart bands into the display unit so the shaded zone tracks
-  // the converted line (factor-only; weight has no offset). Metric = identity.
-  const weightDisplayBands =
-    weightBands && unitDisplay.preference === "imperial"
-      ? weightBands.map((band) => ({
-          ...band,
-          min: unitDisplay.toDisplay("WEIGHT", band.min),
-          max: unitDisplay.toDisplay("WEIGHT", band.max),
-        }))
-      : weightBands;
-  const bpTargetZones = bpTargets
-    ? [
-        {
-          min: bpTargets.sysLow,
-          max: bpTargets.sysHigh,
-          color: "var(--chart-3)",
-          opacity: 0.21,
-          label: t("charts.systolic"),
-          textColor: "var(--chart-3)",
-          lineOpacity: 0.24,
-        },
-        {
-          min: bpTargets.diaLow,
-          max: bpTargets.diaHigh,
-          color: "var(--chart-4)",
-          opacity: 0.21,
-          label: t("charts.diastolic"),
-          textColor: "var(--chart-4)",
-          lineOpacity: 0.24,
-        },
-      ]
-    : undefined;
-  const bpSysRange = bands.bpSysRange;
-  const bpDiaRange = bands.bpDiaRange;
-  const pulseDisplayRange = bands.pulseDisplayRange;
-  const pulseBands = bands.pulseBands;
-  const bodyFatBands = bands.bodyFatBands;
-
-  // v1.18.6 — ONE batched fetch for every visible non-sleep chart series
-  // (audit finding #2). Pre-fix, each `<HealthChart>` fired its own
-  // `/api/measurements?...&source=rollup` round-trip, so a 6-8 chart
-  // dashboard issued 6-8 parallel requests on load. The batched endpoint
-  // returns all of them in one response; each chart reads its slice via
-  // `preloadedSeries` instead of self-fetching. Sleep stays on its
-  // dedicated per-night `/series` adapter (not rollup-backed), so it is
-  // never included here and the sleep chart keeps its own fetch.
-  //
-  // The window matches the charts' default 30-point view (the dashboard
-  // mounts them with no range-tab interaction); a chart whose window
-  // widens past this slice (range tab / comparison) drops batched
-  // coverage and self-fetches for the new window — see `usePreloaded`.
-  //
-  // v1.30.9 — the type-set derivation is the shared `deriveBatchChartTypes`,
-  // the SAME function the RSC prefetch runs over the SAME snapshot payload
-  // (`layout` + `data.summaries` in snapshot mode ARE the snapshot fields the
-  // server dehydrated). One implementation → the CSV, and therefore the
-  // batched-series cache key, is byte-identical on both sides by construction.
-  const batchChartTypes = deriveBatchChartTypes(layout, data?.summaries);
-
-  // Stable day-bucketed window so the cache key is stable across the day
-  // (mirrors the chart's own ISO-window stability contract). Computed
-  // once per mount via lazy state so a re-render never re-keys the batch.
-  //
-  // v1.30.9 — the server-computed PROFILE-tz window wins when present (it
-  // rides the serialized RSC payload, so SSR and the first hydration render
-  // see the identical object → the `chartSeriesBatch` key matches the key the
-  // RSC dehydrated under, zero hydration seam). The browser-local fallback
-  // stands for the prefetch-off / legacy / fail-soft paths where no prop
-  // arrives. Lazy `useState` with a prop-derived initial value is
-  // deterministic across the SSR/CSR pair.
-  const [batchWindow] = useState(
-    () => batchWindowProp ?? computeLocalBatchWindow(),
-  );
-
-  const { data: batchedSeries } = useQuery({
-    queryKey: queryKeys.chartSeriesBatch(
-      batchChartTypes.join(","),
-      batchWindow.from,
-      batchWindow.to,
-    ),
-    enabled: isAuthenticated && mounted && batchChartTypes.length > 0,
-    staleTime: 60_000,
-    gcTime: 5 * 60_000,
-    refetchOnWindowFocus: false,
-    queryFn: async () => {
-      const sp = new URLSearchParams();
-      sp.set("types", batchChartTypes.join(","));
-      sp.set("from", batchWindow.from);
-      sp.set("to", batchWindow.to);
-      const res = await apiGet<{
-        series: Record<
-          string,
-          Array<{
-            value: number;
-            measuredAt: string;
-            count?: number;
-            minValue?: number | null;
-            maxValue?: number | null;
-          }>
-        >;
-      }>(`/api/measurements/series-batch?${sp}`);
-      return res.series;
-    },
+    useDashboardChartReveal(revealChartIds(chartTiles));
+  const stripEntries = buildStripEntries(tileContext);
+  const chartEntries = buildChartEntries(chartTiles, {
+    ...tileContext,
+    preloadedSeries: dashboard.preloadedSeries,
+    markChartReady,
   });
 
-  // Per-chart slices in the chart's `MeasurementApiRow` shape. The batched
-  // rows already carry `measuredAt` / `value` / `count` / min / max — the
-  // exact fields the chart's bucketing loop reads.
-  const preloadedSeries = batchedSeries;
-  // v1.7.0 — the primary data source differs by flag. In snapshot
-  // mode `analyticsSlimQuery` is `enabled: false`, and a disabled
-  // TanStack query reports `fetchStatus: "idle"` → `isLoading` is
-  // always `false`. Gating the skeleton on the slim query then
-  // never fires under snapshot mode, so the empty-state branch
-  // below flashes for the whole snapshot fetch. Key the loading
-  // flag off whichever query is actually driving the tiles.
-  // v1.16.4 — `!mounted` pins the SSR pass AND the hydration
-  // render to the skeleton branch. Server-side the data queries
-  // are `enabled: false` (no auth) → `isLoading: false`, which
-  // used to select the empty state; a late-hydrating boundary
-  // then saw `isAuthenticated` already resolved and rendered the
-  // skeleton instead — React #418. See `useMounted`.
-  // v1.16.9 — hoisted out of the strip IIFE: the hero band below
-  // shares the same gate so its skeleton and the tile silhouettes
-  // swap to content in the same render pass.
-  const primaryLoading =
-    !mounted ||
-    (snapshotEnabled ? snapshotQuery.isLoading : analyticsSlimQuery.isLoading);
-
   return (
     <div
       className="space-y-6"
@@ -958,47 +121,28 @@ export default function DashboardPageClient({
 
       {/* Records other people share with you are reached from the account
           switcher in the top bar and the sidebar, not from a card here. The
-          dashboard is this account's own day; a permanent block about other
-          people's records sat above it and pushed it down. */}
+          dashboard is this account's own day. */}
 
-      {/* The Today hero, promoted above the tile strip (MARC sign-off
-          decision 1). Renders the S1 daily digest: the day's read, the
-          honest score/freshness face, and the worth-a-look rail. Shimmer
-          skeleton while the cached digest loads; a genuinely empty account
-          degrades to nothing (the hero itself returns null). A FAILED fetch
-          is a distinct state from that honest empty degrade — it renders
-          `<QueryErrorCard>` with a retry action rather than silently
-          falling through to nothing. The dense tile grid + charts below
-          are untouched. */}
       {
-        // v1.30.9 — DATA-FIRST gate so the SSR pass paints the POPULATED hero
-        // (the LCP element) instead of a skeleton. This is hydration-safe ONLY
-        // because of a bound invariant: the digest is server-DEHYDRATED
-        // (`page.tsx` prefetch → `setQueryData(queryKeys.dailyDigest(), …)`),
-        // so `digestQuery.data` is present on BOTH the SSR pass AND the first
-        // hydration render (HydrationBoundary hydrates synchronously before
-        // first render; `enabled:false` only gates FETCHING, not cached-data
-        // reads) — both sides render identical HTML, no React #418.
-        //
-        // The one divergence class the old `!mounted` gate guarded against —
-        // a client-only IndexedDB-restored cache painting the hero while the
-        // server rendered a skeleton — CANNOT bite here: `["daily", …]` is NOT
-        // in the persist allowlist (`PERSIST_ALLOWLIST_HEADS` in
-        // `@/lib/pwa/query-persister` — `dashboard` / `chart-data` + the exact
-        // `["user","dashboardWidgets"]` tuple only), so the digest never
-        // rehydrates from disk. The error / empty branches stay reachable only
-        // post-mount. DO NOT add `["daily", …]` to that allowlist, or render
-        // the hero from any client-only source, without revisiting this gate.
-        // v1.42 — the top card can be switched off in the layout settings;
-        // only an explicit `false` hides it, and with it its skeleton and
-        // its error card.
+        // The Today hero above the tile strip: the day's read, the score and
+        // freshness face, and the worth-a-look rail. DATA-FIRST, so the SSR
+        // pass paints the populated hero (the LCP element). That is
+        // hydration-safe ONLY because the digest is server-dehydrated
+        // (`page.tsx` prefetch), so `digestQuery.data` is present on both the
+        // SSR pass and the first hydration render, and because `["daily", …]`
+        // is NOT in the persist allowlist (`PERSIST_ALLOWLIST_HEADS` in
+        // `@/lib/pwa/query-persister`), so it never rehydrates from disk. Do
+        // not add it there, or render the hero from any client-only source,
+        // without revisiting this gate. A failed read is an error card with
+        // retry, distinct from the honest empty degrade (the hero returns
+        // null). The card can be switched off in the layout settings; only an
+        // explicit `false` hides it, its skeleton and its error card.
         layout.todayCardVisible === false ? null : digestQuery.data ? (
           <TodayHero
             digest={digestQuery.data}
             renderFilteredAllClear={renderFilteredHeroAllClear}
-            // Server-persisted hero choice — rides the same resolved
-            // layout as the widget visibility below, so SSR and
-            // hydration agree.
+            // The server-persisted hero choice rides the same resolved layout
+            // as the widget visibility, so SSR and hydration agree.
             primaryContent={layout.hero ?? "score"}
           />
         ) : !mounted || digestQuery.isLoading ? (
@@ -1011,1313 +155,34 @@ export default function DashboardPageClient({
         ) : null
       }
 
-      {/* v1.42 (#615) — a quiet note about the newest stored environment
-          day (high pollen, a hot night, very poor air). Renders nothing
-          unless one of those applies, and nothing before mount (the module
-          map and the overview are client reads). Not a layout widget. */}
+      {/* A quiet note about the newest stored environment day (high pollen, a
+          hot night, very poor air). Nothing unless one applies, and nothing
+          before mount (the module map and the overview are client reads).
+          Not a layout widget. */}
       {mounted && <EnvironmentChip />}
 
-      {/* v1.18.6 — the spotlight tour launcher moved to the app-shell
-       * (`AuthShell`) so its overlay survives the cross-page
-       * `router.push`es the module tour makes. The dashboard no longer
-       * mounts it. */}
-
-      {/* Quick Entry Sheets — bottom-sheet on `<md`, centred Dialog on `md+`. */}
+      {/* Bottom sheet below `md`, centred dialog from `md` up. */}
       <QuickEntrySheets
         open={quickEntryDialog}
         onClose={() => setQuickEntryDialog(null)}
       />
 
-      {(() => {
-        type TrendEntry = { id: string; order: number; node: React.ReactNode };
-        const trendCards: TrendEntry[] = [];
+      <DashboardTiles
+        stripEntries={stripEntries}
+        chartEntries={chartEntries}
+        chartsRevealed={chartsRevealed}
+        layout={layout}
+        primaryLoading={primaryLoading}
+        mounted={mounted}
+        user={user}
+        canAddMeasurement={canAddMeasurement}
+        onAddMeasurement={() => setQuickEntryDialog("measurement")}
+      />
 
-        if (showWeightTile) {
-          trendCards.push({
-            id: "weight",
-            order: widgetOrder("weight"),
-            node: (
-              <TrendCard
-                key="weight"
-                label={t("dashboard.weightShort")}
-                latest={td("WEIGHT", w?.latest)}
-                unit={unitDisplay.unitFor("WEIGHT")}
-                avg7={td("WEIGHT", w?.avg7)}
-                avg30={td("WEIGHT", w?.avg30)}
-                avg7ColorClass={getRangeColorClass(w?.avg7, {
-                  range: weightRange,
-                })}
-                avg30ColorClass={getRangeColorClass(w?.avg30, {
-                  range: weightRange,
-                })}
-                avg7Hint={getRangeHint(
-                  unitDisplay.unitFor("WEIGHT"),
-                  { range: weightHintRange },
-                  t,
-                  fmt.number,
-                )}
-                avg30Hint={getRangeHint(
-                  unitDisplay.unitFor("WEIGHT"),
-                  { range: weightHintRange },
-                  t,
-                  fmt.number,
-                )}
-                slope30={w?.slope30 ?? null}
-                trend7Delta={tdd("WEIGHT", summaryToTrend7Delta(w))}
-                icon={Activity}
-                directionSentiment={weightTrend.direction}
-                compareBaseline={compareBaseline}
-                compareDelta={tdd("WEIGHT", tileCompareDelta(w))}
-                staleDays={tileStaleDays("WEIGHT")}
-              />
-            ),
-          });
-        }
-        if (showBpTiles) {
-          // BP is conceptually one signal but visually two tiles (sys + dia)
-          // so the user sees both numbers side by side at the same size as
-          // every other tile in the strip. v1.4.3 first attempted a
-          // combined tile with `secondary` values — the maintainer preferred two
-          // distinct tiles with consistent symmetric widths.
-          trendCards.push({
-            id: "bp-sys",
-            order: widgetOrder("bp"),
-            node: (
-              <TrendCard
-                key="bp-sys"
-                fractionDigits={0}
-                label={t("dashboard.bloodPressureSysShort")}
-                latest={sys?.latest ?? null}
-                unit="mmHg"
-                avg7={sys?.avg7 ?? null}
-                avg30={sys?.avg30 ?? null}
-                avg7ColorClass={getRangeColorClass(sys?.avg7, {
-                  range: bpSysRange,
-                })}
-                avg30ColorClass={getRangeColorClass(sys?.avg30, {
-                  range: bpSysRange,
-                })}
-                avg7Hint={getRangeHint(
-                  "mmHg",
-                  { range: bpSysRange },
-                  t,
-                  fmt.number,
-                )}
-                avg30Hint={getRangeHint(
-                  "mmHg",
-                  { range: bpSysRange },
-                  t,
-                  fmt.number,
-                )}
-                slope30={sys?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(sys)}
-                icon={Heart}
-                directionSentiment={directionOf("BLOOD_PRESSURE_SYS")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(sys)}
-                staleDays={tileStaleDays("BLOOD_PRESSURE_SYS")}
-              />
-            ),
-          });
-          trendCards.push({
-            id: "bp-dia",
-            // Sub-order keeps dia immediately after sys; the +0.001 leaves
-            // headroom for any future BP-related tile slotted between them.
-            order: widgetOrder("bp") + 0.001,
-            node: (
-              <TrendCard
-                key="bp-dia"
-                fractionDigits={0}
-                label={t("dashboard.bloodPressureDiaShort")}
-                latest={dia?.latest ?? null}
-                unit="mmHg"
-                avg7={dia?.avg7 ?? null}
-                avg30={dia?.avg30 ?? null}
-                avg7ColorClass={getRangeColorClass(dia?.avg7, {
-                  range: bpDiaRange,
-                })}
-                avg30ColorClass={getRangeColorClass(dia?.avg30, {
-                  range: bpDiaRange,
-                })}
-                avg7Hint={getRangeHint(
-                  "mmHg",
-                  { range: bpDiaRange },
-                  t,
-                  fmt.number,
-                )}
-                avg30Hint={getRangeHint(
-                  "mmHg",
-                  { range: bpDiaRange },
-                  t,
-                  fmt.number,
-                )}
-                slope30={dia?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(dia)}
-                icon={Heart}
-                directionSentiment={directionOf("BLOOD_PRESSURE_DIA")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(dia)}
-                staleDays={tileStaleDays("BLOOD_PRESSURE_DIA")}
-              />
-            ),
-          });
-        }
-        if (showPulseTile) {
-          trendCards.push({
-            id: "pulse",
-            order: widgetOrder("pulse"),
-            node: (
-              <TrendCard
-                key="pulse"
-                fractionDigits={0}
-                label={pulseLabel}
-                latest={pulseTileSummary?.latest ?? null}
-                unit="bpm"
-                avg7={pulseTileSummary?.avg7 ?? null}
-                avg30={pulseTileSummary?.avg30 ?? null}
-                avg7ColorClass={getRangeColorClass(pulseTileSummary?.avg7, {
-                  range: hasRestingHr ? pulseDisplayRange : null,
-                })}
-                avg30ColorClass={getRangeColorClass(pulseTileSummary?.avg30, {
-                  range: hasRestingHr ? pulseDisplayRange : null,
-                })}
-                avg7Hint={getRangeHint(
-                  "bpm",
-                  { range: hasRestingHr ? pulseDisplayRange : null },
-                  t,
-                  fmt.number,
-                )}
-                avg30Hint={getRangeHint(
-                  "bpm",
-                  { range: hasRestingHr ? pulseDisplayRange : null },
-                  t,
-                  fmt.number,
-                )}
-                slope30={pulseTileSummary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(pulseTileSummary)}
-                icon={TrendingUp}
-                directionSentiment={directionOf(
-                  hasRestingHr ? "RESTING_HEART_RATE" : "PULSE",
-                )}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(pulseTileSummary)}
-                staleDays={tileStaleDays(
-                  hasRestingHr ? "RESTING_HEART_RATE" : "PULSE",
-                )}
-              />
-            ),
-          });
-        }
-        if (showBodyFatTile) {
-          trendCards.push({
-            id: "bodyFat",
-            order: widgetOrder("bodyFat"),
-            node: (
-              <TrendCard
-                key="bodyFat"
-                label={t("dashboard.bodyFatShort")}
-                latest={bf?.latest ?? null}
-                unit="%"
-                avg7={bf?.avg7 ?? null}
-                avg30={bf?.avg30 ?? null}
-                slope30={bf?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(bf)}
-                icon={Percent}
-                directionSentiment={directionOf("BODY_FAT")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(bf)}
-                staleDays={tileStaleDays("BODY_FAT")}
-              />
-            ),
-          });
-        }
-        if (showMoodTile) {
-          trendCards.push({
-            id: "mood",
-            order: widgetOrder("mood"),
-            node: (
-              <TrendCard
-                key="mood"
-                label={t("dashboard.moodShort")}
-                latest={moodSummary?.latest ?? null}
-                unit="/ 5"
-                avg7={moodSummary?.avg7 ?? null}
-                avg30={moodSummary?.avg30 ?? null}
-                slope30={moodSummary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(moodSummary)}
-                icon={Smile}
-                directionSentiment={directionOf("MOOD")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(moodSummary)}
-              />
-            ),
-          });
-        }
-        if (showSleepTile) {
-          trendCards.push({
-            id: "sleep",
-            order: widgetOrder("sleep"),
-            node: (
-              <TrendCard
-                key="sleep"
-                label={t("dashboard.sleepShort") ?? "Sleep"}
-                latest={sleepSummaryHours?.latest ?? null}
-                unit="h"
-                avg7={sleepSummaryHours?.avg7 ?? null}
-                avg30={sleepSummaryHours?.avg30 ?? null}
-                slope30={sleepSummaryHours?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(sleepSummaryHours)}
-                icon={Moon}
-                directionSentiment={directionOf("SLEEP_DURATION")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(sleepSummaryHours)}
-                staleDays={tileStaleDays("SLEEP_DURATION")}
-                // v1.28.x — discreet "sources disagree" marker next to the
-                // headline when two writers reported clearly different
-                // totals for the latest night (server-computed,
-                // observational; same marker as the hypnogram). Null on
-                // the ordinary path → no layout change.
-                valueAdornment={
-                  data?.sleepSourceDiscrepancy ? (
-                    <SleepSourceDiscrepancyMarker
-                      discrepancy={data.sleepSourceDiscrepancy}
-                    />
-                  ) : null
-                }
-              />
-            ),
-          });
-        }
-        if (showStepsTile) {
-          trendCards.push({
-            id: "steps",
-            order: widgetOrder("steps"),
-            node: (
-              <TrendCard
-                key="steps"
-                fractionDigits={0}
-                label={t("dashboard.stepsShort") ?? "Steps"}
-                latest={stepsSummary?.latest ?? null}
-                unit=""
-                avg7={stepsSummary?.avg7 ?? null}
-                avg30={stepsSummary?.avg30 ?? null}
-                slope30={stepsSummary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(stepsSummary)}
-                icon={Footprints}
-                directionSentiment={directionOf("ACTIVITY_STEPS")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(stepsSummary)}
-                staleDays={tileStaleDays("ACTIVITY_STEPS")}
-              />
-            ),
-          });
-        }
-        // v1.4.25 — VO2 max trend tile. Self-gates on the
-        // `vo2Max` widget being enabled (Settings → Dashboard) AND
-        // the analytics summary carrying at least one sample. Higher
-        // VO2 max is better, so the directionSentiment is up-good and
-        // an upward 30-day slope renders the green arrow. Unit
-        // matches the canonical DB unit in
-        // src/lib/validations/measurement.ts.
-        if (showVo2Tile) {
-          trendCards.push({
-            id: "vo2Max",
-            order: widgetOrder("vo2Max"),
-            node: (
-              <TrendCard
-                key="vo2Max"
-                label={t("dashboard.vo2MaxShort") ?? "VO₂ max"}
-                latest={vo2Summary?.latest ?? null}
-                unit={t("dashboard.vo2MaxUnit") ?? "mL/(kg·min)"}
-                avg7={vo2Summary?.avg7 ?? null}
-                avg30={vo2Summary?.avg30 ?? null}
-                slope30={vo2Summary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(vo2Summary)}
-                icon={Gauge}
-                directionSentiment={directionOf("VO2_MAX")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(vo2Summary)}
-                staleDays={tileStaleDays("VO2_MAX")}
-              />
-            ),
-          });
-        }
-        // v1.28.52 — vitals strip tiles (HRV / SpO2 / respiratory rate /
-        // wrist temperature). Each self-gates on the layout toggle AND a
-        // non-empty summary (see the `showXTile` gates above), links to its
-        // /insights detail page, and forwards the per-type freshness caption.
-        // Units + sentiments mirror the matching /insights sub-page:
-        // higher HRV and higher SpO2 are better (up-good); respiratory rate
-        // and wrist temperature read as neutral (stability is the signal).
-        if (showHrvTile) {
-          trendCards.push({
-            id: "hrv",
-            order: widgetOrder("hrv"),
-            node: (
-              <TrendCard
-                key="hrv"
-                fractionDigits={0}
-                // Name the measure when the RMSSD series is the one on show.
-                // Without it a ring / strap reading (typically 20-60 ms) sits
-                // under the same label as an SDNN one and reads as a collapse
-                // rather than a different measure.
-                //
-                // Each series gets its OWN key, never a base label with the
-                // measure concatenated on. The tile label renders truncated,
-                // uppercase and on one line, so an appended marker is the
-                // first thing dropped in the longer locales — exactly the
-                // part a reader needs. `typeHrvRmssd` is translated in all
-                // seven locales and carries the measure inside the label.
-                label={t(hrvLabelKey)}
-                latest={hrvSummary?.latest ?? null}
-                unit="ms"
-                avg7={hrvSummary?.avg7 ?? null}
-                avg30={hrvSummary?.avg30 ?? null}
-                slope30={hrvSummary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(hrvSummary)}
-                icon={HeartPulse}
-                directionSentiment={directionOf(hrvType)}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(hrvSummary)}
-                // The type that actually backs the tile — reading freshness
-                // off SDNN while showing RMSSD would caption a live tile as
-                // permanently stale.
-                staleDays={tileStaleDays(hrvType)}
-              />
-            ),
-          });
-        }
-        if (showSpo2Tile) {
-          trendCards.push({
-            id: "oxygenSaturation",
-            order: widgetOrder("oxygenSaturation"),
-            node: (
-              <TrendCard
-                key="oxygenSaturation"
-                label={t("measurements.typeOxygenSaturation")}
-                latest={spo2Summary?.latest ?? null}
-                unit="%"
-                avg7={spo2Summary?.avg7 ?? null}
-                avg30={spo2Summary?.avg30 ?? null}
-                slope30={spo2Summary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(spo2Summary)}
-                icon={Droplets}
-                directionSentiment={directionOf("OXYGEN_SATURATION")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(spo2Summary)}
-                staleDays={tileStaleDays("OXYGEN_SATURATION")}
-              />
-            ),
-          });
-        }
-        if (showRespRateTile) {
-          trendCards.push({
-            id: "respiratoryRate",
-            order: widgetOrder("respiratoryRate"),
-            node: (
-              <TrendCard
-                key="respiratoryRate"
-                label={t("measurements.typeRespiratoryRate")}
-                latest={respRateSummary?.latest ?? null}
-                unit={t("insights.units.respiratoryRate")}
-                avg7={respRateSummary?.avg7 ?? null}
-                avg30={respRateSummary?.avg30 ?? null}
-                slope30={respRateSummary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(respRateSummary)}
-                icon={Wind}
-                directionSentiment={directionOf("RESPIRATORY_RATE")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(respRateSummary)}
-                staleDays={tileStaleDays("RESPIRATORY_RATE")}
-              />
-            ),
-          });
-        }
-        if (showWristTempTile) {
-          trendCards.push({
-            id: "wristTemperature",
-            order: widgetOrder("wristTemperature"),
-            node: (
-              <TrendCard
-                key="wristTemperature"
-                label={t("measurements.typeWristTemperature")}
-                latest={td("WRIST_TEMPERATURE", wristTempSummary?.latest)}
-                unit={unitDisplay.unitFor("WRIST_TEMPERATURE")}
-                avg7={td("WRIST_TEMPERATURE", wristTempSummary?.avg7)}
-                avg30={td("WRIST_TEMPERATURE", wristTempSummary?.avg30)}
-                slope30={wristTempSummary?.slope30 ?? null}
-                trend7Delta={tdd(
-                  "WRIST_TEMPERATURE",
-                  summaryToTrend7Delta(wristTempSummary),
-                )}
-                icon={Thermometer}
-                directionSentiment={directionOf("WRIST_TEMPERATURE")}
-                compareBaseline={compareBaseline}
-                compareDelta={tdd(
-                  "WRIST_TEMPERATURE",
-                  tileCompareDelta(wristTempSummary),
-                )}
-                staleDays={tileStaleDays("WRIST_TEMPERATURE")}
-              />
-            ),
-          });
-        }
-        // v1.28.52 — body-composition strip tiles (muscle mass / total body
-        // water / bone mass). Higher muscle mass reads as up-good; body water
-        // and bone mass are neutral (stability, not direction, is the signal).
-        if (showMuscleMassTile) {
-          trendCards.push({
-            id: "muscleMass",
-            order: widgetOrder("muscleMass"),
-            node: (
-              <TrendCard
-                key="muscleMass"
-                label={t("measurements.typeMuscleMass")}
-                latest={td("MUSCLE_MASS", muscleMassSummary?.latest)}
-                unit={unitDisplay.unitFor("MUSCLE_MASS")}
-                avg7={td("MUSCLE_MASS", muscleMassSummary?.avg7)}
-                avg30={td("MUSCLE_MASS", muscleMassSummary?.avg30)}
-                slope30={muscleMassSummary?.slope30 ?? null}
-                trend7Delta={tdd(
-                  "MUSCLE_MASS",
-                  summaryToTrend7Delta(muscleMassSummary),
-                )}
-                icon={Dumbbell}
-                directionSentiment={directionOf("MUSCLE_MASS")}
-                compareBaseline={compareBaseline}
-                compareDelta={tdd(
-                  "MUSCLE_MASS",
-                  tileCompareDelta(muscleMassSummary),
-                )}
-                staleDays={tileStaleDays("MUSCLE_MASS")}
-              />
-            ),
-          });
-        }
-        if (showBodyWaterTile) {
-          trendCards.push({
-            id: "totalBodyWater",
-            order: widgetOrder("totalBodyWater"),
-            node: (
-              <TrendCard
-                key="totalBodyWater"
-                label={t("measurements.typeTotalBodyWater")}
-                latest={td("TOTAL_BODY_WATER", bodyWaterSummary?.latest)}
-                unit={unitDisplay.unitFor("TOTAL_BODY_WATER")}
-                avg7={td("TOTAL_BODY_WATER", bodyWaterSummary?.avg7)}
-                avg30={td("TOTAL_BODY_WATER", bodyWaterSummary?.avg30)}
-                slope30={bodyWaterSummary?.slope30 ?? null}
-                trend7Delta={tdd(
-                  "TOTAL_BODY_WATER",
-                  summaryToTrend7Delta(bodyWaterSummary),
-                )}
-                icon={Droplet}
-                directionSentiment={directionOf("TOTAL_BODY_WATER")}
-                compareBaseline={compareBaseline}
-                compareDelta={tdd(
-                  "TOTAL_BODY_WATER",
-                  tileCompareDelta(bodyWaterSummary),
-                )}
-                staleDays={tileStaleDays("TOTAL_BODY_WATER")}
-              />
-            ),
-          });
-        }
-        if (showBoneMassTile) {
-          trendCards.push({
-            id: "boneMass",
-            order: widgetOrder("boneMass"),
-            node: (
-              <TrendCard
-                key="boneMass"
-                label={t("measurements.typeBoneMass")}
-                latest={td("BONE_MASS", boneMassSummary?.latest)}
-                unit={unitDisplay.unitFor("BONE_MASS")}
-                avg7={td("BONE_MASS", boneMassSummary?.avg7)}
-                avg30={td("BONE_MASS", boneMassSummary?.avg30)}
-                slope30={boneMassSummary?.slope30 ?? null}
-                trend7Delta={tdd(
-                  "BONE_MASS",
-                  summaryToTrend7Delta(boneMassSummary),
-                )}
-                icon={Bone}
-                directionSentiment={directionOf("BONE_MASS")}
-                compareBaseline={compareBaseline}
-                compareDelta={tdd(
-                  "BONE_MASS",
-                  tileCompareDelta(boneMassSummary),
-                )}
-                staleDays={tileStaleDays("BONE_MASS")}
-              />
-            ),
-          });
-        }
-        // v1.29 — fluid intake strip tile. Neutral sentiment: more water is
-        // not unambiguously "better" (over-hydration is a real risk), so no
-        // up/down framing — same posture as wrist temperature / body water.
-        if (showWaterIntakeTile) {
-          trendCards.push({
-            id: "waterIntake",
-            order: widgetOrder("waterIntake"),
-            node: (
-              <TrendCard
-                key="waterIntake"
-                label={t("nutrients.names.water")}
-                latest={waterIntakeSummary?.latest ?? null}
-                unit="mL"
-                avg7={waterIntakeSummary?.avg7 ?? null}
-                avg30={waterIntakeSummary?.avg30 ?? null}
-                slope30={waterIntakeSummary?.slope30 ?? null}
-                trend7Delta={summaryToTrend7Delta(waterIntakeSummary)}
-                icon={GlassWater}
-                directionSentiment={directionOf("NUTRIENT_WATER")}
-                compareBaseline={compareBaseline}
-                compareDelta={tileCompareDelta(waterIntakeSummary)}
-                staleDays={tileStaleDays("NUTRIENT_WATER")}
-              />
-            ),
-          });
-        }
-        if (showBpInTargetTile) {
-          /* v1.4.22 — feature parity with every other tile.
-             Synthesise a slope from the difference between the 7-day
-             and 30-day in-target shares: when the recent week is
-             above the recent month, the metric is improving (up-good
-             ⇒ green arrow); when below, it's slipping. The
-             trend7Delta is the same number as the arrow's underlying
-             signal, surfaced as "(+5)" next to `7d:` so the tile
-             matches the (weight / BP / pulse) call-site contract.
-             Comparison overlay routes through the same global
-             `compareBaseline` / `tileCompareDelta` pipeline as every
-             other tile; we only have a single % series for the BP
-             tile (no DataSummary) so the prior-period delta uses
-             `bpInTargetPctAllTime` as the long-arc baseline — when
-             comparison is off the field stays null. */
-          // v1.4.28 — rewrite the BD-Zielbereich tile
-          // against the shared `<TrendCard>` primitive so it matches
-          // the Weight / BP / Pulse sibling tiles exactly. The
-          // synthetic `bpSlope30 = bpTrendDelta / 30` block produced a
-          // small fractional float that the TrendCard's date-shaped
-          // formatter pipeline rendered as "1.1." — the regression the
-          // maintainer flagged in the post-v1.4.27 walk-through. The
-          // all-time aggregate moves to the Insights blood-pressure
-          // target panel which already shows the same number with more
-          // context; the dashboard tile no longer needs to carry it.
-          // `avgAllTime`
-          // also retires from the TrendCard API (this was its only
-          // consumer).
-          const bp7 = data?.bpInTargetPct7d ?? null;
-          const bp30 = data?.bpInTargetPct30d ?? null;
-          const bpPriorMonth = data?.bpInTargetPctPriorMonth ?? null;
-          const bpPriorYear = data?.bpInTargetPctPriorYear ?? null;
-          const bpTrendDelta =
-            bp7 !== null && bp30 !== null ? bp7 - bp30 : null;
-          const bpComparePrior =
-            compareBaseline === "lastMonth"
-              ? bpPriorMonth
-              : compareBaseline === "lastYear"
-                ? bpPriorYear
-                : null;
-          const bpCompareDelta =
-            compareBaseline === "none" ||
-            bp30 === null ||
-            bpComparePrior === null
-              ? null
-              : Math.round((bp30 - bpComparePrior) * 10) / 10;
-          // v1.17 — thin-data gate + dynamic span label. Below the
-          // confidence floor the tile narrates "collecting data" instead of
-          // a hard percentage, and the label names the EFFECTIVE span
-          // ("· 23 T" until ~90 days of history exist) rather than a
-          // dishonest static "· 90 T". When the count is unknown (snapshot
-          // still on the slim phase) the tile keeps the legacy 90-day label
-          // and shows whatever percentage arrived.
-          const bpCount90 = data?.bpInTargetCount90 ?? null;
-          const bpSpanDays90 = data?.bpInTargetSpanDays90 ?? null;
-          const bpSufficient =
-            bpCount90 === null || isWindowSufficient(bpCount90);
-          const bpLabel =
-            bpSpanDays90 != null
-              ? t("dashboard.bpInTargetWindowDynamic", { days: bpSpanDays90 })
-              : t("dashboard.bpInTargetWindow90");
-          trendCards.push({
-            id: "bpInTarget",
-            order: widgetOrder("bpInTarget"),
-            node: (
-              <TrendCard
-                key="bpInTarget"
-                // v1.17 — the headline is the trailing-90-day in-target
-                // rate; the label names the window so the tile never
-                // narrates an unlabelled scope. The `30T:` caption below
-                // still surfaces the 30-day figure for short-horizon context.
-                // v1.17 — span is dynamic until ~90 days of history exist.
-                label={bpLabel}
-                latest={bpSufficient ? (data?.bpInTargetPct ?? null) : null}
-                emptyHint={
-                  bpSufficient ? null : t("dashboard.bpInTargetCollecting")
-                }
-                unit="%"
-                avg7={bpSufficient ? bp7 : null}
-                avg30={bpSufficient ? bp30 : null}
-                slope30={null}
-                trend7Delta={bpSufficient ? bpTrendDelta : null}
-                icon={Target}
-                directionSentiment={directionOf("BLOOD_PRESSURE_IN_TARGET")}
-                compareBaseline={compareBaseline}
-                compareDelta={bpSufficient ? bpCompareDelta : null}
-              />
-            ),
-          });
-        }
-        if (showGlucoseCards) {
-          const glucoseOrder = widgetOrder("glucose");
-          glucoseTiles.forEach(({ bucket, labelKey, summary: s }, idx) => {
-            trendCards.push({
-              id: `glucose-${bucket}`,
-              // sub-order so all glucose cards stay in a block and order stable
-              order: glucoseOrder + idx / 1000,
-              node: (
-                <TrendCard
-                  key={`glucose-${bucket}`}
-                  label={t(labelKey)}
-                  latest={
-                    s.latest != null
-                      ? convertGlucose(s.latest, displayGlucoseUnit)
-                      : null
-                  }
-                  unit={displayGlucoseUnit}
-                  fractionDigits={glucoseFractionDigits(displayGlucoseUnit)}
-                  avg7={
-                    s.avg7 != null
-                      ? convertGlucose(s.avg7, displayGlucoseUnit)
-                      : null
-                  }
-                  avg30={
-                    s.avg30 != null
-                      ? convertGlucose(s.avg30, displayGlucoseUnit)
-                      : null
-                  }
-                  slope30={s.slope30 ?? null}
-                  icon={Droplet}
-                  staleDays={tileStaleDays("BLOOD_GLUCOSE")}
-                />
-              ),
-            });
-          });
-        }
-
-        trendCards.sort((a, b) => a.order - b.order);
-
-        type ChartEntry = {
-          id: string;
-          order: number;
-          node: React.ReactNode;
-          /**
-           * Total raw readings for this metric. <5 surfaces a contextual
-           * "First trend after 5 readings" hint underneath the chart;
-           * undefined disables the hint (e.g. medications card).
-           */
-          count?: number;
-          /**
-           * v1.16.0 — entry participates in the shared chart reveal:
-           * the cell holds its skeleton until every gated chart's data
-           * settled (or the 2 s fallback fires). Data-backed charts set
-           * this; the self-skeletoning achievements / recent-workouts
-           * cards do not.
-           */
-          revealGated?: boolean;
-        };
-        const charts: ChartEntry[] = [];
-        if (showWeightChart) {
-          charts.push({
-            id: "weight-chart",
-            order: widgetOrder("weight"),
-            count: w?.count ?? 0,
-            revealGated: true,
-            node: (
-              <HealthChartDynamic
-                key="weight-chart"
-                onDataReady={() => markChartReady("weight-chart")}
-                preloadedSeries={preloadedSeries}
-                preloadedCoverageDays={BATCH_COVERAGE_DAYS}
-                chartKey="weight"
-                types={["WEIGHT"]}
-                title={t("dashboard.weight")}
-                colors={["var(--chart-1)"]}
-                unit={unitDisplay.unitFor("WEIGHT")}
-                valueBands={weightDisplayBands}
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                valueScale={unitDisplay.transformFor("WEIGHT").factor}
-                dayLinks
-              />
-            ),
-          });
-          if (user?.heightCm) {
-            charts.push({
-              id: "bmi-chart",
-              order: widgetOrder("weight") + 0.5,
-              revealGated: true,
-              node: (
-                <HealthChartDynamic
-                  key="bmi-chart"
-                  onDataReady={() => markChartReady("bmi-chart")}
-                  preloadedSeries={preloadedSeries}
-                  preloadedCoverageDays={BATCH_COVERAGE_DAYS}
-                  chartKey="bmi"
-                  types={["WEIGHT"]}
-                  title={t("targets.bmi")}
-                  colors={["var(--dracula-yellow)"]}
-                  unit="kg/m²"
-                  valueMode="bmi"
-                  valueBands={[
-                    {
-                      min: 0,
-                      max: 17,
-                      color: "var(--destructive)",
-                      opacity: 0.16,
-                    },
-                    {
-                      min: 17,
-                      max: 18.5,
-                      color: "var(--warning)",
-                      opacity: 0.18,
-                    },
-                    {
-                      min: 18.5,
-                      max: 24.9,
-                      color: "var(--success)",
-                      opacity: 0.2,
-                    },
-                    {
-                      min: 24.9,
-                      max: 29.9,
-                      color: "var(--warning)",
-                      opacity: 0.18,
-                    },
-                    {
-                      min: 29.9,
-                      max: 120,
-                      color: "var(--destructive)",
-                      opacity: 0.16,
-                    },
-                  ]}
-                  compareBaseline={compareBaseline}
-                  dayLinks
-                />
-              ),
-            });
-          }
-        }
-        if (showBpCharts) {
-          charts.push({
-            id: "bp-chart",
-            order: widgetOrder("bp"),
-            count: Math.max(sys?.count ?? 0, dia?.count ?? 0),
-            revealGated: true,
-            node: (
-              <HealthChartDynamic
-                key="bp-chart"
-                onDataReady={() => markChartReady("bp-chart")}
-                preloadedSeries={preloadedSeries}
-                preloadedCoverageDays={BATCH_COVERAGE_DAYS}
-                chartKey="bp"
-                types={["BLOOD_PRESSURE_SYS", "BLOOD_PRESSURE_DIA"]}
-                title={t("dashboard.bloodPressure")}
-                colors={["var(--chart-3)", "var(--chart-4)"]}
-                unit="mmHg"
-                targetZones={bpTargetZones}
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showPulseChart) {
-          charts.push({
-            id: "pulse-chart",
-            order: widgetOrder("pulse"),
-            count: p?.count ?? 0,
-            revealGated: true,
-            node: (
-              <HealthChartDynamic
-                key="pulse-chart"
-                onDataReady={() => markChartReady("pulse-chart")}
-                preloadedSeries={preloadedSeries}
-                preloadedCoverageDays={BATCH_COVERAGE_DAYS}
-                chartKey="pulse"
-                // v1.15.12 — chart the RESTING series against the
-                // resting band when available; otherwise chart raw heart
-                // rate WITHOUT the resting-band overlay (it would mark
-                // expected-high workout HR as "outside target").
-                types={hasRestingHr ? ["RESTING_HEART_RATE"] : ["PULSE"]}
-                title={pulseTitle}
-                colors={["var(--success)"]}
-                unit="bpm"
-                valueBands={hasRestingHr ? pulseBands : undefined}
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showBodyFatChart) {
-          charts.push({
-            id: "bodyFat-chart",
-            order: widgetOrder("bodyFat"),
-            count: bf?.count ?? 0,
-            revealGated: true,
-            node: (
-              <HealthChartDynamic
-                key="bodyFat-chart"
-                onDataReady={() => markChartReady("bodyFat-chart")}
-                preloadedSeries={preloadedSeries}
-                preloadedCoverageDays={BATCH_COVERAGE_DAYS}
-                chartKey="bodyFat"
-                types={["BODY_FAT"]}
-                title={t("dashboard.bodyFat")}
-                colors={["var(--warning)"]}
-                unit="%"
-                valueBands={bodyFatBands}
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showMoodChart) {
-          charts.push({
-            id: "mood-chart",
-            order: widgetOrder("mood"),
-            count: moodSummary?.count ?? 0,
-            revealGated: true,
-            node: (
-              <MoodChart
-                key="mood-chart"
-                onDataReady={() => markChartReady("mood-chart")}
-                compareBaseline={compareBaseline}
-                chartKey="mood"
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showSleepChart) {
-          charts.push({
-            id: "sleep-chart",
-            order: widgetOrder("sleep"),
-            count: sleepSummary?.count ?? 0,
-            revealGated: true,
-            node: (
-              <HealthChartDynamic
-                key="sleep-chart"
-                onDataReady={() => markChartReady("sleep-chart")}
-                chartKey="sleep"
-                types={["SLEEP_DURATION"]}
-                title={t("dashboard.sleep") ?? "Sleep"}
-                colors={["var(--chart-4)"]}
-                unit="h"
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showStepsChart) {
-          charts.push({
-            id: "steps-chart",
-            order: widgetOrder("steps"),
-            count: stepsSummary?.count ?? 0,
-            revealGated: true,
-            node: (
-              <HealthChartDynamic
-                key="steps-chart"
-                onDataReady={() => markChartReady("steps-chart")}
-                preloadedSeries={preloadedSeries}
-                preloadedCoverageDays={BATCH_COVERAGE_DAYS}
-                chartKey="steps"
-                types={["ACTIVITY_STEPS"]}
-                title={t("dashboard.steps") ?? "Steps"}
-                colors={["var(--success)"]}
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showMedicationsCard) {
-          // v1.4.15: the toggle existed since v1.1 but the dashboard
-          // slot only rendered a static placeholder (icon + title), so
-          // flipping the layout switch on did nothing visible. Wire the
-          // real chart that consumes
-          // `/api/medications/intake?scope=compliance&days=N`.
-          charts.push({
-            id: "medications",
-            order: widgetOrder("medications"),
-            revealGated: true,
-            node: (
-              <MedicationComplianceChart
-                key="medications"
-                onDataReady={() => markChartReady("medications")}
-                compareBaseline={compareBaseline}
-                userTimezone={user?.timezone}
-                dayLinks
-              />
-            ),
-          });
-        }
-        if (showVorsorgeCard) {
-          // v1.18.2 — Vorsorge preventive-care summary card. Slotted via
-          // the layout `order` like medications; self-fetches its reminder
-          // list and self-skeletons, so it stays out of the reveal gate
-          // (no chart-shaped data-ready signal).
-          charts.push({
-            id: "vorsorge",
-            order: widgetOrder("vorsorge"),
-            node: <VorsorgeDashboardCard key="vorsorge" />,
-          });
-        }
-        if (showAchievementsCard) {
-          // v1.4.15 — slotted at the user's chosen position via
-          // the layout `order`. Default order from
-          // `DEFAULT_DASHBOARD_LAYOUT` puts it last (below the chart row)
-          // which matches the maintainer's brief "below the chart row".
-          charts.push({
-            id: "achievements",
-            order: widgetOrder("achievements"),
-            node: <RecentAchievementsCard key="achievements" />,
-          });
-        }
-        if (showRecentWorkoutsTile) {
-          // v1.4.32 — slotted via the same `order` mechanism. Self-gates
-          // on the workouts query response inside the tile itself.
-          charts.push({
-            id: "recentWorkouts",
-            order: widgetOrder("recentWorkouts"),
-            node: <RecentWorkoutsTile key="recentWorkouts" />,
-          });
-        }
-
-        charts.sort((a, b) => a.order - b.order);
-
-        // v1.4.43 — tile-strip skeleton during slow slim-analytics
-        // fetches.
-        //
-        // `trendCards` only fills once the slim `/api/analytics` slice
-        // resolves and reports per-type `count > 0` flags. The v1.4.39.2
-        // slim/thick split keeps the strip painting fast when slim wins,
-        // but when *both* slices lag (cache eviction, cold start) the
-        // user used to see the page header + 0 tiles + then 7 tiles
-        // appear at once 9 s later. The audit recommendation is to
-        // render a layout-stable tile silhouette keyed off the user's
-        // configured tile count so the strip's footprint is reserved
-        // during the slow window. The skeleton swaps in for the real
-        // strip the moment `analyticsSlimQuery.isLoading` flips false.
-        // v1.7.0 — count only WEB-known tiles. The stored layout now
-        // round-trips the 11 iOS-only ids (so the native client can drop
-        // its merge workarounds), but the web dashboard has no tile
-        // component for them; including them here would over-reserve the
-        // skeleton silhouette by rows that never paint.
-        // v1.16.8 — narrowed further to the tile-CAPABLE set (see
-        // `resolveConfiguredTileCount`): the old count included
-        // `medications` + `recentWorkouts` (chart-row cards with no
-        // strip tile) and undercounted `bp` (one widget id, two tiles),
-        // so the silhouettes reshuffled when the data landed.
-        const configuredTileCount = resolveConfiguredTileCount(layout);
-        // `primaryLoading` is derived once in the component body (above
-        // the return) — the hero band and this strip share the same
-        // gate so both surfaces swap in the same render pass.
-        // v1.16.8 — chart-row reservation while the snapshot is in
-        // flight. The chart visibility gates above need snapshot data
-        // (`count > 0`), so the cold chart row only carried the
-        // layout-gated medications card and then grew by ~1000 px when
-        // the snapshot landed. Reserve layout-stable ChartSkeleton
-        // cells for the charts the layout expects (minus the ones
-        // already mounted) so the page holds roughly its final
-        // footprint from first paint and the snapshot landing swaps
-        // content instead of growing the page.
-        // `mounted &&` pins the hydration render to the SSR output: the
-        // auth query is fired by the early-hydrating shell, so `user`
-        // can already carry a heightCm when this late-hydrating page
-        // boundary replays its first render — the extra BMI silhouette
-        // then mismatched the server HTML (React #418). The count may
-        // only personalise from the first client re-render.
-        const chartRowPlaceholderCount = primaryLoading
-          ? Math.max(
-              0,
-              resolveChartRowPlaceholderCount(layout, {
-                hasHeightCm: mounted && Boolean(user?.heightCm),
-              }) - charts.length,
-            )
-          : 0;
-        const { showTileStripSkeleton, showEmptyState } =
-          resolveDashboardFirstPaintGate({
-            trendCardCount: trendCards.length,
-            chartCount: charts.length,
-            configuredTileCount,
-            primaryLoading,
-          });
-
-        // v1.4.15: dashboard fully-empty state. When no tile
-        // and no chart has data the dashboard would otherwise paint a
-        // 0-px tile strip with the welcome banner above it — visually
-        // looked like a half-broken page. Render an EmptyState that
-        // re-uses the existing quick-entry dialog so the user has a
-        // single click into "Log measurement" without leaving the page.
-        // The GettingStartedChecklist above renders its own self-gated
-        // surface for very-new accounts; this empty state covers the
-        // case where the checklist has been dismissed but no data was
-        // logged afterwards.
-        //
-        // v1.4.43 — the empty-state only fires once the slim slice
-        // resolves with no tiles to show. While slim is in flight the
-        // skeleton strip below carries the layout footprint.
-        if (showEmptyState) {
-          return (
-            <EmptyState
-              icon={<Activity className="size-6" />}
-              title={t("dashboard.emptyTitle")}
-              description={t("dashboard.emptyDescription")}
-              action={
-                canAddMeasurement ? (
-                  <Button
-                    size="sm"
-                    onClick={() => setQuickEntryDialog("measurement")}
-                  >
-                    <Plus className="h-4 w-4" />
-                    {t("dashboard.emptyAddMeasurement")}
-                  </Button>
-                ) : undefined
-              }
-            />
-          );
-        }
-
-        return (
-          <>
-            {/* v1.4: dashboard tiles are *always* a single row.
-             * Maintainer-explicit (per feedback_dashboard_one_row.md): a 2-row
-             * tile strip breaks the visual hierarchy and reads like an
-             * Excel grid. Total width caps at the parent container —
-             * exactly the chart-width below. When the active tile count
-             * exceeds what fits the viewport, the strip horizontal-scrolls
-             * instead of wrapping; the user trims the set in
-             * Settings → Dashboard (`/settings/dashboard`).
-             * Each tile keeps a `min-w-[10rem]` so a single tile still
-             * looks substantial on a wide screen, and `snap-x snap-mandatory`
-             * makes the scroll feel deliberate rather than arbitrary on
-             * touch.
-             */}
-            {/* v1.4.16: hide the strip entirely when the user
-                turned off every tile. Until v1.4.15 the wrapper rendered
-                an empty grid even with zero tiles — visually a thin gap
-                the maintainer described as "awkward". Charts below still render so
-                the page is not empty; the tile-strip just goes away.
-                The constraint the maintainer named — "immer die gesamte Spalte
-                breit und immer der gleichen Höhe" — is preserved by the
-                CSS-grid `auto-fit + minmax + auto-rows-fr` track that
-                continues to give every visible tile equal width / equal
-                height for any non-zero count. */}
-            {showTileStripSkeleton && (
-              <div
-                // v1.4.43 — tile-strip skeleton mirrors the real
-                // grid track (`auto-fit minmax(min(100%,11rem),1fr)`) so
-                // the layout footprint is reserved while slim-analytics
-                // is in flight. Cards are keyed off the user's
-                // configured tile count (`configuredTileCount`) — if the
-                // user trimmed the strip to 3 tiles in Settings, the
-                // skeleton shows 3 silhouettes, not 7.
-                aria-hidden="true"
-                data-slot="dashboard-tile-strip-skeleton"
-                className={cn(
-                  "grid auto-rows-fr gap-3",
-                  "[grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))]",
-                )}
-              >
-                {/* v1.16.0 — structured silhouettes (label + headline
-                    value + sub-row, see `<TrendCardSkeleton>`) instead
-                    of the former EMPTY pulsing cards, so the first
-                    paint previews the final tile shape. Reduced motion
-                    is honoured inside the component via the Skeleton
-                    primitive's motion-reduce:animate-none. */}
-                {Array.from({ length: configuredTileCount }).map((_, idx) => (
-                  <TrendCardSkeleton key={`tile-skeleton-${idx}`} />
-                ))}
-              </div>
-            )}
-            {trendCards.length > 0 && (
-              <div
-                // v1.4.33 A3 Win 2 + F3 — collapse the bifurcated
-                // mobile-flex / desktop-grid layout into one
-                // responsive grid track. The v1.4.27 MB7 fix pinned a
-                // `flex overflow-x-auto` row at `<sm` so tiles
-                // scrolled horizontally rather than wrapping to 3-4
-                // rows on a 280 px Galaxy Fold; the v1.4.33 audit
-                // (Win 2) called the side-scroll an unwanted
-                // regression for the Pixel 5 / iPhone-13-mini
-                // viewports where two tiles per row fit naturally.
-                // One grid track for every breakpoint:
-                //
-                //   `repeat(auto-fit, minmax(min(100%, 11rem), 1fr))`
-                //
-                // - Galaxy Fold (280 px) → 1 column, tiles stretch
-                //   full width.
-                // - Pixel 5 / iPhone-13-mini (375 px) → 2 columns,
-                //   strip wraps to a second row when needed.
-                // - 1440×900 desktop → 6 columns (1440 / 220 ≈ 6.5),
-                //   widens the value column from the v1.4.27
-                //   `9rem` floor so the headline number stops
-                //   truncating to `8…` / `1.` (audit F3). 11 rem
-                //   ≈ 176 px gives every tile ~220 px including
-                //   gutter — comfortably wider than `text-3xl`
-                //   digits plus the unit + arrow.
-                // - 1920+ desktop → 8 columns, no horizontal slack.
-                //
-                // `auto-rows-fr` keeps the row height deterministic
-                // so a 7-tile run still shares one baseline across
-                // the wrap, regardless of which tile renders a
-                // callout.
-                className={cn(
-                  "grid auto-rows-fr gap-3",
-                  "[grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))]",
-                )}
-                data-slot="dashboard-tile-strip"
-                data-tour-id="dashboard-tile-strip"
-                data-tile-count={trendCards.length}
-              >
-                {trendCards.map((entry) => {
-                  /*
-                   * Per-tile `<Suspense>` boundary with a layout-stable
-                   * placeholder that mirrors the trend-card chrome. Tile
-                   * bodies are synchronous today so the fallback rarely
-                   * paints, but a future RSC hoist of any tile slot
-                   * would otherwise leave the grid track empty and
-                   * trigger CLS as the cell paints in.
-                   *
-                   * v1.16.0 — the fallback is the same structured
-                   * silhouette the tile-strip skeleton paints, so a
-                   * suspending tile slot previews the final shape
-                   * instead of an empty card.
-                   */
-                  const cell = (
-                    <Suspense fallback={<TrendCardSkeleton />}>
-                      {entry.node}
-                    </Suspense>
-                  );
-                  // A tile is no longer a dead-end: it links to its Insights
-                  // detail page (`tile-destinations.ts`, gated on the page's
-                  // module). The link fills the grid cell and paints a ring
-                  // on hover / focus so the whole tile reads as tappable.
-                  const href = dashboardTileHref(entry.id, user?.modules);
-                  return href ? (
-                    <Link
-                      key={entry.id}
-                      href={href}
-                      data-slot="dashboard-tile-link"
-                      data-tile-id={entry.id}
-                      className="group focus-visible:ring-ring/50 hover:ring-ring/30 flex min-w-0 rounded-xl transition-[box-shadow] hover:ring-2 focus-visible:ring-2 focus-visible:outline-none"
-                    >
-                      {cell}
-                    </Link>
-                  ) : (
-                    <div key={entry.id} className="flex min-w-0">
-                      {cell}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-            {charts.map((entry) => (
-              <div key={entry.id} className="space-y-2">
-                {/*
-                 * v1.4.40 — per-tile `<Suspense>` boundary so each
-                 * chart paints independently rather than the row blocking
-                 * on the slowest fetch (audit-H2 + brief C1). The
-                 * `next/dynamic({ ssr: false })` lazy-load contract on
-                 * `HealthChartDynamic` / `MoodChart` /
-                 * `MedicationComplianceChart` already paints a
-                 * `<ChartSkeleton>` while the JS chunk is in flight; this
-                 * Suspense layer lifts the same skeleton to a streaming-
-                 * compatible boundary so a future migration to
-                 * `useSuspenseQuery` (when we replace the per-chart
-                 * `["chart-data", …]` fetches with the slim-analytics-
-                 * derived store) automatically buckets each chart's
-                 * loading state to its own cell, with no further
-                 * call-site changes.
-                 *
-                 * Today, the boundary is a structural no-op for the
-                 * dynamic-loaded charts because their loading skeleton
-                 * lives inside the dynamic factory. The benefit is
-                 * future-proofing the composition: any descendant that
-                 * later suspends (e.g. an RSC migration of a static
-                 * legend, or a server-streamed sparkline) gets its own
-                 * fallback without re-architecting the row.
-                 */}
-                {entry.revealGated ? (
-                  /* v1.16.0 — gated cell: the chart mounts (its query
-                     fires) but stays visually on the layout-stable
-                     skeleton until the shared reveal flips — all gated
-                     charts swap in the same frame with one short
-                     fade-in (motion-safe). The TrendHint rides inside
-                     the cell so it appears with its chart. */
-                  <DashboardChartCell revealed={chartsRevealed}>
-                    <Suspense fallback={<ChartSkeleton />}>
-                      {entry.node}
-                    </Suspense>
-                    {entry.count != null ? (
-                      <TrendHint count={entry.count} />
-                    ) : null}
-                  </DashboardChartCell>
-                ) : (
-                  <>
-                    <Suspense fallback={<ChartSkeleton />}>
-                      {entry.node}
-                    </Suspense>
-                    {entry.count != null ? (
-                      <TrendHint count={entry.count} />
-                    ) : null}
-                  </>
-                )}
-              </div>
-            ))}
-            {/* v1.16.8 — layout-stable chart-row reservation. While the
-                snapshot is in flight the data-gated chart entries above
-                cannot exist yet, so these silhouettes carry the row's
-                footprint; the moment the snapshot lands the real cells
-                render in their place (same render pass — no growth, a
-                swap). `aria-hidden` like the tile-strip skeleton: the
-                mounted charts announce their own loading state. */}
-            {chartRowPlaceholderCount > 0 && (
-              <div
-                aria-hidden="true"
-                data-slot="dashboard-chart-row-skeleton"
-                className="space-y-6"
-              >
-                {Array.from({ length: chartRowPlaceholderCount }).map(
-                  (_, idx) => (
-                    <ChartSkeleton key={`chart-row-skeleton-${idx}`} />
-                  ),
-                )}
-              </div>
-            )}
-          </>
-        );
-      })()}
-
-      {/* v1.4: Getting-started checklist for brand-new users. Self-gates
-       * visibility on (onboardingCompletedAt == null || measurementCount
-       * < 5) and disappears once dismissed or fully complete.
-       * v1.16.8 — moved BELOW the tile strip + chart row: the card only
-       * mounts once the snapshot resolves, and sitting above the strip
-       * it pushed every tile and chart down when it popped in. At the
-       * bottom its late arrival shifts nothing — the fold-priority
-       * content (tiles, charts) keeps a stable position, and the
-       * near-empty dashboards of the new accounts the card targets keep
-       * it visible without scrolling anyway. */}
+      {/* The getting-started checklist sits below the tiles and charts: it
+          mounts only once the snapshot resolves, and above the strip its late
+          arrival pushed every tile down. It gates itself on onboarding state
+          and disappears once dismissed or complete. */}
       {demoMode ? null : <GettingStartedChecklist />}
     </div>
   );
diff --git a/src/components/__tests__/delegated-write-affordances.test.tsx b/src/components/__tests__/delegated-write-affordances.test.tsx
index 21ea97e13..7517ab847 100644
--- a/src/components/__tests__/delegated-write-affordances.test.tsx
+++ b/src/components/__tests__/delegated-write-affordances.test.tsx
@@ -185,7 +185,7 @@ import { admittedQuickEntry } from "@/components/dashboard/quick-entry-sheets";
 import { TodayHero } from "@/components/daily/today-hero";
 import { VorsorgeDashboardCard } from "@/components/measurement-reminders/vorsorge-dashboard-card";
 import { EpisodeDocumentsCard } from "@/components/documents/episode-documents-card";
-import { LedgerRowItem } from "@/components/medications/dose-history-ledger";
+import { LedgerRowItem } from "@/components/medications/dose-history/ledger-row-item";
 import { VaccinationsView } from "@/components/vaccinations/vaccinations-view";
 import { VisitsSection } from "@/components/encounters/visits-section";
 import type { EncounterDTO } from "@/lib/encounters/dto";
diff --git a/src/components/admin/__tests__/backups-restore-preview.test.tsx b/src/components/admin/__tests__/backups-restore-preview.test.tsx
index 892b55f2b..4107fe523 100644
--- a/src/components/admin/__tests__/backups-restore-preview.test.tsx
+++ b/src/components/admin/__tests__/backups-restore-preview.test.tsx
@@ -84,13 +84,16 @@ vi.mock("@/hooks/use-auth", () => ({
 }));
 
 import { I18nProvider } from "@/lib/i18n/context";
-import { BackupsSection, restorePreviewFailure } from "../backups-section";
+import {
+  RestorePreview,
+  restorePreviewFailure,
+} from "../backups/restore-dialog";
 
 describe("restore preview query", () => {
   it("is never retried and waits a bounded time", async () => {
     renderToStaticMarkup(
       <I18nProvider initialLocale="en">
-        <BackupsSection />
+        <RestorePreview backupId="b1" open />
       </I18nProvider>,
     );
     const key = JSON.stringify(queryKeys.adminBackupSummary("b1"));
diff --git a/src/components/admin/__tests__/backups-restore-refusal-notice.test.tsx b/src/components/admin/__tests__/backups-restore-refusal-notice.test.tsx
index f85d99c02..1fc6089c4 100644
--- a/src/components/admin/__tests__/backups-restore-refusal-notice.test.tsx
+++ b/src/components/admin/__tests__/backups-restore-refusal-notice.test.tsx
@@ -29,7 +29,7 @@ import { I18nProvider } from "@/lib/i18n/context";
 import {
   RestoreRefusalNotice,
   missingSectionsOf,
-} from "@/components/admin/backups-section";
+} from "@/components/admin/backups/restore-notices";
 import type { MissingBackupSection } from "@/lib/export/restore-skips";
 import { primeLocales } from "@/__tests__/helpers/prime-locales";
 
diff --git a/src/components/admin/__tests__/backups-restore-skip-report.test.tsx b/src/components/admin/__tests__/backups-restore-skip-report.test.tsx
index e01f9353c..c5066e790 100644
--- a/src/components/admin/__tests__/backups-restore-skip-report.test.tsx
+++ b/src/components/admin/__tests__/backups-restore-skip-report.test.tsx
@@ -22,7 +22,7 @@ import { describe, expect, it, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 
 import { I18nProvider } from "@/lib/i18n/context";
-import { RestoreSkipReport } from "@/components/admin/backups-section";
+import { RestoreSkipReport } from "@/components/admin/backups/restore-notices";
 import type { RestoreSkipSummary } from "@/lib/export/restore-skips";
 import { primeLocales } from "@/__tests__/helpers/prime-locales";
 
diff --git a/src/components/admin/__tests__/backups-section-empty.test.tsx b/src/components/admin/__tests__/backups-section-empty.test.tsx
index 9c57e7eb3..b1d44b41d 100644
--- a/src/components/admin/__tests__/backups-section-empty.test.tsx
+++ b/src/components/admin/__tests__/backups-section-empty.test.tsx
@@ -17,10 +17,6 @@ const healthySchedule = {
 };
 
 const mocks = vi.hoisted(() => ({
-  mutationOptions: [] as Array<{
-    onSuccess?: (data: { summary: Record<string, number> }) => void;
-  }>,
-  toastSuccess: vi.fn(),
   // Mutable so one file can render both a healthy schedule and a broken one;
   // the query mock reads it on every render.
   queryData: { rows: [], retentionDays: 30 } as Record<string, unknown>,
@@ -43,7 +39,7 @@ vi.mock("next/navigation", () => ({
 
 vi.mock("sonner", () => ({
   toast: {
-    success: mocks.toastSuccess,
+    success: vi.fn(),
     error: vi.fn(),
   },
 }));
@@ -55,21 +51,14 @@ vi.mock("@tanstack/react-query", () => ({
     isError: false,
   }),
   useQueryClient: () => ({ invalidateQueries: vi.fn() }),
-  useMutation: (options: unknown) => {
-    mocks.mutationOptions.push(
-      options as {
-        onSuccess?: (data: { summary: Record<string, number> }) => void;
-      },
-    );
-    return {
-      mutate: vi.fn(),
-      mutateAsync: vi.fn(),
-      isPending: false,
-      isError: false,
-      error: null,
-      variables: undefined,
-    };
-  },
+  useMutation: () => ({
+    mutate: vi.fn(),
+    mutateAsync: vi.fn(),
+    isPending: false,
+    isError: false,
+    error: null,
+    variables: undefined,
+  }),
 }));
 
 vi.mock("@/hooks/use-auth", () => ({
@@ -83,6 +72,7 @@ vi.mock("@/hooks/use-auth", () => ({
 
 import { I18nProvider } from "@/lib/i18n/context";
 import { BackupsSection } from "../backups-section";
+import { uploadedRecordCount } from "../backups/use-backup-upload";
 import { primeLocales } from "@/__tests__/helpers/prime-locales";
 
 primeLocales("de");
@@ -224,26 +214,16 @@ describe("BackupsSection — schedule health", () => {
   });
 });
 
-describe("BackupsSection — upload outcome", () => {
+describe("backup upload outcome", () => {
   it("includes health profile fact revisions in the restored record total", () => {
-    mocks.toastSuccess.mockClear();
-    const firstMutation = mocks.mutationOptions.length;
-    render();
-    const uploadOutcome = mocks.mutationOptions[firstMutation + 1]?.onSuccess;
-    expect(uploadOutcome).toBeTypeOf("function");
-
-    uploadOutcome!({
-      summary: {
+    expect(
+      uploadedRecordCount({
         measurements: 1,
         medications: 2,
         intakeEvents: 3,
         moodEntries: 4,
         healthProfileFactRevisions: 5,
-      },
-    });
-
-    expect(mocks.toastSuccess).toHaveBeenCalledWith(
-      expect.stringContaining("15"),
-    );
+      }),
+    ).toBe(15);
   });
 });
diff --git a/src/components/admin/backups-section.tsx b/src/components/admin/backups-section.tsx
index 059bb8242..d8dcb62c2 100644
--- a/src/components/admin/backups-section.tsx
+++ b/src/components/admin/backups-section.tsx
@@ -7,845 +7,39 @@
  * plus a "Run backup now" CTA that enqueues the pg-boss `data-backup` job.
  * The encrypted payload itself is never shipped to the browser; only the
  * size in bytes is surfaced.
- *
- * Folds in v1.4.6 deferred T2.6.
  */
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  AlertTriangle,
-  BookOpen,
-  Database,
-  Download,
-  History,
-  Loader2,
-  PlayCircle,
-  Upload,
-} from "lucide-react";
-import { useRef, useState, type ChangeEvent } from "react";
-import { toast } from "sonner";
-import { showErrorToast } from "@/lib/errors/error-toast";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
+import { useQuery } from "@tanstack/react-query";
+import { BookOpen, Database, Loader2, PlayCircle } from "lucide-react";
+
 import { BackupPassActivityNotice } from "@/components/admin/backup-pass-activity";
-import { Badge } from "@/components/ui/badge";
-import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { SettingsCardActions } from "@/components/settings/_card-actions";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { EmptyState } from "@/components/ui/empty-state";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
-import { ListRow } from "@/components/ui/list-row";
-import { useFormatters, useTranslations } from "@/lib/i18n/context";
-import { formatBytes } from "@/lib/format/bytes";
+import { useRecentProof } from "@/components/settings/security-section/use-recent-proof";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
+import { apiGet } from "@/lib/api/api-fetch";
+import { useTranslations } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
-import { randomId } from "@/lib/random-id";
 import type { BackupRow, BackupsList } from "@/types/backups";
-import type { BackupScheduleStatus } from "@/lib/jobs/backup-schedule-status";
-import type {
-  MissingBackupSection,
-  RestoreSkipSummary,
-  SkippedCatalogue,
-} from "@/lib/export/restore-skips";
-import type { BackupRestoreJobView } from "@/lib/jobs/backup-restore";
-import { getApiErrorMessage } from "./_shared";
+
+import { RestoreJobStatus, visibleRestoreJobs } from "./backup-restore-status";
+import { BackupRowsCards, BackupRowsTable } from "./backups/backup-rows";
+import { BackupUploadCard } from "./backups/backup-upload-card";
 import {
-  ReproofCancelledError,
-  throwIfReproofRequired,
-  useRecentProof,
-} from "@/components/settings/security-section/use-recent-proof";
-import {
-  isActiveRestore,
-  RestoreJobStatus,
-  visibleRestoreJobs,
-} from "./backup-restore-status";
-import {
-  ApiError,
-  apiFetch,
-  apiFetchRaw,
-  apiGet,
-  apiPost,
-} from "@/lib/api/api-fetch";
-
-/**
- * Typed-confirmation dialog for restore. The destructive Restore button
- * is gated behind:
- *   1. Opening the dialog (one click).
- *   2. Reading the warning copy (Title + Description spell out exactly
- *      what's about to happen + which user it affects).
- *   3. Typing the literal string `RESTORE` into the prompt input —
- *      anything else keeps the confirm button disabled.
- *
- * Three independent steps before the request fires == "triple confirm".
- * Mirrors the wipe dialog's pattern but adds the typed gate because the
- * blast radius is bigger (re-creates rows, not just deletes).
- */
-/**
- * How long the restore dialog waits for the contents of a copy. A copy's
- * counts are kept with it and come back at once; this only runs out on a copy
- * from an earlier version that the server is still reading whole, and stays
- * under the minute a reverse proxy commonly allows a request.
- */
-const PREVIEW_TIMEOUT_MS = 55_000;
-
-/**
- * What the restore dialog says when the contents did not come back: the key
- * the copy needs and this server lacks, a copy from an earlier version still
- * being read when the dialog stopped waiting, or anything else.
- */
-export function restorePreviewFailure(
-  error: unknown,
-): "keyMissing" | "stillReading" | "unavailable" {
-  if (
-    error instanceof ApiError &&
-    error.meta?.errorCode === "backup.key.missing"
-  ) {
-    return "keyMissing";
-  }
-  // `AbortSignal.timeout` rejects the fetch with a DOMException of this name.
-  if (
-    typeof error === "object" &&
-    error !== null &&
-    (error as { name?: unknown }).name === "TimeoutError"
-  ) {
-    return "stillReading";
-  }
-  return "unavailable";
-}
-
-/**
- * v1.37.20 — the sections a restore preview names, in render order. Each
- * entry sums one or more `BackupSummary` counters under one human label;
- * every counter NOT named here still reaches the operator through the
- * trailing "other records" line, so a future summary key can be forgotten
- * here without silently vanishing from the preview.
- */
-const RESTORE_PREVIEW_SECTIONS: ReadonlyArray<{
-  labelKey: string;
-  keys: readonly string[];
-}> = [
-  { labelKey: "previewMeasurements", keys: ["measurements"] },
-  {
-    labelKey: "previewMedications",
-    keys: ["medications", "intakeEvents", "medicationSideEffects"],
-  },
-  { labelKey: "previewMood", keys: ["moodEntries"] },
-  { labelKey: "previewLabs", keys: ["labResults", "biomarkers"] },
-  { labelKey: "previewDocuments", keys: ["documents"] },
-  { labelKey: "previewWorkouts", keys: ["workouts"] },
-  { labelKey: "previewCycles", keys: ["cycles", "cycleDayLogs"] },
-  {
-    labelKey: "previewVisits",
-    keys: ["encounters", "practitioners", "encounterLinks"],
-  },
-  {
-    labelKey: "previewVaccinations",
-    keys: ["vaccinations", "vaccinationLinks", "customVaccines"],
-  },
-  {
-    labelKey: "previewReminders",
-    keys: ["measurementReminders", "measurementReminderEvents"],
-  },
-  {
-    labelKey: "previewCustomMetrics",
-    keys: ["customMetrics", "customMetricEntries"],
-  },
-  { labelKey: "previewHealthScores", keys: ["healthScoreRecords"] },
-];
-
-function RestoreRowDialog({
-  row,
-  pending,
-  onConfirm,
-}: {
-  row: BackupRow;
-  pending: boolean;
-  onConfirm: (options: { restoreInstanceSettings: boolean }) => void;
-}) {
-  const { t } = useTranslations();
-  const fmt = useFormatters();
-  const [open, setOpen] = useState(false);
-  const [typed, setTyped] = useState("");
-  const matched = typed.trim() === "RESTORE";
-  // Off unless the operator says otherwise. A disaster-recovery snapshot
-  // carries the host's own settings alongside the account's data, and putting
-  // one account back is not a reason to reconfigure the installation for
-  // everybody on it — so the second effect is a second decision.
-  const [withInstanceSettings, setWithInstanceSettings] = useState(false);
-
-  // v1.37.20 — restore preview: fetch what the file contains the moment the
-  // dialog opens, so the typed confirmation is an informed one. A failed
-  // preview never blocks the restore — it states its own absence instead.
-  //
-  // Never retried. The server answers from counts kept with the copy, at
-  // once; only a copy from an earlier version is read whole, and that read
-  // goes on (and is kept) after this request gives up. A retry would only
-  // start the same read a second time (#1031).
-  const preview = useQuery({
-    queryKey: queryKeys.adminBackupSummary(row.id),
-    queryFn: () =>
-      apiGet<{ summary: Record<string, unknown> }>(
-        `/api/admin/backups/${row.id}/summary`,
-        { signal: AbortSignal.timeout(PREVIEW_TIMEOUT_MS) },
-      ),
-    enabled: open,
-    staleTime: 60_000,
-    retry: false,
-  });
-  const previewFailure = restorePreviewFailure(preview.error);
-  const numericSummary: Record<string, number> = {};
-  if (preview.data?.summary) {
-    for (const [key, value] of Object.entries(preview.data.summary)) {
-      if (typeof value === "number") numericSummary[key] = value;
-    }
-  }
-  const namedKeys = new Set(
-    RESTORE_PREVIEW_SECTIONS.flatMap((section) => section.keys),
-  );
-  const previewRows = RESTORE_PREVIEW_SECTIONS.map((section) => ({
-    labelKey: section.labelKey,
-    count: section.keys.reduce(
-      (sum, key) => sum + (numericSummary[key] ?? 0),
-      0,
-    ),
-  })).filter((entry) => entry.count > 0);
-  const otherCount = Object.entries(numericSummary)
-    .filter(([key]) => !namedKeys.has(key))
-    .reduce((sum, [, value]) => sum + value, 0);
-
-  return (
-    <AlertDialog
-      open={open}
-      onOpenChange={(next) => {
-        setOpen(next);
-        if (!next) {
-          setTyped("");
-          setWithInstanceSettings(false);
-        }
-      }}
-    >
-      <AlertDialogTrigger asChild>
-        <Button
-          size="sm"
-          variant="destructive"
-          data-testid="backup-restore-trigger"
-          disabled={pending}
-          aria-label={t("admin.section.backups.restoreAria", {
-            username: row.username,
-          })}
-          className="min-h-11"
-        >
-          {pending ? (
-            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
-          ) : (
-            <History className="h-3.5 w-3.5" />
-          )}
-          {t("admin.section.backups.restore")}
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {t("admin.section.backups.restoreTitle")}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            {t("admin.section.backups.restoreDescription", {
-              username: row.username,
-              when: fmt.dateTime(row.createdAt),
-            })}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        {/* v1.37.20 — what the file contains, before the typed gate. */}
-        <div
-          className="rounded-md border p-3 text-sm"
-          data-slot="restore-preview"
-        >
-          <p className="text-muted-foreground mb-1.5 font-medium">
-            {t("admin.section.backups.previewTitle")}
-          </p>
-          {preview.isLoading && (
-            <p className="text-muted-foreground">
-              {t("admin.section.backups.previewLoading")}
-            </p>
-          )}
-          {preview.isError &&
-            (previewFailure === "keyMissing" &&
-            preview.error instanceof ApiError ? (
-              // The one preview failure the restore would repeat: say which
-              // key, so the operator can put it back before trying.
-              <p role="alert" className="text-destructive">
-                {t("admin.section.backups.previewKeyMissing", {
-                  keys: Array.isArray(preview.error.meta?.keyIds)
-                    ? preview.error.meta.keyIds.map(String).join(", ")
-                    : "",
-                })}
-              </p>
-            ) : previewFailure === "stillReading" ? (
-              <p className="text-muted-foreground">
-                {t("admin.section.backups.previewStillReading")}
-              </p>
-            ) : (
-              <p className="text-muted-foreground">
-                {t("admin.section.backups.previewUnavailable")}
-              </p>
-            ))}
-          {preview.isSuccess && (
-            <ul className="grid list-none grid-cols-1 gap-x-4 gap-y-0.5 p-0 sm:grid-cols-2">
-              {previewRows.map((entry) => (
-                <li
-                  key={entry.labelKey}
-                  className="flex items-baseline justify-between gap-2"
-                >
-                  <span className="text-muted-foreground">
-                    {t(`admin.section.backups.${entry.labelKey}`)}
-                  </span>
-                  <span className="tabular-nums">
-                    {fmt.integer(entry.count)}
-                  </span>
-                </li>
-              ))}
-              {otherCount > 0 && (
-                <li className="flex items-baseline justify-between gap-2">
-                  <span className="text-muted-foreground">
-                    {t("admin.section.backups.previewOther")}
-                  </span>
-                  <span className="tabular-nums">
-                    {fmt.integer(otherCount)}
-                  </span>
-                </li>
-              )}
-              {previewRows.length === 0 && otherCount === 0 && (
-                <li className="text-muted-foreground">
-                  {t("admin.section.backups.previewEmpty")}
-                </li>
-              )}
-            </ul>
-          )}
-        </div>
-        {/* The second decision, before the typed gate rather than after it:
-            the account's data comes back either way, the host's settings only
-            if this is ticked. */}
-        <label
-          className="flex items-start gap-2 text-sm"
-          data-slot="restore-instance-settings"
-        >
-          <Checkbox
-            data-testid="backup-restore-instance-settings"
-            checked={withInstanceSettings}
-            onCheckedChange={(next) => setWithInstanceSettings(next === true)}
-            className="mt-0.5"
-          />
-          <span>
-            {t("admin.section.backups.restoreInstanceSettingsLabel")}
-            <span className="text-muted-foreground block text-xs">
-              {t("admin.section.backups.restoreInstanceSettingsHint")}
-            </span>
-          </span>
-        </label>
-        <div className="space-y-2">
-          <Label htmlFor={`restore-prompt-${row.id}`}>
-            {t("admin.section.backups.restorePromptLabel")}
-          </Label>
-          <Input
-            id={`restore-prompt-${row.id}`}
-            data-testid="backup-restore-prompt"
-            value={typed}
-            onChange={(e) => setTyped(e.target.value)}
-            autoComplete="off"
-            spellCheck={false}
-            placeholder="RESTORE"
-          />
-        </div>
-        <AlertDialogFooter>
-          <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-          <AlertDialogAction
-            data-testid="backup-restore-confirm"
-            disabled={!matched || pending}
-            variant="destructive"
-            onClick={() => {
-              if (!matched) return;
-              setOpen(false);
-              setTyped("");
-              onConfirm({ restoreInstanceSettings: withInstanceSettings });
-              setWithInstanceSettings(false);
-            }}
-          >
-            {pending
-              ? t("admin.section.backups.restoreInProgress")
-              : t("admin.section.backups.restoreConfirm")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
-/**
- * Render the `DataBackup.type` enum (`WEEKLY_AUTO` / `MANUAL`) as a
- * human label. Unknown values fall through to the raw enum so a future
- * type added in the schema is still legible at a glance.
- */
-function formatBackupType(
-  type: string,
-  t: ReturnType<typeof useTranslations>["t"],
-) {
-  if (type === "WEEKLY_AUTO") return t("admin.section.backups.typeWeeklyAuto");
-  if (type === "MANUAL") return t("admin.section.backups.typeManual");
-  return type;
-}
-
-/**
- * Which catalogue a skipped key belonged to, as a label.
- *
- * Spelled out with literal `t()` calls rather than an interpolated key, so
- * `i18n-call-site-coverage.test.ts` can see each one and prove the bundle has
- * it. An interpolated key is invisible to that guard and shows up as raw dot
- * notation in production the day someone renames a catalogue.
- */
-function catalogueLabel(
-  catalogue: SkippedCatalogue,
-  t: ReturnType<typeof useTranslations>["t"],
-) {
-  if (catalogue === "cycleSymptom") {
-    return t("admin.section.backups.restoreSkippedCycleSymptom");
-  }
-  if (catalogue === "illnessSymptom") {
-    return t("admin.section.backups.restoreSkippedIllnessSymptom");
-  }
-  if (catalogue === "moodTag") {
-    return t("admin.section.backups.restoreSkippedMoodTag");
-  }
-  if (catalogue === "visitReference") {
-    return t("admin.section.backups.restoreSkippedVisitReference");
-  }
-  if (catalogue === "vaccinationReference") {
-    return t("admin.section.backups.restoreSkippedVaccinationReference");
-  }
-  if (catalogue === "checkupClosure") {
-    return t("admin.section.backups.restoreSkippedCheckupClosure");
-  }
-  if (catalogue === "reminderReference") {
-    return t("admin.section.backups.restoreSkippedReminderReference");
-  }
-  if (catalogue === "coachAttachment") {
-    return t("admin.section.backups.restoreSkippedCoachAttachment");
-  }
-  if (catalogue === "coachReference") {
-    return t("admin.section.backups.restoreSkippedCoachReference");
-  }
-  if (catalogue === "documentConditionLink") {
-    return t("admin.section.backups.restoreSkippedDocumentConditionLink");
-  }
-  if (catalogue === "relationLink") {
-    return t("admin.section.backups.restoreSkippedRelationLink");
-  }
-  if (catalogue === "extractedFact") {
-    return t("admin.section.backups.restoreSkippedExtractedFact");
-  }
-  if (catalogue === "factCommitment") {
-    return t("admin.section.backups.restoreSkippedFactCommitment");
-  }
-  if (catalogue === "moodFactor") {
-    return t("admin.section.backups.restoreSkippedMoodFactor");
-  }
-  if (catalogue === "personalRecordReference") {
-    return t("admin.section.backups.restoreSkippedPersonalRecordReference");
-  }
-  if (catalogue === "ecgReference") {
-    return t("admin.section.backups.restoreSkippedEcgReference");
-  }
-  if (catalogue === "symptomEpisodeReference") {
-    return t("admin.section.backups.restoreSkippedSymptomEpisodeReference");
-  }
-  if (catalogue === "visitCiphertext") {
-    return t("admin.section.backups.restoreSkippedVisitCiphertext");
-  }
-  if (catalogue === "vaccinationCiphertext") {
-    return t("admin.section.backups.restoreSkippedVaccinationCiphertext");
-  }
-  if (catalogue === "environmentLocationCiphertext") {
-    return t(
-      "admin.section.backups.restoreSkippedEnvironmentLocationCiphertext",
-    );
-  }
-  if (catalogue === "moodLabelCiphertext") {
-    return t("admin.section.backups.restoreSkippedMoodLabelCiphertext");
-  }
-  if (catalogue === "cycleCiphertext") {
-    return t("admin.section.backups.restoreSkippedCycleCiphertext");
-  }
-  if (catalogue === "medicationTarget") {
-    return t("admin.section.backups.restoreSkippedMedicationTarget");
-  }
-  if (catalogue === "scheduleRevisionLink") {
-    return t("admin.section.backups.restoreSkippedScheduleRevisionLink");
-  }
-  if (catalogue === "accountSetting") {
-    return t("admin.section.backups.restoreSkippedAccountSetting");
-  }
-  // Not a fallback: the chain above is exhaustive and this line is what makes
-  // the compiler say so. A catalogue added without a label here now stops the
-  // build instead of shipping under a label that belongs to something else,
-  // which is what three of them were already doing — a dropped Coach
-  // attachment reached the operator's screen labelled "mood factor".
-  const unlabelled: never = catalogue;
-  return unlabelled;
-}
-
-/**
- * Which section a refused file claimed and did not carry, as a label.
- *
- * Spelled out with literal `t()` calls for the same reason as
- * `catalogueLabel` above — an interpolated key is invisible to
- * `i18n-call-site-coverage.test.ts`, and a renamed section would ship as raw
- * dot notation. The `never` at the foot is what makes the compiler say the
- * chain is exhaustive.
- */
-function missingSectionLabel(
-  section: MissingBackupSection,
-  t: ReturnType<typeof useTranslations>["t"],
-) {
-  if (section === "documents") {
-    return t("admin.section.backups.restoreMissingDocuments");
-  }
-  if (section === "workouts") {
-    return t("admin.section.backups.restoreMissingWorkouts");
-  }
-  if (section === "mentalHealth") {
-    return t("admin.section.backups.restoreMissingMentalHealth");
-  }
-  if (section === "consent") {
-    return t("admin.section.backups.restoreMissingConsent");
-  }
-  const unlabelled: never = section;
-  return unlabelled;
-}
-
-/**
- * Why a file was refused, and what to do about it.
- *
- * Held on screen rather than left to the toast, exactly like the skip report
- * below it. The operator refused here is often holding the only copy of an
- * account; "restore failed" for four seconds is not enough to act on, and the
- * two facts that let them act — which section the file claimed and did not
- * carry, and that nothing was changed — have to survive long enough to be read.
- */
-/**
- * The refused sections a failed restore job names, or none.
- *
- * Keyed on the failure's `code` and not on its message: the message is prose
- * the server may reword, and matching on it would turn a copy edit into a
- * silent loss of the panel.
- */
-
-const DISMISSED_RESTORES_KEY = "healthlog.admin.backups.dismissedRestores";
-
-/** Dismissed restore panels, from this browser. Empty when storage is off. */
-function readDismissedRestores(): string[] {
-  try {
-    if (typeof window === "undefined") return [];
-    const raw = window.localStorage.getItem(DISMISSED_RESTORES_KEY);
-    const parsed: unknown = raw ? JSON.parse(raw) : [];
-    return Array.isArray(parsed)
-      ? parsed.filter((id): id is string => typeof id === "string")
-      : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeDismissedRestores(ids: string[]): void {
-  try {
-    // The list only ever shows a day of jobs; fifty ids is weeks of them.
-    window.localStorage.setItem(
-      DISMISSED_RESTORES_KEY,
-      JSON.stringify(ids.slice(-50)),
-    );
-  } catch {
-    // A private window: the panel comes back on reload, nothing else breaks.
-  }
-}
-
-/**
- * The upload body for a backup file: the file itself when it is already
- * gzip, otherwise the file compressed in the browser. The server accepts
- * both; compressing keeps a large export well inside the request size limit.
- */
-async function uploadBody(file: File): Promise<Blob> {
-  const head = new Uint8Array(await file.slice(0, 2).arrayBuffer());
-  if (head[0] === 0x1f && head[1] === 0x8b) return file;
-  return new Response(
-    file.stream().pipeThrough(new CompressionStream("gzip")),
-  ).blob();
-}
-
-export function missingSectionsOf(
-  failure: { code: string; sections?: readonly unknown[] } | null | undefined,
-): MissingBackupSection[] {
-  if (failure?.code !== "backup.section.missing") return [];
-  const sections = failure.sections;
-  if (!Array.isArray(sections)) return [];
-  return sections.filter(
-    (section): section is MissingBackupSection => typeof section === "string",
-  );
-}
-
-export function RestoreRefusalNotice({
-  sections,
-  onDismiss,
-}: {
-  sections: MissingBackupSection[];
-  onDismiss: () => void;
-}) {
-  const { t } = useTranslations();
-  if (sections.length === 0) return null;
-  return (
-    <div
-      role="alert"
-      data-slot="restore-refusal-notice"
-      className="border-destructive/40 bg-destructive/10 rounded-md border px-3 py-2 text-sm"
-    >
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex items-start gap-2">
-          <AlertTriangle
-            className="mt-0.5 h-4 w-4 shrink-0"
-            aria-hidden="true"
-          />
-          <div>
-            <p className="font-medium">
-              {t("admin.section.backups.restoreMissingTitle")}
-            </p>
-            <p className="text-muted-foreground text-xs">
-              {t("admin.section.backups.restoreMissingDescription")}
-            </p>
-            <ul className="mt-2 space-y-1">
-              {sections.map((section) => (
-                <li key={section} className="text-xs">
-                  {missingSectionLabel(section, t)}
-                </li>
-              ))}
-            </ul>
-            <p className="text-muted-foreground mt-2 text-xs">
-              {t("admin.section.backups.restoreMissingRemedy")}
-            </p>
-          </div>
-        </div>
-        <Button
-          size="sm"
-          variant="ghost"
-          onClick={onDismiss}
-          className="min-h-11"
-        >
-          {t("common.dismiss")}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * What the last restore could not put back.
- *
- * Its own component, and exported, so it can be rendered against a report in a
- * test instead of only through a state transition the SSR smoke tests here
- * cannot drive. A report that reaches the response and never reaches the screen
- * is the same silence the reporting exists to end, so the render is worth
- * proving on its own.
- *
- * It names every key rather than totalling them away: an operator who cannot
- * see WHICH symptom went missing cannot decide whether it mattered.
- */
-export function RestoreSkipReport({
-  report,
-  onDismiss,
-}: {
-  report: RestoreSkipSummary;
-  onDismiss: () => void;
-}) {
-  const { t } = useTranslations();
-  if (report.links === 0) return null;
-  return (
-    <div
-      role="status"
-      data-slot="restore-skip-report"
-      className="border-warning/40 bg-warning/10 rounded-md border px-3 py-2 text-sm"
-    >
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex items-start gap-2">
-          <AlertTriangle
-            className="mt-0.5 h-4 w-4 shrink-0"
-            aria-hidden="true"
-          />
-          <div>
-            <p className="font-medium">
-              {t("admin.section.backups.restoreSkippedTitle", {
-                links: String(report.links),
-              })}
-            </p>
-            <p className="text-muted-foreground text-xs">
-              {t("admin.section.backups.restoreSkippedDescription")}
-            </p>
-            <ul className="mt-2 space-y-1">
-              {report.catalogueKeys.map((entry) => (
-                <li key={`${entry.catalogue}:${entry.key}`} className="text-xs">
-                  <span className="font-mono">{entry.key}</span>{" "}
-                  <span className="text-muted-foreground">
-                    {catalogueLabel(entry.catalogue, t)}
-                    {" · "}
-                    {t("admin.section.backups.restoreSkippedLinks", {
-                      count: String(entry.links),
-                    })}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-        <Button
-          size="sm"
-          variant="ghost"
-          onClick={onDismiss}
-          className="min-h-11"
-        >
-          {t("common.dismiss")}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Says out loud whether the SCHEDULE is still alive.
- *
- * The weekly pass on the maintainer's own instance stopped producing copies
- * and nothing surfaced it for a month and a half: the table listed the rows it
- * had, each with an ordinary timestamp, and a copy from six weeks ago reads
- * exactly like one made on Sunday until somebody does the subtraction. Two
- * independent facts are shown, because they fail at different times — the age
- * of the newest scheduled copy never ages out, while the run's own outcome
- * carries the reason ("job timed out") and survives only as long as pg-boss
- * keeps the row.
- *
- * Not dismissible: it reflects live state, so the only way to clear it is to
- * make a backup succeed.
- */
-function ScheduleHealthNotice({
-  schedule,
-}: {
-  schedule: BackupScheduleStatus;
-}) {
-  const { t } = useTranslations();
-  const fmt = useFormatters();
-  if (!schedule.stale && !schedule.lastRunFailed) return null;
-
-  return (
-    <div
-      role="alert"
-      data-slot="backup-schedule-notice"
-      className="border-destructive/40 bg-destructive/10 rounded-md border px-3 py-2 text-sm"
-    >
-      <div className="flex items-start gap-2">
-        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
-        <div>
-          <p className="font-medium">
-            {schedule.stale
-              ? t("admin.section.backups.scheduleStaleTitle")
-              : t("admin.section.backups.scheduleFailedTitle")}
-          </p>
-          {schedule.stale ? (
-            <p className="text-xs">
-              {t("admin.section.backups.scheduleStaleDescription", {
-                days: schedule.lastSuccessAgeDays ?? 0,
-                threshold: schedule.staleAfterDays,
-              })}
-            </p>
-          ) : null}
-          {schedule.lastRunFailed && schedule.lastRun ? (
-            <p className="text-xs">
-              {t("admin.section.backups.scheduleFailedDescription", {
-                when: fmt.dateTime(schedule.lastRun.at),
-                reason:
-                  schedule.lastRun.error ||
-                  t("admin.section.backups.scheduleFailedNoReason"),
-              })}
-            </p>
-          ) : null}
-          <p className="text-muted-foreground mt-2 text-xs">
-            {t("admin.section.backups.scheduleRemedy")}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Send a backup file to the admin upload route. Sent as the raw body,
- * compressed on the way unless it already is: the server reads it as a stream,
- * and a large export (hundreds of MB of JSON) shrinks about tenfold. No request
- * timeout, because a file of that size takes longer to check and store than
- * the default allows. The body is built here, per call, so a retry after a
- * re-proof sends the file again rather than a spent stream.
- */
-async function uploadOnce(file: File) {
-  const body = await uploadBody(file);
-  return apiFetch<{
-    id: string;
-    valid: true;
-    summary: {
-      measurements: number;
-      medications: number;
-      intakeEvents: number;
-      moodEntries: number;
-      // Optional for the same reason as the keys below: a file written
-      // before side effects rode the wire carries no key at all.
-      medicationSideEffects?: number;
-      cycles?: number;
-      cycleDayLogs?: number;
-      // v1.28 backup-completeness — optional so an older-schema upload
-      // (pre-v1.28) still totals correctly without these keys.
-      labResults?: number;
-      biomarkers?: number;
-      illnessEpisodes?: number;
-      illnessDayLogs?: number;
-      allergies?: number;
-      familyHistory?: number;
-      workouts?: number;
-      documents?: number;
-      // Optional for the same reason: a file written before each of these
-      // rode the wire carries no key, and an absent key must total as
-      // nothing rather than break the count.
-      nutrientDays?: number;
-      healthProfile?: number;
-      healthProfileFactRevisions?: number;
-      customMetrics?: number;
-      customMetricEntries?: number;
-      intradayProfiles?: number;
-    };
-  }>("/api/admin/backups/upload", {
-    method: "POST",
-    body,
-    headers: { "Content-Type": "application/gzip" },
-    signal: null,
-  });
-}
+  RestoreRefusalNotice,
+  RestoreSkipReport,
+  ScheduleHealthNotice,
+} from "./backups/restore-notices";
+import { useBackupDownload, useRunBackup } from "./backups/use-backup-actions";
+import { useBackupRestores } from "./backups/use-backup-restores";
+import { useBackupUpload } from "./backups/use-backup-upload";
 
 export function BackupsSection() {
-  const { t, locale } = useTranslations();
-  const fmt = useFormatters();
-  const queryClient = useQueryClient();
+  const { t } = useTranslations();
 
   const { data, isLoading, isError, error, refetch } = useQuery({
     queryKey: queryKeys.adminBackups(),
@@ -853,286 +47,40 @@ export function BackupsSection() {
       return apiGet<BackupsList>("/api/admin/backups");
     },
   });
-
-  const runBackup = useMutation({
-    mutationFn: async () => {
-      return apiPost<{ jobId: string | null }>("/api/admin/backups/run");
-    },
-    onSuccess: () => {
-      toast.success(t("admin.section.backups.runEnqueued"));
-      // The job runs async; refetch after a short delay so the new row
-      // shows up without leaving the user wondering whether the click
-      // did anything.
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: queryKeys.adminBackups() });
-      }, 2000);
-    },
-    onError: (err) => {
-      showErrorToast(
-        err instanceof Error && err.message
-          ? err.message
-          : t("admin.section.backups.runFailed"),
-        { cause: err },
-      );
-    },
-  });
-
+  const runBackup = useRunBackup();
   const rows: BackupRow[] = data?.rows ?? [];
 
-  // Per-row download in-flight state — keyed by backup id so two
-  // parallel clicks on different rows don't share a single spinner.
-  const [downloadingId, setDownloadingId] = useState<string | null>(null);
-
-  // Upload state — single-file flow, drives the file input + button.
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
   // Download, upload and restore reach every account's data, so each asks for
   // a fresh proof unless this session signed in or re-proved within minutes.
   const recentProof = useRecentProof();
-  const upload = useMutation({
-    mutationFn: async (file: File) => {
-      // Ask first, so a large file is not sent once only to be refused.
-      await recentProof.run(() => apiGet("/api/auth/reproof"));
-      return uploadOnce(file);
-    },
-    onSuccess: (data) => {
-      const total =
-        data.summary.measurements +
-        data.summary.medications +
-        data.summary.intakeEvents +
-        data.summary.moodEntries +
-        (data.summary.medicationSideEffects ?? 0) +
-        (data.summary.cycles ?? 0) +
-        (data.summary.cycleDayLogs ?? 0) +
-        (data.summary.labResults ?? 0) +
-        (data.summary.biomarkers ?? 0) +
-        (data.summary.illnessEpisodes ?? 0) +
-        (data.summary.illnessDayLogs ?? 0) +
-        (data.summary.allergies ?? 0) +
-        (data.summary.familyHistory ?? 0) +
-        (data.summary.workouts ?? 0) +
-        (data.summary.documents ?? 0) +
-        // The count the admin is shown has to be the count the file carries.
-        // The nutrient day totals were added to the payload and never to this
-        // sum, so an upload that restored them reported fewer records than it
-        // held — a smaller version of the same defect, on the reporting side.
-        (data.summary.nutrientDays ?? 0) +
-        (data.summary.healthProfile ?? 0) +
-        (data.summary.healthProfileFactRevisions ?? 0) +
-        (data.summary.customMetrics ?? 0) +
-        (data.summary.customMetricEntries ?? 0) +
-        (data.summary.intradayProfiles ?? 0);
-      toast.success(
-        t("admin.section.backups.uploadSuccess", { count: String(total) }),
-      );
-      queryClient.invalidateQueries({ queryKey: queryKeys.adminBackups() });
-    },
-    onError: (err) => {
-      if (err instanceof ReproofCancelledError) return;
-      showErrorToast(
-        err instanceof Error && err.message
-          ? err.message
-          : t("admin.section.backups.uploadFailed"),
-        { cause: err },
-      );
-    },
-    onSettled: () => {
-      // Reset the file input so the same file can be re-selected after a
-      // rejected upload (browsers keep the previous selection otherwise).
-      if (fileInputRef.current) fileInputRef.current.value = "";
-    },
-  });
-
-  function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (file) upload.mutate(file);
-  }
-
-  // What the last restore could not put back. Held in state rather than left
-  // to the toast: a toast for "twelve symptom links are gone" disappears in
-  // four seconds and the operator has no way to get it back. This panel stays
-  // until they dismiss it.
-  const [skipped, setSkipped] = useState<RestoreSkipSummary | null>(null);
-
-  // Why the last restore was refused before it touched anything. Same reason
-  // the skip report is held rather than toasted: the operator has to be able to
-  // read it after the four seconds are up.
-  const [refusedSections, setRefusedSections] = useState<
-    MissingBackupSection[]
-  >([]);
-
-  // A job this page watched while it ran, and has now seen finish. Only those
-  // raise a toast and refresh the page's data: a job that had already finished
-  // when the page opened is shown in its panel and nothing more. Read in the
-  // poll's own callback, where each answer arrives, rather than in an effect.
-  const watched = useRef<Map<string, string>>(new Map());
-  function noticeFinishedRestores(jobs: readonly BackupRestoreJobView[]) {
-    for (const job of jobs) {
-      const before = watched.current.get(job.id);
-      watched.current.set(job.id, job.status);
-      if (before !== "queued" && before !== "running") continue;
-      if (job.status === "succeeded") {
-        setRefusedSections([]);
-        const report = job.result?.skipped;
-        if (report && report.links > 0) {
-          setSkipped(report as RestoreSkipSummary);
-          toast.warning(
-            t("admin.section.backups.restoreSkippedToast", {
-              links: String(report.links),
-            }),
-          );
-        } else {
-          setSkipped(null);
-          toast.success(t("admin.section.backups.restoreSuccess"));
-        }
-        // Restore touches every personal-data table; nuke the broader cache
-        // so dashboards / lists rebuild against the new state.
-        void queryClient.invalidateQueries();
-      } else if (job.status === "failed") {
-        setRefusedSections(missingSectionsOf(job.failure));
-        showErrorToast(t("admin.section.backups.restoreFailed"));
-      }
-    }
-  }
-
-  // The restore jobs, read from the server so a reload during a restore finds
-  // it again. Polled every two seconds while any is queued or running, and
-  // not at all otherwise. A poll that fails keeps the last answer on screen:
-  // a network blip is not a failed restore.
-  const restores = useQuery({
-    queryKey: queryKeys.adminBackupRestores(),
-    queryFn: async () => {
-      const data = await apiGet<{ jobs: BackupRestoreJobView[] }>(
-        "/api/admin/backups/restores",
-      );
-      noticeFinishedRestores(data.jobs);
-      return data;
-    },
-    refetchInterval: (query) =>
-      query.state.data?.jobs.some(isActiveRestore) ? 2000 : false,
-  });
-  const restoreJobs = restores.data?.jobs ?? [];
-  const activeOwners = new Set(
-    restoreJobs.filter(isActiveRestore).map((job) => job.userId),
-  );
-
-  // Finished restores the operator dismissed. Remembered in this browser only,
-  // for convenience; the list itself forgets a job after a day.
-  const [dismissedRestores, setDismissedRestores] = useState<Set<string>>(
-    () => new Set(readDismissedRestores()),
-  );
-  function dismissRestore(id: string) {
-    setDismissedRestores((previous) => {
-      const next = new Set(previous);
-      next.add(id);
-      writeDismissedRestores([...next]);
-      return next;
-    });
-  }
-
-  // Restore: typed-confirmation dialog. The request only queues the restore;
-  // the panel above the list follows it from there.
-  const restore = useMutation({
-    mutationFn: async ({
-      row,
-      restoreInstanceSettings,
-    }: {
-      row: BackupRow;
-      restoreInstanceSettings: boolean;
-    }) => {
-      // Idempotency-Key prevents a double-click from queuing a second
-      // restore. Include the row id so two different backups can both be
-      // restored independently in the same minute.
-      const idempotencyKey = `restore-${row.id}-${randomId()}`;
-      return recentProof.run(() =>
-        apiPost<{ jobId: string; status: "queued" }>(
-          `/api/admin/backups/${row.id}/restore`,
-          { confirm: "RESTORE", restoreInstanceSettings },
-          { headers: { "Idempotency-Key": idempotencyKey } },
-        ),
-      );
-    },
-    onSuccess: (data) => {
-      setRefusedSections([]);
-      setSkipped(null);
-      watched.current.set(data.jobId, "queued");
-      // Neutral, not a success: nothing has been restored yet.
-      toast.info(t("admin.section.backups.restoreStarted"));
-      void queryClient.invalidateQueries({
-        queryKey: queryKeys.adminBackupRestores(),
-      });
-    },
-    onError: (err) => {
-      if (err instanceof ReproofCancelledError) return;
-      if (
-        err instanceof ApiError &&
-        err.meta?.errorCode === "backup.restore.active"
-      ) {
-        showErrorToast(t("admin.section.backups.restoreActive"), {
-          cause: err,
-        });
-        void queryClient.invalidateQueries({
-          queryKey: queryKeys.adminBackupRestores(),
-        });
-        return;
-      }
-      setRefusedSections([]);
-      showErrorToast(
-        err instanceof Error && err.message
-          ? err.message
-          : t("admin.section.backups.restoreFailed"),
-        { cause: err },
-      );
-    },
-  });
-
-  async function handleDownload(row: BackupRow) {
-    setDownloadingId(row.id);
-    try {
-      // apiFetchRaw: the download needs the raw Response for the blob +
-      // the Content-Disposition filename header.
-      const res = await recentProof.run(async () =>
-        throwIfReproofRequired(
-          await apiFetchRaw(`/api/admin/backups/${row.id}/download`),
-        ),
-      );
-      if (!res.ok) {
-        throw new Error(await getApiErrorMessage(res));
-      }
-      // Use the server-provided Content-Disposition filename if present,
-      // otherwise fall back to a deterministic client-side name. The
-      // server filename is more accurate (uses the actual createdAt).
-      const cd = res.headers.get("content-disposition") ?? "";
-      const match = cd.match(/filename="?([^";]+)"?/i);
-      const fallback = `healthlog-backup-${row.userId}-${row.createdAt.slice(0, 10)}.json`;
-      const filename = match?.[1] ?? fallback;
-
-      const blob = await res.blob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      toast.success(t("admin.section.backups.downloadStarted"));
-    } catch (err) {
-      if (err instanceof ReproofCancelledError) return;
-      showErrorToast(
-        err instanceof Error && err.message
-          ? err.message
-          : t("admin.section.backups.downloadFailed"),
-        { cause: err },
-      );
-    } finally {
-      setDownloadingId(null);
-    }
-  }
+  const { downloadingId, handleDownload } = useBackupDownload(recentProof);
+  const { upload, fileInputRef, handleFileChange } =
+    useBackupUpload(recentProof);
+  const {
+    restoreJobs,
+    dismissedRestores,
+    dismissRestore,
+    restore,
+    restorePending,
+    skipped,
+    setSkipped,
+    refusedSections,
+    setRefusedSections,
+  } = useBackupRestores(recentProof);
+  const rowActions = {
+    downloadingId,
+    onDownload: (row: BackupRow) => void handleDownload(row),
+    restorePending,
+    onRestore: (
+      row: BackupRow,
+      options: { restoreInstanceSettings: boolean },
+    ) => restore.mutate({ row, ...options }),
+  };
 
   return (
     <SettingsCard>
       {recentProof.dialog}
-      {/* v1.18.1 — the snapshot count leads (numbers first) and the
+      {/* The snapshot count leads (numbers first) and the
           "Run now" button follows. */}
       <SettingsCardHeader
         icon={Database}
@@ -1169,50 +117,11 @@ export function BackupsSection() {
         <BackupPassActivityNotice activity={data.scheduleActivity} />
       ) : null}
 
-      {/* Upload card — separate from the table so admins can ingest a
-          backup file independently of any existing rows. The visible
-          button proxies a hidden file input so the layout stays clean
-          while keyboard / screen-reader users keep a labelled control. */}
-      <div className="bg-muted/30 border-border flex flex-col gap-2 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <div className="text-sm font-medium">
-            {t("admin.section.backups.uploadTitle")}
-          </div>
-          <p className="text-muted-foreground text-xs">
-            {t("admin.section.backups.uploadDescription")}{" "}
-            <span
-              data-slot="backup-upload-help"
-              className="text-muted-foreground"
-            >
-              {t("admin.section.backups.uploadHelp")}
-            </span>
-          </p>
-        </div>
-        <div>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="application/json,.json,application/gzip,.gz"
-            className="sr-only"
-            onChange={handleFileChange}
-            aria-label={t("admin.section.backups.uploadButton")}
-          />
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={upload.isPending}
-            onClick={() => fileInputRef.current?.click()}
-            className="min-h-11"
-          >
-            {upload.isPending ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
-            ) : (
-              <Upload className="h-3.5 w-3.5" />
-            )}
-            {t("admin.section.backups.uploadButton")}
-          </Button>
-        </div>
-      </div>
+      <BackupUploadCard
+        pending={upload.isPending}
+        fileInputRef={fileInputRef}
+        onFileChange={handleFileChange}
+      />
 
       {visibleRestoreJobs(restoreJobs, dismissedRestores).map((job) => (
         <RestoreJobStatus
@@ -1249,7 +158,7 @@ export function BackupsSection() {
           onRetry={() => void refetch()}
         />
       ) : rows.length === 0 ? (
-        // v1.4.15: replace bare text with the EmptyState
+        // Replace bare text with the EmptyState
         // primitive. The header already exposes "Backup now" but a
         // brand-new admin lands inside the card and benefits from a
         // duplicate CTA right next to the explanation.
@@ -1283,155 +192,9 @@ export function BackupsSection() {
         </div>
       ) : (
         <div>
-          {/* Wide layout: the canonical table. Hidden below `md`, where the
-              five columns push Download / Restore off-screen behind a
-              horizontal scroll; the card list below takes over there. */}
-          <div className="relative hidden overflow-x-auto md:block">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="text-muted-foreground border-b text-xs">
-                  <th className="px-3 py-2 text-left font-medium">
-                    {t("admin.section.backups.colUser")}
-                  </th>
-                  <th className="px-3 py-2 text-left font-medium">
-                    {t("admin.section.backups.colType")}
-                  </th>
-                  <th className="px-3 py-2 text-right font-medium">
-                    {t("admin.section.backups.colSize")}
-                  </th>
-                  <th className="px-3 py-2 text-right font-medium">
-                    {t("admin.section.backups.colCreatedAt")}
-                  </th>
-                  <th className="px-3 py-2 text-right font-medium">
-                    {t("admin.section.backups.colActions")}
-                  </th>
-                </tr>
-              </thead>
-              {/* `backup-rows` names the read rows. The three branches above
-                  are a spinner, a load error and an empty state, so the
-                  marker cannot stand for a page that has not answered yet.
-                  The narrow-layout list below carries it too, so a wait on
-                  it holds at any viewport. */}
-              <tbody data-slot="backup-rows" className="divide-border divide-y">
-                {rows.map((row, i) => (
-                  <tr
-                    key={row.id}
-                    data-backup-id={row.id}
-                    data-backup-username={row.username}
-                    className={i % 2 === 0 ? "bg-muted/30" : ""}
-                  >
-                    <td className="px-3 py-2 font-medium">{row.username}</td>
-                    <td className="px-3 py-2">
-                      <Badge variant="secondary" className="text-xs">
-                        {formatBackupType(row.type, t)}
-                      </Badge>
-                    </td>
-                    <td className="px-3 py-2 text-right font-mono text-xs tabular-nums">
-                      {formatBytes(row.sizeBytes, locale)}
-                    </td>
-                    <td className="text-muted-foreground px-3 py-2 text-right text-xs whitespace-nowrap">
-                      {fmt.dateTime(row.createdAt)}
-                    </td>
-                    <td className="px-3 py-2 text-right whitespace-nowrap">
-                      <div className="flex items-center justify-end gap-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          data-testid="backup-download"
-                          disabled={downloadingId === row.id}
-                          onClick={() => handleDownload(row)}
-                          aria-label={t("admin.section.backups.downloadAria", {
-                            username: row.username,
-                          })}
-                          className="min-h-11"
-                        >
-                          {downloadingId === row.id ? (
-                            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
-                          ) : (
-                            <Download className="h-3.5 w-3.5" />
-                          )}
-                          {t("admin.section.backups.download")}
-                        </Button>
-                        <RestoreRowDialog
-                          row={row}
-                          pending={
-                            (restore.isPending &&
-                              restore.variables?.row.id === row.id) ||
-                            activeOwners.has(row.userId)
-                          }
-                          onConfirm={(options) =>
-                            restore.mutate({ row, ...options })
-                          }
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+          <BackupRowsTable rows={rows} {...rowActions} />
 
-          {/* Narrow layout: each backup as a self-contained card with the
-              meta line + a flex-wrapping action row, so Download / Restore
-              stay reachable on a phone instead of scrolling off-screen. */}
-          <ul
-            className="space-y-2 md:hidden"
-            data-slot="backup-rows"
-            data-testid="admin-backups-mobile-list"
-          >
-            {rows.map((row) => (
-              <ListRow
-                asChild
-                key={row.id}
-                className="bg-muted/30 border-border"
-              >
-                <li data-backup-id={row.id} data-backup-username={row.username}>
-                  <div className="flex items-center gap-2">
-                    <span className="truncate font-medium">{row.username}</span>
-                    <Badge variant="secondary" className="text-xs">
-                      {formatBackupType(row.type, t)}
-                    </Badge>
-                  </div>
-                  <p className="text-muted-foreground text-xs">
-                    {t("admin.section.backups.colSize")}:{" "}
-                    {formatBytes(row.sizeBytes, locale)} ·{" "}
-                    {fmt.dateTime(row.createdAt)}
-                  </p>
-                  <div className="mt-2 flex flex-wrap items-center gap-2">
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      data-testid="backup-download"
-                      disabled={downloadingId === row.id}
-                      onClick={() => handleDownload(row)}
-                      aria-label={t("admin.section.backups.downloadAria", {
-                        username: row.username,
-                      })}
-                      className="min-h-11"
-                    >
-                      {downloadingId === row.id ? (
-                        <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
-                      ) : (
-                        <Download className="h-3.5 w-3.5" />
-                      )}
-                      {t("admin.section.backups.download")}
-                    </Button>
-                    <RestoreRowDialog
-                      row={row}
-                      pending={
-                        (restore.isPending &&
-                          restore.variables?.row.id === row.id) ||
-                        activeOwners.has(row.userId)
-                      }
-                      onConfirm={(options) =>
-                        restore.mutate({ row, ...options })
-                      }
-                    />
-                  </div>
-                </li>
-              </ListRow>
-            ))}
-          </ul>
+          <BackupRowsCards rows={rows} {...rowActions} />
 
           <p className="text-muted-foreground mt-2 text-xs">
             {t("admin.section.backups.retentionLabel", {
diff --git a/src/components/admin/backups/backup-rows.tsx b/src/components/admin/backups/backup-rows.tsx
new file mode 100644
index 000000000..316148eb8
--- /dev/null
+++ b/src/components/admin/backups/backup-rows.tsx
@@ -0,0 +1,185 @@
+import { Download, Loader2 } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ListRow } from "@/components/ui/list-row";
+import { formatBytes } from "@/lib/format/bytes";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { BackupRow } from "@/types/backups";
+
+import { RestoreRowDialog } from "./restore-dialog";
+
+/** What a row's Download and Restore controls act through. */
+export type BackupRowActionProps = {
+  downloadingId: string | null;
+  onDownload: (row: BackupRow) => void;
+  restorePending: (row: BackupRow) => boolean;
+  onRestore: (
+    row: BackupRow,
+    options: { restoreInstanceSettings: boolean },
+  ) => void;
+};
+
+/**
+ * Render the `DataBackup.type` enum (`WEEKLY_AUTO` / `MANUAL`) as a
+ * human label. Unknown values fall through to the raw enum so a future
+ * type added in the schema is still legible at a glance.
+ */
+function formatBackupType(
+  type: string,
+  t: ReturnType<typeof useTranslations>["t"],
+) {
+  if (type === "WEEKLY_AUTO") return t("admin.section.backups.typeWeeklyAuto");
+  if (type === "MANUAL") return t("admin.section.backups.typeManual");
+  return type;
+}
+
+/** Download and Restore for one copy; the same pair in both layouts. */
+function BackupRowActions({
+  row,
+  downloadingId,
+  onDownload,
+  restorePending,
+  onRestore,
+}: BackupRowActionProps & { row: BackupRow }) {
+  const { t } = useTranslations();
+  return (
+    <>
+      <Button
+        size="sm"
+        variant="outline"
+        data-testid="backup-download"
+        disabled={downloadingId === row.id}
+        onClick={() => onDownload(row)}
+        aria-label={t("admin.section.backups.downloadAria", {
+          username: row.username,
+        })}
+        className="min-h-11"
+      >
+        {downloadingId === row.id ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+        ) : (
+          <Download className="h-3.5 w-3.5" />
+        )}
+        {t("admin.section.backups.download")}
+      </Button>
+      <RestoreRowDialog
+        row={row}
+        pending={restorePending(row)}
+        onConfirm={(options) => onRestore(row, options)}
+      />
+    </>
+  );
+}
+
+/**
+ * Wide layout: the canonical table. Hidden below `md`, where the five
+ * columns push Download / Restore off-screen behind a horizontal scroll; the
+ * card list takes over there.
+ */
+export function BackupRowsTable({
+  rows,
+  ...actions
+}: BackupRowActionProps & { rows: BackupRow[] }) {
+  const { t, locale } = useTranslations();
+  const fmt = useFormatters();
+  return (
+    <div className="relative hidden overflow-x-auto md:block">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-muted-foreground border-b text-xs">
+            <th className="px-3 py-2 text-left font-medium">
+              {t("admin.section.backups.colUser")}
+            </th>
+            <th className="px-3 py-2 text-left font-medium">
+              {t("admin.section.backups.colType")}
+            </th>
+            <th className="px-3 py-2 text-right font-medium">
+              {t("admin.section.backups.colSize")}
+            </th>
+            <th className="px-3 py-2 text-right font-medium">
+              {t("admin.section.backups.colCreatedAt")}
+            </th>
+            <th className="px-3 py-2 text-right font-medium">
+              {t("admin.section.backups.colActions")}
+            </th>
+          </tr>
+        </thead>
+        {/* `backup-rows` names the read rows. The three branches above
+                  are a spinner, a load error and an empty state, so the
+                  marker cannot stand for a page that has not answered yet.
+                  The narrow-layout list below carries it too, so a wait on
+                  it holds at any viewport. */}
+        <tbody data-slot="backup-rows" className="divide-border divide-y">
+          {rows.map((row, i) => (
+            <tr
+              key={row.id}
+              data-backup-id={row.id}
+              data-backup-username={row.username}
+              className={i % 2 === 0 ? "bg-muted/30" : ""}
+            >
+              <td className="px-3 py-2 font-medium">{row.username}</td>
+              <td className="px-3 py-2">
+                <Badge variant="secondary" className="text-xs">
+                  {formatBackupType(row.type, t)}
+                </Badge>
+              </td>
+              <td className="px-3 py-2 text-right font-mono text-xs tabular-nums">
+                {formatBytes(row.sizeBytes, locale)}
+              </td>
+              <td className="text-muted-foreground px-3 py-2 text-right text-xs whitespace-nowrap">
+                {fmt.dateTime(row.createdAt)}
+              </td>
+              <td className="px-3 py-2 text-right whitespace-nowrap">
+                <div className="flex items-center justify-end gap-2">
+                  <BackupRowActions row={row} {...actions} />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * Narrow layout: each backup as a self-contained card with the meta line and
+ * a flex-wrapping action row, so Download / Restore stay reachable on a phone
+ * instead of scrolling off-screen.
+ */
+export function BackupRowsCards({
+  rows,
+  ...actions
+}: BackupRowActionProps & { rows: BackupRow[] }) {
+  const { t, locale } = useTranslations();
+  const fmt = useFormatters();
+  return (
+    <ul
+      className="space-y-2 md:hidden"
+      data-slot="backup-rows"
+      data-testid="admin-backups-mobile-list"
+    >
+      {rows.map((row) => (
+        <ListRow asChild key={row.id} className="bg-muted/30 border-border">
+          <li data-backup-id={row.id} data-backup-username={row.username}>
+            <div className="flex items-center gap-2">
+              <span className="truncate font-medium">{row.username}</span>
+              <Badge variant="secondary" className="text-xs">
+                {formatBackupType(row.type, t)}
+              </Badge>
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {t("admin.section.backups.colSize")}:{" "}
+              {formatBytes(row.sizeBytes, locale)} ·{" "}
+              {fmt.dateTime(row.createdAt)}
+            </p>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <BackupRowActions row={row} {...actions} />
+            </div>
+          </li>
+        </ListRow>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/admin/backups/backup-upload-card.tsx b/src/components/admin/backups/backup-upload-card.tsx
new file mode 100644
index 000000000..e4d386520
--- /dev/null
+++ b/src/components/admin/backups/backup-upload-card.tsx
@@ -0,0 +1,65 @@
+import { Loader2, Upload } from "lucide-react";
+import type { ChangeEvent, RefObject } from "react";
+
+import { Button } from "@/components/ui/button";
+import { useTranslations } from "@/lib/i18n/context";
+
+/**
+ * The upload card: separate from the table so admins can ingest a backup file
+ * independently of any existing rows. The visible button proxies a hidden
+ * file input so the layout stays clean while keyboard and screen-reader users
+ * keep a labelled control.
+ */
+export function BackupUploadCard({
+  pending,
+  fileInputRef,
+  onFileChange,
+}: {
+  pending: boolean;
+  fileInputRef: RefObject<HTMLInputElement | null>;
+  onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <div className="bg-muted/30 border-border flex flex-col gap-2 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <div className="text-sm font-medium">
+          {t("admin.section.backups.uploadTitle")}
+        </div>
+        <p className="text-muted-foreground text-xs">
+          {t("admin.section.backups.uploadDescription")}{" "}
+          <span
+            data-slot="backup-upload-help"
+            className="text-muted-foreground"
+          >
+            {t("admin.section.backups.uploadHelp")}
+          </span>
+        </p>
+      </div>
+      <div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="application/json,.json,application/gzip,.gz"
+          className="sr-only"
+          onChange={onFileChange}
+          aria-label={t("admin.section.backups.uploadButton")}
+        />
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={pending}
+          onClick={() => fileInputRef.current?.click()}
+          className="min-h-11"
+        >
+          {pending ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+          ) : (
+            <Upload className="h-3.5 w-3.5" />
+          )}
+          {t("admin.section.backups.uploadButton")}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/admin/backups/restore-dialog.tsx b/src/components/admin/backups/restore-dialog.tsx
new file mode 100644
index 000000000..73a091cbb
--- /dev/null
+++ b/src/components/admin/backups/restore-dialog.tsx
@@ -0,0 +1,344 @@
+import { useQuery } from "@tanstack/react-query";
+import { History, Loader2 } from "lucide-react";
+import { useState } from "react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ApiError, apiGet } from "@/lib/api/api-fetch";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import type { BackupRow } from "@/types/backups";
+
+/**
+ * How long the restore dialog waits for the contents of a copy. A copy's
+ * counts are kept with it and come back at once; this only runs out on a copy
+ * from an earlier version that the server is still reading whole, and stays
+ * under the minute a reverse proxy commonly allows a request.
+ */
+const PREVIEW_TIMEOUT_MS = 55_000;
+
+/**
+ * What the restore dialog says when the contents did not come back: the key
+ * the copy needs and this server lacks, a copy from an earlier version still
+ * being read when the dialog stopped waiting, or anything else.
+ */
+export function restorePreviewFailure(
+  error: unknown,
+): "keyMissing" | "stillReading" | "unavailable" {
+  if (
+    error instanceof ApiError &&
+    error.meta?.errorCode === "backup.key.missing"
+  ) {
+    return "keyMissing";
+  }
+  // `AbortSignal.timeout` rejects the fetch with a DOMException of this name.
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    (error as { name?: unknown }).name === "TimeoutError"
+  ) {
+    return "stillReading";
+  }
+  return "unavailable";
+}
+
+/**
+ * The sections a restore preview names, in render order. Each
+ * entry sums one or more `BackupSummary` counters under one human label;
+ * every counter NOT named here still reaches the operator through the
+ * trailing "other records" line, so a future summary key can be forgotten
+ * here without silently vanishing from the preview.
+ */
+const RESTORE_PREVIEW_SECTIONS: ReadonlyArray<{
+  labelKey: string;
+  keys: readonly string[];
+}> = [
+  { labelKey: "previewMeasurements", keys: ["measurements"] },
+  {
+    labelKey: "previewMedications",
+    keys: ["medications", "intakeEvents", "medicationSideEffects"],
+  },
+  { labelKey: "previewMood", keys: ["moodEntries"] },
+  { labelKey: "previewLabs", keys: ["labResults", "biomarkers"] },
+  { labelKey: "previewDocuments", keys: ["documents"] },
+  { labelKey: "previewWorkouts", keys: ["workouts"] },
+  { labelKey: "previewCycles", keys: ["cycles", "cycleDayLogs"] },
+  {
+    labelKey: "previewVisits",
+    keys: ["encounters", "practitioners", "encounterLinks"],
+  },
+  {
+    labelKey: "previewVaccinations",
+    keys: ["vaccinations", "vaccinationLinks", "customVaccines"],
+  },
+  {
+    labelKey: "previewReminders",
+    keys: ["measurementReminders", "measurementReminderEvents"],
+  },
+  {
+    labelKey: "previewCustomMetrics",
+    keys: ["customMetrics", "customMetricEntries"],
+  },
+  { labelKey: "previewHealthScores", keys: ["healthScoreRecords"] },
+];
+
+/**
+ * What a copy contains, fetched the moment the restore dialog opens, so the
+ * typed confirmation is an informed one. A failed preview never blocks the
+ * restore; it states its own absence instead.
+ */
+export function RestorePreview({
+  backupId,
+  open,
+}: {
+  backupId: string;
+  open: boolean;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  // Never retried. The server answers from counts kept with the copy, at
+  // once; only a copy from an earlier version is read whole, and that read
+  // goes on (and is kept) after this request gives up. A retry would only
+  // start the same read a second time (#1031).
+  const preview = useQuery({
+    queryKey: queryKeys.adminBackupSummary(backupId),
+    queryFn: () =>
+      apiGet<{ summary: Record<string, unknown> }>(
+        `/api/admin/backups/${backupId}/summary`,
+        { signal: AbortSignal.timeout(PREVIEW_TIMEOUT_MS) },
+      ),
+    enabled: open,
+    staleTime: 60_000,
+    retry: false,
+  });
+  const previewFailure = restorePreviewFailure(preview.error);
+  const numericSummary: Record<string, number> = {};
+  if (preview.data?.summary) {
+    for (const [key, value] of Object.entries(preview.data.summary)) {
+      if (typeof value === "number") numericSummary[key] = value;
+    }
+  }
+  const namedKeys = new Set(
+    RESTORE_PREVIEW_SECTIONS.flatMap((section) => section.keys),
+  );
+  const previewRows = RESTORE_PREVIEW_SECTIONS.map((section) => ({
+    labelKey: section.labelKey,
+    count: section.keys.reduce(
+      (sum, key) => sum + (numericSummary[key] ?? 0),
+      0,
+    ),
+  })).filter((entry) => entry.count > 0);
+  const otherCount = Object.entries(numericSummary)
+    .filter(([key]) => !namedKeys.has(key))
+    .reduce((sum, [, value]) => sum + value, 0);
+
+  return (
+    <div className="rounded-md border p-3 text-sm" data-slot="restore-preview">
+      <p className="text-muted-foreground mb-1.5 font-medium">
+        {t("admin.section.backups.previewTitle")}
+      </p>
+      {preview.isLoading && (
+        <p className="text-muted-foreground">
+          {t("admin.section.backups.previewLoading")}
+        </p>
+      )}
+      {preview.isError &&
+        (previewFailure === "keyMissing" &&
+        preview.error instanceof ApiError ? (
+          // The one preview failure the restore would repeat: say which
+          // key, so the operator can put it back before trying.
+          <p role="alert" className="text-destructive">
+            {t("admin.section.backups.previewKeyMissing", {
+              keys: Array.isArray(preview.error.meta?.keyIds)
+                ? preview.error.meta.keyIds.map(String).join(", ")
+                : "",
+            })}
+          </p>
+        ) : previewFailure === "stillReading" ? (
+          <p className="text-muted-foreground">
+            {t("admin.section.backups.previewStillReading")}
+          </p>
+        ) : (
+          <p className="text-muted-foreground">
+            {t("admin.section.backups.previewUnavailable")}
+          </p>
+        ))}
+      {preview.isSuccess && (
+        <ul className="grid list-none grid-cols-1 gap-x-4 gap-y-0.5 p-0 sm:grid-cols-2">
+          {previewRows.map((entry) => (
+            <li
+              key={entry.labelKey}
+              className="flex items-baseline justify-between gap-2"
+            >
+              <span className="text-muted-foreground">
+                {t(`admin.section.backups.${entry.labelKey}`)}
+              </span>
+              <span className="tabular-nums">{fmt.integer(entry.count)}</span>
+            </li>
+          ))}
+          {otherCount > 0 && (
+            <li className="flex items-baseline justify-between gap-2">
+              <span className="text-muted-foreground">
+                {t("admin.section.backups.previewOther")}
+              </span>
+              <span className="tabular-nums">{fmt.integer(otherCount)}</span>
+            </li>
+          )}
+          {previewRows.length === 0 && otherCount === 0 && (
+            <li className="text-muted-foreground">
+              {t("admin.section.backups.previewEmpty")}
+            </li>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Typed-confirmation dialog for restore. The destructive Restore button
+ * is gated behind:
+ *   1. Opening the dialog (one click).
+ *   2. Reading the warning copy (Title + Description spell out exactly
+ *      what's about to happen + which user it affects).
+ *   3. Typing the literal string `RESTORE` into the prompt input —
+ *      anything else keeps the confirm button disabled.
+ *
+ * Three independent steps before the request fires == "triple confirm".
+ * Mirrors the wipe dialog's pattern but adds the typed gate because the
+ * blast radius is bigger (re-creates rows, not just deletes).
+ */
+export function RestoreRowDialog({
+  row,
+  pending,
+  onConfirm,
+}: {
+  row: BackupRow;
+  pending: boolean;
+  onConfirm: (options: { restoreInstanceSettings: boolean }) => void;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const [open, setOpen] = useState(false);
+  const [typed, setTyped] = useState("");
+  const matched = typed.trim() === "RESTORE";
+  // Off unless the operator says otherwise. A disaster-recovery snapshot
+  // carries the host's own settings alongside the account's data, and putting
+  // one account back is not a reason to reconfigure the installation for
+  // everybody on it — so the second effect is a second decision.
+  const [withInstanceSettings, setWithInstanceSettings] = useState(false);
+
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setTyped("");
+          setWithInstanceSettings(false);
+        }
+      }}
+    >
+      <AlertDialogTrigger asChild>
+        <Button
+          size="sm"
+          variant="destructive"
+          data-testid="backup-restore-trigger"
+          disabled={pending}
+          aria-label={t("admin.section.backups.restoreAria", {
+            username: row.username,
+          })}
+          className="min-h-11"
+        >
+          {pending ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+          ) : (
+            <History className="h-3.5 w-3.5" />
+          )}
+          {t("admin.section.backups.restore")}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("admin.section.backups.restoreTitle")}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("admin.section.backups.restoreDescription", {
+              username: row.username,
+              when: fmt.dateTime(row.createdAt),
+            })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {/* What the file contains, before the typed gate. */}
+        <RestorePreview backupId={row.id} open={open} />
+        {/* The second decision, before the typed gate rather than after it:
+            the account's data comes back either way, the host's settings only
+            if this is ticked. */}
+        <label
+          className="flex items-start gap-2 text-sm"
+          data-slot="restore-instance-settings"
+        >
+          <Checkbox
+            data-testid="backup-restore-instance-settings"
+            checked={withInstanceSettings}
+            onCheckedChange={(next) => setWithInstanceSettings(next === true)}
+            className="mt-0.5"
+          />
+          <span>
+            {t("admin.section.backups.restoreInstanceSettingsLabel")}
+            <span className="text-muted-foreground block text-xs">
+              {t("admin.section.backups.restoreInstanceSettingsHint")}
+            </span>
+          </span>
+        </label>
+        <div className="space-y-2">
+          <Label htmlFor={`restore-prompt-${row.id}`}>
+            {t("admin.section.backups.restorePromptLabel")}
+          </Label>
+          <Input
+            id={`restore-prompt-${row.id}`}
+            data-testid="backup-restore-prompt"
+            value={typed}
+            onChange={(e) => setTyped(e.target.value)}
+            autoComplete="off"
+            spellCheck={false}
+            placeholder="RESTORE"
+          />
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+          <AlertDialogAction
+            data-testid="backup-restore-confirm"
+            disabled={!matched || pending}
+            variant="destructive"
+            onClick={() => {
+              if (!matched) return;
+              setOpen(false);
+              setTyped("");
+              onConfirm({ restoreInstanceSettings: withInstanceSettings });
+              setWithInstanceSettings(false);
+            }}
+          >
+            {pending
+              ? t("admin.section.backups.restoreInProgress")
+              : t("admin.section.backups.restoreConfirm")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/admin/backups/restore-notices.tsx b/src/components/admin/backups/restore-notices.tsx
new file mode 100644
index 000000000..bb1dd6bff
--- /dev/null
+++ b/src/components/admin/backups/restore-notices.tsx
@@ -0,0 +1,353 @@
+import { AlertTriangle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { BackupScheduleStatus } from "@/lib/jobs/backup-schedule-status";
+import type {
+  MissingBackupSection,
+  RestoreSkipSummary,
+  SkippedCatalogue,
+} from "@/lib/export/restore-skips";
+
+/**
+ * Which catalogue a skipped key belonged to, as a label.
+ *
+ * Spelled out with literal `t()` calls rather than an interpolated key, so
+ * `i18n-call-site-coverage.test.ts` can see each one and prove the bundle has
+ * it. An interpolated key is invisible to that guard and shows up as raw dot
+ * notation in production the day someone renames a catalogue.
+ */
+function catalogueLabel(
+  catalogue: SkippedCatalogue,
+  t: ReturnType<typeof useTranslations>["t"],
+) {
+  if (catalogue === "cycleSymptom") {
+    return t("admin.section.backups.restoreSkippedCycleSymptom");
+  }
+  if (catalogue === "illnessSymptom") {
+    return t("admin.section.backups.restoreSkippedIllnessSymptom");
+  }
+  if (catalogue === "moodTag") {
+    return t("admin.section.backups.restoreSkippedMoodTag");
+  }
+  if (catalogue === "visitReference") {
+    return t("admin.section.backups.restoreSkippedVisitReference");
+  }
+  if (catalogue === "vaccinationReference") {
+    return t("admin.section.backups.restoreSkippedVaccinationReference");
+  }
+  if (catalogue === "checkupClosure") {
+    return t("admin.section.backups.restoreSkippedCheckupClosure");
+  }
+  if (catalogue === "reminderReference") {
+    return t("admin.section.backups.restoreSkippedReminderReference");
+  }
+  if (catalogue === "coachAttachment") {
+    return t("admin.section.backups.restoreSkippedCoachAttachment");
+  }
+  if (catalogue === "coachReference") {
+    return t("admin.section.backups.restoreSkippedCoachReference");
+  }
+  if (catalogue === "documentConditionLink") {
+    return t("admin.section.backups.restoreSkippedDocumentConditionLink");
+  }
+  if (catalogue === "relationLink") {
+    return t("admin.section.backups.restoreSkippedRelationLink");
+  }
+  if (catalogue === "extractedFact") {
+    return t("admin.section.backups.restoreSkippedExtractedFact");
+  }
+  if (catalogue === "factCommitment") {
+    return t("admin.section.backups.restoreSkippedFactCommitment");
+  }
+  if (catalogue === "moodFactor") {
+    return t("admin.section.backups.restoreSkippedMoodFactor");
+  }
+  if (catalogue === "personalRecordReference") {
+    return t("admin.section.backups.restoreSkippedPersonalRecordReference");
+  }
+  if (catalogue === "ecgReference") {
+    return t("admin.section.backups.restoreSkippedEcgReference");
+  }
+  if (catalogue === "symptomEpisodeReference") {
+    return t("admin.section.backups.restoreSkippedSymptomEpisodeReference");
+  }
+  if (catalogue === "visitCiphertext") {
+    return t("admin.section.backups.restoreSkippedVisitCiphertext");
+  }
+  if (catalogue === "vaccinationCiphertext") {
+    return t("admin.section.backups.restoreSkippedVaccinationCiphertext");
+  }
+  if (catalogue === "environmentLocationCiphertext") {
+    return t(
+      "admin.section.backups.restoreSkippedEnvironmentLocationCiphertext",
+    );
+  }
+  if (catalogue === "moodLabelCiphertext") {
+    return t("admin.section.backups.restoreSkippedMoodLabelCiphertext");
+  }
+  if (catalogue === "cycleCiphertext") {
+    return t("admin.section.backups.restoreSkippedCycleCiphertext");
+  }
+  if (catalogue === "medicationTarget") {
+    return t("admin.section.backups.restoreSkippedMedicationTarget");
+  }
+  if (catalogue === "scheduleRevisionLink") {
+    return t("admin.section.backups.restoreSkippedScheduleRevisionLink");
+  }
+  if (catalogue === "accountSetting") {
+    return t("admin.section.backups.restoreSkippedAccountSetting");
+  }
+  // Not a fallback: the chain above is exhaustive and this line is what makes
+  // the compiler say so. A catalogue added without a label here now stops the
+  // build instead of shipping under a label that belongs to something else,
+  // which is what three of them were already doing — a dropped Coach
+  // attachment reached the operator's screen labelled "mood factor".
+  const unlabelled: never = catalogue;
+  return unlabelled;
+}
+
+/**
+ * Which section a refused file claimed and did not carry, as a label.
+ *
+ * Spelled out with literal `t()` calls for the same reason as
+ * `catalogueLabel` above — an interpolated key is invisible to
+ * `i18n-call-site-coverage.test.ts`, and a renamed section would ship as raw
+ * dot notation. The `never` at the foot is what makes the compiler say the
+ * chain is exhaustive.
+ */
+function missingSectionLabel(
+  section: MissingBackupSection,
+  t: ReturnType<typeof useTranslations>["t"],
+) {
+  if (section === "documents") {
+    return t("admin.section.backups.restoreMissingDocuments");
+  }
+  if (section === "workouts") {
+    return t("admin.section.backups.restoreMissingWorkouts");
+  }
+  if (section === "mentalHealth") {
+    return t("admin.section.backups.restoreMissingMentalHealth");
+  }
+  if (section === "consent") {
+    return t("admin.section.backups.restoreMissingConsent");
+  }
+  const unlabelled: never = section;
+  return unlabelled;
+}
+
+/**
+ * The refused sections a failed restore job names, or none.
+ *
+ * Keyed on the failure's `code` and not on its message: the message is prose
+ * the server may reword, and matching on it would turn a copy edit into a
+ * silent loss of the panel.
+ */
+export function missingSectionsOf(
+  failure: { code: string; sections?: readonly unknown[] } | null | undefined,
+): MissingBackupSection[] {
+  if (failure?.code !== "backup.section.missing") return [];
+  const sections = failure.sections;
+  if (!Array.isArray(sections)) return [];
+  return sections.filter(
+    (section): section is MissingBackupSection => typeof section === "string",
+  );
+}
+
+/**
+ * Why a file was refused, and what to do about it.
+ *
+ * Held on screen rather than left to the toast, exactly like the skip report
+ * below it. The operator refused here is often holding the only copy of an
+ * account; "restore failed" for four seconds is not enough to act on, and the
+ * two facts that let them act — which section the file claimed and did not
+ * carry, and that nothing was changed — have to survive long enough to be read.
+ */
+export function RestoreRefusalNotice({
+  sections,
+  onDismiss,
+}: {
+  sections: MissingBackupSection[];
+  onDismiss: () => void;
+}) {
+  const { t } = useTranslations();
+  if (sections.length === 0) return null;
+  return (
+    <div
+      role="alert"
+      data-slot="restore-refusal-notice"
+      className="border-destructive/40 bg-destructive/10 rounded-md border px-3 py-2 text-sm"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-start gap-2">
+          <AlertTriangle
+            className="mt-0.5 h-4 w-4 shrink-0"
+            aria-hidden="true"
+          />
+          <div>
+            <p className="font-medium">
+              {t("admin.section.backups.restoreMissingTitle")}
+            </p>
+            <p className="text-muted-foreground text-xs">
+              {t("admin.section.backups.restoreMissingDescription")}
+            </p>
+            <ul className="mt-2 space-y-1">
+              {sections.map((section) => (
+                <li key={section} className="text-xs">
+                  {missingSectionLabel(section, t)}
+                </li>
+              ))}
+            </ul>
+            <p className="text-muted-foreground mt-2 text-xs">
+              {t("admin.section.backups.restoreMissingRemedy")}
+            </p>
+          </div>
+        </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onDismiss}
+          className="min-h-11"
+        >
+          {t("common.dismiss")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * What the last restore could not put back.
+ *
+ * Its own component, and exported, so it can be rendered against a report in a
+ * test instead of only through a state transition the SSR smoke tests here
+ * cannot drive. A report that reaches the response and never reaches the screen
+ * is the same silence the reporting exists to end, so the render is worth
+ * proving on its own.
+ *
+ * It names every key rather than totalling them away: an operator who cannot
+ * see WHICH symptom went missing cannot decide whether it mattered.
+ */
+export function RestoreSkipReport({
+  report,
+  onDismiss,
+}: {
+  report: RestoreSkipSummary;
+  onDismiss: () => void;
+}) {
+  const { t } = useTranslations();
+  if (report.links === 0) return null;
+  return (
+    <div
+      role="status"
+      data-slot="restore-skip-report"
+      className="border-warning/40 bg-warning/10 rounded-md border px-3 py-2 text-sm"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-start gap-2">
+          <AlertTriangle
+            className="mt-0.5 h-4 w-4 shrink-0"
+            aria-hidden="true"
+          />
+          <div>
+            <p className="font-medium">
+              {t("admin.section.backups.restoreSkippedTitle", {
+                links: String(report.links),
+              })}
+            </p>
+            <p className="text-muted-foreground text-xs">
+              {t("admin.section.backups.restoreSkippedDescription")}
+            </p>
+            <ul className="mt-2 space-y-1">
+              {report.catalogueKeys.map((entry) => (
+                <li key={`${entry.catalogue}:${entry.key}`} className="text-xs">
+                  <span className="font-mono">{entry.key}</span>{" "}
+                  <span className="text-muted-foreground">
+                    {catalogueLabel(entry.catalogue, t)}
+                    {" · "}
+                    {t("admin.section.backups.restoreSkippedLinks", {
+                      count: String(entry.links),
+                    })}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onDismiss}
+          className="min-h-11"
+        >
+          {t("common.dismiss")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Says out loud whether the SCHEDULE is still alive.
+ *
+ * The weekly pass on the maintainer's own instance stopped producing copies
+ * and nothing surfaced it for a month and a half: the table listed the rows it
+ * had, each with an ordinary timestamp, and a copy from six weeks ago reads
+ * exactly like one made on Sunday until somebody does the subtraction. Two
+ * independent facts are shown, because they fail at different times — the age
+ * of the newest scheduled copy never ages out, while the run's own outcome
+ * carries the reason ("job timed out") and survives only as long as pg-boss
+ * keeps the row.
+ *
+ * Not dismissible: it reflects live state, so the only way to clear it is to
+ * make a backup succeed.
+ */
+export function ScheduleHealthNotice({
+  schedule,
+}: {
+  schedule: BackupScheduleStatus;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  if (!schedule.stale && !schedule.lastRunFailed) return null;
+
+  return (
+    <div
+      role="alert"
+      data-slot="backup-schedule-notice"
+      className="border-destructive/40 bg-destructive/10 rounded-md border px-3 py-2 text-sm"
+    >
+      <div className="flex items-start gap-2">
+        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+        <div>
+          <p className="font-medium">
+            {schedule.stale
+              ? t("admin.section.backups.scheduleStaleTitle")
+              : t("admin.section.backups.scheduleFailedTitle")}
+          </p>
+          {schedule.stale ? (
+            <p className="text-xs">
+              {t("admin.section.backups.scheduleStaleDescription", {
+                days: schedule.lastSuccessAgeDays ?? 0,
+                threshold: schedule.staleAfterDays,
+              })}
+            </p>
+          ) : null}
+          {schedule.lastRunFailed && schedule.lastRun ? (
+            <p className="text-xs">
+              {t("admin.section.backups.scheduleFailedDescription", {
+                when: fmt.dateTime(schedule.lastRun.at),
+                reason:
+                  schedule.lastRun.error ||
+                  t("admin.section.backups.scheduleFailedNoReason"),
+              })}
+            </p>
+          ) : null}
+          <p className="text-muted-foreground mt-2 text-xs">
+            {t("admin.section.backups.scheduleRemedy")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/admin/backups/use-backup-actions.ts b/src/components/admin/backups/use-backup-actions.ts
new file mode 100644
index 000000000..033ea391b
--- /dev/null
+++ b/src/components/admin/backups/use-backup-actions.ts
@@ -0,0 +1,100 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import type { useRecentProof } from "@/components/settings/security-section/use-recent-proof";
+import {
+  ReproofCancelledError,
+  throwIfReproofRequired,
+} from "@/components/settings/security-section/use-recent-proof";
+import { apiFetchRaw, apiPost } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import type { BackupRow } from "@/types/backups";
+
+import { getApiErrorMessage } from "../_shared";
+
+/** "Run backup now": enqueues the pg-boss `data-backup` job. */
+export function useRunBackup() {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => {
+      return apiPost<{ jobId: string | null }>("/api/admin/backups/run");
+    },
+    onSuccess: () => {
+      toast.success(t("admin.section.backups.runEnqueued"));
+      // The job runs async; refetch after a short delay so the new row
+      // shows up without leaving the user wondering whether the click
+      // did anything.
+      setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: queryKeys.adminBackups() });
+      }, 2000);
+    },
+    onError: (err) => {
+      showErrorToast(
+        err instanceof Error && err.message
+          ? err.message
+          : t("admin.section.backups.runFailed"),
+        { cause: err },
+      );
+    },
+  });
+}
+
+/** One backup file to the browser, after a fresh proof when one is due. */
+export function useBackupDownload(
+  recentProof: ReturnType<typeof useRecentProof>,
+) {
+  const { t } = useTranslations();
+  // Per-row download in-flight state — keyed by backup id so two
+  // parallel clicks on different rows don't share a single spinner.
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+
+  async function handleDownload(row: BackupRow) {
+    setDownloadingId(row.id);
+    try {
+      // apiFetchRaw: the download needs the raw Response for the blob +
+      // the Content-Disposition filename header.
+      const res = await recentProof.run(async () =>
+        throwIfReproofRequired(
+          await apiFetchRaw(`/api/admin/backups/${row.id}/download`),
+        ),
+      );
+      if (!res.ok) {
+        throw new Error(await getApiErrorMessage(res));
+      }
+      // Use the server-provided Content-Disposition filename if present,
+      // otherwise fall back to a deterministic client-side name. The
+      // server filename is more accurate (uses the actual createdAt).
+      const cd = res.headers.get("content-disposition") ?? "";
+      const match = cd.match(/filename="?([^";]+)"?/i);
+      const fallback = `healthlog-backup-${row.userId}-${row.createdAt.slice(0, 10)}.json`;
+      const filename = match?.[1] ?? fallback;
+
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success(t("admin.section.backups.downloadStarted"));
+    } catch (err) {
+      if (err instanceof ReproofCancelledError) return;
+      showErrorToast(
+        err instanceof Error && err.message
+          ? err.message
+          : t("admin.section.backups.downloadFailed"),
+        { cause: err },
+      );
+    } finally {
+      setDownloadingId(null);
+    }
+  }
+
+  return { downloadingId, handleDownload };
+}
diff --git a/src/components/admin/backups/use-backup-restores.ts b/src/components/admin/backups/use-backup-restores.ts
new file mode 100644
index 000000000..97531da48
--- /dev/null
+++ b/src/components/admin/backups/use-backup-restores.ts
@@ -0,0 +1,213 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+
+import type { useRecentProof } from "@/components/settings/security-section/use-recent-proof";
+import { ReproofCancelledError } from "@/components/settings/security-section/use-recent-proof";
+import { ApiError, apiGet, apiPost } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import type {
+  MissingBackupSection,
+  RestoreSkipSummary,
+} from "@/lib/export/restore-skips";
+import type { BackupRestoreJobView } from "@/lib/jobs/backup-restore";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import { randomId } from "@/lib/random-id";
+import type { BackupRow } from "@/types/backups";
+
+import { isActiveRestore } from "../backup-restore-status";
+import { missingSectionsOf } from "./restore-notices";
+
+const DISMISSED_RESTORES_KEY = "healthlog.admin.backups.dismissedRestores";
+
+/** Dismissed restore panels, from this browser. Empty when storage is off. */
+function readDismissedRestores(): string[] {
+  try {
+    if (typeof window === "undefined") return [];
+    const raw = window.localStorage.getItem(DISMISSED_RESTORES_KEY);
+    const parsed: unknown = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed)
+      ? parsed.filter((id): id is string => typeof id === "string")
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeDismissedRestores(ids: string[]): void {
+  try {
+    // The list only ever shows a day of jobs; fifty ids is weeks of them.
+    window.localStorage.setItem(
+      DISMISSED_RESTORES_KEY,
+      JSON.stringify(ids.slice(-50)),
+    );
+  } catch {
+    // A private window: the panel comes back on reload, nothing else breaks.
+  }
+}
+
+/**
+ * The restores: the server's job list (polled while one runs), what this page
+ * saw finish, the panels the operator dismissed, the refusal and skip reports
+ * held on screen, and the typed-confirmation request that queues a restore.
+ */
+export function useBackupRestores(
+  recentProof: ReturnType<typeof useRecentProof>,
+) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+
+  // What the last restore could not put back. Held in state rather than left
+  // to the toast: a toast for "twelve symptom links are gone" disappears in
+  // four seconds and the operator has no way to get it back. This panel stays
+  // until they dismiss it.
+  const [skipped, setSkipped] = useState<RestoreSkipSummary | null>(null);
+
+  // Why the last restore was refused before it touched anything. Same reason
+  // the skip report is held rather than toasted: the operator has to be able to
+  // read it after the four seconds are up.
+  const [refusedSections, setRefusedSections] = useState<
+    MissingBackupSection[]
+  >([]);
+
+  // A job this page watched while it ran, and has now seen finish. Only those
+  // raise a toast and refresh the page's data: a job that had already finished
+  // when the page opened is shown in its panel and nothing more. Read in the
+  // poll's own callback, where each answer arrives, rather than in an effect.
+  const watched = useRef<Map<string, string>>(new Map());
+  function noticeFinishedRestores(jobs: readonly BackupRestoreJobView[]) {
+    for (const job of jobs) {
+      const before = watched.current.get(job.id);
+      watched.current.set(job.id, job.status);
+      if (before !== "queued" && before !== "running") continue;
+      if (job.status === "succeeded") {
+        setRefusedSections([]);
+        const report = job.result?.skipped;
+        if (report && report.links > 0) {
+          setSkipped(report as RestoreSkipSummary);
+          toast.warning(
+            t("admin.section.backups.restoreSkippedToast", {
+              links: String(report.links),
+            }),
+          );
+        } else {
+          setSkipped(null);
+          toast.success(t("admin.section.backups.restoreSuccess"));
+        }
+        // Restore touches every personal-data table; nuke the broader cache
+        // so dashboards / lists rebuild against the new state.
+        void queryClient.invalidateQueries();
+      } else if (job.status === "failed") {
+        setRefusedSections(missingSectionsOf(job.failure));
+        showErrorToast(t("admin.section.backups.restoreFailed"));
+      }
+    }
+  }
+
+  // The restore jobs, read from the server so a reload during a restore finds
+  // it again. Polled every two seconds while any is queued or running, and
+  // not at all otherwise. A poll that fails keeps the last answer on screen:
+  // a network blip is not a failed restore.
+  const restores = useQuery({
+    queryKey: queryKeys.adminBackupRestores(),
+    queryFn: async () => {
+      const data = await apiGet<{ jobs: BackupRestoreJobView[] }>(
+        "/api/admin/backups/restores",
+      );
+      noticeFinishedRestores(data.jobs);
+      return data;
+    },
+    refetchInterval: (query) =>
+      query.state.data?.jobs.some(isActiveRestore) ? 2000 : false,
+  });
+  const restoreJobs = restores.data?.jobs ?? [];
+  const activeOwners = new Set(
+    restoreJobs.filter(isActiveRestore).map((job) => job.userId),
+  );
+
+  // Finished restores the operator dismissed. Remembered in this browser only,
+  // for convenience; the list itself forgets a job after a day.
+  const [dismissedRestores, setDismissedRestores] = useState<Set<string>>(
+    () => new Set(readDismissedRestores()),
+  );
+  function dismissRestore(id: string) {
+    setDismissedRestores((previous) => {
+      const next = new Set(previous);
+      next.add(id);
+      writeDismissedRestores([...next]);
+      return next;
+    });
+  }
+
+  // Restore: typed-confirmation dialog. The request only queues the restore;
+  // the panel above the list follows it from there.
+  const restore = useMutation({
+    mutationFn: async ({
+      row,
+      restoreInstanceSettings,
+    }: {
+      row: BackupRow;
+      restoreInstanceSettings: boolean;
+    }) => {
+      // Idempotency-Key prevents a double-click from queuing a second
+      // restore. Include the row id so two different backups can both be
+      // restored independently in the same minute.
+      const idempotencyKey = `restore-${row.id}-${randomId()}`;
+      return recentProof.run(() =>
+        apiPost<{ jobId: string; status: "queued" }>(
+          `/api/admin/backups/${row.id}/restore`,
+          { confirm: "RESTORE", restoreInstanceSettings },
+          { headers: { "Idempotency-Key": idempotencyKey } },
+        ),
+      );
+    },
+    onSuccess: (data) => {
+      setRefusedSections([]);
+      setSkipped(null);
+      watched.current.set(data.jobId, "queued");
+      // Neutral, not a success: nothing has been restored yet.
+      toast.info(t("admin.section.backups.restoreStarted"));
+      void queryClient.invalidateQueries({
+        queryKey: queryKeys.adminBackupRestores(),
+      });
+    },
+    onError: (err) => {
+      if (err instanceof ReproofCancelledError) return;
+      if (
+        err instanceof ApiError &&
+        err.meta?.errorCode === "backup.restore.active"
+      ) {
+        showErrorToast(t("admin.section.backups.restoreActive"), {
+          cause: err,
+        });
+        void queryClient.invalidateQueries({
+          queryKey: queryKeys.adminBackupRestores(),
+        });
+        return;
+      }
+      setRefusedSections([]);
+      showErrorToast(
+        err instanceof Error && err.message
+          ? err.message
+          : t("admin.section.backups.restoreFailed"),
+        { cause: err },
+      );
+    },
+  });
+
+  return {
+    restoreJobs,
+    dismissedRestores,
+    dismissRestore,
+    restore,
+    /** Whether a row's restore control waits: its request or its owner's job. */
+    restorePending: (row: BackupRow) =>
+      (restore.isPending && restore.variables?.row.id === row.id) ||
+      activeOwners.has(row.userId),
+    skipped,
+    setSkipped,
+    refusedSections,
+    setRefusedSections,
+  };
+}
diff --git a/src/components/admin/backups/use-backup-upload.ts b/src/components/admin/backups/use-backup-upload.ts
new file mode 100644
index 000000000..30c7f7efc
--- /dev/null
+++ b/src/components/admin/backups/use-backup-upload.ts
@@ -0,0 +1,156 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRef, type ChangeEvent } from "react";
+import { toast } from "sonner";
+
+import type { useRecentProof } from "@/components/settings/security-section/use-recent-proof";
+import { ReproofCancelledError } from "@/components/settings/security-section/use-recent-proof";
+import { apiFetch, apiGet } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+
+/**
+ * The upload body for a backup file: the file itself when it is already
+ * gzip, otherwise the file compressed in the browser. The server accepts
+ * both; compressing keeps a large export well inside the request size limit.
+ */
+async function uploadBody(file: File): Promise<Blob> {
+  const head = new Uint8Array(await file.slice(0, 2).arrayBuffer());
+  if (head[0] === 0x1f && head[1] === 0x8b) return file;
+  return new Response(
+    file.stream().pipeThrough(new CompressionStream("gzip")),
+  ).blob();
+}
+
+/**
+ * Send a backup file to the admin upload route. Sent as the raw body,
+ * compressed on the way unless it already is: the server reads it as a stream,
+ * and a large export (hundreds of MB of JSON) shrinks about tenfold. No request
+ * timeout, because a file of that size takes longer to check and store than
+ * the default allows. The body is built here, per call, so a retry after a
+ * re-proof sends the file again rather than a spent stream.
+ */
+async function uploadOnce(file: File) {
+  const body = await uploadBody(file);
+  return apiFetch<{
+    id: string;
+    valid: true;
+    summary: {
+      measurements: number;
+      medications: number;
+      intakeEvents: number;
+      moodEntries: number;
+      // Optional for the same reason as the keys below: a file written
+      // before side effects rode the wire carries no key at all.
+      medicationSideEffects?: number;
+      cycles?: number;
+      cycleDayLogs?: number;
+      // Backup-completeness — optional so an older-schema upload
+      // (pre-v1.28) still totals correctly without these keys.
+      labResults?: number;
+      biomarkers?: number;
+      illnessEpisodes?: number;
+      illnessDayLogs?: number;
+      allergies?: number;
+      familyHistory?: number;
+      workouts?: number;
+      documents?: number;
+      // Optional for the same reason: a file written before each of these
+      // rode the wire carries no key, and an absent key must total as
+      // nothing rather than break the count.
+      nutrientDays?: number;
+      healthProfile?: number;
+      healthProfileFactRevisions?: number;
+      customMetrics?: number;
+      customMetricEntries?: number;
+      intradayProfiles?: number;
+    };
+  }>("/api/admin/backups/upload", {
+    method: "POST",
+    body,
+    headers: { "Content-Type": "application/gzip" },
+    signal: null,
+  });
+}
+
+export type UploadSummary = Awaited<ReturnType<typeof uploadOnce>>["summary"];
+
+/** How many records an accepted upload carries, every section counted. */
+export function uploadedRecordCount(summary: UploadSummary): number {
+  return (
+    summary.measurements +
+    summary.medications +
+    summary.intakeEvents +
+    summary.moodEntries +
+    (summary.medicationSideEffects ?? 0) +
+    (summary.cycles ?? 0) +
+    (summary.cycleDayLogs ?? 0) +
+    (summary.labResults ?? 0) +
+    (summary.biomarkers ?? 0) +
+    (summary.illnessEpisodes ?? 0) +
+    (summary.illnessDayLogs ?? 0) +
+    (summary.allergies ?? 0) +
+    (summary.familyHistory ?? 0) +
+    (summary.workouts ?? 0) +
+    (summary.documents ?? 0) +
+    // The count the admin is shown has to be the count the file carries.
+    // The nutrient day totals were added to the payload and never to this
+    // sum, so an upload that restored them reported fewer records than it
+    // held — a smaller version of the same defect, on the reporting side.
+    (summary.nutrientDays ?? 0) +
+    (summary.healthProfile ?? 0) +
+    (summary.healthProfileFactRevisions ?? 0) +
+    (summary.customMetrics ?? 0) +
+    (summary.customMetricEntries ?? 0) +
+    (summary.intradayProfiles ?? 0)
+  );
+}
+
+/**
+ * The single-file upload flow: a fresh proof first, then the file, and the
+ * file input reset after either outcome.
+ */
+export function useBackupUpload(
+  recentProof: ReturnType<typeof useRecentProof>,
+) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+
+  // Upload state — single-file flow, drives the file input + button.
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const upload = useMutation({
+    mutationFn: async (file: File) => {
+      // Ask first, so a large file is not sent once only to be refused.
+      await recentProof.run(() => apiGet("/api/auth/reproof"));
+      return uploadOnce(file);
+    },
+    onSuccess: (data) => {
+      const total = uploadedRecordCount(data.summary);
+      toast.success(
+        t("admin.section.backups.uploadSuccess", { count: String(total) }),
+      );
+      queryClient.invalidateQueries({ queryKey: queryKeys.adminBackups() });
+    },
+    onError: (err) => {
+      if (err instanceof ReproofCancelledError) return;
+      showErrorToast(
+        err instanceof Error && err.message
+          ? err.message
+          : t("admin.section.backups.uploadFailed"),
+        { cause: err },
+      );
+    },
+    onSettled: () => {
+      // Reset the file input so the same file can be re-selected after a
+      // rejected upload (browsers keep the previous selection otherwise).
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    },
+  });
+
+  function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) upload.mutate(file);
+  }
+
+  return { upload, fileInputRef, handleFileChange };
+}
diff --git a/src/components/charts/__tests__/health-chart-annotations.test.ts b/src/components/charts/__tests__/health-chart-annotations.test.ts
index 70e148ea0..fff06fb22 100644
--- a/src/components/charts/__tests__/health-chart-annotations.test.ts
+++ b/src/components/charts/__tests__/health-chart-annotations.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { resolveAnnotationPositions } from "../health-chart";
+import { resolveAnnotationPositions } from "../health-chart/series-math";
 
 /**
  * v1.4.20 — storyboard-annotation pinning.
diff --git a/src/components/charts/__tests__/health-chart-overlay-defaults.test.tsx b/src/components/charts/__tests__/health-chart-overlay-defaults.test.tsx
index 8f379853b..4e8727718 100644
--- a/src/components/charts/__tests__/health-chart-overlay-defaults.test.tsx
+++ b/src/components/charts/__tests__/health-chart-overlay-defaults.test.tsx
@@ -1,3 +1,4 @@
+import { baselineLayers } from "../health-chart/chart-layers";
 import { describe, it, expect, vi } from "vitest";
 import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
@@ -54,28 +55,22 @@ vi.mock("@/hooks/use-auth", () => ({
 }));
 
 describe("HealthChart default overlay state", () => {
-  it("source: personal baseline is gated behind a toggle (no unconditional ReferenceLine)", () => {
-    // The B1a wrapper rendered the baseline `<ReferenceLine>` for every
-    // type unconditionally. Make sure the source no longer paints it
-    // outside an opt-in branch — we look for the tell-tale pattern of
-    // `types.map((type, i) => { ... <ReferenceLine ... y={baseline}`
-    // appearing without a `showTrend` / `showBaseline` guard above it.
-    const moduleUrl = new URL("../health-chart.tsx", import.meta.url);
-    const src = readFileSync(fileURLToPath(moduleUrl), "utf8");
-
-    // Personal-baseline rendering must be guarded — the JSX block that
-    // emits the dashed baseline must be wrapped in a conditional
-    // expression starting with a state flag.
-    const baselineSection = src.match(
-      /\{types\.map\(\(type, i\) => \{[\s\S]*?const baseline = personalBaselines\.get\(type\);[\s\S]*?\}\)\}/,
+  it("paints the personal baseline only behind the trend toggle", () => {
+    // An always-on dashed mean line was rejected: the baseline layer paints
+    // nothing with the trend overlay off, and one line per type with it on.
+    const baselines = new Map([["WEIGHT", 80]]);
+    const t = (key: string) => key;
+    expect(
+      baselineLayers(false, ["WEIGHT"], ["var(--chart-1)"], baselines, t),
+    ).toBe(false);
+    const on = baselineLayers(
+      true,
+      ["WEIGHT"],
+      ["var(--chart-1)"],
+      baselines,
+      t,
     );
-    if (baselineSection) {
-      // If the section still exists, it's not gated. Allow a guard
-      // wrapper test instead — match `{showSomething &&`.
-      throw new Error(
-        "Personal baseline ReferenceLine is rendered unconditionally — must be gated behind an opt-in toggle.",
-      );
-    }
+    expect(Array.isArray(on) && on.filter(Boolean)).toHaveLength(1);
   });
 
   it("does NOT paint the personal-baseline label by default in MoodChart source", () => {
diff --git a/src/components/charts/__tests__/health-chart-polish.test.tsx b/src/components/charts/__tests__/health-chart-polish.test.tsx
index 9a69d0f85..789ca2b7f 100644
--- a/src/components/charts/__tests__/health-chart-polish.test.tsx
+++ b/src/components/charts/__tests__/health-chart-polish.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 
-import { computePersonalBaseline } from "../health-chart";
+import { computePersonalBaseline } from "../health-chart/series-math";
 
 /**
  * v1.4.16 — HealthChart Apple-Health-style polish contract.
diff --git a/src/components/charts/__tests__/health-chart-target-link-removed.test.ts b/src/components/charts/__tests__/health-chart-target-link-removed.test.ts
index 69b884356..ea9102dd0 100644
--- a/src/components/charts/__tests__/health-chart-target-link-removed.test.ts
+++ b/src/components/charts/__tests__/health-chart-target-link-removed.test.ts
@@ -11,7 +11,8 @@ import { resolve } from "node:path";
 
 import { describe, expect, it } from "vitest";
 
-const HEALTH_CHART_PATH = resolve(__dirname, "..", "health-chart.tsx");
+import { readSource, readSourceFolder } from "@/__tests__/helpers/source-files";
+
 const WEIGHT_PAGE_PATH = resolve(
   __dirname,
   "../../../app/insights/weight/page.tsx",
@@ -24,7 +25,13 @@ const EN_BUNDLE_PATH = resolve(__dirname, "../../../../messages/en.json");
 
 describe("v1.16.8 — chart-card target-adjust link removed", () => {
   it("ships no targetSettingsHref prop or header link in the chart", () => {
-    const source = readFileSync(HEALTH_CHART_PATH, "utf8");
+    // The component and every part it is built from (header included).
+    const source = [
+      readSource("src/components/charts/health-chart.tsx", "HealthChart"),
+      ...readSourceFolder("src/components/charts/health-chart", {
+        floor: 9,
+      }).map(([, text]) => text),
+    ].join("\n");
     expect(source).not.toContain("targetSettingsHref");
     expect(source).not.toContain("chart-target-settings-link");
     expect(source).not.toContain("charts.adjustTargets");
diff --git a/src/components/charts/__tests__/health-chart-type-label.test.tsx b/src/components/charts/__tests__/health-chart-type-label.test.tsx
index d9880f3cf..aaefdf00d 100644
--- a/src/components/charts/__tests__/health-chart-type-label.test.tsx
+++ b/src/components/charts/__tests__/health-chart-type-label.test.tsx
@@ -113,7 +113,7 @@ describe("measurementLabelKey", () => {
   it("matches the canonical label map for every type outside the chart's own labels", async () => {
     const { MEASUREMENT_TYPE_LABEL_KEYS } =
       await import("@/lib/measurements/type-label-keys");
-    const { measurementLabelKey } = await import("../health-chart");
+    const { measurementLabelKey } = await import("../health-chart/series-math");
     // The four types whose key breaks the convention carry a chart label.
     const chartLabelled = new Set([
       "WEIGHT",
diff --git a/src/components/charts/__tests__/health-chart-vertical-markers.test.ts b/src/components/charts/__tests__/health-chart-vertical-markers.test.ts
index 8b8a8ef6e..a6d5f91b1 100644
--- a/src/components/charts/__tests__/health-chart-vertical-markers.test.ts
+++ b/src/components/charts/__tests__/health-chart-vertical-markers.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { resolveVerticalMarkerPositions } from "../health-chart";
+import { resolveVerticalMarkerPositions } from "../health-chart/series-math";
 
 /**
  * v1.4.25 — GLP-1 injection-day vertical-marker pinning.
diff --git a/src/components/charts/health-chart.tsx b/src/components/charts/health-chart.tsx
index f42233f75..909ec7a4d 100644
--- a/src/components/charts/health-chart.tsx
+++ b/src/components/charts/health-chart.tsx
@@ -1,591 +1,77 @@
 "use client";
 
-import { chartSeriesParams } from "@/components/charts/chart-series-request";
-import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
+import { useMemo, useState } from "react";
 import {
-  localDayKeyFor,
-  openEndedFetchWindow,
-} from "@/lib/charts/fetch-window";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useAuth } from "@/hooks/use-auth";
-import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
-import { queryKeys } from "@/lib/query-keys";
-import { apiGet } from "@/lib/api/api-fetch";
-import {
-  ResponsiveContainer,
+  CartesianGrid,
   ComposedChart,
-  Line,
-  Area,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ReferenceLine,
-  ReferenceArea,
-  ReferenceDot,
 } from "recharts";
-import {
-  useState,
-  useMemo,
-  useEffect,
-  useCallback,
-  useRef,
-  type ComponentType,
-} from "react";
-import { Skeleton } from "@/components/ui/skeleton";
-import { usesHourlyMeanDay } from "@/lib/measurements/day-statistic";
-import { RichChartTooltip, type RichTooltipRow } from "./chart-tooltip";
-import { ChartEmptyState } from "./chart-empty-state";
-import { ChartErrorState } from "./chart-error-state";
-import { TileHeader } from "@/components/insights/tile-header";
-import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
-import { computePaddedYDomain } from "@/lib/insights/chart-y-domain";
-import {
-  useDateFormatPreference,
-  useTranslations,
-  useFormatters,
-} from "@/lib/i18n/context";
-import { makeBucketLabelFormatters } from "@/lib/charts/bucket-label";
-import {
-  bucketTimeSeries,
-  pickBucket,
-  type ChartBucketType,
-} from "@/lib/charts/bucket-time-series";
-import {
-  computeWindowTrend,
-  SPLIT_HALF_THRESHOLD_DAYS,
-} from "@/lib/analytics/window-trend";
-import { resolveMiniRangePoints, type DataWindow } from "./mini-window";
-import { shiftDailySeriesForward } from "@/lib/charts/comparison-shift";
-import type {
-  ChartOverlayKey,
-  ComparisonBaseline,
-} from "@/lib/dashboard-layout";
-import { CUMULATIVE_HK_TYPES } from "@/lib/measurements/apple-health-mapping";
-import { bucketCaptionKey } from "@/lib/charts/bucket-caption";
-import type { MeasurementType } from "@/generated/prisma/client";
-import { ChartOverlayControls } from "./chart-overlay-controls";
-import { ChartDataTable, type ChartDataTableColumn } from "./chart-data-table";
-import { ChartFooterReserve } from "./chart-skeleton";
-import { useChartOverlayPrefs } from "@/hooks/use-chart-overlay-prefs";
-import { useViewportWidth } from "@/hooks/use-viewport-width";
-import { computeTickPositions } from "@/lib/charts/x-axis-density";
-import {
-  computeWindowStats,
-  type MetricWindowStats,
-} from "@/lib/charts/window-stats";
-import { shouldFireDataReady } from "@/lib/charts/data-ready-latch";
-import { axisTickUnitSuffix } from "@/lib/charts/axis-unit";
+
 import { chartPointDayKey } from "@/components/day/chart-day";
 import {
   ChartDayFooter,
-  OPEN_DAY_LINE,
   useChartDayLinks,
 } from "@/components/day/chart-day-links";
 import { isWholeNumberType } from "@/components/day/use-day-value-format";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAuth } from "@/hooks/use-auth";
+import { useChartOverlayPrefs } from "@/hooks/use-chart-overlay-prefs";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useViewportWidth } from "@/hooks/use-viewport-width";
+import { axisTickUnitSuffix } from "@/lib/charts/axis-unit";
+import { makeBucketLabelFormatters } from "@/lib/charts/bucket-label";
+import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
+import { computeTickPositions } from "@/lib/charts/x-axis-density";
 import {
-  ChartRangeTabs,
-  DEFAULT_CHART_RANGE,
-  rangeWindowDays,
-} from "./chart-range-tabs";
-import { trendLineByTime } from "@/lib/stats/linear-fit";
-import { translateOrNull } from "@/lib/i18n/translate-code";
+  useDateFormatPreference,
+  useFormatters,
+  useTranslations,
+} from "@/lib/i18n/context";
+import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
 
-// The range tabs (7 / 30 / 90 / All, a calendar-day window ending now) and
-// the "All" tab's ten-year fetch span live with the shared
-// `<ChartRangeTabs>`, so every chart drawn in days offers the same choice.
-
-interface HealthChartProps {
-  types: string[];
-  title: string;
-  colors?: string[];
-  unit?: string;
-  yAxisUnit?: string;
-  valueMode?: "raw" | "bmi";
-  yAxisWidth?: number;
-  showYAxisUnit?: boolean;
-  valueBands?: Array<{
-    min: number;
-    max: number;
-    color: string;
-    opacity?: number;
-    strokeOpacity?: number;
-  }>;
-  targetZones?: Array<{
-    min: number;
-    max: number;
-    color: string;
-    opacity?: number;
-    label?: string;
-    textColor?: string;
-    lineOpacity?: number;
-  }>;
-  /**
-   * v1.4.16 — compact chart mode used by the Oura-style
-   * rationale card. Drops the range tabs, the moving-average / trend
-   * / target-band toggle row, and shrinks padding. Tooltip + gradient
-   * + personal-baseline behaviour stay intact so the small chart
-   * still tells the same visual story.
-   */
-  mini?: boolean;
-  /**
-   * v1.4.16 — pin the chart to a specific rationale data
-   * window regardless of any parent UI state. Used by the rec-card's
-   * mini-chart so it always renders the window the rec is based on.
-   */
-  windowOverride?: DataWindow;
-  /**
-   * v1.4.16 — when set to "lastMonth" / "lastYear", paint a
-   * dimmed prior-period overlay beneath the current series. The chart
-   * already fetches the full measurement history; the overlay is
-   * computed by `shiftDailySeriesForward` so the prior-period day at
-   * 30 / 365 days back lands directly under its current-period sibling
-   * on the visible x-axis.
-   *
-   * "none" or undefined renders the chart exactly as before — no
-   * regression for users who keep the toggle off.
-   */
-  compareBaseline?: ComparisonBaseline;
-  /**
-   * v1.4.18 — per-chart overlay-prefs key. When supplied, the chart
-   * mounts an overlay-controls dropdown in the header and reads its
-   * three toggle states from the persisted user prefs. When omitted
-   * (mini mode, ad-hoc usage) the chart renders without controls and
-   * its toggles default to OFF (clean line).
-   */
-  chartKey?: ChartOverlayKey;
-  /**
-   * v1.42 — whether a chart bound to a `chartKey` also shows the overlay
-   * dropdown. Off for a chart that persists only its range tab (the score
-   * histories), so binding a key to remember the range does not add
-   * controls the chart never had. Defaults to on.
-   */
-  overlayControls?: boolean;
-  /**
-   * v1.4.20 — additive storyboard annotations.
-   *
-   * Each entry pins a vertical reference line + label to the data point
-   * whose Berlin-day key matches `date` (`YYYY-MM-DD`). The chart line
-   * + tooltip + tooltip-deltas remain untouched — Recharts' source-order
-   * layering paints `<ReferenceLine>` between the cartesian grid and
-   * the data lines so the annotation reads as orientation, not data.
-   *
-   * Annotations whose date falls outside the visible window silently
-   * drop (we already use `ifOverflow="discard"` on every reference line
-   * that needs the same behaviour).
-   */
-  annotations?: Array<{ date: string; label: string; color: string }>;
-  /**
-   * v1.4.25 — vertical injection-day markers.
-   *
-   * Each entry pins a thin dashed vertical reference line on the chart
-   * at the data point whose Berlin/user-tz day-key matches `date`
-   * (`YYYY-MM-DD`). Designed for the GLP-1 dashboard tile + the
-   * Insights /medikamente sub-page so users can see "I injected on
-   * these days; here's how my weight responded". Differs from
-   * `annotations` in three ways:
-   *   1. No text label by default — these markers represent events
-   *      the user already saw the chart-line shape for; an inline
-   *      label per marker would crowd the canvas.
-   *   2. A small filled dot sits at the x-axis intersection (mood-
-   *      chart style emoji-on-axis pattern repurposed) so a row of
-   *      green dots reads as "injection cadence" at a glance.
-   *   3. Default green (`var(--success)`) to match the strip-tile palette
-   *      for active medications; callers can override per marker.
-   *
-   * Off-window markers silently drop via `ifOverflow="discard"`,
-   * matching the existing annotations contract.
-   */
-  verticalMarkers?: Array<{ date: string; label?: string; color?: string }>;
-  /**
-   * v1.4.25 — per-user display timezone. When passed (mount sites
-   * thread `useAuth().user?.timezone`), x-axis tick labels and the
-   * per-day bucket keys both render in the user's zone. When a mount
-   * passes none, the chart uses the signed-in account's zone (which
-   * `/api/auth/me` reports already resolved against the server default),
-   * and only before that has loaded the shared `DEFAULT_TIMEZONE` the
-   * server itself falls back to.
-   */
-  userTimezone?: string;
-  /**
-   * v1.7.0 — display-time scalar applied to every raw value before it
-   * enters the chart pipeline (bucketing, y-domain, personal baseline,
-   * trend, tooltip). Used by the unit-fix mounts to render a metric in
-   * a derived display unit (e.g. WALKING_SPEED m/s → km/h via
-   * `valueScale={3.6}`) while raw storage stays canonical SI.
-   *
-   * Defaults to `1` — the identity scale — so every existing chart
-   * renders byte-identical to the pre-v1.7.0 behaviour. Recharts is
-   * untouched; the scale is folded into the value at the single read
-   * boundary so all downstream math operates on the scaled series
-   * uniformly.
-   */
-  valueScale?: number;
-  /**
-   * v1.32.26 — display-time additive offset folded in alongside
-   * `valueScale` at the same read boundary: `display = raw * valueScale +
-   * valueOffset`. Required for the affine °C→°F conversion (a shift, not
-   * just a scale). Defaults to `0`. Because every tooltip delta / trend
-   * slope is computed as a DIFFERENCE of two offset values, the offset
-   * cancels there automatically — a rate never inherits the +32 shift.
-   */
-  valueOffset?: number;
-  /**
-   * v1.12.8 — chart-reactive metric statistics. When supplied, the chart
-   * reports the per-type Min / Max / Median / Mean of the data currently
-   * visible under the active range tab (the 7 / 30 / 90 / All selector),
-   * keyed by `MeasurementType`. It fires on mount and whenever the range tab
-   * (or the underlying series) changes, so the `<MetricStatStrip>` a sub-page
-   * lifts the callback into always reflects the same window the chart paints.
-   *
-   * Mini mode never reports — the rationale card pins its own window and has
-   * no stat strip. The dashboard / ad-hoc mounts simply omit the callback.
-   */
-  onVisibleStats?: (stats: Record<string, MetricWindowStats> | null) => void;
-  /**
-   * v1.12.8 — optional leading glyph for the chart card's `<TileHeader>`.
-   * When supplied, the chart header renders the canonical icon + title row
-   * (same size + spacing as every other Insights tile) instead of the bare
-   * `<h2>`. Omitted on the dashboard / mini mounts, which keep the compact
-   * heading. Accepts any component that takes a `className` (the contract
-   * `<TileHeader>` and the stat strip's `icon` already use), so a page can
-   * thread the same glyph it hands the stat strip.
-   */
-  titleIcon?: ComponentType<{ className?: string }>;
-  /**
-   * v1.16.0 — fires once the chart's data query has settled (initial
-   * load finished, success or error). The dashboard's shared reveal
-   * gate listens here so every chart cell swaps from skeleton to
-   * content in one frame instead of popping in one after another.
-   * Optional and repeat-safe: the dashboard's `markReady` is
-   * idempotent; non-dashboard mounts simply omit it.
-   */
-  onDataReady?: () => void;
-  /**
-   * v1.18.6 — pre-fetched daily series, keyed by `MeasurementType`. When
-   * the dashboard batches every visible chart's series into ONE
-   * `/api/measurements/series-batch` round-trip (audit finding #2), it
-   * passes each chart its slice here. When supplied, the chart's queryFn
-   * consumes these rows for the covered types instead of issuing its own
-   * per-type `/api/measurements` fetch. Omitted on non-dashboard mounts
-   * (insights sub-pages, mini cards) which keep self-fetching.
-   * SLEEP_DURATION is never pre-fetched (it rides the per-night `/series`
-   * adapter), so a sleep chart self-fetches that branch regardless.
-   *
-   * The rows must already be scoped to the chart's active fetch window;
-   * the prop is keyed into the query cache so a range-tab change (wider
-   * window) re-fetches cleanly rather than blending a batched slice with
-   * a self-fetched one.
-   */
-  preloadedSeries?: Record<string, MeasurementApiRow[]>;
-  /**
-   * v1.19.0 — the day-span the `preloadedSeries` slice actually covers
-   * (the window the dashboard's batched fetch requested). The chart reads
-   * the preloaded slice ONLY when the active range tab's window fits
-   * within this coverage; a wider tab (90 / All on a 30-day batch) falls
-   * through to a real fetch for the requested window instead of silently
-   * re-rendering the narrow batched slice.
-   *
-   * Required whenever `preloadedSeries` is supplied. Mount sites set it to
-   * the exact day-span their batch fetches (the dashboard batch spans 31
-   * days). Omitted on self-fetching mounts.
-   */
-  preloadedCoverageDays?: number;
-  /**
-   * Render the drawn points as a table beneath the chart, behind a
-   * collapsed disclosure. Opt-in: the metric sub-pages want it (a chart
-   * shows the shape and hides the numbers, and an appointment needs the
-   * numbers), the dashboard tiles do not — a table under every tile would
-   * bury the dashboard it is meant to summarise.
-   */
-  showDataTable?: boolean;
-  /**
-   * v1.42 — the chart is a door to its days. A click on a point opens that
-   * day over the page (on a touch screen the tooltip offers it), the open day
-   * is marked with a dashed line, and a row of dots under the axis marks the
-   * days that hold anything. Only while the chart is drawn in days, and never
-   * in `mini` mode: a tile's sparkline has its own destination and targets
-   * too small to hit. The metric sub-pages turn it on; the dashboard does not.
-   */
-  dayLinks?: boolean;
-}
-
-interface ChartDataPoint {
-  date: string;
-  timestamp: number;
-  pointIndex?: number;
-  // v1.8.5 — `${type}__range` keys carry a `[min, max]` tuple for the
-  // range-band <Area>; every other key stays a scalar.
-  [key: string]: string | number | undefined | [number, number];
-}
-
-interface MeasurementApiRow {
-  measuredAt: string;
-  value: number;
-  // v1.8.5 — per-day min / max emitted by the rollup daily-aggregate
-  // path (non-cumulative metrics only). Drive the Apple-Health-style
-  // range band shaded around the mean line. Not drawn on the 7-day range
-  // and absent on cumulative metrics.
-  // v1.18.6 — `null` accepted alongside `undefined` so the batched
-  // series endpoint's row shape (which carries `number | null`) feeds
-  // `preloadedSeries` directly. The bucketing loop already guards each
-  // with a `typeof … === "number"` check, so a null is ignored exactly
-  // like an absent value.
-  minValue?: number | null;
-  maxValue?: number | null;
-  // v1.4.43 — the rollup / daily-aggregate paths return
-  // the underlying raw-row count per bucket. Used downstream to gate
-  // the "more days needed" empty-state copy on the actual measurement
-  // count rather than the number of distinct calendar days. Optional
-  // because the per-night sleep series does not carry it.
-  count?: number;
-}
-
-interface VisibleTargetZone {
-  key: string;
-  low: number;
-  high: number;
-  topPct: number;
-  heightPct: number;
-  color: string;
-  opacity: number;
-  label: string | undefined;
-  textColor: string | undefined;
-  lineOpacity: number;
-}
-
-const BASE_TYPE_LABEL_KEYS: Record<string, string> = {
-  WEIGHT: "charts.weight",
-  BLOOD_PRESSURE_SYS: "charts.systolic",
-  BLOOD_PRESSURE_DIA: "charts.diastolic",
-  PULSE: "charts.pulse",
-  BODY_FAT: "charts.bodyFat",
-  SLEEP_DURATION: "charts.sleep",
-  ACTIVITY_STEPS: "charts.steps",
-  BLOOD_GLUCOSE: "measurements.typeBloodGlucose",
-  TOTAL_BODY_WATER: "charts.bodyWater",
-  BONE_MASS: "charts.boneMass",
-  OXYGEN_SATURATION: "charts.spo2",
-};
+import { ChartDataTable } from "./chart-data-table";
+import { ChartEmptyState } from "./chart-empty-state";
+import { ChartErrorState } from "./chart-error-state";
+import { DEFAULT_CHART_RANGE } from "./chart-range-tabs";
+import { ChartFooterReserve } from "./chart-skeleton";
+import { ChartBandOverlay } from "./health-chart/band-overlay";
+import { HealthChartHeader } from "./health-chart/chart-header";
+import {
+  annotationLayers,
+  baselineLayers,
+  openDayLayers,
+  seriesLayers,
+  targetZoneLayers,
+  verticalMarkerLayers,
+} from "./health-chart/chart-layers";
+import { makeTooltipContent } from "./health-chart/chart-tooltip-content";
+import {
+  getTypeLabel,
+  makeDayKeyFormatter,
+  resolveAnnotationPositions,
+  resolveVerticalMarkerPositions,
+} from "./health-chart/series-math";
+import type { ChartDataPoint, HealthChartProps } from "./health-chart/types";
+import {
+  useHealthChartLabels,
+  useHealthChartOverlays,
+} from "./health-chart/use-health-chart-overlays";
+import { useHealthChartSeries } from "./health-chart/use-health-chart-series";
+import { useHealthChartView } from "./health-chart/use-health-chart-view";
+import { resolveMiniRangePoints } from "./mini-window";
 
 /**
- * The measurement label key for a type outside the chart's short labels:
- * `RESTING_HEART_RATE` → `measurements.typeRestingHeartRate`. Derived rather
- * than imported, because the full label map would ride into every route that
- * draws a chart; `health-chart-type-label.test.tsx` pins that the derivation
- * matches `MEASUREMENT_TYPE_LABEL_KEYS` for every type it is used for.
+ * A metric over time: the line, the overlays a person can switch on (the
+ * 7-day average, the trend, the target range, the prior period), reference
+ * bands and zones, annotations and event markers, the range tabs, the
+ * tooltip, and the days as doors. The parts live in `./health-chart/`: the
+ * series read, the derived view, the overlays and labels, the header, the
+ * plot layers and the tooltip; this component wires them together.
  */
-export function measurementLabelKey(type: string): string {
-  return `measurements.type${type
-    .toLowerCase()
-    .split("_")
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join("")}`;
-}
-
-/**
- * The name a series carries in the trend line, the legend, the tooltip and
- * the spoken summary. The chart's own short labels come first; every other
- * type takes its measurement label, so no overlay ever shows the raw enum
- * (a resting-pulse trend read "RESTING_HEART_RATE").
- */
-function getTypeLabel(
-  type: string,
-  valueMode: "raw" | "bmi",
-  t: (key: string) => string,
-): string {
-  if (type === "WEIGHT" && valueMode === "bmi") {
-    return "BMI";
-  }
-  const key = BASE_TYPE_LABEL_KEYS[type];
-  if (key) return t(key);
-  const measurementKey = measurementLabelKey(type);
-  return translateOrNull(t, measurementKey) ?? type;
-}
-
-/**
- * Build a `YYYY-MM-DD` day-key formatter pinned to the requested
- * timezone. Memoised per-tz inside the component so we don't allocate a
- * new `Intl.DateTimeFormat` on every measurement-row pass.
- */
-function makeDayKeyFormatter(tz: string): Intl.DateTimeFormat {
-  return new Intl.DateTimeFormat("en-US", {
-    timeZone: tz,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-  });
-}
-
-function toDayKey(value: string, formatter: Intl.DateTimeFormat): string {
-  const parts = formatter.formatToParts(new Date(value));
-  const year = parts.find((part) => part.type === "year")?.value;
-  const month = parts.find((part) => part.type === "month")?.value;
-  const day = parts.find((part) => part.type === "day")?.value;
-
-  if (!year || !month || !day) {
-    throw new Error("Could not derive day key for chart");
-  }
-
-  return `${year}-${month}-${day}`;
-}
-
-function dayKeyToTimestamp(dayKey: string): number {
-  const [year, month, day] = dayKey.split("-").map(Number);
-  return Date.UTC(year, month - 1, day, 12, 0, 0);
-}
-
-function movingAverageByPoints(
-  data: Array<{ date: Date; value: number }>,
-  windowSize: number,
-): Array<{ date: Date; value: number }> {
-  if (data.length === 0) return [];
-
-  const sorted = [...data].sort((a, b) => a.date.getTime() - b.date.getTime());
-
-  return sorted.map((point, index) => {
-    const start = Math.max(0, index - windowSize + 1);
-    const window = sorted.slice(start, index + 1);
-    const avg =
-      window.reduce((sum, item) => sum + item.value, 0) / window.length;
-    return {
-      date: point.date,
-      value: Math.round(avg * 100) / 100,
-    };
-  });
-}
-
-/**
- * v1.4.16 — personal-baseline helper.
- *
- * Computes the median (50th-percentile) value of a daily-aggregated
- * series, capped at the most-recent 90 daily points (Apple Health uses
- * the rolling-90-day window for "your normal" framing). Returns `null`
- * when fewer than 5 points exist — a baseline drawn off 1-2 readings is
- * misleading; surface nothing instead.
- *
- * Pure & deterministic so the unit test pins exact medians.
- */
-export function computePersonalBaseline(
-  data: Array<{ value: number }>,
-  windowPoints = 90,
-): number | null {
-  if (data.length < 5) return null;
-  const recent = data.slice(-windowPoints);
-  const sorted = recent.map((d) => d.value).sort((a, b) => a - b);
-  const mid = Math.floor(sorted.length / 2);
-  if (sorted.length % 2 === 0) {
-    return (sorted[mid - 1] + sorted[mid]) / 2;
-  }
-  return sorted[mid];
-}
-
-/**
- * v1.4.20 — pure helper that maps storyboard annotations to
- * visible chart pointIndex positions. Exported so the unit suite can
- * pin behaviour without rendering Recharts. Returns the subset of
- * annotations that fall on (or within 7 days of) a visible bucketed
- * point, with a 24-char truncation precomputed for `<sm` rendering.
- */
-export interface ResolvedAnnotation {
-  pointIndex: number;
-  label: string;
-  color: string;
-  truncatedLabel: string;
-}
-
-/**
- * v1.4.25 — pure helper for the GLP-1 injection-day vertical
- * markers. Exported so the unit suite can pin behaviour without
- * spinning Recharts. The shape mirrors `resolveAnnotationPositions`
- * minus the truncated-label slot.
- *
- * `chartData[i].date` is the `YYYY-MM-DD` day-key the chart already
- * computed when bucketing measurements; we match by exact key so a
- * marker only lands on a day the chart actually has a data point for.
- * This is intentional — drawing a vertical line through a gap in the
- * x-axis paints a hanging line with no data context, which reads as a
- * rendering bug not as orientation.
- *
- * Off-window markers silently drop (the chart's `<ReferenceLine>` also
- * uses `ifOverflow="discard"` as a belt-and-braces guard).
- */
-export interface ResolvedVerticalMarker {
-  pointIndex: number;
-  color: string;
-  label: string | undefined;
-}
-
-export function resolveVerticalMarkerPositions(
-  markers: Array<{ date: string; label?: string; color?: string }> | undefined,
-  chartData: Array<{ date: string; timestamp?: number }> | undefined,
-): ResolvedVerticalMarker[] {
-  if (!markers || !chartData || chartData.length === 0) return [];
-  const indexByDate = new Map<string, number>();
-  for (const [i, point] of chartData.entries()) {
-    // Last-write-wins — multiple bucket-aggregated points should never
-    // share the same day key, but defensively keep the latest if they
-    // do. A drawn point's `date` is its display label ("12.03."), so the
-    // day key comes from its timestamp, which a daily point holds at noon
-    // UTC of its day; a bare `{ date }` (the pure-helper tests) is the key.
-    indexByDate.set(
-      typeof point.timestamp === "number"
-        ? chartPointDayKey(point.timestamp)
-        : point.date,
-      i,
-    );
-  }
-  const out: ResolvedVerticalMarker[] = [];
-  for (const marker of markers) {
-    const idx = indexByDate.get(marker.date);
-    if (idx === undefined) continue;
-    out.push({
-      pointIndex: idx,
-      color: marker.color ?? "var(--success)",
-      label: marker.label,
-    });
-  }
-  return out;
-}
-
-export function resolveAnnotationPositions(
-  annotations:
-    Array<{ date: string; label: string; color: string }> | undefined,
-  chartData: Array<{ timestamp: number }> | undefined,
-): ResolvedAnnotation[] {
-  if (!annotations || !chartData || chartData.length === 0) return [];
-  const out: ResolvedAnnotation[] = [];
-  for (const annotation of annotations) {
-    const targetMs = Date.parse(`${annotation.date}T12:00:00Z`);
-    if (!Number.isFinite(targetMs)) continue;
-    let bestIdx = -1;
-    let bestDelta = Number.POSITIVE_INFINITY;
-    for (const [i, point] of chartData.entries()) {
-      const delta = Math.abs(point.timestamp - targetMs);
-      if (delta < bestDelta) {
-        bestDelta = delta;
-        bestIdx = i;
-      }
-    }
-    // Drop annotations more than 7 days off any visible point — long
-    // bucket windows (monthly aggregation) would otherwise snap multi-
-    // month events to the closest visible bucket and stack labels.
-    if (bestIdx < 0 || bestDelta > 7 * 24 * 60 * 60 * 1000) continue;
-    const truncatedLabel =
-      annotation.label.length > 24
-        ? `${annotation.label.slice(0, 23)}…`
-        : annotation.label;
-    out.push({
-      pointIndex: bestIdx,
-      label: annotation.label,
-      color: annotation.color,
-      truncatedLabel,
-    });
-  }
-  return out;
-}
-
 export function HealthChart({
   types,
   title,
@@ -616,46 +102,34 @@ export function HealthChart({
   dayLinks = false,
 }: HealthChartProps) {
   const { isAuthenticated, user } = useAuth();
-  // A mount without the prop used to pin Europe/Berlin, so those charts
-  // cut days in Berlin for every user whatever their profile said.
+  // A mount without the prop used to pin Europe/Berlin, so those charts cut
+  // days in Berlin for every user whatever their profile said.
   const userTimezone = userTimezoneProp || user?.timezone || DEFAULT_TIMEZONE;
   const { t, locale } = useTranslations();
   const fmt = useFormatters();
-  // Issue #490 — x-axis tick + tooltip date labels. Every timestamp this
-  // chart formats encodes a CALENDAR DAY (noon-UTC of a profile-tz day
-  // key, or a `bucketTimeSeries` Berlin-day UTC-midnight bucket start),
-  // so labels render UTC-pinned via `makeBucketLabelFormatters` — the
-  // encoded day paints verbatim in every profile zone. Rendering these
-  // encodings through a profile-tz formatter shifted week/month bucket
-  // labels a day/month back for zones west of Berlin. Day-key BUCKETING
-  // below still uses `userTimezone` — only labels are pinned.
-  // Issue #922 — the UTC pin decides WHICH day the label names; the
-  // profile's date order decides how it is spelled. Both travel.
+  // Every timestamp the chart labels encodes a CALENDAR DAY (noon UTC of a
+  // profile-zone day key, or a bucket start), so labels render UTC-pinned
+  // and the encoded day paints verbatim in every zone (#490); the profile's
+  // date order decides how it is spelled (#922). Bucketing still uses the
+  // profile zone.
   const dateFormat = useDateFormatPreference();
   const tzFmt = useMemo(
     () => makeBucketLabelFormatters(locale, dateFormat),
     [locale, dateFormat],
   );
-  // v1.4.25 — per-row day-key formatter used to bucket measurement
-  // rows by the user's local calendar day. Memoised on userTimezone so
-  // the inner per-row loop reuses a single Intl.DateTimeFormat.
   const dayKeyFormatter = useMemo(
     () => makeDayKeyFormatter(userTimezone),
     [userTimezone],
   );
-  // v1.4.16: when a windowOverride is supplied, seed the range
-  // state from it so the chart pins to that window. Mini mode also
-  // hides the range tabs, so the user can't change it.
+  // A `windowOverride` pins the range (mini mode hides the tabs anyway).
   const initialRangePoints = windowOverride
     ? resolveMiniRangePoints(windowOverride)
     : DEFAULT_CHART_RANGE;
   const [rangePoints, setRangePoints] = useState(initialRangePoints);
 
-  // v1.4.18 — three overlay toggles (showTrendIndicator / showTrendArrow
-  // / showTargetRange) are persisted per chart via the new
-  // `useChartOverlayPrefs` hook. When the chart isn't bound to a
-  // persistent key (mini mode / ad-hoc render) the hook short-circuits
-  // to the clean-line default and skips its dashboard-layout fetch.
+  // The overlay toggles and the comparison persist per chart; an unbound
+  // chart (mini mode, ad-hoc use) gets the clean-line default and skips the
+  // layout read.
   const overlayPrefs = useChartOverlayPrefs(chartKey);
   const showMA = overlayPrefs.prefs.showTrendIndicator;
   const showTrend = overlayPrefs.prefs.showTrendArrow;
@@ -664,21 +138,11 @@ export function HealthChart({
     ? overlayPrefs.prefs.comparisonBaseline
     : compareBaseline;
 
-  // v1.30.1 — hydrate the range tab from the persisted prefs once
-  // they arrive, mirroring the overlay toggles above. A plain
-  // `useState(30)` initializer can't see the persisted value because
-  // the dashboard-layout query resolves after mount; `rangePoints` also
-  // drives several derived memos below by identity, so it stays local
-  // state (unlike the toggles, which read `overlayPrefs.prefs` live)
-  // and is synced in exactly once. `windowOverride` charts (mini mode)
-  // are pinned and never adopt a persisted range. Adjusted during
-  // render (React's documented "adjust state during render" escape
-  // hatch, not an effect — the lint rule that bans ref reads during
-  // render is why this is a second piece of state rather than a ref)
-  // so the very first render that sees the resolved prefs already
-  // reflects them; `rangeHydrated` guards against re-running past the
-  // first hit, so a later cache refetch can't stomp a range the user
-  // already picked this session.
+  // Adopt the persisted range tab once the prefs arrive. Adjusted during
+  // render (React's documented escape hatch, not an effect), so the first
+  // render that sees the prefs already reflects them; `rangeHydrated` stops a
+  // later refetch from stomping a range picked this session. Pinned charts
+  // never adopt one.
   const [rangeHydrated, setRangeHydrated] = useState(false);
   if (
     !windowOverride &&
@@ -690,771 +154,78 @@ export function HealthChart({
     setRangePoints(overlayPrefs.prefs.rangePoints);
   }
 
-  // v1.4.19 — viewport-aware tick density. Recharts' default is one
-  // tick per data point; the helper caps that at 4-10 visible labels
-  // depending on viewport width so the X-axis reads consistently across
-  // every chart card.
+  // Viewport-aware tick density: 4 to 10 labels, whatever the point count.
   const viewportWidth = useViewportWidth();
 
-  // v1.36.1 — `useAuth()` answers about the person at the keyboard, and under a
-  // switch that is the delegate. Dividing the OWNER's weights by the
-  // DELEGATE's height squared produces a plausible-looking BMI that is simply
-  // somebody else's, shaded by fixed category bands, on a page that names the
-  // owner. The same substitution was fixed for the reference bands in this
-  // release; this is the same mistake one component over, and a wrong health
-  // figure is worse than an absent one.
-  //
-  // Inside a shared record the chart therefore draws no BMI at all rather than
-  // a wrong one. Publishing the owner's height to every client that can read
-  // their weights is a bigger decision than this fix, and it belongs with the
-  // per-module scope work rather than here.
+  // `useAuth()` is the person at the keyboard, and under a switch that is the
+  // delegate: dividing the owner's weights by the delegate's height squared
+  // gives a plausible BMI that is somebody else's. Inside a shared record the
+  // chart draws no BMI rather than a wrong one.
   const { inSharedRecord } = useRecordCapabilities();
   const bmiDivisor =
     valueMode === "bmi" && !inSharedRecord && user?.heightCm
       ? (user.heightCm / 100) ** 2
       : null;
 
-  // v1.4.28 (R1.2 H0) — derive a bounded date window from the
-  // active range selector so the chart fetches only what it will
-  // actually render. The legacy `while (true)` paginated walk pulled
-  // tens of thousands of pulse rows on every visit; the bounded
-  // window + the server-side aggregation hint keeps every navigation
-  // payload-flat regardless of underlying density.
-  //
-  // Comparison overlays (lastMonth / lastYear) extend the `from`
-  // boundary backwards by the shift distance so the prior-period
-  // slice rides the same fetch and `shiftDailySeriesForward` finds
-  // its input.
-  //
-  // v1.19.0 — "All" range (rangePoints === 0) requests `ALL_RANGE_DAYS`
-  // (~10 years) rather than the old 365-day cap, which silently truncated
-  // any account holding more than a year of history. The window is a
-  // generous fixed bound (not derived per-account) so the cache key stays
-  // stable across the session.
-  //
-  // v1.19.2 — the server reader steps the bucket tier up to WEEK / MONTH
-  // for windows past the DAY cap, so the "All" tab now returns coverage
-  // across the whole history (downsampled by tier) rather than the most
-  // recent ~365 daily buckets. The client folds those coarse buckets and
-  // `bucketTimeSeries` re-buckets to the visible range as before.
-  //
-  // The window ends at the end of TODAY in the profile time zone, not at the
-  // mount instant: a reading saved after the chart mounted (measuredAt = now)
-  // has to fall inside the window the invalidated query refetches. `todayKey`
-  // re-derives on every render, so the window stays put all day (a stable
-  // cache key) and moves on by itself after midnight.
-  const todayKey = localDayKeyFor(new Date(), userTimezone);
-  const fetchWindow = useMemo(() => {
-    const windowDays = rangeWindowDays(rangePoints);
-    const compareShift =
-      effectiveCompareBaseline === "lastMonth"
-        ? 30
-        : effectiveCompareBaseline === "lastYear"
-          ? 365
-          : 0;
-    return openEndedFetchWindow(
-      windowDays + compareShift,
-      todayKey,
-      userTimezone,
-    );
-  }, [rangePoints, effectiveCompareBaseline, userTimezone, todayKey]);
-
-  // v1.18.6 — honour the dashboard's batched slice ONLY for windows over
-  // 7 days and ONLY when EVERY non-sleep type the chart renders is present
-  // in the slice. SLEEP_DURATION is never batched (per-night `/series`),
-  // so a chart that includes it always self-fetches. The 7-day tab
-  // self-fetches its own window.
-  //
-  // v1.19.0 — also require that the requested window FITS within the
-  // batch's actual coverage. The dashboard batches only a ~30-day slice;
-  // pre-fix, picking the 90 / All tab kept reading that 30-day slice
-  // (`usePreloaded` never compared windows), so the chart showed ~30 days
-  // no matter the tab. The mount now threads `preloadedCoverageDays`; a
-  // tab wider than the coverage falls through to a real fetch for the
-  // requested window. Without an explicit coverage (legacy mount), treat
-  // it as 0 so any preloaded slice is bypassed rather than trusted blindly.
-  const usePreloaded = useMemo(() => {
-    if (!preloadedSeries) return false;
-    if (fetchWindow.windowDays <= 7) return false;
-    const coverage = preloadedCoverageDays ?? 0;
-    if (fetchWindow.windowDays > coverage) return false;
-    return types.every(
-      (type) => type === "SLEEP_DURATION" || preloadedSeries[type] != null,
-    );
-  }, [preloadedSeries, preloadedCoverageDays, fetchWindow.windowDays, types]);
-
-  const chartQuery = useQuery({
-    // A range-tab change re-keys the query; without placeholder data every
-    // switch dropped the painted chart to a skeleton for the fetch round-trip.
-    // Keeping the previous range's series visible is only honest because the
-    // render below pairs it with a visual dimming while `isPlaceholderData`
-    // is true — the old range must never masquerade as the new one.
-    placeholderData: keepPreviousData,
-    // v1.4.40 — route the chart-data key through `queryKeys.chartData`
-    // so the `["chart-data"]` prefix lands in `measurementDependentKeys`
-    // and a fresh measurement evicts every per-chart daily cache in one
-    // pass (audit C2). The factory-packed tuple is byte-identical with
-    // the pre-v1.4.40 inline literal so the cache layout stays stable.
-    // v1.15.20 — BMI is a pure transformation of the WEIGHT series
-    // (value / height²), so the BMI view shares the raw series' cache
-    // entry instead of re-fetching the same window under its own key.
-    // The key pins the literal "raw" / "no-bmi" discriminators (the
-    // factory tuple shape is unchanged) and the BMI division happens in
-    // the `select` callback below — the factory rule stays intact and
-    // the cached data is mode-agnostic.
-    queryKey: queryKeys.chartData(
-      types.join(","),
-      "raw",
-      "no-bmi",
-      // v1.4.25 — bucket keys + tick labels depend on the active
-      // user timezone, so re-key the cache when it changes. Without
-      // this, a tz change inside a session would render stale buckets.
-      userTimezone,
-      // v1.4.28 — bound the cache by the active fetch window so
-      // a range-tab change re-fetches the right slice rather than
-      // re-running the unbounded walk.
-      fetchWindow.from,
-      fetchWindow.to,
-      // v1.7.0 — re-key when the display scale changes so a km/h chart
-      // never reads a m/s-scaled sibling out of the cache.
-      valueScale,
-      // v1.18.6 — discriminate a batched-slice render from a self-fetch
-      // ONLY on the dashboard mounts that pass `preloadedSeries`. When the
-      // prop is absent (insights sub-pages, mini cards) the empty string
-      // keeps the factory tuple byte-identical with the pre-v1.18.6
-      // 8-element key, so those callers' cache layout is unchanged. On a
-      // dashboard mount the discriminator flips "preloaded" → "fetch" when
-      // a range-tab change drops batched coverage, re-fetching cleanly.
-      preloadedSeries ? (usePreloaded ? "preloaded" : "fetch") : "",
-    ),
-    // v1.4.28 — cache the bounded window for a minute so tab
-    // navigation between insights sub-pages does not re-fire every
-    // chart's fetch. `gcTime` keeps the inactive cache for five
-    // minutes so a quick back-and-forth doesn't repay the cost.
-    staleTime: 60_000,
-    gcTime: 5 * 60_000,
-    queryFn: async () => {
-      const dailyAggregates = new Map<
-        string,
-        {
-          timestamp: number;
-          values: Record<
-            string,
-            {
-              sum: number;
-              count: number;
-              // v1.8.5 — per-bucket spread for the range band. Seeded
-              // from the rollup daily-aggregate's min / max columns;
-              // null when the API row carries no spread (raw-row path
-              // or cumulative metric).
-              min: number | null;
-              max: number | null;
-            }
-          >;
-        }
-      >();
-
-      // v1.11.5 — SLEEP_DURATION is stored one row per sleep STAGE per night
-      // (minutes). The generic `/api/measurements` daily-aggregate path
-      // averages those stage rows, which neither sums a night nor isolates
-      // the asleep stages — it surfaced a ~2× inflated, mislabeled chart. The
-      // `/api/measurements/series?kind=sleep` adapter reconstructs ONE point
-      // per night carrying the night's TIME-ASLEEP in HOURS (CORE + DEEP + REM,
-      // bare-ASLEEP only when no granular stage exists, IN_BED + AWAKE
-      // excluded, dual-source nights collapsed to one source). Routing the
-      // sleep chart through it keeps every sleep surface on the same
-      // reconstruction. One point per night → `sum/count` yields the night's
-      // hours unchanged.
-      async function fetchSleepNights() {
-        const sleepParams = new URLSearchParams();
-        sleepParams.set("kind", "sleep");
-        // The series route caps sleep at 365 days regardless; clamp the
-        // request so a longer comparison window still resolves.
-        sleepParams.set(
-          "days",
-          String(
-            Math.max(1, Math.min(3650, Math.ceil(fetchWindow.windowDays))),
-          ),
-        );
-        // v1.16.8 — a failed fetch rejects the whole query instead of
-        // silently resolving an empty series: the swallowed-catch
-        // variant cached the empty result as fresh success, so an
-        // outage painted "no data in this range" with no retry path.
-        const data = await apiGet<{
-          points?: Array<{ at: string; value: number }>;
-        }>(`/api/measurements/series?${sleepParams}`);
-        const points = data?.points ?? [];
-        for (const point of points) {
-          const value = point.value * valueScale + valueOffset;
-          if (value == null || !Number.isFinite(value)) continue;
-          const dayKey = toDayKey(point.at, dayKeyFormatter);
-          const bucket = dailyAggregates.get(dayKey) ?? {
-            timestamp: dayKeyToTimestamp(dayKey),
-            values: {},
-          };
-          const current = bucket.values["SLEEP_DURATION"] ?? {
-            sum: 0,
-            count: 0,
-            min: null,
-            max: null,
-          };
-          current.sum += value;
-          current.count += 1;
-          bucket.values["SLEEP_DURATION"] = current;
-          dailyAggregates.set(dayKey, bucket);
-        }
-      }
-
-      async function fetchMeasurementsByType(type: string) {
-        if (type === "SLEEP_DURATION") {
-          await fetchSleepNights();
-          return;
-        }
-        const typeParams = chartSeriesParams(type, fetchWindow);
-
-        // v1.18.6 — when the dashboard handed this chart a batched slice
-        // for the type, fold those rows instead of a per-type fetch. The
-        // rows came from `/api/measurements/series-batch`, which reads
-        // through the SAME rollup path the per-type daily fetch hits, so
-        // the bucketed result is byte-identical. `usePreloaded` already
-        // gated the window (`> 7`) + per-type coverage above; default to
-        // an empty slice (paints the no-data card) rather than fetching,
-        // so a covered chart never issues a network request.
-        const page =
-          usePreloaded && preloadedSeries
-            ? (preloadedSeries[type] ?? [])
-            : await (async () => {
-                // v1.16.8 — a failed per-type fetch rejects the whole
-                // query instead of silently dropping the series: the
-                // swallowed-catch variant cached the partial/empty result
-                // as fresh success, so an outage painted the empty state
-                // (or a half chart) with no retry path. Rejecting lets
-                // TanStack's retry semantics and the in-card error state
-                // below do their jobs.
-                const data = await apiGet<{
-                  measurements?: MeasurementApiRow[];
-                }>(`/api/measurements?${typeParams}`);
-                return data?.measurements ?? [];
-              })();
-
-        for (const measurement of page) {
-          // v1.7.0 — fold the display-time scale into the raw value at
-          // the single read boundary so bucketing, the y-domain, the
-          // personal baseline, the trend, and the tooltip all operate
-          // on the scaled series uniformly. `valueScale` defaults to 1
-          // (identity), so non-unit-fixed charts read byte-identical.
-          // v1.15.20 — the BMI division moved into the query's `select`
-          // callback so the cached series stays raw and the WEIGHT and
-          // BMI views share one cache entry.
-          const value = measurement.value * valueScale + valueOffset;
-
-          if (!Number.isFinite(value)) {
-            continue;
-          }
-
-          const dayKey = toDayKey(measurement.measuredAt, dayKeyFormatter);
-          const bucket = dailyAggregates.get(dayKey) ?? {
-            timestamp: dayKeyToTimestamp(dayKey),
-            values: {},
-          };
-          const current = bucket.values[type] ?? {
-            sum: 0,
-            count: 0,
-            min: null,
-            max: null,
-          };
-          current.sum += value;
-          current.count += 1;
-          // v1.8.5 — carry the rollup bucket's min / max through when the
-          // API supplies them (daily-aggregate path, non-cumulative).
-          // `valueScale` already folded into `value` above; apply the
-          // same scale to the spread so the band tracks the line. The
-          // BMI view drops the range tuple in its `select` callback (it
-          // has never rendered the band), so the raw cache always
-          // carries the spread. The 7-day range never drew the band (it
-          // used to read raw rows, which carry no spread) and still does
-          // not, so its picture is unchanged now that it reads days too.
-          if (
-            fetchWindow.windowDays > 7 &&
-            typeof measurement.minValue === "number" &&
-            typeof measurement.maxValue === "number"
-          ) {
-            const scaledMin = measurement.minValue * valueScale + valueOffset;
-            const scaledMax = measurement.maxValue * valueScale + valueOffset;
-            current.min =
-              current.min === null
-                ? scaledMin
-                : Math.min(current.min, scaledMin);
-            current.max =
-              current.max === null
-                ? scaledMax
-                : Math.max(current.max, scaledMax);
-          }
-          bucket.values[type] = current;
-          dailyAggregates.set(dayKey, bucket);
-        }
-      }
-
-      await Promise.all(types.map(fetchMeasurementsByType));
-
-      const allData: ChartDataPoint[] = Array.from(dailyAggregates.values())
-        .map((bucket) => {
-          const point: ChartDataPoint = {
-            date: tzFmt.dateShortSmart(new Date(bucket.timestamp)),
-            timestamp: bucket.timestamp,
-          };
-
-          for (const [type, stats] of Object.entries(bucket.values)) {
-            // v1.4.29.1 — cumulative HealthKit types (steps, active energy,
-            // distance, flights, daylight) must reduce with sum, not the
-            // per-sample average. The server already returns one row per
-            // day (or, for the coarser tiers of the "All" range, one row per
-            // week or month carrying its average day); a day that arrives
-            // as several rows must still add up rather than average.
-            const isCumulative = CUMULATIVE_HK_TYPES.has(
-              type as MeasurementType,
-            );
-            point[type] = isCumulative ? stats.sum : stats.sum / stats.count;
-            // v1.8.5 — emit the day's spread as a `[min, max]` tuple key
-            // so the range-band <Area> can shade it. Only when the
-            // rollup supplied both bounds and the metric is not
-            // cumulative (a SUM has no meaningful intra-day spread).
-            if (!isCumulative && stats.min !== null && stats.max !== null) {
-              point[`${type}__range`] = [stats.min, stats.max] as never;
-            }
-          }
-
-          return point;
-        })
-        .sort((a, b) => a.timestamp - b.timestamp);
-
-      return allData;
-    },
-    // v1.15.20 — BMI view: transform the cached raw WEIGHT series into
-    // BMI at read time. The transformation lives in `select` (not the
-    // queryFn) so the cache entry stays raw and is shared with the
-    // weight chart; tanstack re-runs the projection without a refetch.
-    // No height on the profile → empty series (matches the previous
-    // behaviour where every point was skipped). The `${type}__range`
-    // tuples are dropped — the BMI view has never rendered the band.
-    select: useCallback(
-      (points: ChartDataPoint[]): ChartDataPoint[] => {
-        if (valueMode !== "bmi") return points;
-        if (!bmiDivisor) return [];
-        return points.map((p) => {
-          const out: ChartDataPoint = {
-            date: p.date,
-            timestamp: p.timestamp,
-          };
-          for (const type of types) {
-            const v = p[type];
-            if (typeof v === "number") {
-              out[type] = v / bmiDivisor;
-            }
-          }
-          return out;
-        });
-      },
-      [valueMode, bmiDivisor, types],
-    ),
-    enabled: isAuthenticated,
-  });
   const { data, isLoading, isError, error, isPlaceholderData, refetch } =
-    chartQuery;
-
-  // v1.16.0 — report the settled data query to the dashboard's shared
-  // reveal gate. `isLoading` only covers the INITIAL fetch (a later
-  // range-tab change creates a new cache entry but the gate has long
-  // latched by then), so this fires exactly when the first paintable
-  // state — chart, empty-window card, or error fallback — is available.
-  //
-  // v1.20.1 — fire exactly once, gated on a ref rather than on the
-  // `onDataReady` prop identity. The dashboard passes an inline
-  // `() => markChartReady(id)` closure, so `onDataReady` is a NEW
-  // reference on every parent render; keying the effect on it re-ran the
-  // notify on every commit (e.g. a snapshot refetch on tab-resume), and
-  // that per-commit passive effect kept the chart-row's Radix-Popper
-  // anchors re-committing until React tripped its update-depth guard
-  // (#185). The ready signal is monotonic — once a chart has settled it
-  // stays settled — so latch it behind a ref and depend on `isLoading`
-  // alone. `onDataReady` is read through a ref so a late-arriving handler
-  // still fires without re-arming the effect.
-  const onDataReadyRef = useRef(onDataReady);
-  useEffect(() => {
-    onDataReadyRef.current = onDataReady;
-  }, [onDataReady]);
-  const dataReadyFiredRef = useRef(false);
-  useEffect(() => {
-    if (
-      !shouldFireDataReady({
-        isLoading,
-        alreadyFired: dataReadyFiredRef.current,
-      })
-    )
-      return;
-    dataReadyFiredRef.current = true;
-    onDataReadyRef.current?.();
-  }, [isLoading]);
-
-  // v1.4.6: aggregate to weekly / monthly when the visible range is
-  // long enough that drawing every daily point would clutter the
-  // chart. Picking the bucket from the *visible* range, not the
-  // total dataset, so a "30 days" toggle still shows daily even on
-  // a five-year-old account.
-  //
-  // Held in its own memo so the grain has ONE source. `chartData` bucket
-  // by it, and the data table below the chart captions its rows with it —
-  // a table that said "daily" over a weekly mean would be a lie, and
-  // recomputing the decision separately is how that lie starts.
-  //
-  // v1.37.29 — the slice is a CALENDAR-DAY window, matching what the
-  // range tabs promise and what the fetch window requests. The previous
-  // `slice(-rangePoints)` was a no-op on the self-fetched path (the fetch
-  // is already bounded to the window) but silently switched to
-  // "last N readings" on the dashboard's preloaded ~30-day batch slice —
-  // the same tab meant two different things depending on the mount path.
-  const visibleSlice = useMemo(() => {
-    if (!data?.length) return null;
-    const cutoff = new Date().getTime() - rangePoints * 86_400_000;
-    const sliced =
-      rangePoints > 0
-        ? data.filter((point) => point.timestamp >= cutoff)
-        : [...data];
-    // An empty window stays an empty slice (renders as "no data in this
-    // range") — returning null here would drop chartData back to the
-    // UNFILTERED series and quietly widen the window instead.
-    const rangeDays =
-      sliced.length < 2
-        ? 0
-        : Math.round(
-            (sliced[sliced.length - 1].timestamp - sliced[0].timestamp) /
-              (24 * 60 * 60 * 1000),
-          );
-    return { sliced, bucketType: pickBucket(rangeDays) };
-  }, [data, rangePoints]);
-
-  const chartData = useMemo(() => {
-    if (!data?.length || !visibleSlice) return data;
-
-    const { sliced, bucketType } = visibleSlice;
-
-    const bucketed =
-      bucketType === "day"
-        ? sliced
-        : bucketTimeSeries(
-            sliced.map((p) => ({
-              timestamp: p.timestamp,
-              values: Object.fromEntries(
-                types.map((type) => [type, p[type] as number | undefined]),
-              ),
-            })),
-            { bucket: bucketType, timeZone: userTimezone },
-          ).points.map<ChartDataPoint>((point) => {
-            const date = new Date(point.timestamp);
-            const out: ChartDataPoint = {
-              date: tzFmt.dateShortSmart(date),
-              timestamp: point.timestamp,
-            };
-            for (const [type, value] of Object.entries(point.values)) {
-              out[type] = value;
-            }
-            return out;
-          });
-
-    const enriched: ChartDataPoint[] = bucketed.map((d, index) => ({
-      ...d,
-      pointIndex: index,
-    }));
-
-    if (showMA) {
-      for (const type of types) {
-        const typeData = enriched
-          .filter((d) => d[type] !== undefined)
-          .map((d) => ({
-            date: new Date(d.timestamp),
-            value: d[type] as number,
-          }));
-
-        if (typeData.length >= 2) {
-          const ma = movingAverageByPoints(typeData, 7);
-          for (const point of ma) {
-            const pointTimestamp = point.date.getTime();
-            const existing = enriched.find(
-              (d) => d.timestamp === pointTimestamp,
-            );
-            if (existing) {
-              existing[`${type}_ma`] = point.value;
-            }
-          }
-        }
-      }
-    }
-
-    if (showTrend) {
-      for (const type of types) {
-        const typeData = enriched
-          .filter((d) => d[type] !== undefined)
-          .map((d) => ({
-            date: new Date(d.timestamp),
-            value: d[type] as number,
-          }));
-
-        if (typeData.length >= 2) {
-          const trend = trendLineByTime(typeData);
-          if (trend) {
-            for (const point of trend.points) {
-              const pointTimestamp = point.date.getTime();
-              const existing = enriched.find(
-                (d) => d.timestamp === pointTimestamp,
-              );
-              if (existing) {
-                existing[`${type}_trend`] = point.value;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    return enriched;
-  }, [data, visibleSlice, showMA, showTrend, types, tzFmt, userTimezone]);
-
-  // v1.12.8 — chart-reactive metric statistics.
-  //
-  // Compute the per-type Min / Max / Median / Mean over the data currently
-  // visible under the active range tab — i.e. the day-window-filtered,
-  // bucketed `chartData` the chart already holds (no re-fetch). The result
-  // recomputes whenever the range tab changes the visible slice, so the
-  // `<MetricStatStrip>` a sub-page lifts the callback into always reflects the
-  // same window the chart paints. Skipped in mini mode (no stat strip).
-  const visibleStatsByType = useMemo<Record<
-    string,
-    MetricWindowStats
-  > | null>(() => {
-    if (mini || !chartData?.length) return null;
-    const out: Record<string, MetricWindowStats> = {};
-    for (const type of types) {
-      const stats = computeWindowStats(
-        chartData.map((point) => point[type] as number | undefined),
-      );
-      if (stats.count > 0) out[type] = stats;
-    }
-    return Object.keys(out).length > 0 ? out : null;
-  }, [mini, chartData, types]);
-
-  // Report the visible-range stats up to the sub-page so the shared
-  // `<MetricStatStrip>` can read them. Effect (not render-time call) so the
-  // parent state update never fires during this component's render.
-  // Only once the read has settled: a report during the initial fetch would
-  // tell the strip "no window" and it would paint the full-range summary
-  // first. A failed read settles too, so the strip never waits forever.
-  useEffect(() => {
-    if (mini || isLoading) return;
-    onVisibleStats?.(isError ? null : visibleStatsByType);
-  }, [mini, isLoading, isError, visibleStatsByType, onVisibleStats]);
-
-  // v1.4.16 — comparison overlay.
-  //
-  // When the toggle is active, derive a prior-period series from the
-  // ALREADY-FETCHED daily aggregates (`data`), shift the timestamps
-  // forward by 30 / 365 days, and stamp the values into the visible
-  // `chartData` under `${type}_compare` keys. The Recharts <Line>
-  // children below render those keys as dimmed dashed lines beneath
-  // the current series, and the tooltip picks them up so the user can
-  // read both numbers + the delta in one place.
-  //
-  // The merge is point-equal-day: a prior-period point only paints
-  // when its shifted timestamp lands on a visible day. Sparse prior
-  // periods are silently dropped (the chart's empty caption surfaces
-  // "Comparison unavailable — no data from last month yet" via the
-  // hasComparisonData flag below).
-  const chartDataWithCompare = useMemo(() => {
-    if (!chartData || effectiveCompareBaseline === "none") return chartData;
-    if (!data?.length) return chartData;
-
-    const shifted = shiftDailySeriesForward(
-      data.map((row) => ({
-        timestamp: row.timestamp,
-        values: Object.fromEntries(
-          types.map((type) => [type, row[type] as number | undefined]),
-        ),
-      })),
+    useHealthChartSeries({
+      types,
+      valueMode,
+      bmiDivisor,
+      valueScale,
+      valueOffset,
+      userTimezone,
+      dayKeyFormatter,
+      tzFmt,
+      rangePoints,
       effectiveCompareBaseline,
-    );
-
-    // Index shifted rows by the same day-key the chart already uses.
-    const shiftedByDay = new Map<string, Record<string, number>>();
-    for (const row of shifted) {
-      const dayKey = tzFmt.dateShortSmart(new Date(row.timestamp));
-      const slot = shiftedByDay.get(dayKey) ?? {};
-      for (const [type, value] of Object.entries(row.values)) {
-        if (typeof value === "number" && Number.isFinite(value)) {
-          slot[type] = value;
-        }
-      }
-      shiftedByDay.set(dayKey, slot);
-    }
-
-    return chartData.map((point) => {
-      const compareValues = shiftedByDay.get(point.date);
-      if (!compareValues) return point;
-      const merged: ChartDataPoint = { ...point };
-      for (const type of types) {
-        const v = compareValues[type];
-        if (typeof v === "number" && Number.isFinite(v)) {
-          merged[`${type}_compare`] = v;
-        }
-      }
-      return merged;
+      preloadedSeries,
+      preloadedCoverageDays,
+      enabled: isAuthenticated,
+      onDataReady,
     });
-  }, [chartData, effectiveCompareBaseline, data, types, tzFmt]);
 
-  /**
-   * v1.4.16 — true when at least one visible day has a prior-
-   * period value to overlay. Drives the "Comparison unavailable" caption
-   * fallback in the chart header. Empty input → false → caption shows;
-   * a partial overlay (some days have prior data, some don't) is treated
-   * as "available" so we don't surprise the user with a missing caption
-   * when they can clearly see SOME dimmed history.
-   */
-  const hasComparisonData = useMemo(() => {
-    if (effectiveCompareBaseline === "none" || !chartDataWithCompare)
-      return false;
-    return chartDataWithCompare.some((point) =>
-      types.some(
-        (type) =>
-          typeof point[`${type}_compare`] === "number" &&
-          Number.isFinite(point[`${type}_compare`] as number),
-      ),
-    );
-  }, [chartDataWithCompare, effectiveCompareBaseline, types]);
-
-  // v1.37.29 — the header chip reads the SAME grain decision `chartData`
-  // and the data table use. This was a second memo re-deriving the bucket
-  // from a `slice(-rangePoints)` of its own — exactly the "recomputing
-  // the decision separately" drift the visibleSlice doc-comment warns
-  // about, and the two had already diverged on the windowing semantics.
-  const activeBucket: ChartBucketType = visibleSlice?.bucketType ?? "day";
-  // What a folded point is: the average day of its week or month (a daily
-  // total's average for steps and the like). Named on the caption chip and
-  // in the tooltip.
-  const bucketCaption = bucketCaptionKey(activeBucket, types);
-
-  const yDomain = useMemo<[number, number] | undefined>(() => {
-    if (!chartDataWithCompare?.length) return undefined;
-
-    const keys = [...types];
-    if (showMA) keys.push(...types.map((type) => `${type}_ma`));
-    if (showTrend) keys.push(...types.map((type) => `${type}_trend`));
-    // v1.4.16 — extend the y-domain to fit the prior-period
-    // overlay. Without this the dimmed line can clip outside the
-    // visible range when last-month / last-year had a different scale.
-    if (effectiveCompareBaseline !== "none") {
-      keys.push(...types.map((type) => `${type}_compare`));
-    }
-
-    const values = chartDataWithCompare
-      .flatMap((point) => keys.map((key) => point[key]))
-      .filter((value): value is number => typeof value === "number")
-      .filter((value) => Number.isFinite(value));
-
-    return computePaddedYDomain(values, types);
-  }, [
+  const {
+    visibleSlice,
+    chartData,
+    visibleStatsByType,
     chartDataWithCompare,
-    effectiveCompareBaseline,
+    hasComparisonData,
+    activeBucket,
+    bucketCaption,
+    yDomain,
+  } = useHealthChartView({
+    data,
+    rangePoints,
+    types,
+    userTimezone,
+    tzFmt,
     showMA,
     showTrend,
-    types,
-  ]);
+    effectiveCompareBaseline,
+    mini,
+    isLoading,
+    isError,
+    onVisibleStats,
+  });
 
-  const visibleBands = useMemo(() => {
-    if (!showBands || !valueBands?.length || !yDomain) return [];
+  const { visibleBands, visibleTargetZones, trendInfo, personalBaselines } =
+    useHealthChartOverlays({
+      showBands,
+      showTrend,
+      valueBands,
+      targetZones,
+      yDomain,
+      chartData,
+      types,
+      unit,
+      valueMode,
+      t,
+      fmt,
+    });
 
-    const [domainMin, domainMax] = yDomain;
-    const span = domainMax - domainMin;
-    if (!Number.isFinite(span) || span <= 0) return [];
-
-    return valueBands
-      .map((band, index) => {
-        const low = Math.max(Math.min(band.min, band.max), domainMin);
-        const high = Math.min(Math.max(band.min, band.max), domainMax);
-        if (high <= low) return null;
-
-        const topPct = ((domainMax - high) / span) * 100;
-        const heightPct = ((high - low) / span) * 100;
-
-        return {
-          key: `${band.min}-${band.max}-${index}`,
-          topPct,
-          heightPct,
-          color: band.color,
-          opacity: band.opacity ?? 0.2,
-          strokeOpacity: band.strokeOpacity ?? 0.35,
-        };
-      })
-      .filter(
-        (
-          entry,
-        ): entry is {
-          key: string;
-          topPct: number;
-          heightPct: number;
-          color: string;
-          opacity: number;
-          strokeOpacity: number;
-        } => entry !== null && entry.heightPct > 0,
-      );
-  }, [showBands, valueBands, yDomain]);
-
-  const visibleTargetZones = useMemo<VisibleTargetZone[]>(() => {
-    if (!showBands || !targetZones?.length || !yDomain) return [];
-    const [domainMin, domainMax] = yDomain;
-    const span = domainMax - domainMin;
-    if (!Number.isFinite(span) || span <= 0) return [];
-
-    const zones: Array<{
-      key: string;
-      low: number;
-      high: number;
-      topPct: number;
-      heightPct: number;
-      color: string;
-      opacity: number;
-      label: string | undefined;
-      textColor: string | undefined;
-      lineOpacity: number;
-    }> = [];
-
-    for (const [index, zone] of targetZones.entries()) {
-      const low = Math.max(Math.min(zone.min, zone.max), domainMin);
-      const high = Math.min(Math.max(zone.min, zone.max), domainMax);
-      if (high <= low) continue;
-      const topPct = ((domainMax - high) / span) * 100;
-      const heightPct = ((high - low) / span) * 100;
-
-      zones.push({
-        key: `${zone.min}-${zone.max}-${index}`,
-        low,
-        high,
-        topPct,
-        heightPct,
-        color: zone.color,
-        opacity: zone.opacity ?? 0.3,
-        label: zone.label ?? undefined,
-        textColor: zone.textColor ?? undefined,
-        lineOpacity: zone.lineOpacity ?? 0.42,
-      });
-    }
-
-    return zones;
-  }, [showBands, targetZones, yDomain]);
-
-  // v1.4.33 — preserve one decimal when the visible Y-domain span is
-  // narrow enough that two distinct gridlines would otherwise round to
-  // the same integer (e.g. weight at 82.8 vs 83.5 both rendering as
-  // "83 kg"). The threshold matches the body-composition cluster: any
-  // domain spanning < 6 units gets `0.1`-precision ticks; wider domains
-  // keep the integer formatter so BP / glucose / steps stay clean.
+  // One decimal on the axis while the visible domain spans under 6 units, so
+  // two gridlines never round to the same integer (82.8 vs 83.5 kg).
   const yDomainSpan = yDomain ? yDomain[1] - yDomain[0] : null;
   const useDecimalAxis = yDomainSpan !== null && yDomainSpan < 6;
   const formatAxisValue = (value: number) =>
@@ -1462,214 +233,37 @@ export function HealthChart({
 
   const formatTooltipValue = (value: number) => fmt.number(value, 1);
 
-  // Accessibility — a concise spoken summary of the primary series so a screen
-  // reader announces the shape of the chart (range, latest value, direction)
-  // instead of an unlabelled graphic. Mirrors the visible-range stats the
-  // chart already holds; falls back to the raw min/max when the stat strip
-  // is suppressed (mini mode).
-  const primaryType = types[0];
-  const chartAriaLabel = useMemo(() => {
-    const metric = getTypeLabel(primaryType, valueMode, t);
-    const source = chartDataWithCompare ?? chartData;
-    const values = (source ?? [])
-      .map((point) => point[primaryType])
-      .filter((v): v is number => typeof v === "number" && Number.isFinite(v));
-    if (values.length === 0) {
-      return t("charts.a11y.noData", { metric });
-    }
-    const stats = visibleStatsByType?.[primaryType];
-    const minVal = stats?.min ?? Math.min(...values);
-    const maxVal = stats?.max ?? Math.max(...values);
-    const latestVal = values[values.length - 1];
-    const firstVal = values[0];
-    const epsilon = Math.max(Math.abs(maxVal - minVal) * 0.02, 0.01);
-    const delta = latestVal - firstVal;
-    const trend =
-      delta > epsilon
-        ? t("charts.a11y.trendUp")
-        : delta < -epsilon
-          ? t("charts.a11y.trendDown")
-          : t("charts.a11y.trendFlat");
-    return t("charts.a11y.summary", {
-      metric,
-      min: fmt.number(minVal, 1),
-      max: fmt.number(maxVal, 1),
-      latest: fmt.number(latestVal, 1),
-      trend,
+  const { primaryType, chartAriaLabel, dataTableColumns } =
+    useHealthChartLabels({
+      types,
+      valueMode,
+      t,
+      fmt,
+      chartData,
+      chartDataWithCompare,
+      visibleStatsByType,
+      showDataTable,
+      mini,
     });
-  }, [
-    primaryType,
-    valueMode,
-    t,
-    chartDataWithCompare,
-    chartData,
-    visibleStatsByType,
-    fmt,
-  ]);
-
-  // Columns for the data table below the chart: one per series the chart
-  // actually drew a value for, labelled by the SAME helper that names the
-  // Recharts <Line>, so a header and a legend entry can never disagree. A
-  // type with no value anywhere in the visible window gets no column — a
-  // column of dashes states nothing the chart's own empty line does not.
-  const dataTableColumns = useMemo<ChartDataTableColumn[]>(() => {
-    if (!showDataTable || mini) return [];
-    const source = chartDataWithCompare ?? chartData;
-    if (!source?.length) return [];
-    return types
-      .filter((type) =>
-        source.some(
-          (point) =>
-            typeof point[type] === "number" &&
-            Number.isFinite(point[type] as number),
-        ),
-      )
-      .map((type) => ({ key: type, label: getTypeLabel(type, valueMode, t) }));
-  }, [
-    showDataTable,
-    mini,
-    chartDataWithCompare,
-    chartData,
-    types,
-    valueMode,
-    t,
-  ]);
-
-  const trendInfo = useMemo(() => {
-    if (!showTrend || !chartData?.length) return [];
-
-    const formatSigned = (value: number) => {
-      const formatted = fmt.number(Math.abs(value), 1);
-      return `${value > 0 ? "+" : value < 0 ? "-" : ""}${formatted}`;
-    };
-
-    return types
-      .map((type) => {
-        const series = chartData.filter(
-          (point) =>
-            typeof point[type] === "number" &&
-            typeof point[`${type}_trend`] === "number",
-        );
-        if (series.length < 2) return null;
-
-        const first = series[0];
-        const last = series[series.length - 1];
-        const days = (last.timestamp - first.timestamp) / 86400000;
-        if (!Number.isFinite(days) || days <= 0) return null;
-
-        const rawValues = series.map((point) => point[type] as number);
-        const trendValues = series.map(
-          (point) => point[`${type}_trend`] as number,
-        );
-
-        // v1.4.16 — delegate to the pure helper so the long-
-        // window split-half delta gets a unit-test that doesn't depend
-        // on Recharts. See `src/lib/analytics/window-trend.ts`.
-        const computed = computeWindowTrend({
-          rawValues,
-          trendValues,
-          windowDays: days,
-        });
-        if (!computed) return null;
-
-        const { weeklyDelta, splitHalfDelta } = computed;
-        const base = rawValues[0];
-        const weeklyPct =
-          Math.abs(base) > Number.EPSILON
-            ? (weeklyDelta / Math.abs(base)) * 100
-            : null;
-        const unitSuffix = unit ? ` ${unit}` : "";
-
-        // v1.4.16: when the visible window is long (e.g. "All"
-        // on a multi-year account), the per-week delta becomes vanishingly
-        // small and rounds to ±0.0 in the formatter — the maintainer's complaint
-        // "Wenn ich alle anklicke, dann wird einfach Null Veränderung
-        // angezeigt" was exactly this: a slope of ~0.5 kg/year prints
-        // as "+0.0 kg/week" and the user reads it as "no change". For
-        // windows ≥ SPLIT_HALF_THRESHOLD_DAYS we additionally surface
-        // the first-half vs. second-half mean delta — a single,
-        // meaningful number that cannot round to zero unless the metric
-        // truly didn't move.
-        let totalDeltaSegment = "";
-        if (days >= SPLIT_HALF_THRESHOLD_DAYS && splitHalfDelta !== null) {
-          const meanFirst =
-            rawValues
-              .slice(0, Math.floor(rawValues.length / 2))
-              .reduce((sum, value) => sum + value, 0) /
-            Math.max(1, Math.floor(rawValues.length / 2));
-          const totalDeltaPct =
-            Math.abs(meanFirst) > Number.EPSILON
-              ? (splitHalfDelta / Math.abs(meanFirst)) * 100
-              : null;
-          totalDeltaSegment = ` · ${t(
-            "charts.totalDelta",
-          )} ${formatSigned(splitHalfDelta)}${unitSuffix}${
-            totalDeltaPct != null ? ` (${formatSigned(totalDeltaPct)} %)` : ""
-          }`;
-        }
-
-        return `${getTypeLabel(type, valueMode, t)}: ${formatSigned(
-          weeklyDelta,
-        )}${unitSuffix}${t("charts.perWeek")}${
-          weeklyPct != null
-            ? ` (${formatSigned(weeklyPct)} %${t("charts.perWeek")})`
-            : ""
-        }${totalDeltaSegment}`;
-      })
-      .filter((entry): entry is string => entry !== null);
-  }, [chartData, showTrend, types, unit, valueMode, t, fmt]);
-
-  // v1.4.16 — personal baseline (90-day rolling median) per type.
-  // Painted as a faint dashed reference line labelled "Your normal" so
-  // the user can read each point against their own baseline, not an
-  // absolute value the chart axis happens to render.
-  const personalBaselines = useMemo(() => {
-    if (!chartData?.length) return new Map<string, number>();
-    const map = new Map<string, number>();
-    for (const type of types) {
-      const series = chartData
-        .filter((d) => typeof d[type] === "number")
-        .map((d) => ({ value: d[type] as number }));
-      const baseline = computePersonalBaseline(series, 90);
-      if (baseline !== null) map.set(type, baseline);
-    }
-    return map;
-  }, [chartData, types]);
-
-  // v1.4.43 — keep the card shell mounted even when the loaded
-  // payload is empty. Pre-fix the early `return null` here erased the
-  // whole widget (header + range tabs + chart) and the user saw an
-  // unexplained gap on the dashboard. The in-card render branch below
-  // now paints a "no data in this range" empty state so the user
-  // understands the chart loaded but the selected window holds no
-  // measurements — distinct copy from the < 3-points "more days
-  // needed" hint so the two situations don't blur.
 
+  // An empty window keeps the card shell and paints "no data in this range"
+  // inside it, rather than leaving an unexplained gap.
   const maxPointIndex = Math.max(0, (chartData?.length ?? 1) - 1);
 
-  // v1.4.20 — derive visible annotations via the pure helper
-  // (`resolveAnnotationPositions`). Drops anything outside the
-  // visible window so the chart line + tooltip stay untouched.
   const annotationPositions = resolveAnnotationPositions(
     annotations,
     chartData,
   );
-
-  // v1.4.25 — GLP-1 injection-day vertical markers. Pure-helper
-  // pattern lets the chart-tests pin the marker resolution without
-  // mounting Recharts. Off-window markers silently drop here so the
-  // <ReferenceLine> below never paints a line for an out-of-range
-  // day.
   const verticalMarkerPositions = resolveVerticalMarkerPositions(
     verticalMarkers,
     chartData,
   );
 
-  // v1.42 — the chart as a door to its days (`dayLinks`). Daily points only:
-  // a week or month point averages many days and has no one day to open.
+  // The days as doors: daily points only (a week or month point averages
+  // many days and has no one day to open).
   const dayLinksActive = dayLinks && !mini && activeBucket === "day";
-  // What the day shows at its top when it is opened from a point: the
-  // chart's own name and the point's value as the tooltip reads it.
+  // What the day shows at its top when opened from a point: the chart's name
+  // and the point's value as the tooltip reads it.
   const dayFocusFor = (point: ChartDataPoint | undefined) => {
     if (!point) return null;
     const parts = types
@@ -1705,20 +299,14 @@ export function HealthChart({
 
   const showContextDetails = showMA || showTrend || showBands;
   const animationsEnabled = !prefersReducedMotion();
+  const label = (type: string) => getTypeLabel(type, valueMode, t);
 
-  // v1.4.16 — mini mode tunes padding + margins so the chart fits
-  // inside the rationale card without overwhelming the surrounding
-  // rows. Range tabs + toggle row are suppressed entirely; the chart
-  // pins to `windowOverride` (or the default 30pt) instead.
+  // Mini mode fits the rationale card: tighter padding, no tabs or toggles.
   const containerClass = mini
     ? "bg-card border-border rounded-md border p-2"
     : "bg-card border-border rounded-xl border p-4 md:p-6";
-  // v1.4.27 — chart height now reads from a CSS variable
-  // (`--chart-height`) so consumers can override the default per-mount
-  // without re-styling the component. The `mini` branch keeps the
-  // 140 px contract; the regular branch defaults to 240 px on mobile
-  // and 280 px from `md:` upwards (the wider container can absorb a
-  // taller chart without crowding the tile strip above).
+  // The height reads from `--chart-height` so a mount can override it: 140 px
+  // in mini mode, else 240 px, and 280 px from `md` up.
   const chartHeightClass = mini
     ? "h-[var(--chart-height,140px)]"
     : "h-[var(--chart-height,240px)] md:h-[var(--chart-height-md,280px)]";
@@ -1726,128 +314,28 @@ export function HealthChart({
   return (
     <div className={containerClass} data-slot={mini ? "chart-mini" : undefined}>
       {!mini && (
-        /* v1.4.19 — mobile-first header layout.
-
-           Pre-fix: title + bucket chip + comparison chip + 4 range tabs +
-           cog all sat on a single justify-between flex row. On Pixel 5
-           the chips ate enough horizontal space that the range tabs
-           wrapped to a second row INSIDE that flex (header height
-           jumped from 44 px → 92 px); on Galaxy Fold compact (280 px)
-           the tabs split into 3-4 rows.
-
-           Mobile (default): two stacked rows. Title + non-essential
-           chips on row 1; range tabs + cog right-aligned on row 2.
-           Bucket-aggregation + comparison chips hide entirely below
-           `sm:` because they're decorative and the chart's range tabs
-           already communicate the visible window. The cog dropdown
-           stays accessible to surface those overlays explicitly.
-
-           ≥sm: original side-by-side layout, all chips visible. */
-        <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-wrap items-center gap-2">
-            {/* v1.12.8 — when a `titleIcon` is supplied (every Insights
-                metric subpage), the chart card leads with the canonical
-                `<TileHeader>` (icon + title at `text-base`, foreground
-                colour, h-5 w-5) so it matches the assessment / target /
-                stat tiles. The dashboard / ad-hoc mounts omit the icon and
-                keep the compact heading.
-
-                That compact heading is an `<h2>`, not an `<h3>`. The card is
-                a sibling of the other cards in the same grid, and those name
-                themselves at the second level already — the dashboard's
-                "Recent unlocks" and "Recent workouts" tiles both render
-                `<TileHeader titleAs="h2">`, and the metric subpages' target /
-                usual-range cards are `<h2>` too. Sitting one level lower made
-                the chart card the odd one out AND skipped a level under the
-                page `<h1>`: the dashboard's rendered ladder read h1 → h3 →
-                h3 → h3 → h2 → h2, and /insights/bmi read h1 → h3 → h2. A
-                heading level is a claim about nesting, and the chart card is
-                not nested inside anything. */}
-            {titleIcon ? (
-              <TileHeader icon={titleIcon} title={title} />
-            ) : (
-              <h2 className="text-sm font-semibold">{title}</h2>
-            )}
-            {bucketCaption && (
-              <span
-                data-slot="chart-bucket-caption"
-                className="bg-muted/40 text-muted-foreground text-2xs hidden rounded-md px-1.5 py-0.5 font-medium tracking-wide uppercase sm:inline-flex"
-              >
-                {t(bucketCaption)}
-              </span>
-            )}
-            {/* v1.4.16 — comparison caption. Inline with the
-                bucket-aggregation chip so the user reads "what window
-                am I looking at" + "what comparison is overlaid" in one
-                glance. The "Comparison unavailable" fallback uses
-                neutral muted styling so it doesn't read as an error.
-
-                v1.4.19 — hidden on mobile to free up the title row. */}
-            {effectiveCompareBaseline !== "none" && hasComparisonData && (
-              <span
-                className="text-dose-accent bg-dose-accent/10 text-2xs hidden rounded-md border border-current/30 px-1.5 py-0.5 font-medium tracking-wide uppercase sm:inline-flex"
-                data-slot="chart-compare-caption"
-              >
-                {t(
-                  effectiveCompareBaseline === "lastMonth"
-                    ? "comparison.captionLastMonth"
-                    : "comparison.captionLastYear",
-                )}
-              </span>
-            )}
-            {effectiveCompareBaseline !== "none" && !hasComparisonData && (
-              <span
-                className="text-muted-foreground bg-muted/40 text-2xs hidden rounded-md px-1.5 py-0.5 font-medium tracking-wide sm:inline-flex"
-                data-slot="chart-compare-unavailable"
-              >
-                {t(
-                  effectiveCompareBaseline === "lastMonth"
-                    ? "comparison.unavailable.lastMonth"
-                    : "comparison.unavailable.lastYear",
-                )}
-              </span>
-            )}
-            {/* v1.16.8 — the in-header "adjust targets" link is gone.
-                The page-level target-adjust control in the sub-page
-                header (`<TargetAdjustButton>`) owns the affordance; the
-                chart card stays a read surface. */}
-          </div>
-          <div
-            className="flex flex-nowrap items-center justify-end gap-1 self-end sm:self-auto"
-            data-slot="chart-header-controls"
-          >
-            <ChartRangeTabs
-              value={rangePoints}
-              onChange={(days) => {
-                // v1.12.8 — a range-tab change re-slices `chartData`; the
-                // visible-range stats memo recomputes off the new slice and
-                // the stat strip follows automatically.
-                setRangeHydrated(true);
-                setRangePoints(days);
-                // v1.30.1 — persist the pick per chart, same model
-                // as the overlay toggles, so the range survives a
-                // remount instead of resetting to 30 d every visit.
-                if (chartKey && !windowOverride) {
-                  overlayPrefs.setPrefs({
-                    ...overlayPrefs.prefs,
-                    rangePoints: days,
-                  });
-                }
-              }}
-            />
-            {/* v1.4.18 — overlay-controls dropdown anchored next to
-                the range tabs. Only painted when the chart is bound
-                to a persistent chartKey; ad-hoc usages keep the
-                clean-line default. */}
-            {chartKey && overlayControls ? (
-              <ChartOverlayControls
-                prefs={overlayPrefs.prefs}
-                onChange={overlayPrefs.setPrefs}
-                hasComparisonData={hasComparisonData}
-              />
-            ) : null}
-          </div>
-        </div>
+        <HealthChartHeader
+          title={title}
+          titleIcon={titleIcon}
+          bucketCaption={bucketCaption}
+          compareBaseline={effectiveCompareBaseline}
+          hasComparisonData={hasComparisonData}
+          rangePoints={rangePoints}
+          onRangeChange={(days) => {
+            setRangeHydrated(true);
+            setRangePoints(days);
+            // The pick persists per chart, like the overlay toggles, so it
+            // survives a remount.
+            if (chartKey && !windowOverride) {
+              overlayPrefs.setPrefs({
+                ...overlayPrefs.prefs,
+                rangePoints: days,
+              });
+            }
+          }}
+          overlayPrefs={overlayPrefs}
+          showOverlayControls={Boolean(chartKey && overlayControls)}
+        />
       )}
 
       {mini && (
@@ -1865,12 +353,8 @@ export function HealthChart({
       ) : null}
 
       {isLoading ? (
-        // v1.16.0 — height-matched skeleton band instead of the former
-        // `h-48` spinner box. The loading state now occupies the exact
-        // box the painted chart will (same `chartHeightClass`), so the
-        // card height never jumps when the data lands — the dashboard's
-        // shared-reveal overlay and every insights mount stay
-        // layout-shift-free.
+        // A skeleton in the exact box the painted chart takes, so the card
+        // height never jumps when the data lands.
         <>
           <Skeleton className={`w-full ${chartHeightClass}`} />
           {mini ? null : (
@@ -1881,10 +365,8 @@ export function HealthChart({
           )}
         </>
       ) : isError ? (
-        // v1.16.8 — a failed query paints as an ERROR with a retry
-        // affordance, not as the "no data in this range" empty state.
-        // Pre-fix `isError` fell through to the empty branch and an
-        // outage read as "you have no measurements".
+        // A failed read is an error with retry, never "no data in this
+        // range": an outage must not read as "you have no measurements".
         <ChartErrorState
           error={error}
           title={t("charts.errorTitle")}
@@ -1893,15 +375,8 @@ export function HealthChart({
           onAction={() => void refetch()}
         />
       ) : !chartData?.length ? (
-        // v1.4.43 — empty-window state.
-        //
-        // The chart only withholds rendering when the selected range
-        // holds zero daily points. Any real data — even a single day —
-        // renders the points below; a sparse-data caption (rather than
-        // a withholding card) explains that more days fill out the
-        // trend. The genuinely-empty window paints a distinct empty
-        // state so the user reaches for the range tabs or the quick-add
-        // instead of suspecting a broken widget.
+        // Only a window with no daily point at all withholds the plot; any
+        // real data, even one day, is drawn (with the sparse caption below).
         <ChartEmptyState
           title={t("charts.noDataInRangeTitle")}
           description={t("charts.noDataInRangeDescription")}
@@ -1909,54 +384,21 @@ export function HealthChart({
       ) : (
         <>
           <div
-            // The truth half of `placeholderData: keepPreviousData` above:
-            // while the re-keyed range is still fetching, the previous
-            // range's series stays painted but visibly dimmed and inert, so
-            // it cannot masquerade as the new range.
+            // The other half of `keepPreviousData`: while the re-keyed range
+            // still fetches, the previous range stays painted but dimmed and
+            // inert, so it cannot masquerade as the new one.
             aria-busy={isPlaceholderData}
             className={`relative ${chartHeightClass} transition-opacity ${
               isPlaceholderData ? "pointer-events-none opacity-50" : ""
             }`}
           >
             {visibleBands.length > 0 ? (
-              // v1.4.27 — band overlay positioning fix. The
-              // overlay used to inset `right: 18px` while the chart
-              // margin is `right: 8`, so the band rectangle drifted left
-              // of the plotted line by 10 px on every viewport. Pin the
-              // overlay to the same right edge the ComposedChart uses so
-              // the band tracks the line exactly.
-              <div
-                className="pointer-events-none absolute"
-                style={{
-                  left: `${8 + yAxisWidth}px`,
-                  right: "8px",
-                  top: "10px",
-                  bottom: "32px",
-                  zIndex: 0,
-                }}
-              >
-                {visibleBands.map((band) => (
-                  <div
-                    key={band.key}
-                    className="absolute right-0 left-0"
-                    style={{
-                      top: `${band.topPct}%`,
-                      height: `${band.heightPct}%`,
-                      backgroundColor: band.color,
-                      opacity: band.opacity,
-                      borderTop: `1px solid ${band.color}`,
-                      borderBottom: `1px solid ${band.color}`,
-                    }}
-                  />
-                ))}
-              </div>
+              <ChartBandOverlay bands={visibleBands} yAxisWidth={yAxisWidth} />
             ) : null}
 
             <div
-              // Stable hook for the browser suite. `.recharts-wrapper` is a
-              // library-internal class and it is what the a11y scan used to
-              // gate on; this slot is rendered by the data branch only, so it
-              // says the same thing without depending on Recharts' markup.
+              // A stable hook for the browser suite, rendered by the data
+              // branch only, so a check does not depend on Recharts' markup.
               data-slot="chart-plot"
               {...chartDays.plotProps}
               className={`relative z-10 h-full touch-pan-y ${chartDays.plotClassName}`}
@@ -1991,11 +433,8 @@ export function HealthChart({
                         ),
                       )
                     }
-                    // v1.4.29 — Recharts ignores `interval` on numeric
-                    // axes (`type="number"`). Hand explicit tick
-                    // positions through the `ticks` prop so the legacy
-                    // day-aware density policy stays effective on the
-                    // pulse chart.
+                    // Recharts ignores `interval` on a numeric axis, so the
+                    // day-aware density arrives as explicit tick positions.
                     ticks={computeTickPositions(chartData ?? [], viewportWidth)}
                     padding={{ left: 10, right: 10 }}
                     tickMargin={10}
@@ -2020,336 +459,40 @@ export function HealthChart({
                         : undefined
                     }
                   />
-                  {visibleTargetZones.map((zone) => (
-                    <ReferenceArea
-                      key={`${zone.key}-fill`}
-                      x1={0}
-                      x2={maxPointIndex}
-                      y1={zone.low}
-                      y2={zone.high}
-                      fill={zone.color}
-                      fillOpacity={zone.opacity}
-                      strokeOpacity={0}
-                      ifOverflow="discard"
-                    />
-                  ))}
-                  {visibleTargetZones.map((zone) => (
-                    <ReferenceLine
-                      key={`${zone.key}-low`}
-                      y={zone.low}
-                      stroke={zone.color}
-                      strokeDasharray="6 4"
-                      strokeWidth={1.75}
-                      strokeOpacity={zone.lineOpacity}
-                    />
-                  ))}
-                  {visibleTargetZones.map((zone) => (
-                    <ReferenceLine
-                      key={`${zone.key}-high`}
-                      y={zone.high}
-                      stroke={zone.color}
-                      strokeDasharray="6 4"
-                      strokeWidth={1.75}
-                      strokeOpacity={zone.lineOpacity}
-                      label={
-                        zone.label
-                          ? {
-                              value: zone.label,
-                              position: "right",
-                              fill: zone.textColor ?? zone.color,
-                              fontSize: 10,
-                            }
-                          : undefined
-                      }
-                    />
-                  ))}
-                  {/* v1.4.20 — storyboard annotations.
-                    Vertical reference lines pinned to a specific
-                    visible pointIndex; the label sits above with a
-                    short truncation on `<sm` (24 chars) and the full
-                    label on >=sm. Annotations off-window silently
-                    drop via `ifOverflow="discard"`. */}
-                  {annotationPositions.map((annotation, i) => (
-                    <ReferenceLine
-                      key={`storyboard-${i}-${annotation.pointIndex}`}
-                      x={annotation.pointIndex}
-                      stroke={annotation.color}
-                      strokeDasharray="4 4"
-                      strokeWidth={1.25}
-                      strokeOpacity={0.7}
-                      ifOverflow="discard"
-                      label={{
-                        value:
-                          viewportWidth < 640
-                            ? annotation.truncatedLabel
-                            : annotation.label,
-                        position: "insideTopRight",
-                        fill: annotation.color,
-                        fontSize: 10,
-                        fontWeight: 500,
-                      }}
-                    />
-                  ))}
-                  {/* v1.4.25 — GLP-1 injection-day vertical markers.
-                    Thin dashed line + a small filled dot at the x-axis
-                    intersection so a row of markers reads as "injection
-                    cadence" without crowding the canvas. Optional label
-                    rendered only when the caller passed one; the
-                    dashboard tile leaves it undefined (the date is
-                    redundant — the chart's x-axis already shows it). */}
-                  {verticalMarkerPositions.map((marker, i) => (
-                    <ReferenceLine
-                      key={`vmarker-${i}-${marker.pointIndex}`}
-                      x={marker.pointIndex}
-                      stroke={marker.color}
-                      strokeDasharray="3 3"
-                      strokeWidth={1.1}
-                      strokeOpacity={0.55}
-                      ifOverflow="discard"
-                      label={
-                        marker.label
-                          ? {
-                              value: marker.label,
-                              position: "insideTopRight",
-                              fill: marker.color,
-                              fontSize: 10,
-                              fontWeight: 500,
-                            }
-                          : undefined
-                      }
-                    />
-                  ))}
-                  {yDomain &&
-                    verticalMarkerPositions.map((marker, i) => (
-                      <ReferenceDot
-                        key={`vmarker-dot-${i}-${marker.pointIndex}`}
-                        x={marker.pointIndex}
-                        y={yDomain[0]}
-                        r={3}
-                        fill={marker.color}
-                        stroke="none"
-                        ifOverflow="discard"
-                      />
-                    ))}
-                  {/* v1.42 — the open day: a dashed line through it and a
-                    ring on each of its values, so the point the day panel
-                    describes stays in sight beside it. */}
-                  {openDayIndex !== undefined ? (
-                    <ReferenceLine
-                      key="open-day"
-                      x={openDayIndex}
-                      {...OPEN_DAY_LINE}
-                    />
-                  ) : null}
-                  {openDayIndex !== undefined && openDayPoint
-                    ? types.map((type, i) => {
-                        const v = openDayPoint[type];
-                        if (typeof v !== "number") return null;
-                        return (
-                          <ReferenceDot
-                            key={`open-day-${type}`}
-                            x={openDayIndex}
-                            y={v}
-                            r={6.5}
-                            fill="var(--card)"
-                            stroke={colors[i % colors.length]}
-                            strokeWidth={2.5}
-                            ifOverflow="discard"
-                          />
-                        );
-                      })
-                    : null}
-                  {/* v1.4.18 — personal-baseline reference line is now
-                    opt-in via the Trend toggle. the maintainer rejected the
-                    always-on dashed mean line; it now only paints when
-                    the user actively shows the trend overlay (matching
-                    his rule: "only when a trend is being displayed").
-                    90-day rolling median per type, faint dashed line,
-                    only the first type gets the inline label so
-                    multi-type charts don't paint duplicate labels. */}
-                  {showTrend &&
-                    types.map((type, i) => {
-                      const baseline = personalBaselines.get(type);
-                      if (baseline == null) return null;
-                      return (
-                        <ReferenceLine
-                          key={`baseline-${type}`}
-                          y={baseline}
-                          stroke={colors[i % colors.length]}
-                          strokeDasharray="2 4"
-                          strokeOpacity={0.4}
-                          strokeWidth={1}
-                          ifOverflow="discard"
-                          label={
-                            i === 0
-                              ? {
-                                  value: t("charts.personalBaseline"),
-                                  position: "insideTopLeft",
-                                  fill: "var(--muted-foreground)",
-                                  fontSize: 10,
-                                  opacity: 0.7,
-                                }
-                              : undefined
-                          }
-                        />
-                      );
-                    })}
+                  {targetZoneLayers(visibleTargetZones, maxPointIndex)}
+                  {annotationLayers(annotationPositions, viewportWidth)}
+                  {verticalMarkerLayers(verticalMarkerPositions, yDomain)}
+                  {openDayLayers(openDayIndex, openDayPoint, types, colors)}
+                  {baselineLayers(
+                    showTrend,
+                    types,
+                    colors,
+                    personalBaselines,
+                    t,
+                  )}
                   <Tooltip
                     filterNull={false}
-                    // v1.42 — on a touch screen the tooltip is the way to the
-                    // day: it stays where the tap put it and takes taps.
+                    // On a touch screen the tooltip is the way to the day: it
+                    // stays where the tap put it and takes taps.
                     {...chartDays.tooltipProps}
                     cursor={{
                       stroke: "var(--muted-foreground)",
                       strokeOpacity: 0.3,
                       strokeDasharray: "3 3",
                     }}
-                    content={(props) => {
-                      const {
-                        active,
-                        payload,
-                        label: rechartsLabel,
-                      } = props as unknown as {
-                        active?: boolean;
-                        payload?: Array<{
-                          name?: string;
-                          value?: number;
-                          color?: string;
-                          dataKey?: string;
-                          payload?: ChartDataPoint;
-                        }>;
-                        label?: number;
-                      };
-                      if (!active || !payload?.length) return null;
-                      const ts =
-                        payload[0]?.payload?.timestamp ??
-                        (typeof rechartsLabel === "number"
-                          ? chartData?.[Math.round(rechartsLabel)]?.timestamp
-                          : undefined);
-                      const dateLabel = ts ? tzFmt.date(new Date(ts)) : "";
-                      const rows: RichTooltipRow[] = [];
-                      // Build a quick lookup of compare values for this
-                      // hover-day so the current-period row can attach
-                      // a "vs. last month / year" delta inline. Same-day
-                      // current ↔ compare values come from the SAME
-                      // payload object.
-                      const hoverPoint = payload[0]?.payload as
-                        ChartDataPoint | undefined;
-                      for (const item of payload) {
-                        if (typeof item.value !== "number") continue;
-                        const dataKey = String(item.dataKey ?? "");
-                        // Skip auxiliary lines (`*_ma`, `*_trend`,
-                        // `*_compare`) — the comparison value is rendered
-                        // inline as the delta on the current-period row,
-                        // and ma / trend already appear as dashed overlays
-                        // on the chart itself.
-                        if (
-                          dataKey.endsWith("_ma") ||
-                          dataKey.endsWith("_trend") ||
-                          dataKey.endsWith("_compare")
-                        )
-                          continue;
-                        const baseline = personalBaselines.get(dataKey);
-                        let delta: string | undefined;
-                        // v1.4.16 — prefer the comparison delta
-                        // ("Δ −7 vs. last month") over the personal
-                        // baseline delta when comparison is active and we
-                        // have a prior value for this day. Otherwise fall
-                        // back to the existing baseline-delta path.
-                        const compareValue =
-                          effectiveCompareBaseline !== "none" && hoverPoint
-                            ? (hoverPoint[`${dataKey}_compare`] as
-                                number | undefined)
-                            : undefined;
-                        if (
-                          effectiveCompareBaseline !== "none" &&
-                          typeof compareValue === "number" &&
-                          Number.isFinite(compareValue)
-                        ) {
-                          const diff = item.value - compareValue;
-                          if (Math.abs(diff) < 0.05) {
-                            delta = t("charts.deltaUnchanged");
-                          } else {
-                            const sign = diff > 0 ? "+" : "−";
-                            const formatted = `${sign}${fmt.number(
-                              Math.abs(diff),
-                              1,
-                            )}${unit ? ` ${unit}` : ""}`;
-                            delta = t(
-                              effectiveCompareBaseline === "lastMonth"
-                                ? "comparison.deltaVs.lastMonth"
-                                : "comparison.deltaVs.lastYear",
-                            ).replace("{delta}", formatted);
-                          }
-                        } else if (baseline != null) {
-                          const diff = item.value - baseline;
-                          if (Math.abs(diff) < 0.05) {
-                            delta = t("charts.deltaUnchanged");
-                          } else {
-                            const sign = diff > 0 ? "+" : "−";
-                            const formatted = `${sign}${fmt.number(
-                              Math.abs(diff),
-                              1,
-                            )}${unit ? ` ${unit}` : ""}`;
-                            delta = t("charts.deltaVsBaseline").replace(
-                              "{delta}",
-                              formatted,
-                            );
-                          }
-                        }
-                        rows.push({
-                          // Name the statistic where it is not the plain mean
-                          // of the readings: a day of pulse is the mean of its
-                          // hours' means.
-                          name: usesHourlyMeanDay(dataKey)
-                            ? t("charts.tooltipHourlyMean", {
-                                metric: item.name ?? dataKey,
-                              })
-                            : (item.name ?? dataKey),
-                          value: `${formatTooltipValue(item.value)}${
-                            unit ? ` ${unit}` : ""
-                          }`,
-                          color: item.color ?? "var(--dracula-purple)",
-                          delta,
-                        });
-                        // v1.4.16 — also surface the prior-period
-                        // value as its own row so the user reads both
-                        // numbers (current AND last-month / last-year)
-                        // alongside the delta.
-                        if (
-                          effectiveCompareBaseline !== "none" &&
-                          typeof compareValue === "number" &&
-                          Number.isFinite(compareValue)
-                        ) {
-                          rows.push({
-                            name: `${item.name ?? dataKey} · ${t(
-                              "comparison.tooltipPrior",
-                            )}`,
-                            value: `${formatTooltipValue(compareValue)}${
-                              unit ? ` ${unit}` : ""
-                            }`,
-                            color: item.color ?? "var(--dracula-purple)",
-                          });
-                        }
-                      }
-                      if (rows.length === 0) return null;
-                      return (
-                        <RichChartTooltip
-                          active
-                          label={
-                            bucketCaption
-                              ? `${dateLabel} · ${t(bucketCaption)}`
-                              : dateLabel
-                          }
-                          rows={rows}
-                          action={chartDays.tooltipAction(
-                            hoverPoint
-                              ? dayLinkSource?.indexOf(hoverPoint)
-                              : undefined,
-                          )}
-                        />
-                      );
-                    }}
+                    content={makeTooltipContent({
+                      chartData,
+                      dayLinkSource,
+                      personalBaselines,
+                      compareBaseline: effectiveCompareBaseline,
+                      bucketCaption,
+                      unit,
+                      t,
+                      fmt,
+                      dateLabelFor: tzFmt.date,
+                      formatValue: formatTooltipValue,
+                      tooltipAction: chartDays.tooltipAction,
+                    })}
                   />
                   {showContextDetails && (
                     <Legend
@@ -2360,119 +503,24 @@ export function HealthChart({
                       }}
                     />
                   )}
-                  {/* v1.8.5 — min–max range band. An Apple-Health-style
-                    shaded area between each day's min and max, painted
-                    behind the mean line so it reads as context, not a
-                    second series. Gated on `!mini` (the dashboard
-                    sparkline stays clean) and on the daily-aggregate
-                    path supplying a `[min, max]` tuple per point — single
-                    non-cumulative metrics with intra-day spread (pulse,
-                    weight, glucose, BP). The toggle rides the existing
-                    target-range pref so the user controls both bands
-                    from one switch. */}
-                  {!mini &&
-                    showBands &&
-                    types.map((type, i) => (
-                      <Area
-                        key={`${type}__range`}
-                        type="monotone"
-                        dataKey={`${type}__range`}
-                        name={`${getTypeLabel(type, valueMode, t)} (${t("charts.rangeBand")})`}
-                        stroke="none"
-                        fill={colors[i % colors.length]}
-                        fillOpacity={0.12}
-                        connectNulls
-                        isAnimationActive={animationsEnabled}
-                        legendType="none"
-                        tooltipType="none"
-                      />
-                    ))}
-                  {types.map((type, i) => (
-                    <Line
-                      key={type}
-                      type="monotone"
-                      dataKey={type}
-                      name={getTypeLabel(type, valueMode, t)}
-                      stroke={colors[i % colors.length]}
-                      strokeWidth={2}
-                      dot={{ r: 3, fill: colors[i % colors.length] }}
-                      activeDot={{ r: 5 }}
-                      connectNulls
-                      isAnimationActive={animationsEnabled}
-                      animationDuration={animationsEnabled ? 600 : 0}
-                      animationEasing="ease-out"
-                    />
-                  ))}
-                  {showMA &&
-                    types.map((type, i) => (
-                      <Line
-                        key={`${type}_ma`}
-                        type="monotone"
-                        dataKey={`${type}_ma`}
-                        name={`${getTypeLabel(type, valueMode, t)} (${t("charts.movingAverage7d")})`}
-                        stroke={colors[i % colors.length]}
-                        strokeWidth={1.5}
-                        strokeDasharray="5 5"
-                        strokeOpacity={0.7}
-                        dot={false}
-                        connectNulls
-                      />
-                    ))}
-                  {showTrend &&
-                    types.map((type) => (
-                      <Line
-                        key={`${type}_trend`}
-                        type="linear"
-                        dataKey={`${type}_trend`}
-                        name={`${getTypeLabel(type, valueMode, t)} (${t("charts.trend")})`}
-                        stroke="var(--muted-foreground)"
-                        strokeWidth={1}
-                        strokeDasharray="8 4"
-                        dot={false}
-                        connectNulls
-                      />
-                    ))}
-                  {/* v1.4.16 — comparison overlay.
-                    A dimmed dashed line per type for the prior period
-                    (lastMonth / lastYear), painted BENEATH the current
-                    series via Recharts' source-order layering. Same
-                    base colour as the current line but with reduced
-                    stroke opacity (45%) and a thinner stroke (1.25)
-                    so the user reads the current line first and the
-                    overlay as orientation. */}
-                  {effectiveCompareBaseline !== "none" &&
-                    hasComparisonData &&
-                    types.map((type, i) => (
-                      <Line
-                        key={`${type}_compare`}
-                        type="monotone"
-                        dataKey={`${type}_compare`}
-                        name={`${getTypeLabel(type, valueMode, t)} (${t(
-                          effectiveCompareBaseline === "lastMonth"
-                            ? "comparison.captionLastMonth"
-                            : "comparison.captionLastYear",
-                        )})`}
-                        stroke={colors[i % colors.length]}
-                        strokeWidth={1.25}
-                        strokeDasharray="4 3"
-                        strokeOpacity={0.45}
-                        dot={false}
-                        connectNulls
-                        isAnimationActive={animationsEnabled}
-                        animationDuration={animationsEnabled ? 600 : 0}
-                        animationEasing="ease-out"
-                        legendType="none"
-                        data-slot={`chart-compare-line-${type}`}
-                      />
-                    ))}
+                  {seriesLayers({
+                    types,
+                    colors,
+                    label,
+                    t,
+                    mini,
+                    showBands,
+                    showMA,
+                    showTrend,
+                    compareBaseline: effectiveCompareBaseline,
+                    hasComparisonData,
+                    animationsEnabled,
+                  })}
                 </ComposedChart>
               </ResponsiveContainer>
             </div>
-            {/* Sparse-data caption. With fewer than three daily points the
-              chart still paints every reading (a single marker for one
-              day, a line for two), and this subtle note sets the
-              expectation that more days fill out the trend — rather than
-              withholding the data behind a placeholder card. */}
+            {/* With fewer than three daily points the chart still paints
+                every reading; this note says more days fill out the trend. */}
             {!mini && (chartData?.length ?? 0) < 3 ? (
               <p
                 className="text-muted-foreground mt-2 text-center text-xs"
@@ -2486,18 +534,15 @@ export function HealthChart({
             <ChartDayFooter
               links={chartDays}
               points={chartData}
-              // The plot's margin (8) + the y axis + the x axis padding
-              // (10) on the left, margin + padding on the right.
+              // The plot's margin (8) + the y axis + the x axis padding (10)
+              // on the left, margin + padding on the right.
               insetLeft={8 + yAxisWidth + 10}
               insetRight={8 + 10}
             />
           ) : null}
-          {/* The points the chart just drew, as a table. Reads the SAME
-              expression `<ComposedChart data>` is handed above, so the two
-              cannot disagree. Sits inside this branch on purpose: an empty
-              window paints the empty state and no table at all, because
-              `<ChartEmptyState>` already says there is nothing here and a
-              disclosure opening onto nothing would say it twice. */}
+          {/* The points the chart just drew, as a table, read from the same
+              expression `<ComposedChart data>` is handed. Inside this branch
+              on purpose: an empty window shows the empty state and no table. */}
           {showDataTable && !mini && dataTableColumns.length > 0 ? (
             <ChartDataTable
               points={chartDataWithCompare ?? chartData ?? []}
diff --git a/src/components/charts/health-chart/band-overlay.tsx b/src/components/charts/health-chart/band-overlay.tsx
new file mode 100644
index 000000000..5957faf7d
--- /dev/null
+++ b/src/components/charts/health-chart/band-overlay.tsx
@@ -0,0 +1,43 @@
+import type { VisibleValueBand } from "./types";
+
+/**
+ * The value bands, painted as HTML behind the plot. The overlay is pinned to
+ * the plot's own edges (the chart margin of 8 px plus the y axis on the left,
+ * the 8 px margin on the right, the plot's top and bottom insets), so a band
+ * tracks the line exactly.
+ */
+export function ChartBandOverlay({
+  bands,
+  yAxisWidth,
+}: {
+  bands: VisibleValueBand[];
+  yAxisWidth: number;
+}) {
+  return (
+    <div
+      className="pointer-events-none absolute"
+      style={{
+        left: `${8 + yAxisWidth}px`,
+        right: "8px",
+        top: "10px",
+        bottom: "32px",
+        zIndex: 0,
+      }}
+    >
+      {bands.map((band) => (
+        <div
+          key={band.key}
+          className="absolute right-0 left-0"
+          style={{
+            top: `${band.topPct}%`,
+            height: `${band.heightPct}%`,
+            backgroundColor: band.color,
+            opacity: band.opacity,
+            borderTop: `1px solid ${band.color}`,
+            borderBottom: `1px solid ${band.color}`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/charts/health-chart/chart-header.tsx b/src/components/charts/health-chart/chart-header.tsx
new file mode 100644
index 000000000..8ee64d7fc
--- /dev/null
+++ b/src/components/charts/health-chart/chart-header.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import type { ComponentType } from "react";
+
+import { TileHeader } from "@/components/insights/tile-header";
+import type { useChartOverlayPrefs } from "@/hooks/use-chart-overlay-prefs";
+import type {
+  ChartRangePoints,
+  ComparisonBaseline,
+} from "@/lib/dashboard-layout";
+import { useTranslations } from "@/lib/i18n/context";
+
+import { ChartOverlayControls } from "../chart-overlay-controls";
+import { ChartRangeTabs } from "../chart-range-tabs";
+
+/**
+ * The chart card's header. Mobile first: the title and its chips on one row,
+ * the range tabs and the overlay cog right-aligned on a second; the bucket
+ * and comparison chips hide below `sm` (the range tabs already say which
+ * window is shown, and the cog still reaches the overlays). From `sm` up
+ * everything sits on one row.
+ */
+export function HealthChartHeader({
+  title,
+  titleIcon,
+  bucketCaption,
+  compareBaseline,
+  hasComparisonData,
+  rangePoints,
+  onRangeChange,
+  overlayPrefs,
+  showOverlayControls,
+}: {
+  title: string;
+  titleIcon?: ComponentType<{ className?: string }>;
+  bucketCaption: string | null;
+  compareBaseline: ComparisonBaseline;
+  hasComparisonData: boolean;
+  rangePoints: number;
+  onRangeChange: (days: ChartRangePoints) => void;
+  overlayPrefs: ReturnType<typeof useChartOverlayPrefs>;
+  showOverlayControls: boolean;
+}) {
+  const { t } = useTranslations();
+  return (
+    <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-wrap items-center gap-2">
+        {/* With a `titleIcon` (every metric page) the card leads with the
+            canonical `<TileHeader>`; the dashboard and ad-hoc mounts keep the
+            compact heading. That heading is an `<h2>`: the card is a sibling
+            of the other cards in its grid, which name themselves at the
+            second level, and one level lower skipped a level under the page
+            `<h1>`. */}
+        {titleIcon ? (
+          <TileHeader icon={titleIcon} title={title} />
+        ) : (
+          <h2 className="text-sm font-semibold">{title}</h2>
+        )}
+        {bucketCaption && (
+          <span
+            data-slot="chart-bucket-caption"
+            className="bg-muted/40 text-muted-foreground text-2xs hidden rounded-md px-1.5 py-0.5 font-medium tracking-wide uppercase sm:inline-flex"
+          >
+            {t(bucketCaption)}
+          </span>
+        )}
+        {/* The comparison caption sits beside the bucket chip: "which window"
+            and "which overlay" in one glance. The unavailable fallback is
+            muted so it does not read as an error. */}
+        {compareBaseline !== "none" && hasComparisonData && (
+          <span
+            className="text-dose-accent bg-dose-accent/10 text-2xs hidden rounded-md border border-current/30 px-1.5 py-0.5 font-medium tracking-wide uppercase sm:inline-flex"
+            data-slot="chart-compare-caption"
+          >
+            {t(
+              compareBaseline === "lastMonth"
+                ? "comparison.captionLastMonth"
+                : "comparison.captionLastYear",
+            )}
+          </span>
+        )}
+        {compareBaseline !== "none" && !hasComparisonData && (
+          <span
+            className="text-muted-foreground bg-muted/40 text-2xs hidden rounded-md px-1.5 py-0.5 font-medium tracking-wide sm:inline-flex"
+            data-slot="chart-compare-unavailable"
+          >
+            {t(
+              compareBaseline === "lastMonth"
+                ? "comparison.unavailable.lastMonth"
+                : "comparison.unavailable.lastYear",
+            )}
+          </span>
+        )}
+        {/* The page-level target control owns "adjust targets"; the chart
+            card stays a read surface. */}
+      </div>
+      <div
+        className="flex flex-nowrap items-center justify-end gap-1 self-end sm:self-auto"
+        data-slot="chart-header-controls"
+      >
+        <ChartRangeTabs value={rangePoints} onChange={onRangeChange} />
+        {/* Only a chart bound to a persistent key offers the overlay
+            controls; ad-hoc charts keep the clean line. */}
+        {showOverlayControls ? (
+          <ChartOverlayControls
+            prefs={overlayPrefs.prefs}
+            onChange={overlayPrefs.setPrefs}
+            hasComparisonData={hasComparisonData}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/charts/health-chart/chart-layers.tsx b/src/components/charts/health-chart/chart-layers.tsx
new file mode 100644
index 000000000..b17f2acb0
--- /dev/null
+++ b/src/components/charts/health-chart/chart-layers.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+/**
+ * The reference layers and series inside `HealthChart`'s plot.
+ *
+ * Each is a plain function that returns the Recharts elements (never a
+ * component wrapping them), so the plot's child list is exactly the list of
+ * elements it always was: Recharts lays its layers out in source order, and a
+ * wrapper component would change what it sees.
+ */
+import {
+  Area,
+  Line,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+} from "recharts";
+
+import { OPEN_DAY_LINE } from "@/components/day/chart-day-links";
+import type { ComparisonBaseline } from "@/lib/dashboard-layout";
+
+import type { ResolvedAnnotation, ResolvedVerticalMarker } from "./series-math";
+import type { ChartDataPoint, VisibleTargetZone } from "./types";
+
+type Translate = (key: string) => string;
+
+/** Target zones: the shaded area, then the dashed low and high edges. */
+export function targetZoneLayers(
+  zones: VisibleTargetZone[],
+  maxPointIndex: number,
+) {
+  return [
+    zones.map((zone) => (
+      <ReferenceArea
+        key={`${zone.key}-fill`}
+        x1={0}
+        x2={maxPointIndex}
+        y1={zone.low}
+        y2={zone.high}
+        fill={zone.color}
+        fillOpacity={zone.opacity}
+        strokeOpacity={0}
+        ifOverflow="discard"
+      />
+    )),
+    zones.map((zone) => (
+      <ReferenceLine
+        key={`${zone.key}-low`}
+        y={zone.low}
+        stroke={zone.color}
+        strokeDasharray="6 4"
+        strokeWidth={1.75}
+        strokeOpacity={zone.lineOpacity}
+      />
+    )),
+    zones.map((zone) => (
+      <ReferenceLine
+        key={`${zone.key}-high`}
+        y={zone.high}
+        stroke={zone.color}
+        strokeDasharray="6 4"
+        strokeWidth={1.75}
+        strokeOpacity={zone.lineOpacity}
+        label={
+          zone.label
+            ? {
+                value: zone.label,
+                position: "right",
+                fill: zone.textColor ?? zone.color,
+                fontSize: 10,
+              }
+            : undefined
+        }
+      />
+    )),
+  ];
+}
+
+/**
+ * Storyboard annotations: a vertical line on the visible point with its label
+ * above, truncated to 24 characters below 640 px.
+ */
+export function annotationLayers(
+  annotations: ResolvedAnnotation[],
+  viewportWidth: number,
+) {
+  return annotations.map((annotation, i) => (
+    <ReferenceLine
+      key={`storyboard-${i}-${annotation.pointIndex}`}
+      x={annotation.pointIndex}
+      stroke={annotation.color}
+      strokeDasharray="4 4"
+      strokeWidth={1.25}
+      strokeOpacity={0.7}
+      ifOverflow="discard"
+      label={{
+        value:
+          viewportWidth < 640 ? annotation.truncatedLabel : annotation.label,
+        position: "insideTopRight",
+        fill: annotation.color,
+        fontSize: 10,
+        fontWeight: 500,
+      }}
+    />
+  ));
+}
+
+/**
+ * Event markers: a thin dashed line and a dot where it meets the x axis, so a
+ * row of them reads as a cadence. A label only when the caller gave one.
+ */
+export function verticalMarkerLayers(
+  markers: ResolvedVerticalMarker[],
+  yDomain: [number, number] | undefined,
+) {
+  return [
+    markers.map((marker, i) => (
+      <ReferenceLine
+        key={`vmarker-${i}-${marker.pointIndex}`}
+        x={marker.pointIndex}
+        stroke={marker.color}
+        strokeDasharray="3 3"
+        strokeWidth={1.1}
+        strokeOpacity={0.55}
+        ifOverflow="discard"
+        label={
+          marker.label
+            ? {
+                value: marker.label,
+                position: "insideTopRight",
+                fill: marker.color,
+                fontSize: 10,
+                fontWeight: 500,
+              }
+            : undefined
+        }
+      />
+    )),
+    yDomain &&
+      markers.map((marker, i) => (
+        <ReferenceDot
+          key={`vmarker-dot-${i}-${marker.pointIndex}`}
+          x={marker.pointIndex}
+          y={yDomain[0]}
+          r={3}
+          fill={marker.color}
+          stroke="none"
+          ifOverflow="discard"
+        />
+      )),
+  ];
+}
+
+/**
+ * The open day: a dashed line through it and a ring on each of its values,
+ * so the point the day panel describes stays in sight beside it.
+ */
+export function openDayLayers(
+  openDayIndex: number | undefined,
+  openDayPoint: ChartDataPoint | undefined,
+  types: string[],
+  colors: string[],
+) {
+  return [
+    openDayIndex !== undefined ? (
+      <ReferenceLine key="open-day" x={openDayIndex} {...OPEN_DAY_LINE} />
+    ) : null,
+    openDayIndex !== undefined && openDayPoint
+      ? types.map((type, i) => {
+          const v = openDayPoint[type];
+          if (typeof v !== "number") return null;
+          return (
+            <ReferenceDot
+              key={`open-day-${type}`}
+              x={openDayIndex}
+              y={v}
+              r={6.5}
+              fill="var(--card)"
+              stroke={colors[i % colors.length]}
+              strokeWidth={2.5}
+              ifOverflow="discard"
+            />
+          );
+        })
+      : null,
+  ];
+}
+
+/**
+ * The personal baseline per type, only while the trend overlay is shown (an
+ * always-on mean line was rejected). Only the first type carries the label,
+ * so a multi-type chart does not paint it twice.
+ */
+export function baselineLayers(
+  showTrend: boolean,
+  types: string[],
+  colors: string[],
+  personalBaselines: Map<string, number>,
+  t: Translate,
+) {
+  return (
+    showTrend &&
+    types.map((type, i) => {
+      const baseline = personalBaselines.get(type);
+      if (baseline == null) return null;
+      return (
+        <ReferenceLine
+          key={`baseline-${type}`}
+          y={baseline}
+          stroke={colors[i % colors.length]}
+          strokeDasharray="2 4"
+          strokeOpacity={0.4}
+          strokeWidth={1}
+          ifOverflow="discard"
+          label={
+            i === 0
+              ? {
+                  value: t("charts.personalBaseline"),
+                  position: "insideTopLeft",
+                  fill: "var(--muted-foreground)",
+                  fontSize: 10,
+                  opacity: 0.7,
+                }
+              : undefined
+          }
+        />
+      );
+    })
+  );
+}
+
+/**
+ * The series, in paint order: the min–max range band behind the mean line
+ * (not in mini mode, and only with the target-range toggle, which controls
+ * both bands), the lines, the dashed 7-day average, the trend line, and the
+ * dimmed prior period (thinner and at 45 % so the current line reads first).
+ */
+export function seriesLayers({
+  types,
+  colors,
+  label,
+  t,
+  mini,
+  showBands,
+  showMA,
+  showTrend,
+  compareBaseline,
+  hasComparisonData,
+  animationsEnabled,
+}: {
+  types: string[];
+  colors: string[];
+  label: (type: string) => string;
+  t: Translate;
+  mini: boolean;
+  showBands: boolean;
+  showMA: boolean;
+  showTrend: boolean;
+  compareBaseline: ComparisonBaseline;
+  hasComparisonData: boolean;
+  animationsEnabled: boolean;
+}) {
+  return [
+    !mini &&
+      showBands &&
+      types.map((type, i) => (
+        <Area
+          key={`${type}__range`}
+          type="monotone"
+          dataKey={`${type}__range`}
+          name={`${label(type)} (${t("charts.rangeBand")})`}
+          stroke="none"
+          fill={colors[i % colors.length]}
+          fillOpacity={0.12}
+          connectNulls
+          isAnimationActive={animationsEnabled}
+          legendType="none"
+          tooltipType="none"
+        />
+      )),
+    types.map((type, i) => (
+      <Line
+        key={type}
+        type="monotone"
+        dataKey={type}
+        name={label(type)}
+        stroke={colors[i % colors.length]}
+        strokeWidth={2}
+        dot={{ r: 3, fill: colors[i % colors.length] }}
+        activeDot={{ r: 5 }}
+        connectNulls
+        isAnimationActive={animationsEnabled}
+        animationDuration={animationsEnabled ? 600 : 0}
+        animationEasing="ease-out"
+      />
+    )),
+    showMA &&
+      types.map((type, i) => (
+        <Line
+          key={`${type}_ma`}
+          type="monotone"
+          dataKey={`${type}_ma`}
+          name={`${label(type)} (${t("charts.movingAverage7d")})`}
+          stroke={colors[i % colors.length]}
+          strokeWidth={1.5}
+          strokeDasharray="5 5"
+          strokeOpacity={0.7}
+          dot={false}
+          connectNulls
+        />
+      )),
+    showTrend &&
+      types.map((type) => (
+        <Line
+          key={`${type}_trend`}
+          type="linear"
+          dataKey={`${type}_trend`}
+          name={`${label(type)} (${t("charts.trend")})`}
+          stroke="var(--muted-foreground)"
+          strokeWidth={1}
+          strokeDasharray="8 4"
+          dot={false}
+          connectNulls
+        />
+      )),
+    compareBaseline !== "none" &&
+      hasComparisonData &&
+      types.map((type, i) => (
+        <Line
+          key={`${type}_compare`}
+          type="monotone"
+          dataKey={`${type}_compare`}
+          name={`${label(type)} (${t(
+            compareBaseline === "lastMonth"
+              ? "comparison.captionLastMonth"
+              : "comparison.captionLastYear",
+          )})`}
+          stroke={colors[i % colors.length]}
+          strokeWidth={1.25}
+          strokeDasharray="4 3"
+          strokeOpacity={0.45}
+          dot={false}
+          connectNulls
+          isAnimationActive={animationsEnabled}
+          animationDuration={animationsEnabled ? 600 : 0}
+          animationEasing="ease-out"
+          legendType="none"
+          data-slot={`chart-compare-line-${type}`}
+        />
+      )),
+  ];
+}
diff --git a/src/components/charts/health-chart/chart-tooltip-content.tsx b/src/components/charts/health-chart/chart-tooltip-content.tsx
new file mode 100644
index 000000000..b2ebb84ad
--- /dev/null
+++ b/src/components/charts/health-chart/chart-tooltip-content.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import type { useFormatters } from "@/lib/i18n/context";
+import type { ComparisonBaseline } from "@/lib/dashboard-layout";
+import { usesHourlyMeanDay } from "@/lib/measurements/day-statistic";
+
+import { RichChartTooltip, type RichTooltipRow } from "../chart-tooltip";
+
+import type { ChartDataPoint } from "./types";
+
+type Translate = (
+  key: string,
+  params?: Record<string, string | number>,
+) => string;
+
+interface TooltipPayloadItem {
+  name?: string;
+  value?: number;
+  color?: string;
+  dataKey?: string;
+  payload?: ChartDataPoint;
+}
+
+/**
+ * The tooltip's `content` renderer. One row per series under the cursor,
+ * with a delta: against the prior period when the comparison is on and the
+ * day has a prior value (and the prior value as its own row), otherwise
+ * against the personal baseline. The auxiliary lines (`*_ma`, `*_trend`,
+ * `*_compare`) are skipped: the comparison shows up as the delta, and the
+ * average and trend are already drawn as dashed overlays.
+ */
+export function makeTooltipContent({
+  chartData,
+  dayLinkSource,
+  personalBaselines,
+  compareBaseline,
+  bucketCaption,
+  unit,
+  t,
+  fmt,
+  dateLabelFor,
+  formatValue,
+  tooltipAction,
+}: {
+  chartData: ChartDataPoint[] | undefined;
+  dayLinkSource: ChartDataPoint[] | undefined;
+  personalBaselines: Map<string, number>;
+  compareBaseline: ComparisonBaseline;
+  bucketCaption: string | null;
+  unit?: string;
+  t: Translate;
+  fmt: ReturnType<typeof useFormatters>;
+  dateLabelFor: (date: Date) => string;
+  formatValue: (value: number) => string;
+  tooltipAction: (index: number | undefined) => ReactNode | undefined;
+}) {
+  const unitSuffix = unit ? ` ${unit}` : "";
+  const signedDelta = (diff: number) => {
+    const sign = diff > 0 ? "+" : "−";
+    return `${sign}${fmt.number(Math.abs(diff), 1)}${unitSuffix}`;
+  };
+
+  return function TooltipContent(props: unknown) {
+    const {
+      active,
+      payload,
+      label: rechartsLabel,
+    } = props as {
+      active?: boolean;
+      payload?: TooltipPayloadItem[];
+      label?: number;
+    };
+    if (!active || !payload?.length) return null;
+    const ts =
+      payload[0]?.payload?.timestamp ??
+      (typeof rechartsLabel === "number"
+        ? chartData?.[Math.round(rechartsLabel)]?.timestamp
+        : undefined);
+    const dateLabel = ts ? dateLabelFor(new Date(ts)) : "";
+    const rows: RichTooltipRow[] = [];
+    // The current and prior values of the hovered day come from the same
+    // payload object.
+    const hoverPoint = payload[0]?.payload as ChartDataPoint | undefined;
+    for (const item of payload) {
+      if (typeof item.value !== "number") continue;
+      const dataKey = String(item.dataKey ?? "");
+      if (
+        dataKey.endsWith("_ma") ||
+        dataKey.endsWith("_trend") ||
+        dataKey.endsWith("_compare")
+      )
+        continue;
+      const baseline = personalBaselines.get(dataKey);
+      let delta: string | undefined;
+      const compareValue =
+        compareBaseline !== "none" && hoverPoint
+          ? (hoverPoint[`${dataKey}_compare`] as number | undefined)
+          : undefined;
+      if (
+        compareBaseline !== "none" &&
+        typeof compareValue === "number" &&
+        Number.isFinite(compareValue)
+      ) {
+        const diff = item.value - compareValue;
+        delta =
+          Math.abs(diff) < 0.05
+            ? t("charts.deltaUnchanged")
+            : t(
+                compareBaseline === "lastMonth"
+                  ? "comparison.deltaVs.lastMonth"
+                  : "comparison.deltaVs.lastYear",
+              ).replace("{delta}", signedDelta(diff));
+      } else if (baseline != null) {
+        const diff = item.value - baseline;
+        delta =
+          Math.abs(diff) < 0.05
+            ? t("charts.deltaUnchanged")
+            : t("charts.deltaVsBaseline").replace("{delta}", signedDelta(diff));
+      }
+      rows.push({
+        // Name the statistic where it is not the plain mean of the readings:
+        // a day of pulse is the mean of its hours' means.
+        name: usesHourlyMeanDay(dataKey)
+          ? t("charts.tooltipHourlyMean", {
+              metric: item.name ?? dataKey,
+            })
+          : (item.name ?? dataKey),
+        value: `${formatValue(item.value)}${unitSuffix}`,
+        color: item.color ?? "var(--dracula-purple)",
+        delta,
+      });
+      if (
+        compareBaseline !== "none" &&
+        typeof compareValue === "number" &&
+        Number.isFinite(compareValue)
+      ) {
+        rows.push({
+          name: `${item.name ?? dataKey} · ${t("comparison.tooltipPrior")}`,
+          value: `${formatValue(compareValue)}${unitSuffix}`,
+          color: item.color ?? "var(--dracula-purple)",
+        });
+      }
+    }
+    if (rows.length === 0) return null;
+    return (
+      <RichChartTooltip
+        active
+        label={bucketCaption ? `${dateLabel} · ${t(bucketCaption)}` : dateLabel}
+        rows={rows}
+        action={tooltipAction(
+          hoverPoint ? dayLinkSource?.indexOf(hoverPoint) : undefined,
+        )}
+      />
+    );
+  };
+}
diff --git a/src/components/charts/health-chart/series-math.ts b/src/components/charts/health-chart/series-math.ts
new file mode 100644
index 000000000..b975c1ee5
--- /dev/null
+++ b/src/components/charts/health-chart/series-math.ts
@@ -0,0 +1,221 @@
+/**
+ * The pure arithmetic behind `HealthChart`: series names, day keys, the
+ * moving average, the personal baseline and where annotations and markers
+ * land. No React and no Recharts, so each piece has direct unit coverage.
+ */
+import { chartPointDayKey } from "@/components/day/chart-day";
+import { translateOrNull } from "@/lib/i18n/translate-code";
+
+const BASE_TYPE_LABEL_KEYS: Record<string, string> = {
+  WEIGHT: "charts.weight",
+  BLOOD_PRESSURE_SYS: "charts.systolic",
+  BLOOD_PRESSURE_DIA: "charts.diastolic",
+  PULSE: "charts.pulse",
+  BODY_FAT: "charts.bodyFat",
+  SLEEP_DURATION: "charts.sleep",
+  ACTIVITY_STEPS: "charts.steps",
+  BLOOD_GLUCOSE: "measurements.typeBloodGlucose",
+  TOTAL_BODY_WATER: "charts.bodyWater",
+  BONE_MASS: "charts.boneMass",
+  OXYGEN_SATURATION: "charts.spo2",
+};
+
+/**
+ * The measurement label key for a type outside the chart's short labels:
+ * `RESTING_HEART_RATE` → `measurements.typeRestingHeartRate`. Derived rather
+ * than imported, because the full label map would ride into every route that
+ * draws a chart; `health-chart-type-label.test.tsx` pins that the derivation
+ * matches `MEASUREMENT_TYPE_LABEL_KEYS` for every type it is used for.
+ */
+export function measurementLabelKey(type: string): string {
+  return `measurements.type${type
+    .toLowerCase()
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("")}`;
+}
+
+/**
+ * The name a series carries in the trend line, the legend, the tooltip and
+ * the spoken summary. The chart's own short labels come first; every other
+ * type takes its measurement label, so no overlay ever shows the raw enum.
+ */
+export function getTypeLabel(
+  type: string,
+  valueMode: "raw" | "bmi",
+  t: (key: string) => string,
+): string {
+  if (type === "WEIGHT" && valueMode === "bmi") {
+    return "BMI";
+  }
+  const key = BASE_TYPE_LABEL_KEYS[type];
+  if (key) return t(key);
+  const measurementKey = measurementLabelKey(type);
+  return translateOrNull(t, measurementKey) ?? type;
+}
+
+/**
+ * A `YYYY-MM-DD` day-key formatter pinned to the time zone. Memoised per zone
+ * by the caller so the per-row loop reuses one `Intl.DateTimeFormat`.
+ */
+export function makeDayKeyFormatter(tz: string): Intl.DateTimeFormat {
+  return new Intl.DateTimeFormat("en-US", {
+    timeZone: tz,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
+export function toDayKey(
+  value: string,
+  formatter: Intl.DateTimeFormat,
+): string {
+  const parts = formatter.formatToParts(new Date(value));
+  const year = parts.find((part) => part.type === "year")?.value;
+  const month = parts.find((part) => part.type === "month")?.value;
+  const day = parts.find((part) => part.type === "day")?.value;
+
+  if (!year || !month || !day) {
+    throw new Error("Could not derive day key for chart");
+  }
+
+  return `${year}-${month}-${day}`;
+}
+
+export function dayKeyToTimestamp(dayKey: string): number {
+  const [year, month, day] = dayKey.split("-").map(Number);
+  return Date.UTC(year, month - 1, day, 12, 0, 0);
+}
+
+export function movingAverageByPoints(
+  data: Array<{ date: Date; value: number }>,
+  windowSize: number,
+): Array<{ date: Date; value: number }> {
+  if (data.length === 0) return [];
+
+  const sorted = [...data].sort((a, b) => a.date.getTime() - b.date.getTime());
+
+  return sorted.map((point, index) => {
+    const start = Math.max(0, index - windowSize + 1);
+    const window = sorted.slice(start, index + 1);
+    const avg =
+      window.reduce((sum, item) => sum + item.value, 0) / window.length;
+    return {
+      date: point.date,
+      value: Math.round(avg * 100) / 100,
+    };
+  });
+}
+
+/**
+ * The personal baseline: the median of a daily series, over at most its most
+ * recent 90 points (the rolling window "your normal" is framed on). Null
+ * under 5 points, since a baseline drawn from one or two readings misleads.
+ */
+export function computePersonalBaseline(
+  data: Array<{ value: number }>,
+  windowPoints = 90,
+): number | null {
+  if (data.length < 5) return null;
+  const recent = data.slice(-windowPoints);
+  const sorted = recent.map((d) => d.value).sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  if (sorted.length % 2 === 0) {
+    return (sorted[mid - 1] + sorted[mid]) / 2;
+  }
+  return sorted[mid];
+}
+
+/**
+ * An annotation placed on a visible point, with a 24-character truncation
+ * precomputed for narrow screens.
+ */
+export interface ResolvedAnnotation {
+  pointIndex: number;
+  label: string;
+  color: string;
+  truncatedLabel: string;
+}
+
+/** A vertical marker placed on a visible point. */
+export interface ResolvedVerticalMarker {
+  pointIndex: number;
+  color: string;
+  label: string | undefined;
+}
+
+/**
+ * Markers land only on a day the chart has a point for (matched by exact day
+ * key): a line through a gap in the axis would hang with no data context and
+ * read as a rendering bug. Off-window markers drop.
+ */
+export function resolveVerticalMarkerPositions(
+  markers: Array<{ date: string; label?: string; color?: string }> | undefined,
+  chartData: Array<{ date: string; timestamp?: number }> | undefined,
+): ResolvedVerticalMarker[] {
+  if (!markers || !chartData || chartData.length === 0) return [];
+  const indexByDate = new Map<string, number>();
+  for (const [i, point] of chartData.entries()) {
+    // Last write wins. A drawn point's `date` is its display label
+    // ("12.03."), so the day key comes from its timestamp, which a daily
+    // point holds at noon UTC of its day; a bare `{ date }` (the pure-helper
+    // tests) is the key.
+    indexByDate.set(
+      typeof point.timestamp === "number"
+        ? chartPointDayKey(point.timestamp)
+        : point.date,
+      i,
+    );
+  }
+  const out: ResolvedVerticalMarker[] = [];
+  for (const marker of markers) {
+    const idx = indexByDate.get(marker.date);
+    if (idx === undefined) continue;
+    out.push({
+      pointIndex: idx,
+      color: marker.color ?? "var(--success)",
+      label: marker.label,
+    });
+  }
+  return out;
+}
+
+/**
+ * Annotations snap to the nearest visible point within 7 days; further off
+ * they drop, or long buckets (monthly aggregation) would pull events from
+ * months away onto one point and stack their labels.
+ */
+export function resolveAnnotationPositions(
+  annotations:
+    Array<{ date: string; label: string; color: string }> | undefined,
+  chartData: Array<{ timestamp: number }> | undefined,
+): ResolvedAnnotation[] {
+  if (!annotations || !chartData || chartData.length === 0) return [];
+  const out: ResolvedAnnotation[] = [];
+  for (const annotation of annotations) {
+    const targetMs = Date.parse(`${annotation.date}T12:00:00Z`);
+    if (!Number.isFinite(targetMs)) continue;
+    let bestIdx = -1;
+    let bestDelta = Number.POSITIVE_INFINITY;
+    for (const [i, point] of chartData.entries()) {
+      const delta = Math.abs(point.timestamp - targetMs);
+      if (delta < bestDelta) {
+        bestDelta = delta;
+        bestIdx = i;
+      }
+    }
+    if (bestIdx < 0 || bestDelta > 7 * 24 * 60 * 60 * 1000) continue;
+    const truncatedLabel =
+      annotation.label.length > 24
+        ? `${annotation.label.slice(0, 23)}…`
+        : annotation.label;
+    out.push({
+      pointIndex: bestIdx,
+      label: annotation.label,
+      color: annotation.color,
+      truncatedLabel,
+    });
+  }
+  return out;
+}
diff --git a/src/components/charts/health-chart/types.ts b/src/components/charts/health-chart/types.ts
new file mode 100644
index 000000000..db6fef62e
--- /dev/null
+++ b/src/components/charts/health-chart/types.ts
@@ -0,0 +1,186 @@
+import type { ComponentType } from "react";
+
+import type {
+  ChartOverlayKey,
+  ComparisonBaseline,
+} from "@/lib/dashboard-layout";
+import type { MetricWindowStats } from "@/lib/charts/window-stats";
+
+import type { DataWindow } from "../mini-window";
+
+/** A shaded value band behind the series (an HTML overlay under the plot). */
+export interface ChartValueBand {
+  min: number;
+  max: number;
+  color: string;
+  opacity?: number;
+  strokeOpacity?: number;
+}
+
+/** A target zone drawn inside the plot, with dashed edges and a label. */
+export interface ChartTargetZone {
+  min: number;
+  max: number;
+  color: string;
+  opacity?: number;
+  label?: string;
+  textColor?: string;
+  lineOpacity?: number;
+}
+
+export interface HealthChartProps {
+  types: string[];
+  title: string;
+  colors?: string[];
+  unit?: string;
+  yAxisUnit?: string;
+  valueMode?: "raw" | "bmi";
+  yAxisWidth?: number;
+  showYAxisUnit?: boolean;
+  valueBands?: ChartValueBand[];
+  targetZones?: ChartTargetZone[];
+  /**
+   * Compact chart for the rationale card: no range tabs, no overlay toggles,
+   * tighter padding. Tooltip, gradient and personal baseline stay, so the
+   * small chart tells the same story.
+   */
+  mini?: boolean;
+  /**
+   * Pin the chart to a rationale data window regardless of any parent UI
+   * state (the recommendation card's mini chart).
+   */
+  windowOverride?: DataWindow;
+  /**
+   * "lastMonth" / "lastYear" paints a dimmed prior-period overlay beneath the
+   * current series, shifted so the prior day lands under its current-period
+   * sibling. "none" or undefined draws the chart without it.
+   */
+  compareBaseline?: ComparisonBaseline;
+  /**
+   * Per-chart overlay-prefs key. With it the chart offers the overlay
+   * controls and reads its toggles and range from the persisted prefs;
+   * without it (mini mode, ad-hoc use) the toggles default to off.
+   */
+  chartKey?: ChartOverlayKey;
+  /**
+   * Whether a chart bound to a `chartKey` also shows the overlay dropdown.
+   * Off for a chart that persists only its range tab (the score histories).
+   * Defaults to on.
+   */
+  overlayControls?: boolean;
+  /**
+   * Storyboard annotations: a vertical reference line and label on the point
+   * whose day key matches `date` (`YYYY-MM-DD`). The series and tooltip are
+   * untouched; an annotation outside the visible window drops.
+   */
+  annotations?: Array<{ date: string; label: string; color: string }>;
+  /**
+   * Injection-day markers: a thin dashed line and a dot on the x axis at the
+   * point whose day key matches `date`, with no label unless one is given.
+   * Default colour `var(--success)`. Off-window markers drop.
+   */
+  verticalMarkers?: Array<{ date: string; label?: string; color?: string }>;
+  /**
+   * The display time zone for tick labels and day buckets. Without it the
+   * chart uses the signed-in account's zone, and before that has loaded the
+   * server's default.
+   */
+  userTimezone?: string;
+  /**
+   * Display-time scale applied to every raw value at the one read boundary
+   * (bucketing, y domain, baseline, trend and tooltip all see the scaled
+   * series), e.g. m/s → km/h. Defaults to 1.
+   */
+  valueScale?: number;
+  /**
+   * Display-time offset folded in beside `valueScale`
+   * (`display = raw * valueScale + valueOffset`), for °C → °F. Defaults to 0.
+   * Every delta and slope is a difference, so the offset cancels there.
+   */
+  valueOffset?: number;
+  /**
+   * Reports the per-type min / max / median / mean of the data visible under
+   * the active range tab, on mount and on every change, for the stat strip a
+   * sub-page lifts it into. Mini mode never reports.
+   */
+  onVisibleStats?: (stats: Record<string, MetricWindowStats> | null) => void;
+  /**
+   * Leading glyph for the card's `<TileHeader>`. Without it the card keeps
+   * the compact heading.
+   */
+  titleIcon?: ComponentType<{ className?: string }>;
+  /**
+   * Fires once the data query has settled (success or error), for the
+   * dashboard's shared reveal. Repeat-safe.
+   */
+  onDataReady?: () => void;
+  /**
+   * Pre-fetched daily series keyed by `MeasurementType`, from the dashboard's
+   * one batched read. Read for the covered types instead of a per-type fetch
+   * while the active window fits `preloadedCoverageDays`; SLEEP_DURATION is
+   * never pre-fetched.
+   */
+  preloadedSeries?: Record<string, MeasurementApiRow[]>;
+  /**
+   * The day span the `preloadedSeries` slice covers. A wider range tab falls
+   * through to a real fetch. Required with `preloadedSeries`.
+   */
+  preloadedCoverageDays?: number;
+  /**
+   * The drawn points as a table under the chart, behind a collapsed
+   * disclosure. Opt-in: the metric pages want the numbers, the dashboard
+   * tiles do not.
+   */
+  showDataTable?: boolean;
+  /**
+   * The chart as a door to its days: a click on a point opens that day, the
+   * open day is marked, and dots under the axis mark the days that hold
+   * anything. Only while drawn in days, never in `mini` mode.
+   */
+  dayLinks?: boolean;
+}
+
+export interface ChartDataPoint {
+  date: string;
+  timestamp: number;
+  pointIndex?: number;
+  // `${type}__range` keys carry a `[min, max]` tuple for the range band;
+  // every other key is a scalar.
+  [key: string]: string | number | undefined | [number, number];
+}
+
+export interface MeasurementApiRow {
+  measuredAt: string;
+  value: number;
+  // The day's min / max from the rollup daily aggregate (non-cumulative
+  // metrics only), for the range band around the mean line. Never drawn on
+  // the 7-day range. `null` is accepted beside `undefined` because the
+  // batched series carries `number | null`.
+  minValue?: number | null;
+  maxValue?: number | null;
+  // The raw-row count per bucket, for the "more days needed" copy. Absent on
+  // the per-night sleep series.
+  count?: number;
+}
+
+export interface VisibleValueBand {
+  key: string;
+  topPct: number;
+  heightPct: number;
+  color: string;
+  opacity: number;
+  strokeOpacity: number;
+}
+
+export interface VisibleTargetZone {
+  key: string;
+  low: number;
+  high: number;
+  topPct: number;
+  heightPct: number;
+  color: string;
+  opacity: number;
+  label: string | undefined;
+  textColor: string | undefined;
+  lineOpacity: number;
+}
diff --git a/src/components/charts/health-chart/use-health-chart-overlays.ts b/src/components/charts/health-chart/use-health-chart-overlays.ts
new file mode 100644
index 000000000..3d23fefd9
--- /dev/null
+++ b/src/components/charts/health-chart/use-health-chart-overlays.ts
@@ -0,0 +1,309 @@
+"use client";
+
+import { useMemo } from "react";
+
+import {
+  computeWindowTrend,
+  SPLIT_HALF_THRESHOLD_DAYS,
+} from "@/lib/analytics/window-trend";
+import type { MetricWindowStats } from "@/lib/charts/window-stats";
+import type { useFormatters } from "@/lib/i18n/context";
+
+import type { ChartDataTableColumn } from "../chart-data-table";
+
+import { computePersonalBaseline, getTypeLabel } from "./series-math";
+import type {
+  ChartDataPoint,
+  ChartTargetZone,
+  ChartValueBand,
+  VisibleTargetZone,
+  VisibleValueBand,
+} from "./types";
+
+type Translate = (
+  key: string,
+  params?: Record<string, string | number>,
+) => string;
+type Formatters = ReturnType<typeof useFormatters>;
+
+/** A band clipped to the y domain, as top / height percentages of the plot. */
+function clipToDomain(
+  min: number,
+  max: number,
+  [domainMin, domainMax]: [number, number],
+) {
+  const span = domainMax - domainMin;
+  const low = Math.max(Math.min(min, max), domainMin);
+  const high = Math.min(Math.max(min, max), domainMax);
+  if (high <= low) return null;
+  return {
+    low,
+    high,
+    topPct: ((domainMax - high) / span) * 100,
+    heightPct: ((high - low) / span) * 100,
+  };
+}
+
+/**
+ * The layers drawn over the series: the value bands and target zones
+ * (clipped to the y domain, only with the target-range toggle on), the
+ * personal baseline per type, and the trend read-out above the plot.
+ */
+export function useHealthChartOverlays({
+  showBands,
+  showTrend,
+  valueBands,
+  targetZones,
+  yDomain,
+  chartData,
+  types,
+  unit,
+  valueMode,
+  t,
+  fmt,
+}: {
+  showBands: boolean;
+  showTrend: boolean;
+  valueBands?: ChartValueBand[];
+  targetZones?: ChartTargetZone[];
+  yDomain: [number, number] | undefined;
+  chartData: ChartDataPoint[] | undefined;
+  types: string[];
+  unit?: string;
+  valueMode: "raw" | "bmi";
+  t: Translate;
+  fmt: Formatters;
+}) {
+  const visibleBands = useMemo<VisibleValueBand[]>(() => {
+    if (!showBands || !valueBands?.length || !yDomain) return [];
+    const span = yDomain[1] - yDomain[0];
+    if (!Number.isFinite(span) || span <= 0) return [];
+
+    return valueBands
+      .map((band, index) => {
+        const clipped = clipToDomain(band.min, band.max, yDomain);
+        if (!clipped) return null;
+        return {
+          key: `${band.min}-${band.max}-${index}`,
+          topPct: clipped.topPct,
+          heightPct: clipped.heightPct,
+          color: band.color,
+          opacity: band.opacity ?? 0.2,
+          strokeOpacity: band.strokeOpacity ?? 0.35,
+        };
+      })
+      .filter(
+        (entry): entry is VisibleValueBand =>
+          entry !== null && entry.heightPct > 0,
+      );
+  }, [showBands, valueBands, yDomain]);
+
+  const visibleTargetZones = useMemo<VisibleTargetZone[]>(() => {
+    if (!showBands || !targetZones?.length || !yDomain) return [];
+    const span = yDomain[1] - yDomain[0];
+    if (!Number.isFinite(span) || span <= 0) return [];
+
+    const zones: VisibleTargetZone[] = [];
+    for (const [index, zone] of targetZones.entries()) {
+      const clipped = clipToDomain(zone.min, zone.max, yDomain);
+      if (!clipped) continue;
+      zones.push({
+        key: `${zone.min}-${zone.max}-${index}`,
+        ...clipped,
+        color: zone.color,
+        opacity: zone.opacity ?? 0.3,
+        label: zone.label ?? undefined,
+        textColor: zone.textColor ?? undefined,
+        lineOpacity: zone.lineOpacity ?? 0.42,
+      });
+    }
+    return zones;
+  }, [showBands, targetZones, yDomain]);
+
+  const trendInfo = useMemo(() => {
+    if (!showTrend || !chartData?.length) return [];
+
+    const formatSigned = (value: number) => {
+      const formatted = fmt.number(Math.abs(value), 1);
+      return `${value > 0 ? "+" : value < 0 ? "-" : ""}${formatted}`;
+    };
+
+    return types
+      .map((type) => {
+        const series = chartData.filter(
+          (point) =>
+            typeof point[type] === "number" &&
+            typeof point[`${type}_trend`] === "number",
+        );
+        if (series.length < 2) return null;
+
+        const first = series[0];
+        const last = series[series.length - 1];
+        const days = (last.timestamp - first.timestamp) / 86400000;
+        if (!Number.isFinite(days) || days <= 0) return null;
+
+        const rawValues = series.map((point) => point[type] as number);
+        const trendValues = series.map(
+          (point) => point[`${type}_trend`] as number,
+        );
+
+        const computed = computeWindowTrend({
+          rawValues,
+          trendValues,
+          windowDays: days,
+        });
+        if (!computed) return null;
+
+        const { weeklyDelta, splitHalfDelta } = computed;
+        const base = rawValues[0];
+        const weeklyPct =
+          Math.abs(base) > Number.EPSILON
+            ? (weeklyDelta / Math.abs(base)) * 100
+            : null;
+        const unitSuffix = unit ? ` ${unit}` : "";
+
+        // On a long window the per-week slope rounds to ±0.0 and reads as "no
+        // change", so from SPLIT_HALF_THRESHOLD_DAYS the first-half versus
+        // second-half mean delta is added: one number that cannot round to
+        // zero unless the metric truly did not move.
+        let totalDeltaSegment = "";
+        if (days >= SPLIT_HALF_THRESHOLD_DAYS && splitHalfDelta !== null) {
+          const meanFirst =
+            rawValues
+              .slice(0, Math.floor(rawValues.length / 2))
+              .reduce((sum, value) => sum + value, 0) /
+            Math.max(1, Math.floor(rawValues.length / 2));
+          const totalDeltaPct =
+            Math.abs(meanFirst) > Number.EPSILON
+              ? (splitHalfDelta / Math.abs(meanFirst)) * 100
+              : null;
+          totalDeltaSegment = ` · ${t(
+            "charts.totalDelta",
+          )} ${formatSigned(splitHalfDelta)}${unitSuffix}${
+            totalDeltaPct != null ? ` (${formatSigned(totalDeltaPct)} %)` : ""
+          }`;
+        }
+
+        return `${getTypeLabel(type, valueMode, t)}: ${formatSigned(
+          weeklyDelta,
+        )}${unitSuffix}${t("charts.perWeek")}${
+          weeklyPct != null
+            ? ` (${formatSigned(weeklyPct)} %${t("charts.perWeek")})`
+            : ""
+        }${totalDeltaSegment}`;
+      })
+      .filter((entry): entry is string => entry !== null);
+  }, [chartData, showTrend, types, unit, valueMode, t, fmt]);
+
+  // The personal baseline (rolling 90-point median) per type, a faint dashed
+  // "your normal" line, so each point reads against the person's own level.
+  const personalBaselines = useMemo(() => {
+    if (!chartData?.length) return new Map<string, number>();
+    const map = new Map<string, number>();
+    for (const type of types) {
+      const series = chartData
+        .filter((d) => typeof d[type] === "number")
+        .map((d) => ({ value: d[type] as number }));
+      const baseline = computePersonalBaseline(series, 90);
+      if (baseline !== null) map.set(type, baseline);
+    }
+    return map;
+  }, [chartData, types]);
+
+  return { visibleBands, visibleTargetZones, trendInfo, personalBaselines };
+}
+
+/**
+ * The words around the plot: a spoken summary of the primary series (range,
+ * latest value, direction) so a screen reader does not meet an unlabelled
+ * graphic, and the data table's columns, one per series that has a value in
+ * the window, named by the same helper as the legend.
+ */
+export function useHealthChartLabels({
+  types,
+  valueMode,
+  t,
+  fmt,
+  chartData,
+  chartDataWithCompare,
+  visibleStatsByType,
+  showDataTable,
+  mini,
+}: {
+  types: string[];
+  valueMode: "raw" | "bmi";
+  t: Translate;
+  fmt: Formatters;
+  chartData: ChartDataPoint[] | undefined;
+  chartDataWithCompare: ChartDataPoint[] | undefined;
+  visibleStatsByType: Record<string, MetricWindowStats> | null;
+  showDataTable: boolean;
+  mini: boolean;
+}) {
+  const primaryType = types[0];
+  const chartAriaLabel = useMemo(() => {
+    const metric = getTypeLabel(primaryType, valueMode, t);
+    const source = chartDataWithCompare ?? chartData;
+    const values = (source ?? [])
+      .map((point) => point[primaryType])
+      .filter((v): v is number => typeof v === "number" && Number.isFinite(v));
+    if (values.length === 0) {
+      return t("charts.a11y.noData", { metric });
+    }
+    const stats = visibleStatsByType?.[primaryType];
+    const minVal = stats?.min ?? Math.min(...values);
+    const maxVal = stats?.max ?? Math.max(...values);
+    const latestVal = values[values.length - 1];
+    const firstVal = values[0];
+    const epsilon = Math.max(Math.abs(maxVal - minVal) * 0.02, 0.01);
+    const delta = latestVal - firstVal;
+    const trend =
+      delta > epsilon
+        ? t("charts.a11y.trendUp")
+        : delta < -epsilon
+          ? t("charts.a11y.trendDown")
+          : t("charts.a11y.trendFlat");
+    return t("charts.a11y.summary", {
+      metric,
+      min: fmt.number(minVal, 1),
+      max: fmt.number(maxVal, 1),
+      latest: fmt.number(latestVal, 1),
+      trend,
+    });
+  }, [
+    primaryType,
+    valueMode,
+    t,
+    chartDataWithCompare,
+    chartData,
+    visibleStatsByType,
+    fmt,
+  ]);
+
+  // A type with no value anywhere in the window gets no column: a column of
+  // dashes states nothing the chart's own empty line does not.
+  const dataTableColumns = useMemo<ChartDataTableColumn[]>(() => {
+    if (!showDataTable || mini) return [];
+    const source = chartDataWithCompare ?? chartData;
+    if (!source?.length) return [];
+    return types
+      .filter((type) =>
+        source.some(
+          (point) =>
+            typeof point[type] === "number" &&
+            Number.isFinite(point[type] as number),
+        ),
+      )
+      .map((type) => ({ key: type, label: getTypeLabel(type, valueMode, t) }));
+  }, [
+    showDataTable,
+    mini,
+    chartDataWithCompare,
+    chartData,
+    types,
+    valueMode,
+    t,
+  ]);
+
+  return { primaryType, chartAriaLabel, dataTableColumns };
+}
diff --git a/src/components/charts/health-chart/use-health-chart-series.ts b/src/components/charts/health-chart/use-health-chart-series.ts
new file mode 100644
index 000000000..a4b7b5b48
--- /dev/null
+++ b/src/components/charts/health-chart/use-health-chart-series.ts
@@ -0,0 +1,360 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+
+import { chartSeriesParams } from "@/components/charts/chart-series-request";
+import type { MeasurementType } from "@/generated/prisma/client";
+import { apiGet } from "@/lib/api/api-fetch";
+import type { makeBucketLabelFormatters } from "@/lib/charts/bucket-label";
+import { shouldFireDataReady } from "@/lib/charts/data-ready-latch";
+import {
+  localDayKeyFor,
+  openEndedFetchWindow,
+} from "@/lib/charts/fetch-window";
+import type { ComparisonBaseline } from "@/lib/dashboard-layout";
+import { CUMULATIVE_HK_TYPES } from "@/lib/measurements/apple-health-mapping";
+import { queryKeys } from "@/lib/query-keys";
+
+import { rangeWindowDays } from "../chart-range-tabs";
+
+import { dayKeyToTimestamp, toDayKey } from "./series-math";
+import type { ChartDataPoint, MeasurementApiRow } from "./types";
+
+type BucketValues = Record<
+  string,
+  {
+    sum: number;
+    count: number;
+    // The bucket's spread for the range band, from the rollup's min / max
+    // columns; null when the row carries none (raw rows, cumulative metric).
+    min: number | null;
+    max: number | null;
+  }
+>;
+
+/**
+ * One read of the chart's series, folded to one point per profile-zone day.
+ * Every value passes the display scale once, here; cumulative types add up
+ * within a day and the rest average; the rollup's min / max become the range
+ * band's tuple.
+ */
+async function readDailySeries({
+  types,
+  fetchWindow,
+  usePreloaded,
+  preloadedSeries,
+  valueScale,
+  valueOffset,
+  dayKeyFormatter,
+  tzFmt,
+}: {
+  types: string[];
+  fetchWindow: ReturnType<typeof openEndedFetchWindow>;
+  usePreloaded: boolean;
+  preloadedSeries?: Record<string, MeasurementApiRow[]>;
+  valueScale: number;
+  valueOffset: number;
+  dayKeyFormatter: Intl.DateTimeFormat;
+  tzFmt: ReturnType<typeof makeBucketLabelFormatters>;
+}): Promise<ChartDataPoint[]> {
+  const dailyAggregates = new Map<
+    string,
+    { timestamp: number; values: BucketValues }
+  >();
+
+  // SLEEP_DURATION is stored one row per stage per night. The series
+  // adapter reconstructs ONE point per night carrying the night's time
+  // asleep in hours (core + deep + REM, bare asleep only without a
+  // granular stage, in bed and awake excluded, dual-source nights
+  // collapsed), so every sleep surface shares one reconstruction.
+  async function fetchSleepNights() {
+    const sleepParams = new URLSearchParams();
+    sleepParams.set("kind", "sleep");
+    // The series route caps sleep at 365 days; clamp the request so a
+    // longer comparison window still resolves.
+    sleepParams.set(
+      "days",
+      String(Math.max(1, Math.min(3650, Math.ceil(fetchWindow.windowDays)))),
+    );
+    // A failed read rejects the query rather than caching an empty
+    // series as success (which painted "no data" with no retry).
+    const data = await apiGet<{
+      points?: Array<{ at: string; value: number }>;
+    }>(`/api/measurements/series?${sleepParams}`);
+    const points = data?.points ?? [];
+    for (const point of points) {
+      const value = point.value * valueScale + valueOffset;
+      if (value == null || !Number.isFinite(value)) continue;
+      const dayKey = toDayKey(point.at, dayKeyFormatter);
+      const bucket = dailyAggregates.get(dayKey) ?? {
+        timestamp: dayKeyToTimestamp(dayKey),
+        values: {},
+      };
+      const current = bucket.values["SLEEP_DURATION"] ?? {
+        sum: 0,
+        count: 0,
+        min: null,
+        max: null,
+      };
+      current.sum += value;
+      current.count += 1;
+      bucket.values["SLEEP_DURATION"] = current;
+      dailyAggregates.set(dayKey, bucket);
+    }
+  }
+
+  async function fetchMeasurementsByType(type: string) {
+    if (type === "SLEEP_DURATION") {
+      await fetchSleepNights();
+      return;
+    }
+    const typeParams = chartSeriesParams(type, fetchWindow);
+
+    // The batched slice reads through the same rollup path as the
+    // per-type read, so the bucketed result is identical. A covered type
+    // missing from it paints the no-data card rather than fetching.
+    const page =
+      usePreloaded && preloadedSeries
+        ? (preloadedSeries[type] ?? [])
+        : await (async () => {
+            // A failed read rejects the whole query (see above).
+            const data = await apiGet<{
+              measurements?: MeasurementApiRow[];
+            }>(`/api/measurements?${typeParams}`);
+            return data?.measurements ?? [];
+          })();
+
+    for (const measurement of page) {
+      // The display scale folds into the value at this one boundary, so
+      // everything downstream works on the scaled series. The BMI
+      // division happens in `select`, so the cache stays raw.
+      const value = measurement.value * valueScale + valueOffset;
+
+      if (!Number.isFinite(value)) {
+        continue;
+      }
+
+      const dayKey = toDayKey(measurement.measuredAt, dayKeyFormatter);
+      const bucket = dailyAggregates.get(dayKey) ?? {
+        timestamp: dayKeyToTimestamp(dayKey),
+        values: {},
+      };
+      const current = bucket.values[type] ?? {
+        sum: 0,
+        count: 0,
+        min: null,
+        max: null,
+      };
+      current.sum += value;
+      current.count += 1;
+      // The rollup bucket's spread, scaled like the value so the band
+      // tracks the line. The 7-day range never draws the band.
+      if (
+        fetchWindow.windowDays > 7 &&
+        typeof measurement.minValue === "number" &&
+        typeof measurement.maxValue === "number"
+      ) {
+        const scaledMin = measurement.minValue * valueScale + valueOffset;
+        const scaledMax = measurement.maxValue * valueScale + valueOffset;
+        current.min =
+          current.min === null ? scaledMin : Math.min(current.min, scaledMin);
+        current.max =
+          current.max === null ? scaledMax : Math.max(current.max, scaledMax);
+      }
+      bucket.values[type] = current;
+      dailyAggregates.set(dayKey, bucket);
+    }
+  }
+
+  await Promise.all(types.map(fetchMeasurementsByType));
+
+  const allData: ChartDataPoint[] = Array.from(dailyAggregates.values())
+    .map((bucket) => {
+      const point: ChartDataPoint = {
+        date: tzFmt.dateShortSmart(new Date(bucket.timestamp)),
+        timestamp: bucket.timestamp,
+      };
+
+      for (const [type, stats] of Object.entries(bucket.values)) {
+        // Cumulative types (steps, active energy, distance, flights,
+        // daylight) add up within a day; everything else averages.
+        const isCumulative = CUMULATIVE_HK_TYPES.has(type as MeasurementType);
+        point[type] = isCumulative ? stats.sum : stats.sum / stats.count;
+        // The day's spread as a `[min, max]` tuple for the range band,
+        // when the rollup supplied both bounds and the metric is not a
+        // sum (a total has no meaningful intra-day spread).
+        if (!isCumulative && stats.min !== null && stats.max !== null) {
+          point[`${type}__range`] = [stats.min, stats.max] as never;
+        }
+      }
+
+      return point;
+    })
+    .sort((a, b) => a.timestamp - b.timestamp);
+
+  return allData;
+}
+
+/**
+ * The chart's daily series: one point per day in the profile time zone,
+ * read from the window the active range tab needs.
+ *
+ * The window is bounded by the range tab (the "All" tab asks for about ten
+ * years; the server steps up to week and month buckets past its day cap) and
+ * stretched backwards by the comparison shift so the prior period rides the
+ * same read. It ends at the end of TODAY in the profile zone, not at the mount
+ * instant, so a reading saved after mount falls inside the window the
+ * invalidated query refetches, and the cache key stays put all day.
+ *
+ * On the dashboard the batched slice stands in for the per-type reads, but
+ * only for windows over 7 days that fit the batch's coverage and only when
+ * every non-sleep type is in it; sleep always reads its own per-night series.
+ */
+export function useHealthChartSeries({
+  types,
+  valueMode,
+  bmiDivisor,
+  valueScale,
+  valueOffset,
+  userTimezone,
+  dayKeyFormatter,
+  tzFmt,
+  rangePoints,
+  effectiveCompareBaseline,
+  preloadedSeries,
+  preloadedCoverageDays,
+  enabled,
+  onDataReady,
+}: {
+  types: string[];
+  valueMode: "raw" | "bmi";
+  bmiDivisor: number | null;
+  valueScale: number;
+  valueOffset: number;
+  userTimezone: string;
+  dayKeyFormatter: Intl.DateTimeFormat;
+  tzFmt: ReturnType<typeof makeBucketLabelFormatters>;
+  rangePoints: number;
+  effectiveCompareBaseline: ComparisonBaseline;
+  preloadedSeries?: Record<string, MeasurementApiRow[]>;
+  preloadedCoverageDays?: number;
+  enabled: boolean;
+  onDataReady?: () => void;
+}) {
+  const todayKey = localDayKeyFor(new Date(), userTimezone);
+  const fetchWindow = useMemo(() => {
+    const windowDays = rangeWindowDays(rangePoints);
+    const compareShift =
+      effectiveCompareBaseline === "lastMonth"
+        ? 30
+        : effectiveCompareBaseline === "lastYear"
+          ? 365
+          : 0;
+    return openEndedFetchWindow(
+      windowDays + compareShift,
+      todayKey,
+      userTimezone,
+    );
+  }, [rangePoints, effectiveCompareBaseline, userTimezone, todayKey]);
+
+  // Without an explicit coverage (a legacy mount) the slice is bypassed
+  // rather than trusted blindly.
+  const usePreloaded = useMemo(() => {
+    if (!preloadedSeries) return false;
+    if (fetchWindow.windowDays <= 7) return false;
+    const coverage = preloadedCoverageDays ?? 0;
+    if (fetchWindow.windowDays > coverage) return false;
+    return types.every(
+      (type) => type === "SLEEP_DURATION" || preloadedSeries[type] != null,
+    );
+  }, [preloadedSeries, preloadedCoverageDays, fetchWindow.windowDays, types]);
+
+  const chartQuery = useQuery({
+    // A range-tab change re-keys the query; without placeholder data every
+    // switch dropped the painted chart to a skeleton for the round trip. It
+    // is only honest because the chart dims while `isPlaceholderData` is
+    // true: the old range must never masquerade as the new one.
+    placeholderData: keepPreviousData,
+    // The `["chart-data"]` prefix lands in `measurementDependentKeys`, so a
+    // new measurement evicts every chart's cache in one pass. The BMI view
+    // shares the raw WEIGHT entry (the division happens in `select`), the
+    // time zone and the window re-key it, and the discriminator separates a
+    // batched render from a self-fetch only on mounts that pass a batch (an
+    // empty string keeps every other caller's key as it was).
+    queryKey: queryKeys.chartData(
+      types.join(","),
+      "raw",
+      "no-bmi",
+      userTimezone,
+      fetchWindow.from,
+      fetchWindow.to,
+      valueScale,
+      preloadedSeries ? (usePreloaded ? "preloaded" : "fetch") : "",
+    ),
+    // A minute of freshness so moving between metric pages does not refire
+    // every chart; five minutes of cache for a quick back-and-forth.
+    staleTime: 60_000,
+    gcTime: 5 * 60_000,
+    queryFn: () =>
+      readDailySeries({
+        types,
+        fetchWindow,
+        usePreloaded,
+        preloadedSeries,
+        valueScale,
+        valueOffset,
+        dayKeyFormatter,
+        tzFmt,
+      }),
+    // The BMI view: the cached raw WEIGHT series divided at read time, so the
+    // entry is shared with the weight chart. No height → no series. The range
+    // tuples are dropped; the BMI view has never drawn the band.
+    select: useCallback(
+      (points: ChartDataPoint[]): ChartDataPoint[] => {
+        if (valueMode !== "bmi") return points;
+        if (!bmiDivisor) return [];
+        return points.map((p) => {
+          const out: ChartDataPoint = {
+            date: p.date,
+            timestamp: p.timestamp,
+          };
+          for (const type of types) {
+            const v = p[type];
+            if (typeof v === "number") {
+              out[type] = v / bmiDivisor;
+            }
+          }
+          return out;
+        });
+      },
+      [valueMode, bmiDivisor, types],
+    ),
+    enabled,
+  });
+
+  // Report the settled first read to the dashboard's shared reveal, exactly
+  // once. Latched behind a ref and keyed on `isLoading` alone: the dashboard
+  // passes an inline closure, and re-running the notify on every commit kept
+  // the chart row's popper anchors re-committing until React's update-depth
+  // guard tripped (#185). A late-arriving handler still fires.
+  const { isLoading } = chartQuery;
+  const onDataReadyRef = useRef(onDataReady);
+  useEffect(() => {
+    onDataReadyRef.current = onDataReady;
+  }, [onDataReady]);
+  const dataReadyFiredRef = useRef(false);
+  useEffect(() => {
+    if (
+      !shouldFireDataReady({
+        isLoading,
+        alreadyFired: dataReadyFiredRef.current,
+      })
+    )
+      return;
+    dataReadyFiredRef.current = true;
+    onDataReadyRef.current?.();
+  }, [isLoading]);
+
+  return chartQuery;
+}
diff --git a/src/components/charts/health-chart/use-health-chart-view.ts b/src/components/charts/health-chart/use-health-chart-view.ts
new file mode 100644
index 000000000..cafb4a2cc
--- /dev/null
+++ b/src/components/charts/health-chart/use-health-chart-view.ts
@@ -0,0 +1,347 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+
+import { bucketCaptionKey } from "@/lib/charts/bucket-caption";
+import type { makeBucketLabelFormatters } from "@/lib/charts/bucket-label";
+import {
+  bucketTimeSeries,
+  pickBucket,
+  type ChartBucketType,
+} from "@/lib/charts/bucket-time-series";
+import { shiftDailySeriesForward } from "@/lib/charts/comparison-shift";
+import {
+  computeWindowStats,
+  type MetricWindowStats,
+} from "@/lib/charts/window-stats";
+import type { ComparisonBaseline } from "@/lib/dashboard-layout";
+import { computePaddedYDomain } from "@/lib/insights/chart-y-domain";
+import { trendLineByTime } from "@/lib/stats/linear-fit";
+
+import { movingAverageByPoints } from "./series-math";
+import type { ChartDataPoint } from "./types";
+
+/**
+ * The visible slice at its grain, indexed for the x axis, with the 7-day
+ * moving average and the trend line stamped on as `${type}_ma` and
+ * `${type}_trend` when those overlays are on.
+ */
+function bucketVisibleSeries(
+  {
+    sliced,
+    bucketType,
+  }: { sliced: ChartDataPoint[]; bucketType: ChartBucketType },
+  {
+    types,
+    userTimezone,
+    tzFmt,
+    showMA,
+    showTrend,
+  }: {
+    types: string[];
+    userTimezone: string;
+    tzFmt: ReturnType<typeof makeBucketLabelFormatters>;
+    showMA: boolean;
+    showTrend: boolean;
+  },
+): ChartDataPoint[] {
+  const bucketed =
+    bucketType === "day"
+      ? sliced
+      : bucketTimeSeries(
+          sliced.map((p) => ({
+            timestamp: p.timestamp,
+            values: Object.fromEntries(
+              types.map((type) => [type, p[type] as number | undefined]),
+            ),
+          })),
+          { bucket: bucketType, timeZone: userTimezone },
+        ).points.map<ChartDataPoint>((point) => {
+          const date = new Date(point.timestamp);
+          const out: ChartDataPoint = {
+            date: tzFmt.dateShortSmart(date),
+            timestamp: point.timestamp,
+          };
+          for (const [type, value] of Object.entries(point.values)) {
+            out[type] = value;
+          }
+          return out;
+        });
+
+  const enriched: ChartDataPoint[] = bucketed.map((d, index) => ({
+    ...d,
+    pointIndex: index,
+  }));
+
+  if (showMA) {
+    for (const type of types) {
+      const typeData = enriched
+        .filter((d) => d[type] !== undefined)
+        .map((d) => ({
+          date: new Date(d.timestamp),
+          value: d[type] as number,
+        }));
+
+      if (typeData.length >= 2) {
+        const ma = movingAverageByPoints(typeData, 7);
+        for (const point of ma) {
+          const pointTimestamp = point.date.getTime();
+          const existing = enriched.find((d) => d.timestamp === pointTimestamp);
+          if (existing) {
+            existing[`${type}_ma`] = point.value;
+          }
+        }
+      }
+    }
+  }
+
+  if (showTrend) {
+    for (const type of types) {
+      const typeData = enriched
+        .filter((d) => d[type] !== undefined)
+        .map((d) => ({
+          date: new Date(d.timestamp),
+          value: d[type] as number,
+        }));
+
+      if (typeData.length >= 2) {
+        const trend = trendLineByTime(typeData);
+        if (trend) {
+          for (const point of trend.points) {
+            const pointTimestamp = point.date.getTime();
+            const existing = enriched.find(
+              (d) => d.timestamp === pointTimestamp,
+            );
+            if (existing) {
+              existing[`${type}_trend`] = point.value;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return enriched;
+}
+
+/**
+ * The prior period stamped onto the visible points as `${type}_compare`: the
+ * fetched daily series shifted forward by 30 / 365 days, matched on the same
+ * day key the chart uses. A prior point paints only where its shifted day is
+ * a visible day.
+ */
+function mergePriorPeriod(
+  chartData: ChartDataPoint[],
+  data: ChartDataPoint[],
+  {
+    types,
+    tzFmt,
+    baseline,
+  }: {
+    types: string[];
+    tzFmt: ReturnType<typeof makeBucketLabelFormatters>;
+    baseline: Exclude<ComparisonBaseline, "none">;
+  },
+): ChartDataPoint[] {
+  const shifted = shiftDailySeriesForward(
+    data.map((row) => ({
+      timestamp: row.timestamp,
+      values: Object.fromEntries(
+        types.map((type) => [type, row[type] as number | undefined]),
+      ),
+    })),
+    baseline,
+  );
+
+  // Indexed by the same day key the chart already uses.
+  const shiftedByDay = new Map<string, Record<string, number>>();
+  for (const row of shifted) {
+    const dayKey = tzFmt.dateShortSmart(new Date(row.timestamp));
+    const slot = shiftedByDay.get(dayKey) ?? {};
+    for (const [type, value] of Object.entries(row.values)) {
+      if (typeof value === "number" && Number.isFinite(value)) {
+        slot[type] = value;
+      }
+    }
+    shiftedByDay.set(dayKey, slot);
+  }
+
+  return chartData.map((point) => {
+    const compareValues = shiftedByDay.get(point.date);
+    if (!compareValues) return point;
+    const merged: ChartDataPoint = { ...point };
+    for (const type of types) {
+      const v = compareValues[type];
+      if (typeof v === "number" && Number.isFinite(v)) {
+        merged[`${type}_compare`] = v;
+      }
+    }
+    return merged;
+  });
+}
+
+/**
+ * What the chart draws from its daily series: the visible window, bucketed
+ * to day, week or month, with the moving average, the trend line and the
+ * prior-period overlay merged in, and the y domain that fits all of it.
+ */
+export function useHealthChartView({
+  data,
+  rangePoints,
+  types,
+  userTimezone,
+  tzFmt,
+  showMA,
+  showTrend,
+  effectiveCompareBaseline,
+  mini,
+  isLoading,
+  isError,
+  onVisibleStats,
+}: {
+  data: ChartDataPoint[] | undefined;
+  rangePoints: number;
+  types: string[];
+  userTimezone: string;
+  tzFmt: ReturnType<typeof makeBucketLabelFormatters>;
+  showMA: boolean;
+  showTrend: boolean;
+  effectiveCompareBaseline: ComparisonBaseline;
+  mini: boolean;
+  isLoading: boolean;
+  isError: boolean;
+  onVisibleStats?: (stats: Record<string, MetricWindowStats> | null) => void;
+}) {
+  // The grain (day / week / month) is picked from the VISIBLE range, so a
+  // 30-day tab stays daily on a five-year-old account, and it has ONE source:
+  // the points, the caption chip and the data table all read it. The slice
+  // is a calendar-day window, as the range tabs promise and the fetch
+  // requests, on the self-fetched and the batched path alike.
+  const visibleSlice = useMemo(() => {
+    if (!data?.length) return null;
+    const cutoff = new Date().getTime() - rangePoints * 86_400_000;
+    const sliced =
+      rangePoints > 0
+        ? data.filter((point) => point.timestamp >= cutoff)
+        : [...data];
+    // An empty window stays an empty slice ("no data in this range");
+    // returning null would quietly widen the window to the whole series.
+    const rangeDays =
+      sliced.length < 2
+        ? 0
+        : Math.round(
+            (sliced[sliced.length - 1].timestamp - sliced[0].timestamp) /
+              (24 * 60 * 60 * 1000),
+          );
+    return { sliced, bucketType: pickBucket(rangeDays) };
+  }, [data, rangePoints]);
+
+  const chartData = useMemo(() => {
+    if (!data?.length || !visibleSlice) return data;
+    return bucketVisibleSeries(visibleSlice, {
+      types,
+      userTimezone,
+      tzFmt,
+      showMA,
+      showTrend,
+    });
+  }, [data, visibleSlice, showMA, showTrend, types, tzFmt, userTimezone]);
+
+  // Min / max / median / mean of what is visible under the active range tab,
+  // for the stat strip a sub-page lifts the callback into. Mini mode has no
+  // stat strip.
+  const visibleStatsByType = useMemo<Record<
+    string,
+    MetricWindowStats
+  > | null>(() => {
+    if (mini || !chartData?.length) return null;
+    const out: Record<string, MetricWindowStats> = {};
+    for (const type of types) {
+      const stats = computeWindowStats(
+        chartData.map((point) => point[type] as number | undefined),
+      );
+      if (stats.count > 0) out[type] = stats;
+    }
+    return Object.keys(out).length > 0 ? out : null;
+  }, [mini, chartData, types]);
+
+  // An effect, so the parent's state update never runs during this render,
+  // and only once the read settled: a report during the first fetch would
+  // tell the strip "no window" and it would paint the full-range summary
+  // first. A failed read settles too, so the strip never waits forever.
+  useEffect(() => {
+    if (mini || isLoading) return;
+    onVisibleStats?.(isError ? null : visibleStatsByType);
+  }, [mini, isLoading, isError, visibleStatsByType, onVisibleStats]);
+
+  // The prior period, from the already-fetched daily series shifted forward
+  // by 30 / 365 days, stamped onto the visible points under `${type}_compare`.
+  // A prior point paints only where its shifted day is a visible day.
+  const chartDataWithCompare = useMemo(() => {
+    if (!chartData || effectiveCompareBaseline === "none") return chartData;
+    if (!data?.length) return chartData;
+    return mergePriorPeriod(chartData, data, {
+      types,
+      tzFmt,
+      baseline: effectiveCompareBaseline,
+    });
+  }, [chartData, effectiveCompareBaseline, data, types, tzFmt]);
+
+  // True when at least one visible day has a prior value. A partial overlay
+  // counts as available, so the "comparison unavailable" caption never sits
+  // beside dimmed history the reader can see.
+  const hasComparisonData = useMemo(() => {
+    if (effectiveCompareBaseline === "none" || !chartDataWithCompare)
+      return false;
+    return chartDataWithCompare.some((point) =>
+      types.some(
+        (type) =>
+          typeof point[`${type}_compare`] === "number" &&
+          Number.isFinite(point[`${type}_compare`] as number),
+      ),
+    );
+  }, [chartDataWithCompare, effectiveCompareBaseline, types]);
+
+  const activeBucket: ChartBucketType = visibleSlice?.bucketType ?? "day";
+  // What a folded point is: the average day of its week or month (a daily
+  // total's average for steps and the like), named on the caption chip and
+  // in the tooltip.
+  const bucketCaption = bucketCaptionKey(activeBucket, types);
+
+  const yDomain = useMemo<[number, number] | undefined>(() => {
+    if (!chartDataWithCompare?.length) return undefined;
+
+    const keys = [...types];
+    if (showMA) keys.push(...types.map((type) => `${type}_ma`));
+    if (showTrend) keys.push(...types.map((type) => `${type}_trend`));
+    // The prior period may sit on a different scale; without it the dimmed
+    // line clips outside the plot.
+    if (effectiveCompareBaseline !== "none") {
+      keys.push(...types.map((type) => `${type}_compare`));
+    }
+
+    const values = chartDataWithCompare
+      .flatMap((point) => keys.map((key) => point[key]))
+      .filter((value): value is number => typeof value === "number")
+      .filter((value) => Number.isFinite(value));
+
+    return computePaddedYDomain(values, types);
+  }, [
+    chartDataWithCompare,
+    effectiveCompareBaseline,
+    showMA,
+    showTrend,
+    types,
+  ]);
+
+  return {
+    visibleSlice,
+    chartData,
+    visibleStatsByType,
+    chartDataWithCompare,
+    hasComparisonData,
+    activeBucket,
+    bucketCaption,
+    yDomain,
+  };
+}
diff --git a/src/components/dashboard/__tests__/tile-destinations.test.ts b/src/components/dashboard/__tests__/tile-destinations.test.ts
index 2693972f3..7d2224258 100644
--- a/src/components/dashboard/__tests__/tile-destinations.test.ts
+++ b/src/components/dashboard/__tests__/tile-destinations.test.ts
@@ -8,11 +8,15 @@
  * (`TILE_CAPABLE_WIDGET_IDS`) and from the dashboard's own render code, and
  * holds every tile against the sub-page registry.
  */
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync } from "node:fs";
 import path from "node:path";
 
 import { describe, expect, it } from "vitest";
 
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
+import { STRIP_TILES } from "@/components/dashboard/tiles/strip-tiles";
+import type { DashboardTileContext } from "@/components/dashboard/tiles/tile-context";
+
 import {
   TILE_CAPABLE_WIDGET_IDS,
   type TileCapableWidgetId,
@@ -73,19 +77,38 @@ const NON_MEASUREMENT_DESTINATION: Partial<
  */
 const NO_DESTINATION: Partial<Record<TileCapableWidgetId, string>> = {};
 
-/** Tile ids the dashboard pushes into its strip, read from the render code. */
+/**
+ * Card ids the strip tiles paint, built from the registry with a context in
+ * which every series has a reading, so every tile paints its cards.
+ */
 function renderedTileIds(): string[] {
-  const source = readFileSync(
-    path.join(ROOT, "src/app/page-client.tsx"),
-    "utf8",
-  );
-  const ids: string[] = [];
-  const pattern =
-    /trendCards\.push\(\{\s*id:\s*(?:"([^"]+)"|`([^`$]+)\$\{[^`]*`)/g;
-  for (const match of source.matchAll(pattern)) {
-    ids.push(match[1] ?? `${match[2]}*`);
-  }
-  return ids;
+  const reading = { count: 3, latest: 1, avg7: 1, avg30: 1 };
+  const summaries = new Proxy({} as Record<string, typeof reading>, {
+    get: () => reading,
+  });
+  const ctx = {
+    t: (key: string) => key,
+    fmt: { number: (v: number) => String(v) },
+    td: (_type: string, v: number | null | undefined) => v ?? null,
+    tdd: (_type: string, v: number | null | undefined) => v ?? null,
+    unitDisplay: { unitFor: () => "" },
+    user: null,
+    summaries,
+    moodSummary: reading,
+    hrv: { summary: reading, type: "HRV_RMSSD", labelKey: "x" },
+    data: { bpInTargetPct: 50, bpInTargetPct7d: 50, bpInTargetPct30d: 50 },
+    glucoseTiles: [{ bucket: "FASTING", labelKey: "x", summary: reading }],
+    displayGlucoseUnit: "mg/dL",
+    weightTrend: { direction: "neutral" },
+    compareBaseline: "none",
+    directionOf: () => "neutral",
+    tileCompareDelta: () => null,
+    tileStaleDays: () => null,
+  } as unknown as DashboardTileContext;
+  return STRIP_TILES.flatMap((tile) => {
+    expect(tile.visible(ctx), tile.widget).toBe(true);
+    return tile.cards(ctx).map((card) => card.id);
+  });
 }
 
 describe("dashboard tile destinations", () => {
@@ -95,11 +118,15 @@ describe("dashboard tile destinations", () => {
   });
 
   it("knows every tile the dashboard renders, and renders every known tile", () => {
+    // The registry names each tile's widget; every tile-capable widget has a
+    // tile, and every card a tile paints maps back to a known widget.
+    expect(STRIP_TILES.map((tile) => tile.widget).sort()).toEqual(
+      [...TILE_CAPABLE_WIDGET_IDS].sort(),
+    );
     const rendered = renderedTileIds();
     const widgets = new Set<string>();
     for (const id of rendered) {
-      const sample = id.endsWith("*") ? `${id.slice(0, -1)}X` : id;
-      const widget = tileWidgetId(sample);
+      const widget = tileWidgetId(id);
       expect(widget, `rendered tile "${id}" has no widget`).not.toBeNull();
       widgets.add(widget as string);
     }
@@ -107,10 +134,7 @@ describe("dashboard tile destinations", () => {
   });
 
   it("routes the dashboard's tile links through this map and no other", () => {
-    const source = readFileSync(
-      path.join(ROOT, "src/app/page-client.tsx"),
-      "utf8",
-    );
+    const source = dashboardSource();
     expect(source).toMatch(/dashboardTileHref\(entry\.id,/);
     expect(source).not.toMatch(/"\/insights\/[a-z-]+"/);
   });
diff --git a/src/components/dashboard/tiles/chart-tiles.tsx b/src/components/dashboard/tiles/chart-tiles.tsx
new file mode 100644
index 000000000..bf05e10bd
--- /dev/null
+++ b/src/components/dashboard/tiles/chart-tiles.tsx
@@ -0,0 +1,373 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import dynamic from "next/dynamic";
+
+import { ChartErrorBoundary } from "@/components/charts/chart-error-state";
+import { ChartSkeleton } from "@/components/charts/chart-skeleton";
+import { HealthChartDynamic } from "@/components/charts/health-chart-dynamic";
+import { RecentWorkoutsTile } from "@/components/dashboard/recent-workouts-tile";
+import { RecentAchievementsCard } from "@/components/gamification/recent-achievements-card";
+import { VorsorgeDashboardCard } from "@/components/measurement-reminders/vorsorge-dashboard-card";
+import { BATCH_COVERAGE_DAYS } from "@/lib/dashboard/batch-chart-types";
+import { MEASUREMENT_TYPE_LABEL_KEYS } from "@/lib/measurements/type-label-keys";
+import { importWithRetry } from "@/lib/retry-import";
+
+import type { DashboardTileContext } from "./tile-context";
+import type { BatchedSeriesRow } from "./use-dashboard-data";
+
+// The loaders retry a rejected chunk import once (a lazy import caches its
+// rejection for good, so a transient 404 from a stale shell would brick the
+// card for the session), and each mount sits in a `<ChartErrorBoundary>` so a
+// chunk that still fails degrades to one error card instead of the route's
+// `error.tsx`.
+const MoodChartLazy = dynamic(
+  () =>
+    importWithRetry(() => import("@/components/charts/chart-runtime")).then(
+      (mod) => ({ default: mod.MoodChart }),
+    ),
+  { ssr: false, loading: () => <ChartSkeleton /> },
+);
+const MoodChart = (props: ComponentProps<typeof MoodChartLazy>) => (
+  <ChartErrorBoundary>
+    <MoodChartLazy {...props} />
+  </ChartErrorBoundary>
+);
+const MedicationComplianceChartLazy = dynamic(
+  () =>
+    importWithRetry(() => import("@/components/charts/chart-runtime")).then(
+      (mod) => ({ default: mod.MedicationComplianceChart }),
+    ),
+  { ssr: false, loading: () => <ChartSkeleton /> },
+);
+const MedicationComplianceChart = (
+  props: ComponentProps<typeof MedicationComplianceChartLazy>,
+) => (
+  <ChartErrorBoundary>
+    <MedicationComplianceChartLazy {...props} />
+  </ChartErrorBoundary>
+);
+
+// Warm the shared `chart-runtime` chunk during hydration. The charts mount
+// through `ssr: false` dynamics, which start their import only at mount;
+// firing it at module evaluation lets the download overlap hydration. The
+// dynamics resolve through the same `importWithRetry` promise.
+if (typeof window !== "undefined") {
+  void importWithRetry(() => import("@/components/charts/chart-runtime"));
+}
+
+/** What a chart card needs beyond the tile context. */
+export interface ChartTileContext extends DashboardTileContext {
+  preloadedSeries: Record<string, BatchedSeriesRow[]> | undefined;
+  markChartReady: (id: string) => void;
+}
+
+/** One card in the chart row, positioned by `order`. */
+export interface ChartEntry {
+  id: string;
+  order: number;
+  node: ReactNode;
+  /**
+   * Total raw readings for the metric. Under five, a "first trend after 5
+   * readings" hint sits under the chart; undefined disables the hint.
+   */
+  count?: number;
+  /**
+   * The cell holds its skeleton until every gated chart's data settled (or
+   * the reveal timeout fired). Data-backed charts set this; the cards that
+   * skeleton themselves do not.
+   */
+  revealGated?: boolean;
+}
+
+/**
+ * A chart-row card: the layout widget that switches and orders it, the card's
+ * own rule (a data floor, a module, a resolved layout), and the card itself.
+ * Unlike the strip, the chart row reads the widget's chart flag (`visible`),
+ * which `buildChartEntries` applies for every card.
+ */
+interface ChartTile {
+  id: string;
+  widget: string;
+  orderOffset?: number;
+  revealGated?: boolean;
+  visible: (ctx: DashboardTileContext) => boolean;
+  count?: (ctx: DashboardTileContext) => number;
+  render: (ctx: ChartTileContext) => ReactNode;
+}
+
+const countOf = (summary: { count?: number } | null | undefined) =>
+  summary?.count ?? 0;
+
+const BMI_BANDS = [
+  { min: 0, max: 17, color: "var(--destructive)", opacity: 0.16 },
+  { min: 17, max: 18.5, color: "var(--warning)", opacity: 0.18 },
+  { min: 18.5, max: 24.9, color: "var(--success)", opacity: 0.2 },
+  { min: 24.9, max: 29.9, color: "var(--warning)", opacity: 0.18 },
+  { min: 29.9, max: 120, color: "var(--destructive)", opacity: 0.16 },
+];
+
+const hasRestingHr = (ctx: DashboardTileContext) =>
+  countOf(ctx.summaries?.RESTING_HEART_RATE) > 0;
+
+/**
+ * A measurement chart card with the props every dashboard chart shares: its
+ * reveal report, the comparison baseline, day doors and, unless the card
+ * says otherwise, the batched series slice and the profile time zone.
+ */
+function metricChart(
+  ctx: ChartTileContext,
+  id: string,
+  props: Omit<
+    ComponentProps<typeof HealthChartDynamic>,
+    "onDataReady" | "compareBaseline" | "dayLinks"
+  >,
+  { batched = true, timezone = true } = {},
+): ReactNode {
+  return (
+    <HealthChartDynamic
+      key={id}
+      onDataReady={() => ctx.markChartReady(id)}
+      {...(batched
+        ? {
+            preloadedSeries: ctx.preloadedSeries,
+            preloadedCoverageDays: BATCH_COVERAGE_DAYS,
+          }
+        : {})}
+      compareBaseline={ctx.compareBaseline}
+      {...(timezone ? { userTimezone: ctx.user?.timezone } : {})}
+      dayLinks
+      {...props}
+    />
+  );
+}
+
+/** Every chart-row card, in the order the cards are collected. */
+export const CHART_TILES: readonly ChartTile[] = [
+  {
+    id: "weight-chart",
+    widget: "weight",
+    revealGated: true,
+    visible: (ctx) => countOf(ctx.summaries?.WEIGHT) > 0,
+    count: (ctx) => ctx.summaries?.WEIGHT?.count ?? 0,
+    render: (ctx) =>
+      metricChart(ctx, "weight-chart", {
+        chartKey: "weight",
+        types: ["WEIGHT"],
+        title: ctx.t("dashboard.weight"),
+        colors: ["var(--chart-1)"],
+        unit: ctx.unitDisplay.unitFor("WEIGHT"),
+        valueBands: ctx.weightDisplayBands,
+        valueScale: ctx.unitDisplay.transformFor("WEIGHT").factor,
+      }),
+  },
+  {
+    // BMI rides the weight widget, right behind its chart, and only for a
+    // profile that carries a height.
+    id: "bmi-chart",
+    widget: "weight",
+    orderOffset: 0.5,
+    revealGated: true,
+    visible: (ctx) =>
+      countOf(ctx.summaries?.WEIGHT) > 0 && Boolean(ctx.user?.heightCm),
+    render: (ctx) =>
+      metricChart(
+        ctx,
+        "bmi-chart",
+        {
+          chartKey: "bmi",
+          types: ["WEIGHT"],
+          title: ctx.t("targets.bmi"),
+          colors: ["var(--dracula-yellow)"],
+          unit: "kg/m²",
+          valueMode: "bmi",
+          valueBands: BMI_BANDS,
+        },
+        { timezone: false },
+      ),
+  },
+  {
+    id: "bp-chart",
+    widget: "bp",
+    revealGated: true,
+    visible: (ctx) =>
+      countOf(ctx.summaries?.BLOOD_PRESSURE_SYS) > 0 ||
+      countOf(ctx.summaries?.BLOOD_PRESSURE_DIA) > 0,
+    count: (ctx) =>
+      Math.max(
+        ctx.summaries?.BLOOD_PRESSURE_SYS?.count ?? 0,
+        ctx.summaries?.BLOOD_PRESSURE_DIA?.count ?? 0,
+      ),
+    render: (ctx) =>
+      metricChart(ctx, "bp-chart", {
+        chartKey: "bp",
+        types: ["BLOOD_PRESSURE_SYS", "BLOOD_PRESSURE_DIA"],
+        title: ctx.t("dashboard.bloodPressure"),
+        colors: ["var(--chart-3)", "var(--chart-4)"],
+        unit: "mmHg",
+        targetZones: ctx.bpTargetZones,
+      }),
+  },
+  {
+    // The resting series against the resting band when there is one;
+    // otherwise raw heart rate WITHOUT the band, which would mark expected
+    // workout heart rate as outside target.
+    id: "pulse-chart",
+    widget: "pulse",
+    revealGated: true,
+    visible: (ctx) =>
+      countOf(ctx.summaries?.PULSE) > 0 ||
+      countOf(ctx.summaries?.RESTING_HEART_RATE) > 0,
+    count: (ctx) => ctx.summaries?.PULSE?.count ?? 0,
+    render: (ctx) =>
+      metricChart(ctx, "pulse-chart", {
+        chartKey: "pulse",
+        types: hasRestingHr(ctx) ? ["RESTING_HEART_RATE"] : ["PULSE"],
+        title: hasRestingHr(ctx)
+          ? ctx.t(MEASUREMENT_TYPE_LABEL_KEYS.RESTING_HEART_RATE)
+          : ctx.t("dashboard.pulse"),
+        colors: ["var(--success)"],
+        unit: "bpm",
+        valueBands: hasRestingHr(ctx) ? ctx.pulseBands : undefined,
+      }),
+  },
+  {
+    id: "bodyFat-chart",
+    widget: "bodyFat",
+    revealGated: true,
+    visible: (ctx) => countOf(ctx.summaries?.BODY_FAT) > 0,
+    count: (ctx) => ctx.summaries?.BODY_FAT?.count ?? 0,
+    render: (ctx) =>
+      metricChart(ctx, "bodyFat-chart", {
+        chartKey: "bodyFat",
+        types: ["BODY_FAT"],
+        title: ctx.t("dashboard.bodyFat"),
+        colors: ["var(--warning)"],
+        unit: "%",
+        valueBands: ctx.bodyFatBands,
+      }),
+  },
+  {
+    id: "mood-chart",
+    widget: "mood",
+    revealGated: true,
+    visible: (ctx) => countOf(ctx.moodSummary) > 0,
+    count: (ctx) => ctx.moodSummary?.count ?? 0,
+    render: (ctx) => (
+      <MoodChart
+        key="mood-chart"
+        onDataReady={() => ctx.markChartReady("mood-chart")}
+        compareBaseline={ctx.compareBaseline}
+        chartKey="mood"
+        dayLinks
+      />
+    ),
+  },
+  {
+    // Sleep is never batched: it reads its own per-night series.
+    id: "sleep-chart",
+    widget: "sleep",
+    revealGated: true,
+    visible: (ctx) => countOf(ctx.summaries?.SLEEP_DURATION) > 0,
+    count: (ctx) => ctx.summaries?.SLEEP_DURATION?.count ?? 0,
+    render: (ctx) =>
+      metricChart(
+        ctx,
+        "sleep-chart",
+        {
+          chartKey: "sleep",
+          types: ["SLEEP_DURATION"],
+          title: ctx.t("dashboard.sleep") ?? "Sleep",
+          colors: ["var(--chart-4)"],
+          unit: "h",
+        },
+        { batched: false },
+      ),
+  },
+  {
+    id: "steps-chart",
+    widget: "steps",
+    revealGated: true,
+    visible: (ctx) => countOf(ctx.summaries?.ACTIVITY_STEPS) > 0,
+    count: (ctx) => ctx.summaries?.ACTIVITY_STEPS?.count ?? 0,
+    render: (ctx) =>
+      metricChart(ctx, "steps-chart", {
+        chartKey: "steps",
+        types: ["ACTIVITY_STEPS"],
+        title: ctx.t("dashboard.steps") ?? "Steps",
+        colors: ["var(--success)"],
+      }),
+  },
+  {
+    // Adherence over `/api/medications/intake?scope=compliance&days=N`.
+    id: "medications",
+    widget: "medications",
+    revealGated: true,
+    visible: () => true,
+    render: (ctx) => (
+      <MedicationComplianceChart
+        key="medications"
+        onDataReady={() => ctx.markChartReady("medications")}
+        compareBaseline={ctx.compareBaseline}
+        userTimezone={ctx.user?.timezone}
+        dayLinks
+      />
+    ),
+  },
+  {
+    // The preventive-care summary: fetches its own list and skeletons itself,
+    // so it stays out of the reveal gate.
+    id: "vorsorge",
+    widget: "vorsorge",
+    visible: () => true,
+    render: () => <VorsorgeDashboardCard key="vorsorge" />,
+  },
+  {
+    // No data floor (the empty card is how the feature is discovered), so it
+    // waits for the real layout: on the fallback layout it would flash in and
+    // retract for a person who switched it off.
+    id: "achievements",
+    widget: "achievements",
+    visible: (ctx) => ctx.layoutResolved,
+    render: () => <RecentAchievementsCard key="achievements" />,
+  },
+  {
+    // Same layout wait as the achievements card; the tile gates on its own
+    // query and shows the Apple Health hint when empty.
+    id: "recentWorkouts",
+    widget: "recentWorkouts",
+    visible: (ctx) =>
+      ctx.layoutResolved && ctx.user?.modules?.workouts !== false,
+    render: () => <RecentWorkoutsTile key="recentWorkouts" />,
+  },
+];
+
+/** The chart-row cards whose widget chart flag is on and whose rule passes. */
+export function visibleChartTiles(
+  ctx: DashboardTileContext,
+): readonly ChartTile[] {
+  return CHART_TILES.filter(
+    (tile) => ctx.isChartVisible(tile.widget) && tile.visible(ctx),
+  );
+}
+
+/** The ids the shared chart reveal waits for, in card order. */
+export function revealChartIds(tiles: readonly ChartTile[]): string[] {
+  return tiles.filter((tile) => tile.revealGated).map((tile) => tile.id);
+}
+
+/** The chart row for this render, sorted by layout order. */
+export function buildChartEntries(
+  tiles: readonly ChartTile[],
+  ctx: ChartTileContext,
+): ChartEntry[] {
+  const entries: ChartEntry[] = tiles.map((tile) => ({
+    id: tile.id,
+    order: ctx.widgetOrder(tile.widget) + (tile.orderOffset ?? 0),
+    ...(tile.count ? { count: tile.count(ctx) } : {}),
+    ...(tile.revealGated ? { revealGated: true } : {}),
+    node: tile.render(ctx),
+  }));
+  entries.sort((a, b) => a.order - b.order);
+  return entries;
+}
diff --git a/src/components/dashboard/tiles/dashboard-tiles.tsx b/src/components/dashboard/tiles/dashboard-tiles.tsx
new file mode 100644
index 000000000..7baf6c8dc
--- /dev/null
+++ b/src/components/dashboard/tiles/dashboard-tiles.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { Suspense } from "react";
+import Link from "next/link";
+import { Activity, Plus } from "lucide-react";
+
+import { ChartSkeleton } from "@/components/charts/chart-skeleton";
+import { TrendCardSkeleton } from "@/components/charts/trend-card-skeleton";
+import { TrendHint } from "@/components/charts/trend-hint";
+import { DashboardChartCell } from "@/components/dashboard/chart-reveal";
+import {
+  resolveChartRowPlaceholderCount,
+  resolveConfiguredTileCount,
+  resolveDashboardFirstPaintGate,
+} from "@/components/dashboard/dashboard-gates";
+import { dashboardTileHref } from "@/components/dashboard/tile-destinations";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import type { AuthUser } from "@/hooks/use-auth";
+import type { DashboardLayout } from "@/lib/dashboard-layout";
+import { useTranslations } from "@/lib/i18n/context";
+import { cn } from "@/lib/utils";
+
+import type { ChartEntry } from "./chart-tiles";
+import type { StripEntry } from "./strip-tiles";
+
+/**
+ * The tile strip and the chart row, with the states around them: the
+ * layout-stable silhouettes while the primary read is in flight, and the
+ * empty state once it resolved with nothing to show.
+ */
+export function DashboardTiles({
+  stripEntries,
+  chartEntries,
+  chartsRevealed,
+  layout,
+  primaryLoading,
+  mounted,
+  user,
+  canAddMeasurement,
+  onAddMeasurement,
+}: {
+  stripEntries: StripEntry[];
+  chartEntries: ChartEntry[];
+  chartsRevealed: boolean;
+  layout: DashboardLayout;
+  primaryLoading: boolean;
+  mounted: boolean;
+  user: AuthUser | null;
+  canAddMeasurement: boolean;
+  onAddMeasurement: () => void;
+}) {
+  const { t } = useTranslations();
+
+  // The skeleton strip reserves the footprint of the tiles the layout
+  // configures (tile-capable widgets only, two for blood pressure), so the
+  // strip does not reshuffle when the data lands.
+  const configuredTileCount = resolveConfiguredTileCount(layout);
+  // While the snapshot is in flight the data-gated charts cannot exist yet;
+  // silhouettes for the charts the layout expects hold the page near its
+  // final height, and the landing snapshot swaps content instead of growing
+  // the page. `mounted &&` pins the hydration render to the server output:
+  // the shell's auth read can already carry a height when this boundary
+  // replays its first render, and an extra BMI silhouette would mismatch
+  // the server HTML (React #418).
+  const chartRowPlaceholderCount = primaryLoading
+    ? Math.max(
+        0,
+        resolveChartRowPlaceholderCount(layout, {
+          hasHeightCm: mounted && Boolean(user?.heightCm),
+        }) - chartEntries.length,
+      )
+    : 0;
+  const { showTileStripSkeleton, showEmptyState } =
+    resolveDashboardFirstPaintGate({
+      trendCardCount: stripEntries.length,
+      chartCount: chartEntries.length,
+      configuredTileCount,
+      primaryLoading,
+    });
+
+  // Nothing to show once the read resolved: one call to action into the
+  // quick-entry sheet instead of an empty strip under the header.
+  if (showEmptyState) {
+    return (
+      <EmptyState
+        icon={<Activity className="size-6" />}
+        title={t("dashboard.emptyTitle")}
+        description={t("dashboard.emptyDescription")}
+        action={
+          canAddMeasurement ? (
+            <Button size="sm" onClick={onAddMeasurement}>
+              <Plus className="h-4 w-4" />
+              {t("dashboard.emptyAddMeasurement")}
+            </Button>
+          ) : undefined
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      {showTileStripSkeleton && (
+        <div
+          // Mirrors the real grid track, keyed off the configured tile count:
+          // a strip trimmed to three tiles shows three silhouettes.
+          aria-hidden="true"
+          data-slot="dashboard-tile-strip-skeleton"
+          className={cn(
+            "grid auto-rows-fr gap-3",
+            "[grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))]",
+          )}
+        >
+          {Array.from({ length: configuredTileCount }).map((_, idx) => (
+            <TrendCardSkeleton key={`tile-skeleton-${idx}`} />
+          ))}
+        </div>
+      )}
+      {stripEntries.length > 0 && (
+        <div
+          // One grid track for every breakpoint, never a second row of
+          // scrolling: `auto-fit` with an 11 rem floor gives one column on a
+          // 280 px fold, two on a phone, six at 1440 px and eight from
+          // 1920 px, and `auto-rows-fr` keeps every row on one height so a
+          // tile with a callout does not break the baseline. With every tile
+          // switched off the strip is not rendered at all.
+          className={cn(
+            "grid auto-rows-fr gap-3",
+            "[grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))]",
+          )}
+          data-slot="dashboard-tile-strip"
+          data-tour-id="dashboard-tile-strip"
+          data-tile-count={stripEntries.length}
+        >
+          {stripEntries.map((entry) => {
+            // A layout-stable fallback per tile, so a tile slot that ever
+            // suspends previews its shape instead of leaving the cell empty.
+            const cell = (
+              <Suspense fallback={<TrendCardSkeleton />}>{entry.node}</Suspense>
+            );
+            // A tile links to its Insights page (gated on that page's
+            // module); the link fills the cell and rings on hover and focus.
+            const href = dashboardTileHref(entry.id, user?.modules);
+            return href ? (
+              <Link
+                key={entry.id}
+                href={href}
+                data-slot="dashboard-tile-link"
+                data-tile-id={entry.id}
+                className="group focus-visible:ring-ring/50 hover:ring-ring/30 flex min-w-0 rounded-xl transition-[box-shadow] hover:ring-2 focus-visible:ring-2 focus-visible:outline-none"
+              >
+                {cell}
+              </Link>
+            ) : (
+              <div key={entry.id} className="flex min-w-0">
+                {cell}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {chartEntries.map((entry) => (
+        <div key={entry.id} className="space-y-2">
+          {/* A boundary per chart, so each paints on its own instead of the
+              row waiting for the slowest. A gated cell keeps its chart
+              mounted (its query fires) but shows the skeleton until the
+              shared reveal flips; the trend hint rides inside the cell so it
+              appears with its chart. */}
+          {entry.revealGated ? (
+            <DashboardChartCell revealed={chartsRevealed}>
+              <Suspense fallback={<ChartSkeleton />}>{entry.node}</Suspense>
+              {entry.count != null ? <TrendHint count={entry.count} /> : null}
+            </DashboardChartCell>
+          ) : (
+            <>
+              <Suspense fallback={<ChartSkeleton />}>{entry.node}</Suspense>
+              {entry.count != null ? <TrendHint count={entry.count} /> : null}
+            </>
+          )}
+        </div>
+      ))}
+      {chartRowPlaceholderCount > 0 && (
+        <div
+          aria-hidden="true"
+          data-slot="dashboard-chart-row-skeleton"
+          className="space-y-6"
+        >
+          {Array.from({ length: chartRowPlaceholderCount }).map((_, idx) => (
+            <ChartSkeleton key={`chart-row-skeleton-${idx}`} />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/dashboard/tiles/strip-tiles.tsx b/src/components/dashboard/tiles/strip-tiles.tsx
new file mode 100644
index 000000000..d45321c39
--- /dev/null
+++ b/src/components/dashboard/tiles/strip-tiles.tsx
@@ -0,0 +1,497 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Activity,
+  Bone,
+  Droplet,
+  Droplets,
+  Dumbbell,
+  Footprints,
+  Gauge,
+  GlassWater,
+  Heart,
+  HeartPulse,
+  Moon,
+  Percent,
+  Smile,
+  Target,
+  Thermometer,
+  TrendingUp,
+  Wind,
+} from "lucide-react";
+
+import { TrendCard } from "@/components/charts/trend-card";
+import {
+  getRangeColorClass,
+  getRangeHint,
+  toHoursSummary,
+} from "@/components/dashboard/range-display";
+import { SleepSourceDiscrepancyMarker } from "@/components/insights/sleep-source-discrepancy-marker";
+import { summaryToTrend7Delta } from "@/lib/analytics/trend-delta";
+import { isWindowSufficient } from "@/lib/analytics/window-confidence";
+import { convertGlucose, glucoseFractionDigits } from "@/lib/glucose";
+import { MEASUREMENT_TYPE_LABEL_KEYS } from "@/lib/measurements/type-label-keys";
+import type { TrendDirectionSentiment } from "@/lib/insights/trend-sentiment";
+
+import type { DashboardTileContext } from "./tile-context";
+
+/** One card in the tile strip, positioned by `order`. */
+export interface StripEntry {
+  id: string;
+  order: number;
+  node: ReactNode;
+}
+
+/**
+ * A strip tile: which layout widget switches and orders it, the rule that
+ * decides whether it has anything to show, and the card(s) it paints.
+ *
+ * The layout toggle is applied by `buildStripEntries` for every tile, so
+ * `visible` holds only the tile's own rule (a data floor, a module gate).
+ * A tile can paint more than one card (blood pressure paints two, glucose one
+ * per meal-time context); each card's `orderOffset` keeps them together
+ * behind the widget's position.
+ */
+interface StripTile {
+  widget: string;
+  visible: (ctx: DashboardTileContext) => boolean;
+  cards: (
+    ctx: DashboardTileContext,
+  ) => Array<{ id: string; orderOffset?: number; node: ReactNode }>;
+}
+
+const countOf = (summary: { count?: number } | null | undefined) =>
+  summary?.count ?? 0;
+
+/**
+ * The pulse tile shows ONE of two statistics, and its name says which. With
+ * resting rows it is the resting heart rate (one figure a day, judged against
+ * the resting band); without them it is the pulse, whose latest value is the
+ * latest day's mean of its hours' means, and no resting band colours it (it
+ * would mark workout heart rate as "outside target").
+ */
+function pulseSource(ctx: DashboardTileContext) {
+  const rhr = ctx.summaries?.RESTING_HEART_RATE;
+  const hasRestingHr = countOf(rhr) > 0;
+  return {
+    hasRestingHr,
+    summary: hasRestingHr ? rhr : ctx.summaries?.PULSE,
+    type: hasRestingHr ? "RESTING_HEART_RATE" : "PULSE",
+  };
+}
+
+type Summary = NonNullable<DashboardTileContext["summaries"]>[string];
+type TrafficRange = Parameters<typeof getRangeColorClass>[1]["range"];
+
+/**
+ * One metric tile: the headline, its 7- and 30-day means, the trend and the
+ * comparison delta. `type` names the series (direction and freshness follow
+ * it unless overridden); `summary` replaces the summary read off `type`.
+ * With `display` the values go through the metric / imperial transform, and
+ * with `range` the means are coloured against it (on the canonical values)
+ * and carry its hint (in `hintRange`, the display unit, when given).
+ */
+function metricCard(
+  ctx: DashboardTileContext,
+  id: string,
+  props: {
+    type: string;
+    label: string;
+    unit: string;
+    icon: React.ComponentType<{ className?: string }>;
+    summary?: Summary | null;
+    display?: boolean;
+    fractionDigits?: number;
+    range?: TrafficRange;
+    hintRange?: TrafficRange;
+    direction?: TrendDirectionSentiment;
+    staleType?: string | null;
+    valueAdornment?: ReactNode;
+  },
+): ReactNode {
+  const s = "summary" in props ? props.summary : ctx.summaries?.[props.type];
+  const value = (v: number | null | undefined) =>
+    props.display ? ctx.td(props.type, v) : (v ?? null);
+  const delta = (v: number | null | undefined) =>
+    props.display ? ctx.tdd(props.type, v) : v;
+  const hint =
+    props.range === undefined
+      ? undefined
+      : getRangeHint(
+          props.unit,
+          { range: props.hintRange ?? props.range },
+          ctx.t,
+          ctx.fmt.number,
+        );
+  return (
+    <TrendCard
+      key={id}
+      fractionDigits={props.fractionDigits}
+      label={props.label}
+      latest={value(s?.latest)}
+      unit={props.unit}
+      avg7={value(s?.avg7)}
+      avg30={value(s?.avg30)}
+      avg7ColorClass={
+        props.range === undefined
+          ? undefined
+          : getRangeColorClass(s?.avg7, { range: props.range })
+      }
+      avg30ColorClass={
+        props.range === undefined
+          ? undefined
+          : getRangeColorClass(s?.avg30, { range: props.range })
+      }
+      avg7Hint={hint}
+      avg30Hint={hint}
+      slope30={s?.slope30 ?? null}
+      trend7Delta={delta(summaryToTrend7Delta(s)) as number | null}
+      icon={props.icon}
+      directionSentiment={props.direction ?? ctx.directionOf(props.type)}
+      compareBaseline={ctx.compareBaseline}
+      compareDelta={delta(ctx.tileCompareDelta(s)) as number | null}
+      staleDays={ctx.tileStaleDays(
+        props.staleType === undefined ? props.type : props.staleType,
+      )}
+      valueAdornment={props.valueAdornment}
+    />
+  );
+}
+
+/** A tile that paints one card under its own id. */
+function one(
+  widget: string,
+  visible: StripTile["visible"],
+  node: (ctx: DashboardTileContext) => ReactNode,
+): StripTile {
+  return { widget, visible, cards: (ctx) => [{ id: widget, node: node(ctx) }] };
+}
+
+/** A plain metric tile, shown when its series has a reading. */
+function metricTile(
+  widget: string,
+  type: string,
+  props: (
+    ctx: DashboardTileContext,
+  ) => Omit<Parameters<typeof metricCard>[2], "type">,
+): StripTile {
+  return one(
+    widget,
+    (ctx) => countOf(ctx.summaries?.[type]) > 0,
+    (ctx) => metricCard(ctx, widget, { type, ...props(ctx) }),
+  );
+}
+
+/**
+ * Every strip tile, in the order the cards are collected. Cards are then
+ * sorted by their layout order (a stable sort), so for two widgets that share
+ * an order this list decides which comes first.
+ */
+export const STRIP_TILES: readonly StripTile[] = [
+  metricTile("weight", "WEIGHT", (ctx) => ({
+    label: ctx.t("dashboard.weightShort"),
+    unit: ctx.unitDisplay.unitFor("WEIGHT"),
+    icon: Activity,
+    display: true,
+    range: ctx.weightRange,
+    hintRange: ctx.weightHintRange,
+    // Which way is progress depends on the person's own target, resolved
+    // on the server.
+    direction: ctx.weightTrend.direction,
+  })),
+  {
+    // One signal, two tiles: systolic and diastolic side by side at the size
+    // of every other tile. The diastolic card's offset keeps it right behind
+    // the systolic one.
+    widget: "bp",
+    visible: (ctx) =>
+      countOf(ctx.summaries?.BLOOD_PRESSURE_SYS) > 0 ||
+      countOf(ctx.summaries?.BLOOD_PRESSURE_DIA) > 0,
+    cards: (ctx) => [
+      {
+        id: "bp-sys",
+        node: metricCard(ctx, "bp-sys", {
+          type: "BLOOD_PRESSURE_SYS",
+          label: ctx.t("dashboard.bloodPressureSysShort"),
+          unit: "mmHg",
+          icon: Heart,
+          fractionDigits: 0,
+          range: ctx.bpSysRange,
+        }),
+      },
+      {
+        id: "bp-dia",
+        orderOffset: 0.001,
+        node: metricCard(ctx, "bp-dia", {
+          type: "BLOOD_PRESSURE_DIA",
+          label: ctx.t("dashboard.bloodPressureDiaShort"),
+          unit: "mmHg",
+          icon: Heart,
+          fractionDigits: 0,
+          range: ctx.bpDiaRange,
+        }),
+      },
+    ],
+  },
+  one(
+    "pulse",
+    (ctx) =>
+      countOf(ctx.summaries?.PULSE) > 0 ||
+      countOf(ctx.summaries?.RESTING_HEART_RATE) > 0,
+    (ctx) => {
+      const { hasRestingHr, summary, type } = pulseSource(ctx);
+      return metricCard(ctx, "pulse", {
+        type,
+        summary,
+        label: hasRestingHr
+          ? ctx.t(MEASUREMENT_TYPE_LABEL_KEYS.RESTING_HEART_RATE)
+          : ctx.t("dashboard.pulseShort"),
+        unit: "bpm",
+        icon: TrendingUp,
+        fractionDigits: 0,
+        range: hasRestingHr ? ctx.pulseDisplayRange : null,
+      });
+    },
+  ),
+  metricTile("bodyFat", "BODY_FAT", (ctx) => ({
+    label: ctx.t("dashboard.bodyFatShort"),
+    unit: "%",
+    icon: Percent,
+  })),
+  one(
+    "mood",
+    (ctx) => countOf(ctx.moodSummary) > 0,
+    (ctx) =>
+      metricCard(ctx, "mood", {
+        type: "MOOD",
+        summary: ctx.moodSummary,
+        label: ctx.t("dashboard.moodShort"),
+        unit: "/ 5",
+        icon: Smile,
+        staleType: null,
+      }),
+  ),
+  one(
+    "sleep",
+    (ctx) => countOf(ctx.summaries?.SLEEP_DURATION) > 0,
+    (ctx) => {
+      // The summary carries per-night time asleep in MINUTES; the tile
+      // reads hours, so every value field converts while the staleness and
+      // count metadata stay as they are.
+      const raw = ctx.summaries?.SLEEP_DURATION;
+      const discrepancy = ctx.data?.sleepSourceDiscrepancy;
+      return metricCard(ctx, "sleep", {
+        type: "SLEEP_DURATION",
+        summary: raw ? toHoursSummary(raw) : undefined,
+        label: ctx.t("dashboard.sleepShort") ?? "Sleep",
+        unit: "h",
+        icon: Moon,
+        // A discreet "sources disagree" marker beside the headline when two
+        // writers reported clearly different totals for the latest night.
+        // Null on the ordinary path: no layout change.
+        valueAdornment: discrepancy ? (
+          <SleepSourceDiscrepancyMarker discrepancy={discrepancy} />
+        ) : null,
+      });
+    },
+  ),
+  // Steps are activity data tied to the workouts module; only an explicit
+  // `false` hides them (fail-open).
+  one(
+    "steps",
+    (ctx) =>
+      countOf(ctx.summaries?.ACTIVITY_STEPS) > 0 &&
+      ctx.user?.modules?.workouts !== false,
+    (ctx) =>
+      metricCard(ctx, "steps", {
+        type: "ACTIVITY_STEPS",
+        label: ctx.t("dashboard.stepsShort") ?? "Steps",
+        unit: "",
+        icon: Footprints,
+        fractionDigits: 0,
+      }),
+  ),
+  metricTile("vo2Max", "VO2_MAX", (ctx) => ({
+    label: ctx.t("dashboard.vo2MaxShort") ?? "VO₂ max",
+    unit: ctx.t("dashboard.vo2MaxUnit") ?? "mL/(kg·min)",
+    icon: Gauge,
+  })),
+  // HRV is stored under two types (SDNN from Apple Health / Health Connect,
+  // nightly RMSSD from rings and straps); `pickHrvSummary` names the one
+  // shown, and the label, the direction and the freshness caption follow it.
+  // Each series has its OWN label key, never a base label with the measure
+  // appended: the label renders truncated on one line, and an appended
+  // marker is the first thing a longer locale drops.
+  one(
+    "hrv",
+    (ctx) => countOf(ctx.hrv.summary) > 0,
+    (ctx) =>
+      metricCard(ctx, "hrv", {
+        type: ctx.hrv.type,
+        summary: ctx.hrv.summary,
+        label: ctx.t(ctx.hrv.labelKey),
+        unit: "ms",
+        icon: HeartPulse,
+        fractionDigits: 0,
+      }),
+  ),
+  metricTile("oxygenSaturation", "OXYGEN_SATURATION", (ctx) => ({
+    label: ctx.t("measurements.typeOxygenSaturation"),
+    unit: "%",
+    icon: Droplets,
+  })),
+  metricTile("respiratoryRate", "RESPIRATORY_RATE", (ctx) => ({
+    label: ctx.t("measurements.typeRespiratoryRate"),
+    unit: ctx.t("insights.units.respiratoryRate"),
+    icon: Wind,
+  })),
+  metricTile("wristTemperature", "WRIST_TEMPERATURE", (ctx) => ({
+    label: ctx.t("measurements.typeWristTemperature"),
+    unit: ctx.unitDisplay.unitFor("WRIST_TEMPERATURE"),
+    icon: Thermometer,
+    display: true,
+  })),
+  metricTile("muscleMass", "MUSCLE_MASS", (ctx) => ({
+    label: ctx.t("measurements.typeMuscleMass"),
+    unit: ctx.unitDisplay.unitFor("MUSCLE_MASS"),
+    icon: Dumbbell,
+    display: true,
+  })),
+  metricTile("totalBodyWater", "TOTAL_BODY_WATER", (ctx) => ({
+    label: ctx.t("measurements.typeTotalBodyWater"),
+    unit: ctx.unitDisplay.unitFor("TOTAL_BODY_WATER"),
+    icon: Droplet,
+    display: true,
+  })),
+  metricTile("boneMass", "BONE_MASS", (ctx) => ({
+    label: ctx.t("measurements.typeBoneMass"),
+    unit: ctx.unitDisplay.unitFor("BONE_MASS"),
+    icon: Bone,
+    display: true,
+  })),
+  // Fluid intake: a synthetic summary key derived server-side from the
+  // nutrient days. Neutral sentiment, since more water is not simply better.
+  metricTile("waterIntake", "NUTRIENT_WATER", (ctx) => ({
+    label: ctx.t("nutrients.names.water"),
+    unit: "mL",
+    icon: GlassWater,
+  })),
+  {
+    // Blood pressure in target. Hidden while every window reads zero, so a
+    // literal "0 %" never rides the dashboard; the headline is the trailing
+    // 90-day share, the label names the effective span until 90 days of
+    // history exist, and below the confidence floor the tile says it is
+    // still collecting instead of printing a figure.
+    widget: "bpInTarget",
+    visible: (ctx) =>
+      ctx.data?.bpInTargetPct != null &&
+      [
+        ctx.data?.bpInTargetPct,
+        ctx.data?.bpInTargetPct7d,
+        ctx.data?.bpInTargetPct30d,
+        ctx.data?.bpInTargetPctAllTime,
+      ].some((pct) => pct != null && pct > 0),
+    cards: (ctx) => {
+      const data = ctx.data;
+      const bp7 = data?.bpInTargetPct7d ?? null;
+      const bp30 = data?.bpInTargetPct30d ?? null;
+      const bpPriorMonth = data?.bpInTargetPctPriorMonth ?? null;
+      const bpPriorYear = data?.bpInTargetPctPriorYear ?? null;
+      const bpTrendDelta = bp7 !== null && bp30 !== null ? bp7 - bp30 : null;
+      const bpComparePrior =
+        ctx.compareBaseline === "lastMonth"
+          ? bpPriorMonth
+          : ctx.compareBaseline === "lastYear"
+            ? bpPriorYear
+            : null;
+      const bpCompareDelta =
+        ctx.compareBaseline === "none" ||
+        bp30 === null ||
+        bpComparePrior === null
+          ? null
+          : Math.round((bp30 - bpComparePrior) * 10) / 10;
+      const bpCount90 = data?.bpInTargetCount90 ?? null;
+      const bpSpanDays90 = data?.bpInTargetSpanDays90 ?? null;
+      const bpSufficient = bpCount90 === null || isWindowSufficient(bpCount90);
+      const bpLabel =
+        bpSpanDays90 != null
+          ? ctx.t("dashboard.bpInTargetWindowDynamic", { days: bpSpanDays90 })
+          : ctx.t("dashboard.bpInTargetWindow90");
+      return [
+        {
+          id: "bpInTarget",
+          node: (
+            <TrendCard
+              key="bpInTarget"
+              label={bpLabel}
+              latest={bpSufficient ? (data?.bpInTargetPct ?? null) : null}
+              emptyHint={
+                bpSufficient ? null : ctx.t("dashboard.bpInTargetCollecting")
+              }
+              unit="%"
+              avg7={bpSufficient ? bp7 : null}
+              avg30={bpSufficient ? bp30 : null}
+              slope30={null}
+              trend7Delta={bpSufficient ? bpTrendDelta : null}
+              icon={Target}
+              directionSentiment={ctx.directionOf("BLOOD_PRESSURE_IN_TARGET")}
+              compareBaseline={ctx.compareBaseline}
+              compareDelta={bpSufficient ? bpCompareDelta : null}
+            />
+          ),
+        },
+      ];
+    },
+  },
+  {
+    // One card per meal-time bucket, kept together in a block.
+    widget: "glucose",
+    visible: (ctx) => ctx.glucoseTiles.length > 0,
+    cards: (ctx) =>
+      ctx.glucoseTiles.map(({ bucket, labelKey, summary: s }, idx) => {
+        const unit = ctx.displayGlucoseUnit;
+        const convert = (v: number | null | undefined) =>
+          v != null ? convertGlucose(v, unit) : null;
+        return {
+          id: `glucose-${bucket}`,
+          orderOffset: idx / 1000,
+          node: (
+            <TrendCard
+              key={`glucose-${bucket}`}
+              label={ctx.t(labelKey)}
+              latest={convert(s.latest)}
+              unit={unit}
+              fractionDigits={glucoseFractionDigits(unit)}
+              avg7={convert(s.avg7)}
+              avg30={convert(s.avg30)}
+              slope30={s.slope30 ?? null}
+              icon={Droplet}
+              staleDays={ctx.tileStaleDays("BLOOD_GLUCOSE")}
+            />
+          ),
+        };
+      }),
+  },
+];
+
+/**
+ * The strip's cards for this render: every tile whose layout toggle is on and
+ * whose own rule passes, sorted by layout order.
+ */
+export function buildStripEntries(ctx: DashboardTileContext): StripEntry[] {
+  const entries: StripEntry[] = [];
+  for (const tile of STRIP_TILES) {
+    if (!ctx.isTileVisible(tile.widget) || !tile.visible(ctx)) continue;
+    const order = ctx.widgetOrder(tile.widget);
+    for (const card of tile.cards(ctx)) {
+      entries.push({
+        id: card.id,
+        order: order + (card.orderOffset ?? 0),
+        node: card.node,
+      });
+    }
+  }
+  entries.sort((a, b) => a.order - b.order);
+  return entries;
+}
diff --git a/src/components/dashboard/tiles/tile-context.ts b/src/components/dashboard/tiles/tile-context.ts
new file mode 100644
index 000000000..5838999f5
--- /dev/null
+++ b/src/components/dashboard/tiles/tile-context.ts
@@ -0,0 +1,267 @@
+"use client";
+
+import { useMemo } from "react";
+
+import {
+  pickHrvSummary,
+  resolveGlucoseTiles,
+} from "@/components/dashboard/dashboard-gates";
+import type { AuthUser } from "@/hooks/use-auth";
+import {
+  useUnitDisplayOnceMounted,
+  type UnitDisplay,
+} from "@/hooks/use-unit-display";
+import { resolveWeightTargetOverride } from "@/lib/analytics/effective-range";
+import type { DataSummary } from "@/lib/analytics/trends";
+import {
+  buildDashboardBands,
+  viewerBandProfile,
+  type DashboardTargetBands,
+} from "@/lib/dashboard/bands";
+import type { DashboardLayout } from "@/lib/dashboard-layout";
+import { resolveGlucoseUnit } from "@/lib/glucose";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { TrendDirectionSentiment } from "@/lib/insights/trend-sentiment";
+import { toProfileSex } from "@/lib/profile/sex";
+import {
+  resolveWeightTrend,
+  weightTrendReferenceKg,
+} from "@/lib/targets/weight-trend";
+
+import type { DashboardData } from "./use-dashboard-data";
+
+/**
+ * The resolved bands in the shape the tiles and charts draw them: weight in
+ * the display unit, blood pressure as the chart's two target zones.
+ */
+function bandsForDisplay(
+  bands: DashboardTargetBands,
+  unitDisplay: UnitDisplay,
+  t: (key: string) => string,
+) {
+  const weightRange = bands.weightRange;
+  // The range hint prints its bounds in the display unit, so the kg
+  // thresholds scale by the weight factor (offset-free). The colour classing
+  // stays canonical: it compares a canonical average against the canonical
+  // range.
+  const weightHintRange = weightRange
+    ? {
+        greenMin: unitDisplay.toDisplay("WEIGHT", weightRange.greenMin),
+        greenMax: unitDisplay.toDisplay("WEIGHT", weightRange.greenMax),
+        orangeMin: unitDisplay.toDisplay("WEIGHT", weightRange.orangeMin),
+        orangeMax: unitDisplay.toDisplay("WEIGHT", weightRange.orangeMax),
+      }
+    : weightRange;
+  const weightBands = bands.weightBands ?? undefined;
+  // The kg chart bands scaled into the display unit so the shaded zone
+  // tracks the converted line (factor only; weight has no offset).
+  const weightDisplayBands =
+    weightBands && unitDisplay.preference === "imperial"
+      ? weightBands.map((band) => ({
+          ...band,
+          min: unitDisplay.toDisplay("WEIGHT", band.min),
+          max: unitDisplay.toDisplay("WEIGHT", band.max),
+        }))
+      : weightBands;
+  const bpTargets = bands.bpTargets;
+  const bpTargetZones = bpTargets
+    ? [
+        {
+          min: bpTargets.sysLow,
+          max: bpTargets.sysHigh,
+          color: "var(--chart-3)",
+          opacity: 0.21,
+          label: t("charts.systolic"),
+          textColor: "var(--chart-3)",
+          lineOpacity: 0.24,
+        },
+        {
+          min: bpTargets.diaLow,
+          max: bpTargets.diaHigh,
+          color: "var(--chart-4)",
+          opacity: 0.21,
+          label: t("charts.diastolic"),
+          textColor: "var(--chart-4)",
+          lineOpacity: 0.24,
+        },
+      ]
+    : undefined;
+
+  return {
+    weightRange,
+    weightHintRange,
+    weightDisplayBands,
+    bpTargetZones,
+    bpSysRange: bands.bpSysRange,
+    bpDiaRange: bands.bpDiaRange,
+    pulseDisplayRange: bands.pulseDisplayRange,
+    pulseBands: bands.pulseBands,
+    bodyFatBands: bands.bodyFatBands,
+  };
+}
+
+/**
+ * What every dashboard tile reads: the summaries, the resolved layout, the
+ * display units and the target bands, each derived once per render here so a
+ * tile definition stays a function of this object and nothing else.
+ */
+export function useDashboardTileContext({
+  dashboard,
+  user,
+}: {
+  dashboard: DashboardData;
+  user: AuthUser | null;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  // Metric / imperial display choke point. `td` converts an ABSOLUTE
+  // reading (affine, so a temperature picks up the °F offset); `tdd`
+  // converts a DELTA or slope (factor only, so a Δ never inherits the
+  // offset). Metric users take the identity path.
+  const unitDisplay = useUnitDisplayOnceMounted();
+  const td = (type: string, value: number | null | undefined): number | null =>
+    value == null ? null : unitDisplay.toDisplay(type, value);
+  const tdd = (
+    type: string,
+    value: number | null | undefined,
+  ): number | null =>
+    value == null ? null : unitDisplay.toDisplayDelta(type, value);
+
+  const { data, layout, layoutData, moodData, snapshot, snapshotEnabled } =
+    dashboard;
+  const summaries = data?.summaries;
+  const compareBaseline = layout.comparisonBaseline ?? "none";
+
+  /**
+   * The tile delta (current 30-day average minus the prior period's) for a
+   * summary. Null when comparison is off or either side is missing, so the
+   * tile suppresses the callout.
+   */
+  const tileCompareDelta = (
+    summary: DataSummary | null | undefined,
+  ): number | null => {
+    if (!summary || compareBaseline === "none") return null;
+    const current = summary.avg30 ?? null;
+    const prior =
+      compareBaseline === "lastMonth"
+        ? (summary.avg30LastMonth ?? null)
+        : (summary.avg30LastYear ?? null);
+    if (current === null || prior === null) return null;
+    return Math.round((current - prior) * 100) / 100;
+  };
+
+  /**
+   * Days since the metric's last reading when that is more than a week, for
+   * `<TrendCard staleDays>`; null for a fresh metric or one with no reading.
+   */
+  const tileStaleDays = (type: string | null | undefined): number | null => {
+    if (!type) return null;
+    const entry = data?.lastSeenByType?.[type];
+    if (!entry) return null;
+    return entry.daysAgo > 7 ? entry.daysAgo : null;
+  };
+  /** Whether the widget's chart (lower row) shows. */
+  const isChartVisible = (id: string) =>
+    layout.widgets.find((widget) => widget.id === id)?.visible ?? false;
+  /**
+   * Whether the widget's tile in the strip shows. Independent of the chart,
+   * falling back to the chart flag for layouts saved before the two split.
+   */
+  const isTileVisible = (id: string) => {
+    const widget = layout.widgets.find((w) => w.id === id);
+    if (!widget) return false;
+    return typeof widget.tileVisible === "boolean"
+      ? widget.tileVisible
+      : widget.visible;
+  };
+  const widgetOrder = (id: string) =>
+    layout.widgets.find((widget) => widget.id === id)?.order ?? 999;
+
+  // `layoutData` is undefined until the real layout (snapshot or legacy
+  // widgets) resolves, and the fallback layout shows cards a person may have
+  // switched off. Cards gated on the layout alone wait for the real one.
+  const layoutResolved = layoutData != null;
+
+  // Band and target numbers come resolved from the snapshot (`targetBands`).
+  // The client copy below is computed from the profile through the SAME
+  // `buildDashboardBands` the server uses, so a still-loading snapshot frame
+  // keeps real bands rather than blank charts and the two cannot disagree.
+  // The profile it reads is the caller's, and under a switch the caller is
+  // the delegate: `viewerBandProfile` then draws no client band at all and
+  // waits for the snapshot's, which resolve against the record. Keyed on the
+  // `user` identity so the React Compiler can preserve the memo.
+  const inSharedRecord = user?.accountAccess?.active != null;
+  const thresholdsData = dashboard.thresholdsData;
+  const clientBandProfile = useMemo(
+    () =>
+      viewerBandProfile(
+        {
+          dateOfBirth: user?.dateOfBirth ? new Date(user.dateOfBirth) : null,
+          gender: toProfileSex(user?.gender),
+          heightCm: user?.heightCm ?? null,
+          thresholdsJson: thresholdsData?.overrides ?? null,
+        },
+        inSharedRecord,
+      ),
+    [user, thresholdsData, inSharedRecord],
+  );
+  const clientBands = useMemo(
+    () => buildDashboardBands(clientBandProfile),
+    [clientBandProfile],
+  );
+  const serverBands = snapshotEnabled ? snapshot?.targetBands : undefined;
+  const bands = serverBands ?? clientBands;
+
+  // Which way a weight change counts as progress against the stored target.
+  // The snapshot carries the server's answer; the fallback asks the same
+  // resolver from the same profile the band fallback reads.
+  const weight = summaries?.WEIGHT;
+  const weightTrend =
+    (snapshotEnabled ? snapshot?.tiles.weightTrend : undefined) ??
+    resolveWeightTrend(
+      resolveWeightTargetOverride(clientBandProfile.thresholdsJson),
+      weightTrendReferenceKg(weight),
+    );
+  // Every other tile's direction comes resolved from the server against the
+  // record's own targets. The snapshot-disabled path has no resolved answer
+  // and renders neutral rather than guessing a polarity.
+  const tileDirections = snapshotEnabled
+    ? snapshot?.tiles.directions
+    : undefined;
+  const directionOf = (key: string): TrendDirectionSentiment =>
+    tileDirections?.[key]?.direction ?? "neutral";
+
+  // Glucose has no chart slot; the tile flag is its single source of truth.
+  // Eligibility walks the untagged bucket beside the four named contexts, so
+  // an account whose source never writes a meal-time tag still sees a tile.
+  const displayGlucoseUnit = resolveGlucoseUnit(user?.glucoseUnit ?? null);
+  const glucoseTiles = resolveGlucoseTiles(data?.glucoseByContext ?? {});
+
+  return {
+    t,
+    fmt,
+    unitDisplay: unitDisplay as UnitDisplay,
+    td,
+    tdd,
+    user,
+    data,
+    summaries,
+    moodSummary: moodData?.summary,
+    hrv: pickHrvSummary(summaries),
+    layout: layout as DashboardLayout,
+    layoutResolved,
+    compareBaseline,
+    tileCompareDelta,
+    tileStaleDays,
+    isChartVisible,
+    isTileVisible,
+    widgetOrder,
+    directionOf,
+    weightTrend,
+    ...bandsForDisplay(bands, unitDisplay, t),
+    displayGlucoseUnit,
+    glucoseTiles,
+  };
+}
+
+export type DashboardTileContext = ReturnType<typeof useDashboardTileContext>;
diff --git a/src/components/dashboard/tiles/use-dashboard-data.ts b/src/components/dashboard/tiles/use-dashboard-data.ts
new file mode 100644
index 000000000..21bbd3ef7
--- /dev/null
+++ b/src/components/dashboard/tiles/use-dashboard-data.ts
@@ -0,0 +1,288 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import type { AuthUser } from "@/hooks/use-auth";
+import { useSurfaceVisible } from "@/hooks/use-surface-visible";
+import { apiGet } from "@/lib/api/api-fetch";
+import { mergeSlimAndThickAnalytics } from "@/lib/analytics/merge-slim-thick";
+import type { DataSummary } from "@/lib/analytics/trends";
+import {
+  computeLocalBatchWindow,
+  deriveBatchChartTypes,
+  type BatchWindow,
+} from "@/lib/dashboard/batch-chart-types";
+import { isDashboardSnapshotEnabled } from "@/lib/dashboard/snapshot-flag";
+import { hideModuleWidgets } from "@/lib/dashboard/widget-modules";
+import {
+  resolveDashboardLayout,
+  type DashboardLayout,
+} from "@/lib/dashboard-layout";
+import { useAnalyticsQuery } from "@/lib/queries/use-analytics-query";
+import { useDailyDigest } from "@/lib/queries/use-daily-digest";
+import { useDashboardSnapshot } from "@/lib/queries/use-dashboard-snapshot";
+import { queryKeys } from "@/lib/query-keys";
+import type { DashboardAnalyticsData as AnalyticsData } from "@/types/analytics";
+
+/**
+ * Module scope so the option object is a stable reference across renders.
+ *
+ * Refetch on window focus: the dashboard is the surface a person leaves open
+ * in a background tab while changing its tile selection elsewhere; without it
+ * the stale layout sat visible for up to the poll interval ("saved but nothing
+ * changed"). `staleTime` bounds the cost to one refetch a minute, and the
+ * server side is SWR-cached, so a focus flick is a cheap cache hit.
+ */
+const DASHBOARD_QUERY_OPTS = {
+  staleTime: 60_000,
+  refetchOnWindowFocus: true,
+} as const;
+
+/** One day of the batched series the dashboard charts read their slice from. */
+export interface BatchedSeriesRow {
+  value: number;
+  measuredAt: string;
+  count?: number;
+  minValue?: number | null;
+  maxValue?: number | null;
+}
+
+export interface DashboardMoodData {
+  entries: Array<{ date: string; score: number; samples: number }>;
+  summary: DataSummary;
+}
+
+/**
+ * The tiles' `AnalyticsData` from whichever path feeds them. Snapshot path:
+ * the one cell, where `extras` is null on a rollup-coverage miss (two-phase
+ * contract), so the BP-in-target and glucose fields stay undefined and those
+ * tiles shimmer while the rest of the strip paints. Legacy path: the two
+ * analytics slices merged.
+ */
+function assembleDashboardAnalytics(
+  snapshotEnabled: boolean,
+  snapshot: ReturnType<typeof useDashboardSnapshot>["data"],
+  slim: Parameters<typeof mergeSlimAndThickAnalytics>[0],
+  thick: Parameters<typeof mergeSlimAndThickAnalytics>[1],
+): AnalyticsData | undefined {
+  if (snapshotEnabled) {
+    const snap = snapshot;
+    if (!snap) return undefined;
+    return {
+      summaries: snap.tiles.summaries,
+      lastSeenByType: snap.tiles.lastSeenByType,
+      // Optional on the snapshot (additive contract).
+      sleepSourceDiscrepancy: snap.tiles.sleepSourceDiscrepancy ?? null,
+      bpInTargetPct: snap.extras?.bpInTargetPct ?? null,
+      bpInTargetPct7d: snap.extras?.bpInTargetPct7d ?? null,
+      bpInTargetPct30d: snap.extras?.bpInTargetPct30d ?? null,
+      bpInTargetPctAllTime: snap.extras?.bpInTargetPctAllTime ?? null,
+      bpInTargetPctPriorMonth: snap.extras?.bpInTargetPctPriorMonth ?? null,
+      bpInTargetPctPriorYear: snap.extras?.bpInTargetPctPriorYear ?? null,
+      bpInTargetCount90: snap.extras?.bpInTargetCount90 ?? null,
+      bpInTargetSpanDays90: snap.extras?.bpInTargetSpanDays90 ?? null,
+      glucoseByContext: snap.extras?.glucoseByContext as
+        Record<string, DataSummary> | undefined,
+    };
+  }
+  // `mergeSlimAndThickAnalytics` falls back to the thick slice when the
+  // slim one resolves with no content, and otherwise lets slim paint first.
+  const merged = mergeSlimAndThickAnalytics(slim, thick);
+  if (!merged) return undefined;
+  return {
+    summaries: merged.summaries,
+    lastSeenByType: merged.lastSeenByType,
+    sleepSourceDiscrepancy: merged.sleepSourceDiscrepancy,
+    bpInTargetPct: merged.bpInTargetPct,
+    bpInTargetPct7d: merged.bpInTargetPct7d,
+    bpInTargetPct30d: merged.bpInTargetPct30d,
+    bpInTargetPctAllTime: merged.bpInTargetPctAllTime,
+    bpInTargetPctPriorMonth: merged.bpInTargetPctPriorMonth,
+    bpInTargetPctPriorYear: merged.bpInTargetPctPriorYear,
+    bpInTargetCount90: merged.bpInTargetCount90,
+    bpInTargetSpanDays90: merged.bpInTargetSpanDays90,
+    glucoseByContext: merged.glucoseByContext as
+      Record<string, DataSummary> | undefined,
+  };
+}
+
+/**
+ * Every read the dashboard's tiles and charts paint from.
+ *
+ * The tiles hydrate from ONE un-gated `/api/dashboard/snapshot` cell, so the
+ * whole strip shares one completion moment and `/api/auth/me` leaves the cold
+ * critical path. `NEXT_PUBLIC_DASHBOARD_SNAPSHOT=false` falls back to the
+ * legacy independent cells (two analytics slices, the widget layout, the mood
+ * analytics and the user's own thresholds); either way the same
+ * `AnalyticsData` shape comes out, so no tile knows which path fed it.
+ *
+ * The Today hero's digest is read here too, in its original place in the read
+ * order: it is the day's data, so no module owns it, and it is gated on auth
+ * only.
+ */
+export function useDashboardData({
+  isAuthenticated,
+  mounted,
+  user,
+  batchWindowProp,
+}: {
+  isAuthenticated: boolean;
+  mounted: boolean;
+  user: AuthUser | null;
+  /**
+   * The batched-series window the RSC prefetch computed from the profile
+   * time zone. Adopted verbatim so the `chartSeriesBatch` key matches the key
+   * the server dehydrated under; absent on the prefetch-off and legacy paths,
+   * where the browser-local window stands in.
+   */
+  batchWindowProp?: BatchWindow;
+}) {
+  const snapshotEnabled = isDashboardSnapshotEnabled();
+  const snapshotQuery = useDashboardSnapshot(snapshotEnabled);
+  const digestQuery = useDailyDigest(isAuthenticated);
+
+  // Legacy path: the slim slice (`?slice=summaries`) paints every per-type
+  // tile; the thick slice streams the BP-in-target and glucose fields in
+  // afterwards. Both share `caches.analytics` server-side.
+  const analyticsSlimQuery = useAnalyticsQuery({
+    slice: "summaries",
+    enabled: !snapshotEnabled && isAuthenticated,
+  });
+  const analyticsThickQuery = useAnalyticsQuery({
+    enabled: !snapshotEnabled && isAuthenticated,
+  });
+  const data = useMemo(
+    () =>
+      assembleDashboardAnalytics(
+        snapshotEnabled,
+        snapshotQuery.data,
+        analyticsSlimQuery.data,
+        analyticsThickQuery.data,
+      ),
+    [
+      snapshotEnabled,
+      snapshotQuery.data,
+      analyticsSlimQuery.data,
+      analyticsThickQuery.data,
+    ],
+  );
+
+  // The user's own targets, for the legacy (snapshot-disabled) band fallback
+  // only. In snapshot mode the server resolves the same overrides into
+  // `targetBands` and this query never fires.
+  const { data: thresholdsData } = useQuery({
+    queryKey: queryKeys.userThresholds(),
+    queryFn: async () => {
+      return apiGet<{
+        overrides: Record<string, { min: number; max: number }>;
+      }>("/api/user/thresholds");
+    },
+    enabled: !snapshotEnabled && isAuthenticated,
+    ...DASHBOARD_QUERY_OPTS,
+  });
+
+  const { data: layoutDataLegacy } = useQuery({
+    queryKey: queryKeys.dashboardWidgets(),
+    queryFn: async () => {
+      return apiGet<DashboardLayout>("/api/dashboard/widgets");
+    },
+    enabled: !snapshotEnabled && isAuthenticated,
+    ...DASHBOARD_QUERY_OPTS,
+  });
+  // The snapshot publishes its layout with switched-off modules' widgets
+  // already hidden. The legacy feed is the stored layout as saved (Settings
+  // edits that exact value), so the same mask is applied here, from the same
+  // surface map, before anything paints.
+  const layoutData = snapshotEnabled
+    ? snapshotQuery.data?.layout
+    : layoutDataLegacy && hideModuleWidgets(layoutDataLegacy, user?.modules);
+  const moodWidgetVisible = useSurfaceVisible("widget:mood");
+
+  const { data: moodDataLegacy } = useQuery({
+    queryKey: queryKeys.moodAnalytics(),
+    queryFn: async () => {
+      return apiGet<DashboardMoodData>("/api/mood/analytics");
+    },
+    // The route refuses with the mood module off; do not ask.
+    enabled: !snapshotEnabled && isAuthenticated && moodWidgetVisible,
+    ...DASHBOARD_QUERY_OPTS,
+  });
+  const moodData: DashboardMoodData | undefined = snapshotEnabled
+    ? snapshotQuery.data
+      ? {
+          entries: snapshotQuery.data.tiles.mood.entries,
+          summary: (snapshotQuery.data.tiles.mood.summary ??
+            undefined) as DataSummary,
+        }
+      : undefined
+    : moodDataLegacy;
+
+  // Visibility and order of every widget.
+  const layout = resolveDashboardLayout(layoutData);
+
+  // ONE batched fetch for every visible non-sleep chart series; each chart
+  // reads its slice through `preloadedSeries` instead of self-fetching. Sleep
+  // stays on its per-night `/series` adapter and is never batched. The type
+  // set is the shared `deriveBatchChartTypes`, the same function the RSC
+  // prefetch runs over the same snapshot fields, so the cache key is
+  // byte-identical on both sides.
+  const batchChartTypes = deriveBatchChartTypes(layout, data?.summaries);
+
+  // A day-bucketed window, computed once per mount (lazy state) so a
+  // re-render never re-keys the batch. The server-computed window wins when
+  // present; lazy state with a prop-derived initial value is deterministic
+  // across the SSR / CSR pair.
+  const [batchWindow] = useState(
+    () => batchWindowProp ?? computeLocalBatchWindow(),
+  );
+
+  const { data: batchedSeries } = useQuery({
+    queryKey: queryKeys.chartSeriesBatch(
+      batchChartTypes.join(","),
+      batchWindow.from,
+      batchWindow.to,
+    ),
+    enabled: isAuthenticated && mounted && batchChartTypes.length > 0,
+    staleTime: 60_000,
+    gcTime: 5 * 60_000,
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      const sp = new URLSearchParams();
+      sp.set("types", batchChartTypes.join(","));
+      sp.set("from", batchWindow.from);
+      sp.set("to", batchWindow.to);
+      const res = await apiGet<{
+        series: Record<string, BatchedSeriesRow[]>;
+      }>(`/api/measurements/series-batch?${sp}`);
+      return res.series;
+    },
+  });
+
+  // The loading flag follows whichever query actually drives the tiles: in
+  // snapshot mode the slim query is disabled and reports `isLoading: false`
+  // forever, which would select the empty state for the whole snapshot
+  // fetch. `!mounted` pins the SSR pass and the hydration render to the
+  // skeleton branch (server-side the data queries are disabled, and a late
+  // hydrating boundary would otherwise render the skeleton where the server
+  // rendered the empty state: React #418). The hero band and the strip share
+  // this one gate so both swap to content in the same render pass.
+  const primaryLoading =
+    !mounted ||
+    (snapshotEnabled ? snapshotQuery.isLoading : analyticsSlimQuery.isLoading);
+
+  return {
+    snapshotEnabled,
+    snapshot: snapshotQuery.data,
+    digestQuery,
+    data,
+    thresholdsData,
+    layoutData,
+    layout,
+    moodData,
+    preloadedSeries: batchedSeries,
+    primaryLoading,
+  };
+}
+
+export type DashboardData = ReturnType<typeof useDashboardData>;
diff --git a/src/components/day/__tests__/day-door-coverage-guard.test.ts b/src/components/day/__tests__/day-door-coverage-guard.test.ts
index c820c1b3b..10bf7a177 100644
--- a/src/components/day/__tests__/day-door-coverage-guard.test.ts
+++ b/src/components/day/__tests__/day-door-coverage-guard.test.ts
@@ -131,10 +131,32 @@ export function stripComments(text: string): string {
     .replace(/(^|[^:"'`])\/\/.*$/gm, "$1");
 }
 
-const source = new Map(
+const read = new Map(
   files.map((f) => [rel(f), stripComments(readFileSync(f, "utf8"))]),
 );
 
+/**
+ * A component and the folder of the same name beside it are one chart: the
+ * HealthChart composer in `health-chart.tsx` draws the axes, and its layers,
+ * tooltip and day footer live in `health-chart/`. Read apart, the composer
+ * would look like a date-axis chart with no doors and the folder like no
+ * chart at all, so each folder is folded into its component's entry.
+ */
+export function foldComponentFolders(
+  sources: Map<string, string>,
+): Map<string, string> {
+  const folded = new Map<string, string>();
+  const owners = [...sources.keys()].filter((f) => f.endsWith(".tsx"));
+  for (const [file, text] of sources) {
+    const owner = owners.find((o) => file.startsWith(`${o.slice(0, -4)}/`));
+    const key = owner ?? file;
+    folded.set(key, `${folded.get(key) ?? ""}\n${text}`);
+  }
+  return folded;
+}
+
+const source = foldComponentFolders(read);
+
 /**
  * The text of every JSX opening tag named `name` in `text`: from `<Name` to
  * the `>` that closes it at brace depth zero, so an arrow function or a
@@ -223,7 +245,10 @@ function findMissingDoors(): {
           /\bChartDayFooter\b/.test(text) &&
           /\bOPEN_DAY_LINE\b/.test(text) &&
           /\.tooltipProps\b/.test(text) &&
-          /\.tooltipAction\(/.test(text);
+          // Called in place, or handed whole to a tooltip that calls it.
+          /\.tooltipAction\(|\btooltipAction:\s*\w+\.tooltipAction\b/.test(
+            text,
+          );
         if (wired) {
           doors.charts += 1;
           doors.chartFiles.push(file);
@@ -263,9 +288,10 @@ describe("every chart drawn in days opens its days, or says why not", () => {
   it("still finds the doors it is meant to find (an empty match set fails)", () => {
     // HealthChart on the metric pages (two mounts in the HealthKit page),
     // blood pressure, weight, pulse, BMI, recovery, sleep, the mood line,
-    // water and caffeine; on the dashboard its seven charts, the mood line
-    // and the adherence chart.
-    expect(doors.mounts).toBeGreaterThanOrEqual(20);
+    // water and caffeine; on the dashboard the one mount its chart builder
+    // draws all seven metric charts through, the mood line and the
+    // adherence chart.
+    expect(doors.mounts).toBeGreaterThanOrEqual(14);
     // HealthChart, the mood line and the nutrient bars themselves, sleep
     // stages, mood dimensions, lab marker, custom metric, questionnaire,
     // basal temperature, dose strength, efficacy, the adherence chart:
@@ -303,6 +329,29 @@ describe("every chart drawn in days opens its days, or says why not", () => {
     }
   });
 
+  it("folds a component's same-named folder into it, and nothing else", () => {
+    const folded = foldComponentFolders(
+      new Map([
+        ["src/components/charts/health-chart.tsx", "<XAxis />"],
+        [
+          "src/components/charts/health-chart/chart-layers.tsx",
+          "ChartDayFooter",
+        ],
+        ["src/components/charts/health-chart-dynamic.tsx", "dynamic"],
+      ]),
+    );
+    expect([...folded.keys()].sort()).toEqual([
+      "src/components/charts/health-chart-dynamic.tsx",
+      "src/components/charts/health-chart.tsx",
+    ]);
+    expect(folded.get("src/components/charts/health-chart.tsx")).toContain(
+      "ChartDayFooter",
+    );
+    expect(source.get("src/components/charts/health-chart.tsx")).toMatch(
+      /\buseChartDayLinks\(/,
+    );
+  });
+
   it("reads a JSX tag to its real end, past arrow functions in its props", () => {
     const [tag] = jsxTags(
       `<HealthChart onVisibleStats={(s) => s > 1} dayLinks />`,
diff --git a/src/components/documents/__tests__/document-coach-launch-wiring.test.ts b/src/components/documents/__tests__/document-coach-launch-wiring.test.ts
index 626fc38a0..1e1612aa6 100644
--- a/src/components/documents/__tests__/document-coach-launch-wiring.test.ts
+++ b/src/components/documents/__tests__/document-coach-launch-wiring.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import { documentDetailSource } from "@/__tests__/helpers/document-detail-source";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
@@ -15,10 +16,6 @@ import { join } from "node:path";
  *      stays connected end-to-end.
  */
 const ROOT = join(__dirname, "../../../..");
-const DETAIL_SHEET = join(
-  ROOT,
-  "src/components/documents/document-detail-sheet.tsx",
-);
 const MOUNT = join(ROOT, "src/components/insights/layout-coach-mount.tsx");
 const DRAWER = join(
   ROOT,
@@ -30,7 +27,7 @@ function load(path: string): string {
 }
 
 describe("document detail sheet — Ask the Coach opens the drawer", () => {
-  const src = load(DETAIL_SHEET);
+  const src = documentDetailSource();
 
   it("launches the doc-scoped coach drawer via askCoach(..., doc.id)", () => {
     expect(src).toContain("useCoachLaunch");
diff --git a/src/components/documents/__tests__/document-detail-download.test.ts b/src/components/documents/__tests__/document-detail-download.test.ts
index b59f64e1a..39b0138ae 100644
--- a/src/components/documents/__tests__/document-detail-download.test.ts
+++ b/src/components/documents/__tests__/document-detail-download.test.ts
@@ -21,13 +21,10 @@
  * disabled state is real. A render could not see either.
  */
 import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
 
-const SHEET = readFileSync(
-  join(process.cwd(), "src/components/documents/document-detail-sheet.tsx"),
-  "utf8",
-);
+import { documentDetailSource } from "@/__tests__/helpers/document-detail-source";
+
+const SHEET = documentDetailSource();
 
 describe("the detail sheet's original-document transport", () => {
   it("has exactly one eager loader for the original", () => {
diff --git a/src/components/documents/__tests__/documents-delete-confirm-guard.test.ts b/src/components/documents/__tests__/documents-delete-confirm-guard.test.ts
index abfde0ac0..edb6fef15 100644
--- a/src/components/documents/__tests__/documents-delete-confirm-guard.test.ts
+++ b/src/components/documents/__tests__/documents-delete-confirm-guard.test.ts
@@ -16,9 +16,15 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
 
+import { documentDetailSource } from "@/__tests__/helpers/document-detail-source";
+
 const dir = join(process.cwd(), "src/components/documents");
-const view = readFileSync(join(dir, "documents-view.tsx"), "utf8");
-const sheet = readFileSync(join(dir, "document-detail-sheet.tsx"), "utf8");
+// The page and the selection hook it takes its delete path from.
+const view = [
+  readFileSync(join(dir, "documents-view.tsx"), "utf8"),
+  readFileSync(join(dir, "vault/use-vault-selection.ts"), "utf8"),
+].join("\n");
+const sheet = documentDetailSource();
 const bar = readFileSync(join(dir, "document-bulk-bar.tsx"), "utf8");
 
 describe("vault delete paths confirm before deleting", () => {
diff --git a/src/components/documents/__tests__/documents-view-navigation.test.ts b/src/components/documents/__tests__/documents-view-navigation.test.ts
index ab96a78a8..075d8c08e 100644
--- a/src/components/documents/__tests__/documents-view-navigation.test.ts
+++ b/src/components/documents/__tests__/documents-view-navigation.test.ts
@@ -8,7 +8,7 @@ import {
   documentSelectionHref,
   documentSelectionSurvivedClose,
   withoutDocumentSelectionHref,
-} from "../documents-view";
+} from "../vault/selection-history";
 
 class MemoryHistory {
   private entries: { href: string; state: unknown }[];
diff --git a/src/components/documents/detail/detail-sections.tsx b/src/components/documents/detail/detail-sections.tsx
new file mode 100644
index 000000000..c3d56a28a
--- /dev/null
+++ b/src/components/documents/detail/detail-sections.tsx
@@ -0,0 +1,409 @@
+"use client";
+
+import Link from "next/link";
+import {
+  ArrowRight,
+  Check,
+  FlaskConical,
+  Pencil,
+  Plus,
+  Share2,
+  Sparkles,
+  Trash2,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { DateField } from "@/components/ui/date-field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { INBOUND_DOCUMENT_KINDS } from "@/lib/documents/inbound-constants";
+import { formatBytes } from "@/lib/format/bytes";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { useCoachLaunch } from "@/lib/insights/coach-launch-context";
+import { cn } from "@/lib/utils";
+import type {
+  InboundDocumentDetailDto,
+  InboundDocumentKindValue,
+} from "@/lib/validations/inbound-documents";
+
+import {
+  DocumentDownloadButton,
+  DocumentOpenInTabButton,
+} from "./original-file";
+import type { DocumentDetail } from "./use-document-detail";
+
+/**
+ * The sheet's footer. Delete sits bottom-left as a quiet text button (the
+ * bottom-right slot reads as the confirm action, and a destructive control
+ * there is a footgun); Coach, Share, open in a new tab and Download keep the
+ * trailing edge, icon-only on phones so they never overflow at 360 px.
+ */
+export function DocumentDetailFooter({
+  doc,
+  detail,
+  aiEnabled,
+  coachAvailable,
+  onOpenChange,
+}: {
+  doc: InboundDocumentDetailDto;
+  detail: DocumentDetail;
+  aiEnabled: boolean;
+  coachAvailable: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { t } = useTranslations();
+  // The vault's "Ask the Coach" opens the fenced conversation scoped to this
+  // document in the shared side drawer.
+  const launch = useCoachLaunch();
+  const {
+    canManageDocuments,
+    setConfirmDeleteOpen,
+    remove,
+    setShareOpen,
+    inlineSrc,
+    inlineFailed,
+  } = detail;
+  return (
+    <div className="flex w-full items-center justify-between gap-2">
+      {/* .x — deleting, sharing and re-filing a document are the
+          owner's alone. Inside somebody else's record the sheet reads
+          the document and offers the download, and the leading slot
+          simply has nothing in it. */}
+      {canManageDocuments ? (
+        <Button
+          variant="ghost"
+          className="text-destructive hover:text-destructive hover:bg-destructive/10"
+          onClick={() => setConfirmDeleteOpen(true)}
+          disabled={remove.isPending}
+          data-slot="document-detail-delete"
+        >
+          <Trash2 className="size-4" aria-hidden />
+          {t("documents.detail.delete")}
+        </Button>
+      ) : (
+        <span />
+      )}
+      <div className="flex items-center gap-2">
+        {/* .x — `launch` is the one entry point that rendered
+            without asking whether a drawer exists to open. It is null
+            inside somebody else's record (the shell mounts no drawer
+            there), and `/documents` is a shared-record destination, so
+            this is the Coach button a delegate actually meets. */}
+        {aiEnabled && coachAvailable && launch ? (
+          // "Ask the Coach" opens the REAL
+          // coach conversation scoped to this document in the SIDE
+          // DRAWER (the maximize control there expands it to the full
+          // `/coach` page). Every doc turn still runs on the hardened
+          // fenced document endpoint (never the coach tool route) — only
+          // WHERE the conversation renders changed, not the send path.
+          // Close the detail sheet so the drawer owns the surface.
+          <Button
+            variant="outline"
+            onClick={() => {
+              onOpenChange(false);
+              launch.askCoach(null, undefined, false, doc.id);
+            }}
+            data-slot="document-chat-open"
+          >
+            <Sparkles className="size-4" aria-hidden />
+            <span className="sr-only sm:not-sr-only">
+              {t("documents.chat.openButton")}
+            </span>
+          </Button>
+        ) : null}
+        {canManageDocuments && (
+          <Button
+            variant="outline"
+            onClick={() => setShareOpen(true)}
+            data-slot="document-share"
+            aria-label={t("documents.detail.share")}
+          >
+            <Share2 className="size-4" aria-hidden />
+            <span className="hidden sm:inline">
+              {t("documents.detail.share")}
+            </span>
+          </Button>
+        )}
+        {doc.servingClass === "inline" ? (
+          <DocumentOpenInTabButton
+            readyUrl={inlineSrc}
+            unavailable={inlineFailed}
+          />
+        ) : null}
+        <DocumentDownloadButton
+          documentId={doc.id}
+          filename={doc.filename}
+          readyUrl={inlineSrc}
+          unavailable={inlineFailed}
+          variant="outline"
+          slot="document-download"
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Title, kind, filing date and the condition links, each saving on commit. */
+export function DocumentDetailFields({
+  doc,
+  detail,
+}: {
+  doc: InboundDocumentDetailDto;
+  detail: DocumentDetail;
+}) {
+  const { t } = useTranslations();
+  const {
+    canManageDocuments,
+    editingTitle,
+    setEditingTitle,
+    titleDraft,
+    setTitleDraft,
+    commitTitle,
+    patch,
+    episodes,
+    toggleEpisode,
+  } = detail;
+  return (
+    <>
+      <div className="space-y-1.5">
+        <Label htmlFor="document-title-input">
+          {t("documents.detail.titleLabel")}
+        </Label>
+        {editingTitle ? (
+          <Input
+            id="document-title-input"
+            autoFocus
+            value={titleDraft}
+            onChange={(e) => setTitleDraft(e.target.value)}
+            onBlur={commitTitle}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitTitle();
+              if (e.key === "Escape") setEditingTitle(false);
+            }}
+            maxLength={200}
+            placeholder={t("documents.detail.titlePlaceholder")}
+          />
+        ) : !canManageDocuments ? (
+          <p
+            id="document-title-input"
+            className={cn(
+              "min-h-10 px-3 py-2 text-sm",
+              doc.title === null && "text-muted-foreground",
+            )}
+          >
+            {doc.title ?? t("documents.detail.titlePlaceholder")}
+          </p>
+        ) : (
+          <button
+            type="button"
+            id="document-title-input"
+            onClick={() => {
+              setTitleDraft(doc.title ?? "");
+              setEditingTitle(true);
+            }}
+            className="border-input hover:bg-muted/50 focus-visible:border-input-focus flex min-h-10 w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm focus-visible:outline-none"
+          >
+            <span
+              className={cn(
+                "truncate",
+                doc.title === null && "text-muted-foreground",
+              )}
+            >
+              {doc.title ?? t("documents.detail.titlePlaceholder")}
+            </span>
+            <Pencil
+              className="text-muted-foreground size-3.5 shrink-0"
+              aria-hidden
+            />
+          </button>
+        )}
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label htmlFor="document-kind-select">
+            {t("documents.detail.kindLabel")}
+          </Label>
+          {/* Read-only rather than absent: the value IS the content
+              a delegate came to read, and a form field that shows it
+              without accepting a change is the honest rendering. */}
+          <Select
+            value={doc.kind}
+            disabled={!canManageDocuments}
+            onValueChange={(value) =>
+              patch.mutate({ kind: value as InboundDocumentKindValue })
+            }
+          >
+            <SelectTrigger id="document-kind-select" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {INBOUND_DOCUMENT_KINDS.map((kind) => (
+                <SelectItem key={kind} value={kind}>
+                  {t(`documents.kind.${kind}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="document-date-field">
+            {t("documents.detail.dateLabel")}
+          </Label>
+          <DateField
+            id="document-date-field"
+            disabled={!canManageDocuments}
+            value={doc.documentDate ?? ""}
+            onChange={(value) =>
+              patch.mutate({
+                documentDate: value === "" ? null : value,
+              })
+            }
+            aria-label={t("documents.detail.dateLabel")}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <p className="text-sm leading-none font-medium">
+          {t("documents.detail.conditionsLabel")}
+        </p>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {doc.conditionLinks.map((link) => (
+            <Link
+              key={link.episodeId}
+              href={`/illness/${link.episodeId}`}
+              className="bg-muted text-foreground hover:bg-muted/70 focus-visible:ring-ring/50 inline-flex max-w-48 items-center rounded-full px-2.5 py-1 text-xs focus-visible:ring-[3px] focus-visible:outline-none"
+            >
+              <span className="truncate">{link.name}</span>
+            </Link>
+          ))}
+          {doc.conditionLinks.length === 0 ? (
+            <span className="text-muted-foreground text-xs">
+              {t("documents.detail.noConditions")}
+            </span>
+          ) : null}
+          {canManageDocuments && (episodes.data?.length ?? 0) > 0 ? (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 rounded-full px-2.5 text-xs"
+                >
+                  <Plus className="size-3" aria-hidden />
+                  {t("documents.detail.linkCondition")}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-64 p-2">
+                <ul className="max-h-56 space-y-0.5 overflow-y-auto overscroll-contain">
+                  {episodes.data?.map((episode) => {
+                    const linked = doc.conditionLinks.some(
+                      (l) => l.episodeId === episode.id,
+                    );
+                    return (
+                      <li key={episode.id}>
+                        <button
+                          type="button"
+                          onClick={() => toggleEpisode(episode.id)}
+                          className="hover:bg-muted focus-visible:ring-ring/50 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm focus-visible:ring-[3px] focus-visible:outline-none"
+                          aria-pressed={linked}
+                        >
+                          <Check
+                            className={cn(
+                              "size-4 shrink-0",
+                              linked ? "opacity-100" : "opacity-0",
+                            )}
+                            aria-hidden
+                          />
+                          <span className="truncate">{episode.label}</span>
+                        </button>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </PopoverContent>
+            </Popover>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}
+
+/**
+ * The lab values read from this page, when Labs holds any, and the upload,
+ * filename and import provenance meta lines.
+ */
+export function DocumentDetailMeta({
+  doc,
+  detail,
+}: {
+  doc: InboundDocumentDetailDto;
+  detail: DocumentDetail;
+}) {
+  const { t, locale } = useTranslations();
+  const format = useFormatters();
+  const { labsModuleEnabled, labFactCount, sourceSystemName } = detail;
+  return (
+    <>
+      {labsModuleEnabled && labFactCount > 0 ? (
+        <Link
+          href="/labs"
+          data-slot="document-detail-lab-values-link"
+          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1.5 self-start rounded-md text-sm transition-colors focus-visible:ring-[3px] focus-visible:outline-none"
+        >
+          <FlaskConical className="size-4" aria-hidden="true" />
+          {t("documents.detail.labValuesLink", { count: labFactCount })}
+          <ArrowRight className="size-3.5" aria-hidden="true" />
+        </Link>
+      ) : null}
+
+      <p className="text-muted-foreground text-xs">
+        {t("documents.detail.uploadedMeta", {
+          date: format.date(doc.createdAt),
+          size: formatBytes(doc.byteSize, locale),
+        })}
+      </p>
+      {doc.filename ? (
+        <p
+          className="text-muted-foreground truncate text-xs"
+          title={doc.filename}
+        >
+          {doc.filename}
+        </p>
+      ) : null}
+
+      {/* Where an imported document came from (#1038). Meta, so
+          muted like the line above; the id is what the person looks
+          up in the other system. */}
+      {doc.sourceSystem ? (
+        <p
+          className="text-muted-foreground text-xs break-all"
+          data-slot="document-detail-provenance"
+        >
+          {doc.sourceId
+            ? t("documents.detail.importedFromWithId", {
+                system: sourceSystemName(doc.sourceSystem),
+                id: doc.sourceId,
+              })
+            : t("documents.detail.importedFrom", {
+                system: sourceSystemName(doc.sourceSystem),
+              })}
+        </p>
+      ) : null}
+    </>
+  );
+}
diff --git a/src/components/documents/detail/original-file.tsx b/src/components/documents/detail/original-file.tsx
new file mode 100644
index 000000000..193f2d421
--- /dev/null
+++ b/src/components/documents/detail/original-file.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Download, ExternalLink } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { createFencedBlobLoader } from "@/hooks/use-fenced-object-url";
+import { useTranslations } from "@/lib/i18n/context";
+import { cn } from "@/lib/utils";
+
+/**
+ * Download the stored original.
+ *
+ * A real button, not an anchor wearing `aria-disabled`.
+ *
+ * Two things were wrong with the anchor. `aria-disabled` tells a screen reader
+ * the control is unavailable and stops nothing: `href="#"` is still activated
+ * by a click and by Enter, so a person got a jump to the top of the page
+ * instead of a file. And it ignored the failure flag entirely, so a document
+ * whose original could not be fetched left a control that looked fine and
+ * silently did nothing, for good.
+ *
+ * It also fetches at CLICK time unless the bytes are already in hand. The
+ * sheet loads the original eagerly only for documents it is going to render
+ * inline; for everything else — a large scan, a download-only format — nothing
+ * is fetched or decrypted until somebody asks for it, which is what the plain
+ * `href` used to cost and what the first fix accidentally gave up.
+ */
+export function DocumentDownloadButton({
+  documentId,
+  filename,
+  readyUrl,
+  unavailable,
+  slot,
+  ...buttonProps
+}: {
+  documentId: string;
+  filename: string | null;
+  /** Already-fetched bytes to reuse (the inline preview's), or null. */
+  readyUrl: string | null;
+  /** A prior fetch of these bytes failed for good. */
+  unavailable: boolean;
+  slot: string;
+} & React.ComponentProps<typeof Button>) {
+  const { t } = useTranslations();
+  const [pending, setPending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const loaderRef = useRef<ReturnType<typeof createFencedBlobLoader> | null>(
+    null,
+  );
+
+  useEffect(() => () => loaderRef.current?.dispose(), []);
+
+  const save = (url: string) => {
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = filename ?? "document";
+    anchor.click();
+  };
+
+  const onClick = async () => {
+    if (readyUrl) {
+      save(readyUrl);
+      return;
+    }
+    setPending(true);
+    setFailed(false);
+    // One loader for the lifetime of the button: loading again revokes the
+    // previous object URL, and unmounting revokes the live one. Without that a
+    // decrypted health document stays in the tab's memory until it closes.
+    loaderRef.current ??= createFencedBlobLoader();
+    const result = await loaderRef.current.load(
+      `/api/documents/inbound/${documentId}/original`,
+    );
+    setPending(false);
+    if (result.kind === "loaded") save(result.url);
+    else if (result.kind === "failed") setFailed(true);
+  };
+
+  const blocked = unavailable || failed;
+
+  return (
+    <Button
+      {...buttonProps}
+      data-slot={slot}
+      disabled={blocked || pending}
+      aria-label={t("documents.detail.download")}
+      title={blocked ? t("documents.detail.loadError") : undefined}
+      onClick={() => void onClick()}
+    >
+      <Download className="size-4" aria-hidden />
+      <span className="hidden sm:inline">
+        {blocked
+          ? t("documents.detail.loadError")
+          : t("documents.detail.download")}
+      </span>
+    </Button>
+  );
+}
+
+/**
+ * Open the stored original in a new browser tab, for the types the browser
+ * renders itself (the inline serving class: PDF, JPEG, PNG, WebP, GIF), so a
+ * long report gets the browser's own zoom and search.
+ *
+ * It opens the object URL the sheet already holds rather than the route: a
+ * plain navigation carries no record-session assertion, so the fence would
+ * refuse it once the session has been inside a shared record. The bytes are
+ * already in hand, so the tab opens inside the click and no popup blocker
+ * steps in. A type outside the inline class never gets the control.
+ */
+export function DocumentOpenInTabButton({
+  readyUrl,
+  unavailable,
+}: {
+  readyUrl: string | null;
+  unavailable: boolean;
+}) {
+  const { t } = useTranslations();
+  return (
+    <Button
+      variant="outline"
+      data-slot="document-open-in-tab"
+      disabled={readyUrl === null || unavailable}
+      aria-label={t("documents.detail.openInNewTab")}
+      onClick={() => {
+        if (readyUrl) window.open(readyUrl, "_blank", "noopener");
+      }}
+    >
+      <ExternalLink className="size-4" aria-hidden />
+      <span className="hidden sm:inline">
+        {t("documents.detail.openInNewTab")}
+      </span>
+    </Button>
+  );
+}
+
+/** Inline preview for Class A documents; skeleton until the blob paints. */
+export function InlinePreview({
+  src,
+  failed,
+  mimeType,
+  title,
+}: {
+  /**
+   * The object URL, fetched ONCE by the sheet and handed down.
+   *
+   * The bytes come through the app transport because it carries the
+   * record-session assertion and a browser-issued `src="/api/…"` cannot. What
+   * changed since: this component used to fetch them itself while the sheet
+   * fetched the SAME original again for the download link, so opening a
+   * document decrypted and held two copies of it — and a large scan is a large
+   * copy. One loader now, lifted to the sheet.
+   */
+  src: string | null;
+  failed: boolean;
+  mimeType: string;
+  title: string;
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const isPdf = mimeType === "application/pdf";
+  // Chromium's PDF viewer grabs focus while it initialises — BEFORE the
+  // frame's `load` event — stranding keyboard events inside the embedded
+  // document, so Escape stops closing the sheet the moment a PDF preview
+  // opens. While the guard window is open (armed at mount, extended at
+  // load, ended early by a deliberate pointer interaction with the
+  // preview), any focus landing on the frame bounces straight back to the
+  // dialog container; a user who clicks into the PDF is left alone.
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const stealGuardUntil = useRef(0);
+  const reclaimFocus = (frame: HTMLIFrameElement) => {
+    if (
+      Date.now() < stealGuardUntil.current &&
+      document.activeElement === frame
+    ) {
+      frame.closest<HTMLElement>('[role="dialog"]')?.focus();
+    }
+  };
+  useEffect(() => {
+    // Arm at mount, then run a frame-by-frame sweep for the steal variants
+    // that never dispatch a focus event on the frame element.
+    // Self-terminates with the guard.
+    stealGuardUntil.current = Date.now() + 3_000;
+    let raf = 0;
+    const sweep = () => {
+      const frame = frameRef.current;
+      if (!frame || Date.now() >= stealGuardUntil.current) return;
+      if (document.activeElement === frame) {
+        frame.closest<HTMLElement>('[role="dialog"]')?.focus();
+      }
+      raf = requestAnimationFrame(sweep);
+    };
+    raf = requestAnimationFrame(sweep);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <div className="relative max-h-[55vh] overflow-auto overscroll-contain rounded-lg">
+      {failed ? (
+        // The preview could not be fetched — refused, offline, or still
+        // rendering server-side. A permanent skeleton would read as "loading
+        // forever"; the sheet's own metadata and the download control below
+        // still work.
+        <p
+          data-slot="document-preview-unavailable"
+          className="text-muted-foreground py-8 text-center text-sm"
+        >
+          {title}
+        </p>
+      ) : !loaded || src === null ? (
+        <Skeleton
+          className={cn("w-full rounded-lg", isPdf ? "h-[55vh]" : "h-64")}
+        />
+      ) : null}
+      {src === null || failed ? null : isPdf ? (
+        // No `sandbox` attribute by design: Chromium force-downloads PDFs
+        // in sandboxed frames instead of rendering them. The serve
+        // response itself carries `default-src 'none'` +
+        // `frame-ancestors 'self'` + true Content-Type + nosniff, and the
+        // upload policy denies every format whose inline render could
+        // execute script.
+        <iframe
+          ref={frameRef}
+          src={src}
+          title={title}
+          onLoad={(event) => {
+            setLoaded(true);
+            // The viewer may still initialise (and steal focus) after
+            // `load` — keep the guard open a little longer.
+            stealGuardUntil.current = Math.max(
+              stealGuardUntil.current,
+              Date.now() + 2_000,
+            );
+            reclaimFocus(event.currentTarget);
+          }}
+          onFocus={(event) => reclaimFocus(event.currentTarget)}
+          onPointerDown={() => {
+            // Deliberate interaction with the preview ends the guard.
+            stealGuardUntil.current = 0;
+          }}
+          className={cn(
+            "border-border h-[55vh] w-full rounded-lg border",
+            !loaded && "absolute inset-0 opacity-0",
+          )}
+        />
+      ) : (
+        // Decrypted same-origin blob stream: next/image cannot optimise it
+        // and would only proxy the bytes through a second request.
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={title}
+          onLoad={() => setLoaded(true)}
+          className={cn(
+            "mx-auto max-h-[55vh] w-auto max-w-full rounded-lg object-contain",
+            !loaded && "absolute inset-0 opacity-0",
+          )}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/documents/detail/use-document-detail-ai.ts b/src/components/documents/detail/use-document-detail-ai.ts
new file mode 100644
index 000000000..842e3195e
--- /dev/null
+++ b/src/components/documents/detail/use-document-detail-ai.ts
@@ -0,0 +1,325 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { useAiCapability } from "@/hooks/use-ai-capability";
+import { useCalendarDate } from "@/hooks/use-calendar-date";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import type {
+  DocumentSuggestionDto,
+  DocumentSummaryMode,
+} from "@/lib/validations/inbound-documents";
+
+import type {
+  DocumentAiMode,
+  DocumentAiTarget,
+} from "../document-ai-transport";
+import { useIndexDocument } from "../use-content-index";
+import {
+  useDocumentAiCapability,
+  useDocumentAiErrorText,
+  useDocumentsAutoAiRead,
+  useDocumentSummary,
+  useSuggestDetails,
+} from "../use-document-assist";
+
+import type { DocumentDetail } from "./use-document-detail";
+
+/**
+ * The document's AI layer: the capability that drives the vision or text
+ * transport, the review-first suggestion and what was applied from it, the
+ * session-only and the stored summary, and content indexing.
+ */
+export function useDocumentDetailAi({
+  documentId,
+  open,
+  assistAvailable,
+  contentIndexEnabled,
+  detail,
+}: {
+  documentId: string | null;
+  open: boolean;
+  assistAvailable?: boolean;
+  contentIndexEnabled?: boolean;
+  detail: DocumentDetail;
+}) {
+  const { t, tCount } = useTranslations();
+  const queryClient = useQueryClient();
+  const { doc, canManageDocuments } = detail;
+  // AI layer — capability drives the vision/text transport; the mutations run
+  // the review-first assist, the session-only summary, and content indexing.
+  // The affordance itself is gated on `assistAvailable` (from usage); the
+  // probe only resolves the transport mode + the actionable unavailable reason.
+  //
+  // Neither probe fires inside somebody else's record. The
+  // document reads behind this sheet are delegable; the AI verbs above them are
+  // not, and both of these routes stay on the caller's own authentication. A
+  // delegate would fire two queries that must 403 in order to compute an
+  // affordance every branch below already withholds on `canManageDocuments`.
+  // Reading a document with AI follows the `documentAi` capability on
+  // `/api/auth/me` (the operator's "Reading documents" switch, the provider,
+  // the document-reading consent). Unavailable, the actions are simply not
+  // offered and the probe never fires; a missing consent is asked for in
+  // place instead.
+  const documentAi = useAiCapability("documentAi");
+  const coach = useAiCapability("coach");
+  const capability = useDocumentAiCapability(
+    canManageDocuments && open && documentId !== null && documentAi.available,
+  );
+  // When auto-read is ON, reading happens automatically on upload — the manual
+  // per-document AI action row is redundant and collapses away.
+  const autoRead = useDocumentsAutoAiRead(
+    canManageDocuments && open && documentId !== null,
+  );
+  const suggest = useSuggestDetails();
+  const summary = useDocumentSummary();
+  // Resolves an AI error to final copy — a 429 names the actual wait, derived
+  // from the reset instant the route mirrors into the error meta.
+  const aiErrorText = useDocumentAiErrorText();
+  // Stored generation has an independent mutation state so transient
+  // Summarise/Show text requests cannot change this block's spinner or result.
+  const storedSummary = useDocumentSummary();
+  const indexDoc = useIndexDocument();
+
+  const [suggestion, setSuggestion] = useState<DocumentSuggestionDto | null>(
+    null,
+  );
+  const [appliedFields, setAppliedFields] = useState({
+    title: false,
+    kind: false,
+    date: false,
+  });
+  const [summaryOutput, setSummaryOutput] =
+    useState<DocumentSummaryMode | null>(null);
+
+  // Reset transient AI state whenever another document opens.
+  const [lastDocumentId, setLastDocumentId] = useState(documentId);
+  if (lastDocumentId !== documentId) {
+    setLastDocumentId(documentId);
+    setSuggestion(null);
+    setAppliedFields({ title: false, kind: false, date: false });
+    setSummaryOutput(null);
+  }
+
+  // Clear stale mutation state (a prior document's assist error / summary)
+  // when the sheet switches documents or closes — the mutation stores live
+  // outside render, so they reset in an effect rather than during render.
+  useEffect(() => {
+    suggest.reset();
+    summary.reset();
+    storedSummary.reset();
+    indexDoc.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [documentId]);
+
+  const { aiEnabled, indexEnabled, autoReadEnabled, aiMode, aiTarget } =
+    aiGates({
+      documentAiAvailable: documentAi.available,
+      assistAvailable,
+      contentIndexEnabled,
+      capability: capability.data,
+      autoRead: autoRead.data,
+      doc,
+    });
+
+  const runSuggest = () => {
+    if (!aiTarget) return;
+    setAppliedFields({ title: false, kind: false, date: false });
+    suggest.mutate(
+      { mode: aiMode, target: aiTarget },
+      { onSuccess: (result) => setSuggestion(result) },
+    );
+  };
+
+  const runSummary = (output: DocumentSummaryMode) => {
+    if (!aiTarget) return;
+    summary.reset();
+    setSummaryOutput(output);
+    summary.mutate({ mode: aiMode, target: aiTarget, output });
+  };
+
+  // Generate or regenerate the STORED summary from the detail block. Only the
+  // stored-summary branch requests replacement; the empty-state action keeps
+  // first-write-wins if another worker or tab finishes while AI is running.
+  const generateStoredSummary = () => {
+    if (!aiTarget || !documentId) return;
+    storedSummary.reset();
+    storedSummary.mutate(
+      {
+        mode: aiMode,
+        target: aiTarget,
+        output: "summary",
+        persist: true,
+        replace: doc?.summary != null,
+      },
+      {
+        onSuccess: (result) => {
+          if ("summary" in result) {
+            if (result.persistence === "withheld") {
+              showErrorToast(result.summary);
+            } else if (result.persistence === "failed") {
+              showErrorToast(t("documents.detail.saveError"));
+            }
+          }
+          void queryClient.invalidateQueries({
+            queryKey: queryKeys.inboundDocument(documentId),
+          });
+        },
+        onError: (error) =>
+          showErrorToast(aiErrorText(error), { cause: error }),
+      },
+    );
+  };
+
+  const runIndex = () => {
+    if (!aiTarget) return;
+    indexDoc.mutate(
+      { mode: aiMode, target: aiTarget },
+      {
+        // A read that continued into lab staging says so — the staged values
+        // are waiting in the review block, not silently in a queue. Staged
+        // facts stay PENDING; confirmation remains the only write into Labs.
+        onSuccess: (result) =>
+          toast.success(
+            result.labFactsStaged > 0
+              ? tCount("documents.ai.readStaged", result.labFactsStaged)
+              : t("documents.ai.readDone"),
+          ),
+        onError: (error) =>
+          showErrorToast(aiErrorText(error), { cause: error }),
+      },
+    );
+  };
+
+  const {
+    applyTitle,
+    applyKind,
+    applyDate,
+    suggestionKindLabel,
+    suggestionDateLabel,
+  } = useSuggestionApply({ suggestion, setAppliedFields, detail });
+
+  return {
+    documentAi,
+    coach,
+    capability,
+    suggest,
+    summary,
+    storedSummary,
+    indexDoc,
+    aiErrorText,
+    suggestion,
+    setSuggestion,
+    appliedFields,
+    summaryOutput,
+    setSummaryOutput,
+    aiEnabled,
+    indexEnabled,
+    autoReadEnabled,
+    runSuggest,
+    runSummary,
+    generateStoredSummary,
+    runIndex,
+    applyTitle,
+    applyKind,
+    applyDate,
+    suggestionKindLabel,
+    suggestionDateLabel,
+  };
+}
+
+/**
+ * Whether the AI actions run, whether content can be indexed, whether auto-
+ * read already does it, and the transport mode and target. The gate falls
+ * back to the capability probe when the sheet opens before usage loaded.
+ */
+function aiGates({
+  documentAiAvailable,
+  assistAvailable,
+  contentIndexEnabled,
+  capability,
+  autoRead,
+  doc,
+}: {
+  documentAiAvailable: boolean;
+  assistAvailable?: boolean;
+  contentIndexEnabled?: boolean;
+  capability: ReturnType<typeof useDocumentAiCapability>["data"];
+  autoRead: ReturnType<typeof useDocumentsAutoAiRead>["data"];
+  doc: DocumentDetail["doc"];
+}) {
+  const aiEnabled =
+    documentAiAvailable && (assistAvailable ?? capability?.available ?? false);
+  const indexEnabled =
+    documentAiAvailable &&
+    (contentIndexEnabled ?? capability?.available ?? false);
+  const autoReadEnabled = autoRead?.documentsAutoAiRead ?? false;
+  const aiMode: DocumentAiMode =
+    capability?.mode === "text" ? "text" : "vision";
+  const aiTarget: DocumentAiTarget | null = doc
+    ? {
+        documentId: doc.id,
+        mimeType: doc.mimeType,
+        filename: doc.filename,
+        servingClass: doc.servingClass,
+      }
+    : null;
+
+  return { aiEnabled, indexEnabled, autoReadEnabled, aiMode, aiTarget };
+}
+
+type AppliedFields = { title: boolean; kind: boolean; date: boolean };
+
+/**
+ * Review-first apply: the title lands in the EDITABLE field (the user still
+ * saves it via blur/Enter, the existing commit path); type and date each
+ * commit that single field on an explicit tap. Never automatic.
+ */
+function useSuggestionApply({
+  suggestion,
+  setAppliedFields,
+  detail,
+}: {
+  suggestion: DocumentSuggestionDto | null;
+  setAppliedFields: (update: (prev: AppliedFields) => AppliedFields) => void;
+  detail: DocumentDetail;
+}) {
+  const { t } = useTranslations();
+  const calendarDate = useCalendarDate();
+  const { patch, setTitleDraft, setEditingTitle } = detail;
+  const applyTitle = () => {
+    if (!suggestion?.title) return;
+    setTitleDraft(suggestion.title);
+    setEditingTitle(true);
+    setAppliedFields((prev) => ({ ...prev, title: true }));
+  };
+  const applyKind = () => {
+    if (!suggestion?.kind) return;
+    patch.mutate({ kind: suggestion.kind });
+    setAppliedFields((prev) => ({ ...prev, kind: true }));
+  };
+  const applyDate = () => {
+    if (!suggestion?.documentDate) return;
+    patch.mutate({ documentDate: suggestion.documentDate });
+    setAppliedFields((prev) => ({ ...prev, date: true }));
+  };
+
+  const suggestionKindLabel = suggestion?.kind
+    ? t(`documents.kind.${suggestion.kind}`)
+    : null;
+  const suggestionDateLabel = suggestion?.documentDate
+    ? calendarDate(suggestion.documentDate)
+    : null;
+
+  return {
+    applyTitle,
+    applyKind,
+    applyDate,
+    suggestionKindLabel,
+    suggestionDateLabel,
+  };
+}
diff --git a/src/components/documents/detail/use-document-detail.ts b/src/components/documents/detail/use-document-detail.ts
new file mode 100644
index 000000000..5271f7b08
--- /dev/null
+++ b/src/components/documents/detail/use-document-detail.ts
@@ -0,0 +1,317 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { useIllnessEpisodes } from "@/components/illness/use-illness";
+import { useAuth } from "@/hooks/use-auth";
+import { useFencedObjectUrl } from "@/hooks/use-fenced-object-url";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import {
+  apiDelete,
+  ApiError,
+  apiGet,
+  apiPatch,
+  apiPost,
+} from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { invalidateKeys, queryKeys } from "@/lib/query-keys";
+import type {
+  DocumentSourceSystemValue,
+  InboundDocumentDetailDto,
+  InboundDocumentKindValue,
+} from "@/lib/validations/inbound-documents";
+
+import { DOCUMENT_KIND_ICONS } from "../document-kind-meta";
+
+export type PatchInput = {
+  title?: string | null;
+  kind?: InboundDocumentKindValue;
+  documentDate?: string | null;
+  episodeIds?: string[];
+  encounterIds?: string[];
+  vaccinationIds?: string[];
+};
+
+/**
+ * The open document: its read (always fresh on open, since the link pickers
+ * write replace-sets seeded from it), the metadata edits that save on commit,
+ * the soft delete with an Undo that restores it, and the original's bytes for
+ * a document that previews inline.
+ */
+export function useDocumentDetail({
+  documentId,
+  open,
+  onOpenChange,
+}: {
+  documentId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { t } = useTranslations();
+  const detail = useQuery({
+    queryKey: queryKeys.inboundDocument(documentId ?? "none"),
+    enabled: open && documentId !== null,
+    // Always read again on open: the link pickers below write replace-sets
+    // seeded from this copy (see `seedFresh`).
+    staleTime: 0,
+    queryFn: () =>
+      apiGet<InboundDocumentDetailDto>(`/api/documents/inbound/${documentId}`),
+  });
+  const doc = detail.data;
+
+  // The detail's timestamp when the sheet opened on this document. A read
+  // that lands after it is fresh enough to seed the link pickers from; a
+  // cached copy from before the sheet opened is not.
+  const [openedOn, setOpenedOn] = useState<{
+    id: string;
+    seenAt: number;
+  } | null>(null);
+  const openKey = open && documentId !== null ? documentId : null;
+  if (openKey !== (openedOn?.id ?? null)) {
+    setOpenedOn(
+      openKey === null ? null : { id: openKey, seenAt: detail.dataUpdatedAt },
+    );
+  }
+  const linkSeedFresh =
+    openedOn !== null && detail.dataUpdatedAt > openedOn.seenAt;
+
+  // The document → lab-values direction
+  // had no UI link at all: an auto-staged (PENDING) or OCR-confirmed
+  // (APPROVED, see `linkOcrLabsToVaultDocument`) OBSERVATION fact already
+  // ties this document to specific lab rows, but nothing on the sheet said
+  // so. There is no per-value route yet (`/labs` has no `?analyte=`
+  // deep-link — see the labs page's own "no per-value relation" comment),
+  // so this links to the labs list rather than a single biomarker; still a
+  // real jump where there was none before.
+  //
+  // APPROVED only: the link claims values that exist in Labs, and a PENDING
+  // fact is not there yet — it belongs to the review block above, which is
+  // the control that turns it into one.
+  const labFactCount =
+    doc?.facts.filter(
+      (fact) => fact.factType === "OBSERVATION" && fact.status === "APPROVED",
+    ).length ?? 0;
+  const { user } = useAuth();
+  const { canManageDomain } = useRecordCapabilities();
+  const canManageDocuments = canManageDomain("documents");
+  const labsModuleEnabled = user?.modules?.labs !== false;
+
+  const episodes = useIllnessEpisodes(true);
+
+  const [mutationError, setMutationError] = useState<string | null>(null);
+  /** Bumped on a failed write; remounts the link block onto server state. */
+  const [linkResets, setLinkResets] = useState(0);
+  const [shareOpen, setShareOpen] = useState(false);
+  // Delete asks first, like every other way of deleting from the vault.
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  /**
+   * The visit this SESSION filed the document against, if any.
+   *
+   * Kept beside the server state rather than derived from it, because the two
+   * answer different questions: `doc.encounterLinks` says what is filed, this
+   * says what the person just did here — which is what an undo can take back
+   * without touching a filing they made somewhere else.
+   */
+  const [pickedEncounterId, setPickedEncounterId] = useState<string | null>(
+    null,
+  );
+  const [titleDraft, setTitleDraft] = useState("");
+
+  // Reset transient edit state whenever another document opens —
+  // render-phase derived-state adjustment, not an effect.
+  const [lastDocumentId, setLastDocumentId] = useState(documentId);
+  if (lastDocumentId !== documentId) {
+    setLastDocumentId(documentId);
+    setEditingTitle(false);
+    setShareOpen(false);
+    setMutationError(null);
+  }
+
+  const { patch, remove } = useDocumentWrites({
+    documentId,
+    onOpenChange,
+    setMutationError,
+    setLinkResets,
+  });
+
+  const commitTitle = () => {
+    if (!doc) return;
+    setEditingTitle(false);
+    const next = titleDraft.trim();
+    const current = doc.title ?? "";
+    if (next === current) return;
+    patch.mutate({ title: next === "" ? null : next });
+  };
+
+  const toggleEpisode = (episodeId: string) => {
+    if (!doc) return;
+    const current = doc.conditionLinks.map((l) => l.episodeId);
+    const next = current.includes(episodeId)
+      ? current.filter((id) => id !== episodeId)
+      : [...current, episodeId];
+    patch.mutate({ episodeIds: next });
+  };
+
+  /**
+   * File this document against a visit, or clear that filing again.
+   *
+   * A replace-set PATCH like the condition links, so the undo is the same
+   * write with the id removed rather than a second endpoint. Nothing here can
+   * fail the document: an unknown id is refused by the route before anything
+   * is written, and the sheet keeps showing what the server last confirmed.
+   */
+  const setSuggestedEncounter = (encounterId: string | null) => {
+    if (!doc) return;
+    const current = doc.encounterLinks.map((l) => l.encounterId);
+    const next =
+      encounterId === null
+        ? current.filter((id) => id !== pickedEncounterId)
+        : [...new Set([...current, encounterId])];
+    setPickedEncounterId(encounterId);
+    patch.mutate({ encounterIds: next });
+  };
+
+  const title = doc?.title ?? doc?.filename ?? t("documents.card.untitled");
+  // The product names are proper nouns and stay untranslated; only "another
+  // system" is prose.
+  const sourceSystemName = (system: DocumentSourceSystemValue): string =>
+    system === "PAPERLESS"
+      ? "Paperless-ngx"
+      : system === "PAPRA"
+        ? "Papra"
+        : t("documents.detail.sourceOther");
+  const Icon = doc ? DOCUMENT_KIND_ICONS[doc.kind] : null;
+  // The ONE eager fetch of the original, and only for a document
+  // that is going to render it.
+  //
+  // A `<iframe src="/api/…">` carries no record-session assertion, so the
+  // fence refuses it once the session has been inside a shared record; the
+  // bytes therefore come through the app transport as an object URL. The
+  // narrow path is the point: a non-inline document (a large scan, a
+  // download-only format) fetched nothing until somebody clicked, and it must
+  // stay that way — this used to fetch for every document on open, twice.
+  const { url: inlineSrc, failed: inlineFailed } = useFencedObjectUrl(
+    doc && doc.servingClass === "inline"
+      ? `/api/documents/inbound/${doc.id}/original`
+      : null,
+  );
+
+  return {
+    detail,
+    doc,
+    linkSeedFresh,
+    labFactCount,
+    canManageDocuments,
+    labsModuleEnabled,
+    episodes,
+    mutationError,
+    linkResets,
+    shareOpen,
+    setShareOpen,
+    confirmDeleteOpen,
+    setConfirmDeleteOpen,
+    editingTitle,
+    setEditingTitle,
+    titleDraft,
+    setTitleDraft,
+    pickedEncounterId,
+    patch,
+    remove,
+    commitTitle,
+    toggleEpisode,
+    setSuggestedEncounter,
+    title,
+    sourceSystemName,
+    Icon,
+    inlineSrc,
+    inlineFailed,
+  };
+}
+
+export type DocumentDetail = ReturnType<typeof useDocumentDetail>;
+
+/**
+ * The writes from the sheet: the replace-set PATCH (a link written here also
+ * refreshes the visit's and the dose's own views), and the soft delete whose
+ * toast carries an Undo; a refused restore names why (`purged`,
+ * `duplicateExists`).
+ */
+function useDocumentWrites({
+  documentId,
+  onOpenChange,
+  setMutationError,
+  setLinkResets,
+}: {
+  documentId: string | null;
+  onOpenChange: (open: boolean) => void;
+  setMutationError: (message: string | null) => void;
+  setLinkResets: (update: (n: number) => number) => void;
+}) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const patch = useMutation({
+    mutationFn: (input: PatchInput) =>
+      apiPatch<InboundDocumentDetailDto>(
+        `/api/documents/inbound/${documentId}`,
+        input,
+      ),
+    onSuccess: (_data, input) => {
+      setMutationError(null);
+      // A link written from this side changes what the visit's and the
+      // dose's own views list, so their reads refresh with the vault's.
+      void invalidateKeys(queryClient, [
+        queryKeys.documents(),
+        ...(input.encounterIds !== undefined ? [queryKeys.encounters()] : []),
+        ...(input.vaccinationIds !== undefined
+          ? [queryKeys.vaccinations()]
+          : []),
+      ]);
+    },
+    onError: () => {
+      setMutationError(t("documents.detail.saveError"));
+      setLinkResets((n) => n + 1);
+    },
+  });
+
+  const restore = useMutation({
+    mutationFn: (id: string) =>
+      apiPost(`/api/documents/inbound/${id}/restore`, {}),
+    onSuccess: () => {
+      void invalidateKeys(queryClient, [queryKeys.documents()]);
+    },
+    onError: (error) => {
+      const reason =
+        error instanceof ApiError && typeof error.meta?.reason === "string"
+          ? error.meta.reason
+          : "";
+      if (reason === "purged") {
+        showErrorToast(t("documents.error.purged"), { cause: error });
+      } else if (reason === "duplicateExists") {
+        showErrorToast(t("documents.error.duplicateExists"), { cause: error });
+      } else {
+        showErrorToast(t("documents.toast.restoreFailed"), { cause: error });
+      }
+    },
+  });
+
+  const remove = useMutation({
+    mutationFn: (id: string) => apiDelete(`/api/documents/inbound/${id}`),
+    onSuccess: (_data, id) => {
+      onOpenChange(false);
+      void invalidateKeys(queryClient, [queryKeys.documents()]);
+      toast.success(t("documents.toast.deleted"), {
+        action: {
+          label: t("common.undo"),
+          onClick: () => restore.mutate(id),
+        },
+      });
+    },
+    onError: () => setMutationError(t("documents.detail.deleteError")),
+  });
+
+  return { patch, remove };
+}
diff --git a/src/components/documents/document-detail-sheet.tsx b/src/components/documents/document-detail-sheet.tsx
index f5cc91541..ce9e69966 100644
--- a/src/components/documents/document-detail-sheet.tsx
+++ b/src/components/documents/document-detail-sheet.tsx
@@ -16,356 +16,34 @@
  * copy. A Share action in the footer opens the clinician share-link create
  * flow (shared `ShareLinkCreateForm`) with this document pre-attached.
  */
-import { useCalendarDate } from "@/hooks/use-calendar-date";
-import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  ArrowRight,
-  Check,
-  Download,
-  ExternalLink,
-  FlaskConical,
-  Pencil,
-  Plus,
-  Share2,
-  Sparkles,
-  Trash2,
-  X,
-} from "lucide-react";
-import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { showErrorToast } from "@/lib/errors/error-toast";
+import { X } from "lucide-react";
 
-import { useIllnessEpisodes } from "@/components/illness/use-illness";
-import { useAuth } from "@/hooks/use-auth";
+import { DocumentReadingConsentPrompt } from "@/components/ai/document-reading-consent-prompt";
+import { RelatedRecordsBlock } from "@/components/links/related-records";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-button";
-import { DateField } from "@/components/ui/date-field";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  apiDelete,
-  ApiError,
-  apiGet,
-  apiPatch,
-  apiPost,
-} from "@/lib/api/api-fetch";
+import { VaccinationDocumentSuggestion } from "@/components/vaccinations/vaccination-document-suggestion";
+import { formatBytes } from "@/lib/format/bytes";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
-import { useAiCapability } from "@/hooks/use-ai-capability";
-import { DocumentReadingConsentPrompt } from "@/components/ai/document-reading-consent-prompt";
-import { useCoachLaunch } from "@/lib/insights/coach-launch-context";
-import { invalidateKeys, queryKeys } from "@/lib/query-keys";
+import type { RelatedLink } from "@/lib/links/related";
+
 import {
-  createFencedBlobLoader,
-  useFencedObjectUrl,
-} from "@/hooks/use-fenced-object-url";
-import { cn } from "@/lib/utils";
-import type {
-  DocumentSourceSystemValue,
-  DocumentSuggestionDto,
-  DocumentSummaryMode,
-  InboundDocumentDetailDto,
-  InboundDocumentKindValue,
-} from "@/lib/validations/inbound-documents";
-import { INBOUND_DOCUMENT_KINDS } from "@/lib/documents/inbound-constants";
+  DocumentDetailFields,
+  DocumentDetailFooter,
+  DocumentDetailMeta,
+} from "./detail/detail-sections";
+import { DocumentDownloadButton, InlinePreview } from "./detail/original-file";
+import { useDocumentDetail } from "./detail/use-document-detail";
+import { useDocumentDetailAi } from "./detail/use-document-detail-ai";
 import { DocumentAiSection } from "./document-ai-section";
 import { DocumentEncounterSuggestion } from "./document-encounter-suggestion";
-import { DocumentRecordLinks } from "./document-record-links";
-import { RelatedRecordsBlock } from "@/components/links/related-records";
-import type { RelatedLink } from "@/lib/links/related";
 import { DocumentFactsSection } from "./document-facts-review";
-import { VaccinationDocumentSuggestion } from "@/components/vaccinations/vaccination-document-suggestion";
-import { DocumentSummaryBlock } from "./document-summary-block";
-import type { DocumentAiTarget } from "./document-ai-transport";
+import { DocumentRecordLinks } from "./document-record-links";
 import { DocumentShareSheet } from "./document-share-sheet";
-import { DOCUMENT_KIND_ICONS } from "./document-kind-meta";
-import { useIndexDocument } from "./use-content-index";
-import {
-  useDocumentAiCapability,
-  useDocumentAiErrorText,
-  useDocumentsAutoAiRead,
-  useDocumentSummary,
-  useSuggestDetails,
-} from "./use-document-assist";
-import { formatBytes } from "@/lib/format/bytes";
-import { QueryErrorRow } from "@/components/ui/query-error-row";
-
-type PatchInput = {
-  title?: string | null;
-  kind?: InboundDocumentKindValue;
-  documentDate?: string | null;
-  episodeIds?: string[];
-  encounterIds?: string[];
-  vaccinationIds?: string[];
-};
-
-/**
- * Download the stored original.
- *
- * v1.37.0 — a real button, not an anchor wearing `aria-disabled`.
- *
- * Two things were wrong with the anchor. `aria-disabled` tells a screen reader
- * the control is unavailable and stops nothing: `href="#"` is still activated
- * by a click and by Enter, so a person got a jump to the top of the page
- * instead of a file. And it ignored the failure flag entirely, so a document
- * whose original could not be fetched left a control that looked fine and
- * silently did nothing, for good.
- *
- * It also fetches at CLICK time unless the bytes are already in hand. The
- * sheet loads the original eagerly only for documents it is going to render
- * inline; for everything else — a large scan, a download-only format — nothing
- * is fetched or decrypted until somebody asks for it, which is what the plain
- * `href` used to cost and what the first fix accidentally gave up.
- */
-function DocumentDownloadButton({
-  documentId,
-  filename,
-  readyUrl,
-  unavailable,
-  slot,
-  ...buttonProps
-}: {
-  documentId: string;
-  filename: string | null;
-  /** Already-fetched bytes to reuse (the inline preview's), or null. */
-  readyUrl: string | null;
-  /** A prior fetch of these bytes failed for good. */
-  unavailable: boolean;
-  slot: string;
-} & React.ComponentProps<typeof Button>) {
-  const { t } = useTranslations();
-  const [pending, setPending] = useState(false);
-  const [failed, setFailed] = useState(false);
-  const loaderRef = useRef<ReturnType<typeof createFencedBlobLoader> | null>(
-    null,
-  );
-
-  useEffect(() => () => loaderRef.current?.dispose(), []);
-
-  const save = (url: string) => {
-    const anchor = document.createElement("a");
-    anchor.href = url;
-    anchor.download = filename ?? "document";
-    anchor.click();
-  };
-
-  const onClick = async () => {
-    if (readyUrl) {
-      save(readyUrl);
-      return;
-    }
-    setPending(true);
-    setFailed(false);
-    // One loader for the lifetime of the button: loading again revokes the
-    // previous object URL, and unmounting revokes the live one. Without that a
-    // decrypted health document stays in the tab's memory until it closes.
-    loaderRef.current ??= createFencedBlobLoader();
-    const result = await loaderRef.current.load(
-      `/api/documents/inbound/${documentId}/original`,
-    );
-    setPending(false);
-    if (result.kind === "loaded") save(result.url);
-    else if (result.kind === "failed") setFailed(true);
-  };
-
-  const blocked = unavailable || failed;
-
-  return (
-    <Button
-      {...buttonProps}
-      data-slot={slot}
-      disabled={blocked || pending}
-      aria-label={t("documents.detail.download")}
-      title={blocked ? t("documents.detail.loadError") : undefined}
-      onClick={() => void onClick()}
-    >
-      <Download className="size-4" aria-hidden />
-      <span className="hidden sm:inline">
-        {blocked
-          ? t("documents.detail.loadError")
-          : t("documents.detail.download")}
-      </span>
-    </Button>
-  );
-}
-
-/**
- * Open the stored original in a new browser tab, for the types the browser
- * renders itself (the inline serving class: PDF, JPEG, PNG, WebP, GIF), so a
- * long report gets the browser's own zoom and search.
- *
- * It opens the object URL the sheet already holds rather than the route: a
- * plain navigation carries no record-session assertion, so the fence would
- * refuse it once the session has been inside a shared record. The bytes are
- * already in hand, so the tab opens inside the click and no popup blocker
- * steps in. A type outside the inline class never gets the control.
- */
-function DocumentOpenInTabButton({
-  readyUrl,
-  unavailable,
-}: {
-  readyUrl: string | null;
-  unavailable: boolean;
-}) {
-  const { t } = useTranslations();
-  return (
-    <Button
-      variant="outline"
-      data-slot="document-open-in-tab"
-      disabled={readyUrl === null || unavailable}
-      aria-label={t("documents.detail.openInNewTab")}
-      onClick={() => {
-        if (readyUrl) window.open(readyUrl, "_blank", "noopener");
-      }}
-    >
-      <ExternalLink className="size-4" aria-hidden />
-      <span className="hidden sm:inline">
-        {t("documents.detail.openInNewTab")}
-      </span>
-    </Button>
-  );
-}
-
-/** Inline preview for Class A documents; skeleton until the blob paints. */
-function InlinePreview({
-  src,
-  failed,
-  mimeType,
-  title,
-}: {
-  /**
-   * v1.37.0 — the object URL, fetched ONCE by the sheet and handed down.
-   *
-   * The bytes come through the app transport because it carries the
-   * record-session assertion and a browser-issued `src="/api/…"` cannot. What
-   * changed since: this component used to fetch them itself while the sheet
-   * fetched the SAME original again for the download link, so opening a
-   * document decrypted and held two copies of it — and a large scan is a large
-   * copy. One loader now, lifted to the sheet.
-   */
-  src: string | null;
-  failed: boolean;
-  mimeType: string;
-  title: string;
-}) {
-  const [loaded, setLoaded] = useState(false);
-  const isPdf = mimeType === "application/pdf";
-  // Chromium's PDF viewer grabs focus while it initialises — BEFORE the
-  // frame's `load` event — stranding keyboard events inside the embedded
-  // document, so Escape stops closing the sheet the moment a PDF preview
-  // opens. While the guard window is open (armed at mount, extended at
-  // load, ended early by a deliberate pointer interaction with the
-  // preview), any focus landing on the frame bounces straight back to the
-  // dialog container; a user who clicks into the PDF is left alone.
-  const frameRef = useRef<HTMLIFrameElement | null>(null);
-  const stealGuardUntil = useRef(0);
-  const reclaimFocus = (frame: HTMLIFrameElement) => {
-    if (
-      Date.now() < stealGuardUntil.current &&
-      document.activeElement === frame
-    ) {
-      frame.closest<HTMLElement>('[role="dialog"]')?.focus();
-    }
-  };
-  useEffect(() => {
-    // Arm at mount, then run a frame-by-frame sweep for the steal variants
-    // that never dispatch a focus event on the frame element.
-    // Self-terminates with the guard.
-    stealGuardUntil.current = Date.now() + 3_000;
-    let raf = 0;
-    const sweep = () => {
-      const frame = frameRef.current;
-      if (!frame || Date.now() >= stealGuardUntil.current) return;
-      if (document.activeElement === frame) {
-        frame.closest<HTMLElement>('[role="dialog"]')?.focus();
-      }
-      raf = requestAnimationFrame(sweep);
-    };
-    raf = requestAnimationFrame(sweep);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-
-  return (
-    <div className="relative max-h-[55vh] overflow-auto overscroll-contain rounded-lg">
-      {failed ? (
-        // The preview could not be fetched — refused, offline, or still
-        // rendering server-side. A permanent skeleton would read as "loading
-        // forever"; the sheet's own metadata and the download control below
-        // still work.
-        <p
-          data-slot="document-preview-unavailable"
-          className="text-muted-foreground py-8 text-center text-sm"
-        >
-          {title}
-        </p>
-      ) : !loaded || src === null ? (
-        <Skeleton
-          className={cn("w-full rounded-lg", isPdf ? "h-[55vh]" : "h-64")}
-        />
-      ) : null}
-      {src === null || failed ? null : isPdf ? (
-        // No `sandbox` attribute by design: Chromium force-downloads PDFs
-        // in sandboxed frames instead of rendering them. The serve
-        // response itself carries `default-src 'none'` +
-        // `frame-ancestors 'self'` + true Content-Type + nosniff, and the
-        // upload policy denies every format whose inline render could
-        // execute script.
-        <iframe
-          ref={frameRef}
-          src={src}
-          title={title}
-          onLoad={(event) => {
-            setLoaded(true);
-            // The viewer may still initialise (and steal focus) after
-            // `load` — keep the guard open a little longer.
-            stealGuardUntil.current = Math.max(
-              stealGuardUntil.current,
-              Date.now() + 2_000,
-            );
-            reclaimFocus(event.currentTarget);
-          }}
-          onFocus={(event) => reclaimFocus(event.currentTarget)}
-          onPointerDown={() => {
-            // Deliberate interaction with the preview ends the guard.
-            stealGuardUntil.current = 0;
-          }}
-          className={cn(
-            "border-border h-[55vh] w-full rounded-lg border",
-            !loaded && "absolute inset-0 opacity-0",
-          )}
-        />
-      ) : (
-        // Decrypted same-origin blob stream: next/image cannot optimise it
-        // and would only proxy the bytes through a second request.
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={src}
-          alt={title}
-          onLoad={() => setLoaded(true)}
-          className={cn(
-            "mx-auto max-h-[55vh] w-auto max-w-full rounded-lg object-contain",
-            !loaded && "absolute inset-0 opacity-0",
-          )}
-        />
-      )}
-    </div>
-  );
-}
+import { DocumentSummaryBlock } from "./document-summary-block";
 
 export function DocumentDetailSheet({
   documentId,
@@ -386,391 +64,63 @@ export function DocumentDetailSheet({
   /** Whether content indexing is available (from `usage.contentIndex.enabled`). */
   contentIndexEnabled?: boolean;
 }) {
-  const { t, tCount, locale } = useTranslations();
+  const { t, locale } = useTranslations();
   const format = useFormatters();
-  const calendarDate = useCalendarDate();
-  const queryClient = useQueryClient();
-  // v1.28.52 (Documents R3) — the vault "Ask the Coach" action opens the REAL
-  // fenced coach conversation in the shared side drawer (scoped to this
-  // document) instead of a full-page nav; `askCoach(..., doc.id)` carries the
-  // document scope through the launch context.
-  const launch = useCoachLaunch();
-
-  const detail = useQuery({
-    queryKey: queryKeys.inboundDocument(documentId ?? "none"),
-    enabled: open && documentId !== null,
-    // Always read again on open: the link pickers below write replace-sets
-    // seeded from this copy (see `seedFresh`).
-    staleTime: 0,
-    queryFn: () =>
-      apiGet<InboundDocumentDetailDto>(`/api/documents/inbound/${documentId}`),
+  const detail = useDocumentDetail({ documentId, open, onOpenChange });
+  const {
+    detail: detailQuery,
+    doc,
+    linkSeedFresh,
+    canManageDocuments,
+    labsModuleEnabled,
+    mutationError,
+    linkResets,
+    shareOpen,
+    setShareOpen,
+    confirmDeleteOpen,
+    setConfirmDeleteOpen,
+    pickedEncounterId,
+    patch,
+    remove,
+    setSuggestedEncounter,
+    title,
+    Icon,
+    inlineSrc,
+    inlineFailed,
+  } = detail;
+  const {
+    documentAi,
+    coach,
+    capability,
+    suggest,
+    summary,
+    storedSummary,
+    indexDoc,
+    aiErrorText,
+    suggestion,
+    setSuggestion,
+    appliedFields,
+    summaryOutput,
+    setSummaryOutput,
+    aiEnabled,
+    indexEnabled,
+    autoReadEnabled,
+    runSuggest,
+    runSummary,
+    generateStoredSummary,
+    runIndex,
+    applyTitle,
+    applyKind,
+    applyDate,
+    suggestionKindLabel,
+    suggestionDateLabel,
+  } = useDocumentDetailAi({
+    documentId,
+    open,
+    assistAvailable,
+    contentIndexEnabled,
+    detail,
   });
-  const doc = detail.data;
-
-  // The detail's timestamp when the sheet opened on this document. A read
-  // that lands after it is fresh enough to seed the link pickers from; a
-  // cached copy from before the sheet opened is not.
-  const [openedOn, setOpenedOn] = useState<{
-    id: string;
-    seenAt: number;
-  } | null>(null);
-  const openKey = open && documentId !== null ? documentId : null;
-  if (openKey !== (openedOn?.id ?? null)) {
-    setOpenedOn(
-      openKey === null ? null : { id: openKey, seenAt: detail.dataUpdatedAt },
-    );
-  }
-  const linkSeedFresh =
-    openedOn !== null && detail.dataUpdatedAt > openedOn.seenAt;
-
-  // The document → lab-values direction
-  // had no UI link at all: an auto-staged (PENDING) or OCR-confirmed
-  // (APPROVED, see `linkOcrLabsToVaultDocument`) OBSERVATION fact already
-  // ties this document to specific lab rows, but nothing on the sheet said
-  // so. There is no per-value route yet (`/labs` has no `?analyte=`
-  // deep-link — see the labs page's own "no per-value relation" comment),
-  // so this links to the labs list rather than a single biomarker; still a
-  // real jump where there was none before.
-  //
-  // APPROVED only: the link claims values that exist in Labs, and a PENDING
-  // fact is not there yet — it belongs to the review block above, which is
-  // the control that turns it into one.
-  const labFactCount =
-    doc?.facts.filter(
-      (fact) => fact.factType === "OBSERVATION" && fact.status === "APPROVED",
-    ).length ?? 0;
-  const { user } = useAuth();
-  const { canManageDomain } = useRecordCapabilities();
-  const canManageDocuments = canManageDomain("documents");
-  const labsModuleEnabled = user?.modules?.labs !== false;
-
-  const episodes = useIllnessEpisodes(true);
-
-  // AI layer — capability drives the vision/text transport; the mutations run
-  // the review-first assist, the session-only summary, and content indexing.
-  // The affordance itself is gated on `assistAvailable` (from usage); the
-  // probe only resolves the transport mode + the actionable unavailable reason.
-  //
-  // v1.36.x — and neither probe fires inside somebody else's record. The
-  // document reads behind this sheet are delegable; the AI verbs above them are
-  // not, and both of these routes stay on the caller's own authentication. A
-  // delegate would fire two queries that must 403 in order to compute an
-  // affordance every branch below already withholds on `canManageDocuments`.
-  // Reading a document with AI follows the `documentAi` capability on
-  // `/api/auth/me` (the operator's "Reading documents" switch, the provider,
-  // the document-reading consent). Unavailable, the actions are simply not
-  // offered and the probe never fires; a missing consent is asked for in
-  // place instead.
-  const documentAi = useAiCapability("documentAi");
-  const coach = useAiCapability("coach");
-  const capability = useDocumentAiCapability(
-    canManageDocuments && open && documentId !== null && documentAi.available,
-  );
-  // When auto-read is ON, reading happens automatically on upload — the manual
-  // per-document AI action row is redundant and collapses away.
-  const autoRead = useDocumentsAutoAiRead(
-    canManageDocuments && open && documentId !== null,
-  );
-  const suggest = useSuggestDetails();
-  const summary = useDocumentSummary();
-  // Resolves an AI error to final copy — a 429 names the actual wait, derived
-  // from the reset instant the route mirrors into the error meta.
-  const aiErrorText = useDocumentAiErrorText();
-  // Stored generation has an independent mutation state so transient
-  // Summarise/Show text requests cannot change this block's spinner or result.
-  const storedSummary = useDocumentSummary();
-  const indexDoc = useIndexDocument();
-
-  const [mutationError, setMutationError] = useState<string | null>(null);
-  /** Bumped on a failed write; remounts the link block onto server state. */
-  const [linkResets, setLinkResets] = useState(0);
-  const [shareOpen, setShareOpen] = useState(false);
-  // Delete asks first, like every other way of deleting from the vault.
-  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
-  const [editingTitle, setEditingTitle] = useState(false);
-  /**
-   * The visit this SESSION filed the document against, if any.
-   *
-   * Kept beside the server state rather than derived from it, because the two
-   * answer different questions: `doc.encounterLinks` says what is filed, this
-   * says what the person just did here — which is what an undo can take back
-   * without touching a filing they made somewhere else.
-   */
-  const [pickedEncounterId, setPickedEncounterId] = useState<string | null>(
-    null,
-  );
-  const [titleDraft, setTitleDraft] = useState("");
-  const [suggestion, setSuggestion] = useState<DocumentSuggestionDto | null>(
-    null,
-  );
-  const [appliedFields, setAppliedFields] = useState({
-    title: false,
-    kind: false,
-    date: false,
-  });
-  const [summaryOutput, setSummaryOutput] =
-    useState<DocumentSummaryMode | null>(null);
-
-  // Reset transient edit + AI state whenever another document opens —
-  // render-phase derived-state adjustment, not an effect.
-  const [lastDocumentId, setLastDocumentId] = useState(documentId);
-  if (lastDocumentId !== documentId) {
-    setLastDocumentId(documentId);
-    setEditingTitle(false);
-    setShareOpen(false);
-    setMutationError(null);
-    setSuggestion(null);
-    setAppliedFields({ title: false, kind: false, date: false });
-    setSummaryOutput(null);
-  }
-
-  // Clear stale mutation state (a prior document's assist error / summary)
-  // when the sheet switches documents or closes — the mutation stores live
-  // outside render, so they reset in an effect rather than during render.
-  useEffect(() => {
-    suggest.reset();
-    summary.reset();
-    storedSummary.reset();
-    indexDoc.reset();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [documentId]);
-
-  const patch = useMutation({
-    mutationFn: (input: PatchInput) =>
-      apiPatch<InboundDocumentDetailDto>(
-        `/api/documents/inbound/${documentId}`,
-        input,
-      ),
-    onSuccess: (_data, input) => {
-      setMutationError(null);
-      // A link written from this side changes what the visit's and the
-      // dose's own views list, so their reads refresh with the vault's.
-      void invalidateKeys(queryClient, [
-        queryKeys.documents(),
-        ...(input.encounterIds !== undefined ? [queryKeys.encounters()] : []),
-        ...(input.vaccinationIds !== undefined
-          ? [queryKeys.vaccinations()]
-          : []),
-      ]);
-    },
-    onError: () => {
-      setMutationError(t("documents.detail.saveError"));
-      setLinkResets((n) => n + 1);
-    },
-  });
-
-  const restore = useMutation({
-    mutationFn: (id: string) =>
-      apiPost(`/api/documents/inbound/${id}/restore`, {}),
-    onSuccess: () => {
-      void invalidateKeys(queryClient, [queryKeys.documents()]);
-    },
-    onError: (error) => {
-      const reason =
-        error instanceof ApiError && typeof error.meta?.reason === "string"
-          ? error.meta.reason
-          : "";
-      if (reason === "purged") {
-        showErrorToast(t("documents.error.purged"), { cause: error });
-      } else if (reason === "duplicateExists") {
-        showErrorToast(t("documents.error.duplicateExists"), { cause: error });
-      } else {
-        showErrorToast(t("documents.toast.restoreFailed"), { cause: error });
-      }
-    },
-  });
-
-  const remove = useMutation({
-    mutationFn: (id: string) => apiDelete(`/api/documents/inbound/${id}`),
-    onSuccess: (_data, id) => {
-      onOpenChange(false);
-      void invalidateKeys(queryClient, [queryKeys.documents()]);
-      toast.success(t("documents.toast.deleted"), {
-        action: {
-          label: t("common.undo"),
-          onClick: () => restore.mutate(id),
-        },
-      });
-    },
-    onError: () => setMutationError(t("documents.detail.deleteError")),
-  });
-
-  const commitTitle = () => {
-    if (!doc) return;
-    setEditingTitle(false);
-    const next = titleDraft.trim();
-    const current = doc.title ?? "";
-    if (next === current) return;
-    patch.mutate({ title: next === "" ? null : next });
-  };
-
-  const toggleEpisode = (episodeId: string) => {
-    if (!doc) return;
-    const current = doc.conditionLinks.map((l) => l.episodeId);
-    const next = current.includes(episodeId)
-      ? current.filter((id) => id !== episodeId)
-      : [...current, episodeId];
-    patch.mutate({ episodeIds: next });
-  };
-
-  /**
-   * File this document against a visit, or clear that filing again.
-   *
-   * A replace-set PATCH like the condition links, so the undo is the same
-   * write with the id removed rather than a second endpoint. Nothing here can
-   * fail the document: an unknown id is refused by the route before anything
-   * is written, and the sheet keeps showing what the server last confirmed.
-   */
-  const setSuggestedEncounter = (encounterId: string | null) => {
-    if (!doc) return;
-    const current = doc.encounterLinks.map((l) => l.encounterId);
-    const next =
-      encounterId === null
-        ? current.filter((id) => id !== pickedEncounterId)
-        : [...new Set([...current, encounterId])];
-    setPickedEncounterId(encounterId);
-    patch.mutate({ encounterIds: next });
-  };
-
-  // The affordance gate falls back to the capability probe when the sheet is
-  // rendered without the usage-derived props (deep link before usage loads).
-  const aiEnabled =
-    documentAi.available &&
-    (assistAvailable ?? capability.data?.available ?? false);
-  const indexEnabled =
-    documentAi.available &&
-    (contentIndexEnabled ?? capability.data?.available ?? false);
-  const autoReadEnabled = autoRead.data?.documentsAutoAiRead ?? false;
-  const aiMode = capability.data?.mode === "text" ? "text" : "vision";
-  const aiTarget: DocumentAiTarget | null = doc
-    ? {
-        documentId: doc.id,
-        mimeType: doc.mimeType,
-        filename: doc.filename,
-        servingClass: doc.servingClass,
-      }
-    : null;
-
-  const runSuggest = () => {
-    if (!aiTarget) return;
-    setAppliedFields({ title: false, kind: false, date: false });
-    suggest.mutate(
-      { mode: aiMode, target: aiTarget },
-      { onSuccess: (result) => setSuggestion(result) },
-    );
-  };
-
-  const runSummary = (output: DocumentSummaryMode) => {
-    if (!aiTarget) return;
-    summary.reset();
-    setSummaryOutput(output);
-    summary.mutate({ mode: aiMode, target: aiTarget, output });
-  };
-
-  // Generate or regenerate the STORED summary from the detail block. Only the
-  // stored-summary branch requests replacement; the empty-state action keeps
-  // first-write-wins if another worker or tab finishes while AI is running.
-  const generateStoredSummary = () => {
-    if (!aiTarget || !documentId) return;
-    storedSummary.reset();
-    storedSummary.mutate(
-      {
-        mode: aiMode,
-        target: aiTarget,
-        output: "summary",
-        persist: true,
-        replace: doc?.summary != null,
-      },
-      {
-        onSuccess: (result) => {
-          if ("summary" in result) {
-            if (result.persistence === "withheld") {
-              showErrorToast(result.summary);
-            } else if (result.persistence === "failed") {
-              showErrorToast(t("documents.detail.saveError"));
-            }
-          }
-          void queryClient.invalidateQueries({
-            queryKey: queryKeys.inboundDocument(documentId),
-          });
-        },
-        onError: (error) =>
-          showErrorToast(aiErrorText(error), { cause: error }),
-      },
-    );
-  };
-
-  const runIndex = () => {
-    if (!aiTarget) return;
-    indexDoc.mutate(
-      { mode: aiMode, target: aiTarget },
-      {
-        // A read that continued into lab staging says so — the staged values
-        // are waiting in the review block, not silently in a queue. Staged
-        // facts stay PENDING; confirmation remains the only write into Labs.
-        onSuccess: (result) =>
-          toast.success(
-            result.labFactsStaged > 0
-              ? tCount("documents.ai.readStaged", result.labFactsStaged)
-              : t("documents.ai.readDone"),
-          ),
-        onError: (error) =>
-          showErrorToast(aiErrorText(error), { cause: error }),
-      },
-    );
-  };
-
-  // Review-first apply: the title lands in the EDITABLE field (the user still
-  // saves it via blur/Enter — the existing commit path); type and date each
-  // commit that single field on an explicit tap. Never automatic.
-  const applyTitle = () => {
-    if (!suggestion?.title) return;
-    setTitleDraft(suggestion.title);
-    setEditingTitle(true);
-    setAppliedFields((prev) => ({ ...prev, title: true }));
-  };
-  const applyKind = () => {
-    if (!suggestion?.kind) return;
-    patch.mutate({ kind: suggestion.kind });
-    setAppliedFields((prev) => ({ ...prev, kind: true }));
-  };
-  const applyDate = () => {
-    if (!suggestion?.documentDate) return;
-    patch.mutate({ documentDate: suggestion.documentDate });
-    setAppliedFields((prev) => ({ ...prev, date: true }));
-  };
-
-  const suggestionKindLabel = suggestion?.kind
-    ? t(`documents.kind.${suggestion.kind}`)
-    : null;
-  const suggestionDateLabel = suggestion?.documentDate
-    ? calendarDate(suggestion.documentDate)
-    : null;
-
-  const title = doc?.title ?? doc?.filename ?? t("documents.card.untitled");
-  // The product names are proper nouns and stay untranslated; only "another
-  // system" is prose.
-  const sourceSystemName = (system: DocumentSourceSystemValue): string =>
-    system === "PAPERLESS"
-      ? "Paperless-ngx"
-      : system === "PAPRA"
-        ? "Papra"
-        : t("documents.detail.sourceOther");
-  const Icon = doc ? DOCUMENT_KIND_ICONS[doc.kind] : null;
-  // v1.37.0 — the ONE eager fetch of the original, and only for a document
-  // that is going to render it.
-  //
-  // A `<iframe src="/api/…">` carries no record-session assertion, so the
-  // fence refuses it once the session has been inside a shared record; the
-  // bytes therefore come through the app transport as an object URL. The
-  // narrow path is the point: a non-inline document (a large scan, a
-  // download-only format) fetched nothing until somebody clicked, and it must
-  // stay that way — this used to fetch for every document on open, twice.
-  const { url: inlineSrc, failed: inlineFailed } = useFencedObjectUrl(
-    doc && doc.servingClass === "inline"
-      ? `/api/documents/inbound/${doc.id}/original`
-      : null,
-  );
 
   return (
     <>
@@ -801,92 +151,17 @@ export function DocumentDetailSheet({
         }
         footer={
           doc ? (
-            // Delete sits bottom-LEFT, quieted to a text button: the
-            // bottom-right slot reads as the primary/confirm action, and a
-            // destructive control there is a footgun. Share, open in a new tab and
-            // Download, the safe, expected actions, keep the trailing edge. On phones their
-            // labels collapse to icon-only (aria-labelled) so three controls
-            // never overflow the sheet at 360 px; the labels return at `sm+`.
-            <div className="flex w-full items-center justify-between gap-2">
-              {/* v1.36.x — deleting, sharing and re-filing a document are the
-                  owner's alone. Inside somebody else's record the sheet reads
-                  the document and offers the download, and the leading slot
-                  simply has nothing in it. */}
-              {canManageDocuments ? (
-                <Button
-                  variant="ghost"
-                  className="text-destructive hover:text-destructive hover:bg-destructive/10"
-                  onClick={() => setConfirmDeleteOpen(true)}
-                  disabled={remove.isPending}
-                  data-slot="document-detail-delete"
-                >
-                  <Trash2 className="size-4" aria-hidden />
-                  {t("documents.detail.delete")}
-                </Button>
-              ) : (
-                <span />
-              )}
-              <div className="flex items-center gap-2">
-                {/* v1.36.x — `launch` is the one entry point that rendered
-                    without asking whether a drawer exists to open. It is null
-                    inside somebody else's record (the shell mounts no drawer
-                    there), and `/documents` is a shared-record destination, so
-                    this is the Coach button a delegate actually meets. */}
-                {aiEnabled && coach.available && launch ? (
-                  // v1.28.52 (Documents R3) — "Ask the Coach" opens the REAL
-                  // coach conversation scoped to this document in the SIDE
-                  // DRAWER (the maximize control there expands it to the full
-                  // `/coach` page). Every doc turn still runs on the hardened
-                  // fenced document endpoint (never the coach tool route) — only
-                  // WHERE the conversation renders changed, not the send path.
-                  // Close the detail sheet so the drawer owns the surface.
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      onOpenChange(false);
-                      launch.askCoach(null, undefined, false, doc.id);
-                    }}
-                    data-slot="document-chat-open"
-                  >
-                    <Sparkles className="size-4" aria-hidden />
-                    <span className="sr-only sm:not-sr-only">
-                      {t("documents.chat.openButton")}
-                    </span>
-                  </Button>
-                ) : null}
-                {canManageDocuments && (
-                  <Button
-                    variant="outline"
-                    onClick={() => setShareOpen(true)}
-                    data-slot="document-share"
-                    aria-label={t("documents.detail.share")}
-                  >
-                    <Share2 className="size-4" aria-hidden />
-                    <span className="hidden sm:inline">
-                      {t("documents.detail.share")}
-                    </span>
-                  </Button>
-                )}
-                {doc.servingClass === "inline" ? (
-                  <DocumentOpenInTabButton
-                    readyUrl={inlineSrc}
-                    unavailable={inlineFailed}
-                  />
-                ) : null}
-                <DocumentDownloadButton
-                  documentId={doc.id}
-                  filename={doc.filename}
-                  readyUrl={inlineSrc}
-                  unavailable={inlineFailed}
-                  variant="outline"
-                  slot="document-download"
-                />
-              </div>
-            </div>
+            <DocumentDetailFooter
+              doc={doc}
+              detail={detail}
+              aiEnabled={aiEnabled}
+              coachAvailable={coach.available}
+              onOpenChange={onOpenChange}
+            />
           ) : undefined
         }
       >
-        {detail.isPending && open ? (
+        {detailQuery.isPending && open ? (
           <div className="space-y-3" data-slot="document-detail-loading">
             <Skeleton className="h-48 w-full rounded-lg" />
             <Skeleton className="h-9 w-2/3" />
@@ -894,13 +169,13 @@ export function DocumentDetailSheet({
           </div>
         ) : null}
 
-        {detail.isError ? (
+        {detailQuery.isError ? (
           <QueryErrorRow
             inset
-            error={detail.error}
+            error={detailQuery.error}
             slot="document-detail-error"
             message={t("documents.detail.loadError")}
-            onRetry={() => void detail.refetch()}
+            onRetry={() => void detailQuery.refetch()}
           />
         ) : null}
 
@@ -1010,170 +285,7 @@ export function DocumentDetailSheet({
             ) : null}
 
             <div className="space-y-4">
-              <div className="space-y-1.5">
-                <Label htmlFor="document-title-input">
-                  {t("documents.detail.titleLabel")}
-                </Label>
-                {editingTitle ? (
-                  <Input
-                    id="document-title-input"
-                    autoFocus
-                    value={titleDraft}
-                    onChange={(e) => setTitleDraft(e.target.value)}
-                    onBlur={commitTitle}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") commitTitle();
-                      if (e.key === "Escape") setEditingTitle(false);
-                    }}
-                    maxLength={200}
-                    placeholder={t("documents.detail.titlePlaceholder")}
-                  />
-                ) : !canManageDocuments ? (
-                  <p
-                    id="document-title-input"
-                    className={cn(
-                      "min-h-10 px-3 py-2 text-sm",
-                      doc.title === null && "text-muted-foreground",
-                    )}
-                  >
-                    {doc.title ?? t("documents.detail.titlePlaceholder")}
-                  </p>
-                ) : (
-                  <button
-                    type="button"
-                    id="document-title-input"
-                    onClick={() => {
-                      setTitleDraft(doc.title ?? "");
-                      setEditingTitle(true);
-                    }}
-                    className="border-input hover:bg-muted/50 focus-visible:border-input-focus flex min-h-10 w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm focus-visible:outline-none"
-                  >
-                    <span
-                      className={cn(
-                        "truncate",
-                        doc.title === null && "text-muted-foreground",
-                      )}
-                    >
-                      {doc.title ?? t("documents.detail.titlePlaceholder")}
-                    </span>
-                    <Pencil
-                      className="text-muted-foreground size-3.5 shrink-0"
-                      aria-hidden
-                    />
-                  </button>
-                )}
-              </div>
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-1.5">
-                  <Label htmlFor="document-kind-select">
-                    {t("documents.detail.kindLabel")}
-                  </Label>
-                  {/* Read-only rather than absent: the value IS the content
-                      a delegate came to read, and a form field that shows it
-                      without accepting a change is the honest rendering. */}
-                  <Select
-                    value={doc.kind}
-                    disabled={!canManageDocuments}
-                    onValueChange={(value) =>
-                      patch.mutate({ kind: value as InboundDocumentKindValue })
-                    }
-                  >
-                    <SelectTrigger id="document-kind-select" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {INBOUND_DOCUMENT_KINDS.map((kind) => (
-                        <SelectItem key={kind} value={kind}>
-                          {t(`documents.kind.${kind}`)}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1.5">
-                  <Label htmlFor="document-date-field">
-                    {t("documents.detail.dateLabel")}
-                  </Label>
-                  <DateField
-                    id="document-date-field"
-                    disabled={!canManageDocuments}
-                    value={doc.documentDate ?? ""}
-                    onChange={(value) =>
-                      patch.mutate({
-                        documentDate: value === "" ? null : value,
-                      })
-                    }
-                    aria-label={t("documents.detail.dateLabel")}
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <p className="text-sm leading-none font-medium">
-                  {t("documents.detail.conditionsLabel")}
-                </p>
-                <div className="flex flex-wrap items-center gap-1.5">
-                  {doc.conditionLinks.map((link) => (
-                    <Link
-                      key={link.episodeId}
-                      href={`/illness/${link.episodeId}`}
-                      className="bg-muted text-foreground hover:bg-muted/70 focus-visible:ring-ring/50 inline-flex max-w-48 items-center rounded-full px-2.5 py-1 text-xs focus-visible:ring-[3px] focus-visible:outline-none"
-                    >
-                      <span className="truncate">{link.name}</span>
-                    </Link>
-                  ))}
-                  {doc.conditionLinks.length === 0 ? (
-                    <span className="text-muted-foreground text-xs">
-                      {t("documents.detail.noConditions")}
-                    </span>
-                  ) : null}
-                  {canManageDocuments && (episodes.data?.length ?? 0) > 0 ? (
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 rounded-full px-2.5 text-xs"
-                        >
-                          <Plus className="size-3" aria-hidden />
-                          {t("documents.detail.linkCondition")}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent align="start" className="w-64 p-2">
-                        <ul className="max-h-56 space-y-0.5 overflow-y-auto overscroll-contain">
-                          {episodes.data?.map((episode) => {
-                            const linked = doc.conditionLinks.some(
-                              (l) => l.episodeId === episode.id,
-                            );
-                            return (
-                              <li key={episode.id}>
-                                <button
-                                  type="button"
-                                  onClick={() => toggleEpisode(episode.id)}
-                                  className="hover:bg-muted focus-visible:ring-ring/50 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm focus-visible:ring-[3px] focus-visible:outline-none"
-                                  aria-pressed={linked}
-                                >
-                                  <Check
-                                    className={cn(
-                                      "size-4 shrink-0",
-                                      linked ? "opacity-100" : "opacity-0",
-                                    )}
-                                    aria-hidden
-                                  />
-                                  <span className="truncate">
-                                    {episode.label}
-                                  </span>
-                                </button>
-                              </li>
-                            );
-                          })}
-                        </ul>
-                      </PopoverContent>
-                    </Popover>
-                  ) : null}
-                </div>
-              </div>
+              <DocumentDetailFields doc={doc} detail={detail} />
 
               <DocumentEncounterSuggestion
                 anchor={doc.reportDate ?? doc.documentDate}
@@ -1204,12 +316,12 @@ export function DocumentDetailSheet({
                 doc={doc}
                 canManage={canManageDocuments}
                 seedFresh={linkSeedFresh}
-                seedError={!linkSeedFresh && detail.isRefetchError}
-                onRetrySeed={() => void detail.refetch()}
+                seedError={!linkSeedFresh && detailQuery.isRefetchError}
+                onRetrySeed={() => void detailQuery.refetch()}
                 onChange={(part) => patch.mutate(part)}
               />
 
-              {/* v1.43 — the lab results read from this page and the
+              {/* The lab results read from this page and the
                   medications it belongs to. Conditions, visits and doses
                   have their own blocks above. */}
               <RelatedRecordsBlock
@@ -1229,51 +341,7 @@ export function DocumentDetailSheet({
                 labsModuleEnabled={labsModuleEnabled}
               />
 
-              {labsModuleEnabled && labFactCount > 0 ? (
-                <Link
-                  href="/labs"
-                  data-slot="document-detail-lab-values-link"
-                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1.5 self-start rounded-md text-sm transition-colors focus-visible:ring-[3px] focus-visible:outline-none"
-                >
-                  <FlaskConical className="size-4" aria-hidden="true" />
-                  {t("documents.detail.labValuesLink", { count: labFactCount })}
-                  <ArrowRight className="size-3.5" aria-hidden="true" />
-                </Link>
-              ) : null}
-
-              <p className="text-muted-foreground text-xs">
-                {t("documents.detail.uploadedMeta", {
-                  date: format.date(doc.createdAt),
-                  size: formatBytes(doc.byteSize, locale),
-                })}
-              </p>
-              {doc.filename ? (
-                <p
-                  className="text-muted-foreground truncate text-xs"
-                  title={doc.filename}
-                >
-                  {doc.filename}
-                </p>
-              ) : null}
-
-              {/* Where an imported document came from (#1038). Meta, so
-                  muted like the line above; the id is what the person looks
-                  up in the other system. */}
-              {doc.sourceSystem ? (
-                <p
-                  className="text-muted-foreground text-xs break-all"
-                  data-slot="document-detail-provenance"
-                >
-                  {doc.sourceId
-                    ? t("documents.detail.importedFromWithId", {
-                        system: sourceSystemName(doc.sourceSystem),
-                        id: doc.sourceId,
-                      })
-                    : t("documents.detail.importedFrom", {
-                        system: sourceSystemName(doc.sourceSystem),
-                      })}
-                </p>
-              ) : null}
+              <DocumentDetailMeta doc={doc} detail={detail} />
             </div>
           </div>
         ) : null}
diff --git a/src/components/documents/documents-view.tsx b/src/components/documents/documents-view.tsx
index 12b6614ee..da5c67a9d 100644
--- a/src/components/documents/documents-view.tsx
+++ b/src/components/documents/documents-view.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+"use client";
+
 /**
  * The Dokumente vault — one wide, calm, filing-cabinet-fast surface.
  *
@@ -14,260 +16,54 @@
  * module bounces home. Every `/api/documents/inbound/*` route re-enforces
  * the gate server-side — this is a UX redirect, not the security boundary.
  */
-import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
-import {
-  useInfiniteQuery,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
-import {
-  FolderOpen,
-  Loader2,
-  SearchX,
-  Upload,
-  UploadCloud,
-  Wrench,
-} from "lucide-react";
-import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-import { showErrorToast } from "@/lib/errors/error-toast";
+import { useEffect } from "react";
+import { FolderOpen, Loader2, SearchX, Upload } from "lucide-react";
 
-import { useIllnessEpisodes } from "@/components/illness/use-illness";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-button";
 import { EmptyState } from "@/components/ui/empty-state";
 import { PageHeader } from "@/components/ui/page-header";
+import { PullToRefreshIndicator } from "@/components/ui/pull-to-refresh-indicator";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useAuth } from "@/hooks/use-auth";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useTranslations } from "@/lib/i18n/context";
 import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
-import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
-import { useUrlFilterSync } from "@/hooks/use-url-filter-sync";
-import {
-  currentUrlSearch,
-  urlStateHistory,
-  useUrlSearch,
-  writeUrlState,
-} from "@/lib/url-state";
-import { PullToRefreshIndicator } from "@/components/ui/pull-to-refresh-indicator";
-import { apiGet, apiPost } from "@/lib/api/api-fetch";
-import {
-  bodySiteText,
-  encounterKindText,
-} from "@/components/encounters/encounter-labels";
-import { useEncounters } from "@/hooks/use-encounters";
-import { useFormatters, useTranslations } from "@/lib/i18n/context";
-import type { EncounterKind } from "@/generated/prisma/client";
-import {
-  type CoachCloseIntent,
-  useCoachLaunch,
-} from "@/lib/insights/coach-launch-context";
-import { invalidateKeys, queryKeys } from "@/lib/query-keys";
-import { useDocumentsLayout } from "@/lib/queries/use-documents-layout";
-import type {
-  DocumentBulkAction,
-  DocumentBulkResultDto,
-  DocumentUsageDto,
-  InboundDocumentDetailDto,
-  InboundDocumentDto,
-  InboundDocumentKindValue,
-} from "@/lib/validations/inbound-documents";
-import { DOCUMENT_BULK_MAX_IDS } from "@/lib/documents/inbound-constants";
+
 import { DocumentBulkBar } from "./document-bulk-bar";
 import { DocumentDetailSheet } from "./document-detail-sheet";
+import { DocumentFilterBar } from "./document-filter-bar";
 import { DocumentShareSheet } from "./document-share-sheet";
-import { DocumentFilterBar, type ConditionChip } from "./document-filter-bar";
 import { DocumentTimeline } from "./document-timeline";
 import { UploadZone } from "./upload-zone";
-import { ImportFromSourceButton } from "./sources/import-from-source-button";
-import { useReindexAll } from "./use-content-index";
-import { useDocumentUpload } from "./use-document-upload";
-import { usePageFileDrop } from "./use-page-file-drop";
-import {
-  buildProcedureChoices,
-  buildVaultListApiSearch,
-  countActiveFilters,
-  documentDateKey,
-  expandRangeSelection,
-  hasProcessingDocument,
-  parseVaultSearchParams,
-  type ProcedureFilterChoice,
-  resolveBulkShareDocuments,
-  SHARE_LINK_MAX_DOCUMENTS,
-  vaultFiltersToSearch,
-} from "./vault-utils";
-
-interface ListPage {
-  documents: InboundDocumentDto[];
-  nextCursor: string | null;
-}
-
-// Strict end-of-input: `$` also accepts a trailing newline in JavaScript.
-/**
- * How many visits the bulk bar offers. A menu is a picker, not a history: past
- * the first screenful a person scrolls rather than reads, and filing against a
- * visit older than this belongs on the visit's own sheet.
- */
-const BULK_VISIT_OPTIONS = 12;
-
-const DOCUMENT_QUERY_ID_PATTERN = /^[a-zA-Z0-9_-]{1,40}(?![\s\S])/;
-const DOCUMENT_SELECTION_HISTORY_KEY = "__healthlogPushedDocumentSelection";
-
-export function documentSelectionHistoryState(
-  documentId: string,
-): Record<string, unknown> {
-  // Pass only application state here. Next's patched pushState copies its
-  // private router fields onto this object; copying history.state ourselves
-  // would include `__NA` and make that patch treat this as an internal write,
-  // skipping useSearchParams synchronization.
-  return { [DOCUMENT_SELECTION_HISTORY_KEY]: documentId };
-}
-
-export function documentSelectionHref(
-  pathname: string,
-  currentSearch: string,
-  documentId: string,
-): string | null {
-  if (!DOCUMENT_QUERY_ID_PATTERN.test(documentId)) return null;
-  const next = new URLSearchParams(currentSearch);
-  next.set("doc", documentId);
-  const search = next.toString();
-  return search ? `${pathname}?${search}` : pathname;
-}
-
-export function withoutDocumentSelectionHref(
-  pathname: string,
-  currentSearch: string,
-): string {
-  const next = new URLSearchParams(currentSearch);
-  next.delete("doc");
-  const search = next.toString();
-  return search ? `${pathname}?${search}` : pathname;
-}
+import { countActiveFilters } from "./vault-utils";
+import { useVaultDetail } from "./vault/use-vault-detail";
+import { useVaultFilters } from "./vault/use-vault-filters";
+import { useVaultLibrary } from "./vault/use-vault-library";
+import { useVaultSelection } from "./vault/use-vault-selection";
+import { VaultDropOverlay } from "./vault/vault-drop-overlay";
+import { VaultPageActions } from "./vault/vault-page-actions";
 
 /**
- * How long to wait before checking that `history.back()` actually happened.
- *
- * Long enough for a traversal to commit on a loaded machine, short enough that
- * a reader who closed the sheet does not see the selection linger in the
- * address bar. The window is bounded on the other side too: the effect that
- * arms this cancels it as soon as the sheet re-opens.
+ * The vault page. Its state lives in `./vault/`: the URL filters, the
+ * library (list, usage, uploads, filter choices), the selection and its bulk
+ * actions, and the `?doc=` detail sheet; this component lays them out.
  */
-export const CLOSE_TRAVERSAL_GRACE_MS = 250;
-
-/**
- * The selection this close was meant to consume is still in the address bar.
- *
- * Matched on the id rather than on the presence of `doc`, so a traversal that
- * landed somewhere carrying a DIFFERENT selection is not mistaken for a
- * dropped one and stripped.
- */
-export function documentSelectionSurvivedClose(
-  search: string,
-  documentId: string,
-): boolean {
-  return new URLSearchParams(search).get("doc") === documentId;
-}
-
-export function closeDocumentSelectionHistoryEntry(
-  history: {
-    readonly state: unknown;
-    back: () => void;
-    replaceState: (
-      data: unknown,
-      unused: string,
-      url?: string | URL | null,
-    ) => void;
-  },
-  pathname: string,
-  currentSearch: string,
-  documentId: string,
-): void {
-  const ownsCurrentEntry =
-    history.state !== null &&
-    typeof history.state === "object" &&
-    (history.state as Record<string, unknown>)[
-      DOCUMENT_SELECTION_HISTORY_KEY
-    ] === documentId;
-  if (ownsCurrentEntry) {
-    // Card selection owns the current pushed entry. Returning to its base
-    // consumes it, so the user's next Back reaches the prior distinct page.
-    history.back();
-    return;
-  }
-
-  // A deep link did not create a disposable entry on this page. Keep the user
-  // here and remove only the selection from the current URL.
-  history.replaceState(
-    null,
-    "",
-    withoutDocumentSelectionHref(pathname, currentSearch),
-  );
-}
-
-/**
- * The selection is being KEPT on purpose, as the way back.
- *
- * Maximizing the Coach drawer hands the conversation to `/coach` and carries
- * `?doc=` with it, so browser-Back can reconstruct the sheet. That is the one
- * close-shaped transition that must leave the parameter exactly where it is.
- *
- * Named, and used by both the close and the check that follows it, because
- * those two disagreeing is a bug with no symptom until it has one: the check
- * would strip the return URL a few hundred milliseconds after the close
- * deliberately preserved it, and whether it won that race was a question about
- * how fast the machine navigated.
- */
-export function coachHandoffRetainsSelection(
-  documentId: string,
-  handedOffDocumentId: string | null,
-  closeIntent: CoachCloseIntent | null | undefined,
-): boolean {
-  return handedOffDocumentId === documentId && closeIntent === "navigate";
-}
-
-export function closeDocumentSelectionAfterCoachHandoff(
-  history: Parameters<typeof closeDocumentSelectionHistoryEntry>[0],
-  pathname: string,
-  currentSearch: string,
-  documentId: string,
-  handedOffDocumentId: string | null,
-  closeIntent: CoachCloseIntent | null | undefined,
-): string | null {
-  if (
-    coachHandoffRetainsSelection(documentId, handedOffDocumentId, closeIntent)
-  ) {
-    return handedOffDocumentId;
-  }
-
-  closeDocumentSelectionHistoryEntry(
-    history,
-    pathname,
-    currentSearch,
-    documentId,
-  );
-  return handedOffDocumentId === documentId ? null : handedOffDocumentId;
-}
-
 export function DocumentsView() {
   const { t } = useTranslations();
-  const format = useFormatters();
   const { user, isLoading: authLoading, isAuthenticated } = useAuth();
   const timezone = user?.timezone || DEFAULT_TIMEZONE;
-  // v1.36.x — uploading a document, filing it, sharing it and asking the AI
-  // about it are none of them delegated verbs. Inside somebody else's record
-  // the vault reads and nothing more: no upload path, no selection, no bulk
-  // bar, no corpus backfill. `canManageDomain("documents")` says so from the
-  // server's table, and answers false under every grant today.
+  // Uploading a document, filing it, sharing it and asking the AI about it
+  // are none of them delegated verbs. Inside somebody else's record the vault
+  // reads and nothing more: no upload path, no selection, no bulk bar, no
+  // corpus backfill. `canManageDomain("documents")` says so from the server's
+  // table, and answers false under every grant today.
   const { canManageDomain, inSharedRecord, sections } = useRecordCapabilities();
   const canManageDocuments = canManageDomain("documents");
   const router = useRouter();
   const pathname = usePathname();
-  const queryClient = useQueryClient();
-  const coachLaunch = useCoachLaunch();
 
   const moduleEnabled = user?.modules?.inboundDocuments === true;
 
@@ -281,677 +77,67 @@ export function DocumentsView() {
     }
   }, [authLoading, isAuthenticated, moduleEnabled, router]);
 
-  // ── URL-owned filter state ────────────────────────────────────────────
-  // The parse/serialise round trip stays in `vault-utils.ts`; the router
-  // plumbing lives in the shared hook (which the measurements and mood
-  // lists reuse — this surface is the pattern's origin).
-  const { filters, applyFilters } = useUrlFilterSync({
-    parse: parseVaultSearchParams,
-    serialise: vaultFiltersToSearch,
-  });
-
-  // Search draft debounces into the URL (200 ms); an external URL change
-  // (back button, deep link) re-seeds the draft — render-phase derived-state
-  // adjustment, not an effect.
-  const [searchDraft, setSearchDraft] = useState(filters.q ?? "");
-  const [lastUrlQ, setLastUrlQ] = useState(filters.q ?? "");
-  const searchInputRef = useRef<HTMLInputElement | null>(null);
-  if ((filters.q ?? "") !== lastUrlQ) {
-    setLastUrlQ(filters.q ?? "");
-    setSearchDraft(filters.q ?? "");
-  }
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      const trimmed = searchDraft.trim();
-      if (trimmed === (filters.q ?? "")) return;
-      // Live filters, not the rendered ones a "Clear filters" just removed.
-      applyFilters(
-        (current) =>
-          trimmed === (current.q ?? "")
-            ? current
-            : { ...current, q: trimmed === "" ? undefined : trimmed },
-        "replace",
-      );
-    }, 200);
-    return () => clearTimeout(handle);
-  }, [searchDraft, filters, applyFilters]);
-
-  // `/` focuses the search from anywhere on the page.
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey)
-        return;
-      const target = event.target as HTMLElement | null;
-      if (
-        target &&
-        (target.tagName === "INPUT" ||
-          target.tagName === "TEXTAREA" ||
-          target.tagName === "SELECT" ||
-          target.isContentEditable)
-      ) {
-        return;
-      }
-      event.preventDefault();
-      searchInputRef.current?.focus();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, []);
-
-  // Every facet toggles against the live filters (`applyFilters` updater).
-  const toggleKind = (kind: InboundDocumentKindValue) => {
-    applyFilters((current) => {
-      const kinds = new Set(current.kinds ?? []);
-      if (kinds.has(kind)) kinds.delete(kind);
-      else kinds.add(kind);
-      return {
-        ...current,
-        kinds: kinds.size > 0 ? [...kinds].sort() : undefined,
-      };
-    }, "push");
-  };
-
-  const toggleEpisode = (episodeId: string) => {
-    applyFilters(
-      (current) => ({
-        ...current,
-        episodeId: current.episodeId === episodeId ? undefined : episodeId,
-      }),
-      "push",
-    );
-  };
-
-  const toggleEncounter = (encounterId: string) => {
-    applyFilters(
-      (current) => ({
-        ...current,
-        encounterId:
-          current.encounterId === encounterId ? undefined : encounterId,
-      }),
-      "push",
-    );
-  };
-
-  const toggleYear = (year: number) => {
-    applyFilters(
-      (current) => ({
-        ...current,
-        year: current.year === year ? undefined : year,
-      }),
-      "push",
-    );
-  };
-
-  const clearFilters = () => {
-    setSearchDraft("");
-    applyFilters({}, "push");
-  };
-
-  // ── Data ──────────────────────────────────────────────────────────────
-  const usage = useQuery({
-    queryKey: queryKeys.inboundDocumentUsage(),
-    enabled: moduleEnabled,
-    queryFn: () => apiGet<DocumentUsageDto>("/api/documents/inbound/usage"),
-  });
-
-  const list = useInfiniteQuery({
-    queryKey: queryKeys.inboundDocumentList(filters),
-    enabled: moduleEnabled,
-    queryFn: ({ pageParam }) =>
-      apiGet<ListPage>(
-        `/api/documents/inbound?${buildVaultListApiSearch(filters, pageParam)}`,
-      ),
-    initialPageParam: null as string | null,
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
-    // v1.29.x — the auto-index (+ optional AI summary) job that lands right
-    // after upload is fire-and-forget server-side; nothing pushes its
-    // completion to the client. Poll while any loaded document is still
-    // inside its recent-upload processing window (see `hasProcessingDocument`
-    // — bounded, so an old/permanently-unindexed document never keeps this
-    // polling forever) so the card's "Processing…" chip clears on its own
-    // once the index lands, without a manual refresh.
-    refetchInterval: (query) => {
-      const pages = query.state.data?.pages ?? [];
-      const docs = pages.flatMap((p) => p.documents);
-      return hasProcessingDocument(docs) ? 4000 : false;
-    },
-  });
-
-  const documents = useMemo(
-    () => list.data?.pages.flatMap((p) => p.documents) ?? [],
-    [list.data],
-  );
-
-  // The reader's presentation (cards / list, stacked / flowing months),
-  // persisted per user and changed behind the wrench.
-  const { layout, isLayoutLoading } = useDocumentsLayout(moduleEnabled);
-
-  // v1.30.1 — pull-to-refresh parity with labs/checkups/mood/
-  // measurements/medications. The vault is one of the sharpest PWA-resume-
-  // staleness surfaces named in the audit: a document indexed server-side
-  // while the tab was backgrounded (auto-index / AI summary) otherwise
-  // stays invisible until the bounded processing poll above happens to
-  // catch it or the user navigates away and back.
-  const refreshDocuments = useCallback(
-    () => Promise.all([list.refetch(), usage.refetch()]),
-    [list, usage],
-  );
-  const pull = usePullToRefresh({ onRefresh: refreshDocuments });
-
-  const upload = useDocumentUpload(
-    usage.data ? { maxFileBytes: usage.data.maxFileBytes } : undefined,
-  );
-  const uploadInputRef = useRef<HTMLInputElement | null>(null);
-
-  // One intake path for every source (picker, zone drop, page-wide drop,
-  // clipboard paste): pre-links to the active episode filter and feeds the
-  // sr-only live region — the drop overlay itself is decorative.
-  const [uploadAnnouncement, setUploadAnnouncement] = useState("");
-  const enqueueRef = useRef(upload.enqueue);
-  useEffect(() => {
-    enqueueRef.current = upload.enqueue;
-  }, [upload.enqueue]);
-  const episodeIdFilter = filters.episodeId;
-  const encounterIdFilter = filters.encounterId;
-  const enqueueFiles = useCallback(
-    (files: File[]) => {
-      if (files.length === 0) return;
-      enqueueRef.current(files, {
-        episodeId: episodeIdFilter,
-        encounterId: encounterIdFilter,
-      });
-      setUploadAnnouncement(
-        t("documents.upload.queuedAnnouncement", { count: files.length }),
-      );
-    },
-    [episodeIdFilter, encounterIdFilter, t],
-  );
-  const { dropActive } = usePageFileDrop(
-    canManageDocuments ? enqueueFiles : undefined,
-  );
-
-  const episodes = useIllnessEpisodes(
-    true,
-    !inSharedRecord || sections === null || sections.includes("illness"),
-  );
-
-  // Content-search coverage: fire the corpus backfill when indexing is
-  // available and some documents are not yet searchable. The list search
-  // already unions content matches server-side — this only surfaces the hint
-  // and the "index all" affordance from the usage gauge.
-  const reindexAll = useReindexAll();
-  const contentIndex = usage.data?.contentIndex;
-  const canIndexContent = contentIndex?.enabled ?? false;
-  const showIndexAll =
-    canManageDocuments &&
-    canIndexContent &&
-    contentIndex !== undefined &&
-    contentIndex.totalCount > 0 &&
-    contentIndex.indexedCount < contentIndex.totalCount;
-  const handleIndexAll = useCallback(() => {
-    reindexAll.mutate(undefined, {
-      onSuccess: (result) =>
-        toast.success(
-          result.enqueued > 0
-            ? t("documents.contentIndex.indexAllQueued", {
-                count: result.enqueued,
-              })
-            : t("documents.contentIndex.indexAllNothing"),
-        ),
-      onError: (failure) =>
-        showErrorToast(t("documents.contentIndex.indexAllError"), {
-          cause: failure,
-        }),
-    });
-  }, [reindexAll, t]);
-
-  // Condition chips: every episode carrying at least one live document
-  // link, served by the usage endpoint (NOT derived from the loaded corpus
-  // — an old linked document pages deep must still surface its chip), plus
-  // the actively filtered episode (a deep link must always show its own
-  // chip, even when its last link was just removed).
-  const conditionChips = useMemo<ConditionChip[]>(() => {
-    const byId = new Map<string, string>();
-    for (const link of usage.data?.linkedEpisodes ?? []) {
-      byId.set(link.episodeId, link.name);
-    }
-    if (filters.episodeId && !byId.has(filters.episodeId)) {
-      const episode = episodes.data?.find((e) => e.id === filters.episodeId);
-      byId.set(filters.episodeId, episode?.label ?? filters.episodeId);
-    }
-    return [...byId.entries()]
-      .map(([episodeId, name]) => ({ episodeId, name }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [usage.data?.linkedEpisodes, filters.episodeId, episodes.data]);
-
-  // The visits the bulk bar can file a selection against: the account's own,
-  // read through the same list the checkups page shows. Labelled here rather
-  // than in the bar so the label uses the reader's locale for the kind and the
-  // reader's timezone for the date — both presentation, both this side's job.
-  const visits = useEncounters(
-    !inSharedRecord || sections === null || sections.includes("profile"),
-  );
-  const bulkEncounterOptions = useMemo(
-    () =>
-      [...(visits.data?.upcoming ?? []), ...(visits.data?.past ?? [])]
-        .slice(0, BULK_VISIT_OPTIONS)
-        .map((visit) => ({
-          id: visit.id,
-          label: `${
-            visit.practitioner?.name ??
-            encounterKindText(t, visit.kind as EncounterKind)
-          }, ${format.date(visit.occurredAt)}`,
-        })),
-    [visits.data, t, format],
-  );
-
-  // Procedure choices: every procedure carrying at least one live document
-  // link, served by the usage endpoint for the same reason as the condition
-  // chips, plus the actively filtered visit when it is a procedure (see
-  // `buildProcedureChoices`).
-  const procedureChips = useMemo<ProcedureFilterChoice[]>(() => {
-    const activeVisit = filters.encounterId
-      ? [...(visits.data?.upcoming ?? []), ...(visits.data?.past ?? [])].find(
-          (v) => v.id === filters.encounterId && v.kind === "PROCEDURE",
-        )
-      : undefined;
-    return buildProcedureChoices(
-      usage.data?.linkedProcedures ?? [],
-      activeVisit
-        ? {
-            encounterId: activeVisit.id,
-            occurredAt: activeVisit.occurredAt,
-            reason: activeVisit.reason,
-            bodySite: activeVisit.bodySite,
-            laterality: activeVisit.laterality,
-            practitionerName: activeVisit.practitioner?.name ?? null,
-          }
-        : null,
-      {
-        kindName: encounterKindText(t, "PROCEDURE"),
-        siteText: (site, laterality) => bodySiteText(t, site, laterality),
-        formatDate: (iso) => format.date(iso),
-      },
-    );
-  }, [
-    usage.data?.linkedProcedures,
-    filters.encounterId,
-    visits.data,
-    t,
-    format,
-  ]);
-
-  // Year segmenter: years present in the loaded corpus (+ the active year).
-  const years = useMemo(() => {
-    const set = new Set<number>();
-    for (const doc of documents) {
-      set.add(Number(documentDateKey(doc, timezone).slice(0, 4)));
-    }
-    if (filters.year !== undefined) set.add(filters.year);
-    return [...set].sort((a, b) => b - a);
-  }, [documents, filters.year, timezone]);
-
-  // ── Selection + bulk actions ──────────────────────────────────────────
-  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(
-    new Set(),
-  );
-  // Anchor for shift-click ranges: the last plainly-toggled id.
-  const rangeAnchorRef = useRef<string | null>(null);
-  const toggleSelected = useCallback(
-    (id: string, range?: boolean) => {
-      setSelectedIds((prev) => {
-        if (range) {
-          return expandRangeSelection(
-            documents.map((d) => d.id),
-            prev,
-            rangeAnchorRef.current,
-            id,
-          );
-        }
-        const next = new Set(prev);
-        if (next.has(id)) {
-          next.delete(id);
-        } else {
-          next.add(id);
-        }
-        return next;
-      });
-      if (!range) rangeAnchorRef.current = id;
-    },
-    [documents],
-  );
-  const clearSelection = useCallback(() => {
-    setSelectedIds(new Set());
-    rangeAnchorRef.current = null;
-  }, []);
-
-  // Escape clears the selection — unless a dialog/popover owns the key.
-  useEffect(() => {
-    if (selectedIds.size === 0) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      const target = event.target as HTMLElement | null;
-      if (target?.closest('[role="dialog"],[role="menu"]')) return;
-      clearSelection();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [selectedIds.size, clearSelection]);
-
-  /**
-   * One bulk POST per ≤100-id chunk (the endpoint's cap); per-id results
-   * are merged so a partial failure in any chunk surfaces once. The
-   * endpoint is no-op-success on already-in-state rows, so an undo toast
-   * firing twice is safe by contract.
-   */
-  const bulk = useMutation({
-    mutationFn: async (input: {
-      ids: string[];
-      action: DocumentBulkAction;
-      kind?: InboundDocumentKindValue;
-      episodeId?: string;
-    }) => {
-      const results: DocumentBulkResultDto[] = [];
-      for (let i = 0; i < input.ids.length; i += DOCUMENT_BULK_MAX_IDS) {
-        const chunk = input.ids.slice(i, i + DOCUMENT_BULK_MAX_IDS);
-        const page = await apiPost<{ results: DocumentBulkResultDto[] }>(
-          "/api/documents/inbound/bulk",
-          {
-            ids: chunk,
-            action: input.action,
-            ...(input.kind !== undefined && { kind: input.kind }),
-            ...(input.episodeId !== undefined && {
-              episodeId: input.episodeId,
-            }),
-          },
-        );
-        results.push(...page.results);
-      }
-      return results;
-    },
-    onSettled: () => {
-      void invalidateKeys(queryClient, [queryKeys.documents()]);
-    },
-  });
-
-  const reportBulkOutcome = useCallback(
-    (results: DocumentBulkResultDto[], successMessage: string) => {
-      const failed = results.filter((r) => !r.ok).length;
-      if (failed > 0) {
-        showErrorToast(
-          t("documents.bulk.partialFailure", {
-            failed,
-            total: results.length,
-          }),
-        );
-      } else {
-        toast.success(successMessage);
-      }
-    },
-    [t],
-  );
-
-  const runBulk = useCallback(
-    (
-      action: Exclude<DocumentBulkAction, "delete" | "restore">,
-      extra: {
-        kind?: InboundDocumentKindValue;
-        episodeId?: string;
-        encounterId?: string;
-      },
-    ) => {
-      const ids = [...selectedIds];
-      bulk.mutate(
-        { ids, action, ...extra },
-        {
-          onSuccess: (results) => {
-            reportBulkOutcome(
-              results,
-              t("documents.bulk.updated", {
-                count: results.filter((r) => r.ok).length,
-              }),
-            );
-            clearSelection();
-          },
-          onError: (failure) =>
-            showErrorToast(t("documents.bulk.failed"), { cause: failure }),
-        },
-      );
-    },
-    [selectedIds, bulk, reportBulkOutcome, clearSelection, t],
-  );
-
-  const restoreBulk = useCallback(
-    (ids: string[]) => {
-      bulk.mutate(
-        { ids, action: "restore" },
-        {
-          onSuccess: (results) =>
-            reportBulkOutcome(
-              results,
-              t("documents.bulk.restored", {
-                count: results.filter((r) => r.ok).length,
-              }),
-            ),
-          onError: (failure) =>
-            showErrorToast(t("documents.toast.restoreFailed"), {
-              cause: failure,
-            }),
-        },
-      );
-    },
-    [bulk, reportBulkOutcome, t],
-  );
-
-  const deleteBulk = useCallback(
-    (ids: string[]) => {
-      bulk.mutate(
-        { ids, action: "delete" },
-        {
-          onSuccess: (results) => {
-            const okIds = results.filter((r) => r.ok).map((r) => r.id);
-            const failed = results.length - okIds.length;
-            if (failed > 0) {
-              showErrorToast(
-                t("documents.bulk.partialFailure", {
-                  failed,
-                  total: results.length,
-                }),
-              );
-            }
-            if (okIds.length > 0) {
-              // ONE aggregate undo for the whole batch (bulk restore).
-              toast.success(
-                t("documents.bulk.deleted", { count: okIds.length }),
-                {
-                  action: {
-                    label: t("common.undo"),
-                    onClick: () => restoreBulk(okIds),
-                  },
-                },
-              );
-            }
-            clearSelection();
-          },
-          onError: (failure) =>
-            showErrorToast(t("documents.bulk.failed"), { cause: failure }),
-        },
-      );
-    },
-    [bulk, clearSelection, restoreBulk, t],
-  );
-
-  // ── Delete confirmation ───────────────────────────────────────────────
-  // Every way of deleting from the vault page — the bulk bar's Delete and a
-  // card's Delete key — comes through here and asks first. Nothing on this
-  // page calls `deleteBulk` directly.
-  const [pendingDeleteIds, setPendingDeleteIds] = useState<string[] | null>(
-    null,
-  );
-  const requestDelete = useCallback((ids: string[]) => {
-    if (ids.length > 0) setPendingDeleteIds(ids);
-  }, []);
-  const confirmDelete = useCallback(() => {
-    if (pendingDeleteIds) deleteBulk(pendingDeleteIds);
-    setPendingDeleteIds(null);
-  }, [pendingDeleteIds, deleteBulk]);
-
-  // ── Bulk share ────────────────────────────────────────────────────────
-  // ONE documents-only link for the whole selection (the share model carries
-  // up to SHARE_MAX_DOCUMENTS docs per link). The titles come from the loaded
-  // corpus — a selected id is always a rendered row. Over the cap we surface a
-  // hint and refuse rather than silently dropping docs from the link.
-  const [bulkShareOpen, setBulkShareOpen] = useState(false);
-  const [bulkShareDocs, setBulkShareDocs] = useState<
-    { id: string; title: string }[]
-  >([]);
-  const openBulkShare = useCallback(() => {
-    const resolved = resolveBulkShareDocuments(
-      documents,
-      selectedIds,
-      t("documents.card.untitled"),
-    );
-    if (resolved.overCap) {
-      showErrorToast(
-        t("documents.bulk.shareTooMany", { max: SHARE_LINK_MAX_DOCUMENTS }),
-      );
-      return;
-    }
-    if (resolved.documents.length === 0) return;
-    setBulkShareDocs(resolved.documents);
-    setBulkShareOpen(true);
-  }, [documents, selectedIds, t]);
-
-  // ── Detail sheet ──────────────────────────────────────────────────────
-  const [detailId, setDetailId] = useState<string | null>(null);
-  const [detailOpen, setDetailOpen] = useState(false);
-  const handedOffDocumentRef = useRef<string | null>(null);
-
-  // `?doc=` read live (`@/lib/url-state`): Next 16.4 adopts a pushState a
-  // render after the write, and a Back pressed in between left the router's
-  // copy reading "no document" on both sides, so the sheet stayed open.
-  const liveParams = useUrlSearch();
-  const rawDocParam = liveParams.get("doc");
-  const docParam =
-    rawDocParam !== null && DOCUMENT_QUERY_ID_PATTERN.test(rawDocParam)
-      ? rawDocParam
-      : null;
-  const [observedDocParam, setObservedDocParam] = useState<string | null>(null);
-
-  // The query is the navigation owner: direct links, browser back, and browser
-  // forward all drive the same detail selection without remounting the route.
-  // Wait for auth so a deep link cannot be consumed before the module gate is
-  // known, and never interpolate an unvalidated id into the detail API path.
-  if (!authLoading && moduleEnabled && rawDocParam !== observedDocParam) {
-    setObservedDocParam(rawDocParam);
-    setDetailId(docParam);
-    setDetailOpen(docParam !== null);
-  }
-
-  const openDetail = useCallback(
-    (id: string) => {
-      const href = documentSelectionHref(pathname, currentUrlSearch(), id);
-      if (href === null) return;
-      handedOffDocumentRef.current = null;
-      setDetailId(id);
-      setDetailOpen(true);
-      writeUrlState((params) => params.set("doc", id), {
-        mode: "push",
-        state: documentSelectionHistoryState(id),
-      });
-    },
-    [pathname],
-  );
-
-  const handleDetailOpenChange = useCallback((open: boolean) => {
-    setDetailOpen(open);
-  }, []);
-
-  const coachOwnsDocument =
-    docParam !== null &&
-    coachLaunch?.open === true &&
-    coachLaunch.documentId === docParam;
-
-  useEffect(() => {
-    if (authLoading || !moduleEnabled) return;
-    if (docParam === null) {
-      handedOffDocumentRef.current = null;
-      return;
-    }
-    if (detailOpen) return;
-    if (coachOwnsDocument) {
-      // "Ask Coach" intentionally closes the sheet while the drawer owns the
-      // same document. Keep the return URL intact so maximize → browser-back
-      // can reconstruct the sheet from `?doc=`.
-      handedOffDocumentRef.current = docParam;
-      return;
-    }
-    // Read before the call below reassigns the ref: the same inputs the close
-    // itself decides on.
-    const retainedAsReturnUrl = coachHandoffRetainsSelection(
-      docParam,
-      handedOffDocumentRef.current,
-      coachLaunch?.closeIntent,
-    );
-
-    handedOffDocumentRef.current = closeDocumentSelectionAfterCoachHandoff(
-      urlStateHistory,
-      pathname,
-      currentUrlSearch(),
-      docParam,
-      handedOffDocumentRef.current,
-      coachLaunch?.closeIntent,
-    );
-
-    // Nothing was closed: the selection is the way back from `/coach` and is
-    // meant to stay. Checking for it here would delete it.
-    if (retainedAsReturnUrl) return;
-
-    // Consuming the pushed entry is a REQUEST to the browser, not a guarantee.
-    //
-    // `history.back()` is queued against the session history, and a traversal
-    // asked for while another is still settling can be dropped — closing the
-    // sheet immediately after pressing the browser's Forward button is exactly
-    // that shape. Nothing raises when it happens: the sheet is closed, React
-    // is consistent, and the URL still names the document. A reload or a
-    // shared link then re-opens the sheet the reader just closed.
-    //
-    // So the request is checked rather than trusted. If the selection is still
-    // in the address bar shortly afterwards, it is removed the synchronous
-    // way. The guard is the document id, so a traversal that landed on some
-    // other selection is left alone, and the cleanup below cancels the check
-    // the moment the sheet re-opens or the parameter changes — which is what
-    // makes re-opening within the window safe.
-    const verify = window.setTimeout(() => {
-      if (!documentSelectionSurvivedClose(currentUrlSearch(), docParam)) {
-        return;
-      }
-      writeUrlState((params) => params.delete("doc"));
-    }, CLOSE_TRAVERSAL_GRACE_MS);
-    return () => window.clearTimeout(verify);
-  }, [
-    authLoading,
-    coachOwnsDocument,
-    coachLaunch?.closeIntent,
-    detailOpen,
-    docParam,
+  const {
+    filters,
+    searchDraft,
+    setSearchDraft,
+    searchInputRef,
+    toggleKind,
+    toggleEpisode,
+    toggleEncounter,
+    toggleYear,
+    clearFilters,
+  } = useVaultFilters();
+  const {
+    usage,
+    list,
+    documents,
+    layout,
+    isLayoutLoading,
+    pull,
+    upload,
+    uploadInputRef,
+    uploadAnnouncement,
+    enqueueFiles,
+    dropActive,
+    episodes,
+    reindexAll,
+    showIndexAll,
+    handleIndexAll,
+    conditionChips,
+    bulkEncounterOptions,
+    procedureChips,
+    years,
+  } = useVaultLibrary({
+    filters,
     moduleEnabled,
-    pathname,
-  ]);
-
-  // Hover/focus intent prefetches the detail METADATA (never the blob —
-  // the blob fetch starts when the sheet mounts its preview element).
-  const prefetchDetail = useCallback(
-    (id: string) => {
-      void queryClient.prefetchQuery({
-        queryKey: queryKeys.inboundDocument(id),
-        queryFn: () =>
-          apiGet<InboundDocumentDetailDto>(`/api/documents/inbound/${id}`),
-        staleTime: 30_000,
-      });
-    },
-    [queryClient],
-  );
+    canManageDocuments,
+    inSharedRecord,
+    sections,
+    timezone,
+  });
+  const {
+    selectedIds,
+    toggleSelected,
+    clearSelection,
+    bulk,
+    runBulk,
+    pendingDeleteIds,
+    setPendingDeleteIds,
+    requestDelete,
+    confirmDelete,
+    bulkShareOpen,
+    setBulkShareOpen,
+    bulkShareDocs,
+    openBulkShare,
+  } = useVaultSelection(documents);
+  const {
+    detailId,
+    detailOpen,
+    openDetail,
+    handleDetailOpenChange,
+    prefetchDetail,
+  } = useVaultDetail({ authLoading, moduleEnabled, pathname });
 
   if (authLoading || !isAuthenticated || !moduleEnabled) {
     return (
@@ -978,45 +164,12 @@ export function DocumentsView() {
         description={t("documents.subtitle")}
         actions={
           canManageDocuments || !inSharedRecord ? (
-            <div className="flex flex-wrap items-center gap-2">
-              {/* The wrench left of the primary action, as on the illness
-                  journal: it opens this vault's display settings. `/settings`
-                  is the caller's own, so it never shows inside somebody
-                  else's record. */}
-              {!inSharedRecord ? (
-                <Button
-                  asChild
-                  variant="ghost"
-                  size="icon"
-                  className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-                >
-                  <Link
-                    href="/settings/layout/documents"
-                    aria-label={t("documents.customize")}
-                    title={t("documents.customize")}
-                    data-slot="documents-customize"
-                  >
-                    <Wrench className="size-4" aria-hidden />
-                  </Link>
-                </Button>
-              ) : null}
-              {canManageDocuments ? (
-                <>
-                  {/* Renders only with a connected Paperless-ngx or Papra. */}
-                  <ImportFromSourceButton className="min-h-11 sm:min-h-9" />
-                  {/* An empty vault's empty state carries the upload. */}
-                  {showEmpty && !isFiltered ? null : (
-                    <Button
-                      className="min-h-11 sm:min-h-9"
-                      onClick={() => uploadInputRef.current?.click()}
-                    >
-                      <Upload className="size-4" aria-hidden />
-                      {t("documents.pageUpload")}
-                    </Button>
-                  )}
-                </>
-              ) : null}
-            </div>
+            <VaultPageActions
+              canManageDocuments={canManageDocuments}
+              inSharedRecord={inSharedRecord}
+              hideUpload={showEmpty && !isFiltered}
+              uploadInputRef={uploadInputRef}
+            />
           ) : null
         }
       />
@@ -1194,27 +347,7 @@ export function DocumentsView() {
         documents={bulkShareDocs}
       />
 
-      {/* Page-wide drop overlay — pure decoration (aria-hidden); the intake
-          itself announces through the live region below. */}
-      {dropActive ? (
-        <div
-          aria-hidden
-          data-slot="document-drop-overlay"
-          className="bg-background/80 fixed inset-0 z-50 p-4 backdrop-blur-sm md:p-8"
-        >
-          <div className="border-primary bg-primary/5 flex h-full items-center justify-center rounded-xl border-2 border-dashed">
-            <div className="flex flex-col items-center gap-2 px-4 text-center">
-              <UploadCloud className="text-primary size-8" aria-hidden />
-              <p className="text-base font-medium">
-                {t("documents.dropOverlay.title")}
-              </p>
-              <p className="text-muted-foreground text-xs">
-                {t("documents.dropOverlay.hint")}
-              </p>
-            </div>
-          </div>
-        </div>
-      ) : null}
+      {dropActive ? <VaultDropOverlay /> : null}
       <p aria-live="polite" role="status" className="sr-only">
         {uploadAnnouncement}
       </p>
diff --git a/src/components/documents/vault/selection-history.ts b/src/components/documents/vault/selection-history.ts
new file mode 100644
index 000000000..116f1a539
--- /dev/null
+++ b/src/components/documents/vault/selection-history.ts
@@ -0,0 +1,148 @@
+import type { CoachCloseIntent } from "@/lib/insights/coach-launch-context";
+
+/**
+ * The open document lives in the URL as `?doc=<id>`, pushed as its own
+ * history entry when a card opens it, so Back closes the sheet and a link
+ * reopens it. These helpers own that entry: building the URL, recognising
+ * the entry a card pushed, consuming it on close, and the one close (the
+ * Coach handoff) that keeps it as the way back.
+ */
+// Strict end-of-input: `$` also accepts a trailing newline in JavaScript.
+export const DOCUMENT_QUERY_ID_PATTERN = /^[a-zA-Z0-9_-]{1,40}(?![\s\S])/;
+const DOCUMENT_SELECTION_HISTORY_KEY = "__healthlogPushedDocumentSelection";
+
+export function documentSelectionHistoryState(
+  documentId: string,
+): Record<string, unknown> {
+  // Pass only application state here. Next's patched pushState copies its
+  // private router fields onto this object; copying history.state ourselves
+  // would include `__NA` and make that patch treat this as an internal write,
+  // skipping useSearchParams synchronization.
+  return { [DOCUMENT_SELECTION_HISTORY_KEY]: documentId };
+}
+
+export function documentSelectionHref(
+  pathname: string,
+  currentSearch: string,
+  documentId: string,
+): string | null {
+  if (!DOCUMENT_QUERY_ID_PATTERN.test(documentId)) return null;
+  const next = new URLSearchParams(currentSearch);
+  next.set("doc", documentId);
+  const search = next.toString();
+  return search ? `${pathname}?${search}` : pathname;
+}
+
+export function withoutDocumentSelectionHref(
+  pathname: string,
+  currentSearch: string,
+): string {
+  const next = new URLSearchParams(currentSearch);
+  next.delete("doc");
+  const search = next.toString();
+  return search ? `${pathname}?${search}` : pathname;
+}
+
+/**
+ * How long to wait before checking that `history.back()` actually happened.
+ *
+ * Long enough for a traversal to commit on a loaded machine, short enough that
+ * a reader who closed the sheet does not see the selection linger in the
+ * address bar. The window is bounded on the other side too: the effect that
+ * arms this cancels it as soon as the sheet re-opens.
+ */
+export const CLOSE_TRAVERSAL_GRACE_MS = 250;
+
+/**
+ * The selection this close was meant to consume is still in the address bar.
+ *
+ * Matched on the id rather than on the presence of `doc`, so a traversal that
+ * landed somewhere carrying a DIFFERENT selection is not mistaken for a
+ * dropped one and stripped.
+ */
+export function documentSelectionSurvivedClose(
+  search: string,
+  documentId: string,
+): boolean {
+  return new URLSearchParams(search).get("doc") === documentId;
+}
+
+export function closeDocumentSelectionHistoryEntry(
+  history: {
+    readonly state: unknown;
+    back: () => void;
+    replaceState: (
+      data: unknown,
+      unused: string,
+      url?: string | URL | null,
+    ) => void;
+  },
+  pathname: string,
+  currentSearch: string,
+  documentId: string,
+): void {
+  const ownsCurrentEntry =
+    history.state !== null &&
+    typeof history.state === "object" &&
+    (history.state as Record<string, unknown>)[
+      DOCUMENT_SELECTION_HISTORY_KEY
+    ] === documentId;
+  if (ownsCurrentEntry) {
+    // Card selection owns the current pushed entry. Returning to its base
+    // consumes it, so the user's next Back reaches the prior distinct page.
+    history.back();
+    return;
+  }
+
+  // A deep link did not create a disposable entry on this page. Keep the user
+  // here and remove only the selection from the current URL.
+  history.replaceState(
+    null,
+    "",
+    withoutDocumentSelectionHref(pathname, currentSearch),
+  );
+}
+
+/**
+ * The selection is being KEPT on purpose, as the way back.
+ *
+ * Maximizing the Coach drawer hands the conversation to `/coach` and carries
+ * `?doc=` with it, so browser-Back can reconstruct the sheet. That is the one
+ * close-shaped transition that must leave the parameter exactly where it is.
+ *
+ * Named, and used by both the close and the check that follows it, because
+ * those two disagreeing is a bug with no symptom until it has one: the check
+ * would strip the return URL a few hundred milliseconds after the close
+ * deliberately preserved it, and whether it won that race was a question about
+ * how fast the machine navigated.
+ */
+export function coachHandoffRetainsSelection(
+  documentId: string,
+  handedOffDocumentId: string | null,
+  closeIntent: CoachCloseIntent | null | undefined,
+): boolean {
+  return handedOffDocumentId === documentId && closeIntent === "navigate";
+}
+
+export function closeDocumentSelectionAfterCoachHandoff(
+  history: Parameters<typeof closeDocumentSelectionHistoryEntry>[0],
+  pathname: string,
+  currentSearch: string,
+  documentId: string,
+  handedOffDocumentId: string | null,
+  closeIntent: CoachCloseIntent | null | undefined,
+): string | null {
+  if (
+    coachHandoffRetainsSelection(documentId, handedOffDocumentId, closeIntent)
+  ) {
+    return handedOffDocumentId;
+  }
+
+  closeDocumentSelectionHistoryEntry(
+    history,
+    pathname,
+    currentSearch,
+    documentId,
+  );
+  return handedOffDocumentId === documentId ? null : handedOffDocumentId;
+}
diff --git a/src/components/documents/vault/use-vault-bulk.ts b/src/components/documents/vault/use-vault-bulk.ts
new file mode 100644
index 000000000..875551303
--- /dev/null
+++ b/src/components/documents/vault/use-vault-bulk.ts
@@ -0,0 +1,176 @@
+"use client";
+
+import { useCallback } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { apiPost } from "@/lib/api/api-fetch";
+import { DOCUMENT_BULK_MAX_IDS } from "@/lib/documents/inbound-constants";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { invalidateKeys, queryKeys } from "@/lib/query-keys";
+import type {
+  DocumentBulkAction,
+  DocumentBulkResultDto,
+  InboundDocumentKindValue,
+} from "@/lib/validations/inbound-documents";
+
+/**
+ * The bulk actions on a selection: re-file and link (one outcome toast), and
+ * delete with one undo for the whole batch. Deleting is only ever reached
+ * through the page's confirmation.
+ */
+export function useVaultBulk({
+  selectedIds,
+  clearSelection,
+}: {
+  selectedIds: ReadonlySet<string>;
+  clearSelection: () => void;
+}) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  /**
+   * One bulk POST per ≤100-id chunk (the endpoint's cap); per-id results
+   * are merged so a partial failure in any chunk surfaces once. The
+   * endpoint is no-op-success on already-in-state rows, so an undo toast
+   * firing twice is safe by contract.
+   */
+  const bulk = useMutation({
+    mutationFn: async (input: {
+      ids: string[];
+      action: DocumentBulkAction;
+      kind?: InboundDocumentKindValue;
+      episodeId?: string;
+    }) => {
+      const results: DocumentBulkResultDto[] = [];
+      for (let i = 0; i < input.ids.length; i += DOCUMENT_BULK_MAX_IDS) {
+        const chunk = input.ids.slice(i, i + DOCUMENT_BULK_MAX_IDS);
+        const page = await apiPost<{ results: DocumentBulkResultDto[] }>(
+          "/api/documents/inbound/bulk",
+          {
+            ids: chunk,
+            action: input.action,
+            ...(input.kind !== undefined && { kind: input.kind }),
+            ...(input.episodeId !== undefined && {
+              episodeId: input.episodeId,
+            }),
+          },
+        );
+        results.push(...page.results);
+      }
+      return results;
+    },
+    onSettled: () => {
+      void invalidateKeys(queryClient, [queryKeys.documents()]);
+    },
+  });
+
+  const reportBulkOutcome = useCallback(
+    (results: DocumentBulkResultDto[], successMessage: string) => {
+      const failed = results.filter((r) => !r.ok).length;
+      if (failed > 0) {
+        showErrorToast(
+          t("documents.bulk.partialFailure", {
+            failed,
+            total: results.length,
+          }),
+        );
+      } else {
+        toast.success(successMessage);
+      }
+    },
+    [t],
+  );
+
+  const runBulk = useCallback(
+    (
+      action: Exclude<DocumentBulkAction, "delete" | "restore">,
+      extra: {
+        kind?: InboundDocumentKindValue;
+        episodeId?: string;
+        encounterId?: string;
+      },
+    ) => {
+      const ids = [...selectedIds];
+      bulk.mutate(
+        { ids, action, ...extra },
+        {
+          onSuccess: (results) => {
+            reportBulkOutcome(
+              results,
+              t("documents.bulk.updated", {
+                count: results.filter((r) => r.ok).length,
+              }),
+            );
+            clearSelection();
+          },
+          onError: (failure) =>
+            showErrorToast(t("documents.bulk.failed"), { cause: failure }),
+        },
+      );
+    },
+    [selectedIds, bulk, reportBulkOutcome, clearSelection, t],
+  );
+
+  const restoreBulk = useCallback(
+    (ids: string[]) => {
+      bulk.mutate(
+        { ids, action: "restore" },
+        {
+          onSuccess: (results) =>
+            reportBulkOutcome(
+              results,
+              t("documents.bulk.restored", {
+                count: results.filter((r) => r.ok).length,
+              }),
+            ),
+          onError: (failure) =>
+            showErrorToast(t("documents.toast.restoreFailed"), {
+              cause: failure,
+            }),
+        },
+      );
+    },
+    [bulk, reportBulkOutcome, t],
+  );
+
+  const deleteBulk = useCallback(
+    (ids: string[]) => {
+      bulk.mutate(
+        { ids, action: "delete" },
+        {
+          onSuccess: (results) => {
+            const okIds = results.filter((r) => r.ok).map((r) => r.id);
+            const failed = results.length - okIds.length;
+            if (failed > 0) {
+              showErrorToast(
+                t("documents.bulk.partialFailure", {
+                  failed,
+                  total: results.length,
+                }),
+              );
+            }
+            if (okIds.length > 0) {
+              // ONE aggregate undo for the whole batch (bulk restore).
+              toast.success(
+                t("documents.bulk.deleted", { count: okIds.length }),
+                {
+                  action: {
+                    label: t("common.undo"),
+                    onClick: () => restoreBulk(okIds),
+                  },
+                },
+              );
+            }
+            clearSelection();
+          },
+          onError: (failure) =>
+            showErrorToast(t("documents.bulk.failed"), { cause: failure }),
+        },
+      );
+    },
+    [bulk, clearSelection, restoreBulk, t],
+  );
+
+  return { bulk, runBulk, deleteBulk };
+}
diff --git a/src/components/documents/vault/use-vault-detail.ts b/src/components/documents/vault/use-vault-detail.ts
new file mode 100644
index 000000000..7c5854a2f
--- /dev/null
+++ b/src/components/documents/vault/use-vault-detail.ts
@@ -0,0 +1,180 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { apiGet } from "@/lib/api/api-fetch";
+import { useCoachLaunch } from "@/lib/insights/coach-launch-context";
+import { queryKeys } from "@/lib/query-keys";
+import {
+  currentUrlSearch,
+  urlStateHistory,
+  useUrlSearch,
+  writeUrlState,
+} from "@/lib/url-state";
+import type { InboundDocumentDetailDto } from "@/lib/validations/inbound-documents";
+
+import {
+  CLOSE_TRAVERSAL_GRACE_MS,
+  closeDocumentSelectionAfterCoachHandoff,
+  coachHandoffRetainsSelection,
+  DOCUMENT_QUERY_ID_PATTERN,
+  documentSelectionHistoryState,
+  documentSelectionHref,
+  documentSelectionSurvivedClose,
+} from "./selection-history";
+
+/**
+ * The detail sheet, driven by `?doc=`: a card pushes the selection, Back and
+ * Forward and direct links drive the same state without remounting the
+ * route, and a close consumes the pushed entry (and checks that it did).
+ */
+export function useVaultDetail({
+  authLoading,
+  moduleEnabled,
+  pathname,
+}: {
+  authLoading: boolean;
+  moduleEnabled: boolean;
+  pathname: string;
+}) {
+  const queryClient = useQueryClient();
+  const coachLaunch = useCoachLaunch();
+  const [detailId, setDetailId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const handedOffDocumentRef = useRef<string | null>(null);
+
+  // `?doc=` read live (`@/lib/url-state`): Next 16.4 adopts a pushState a
+  // render after the write, and a Back pressed in between left the router's
+  // copy reading "no document" on both sides, so the sheet stayed open.
+  const liveParams = useUrlSearch();
+  const rawDocParam = liveParams.get("doc");
+  const docParam =
+    rawDocParam !== null && DOCUMENT_QUERY_ID_PATTERN.test(rawDocParam)
+      ? rawDocParam
+      : null;
+  const [observedDocParam, setObservedDocParam] = useState<string | null>(null);
+
+  // The query is the navigation owner: direct links, browser back, and browser
+  // forward all drive the same detail selection without remounting the route.
+  // Wait for auth so a deep link cannot be consumed before the module gate is
+  // known, and never interpolate an unvalidated id into the detail API path.
+  if (!authLoading && moduleEnabled && rawDocParam !== observedDocParam) {
+    setObservedDocParam(rawDocParam);
+    setDetailId(docParam);
+    setDetailOpen(docParam !== null);
+  }
+
+  const openDetail = useCallback(
+    (id: string) => {
+      const href = documentSelectionHref(pathname, currentUrlSearch(), id);
+      if (href === null) return;
+      handedOffDocumentRef.current = null;
+      setDetailId(id);
+      setDetailOpen(true);
+      writeUrlState((params) => params.set("doc", id), {
+        mode: "push",
+        state: documentSelectionHistoryState(id),
+      });
+    },
+    [pathname],
+  );
+
+  const handleDetailOpenChange = useCallback((open: boolean) => {
+    setDetailOpen(open);
+  }, []);
+
+  const coachOwnsDocument =
+    docParam !== null &&
+    coachLaunch?.open === true &&
+    coachLaunch.documentId === docParam;
+
+  useEffect(() => {
+    if (authLoading || !moduleEnabled) return;
+    if (docParam === null) {
+      handedOffDocumentRef.current = null;
+      return;
+    }
+    if (detailOpen) return;
+    if (coachOwnsDocument) {
+      // "Ask Coach" intentionally closes the sheet while the drawer owns the
+      // same document. Keep the return URL intact so maximize → browser-back
+      // can reconstruct the sheet from `?doc=`.
+      handedOffDocumentRef.current = docParam;
+      return;
+    }
+    // Read before the call below reassigns the ref: the same inputs the close
+    // itself decides on.
+    const retainedAsReturnUrl = coachHandoffRetainsSelection(
+      docParam,
+      handedOffDocumentRef.current,
+      coachLaunch?.closeIntent,
+    );
+
+    handedOffDocumentRef.current = closeDocumentSelectionAfterCoachHandoff(
+      urlStateHistory,
+      pathname,
+      currentUrlSearch(),
+      docParam,
+      handedOffDocumentRef.current,
+      coachLaunch?.closeIntent,
+    );
+
+    // Nothing was closed: the selection is the way back from `/coach` and is
+    // meant to stay. Checking for it here would delete it.
+    if (retainedAsReturnUrl) return;
+
+    // Consuming the pushed entry is a REQUEST to the browser, not a guarantee.
+    //
+    // `history.back()` is queued against the session history, and a traversal
+    // asked for while another is still settling can be dropped — closing the
+    // sheet immediately after pressing the browser's Forward button is exactly
+    // that shape. Nothing raises when it happens: the sheet is closed, React
+    // is consistent, and the URL still names the document. A reload or a
+    // shared link then re-opens the sheet the reader just closed.
+    //
+    // So the request is checked rather than trusted. If the selection is still
+    // in the address bar shortly afterwards, it is removed the synchronous
+    // way. The guard is the document id, so a traversal that landed on some
+    // other selection is left alone, and the cleanup below cancels the check
+    // the moment the sheet re-opens or the parameter changes — which is what
+    // makes re-opening within the window safe.
+    const verify = window.setTimeout(() => {
+      if (!documentSelectionSurvivedClose(currentUrlSearch(), docParam)) {
+        return;
+      }
+      writeUrlState((params) => params.delete("doc"));
+    }, CLOSE_TRAVERSAL_GRACE_MS);
+    return () => window.clearTimeout(verify);
+  }, [
+    authLoading,
+    coachOwnsDocument,
+    coachLaunch?.closeIntent,
+    detailOpen,
+    docParam,
+    moduleEnabled,
+    pathname,
+  ]);
+
+  // Hover/focus intent prefetches the detail METADATA (never the blob —
+  // the blob fetch starts when the sheet mounts its preview element).
+  const prefetchDetail = useCallback(
+    (id: string) => {
+      void queryClient.prefetchQuery({
+        queryKey: queryKeys.inboundDocument(id),
+        queryFn: () =>
+          apiGet<InboundDocumentDetailDto>(`/api/documents/inbound/${id}`),
+        staleTime: 30_000,
+      });
+    },
+    [queryClient],
+  );
+
+  return {
+    detailId,
+    detailOpen,
+    openDetail,
+    handleDetailOpenChange,
+    prefetchDetail,
+  };
+}
diff --git a/src/components/documents/vault/use-vault-filter-choices.ts b/src/components/documents/vault/use-vault-filter-choices.ts
new file mode 100644
index 000000000..3c40963ec
--- /dev/null
+++ b/src/components/documents/vault/use-vault-filter-choices.ts
@@ -0,0 +1,138 @@
+"use client";
+
+import { useMemo } from "react";
+
+import {
+  bodySiteText,
+  encounterKindText,
+} from "@/components/encounters/encounter-labels";
+import type { EncounterKind } from "@/generated/prisma/client";
+import { useEncounters } from "@/hooks/use-encounters";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type {
+  DocumentUsageDto,
+  InboundDocumentDto,
+} from "@/lib/validations/inbound-documents";
+
+import type { ConditionChip } from "../document-filter-bar";
+import {
+  buildProcedureChoices,
+  documentDateKey,
+  type ProcedureFilterChoice,
+} from "../vault-utils";
+
+import type { VaultFilters } from "./use-vault-filters";
+
+/**
+ * How many visits the bulk bar offers. A menu is a picker, not a history: past
+ * the first screenful a person scrolls rather than reads, and filing against a
+ * visit older than this belongs on the visit's own sheet.
+ */
+const BULK_VISIT_OPTIONS = 12;
+
+/**
+ * The choices the filter bar and the bulk bar offer: conditions and
+ * procedures with linked documents, the visits a selection can be filed
+ * against, and the years present.
+ */
+export function useVaultFilterChoices({
+  filters,
+  usage,
+  episodes,
+  documents,
+  timezone,
+  inSharedRecord,
+  sections,
+}: {
+  filters: VaultFilters["filters"];
+  usage: DocumentUsageDto | undefined;
+  episodes: Array<{ id: string; label: string }> | undefined;
+  documents: InboundDocumentDto[];
+  timezone: string;
+  inSharedRecord: boolean;
+  sections: readonly string[] | null;
+}) {
+  const { t } = useTranslations();
+  const format = useFormatters();
+  // Condition chips: every episode carrying at least one live document
+  // link, served by the usage endpoint (NOT derived from the loaded corpus
+  // — an old linked document pages deep must still surface its chip), plus
+  // the actively filtered episode (a deep link must always show its own
+  // chip, even when its last link was just removed).
+  const conditionChips = useMemo<ConditionChip[]>(() => {
+    const byId = new Map<string, string>();
+    for (const link of usage?.linkedEpisodes ?? []) {
+      byId.set(link.episodeId, link.name);
+    }
+    if (filters.episodeId && !byId.has(filters.episodeId)) {
+      const episode = episodes?.find((e) => e.id === filters.episodeId);
+      byId.set(filters.episodeId, episode?.label ?? filters.episodeId);
+    }
+    return [...byId.entries()]
+      .map(([episodeId, name]) => ({ episodeId, name }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [usage?.linkedEpisodes, filters.episodeId, episodes]);
+
+  // The visits the bulk bar can file a selection against: the account's own,
+  // read through the same list the checkups page shows. Labelled here rather
+  // than in the bar so the label uses the reader's locale for the kind and the
+  // reader's timezone for the date — both presentation, both this side's job.
+  const visits = useEncounters(
+    !inSharedRecord || sections === null || sections.includes("profile"),
+  );
+  const bulkEncounterOptions = useMemo(
+    () =>
+      [...(visits.data?.upcoming ?? []), ...(visits.data?.past ?? [])]
+        .slice(0, BULK_VISIT_OPTIONS)
+        .map((visit) => ({
+          id: visit.id,
+          label: `${
+            visit.practitioner?.name ??
+            encounterKindText(t, visit.kind as EncounterKind)
+          }, ${format.date(visit.occurredAt)}`,
+        })),
+    [visits.data, t, format],
+  );
+
+  // Procedure choices: every procedure carrying at least one live document
+  // link, served by the usage endpoint for the same reason as the condition
+  // chips, plus the actively filtered visit when it is a procedure (see
+  // `buildProcedureChoices`).
+  const procedureChips = useMemo<ProcedureFilterChoice[]>(() => {
+    const activeVisit = filters.encounterId
+      ? [...(visits.data?.upcoming ?? []), ...(visits.data?.past ?? [])].find(
+          (v) => v.id === filters.encounterId && v.kind === "PROCEDURE",
+        )
+      : undefined;
+    return buildProcedureChoices(
+      usage?.linkedProcedures ?? [],
+      activeVisit
+        ? {
+            encounterId: activeVisit.id,
+            occurredAt: activeVisit.occurredAt,
+            reason: activeVisit.reason,
+            bodySite: activeVisit.bodySite,
+            laterality: activeVisit.laterality,
+            practitionerName: activeVisit.practitioner?.name ?? null,
+          }
+        : null,
+      {
+        kindName: encounterKindText(t, "PROCEDURE"),
+        siteText: (site, laterality) => bodySiteText(t, site, laterality),
+        formatDate: (iso) => format.date(iso),
+      },
+    );
+  }, [usage?.linkedProcedures, filters.encounterId, visits.data, t, format]);
+
+  // Year segmenter: years present in the loaded corpus (+ the active year).
+  const years = useMemo(() => {
+    const set = new Set<number>();
+    for (const doc of documents) {
+      set.add(Number(documentDateKey(doc, timezone).slice(0, 4)));
+    }
+    if (filters.year !== undefined) set.add(filters.year);
+    return [...set].sort((a, b) => b - a);
+  }, [documents, filters.year, timezone]);
+
+  return { conditionChips, bulkEncounterOptions, procedureChips, years };
+}
diff --git a/src/components/documents/vault/use-vault-filters.ts b/src/components/documents/vault/use-vault-filters.ts
new file mode 100644
index 000000000..ab1aa697f
--- /dev/null
+++ b/src/components/documents/vault/use-vault-filters.ts
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { useUrlFilterSync } from "@/hooks/use-url-filter-sync";
+import type { InboundDocumentKindValue } from "@/lib/validations/inbound-documents";
+
+import { parseVaultSearchParams, vaultFiltersToSearch } from "../vault-utils";
+
+/**
+ * The vault's URL-owned filter state (`?q&kind&episode&encounter&year`), so
+ * every view is shareable, back-button-safe and deep-linkable. The search
+ * draft debounces into the URL and `/` focuses it from anywhere on the page.
+ */
+export function useVaultFilters() {
+  // The parse/serialise round trip stays in `vault-utils.ts`; the router
+  // plumbing lives in the shared hook (which the measurements and mood
+  // lists reuse — this surface is the pattern's origin).
+  const { filters, applyFilters } = useUrlFilterSync({
+    parse: parseVaultSearchParams,
+    serialise: vaultFiltersToSearch,
+  });
+
+  // Search draft debounces into the URL (200 ms); an external URL change
+  // (back button, deep link) re-seeds the draft — render-phase derived-state
+  // adjustment, not an effect.
+  const [searchDraft, setSearchDraft] = useState(filters.q ?? "");
+  const [lastUrlQ, setLastUrlQ] = useState(filters.q ?? "");
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  if ((filters.q ?? "") !== lastUrlQ) {
+    setLastUrlQ(filters.q ?? "");
+    setSearchDraft(filters.q ?? "");
+  }
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const trimmed = searchDraft.trim();
+      if (trimmed === (filters.q ?? "")) return;
+      // Live filters, not the rendered ones a "Clear filters" just removed.
+      applyFilters(
+        (current) =>
+          trimmed === (current.q ?? "")
+            ? current
+            : { ...current, q: trimmed === "" ? undefined : trimmed },
+        "replace",
+      );
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [searchDraft, filters, applyFilters]);
+
+  // `/` focuses the search from anywhere on the page.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey)
+        return;
+      const target = event.target as HTMLElement | null;
+      if (
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT" ||
+          target.isContentEditable)
+      ) {
+        return;
+      }
+      event.preventDefault();
+      searchInputRef.current?.focus();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  // Every facet toggles against the live filters (`applyFilters` updater).
+  const toggleKind = (kind: InboundDocumentKindValue) => {
+    applyFilters((current) => {
+      const kinds = new Set(current.kinds ?? []);
+      if (kinds.has(kind)) kinds.delete(kind);
+      else kinds.add(kind);
+      return {
+        ...current,
+        kinds: kinds.size > 0 ? [...kinds].sort() : undefined,
+      };
+    }, "push");
+  };
+
+  const toggleEpisode = (episodeId: string) => {
+    applyFilters(
+      (current) => ({
+        ...current,
+        episodeId: current.episodeId === episodeId ? undefined : episodeId,
+      }),
+      "push",
+    );
+  };
+
+  const toggleEncounter = (encounterId: string) => {
+    applyFilters(
+      (current) => ({
+        ...current,
+        encounterId:
+          current.encounterId === encounterId ? undefined : encounterId,
+      }),
+      "push",
+    );
+  };
+
+  const toggleYear = (year: number) => {
+    applyFilters(
+      (current) => ({
+        ...current,
+        year: current.year === year ? undefined : year,
+      }),
+      "push",
+    );
+  };
+
+  const clearFilters = () => {
+    setSearchDraft("");
+    applyFilters({}, "push");
+  };
+
+  return {
+    filters,
+    searchDraft,
+    setSearchDraft,
+    searchInputRef,
+    toggleKind,
+    toggleEpisode,
+    toggleEncounter,
+    toggleYear,
+    clearFilters,
+  };
+}
+
+export type VaultFilters = ReturnType<typeof useVaultFilters>;
diff --git a/src/components/documents/vault/use-vault-library.ts b/src/components/documents/vault/use-vault-library.ts
new file mode 100644
index 000000000..c4afaa199
--- /dev/null
+++ b/src/components/documents/vault/use-vault-library.ts
@@ -0,0 +1,203 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { useIllnessEpisodes } from "@/components/illness/use-illness";
+import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
+import { apiGet } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { useDocumentsLayout } from "@/lib/queries/use-documents-layout";
+import { queryKeys } from "@/lib/query-keys";
+import type {
+  DocumentUsageDto,
+  InboundDocumentDto,
+} from "@/lib/validations/inbound-documents";
+
+import { useReindexAll } from "../use-content-index";
+import { useDocumentUpload } from "../use-document-upload";
+import { usePageFileDrop } from "../use-page-file-drop";
+import { buildVaultListApiSearch, hasProcessingDocument } from "../vault-utils";
+
+import type { VaultFilters } from "./use-vault-filters";
+import { useVaultFilterChoices } from "./use-vault-filter-choices";
+
+interface ListPage {
+  documents: InboundDocumentDto[];
+  nextCursor: string | null;
+}
+
+/**
+ * Everything the vault shows: the usage gauge, the paged list for the active
+ * filters, the reader's layout, the upload queue and its intake paths, the
+ * corpus-index affordance, and the filter choices (conditions, procedures,
+ * visits for the bulk bar, years).
+ */
+export function useVaultLibrary({
+  filters,
+  moduleEnabled,
+  canManageDocuments,
+  inSharedRecord,
+  sections,
+  timezone,
+}: {
+  filters: VaultFilters["filters"];
+  moduleEnabled: boolean;
+  canManageDocuments: boolean;
+  inSharedRecord: boolean;
+  sections: readonly string[] | null;
+  timezone: string;
+}) {
+  const { t } = useTranslations();
+  const usage = useQuery({
+    queryKey: queryKeys.inboundDocumentUsage(),
+    enabled: moduleEnabled,
+    queryFn: () => apiGet<DocumentUsageDto>("/api/documents/inbound/usage"),
+  });
+
+  const list = useInfiniteQuery({
+    queryKey: queryKeys.inboundDocumentList(filters),
+    enabled: moduleEnabled,
+    queryFn: ({ pageParam }) =>
+      apiGet<ListPage>(
+        `/api/documents/inbound?${buildVaultListApiSearch(filters, pageParam)}`,
+      ),
+    initialPageParam: null as string | null,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    // .x — the auto-index (+ optional AI summary) job that lands right
+    // after upload is fire-and-forget server-side; nothing pushes its
+    // completion to the client. Poll while any loaded document is still
+    // inside its recent-upload processing window (see `hasProcessingDocument`
+    // — bounded, so an old/permanently-unindexed document never keeps this
+    // polling forever) so the card's "Processing…" chip clears on its own
+    // once the index lands, without a manual refresh.
+    refetchInterval: (query) => {
+      const pages = query.state.data?.pages ?? [];
+      const docs = pages.flatMap((p) => p.documents);
+      return hasProcessingDocument(docs) ? 4000 : false;
+    },
+  });
+
+  const documents = useMemo(
+    () => list.data?.pages.flatMap((p) => p.documents) ?? [],
+    [list.data],
+  );
+
+  // The reader's presentation (cards / list, stacked / flowing months),
+  // persisted per user and changed behind the wrench.
+  const { layout, isLayoutLoading } = useDocumentsLayout(moduleEnabled);
+
+  // Pull-to-refresh parity with labs/checkups/mood/
+  // measurements/medications. The vault is one of the sharpest PWA-resume-
+  // staleness surfaces named in the audit: a document indexed server-side
+  // while the tab was backgrounded (auto-index / AI summary) otherwise
+  // stays invisible until the bounded processing poll above happens to
+  // catch it or the user navigates away and back.
+  const refreshDocuments = useCallback(
+    () => Promise.all([list.refetch(), usage.refetch()]),
+    [list, usage],
+  );
+  const pull = usePullToRefresh({ onRefresh: refreshDocuments });
+
+  const upload = useDocumentUpload(
+    usage.data ? { maxFileBytes: usage.data.maxFileBytes } : undefined,
+  );
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  // One intake path for every source (picker, zone drop, page-wide drop,
+  // clipboard paste): pre-links to the active episode filter and feeds the
+  // sr-only live region — the drop overlay itself is decorative.
+  const [uploadAnnouncement, setUploadAnnouncement] = useState("");
+  const enqueueRef = useRef(upload.enqueue);
+  useEffect(() => {
+    enqueueRef.current = upload.enqueue;
+  }, [upload.enqueue]);
+  const episodeIdFilter = filters.episodeId;
+  const encounterIdFilter = filters.encounterId;
+  const enqueueFiles = useCallback(
+    (files: File[]) => {
+      if (files.length === 0) return;
+      enqueueRef.current(files, {
+        episodeId: episodeIdFilter,
+        encounterId: encounterIdFilter,
+      });
+      setUploadAnnouncement(
+        t("documents.upload.queuedAnnouncement", { count: files.length }),
+      );
+    },
+    [episodeIdFilter, encounterIdFilter, t],
+  );
+  const { dropActive } = usePageFileDrop(
+    canManageDocuments ? enqueueFiles : undefined,
+  );
+
+  const episodes = useIllnessEpisodes(
+    true,
+    !inSharedRecord || sections === null || sections.includes("illness"),
+  );
+
+  // Content-search coverage: fire the corpus backfill when indexing is
+  // available and some documents are not yet searchable. The list search
+  // already unions content matches server-side — this only surfaces the hint
+  // and the "index all" affordance from the usage gauge.
+  const reindexAll = useReindexAll();
+  const contentIndex = usage.data?.contentIndex;
+  const canIndexContent = contentIndex?.enabled ?? false;
+  const showIndexAll =
+    canManageDocuments &&
+    canIndexContent &&
+    contentIndex !== undefined &&
+    contentIndex.totalCount > 0 &&
+    contentIndex.indexedCount < contentIndex.totalCount;
+  const handleIndexAll = useCallback(() => {
+    reindexAll.mutate(undefined, {
+      onSuccess: (result) =>
+        toast.success(
+          result.enqueued > 0
+            ? t("documents.contentIndex.indexAllQueued", {
+                count: result.enqueued,
+              })
+            : t("documents.contentIndex.indexAllNothing"),
+        ),
+      onError: (failure) =>
+        showErrorToast(t("documents.contentIndex.indexAllError"), {
+          cause: failure,
+        }),
+    });
+  }, [reindexAll, t]);
+
+  const { conditionChips, bulkEncounterOptions, procedureChips, years } =
+    useVaultFilterChoices({
+      filters,
+      usage: usage.data,
+      episodes: episodes.data,
+      documents,
+      timezone,
+      inSharedRecord,
+      sections,
+    });
+
+  return {
+    usage,
+    list,
+    documents,
+    layout,
+    isLayoutLoading,
+    pull,
+    upload,
+    uploadInputRef,
+    uploadAnnouncement,
+    enqueueFiles,
+    dropActive,
+    episodes,
+    reindexAll,
+    showIndexAll,
+    handleIndexAll,
+    conditionChips,
+    bulkEncounterOptions,
+    procedureChips,
+    years,
+  };
+}
diff --git a/src/components/documents/vault/use-vault-selection.ts b/src/components/documents/vault/use-vault-selection.ts
new file mode 100644
index 000000000..dd3debf9a
--- /dev/null
+++ b/src/components/documents/vault/use-vault-selection.ts
@@ -0,0 +1,132 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import type { InboundDocumentDto } from "@/lib/validations/inbound-documents";
+
+import {
+  expandRangeSelection,
+  resolveBulkShareDocuments,
+  SHARE_LINK_MAX_DOCUMENTS,
+} from "../vault-utils";
+
+import { useVaultBulk } from "./use-vault-bulk";
+
+/**
+ * The selection (with shift-click ranges, cleared by Escape unless a dialog
+ * or menu owns the key) and what can be done with it: re-file, link, share
+ * as one link, and delete, which always asks first and offers one undo for
+ * the whole batch.
+ */
+export function useVaultSelection(documents: InboundDocumentDto[]) {
+  const { t } = useTranslations();
+  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+  // Anchor for shift-click ranges: the last plainly-toggled id.
+  const rangeAnchorRef = useRef<string | null>(null);
+  const toggleSelected = useCallback(
+    (id: string, range?: boolean) => {
+      setSelectedIds((prev) => {
+        if (range) {
+          return expandRangeSelection(
+            documents.map((d) => d.id),
+            prev,
+            rangeAnchorRef.current,
+            id,
+          );
+        }
+        const next = new Set(prev);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        return next;
+      });
+      if (!range) rangeAnchorRef.current = id;
+    },
+    [documents],
+  );
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+    rangeAnchorRef.current = null;
+  }, []);
+
+  // Escape clears the selection — unless a dialog/popover owns the key.
+  useEffect(() => {
+    if (selectedIds.size === 0) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      const target = event.target as HTMLElement | null;
+      if (target?.closest('[role="dialog"],[role="menu"]')) return;
+      clearSelection();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [selectedIds.size, clearSelection]);
+
+  const { bulk, runBulk, deleteBulk } = useVaultBulk({
+    selectedIds,
+    clearSelection,
+  });
+
+  // ── Delete confirmation ───────────────────────────────────────────────
+  // Every way of deleting from the vault page — the bulk bar's Delete and a
+  // card's Delete key — comes through here and asks first. Nothing on this
+  // page calls `deleteBulk` directly.
+  const [pendingDeleteIds, setPendingDeleteIds] = useState<string[] | null>(
+    null,
+  );
+  const requestDelete = useCallback((ids: string[]) => {
+    if (ids.length > 0) setPendingDeleteIds(ids);
+  }, []);
+  const confirmDelete = useCallback(() => {
+    if (pendingDeleteIds) deleteBulk(pendingDeleteIds);
+    setPendingDeleteIds(null);
+  }, [pendingDeleteIds, deleteBulk]);
+
+  // ── Bulk share ────────────────────────────────────────────────────────
+  // ONE documents-only link for the whole selection (the share model carries
+  // up to SHARE_MAX_DOCUMENTS docs per link). The titles come from the loaded
+  // corpus — a selected id is always a rendered row. Over the cap we surface a
+  // hint and refuse rather than silently dropping docs from the link.
+  const [bulkShareOpen, setBulkShareOpen] = useState(false);
+  const [bulkShareDocs, setBulkShareDocs] = useState<
+    { id: string; title: string }[]
+  >([]);
+  const openBulkShare = useCallback(() => {
+    const resolved = resolveBulkShareDocuments(
+      documents,
+      selectedIds,
+      t("documents.card.untitled"),
+    );
+    if (resolved.overCap) {
+      showErrorToast(
+        t("documents.bulk.shareTooMany", { max: SHARE_LINK_MAX_DOCUMENTS }),
+      );
+      return;
+    }
+    if (resolved.documents.length === 0) return;
+    setBulkShareDocs(resolved.documents);
+    setBulkShareOpen(true);
+  }, [documents, selectedIds, t]);
+
+  return {
+    selectedIds,
+    toggleSelected,
+    clearSelection,
+    bulk,
+    runBulk,
+    pendingDeleteIds,
+    setPendingDeleteIds,
+    requestDelete,
+    confirmDelete,
+    bulkShareOpen,
+    setBulkShareOpen,
+    bulkShareDocs,
+    openBulkShare,
+  };
+}
diff --git a/src/components/documents/vault/vault-drop-overlay.tsx b/src/components/documents/vault/vault-drop-overlay.tsx
new file mode 100644
index 000000000..7deb67648
--- /dev/null
+++ b/src/components/documents/vault/vault-drop-overlay.tsx
@@ -0,0 +1,30 @@
+import { UploadCloud } from "lucide-react";
+
+import { useTranslations } from "@/lib/i18n/context";
+
+/**
+ * The page-wide drop overlay. Pure decoration (aria-hidden): the intake
+ * announces through the page's live region.
+ */
+export function VaultDropOverlay() {
+  const { t } = useTranslations();
+  return (
+    <div
+      aria-hidden
+      data-slot="document-drop-overlay"
+      className="bg-background/80 fixed inset-0 z-50 p-4 backdrop-blur-sm md:p-8"
+    >
+      <div className="border-primary bg-primary/5 flex h-full items-center justify-center rounded-xl border-2 border-dashed">
+        <div className="flex flex-col items-center gap-2 px-4 text-center">
+          <UploadCloud className="text-primary size-8" aria-hidden />
+          <p className="text-base font-medium">
+            {t("documents.dropOverlay.title")}
+          </p>
+          <p className="text-muted-foreground text-xs">
+            {t("documents.dropOverlay.hint")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/documents/vault/vault-page-actions.tsx b/src/components/documents/vault/vault-page-actions.tsx
new file mode 100644
index 000000000..e2b511676
--- /dev/null
+++ b/src/components/documents/vault/vault-page-actions.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import type { RefObject } from "react";
+import Link from "next/link";
+import { Upload, Wrench } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { useTranslations } from "@/lib/i18n/context";
+
+import { ImportFromSourceButton } from "../sources/import-from-source-button";
+
+/**
+ * The page header's actions (rendered only when one of them applies): the display-settings wrench (the caller's own
+ * settings, so never inside somebody else's record), the source import and
+ * the upload button, which an empty vault's empty state carries instead.
+ */
+export function VaultPageActions({
+  canManageDocuments,
+  inSharedRecord,
+  hideUpload,
+  uploadInputRef,
+}: {
+  canManageDocuments: boolean;
+  inSharedRecord: boolean;
+  hideUpload: boolean;
+  uploadInputRef: RefObject<HTMLInputElement | null>;
+}) {
+  const { t } = useTranslations();
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {/* The wrench left of the primary action, as on the illness
+        journal: it opens this vault's display settings. `/settings`
+        is the caller's own, so it never shows inside somebody
+        else's record. */}
+      {!inSharedRecord ? (
+        <Button
+          asChild
+          variant="ghost"
+          size="icon"
+          className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+        >
+          <Link
+            href="/settings/layout/documents"
+            aria-label={t("documents.customize")}
+            title={t("documents.customize")}
+            data-slot="documents-customize"
+          >
+            <Wrench className="size-4" aria-hidden />
+          </Link>
+        </Button>
+      ) : null}
+      {canManageDocuments ? (
+        <>
+          {/* Renders only with a connected Paperless-ngx or Papra. */}
+          <ImportFromSourceButton className="min-h-11 sm:min-h-9" />
+          {/* An empty vault's empty state carries the upload. */}
+          {hideUpload ? null : (
+            <Button
+              className="min-h-11 sm:min-h-9"
+              onClick={() => uploadInputRef.current?.click()}
+            >
+              <Upload className="size-4" aria-hidden />
+              {t("documents.pageUpload")}
+            </Button>
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/forms/__tests__/use-seeded-form-dismissal.test.ts b/src/components/forms/__tests__/use-seeded-form-dismissal.test.ts
index 7d499c625..3afb798c2 100644
--- a/src/components/forms/__tests__/use-seeded-form-dismissal.test.ts
+++ b/src/components/forms/__tests__/use-seeded-form-dismissal.test.ts
@@ -322,11 +322,28 @@ describe("safeInternalNavigationTarget", () => {
 });
 
 describe("seeded dismissal migrations", () => {
-  it.each([
-    "measurements/measurement-list.tsx",
-    "mood/mood-list.tsx",
-    "labs/lab-history-list.tsx",
-  ])(
+  it("routes every measurement-list edit exit through the shared contract", () => {
+    // The list's edit lives in its own hook and sheet.
+    const hook = readFileSync(
+      new URL(
+        "../../measurements/list/use-measurement-edit.ts",
+        import.meta.url,
+      ),
+      "utf8",
+    );
+    const sheet = readFileSync(
+      new URL(
+        "../../measurements/list/measurement-edit-sheet.tsx",
+        import.meta.url,
+      ),
+      "utf8",
+    );
+    expect(hook).toContain("useSeededFormDismissal({");
+    expect(hook).toContain("editDismissal.requestClose(dismissEdit)");
+    expect(sheet).toContain("<SeededFormDiscardDialog");
+  });
+
+  it.each(["mood/mood-list.tsx", "labs/lab-history-list.tsx"])(
     "routes every %s edit exit through the shared contract",
     (relativePath) => {
       const source = readFileSync(
diff --git a/src/components/measurement-reminders/__tests__/vorsorge-section.test.tsx b/src/components/measurement-reminders/__tests__/vorsorge-section.test.tsx
index cd520529c..fc0608642 100644
--- a/src/components/measurement-reminders/__tests__/vorsorge-section.test.tsx
+++ b/src/components/measurement-reminders/__tests__/vorsorge-section.test.tsx
@@ -33,7 +33,8 @@ vi.mock("@/hooks/use-measurement-reminders", () => ({
   }),
 }));
 
-import { VorsorgeSection, postponeOffsetTargets } from "../vorsorge-section";
+import { VorsorgeSection } from "../vorsorge-section";
+import { postponeOffsetTargets } from "../checkups/postpone-sheet";
 import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
 
 /**
diff --git a/src/components/measurement-reminders/checkups/checkup-card.tsx b/src/components/measurement-reminders/checkups/checkup-card.tsx
new file mode 100644
index 000000000..94777114b
--- /dev/null
+++ b/src/components/measurement-reminders/checkups/checkup-card.tsx
@@ -0,0 +1,710 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  Activity,
+  CalendarClock,
+  CalendarPlus,
+  CheckCircle2,
+  LineChart,
+  MoreVertical,
+  Pencil,
+  Trash2,
+} from "lucide-react";
+
+import { MedicationCardHeader } from "@/components/medications/medication-card-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Progress } from "@/components/ui/progress";
+import type { MeasurementReminder } from "@/hooks/use-measurement-reminders";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import {
+  useDisplayTimezone,
+  useFormatters,
+  useTranslations,
+} from "@/lib/i18n/context";
+import { relativeCalendarDate } from "@/lib/i18n/relative-time";
+import {
+  isOverdueDue,
+  relativeDueKey,
+} from "@/lib/measurement-reminders/due-day";
+import { isScreeningReminderType } from "@/lib/measurement-reminders/screening";
+import { cn } from "@/lib/utils";
+
+import { CheckupPostponeSheet } from "./postpone-sheet";
+import { DAY_MS, resolveReminderLabel } from "./reminder-form";
+
+/**
+ * Progress through the current interval toward the next due date, 0 to 100:
+ * an honest "on track / due" signal without a fabricated streak. Null without
+ * an interval to measure against (RRULE or unset).
+ */
+function intervalProgress(
+  reminder: MeasurementReminder,
+  now: number,
+): number | null {
+  if (reminder.intervalDays == null || reminder.nextDueAt == null) return null;
+  const dueMs = new Date(reminder.nextDueAt).getTime();
+  if (Number.isNaN(dueMs)) return null;
+  const windowMs = reminder.intervalDays * DAY_MS;
+  const startMs = dueMs - windowMs;
+  const elapsed = now - startMs;
+  return Math.max(0, Math.min(100, Math.round((elapsed / windowMs) * 100)));
+}
+
+interface CheckupCardProps {
+  reminder: MeasurementReminder;
+  now: number;
+  view: "cards" | "list";
+  onPrimaryAction: () => void;
+  /** Open the visit sheet with this checkup pre-filled, closing it on save. */
+  onFileVisit: () => void;
+  onRemove: () => void;
+  onEdit: () => void;
+  /** An honest skip; the server restarts the interval. */
+  onSkip: () => void;
+  /** Snooze to a calendar day (ISO YYYY-MM-DD). */
+  onSnooze: (until: string) => void;
+  busy: boolean;
+}
+
+/** The owner's card menu: edit, the readings for a typed reminder, delete. */
+function CheckupMenu({
+  reminder,
+  isLinked,
+  busy,
+  onEdit,
+  onRequestDelete,
+}: {
+  reminder: MeasurementReminder;
+  isLinked: boolean;
+  busy: boolean;
+  onEdit: () => void;
+  onRequestDelete: () => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-lg"
+          className="sm:size-10"
+          aria-label={t("common.moreOptions")}
+        >
+          <MoreVertical className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuItem onClick={onEdit} disabled={busy}>
+          <Pencil className="mr-2 h-4 w-4" />
+          {t("measurementReminders.edit")}
+        </DropdownMenuItem>
+        {/* Put postpone in the kebab. It reads better beside
+            the primary action, the way the medication card carries "taken"
+            and "skipped" side by side, so it is a card button now — see
+            `postponeButton` below. */}
+        {/* Jump to the measurements list pre-filtered to
+            this reminder's type. Only for measurement-linked reminders; a
+            free-text reminder has no readings to show. */}
+        {isLinked && (
+          <DropdownMenuItem asChild>
+            <Link
+              href={`/measurements?type=${encodeURIComponent(
+                reminder.measurementType as string,
+              )}`}
+            >
+              <LineChart className="mr-2 h-4 w-4" />
+              {t("measurementReminders.showMeasurements")}
+            </Link>
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem disabled={busy} onSelect={onRequestDelete}>
+          <Trash2 className="mr-2 h-4 w-4" />
+          {t("measurementReminders.delete")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** "Pushed back until …" / "skipped on …", muted, never a card colour. */
+function SkipSnoozeMeta({
+  reminder,
+  isSnoozed,
+  isSkippedCycle,
+}: {
+  reminder: MeasurementReminder;
+  isSnoozed: boolean;
+  isSkippedCycle: boolean;
+}) {
+  const fmt = useFormatters();
+  const { t } = useTranslations();
+  return (
+    <div
+      className="text-muted-foreground space-y-0.5 text-xs"
+      data-slot="vorsorge-skip-snooze-meta"
+    >
+      {isSnoozed && reminder.snoozedUntil && (
+        <p>
+          {t("measurementReminders.snoozedUntil", {
+            date: fmt.date(new Date(reminder.snoozedUntil)),
+          })}
+        </p>
+      )}
+      {isSkippedCycle && reminder.lastSkippedAt && (
+        <p>
+          {t("measurementReminders.skippedOn", {
+            date: fmt.date(new Date(reminder.lastSkippedAt)),
+          })}
+          {reminder.skipCount > 1
+            ? ` · ${t("measurementReminders.skipCount", {
+                count: reminder.skipCount,
+              })}`
+            : null}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The next-due and last-done lines in the medication card's grammar, with
+ * measurement wording (never "intake"). Next due is coloured text, never a
+ * tint: today in success, overdue in warning. Last done reads relative
+ * (today, yesterday, else the date), or a dash.
+ */
+function NextLastSlot({
+  reminder,
+  due,
+  displayTz,
+}: {
+  reminder: MeasurementReminder;
+  due: ReturnType<typeof relativeDueKey>;
+  displayTz: string;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const lastValue = reminder.lastSatisfiedAt
+    ? relativeCalendarDate(
+        reminder.lastSatisfiedAt,
+        t,
+        (d) => fmt.date(d),
+        displayTz,
+      )
+    : "—";
+  const dueIsToday = due.key === "measurementReminders.nextDue.today";
+  const dueIsOverdue = isOverdueDue(due);
+  return (
+    <div className="min-h-[2.75rem] space-y-1.5 text-sm">
+      <div className="text-muted-foreground flex items-baseline justify-between gap-3">
+        <span className="min-w-0 flex-shrink truncate font-medium">
+          {t("measurementReminders.nextDueLabel")}
+        </span>
+        <span
+          className={cn(
+            "text-right",
+            dueIsToday
+              ? "text-success font-medium"
+              : dueIsOverdue
+                ? "text-warning font-medium"
+                : "text-foreground",
+          )}
+        >
+          {t(due.key, { days: due.days })}
+        </span>
+      </div>
+      <div className="text-muted-foreground flex items-baseline justify-between gap-3">
+        <span className="min-w-0 flex-shrink truncate font-medium">
+          {t("measurementReminders.lastDoneLabel")}
+        </span>
+        <span className="text-foreground text-right">{lastValue}</span>
+      </div>
+    </div>
+  );
+}
+
+/** The dense list variant of a checkup. */
+function CheckupListRow({
+  reminder,
+  due,
+  categoryLabel,
+  cadenceText,
+  meta,
+  isLinked,
+  isScreening,
+  canManageMeasurements,
+  busy,
+  onPrimaryAction,
+  onPostpone,
+  onFileVisit,
+  headerActions,
+}: {
+  reminder: MeasurementReminder;
+  due: ReturnType<typeof relativeDueKey>;
+  categoryLabel: string;
+  cadenceText: string | null;
+  meta: React.ReactNode;
+  isLinked: boolean;
+  isScreening: boolean;
+  canManageMeasurements: boolean;
+  busy: boolean;
+  onPrimaryAction: () => void;
+  onPostpone: () => void;
+  onFileVisit: () => void;
+  headerActions: React.ReactNode;
+}) {
+  const { t } = useTranslations();
+  return (
+    <Card className="py-3 md:py-3">
+      <CardContent className="flex items-center justify-between gap-3">
+        <div className="min-w-0 space-y-0.5">
+          <div className="flex flex-wrap items-center gap-x-2 text-sm">
+            <span className="truncate font-medium">
+              {resolveReminderLabel(reminder, t)}
+            </span>
+          </div>
+          {/* Cadence rides on the metric line, styled like the
+              metric text (no shaded pill). */}
+          <div className="text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs">
+            <span className="text-foreground">
+              {t(due.key, { days: due.days })}
+            </span>
+            <span>{categoryLabel}</span>
+            {cadenceText ? <span>{cadenceText}</span> : null}
+          </div>
+          {meta}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {/* The same gate the cards branch applies through
+              `primaryButton`. The list branch used to inline its own
+              ungated copy, and which branch a person sees is a per-browser
+              preference that survives the switch — so the identical action
+              was offered or withheld depending on a view toggle. */}
+          {canManageMeasurements ? (
+            <Button
+              type="button"
+              size="sm"
+              className="min-h-11 sm:min-h-9"
+              onClick={onPrimaryAction}
+              disabled={busy}
+            >
+              {isLinked
+                ? t(
+                    isScreening
+                      ? "measurementReminders.startCheckIn"
+                      : "measurementReminders.measureNow",
+                  )
+                : t("measurementReminders.markDone")}
+            </Button>
+          ) : null}
+          {/* Icon-only in the dense list, labelled in the cards branch —
+              the same action either way, never one branch offering what
+              the other withholds. */}
+          {canManageMeasurements ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="size-11 sm:size-9"
+              data-slot="vorsorge-postpone"
+              aria-label={t("measurementReminders.postpone.menuItem")}
+              title={t("measurementReminders.postpone.menuItem")}
+              onClick={onPostpone}
+              disabled={busy}
+            >
+              <CalendarClock className="h-4 w-4" aria-hidden />
+            </Button>
+          ) : null}
+          {/* Free-text reminders only: a typed / screening reminder has no
+              practice visit behind it. */}
+          {canManageMeasurements && !isLinked ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="size-11 sm:size-9"
+              data-slot="vorsorge-file-visit"
+              aria-label={t("measurementReminders.fileVisit")}
+              title={t("measurementReminders.fileVisit")}
+              onClick={onFileVisit}
+              disabled={busy}
+            >
+              <CalendarPlus className="h-4 w-4" aria-hidden />
+            </Button>
+          ) : null}
+          {headerActions}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * The bottom-pinned action row (owner only): the primary action takes the
+ * width it can, postpone sits beside it, as the medication card carries taken
+ * and skipped; a free-text checkup adds "file a visit" below.
+ */
+function CheckupActionRow({
+  isLinked,
+  isScreening,
+  busy,
+  onPrimaryAction,
+  onPostpone,
+  onFileVisit,
+}: {
+  isLinked: boolean;
+  isScreening: boolean;
+  busy: boolean;
+  onPrimaryAction: () => void;
+  onPostpone: () => void;
+  onFileVisit: () => void;
+}) {
+  const { t } = useTranslations();
+  // "File a visit": the second way to close a checkup, beside "done". Only a
+  // free-text reminder (a real practice visit) carries it; a typed one is
+  // satisfied by a reading or a check-in. Saving the visit as DONE satisfies
+  // the reminder through the same forward-only, idempotent path, so doing
+  // both is one satisfaction.
+  const fileVisitButton = !isLinked ? (
+    <Button
+      type="button"
+      variant="outline"
+      className="min-h-11 w-full"
+      data-slot="vorsorge-file-visit"
+      onClick={onFileVisit}
+      disabled={busy}
+    >
+      <CalendarPlus className="h-4 w-4" />
+      {t("measurementReminders.fileVisit")}
+    </Button>
+  ) : null;
+
+  // Postpone beside the primary action, outline against filled, as the
+  // medication card carries taken and skipped.
+  const postponeButton = (
+    <Button
+      type="button"
+      variant="outline"
+      className="min-h-11"
+      data-slot="vorsorge-postpone"
+      onClick={onPostpone}
+      disabled={busy}
+    >
+      <CalendarClock className="h-4 w-4" />
+      {t("measurementReminders.postpone.menuItem")}
+    </Button>
+  );
+
+  const primaryButton = (
+    <Button
+      type="button"
+      className="min-h-11 flex-1"
+      onClick={onPrimaryAction}
+      disabled={busy}
+    >
+      {isLinked ? (
+        <>
+          <Activity className="h-4 w-4" />
+          {t(
+            isScreening
+              ? "measurementReminders.startCheckIn"
+              : "measurementReminders.measureNow",
+          )}
+        </>
+      ) : (
+        <>
+          <CheckCircle2 className="h-4 w-4" />
+          {t("measurementReminders.markDone")}
+        </>
+      )}
+    </Button>
+  );
+
+  return (
+    <div className="mt-auto space-y-1.5 pt-0">
+      <div className="flex gap-2">
+        {primaryButton}
+        {postponeButton}
+      </div>
+      {fileVisitButton}
+    </div>
+  );
+}
+
+/**
+ * The card's body lines: progress through the interval (hidden for RRULE or
+ * unscheduled reminders), the course end and the location.
+ */
+function CheckupDetails({
+  reminder,
+  progress,
+  isDue,
+}: {
+  reminder: MeasurementReminder;
+  progress: number | null;
+  isDue: boolean;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  return (
+    <>
+      {progress != null && (
+        <div className="space-y-1">
+          <div className="text-muted-foreground flex items-center justify-between text-xs">
+            <span>{t("measurementReminders.adherence.label")}</span>
+            <span className="tabular-nums">
+              {isDue
+                ? t("measurementReminders.adherence.due")
+                : t("measurementReminders.adherence.onTrack")}
+            </span>
+          </div>
+          <Progress
+            value={progress}
+            aria-label={t("measurementReminders.adherence.label")}
+          />
+        </div>
+      )}
+
+      {reminder.endsOn && (
+        <p className="text-muted-foreground text-sm">
+          {/* `endsOn` is a real instant (`now + courseDays` at Coach
+              accept, plain timestamptz — NOT a `@db.Date` UTC-midnight
+              calendar date), so the profile-tz formatter renders the
+              correct local course-end day for every zone. */}
+          {t("measurementReminders.until", {
+            date: fmt.date(new Date(reminder.endsOn)),
+          })}
+        </p>
+      )}
+      {reminder.location && (
+        <p className="text-muted-foreground text-sm">
+          {t("measurementReminders.location.prefix", {
+            location: reminder.location,
+          })}
+        </p>
+      )}
+    </>
+  );
+}
+
+export function VorsorgeCard({
+  reminder,
+  now,
+  view,
+  onPrimaryAction,
+  onFileVisit,
+  onRemove,
+  onEdit,
+  onSkip,
+  onSnooze,
+  busy,
+}: CheckupCardProps) {
+  const { t } = useTranslations();
+  const { canManageDomain } = useRecordCapabilities();
+  const canManageMeasurements = canManageDomain("measurements");
+  // The relative "today / yesterday" bucket uses the zone `fmt.date` renders
+  // in (#490), so the next-due phrase and the last-done date agree.
+  const displayTz = useDisplayTimezone();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [postponeOpen, setPostponeOpen] = useState(false);
+  const due = relativeDueKey(reminder.nextDueAt, now, displayTz);
+  const cadence =
+    reminder.intervalDays != null
+      ? t("measurementReminders.cadence.everyNDays", {
+          days: reminder.intervalDays,
+        })
+      : reminder.rrule
+        ? t("measurementReminders.cadence.custom")
+        : "";
+  const isCoach = reminder.origin === "COACH";
+  const isLinked = reminder.measurementType != null;
+  // A screening reminder's action starts the check-in, never numeric entry.
+  const isScreening = isScreeningReminderType(reminder.measurementType);
+  const isDue =
+    due.key === "measurementReminders.nextDue.today" || isOverdueDue(due);
+  const progress = intervalProgress(reminder, now);
+
+  // The category line: the measurement, or "self-planned" for a free-text
+  // exam, with the cadence beside it in the same muted style.
+  const categoryLabel = isLinked
+    ? t(`measurementReminders.types.${reminder.measurementType}`)
+    : t("measurementReminders.selfPlanned");
+  const cadenceText = cadence || null;
+
+  // A typed reminder's heading links to its readings; a free-text one has
+  // none and stays a plain heading.
+  const measurementsHref = isLinked
+    ? `/measurements?type=${encodeURIComponent(reminder.measurementType as string)}`
+    : undefined;
+
+  // Provenance and disabled badges get a row only when one applies.
+  const hasStateBadges = isCoach || !reminder.enabled;
+  const stateBadges = hasStateBadges ? (
+    <>
+      {isCoach && (
+        <Badge variant="outline">{t("measurementReminders.originCoach")}</Badge>
+      )}
+      {!reminder.enabled && (
+        <Badge variant="outline">
+          {t("measurementReminders.disabledBadge")}
+        </Badge>
+      )}
+    </>
+  ) : undefined;
+
+  const headerActions = canManageMeasurements ? (
+    <CheckupMenu
+      reminder={reminder}
+      isLinked={isLinked}
+      busy={busy}
+      onEdit={onEdit}
+      onRequestDelete={() => setConfirmDelete(true)}
+    />
+  ) : null;
+
+  const dialogs = (
+    <>
+      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("measurementReminders.deleteConfirmTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("measurementReminders.deleteConfirmDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={onRemove}>
+              {t("measurementReminders.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      <CheckupPostponeSheet
+        reminder={reminder}
+        now={now}
+        open={postponeOpen}
+        onClose={() => setPostponeOpen(false)}
+        busy={busy}
+        onSnooze={onSnooze}
+        onSkip={onSkip}
+      />
+    </>
+  );
+
+  // The resolved skip and snooze state: clock comparisons only, since the
+  // server resolves and the client compares.
+  const isSnoozed =
+    reminder.snoozedUntil != null &&
+    new Date(reminder.snoozedUntil).getTime() > now;
+  const isSkippedCycle =
+    reminder.lastSkippedAt != null &&
+    (reminder.lastSatisfiedAt == null ||
+      new Date(reminder.lastSkippedAt).getTime() >
+        new Date(reminder.lastSatisfiedAt).getTime());
+  const skipSnoozeMeta =
+    isSnoozed || isSkippedCycle ? (
+      <SkipSnoozeMeta
+        reminder={reminder}
+        isSnoozed={isSnoozed}
+        isSkippedCycle={isSkippedCycle}
+      />
+    ) : null;
+
+  if (view === "list") {
+    return (
+      <>
+        <CheckupListRow
+          reminder={reminder}
+          due={due}
+          categoryLabel={categoryLabel}
+          cadenceText={cadenceText}
+          meta={skipSnoozeMeta}
+          isLinked={isLinked}
+          isScreening={isScreening}
+          canManageMeasurements={canManageMeasurements}
+          busy={busy}
+          onPrimaryAction={onPrimaryAction}
+          onPostpone={() => setPostponeOpen(true)}
+          onFileVisit={onFileVisit}
+          headerActions={headerActions}
+        />
+        {dialogs}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Card className="h-full gap-3 md:gap-3">
+        <MedicationCardHeader
+          name={resolveReminderLabel(reminder, t)}
+          dose=""
+          categoryLabel={categoryLabel}
+          metricMeta={cadenceText}
+          href={measurementsHref}
+          linkLabel={
+            measurementsHref
+              ? t("measurementReminders.showMeasurements")
+              : undefined
+          }
+          stateBadges={stateBadges}
+          actions={headerActions}
+        />
+        <CardContent className="flex h-full flex-col space-y-3.5">
+          <NextLastSlot reminder={reminder} due={due} displayTz={displayTz} />
+          {skipSnoozeMeta}
+
+          {/* Light gamification: progress through the
+              current interval toward next-due, reusing the medication card's
+              Progress building block. Honest "on track / due" signal without
+              a fabricated streak; hidden for RRULE / unscheduled reminders. */}
+          <CheckupDetails
+            reminder={reminder}
+            progress={progress}
+            isDue={isDue}
+          />
+
+          {/* Bottom-pinned action row: the primary action takes the width it
+              can, postpone sits beside it at its natural size — the same
+              two-button shape the medication card uses for taken / skipped. */}
+          {canManageMeasurements ? (
+            <CheckupActionRow
+              isLinked={isLinked}
+              isScreening={isScreening}
+              busy={busy}
+              onPrimaryAction={onPrimaryAction}
+              onPostpone={() => setPostponeOpen(true)}
+              onFileVisit={onFileVisit}
+            />
+          ) : null}
+        </CardContent>
+      </Card>
+
+      {dialogs}
+    </>
+  );
+}
diff --git a/src/components/measurement-reminders/checkups/postpone-sheet.tsx b/src/components/measurement-reminders/checkups/postpone-sheet.tsx
new file mode 100644
index 000000000..e13d24e37
--- /dev/null
+++ b/src/components/measurement-reminders/checkups/postpone-sheet.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { DateField } from "@/components/ui/date-field";
+import { Label } from "@/components/ui/label";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import type { MeasurementReminder } from "@/hooks/use-measurement-reminders";
+import { useDisplayTimezone, useTranslations } from "@/lib/i18n/context";
+import { shiftDateKey } from "@/lib/tz/format";
+
+import { DAY_MS } from "./reminder-form";
+
+/** The offsets the postpone sheet's quick chips offer, in days. */
+const SNOOZE_CHIP_DAYS = [7, 30, 90] as const;
+
+/**
+ * The local calendar day (ISO `yyyy-MM-dd`) an instant falls on in `tz`.
+ * Snooze is day-precision by contract: the server resolves the day to the
+ * reminder's notifyHour in the profile timezone.
+ */
+function isoDayInTz(atMs: number, tz: string): string {
+  return new Date(atMs).toLocaleDateString("sv-SE", { timeZone: tz });
+}
+
+/**
+ * The dates the postpone sheet's quick chips resolve to, on the display zone's
+ * calendar.
+ *
+ * Its own function because a chip labelled "+7 days" has to write the day that
+ * is actually seven days out, including across a DST shift, where adding
+ * 7 × 86 400 000 ms lands an hour either side of midnight and so can write the
+ * neighbouring date.
+ */
+export function postponeOffsetTargets(
+  nowMs: number,
+  tz: string,
+): { days: number; date: string }[] {
+  // Count days on the calendar, not in milliseconds: `now + 7 * DAY_MS` keeps
+  // the wall-clock time only where the offset stays constant, and a DST shift
+  // in between moves it an hour, which flips the date for anyone acting near
+  // midnight. Anchoring today's local date at UTC noon and stepping whole
+  // UTC days keeps every offset on the day its label names.
+  const today = isoDayInTz(nowMs, tz);
+  return SNOOZE_CHIP_DAYS.map((days) => ({
+    days,
+    date: shiftDateKey(today, days),
+  }));
+}
+
+/**
+ * The postpone sheet: quick chips and a date to push the checkup back to,
+ * and set apart below them the honest skip (let this cycle go and restart
+ * the rhythm) with its own confirmation.
+ */
+export function CheckupPostponeSheet({
+  reminder,
+  now,
+  open,
+  onClose,
+  busy,
+  onSnooze,
+  onSkip,
+}: {
+  reminder: MeasurementReminder;
+  now: number;
+  open: boolean;
+  onClose: () => void;
+  busy: boolean;
+  onSnooze: (until: string) => void;
+  onSkip: () => void;
+}) {
+  const { t } = useTranslations();
+  // The day boundary follows the zone dates render in.
+  const displayTz = useDisplayTimezone();
+  const [snoozeDate, setSnoozeDate] = useState("");
+  const [confirmSkip, setConfirmSkip] = useState(false);
+  const closePostpone = () => {
+    onClose();
+    setSnoozeDate("");
+    setConfirmSkip(false);
+  };
+  const minSnoozeDate = isoDayInTz(now + DAY_MS, displayTz);
+  return (
+    <>
+      <ResponsiveSheet
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) closePostpone();
+        }}
+        title={t("measurementReminders.postpone.title")}
+        description={t("measurementReminders.postpone.description")}
+        footer={
+          <>
+            <Button type="button" variant="outline" onClick={closePostpone}>
+              {t("common.cancel")}
+            </Button>
+            <Button
+              type="button"
+              disabled={!snoozeDate || busy}
+              onClick={() => {
+                onSnooze(snoozeDate);
+                closePostpone();
+              }}
+            >
+              {t("measurementReminders.postpone.confirm")}
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          {/* Quick chips write the date field rather than firing directly, so
+              the person always sees (and can adjust) what will be sent. */}
+          <div className="flex flex-wrap gap-2">
+            {postponeOffsetTargets(now, displayTz).map(({ days, date }) => (
+              <Button
+                key={days}
+                type="button"
+                size="sm"
+                variant={snoozeDate === date ? "secondary" : "outline"}
+                onClick={() => setSnoozeDate(date)}
+              >
+                {t("measurementReminders.postpone.chip", { days })}
+              </Button>
+            ))}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`snooze-date-${reminder.id}`}>
+              {t("measurementReminders.postpone.dateLabel")}
+            </Label>
+            <DateField
+              id={`snooze-date-${reminder.id}`}
+              value={snoozeDate}
+              onChange={setSnoozeDate}
+              min={minSnoozeDate}
+            />
+          </div>
+          {/* The honest-skip zone sits set apart below the snooze controls:
+              a different decision (let this cycle go, restart the rhythm)
+              with its own confirm step. */}
+          <div className="space-y-2 border-t pt-4">
+            <p className="text-sm font-medium">
+              {t("measurementReminders.skip.heading")}
+            </p>
+            <p className="text-muted-foreground text-sm">
+              {t("measurementReminders.skip.explainer")}
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={busy}
+              onClick={() => setConfirmSkip(true)}
+              data-slot="vorsorge-skip"
+            >
+              {t("measurementReminders.skip.action")}
+            </Button>
+          </div>
+        </div>
+      </ResponsiveSheet>
+      <AlertDialog open={confirmSkip} onOpenChange={setConfirmSkip}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("measurementReminders.skip.confirmTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("measurementReminders.skip.explainer")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                onSkip();
+                closePostpone();
+              }}
+            >
+              {t("measurementReminders.skip.action")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/src/components/measurement-reminders/checkups/reminder-form-sheet.tsx b/src/components/measurement-reminders/checkups/reminder-form-sheet.tsx
new file mode 100644
index 000000000..4678e58e9
--- /dev/null
+++ b/src/components/measurement-reminders/checkups/reminder-form-sheet.tsx
@@ -0,0 +1,285 @@
+"use client";
+
+import type { Dispatch, SetStateAction } from "react";
+
+import { Button } from "@/components/ui/button";
+import { DateField } from "@/components/ui/date-field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { NativeSelect } from "@/components/ui/native-select";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { useTranslations } from "@/lib/i18n/context";
+import { isScreeningReminderType } from "@/lib/measurement-reminders/screening";
+
+import {
+  CADENCE_CUSTOM,
+  CADENCE_RRULE,
+  INTERVAL_PRESETS,
+  MENTAL_SCREENING_DEFAULT_INTERVAL,
+  TYPE_GROUPS,
+  type FormState,
+} from "./reminder-form";
+
+/**
+ * The create / edit sheet: label, kind, measurement type, cadence (preset,
+ * free interval or RRULE), notification hour, first due date and location.
+ */
+export function ReminderFormSheet({
+  open,
+  isEdit,
+  form,
+  setForm,
+  saving,
+  onClose,
+  onSubmit,
+}: {
+  open: boolean;
+  isEdit: boolean;
+  form: FormState;
+  setForm: Dispatch<SetStateAction<FormState>>;
+  saving: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <ResponsiveSheet
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      title={t(
+        isEdit
+          ? "measurementReminders.form.editTitle"
+          : "measurementReminders.form.createTitle",
+      )}
+      footer={
+        <>
+          <Button type="button" variant="outline" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            type="button"
+            onClick={onSubmit}
+            disabled={!form.label.trim() || saving}
+          >
+            {t("measurementReminders.form.save")}
+          </Button>
+        </>
+      }
+    >
+      {/* The cadence/type/hour pickers use NativeSelect (not the
+          Radix Select labs/illness use) deliberately: these are long,
+          grouped, scalar option lists where the OS-native picker is faster
+          on touch and avoids a tall scrolling Radix popover inside the
+          bottom-sheet. The form fields stay NativeSelect by design. */}
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-label">
+            {t("measurementReminders.form.label")}
+          </Label>
+          <Input
+            id="vorsorge-label"
+            value={form.label}
+            maxLength={120}
+            placeholder={t("measurementReminders.form.labelPlaceholder")}
+            onChange={(e) => setForm((f) => ({ ...f, label: e.target.value }))}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-kind">
+            {t("measurementReminders.form.kind")}
+          </Label>
+          <NativeSelect
+            id="vorsorge-kind"
+            value={form.kind}
+            onChange={(e) =>
+              setForm((f) => ({
+                ...f,
+                kind: e.target.value as "type" | "freeText",
+              }))
+            }
+          >
+            <option value="type">
+              {t("measurementReminders.form.kindType")}
+            </option>
+            <option value="freeText">
+              {t("measurementReminders.form.kindFreeText")}
+            </option>
+          </NativeSelect>
+        </div>
+
+        {form.kind === "type" && (
+          <div className="space-y-2">
+            <Label htmlFor="vorsorge-type">
+              {t("measurementReminders.form.measurementType")}
+            </Label>
+            <NativeSelect
+              id="vorsorge-type"
+              value={form.measurementType}
+              onChange={(e) => {
+                const nextType = e.target.value;
+                setForm((f) => ({
+                  ...f,
+                  measurementType: nextType,
+                  // A screening covers the last two weeks, so
+                  // switching onto a screening type defaults the cadence
+                  // to every 4 weeks (still freely changeable).
+                  cadenceChoice: isScreeningReminderType(nextType)
+                    ? MENTAL_SCREENING_DEFAULT_INTERVAL
+                    : f.cadenceChoice,
+                }));
+              }}
+            >
+              {TYPE_GROUPS.map(({ group, types }) => (
+                <optgroup
+                  key={group}
+                  label={t(`measurementReminders.typeGroups.${group}`)}
+                >
+                  {types.map((type) => (
+                    <option key={type} value={type}>
+                      {t(`measurementReminders.types.${type}`)}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </NativeSelect>
+          </div>
+        )}
+
+        <CadenceFields form={form} setForm={setForm} />
+
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-anchor">
+            {t("measurementReminders.form.firstDue")}
+          </Label>
+          <DateField
+            id="vorsorge-anchor"
+            value={form.anchorDate}
+            onChange={(value) => setForm((f) => ({ ...f, anchorDate: value }))}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-location">
+            {t("measurementReminders.form.location")}
+          </Label>
+          <Input
+            id="vorsorge-location"
+            value={form.location}
+            maxLength={200}
+            placeholder={t("measurementReminders.form.locationPlaceholder")}
+            onChange={(e) =>
+              setForm((f) => ({ ...f, location: e.target.value }))
+            }
+          />
+        </div>
+      </div>
+    </ResponsiveSheet>
+  );
+}
+
+/**
+ * The cadence (preset, free interval or RRULE) and the notification hour.
+ * The pickers are native selects on purpose: long, grouped scalar lists where
+ * the system picker is faster on touch than a tall popover inside a sheet.
+ */
+function CadenceFields({
+  form,
+  setForm,
+}: {
+  form: FormState;
+  setForm: Dispatch<SetStateAction<FormState>>;
+}) {
+  const { t } = useTranslations();
+  const cadenceCustom = form.cadenceChoice === CADENCE_CUSTOM;
+  const cadenceRrule = form.cadenceChoice === CADENCE_RRULE;
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-interval">
+            {t("measurementReminders.form.cadence")}
+          </Label>
+          <NativeSelect
+            id="vorsorge-interval"
+            value={form.cadenceChoice}
+            onChange={(e) =>
+              setForm((f) => ({ ...f, cadenceChoice: e.target.value }))
+            }
+          >
+            {INTERVAL_PRESETS.map((days) => (
+              <option key={days} value={String(days)}>
+                {t("measurementReminders.cadence.everyNDays", { days })}
+              </option>
+            ))}
+            <option value={CADENCE_CUSTOM}>
+              {t("measurementReminders.cadence.customInterval")}
+            </option>
+            <option value={CADENCE_RRULE}>
+              {t("measurementReminders.cadence.rruleOption")}
+            </option>
+          </NativeSelect>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-hour">
+            {t("measurementReminders.form.notifyHour")}
+          </Label>
+          <NativeSelect
+            id="vorsorge-hour"
+            value={String(form.notifyHour)}
+            onChange={(e) =>
+              setForm((f) => ({ ...f, notifyHour: Number(e.target.value) }))
+            }
+          >
+            {Array.from({ length: 24 }, (_, h) => (
+              <option key={h} value={h}>
+                {`${h.toString().padStart(2, "0")}:00`}
+              </option>
+            ))}
+          </NativeSelect>
+        </div>
+      </div>
+
+      {cadenceCustom && (
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-custom-interval">
+            {t("measurementReminders.form.customInterval")}
+          </Label>
+          <Input
+            id="vorsorge-custom-interval"
+            type="number"
+            min={1}
+            max={3650}
+            value={form.customIntervalDays}
+            onChange={(e) =>
+              setForm((f) => ({
+                ...f,
+                customIntervalDays: Number(e.target.value),
+              }))
+            }
+          />
+        </div>
+      )}
+
+      {cadenceRrule && (
+        <div className="space-y-2">
+          <Label htmlFor="vorsorge-rrule">
+            {t("measurementReminders.form.rrule")}
+          </Label>
+          <Input
+            id="vorsorge-rrule"
+            value={form.rrule}
+            maxLength={512}
+            placeholder="FREQ=YEARLY"
+            onChange={(e) => setForm((f) => ({ ...f, rrule: e.target.value }))}
+          />
+          <p className="text-muted-foreground text-xs">
+            {t("measurementReminders.form.rruleHint")}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/measurement-reminders/checkups/reminder-form.ts b/src/components/measurement-reminders/checkups/reminder-form.ts
new file mode 100644
index 000000000..946a087e0
--- /dev/null
+++ b/src/components/measurement-reminders/checkups/reminder-form.ts
@@ -0,0 +1,183 @@
+import type { MeasurementReminder } from "@/hooks/use-measurement-reminders";
+import { translateOrNull } from "@/lib/i18n/translate-code";
+import type { ReminderEditBody } from "@/lib/measurement-reminders/edit-body";
+import { detectBrowserTimezone, userDayKey } from "@/lib/tz/format";
+
+// The active-measurement set, grouped so the dropdown
+// doesn't read as a flat 15-item list. Mirrors the Zod allow-list in
+// `validations/measurement-reminders.ts`; the labels resolve through
+// `measurementReminders.types.*`, the group headers through
+// `measurementReminders.typeGroups.*`.
+export const TYPE_GROUPS = [
+  {
+    group: "vitals",
+    types: [
+      "WEIGHT",
+      "BLOOD_PRESSURE_SYS",
+      "PULSE",
+      "BLOOD_GLUCOSE",
+      "OXYGEN_SATURATION",
+      "BODY_TEMPERATURE",
+    ],
+  },
+  {
+    group: "bodyComposition",
+    types: [
+      "BODY_FAT",
+      "FAT_MASS",
+      "FAT_FREE_MASS",
+      "MUSCLE_MASS",
+      "LEAN_BODY_MASS",
+      "BONE_MASS",
+      "TOTAL_BODY_WATER",
+      "VISCERAL_FAT",
+      "BODY_MASS_INDEX",
+      "WAIST_CIRCUMFERENCE",
+    ],
+  },
+  // The mental-wellbeing screenings become plannable like any
+  // other Vorsorge item. Auto-resolve rides the server-written *_SCORE row a
+  // completed check-in produces (v1.27.9 adds WHO-5 + SCI).
+  {
+    group: "mentalWellbeing",
+    types: ["PHQ9_SCORE", "GAD7_SCORE", "WHO5_SCORE", "SCI_SCORE"],
+  },
+] as const;
+
+// Screening types get a dedicated primary action (the check-in
+// page, not the numeric MeasurementForm) and a 4-week default cadence
+// (both instruments cover the last two weeks).
+export const MENTAL_SCREENING_DEFAULT_INTERVAL = "28";
+
+// 28 joined in v1.27.6 as the screening default (every 4 weeks); 30 stays
+// so existing monthly reminders keep resolving onto a preset.
+export const INTERVAL_PRESETS = [7, 14, 28, 30, 90, 180, 365] as const;
+// The sentinel the cadence picker writes when the user wants a
+// free interval or an RFC-5545 RRULE instead of a fixed preset.
+export const CADENCE_CUSTOM = "custom";
+export const CADENCE_RRULE = "rrule";
+export const DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * A COACH-minted reminder stores an i18n KEY in `label` (the
+ * cadence preset's `labelKey`), not free prose. Resolve it through `t()`;
+ * a user-created (VORSORGE) reminder carries free text and renders verbatim.
+ */
+export function resolveReminderLabel(
+  reminder: MeasurementReminder,
+  t: (key: string) => string,
+): string {
+  if (reminder.origin === "COACH") {
+    // A label the catalogue has no sentence for shows as written, so a future
+    // catalog addition never surfaces a bare key.
+    return translateOrNull(t, reminder.label) ?? reminder.label;
+  }
+  return reminder.label;
+}
+
+/** ISO instant → the `<input type="date">` value (YYYY-MM-DD), local. */
+export function toDateInputValue(iso: string | null): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  return userDayKey(d, detectBrowserTimezone());
+}
+
+/**
+ * `<input type="date">` value → the calendar date itself, or null. The server
+ * reads a bare date as that day in the profile's zone, so a browser set to
+ * another zone cannot move the first-due day.
+ */
+export function fromDateInputValue(value: string): string | null {
+  return /^\d{4}-\d{2}-\d{2}$/.test(value) ? value : null;
+}
+
+export interface FormState {
+  label: string;
+  kind: "type" | "freeText";
+  measurementType: string;
+  /** A preset number-as-string, or the CADENCE_CUSTOM / CADENCE_RRULE sentinel. */
+  cadenceChoice: string;
+  /** Free "every N days" value, used when cadenceChoice === CADENCE_CUSTOM. */
+  customIntervalDays: number;
+  /** Raw RRULE, used when cadenceChoice === CADENCE_RRULE. */
+  rrule: string;
+  /** First-due date (YYYY-MM-DD), optional. Maps to `anchorDate`. */
+  anchorDate: string;
+  notifyHour: number;
+  location: string;
+}
+
+export const EMPTY_FORM: FormState = {
+  label: "",
+  kind: "type",
+  measurementType: "BLOOD_PRESSURE_SYS",
+  cadenceChoice: "7",
+  customIntervalDays: 30,
+  rrule: "FREQ=YEARLY",
+  anchorDate: "",
+  notifyHour: 9,
+  location: "",
+};
+
+/** The form as a stored reminder opens it, cadence resolved onto the picker. */
+export function formFromReminder(
+  reminder: MeasurementReminder,
+  t: (key: string) => string,
+): FormState {
+  // A preset value if it matches one, otherwise the custom-interval or RRULE
+  // branch.
+  const interval = reminder.intervalDays;
+  const cadenceChoice = reminder.rrule
+    ? CADENCE_RRULE
+    : interval != null &&
+        (INTERVAL_PRESETS as readonly number[]).includes(interval)
+      ? String(interval)
+      : interval != null
+        ? CADENCE_CUSTOM
+        : "7";
+  return {
+    label: resolveReminderLabel(reminder, t),
+    kind: reminder.measurementType ? "type" : "freeText",
+    measurementType: reminder.measurementType ?? "BLOOD_PRESSURE_SYS",
+    cadenceChoice,
+    customIntervalDays:
+      cadenceChoice === CADENCE_CUSTOM && interval != null ? interval : 30,
+    rrule: reminder.rrule ?? "FREQ=YEARLY",
+    anchorDate: toDateInputValue(reminder.anchorDate),
+    notifyHour: reminder.notifyHour,
+    location: reminder.location ?? "",
+  };
+}
+
+/**
+ * The picker state as the mutually exclusive cadence pair the schema expects
+ * (exactly one of intervalDays / rrule).
+ */
+function resolveCadence(state: FormState): {
+  intervalDays: number | null;
+  rrule: string | null;
+} {
+  if (state.cadenceChoice === CADENCE_RRULE) {
+    const trimmed = state.rrule.trim();
+    return { intervalDays: null, rrule: trimmed || null };
+  }
+  if (state.cadenceChoice === CADENCE_CUSTOM) {
+    return { intervalDays: state.customIntervalDays, rrule: null };
+  }
+  return { intervalDays: Number(state.cadenceChoice), rrule: null };
+}
+
+/** The form as the request body a create or an edit sends. */
+export function toEditBody(state: FormState): ReminderEditBody {
+  const { intervalDays, rrule } = resolveCadence(state);
+  return {
+    label: state.label.trim(),
+    measurementType: state.kind === "type" ? state.measurementType : null,
+    intervalDays,
+    rrule,
+    anchorDate: fromDateInputValue(state.anchorDate),
+    notifyHour: state.notifyHour,
+    location: state.location.trim() || null,
+  };
+}
diff --git a/src/components/measurement-reminders/vorsorge-section.tsx b/src/components/measurement-reminders/vorsorge-section.tsx
index 654cc6f9d..055c731c9 100644
--- a/src/components/measurement-reminders/vorsorge-section.tsx
+++ b/src/components/measurement-reminders/vorsorge-section.tsx
@@ -1,227 +1,46 @@
 "use client";
 
-/**
- * v1.17.1 — Vorsorge (preventive-care / measurement) reminder surface.
- *
- * Answers "wann muss ich was wo machen": a grid of upcoming reminders
- * sorted by server-computed next-due, each rendered as its OWN card that
- * mirrors the medication card grammar (neutral surface, header + kebab,
- * a next/last block, and a single bottom-pinned action). Per the project
- * rule the card stays NEUTRAL regardless of due state — no alarming
- * red/green tint; status reads through a discreet badge only.
- *
- * The server is authoritative for `nextDueAt`; this component renders it
- * relative to "now" but never recomputes the cadence.
- *
- * v1.18.2 — rebuilt to mirror the MEDICATION module:
- *   - each reminder is its own med-styled card (`VorsorgeCard`) reusing
- *     `MedicationCardHeader` / `MedicationNextLastSlot` and the
- *     `MedicationIntakeActions` bottom-pinned action treatment;
- *   - the mark-done action branches on `measurementType`: a free-text /
- *     self-planned exam keeps the silent satisfy ("Erledigt"); a
- *     measurement-linked reminder opens the real `MeasurementForm`
- *     ("Wert erfassen") so completing a BP reminder lands an actual
- *     reading, then satisfies the reminder in the same user action;
- *   - the create/edit form gains a first-due date (`anchorDate`) and a
- *     custom cadence (free "every N days" + an RFC-5545 RRULE option);
- *   - a wrench/customize affordance sits beside the page-variant Add,
- *     hosting the per-reminder enable/disable toggles (moved off the
- *     card so the card carries a single med-style kebab).
- */
-import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import {
-  Activity,
-  CalendarClock,
-  CalendarPlus,
-  CheckCircle2,
-  Plus,
-  Wrench,
-} from "lucide-react";
+import { CalendarClock, Plus, Wrench } from "lucide-react";
 
-import {
-  useFormatters,
-  useTranslations,
-  useDisplayTimezone,
-} from "@/lib/i18n/context";
-import { relativeCalendarDate } from "@/lib/i18n/relative-time";
-import {
-  isOverdueDue,
-  relativeDueKey,
-} from "@/lib/measurement-reminders/due-day";
-import {
-  changedReminderFields,
-  type ReminderEditBody,
-} from "@/lib/measurement-reminders/edit-body";
-import { cn } from "@/lib/utils";
-import { applyOrder, useModuleListPrefs } from "@/lib/module-list-prefs";
 import { EncounterSheet } from "@/components/encounters/encounter-sheet";
+import { MeasurementForm } from "@/components/measurements/measurement-form";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { PageHeader } from "@/components/ui/page-header";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { DateField } from "@/components/ui/date-field";
 import { EmptyState } from "@/components/ui/empty-state";
+import { PageHeader } from "@/components/ui/page-header";
 import { QueryErrorRow } from "@/components/ui/query-error-row";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { LineChart, MoreVertical, Pencil, Trash2 } from "lucide-react";
-import { NativeSelect } from "@/components/ui/native-select";
-import { Progress } from "@/components/ui/progress";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import { Skeleton } from "@/components/ui/skeleton";
-import { MeasurementForm } from "@/components/measurements/measurement-form";
-import { MedicationCardHeader } from "@/components/medications/medication-card-header";
-import { isScreeningReminderType } from "@/lib/measurement-reminders/screening";
 import {
-  useMeasurementReminders,
   useMeasurementReminderMutations,
+  useMeasurementReminders,
   type MeasurementReminder,
 } from "@/hooks/use-measurement-reminders";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useTranslations } from "@/lib/i18n/context";
+import { changedReminderFields } from "@/lib/measurement-reminders/edit-body";
+import { isScreeningReminderType } from "@/lib/measurement-reminders/screening";
+import { applyOrder, useModuleListPrefs } from "@/lib/module-list-prefs";
+
+import { VorsorgeCard } from "./checkups/checkup-card";
 import {
-  detectBrowserTimezone,
-  shiftDateKey,
-  userDayKey,
-} from "@/lib/tz/format";
-import { translateOrNull } from "@/lib/i18n/translate-code";
-
-// v1.18.1 — the active-measurement set, grouped so the dropdown
-// doesn't read as a flat 15-item list. Mirrors the Zod allow-list in
-// `validations/measurement-reminders.ts`; the labels resolve through
-// `measurementReminders.types.*`, the group headers through
-// `measurementReminders.typeGroups.*`.
-const TYPE_GROUPS = [
-  {
-    group: "vitals",
-    types: [
-      "WEIGHT",
-      "BLOOD_PRESSURE_SYS",
-      "PULSE",
-      "BLOOD_GLUCOSE",
-      "OXYGEN_SATURATION",
-      "BODY_TEMPERATURE",
-    ],
-  },
-  {
-    group: "bodyComposition",
-    types: [
-      "BODY_FAT",
-      "FAT_MASS",
-      "FAT_FREE_MASS",
-      "MUSCLE_MASS",
-      "LEAN_BODY_MASS",
-      "BONE_MASS",
-      "TOTAL_BODY_WATER",
-      "VISCERAL_FAT",
-      "BODY_MASS_INDEX",
-      "WAIST_CIRCUMFERENCE",
-    ],
-  },
-  // v1.27.6 — the mental-wellbeing screenings become plannable like any
-  // other Vorsorge item. Auto-resolve rides the server-written *_SCORE row a
-  // completed check-in produces (v1.27.9 adds WHO-5 + SCI).
-  {
-    group: "mentalWellbeing",
-    types: ["PHQ9_SCORE", "GAD7_SCORE", "WHO5_SCORE", "SCI_SCORE"],
-  },
-] as const;
-
-// v1.27.6 — screening types get a dedicated primary action (the check-in
-// page, not the numeric MeasurementForm) and a 4-week default cadence
-// (both instruments cover the last two weeks).
-const MENTAL_SCREENING_DEFAULT_INTERVAL = "28";
-
-// 28 joined in v1.27.6 as the screening default (every 4 weeks); 30 stays
-// so existing monthly reminders keep resolving onto a preset.
-const INTERVAL_PRESETS = [7, 14, 28, 30, 90, 180, 365] as const;
-// v1.18.2 — the sentinel the cadence picker writes when the user wants a
-// free interval or an RFC-5545 RRULE instead of a fixed preset.
-const CADENCE_CUSTOM = "custom";
-const CADENCE_RRULE = "rrule";
-const DAY_MS = 24 * 60 * 60 * 1000;
+  EMPTY_FORM,
+  formFromReminder,
+  toEditBody,
+  type FormState,
+} from "./checkups/reminder-form";
+import { ReminderFormSheet } from "./checkups/reminder-form-sheet";
 
 /**
- * v1.18.1 — a COACH-minted reminder stores an i18n KEY in `label` (the
- * cadence preset's `labelKey`), not free prose. Resolve it through `t()`;
- * a user-created (VORSORGE) reminder carries free text and renders verbatim.
+ * The checkups surface (the `/checkups` page and its settings card): the
+ * reminder list, the create / edit sheet, the value capture that completes a
+ * typed reminder with a real reading, and filing a visit against one. The
+ * form, the card and the postpone sheet live in `./checkups/`.
  */
-function resolveReminderLabel(
-  reminder: MeasurementReminder,
-  t: (key: string) => string,
-): string {
-  if (reminder.origin === "COACH") {
-    // A label the catalogue has no sentence for shows as written, so a future
-    // catalog addition never surfaces a bare key.
-    return translateOrNull(t, reminder.label) ?? reminder.label;
-  }
-  return reminder.label;
-}
-
-/** ISO instant → the `<input type="date">` value (YYYY-MM-DD), local. */
-function toDateInputValue(iso: string | null): string {
-  if (!iso) return "";
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return "";
-  return userDayKey(d, detectBrowserTimezone());
-}
-
-/**
- * `<input type="date">` value → the calendar date itself, or null. The server
- * reads a bare date as that day in the profile's zone, so a browser set to
- * another zone cannot move the first-due day.
- */
-function fromDateInputValue(value: string): string | null {
-  return /^\d{4}-\d{2}-\d{2}$/.test(value) ? value : null;
-}
-
-interface FormState {
-  label: string;
-  kind: "type" | "freeText";
-  measurementType: string;
-  /** A preset number-as-string, or the CADENCE_CUSTOM / CADENCE_RRULE sentinel. */
-  cadenceChoice: string;
-  /** Free "every N days" value, used when cadenceChoice === CADENCE_CUSTOM. */
-  customIntervalDays: number;
-  /** Raw RRULE, used when cadenceChoice === CADENCE_RRULE. */
-  rrule: string;
-  /** First-due date (YYYY-MM-DD), optional. Maps to `anchorDate`. */
-  anchorDate: string;
-  notifyHour: number;
-  location: string;
-}
-
-const EMPTY_FORM: FormState = {
-  label: "",
-  kind: "type",
-  measurementType: "BLOOD_PRESSURE_SYS",
-  cadenceChoice: "7",
-  customIntervalDays: 30,
-  rrule: "FREQ=YEARLY",
-  anchorDate: "",
-  notifyHour: 9,
-  location: "",
-};
-
 export function VorsorgeSection({
   enabled = true,
   variant = "settings",
@@ -248,7 +67,7 @@ export function VorsorgeSection({
   } = useMeasurementReminders(enabled);
   const { create, update, remove, satisfy, skip, snooze } =
     useMeasurementReminderMutations();
-  // v1.18.6 — page view (cards/list) + manual order persist
+  // Page view (cards/list) + manual order persist
   // client-side; the settings page writes them, the page reads them.
   const { prefs } = useModuleListPrefs("vorsorge");
 
@@ -294,29 +113,7 @@ export function VorsorgeSection({
   }
 
   function openEdit(reminder: MeasurementReminder) {
-    // Resolve the stored cadence back onto the picker: a preset value if it
-    // matches one, otherwise the custom-interval or RRULE branch.
-    const interval = reminder.intervalDays;
-    const cadenceChoice = reminder.rrule
-      ? CADENCE_RRULE
-      : interval != null &&
-          (INTERVAL_PRESETS as readonly number[]).includes(interval)
-        ? String(interval)
-        : interval != null
-          ? CADENCE_CUSTOM
-          : "7";
-    const opened: FormState = {
-      label: resolveReminderLabel(reminder, t),
-      kind: reminder.measurementType ? "type" : "freeText",
-      measurementType: reminder.measurementType ?? "BLOOD_PRESSURE_SYS",
-      cadenceChoice,
-      customIntervalDays:
-        cadenceChoice === CADENCE_CUSTOM && interval != null ? interval : 30,
-      rrule: reminder.rrule ?? "FREQ=YEARLY",
-      anchorDate: toDateInputValue(reminder.anchorDate),
-      notifyHour: reminder.notifyHour,
-      location: reminder.location ?? "",
-    };
+    const opened = formFromReminder(reminder, t);
     setForm(opened);
     setInitialForm(opened);
     setEditing(reminder);
@@ -327,35 +124,6 @@ export function VorsorgeSection({
     setForm(EMPTY_FORM);
   }
 
-  // Resolve the picker state to the mutually-exclusive cadence pair the
-  // schema expects (exactly one of intervalDays / rrule).
-  function resolveCadence(state: FormState): {
-    intervalDays: number | null;
-    rrule: string | null;
-  } {
-    if (state.cadenceChoice === CADENCE_RRULE) {
-      const trimmed = state.rrule.trim();
-      return { intervalDays: null, rrule: trimmed || null };
-    }
-    if (state.cadenceChoice === CADENCE_CUSTOM) {
-      return { intervalDays: state.customIntervalDays, rrule: null };
-    }
-    return { intervalDays: Number(state.cadenceChoice), rrule: null };
-  }
-
-  function toEditBody(state: FormState): ReminderEditBody {
-    const { intervalDays, rrule } = resolveCadence(state);
-    return {
-      label: state.label.trim(),
-      measurementType: state.kind === "type" ? state.measurementType : null,
-      intervalDays,
-      rrule,
-      anchorDate: fromDateInputValue(state.anchorDate),
-      notifyHour: state.notifyHour,
-      location: state.location.trim() || null,
-    };
-  }
-
   function submit() {
     const trimmed = form.label.trim();
     if (!trimmed) return;
@@ -378,7 +146,7 @@ export function VorsorgeSection({
   // The mark-done action. A free-text / self-planned exam satisfies
   // silently; a measurement-linked reminder opens the real value-entry
   // form so the user logs an actual reading. A screening reminder
-  // (v1.27.6) routes to the check-in page instead — the score is never
+  // Routes to the check-in page instead — the score is never
   // typed in, it falls out of a completed test, which then auto-satisfies
   // the reminder through the eventful worker.
   function onPrimaryAction(reminder: MeasurementReminder) {
@@ -401,12 +169,10 @@ export function VorsorgeSection({
   }
 
   const saving = create.isPending || update.isPending;
-  const cadenceCustom = form.cadenceChoice === CADENCE_CUSTOM;
-  const cadenceRrule = form.cadenceChoice === CADENCE_RRULE;
 
-  // v1.18.6 — the primary add affordance reads "hinzufügen" like
+  // The primary add affordance reads "hinzufügen" like
   // every other module's add button.
-  // v1.36.x — a checkup reminder belongs to the person whose schedule it is,
+  // .x — a checkup reminder belongs to the person whose schedule it is,
   // and no grant level admits creating, editing or satisfying one. Inside
   // somebody else's record the schedule stays readable and every control that
   // would change it is absent.
@@ -421,7 +187,7 @@ export function VorsorgeSection({
     </Button>
   ) : null;
 
-  // v1.18.6 — the wrench links to the Vorsorge settings page (view,
+  // The wrench links to the Vorsorge settings page (view,
   // reorder, per-reminder enable toggles), left of the Add button — the
   // canonical medication-page pattern. The old kebab "Anpassen" sheet is
   // gone (MOD-07); its toggles moved to the settings page. `/settings` is the
@@ -506,230 +272,17 @@ export function VorsorgeSection({
         />
       )}
 
-      <ResponsiveSheet
+      <ReminderFormSheet
         open={sheetOpen}
-        onOpenChange={(open) => {
-          if (!open) closeSheet();
-        }}
-        title={t(
-          isEdit
-            ? "measurementReminders.form.editTitle"
-            : "measurementReminders.form.createTitle",
-        )}
-        footer={
-          <>
-            <Button type="button" variant="outline" onClick={closeSheet}>
-              {t("common.cancel")}
-            </Button>
-            <Button
-              type="button"
-              onClick={submit}
-              disabled={!form.label.trim() || saving}
-            >
-              {t("measurementReminders.form.save")}
-            </Button>
-          </>
-        }
-      >
-        {/* v1.18.1 — the cadence/type/hour pickers use NativeSelect (not the
-            Radix Select labs/illness use) deliberately: these are long,
-            grouped, scalar option lists where the OS-native picker is faster
-            on touch and avoids a tall scrolling Radix popover inside the
-            bottom-sheet. The form fields stay NativeSelect by design. */}
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="vorsorge-label">
-              {t("measurementReminders.form.label")}
-            </Label>
-            <Input
-              id="vorsorge-label"
-              value={form.label}
-              maxLength={120}
-              placeholder={t("measurementReminders.form.labelPlaceholder")}
-              onChange={(e) =>
-                setForm((f) => ({ ...f, label: e.target.value }))
-              }
-            />
-          </div>
+        isEdit={isEdit}
+        form={form}
+        setForm={setForm}
+        saving={saving}
+        onClose={closeSheet}
+        onSubmit={submit}
+      />
 
-          <div className="space-y-2">
-            <Label htmlFor="vorsorge-kind">
-              {t("measurementReminders.form.kind")}
-            </Label>
-            <NativeSelect
-              id="vorsorge-kind"
-              value={form.kind}
-              onChange={(e) =>
-                setForm((f) => ({
-                  ...f,
-                  kind: e.target.value as "type" | "freeText",
-                }))
-              }
-            >
-              <option value="type">
-                {t("measurementReminders.form.kindType")}
-              </option>
-              <option value="freeText">
-                {t("measurementReminders.form.kindFreeText")}
-              </option>
-            </NativeSelect>
-          </div>
-
-          {form.kind === "type" && (
-            <div className="space-y-2">
-              <Label htmlFor="vorsorge-type">
-                {t("measurementReminders.form.measurementType")}
-              </Label>
-              <NativeSelect
-                id="vorsorge-type"
-                value={form.measurementType}
-                onChange={(e) => {
-                  const nextType = e.target.value;
-                  setForm((f) => ({
-                    ...f,
-                    measurementType: nextType,
-                    // v1.27.6 — a screening covers the last two weeks, so
-                    // switching onto a screening type defaults the cadence
-                    // to every 4 weeks (still freely changeable).
-                    cadenceChoice: isScreeningReminderType(nextType)
-                      ? MENTAL_SCREENING_DEFAULT_INTERVAL
-                      : f.cadenceChoice,
-                  }));
-                }}
-              >
-                {TYPE_GROUPS.map(({ group, types }) => (
-                  <optgroup
-                    key={group}
-                    label={t(`measurementReminders.typeGroups.${group}`)}
-                  >
-                    {types.map((type) => (
-                      <option key={type} value={type}>
-                        {t(`measurementReminders.types.${type}`)}
-                      </option>
-                    ))}
-                  </optgroup>
-                ))}
-              </NativeSelect>
-            </div>
-          )}
-
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="vorsorge-interval">
-                {t("measurementReminders.form.cadence")}
-              </Label>
-              <NativeSelect
-                id="vorsorge-interval"
-                value={form.cadenceChoice}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, cadenceChoice: e.target.value }))
-                }
-              >
-                {INTERVAL_PRESETS.map((days) => (
-                  <option key={days} value={String(days)}>
-                    {t("measurementReminders.cadence.everyNDays", { days })}
-                  </option>
-                ))}
-                <option value={CADENCE_CUSTOM}>
-                  {t("measurementReminders.cadence.customInterval")}
-                </option>
-                <option value={CADENCE_RRULE}>
-                  {t("measurementReminders.cadence.rruleOption")}
-                </option>
-              </NativeSelect>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="vorsorge-hour">
-                {t("measurementReminders.form.notifyHour")}
-              </Label>
-              <NativeSelect
-                id="vorsorge-hour"
-                value={String(form.notifyHour)}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, notifyHour: Number(e.target.value) }))
-                }
-              >
-                {Array.from({ length: 24 }, (_, h) => (
-                  <option key={h} value={h}>
-                    {`${h.toString().padStart(2, "0")}:00`}
-                  </option>
-                ))}
-              </NativeSelect>
-            </div>
-          </div>
-
-          {cadenceCustom && (
-            <div className="space-y-2">
-              <Label htmlFor="vorsorge-custom-interval">
-                {t("measurementReminders.form.customInterval")}
-              </Label>
-              <Input
-                id="vorsorge-custom-interval"
-                type="number"
-                min={1}
-                max={3650}
-                value={form.customIntervalDays}
-                onChange={(e) =>
-                  setForm((f) => ({
-                    ...f,
-                    customIntervalDays: Number(e.target.value),
-                  }))
-                }
-              />
-            </div>
-          )}
-
-          {cadenceRrule && (
-            <div className="space-y-2">
-              <Label htmlFor="vorsorge-rrule">
-                {t("measurementReminders.form.rrule")}
-              </Label>
-              <Input
-                id="vorsorge-rrule"
-                value={form.rrule}
-                maxLength={512}
-                placeholder="FREQ=YEARLY"
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, rrule: e.target.value }))
-                }
-              />
-              <p className="text-muted-foreground text-xs">
-                {t("measurementReminders.form.rruleHint")}
-              </p>
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <Label htmlFor="vorsorge-anchor">
-              {t("measurementReminders.form.firstDue")}
-            </Label>
-            <DateField
-              id="vorsorge-anchor"
-              value={form.anchorDate}
-              onChange={(value) =>
-                setForm((f) => ({ ...f, anchorDate: value }))
-              }
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="vorsorge-location">
-              {t("measurementReminders.form.location")}
-            </Label>
-            <Input
-              id="vorsorge-location"
-              value={form.location}
-              maxLength={200}
-              placeholder={t("measurementReminders.form.locationPlaceholder")}
-              onChange={(e) =>
-                setForm((f) => ({ ...f, location: e.target.value }))
-              }
-            />
-          </div>
-        </div>
-      </ResponsiveSheet>
-
-      {/* v1.18.2 — value-capture sheet: a measurement-linked reminder opens
+      {/* Value-capture sheet: a measurement-linked reminder opens
           the real MeasurementForm pre-filled with its type, so completing a
           BP reminder logs an actual reading. On success the reminder is
           satisfied in the same action. */}
@@ -840,697 +393,3 @@ export function VorsorgeSection({
     </section>
   );
 }
-
-/**
- * v1.18.6 — progress through the current interval toward the next
- * due date, as a 0–100 percentage. Honest "are we on track" gamification
- * that reuses the medication card's `Progress` building block without
- * fabricating a streak the reminder data cannot support: 100 % (or beyond)
- * means due/overdue now, lower means time still remains in the window.
- * Returns null when there is no interval to measure against (RRULE / unset).
- */
-/** v1.37.20 (#223) — the offsets the postpone menu offers, in days. */
-const SNOOZE_CHIP_DAYS = [7, 30, 90] as const;
-
-/**
- * The local calendar day (ISO `yyyy-MM-dd`) an instant falls on in `tz`.
- * Snooze is day-precision by contract: the server resolves the day to the
- * reminder's notifyHour in the profile timezone.
- */
-function isoDayInTz(atMs: number, tz: string): string {
-  return new Date(atMs).toLocaleDateString("sv-SE", { timeZone: tz });
-}
-
-/**
- * The dates the postpone sheet's quick chips resolve to, on the display zone's
- * calendar.
- *
- * Its own function because a chip labelled "+7 days" has to write the day that
- * is actually seven days out, including across a DST shift, where adding
- * 7 × 86 400 000 ms lands an hour either side of midnight and so can write the
- * neighbouring date.
- */
-export function postponeOffsetTargets(
-  nowMs: number,
-  tz: string,
-): { days: number; date: string }[] {
-  // Count days on the calendar, not in milliseconds: `now + 7 * DAY_MS` keeps
-  // the wall-clock time only where the offset stays constant, and a DST shift
-  // in between moves it an hour, which flips the date for anyone acting near
-  // midnight. Anchoring today's local date at UTC noon and stepping whole
-  // UTC days keeps every offset on the day its label names.
-  const today = isoDayInTz(nowMs, tz);
-  return SNOOZE_CHIP_DAYS.map((days) => ({
-    days,
-    date: shiftDateKey(today, days),
-  }));
-}
-
-function intervalProgress(
-  reminder: MeasurementReminder,
-  now: number,
-): number | null {
-  if (reminder.intervalDays == null || reminder.nextDueAt == null) return null;
-  const dueMs = new Date(reminder.nextDueAt).getTime();
-  if (Number.isNaN(dueMs)) return null;
-  const windowMs = reminder.intervalDays * DAY_MS;
-  const startMs = dueMs - windowMs;
-  const elapsed = now - startMs;
-  return Math.max(0, Math.min(100, Math.round((elapsed / windowMs) * 100)));
-}
-
-function VorsorgeCard({
-  reminder,
-  now,
-  view,
-  onPrimaryAction,
-  onFileVisit,
-  onRemove,
-  onEdit,
-  onSkip,
-  onSnooze,
-  busy,
-}: {
-  reminder: MeasurementReminder;
-  now: number;
-  view: "cards" | "list";
-  onPrimaryAction: () => void;
-  /** Open the visit sheet with this checkup pre-filled, closing it on save. */
-  onFileVisit: () => void;
-  onRemove: () => void;
-  onEdit: () => void;
-  /** v1.37.20 (#223) — honest skip; the server restarts the interval. */
-  onSkip: () => void;
-  /** v1.37.20 (#223) — snooze to a calendar day (ISO YYYY-MM-DD). */
-  onSnooze: (until: string) => void;
-  busy: boolean;
-}) {
-  const { t } = useTranslations();
-  const fmt = useFormatters();
-  const { canManageDomain } = useRecordCapabilities();
-  const canManageMeasurements = canManageDomain("measurements");
-  // Issue #490 — day-boundary zone for the relative "today / yesterday"
-  // bucket must match the zone `fmt.date` renders in (mirror → Berlin).
-  // The next-due phrase reads off the SAME zone as the last-done date below
-  // it; they used to disagree by a day for anyone whose device sat in another
-  // zone from their profile.
-  const displayTz = useDisplayTimezone();
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  // v1.37.20 (#223) — the postpone sheet (snooze quick-chips + date field,
-  // with the honest-skip zone below) and the skip confirm inside it.
-  const [postponeOpen, setPostponeOpen] = useState(false);
-  const [snoozeDate, setSnoozeDate] = useState("");
-  const [confirmSkip, setConfirmSkip] = useState(false);
-  const due = relativeDueKey(reminder.nextDueAt, now, displayTz);
-  const cadence =
-    reminder.intervalDays != null
-      ? t("measurementReminders.cadence.everyNDays", {
-          days: reminder.intervalDays,
-        })
-      : reminder.rrule
-        ? t("measurementReminders.cadence.custom")
-        : "";
-  const isCoach = reminder.origin === "COACH";
-  const isLinked = reminder.measurementType != null;
-  // v1.27.5 — due-ness never changes the ACTION BUTTON: it keeps one
-  // constant look in every state (same rule as the medication card's
-  // constant surface). Due / overdue reads only through the discreet
-  // coloured next-due text + the adherence meta line below.
-  // v1.27.6 — a screening reminder's action is "start the check-in" (it
-  // routes to the check-in page), never the numeric value-entry wording.
-  const isScreening = isScreeningReminderType(reminder.measurementType);
-  const isDue =
-    due.key === "measurementReminders.nextDue.today" || isOverdueDue(due);
-  const progress = intervalProgress(reminder, now);
-
-  // Category-style header badge: the measurement label, or "self-planned"
-  // for a free-text exam — mirroring the medication card's class badge.
-  const categoryLabel = isLinked
-    ? t(`measurementReminders.types.${reminder.measurementType}`)
-    : t("measurementReminders.selfPlanned");
-
-  // v1.18.10 — the cadence reads as part of the METRIC ROW (the category
-  // line), styled like the metric label itself — same muted weight/colour,
-  // no shaded pill. The card heading stays clean (nothing beside it); the
-  // cadence rides next to "Blutdruck" et al. via `metricMeta` below.
-  const cadenceText = cadence || null;
-
-  // v1.18.10 — a measurement-linked reminder's heading links to the
-  // measurements history pre-filtered to its type (the same target the
-  // "Messergebnisse anzeigen" kebab item uses). A free-text reminder has no
-  // readings to show, so it stays a plain (non-linking) heading.
-  const measurementsHref = isLinked
-    ? `/measurements?type=${encodeURIComponent(reminder.measurementType as string)}`
-    : undefined;
-
-  // Provenance / disabled state badges keep their own row below the category.
-  // Omit the row entirely when neither applies (don't render an empty band).
-  const hasStateBadges = isCoach || !reminder.enabled;
-  const stateBadges = hasStateBadges ? (
-    <>
-      {isCoach && (
-        <Badge variant="outline">{t("measurementReminders.originCoach")}</Badge>
-      )}
-      {!reminder.enabled && (
-        <Badge variant="outline">
-          {t("measurementReminders.disabledBadge")}
-        </Badge>
-      )}
-    </>
-  ) : undefined;
-
-  // Single med-style kebab: Edit + Delete. The Delete item is the shared
-  // confirm-on-delete control rendered as a full-width menu row.
-  const headerActions = canManageMeasurements ? (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon-lg"
-          className="sm:size-10"
-          aria-label={t("common.moreOptions")}
-        >
-          <MoreVertical className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56">
-        <DropdownMenuItem onClick={onEdit} disabled={busy}>
-          <Pencil className="mr-2 h-4 w-4" />
-          {t("measurementReminders.edit")}
-        </DropdownMenuItem>
-        {/* v1.37.20 (#223) put postpone in the kebab. It reads better beside
-            the primary action, the way the medication card carries "taken"
-            and "skipped" side by side, so it is a card button now — see
-            `postponeButton` below. */}
-        {/* v1.18.7 — jump to the measurements list pre-filtered to
-            this reminder's type. Only for measurement-linked reminders; a
-            free-text reminder has no readings to show. */}
-        {isLinked && (
-          <DropdownMenuItem asChild>
-            <Link
-              href={`/measurements?type=${encodeURIComponent(
-                reminder.measurementType as string,
-              )}`}
-            >
-              <LineChart className="mr-2 h-4 w-4" />
-              {t("measurementReminders.showMeasurements")}
-            </Link>
-          </DropdownMenuItem>
-        )}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          disabled={busy}
-          onSelect={() => setConfirmDelete(true)}
-        >
-          <Trash2 className="mr-2 h-4 w-4" />
-          {t("measurementReminders.delete")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ) : null;
-
-  // The measure / mark-done action. One constant appearance in every state —
-  // no due-driven tint, no label swap (v1.27.5 retired the former green
-  // "do it now" wash; a button that changes colour by schedule state reads as
-  // a different control). Due-ness is communicated by the discreet coloured
-  // next-due text above.
-  /**
-   * "Termin eintragen" — the second way to close a checkup.
-   *
-   * Beside "erledigt" rather than instead of it, because the two answer
-   * different questions: one says the thing happened, the other says WHERE it
-   * happened and files the record of it. Saving the visit as DONE satisfies
-   * this reminder through the same forward-only, idempotent primitive the
-   * checkbox uses, so a person who does both gets one satisfaction and no
-   * error.
-   */
-  // The file-visit action belongs only to a free-text reminder — a real
-  // practice visit, where "you went" is recorded by filing a visit. A typed
-  // reminder (Gewicht, Blutdruck, a screening check-in) is satisfied by a
-  // reading or a check-in inside the app, so it carries no visit affordance.
-  // `resolve.ts` states the same boundary server-side: an appointment reminder
-  // is free-text by construction.
-  const fileVisitButton =
-    canManageMeasurements && !isLinked ? (
-      <Button
-        type="button"
-        variant="outline"
-        className="min-h-11 w-full"
-        data-slot="vorsorge-file-visit"
-        onClick={onFileVisit}
-        disabled={busy}
-      >
-        <CalendarPlus className="h-4 w-4" />
-        {t("measurementReminders.fileVisit")}
-      </Button>
-    ) : null;
-
-  // Postponing sits beside the primary action rather than inside the kebab,
-  // the way the medication card carries "taken" and "skipped" as two buttons
-  // on the card. Outline against the filled primary: the same pairing, and
-  // the same rule as everything else in this bar — one constant look, never
-  // tinted by how overdue the checkup is.
-  const postponeButton = canManageMeasurements ? (
-    <Button
-      type="button"
-      variant="outline"
-      className="min-h-11"
-      data-slot="vorsorge-postpone"
-      onClick={() => setPostponeOpen(true)}
-      disabled={busy}
-    >
-      <CalendarClock className="h-4 w-4" />
-      {t("measurementReminders.postpone.menuItem")}
-    </Button>
-  ) : null;
-
-  const primaryButton = canManageMeasurements ? (
-    <Button
-      type="button"
-      className="min-h-11 flex-1"
-      onClick={onPrimaryAction}
-      disabled={busy}
-    >
-      {isLinked ? (
-        <>
-          <Activity className="h-4 w-4" />
-          {t(
-            isScreening
-              ? "measurementReminders.startCheckIn"
-              : "measurementReminders.measureNow",
-          )}
-        </>
-      ) : (
-        <>
-          <CheckCircle2 className="h-4 w-4" />
-          {t("measurementReminders.markDone")}
-        </>
-      )}
-    </Button>
-  ) : null;
-
-  const deleteDialog = (
-    <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {t("measurementReminders.deleteConfirmTitle")}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            {t("measurementReminders.deleteConfirmDescription")}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-          <AlertDialogAction variant="destructive" onClick={onRemove}>
-            {t("measurementReminders.delete")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-
-  // v1.37.20 (#223) — resolved skip/snooze state, clock comparisons only
-  // (the DTO comment states the contract: the server resolves, the client
-  // compares). Meta lines are muted text — never a card colour change.
-  const isSnoozed =
-    reminder.snoozedUntil != null &&
-    new Date(reminder.snoozedUntil).getTime() > now;
-  const isSkippedCycle =
-    reminder.lastSkippedAt != null &&
-    (reminder.lastSatisfiedAt == null ||
-      new Date(reminder.lastSkippedAt).getTime() >
-        new Date(reminder.lastSatisfiedAt).getTime());
-
-  const closePostpone = () => {
-    setPostponeOpen(false);
-    setSnoozeDate("");
-    setConfirmSkip(false);
-  };
-  const minSnoozeDate = isoDayInTz(now + DAY_MS, displayTz);
-
-  const postponeSheet = (
-    <ResponsiveSheet
-      open={postponeOpen}
-      onOpenChange={(open) => {
-        if (!open) closePostpone();
-      }}
-      title={t("measurementReminders.postpone.title")}
-      description={t("measurementReminders.postpone.description")}
-      footer={
-        <>
-          <Button type="button" variant="outline" onClick={closePostpone}>
-            {t("common.cancel")}
-          </Button>
-          <Button
-            type="button"
-            disabled={!snoozeDate || busy}
-            onClick={() => {
-              onSnooze(snoozeDate);
-              closePostpone();
-            }}
-          >
-            {t("measurementReminders.postpone.confirm")}
-          </Button>
-        </>
-      }
-    >
-      <div className="space-y-4">
-        {/* Quick chips write the date field rather than firing directly, so
-            the person always sees (and can adjust) what will be sent. */}
-        <div className="flex flex-wrap gap-2">
-          {postponeOffsetTargets(now, displayTz).map(({ days, date }) => (
-            <Button
-              key={days}
-              type="button"
-              size="sm"
-              variant={snoozeDate === date ? "secondary" : "outline"}
-              onClick={() => setSnoozeDate(date)}
-            >
-              {t("measurementReminders.postpone.chip", { days })}
-            </Button>
-          ))}
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor={`snooze-date-${reminder.id}`}>
-            {t("measurementReminders.postpone.dateLabel")}
-          </Label>
-          <DateField
-            id={`snooze-date-${reminder.id}`}
-            value={snoozeDate}
-            onChange={setSnoozeDate}
-            min={minSnoozeDate}
-          />
-        </div>
-        {/* The honest-skip zone sits set apart below the snooze controls:
-            a different decision (let this cycle go, restart the rhythm)
-            with its own confirm step. */}
-        <div className="space-y-2 border-t pt-4">
-          <p className="text-sm font-medium">
-            {t("measurementReminders.skip.heading")}
-          </p>
-          <p className="text-muted-foreground text-sm">
-            {t("measurementReminders.skip.explainer")}
-          </p>
-          <Button
-            type="button"
-            variant="outline"
-            disabled={busy}
-            onClick={() => setConfirmSkip(true)}
-            data-slot="vorsorge-skip"
-          >
-            {t("measurementReminders.skip.action")}
-          </Button>
-        </div>
-      </div>
-    </ResponsiveSheet>
-  );
-
-  const skipConfirmDialog = (
-    <AlertDialog open={confirmSkip} onOpenChange={setConfirmSkip}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {t("measurementReminders.skip.confirmTitle")}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            {t("measurementReminders.skip.explainer")}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={() => {
-              onSkip();
-              closePostpone();
-            }}
-          >
-            {t("measurementReminders.skip.action")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-
-  // Muted meta lines shared by both branches: "pushed back until {date}" /
-  // "skipped on {date}" (+ lifetime count once it says something). "Last
-  // done" stays lastSatisfiedAt — a skip never reads as done.
-  const skipSnoozeMeta =
-    isSnoozed || isSkippedCycle ? (
-      <div
-        className="text-muted-foreground space-y-0.5 text-xs"
-        data-slot="vorsorge-skip-snooze-meta"
-      >
-        {isSnoozed && reminder.snoozedUntil && (
-          <p>
-            {t("measurementReminders.snoozedUntil", {
-              date: fmt.date(new Date(reminder.snoozedUntil)),
-            })}
-          </p>
-        )}
-        {isSkippedCycle && reminder.lastSkippedAt && (
-          <p>
-            {t("measurementReminders.skippedOn", {
-              date: fmt.date(new Date(reminder.lastSkippedAt)),
-            })}
-            {reminder.skipCount > 1
-              ? ` · ${t("measurementReminders.skipCount", {
-                  count: reminder.skipCount,
-                })}`
-              : null}
-          </p>
-        )}
-      </div>
-    ) : null;
-
-  // v1.18.6 — compact list row variant.
-  if (view === "list") {
-    return (
-      <>
-        {/* Density lives on the Card (py-3 vs the default py-4 md:py-6);
-            the content slot keeps its own px-4 md:px-6 contract. */}
-        <Card className="py-3 md:py-3">
-          <CardContent className="flex items-center justify-between gap-3">
-            <div className="min-w-0 space-y-0.5">
-              <div className="flex flex-wrap items-center gap-x-2 text-sm">
-                <span className="truncate font-medium">
-                  {resolveReminderLabel(reminder, t)}
-                </span>
-              </div>
-              {/* v1.18.10 — cadence rides on the metric line, styled like the
-                  metric text (no shaded pill). */}
-              <div className="text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs">
-                <span className="text-foreground">
-                  {t(due.key, { days: due.days })}
-                </span>
-                <span>{categoryLabel}</span>
-                {cadenceText ? <span>{cadenceText}</span> : null}
-              </div>
-              {skipSnoozeMeta}
-            </div>
-            <div className="flex shrink-0 items-center gap-1">
-              {/* The same gate the cards branch applies through
-                  `primaryButton`. The list branch used to inline its own
-                  ungated copy, and which branch a person sees is a per-browser
-                  preference that survives the switch — so the identical action
-                  was offered or withheld depending on a view toggle. */}
-              {canManageMeasurements ? (
-                <Button
-                  type="button"
-                  size="sm"
-                  className="min-h-11 sm:min-h-9"
-                  onClick={onPrimaryAction}
-                  disabled={busy}
-                >
-                  {isLinked
-                    ? t(
-                        isScreening
-                          ? "measurementReminders.startCheckIn"
-                          : "measurementReminders.measureNow",
-                      )
-                    : t("measurementReminders.markDone")}
-                </Button>
-              ) : null}
-              {/* Icon-only in the dense list, labelled in the cards branch —
-                  the same action either way, never one branch offering what
-                  the other withholds. */}
-              {canManageMeasurements ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="size-11 sm:size-9"
-                  data-slot="vorsorge-postpone"
-                  aria-label={t("measurementReminders.postpone.menuItem")}
-                  title={t("measurementReminders.postpone.menuItem")}
-                  onClick={() => setPostponeOpen(true)}
-                  disabled={busy}
-                >
-                  <CalendarClock className="h-4 w-4" aria-hidden />
-                </Button>
-              ) : null}
-              {/* Free-text reminders only: a typed / screening reminder has no
-                  practice visit behind it. */}
-              {canManageMeasurements && !isLinked ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="size-11 sm:size-9"
-                  data-slot="vorsorge-file-visit"
-                  aria-label={t("measurementReminders.fileVisit")}
-                  title={t("measurementReminders.fileVisit")}
-                  onClick={onFileVisit}
-                  disabled={busy}
-                >
-                  <CalendarPlus className="h-4 w-4" aria-hidden />
-                </Button>
-              ) : null}
-              {headerActions}
-            </div>
-          </CardContent>
-        </Card>
-        {deleteDialog}
-        {postponeSheet}
-        {skipConfirmDialog}
-      </>
-    );
-  }
-
-  // Next/last block in the med-card grammar, but with MEASUREMENT wording
-  // (MOD-06: never "Einnahme" / intake — a measurement is not an intake). The
-  // "next" value carries the discreet neutral due badge; the "last" value is
-  // the last satisfied date.
-  // v1.18.9 (#39) — "zuletzt erledigt" reads as a RELATIVE date in the
-  // medication-card grammar (today → "Heute", yesterday → "Gestern", else the
-  // absolute date) through the shared `relativeCalendarDate` helper, reusing
-  // the same `medications.today` / `medications.yesterday` keys the medication
-  // card renders. Falls back to "—" when there is no last-done value.
-  const lastValue = reminder.lastSatisfiedAt
-    ? relativeCalendarDate(
-        reminder.lastSatisfiedAt,
-        t,
-        (d) => fmt.date(d),
-        displayTz,
-      )
-    : "—";
-
-  // v1.18.9 (#39) — the next-due status reads as DISCREET COLOURED TEXT (never
-  // a card-background tint): due today → green, overdue → orange, otherwise the
-  // normal muted-resolved date. The card surface stays neutral per the house
-  // rule; only this inline label carries the status hue.
-  const dueIsToday = due.key === "measurementReminders.nextDue.today";
-  const dueIsOverdue = isOverdueDue(due);
-  const nextLastSlot = (
-    <div className="min-h-[2.75rem] space-y-1.5 text-sm">
-      <div className="text-muted-foreground flex items-baseline justify-between gap-3">
-        <span className="min-w-0 flex-shrink truncate font-medium">
-          {t("measurementReminders.nextDueLabel")}
-        </span>
-        <span
-          className={cn(
-            "text-right",
-            dueIsToday
-              ? "text-success font-medium"
-              : dueIsOverdue
-                ? "text-warning font-medium"
-                : "text-foreground",
-          )}
-        >
-          {t(due.key, { days: due.days })}
-        </span>
-      </div>
-      <div className="text-muted-foreground flex items-baseline justify-between gap-3">
-        <span className="min-w-0 flex-shrink truncate font-medium">
-          {t("measurementReminders.lastDoneLabel")}
-        </span>
-        <span className="text-foreground text-right">{lastValue}</span>
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      {/* NEUTRAL card — no status-driven colour anywhere on the surface or
-          the action button. Due state reads only through the discreet
-          coloured next-due text. Shares the medication card shell + tokens. */}
-      <Card className="h-full gap-3 md:gap-3">
-        <MedicationCardHeader
-          name={resolveReminderLabel(reminder, t)}
-          dose=""
-          categoryLabel={categoryLabel}
-          metricMeta={cadenceText}
-          href={measurementsHref}
-          linkLabel={
-            measurementsHref
-              ? t("measurementReminders.showMeasurements")
-              : undefined
-          }
-          stateBadges={stateBadges}
-          actions={headerActions}
-        />
-        <CardContent className="flex h-full flex-col space-y-3.5">
-          {nextLastSlot}
-          {skipSnoozeMeta}
-
-          {/* v1.18.6 — light gamification: progress through the
-              current interval toward next-due, reusing the medication card's
-              Progress building block. Honest "on track / due" signal without
-              a fabricated streak; hidden for RRULE / unscheduled reminders. */}
-          {progress != null && (
-            <div className="space-y-1">
-              <div className="text-muted-foreground flex items-center justify-between text-xs">
-                <span>{t("measurementReminders.adherence.label")}</span>
-                <span className="tabular-nums">
-                  {isDue
-                    ? t("measurementReminders.adherence.due")
-                    : t("measurementReminders.adherence.onTrack")}
-                </span>
-              </div>
-              <Progress
-                value={progress}
-                aria-label={t("measurementReminders.adherence.label")}
-              />
-            </div>
-          )}
-
-          {reminder.endsOn && (
-            <p className="text-muted-foreground text-sm">
-              {/* `endsOn` is a real instant (`now + courseDays` at Coach
-                  accept, plain timestamptz — NOT a `@db.Date` UTC-midnight
-                  calendar date), so the profile-tz formatter renders the
-                  correct local course-end day for every zone. */}
-              {t("measurementReminders.until", {
-                date: fmt.date(new Date(reminder.endsOn)),
-              })}
-            </p>
-          )}
-          {reminder.location && (
-            <p className="text-muted-foreground text-sm">
-              {t("measurementReminders.location.prefix", {
-                location: reminder.location,
-              })}
-            </p>
-          )}
-
-          {/* Bottom-pinned action row: the primary action takes the width it
-              can, postpone sits beside it at its natural size — the same
-              two-button shape the medication card uses for taken / skipped. */}
-          {primaryButton ? (
-            <div className="mt-auto space-y-1.5 pt-0">
-              <div className="flex gap-2">
-                {primaryButton}
-                {postponeButton}
-              </div>
-              {fileVisitButton}
-            </div>
-          ) : null}
-        </CardContent>
-      </Card>
-
-      {deleteDialog}
-      {postponeSheet}
-      {skipConfirmDialog}
-    </>
-  );
-}
diff --git a/src/components/measurements/__tests__/measurement-form-glucose-unit.test.tsx b/src/components/measurements/__tests__/measurement-form-glucose-unit.test.tsx
deleted file mode 100644
index af91ed46d..000000000
--- a/src/components/measurements/__tests__/measurement-form-glucose-unit.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-import { describe, expect, it, vi } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-
-/**
- * The manual entry form and the blood-glucose display unit.
- *
- * Glucose is stored in mg/dL and shown in whichever of mg/dL and mmol/L the
- * account picked. Until the preference could be set at all, the form could
- * hardcode "mg/dL" and be right by accident. It no longer can: a reader on
- * mmol/L types 5.3, and 5.3 filed as mg/dL is a severe hypo that the
- * plausibility band (20–800) accepts without a word and every surface then
- * reads back as real. So the label and the stored number have to move
- * together — the field asks in the account's unit and the submit path
- * inverts to canonical mg/dL.
- *
- * The label half is rendered. The submit half is asserted against the source:
- * this project runs SSR-only component tests (`@testing-library/react` is not
- * a dependency), so nothing here can type into the field and press save. What
- * the source assertion pins is the wiring — that the glucose branch inverts
- * through `toCanonicalMgdl` rather than sending the typed number on — and
- * `src/lib/__tests__/glucose.test.ts` proves the conversion itself.
- */
-
-let glucoseUnit: string | null = null;
-
-vi.mock("@/hooks/use-auth", () => ({
-  useAuth: () => ({
-    user: {
-      id: "u1",
-      username: "testuser",
-      role: "USER",
-      unitPreference: "metric",
-      glucoseUnit,
-    },
-    isAuthenticated: true,
-    isLoading: false,
-  }),
-}));
-
-vi.mock("@tanstack/react-query", () => ({
-  useQueryClient: () => ({
-    invalidateQueries: vi.fn(),
-    refetchQueries: vi.fn(),
-  }),
-}));
-
-vi.mock("@/lib/api/api-fetch", () => ({
-  apiPost: vi.fn().mockResolvedValue({}),
-}));
-
-import { I18nProvider } from "@/lib/i18n/context";
-import { MeasurementForm } from "../measurement-form";
-
-function render(): string {
-  return renderToStaticMarkup(
-    <I18nProvider initialLocale="en">
-      <MeasurementForm defaultType="BLOOD_GLUCOSE" />
-    </I18nProvider>,
-  );
-}
-
-const formSource = readFileSync(
-  join(process.cwd(), "src/components/measurements/measurement-form.tsx"),
-  "utf8",
-);
-
-describe("MeasurementForm — blood-glucose entry unit", () => {
-  it("asks in mg/dL for an account that never chose", () => {
-    glucoseUnit = null;
-    const html = render();
-    expect(html).toContain("mg/dL");
-    expect(html).not.toContain("mmol/L");
-    expect(html).toContain('placeholder="95"');
-  });
-
-  it("asks in mmol/L once the account chose it", () => {
-    glucoseUnit = "mmol/L";
-    const html = render();
-    expect(html).toContain("mmol/L");
-    // A mmol/L reader must not be shown a three-digit mg/dL example.
-    expect(html).toContain('placeholder="5.3"');
-    expect(html).not.toContain('placeholder="95"');
-  });
-
-  it("inverts a glucose entry to canonical mg/dL before it is sent", () => {
-    expect(formSource).toMatch(
-      /if \(isGlucoseMode\) \{\s*canonicalValue = toCanonicalMgdl\(typed, glucoseUnit\);/,
-    );
-  });
-
-  it("resolves the unit from the account rather than assuming one", () => {
-    expect(formSource).toMatch(
-      /const glucoseUnit = resolveGlucoseUnit\(user\?\.glucoseUnit\)/,
-    );
-  });
-});
diff --git a/src/components/measurements/__tests__/measurement-form-module-types.test.tsx b/src/components/measurements/__tests__/measurement-form-module-types.test.ts
similarity index 60%
rename from src/components/measurements/__tests__/measurement-form-module-types.test.tsx
rename to src/components/measurements/__tests__/measurement-form-module-types.test.ts
index 98a2ec7c9..12e4efd15 100644
--- a/src/components/measurements/__tests__/measurement-form-module-types.test.tsx
+++ b/src/components/measurements/__tests__/measurement-form-module-types.test.ts
@@ -6,45 +6,18 @@
  * file a reading into a domain whose pages, charts and reads are all hidden,
  * or be refused by the route. The form now filters its types through the
  * surface map's type ownership (`summary:<type>`), which the test below holds
- * equal to the measurement-scope ownership the server gates on.
+ * equal to the measurement-scope ownership the server gates on. That the
+ * mounted form neither opens on nor offers such a type is driven in
+ * `measurement-form.browser.test.tsx`.
  */
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 
 import type { MeasurementType } from "@/generated/prisma/client";
 import { moduleForMeasurementType } from "@/lib/modules/measurement-scope";
 import { surfaceModule } from "@/lib/modules/surface";
 
-const auth = vi.hoisted(() => ({
-  modules: undefined as Record<string, boolean> | undefined,
-}));
-vi.mock("@/hooks/use-auth", () => ({
-  useAuth: () => ({
-    user: {
-      id: "u1",
-      role: "USER",
-      unitPreference: "metric",
-      glucoseUnit: null,
-      modules: auth.modules,
-    },
-    isAuthenticated: true,
-    isLoading: false,
-  }),
-}));
-vi.mock("@tanstack/react-query", () => ({
-  useQueryClient: () => ({
-    invalidateQueries: vi.fn(),
-    refetchQueries: vi.fn(),
-  }),
-}));
-vi.mock("@/lib/api/api-fetch", () => ({
-  apiPost: vi.fn().mockResolvedValue({}),
-}));
-
-import { I18nProvider } from "@/lib/i18n/context";
 import {
   MEASUREMENT_FORM_TYPE_VALUES,
-  MeasurementForm,
   measurementFormTypes,
 } from "../measurement-form";
 
@@ -77,17 +50,3 @@ describe("measurementFormTypes", () => {
     expect(owned).toBeGreaterThan(0);
   });
 });
-
-describe("<MeasurementForm> with a type's module off", () => {
-  it("does not open on that type, even when asked to", () => {
-    auth.modules = { glucose: false };
-    const html = renderToStaticMarkup(
-      <I18nProvider initialLocale="en">
-        <MeasurementForm defaultType="BLOOD_GLUCOSE" />
-      </I18nProvider>,
-    );
-    auth.modules = undefined;
-    expect(html).not.toContain("mg/dL");
-    expect(html).toContain("mmHg");
-  });
-});
diff --git a/src/components/measurements/__tests__/measurement-form-unit-label.test.tsx b/src/components/measurements/__tests__/measurement-form-unit-label.test.tsx
deleted file mode 100644
index b53d0d50a..000000000
--- a/src/components/measurements/__tests__/measurement-form-unit-label.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-
-/**
- * v1.32.26 (issue #627) — the manual entry form labels its value field in the
- * user's preferred unit for a type with a metric/imperial transform. A metric
- * user sees "kg"; an imperial user sees "lb". The field is the entry boundary
- * that converts the typed number back to canonical SI on submit, so the label
- * and the stored unit must agree with the preference.
- */
-
-let preference: "metric" | "imperial" = "metric";
-
-vi.mock("@/hooks/use-auth", () => ({
-  useAuth: () => ({
-    user: {
-      id: "u1",
-      username: "testuser",
-      role: "USER",
-      unitPreference: preference,
-    },
-    isAuthenticated: true,
-    isLoading: false,
-  }),
-}));
-
-vi.mock("@tanstack/react-query", () => ({
-  useQueryClient: () => ({
-    invalidateQueries: vi.fn(),
-    refetchQueries: vi.fn(),
-  }),
-}));
-
-vi.mock("@/lib/api/api-fetch", () => ({
-  apiPost: vi.fn().mockResolvedValue({}),
-}));
-
-import { I18nProvider } from "@/lib/i18n/context";
-import { MeasurementForm } from "../measurement-form";
-
-function render(): string {
-  return renderToStaticMarkup(
-    <I18nProvider initialLocale="en">
-      <MeasurementForm defaultType="WEIGHT" />
-    </I18nProvider>,
-  );
-}
-
-describe("MeasurementForm — preferred-unit value label", () => {
-  it("labels the weight field in kg for a metric user", () => {
-    preference = "metric";
-    const html = render();
-    expect(html).toContain("kg");
-    expect(html).not.toContain("lb");
-    // The metric placeholder (kg) is shown, not the imperial one.
-    expect(html).toContain('placeholder="75.5"');
-  });
-
-  it("labels the weight field in lb for an imperial user", () => {
-    preference = "imperial";
-    const html = render();
-    expect(html).toContain("lb");
-    // The imperial placeholder (lb) is shown.
-    expect(html).toContain('placeholder="165"');
-  });
-});
diff --git a/src/components/measurements/__tests__/measurement-form.browser.test.tsx b/src/components/measurements/__tests__/measurement-form.browser.test.tsx
new file mode 100644
index 000000000..10a5b9007
--- /dev/null
+++ b/src/components/measurements/__tests__/measurement-form.browser.test.tsx
@@ -0,0 +1,309 @@
+/**
+ * `<MeasurementForm>` driven by typing and pressing Save, with the request
+ * body read off the network boundary. What the markup tests could only pin
+ * against the source is asserted on the wire here: a weight typed in lb, a
+ * glucose typed in mmol/L and a sleep typed as "7:30" each arrive in their
+ * canonical unit.
+ */
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+
+import type { AuthUser } from "@/hooks/use-auth";
+
+import { pinDate } from "../../../../tests/browser/clock";
+import {
+  stubFetch,
+  type FetchStub,
+} from "../../../../tests/browser/fetch-stub";
+import { renderWithApp } from "../../../../tests/browser/render";
+import { MeasurementForm } from "../measurement-form";
+
+const NOW = "2026-09-15T10:00:00.000Z";
+
+let api: FetchStub;
+
+beforeEach(() => {
+  pinDate(NOW);
+  api = stubFetch().on("POST", "/api/measurements", { status: 201, data: {} });
+});
+
+async function mount(
+  props: Parameters<typeof MeasurementForm>[0] = {},
+  user: Partial<AuthUser> = {},
+) {
+  const onSuccess = vi.fn();
+  const { screen } = await renderWithApp(
+    <MeasurementForm onSuccess={onSuccess} onCancel={() => {}} {...props} />,
+    { user },
+  );
+  const save = screen.getByRole("button", { name: "Save" });
+  return { screen, onSuccess, save };
+}
+
+const posted = () => api.calls("POST", "/api/measurements").map((r) => r.body);
+
+describe("<MeasurementForm> blood pressure", () => {
+  it("sends systolic, diastolic and pulse as one batch at the chosen instant", async () => {
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "BLOOD_PRESSURE",
+    });
+    await screen.getByLabelText(/^Systolic/).fill("128");
+    await screen.getByLabelText(/^Diastolic/).fill("84");
+    await screen.getByLabelText(/^Pulse/).fill("66");
+    await screen.getByLabelText(/^Notes/).fill("after the stairs");
+    await save.click();
+
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    const at = NOW;
+    expect(posted()).toEqual([
+      [
+        {
+          type: "BLOOD_PRESSURE_SYS",
+          value: 128,
+          measuredAt: at,
+          notes: "after the stairs",
+        },
+        {
+          type: "BLOOD_PRESSURE_DIA",
+          value: 84,
+          measuredAt: at,
+          notes: "after the stairs",
+        },
+        { type: "PULSE", value: 66, measuredAt: at, notes: "after the stairs" },
+      ],
+    ]);
+    // Only the write: nothing else in the cache needed refetching.
+    expect(api.requests.map((r) => `${r.method} ${r.path}`)).toEqual([
+      "POST /api/measurements",
+    ]);
+    await expect.element(screen.getByLabelText(/^Systolic/)).toHaveValue(null);
+  });
+
+  it("leaves the pulse out when it was not typed", async () => {
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "BLOOD_PRESSURE",
+    });
+    await screen.getByLabelText(/^Systolic/).fill("118");
+    await screen.getByLabelText(/^Diastolic/).fill("76");
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    const [batch] = posted() as Array<Array<{ type: string }>>;
+    expect(batch.map((e) => e.type)).toEqual([
+      "BLOOD_PRESSURE_SYS",
+      "BLOOD_PRESSURE_DIA",
+    ]);
+  });
+
+  it("sends nothing while a required reading is missing", async () => {
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "BLOOD_PRESSURE",
+    });
+    await screen.getByLabelText(/^Diastolic/).fill("80");
+    await save.click();
+    const sys = screen
+      .getByLabelText(/^Systolic/)
+      .element() as HTMLInputElement;
+    expect(sys.validity.valueMissing).toBe(true);
+    expect(api.requests).toEqual([]);
+    expect(onSuccess).not.toHaveBeenCalled();
+  });
+
+  it("holds Save and the menu while the write is pending", async () => {
+    const pending = api.deferred("POST", "/api/measurements");
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "BLOOD_PRESSURE",
+    });
+    await screen.getByLabelText(/^Systolic/).fill("120");
+    await screen.getByLabelText(/^Diastolic/).fill("80");
+    await save.click();
+
+    await expect.element(save).toBeDisabled();
+    await expect
+      .element(screen.getByRole("button", { name: "More options" }))
+      .toBeDisabled();
+    await expect
+      .element(screen.getByRole("button", { name: "Cancel" }))
+      .toBeDisabled();
+    expect(onSuccess).not.toHaveBeenCalled();
+
+    pending.release({ status: 201, data: {} });
+    await expect.element(save).toBeEnabled();
+    expect(onSuccess).toHaveBeenCalledOnce();
+  });
+
+  it("names a refused write in the reader's words and keeps what was typed", async () => {
+    api.on("POST", "/api/measurements", {
+      status: 409,
+      error: "Duplicate measurement",
+      meta: { errorCode: "measurement.duplicate_timestamp" },
+    });
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "BLOOD_PRESSURE",
+    });
+    await screen.getByLabelText(/^Systolic/).fill("120");
+    await screen.getByLabelText(/^Diastolic/).fill("80");
+    await save.click();
+
+    await expect
+      .element(screen.getByRole("alert"))
+      .toHaveTextContent("A measurement already exists for this time.");
+    await expect
+      .element(screen.getByLabelText(/^Systolic/))
+      .toHaveAttribute("aria-invalid", "true");
+    await expect.element(screen.getByLabelText(/^Systolic/)).toHaveValue(120);
+    expect(onSuccess).not.toHaveBeenCalled();
+  });
+});
+
+describe("<MeasurementForm> units on the way out", () => {
+  it("asks an imperial reader for lb and stores kg", async () => {
+    const { screen, save, onSuccess } = await mount(
+      { defaultType: "WEIGHT" },
+      { unitPreference: "imperial" },
+    );
+    const field = screen.getByLabelText("Value (lb)");
+    await expect.element(field).toHaveAttribute("placeholder", "165");
+    await field.fill("210");
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()).toEqual([
+      { type: "WEIGHT", value: 95.25, measuredAt: NOW },
+    ]);
+  });
+
+  it("reads a decimal comma for a metric reader", async () => {
+    const { screen, save, onSuccess } = await mount({ defaultType: "WEIGHT" });
+    const field = screen.getByLabelText("Value (kg)");
+    await expect.element(field).toHaveAttribute("placeholder", "75.5");
+    await field.fill("75,5");
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()).toEqual([
+      { type: "WEIGHT", value: 75.5, measuredAt: NOW },
+    ]);
+  });
+
+  it("asks in mg/dL for an account that never chose a glucose unit", async () => {
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "BLOOD_GLUCOSE",
+    });
+    const field = screen.getByLabelText("Value (mg/dL)");
+    await expect.element(field).toHaveAttribute("placeholder", "95");
+    await field.fill("104");
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()).toEqual([
+      {
+        type: "BLOOD_GLUCOSE",
+        value: 104,
+        measuredAt: NOW,
+        glucoseContext: "FASTING",
+      },
+    ]);
+  });
+
+  it("asks a mmol/L reader in mmol/L, stores mg/dL and sends the meal context", async () => {
+    const { screen, save, onSuccess } = await mount(
+      { defaultType: "BLOOD_GLUCOSE" },
+      { glucoseUnit: "mmol/L" },
+    );
+    const field = screen.getByLabelText("Value (mmol/L)");
+    await expect.element(field).toHaveAttribute("placeholder", "5.3");
+    await field.fill("5.5");
+    await screen.getByRole("combobox", { name: /^Context/ }).click();
+    await screen
+      .getByRole("option", { name: "Post-meal (2h after eating)" })
+      .click();
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()).toEqual([
+      {
+        type: "BLOOD_GLUCOSE",
+        value: 99,
+        measuredAt: NOW,
+        glucoseContext: "POSTPRANDIAL",
+      },
+    ]);
+  });
+
+  it("reads a sleep typed as hours and minutes and stores minutes", async () => {
+    const { screen, save, onSuccess } = await mount({
+      defaultType: "SLEEP_DURATION",
+    });
+    await screen.getByLabelText("Value (hours)").fill("7:30");
+    await expect.element(screen.getByText("Read as 7 h 30 min")).toBeVisible();
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()).toEqual([
+      { type: "SLEEP_DURATION", value: 450, measuredAt: NOW },
+    ]);
+  });
+
+  it("refuses a duration it cannot read, under the field", async () => {
+    const { screen, save } = await mount({ defaultType: "SLEEP_DURATION" });
+    const field = screen.getByLabelText("Value (hours)");
+    await field.fill("most of the night");
+    await save.click();
+    await expect
+      .element(screen.getByText("Enter a duration like 7.5, 7:30 or 7h 30m."))
+      .toBeVisible();
+    await expect.element(field).toHaveAttribute("aria-invalid", "true");
+    expect(api.requests).toEqual([]);
+    await field.fill("7.5");
+    await expect
+      .element(screen.getByText("Enter a duration like 7.5, 7:30 or 7h 30m."))
+      .not.toBeInTheDocument();
+  });
+});
+
+describe("<MeasurementForm> type", () => {
+  it("relabels the value field when the type changes", async () => {
+    const { screen } = await mount({ defaultType: "WEIGHT" });
+    await screen.getByRole("combobox", { name: /^Type/ }).click();
+    await screen.getByRole("option", { name: "Body temperature" }).click();
+    await expect.element(screen.getByLabelText("Value (°C)")).toBeVisible();
+    await screen.getByRole("combobox", { name: /^Type/ }).click();
+    await screen.getByRole("option", { name: "Blood Pressure" }).click();
+    await expect.element(screen.getByLabelText(/^Systolic/)).toBeVisible();
+  });
+
+  it("does not open on, or offer, a type whose module is off", async () => {
+    const { screen } = await mount(
+      { defaultType: "BLOOD_GLUCOSE" },
+      { modules: { glucose: false } },
+    );
+    const type = screen.getByRole("combobox", { name: /^Type/ });
+    await expect.element(type).toHaveTextContent("Blood Pressure");
+    await type.click();
+    await expect
+      .element(screen.getByRole("option", { name: "Weight" }))
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("option", { name: "Blood glucose" }))
+      .not.toBeInTheDocument();
+    await userEvent.keyboard("{Escape}");
+  });
+
+  it("opens on the type saved last when no type is asked for", async () => {
+    const first = await mount({ defaultType: "WEIGHT" });
+    await first.screen.getByLabelText("Value (kg)").fill("80");
+    await first.save.click();
+    await expect.poll(() => first.onSuccess.mock.calls.length).toBe(1);
+    first.screen.unmount();
+
+    const { screen } = await mount();
+    await expect
+      .element(screen.getByRole("combobox", { name: /^Type/ }))
+      .toHaveTextContent("Weight");
+  });
+
+  it("clears every field from the menu's Reset", async () => {
+    const { screen } = await mount({ defaultType: "BLOOD_PRESSURE" });
+    await screen.getByLabelText(/^Systolic/).fill("120");
+    await screen.getByLabelText(/^Notes/).fill("left arm");
+    await screen.getByRole("button", { name: "More options" }).click();
+    await screen.getByRole("menuitem", { name: "Reset form" }).click();
+    await expect.element(screen.getByLabelText(/^Systolic/)).toHaveValue(null);
+    await expect.element(screen.getByLabelText(/^Notes/)).toHaveValue("");
+  });
+});
diff --git a/src/components/measurements/__tests__/measurement-list-glucose-unit.test.tsx b/src/components/measurements/__tests__/measurement-list-glucose-unit.test.tsx
index 97765257f..ed1d056da 100644
--- a/src/components/measurements/__tests__/measurement-list-glucose-unit.test.tsx
+++ b/src/components/measurements/__tests__/measurement-list-glucose-unit.test.tsx
@@ -1,5 +1,3 @@
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
 import { describe, expect, it, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 
@@ -63,11 +61,33 @@ vi.mock("@/hooks/use-auth", () => ({
 
 import { I18nProvider } from "@/lib/i18n/context";
 import { MeasurementList } from "../measurement-list";
+import type { UnitDisplay } from "@/hooks/use-unit-display";
+import { convertGlucose, toCanonicalMgdl } from "@/lib/glucose";
+import { getUnitForType } from "@/lib/measurements/unit-map";
+import { editSeedValue, storedValueFor } from "../list/use-measurement-edit";
+import { rowDisplayFor } from "../list/use-measurement-row-display";
 
-const listSource = readFileSync(
-  join(process.cwd(), "src/components/measurements/measurement-list.tsx"),
-  "utf8",
-);
+/** A metric reader on the given glucose unit, as the list's row display. */
+function displayOn(glucoseUnit: "mg/dL" | "mmol/L") {
+  const unitDisplay = {
+    preference: "metric",
+    isTransformed: () => false,
+    toDisplay: (_type: string, v: number) => v,
+    fromDisplay: (_type: string, v: number) => v,
+    unitFor: (type: string) => getUnitForType(type),
+  } as unknown as UnitDisplay;
+  return rowDisplayFor(glucoseUnit, unitDisplay);
+}
+
+const glucose = (value: number) => ({
+  id: "g1",
+  type: "BLOOD_GLUCOSE",
+  value,
+  unit: "mg/dL",
+  source: "MANUAL",
+  measuredAt: "2026-10-01T08:00:00.000Z",
+  notes: null,
+});
 
 function render() {
   return renderToStaticMarkup(
@@ -96,22 +116,27 @@ describe("MeasurementList — blood-glucose display unit", () => {
   });
 
   it("inverts an edited glucose value back to mg/dL before the save", () => {
-    expect(listSource).toMatch(
-      /editsConvertedGlucose\(editing\)[\s\S]{0,400}?canonicalValue = toCanonicalMgdl\(parsedValue, "mmol\/L"\)/,
-    );
+    // The label above the input says mmol/L, so the number in it is mmol/L;
+    // sent on unconverted it would rewrite a 95 mg/dL reading as 5.3.
+    const stored = storedValueFor(displayOn("mmol/L"), glucose(95), 5.3);
+    expect(stored).toBe(toCanonicalMgdl(5.3, "mmol/L"));
+    expect(stored).toBeGreaterThan(90);
   });
 
   it("seeds the edit input in the unit its own label names", () => {
-    expect(listSource).toMatch(
-      /const seedValue = editsConvertedGlucose\(measurement\)\s*\?\s*rd\.value/,
+    const display = displayOn("mmol/L");
+    expect(editSeedValue(display, glucose(95))).toBe(
+      convertGlucose(95, "mmol/L"),
     );
+    expect(display.rowDisplay(glucose(95)).unit).toBe("mmol/L");
   });
 
   it("leaves an mg/dL edit on the identity path so a note fix cannot round the value", () => {
     // `toCanonicalMgdl(v, "mg/dL")` rounds, so routing the mg/dL branch
     // through it would quantise a stored 95.48 on an unrelated edit.
-    expect(listSource).toMatch(
-      /editsConvertedGlucose[\s\S]{0,300}?glucoseUnit === "mmol\/L"/,
-    );
+    const display = displayOn("mg/dL");
+    expect(display.editsConvertedGlucose(glucose(95.48))).toBe(false);
+    expect(editSeedValue(display, glucose(95.48))).toBe(95.48);
+    expect(storedValueFor(display, glucose(95.48), 95.48)).toBe(95.48);
   });
 });
diff --git a/src/components/measurements/list/day-drill-down.tsx b/src/components/measurements/list/day-drill-down.tsx
new file mode 100644
index 000000000..1cda48d4e
--- /dev/null
+++ b/src/components/measurements/list/day-drill-down.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+
+import { EmptyState } from "@/components/ui/empty-state";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
+import { useAuth } from "@/hooks/use-auth";
+import { apiGet } from "@/lib/api/api-fetch";
+import { formatDateTime } from "@/lib/format";
+import { formatDurationMinutes } from "@/lib/i18n/duration";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+
+import { sleepStageLabel, type Measurement } from "./list-model";
+
+/**
+ * The lazy drill-down for a collapsed day or night.
+ * Fires a separate `GET /api/measurements?type=…&dayKey=…` only when
+ * the row is expanded; the result is rendered as a nested list of the
+ * per-sample chunks that summed into the parent row's daily total.
+ */
+export function DayDrillDown({
+  type,
+  dayKey,
+  unit,
+  layout,
+}: {
+  type: string;
+  dayKey: string;
+  unit: string;
+  layout: "desktop" | "mobile";
+}) {
+  const { t } = useTranslations();
+  const { isAuthenticated } = useAuth();
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: queryKeys.measurementDrilldown(type, dayKey),
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set("type", type);
+      params.set("dayKey", dayKey);
+      params.set("sortDir", "asc");
+      return apiGet<{ measurements: Measurement[] }>(
+        `/api/measurements?${params}`,
+      );
+    },
+    enabled: isAuthenticated,
+    // The drill-down is per-day — once fetched it rarely needs to
+    // re-fetch (the underlying day has already stabilised for
+    // anything older than the drain's 36 h cutoff). Keep it cached
+    // for the session.
+    staleTime: 5 * 60 * 1000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="text-muted-foreground flex items-center gap-2 py-2 text-xs">
+        <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+        {t("common.loading")}
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <QueryErrorRow
+        error={error}
+        slot="measurement-drilldown-error"
+        message={t("measurements.loadError")}
+        onRetry={() => void refetch()}
+        className={layout === "desktop" ? "m-2" : "mt-2"}
+      />
+    );
+  }
+  const rows = data?.measurements ?? [];
+  if (rows.length === 0) {
+    return (
+      <EmptyState
+        variant="plain"
+        size="compact"
+        title={t("measurements.emptyDescription")}
+      />
+    );
+  }
+  // For SLEEP_DURATION the drill-down rows are stage segments;
+  // render the stage label + minutes instead of a bare value + unit.
+  const isSleep = type === "SLEEP_DURATION";
+  if (layout === "desktop") {
+    return (
+      <div className="bg-muted/40 space-y-1 p-2">
+        {rows.map((s) => (
+          <div
+            key={s.id}
+            className="flex items-center justify-between gap-3 px-2 py-1 text-xs"
+          >
+            <span className="text-muted-foreground tabular-nums">
+              {isSleep
+                ? sleepStageLabel(s.sleepStage, t)
+                : formatDateTime(s.measuredAt)}
+            </span>
+            <span className="font-medium tabular-nums">
+              {isSleep
+                ? formatDurationMinutes(s.value, t)
+                : `${s.value} ${unit}`}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className="bg-muted/40 mt-2 space-y-1 rounded-md p-2">
+      {rows.map((s) => (
+        <div
+          key={s.id}
+          className="flex items-center justify-between gap-2 px-1 py-1 text-xs"
+        >
+          <span className="text-muted-foreground tabular-nums">
+            {isSleep
+              ? sleepStageLabel(s.sleepStage, t)
+              : formatDateTime(s.measuredAt)}
+          </span>
+          <span className="font-medium tabular-nums">
+            {isSleep ? formatDurationMinutes(s.value, t) : `${s.value} ${unit}`}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Sub-caption for a per-night sleep row: the row's value is the day's sleep,
+ * main night plus naps, so the caption says how many naps it includes, and
+ * the night's mid-sleep awakenings when present.
+ */
+export function SleepNightCaption({ m }: { m: Measurement }) {
+  const { t } = useTranslations();
+  const napCount = m.napCount ?? 0;
+  const awakenings = m.awakenings ?? 0;
+  const parts: string[] = [];
+  if (napCount > 0) {
+    parts.push(t("measurements.sleepNapCaption", { count: String(napCount) }));
+  }
+  if (awakenings > 0) {
+    parts.push(
+      t("measurements.sleepAwakeningsCaption", { count: String(awakenings) }),
+    );
+  }
+  if (parts.length === 0) return null;
+  return (
+    <span className="text-muted-foreground ml-2 text-xs font-normal">
+      {parts.join(" · ")}
+    </span>
+  );
+}
diff --git a/src/components/measurements/list/list-model.ts b/src/components/measurements/list/list-model.ts
new file mode 100644
index 000000000..7fe3519b6
--- /dev/null
+++ b/src/components/measurements/list/list-model.ts
@@ -0,0 +1,141 @@
+import { MEASUREMENT_SOURCE_LIST_LABEL_KEYS } from "@/lib/i18n/source-labels";
+import type { useTranslations } from "@/lib/i18n/context";
+import { CUMULATIVE_DAY_SUM_TYPES } from "@/lib/measurements/cumulative-day-sum";
+import { MEASUREMENT_NOTES_MAX_LENGTH } from "@/lib/measurements/notes-limit";
+import { MEASUREMENT_SOURCES } from "@/lib/measurements/sources";
+
+type Translate = ReturnType<typeof useTranslations>["t"];
+
+/**
+ * Cumulative types whose list view collapses to one row per profile-zone day
+ * with a chevron into the per-sample chunks. Mirrors the server's
+ * `CUMULATIVE_DAY_SUM_TYPES`, so the route's `groupBy=day` branch and the
+ * client's filter detection agree.
+ */
+export const CUMULATIVE_TYPES = new Set<string>(CUMULATIVE_DAY_SUM_TYPES);
+
+// Columns that open descending when first selected. The date column reads
+// newest-first by default; every other column opens ascending.
+export const MEASUREMENT_DESC_COLUMNS: ReadonlySet<string> = new Set([
+  "measuredAt",
+]);
+
+export interface Measurement {
+  id: string;
+  type: string;
+  value: number;
+  unit: string;
+  source: string;
+  measuredAt: string;
+  notes: string | null;
+  /**
+   * Present only on collapsed daily rows (`?type=…&groupBy=day`): drives the
+   * expand chevron and the drill-down read keyed by the calendar day.
+   */
+  dayKey?: string;
+  sampleCount?: number;
+  /**
+   * Present only on per-night SLEEP_DURATION rows. `value` is the night's
+   * time asleep in minutes; these carry the night's context so the row
+   * reads as one night, not many stage values.
+   */
+  sleepStage?: string | null;
+  napCount?: number;
+  napAsleepMinutes?: number;
+  awakenings?: number;
+}
+
+/** A synthetic day or night row: many raw rows behind one `dayKey`. */
+export function isGroupedRow(m: Measurement): boolean {
+  return m.dayKey !== undefined && m.sampleCount !== undefined;
+}
+
+/** The labels for the sleep stages shown in the drill-down. */
+export function sleepStageLabel(
+  stage: string | null | undefined,
+  t: Translate,
+): string {
+  switch (stage) {
+    case "DEEP":
+      return t("insights.sleep.stages.deep");
+    case "REM":
+      return t("insights.sleep.stages.rem");
+    case "CORE":
+      return t("insights.sleep.stages.core");
+    case "ASLEEP":
+      return t("insights.sleep.stages.asleep");
+    case "AWAKE":
+      return t("insights.sleep.stages.awake");
+    case "IN_BED":
+      return t("insights.sleep.stages.inBed");
+    default:
+      return stage ?? "";
+  }
+}
+
+export const PAGE_SIZE = 25;
+// Input cap mirrors the server Zod bound. The list preview truncates at a
+// shorter width so a long note does not stretch a list row.
+export const MAX_COMMENT_LENGTH = MEASUREMENT_NOTES_MAX_LENGTH;
+const COMMENT_PREVIEW_LENGTH = 40;
+
+export function truncateComment(comment: string): string {
+  if (comment.length <= COMMENT_PREVIEW_LENGTH) return comment;
+  return `${comment.slice(0, COMMENT_PREVIEW_LENGTH - 1)}…`;
+}
+
+export function toDateTimeLocalValue(isoString: string): string {
+  const date = new Date(isoString);
+  const offset = date.getTimezoneOffset();
+  const local = new Date(date.getTime() - offset * 60 * 1000);
+  return local.toISOString().slice(0, 16);
+}
+
+/**
+ * The `MeasurementSource` enum through the `measurements.source*` keys, so
+ * the SCREAMING_SNAKE enum never reaches a cell or the filter. The catalogue
+ * is keyed by the enum, so a provider added without its label is a type
+ * error rather than a row that reads `GOOGLE_HEALTH`.
+ */
+export function formatMeasurementSource(source: string, t: Translate) {
+  const key = MEASUREMENT_SOURCE_LIST_LABEL_KEYS[
+    source as keyof typeof MEASUREMENT_SOURCE_LIST_LABEL_KEYS
+  ] as string | undefined;
+  // A row written by a server the client does not know yet still renders as
+  // its own value rather than as a missing translation key.
+  return key ? t(key) : source;
+}
+
+/** The sources the filter offers, from the shared Zod enum. */
+export const MEASUREMENT_SOURCE_OPTIONS = MEASUREMENT_SOURCES;
+
+/**
+ * A date input's `YYYY-MM-DD` as the offset-bearing ISO datetime the list's
+ * `from` / `to` params need: `from` at the local start of the day, `to` at
+ * its local end, so a single-day range returns the whole day.
+ */
+export function dayBoundaryIso(
+  day: string,
+  boundary: "start" | "end",
+): string | undefined {
+  if (!day) return undefined;
+  const [y, m, d] = day.split("-").map(Number);
+  if (!y || !m || !d) return undefined;
+  const date =
+    boundary === "start"
+      ? new Date(y, m - 1, d, 0, 0, 0, 0)
+      : new Date(y, m - 1, d, 23, 59, 59, 999);
+  if (Number.isNaN(date.getTime())) return undefined;
+  return date.toISOString();
+}
+
+/**
+ * Per-source badge colour: Apple Health in the pink of the iOS app's accent,
+ * everything else the outline default.
+ */
+export function sourceBadgeClass(source: string): string {
+  if (source === "APPLE_HEALTH") {
+    return "border-brand-pink/50 bg-brand-pink/15 text-brand-pink";
+  }
+  return "";
+}
diff --git a/src/components/measurements/list/measurement-card-list.tsx b/src/components/measurements/list/measurement-card-list.tsx
new file mode 100644
index 000000000..ce5f90d09
--- /dev/null
+++ b/src/components/measurements/list/measurement-card-list.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DayLink, DayLinkAt } from "@/components/day/day-link";
+import { formatDateOrRelative } from "@/lib/format";
+import { formatDurationMinutes } from "@/lib/i18n/duration";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { rawDisplayFractionDigits } from "@/lib/measurements/display-transform";
+import { ListRow } from "@/components/ui/list-row";
+import { measurementUnitMetaLead } from "@/lib/measurements/unit-label";
+
+import {
+  MEASUREMENT_TYPE_COLORS as TYPE_COLORS,
+  MEASUREMENT_TYPE_ICONS as TYPE_ICONS,
+} from "../measurement-list-meta";
+
+import { DayDrillDown, SleepNightCaption } from "./day-drill-down";
+import {
+  MeasurementRowActions,
+  rowState,
+  typeLabel,
+  type MeasurementRowContext,
+} from "./row-actions";
+import {
+  formatMeasurementSource,
+  sourceBadgeClass,
+  truncateComment,
+  type Measurement,
+} from "./list-model";
+
+/** The phone list: one card per reading, day or night. */
+export function MeasurementCardList({
+  measurements,
+  rows,
+}: {
+  measurements: Measurement[];
+  rows: MeasurementRowContext;
+}) {
+  return (
+    <div data-slot="measurement-rows" className="space-y-2 md:hidden">
+      {measurements.map((m) => (
+        <MeasurementCard key={m.id} m={m} rows={rows} />
+      ))}
+    </div>
+  );
+}
+
+/** One card, and under a grouped card its open drill-down. */
+function MeasurementCard({
+  m,
+  rows,
+}: {
+  m: Measurement;
+  rows: MeasurementRowContext;
+}) {
+  const { canManage, onToggleRow, navigateForType, display } = rows;
+  const { isGrouped, isSelected, isExpanded } = rowState(m, rows);
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const { rowDisplay, rowIdentityAttrs } = display;
+  const Icon = TYPE_ICONS[m.type];
+  const isSleep = m.type === "SLEEP_DURATION";
+  const drilldownId = `drilldown-mobile-${m.dayKey ?? m.id}`;
+  const label = typeLabel(m.type, t);
+  // The unit is meta: on a phone a long one ("Atemzüge/min") beside the
+  // value pushed the row's controls, so it leads the meta line instead. A
+  // night reads as a duration and has none.
+  const unitLead = isSleep
+    ? null
+    : measurementUnitMetaLead(
+        m.type,
+        isGrouped ? m.unit : rowDisplay(m).unit,
+        t,
+      );
+  return (
+    <ListRow
+      data-state={isSelected ? "selected" : undefined}
+      // The same addressing contract as the desktop row.
+      {...rowIdentityAttrs(m, isGrouped)}
+      data-display-unit={isGrouped ? m.unit : rowDisplay(m).unit}
+      className="bg-card border-border data-[state=selected]:border-primary/60 data-[state=selected]:bg-primary/5"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {!isGrouped && canManage && (
+            // The checkbox owns its 44 px hit area through an `after`
+            // hit-slop inside a plain layout `<div>`: a wrapper `<button>`
+            // would nest a button in a button, invalid markup that failed
+            // hydration on every list paint.
+            <div className="flex size-11 shrink-0 items-center justify-center">
+              <Checkbox
+                checked={isSelected}
+                onCheckedChange={() => onToggleRow(m.id)}
+                aria-label={t("dataList.selectRow")}
+                className="relative after:absolute after:-inset-3.5"
+              />
+            </div>
+          )}
+          {Icon && (
+            <button
+              type="button"
+              onClick={() => navigateForType(m.type)}
+              aria-label={t("measurements.openMetricInsights", {
+                type: label,
+              })}
+              className={`focus-visible:ring-ring/50 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none ${TYPE_COLORS[m.type] ?? ""}`}
+            >
+              <Icon className="h-4 w-4" />
+            </button>
+          )}
+          <div className="min-w-0 flex-1">
+            {/* The type names the row: without it two readings in the same
+                unit ("55 ms" HRV and "63 ms" RMSSD) could not be told apart
+                on a phone, where the table's type column does not exist. */}
+            <p
+              className="truncate text-xs font-medium"
+              data-slot="measurement-row-type"
+            >
+              {label}
+            </p>
+            <span
+              className="font-semibold tabular-nums"
+              data-slot="measurement-row-value"
+            >
+              {isSleep
+                ? formatDurationMinutes(m.value, t)
+                : isGrouped
+                  ? fmt.integer(m.value)
+                  : fmt.number(
+                      rowDisplay(m).value,
+                      rawDisplayFractionDigits(m.type),
+                    )}
+            </span>
+            {isSleep ? (
+              <SleepNightCaption m={m} />
+            ) : (
+              isGrouped && (
+                <span className="text-muted-foreground ml-1.5 text-xs">
+                  {t("measurements.dailyTotalCaption", {
+                    count: fmt.integer(m.sampleCount as number),
+                  })}
+                </span>
+              )
+            )}
+            {/* The meta line wraps rather than truncates: cut short it hid
+                the day it opens and the source beside it. */}
+            <p className="text-muted-foreground text-xs">
+              {unitLead ? (
+                <span
+                  data-slot="measurement-row-unit"
+                  className="whitespace-nowrap"
+                >
+                  {unitLead}
+                </span>
+              ) : null}
+              {m.dayKey !== undefined ? (
+                <DayLink date={m.dayKey} className="whitespace-nowrap">
+                  {formatDateOrRelative(m.measuredAt, t)}
+                </DayLink>
+              ) : (
+                <DayLinkAt at={m.measuredAt} className="whitespace-nowrap">
+                  {formatDateOrRelative(m.measuredAt, t)}
+                </DayLinkAt>
+              )}
+              {m.source !== "MANUAL" && (
+                <Badge
+                  variant="outline"
+                  data-testid="measurement-source-badge"
+                  className={`ml-1.5 h-4 px-1 text-xs ${sourceBadgeClass(m.source)}`.trim()}
+                >
+                  {formatMeasurementSource(m.source, t)}
+                </Badge>
+              )}
+            </p>
+            {m.notes && (
+              // User data is never muted; the table renders the same note in
+              // the foreground colour.
+              <p className="text-foreground truncate text-xs">
+                {truncateComment(m.notes)}
+              </p>
+            )}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <MeasurementRowActions
+            m={m}
+            rows={rows}
+            isGrouped={isGrouped}
+            isExpanded={isExpanded}
+            drilldownId={drilldownId}
+            layout="mobile"
+          />
+        </div>
+      </div>
+      {isGrouped && isExpanded && (
+        <div id={drilldownId}>
+          <DayDrillDown
+            type={m.type}
+            dayKey={m.dayKey as string}
+            unit={m.unit}
+            layout="mobile"
+          />
+        </div>
+      )}
+    </ListRow>
+  );
+}
diff --git a/src/components/measurements/list/measurement-edit-sheet.tsx b/src/components/measurements/list/measurement-edit-sheet.tsx
new file mode 100644
index 000000000..8a8200370
--- /dev/null
+++ b/src/components/measurements/list/measurement-edit-sheet.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { Loader2, MoreHorizontal, Trash2 } from "lucide-react";
+
+import { SeededFormDiscardDialog } from "@/components/forms/use-seeded-form-dismissal";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { DateTimeField } from "@/components/ui/date-time-field";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { useTranslations } from "@/lib/i18n/context";
+
+import { MEASUREMENT_TYPE_LABEL_KEYS as TYPE_LABEL_KEYS } from "../measurement-list-meta";
+
+import { MAX_COMMENT_LENGTH, toDateTimeLocalValue } from "./list-model";
+import type { MeasurementEdit } from "./use-measurement-edit";
+import type { MeasurementRowDisplay } from "./use-measurement-row-display";
+
+/**
+ * The edit sheet (a bottom sheet on phones): value in the display unit,
+ * timestamp, note, and the delete behind the overflow menu, with the
+ * actions portalled into the sheet's pinned footer.
+ */
+export function MeasurementEditSheet({
+  edit,
+  display,
+}: {
+  edit: MeasurementEdit;
+  display: MeasurementRowDisplay;
+}) {
+  const { t } = useTranslations();
+  const { rowDisplay } = display;
+  const {
+    editing,
+    closeEdit,
+    setEditFooterEl,
+    editFormId,
+    submitEdit,
+    editValue,
+    setEditValue,
+    editError,
+    editErrorDescriptor,
+    editMeasuredAt,
+    setEditMeasuredAt,
+    editNotes,
+    setEditNotes,
+    editErrorId,
+    editFooterEl,
+    deleteMutation,
+    setEditDeleteDialogOpen,
+    editDeleteDialogOpen,
+    deleteEditingMeasurement,
+    editDismissal,
+  } = edit;
+  return (
+    <>
+      <ResponsiveSheet
+        open={!!editing}
+        onOpenChange={(open) => !open && closeEdit()}
+        title={t("measurements.editMeasurement")}
+        footer={<div ref={setEditFooterEl} className="flex w-full" />}
+      >
+        {editing && (
+          <form id={editFormId} onSubmit={submitEdit} className="space-y-4">
+            <div className="flex items-center gap-1.5">
+              <Label className="shrink-0">{t("measurements.type")}</Label>
+              <span className="text-sm leading-none font-medium">
+                {TYPE_LABEL_KEYS[editing.type]
+                  ? t(TYPE_LABEL_KEYS[editing.type])
+                  : editing.type}
+              </span>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-value">
+                {t("measurements.valueWithUnit", {
+                  unit: rowDisplay(editing).unit,
+                })}
+              </Label>
+              <Input
+                id="edit-value"
+                type="number"
+                enterKeyHint="next"
+                step="any"
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                required
+                aria-required="true"
+                aria-invalid={!!editError || undefined}
+                aria-describedby={editErrorDescriptor}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-measuredAt">
+                {t("measurements.timestamp")}
+              </Label>
+              <DateTimeField
+                id="edit-measuredAt"
+                value={editMeasuredAt}
+                onChange={setEditMeasuredAt}
+                // Match the server bound: no future instant.
+                max={toDateTimeLocalValue(new Date().toISOString())}
+                required
+                aria-required="true"
+                aria-invalid={!!editError || undefined}
+                aria-describedby={editErrorDescriptor}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <Label htmlFor="edit-notes">
+                  {t("measurements.notes")} ({t("common.optional")})
+                </Label>
+                <span className="text-muted-foreground text-xs">
+                  {editNotes.length}/{MAX_COMMENT_LENGTH}
+                </span>
+              </div>
+              <Input
+                id="edit-notes"
+                value={editNotes}
+                onChange={(e) => setEditNotes(e.target.value)}
+                maxLength={MAX_COMMENT_LENGTH}
+                enterKeyHint="done"
+                autoCapitalize="sentences"
+              />
+            </div>
+
+            {editError && (
+              <div
+                id={editErrorId}
+                role="alert"
+                aria-live="assertive"
+                className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm"
+              >
+                {editError}
+              </div>
+            )}
+
+            {editFooterEl
+              ? createPortal(<EditSheetFooter edit={edit} />, editFooterEl)
+              : null}
+
+            <AlertDialog
+              open={editDeleteDialogOpen}
+              onOpenChange={setEditDeleteDialogOpen}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t("measurements.deleteConfirmTitle")}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("measurements.deleteConfirmDescription")}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={deleteMutation.isPending}>
+                    {t("common.cancel")}
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    variant="destructive"
+                    onClick={deleteEditingMeasurement}
+                    disabled={deleteMutation.isPending}
+                  >
+                    {deleteMutation.isPending ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                    ) : null}
+                    {t("common.delete")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </form>
+        )}
+      </ResponsiveSheet>
+      <SeededFormDiscardDialog
+        open={editDismissal.discardDialogOpen}
+        onConfirm={editDismissal.confirmDiscard}
+        onCancel={editDismissal.cancelDiscard}
+      />
+    </>
+  );
+}
+
+/**
+ * The sheet's pinned footer: the overflow menu with delete on the left,
+ * cancel and save on the right.
+ */
+function EditSheetFooter({ edit }: { edit: MeasurementEdit }) {
+  const { t } = useTranslations();
+  const {
+    updateMutation,
+    deleteMutation,
+    setEditDeleteDialogOpen,
+    closeEdit,
+    editFormId,
+  } = edit;
+  return (
+    <div className="flex w-full items-center justify-between gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-lg"
+            disabled={updateMutation.isPending || deleteMutation.isPending}
+            aria-label={t("common.moreOptions")}
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => setEditDeleteDialogOpen(true)}>
+            <Trash2 className="mr-2 h-4 w-4" />
+            {t("common.delete")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* `[Cancel] [Save]`, primary rightmost, per Apple's HIG: iOS is the
+          load-bearing phone target and the web shell renders desktop and the
+          iOS PWA from one component. Do not flip it for "Android parity";
+          fork a platform shell if Android becomes a real audience. */}
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={closeEdit}
+          disabled={updateMutation.isPending || deleteMutation.isPending}
+        >
+          {t("common.cancel")}
+        </Button>
+        <Button
+          type="submit"
+          form={editFormId}
+          disabled={updateMutation.isPending || deleteMutation.isPending}
+        >
+          {updateMutation.isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+          ) : null}
+          {t("common.save")}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/measurements/list/measurement-filter-rail.tsx b/src/components/measurements/list/measurement-filter-rail.tsx
new file mode 100644
index 000000000..dd417ad69
--- /dev/null
+++ b/src/components/measurements/list/measurement-filter-rail.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import {
+  FilterBar,
+  FilterBarDateRange,
+  FilterBarNumberRange,
+  FilterBarSelect,
+} from "@/components/ui/filter-bar";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+
+import { MEASUREMENT_TYPE_LABEL_KEYS as TYPE_LABEL_KEYS } from "../measurement-list-meta";
+
+import {
+  MEASUREMENT_SOURCE_OPTIONS,
+  formatMeasurementSource,
+} from "./list-model";
+import type { MeasurementListFilters } from "./use-measurement-list-filters";
+
+/**
+ * The filter rail: compact pill triggers in the canonical order date range ·
+ * type · source · value range, active filters folded into their pill as
+ * removable chips, a reset action and the result count.
+ */
+export function MeasurementFilterRail({
+  filters,
+  total,
+}: {
+  filters: MeasurementListFilters;
+  total: number | undefined;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const {
+    typeFilter,
+    sourceFilter,
+    fromDay,
+    toDay,
+    valueMinInput,
+    valueMaxInput,
+    isDayGroupedFilter,
+    resetFilters,
+    setFromDay,
+    setToDay,
+    setTypeFilter,
+    setSourceFilter,
+    setValueMinInput,
+    setValueMaxInput,
+  } = filters;
+  return (
+    <FilterBar
+      isFiltered={
+        typeFilter !== "ALL" ||
+        sourceFilter !== "ALL" ||
+        fromDay !== "" ||
+        toDay !== "" ||
+        (!isDayGroupedFilter && (valueMinInput !== "" || valueMaxInput !== ""))
+      }
+      onReset={resetFilters}
+      count={
+        total !== undefined
+          ? t("measurements.measurementCount", {
+              count: fmt.integer(total),
+            })
+          : undefined
+      }
+    >
+      <FilterBarDateRange
+        label={t("dataList.dateRange")}
+        from={fromDay}
+        to={toDay}
+        onFromChange={setFromDay}
+        onToChange={setToDay}
+        idPrefix="measurements"
+      />
+      <FilterBarSelect
+        label={t("dataList.typeLabel")}
+        value={typeFilter}
+        onValueChange={setTypeFilter}
+        allLabel={t("measurements.allTypes")}
+        options={Object.entries(TYPE_LABEL_KEYS).map(([val, labelKey]) => ({
+          value: val,
+          label: t(labelKey),
+        }))}
+      />
+      <FilterBarSelect
+        label={t("dataList.sourceLabel")}
+        value={sourceFilter}
+        onValueChange={setSourceFilter}
+        allLabel={t("dataList.allSources")}
+        options={MEASUREMENT_SOURCE_OPTIONS.map((src) => ({
+          value: src,
+          label: formatMeasurementSource(src, t),
+        }))}
+      />
+      {/* Value-range pill. Hidden for the day-grouped /
+          sleep-night types where the painted `value` is a synthesised
+          SUM / per-night total rather than a raw reading. */}
+      {!isDayGroupedFilter && (
+        <FilterBarNumberRange
+          label={t("dataList.valueRange")}
+          min={valueMinInput}
+          max={valueMaxInput}
+          onMinChange={setValueMinInput}
+          onMaxChange={setValueMaxInput}
+          idPrefix="measurements-value"
+          fromLabel={t("dataList.valueMin")}
+          toLabel={t("dataList.valueMax")}
+        />
+      )}
+    </FilterBar>
+  );
+}
diff --git a/src/components/measurements/list/measurement-table.tsx b/src/components/measurements/list/measurement-table.tsx
new file mode 100644
index 000000000..b90e33fc2
--- /dev/null
+++ b/src/components/measurements/list/measurement-table.tsx
@@ -0,0 +1,277 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DayLink, DayLinkAt } from "@/components/day/day-link";
+import { formatDateOrRelative } from "@/lib/format";
+import { formatDurationMinutes } from "@/lib/i18n/duration";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { rawDisplayFractionDigits } from "@/lib/measurements/display-transform";
+import { SortableHead } from "@/components/data-list";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { measurementUnitLabel } from "@/lib/measurements/unit-label";
+
+import { MEASUREMENT_TYPE_COLORS as TYPE_COLORS } from "../measurement-list-meta";
+
+import { DayDrillDown, SleepNightCaption } from "./day-drill-down";
+import {
+  MeasurementRowActions,
+  rowState,
+  typeLabel,
+  type MeasurementRowContext,
+} from "./row-actions";
+import {
+  formatMeasurementSource,
+  sourceBadgeClass,
+  truncateComment,
+  type Measurement,
+} from "./list-model";
+import type { MeasurementListData } from "./use-measurement-list-data";
+import type { MeasurementListFilters } from "./use-measurement-list-filters";
+
+/** The desktop table: one row per reading, day or night, sortable columns. */
+export function MeasurementTable({
+  measurements,
+  rows,
+  filters,
+  list,
+}: {
+  measurements: Measurement[];
+  rows: MeasurementRowContext;
+  filters: MeasurementListFilters;
+  list: MeasurementListData;
+}) {
+  const { t } = useTranslations();
+  const { canManage } = rows;
+  const { sortBy, sortDir, toggleSort } = filters;
+  const { selectAll, pageIds, onToggleSelectAll } = list;
+  return (
+    <div
+      // `measurement-rows` marks the READ rows, not the list frame:
+      // the filter rail above renders next to the loading
+      // silhouettes as well, so it proves nothing about the data
+      // having arrived. This wrapper exists only in the resolved,
+      // non-empty branch, and the mobile list below carries the
+      // same marker so a wait on it holds at any viewport.
+      data-slot="measurement-rows"
+      className="bg-card border-border hidden overflow-hidden rounded-lg border md:block"
+    >
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-10 pl-4">
+              {/* Select all on the page. Bulk delete is the owner's alone,
+                  so a delegate gets no selection column. */}
+              {canManage && (
+                <Checkbox
+                  checked={
+                    selectAll === "all"
+                      ? true
+                      : selectAll === "some"
+                        ? "indeterminate"
+                        : false
+                  }
+                  disabled={pageIds.length === 0}
+                  onCheckedChange={onToggleSelectAll}
+                  aria-label={t("dataList.selectAll")}
+                />
+              )}
+            </TableHead>
+            <TableHead className="w-28">{t("measurements.type")}</TableHead>
+            <SortableHead
+              column="value"
+              label={t("measurements.value")}
+              currentSort={sortBy}
+              currentDir={sortDir}
+              onSort={toggleSort}
+            />
+            <SortableHead
+              column="measuredAt"
+              label={t("measurements.date")}
+              currentSort={sortBy}
+              currentDir={sortDir}
+              onSort={toggleSort}
+            />
+            <TableHead className="w-56">{t("measurements.comment")}</TableHead>
+            <SortableHead
+              column="source"
+              label={t("measurements.source")}
+              currentSort={sortBy}
+              currentDir={sortDir}
+              onSort={toggleSort}
+              className="w-20"
+            />
+            <TableHead className="w-20 pr-4 text-right">
+              {t("measurements.actions")}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {measurements.map((m) => (
+            <MeasurementTableRow key={m.id} m={m} rows={rows} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+/** One table row, and under a grouped row its open drill-down. */
+function MeasurementTableRow({
+  m,
+  rows,
+}: {
+  m: Measurement;
+  rows: MeasurementRowContext;
+}) {
+  const { canManage, onToggleRow, navigateForType, display } = rows;
+  const { isGrouped, isSelected, isExpanded } = rowState(m, rows);
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const { rowDisplay, rowIdentityAttrs } = display;
+  // A sleep night is grouped (its chevron opens the stage segments) but
+  // reads as a duration with a nap caption, not as a daily total.
+  const isSleep = m.type === "SLEEP_DURATION";
+  // A stable id, so the chevron's `aria-controls` names the panel it opens.
+  const drilldownId = `drilldown-desktop-${m.dayKey ?? m.id}`;
+  const label = typeLabel(m.type, t);
+  return (
+    <>
+      <TableRow
+        data-state={isSelected ? "selected" : undefined}
+        // A row is addressable by what it holds, not by the copy it paints:
+        // the type is an enum and the unit a symbol, so a browser journey can
+        // pin "this glucose reading now reads in mmol/L" without matching
+        // translated text.
+        {...rowIdentityAttrs(m, isGrouped)}
+        data-display-unit={isGrouped ? m.unit : rowDisplay(m).unit}
+      >
+        <TableCell className="pl-4">
+          {/* A grouped row is not individually deletable: no checkbox. */}
+          {!isGrouped && canManage && (
+            <Checkbox
+              checked={isSelected}
+              onCheckedChange={() => onToggleRow(m.id)}
+              aria-label={t("dataList.selectRow")}
+            />
+          )}
+        </TableCell>
+        <TableCell>
+          <Badge
+            asChild
+            variant="secondary"
+            className={`focus-visible:ring-ring/50 cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none ${TYPE_COLORS[m.type] ?? ""}`.trim()}
+          >
+            <button
+              type="button"
+              onClick={() => navigateForType(m.type)}
+              aria-label={t("measurements.openMetricInsights", {
+                type: label,
+              })}
+            >
+              {label}
+            </button>
+          </Badge>
+        </TableCell>
+        <TableCell
+          className="font-semibold tabular-nums"
+          data-slot="measurement-row-value"
+        >
+          {/* A reading keeps its native precision (78.4 kg stays 78.4); a
+              day total of a cumulative type is a whole number; a night
+              reads as a duration ("8h 12m") with its nap caption. */}
+          {isSleep ? (
+            <>
+              {formatDurationMinutes(m.value, t)}
+              <SleepNightCaption m={m} />
+            </>
+          ) : (
+            <>
+              {isGrouped
+                ? fmt.integer(m.value)
+                : fmt.number(
+                    rowDisplay(m).value,
+                    rawDisplayFractionDigits(m.type),
+                  )}{" "}
+              {measurementUnitLabel(
+                m.type,
+                isGrouped ? m.unit : rowDisplay(m).unit,
+                t,
+              )}
+              {isGrouped && (
+                <span className="text-muted-foreground ml-2 text-xs font-normal">
+                  {t("measurements.dailyTotalCaption", {
+                    count: fmt.integer(m.sampleCount as number),
+                  })}
+                </span>
+              )}
+            </>
+          )}
+        </TableCell>
+        {/* Relative inside the last 24 hours ("3 min ago"), so the list and
+            the dashboard never phrase "when" differently. The date opens its
+            day; the row keeps opening the reading. */}
+        <TableCell className="text-muted-foreground text-sm">
+          {m.dayKey !== undefined ? (
+            <DayLink date={m.dayKey}>
+              {formatDateOrRelative(m.measuredAt, t)}
+            </DayLink>
+          ) : (
+            <DayLinkAt at={m.measuredAt}>
+              {formatDateOrRelative(m.measuredAt, t)}
+            </DayLinkAt>
+          )}
+        </TableCell>
+        <TableCell className="text-sm">
+          {m.notes ? (
+            <span title={m.notes}>{truncateComment(m.notes)}</span>
+          ) : (
+            <span className="text-muted-foreground">-</span>
+          )}
+        </TableCell>
+        <TableCell>
+          {m.source !== "MANUAL" && (
+            <Badge
+              variant="outline"
+              data-testid="measurement-source-badge"
+              className={`text-xs ${sourceBadgeClass(m.source)}`.trim()}
+            >
+              {formatMeasurementSource(m.source, t)}
+            </Badge>
+          )}
+        </TableCell>
+        <TableCell className="pr-4 text-right">
+          <div className="flex items-center justify-end gap-1">
+            <MeasurementRowActions
+              m={m}
+              rows={rows}
+              isGrouped={isGrouped}
+              isExpanded={isExpanded}
+              drilldownId={drilldownId}
+              layout="desktop"
+            />
+          </div>
+        </TableCell>
+      </TableRow>
+      {isGrouped && isExpanded && (
+        <TableRow id={drilldownId}>
+          <TableCell colSpan={7} className="p-0">
+            <DayDrillDown
+              type={m.type}
+              dayKey={m.dayKey as string}
+              unit={m.unit}
+              layout="desktop"
+            />
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}
diff --git a/src/components/measurements/list/row-actions.tsx b/src/components/measurements/list/row-actions.tsx
new file mode 100644
index 000000000..92a0c0244
--- /dev/null
+++ b/src/components/measurements/list/row-actions.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { ChevronDown, Pencil } from "lucide-react";
+
+import { DeleteButton } from "@/components/data-list";
+import { Button } from "@/components/ui/button";
+import { useTranslations } from "@/lib/i18n/context";
+
+import { MEASUREMENT_TYPE_LABEL_KEYS as TYPE_LABEL_KEYS } from "../measurement-list-meta";
+
+import { isGroupedRow, type Measurement } from "./list-model";
+import type { MeasurementRowDisplay } from "./use-measurement-row-display";
+
+type Translate = ReturnType<typeof useTranslations>["t"];
+
+/** A type's name, or the raw type for one the catalogue does not know. */
+export function typeLabel(type: string, t: Translate): string {
+  return TYPE_LABEL_KEYS[type] ? t(TYPE_LABEL_KEYS[type]) : type;
+}
+
+/** What every row of either layout needs from the list around it. */
+export interface MeasurementRowContext {
+  canManage: boolean;
+  selectedIds: ReadonlySet<string>;
+  expandedDayKeys: ReadonlySet<string>;
+  toggleExpand: (dayKey: string) => void;
+  navigateForType: (type: string) => void;
+  startEdit: (m: Measurement) => void;
+  onToggleRow: (id: string) => void;
+  onDelete: (id: string) => void;
+  display: MeasurementRowDisplay;
+}
+
+/** A row's grouping, selection and drill-down state. */
+export function rowState(m: Measurement, rows: MeasurementRowContext) {
+  const isGrouped = isGroupedRow(m);
+  return {
+    isGrouped,
+    isSelected: rows.selectedIds.has(m.id),
+    isExpanded: isGrouped
+      ? rows.expandedDayKeys.has(m.dayKey as string)
+      : false,
+  };
+}
+
+/**
+ * A row's controls: the chevron into a day's or night's samples for a
+ * grouped row; edit (owner only) and delete for a reading. The table's
+ * buttons are 40 px, the phone list's the large icon size.
+ */
+export function MeasurementRowActions({
+  m,
+  rows,
+  isGrouped,
+  isExpanded,
+  drilldownId,
+  layout,
+}: {
+  m: Measurement;
+  rows: MeasurementRowContext;
+  isGrouped: boolean;
+  isExpanded: boolean;
+  drilldownId: string;
+  layout: "desktop" | "mobile";
+}) {
+  const { canManage, toggleExpand, startEdit, onDelete } = rows;
+  const { t } = useTranslations();
+  const desktop = layout === "desktop";
+  const size = desktop ? "icon" : "icon-lg";
+  const className = desktop ? "h-10 w-10" : undefined;
+  return isGrouped ? (
+    <Button
+      variant="ghost"
+      size={size}
+      className={className}
+      data-testid="measurement-day-expand"
+      onClick={() => toggleExpand(m.dayKey as string)}
+      aria-expanded={isExpanded}
+      aria-controls={drilldownId}
+      aria-label={
+        isExpanded ? t("measurements.collapseDay") : t("measurements.expandDay")
+      }
+    >
+      <ChevronDown
+        className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""}`}
+      />
+    </Button>
+  ) : (
+    <>
+      {canManage && (
+        <Button
+          variant="ghost"
+          size={size}
+          className={className}
+          onClick={() => startEdit(m)}
+          aria-label={t("common.edit")}
+        >
+          <Pencil className={desktop ? "h-3.5 w-3.5" : "h-4 w-4"} />
+        </Button>
+      )}
+      <DeleteButton
+        domain="measurements"
+        iconClassName={desktop ? undefined : "h-4 w-4"}
+        onConfirm={() => onDelete(m.id)}
+        title={t("measurements.deleteConfirmTitle")}
+        description={t("measurements.deleteConfirmDescription")}
+      />
+    </>
+  );
+}
diff --git a/src/components/measurements/list/use-measurement-edit.ts b/src/components/measurements/list/use-measurement-edit.ts
new file mode 100644
index 000000000..e7ae637e7
--- /dev/null
+++ b/src/components/measurements/list/use-measurement-edit.ts
@@ -0,0 +1,268 @@
+"use client";
+
+import { useId, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useSeededFormDismissal } from "@/components/forms/use-seeded-form-dismissal";
+import { ApiError, apiPut } from "@/lib/api/api-fetch";
+import { toCanonicalMgdl } from "@/lib/glucose";
+import { useTranslations } from "@/lib/i18n/context";
+import { getUnitForType } from "@/lib/measurements/unit-map";
+import {
+  invalidateKeys,
+  measurementDependentKeys,
+  refetchInactiveDailyReads,
+} from "@/lib/query-keys";
+
+import {
+  MAX_COMMENT_LENGTH,
+  toDateTimeLocalValue,
+  type Measurement,
+} from "./list-model";
+import type { MeasurementListData } from "./use-measurement-list-data";
+import type { MeasurementRowDisplay } from "./use-measurement-row-display";
+
+/**
+ * The edit input's seed, in the preferred unit, so an imperial reader edits
+ * in lb / in / °F (converted back on save), rounded so the input shows "210"
+ * rather than a long float. Metric readers and legacy rows see the stored
+ * value.
+ */
+export function editSeedValue(
+  {
+    unitDisplay,
+    editsConvertedGlucose,
+    rowDisplay,
+  }: Pick<
+    MeasurementRowDisplay,
+    "unitDisplay" | "editsConvertedGlucose" | "rowDisplay"
+  >,
+  measurement: Measurement,
+): number {
+  const rd = rowDisplay(measurement);
+  return editsConvertedGlucose(measurement)
+    ? rd.value
+    : unitDisplay.preference === "imperial" &&
+        unitDisplay.isTransformed(measurement.type) &&
+        measurement.unit === getUnitForType(measurement.type)
+      ? Math.round(rd.value * 100) / 100
+      : measurement.value;
+}
+
+/**
+ * The input's display-unit value inverted to the stored unit before the
+ * request. Metric readers and legacy rows pass unchanged.
+ */
+export function storedValueFor(
+  {
+    unitDisplay,
+    editsConvertedGlucose,
+  }: Pick<MeasurementRowDisplay, "unitDisplay" | "editsConvertedGlucose">,
+  editing: Measurement,
+  parsedValue: number,
+): number {
+  if (editsConvertedGlucose(editing)) {
+    // The label said mmol/L, so the number is mmol/L. Sending it on would
+    // rewrite a 95 mg/dL reading as 5.3.
+    return toCanonicalMgdl(parsedValue, "mmol/L");
+  }
+  if (
+    unitDisplay.isTransformed(editing.type) &&
+    editing.unit === getUnitForType(editing.type)
+  ) {
+    const inverted = unitDisplay.fromDisplay(editing.type, parsedValue);
+    return unitDisplay.preference === "imperial"
+      ? Math.round(inverted * 100) / 100
+      : inverted;
+  }
+  return parsedValue;
+}
+
+/**
+ * The edit sheet's state: the reading being edited, the draft seeded in the
+ * person's display unit, the save (converted back to the stored unit) and
+ * the delete from inside the sheet, and the dismissal guard that asks before
+ * an edited draft is thrown away.
+ */
+export function useMeasurementEdit({
+  onEdit,
+  display,
+  deleteMutation,
+}: {
+  onEdit?: (m: Measurement) => void;
+  display: MeasurementRowDisplay;
+  deleteMutation: MeasurementListData["deleteMutation"];
+}) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const [editing, setEditing] = useState<Measurement | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const [editMeasuredAt, setEditMeasuredAt] = useState("");
+  const [editNotes, setEditNotes] = useState("");
+  const [editSeed, setEditSeed] = useState({
+    value: "",
+    measuredAt: "",
+    notes: "",
+  });
+  const [editError, setEditError] = useState<string | null>(null);
+  const [editDeleteDialogOpen, setEditDeleteDialogOpen] = useState(false);
+  // The error banner is linked to the inputs through `aria-describedby`, so a
+  // screen reader announces why a submit was refused.
+  const editErrorId = useId();
+  // The sheet's footer is a slot the form portals its buttons into.
+  const editFormId = useId();
+  const [editFooterEl, setEditFooterEl] = useState<HTMLDivElement | null>(null);
+
+  const updateMutation = useMutation({
+    mutationFn: async ({
+      id,
+      value,
+      measuredAt,
+      notes,
+    }: {
+      id: string;
+      value: number;
+      measuredAt: string;
+      notes: string | null;
+    }) => {
+      await apiPut(`/api/measurements/${id}`, { value, measuredAt, notes });
+    },
+    onSuccess: async () => {
+      await invalidateKeys(queryClient, measurementDependentKeys);
+      await refetchInactiveDailyReads(queryClient);
+      setEditSeed({
+        value: editValue,
+        measuredAt: editMeasuredAt,
+        notes: editNotes,
+      });
+      dismissEdit();
+    },
+    onError: (err) => {
+      // A 409 names its reason in `meta.errorCode`: the edit collides with
+      // another reading's (type, time, source, stage), or the reading belongs
+      // to a server-owned source (connector, import, computed).
+      if (
+        err instanceof ApiError &&
+        err.meta?.errorCode === "measurement.duplicate_timestamp"
+      ) {
+        setEditError(t("measurements.duplicateTimestamp"));
+        return;
+      }
+      if (
+        err instanceof ApiError &&
+        err.meta?.errorCode === "measurement.update.server_owned_source"
+      ) {
+        setEditError(t("measurements.serverOwnedSource"));
+        return;
+      }
+      setEditError(
+        err instanceof Error ? err.message : t("measurements.saveError"),
+      );
+    },
+  });
+  const editDismissal = useSeededFormDismissal({
+    seed: editSeed,
+    value: {
+      value: editValue,
+      measuredAt: editMeasuredAt,
+      notes: editNotes,
+    },
+    blocked: updateMutation.isPending || deleteMutation.isPending,
+  });
+
+  function startEdit(measurement: Measurement) {
+    if (onEdit) {
+      onEdit(measurement);
+      return;
+    }
+
+    const seedValue = editSeedValue(display, measurement);
+    const seed = {
+      value: String(seedValue),
+      measuredAt: toDateTimeLocalValue(measurement.measuredAt),
+      notes: (measurement.notes ?? "").slice(0, MAX_COMMENT_LENGTH),
+    };
+    setEditing(measurement);
+    setEditValue(seed.value);
+    setEditMeasuredAt(seed.measuredAt);
+    setEditNotes(seed.notes);
+    setEditSeed(seed);
+    setEditError(null);
+  }
+
+  function dismissEdit() {
+    setEditing(null);
+    setEditError(null);
+    setEditDeleteDialogOpen(false);
+  }
+
+  function closeEdit() {
+    editDismissal.requestClose(dismissEdit);
+  }
+
+  async function deleteEditingMeasurement() {
+    if (!editing) return;
+
+    try {
+      setEditError(null);
+      await deleteMutation.mutateAsync(editing.id);
+      dismissEdit();
+    } catch {
+      setEditError(t("measurements.deleteError"));
+    }
+  }
+
+  async function submitEdit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!editing) return;
+
+    const parsedValue = Number(editValue);
+    if (!Number.isFinite(parsedValue)) {
+      setEditError(t("measurements.invalidValue"));
+      return;
+    }
+
+    const measuredDate = new Date(editMeasuredAt);
+    if (Number.isNaN(measuredDate.getTime())) {
+      setEditError(t("measurements.invalidTimestamp"));
+      return;
+    }
+
+    const canonicalValue = storedValueFor(display, editing, parsedValue);
+
+    setEditError(null);
+    updateMutation.mutate({
+      id: editing.id,
+      value: canonicalValue,
+      measuredAt: measuredDate.toISOString(),
+      notes: editNotes.trim() ? editNotes.trim() : null,
+    });
+  }
+
+  return {
+    editing,
+    editValue,
+    setEditValue,
+    editMeasuredAt,
+    setEditMeasuredAt,
+    editNotes,
+    setEditNotes,
+    editError,
+    editErrorId,
+    editErrorDescriptor: editError ? editErrorId : undefined,
+    editFormId,
+    editFooterEl,
+    setEditFooterEl,
+    editDeleteDialogOpen,
+    setEditDeleteDialogOpen,
+    editDismissal,
+    updateMutation,
+    deleteMutation,
+    startEdit,
+    closeEdit,
+    deleteEditingMeasurement,
+    submitEdit,
+  };
+}
+
+export type MeasurementEdit = ReturnType<typeof useMeasurementEdit>;
diff --git a/src/components/measurements/list/use-measurement-list-data.ts b/src/components/measurements/list/use-measurement-list-data.ts
new file mode 100644
index 000000000..81c2db1e9
--- /dev/null
+++ b/src/components/measurements/list/use-measurement-list-data.ts
@@ -0,0 +1,219 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import {
+  selectAllState,
+  selectedCountOnPage,
+  selectedIdsOnPage,
+  toggleId,
+  toggleSelectAll,
+} from "@/components/data-list";
+import { apiDelete, apiGet, apiPost } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import {
+  invalidateKeys,
+  measurementDependentKeys,
+  queryKeys,
+  refetchInactiveDailyReads,
+} from "@/lib/query-keys";
+
+import { PAGE_SIZE, isGroupedRow, type Measurement } from "./list-model";
+import type { MeasurementListFilters } from "./use-measurement-list-filters";
+
+/**
+ * The list's read and its deletes. Deletes are soft (tombstones), so each
+ * success toast carries a real Undo that restores the ids and re-fires the
+ * same dependent-key bundle, keeping the dashboard, insights and chart
+ * caches in step.
+ */
+export function useMeasurementListData({
+  filters,
+  enabled,
+  lockedType,
+  onEmptyChange,
+}: {
+  filters: MeasurementListFilters;
+  enabled: boolean;
+  lockedType: string | undefined;
+  onEmptyChange?: (empty: boolean) => void;
+}) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const {
+    typeFilter,
+    sourceEq,
+    fromIso,
+    toIso,
+    valueMin,
+    valueMax,
+    isDayGroupedFilter,
+    isCumulativeFilter,
+    page,
+    sortBy,
+    sortDir,
+    listMode,
+    selectedIds,
+    setSelectedIds,
+    clearSelection,
+  } = filters;
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: queryKeys.measurementsList({
+      type: typeFilter === "ALL" ? undefined : typeFilter,
+      sourceEq,
+      from: fromIso,
+      to: toIso,
+      // Value range applies only to the raw per-sample list.
+      valueMin: isDayGroupedFilter ? undefined : valueMin,
+      valueMax: isDayGroupedFilter ? undefined : valueMax,
+      page,
+      sortBy,
+      sortDir,
+      mode: listMode,
+    }),
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      if (typeFilter !== "ALL") params.set("type", typeFilter);
+      if (sourceEq) params.set("sourceEq", sourceEq);
+      if (fromIso) params.set("from", fromIso);
+      if (toIso) params.set("to", toIso);
+      if (!isDayGroupedFilter && valueMin != null)
+        params.set("valueMin", String(valueMin));
+      if (!isDayGroupedFilter && valueMax != null)
+        params.set("valueMax", String(valueMax));
+      params.set("limit", String(PAGE_SIZE));
+      params.set("offset", String((page - 1) * PAGE_SIZE));
+      params.set("sortBy", sortBy);
+      params.set("sortDir", sortDir);
+      // The day-grouped modes page over days, 25 per page like the
+      // per-sample list: `groupBy=day` folds each cumulative day to its sum,
+      // and sleep collapses to one row per night without a param.
+      if (isCumulativeFilter) params.set("groupBy", "day");
+      return apiGet<{
+        measurements: Measurement[];
+        meta: { total: number };
+      }>(`/api/measurements?${params}`);
+    },
+    enabled,
+  });
+
+  const listEmpty =
+    !isLoading &&
+    !isError &&
+    !data?.measurements?.length &&
+    (typeFilter === "ALL" || !!lockedType);
+  useEffect(() => {
+    onEmptyChange?.(listEmpty);
+  }, [listEmpty, onEmptyChange]);
+
+  const restoreMeasurements = useCallback(
+    async (ids: string[]) => {
+      try {
+        await apiPost("/api/measurements/restore", { ids });
+        await invalidateKeys(queryClient, measurementDependentKeys);
+        await refetchInactiveDailyReads(queryClient);
+        toast.success(t("measurements.restoredToast"));
+      } catch (failure) {
+        showErrorToast(t("measurements.restoreError"), { cause: failure });
+      }
+    },
+    [queryClient, t],
+  );
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await apiDelete(`/api/measurements/${id}`);
+    },
+    onSuccess: (_data, id) => {
+      void invalidateKeys(queryClient, measurementDependentKeys);
+      void refetchInactiveDailyReads(queryClient);
+      toast.success(t("measurements.deletedToast"), {
+        action: {
+          label: t("common.undo"),
+          onClick: () => void restoreMeasurements([id]),
+        },
+      });
+    },
+    // A failed row delete says so; it used to fail without a word.
+    onError: (failure) => {
+      showErrorToast(t("measurements.deleteError"), { cause: failure });
+    },
+  });
+
+  // The page-scoped bulk delete: the selected ids intersected with the
+  // painted page.
+  const bulkDeleteMutation = useMutation({
+    mutationFn: async (ids: string[]) => {
+      const data = await apiPost<{ deleted: number }>(
+        "/api/measurements/bulk-delete",
+        { ids },
+      );
+      return data.deleted;
+    },
+    onSuccess: async (deleted, ids) => {
+      await invalidateKeys(queryClient, measurementDependentKeys);
+      await refetchInactiveDailyReads(queryClient);
+      clearSelection();
+      toast.success(
+        deleted === 1
+          ? t("measurements.bulkDeleteSuccessOne")
+          : t("measurements.bulkDeleteSuccess", { count: String(deleted) }),
+        {
+          action: {
+            label: t("common.undo"),
+            onClick: () => void restoreMeasurements(ids),
+          },
+        },
+      );
+    },
+    onError: (failure) => {
+      showErrorToast(t("measurements.bulkDeleteError"), { cause: failure });
+    },
+  });
+
+  // Synthetic day and night rows collapse many raw rows behind a `dayKey`
+  // and are not individually deletable, so they are not selectable.
+  const pageIds = (data?.measurements ?? [])
+    .filter((m) => !isGroupedRow(m))
+    .map((m) => m.id);
+  const selectAll = selectAllState(selectedIds, pageIds);
+  const selectedOnPage = selectedCountOnPage(selectedIds, pageIds);
+
+  const onToggleRow = (id: string) => {
+    setSelectedIds((prev) => toggleId(prev, id));
+  };
+  const onToggleSelectAll = () => {
+    setSelectedIds((prev) => toggleSelectAll(prev, pageIds));
+  };
+  const onConfirmBulkDelete = () => {
+    const ids = selectedIdsOnPage(selectedIds, pageIds);
+    if (ids.length === 0) return;
+    bulkDeleteMutation.mutate(ids);
+  };
+
+  // Every mode pages server-side at PAGE_SIZE: rows, days or nights.
+  const totalPages = data ? Math.ceil(data.meta.total / PAGE_SIZE) : 0;
+
+  return {
+    data,
+    isLoading,
+    isError,
+    error,
+    refetch,
+    deleteMutation,
+    bulkDeleteMutation,
+    pageIds,
+    selectAll,
+    selectedOnPage,
+    onToggleRow,
+    onToggleSelectAll,
+    onConfirmBulkDelete,
+    totalPages,
+  };
+}
+
+export type MeasurementListData = ReturnType<typeof useMeasurementListData>;
diff --git a/src/components/measurements/list/use-measurement-list-filters.ts b/src/components/measurements/list/use-measurement-list-filters.ts
new file mode 100644
index 000000000..b77ed5ab9
--- /dev/null
+++ b/src/components/measurements/list/use-measurement-list-filters.ts
@@ -0,0 +1,208 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useTableSort } from "@/hooks/use-table-sort";
+import { useUrlFilterSync } from "@/hooks/use-url-filter-sync";
+
+import {
+  measurementListFiltersToSearch,
+  numericInputOrUndefined,
+  parseMeasurementListSearchParams,
+} from "../measurement-list-filters";
+
+import {
+  CUMULATIVE_TYPES,
+  MEASUREMENT_DESC_COLUMNS,
+  dayBoundaryIso,
+} from "./list-model";
+
+/**
+ * The list's view state: the filters, the page, the sort and the page-scoped
+ * selection, and what the read derives from them.
+ *
+ * Filters are URL-owned (`?type&source&from&to&min&max`, the documents-vault
+ * pattern), so a filtered view survives navigation, reload and back/forward,
+ * and the `?type=` deep links simply are the filter state. With `lockedType`
+ * the list is pinned to one metric, the URL belongs to the page around it,
+ * and the remaining filters stay in memory.
+ *
+ * Every filter, page or sort change resets to page 1 and clears the
+ * selection, whose rows are about to unmount; the selection never reaches
+ * past the painted page.
+ */
+export function useMeasurementListFilters(lockedType: string | undefined) {
+  const { filters, applyFilters, patchFilters } = useUrlFilterSync({
+    parse: parseMeasurementListSearchParams,
+    serialise: measurementListFiltersToSearch,
+    syncToUrl: lockedType === undefined,
+  });
+  const typeFilter = lockedType ?? filters.type ?? "ALL";
+  // `ALL` clears the source filter; an empty date string clears its bound.
+  const sourceFilter = filters.source ?? "ALL";
+  const fromDay = filters.fromDay ?? "";
+  const toDay = filters.toDay ?? "";
+  // The value-range inputs fire per keystroke, so they edit a local draft
+  // that debounces into the URL (200 ms, replace: never a history entry per
+  // keystroke); an external URL change (back button, deep link) re-seeds the
+  // draft through the render-phase adjustment below, like the vault's search.
+  const urlValueRange = `${filters.valueMin ?? ""}\u0000${filters.valueMax ?? ""}`;
+  const [valueDraft, setValueDraft] = useState(() => ({
+    min: filters.valueMin ?? "",
+    max: filters.valueMax ?? "",
+  }));
+  const [lastUrlValueRange, setLastUrlValueRange] = useState(urlValueRange);
+  if (urlValueRange !== lastUrlValueRange) {
+    setLastUrlValueRange(urlValueRange);
+    setValueDraft({
+      min: filters.valueMin ?? "",
+      max: filters.valueMax ?? "",
+    });
+  }
+  const [page, setPage] = useState(1);
+  // Shared column-sort state (measuredAt opens descending).
+  const {
+    sortBy,
+    sortDir,
+    toggleSort: applySort,
+  } = useTableSort({
+    defaultColumn: "measuredAt",
+    defaultDir: "desc",
+    descColumns: MEASUREMENT_DESC_COLUMNS,
+  });
+
+  // The ids selected on the CURRENT page. Every read intersects it with the
+  // painted page, so the bulk payload is page-bounded (at most a page, well
+  // under the server's cap of 200) and an id that falls off the page after
+  // a refetch simply stops counting.
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+  const clearSelection = () => setSelectedIds(new Set());
+
+  // Discrete facet changes push (Back steps through filter states, like the
+  // vault's chips); the committed date bounds replace, so a from/to pair set
+  // in one sitting does not cost two Back presses.
+  const resetPage = () => {
+    setPage(1);
+    clearSelection();
+  };
+  const setTypeFilter = (value: string) => {
+    patchFilters({ type: value === "ALL" ? undefined : value });
+    resetPage();
+  };
+  const setSourceFilter = (value: string) => {
+    patchFilters({ source: value === "ALL" ? undefined : value });
+    resetPage();
+  };
+  const setFromDay = (value: string) => {
+    patchFilters({ fromDay: value || undefined }, "replace");
+    resetPage();
+  };
+  const setToDay = (value: string) => {
+    patchFilters({ toDay: value || undefined }, "replace");
+    resetPage();
+  };
+  const setValueMinInput = (value: string) => {
+    setValueDraft((prev) => ({ ...prev, min: value }));
+    resetPage();
+  };
+  const setValueMaxInput = (value: string) => {
+    setValueDraft((prev) => ({ ...prev, max: value }));
+    resetPage();
+  };
+  // One push clears every facet (and so one Back restores them); the value
+  // draft is cleared directly, since a bound that never reached the URL has
+  // no change to re-seed from.
+  const resetFilters = () => {
+    applyFilters({});
+    setValueDraft({ min: "", max: "" });
+    resetPage();
+  };
+
+  // The draft debounces into the URL; a bound that does not normalise to a
+  // finite number never reaches it (non-numeric input means "unset").
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const min = numericInputOrUndefined(valueDraft.min);
+      const max = numericInputOrUndefined(valueDraft.max);
+      if (
+        (min ?? "") === (filters.valueMin ?? "") &&
+        (max ?? "") === (filters.valueMax ?? "")
+      ) {
+        return;
+      }
+      patchFilters({ valueMin: min, valueMax: max }, "replace");
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [valueDraft, filters, patchFilters]);
+
+  const goToPage = (updater: (p: number) => number) => {
+    setPage(updater);
+    clearSelection();
+  };
+
+  // The rows re-order and the list snaps back to page 1.
+  function toggleSort(column: string) {
+    applySort(column);
+    resetPage();
+  }
+
+  // A cumulative type (steps, active energy, distance, flights, daylight)
+  // collapses to one row per profile-zone day through the route's
+  // `groupBy=day` mode, never listing per-sample chunks by default; sleep
+  // collapses server-side to one row per night (time asleep). Both page
+  // server-side over their synthesised rows.
+  const isCumulativeFilter = CUMULATIVE_TYPES.has(typeFilter);
+  const isSleepFilter = typeFilter === "SLEEP_DURATION";
+  const isDayGroupedFilter = isCumulativeFilter || isSleepFilter;
+
+  const fromIso = dayBoundaryIso(fromDay, "start");
+  const toIso = dayBoundaryIso(toDay, "end");
+  const sourceEq = sourceFilter === "ALL" ? undefined : sourceFilter;
+  // The value range applies to the raw per-sample list only: a day sum or a
+  // night total is not a raw `value`, so its pill is hidden for those types.
+  const valueMin =
+    filters.valueMin !== undefined ? Number(filters.valueMin) : undefined;
+  const valueMax =
+    filters.valueMax !== undefined ? Number(filters.valueMax) : undefined;
+  const listMode: "raw" | "groupBy=day" | "sleep-night" = isSleepFilter
+    ? "sleep-night"
+    : isCumulativeFilter
+      ? "groupBy=day"
+      : "raw";
+
+  return {
+    typeFilter,
+    sourceFilter,
+    fromDay,
+    toDay,
+    valueMinInput: valueDraft.min,
+    valueMaxInput: valueDraft.max,
+    page,
+    sortBy,
+    sortDir,
+    selectedIds,
+    setSelectedIds,
+    clearSelection,
+    setTypeFilter,
+    setSourceFilter,
+    setFromDay,
+    setToDay,
+    setValueMinInput,
+    setValueMaxInput,
+    resetFilters,
+    goToPage,
+    toggleSort,
+    isCumulativeFilter,
+    isDayGroupedFilter,
+    fromIso,
+    toIso,
+    sourceEq,
+    valueMin,
+    valueMax,
+    listMode,
+  };
+}
+
+export type MeasurementListFilters = ReturnType<
+  typeof useMeasurementListFilters
+>;
diff --git a/src/components/measurements/list/use-measurement-row-display.ts b/src/components/measurements/list/use-measurement-row-display.ts
new file mode 100644
index 000000000..042a6ee8f
--- /dev/null
+++ b/src/components/measurements/list/use-measurement-row-display.ts
@@ -0,0 +1,86 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+
+import { useAuth } from "@/hooks/use-auth";
+import { useUnitDisplay, type UnitDisplay } from "@/hooks/use-unit-display";
+import {
+  convertGlucose,
+  resolveGlucoseUnit,
+  type GlucoseUnit,
+} from "@/lib/glucose";
+import { getUnitForType } from "@/lib/measurements/unit-map";
+
+import type { Measurement } from "./list-model";
+
+/**
+ * How a row shows its reading: in the person's preferred unit (kg ↔ lb,
+ * cm ↔ in, °C ↔ °F) for a canonical row, verbatim for a legacy row whose
+ * stored unit is not the type's canonical one (so a stored unit is never
+ * silently relabelled). Glucose sits on its own axis, stored in mg/dL and
+ * shown in whichever of mg/dL and mmol/L the account chose, so the list and
+ * the dashboard tile agree about the same reading.
+ *
+ * `rowDisplayFor` is that rule for one glucose unit and one metric /
+ * imperial preference; the hook binds it to the account.
+ */
+export function rowDisplayFor(
+  glucoseUnit: GlucoseUnit,
+  unitDisplay: UnitDisplay,
+) {
+  // An edit whose input is NOT in the stored unit. Only the mmol/L branch
+  // qualifies: an mg/dL account edits in the unit the column holds, and
+  // converting anyway would quantise a stored 95.48 to 95 the moment somebody
+  // opened the sheet to fix a note.
+  const editsConvertedGlucose = (m: { type: string; unit: string }) =>
+    m.type === "BLOOD_GLUCOSE" &&
+    glucoseUnit === "mmol/L" &&
+    m.unit === getUnitForType(m.type);
+  const rowDisplay = (m: { type: string; value: number; unit: string }) => {
+    if (m.unit !== getUnitForType(m.type)) {
+      return { value: m.value, unit: m.unit };
+    }
+    if (m.type === "BLOOD_GLUCOSE") {
+      return {
+        value: convertGlucose(m.value, glucoseUnit),
+        unit: glucoseUnit,
+      };
+    }
+    return {
+      value: unitDisplay.toDisplay(m.type, m.value),
+      unit: unitDisplay.unitFor(m.type),
+    };
+  };
+  return { unitDisplay, editsConvertedGlucose, rowDisplay };
+}
+
+export function useMeasurementRowDisplay() {
+  const { user } = useAuth();
+  const unitDisplay = useUnitDisplay();
+  const glucoseUnit = resolveGlucoseUnit(user?.glucoseUnit);
+  const { editsConvertedGlucose, rowDisplay } = useMemo(
+    () => rowDisplayFor(glucoseUnit, unitDisplay),
+    [glucoseUnit, unitDisplay],
+  );
+  /**
+   * A machine-readable mirror of what the row renders: the same number and
+   * unit, before `Intl` turns them into locale text. A browser test that has
+   * to assert a stored unit would otherwise pin a locale or match a loose
+   * number. The desktop table and the mobile list emit the same set, so an
+   * assertion holds at either viewport.
+   */
+  const rowIdentityAttrs = useCallback(
+    (m: Measurement, isGrouped: boolean) => ({
+      "data-testid": "measurement-row",
+      "data-measurement-type": m.type,
+      "data-measurement-value": String(
+        isGrouped ? m.value : rowDisplay(m).value,
+      ),
+      "data-measurement-unit": isGrouped ? m.unit : rowDisplay(m).unit,
+    }),
+    [rowDisplay],
+  );
+  return { unitDisplay, editsConvertedGlucose, rowDisplay, rowIdentityAttrs };
+}
+
+export type MeasurementRowDisplay = ReturnType<typeof useMeasurementRowDisplay>;
diff --git a/src/components/measurements/measurement-list.tsx b/src/components/measurements/measurement-list.tsx
index 6ebe3eeec..9004bbc9e 100644
--- a/src/components/measurements/measurement-list.tsx
+++ b/src/components/measurements/measurement-list.tsx
@@ -1,198 +1,39 @@
 "use client";
 
-import { accountLabel } from "@/lib/sharing/account-access-view";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useAuth } from "@/hooks/use-auth";
-import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
-import { useIsMobile } from "@/hooks/use-is-mobile";
+import { Activity, ChevronLeft, ChevronRight, Plus } from "lucide-react";
+
+import { SelectionActionBar } from "@/components/data-list";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { EmptyState } from "@/components/ui/empty-state";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
-import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { Skeleton } from "@/components/ui/skeleton";
-import { ListRow } from "@/components/ui/list-row";
-import {
-  FilterBar,
-  FilterBarDateRange,
-  FilterBarNumberRange,
-  FilterBarSelect,
-} from "@/components/ui/filter-bar";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
-import {
-  SeededFormDiscardDialog,
-  useSeededFormDismissal,
-} from "@/components/forms/use-seeded-form-dismissal";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Activity,
-  Loader2,
-  Pencil,
-  Plus,
-  Trash2,
-  ChevronLeft,
-  ChevronRight,
-  ChevronDown,
-  MoreHorizontal,
-} from "lucide-react";
-import { Fragment, useCallback, useEffect, useId, useState } from "react";
-import { useTableSort } from "@/hooks/use-table-sort";
-import { useUrlFilterSync } from "@/hooks/use-url-filter-sync";
-import { createPortal } from "react-dom";
-import { toast } from "sonner";
-import { showErrorToast } from "@/lib/errors/error-toast";
-import { formatDateOrRelative, formatDateTime } from "@/lib/format";
-import { DayLink, DayLinkAt } from "@/components/day/day-link";
-import { useTranslations, useFormatters } from "@/lib/i18n/context";
-import { MEASUREMENT_SOURCE_LIST_LABEL_KEYS } from "@/lib/i18n/source-labels";
-import { CUMULATIVE_DAY_SUM_TYPES } from "@/lib/measurements/cumulative-day-sum";
-import { rawDisplayFractionDigits } from "@/lib/measurements/display-transform";
-import { getUnitForType } from "@/lib/measurements/unit-map";
-import { useUnitDisplay } from "@/hooks/use-unit-display";
-import {
-  convertGlucose,
-  resolveGlucoseUnit,
-  toCanonicalMgdl,
-} from "@/lib/glucose";
-import {
-  invalidateKeys,
-  measurementDependentKeys,
-  queryKeys,
-  refetchInactiveDailyReads,
-} from "@/lib/query-keys";
-import { MEASUREMENT_NOTES_MAX_LENGTH } from "@/lib/measurements/notes-limit";
-import { MEASUREMENT_SOURCES } from "@/lib/measurements/sources";
-import { DateTimeField } from "@/components/ui/date-time-field";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  SortableHead,
-  DeleteButton,
-  SelectionActionBar,
-  toggleId,
-  toggleSelectAll,
-  selectAllState,
-  selectedIdsOnPage,
-  selectedCountOnPage,
-} from "@/components/data-list";
-import {
-  MEASUREMENT_TYPE_LABEL_KEYS as TYPE_LABEL_KEYS,
-  MEASUREMENT_TYPE_ICONS as TYPE_ICONS,
-  MEASUREMENT_TYPE_COLORS as TYPE_COLORS,
-} from "./measurement-list-meta";
-import {
-  measurementUnitLabel,
-  measurementUnitMetaLead,
-} from "@/lib/measurements/unit-label";
-import {
-  measurementListFiltersToSearch,
-  numericInputOrUndefined,
-  parseMeasurementListSearchParams,
-} from "./measurement-list-filters";
-import {
-  ApiError,
-  apiDelete,
-  apiGet,
-  apiPost,
-  apiPut,
-} from "@/lib/api/api-fetch";
+import { useAuth } from "@/hooks/use-auth";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
 import {
   INSIGHTS_OVERVIEW_PATH,
   subPageSlugForType,
 } from "@/lib/insights/sub-page-metric";
-import { formatDurationMinutes } from "@/lib/i18n/duration";
+import { accountLabel } from "@/lib/sharing/account-access-view";
 
-/**
- * v1.4.37 — cumulative HK types whose list view collapses to one
- * row per user-TZ day with an expand-chevron drill-down to the
- * per-sample chunks. Mirrors the server-side
- * `CUMULATIVE_DAY_SUM_TYPES` so the route's `groupBy=day` branch and
- * the client's filter-detection agree on the same five identifiers.
- */
-const CUMULATIVE_TYPES = new Set<string>(CUMULATIVE_DAY_SUM_TYPES);
-
-// Columns that open descending when first selected. The date column reads
-// newest-first by default; every other column opens ascending.
-const MEASUREMENT_DESC_COLUMNS: ReadonlySet<string> = new Set(["measuredAt"]);
-
-interface Measurement {
-  id: string;
-  type: string;
-  value: number;
-  unit: string;
-  source: string;
-  measuredAt: string;
-  notes: string | null;
-  /**
-   * v1.4.37 — present only on collapsed daily rows returned by
-   * `?type=…&groupBy=day`. Drives the expand chevron + the drill-down
-   * fetch keyed by the user's calendar day.
-   */
-  dayKey?: string;
-  sampleCount?: number;
-  /**
-   * v1.11.5 — present only on per-night SLEEP_DURATION rows. `value` is
-   * the night's TIME ASLEEP in minutes; these fields carry the night's
-   * context so the row reads as one night, not many stage values.
-   */
-  sleepStage?: string | null;
-  napCount?: number;
-  napAsleepMinutes?: number;
-  awakenings?: number;
-}
-
-/** v1.11.5 — i18n labels for the sleep stages shown in the drill-down. */
-function sleepStageLabel(
-  stage: string | null | undefined,
-  t: ReturnType<typeof useTranslations>["t"],
-): string {
-  switch (stage) {
-    case "DEEP":
-      return t("insights.sleep.stages.deep");
-    case "REM":
-      return t("insights.sleep.stages.rem");
-    case "CORE":
-      return t("insights.sleep.stages.core");
-    case "ASLEEP":
-      return t("insights.sleep.stages.asleep");
-    case "AWAKE":
-      return t("insights.sleep.stages.awake");
-    case "IN_BED":
-      return t("insights.sleep.stages.inBed");
-    default:
-      return stage ?? "";
-  }
-}
+import { MeasurementCardList } from "./list/measurement-card-list";
+import { MeasurementEditSheet } from "./list/measurement-edit-sheet";
+import { MeasurementFilterRail } from "./list/measurement-filter-rail";
+import { MeasurementTable } from "./list/measurement-table";
+import type { Measurement } from "./list/list-model";
+import type { MeasurementRowContext } from "./list/row-actions";
+import { useMeasurementEdit } from "./list/use-measurement-edit";
+import { useMeasurementListData } from "./list/use-measurement-list-data";
+import { useMeasurementListFilters } from "./list/use-measurement-list-filters";
+import { useMeasurementRowDisplay } from "./list/use-measurement-row-display";
 
 interface MeasurementListProps {
   onEdit?: (m: Measurement) => void;
   /**
-   * v1.4.15: optional callback wired by the parent page so
+   * Optional callback wired by the parent page so
    * the empty-state's "Add your first measurement" CTA opens the same
    * dialog the header button does. When undefined we hide the button
    * (fallback to the header CTA) instead of crashing.
@@ -204,7 +45,7 @@ interface MeasurementListProps {
    */
   onEmptyChange?: (empty: boolean) => void;
   /**
-   * v1.8.5 — pin the list to a single `MeasurementType` and hide the
+   * Pin the list to a single `MeasurementType` and hide the
    * type selector. Used by the insights "all readings" subpage, which
    * already knows the metric from the route and wants a focused list
    * (pagination + inline edit/delete) rather than the global filter UI.
@@ -214,83 +55,12 @@ interface MeasurementListProps {
   lockedType?: string;
 }
 
-const PAGE_SIZE = 25;
-// Input cap mirrors the server Zod bound. The list preview truncates at
-// a shorter width so a long note does not stretch a list row.
-const MAX_COMMENT_LENGTH = MEASUREMENT_NOTES_MAX_LENGTH;
-const COMMENT_PREVIEW_LENGTH = 40;
-
-function truncateComment(comment: string): string {
-  if (comment.length <= COMMENT_PREVIEW_LENGTH) return comment;
-  return `${comment.slice(0, COMMENT_PREVIEW_LENGTH - 1)}…`;
-}
-
-function toDateTimeLocalValue(isoString: string): string {
-  const date = new Date(isoString);
-  const offset = date.getTimezoneOffset();
-  const local = new Date(date.getTime() - offset * 60 * 1000);
-  return local.toISOString().slice(0, 16);
-}
-
 /**
- * Render the `MeasurementSource` enum using the `measurements.source*`
- * translation keys instead of leaking the SCREAMING_SNAKE enum into the
- * table cell or the filter dropdown. The catalogue is keyed by the enum,
- * so a provider added without its label is a type error rather than a row
- * that reads `GOOGLE_HEALTH`.
+ * Every reading, filterable, sortable and paged, with inline edit and
+ * delete. The view state, the read, the edit and the row display live in
+ * `./list/`; this component lays out the rail, the rows, the selection bar,
+ * the pagination and the edit sheet.
  */
-function formatMeasurementSource(
-  source: string,
-  t: ReturnType<typeof useTranslations>["t"],
-) {
-  const key = MEASUREMENT_SOURCE_LIST_LABEL_KEYS[
-    source as keyof typeof MEASUREMENT_SOURCE_LIST_LABEL_KEYS
-  ] as string | undefined;
-  // A row written by a server the client does not know yet still renders
-  // as its own value rather than as a missing translation key.
-  return key ? t(key) : source;
-}
-
-/**
- * v1.15.13 — the `MeasurementSource` enum values offered in the
- * management-list source filter. Derived from the shared Zod enum so a
- * future source addition surfaces here automatically.
- */
-const MEASUREMENT_SOURCE_OPTIONS = MEASUREMENT_SOURCES;
-
-/**
- * v1.15.13 — convert a `<input type="date">` value (YYYY-MM-DD) into the
- * offset-bearing ISO datetime the measurements list `from`/`to` params
- * require. `from` snaps to the local start-of-day, `to` to the local
- * end-of-day so an inclusive single-day range returns that whole day.
- */
-function dayBoundaryIso(
-  day: string,
-  boundary: "start" | "end",
-): string | undefined {
-  if (!day) return undefined;
-  const [y, m, d] = day.split("-").map(Number);
-  if (!y || !m || !d) return undefined;
-  const date =
-    boundary === "start"
-      ? new Date(y, m - 1, d, 0, 0, 0, 0)
-      : new Date(y, m - 1, d, 23, 59, 59, 999);
-  if (Number.isNaN(date.getTime())) return undefined;
-  return date.toISOString();
-}
-
-/**
- * Per-source badge colour. `APPLE_HEALTH` gets the Dracula pink that
- * matches the iOS app's accent; everything else falls back to the
- * shadcn outline default (no class override).
- */
-function sourceBadgeClass(source: string): string {
-  if (source === "APPLE_HEALTH") {
-    return "border-brand-pink/50 bg-brand-pink/15 text-brand-pink";
-  }
-  return "";
-}
-
 export function MeasurementList({
   onEdit,
   onAddFirst,
@@ -300,9 +70,9 @@ export function MeasurementList({
   const { t } = useTranslations();
   const fmt = useFormatters();
   const { isAuthenticated, user } = useAuth();
-  // v1.36.x — inside somebody else's record, only the add path survives:
-  // entering a reading is an admitted delegated write, editing and deleting
-  // one are not. The row controls are dropped rather than disabled.
+  // Inside somebody else's record only the add path survives: entering a
+  // reading is an admitted delegated write, editing and deleting one are not.
+  // The row controls are dropped rather than disabled.
   const { canWriteDomain, canManage, inSharedRecord, canWrite } =
     useRecordCapabilities();
   const canAddMeasurement = canWriteDomain("measurements");
@@ -314,87 +84,16 @@ export function MeasurementList({
     inSharedRecord && canWrite && activeRecord
       ? accountLabel(activeRecord)
       : null;
-  const unitDisplay = useUnitDisplay();
-  // v1.32.26 — a single-reading row renders its value + unit in the user's
-  // preferred unit (kg↔lb, cm↔in, °C↔°F). A canonical row converts through the
-  // transform; a legacy non-canonical row (an old MCP write whose `unit` ≠ the
-  // type's canonical unit) is shown verbatim so its stored unit is never
-  // silently relabelled. Metric users take the identity path — unchanged.
-  // Glucose sits on its own display axis: stored mg/dL, rendered in whichever
-  // of mg/dL and mmol/L the account chose. It is not part of the
-  // metric/imperial registry, so it needs its own branch or a reader on
-  // mmol/L would see the dashboard tile and this list disagree about the
-  // same reading.
-  const glucoseUnit = resolveGlucoseUnit(user?.glucoseUnit);
-  // An edit whose input is NOT in the stored unit. Only the mmol/L branch
-  // qualifies: an mg/dL account edits in the unit the column holds, and
-  // routing it through the converter anyway would quantise a stored 95.48 to
-  // 95 the moment somebody opened the sheet to fix a note.
-  const editsConvertedGlucose = useCallback(
-    (m: { type: string; unit: string }) =>
-      m.type === "BLOOD_GLUCOSE" &&
-      glucoseUnit === "mmol/L" &&
-      m.unit === getUnitForType(m.type),
-    [glucoseUnit],
-  );
-  const rowDisplay = useCallback(
-    (m: { type: string; value: number; unit: string }) => {
-      if (m.unit !== getUnitForType(m.type)) {
-        return { value: m.value, unit: m.unit };
-      }
-      if (m.type === "BLOOD_GLUCOSE") {
-        return {
-          value: convertGlucose(m.value, glucoseUnit),
-          unit: glucoseUnit,
-        };
-      }
-      return {
-        value: unitDisplay.toDisplay(m.type, m.value),
-        unit: unitDisplay.unitFor(m.type),
-      };
-    },
-    [unitDisplay, glucoseUnit],
-  );
-  /**
-   * Machine-readable mirror of what the row renders — the same number and
-   * the same unit, before `Intl` turns them into locale text.
-   *
-   * The rendered cell is the only place a reading's value and unit appear
-   * together, and it appears there as "8.421 steps" or "8,421 steps"
-   * depending on who is looking. A browser test that has to assert a stored
-   * unit therefore either pins a locale or matches a loose number, and both
-   * describe the formatter rather than the reading. These attributes carry
-   * the reading itself, and the desktop table and the mobile list emit the
-   * same set, so an assertion holds at either viewport.
-   */
-  const rowIdentityAttrs = useCallback(
-    (m: Measurement, isGrouped: boolean) => ({
-      "data-testid": "measurement-row",
-      "data-measurement-type": m.type,
-      "data-measurement-value": String(
-        isGrouped ? m.value : rowDisplay(m).value,
-      ),
-      "data-measurement-unit": isGrouped ? m.unit : rowDisplay(m).unit,
-    }),
-    [rowDisplay],
-  );
-  // v1.28.42 — the desktop table and the mobile card list used to BOTH
-  // render (only CSS `display` hid one), so a dense cumulative (up to ~5000
-  // rows) or sleep page built every row subtree twice — double the DOM, double
-  // the per-row `Intl` work. Gate on the SSR-safe `useIsMobile` so only the
-  // active layout mounts. The hook resolves to the desktop branch on the server
-  // and the first client paint (matching the SSR HTML → no hydration
-  // mismatch), then flips to the live viewport after hydration; the `md:*`
-  // visibility classes below stay as a belt-and-suspenders visual guard for
-  // that first frame. No row markup or data-slot changes.
+  const display = useMeasurementRowDisplay();
+  // Only the active layout mounts: a dense day-grouped page used to build
+  // every row twice, once per layout, with only CSS hiding one. The hook
+  // resolves to the desktop branch on the server and the first client paint
+  // (matching the SSR HTML), then follows the viewport; the `md:*` classes
+  // stay as a guard for that first frame.
   const isMobile = useIsMobile("md");
-  const queryClient = useQueryClient();
   const router = useRouter();
-  // v1.22 — clicking a row's type badge drills into that metric's Insights
-  // sub-page when one exists, else into the filtered measurements list. The
-  // reverse map prefers the dedicated single-metric slug (PULSE → `pulse`,
-  // WEIGHT → `weight`); types with no sub-page fall back to the `?type=` deep
-  // link the page already supports.
+  // A row's type badge drills into that metric's Insights page when there is
+  // one, else into the list filtered to the type.
   const navigateForType = (type: string) => {
     const slug = subPageSlugForType(type);
     router.push(
@@ -403,67 +102,11 @@ export function MeasurementList({
         : `/measurements?type=${encodeURIComponent(type)}`,
     );
   };
-  // URL-owned filter state (the documents-vault pattern): type, source, date
-  // range and value range parse from `?type&source&from&to&min&max` and every
-  // change writes back through the router, so a filtered view survives
-  // navigation, reload and back/forward. The `?type=` deep links (Vorsorge
-  // card, type-badge drill-down) now simply ARE the filter state.
-  // v1.8.5 — when `lockedType` is set the list is pinned to that metric, the
-  // type selector is hidden, and the URL belongs to the insights subpage —
-  // the remaining filters stay in component memory (`syncToUrl: false`).
-  const { filters, applyFilters, patchFilters } = useUrlFilterSync({
-    parse: parseMeasurementListSearchParams,
-    serialise: measurementListFiltersToSearch,
-    syncToUrl: lockedType === undefined,
-  });
-  const typeFilter = lockedType ?? filters.type ?? "ALL";
-  // v1.15.13 — management-list source filter + optional date range.
-  // `ALL` clears the source filter; empty date strings clear the bound.
-  const sourceFilter = filters.source ?? "ALL";
-  const fromDay = filters.fromDay ?? "";
-  const toDay = filters.toDay ?? "";
-  // v1.18.5 — value-range filter (backlog G). The inputs fire per keystroke,
-  // so they edit a local draft that debounces into the URL (200 ms, replace —
-  // never a history entry per keystroke); an external URL change (back
-  // button, deep link) re-seeds the draft via the render-phase derived-state
-  // adjustment below, exactly like the vault's search field.
-  const urlValueRange = `${filters.valueMin ?? ""}\u0000${filters.valueMax ?? ""}`;
-  const [valueDraft, setValueDraft] = useState(() => ({
-    min: filters.valueMin ?? "",
-    max: filters.valueMax ?? "",
-  }));
-  const [lastUrlValueRange, setLastUrlValueRange] = useState(urlValueRange);
-  if (urlValueRange !== lastUrlValueRange) {
-    setLastUrlValueRange(urlValueRange);
-    setValueDraft({
-      min: filters.valueMin ?? "",
-      max: filters.valueMax ?? "",
-    });
-  }
-  const valueMinInput = valueDraft.min;
-  const valueMaxInput = valueDraft.max;
-  const [page, setPage] = useState(1);
-  // Shared column-sort state (measuredAt opens descending).
-  const {
-    sortBy,
-    sortDir,
-    toggleSort: applySort,
-  } = useTableSort({
-    defaultColumn: "measuredAt",
-    defaultDir: "desc",
-    descColumns: MEASUREMENT_DESC_COLUMNS,
-  });
+  const filters = useMeasurementListFilters(lockedType);
+  const { typeFilter, page, clearSelection, goToPage, setTypeFilter } = filters;
 
-  // v1.15.13 — page-scoped multi-select. Holds the ids selected on the
-  // CURRENT page; cleared on any page / filter / sort change (per the
-  // v1.15.x audit — no "select across 200k rows"). The bulk-delete
-  // payload is intersected with the painted page ids, so it is always
-  // page-bounded (≤ PAGE_SIZE) and well under the server's 200 cap.
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
-
-  // v1.4.37 — set of dayKeys whose drill-down is currently
-  // expanded. Each key maps to a one-shot query that lazy-fetches
-  // the per-sample rows for that calendar day on first open.
+  // The day rows whose drill-down is open; each opens a one-shot read of the
+  // day's samples on first expand.
   const [expandedDayKeys, setExpandedDayKeys] = useState<Set<string>>(
     () => new Set(),
   );
@@ -476,455 +119,29 @@ export function MeasurementList({
     });
   }
 
-  const [editing, setEditing] = useState<Measurement | null>(null);
-  const [editValue, setEditValue] = useState("");
-  const [editMeasuredAt, setEditMeasuredAt] = useState("");
-  const [editNotes, setEditNotes] = useState("");
-  const [editSeed, setEditSeed] = useState({
-    value: "",
-    measuredAt: "",
-    notes: "",
-  });
-  const [editError, setEditError] = useState<string | null>(null);
-  const [editDeleteDialogOpen, setEditDeleteDialogOpen] = useState(false);
-  // v1.4.27 — link the edit dialog error banner to the inputs via
-  // `aria-describedby` so screen readers announce the validation
-  // failure when the user submits an invalid value or timestamp.
-  const editErrorId = useId();
-  const editErrorDescriptor = editError ? editErrorId : undefined;
-  // v1.4.27 — Sheet-branch sticky-pinned footer slot.
-  const editFormId = useId();
-  const [editFooterEl, setEditFooterEl] = useState<HTMLDivElement | null>(null);
-
-  // v1.15.13 — every filter / page / sort change resets pagination to
-  // page 1 AND clears the page-scoped selection (the rows it referred to
-  // are about to unmount).
-  const clearSelection = () => setSelectedIds(new Set());
-
-  // Discrete facet changes push (Back steps through filter states, like the
-  // vault's chips); the committed date bounds replace — a from/to pair set in
-  // one sitting should not cost two Back presses.
-  const setTypeFilter = (value: string) => {
-    patchFilters({ type: value === "ALL" ? undefined : value });
-    setPage(1);
-    clearSelection();
-  };
-
-  const setSourceFilter = (value: string) => {
-    patchFilters({ source: value === "ALL" ? undefined : value });
-    setPage(1);
-    clearSelection();
-  };
-
-  const setFromDay = (value: string) => {
-    patchFilters({ fromDay: value || undefined }, "replace");
-    setPage(1);
-    clearSelection();
-  };
-
-  const setToDay = (value: string) => {
-    patchFilters({ toDay: value || undefined }, "replace");
-    setPage(1);
-    clearSelection();
-  };
-
-  const setValueMinInput = (value: string) => {
-    setValueDraft((prev) => ({ ...prev, min: value }));
-    setPage(1);
-    clearSelection();
-  };
-
-  const setValueMaxInput = (value: string) => {
-    setValueDraft((prev) => ({ ...prev, max: value }));
-    setPage(1);
-    clearSelection();
-  };
-
-  // The value-range draft debounces into the URL; a bound that does not
-  // normalise to a finite number never reaches it (matching the previous
-  // in-memory behaviour, where non-numeric input meant "unset").
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      const min = numericInputOrUndefined(valueDraft.min);
-      const max = numericInputOrUndefined(valueDraft.max);
-      if (
-        (min ?? "") === (filters.valueMin ?? "") &&
-        (max ?? "") === (filters.valueMax ?? "")
-      ) {
-        return;
-      }
-      patchFilters({ valueMin: min, valueMax: max }, "replace");
-    }, 200);
-    return () => clearTimeout(handle);
-  }, [valueDraft, filters, patchFilters]);
-
-  const goToPage = (updater: (p: number) => number) => {
-    setPage(updater);
-    clearSelection();
-  };
-
-  // Compose the page-reset + selection-clear side effects around the
-  // shared sort toggle (the rows the selection referred to are about to
-  // re-order and the list snaps back to page 1).
-  function toggleSort(column: string) {
-    applySort(column);
-    setPage(1);
-    clearSelection();
-  }
-
-  // v1.4.37 — when the type filter is a cumulative HK type
-  // (steps, active energy, distance, flights, daylight) the list
-  // collapses to one row per user-TZ day via the route's
-  // `groupBy=day` mode. The chevron in the row drills back into the
-  // per-sample chunks via a separate `dayKey=…` query. Matches the
-  // Apple Health.app / Garmin / Withings pattern documented in
-  // `.planning/research/v1437-step-aggregation.md` §"How the leaders
-  // do it" — never list per-sample chunks as the default view.
-  const isCumulativeFilter = CUMULATIVE_TYPES.has(typeFilter);
-  // v1.11.5 — SLEEP_DURATION is collapsed server-side to one row per
-  // night (TIME ASLEEP), so the list paints per-night rows with a
-  // chevron drilling into the night's stage segments. Like the
-  // cumulative branch it pages server-side over its synthesised rows.
-  const isSleepFilter = typeFilter === "SLEEP_DURATION";
-  const isDayGroupedFilter = isCumulativeFilter || isSleepFilter;
-
-  // v1.15.13 — derive the ISO datetime window the list `from`/`to`
-  // params require from the two date inputs (local start/end of day).
-  const fromIso = dayBoundaryIso(fromDay, "start");
-  const toIso = dayBoundaryIso(toDay, "end");
-  const sourceEq = sourceFilter === "ALL" ? undefined : sourceFilter;
-  // v1.18.5 — value-range bounds. Empty / non-numeric input clears the
-  // bound. Only threaded on the raw per-sample list; the day-grouped and
-  // sleep-night modes synthesise rows server-side (a SUM / per-night
-  // TIME-ASLEEP), where filtering on a raw `value` column carries no
-  // meaning, so the range pill is hidden for those types.
-  const valueMin =
-    filters.valueMin !== undefined ? Number(filters.valueMin) : undefined;
-  const valueMax =
-    filters.valueMax !== undefined ? Number(filters.valueMax) : undefined;
-  const listMode: "raw" | "groupBy=day" | "sleep-night" = isSleepFilter
-    ? "sleep-night"
-    : isCumulativeFilter
-      ? "groupBy=day"
-      : "raw";
-
-  const { data, isLoading, isError, error, refetch } = useQuery({
-    queryKey: queryKeys.measurementsList({
-      type: typeFilter === "ALL" ? undefined : typeFilter,
-      sourceEq,
-      from: fromIso,
-      to: toIso,
-      // Value range applies only to the raw per-sample list.
-      valueMin: isDayGroupedFilter ? undefined : valueMin,
-      valueMax: isDayGroupedFilter ? undefined : valueMax,
-      page,
-      sortBy,
-      sortDir,
-      mode: listMode,
-    }),
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      if (typeFilter !== "ALL") params.set("type", typeFilter);
-      if (sourceEq) params.set("sourceEq", sourceEq);
-      if (fromIso) params.set("from", fromIso);
-      if (toIso) params.set("to", toIso);
-      // v1.18.5 — value range only on the raw per-sample list.
-      if (!isDayGroupedFilter && valueMin != null)
-        params.set("valueMin", String(valueMin));
-      if (!isDayGroupedFilter && valueMax != null)
-        params.set("valueMax", String(valueMax));
-      params.set("limit", String(PAGE_SIZE));
-      params.set("offset", String((page - 1) * PAGE_SIZE));
-      params.set("sortBy", sortBy);
-      params.set("sortDir", sortDir);
-      // The day-grouped modes page over days, the same 25 per page as
-      // the per-sample list: `groupBy=day` folds each cumulative day to
-      // its sum, and SLEEP_DURATION collapses to one row per night
-      // without a param.
-      if (isCumulativeFilter) params.set("groupBy", "day");
-      return apiGet<{
-        measurements: Measurement[];
-        meta: { total: number };
-      }>(`/api/measurements?${params}`);
-    },
+  const list = useMeasurementListData({
+    filters,
     enabled: isAuthenticated,
+    lockedType,
+    onEmptyChange,
   });
-
-  const listEmpty =
-    !isLoading &&
-    !isError &&
-    !data?.measurements?.length &&
-    (typeFilter === "ALL" || !!lockedType);
-  useEffect(() => {
-    onEmptyChange?.(listEmpty);
-  }, [listEmpty, onEmptyChange]);
-
-  // v1.16.4 — deletes are soft (tombstones), so the success toast can
-  // carry a real Undo: it POSTs the ids to `/api/measurements/restore`,
-  // which clears `deletedAt` and re-fires the same dependent-key bundle.
-  // Mirrors the intake-Undo pattern in `use-medication-intake.ts`.
-  const restoreMeasurements = useCallback(
-    async (ids: string[]) => {
-      try {
-        await apiPost("/api/measurements/restore", { ids });
-        await invalidateKeys(queryClient, measurementDependentKeys);
-        await refetchInactiveDailyReads(queryClient);
-        toast.success(t("measurements.restoredToast"));
-      } catch (failure) {
-        showErrorToast(t("measurements.restoreError"), { cause: failure });
-      }
-    },
-    [queryClient, t],
-  );
-
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      await apiDelete(`/api/measurements/${id}`);
-    },
-    onSuccess: (_data, id) => {
-      void invalidateKeys(queryClient, measurementDependentKeys);
-      void refetchInactiveDailyReads(queryClient);
-      toast.success(t("measurements.deletedToast"), {
-        action: {
-          label: t("common.undo"),
-          onClick: () => void restoreMeasurements([id]),
-        },
-      });
-    },
-    // v1.16.4 — a failed row delete used to fail silently (no onError
-    // handler); the edit-dialog path surfaced its own inline error but
-    // the row-level confirm had no feedback at all.
-    onError: (failure) => {
-      showErrorToast(t("measurements.deleteError"), { cause: failure });
-    },
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+    refetch,
+    selectedOnPage,
+    onConfirmBulkDelete,
+    bulkDeleteMutation,
+    totalPages,
+  } = list;
+  const edit = useMeasurementEdit({
+    onEdit,
+    display,
+    deleteMutation: list.deleteMutation,
   });
 
-  // v1.15.13 — page-scoped bulk soft-delete. Posts the selected ids
-  // (intersected with the painted page) to the bulk-delete route, then
-  // invalidates the same dependent-key bundle the single delete busts so
-  // the dashboard / insights / chart caches stay in lockstep.
-  const bulkDeleteMutation = useMutation({
-    mutationFn: async (ids: string[]) => {
-      const data = await apiPost<{ deleted: number }>(
-        "/api/measurements/bulk-delete",
-        { ids },
-      );
-      return data.deleted;
-    },
-    onSuccess: async (deleted, ids) => {
-      await invalidateKeys(queryClient, measurementDependentKeys);
-      await refetchInactiveDailyReads(queryClient);
-      clearSelection();
-      toast.success(
-        deleted === 1
-          ? t("measurements.bulkDeleteSuccessOne")
-          : t("measurements.bulkDeleteSuccess", { count: String(deleted) }),
-        {
-          action: {
-            label: t("common.undo"),
-            onClick: () => void restoreMeasurements(ids),
-          },
-        },
-      );
-    },
-    onError: (failure) => {
-      showErrorToast(t("measurements.bulkDeleteError"), { cause: failure });
-    },
-  });
-
-  const pageIds = (data?.measurements ?? [])
-    // Synthetic day-grouped / sleep-night rows aren't individually
-    // deletable (they collapse many raw rows behind a `dayKey`), so they
-    // are excluded from the selectable set.
-    .filter((m) => !(m.dayKey !== undefined && m.sampleCount !== undefined))
-    .map((m) => m.id);
-
-  // Selection is held as a raw id set but every read intersects it with
-  // the painted page (`selectAllState` / `selectedCountOnPage` /
-  // `selectedIdsOnPage`), so an id that falls off the page after a
-  // refetch (e.g. a single-row delete) simply stops counting — no stale
-  // selection survives a page / filter / sort change either, since those
-  // call `clearSelection()`. No prune effect is needed.
-  const selectAll = selectAllState(selectedIds, pageIds);
-  const selectedOnPage = selectedCountOnPage(selectedIds, pageIds);
-
-  function onToggleRow(id: string) {
-    setSelectedIds((prev) => toggleId(prev, id));
-  }
-
-  function onToggleSelectAll() {
-    setSelectedIds((prev) => toggleSelectAll(prev, pageIds));
-  }
-
-  function onConfirmBulkDelete() {
-    const ids = selectedIdsOnPage(selectedIds, pageIds);
-    if (ids.length === 0) return;
-    bulkDeleteMutation.mutate(ids);
-  }
-
-  const updateMutation = useMutation({
-    mutationFn: async ({
-      id,
-      value,
-      measuredAt,
-      notes,
-    }: {
-      id: string;
-      value: number;
-      measuredAt: string;
-      notes: string | null;
-    }) => {
-      await apiPut(`/api/measurements/${id}`, { value, measuredAt, notes });
-    },
-    onSuccess: async () => {
-      await invalidateKeys(queryClient, measurementDependentKeys);
-      await refetchInactiveDailyReads(queryClient);
-      setEditSeed({
-        value: editValue,
-        measuredAt: editMeasuredAt,
-        notes: editNotes,
-      });
-      dismissEdit();
-    },
-    onError: (err) => {
-      // v1.4.28 — the PUT route returns a 409 with
-      // `meta.errorCode === "measurement.duplicate_timestamp"` when the
-      // edit collides with an existing row's
-      // `(type, measuredAt, source, sleepStage)` tuple. ApiError carries
-      // the envelope `meta`, so the localised string can be picked here.
-      if (
-        err instanceof ApiError &&
-        err.meta?.errorCode === "measurement.duplicate_timestamp"
-      ) {
-        setEditError(t("measurements.duplicateTimestamp"));
-        return;
-      }
-      // v1.27.5 (di-001) — value edits on server-owned sources
-      // (connector / import / computed rows) are refused with a 409.
-      if (
-        err instanceof ApiError &&
-        err.meta?.errorCode === "measurement.update.server_owned_source"
-      ) {
-        setEditError(t("measurements.serverOwnedSource"));
-        return;
-      }
-      setEditError(
-        err instanceof Error ? err.message : t("measurements.saveError"),
-      );
-    },
-  });
-  const editDismissal = useSeededFormDismissal({
-    seed: editSeed,
-    value: {
-      value: editValue,
-      measuredAt: editMeasuredAt,
-      notes: editNotes,
-    },
-    blocked: updateMutation.isPending || deleteMutation.isPending,
-  });
-
-  // Every mode pages server-side at PAGE_SIZE: the per-sample list over
-  // rows, the day-grouped modes over days or nights (#1245).
-  const totalPages = data ? Math.ceil(data.meta.total / PAGE_SIZE) : 0;
-
-  function startEdit(measurement: Measurement) {
-    if (onEdit) {
-      onEdit(measurement);
-      return;
-    }
-
-    // Seed the input in the user's preferred unit so an imperial user edits in
-    // lb / in / °F (converted back to canonical on save). Metric users and
-    // legacy non-canonical rows take the identity path — the seed is the raw
-    // stored value, unchanged. Round the converted imperial seed so the input
-    // shows "210" rather than a long float.
-    const rd = rowDisplay(measurement);
-    const seedValue = editsConvertedGlucose(measurement)
-      ? rd.value
-      : unitDisplay.preference === "imperial" &&
-          unitDisplay.isTransformed(measurement.type) &&
-          measurement.unit === getUnitForType(measurement.type)
-        ? Math.round(rd.value * 100) / 100
-        : measurement.value;
-    const seed = {
-      value: String(seedValue),
-      measuredAt: toDateTimeLocalValue(measurement.measuredAt),
-      notes: (measurement.notes ?? "").slice(0, MAX_COMMENT_LENGTH),
-    };
-    setEditing(measurement);
-    setEditValue(seed.value);
-    setEditMeasuredAt(seed.measuredAt);
-    setEditNotes(seed.notes);
-    setEditSeed(seed);
-    setEditError(null);
-  }
-
-  function dismissEdit() {
-    setEditing(null);
-    setEditError(null);
-    setEditDeleteDialogOpen(false);
-  }
-
-  function closeEdit() {
-    editDismissal.requestClose(dismissEdit);
-  }
-
-  async function deleteEditingMeasurement() {
-    if (!editing) return;
-
-    try {
-      setEditError(null);
-      await deleteMutation.mutateAsync(editing.id);
-      dismissEdit();
-    } catch {
-      setEditError(t("measurements.deleteError"));
-    }
-  }
-
-  async function submitEdit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!editing) return;
-
-    const parsedValue = Number(editValue);
-    if (!Number.isFinite(parsedValue)) {
-      setEditError(t("measurements.invalidValue"));
-      return;
-    }
-
-    const measuredDate = new Date(editMeasuredAt);
-    if (Number.isNaN(measuredDate.getTime())) {
-      setEditError(t("measurements.invalidTimestamp"));
-      return;
-    }
-
-    // The input holds a display-unit value; invert it to canonical SI before
-    // the PATCH so an imperial edit persists in the stored unit. Metric users
-    // and legacy non-canonical rows are the identity path — value unchanged.
-    let canonicalValue = parsedValue;
-    if (editsConvertedGlucose(editing)) {
-      // The label above the input said mmol/L, so the number in it is
-      // mmol/L. Sending it on would rewrite a 95 mg/dL reading as 5.3.
-      canonicalValue = toCanonicalMgdl(parsedValue, "mmol/L");
-    } else if (
-      unitDisplay.isTransformed(editing.type) &&
-      editing.unit === getUnitForType(editing.type)
-    ) {
-      const inverted = unitDisplay.fromDisplay(editing.type, parsedValue);
-      canonicalValue =
-        unitDisplay.preference === "imperial"
-          ? Math.round(inverted * 100) / 100
-          : inverted;
-    }
-
-    setEditError(null);
-    updateMutation.mutate({
-      id: editing.id,
-      value: canonicalValue,
-      measuredAt: measuredDate.toISOString(),
-      notes: editNotes.trim() ? editNotes.trim() : null,
-    });
-  }
-
   if (!isAuthenticated) {
     return (
       <p className="text-muted-foreground text-sm">
@@ -933,17 +150,23 @@ export function MeasurementList({
     );
   }
 
+  const rows: MeasurementRowContext = {
+    canManage,
+    selectedIds: filters.selectedIds,
+    expandedDayKeys,
+    toggleExpand,
+    navigateForType,
+    startEdit: edit.startEdit,
+    onToggleRow: list.onToggleRow,
+    onDelete: (id) => list.deleteMutation.mutate(id),
+    display,
+  };
+
   return (
     <>
       <div className="space-y-4">
-        {/* v1.16.1 — unified filter rail (`<FilterBar>`): compact pill
-            triggers in the canonical order date range · type · source,
-            active filters fold into their pill as removable chips, plus
-            a reset action and the result count. Filter state and query
-            keys are unchanged — this swap is presentation-only.
-            On the locked-type insights subpage the rail is suppressed
-            entirely (the metric is fixed by the route); only the count
-            line remains. */}
+        {/* The filter rail; on the locked-type page (the metric is fixed by
+            the route) only the count line remains. */}
         {lockedType ? (
           data?.meta?.total !== undefined && (
             <div className="flex items-center justify-end">
@@ -955,76 +178,7 @@ export function MeasurementList({
             </div>
           )
         ) : (
-          <FilterBar
-            isFiltered={
-              typeFilter !== "ALL" ||
-              sourceFilter !== "ALL" ||
-              fromDay !== "" ||
-              toDay !== "" ||
-              (!isDayGroupedFilter &&
-                (valueMinInput !== "" || valueMaxInput !== ""))
-            }
-            onReset={() => {
-              // One push clears every facet (and so one Back restores them);
-              // the value-range draft is cleared directly because a bound
-              // that never committed to the URL has no change to re-seed
-              // from.
-              applyFilters({});
-              setValueDraft({ min: "", max: "" });
-              setPage(1);
-              clearSelection();
-            }}
-            count={
-              data?.meta?.total !== undefined
-                ? t("measurements.measurementCount", {
-                    count: fmt.integer(data.meta.total),
-                  })
-                : undefined
-            }
-          >
-            <FilterBarDateRange
-              label={t("dataList.dateRange")}
-              from={fromDay}
-              to={toDay}
-              onFromChange={setFromDay}
-              onToChange={setToDay}
-              idPrefix="measurements"
-            />
-            <FilterBarSelect
-              label={t("dataList.typeLabel")}
-              value={typeFilter}
-              onValueChange={setTypeFilter}
-              allLabel={t("measurements.allTypes")}
-              options={Object.entries(TYPE_LABEL_KEYS).map(
-                ([val, labelKey]) => ({ value: val, label: t(labelKey) }),
-              )}
-            />
-            <FilterBarSelect
-              label={t("dataList.sourceLabel")}
-              value={sourceFilter}
-              onValueChange={setSourceFilter}
-              allLabel={t("dataList.allSources")}
-              options={MEASUREMENT_SOURCE_OPTIONS.map((src) => ({
-                value: src,
-                label: formatMeasurementSource(src, t),
-              }))}
-            />
-            {/* v1.18.5 — value-range pill. Hidden for the day-grouped /
-                sleep-night types where the painted `value` is a synthesised
-                SUM / per-night total rather than a raw reading. */}
-            {!isDayGroupedFilter && (
-              <FilterBarNumberRange
-                label={t("dataList.valueRange")}
-                min={valueMinInput}
-                max={valueMaxInput}
-                onMinChange={setValueMinInput}
-                onMaxChange={setValueMaxInput}
-                idPrefix="measurements-value"
-                fromLabel={t("dataList.valueMin")}
-                toLabel={t("dataList.valueMax")}
-              />
-            )}
-          </FilterBar>
+          <MeasurementFilterRail filters={filters} total={data?.meta?.total} />
         )}
 
         {isLoading ? (
@@ -1038,597 +192,33 @@ export function MeasurementList({
           // an outage never reads as "you have no measurements".
           <QueryErrorCard error={error} onRetry={() => void refetch()} />
         ) : !data?.measurements?.length ? (
-          <>
-            {/* v1.4.15: replaces the bare-text empty rectangle.
-                Filter-aware copy distinguishes brand-new accounts ("no
-                measurements yet") from filtered-out lists ("no measurements
-                match this filter") and exposes the right CTA for each case. */}
-            <EmptyState
-              icon={<Activity className="size-6" />}
-              title={
-                typeFilter === "ALL" || lockedType
-                  ? t("measurements.emptyTitle")
-                  : t("measurements.emptyFilteredTitle")
-              }
-              description={
-                typeFilter === "ALL" || lockedType
-                  ? t("measurements.emptyDescription")
-                  : t("measurements.emptyFilteredDescription")
-              }
-              action={
-                // v1.8.5 — a locked-type list has no "reset filter" path;
-                // the metric is fixed by the route.
-                typeFilter !== "ALL" && !lockedType ? (
-                  <Button
-                    variant="outline"
-                    onClick={() => setTypeFilter("ALL")}
-                  >
-                    {t("measurements.emptyResetFilter")}
-                  </Button>
-                ) : onAddFirst && canAddMeasurement ? (
-                  <Button
-                    onClick={onAddFirst}
-                    data-slot="measurement-add-first"
-                  >
-                    <Plus className="h-4 w-4" />
-                    {t("measurements.emptyAddFirst")}
-                  </Button>
-                ) : undefined
-              }
-            />
-            {/* The one place in the app the asymmetry is spelled out. A
-                delegate who may add will look for the edit control beside the
-                row they just entered, so the list that carries the add button
-                says once, in one muted line, where the limit is. Every other
-                hidden control stays silent: the banner already names the mode,
-                and a chip beside each absent button would be noise. */}
-            {delegateName && (
-              <p
-                data-slot="delegate-add-only-note"
-                className="text-muted-foreground mx-auto max-w-prose text-center text-xs"
-              >
-                {t("recordSharing.delegate.addOnlyNote", {
-                  name: delegateName,
-                })}
-              </p>
-            )}
-          </>
+          <MeasurementListEmpty
+            filtered={typeFilter !== "ALL" && !lockedType}
+            onResetFilter={() => setTypeFilter("ALL")}
+            onAddFirst={canAddMeasurement ? onAddFirst : undefined}
+            delegateName={delegateName}
+          />
         ) : (
           <>
-            {/* Desktop table — rendered only when not mobile (v1.28.42 H3). */}
+            {/* Desktop table or phone list, whichever layout is active. */}
             {!isMobile && (
-              <div
-                // `measurement-rows` marks the READ rows, not the list frame:
-                // the filter rail above renders next to the loading
-                // silhouettes as well, so it proves nothing about the data
-                // having arrived. This wrapper exists only in the resolved,
-                // non-empty branch, and the mobile list below carries the
-                // same marker so a wait on it holds at any viewport.
-                data-slot="measurement-rows"
-                className="bg-card border-border hidden overflow-hidden rounded-lg border md:block"
-              >
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10 pl-4">
-                        {/* v1.15.13 — select-all-on-page header checkbox.
-                            v1.36.x — bulk delete is the owner's alone, so a
-                            delegate gets no selection column. */}
-                        {canManage && (
-                          <Checkbox
-                            checked={
-                              selectAll === "all"
-                                ? true
-                                : selectAll === "some"
-                                  ? "indeterminate"
-                                  : false
-                            }
-                            disabled={pageIds.length === 0}
-                            onCheckedChange={onToggleSelectAll}
-                            aria-label={t("dataList.selectAll")}
-                          />
-                        )}
-                      </TableHead>
-                      <TableHead className="w-28">
-                        {t("measurements.type")}
-                      </TableHead>
-                      <SortableHead
-                        column="value"
-                        label={t("measurements.value")}
-                        currentSort={sortBy}
-                        currentDir={sortDir}
-                        onSort={toggleSort}
-                      />
-                      <SortableHead
-                        column="measuredAt"
-                        label={t("measurements.date")}
-                        currentSort={sortBy}
-                        currentDir={sortDir}
-                        onSort={toggleSort}
-                      />
-                      <TableHead className="w-56">
-                        {t("measurements.comment")}
-                      </TableHead>
-                      <SortableHead
-                        column="source"
-                        label={t("measurements.source")}
-                        currentSort={sortBy}
-                        currentDir={sortDir}
-                        onSort={toggleSort}
-                        className="w-20"
-                      />
-                      <TableHead className="w-20 pr-4 text-right">
-                        {t("measurements.actions")}
-                      </TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {data.measurements.map((m) => {
-                      const isGrouped =
-                        m.dayKey !== undefined && m.sampleCount !== undefined;
-                      // v1.11.5 — sleep night rows are grouped (chevron
-                      // drills into the stage segments) but render a
-                      // sleep-aware headline + nap caption, not the
-                      // cumulative "daily total" caption.
-                      const isSleep = m.type === "SLEEP_DURATION";
-                      const isExpanded = isGrouped
-                        ? expandedDayKeys.has(m.dayKey as string)
-                        : false;
-                      // v1.4.38 — stable drill-down id so the
-                      // disclosure chevron can thread aria-controls to the
-                      // expanded panel. dayKey is unique per row when
-                      // grouped; fall back to m.id otherwise.
-                      const drilldownId = `drilldown-desktop-${m.dayKey ?? m.id}`;
-                      const isSelected = selectedIds.has(m.id);
-                      return (
-                        <Fragment key={m.id}>
-                          <TableRow
-                            data-state={isSelected ? "selected" : undefined}
-                            // A row is addressable by what it holds, not by
-                            // the copy it paints: the type is an enum and the
-                            // unit is a symbol, so a browser journey can pin
-                            // "this glucose reading now reads in mmol/L"
-                            // without matching translated text that also
-                            // renders at a different size on the card list
-                            // below.
-                            {...rowIdentityAttrs(m, isGrouped)}
-                            data-display-unit={
-                              isGrouped ? m.unit : rowDisplay(m).unit
-                            }
-                          >
-                            <TableCell className="pl-4">
-                              {/* Grouped/synthetic rows aren't individually
-                                deletable, so they have no checkbox. */}
-                              {!isGrouped && canManage && (
-                                <Checkbox
-                                  checked={isSelected}
-                                  onCheckedChange={() => onToggleRow(m.id)}
-                                  aria-label={t("dataList.selectRow")}
-                                />
-                              )}
-                            </TableCell>
-                            <TableCell>
-                              <Badge
-                                asChild
-                                variant="secondary"
-                                className={`focus-visible:ring-ring/50 cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none ${TYPE_COLORS[m.type] ?? ""}`.trim()}
-                              >
-                                <button
-                                  type="button"
-                                  onClick={() => navigateForType(m.type)}
-                                  aria-label={t(
-                                    "measurements.openMetricInsights",
-                                    {
-                                      type: TYPE_LABEL_KEYS[m.type]
-                                        ? t(TYPE_LABEL_KEYS[m.type])
-                                        : m.type,
-                                    },
-                                  )}
-                                >
-                                  {TYPE_LABEL_KEYS[m.type]
-                                    ? t(TYPE_LABEL_KEYS[m.type])
-                                    : m.type}
-                                </button>
-                              </Badge>
-                            </TableCell>
-                            <TableCell
-                              className="font-semibold tabular-nums"
-                              data-slot="measurement-row-value"
-                            >
-                              {/* v1.4.39.3 — non-grouped rows render the
-                                stored value with its native precision
-                                (`fmt.number` honours up to 3 fraction
-                                digits by default, drops trailing zeros)
-                                so a 78.4 kg weight reading stops
-                                truncating to "78". Grouped rows are
-                                cumulative-type day aggregates (steps,
-                                distance, etc.) and stay on `fmt.integer`
-                                because the underlying readings are
-                                integer-only by definition.
-                                v1.11.5 — sleep rows render the night's
-                                TIME ASLEEP as "8h 12m" + a nap caption. */}
-                              {isSleep ? (
-                                <>
-                                  {formatDurationMinutes(m.value, t)}
-                                  <SleepNightCaption m={m} />
-                                </>
-                              ) : (
-                                <>
-                                  {isGrouped
-                                    ? fmt.integer(m.value)
-                                    : fmt.number(
-                                        rowDisplay(m).value,
-                                        rawDisplayFractionDigits(m.type),
-                                      )}{" "}
-                                  {measurementUnitLabel(
-                                    m.type,
-                                    isGrouped ? m.unit : rowDisplay(m).unit,
-                                    t,
-                                  )}
-                                  {isGrouped && (
-                                    <span className="text-muted-foreground ml-2 text-xs font-normal">
-                                      {t("measurements.dailyTotalCaption", {
-                                        count: fmt.integer(
-                                          m.sampleCount as number,
-                                        ),
-                                      })}
-                                    </span>
-                                  )}
-                                </>
-                              )}
-                            </TableCell>
-                            {/*
-                            v1.4.43 — `formatDateOrRelative`
-                            renders timestamps inside the last 24 h
-                            as "vor 3 min" so a fresh entry visible
-                            on the dashboard briefing and on the
-                            list view never disagrees about how to
-                            phrase "when".
-                          */}
-                            <TableCell className="text-muted-foreground text-sm">
-                              {/* v1.42 — the date opens its day; the row
-                                keeps opening the reading. */}
-                              {m.dayKey !== undefined ? (
-                                <DayLink date={m.dayKey}>
-                                  {formatDateOrRelative(m.measuredAt, t)}
-                                </DayLink>
-                              ) : (
-                                <DayLinkAt at={m.measuredAt}>
-                                  {formatDateOrRelative(m.measuredAt, t)}
-                                </DayLinkAt>
-                              )}
-                            </TableCell>
-                            <TableCell className="text-sm">
-                              {m.notes ? (
-                                <span title={m.notes}>
-                                  {truncateComment(m.notes)}
-                                </span>
-                              ) : (
-                                <span className="text-muted-foreground">-</span>
-                              )}
-                            </TableCell>
-                            <TableCell>
-                              {m.source !== "MANUAL" && (
-                                <Badge
-                                  variant="outline"
-                                  data-testid="measurement-source-badge"
-                                  className={`text-xs ${sourceBadgeClass(m.source)}`.trim()}
-                                >
-                                  {formatMeasurementSource(m.source, t)}
-                                </Badge>
-                              )}
-                            </TableCell>
-                            <TableCell className="pr-4 text-right">
-                              <div className="flex items-center justify-end gap-1">
-                                {isGrouped ? (
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-10 w-10"
-                                    data-testid="measurement-day-expand"
-                                    onClick={() =>
-                                      toggleExpand(m.dayKey as string)
-                                    }
-                                    aria-expanded={isExpanded}
-                                    aria-controls={drilldownId}
-                                    aria-label={
-                                      isExpanded
-                                        ? t("measurements.collapseDay")
-                                        : t("measurements.expandDay")
-                                    }
-                                  >
-                                    <ChevronDown
-                                      className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""}`}
-                                    />
-                                  </Button>
-                                ) : (
-                                  <>
-                                    {canManage && (
-                                      <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        className="h-10 w-10"
-                                        onClick={() => startEdit(m)}
-                                        aria-label={t("common.edit")}
-                                      >
-                                        <Pencil className="h-3.5 w-3.5" />
-                                      </Button>
-                                    )}
-                                    <DeleteButton
-                                      domain="measurements"
-                                      onConfirm={() =>
-                                        deleteMutation.mutate(m.id)
-                                      }
-                                      title={t(
-                                        "measurements.deleteConfirmTitle",
-                                      )}
-                                      description={t(
-                                        "measurements.deleteConfirmDescription",
-                                      )}
-                                    />
-                                  </>
-                                )}
-                              </div>
-                            </TableCell>
-                          </TableRow>
-                          {isGrouped && isExpanded && (
-                            <TableRow id={drilldownId}>
-                              <TableCell colSpan={7} className="p-0">
-                                <DayDrillDown
-                                  type={m.type}
-                                  dayKey={m.dayKey as string}
-                                  unit={m.unit}
-                                  layout="desktop"
-                                />
-                              </TableCell>
-                            </TableRow>
-                          )}
-                        </Fragment>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </div>
+              <MeasurementTable
+                measurements={data.measurements}
+                rows={rows}
+                filters={filters}
+                list={list}
+              />
             )}
-
-            {/* Mobile list — rendered only when mobile (v1.28.42 H3). */}
             {isMobile && (
-              <div data-slot="measurement-rows" className="space-y-2 md:hidden">
-                {data.measurements.map((m) => {
-                  const Icon = TYPE_ICONS[m.type];
-                  const isGrouped =
-                    m.dayKey !== undefined && m.sampleCount !== undefined;
-                  const isSleep = m.type === "SLEEP_DURATION";
-                  const isExpanded = isGrouped
-                    ? expandedDayKeys.has(m.dayKey as string)
-                    : false;
-                  // v1.4.38 — see desktop counterpart.
-                  const drilldownId = `drilldown-mobile-${m.dayKey ?? m.id}`;
-                  const isSelected = selectedIds.has(m.id);
-                  return (
-                    <ListRow
-                      key={m.id}
-                      data-state={isSelected ? "selected" : undefined}
-                      // Same addressing contract as the desktop row above.
-                      {...rowIdentityAttrs(m, isGrouped)}
-                      data-display-unit={
-                        isGrouped ? m.unit : rowDisplay(m).unit
-                      }
-                      className="bg-card border-border data-[state=selected]:border-primary/60 data-[state=selected]:bg-primary/5"
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex min-w-0 flex-1 items-center gap-2">
-                          {/* v1.15.13 — multi-select checkbox in a 44px tap
-                            target; absent for synthetic grouped rows. */}
-                          {!isGrouped && canManage && (
-                            // v1.15.13 MEDIUM-1 kept the 16px Radix Checkbox
-                            // (itself a `<button role=checkbox>`) inside a
-                            // 44px wrapper `<button>` for WCAG 2.5.5 — but a
-                            // button may not nest inside a button, and the
-                            // invalid markup made React 19 fail hydration on
-                            // every list paint. The wrapper is now a plain
-                            // layout `<div>`; the Checkbox stays the single
-                            // control and owns the 44px hit area via an
-                            // `after` hit-slop (clicks on a pseudo-element
-                            // hit-test against its host button).
-                            <div className="flex size-11 shrink-0 items-center justify-center">
-                              <Checkbox
-                                checked={isSelected}
-                                onCheckedChange={() => onToggleRow(m.id)}
-                                aria-label={t("dataList.selectRow")}
-                                className="relative after:absolute after:-inset-3.5"
-                              />
-                            </div>
-                          )}
-                          {Icon && (
-                            <button
-                              type="button"
-                              onClick={() => navigateForType(m.type)}
-                              aria-label={t("measurements.openMetricInsights", {
-                                type: TYPE_LABEL_KEYS[m.type]
-                                  ? t(TYPE_LABEL_KEYS[m.type])
-                                  : m.type,
-                              })}
-                              className={`focus-visible:ring-ring/50 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none ${TYPE_COLORS[m.type] ?? ""}`}
-                            >
-                              <Icon className="h-4 w-4" />
-                            </button>
-                          )}
-                          <div className="min-w-0 flex-1">
-                            {/* v1.22 — metadata badges sit on the scale
-                              token `text-xs` (12 px, the mobile legibility
-                              baseline) instead of an arbitrary per-site
-                              size, so the row tracks the type scale. */}
-                            {/* The type names the row: without it two
-                              readings in the same unit ("55 ms" HRV and
-                              "63 ms" RMSSD) could not be told apart on a
-                              phone, where the desktop table's type column
-                              does not exist. */}
-                            <p
-                              className="truncate text-xs font-medium"
-                              data-slot="measurement-row-type"
-                            >
-                              {TYPE_LABEL_KEYS[m.type]
-                                ? t(TYPE_LABEL_KEYS[m.type])
-                                : m.type}
-                            </p>
-                            <span
-                              className="font-semibold tabular-nums"
-                              data-slot="measurement-row-value"
-                            >
-                              {/* v1.4.39.3 — mirror the desktop table:
-                                grouped daily aggregates stay integer,
-                                non-grouped single readings render with
-                                their native decimal precision so
-                                "78.4 kg" no longer truncates to "78".
-                                v1.11.5 — sleep rows render TIME ASLEEP. */}
-                              {isSleep
-                                ? formatDurationMinutes(m.value, t)
-                                : isGrouped
-                                  ? fmt.integer(m.value)
-                                  : fmt.number(
-                                      rowDisplay(m).value,
-                                      rawDisplayFractionDigits(m.type),
-                                    )}
-                            </span>
-                            {isSleep ? (
-                              <SleepNightCaption m={m} />
-                            ) : (
-                              isGrouped && (
-                                <span className="text-muted-foreground ml-1.5 text-xs">
-                                  {t("measurements.dailyTotalCaption", {
-                                    count: fmt.integer(m.sampleCount as number),
-                                  })}
-                                </span>
-                              )
-                            )}
-                            {/* The meta line wraps rather than truncates:
-                              cut to "vor 9 Stunden…" it hid the day it
-                              opens and the source beside it. */}
-                            <p className="text-muted-foreground text-xs">
-                              {/*
-                              v1.4.43 — see desktop
-                              counterpart at the same `measuredAt`
-                              site. Relative under 24 h, absolute
-                              older.
-                            */}
-                              {/* The unit is meta, and on a phone a long
-                                one ("Atemzüge/min") beside the value pushed
-                                the row's controls; it leads the meta line
-                                instead. Sleep reads as a duration. */}
-                              {(() => {
-                                if (isSleep) return null;
-                                const lead = measurementUnitMetaLead(
-                                  m.type,
-                                  isGrouped ? m.unit : rowDisplay(m).unit,
-                                  t,
-                                );
-                                return lead ? (
-                                  <span
-                                    data-slot="measurement-row-unit"
-                                    className="whitespace-nowrap"
-                                  >
-                                    {lead}
-                                  </span>
-                                ) : null;
-                              })()}
-                              {m.dayKey !== undefined ? (
-                                <DayLink
-                                  date={m.dayKey}
-                                  className="whitespace-nowrap"
-                                >
-                                  {formatDateOrRelative(m.measuredAt, t)}
-                                </DayLink>
-                              ) : (
-                                <DayLinkAt
-                                  at={m.measuredAt}
-                                  className="whitespace-nowrap"
-                                >
-                                  {formatDateOrRelative(m.measuredAt, t)}
-                                </DayLinkAt>
-                              )}
-                              {m.source !== "MANUAL" && (
-                                <Badge
-                                  variant="outline"
-                                  data-testid="measurement-source-badge"
-                                  className={`ml-1.5 h-4 px-1 text-xs ${sourceBadgeClass(m.source)}`.trim()}
-                                >
-                                  {formatMeasurementSource(m.source, t)}
-                                </Badge>
-                              )}
-                            </p>
-                            {m.notes && (
-                              // User data is never muted — the desktop table
-                              // renders the same note in the foreground colour.
-                              <p className="text-foreground truncate text-xs">
-                                {truncateComment(m.notes)}
-                              </p>
-                            )}
-                          </div>
-                        </div>
-                        <div className="flex shrink-0 items-center gap-1">
-                          {isGrouped ? (
-                            <Button
-                              variant="ghost"
-                              size="icon-lg"
-                              data-testid="measurement-day-expand"
-                              onClick={() => toggleExpand(m.dayKey as string)}
-                              aria-expanded={isExpanded}
-                              aria-controls={drilldownId}
-                              aria-label={
-                                isExpanded
-                                  ? t("measurements.collapseDay")
-                                  : t("measurements.expandDay")
-                              }
-                            >
-                              <ChevronDown
-                                className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""}`}
-                              />
-                            </Button>
-                          ) : (
-                            <>
-                              {canManage && (
-                                <Button
-                                  variant="ghost"
-                                  size="icon-lg"
-                                  onClick={() => startEdit(m)}
-                                  aria-label={t("common.edit")}
-                                >
-                                  <Pencil className="h-4 w-4" />
-                                </Button>
-                              )}
-                              <DeleteButton
-                                domain="measurements"
-                                iconClassName="h-4 w-4"
-                                onConfirm={() => deleteMutation.mutate(m.id)}
-                                title={t("measurements.deleteConfirmTitle")}
-                                description={t(
-                                  "measurements.deleteConfirmDescription",
-                                )}
-                              />
-                            </>
-                          )}
-                        </div>
-                      </div>
-                      {isGrouped && isExpanded && (
-                        <div id={drilldownId}>
-                          <DayDrillDown
-                            type={m.type}
-                            dayKey={m.dayKey as string}
-                            unit={m.unit}
-                            layout="mobile"
-                          />
-                        </div>
-                      )}
-                    </ListRow>
-                  );
-                })}
-              </div>
+              <MeasurementCardList
+                measurements={data.measurements}
+                rows={rows}
+              />
             )}
           </>
         )}
 
-        {/* v1.15.13 — page-scoped multi-select action bar. */}
+        {/* Page-scoped multi-select action bar. */}
         <SelectionActionBar
           domain="measurements"
           count={selectedOnPage}
@@ -1651,369 +241,121 @@ export function MeasurementList({
           }
         />
 
-        {/* Pagination */}
         {totalPages > 1 && (
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground text-sm">
-              {t("measurements.pageInfo", {
-                page: String(page),
-                total: String(totalPages),
-              })}
-            </span>
-            <div className="flex gap-1">
-              <Button
-                variant="ghost"
-                size="icon-lg"
-                disabled={page <= 1}
-                onClick={() => goToPage((p) => p - 1)}
-                aria-label={t("measurements.previousPage")}
-              >
-                <ChevronLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon-lg"
-                disabled={page >= totalPages}
-                onClick={() => goToPage((p) => p + 1)}
-                aria-label={t("measurements.nextPage")}
-              >
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
+          <MeasurementListPagination
+            page={page}
+            totalPages={totalPages}
+            goToPage={goToPage}
+          />
         )}
       </div>
 
-      <ResponsiveSheet
-        open={!!editing}
-        onOpenChange={(open) => !open && closeEdit()}
-        title={t("measurements.editMeasurement")}
-        footer={<div ref={setEditFooterEl} className="flex w-full" />}
-      >
-        {editing && (
-          <form id={editFormId} onSubmit={submitEdit} className="space-y-4">
-            <div className="flex items-center gap-1.5">
-              <Label className="shrink-0">{t("measurements.type")}</Label>
-              <span className="text-sm leading-none font-medium">
-                {TYPE_LABEL_KEYS[editing.type]
-                  ? t(TYPE_LABEL_KEYS[editing.type])
-                  : editing.type}
-              </span>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="edit-value">
-                {t("measurements.valueWithUnit", {
-                  unit: rowDisplay(editing).unit,
-                })}
-              </Label>
-              <Input
-                id="edit-value"
-                type="number"
-                enterKeyHint="next"
-                step="any"
-                value={editValue}
-                onChange={(e) => setEditValue(e.target.value)}
-                required
-                aria-required="true"
-                aria-invalid={!!editError || undefined}
-                aria-describedby={editErrorDescriptor}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="edit-measuredAt">
-                {t("measurements.timestamp")}
-              </Label>
-              <DateTimeField
-                id="edit-measuredAt"
-                value={editMeasuredAt}
-                onChange={setEditMeasuredAt}
-                // v1.17 — match the server bound: no future instant.
-                max={toDateTimeLocalValue(new Date().toISOString())}
-                required
-                aria-required="true"
-                aria-invalid={!!editError || undefined}
-                aria-describedby={editErrorDescriptor}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between gap-3">
-                <Label htmlFor="edit-notes">
-                  {t("measurements.notes")} ({t("common.optional")})
-                </Label>
-                <span className="text-muted-foreground text-xs">
-                  {editNotes.length}/{MAX_COMMENT_LENGTH}
-                </span>
-              </div>
-              <Input
-                id="edit-notes"
-                value={editNotes}
-                onChange={(e) => setEditNotes(e.target.value)}
-                maxLength={MAX_COMMENT_LENGTH}
-                enterKeyHint="done"
-                autoCapitalize="sentences"
-              />
-            </div>
-
-            {editError && (
-              <div
-                id={editErrorId}
-                role="alert"
-                aria-live="assertive"
-                className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm"
-              >
-                {editError}
-              </div>
-            )}
-
-            {editFooterEl
-              ? createPortal(
-                  <div className="flex w-full items-center justify-between gap-2">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="icon-lg"
-                          disabled={
-                            updateMutation.isPending || deleteMutation.isPending
-                          }
-                          aria-label={t("common.moreOptions")}
-                        >
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
-                        <DropdownMenuItem
-                          onClick={() => setEditDeleteDialogOpen(true)}
-                        >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t("common.delete")}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-
-                    {/*
-                        v1.4.43 — `[Cancel] [Save]` order is
-                        iOS-first intentional per Apple HIG, which
-                        puts the primary / confirmation action
-                        rightmost. iOS is the load-bearing mobile
-                        target for HealthLog and the web shell renders
-                        desktop + iOS PWA from the same component, so
-                        the current order survives. Do NOT flip to
-                        `[Save] [Cancel]` in a future "Android parity"
-                        refactor — fork a platform-specific shell
-                        instead if Android becomes a real audience.
-                      */}
-                    <div className="flex items-center gap-2">
-                      <Button
-                        type="button"
-                        variant="outline"
-                        onClick={closeEdit}
-                        disabled={
-                          updateMutation.isPending || deleteMutation.isPending
-                        }
-                      >
-                        {t("common.cancel")}
-                      </Button>
-                      <Button
-                        type="submit"
-                        form={editFormId}
-                        disabled={
-                          updateMutation.isPending || deleteMutation.isPending
-                        }
-                      >
-                        {updateMutation.isPending ? (
-                          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
-                        ) : null}
-                        {t("common.save")}
-                      </Button>
-                    </div>
-                  </div>,
-                  editFooterEl,
-                )
-              : null}
-
-            <AlertDialog
-              open={editDeleteDialogOpen}
-              onOpenChange={setEditDeleteDialogOpen}
-            >
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    {t("measurements.deleteConfirmTitle")}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {t("measurements.deleteConfirmDescription")}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel disabled={deleteMutation.isPending}>
-                    {t("common.cancel")}
-                  </AlertDialogCancel>
-                  <AlertDialogAction
-                    variant="destructive"
-                    onClick={deleteEditingMeasurement}
-                    disabled={deleteMutation.isPending}
-                  >
-                    {deleteMutation.isPending ? (
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
-                    ) : null}
-                    {t("common.delete")}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          </form>
-        )}
-      </ResponsiveSheet>
-      <SeededFormDiscardDialog
-        open={editDismissal.discardDialogOpen}
-        onConfirm={editDismissal.confirmDiscard}
-        onCancel={editDismissal.cancelDiscard}
-      />
+      <MeasurementEditSheet edit={edit} display={display} />
     </>
   );
 }
 
 /**
- * v1.4.37 — lazy drill-down for a collapsed cumulative-type day.
- * Fires a separate `GET /api/measurements?type=…&dayKey=…` only when
- * the row is expanded; the result is rendered as a nested list of the
- * per-sample chunks that summed into the parent row's daily total.
+ * Nothing to list. The copy tells a new account ("no measurements yet") from
+ * a filtered-out list, with the action each one needs; a locked-type list has
+ * no filter to reset, since the route fixes the metric.
  */
-function DayDrillDown({
-  type,
-  dayKey,
-  unit,
-  layout,
+function MeasurementListEmpty({
+  filtered,
+  onResetFilter,
+  onAddFirst,
+  delegateName,
 }: {
-  type: string;
-  dayKey: string;
-  unit: string;
-  layout: "desktop" | "mobile";
+  filtered: boolean;
+  onResetFilter: () => void;
+  onAddFirst?: () => void;
+  delegateName: string | null;
 }) {
   const { t } = useTranslations();
-  const { isAuthenticated } = useAuth();
-  const { data, isLoading, error, refetch } = useQuery({
-    queryKey: queryKeys.measurementDrilldown(type, dayKey),
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set("type", type);
-      params.set("dayKey", dayKey);
-      params.set("sortDir", "asc");
-      return apiGet<{ measurements: Measurement[] }>(
-        `/api/measurements?${params}`,
-      );
-    },
-    enabled: isAuthenticated,
-    // The drill-down is per-day — once fetched it rarely needs to
-    // re-fetch (the underlying day has already stabilised for
-    // anything older than the drain's 36 h cutoff). Keep it cached
-    // for the session.
-    staleTime: 5 * 60 * 1000,
-  });
-
-  if (isLoading) {
-    return (
-      <div className="text-muted-foreground flex items-center gap-2 py-2 text-xs">
-        <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
-        {t("common.loading")}
-      </div>
-    );
-  }
-  if (error) {
-    return (
-      <QueryErrorRow
-        error={error}
-        slot="measurement-drilldown-error"
-        message={t("measurements.loadError")}
-        onRetry={() => void refetch()}
-        className={layout === "desktop" ? "m-2" : "mt-2"}
-      />
-    );
-  }
-  const rows = data?.measurements ?? [];
-  if (rows.length === 0) {
-    return (
-      <EmptyState
-        variant="plain"
-        size="compact"
-        title={t("measurements.emptyDescription")}
-      />
-    );
-  }
-  // v1.11.5 — for SLEEP_DURATION the drill-down rows are stage segments;
-  // render the stage label + minutes instead of a bare value + unit.
-  const isSleep = type === "SLEEP_DURATION";
-  if (layout === "desktop") {
-    return (
-      <div className="bg-muted/40 space-y-1 p-2">
-        {rows.map((s) => (
-          <div
-            key={s.id}
-            className="flex items-center justify-between gap-3 px-2 py-1 text-xs"
-          >
-            <span className="text-muted-foreground tabular-nums">
-              {isSleep
-                ? sleepStageLabel(s.sleepStage, t)
-                : formatDateTime(s.measuredAt)}
-            </span>
-            <span className="font-medium tabular-nums">
-              {isSleep
-                ? formatDurationMinutes(s.value, t)
-                : `${s.value} ${unit}`}
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  }
   return (
-    <div className="bg-muted/40 mt-2 space-y-1 rounded-md p-2">
-      {rows.map((s) => (
-        <div
-          key={s.id}
-          className="flex items-center justify-between gap-2 px-1 py-1 text-xs"
+    <>
+      <EmptyState
+        icon={<Activity className="size-6" />}
+        title={
+          filtered
+            ? t("measurements.emptyFilteredTitle")
+            : t("measurements.emptyTitle")
+        }
+        description={
+          filtered
+            ? t("measurements.emptyFilteredDescription")
+            : t("measurements.emptyDescription")
+        }
+        action={
+          filtered ? (
+            <Button variant="outline" onClick={onResetFilter}>
+              {t("measurements.emptyResetFilter")}
+            </Button>
+          ) : onAddFirst ? (
+            <Button onClick={onAddFirst} data-slot="measurement-add-first">
+              <Plus className="h-4 w-4" />
+              {t("measurements.emptyAddFirst")}
+            </Button>
+          ) : undefined
+        }
+      />
+      {/* The one place in the app the asymmetry is spelled out. A delegate
+          who may add will look for the edit control beside the row they just
+          entered, so the list that carries the add button says once, in one
+          muted line, where the limit is. Every other hidden control stays
+          silent: the banner already names the mode. */}
+      {delegateName && (
+        <p
+          data-slot="delegate-add-only-note"
+          className="text-muted-foreground mx-auto max-w-prose text-center text-xs"
         >
-          <span className="text-muted-foreground tabular-nums">
-            {isSleep
-              ? sleepStageLabel(s.sleepStage, t)
-              : formatDateTime(s.measuredAt)}
-          </span>
-          <span className="font-medium tabular-nums">
-            {isSleep ? formatDurationMinutes(s.value, t) : `${s.value} ${unit}`}
-          </span>
-        </div>
-      ))}
+          {t("recordSharing.delegate.addOnlyNote", {
+            name: delegateName,
+          })}
+        </p>
+      )}
+    </>
+  );
+}
+
+function MeasurementListPagination({
+  page,
+  totalPages,
+  goToPage,
+}: {
+  page: number;
+  totalPages: number;
+  goToPage: (updater: (p: number) => number) => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <div className="flex items-center justify-between">
+      <span className="text-muted-foreground text-sm">
+        {t("measurements.pageInfo", {
+          page: String(page),
+          total: String(totalPages),
+        })}
+      </span>
+      <div className="flex gap-1">
+        <Button
+          variant="ghost"
+          size="icon-lg"
+          disabled={page <= 1}
+          onClick={() => goToPage((p) => p - 1)}
+          aria-label={t("measurements.previousPage")}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon-lg"
+          disabled={page >= totalPages}
+          onClick={() => goToPage((p) => p + 1)}
+          aria-label={t("measurements.nextPage")}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
     </div>
   );
 }
-
-/**
- * Sub-caption for a per-night sleep row: the row's value is the day's sleep,
- * main night plus naps, so the caption says how many naps it includes, and
- * the night's mid-sleep awakenings when present.
- */
-function SleepNightCaption({ m }: { m: Measurement }) {
-  const { t } = useTranslations();
-  const napCount = m.napCount ?? 0;
-  const awakenings = m.awakenings ?? 0;
-  const parts: string[] = [];
-  if (napCount > 0) {
-    parts.push(t("measurements.sleepNapCaption", { count: String(napCount) }));
-  }
-  if (awakenings > 0) {
-    parts.push(
-      t("measurements.sleepAwakeningsCaption", { count: String(awakenings) }),
-    );
-  }
-  if (parts.length === 0) return null;
-  return (
-    <span className="text-muted-foreground ml-2 text-xs font-normal">
-      {parts.join(" · ")}
-    </span>
-  );
-}
diff --git a/src/components/medications/dose-history-ledger.tsx b/src/components/medications/dose-history-ledger.tsx
index 1df7caeb2..dd39a842a 100644
--- a/src/components/medications/dose-history-ledger.tsx
+++ b/src/components/medications/dose-history-ledger.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * v1.15.18 WE — the Verlauf tab's dose-history ledger.
+ * The Verlauf tab's dose-history ledger.
  *
  * Renders the server-minted ledger (`GET /api/medications/[id]/dose-history`):
  * EVERY expected slot with its status (pünktlich / verspätet / übersprungen /
@@ -24,13 +24,13 @@
  *     (incl. backdated / off-schedule); an off-window take surfaces the
  *     "diesem Slot zuordnen?" nudge, pinning it onto a chosen slot via
  *     `forceSlotInstant` rather than orphaning it to an ad-hoc row;
- *   - v1.15.20: an ad-hoc row shows WHEN the dose would have been due
+ *   - an ad-hoc row shows WHEN the dose would have been due
  *     (`nearestSlot` subline) and — when that slot is still unserved — a
  *     kebab "Slot … zuordnen" action that pins the take onto it after a
  *     confirm that names the consequence ("zählt als verspätet"). A pinned
  *     slot row carries a quiet "zugeordnet" badge and the inverse
- *     "Zuordnung lösen" kebab action (`forceSlotInstant: null`). v1.16.0:
- *     the released row keeps USER_PIN provenance server-side (the dedup
+ *     "Zuordnung lösen" kebab action (`forceSlotInstant: null`). The
+ *     released row keeps USER_PIN provenance server-side (the dedup
  *     leaves it standalone) and reads as a plain ad-hoc row here — no
  *     badge, since it is no longer bound to a slot.
  *
@@ -39,85 +39,27 @@
  * the ledger uses the semantic feedback vocabulary on the row, not the card.
  */
 
-import { DayLink } from "@/components/day/day-link";
-import {
-  useActiveRecordName,
-  useRecordCapabilities,
-} from "@/hooks/use-record-capabilities";
-import { useCallback, useMemo, useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  AlertCircle,
-  AlertTriangle,
-  Check,
-  CircleCheck,
-  Link2,
-  Loader2,
-  MoreVertical,
-  Pencil,
-  Plus,
-  SkipForward,
-  Trash2,
-  Unlink,
-} from "lucide-react";
-import { toast } from "sonner";
-import { showErrorToast } from "@/lib/errors/error-toast";
+import { useState } from "react";
+import { Loader2, Plus } from "lucide-react";
 
+import { DayLink } from "@/components/day/day-link";
+import { LedgerAddDialog } from "@/components/medications/dose-history-add-dialog";
+import { IntakeEditDialog } from "@/components/medications/intake-edit-dialog";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  useTranslations,
-  useFormatters,
-  useDateFormatPreference,
-} from "@/lib/i18n/context";
+import { EmptyState } from "@/components/ui/empty-state";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import { formatDateWithWeekdaySmart } from "@/lib/date-format";
 import {
-  invalidateKeys,
-  medicationDependentKeys,
-  queryKeys,
-  refetchInactiveDailyReads,
-} from "@/lib/query-keys";
-import type { DoseHistoryStatus } from "@/lib/medications/scheduling/dose-history";
-import {
-  intakeToastOptions,
-  runUndoIntake,
-} from "@/components/medications/use-medication-intake";
-import { IntakeEditDialog } from "@/components/medications/intake-edit-dialog";
-import { LedgerAddDialog } from "@/components/medications/dose-history-add-dialog";
-import {
-  applyOptimisticSlotMark,
-  complianceFromLedger,
-  formatSlotDelta,
-  groupLedgerByDay,
-  isSlotActionable,
-  slotMarkRequestBody,
-  type LedgerPayload,
-  type LedgerRow,
-} from "@/components/medications/dose-history-ledger-compute";
-import { apiDelete, apiGet, apiPost, apiPut } from "@/lib/api/api-fetch";
-import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
-import { QueryErrorRow } from "@/components/ui/query-error-row";
-import { EmptyState } from "@/components/ui/empty-state";
+  useDateFormatPreference,
+  useFormatters,
+  useTranslations,
+} from "@/lib/i18n/context";
 
-const DAY_MS = 24 * 60 * 60 * 1000;
+import { DeleteRowConfirm, PinConfirm } from "./dose-history/ledger-confirms";
+import { LedgerRowItem } from "./dose-history/ledger-row-item";
+import { LedgerSummaryChart } from "./dose-history/ledger-summary-chart";
+import { useDoseHistoryLedger } from "./dose-history/use-dose-history-ledger";
 
 /** A schedule slot the add dialog offers for pinning. */
 export interface LedgerSchedule {
@@ -135,36 +77,6 @@ export interface DoseHistoryLedgerProps {
   windowDays?: number;
 }
 
-/** Status → semantic colour token + glyph. Mirrors the card status pill's
- * success / warning / destructive ramp so the surface reads as one vocabulary;
- * skipped + upcoming are calm muted, ad-hoc is the neutral-positive accent. */
-const STATUS_TONE: Record<DoseHistoryStatus, string> = {
-  taken_on_time: "text-success",
-  taken_late: "text-warning",
-  skipped: "text-muted-foreground",
-  missed: "text-destructive",
-  upcoming: "text-muted-foreground",
-  ad_hoc: "text-primary",
-};
-
-function StatusGlyph({ status }: { status: DoseHistoryStatus }) {
-  const cls = "size-3.5 shrink-0";
-  switch (status) {
-    case "taken_on_time":
-      return <CircleCheck aria-hidden="true" className={cls} />;
-    case "taken_late":
-      return <AlertCircle aria-hidden="true" className={cls} />;
-    case "missed":
-      return <AlertTriangle aria-hidden="true" className={cls} />;
-    case "ad_hoc":
-      return <Plus aria-hidden="true" className={cls} />;
-    case "skipped":
-      return <SkipForward aria-hidden="true" className={cls} />;
-    default:
-      return null;
-  }
-}
-
 export function DoseHistoryLedger({
   medicationId,
   medicationName,
@@ -174,21 +86,11 @@ export function DoseHistoryLedger({
   const { t, locale } = useTranslations();
   const fmt = useFormatters();
   const dateFormatPref = useDateFormatPreference();
-  const { user } = useAuth();
-  // v1.36.x — a delegate may record a dose, which is what "add" and the
-  // inline "mark taken" do. Editing, deleting, pinning and un-skipping an
-  // existing event are the owner's, so the row menu is absent for them.
+  // A delegate may record a dose, which is what "add" and the inline "mark
+  // taken" do. Editing, deleting, pinning and un-skipping an existing event
+  // are the owner's, so the row menu is absent for them.
   const { canWriteDomain } = useRecordCapabilities();
   const canAddIntake = canWriteDomain("medications");
-  // The record this ledger's writes land in, when it is not the caller's own.
-  // The two sibling intake paths in `use-medication-intake.ts` already drop
-  // Undo and name the record; this third one builds its own toast and missed
-  // both, so a delegate met an Undo the server refuses on every dose they
-  // marked — the most-encountered of the set.
-  const recordName = useActiveRecordName();
-  const queryClient = useQueryClient();
-  const timeZone = user?.timezone || DEFAULT_TIMEZONE;
-
   const [addOpen, setAddOpen] = useState(false);
   const [editingEvent, setEditingEvent] = useState<{
     id: string;
@@ -196,236 +98,26 @@ export function DoseHistoryLedger({
     skipped: boolean;
     scheduledFor: string | null;
   } | null>(null);
-  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
-  const [marking, setMarking] = useState<string | null>(null);
-  // v1.15.20 — the pending "Slot zuordnen" confirm: which intake to pin
-  // onto which slot. The confirm names the consequence (counts as late).
-  const [pendingPin, setPendingPin] = useState<{
-    eventId: string;
-    slotAt: string;
-  } | null>(null);
-
-  // The window is resolved when the request fires, not when the ledger
-  // mounts. A window pinned at mount made every refetch (including the one
-  // after adding an entry) ask for rows up to the moment the tab opened, so a
-  // dose recorded afterwards stayed invisible until a reload (#1028). Only
-  // `from` travels: the server's `to` defaults to its own now.
-  const queryKey = queryKeys.medicationDoseHistory(medicationId, windowDays);
-
-  const { data, isLoading, isError, error, refetch } = useQuery<LedgerPayload>({
+  const {
     queryKey,
-    queryFn: async () => {
-      const from = new Date(Date.now() - windowDays * DAY_MS).toISOString();
-      const search = new URLSearchParams({ from });
-      return apiGet<LedgerPayload>(
-        `/api/medications/${medicationId}/dose-history?${search.toString()}`,
-      );
-    },
-    staleTime: 15_000,
-  });
-
-  const compliance = useMemo(
-    () => (data ? complianceFromLedger(data.rows) : null),
-    [data],
-  );
-
-  const groups = useMemo(
-    () => (data ? groupLedgerByDay(data.rows, timeZone) : []),
-    [data, timeZone],
-  );
-
-  // Today's local day key — a missed slot from TODAY is still in active
-  // play (visible Genommen button); older missed days settle into the
-  // row kebab so the history reads calm.
-  const todayKey = useMemo(
-    () =>
-      new Intl.DateTimeFormat("en-CA", {
-        timeZone,
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-      }).format(new Date()),
-    [timeZone],
-  );
-
-  /**
-   * Genommen / Übersprungen on a pending / missed slot. The cached ledger is
-   * mutated optimistically (row status + the headline % flip in this paint),
-   * then the server write fires and the dependent-key invalidation reconciles.
-   * A failed write rolls the optimistic snapshot back + toasts; a successful
-   * one carries the same Undo action the medication cards offer (mirrors the
-   * C1/C2 pattern in `use-medication-intake.ts`).
-   */
-  const markSlot = useCallback(
-    async (row: LedgerRow, action: "taken" | "skipped") => {
-      if (marking || !isSlotActionable(row)) return;
-      setMarking(`${row.at}:${action}`);
-
-      const prev = queryClient.getQueryData<LedgerPayload>(queryKey);
-      if (prev) {
-        queryClient.setQueryData<LedgerPayload>(
-          queryKey,
-          applyOptimisticSlotMark(prev, row.at, action),
-        );
-      }
-
-      try {
-        // Pin the displayed slot so the server marks THAT dose (the canonical
-        // slot upsert), not a now-snap to the nearest one — and anchor
-        // `takenAt` on the same instant, matching the optimistic paint. The
-        // POST returns the created event; its id drives the Undo affordance
-        // (the same soft-delete route the cards use).
-        const created = await apiPost<{ id?: string } | undefined>(
-          `/api/medications/${medicationId}/intake`,
-          slotMarkRequestBody(row, action),
-        );
-        const eventId: string | undefined = created?.id;
-        toast.success(
-          t(
-            action === "skipped"
-              ? "medications.intakeToastSkipped"
-              : "medications.intakeToastTaken",
-            { name: medicationName },
-          ),
-          // The shared decision, not a fourth copy of it: name the record it
-          // landed in, and withhold an Undo the server would refuse there.
-          intakeToastOptions({
-            recordName,
-            eventId,
-            t,
-            onUndo: (id) =>
-              void runUndoIntake({
-                medication: { id: medicationId, name: medicationName },
-                eventId: id,
-                t,
-                queryClient,
-              }),
-          }),
-        );
-        await invalidateKeys(queryClient, [
-          ...medicationDependentKeys,
-          queryKey,
-        ]);
-        // The ledger also invalidates its own window key above; the daily
-        // reads (Today hero + dashboard) are unmounted behind the detail
-        // page, so force their inactive refetch too (v1.32.19).
-        await refetchInactiveDailyReads(queryClient);
-      } catch (failure) {
-        if (prev) queryClient.setQueryData(queryKey, prev);
-        showErrorToast(
-          t("medications.intakeToastFailed", { name: medicationName }),
-          { cause: failure },
-        );
-      } finally {
-        setMarking(null);
-      }
-    },
-    [
-      marking,
-      medicationId,
-      medicationName,
-      queryClient,
-      queryKey,
-      recordName,
-      t,
-    ],
-  );
-
-  /**
-   * Flip an existing intake between Übersprungen and Genommen from the row
-   * kebab. Same `PUT intake/[eventId]` contract the edit dialog uses; a
-   * skipped→taken flip anchors `takenAt` on the slot instant (a past slot)
-   * rather than "now".
-   */
-  const toggleIntakeSkipped = useCallback(
-    async (intake: {
-      id: string;
-      skipped: boolean;
-      scheduledFor: string | null;
-    }) => {
-      try {
-        const body = intake.skipped
-          ? {
-              skipped: false,
-              takenAt: intake.scheduledFor ?? new Date().toISOString(),
-            }
-          : { skipped: true, takenAt: null };
-        await apiPut(
-          `/api/medications/${medicationId}/intake/${intake.id}`,
-          body,
-        );
-        await invalidateKeys(queryClient, [
-          ...medicationDependentKeys,
-          queryKey,
-        ]);
-        // The ledger also invalidates its own window key above; the daily
-        // reads (Today hero + dashboard) are unmounted behind the detail
-        // page, so force their inactive refetch too (v1.32.19).
-        await refetchInactiveDailyReads(queryClient);
-        toast.success(t("medications.detail.intake.edit.savedToast"));
-      } catch (failure) {
-        showErrorToast(t("medications.detail.intake.edit.failed"), {
-          cause: failure,
-        });
-      }
-    },
-    [medicationId, queryClient, queryKey, t],
-  );
-
-  /**
-   * v1.15.20 — pin an ad-hoc take onto a scheduled slot (`forceSlotInstant`)
-   * or release a pinned binding (`forceSlotInstant: null` → the server
-   * re-attributes by band, usually back to ad-hoc). Same PUT contract the
-   * edit dialog uses; the authoritative refetch re-renders the moved row.
-   */
-  const setAttribution = useCallback(
-    async (eventId: string, slotAtIso: string | null) => {
-      try {
-        await apiPut(`/api/medications/${medicationId}/intake/${eventId}`, {
-          forceSlotInstant: slotAtIso,
-        });
-        toast.success(
-          t(
-            slotAtIso
-              ? "medications.detail.verlauf.pin.pinnedToast"
-              : "medications.detail.verlauf.pin.unpinnedToast",
-          ),
-        );
-        await invalidateKeys(queryClient, [
-          ...medicationDependentKeys,
-          queryKey,
-        ]);
-        // The ledger also invalidates its own window key above; the daily
-        // reads (Today hero + dashboard) are unmounted behind the detail
-        // page, so force their inactive refetch too (v1.32.19).
-        await refetchInactiveDailyReads(queryClient);
-      } catch (failure) {
-        showErrorToast(t("medications.detail.intake.edit.failed"), {
-          cause: failure,
-        });
-      }
-    },
-    [medicationId, queryClient, queryKey, t],
-  );
-
-  async function confirmRowDelete() {
-    if (!pendingDeleteId) return;
-    const id = pendingDeleteId;
-    setPendingDeleteId(null);
-    try {
-      await apiDelete(`/api/medications/${medicationId}/intake/${id}`);
-      toast.success(t("medications.detail.intake.deleteRow.toast"));
-      await invalidateKeys(queryClient, [...medicationDependentKeys, queryKey]);
-      // The ledger also invalidates its own window key above; the daily
-      // reads (Today hero + dashboard) are unmounted behind the detail
-      // page, so force their inactive refetch too (v1.32.19).
-      await refetchInactiveDailyReads(queryClient);
-    } catch (failure) {
-      showErrorToast(t("medications.detail.intake.deleteRow.failed"), {
-        cause: failure,
-      });
-    }
-  }
+    data,
+    isLoading,
+    isError,
+    error,
+    refetch,
+    compliance,
+    groups,
+    todayKey,
+    marking,
+    markSlot,
+    toggleIntakeSkipped,
+    setAttribution,
+    pendingDeleteId,
+    setPendingDeleteId,
+    confirmRowDelete,
+    pendingPin,
+    setPendingPin,
+  } = useDoseHistoryLedger({ medicationId, medicationName, windowDays });
 
   return (
     <div className="space-y-4" data-slot="dose-history-ledger">
@@ -499,7 +191,7 @@ export function DoseHistoryLedger({
                   the DEVICE zone and could shift the heading a day when
                   browser ≠ profile zone; the day-key label renders
                   UTC-pinned instead (zone-independent, weekday included). */}
-              {/* v1.42 — the day heading opens the whole day: did I take
+              {/* The day heading opens the whole day: did I take
                   it, and how was that day otherwise. Rows keep their own
                   actions. A planned future slot gets no link. */}
               <DayLink date={group.dayKey}>
@@ -569,484 +261,3 @@ export function DoseHistoryLedger({
     </div>
   );
 }
-
-/**
- * One ledger row: time + status (colour + glyph + text) + (when an intake is
- * attributed) its real take time, plus the row actions.
- *
- * Action shape (v1.15.20): an actionable slot that is still in play
- * (upcoming, or missed TODAY) carries exactly ONE visible [Genommen] button —
- * label visible on every viewport — plus the overflow kebab (Übersprungen).
- * Every settled row (taken / skipped / a past missed day / ad-hoc) carries
- * ONLY the kebab: Bearbeiten, the Übersprungen↔Genommen toggle, Löschen —
- * and, for a past missed slot, the Genommen / Übersprungen backfill marks.
- *
- * v1.36.x — exported for the delegated-affordance suite. The row's capability
- * gating is the interesting part and the ledger around it needs a payload, a
- * medication and a query client to paint one row.
- */
-export function LedgerRowItem({
-  row,
-  marking,
-  isToday,
-  onMark,
-  onToggleSkipped,
-  onEdit,
-  onDelete,
-  onPin,
-  onUnpin,
-}: {
-  row: LedgerRow;
-  marking: string | null;
-  isToday: boolean;
-  onMark: (row: LedgerRow, action: "taken" | "skipped") => void;
-  onToggleSkipped: (intake: {
-    id: string;
-    skipped: boolean;
-    scheduledFor: string | null;
-  }) => void;
-  onEdit: (event: {
-    id: string;
-    takenAt: string | null;
-    skipped: boolean;
-    scheduledFor: string | null;
-  }) => void;
-  onDelete: (id: string) => void;
-  /** Open the pin confirm for an ad-hoc take onto the named slot (ISO). */
-  onPin: (eventId: string, slotAt: string) => void;
-  /** Release a pinned binding (server re-attributes by band). */
-  onUnpin: (eventId: string) => void;
-}) {
-  const { t } = useTranslations();
-  const { canWriteDomain, canManageDomain } = useRecordCapabilities();
-  const canAddIntake = canWriteDomain("medications");
-  const canManageMedications = canManageDomain("medications");
-  const fmt = useFormatters();
-
-  const actionable = isSlotActionable(row);
-  // A missed slot from an earlier day stays markable, but only through the
-  // kebab — the visible button is reserved for doses still in play.
-  const showTakenButton = actionable && (row.status === "upcoming" || isToday);
-  const intake = row.intake;
-  const takeBusy = marking === `${row.at}:taken`;
-  const skipBusy = marking === `${row.at}:skipped`;
-
-  // The leading time label: the slot's HH:mm for a slot row, else the ad-hoc
-  // take's real clock time.
-  const timeLabel =
-    row.timeOfDay ?? fmt.time(new Date(intake?.takenAt ?? row.at));
-
-  // When a take lands away from its slot, show both anchors so the row reads
-  // "geplant 07:00 · genommen 11:29".
-  const showTakeDetail =
-    row.kind === "slot" &&
-    intake?.takenAt &&
-    (row.status === "taken_on_time" || row.status === "taken_late");
-
-  // v1.15.20 — an ad-hoc take with a due-context shows WHEN the dose would
-  // have been due; the pin action additionally needs the slot unserved and a
-  // real persisted event to re-anchor.
-  const dueContext =
-    row.kind === "ad_hoc" && intake?.takenAt && row.nearestSlot
-      ? row.nearestSlot
-      : null;
-  const canPin = Boolean(dueContext && !dueContext.filled && intake?.id);
-  const canUnpin = Boolean(row.kind === "slot" && row.pinned && intake?.id);
-
-  return (
-    <li
-      className="flex items-center justify-between gap-2 px-3 py-2"
-      data-slot="ledger-row"
-      data-status={row.status}
-      data-kind={row.kind}
-    >
-      <div className="min-w-0 space-y-0.5">
-        <div className="flex items-center gap-2">
-          <span className="text-foreground text-sm font-medium tabular-nums">
-            {timeLabel}
-          </span>
-          <span
-            className={`inline-flex items-center gap-1 text-xs font-medium ${STATUS_TONE[row.status]}`}
-            data-slot="ledger-status"
-          >
-            <StatusGlyph status={row.status} />
-            {t(`medications.detail.verlauf.status.${row.status}`)}
-          </span>
-          {row.kind === "ad_hoc" && (
-            <Badge variant="outline" className="text-2xs">
-              {t("medications.detail.verlauf.adHocTag")}
-            </Badge>
-          )}
-          {/* v1.16.0 — the "zugeordnet" badge only when the row is actually
-              bound to a slot. A released ("Zuordnung lösen") USER_PIN take
-              surfaces as an ad-hoc row that also carries `pinned`; badging
-              it "zugeordnet" would claim the binding the user just released. */}
-          {row.kind === "slot" && row.pinned && (
-            <Badge
-              variant="outline"
-              className="text-2xs"
-              data-slot="ledger-pinned-badge"
-            >
-              {t("medications.detail.verlauf.pin.pinnedTag")}
-            </Badge>
-          )}
-        </div>
-        {showTakeDetail && (
-          <p className="text-muted-foreground text-xs">
-            {t("medications.detail.verlauf.takenDetail", {
-              planned: row.timeOfDay ?? fmt.time(new Date(row.at)),
-              taken: fmt.time(new Date(intake!.takenAt!)),
-            })}
-          </p>
-        )}
-        {/* v1.16.4 — quiet per-intake dose override note. Only rows whose
-            take recorded a deviating dose carry one; the configured dose
-            stays implicit, so the ledger's rhythm is undisturbed. */}
-        {intake?.doseTaken && (
-          <p
-            className="text-muted-foreground text-xs"
-            data-slot="ledger-dose-taken"
-          >
-            {t("medications.detail.verlauf.doseTaken", {
-              dose: intake.doseTaken,
-            })}
-          </p>
-        )}
-        {dueContext && (
-          <p
-            className="text-muted-foreground text-xs"
-            data-slot="ledger-due-context"
-          >
-            {t("medications.detail.verlauf.pin.dueContext", {
-              time: fmt.time(new Date(dueContext.at)),
-              delta: formatSlotDelta(intake!.takenAt!, dueContext.at),
-            })}
-          </p>
-        )}
-      </div>
-
-      <div className="flex shrink-0 items-center gap-1">
-        {showTakenButton && canAddIntake && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => onMark(row, "taken")}
-            disabled={takeBusy || skipBusy}
-            aria-busy={takeBusy || undefined}
-            className="min-h-9"
-            data-slot="ledger-mark-taken"
-          >
-            {takeBusy ? (
-              <Loader2
-                aria-hidden="true"
-                className="size-4 animate-spin motion-reduce:animate-none"
-              />
-            ) : (
-              <Check aria-hidden="true" className="size-4" />
-            )}
-            {t("medications.detail.verlauf.markTaken")}
-          </Button>
-        )}
-        {/* v1.36.x — the other half of the same admitted verb. Marking a dose
-            taken OR skipped is one capability, and the medication card offers
-            both; this ledger offered a delegate only the first, because skip
-            lives in the kebab and the kebab is owner-only (it also holds edit,
-            re-attribute and delete). Rather than mix admitted and withheld
-            items in one menu, a delegate gets skip as its own control beside
-            take, which is the shape the card already uses. The owner keeps it
-            where it was. */}
-        {showTakenButton && canAddIntake && !canManageMedications && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => onMark(row, "skipped")}
-            disabled={takeBusy || skipBusy}
-            aria-busy={skipBusy || undefined}
-            className="min-h-9"
-            data-slot="ledger-mark-skipped"
-          >
-            {skipBusy ? (
-              <Loader2
-                aria-hidden="true"
-                className="size-4 animate-spin motion-reduce:animate-none"
-              />
-            ) : (
-              <SkipForward aria-hidden="true" className="size-4" />
-            )}
-            {t("medications.detail.verlauf.markSkipped")}
-          </Button>
-        )}
-        {canManageMedications && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-                aria-label={t("medications.detail.verlauf.rowActionsLabel", {
-                  time: timeLabel,
-                })}
-                data-slot="ledger-row-menu"
-              >
-                <MoreVertical aria-hidden="true" className="size-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              data-slot="ledger-row-menu-content"
-            >
-              {actionable && !showTakenButton && (
-                <DropdownMenuItem
-                  onClick={() => onMark(row, "taken")}
-                  data-slot="ledger-menu-taken"
-                >
-                  <Check aria-hidden="true" className="mr-2 size-4" />
-                  {t("medications.detail.verlauf.markTaken")}
-                </DropdownMenuItem>
-              )}
-              {actionable && (
-                <DropdownMenuItem
-                  onClick={() => onMark(row, "skipped")}
-                  data-slot="ledger-mark-skipped"
-                >
-                  {skipBusy ? (
-                    <Loader2
-                      aria-hidden="true"
-                      className="mr-2 size-4 animate-spin motion-reduce:animate-none"
-                    />
-                  ) : (
-                    <SkipForward aria-hidden="true" className="mr-2 size-4" />
-                  )}
-                  {t("medications.detail.verlauf.markSkipped")}
-                </DropdownMenuItem>
-              )}
-              {canPin && (
-                <DropdownMenuItem
-                  onClick={() => onPin(intake!.id as string, dueContext!.at)}
-                  data-slot="ledger-pin"
-                >
-                  <Link2 aria-hidden="true" className="mr-2 size-4" />
-                  {t("medications.detail.verlauf.pin.action", {
-                    time: fmt.time(new Date(dueContext!.at)),
-                  })}
-                </DropdownMenuItem>
-              )}
-              {canUnpin && (
-                <DropdownMenuItem
-                  onClick={() => onUnpin(intake!.id as string)}
-                  data-slot="ledger-unpin"
-                >
-                  <Unlink aria-hidden="true" className="mr-2 size-4" />
-                  {t("medications.detail.verlauf.pin.release")}
-                </DropdownMenuItem>
-              )}
-              {intake?.id && (
-                <>
-                  <DropdownMenuItem
-                    onClick={() =>
-                      onEdit({
-                        id: intake.id as string,
-                        takenAt: intake.takenAt,
-                        skipped: intake.skipped,
-                        scheduledFor: intake.scheduledFor,
-                      })
-                    }
-                    data-slot="ledger-edit"
-                  >
-                    <Pencil aria-hidden="true" className="mr-2 size-4" />
-                    {t("medications.detail.intake.rowActions.edit")}
-                  </DropdownMenuItem>
-                  {(row.status === "skipped" ||
-                    row.status === "taken_on_time" ||
-                    row.status === "taken_late") && (
-                    <DropdownMenuItem
-                      onClick={() =>
-                        onToggleSkipped({
-                          id: intake.id as string,
-                          skipped: intake.skipped,
-                          scheduledFor: intake.scheduledFor,
-                        })
-                      }
-                      data-slot="ledger-toggle-skipped"
-                    >
-                      {intake.skipped ? (
-                        <Check aria-hidden="true" className="mr-2 size-4" />
-                      ) : (
-                        <SkipForward
-                          aria-hidden="true"
-                          className="mr-2 size-4"
-                        />
-                      )}
-                      {intake.skipped
-                        ? t("medications.detail.verlauf.markAsTaken")
-                        : t("medications.detail.verlauf.markAsSkipped")}
-                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onClick={() => onDelete(intake.id as string)}
-                    data-slot="ledger-delete"
-                  >
-                    <Trash2 aria-hidden="true" className="mr-2 size-4" />
-                    {t("medications.detail.intake.rowActions.delete")}
-                  </DropdownMenuItem>
-                </>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-    </li>
-  );
-}
-
-/**
- * Compact took / skipped history chart — a single proportional bar split into
- * on-time / late / missed, with the headline rate beside it. No Recharts: a
- * three-segment CSS bar is calmer + lighter for a summary this small, and it
- * tracks the ledger the user is already reading.
- */
-function LedgerSummaryChart({
-  compliance,
-}: {
-  compliance: NonNullable<ReturnType<typeof complianceFromLedger>>;
-}) {
-  const { t } = useTranslations();
-  const fmt = useFormatters();
-  const { takenOnTime, takenLate, missed, denominator, rate } = compliance;
-  const pct = (n: number) => (denominator > 0 ? (n / denominator) * 100 : 0);
-
-  return (
-    <div className="min-w-0 flex-1 space-y-1.5" data-slot="ledger-summary">
-      <div className="flex items-baseline justify-between gap-2">
-        <span className="text-muted-foreground text-xs font-medium">
-          {t("medications.detail.verlauf.adherenceLabel")}
-        </span>
-        <span className="text-foreground text-sm font-semibold tabular-nums">
-          {rate !== null ? `${fmt.number(rate)}%` : "—"}
-        </span>
-      </div>
-      <div
-        className="bg-muted flex h-2 overflow-hidden rounded-full"
-        role="img"
-        aria-label={t("medications.detail.verlauf.adherenceBarLabel", {
-          onTime: takenOnTime,
-          late: takenLate,
-          missed,
-        })}
-      >
-        <div
-          className="bg-success h-full"
-          style={{ width: `${pct(takenOnTime)}%` }}
-        />
-        <div
-          className="bg-warning h-full"
-          style={{ width: `${pct(takenLate)}%` }}
-        />
-        <div
-          className="bg-destructive h-full"
-          style={{ width: `${pct(missed)}%` }}
-        />
-      </div>
-      <div className="text-muted-foreground flex flex-wrap gap-x-3 gap-y-0.5 text-xs">
-        <span className="text-success">
-          {t("medications.detail.verlauf.status.taken_on_time")}: {takenOnTime}
-        </span>
-        <span className="text-warning">
-          {t("medications.detail.verlauf.status.taken_late")}: {takenLate}
-        </span>
-        <span className="text-destructive">
-          {t("medications.detail.verlauf.status.missed")}: {missed}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-/**
- * v1.15.20 — the "Slot zuordnen" confirm. Pinning is a deliberate, visible
- * decision, so the dialog names the consequence before the write: the dose
- * will count as taken LATE for that slot (the rate is served, never
- * flattered) and the row will carry the "zugeordnet" badge until released.
- */
-function PinConfirm({
-  slotLabel,
-  onConfirm,
-  onCancel,
-}: {
-  slotLabel: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
-  const { t } = useTranslations();
-  return (
-    <AlertDialog open onOpenChange={(open) => !open && onCancel()}>
-      <AlertDialogContent data-slot="ledger-pin-confirm">
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {t("medications.detail.verlauf.pin.confirmTitle", {
-              time: slotLabel,
-            })}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            {t("medications.detail.verlauf.pin.confirmBody")}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>
-            {t("medications.detail.verlauf.pin.confirmCancel")}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={(e) => {
-              e.preventDefault();
-              onConfirm();
-            }}
-            data-slot="ledger-pin-confirm-action"
-          >
-            {t("medications.detail.verlauf.pin.confirmAction")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
-/** Lightweight single-row delete confirm — the ledger does not need the full
- * bulk-delete state machine, just a guard. */
-function DeleteRowConfirm({
-  onConfirm,
-  onCancel,
-}: {
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
-  const { t } = useTranslations();
-  return (
-    <AlertDialog open onOpenChange={(open) => !open && onCancel()}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            {t("medications.detail.intake.deleteRow.confirmTitle")}
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            {t("medications.detail.intake.deleteRow.confirmBody")}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>
-            {t("medications.detail.intake.bulkDelete.cancelButton")}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={(e) => {
-              e.preventDefault();
-              onConfirm();
-            }}
-            className="bg-destructive dark:bg-destructive/60 hover:bg-destructive/90 text-white"
-          >
-            {t("medications.detail.intake.deleteRow.confirmAction")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
diff --git a/src/components/medications/dose-history/ledger-confirms.tsx b/src/components/medications/dose-history/ledger-confirms.tsx
new file mode 100644
index 000000000..f76091211
--- /dev/null
+++ b/src/components/medications/dose-history/ledger-confirms.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useTranslations } from "@/lib/i18n/context";
+
+/**
+ * The "Slot zuordnen" confirm. Pinning is a deliberate, visible
+ * decision, so the dialog names the consequence before the write: the dose
+ * will count as taken LATE for that slot (the rate is served, never
+ * flattered) and the row will carry the "zugeordnet" badge until released.
+ */
+export function PinConfirm({
+  slotLabel,
+  onConfirm,
+  onCancel,
+}: {
+  slotLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <AlertDialog open onOpenChange={(open) => !open && onCancel()}>
+      <AlertDialogContent data-slot="ledger-pin-confirm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("medications.detail.verlauf.pin.confirmTitle", {
+              time: slotLabel,
+            })}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("medications.detail.verlauf.pin.confirmBody")}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            {t("medications.detail.verlauf.pin.confirmCancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            data-slot="ledger-pin-confirm-action"
+          >
+            {t("medications.detail.verlauf.pin.confirmAction")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+/** Lightweight single-row delete confirm — the ledger does not need the full
+ * bulk-delete state machine, just a guard. */
+export function DeleteRowConfirm({
+  onConfirm,
+  onCancel,
+}: {
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <AlertDialog open onOpenChange={(open) => !open && onCancel()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("medications.detail.intake.deleteRow.confirmTitle")}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("medications.detail.intake.deleteRow.confirmBody")}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            {t("medications.detail.intake.bulkDelete.cancelButton")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            className="bg-destructive dark:bg-destructive/60 hover:bg-destructive/90 text-white"
+          >
+            {t("medications.detail.intake.deleteRow.confirmAction")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/medications/dose-history/ledger-row-item.tsx b/src/components/medications/dose-history/ledger-row-item.tsx
new file mode 100644
index 000000000..80e4cd96f
--- /dev/null
+++ b/src/components/medications/dose-history/ledger-row-item.tsx
@@ -0,0 +1,451 @@
+"use client";
+
+import {
+  AlertCircle,
+  AlertTriangle,
+  Check,
+  CircleCheck,
+  Link2,
+  Loader2,
+  MoreVertical,
+  Pencil,
+  Plus,
+  SkipForward,
+  Trash2,
+  Unlink,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { DoseHistoryStatus } from "@/lib/medications/scheduling/dose-history";
+
+import {
+  formatSlotDelta,
+  isSlotActionable,
+  type LedgerRow,
+} from "../dose-history-ledger-compute";
+
+/** Status → semantic colour token + glyph. Mirrors the card status pill's
+ * success / warning / destructive ramp so the surface reads as one vocabulary;
+ * skipped + upcoming are calm muted, ad-hoc is the neutral-positive accent. */
+const STATUS_TONE: Record<DoseHistoryStatus, string> = {
+  taken_on_time: "text-success",
+  taken_late: "text-warning",
+  skipped: "text-muted-foreground",
+  missed: "text-destructive",
+  upcoming: "text-muted-foreground",
+  ad_hoc: "text-primary",
+};
+
+function StatusGlyph({ status }: { status: DoseHistoryStatus }) {
+  const cls = "size-3.5 shrink-0";
+  switch (status) {
+    case "taken_on_time":
+      return <CircleCheck aria-hidden="true" className={cls} />;
+    case "taken_late":
+      return <AlertCircle aria-hidden="true" className={cls} />;
+    case "missed":
+      return <AlertTriangle aria-hidden="true" className={cls} />;
+    case "ad_hoc":
+      return <Plus aria-hidden="true" className={cls} />;
+    case "skipped":
+      return <SkipForward aria-hidden="true" className={cls} />;
+    default:
+      return null;
+  }
+}
+
+interface LedgerRowItemProps {
+  row: LedgerRow;
+  marking: string | null;
+  isToday: boolean;
+  onMark: (row: LedgerRow, action: "taken" | "skipped") => void;
+  onToggleSkipped: (intake: {
+    id: string;
+    skipped: boolean;
+    scheduledFor: string | null;
+  }) => void;
+  onEdit: (event: {
+    id: string;
+    takenAt: string | null;
+    skipped: boolean;
+    scheduledFor: string | null;
+  }) => void;
+  onDelete: (id: string) => void;
+  /** Open the pin confirm for an ad-hoc take onto the named slot (ISO). */
+  onPin: (eventId: string, slotAt: string) => void;
+  /** Release a pinned binding (server re-attributes by band). */
+  onUnpin: (eventId: string) => void;
+}
+
+/**
+ * One ledger row: time + status (colour + glyph + text) + (when an intake is
+ * attributed) its real take time, plus the row actions.
+ *
+ * Action shape: an actionable slot that is still in play
+ * (upcoming, or missed TODAY) carries exactly ONE visible [Genommen] button —
+ * label visible on every viewport — plus the overflow kebab (Übersprungen).
+ * Every settled row (taken / skipped / a past missed day / ad-hoc) carries
+ * ONLY the kebab: Bearbeiten, the Übersprungen↔Genommen toggle, Löschen —
+ * and, for a past missed slot, the Genommen / Übersprungen backfill marks.
+ *
+ * .x — exported for the delegated-affordance suite. The row's capability
+ * gating is the interesting part and the ledger around it needs a payload, a
+ * medication and a query client to paint one row.
+ */
+export function LedgerRowItem({
+  row,
+  marking,
+  isToday,
+  onMark,
+  onToggleSkipped,
+  onEdit,
+  onDelete,
+  onPin,
+  onUnpin,
+}: LedgerRowItemProps) {
+  const { t } = useTranslations();
+  const { canWriteDomain, canManageDomain } = useRecordCapabilities();
+  const canAddIntake = canWriteDomain("medications");
+  const canManageMedications = canManageDomain("medications");
+  const fmt = useFormatters();
+
+  const actionable = isSlotActionable(row);
+  // A missed slot from an earlier day stays markable, but only through the
+  // kebab — the visible button is reserved for doses still in play.
+  const showTakenButton = actionable && (row.status === "upcoming" || isToday);
+  const intake = row.intake;
+  const takeBusy = marking === `${row.at}:taken`;
+  const skipBusy = marking === `${row.at}:skipped`;
+
+  // The leading time label: the slot's HH:mm for a slot row, else the ad-hoc
+  // take's real clock time.
+  const timeLabel =
+    row.timeOfDay ?? fmt.time(new Date(intake?.takenAt ?? row.at));
+
+  // When a take lands away from its slot, show both anchors so the row reads
+  // "geplant 07:00 · genommen 11:29".
+  const showTakeDetail =
+    row.kind === "slot" &&
+    intake?.takenAt &&
+    (row.status === "taken_on_time" || row.status === "taken_late");
+
+  // An ad-hoc take with a due-context shows WHEN the dose would
+  // have been due; the pin action additionally needs the slot unserved and a
+  // real persisted event to re-anchor.
+  const dueContext =
+    row.kind === "ad_hoc" && intake?.takenAt && row.nearestSlot
+      ? row.nearestSlot
+      : null;
+  const canPin = Boolean(dueContext && !dueContext.filled && intake?.id);
+  const canUnpin = Boolean(row.kind === "slot" && row.pinned && intake?.id);
+
+  return (
+    <li
+      className="flex items-center justify-between gap-2 px-3 py-2"
+      data-slot="ledger-row"
+      data-status={row.status}
+      data-kind={row.kind}
+    >
+      <div className="min-w-0 space-y-0.5">
+        <div className="flex items-center gap-2">
+          <span className="text-foreground text-sm font-medium tabular-nums">
+            {timeLabel}
+          </span>
+          <span
+            className={`inline-flex items-center gap-1 text-xs font-medium ${STATUS_TONE[row.status]}`}
+            data-slot="ledger-status"
+          >
+            <StatusGlyph status={row.status} />
+            {t(`medications.detail.verlauf.status.${row.status}`)}
+          </span>
+          {row.kind === "ad_hoc" && (
+            <Badge variant="outline" className="text-2xs">
+              {t("medications.detail.verlauf.adHocTag")}
+            </Badge>
+          )}
+          {/* The "zugeordnet" badge only when the row is actually
+              bound to a slot. A released ("Zuordnung lösen") USER_PIN take
+              surfaces as an ad-hoc row that also carries `pinned`; badging
+              it "zugeordnet" would claim the binding the user just released. */}
+          {row.kind === "slot" && row.pinned && (
+            <Badge
+              variant="outline"
+              className="text-2xs"
+              data-slot="ledger-pinned-badge"
+            >
+              {t("medications.detail.verlauf.pin.pinnedTag")}
+            </Badge>
+          )}
+        </div>
+        {showTakeDetail && (
+          <p className="text-muted-foreground text-xs">
+            {t("medications.detail.verlauf.takenDetail", {
+              planned: row.timeOfDay ?? fmt.time(new Date(row.at)),
+              taken: fmt.time(new Date(intake!.takenAt!)),
+            })}
+          </p>
+        )}
+        {/* Quiet per-intake dose override note. Only rows whose
+            take recorded a deviating dose carry one; the configured dose
+            stays implicit, so the ledger's rhythm is undisturbed. */}
+        {intake?.doseTaken && (
+          <p
+            className="text-muted-foreground text-xs"
+            data-slot="ledger-dose-taken"
+          >
+            {t("medications.detail.verlauf.doseTaken", {
+              dose: intake.doseTaken,
+            })}
+          </p>
+        )}
+        {dueContext && (
+          <p
+            className="text-muted-foreground text-xs"
+            data-slot="ledger-due-context"
+          >
+            {t("medications.detail.verlauf.pin.dueContext", {
+              time: fmt.time(new Date(dueContext.at)),
+              delta: formatSlotDelta(intake!.takenAt!, dueContext.at),
+            })}
+          </p>
+        )}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1">
+        {showTakenButton && canAddIntake && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onMark(row, "taken")}
+            disabled={takeBusy || skipBusy}
+            aria-busy={takeBusy || undefined}
+            className="min-h-9"
+            data-slot="ledger-mark-taken"
+          >
+            {takeBusy ? (
+              <Loader2
+                aria-hidden="true"
+                className="size-4 animate-spin motion-reduce:animate-none"
+              />
+            ) : (
+              <Check aria-hidden="true" className="size-4" />
+            )}
+            {t("medications.detail.verlauf.markTaken")}
+          </Button>
+        )}
+        {/* .x — the other half of the same admitted verb. Marking a dose
+            taken OR skipped is one capability, and the medication card offers
+            both; this ledger offered a delegate only the first, because skip
+            lives in the kebab and the kebab is owner-only (it also holds edit,
+            re-attribute and delete). Rather than mix admitted and withheld
+            items in one menu, a delegate gets skip as its own control beside
+            take, which is the shape the card already uses. The owner keeps it
+            where it was. */}
+        {showTakenButton && canAddIntake && !canManageMedications && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onMark(row, "skipped")}
+            disabled={takeBusy || skipBusy}
+            aria-busy={skipBusy || undefined}
+            className="min-h-9"
+            data-slot="ledger-mark-skipped"
+          >
+            {skipBusy ? (
+              <Loader2
+                aria-hidden="true"
+                className="size-4 animate-spin motion-reduce:animate-none"
+              />
+            ) : (
+              <SkipForward aria-hidden="true" className="size-4" />
+            )}
+            {t("medications.detail.verlauf.markSkipped")}
+          </Button>
+        )}
+        {canManageMedications && (
+          <LedgerRowMenu
+            row={row}
+            actionable={actionable}
+            showTakenButton={showTakenButton}
+            skipBusy={skipBusy}
+            canPin={canPin}
+            canUnpin={canUnpin}
+            dueContext={dueContext}
+            timeLabel={timeLabel}
+            onMark={onMark}
+            onToggleSkipped={onToggleSkipped}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            onPin={onPin}
+            onUnpin={onUnpin}
+          />
+        )}
+      </div>
+    </li>
+  );
+}
+
+/**
+ * The owner's row menu: the backfill marks for a slot no longer in play,
+ * pin and release, edit, the skipped/taken toggle, delete.
+ */
+function LedgerRowMenu({
+  row,
+  actionable,
+  showTakenButton,
+  skipBusy,
+  canPin,
+  canUnpin,
+  dueContext,
+  timeLabel,
+  onMark,
+  onToggleSkipped,
+  onEdit,
+  onDelete,
+  onPin,
+  onUnpin,
+}: Pick<
+  LedgerRowItemProps,
+  | "row"
+  | "onMark"
+  | "onToggleSkipped"
+  | "onEdit"
+  | "onDelete"
+  | "onPin"
+  | "onUnpin"
+> & {
+  actionable: boolean;
+  showTakenButton: boolean;
+  skipBusy: boolean;
+  canPin: boolean;
+  canUnpin: boolean;
+  dueContext: LedgerRow["nearestSlot"] | null;
+  timeLabel: string;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const intake = row.intake;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+          aria-label={t("medications.detail.verlauf.rowActionsLabel", {
+            time: timeLabel,
+          })}
+          data-slot="ledger-row-menu"
+        >
+          <MoreVertical aria-hidden="true" className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" data-slot="ledger-row-menu-content">
+        {actionable && !showTakenButton && (
+          <DropdownMenuItem
+            onClick={() => onMark(row, "taken")}
+            data-slot="ledger-menu-taken"
+          >
+            <Check aria-hidden="true" className="mr-2 size-4" />
+            {t("medications.detail.verlauf.markTaken")}
+          </DropdownMenuItem>
+        )}
+        {actionable && (
+          <DropdownMenuItem
+            onClick={() => onMark(row, "skipped")}
+            data-slot="ledger-mark-skipped"
+          >
+            {skipBusy ? (
+              <Loader2
+                aria-hidden="true"
+                className="mr-2 size-4 animate-spin motion-reduce:animate-none"
+              />
+            ) : (
+              <SkipForward aria-hidden="true" className="mr-2 size-4" />
+            )}
+            {t("medications.detail.verlauf.markSkipped")}
+          </DropdownMenuItem>
+        )}
+        {canPin && (
+          <DropdownMenuItem
+            onClick={() => onPin(intake!.id as string, dueContext!.at)}
+            data-slot="ledger-pin"
+          >
+            <Link2 aria-hidden="true" className="mr-2 size-4" />
+            {t("medications.detail.verlauf.pin.action", {
+              time: fmt.time(new Date(dueContext!.at)),
+            })}
+          </DropdownMenuItem>
+        )}
+        {canUnpin && (
+          <DropdownMenuItem
+            onClick={() => onUnpin(intake!.id as string)}
+            data-slot="ledger-unpin"
+          >
+            <Unlink aria-hidden="true" className="mr-2 size-4" />
+            {t("medications.detail.verlauf.pin.release")}
+          </DropdownMenuItem>
+        )}
+        {intake?.id && (
+          <>
+            <DropdownMenuItem
+              onClick={() =>
+                onEdit({
+                  id: intake.id as string,
+                  takenAt: intake.takenAt,
+                  skipped: intake.skipped,
+                  scheduledFor: intake.scheduledFor,
+                })
+              }
+              data-slot="ledger-edit"
+            >
+              <Pencil aria-hidden="true" className="mr-2 size-4" />
+              {t("medications.detail.intake.rowActions.edit")}
+            </DropdownMenuItem>
+            {(row.status === "skipped" ||
+              row.status === "taken_on_time" ||
+              row.status === "taken_late") && (
+              <DropdownMenuItem
+                onClick={() =>
+                  onToggleSkipped({
+                    id: intake.id as string,
+                    skipped: intake.skipped,
+                    scheduledFor: intake.scheduledFor,
+                  })
+                }
+                data-slot="ledger-toggle-skipped"
+              >
+                {intake.skipped ? (
+                  <Check aria-hidden="true" className="mr-2 size-4" />
+                ) : (
+                  <SkipForward aria-hidden="true" className="mr-2 size-4" />
+                )}
+                {intake.skipped
+                  ? t("medications.detail.verlauf.markAsTaken")
+                  : t("medications.detail.verlauf.markAsSkipped")}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => onDelete(intake.id as string)}
+              data-slot="ledger-delete"
+            >
+              <Trash2 aria-hidden="true" className="mr-2 size-4" />
+              {t("medications.detail.intake.rowActions.delete")}
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/medications/dose-history/ledger-summary-chart.tsx b/src/components/medications/dose-history/ledger-summary-chart.tsx
new file mode 100644
index 000000000..addf223d6
--- /dev/null
+++ b/src/components/medications/dose-history/ledger-summary-chart.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+
+import type { complianceFromLedger } from "../dose-history-ledger-compute";
+
+/**
+ * Compact took / skipped history chart — a single proportional bar split into
+ * on-time / late / missed, with the headline rate beside it. No Recharts: a
+ * three-segment CSS bar is calmer + lighter for a summary this small, and it
+ * tracks the ledger the user is already reading.
+ */
+export function LedgerSummaryChart({
+  compliance,
+}: {
+  compliance: NonNullable<ReturnType<typeof complianceFromLedger>>;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const { takenOnTime, takenLate, missed, denominator, rate } = compliance;
+  const pct = (n: number) => (denominator > 0 ? (n / denominator) * 100 : 0);
+
+  return (
+    <div className="min-w-0 flex-1 space-y-1.5" data-slot="ledger-summary">
+      <div className="flex items-baseline justify-between gap-2">
+        <span className="text-muted-foreground text-xs font-medium">
+          {t("medications.detail.verlauf.adherenceLabel")}
+        </span>
+        <span className="text-foreground text-sm font-semibold tabular-nums">
+          {rate !== null ? `${fmt.number(rate)}%` : "—"}
+        </span>
+      </div>
+      <div
+        className="bg-muted flex h-2 overflow-hidden rounded-full"
+        role="img"
+        aria-label={t("medications.detail.verlauf.adherenceBarLabel", {
+          onTime: takenOnTime,
+          late: takenLate,
+          missed,
+        })}
+      >
+        <div
+          className="bg-success h-full"
+          style={{ width: `${pct(takenOnTime)}%` }}
+        />
+        <div
+          className="bg-warning h-full"
+          style={{ width: `${pct(takenLate)}%` }}
+        />
+        <div
+          className="bg-destructive h-full"
+          style={{ width: `${pct(missed)}%` }}
+        />
+      </div>
+      <div className="text-muted-foreground flex flex-wrap gap-x-3 gap-y-0.5 text-xs">
+        <span className="text-success">
+          {t("medications.detail.verlauf.status.taken_on_time")}: {takenOnTime}
+        </span>
+        <span className="text-warning">
+          {t("medications.detail.verlauf.status.taken_late")}: {takenLate}
+        </span>
+        <span className="text-destructive">
+          {t("medications.detail.verlauf.status.missed")}: {missed}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/medications/dose-history/use-dose-history-ledger.ts b/src/components/medications/dose-history/use-dose-history-ledger.ts
new file mode 100644
index 000000000..f94ff5023
--- /dev/null
+++ b/src/components/medications/dose-history/use-dose-history-ledger.ts
@@ -0,0 +1,326 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import {
+  useQuery,
+  useQueryClient,
+  type QueryClient,
+} from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import {
+  intakeToastOptions,
+  runUndoIntake,
+} from "@/components/medications/use-medication-intake";
+import { useAuth } from "@/hooks/use-auth";
+import { useActiveRecordName } from "@/hooks/use-record-capabilities";
+import { apiDelete, apiGet, apiPost, apiPut } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import {
+  invalidateKeys,
+  medicationDependentKeys,
+  queryKeys,
+  refetchInactiveDailyReads,
+} from "@/lib/query-keys";
+import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
+
+import {
+  applyOptimisticSlotMark,
+  complianceFromLedger,
+  groupLedgerByDay,
+  isSlotActionable,
+  slotMarkRequestBody,
+  type LedgerPayload,
+  type LedgerRow,
+} from "../dose-history-ledger-compute";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * After a write: the medication keys and this window, then the daily reads
+ * (Today hero, dashboard), which sit unmounted behind the detail page and
+ * would otherwise keep their stale answer.
+ */
+async function reconcileLedger(
+  queryClient: QueryClient,
+  queryKey: readonly unknown[],
+) {
+  await invalidateKeys(queryClient, [...medicationDependentKeys, queryKey]);
+  await refetchInactiveDailyReads(queryClient);
+}
+
+/**
+ * The ledger's read and its writes: the window read, the adherence summary,
+ * the day groups, and the marks, toggles, pins and deletes, each followed by
+ * the same invalidation (the medication keys, this window, and the daily
+ * reads that sit unmounted behind the detail page).
+ */
+export function useDoseHistoryLedger({
+  medicationId,
+  medicationName,
+  windowDays,
+}: {
+  medicationId: string;
+  medicationName: string;
+  windowDays: number;
+}) {
+  const { t } = useTranslations();
+  const { user } = useAuth();
+  // The record this ledger's writes land in, when it is not the caller's own.
+  // The two sibling intake paths in `use-medication-intake.ts` already drop
+  // Undo and name the record; this third one builds its own toast and missed
+  // both, so a delegate met an Undo the server refuses on every dose they
+  // marked — the most-encountered of the set.
+  const recordName = useActiveRecordName();
+  const queryClient = useQueryClient();
+  const timeZone = user?.timezone || DEFAULT_TIMEZONE;
+
+  const [marking, setMarking] = useState<string | null>(null);
+
+  // The window is resolved when the request fires, not when the ledger
+  // mounts. A window pinned at mount made every refetch (including the one
+  // after adding an entry) ask for rows up to the moment the tab opened, so a
+  // dose recorded afterwards stayed invisible until a reload (#1028). Only
+  // `from` travels: the server's `to` defaults to its own now.
+  const queryKey = queryKeys.medicationDoseHistory(medicationId, windowDays);
+
+  const { data, isLoading, isError, error, refetch } = useQuery<LedgerPayload>({
+    queryKey,
+    queryFn: async () => {
+      const from = new Date(Date.now() - windowDays * DAY_MS).toISOString();
+      const search = new URLSearchParams({ from });
+      return apiGet<LedgerPayload>(
+        `/api/medications/${medicationId}/dose-history?${search.toString()}`,
+      );
+    },
+    staleTime: 15_000,
+  });
+
+  const compliance = useMemo(
+    () => (data ? complianceFromLedger(data.rows) : null),
+    [data],
+  );
+
+  const groups = useMemo(
+    () => (data ? groupLedgerByDay(data.rows, timeZone) : []),
+    [data, timeZone],
+  );
+
+  // Today's local day key — a missed slot from TODAY is still in active
+  // play (visible Genommen button); older missed days settle into the
+  // row kebab so the history reads calm.
+  const todayKey = useMemo(
+    () =>
+      new Intl.DateTimeFormat("en-CA", {
+        timeZone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+      }).format(new Date()),
+    [timeZone],
+  );
+
+  /**
+   * Genommen / Übersprungen on a pending / missed slot. The cached ledger is
+   * mutated optimistically (row status + the headline % flip in this paint),
+   * then the server write fires and the dependent-key invalidation reconciles.
+   * A failed write rolls the optimistic snapshot back + toasts; a successful
+   * one carries the same Undo action the medication cards offer (mirrors the
+   * C1/C2 pattern in `use-medication-intake.ts`).
+   */
+  const markSlot = useCallback(
+    async (row: LedgerRow, action: "taken" | "skipped") => {
+      if (marking || !isSlotActionable(row)) return;
+      setMarking(`${row.at}:${action}`);
+
+      const prev = queryClient.getQueryData<LedgerPayload>(queryKey);
+      if (prev) {
+        queryClient.setQueryData<LedgerPayload>(
+          queryKey,
+          applyOptimisticSlotMark(prev, row.at, action),
+        );
+      }
+
+      try {
+        // Pin the displayed slot so the server marks THAT dose (the canonical
+        // slot upsert), not a now-snap to the nearest one — and anchor
+        // `takenAt` on the same instant, matching the optimistic paint. The
+        // POST returns the created event; its id drives the Undo affordance
+        // (the same soft-delete route the cards use).
+        const created = await apiPost<{ id?: string } | undefined>(
+          `/api/medications/${medicationId}/intake`,
+          slotMarkRequestBody(row, action),
+        );
+        const eventId: string | undefined = created?.id;
+        toast.success(
+          t(
+            action === "skipped"
+              ? "medications.intakeToastSkipped"
+              : "medications.intakeToastTaken",
+            { name: medicationName },
+          ),
+          // The shared decision, not a fourth copy of it: name the record it
+          // landed in, and withhold an Undo the server would refuse there.
+          intakeToastOptions({
+            recordName,
+            eventId,
+            t,
+            onUndo: (id) =>
+              void runUndoIntake({
+                medication: { id: medicationId, name: medicationName },
+                eventId: id,
+                t,
+                queryClient,
+              }),
+          }),
+        );
+        await reconcileLedger(queryClient, queryKey);
+      } catch (failure) {
+        if (prev) queryClient.setQueryData(queryKey, prev);
+        showErrorToast(
+          t("medications.intakeToastFailed", { name: medicationName }),
+          { cause: failure },
+        );
+      } finally {
+        setMarking(null);
+      }
+    },
+    [
+      marking,
+      medicationId,
+      medicationName,
+      queryClient,
+      queryKey,
+      recordName,
+      t,
+    ],
+  );
+
+  const edits = useDoseHistoryEdits({ medicationId, queryKey });
+
+  return {
+    queryKey,
+    data,
+    isLoading,
+    isError,
+    error,
+    refetch,
+    compliance,
+    groups,
+    todayKey,
+    marking,
+    markSlot,
+    ...edits,
+  };
+}
+
+/**
+ * The owner's edits from the row menu: the skipped/taken toggle, pinning and
+ * releasing a take, and the confirmed row delete.
+ */
+function useDoseHistoryEdits({
+  medicationId,
+  queryKey,
+}: {
+  medicationId: string;
+  queryKey: readonly unknown[];
+}) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+  // The pending "Slot zuordnen" confirm: which intake to pin
+  // onto which slot. The confirm names the consequence (counts as late).
+  const [pendingPin, setPendingPin] = useState<{
+    eventId: string;
+    slotAt: string;
+  } | null>(null);
+
+  /**
+   * Flip an existing intake between Übersprungen and Genommen from the row
+   * kebab. Same `PUT intake/[eventId]` contract the edit dialog uses; a
+   * skipped→taken flip anchors `takenAt` on the slot instant (a past slot)
+   * rather than "now".
+   */
+  const toggleIntakeSkipped = useCallback(
+    async (intake: {
+      id: string;
+      skipped: boolean;
+      scheduledFor: string | null;
+    }) => {
+      try {
+        const body = intake.skipped
+          ? {
+              skipped: false,
+              takenAt: intake.scheduledFor ?? new Date().toISOString(),
+            }
+          : { skipped: true, takenAt: null };
+        await apiPut(
+          `/api/medications/${medicationId}/intake/${intake.id}`,
+          body,
+        );
+        await reconcileLedger(queryClient, queryKey);
+        toast.success(t("medications.detail.intake.edit.savedToast"));
+      } catch (failure) {
+        showErrorToast(t("medications.detail.intake.edit.failed"), {
+          cause: failure,
+        });
+      }
+    },
+    [medicationId, queryClient, queryKey, t],
+  );
+
+  /**
+   * Pin an ad-hoc take onto a scheduled slot (`forceSlotInstant`)
+   * or release a pinned binding (`forceSlotInstant: null` → the server
+   * re-attributes by band, usually back to ad-hoc). Same PUT contract the
+   * edit dialog uses; the authoritative refetch re-renders the moved row.
+   */
+  const setAttribution = useCallback(
+    async (eventId: string, slotAtIso: string | null) => {
+      try {
+        await apiPut(`/api/medications/${medicationId}/intake/${eventId}`, {
+          forceSlotInstant: slotAtIso,
+        });
+        toast.success(
+          t(
+            slotAtIso
+              ? "medications.detail.verlauf.pin.pinnedToast"
+              : "medications.detail.verlauf.pin.unpinnedToast",
+          ),
+        );
+        await reconcileLedger(queryClient, queryKey);
+      } catch (failure) {
+        showErrorToast(t("medications.detail.intake.edit.failed"), {
+          cause: failure,
+        });
+      }
+    },
+    [medicationId, queryClient, queryKey, t],
+  );
+
+  async function confirmRowDelete() {
+    if (!pendingDeleteId) return;
+    const id = pendingDeleteId;
+    setPendingDeleteId(null);
+    try {
+      await apiDelete(`/api/medications/${medicationId}/intake/${id}`);
+      toast.success(t("medications.detail.intake.deleteRow.toast"));
+      await reconcileLedger(queryClient, queryKey);
+    } catch (failure) {
+      showErrorToast(t("medications.detail.intake.deleteRow.failed"), {
+        cause: failure,
+      });
+    }
+  }
+
+  return {
+    toggleIntakeSkipped,
+    setAttribution,
+    pendingDeleteId,
+    setPendingDeleteId,
+    confirmRowDelete,
+    pendingPin,
+    setPendingPin,
+  };
+}
diff --git a/src/components/mental-health/__tests__/check-in-wizard.browser.test.tsx b/src/components/mental-health/__tests__/check-in-wizard.browser.test.tsx
new file mode 100644
index 000000000..69469cf9f
--- /dev/null
+++ b/src/components/mental-health/__tests__/check-in-wizard.browser.test.tsx
@@ -0,0 +1,331 @@
+/**
+ * The questionnaire check-in, driven by clicks and keys in a real browser.
+ *
+ * The step arithmetic is pinned on its own in `check-in-nav.test.ts`; this
+ * suite proves the wizard a person uses: one question at a time in the source
+ * order, Back keeping the answer, the number keys, the review with a way back
+ * to every answer, the optional PHQ-9 follow-up, the note over an unvalidated
+ * translation staying on screen with every question, and the body the page
+ * posts. The questionnaire text loads through the production chunk loader,
+ * not a seeded cache.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+
+import { WORDING } from "@/lib/mental-health/wording";
+import type { Locale } from "@/lib/i18n/config";
+
+import { stubFetch } from "../../../../tests/browser/fetch-stub";
+import { renderWithApp } from "../../../../tests/browser/render";
+import { CheckInWizard } from "../check-in-wizard";
+import { MentalWellbeing } from "../mental-wellbeing";
+import type { CheckInAnswers, InstrumentId } from "../types";
+
+const WHO5 = WORDING.WHO5.en;
+const PHQ9 = WORDING.PHQ9.en;
+
+async function wizard(
+  instrument: InstrumentId,
+  {
+    locale = "en",
+    isError = false,
+  }: { locale?: Locale; isError?: boolean } = {},
+) {
+  const onSubmit = vi.fn<(answers: CheckInAnswers) => void>();
+  const onBack = vi.fn();
+  const { screen } = await renderWithApp(
+    <CheckInWizard
+      instrument={instrument}
+      onSubmit={onSubmit}
+      onBack={onBack}
+      isPending={false}
+      isError={isError}
+    />,
+    { locale },
+  );
+  const heading = screen.getByRole("heading", { level: 2 });
+  /** The step on screen asks `text` (waiting out the language's chunk). */
+  const expectQuestion = (text: string) =>
+    expect.element(heading).toHaveTextContent(text);
+  const answer = (name: string) =>
+    screen.getByRole("radio", { name, exact: true });
+  const button = (name: string) =>
+    screen.getByRole("button", { name, exact: true });
+  return { screen, onSubmit, onBack, expectQuestion, answer, button };
+}
+
+/**
+ * Answer the current step by its position, as a keyboard user does: each new
+ * step focuses its question, so Tab first reaches the answers, then the
+ * number key chooses.
+ */
+async function pressAnswer(position: number) {
+  await userEvent.tab();
+  await userEvent.keyboard(String(position));
+}
+
+describe("<CheckInWizard> steps", () => {
+  it("opens on the first question with the stem and the answers in source order", async () => {
+    const { screen, button } = await wizard("WHO5");
+    await expect.element(screen.getByText(WHO5.items[0])).toBeVisible();
+    await expect.element(screen.getByText(WHO5.stems.period)).toBeVisible();
+    await expect.element(screen.getByText("Question 1 of 5")).toBeVisible();
+    const labels = screen
+      .getByRole("radio")
+      .elements()
+      .map((el) => el.textContent);
+    expect(labels).toEqual([5, 4, 3, 2, 1, 0].map((v) => WHO5.anchors.all[v]));
+    await expect.element(button("Back")).toBeDisabled();
+    await expect.element(button("Next")).toBeDisabled();
+    await expect.element(button("See my result")).not.toBeInTheDocument();
+    // The instrument's own explanation heads the check-in; the landing's
+    // self-test disclaimer does not follow the person into it.
+    await expect
+      .element(
+        screen.getByText(
+          "5-question well-being check. Answer for the last two weeks; higher numbers mean better well-being.",
+        ),
+      )
+      .toBeVisible();
+    await expect
+      .element(screen.getByText(/not a diagnosis/i))
+      .not.toBeInTheDocument();
+    // English is the validated wording: no note, no switch.
+    await expect
+      .element(screen.getByText(/has not been scientifically validated/))
+      .not.toBeInTheDocument();
+  });
+
+  it("gives each SCI item its own answers under its section stem", async () => {
+    const SCI = WORDING.SCI.en;
+    const { screen, expectQuestion } = await wizard("SCI");
+    await expectQuestion(SCI.items[0]);
+    await expect.element(screen.getByText(SCI.stems.night)).toBeVisible();
+    await expect.element(screen.getByText("Question 1 of 8")).toBeVisible();
+    expect(
+      screen
+        .getByRole("radio")
+        .elements()
+        .map((el) => el.textContent),
+    ).toEqual([4, 3, 2, 1, 0].map((v) => SCI.anchors.duration[v]));
+  });
+
+  it("advances on a choice, and Back returns with the answer still chosen", async () => {
+    const { screen, answer, button, expectQuestion } = await wizard("WHO5");
+    await answer(WHO5.anchors.all[3]).click();
+    await expect.element(screen.getByText("Question 2 of 5")).toBeVisible();
+    await expectQuestion(WHO5.items[1]);
+    await expect.element(button("Next")).toBeDisabled();
+
+    await button("Back").click();
+    await expectQuestion(WHO5.items[0]);
+    await expect.element(answer(WHO5.anchors.all[3])).toBeChecked();
+    await button("Next").click();
+    await expectQuestion(WHO5.items[1]);
+  });
+
+  it("chooses by number key, moves with the arrows and focuses each new question", async () => {
+    const { screen, answer } = await wizard("WHO5");
+    await answer(WHO5.anchors.all[5]).click();
+    await expect
+      .element(screen.getByRole("heading", { name: WHO5.items[1] }))
+      .toHaveFocus();
+    await userEvent.tab();
+    await expect.element(answer(WHO5.anchors.all[5])).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}{ArrowDown}");
+    await expect.element(answer(WHO5.anchors.all[3])).toHaveFocus();
+    await userEvent.keyboard("{End}");
+    await expect.element(answer(WHO5.anchors.all[0])).toHaveFocus();
+
+    // "2" is the second answer as printed, which scores 4 on the WHO-5.
+    await userEvent.keyboard("2");
+    await expect.element(screen.getByText("Question 3 of 5")).toBeVisible();
+    await screen.getByRole("button", { name: "Back", exact: true }).click();
+    await expect.element(answer(WHO5.anchors.all[4])).toBeChecked();
+  });
+
+  it("reviews every answer, changes one and returns to the review", async () => {
+    const { screen, onSubmit, button } = await wizard("WHO5");
+    for (const position of [1, 2, 3, 4, 5]) await pressAnswer(position);
+    await expect
+      .element(screen.getByRole("heading", { name: "Check your answers" }))
+      .toBeVisible();
+    await expect
+      .element(screen.getByText("All 5 questions answered"))
+      .toBeVisible();
+
+    await screen
+      .getByRole("button", { name: "Change the answer to question 3" })
+      .click();
+    await expect.element(screen.getByText("Question 3 of 5")).toBeVisible();
+    await screen
+      .getByRole("radio", { name: WHO5.anchors.all[0], exact: true })
+      .click();
+    await expect
+      .element(screen.getByRole("heading", { name: "Check your answers" }))
+      .toBeVisible();
+
+    await button("See my result").click();
+    expect(onSubmit).toHaveBeenCalledExactlyOnceWith({
+      items: [5, 4, 0, 2, 1],
+      functionalDifficulty: undefined,
+      englishOriginal: false,
+    });
+  });
+
+  it("asks the PHQ-9 follow-up as an optional step that a second press clears", async () => {
+    const { screen, onSubmit, answer, button, expectQuestion } =
+      await wizard("PHQ9");
+    for (let i = 0; i < 9; i++) await pressAnswer(1);
+    await expect
+      .element(screen.getByText("Follow-up question (optional)"))
+      .toBeVisible();
+    await expectQuestion(PHQ9.functional!.title);
+    await expect.element(button("Review answers")).toBeEnabled();
+
+    await answer(PHQ9.functional!.anchors[2]).click();
+    await expect.element(answer(PHQ9.functional!.anchors[2])).toBeChecked();
+    await answer(PHQ9.functional!.anchors[2]).click();
+    await expect.element(answer(PHQ9.functional!.anchors[2])).not.toBeChecked();
+
+    await button("Review answers").click();
+    await expect.element(screen.getByText("Not answered")).toBeVisible();
+    await button("See my result").click();
+    expect(onSubmit).toHaveBeenCalledExactlyOnceWith({
+      items: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+      functionalDifficulty: undefined,
+      englishOriginal: false,
+    });
+  });
+
+  it("returns to the overview and shows a failed submit", async () => {
+    const { screen, onBack } = await wizard("GAD7", { isError: true });
+    await expect
+      .element(screen.getByRole("alert"))
+      .toHaveTextContent("Something went wrong. Please try again.");
+    await screen.getByRole("button", { name: "Overview" }).click();
+    expect(onBack).toHaveBeenCalledOnce();
+  });
+});
+
+describe("<CheckInWizard> in the reader's language", () => {
+  const SCI_DE = WORDING.SCI.de;
+  const NOTE =
+    "Diese Übersetzung ist nicht wissenschaftlich validiert; nimm das Ergebnis als Orientierung.";
+
+  it("keeps the note over an unvalidated translation on screen with every question", async () => {
+    await page.viewport(390, 640);
+    const { screen, expectQuestion } = await wizard("SCI", { locale: "de" });
+    expect(SCI_DE.validated).toBe(false);
+    const note = screen.getByText(NOTE);
+    for (let i = 0; i < 8; i++) {
+      await expectQuestion(SCI_DE.items[i]);
+      await expect.element(note).toBeVisible();
+      const rect = note.element().getBoundingClientRect();
+      expect(rect.top, `step ${i + 1}`).toBeGreaterThanOrEqual(0);
+      expect(rect.bottom, `step ${i + 1}`).toBeLessThanOrEqual(
+        window.innerHeight,
+      );
+      // The first question arrives with the language's chunk, after the
+      // focus move has run, so it is answered by pointer; the rest by key.
+      if (i === 0) await screen.getByRole("radio").first().click();
+      else await pressAnswer(1);
+    }
+    await expect
+      .element(screen.getByRole("heading", { name: "Antworten prüfen" }))
+      .toBeVisible();
+    await expect.element(note).toBeVisible();
+  });
+
+  it("switches to the English original and says so in the answers", async () => {
+    const { screen, onSubmit, expectQuestion } = await wizard("SCI", {
+      locale: "de",
+    });
+    await expectQuestion(SCI_DE.items[0]);
+    await screen
+      .getByRole("button", { name: "Englischen Originaltext zeigen" })
+      .click();
+    await expect
+      .element(screen.getByRole("heading", { name: WORDING.SCI.en.items[0] }))
+      .toHaveAttribute("lang", "en");
+    // The note stays: the reader is still in a language with no validated form.
+    await expect.element(screen.getByText(NOTE)).toBeVisible();
+    await screen.getByRole("radio").first().click();
+    for (let i = 1; i < 8; i++) await pressAnswer(1);
+    await screen
+      .getByRole("button", { name: "Ergebnis ansehen", exact: true })
+      .click();
+    expect(onSubmit).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({ englishOriginal: true }),
+    );
+  });
+
+  it("shows a validated translation with no note and no switch", async () => {
+    const { screen, expectQuestion } = await wizard("PHQ9", { locale: "nl" });
+    await expectQuestion(WORDING.PHQ9.nl.items[0]);
+    await expect
+      .element(screen.getByText(WORDING.PHQ9.nl.stems.period))
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("button", { name: /English/ }))
+      .not.toBeInTheDocument();
+  });
+});
+
+describe("the check-in from the overview", () => {
+  it("posts the answers with the instrument and the reader's language, then shows the result", async () => {
+    const api = stubFetch().on("GET", "/api/mental-health/assessments", {
+      data: { assessments: [] },
+    });
+    const post = api.deferred("POST", "/api/mental-health/assessments");
+    const { screen } = await renderWithApp(<MentalWellbeing />);
+
+    const start =
+      '[data-instrument="WHO5"] [data-slot="instrument-card-start"]';
+    await expect.poll(() => document.querySelector(start)).toBeTruthy();
+    await page.elementLocator(document.querySelector(start)!).click();
+    await expect.element(screen.getByText(WHO5.items[0])).toBeVisible();
+    await screen.getByRole("radio").nth(1).click();
+    for (const position of [2, 3, 1, 2]) await pressAnswer(position);
+    const submit = screen.getByRole("button", { name: "See my result" });
+    await submit.click();
+
+    await expect
+      .element(screen.getByRole("button", { name: "Saving…" }))
+      .toBeDisabled();
+    expect(api.calls("POST", "/api/mental-health/assessments")).toHaveLength(1);
+    expect(api.calls("POST", "/api/mental-health/assessments")[0].body).toEqual(
+      {
+        instrument: "WHO5",
+        locale: "en",
+        items: [4, 4, 3, 5, 4],
+        englishOriginal: false,
+      },
+    );
+
+    post.release({
+      status: 201,
+      data: {
+        assessment: {
+          id: "a-1",
+          instrument: "WHO5",
+          locale: "en",
+          wording: "validated",
+          totalScore: 80,
+          severityBand: "good",
+          item9Flagged: false,
+          crisisShownAt: null,
+          takenAt: "2026-09-15T10:00:00.000Z",
+        },
+        actionThreshold: 50,
+        crisis: null,
+      },
+    });
+    await expect
+      .element(screen.getByText("80", { exact: true }).first())
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("button", { name: "See my result" }))
+      .not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/mental-health/__tests__/mental-wellbeing.test.tsx b/src/components/mental-health/__tests__/mental-wellbeing.test.tsx
index f31aff775..dc9925453 100644
--- a/src/components/mental-health/__tests__/mental-wellbeing.test.tsx
+++ b/src/components/mental-health/__tests__/mental-wellbeing.test.tsx
@@ -6,15 +6,14 @@ import { I18nProvider } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
 import en from "../../../../messages/en.json";
 import nl from "../../../../messages/nl.json";
-import { WORDING } from "@/lib/mental-health/wording";
 import { seedQuestionnaireWording } from "@/__tests__/helpers/questionnaire-wording";
 
 /**
- * Mental-wellbeing surface redesign (v1.25.3). The SSR-only convention
- * (`renderToStaticMarkup`, `environment: "node"`, no `@testing-library/react`)
- * means clicks can't be driven here — the wizard's advance/back grammar is
- * pinned in `check-in-nav.test.ts`. These tests pin the SSR-observable
- * contracts: the disclaimer renders ONLY on the landing (never while testing),
+ * Mental-wellbeing surface redesign (v1.25.3). The check-in wizard itself is
+ * driven in a real browser by `check-in-wizard.browser.test.tsx` (steps,
+ * keys, review, follow-up, the unvalidated-translation note, the posted
+ * body); its step arithmetic is pinned in `check-in-nav.test.ts`. These tests
+ * pin the rendered contracts of the rest of the surface: the disclaimer renders ONLY on the landing (never while testing),
  * a positive item-9 surfaces the crisis card, and (v1.27.9) the landing is
  * intro + instrument cards only — the dated history + trend chart live in the
  * per-instrument detail a card click opens, pinned to one instrument.
@@ -74,52 +73,6 @@ describe("landing chrome (v1.25.5 — disclaimer + heading removed)", () => {
     // …and the lead description still introduces the screeners.
     expect(html).toContain(mh.pageDescription);
   });
-
-  it("does NOT render any disclaimer inside the check-in wizard", () => {
-    const html = withProviders(
-      <CheckInWizard
-        instrument="PHQ9"
-        onSubmit={() => {}}
-        onBack={() => {}}
-        isPending={false}
-        isError={false}
-      />,
-    );
-    expect(html).not.toContain('data-slot="mental-health-disclaimer"');
-    // …but the standardized instrument explanation IS shown.
-    expect(html).toContain(mh.instrumentDescription.phq9);
-  });
-});
-
-describe("check-in wizard scaffolding (v1.27.6 — questions only)", () => {
-  const html = withProviders(
-    <CheckInWizard
-      instrument="PHQ9"
-      onSubmit={() => {}}
-      onBack={() => {}}
-      isPending={false}
-      isError={false}
-    />,
-  );
-
-  it("no longer renders the question-overview strip", () => {
-    expect(html).not.toContain('data-slot="wizard-stepper"');
-  });
-
-  it("no longer renders the review recap or the functional follow-up", () => {
-    expect(html).not.toContain("You have answered");
-    expect(html).not.toContain('data-slot="check-in-submit"');
-  });
-
-  it("opens on the first question with the Back/Next footer", () => {
-    expect(html).toContain(WORDING.PHQ9.en.items[0]);
-    expect(html).toContain('data-slot="check-in-back"');
-    expect(html).toContain('data-slot="check-in-next"');
-    // Back is disabled on the first step.
-    expect(html).toMatch(
-      /data-slot="check-in-back"[^>]*disabled|disabled[^>]*data-slot="check-in-back"/,
-    );
-  });
 });
 
 describe("item-9 crisis surfacing on the result", () => {
@@ -243,49 +196,6 @@ describe("WHO-5 / SCI on the same infrastructure (v1.27.9)", () => {
     expect(html).not.toContain("Rhythmus");
   });
 
-  it("WHO-5 wizard opens on item 1 with the six-point scale in source order and the recall stem", () => {
-    const html = withProviders(
-      <CheckInWizard
-        instrument="WHO5"
-        onSubmit={() => {}}
-        onBack={() => {}}
-        isPending={false}
-        isError={false}
-      />,
-    );
-    expect(html).toContain(WORDING.WHO5.en.items[0]);
-    expect(html).toContain('data-slot="check-in-stem"');
-    expect(html).toContain(WORDING.WHO5.en.stems.period);
-    // Six anchors, 5 → 0 (the WHO form leads with "All of the time").
-    for (const v of [5, 4, 3, 2, 1, 0]) {
-      expect(html).toContain(WORDING.WHO5.en.anchors.all[v]);
-    }
-    // English items are the validated wording for en — no translation note.
-    expect(html).not.toContain('data-slot="check-in-unvalidated-note"');
-    expect(html).not.toContain('data-slot="check-in-wording-toggle"');
-    // No functional follow-up outside the PHQ-9: 5 steps total.
-    expect(html).toContain("Question 1 of 5");
-  });
-
-  it("SCI wizard opens on item 1 with the item-specific duration anchors and section stem", () => {
-    const html = withProviders(
-      <CheckInWizard
-        instrument="SCI"
-        onSubmit={() => {}}
-        onBack={() => {}}
-        isPending={false}
-        isError={false}
-      />,
-    );
-    expect(html).toContain(WORDING.SCI.en.items[0]);
-    expect(html).toContain(WORDING.SCI.en.stems.night);
-    // Item 1 carries the sleep-latency time ranges, 4 → 0.
-    for (const v of [4, 3, 2, 1, 0]) {
-      expect(html).toContain(WORDING.SCI.en.anchors.duration[v]);
-    }
-    expect(html).toContain("Question 1 of 8");
-  });
-
   it("shows the gentle PHQ-9 pointer on a WHO-5 total of 50 or below", () => {
     const result: CreateResponse = {
       assessment: {
@@ -530,23 +440,20 @@ describe("questionnaires in the reader's language", () => {
     );
   }
 
-  function wizard(instrument: "PHQ9" | "SCI") {
-    return (
-      <CheckInWizard
-        instrument={instrument}
-        onSubmit={() => {}}
-        onBack={() => {}}
-        isPending={false}
-        isError={false}
-      />
-    );
-  }
-
+  // Kept here rather than in the browser suite: the frame before the
+  // language's chunk arrives is the one a server render always paints, and a
+  // browser loads the chunk before a test can look.
   it("holds the step's place while the language's text loads", () => {
     const html = renderToStaticMarkup(
       <QueryClientProvider client={new QueryClient()}>
         <I18nProvider initialLocale="nl" initialMessages={nl}>
-          {wizard("SCI")}
+          <CheckInWizard
+            instrument="SCI"
+            onSubmit={() => {}}
+            onBack={() => {}}
+            isPending={false}
+            isError={false}
+          />
         </I18nProvider>
       </QueryClientProvider>,
     );
@@ -555,30 +462,6 @@ describe("questionnaires in the reader's language", () => {
     expect(html).not.toContain('data-slot="check-in-unvalidated-note"');
   });
 
-  it("the PHQ-9 in Dutch is the validated Dutch form, with no note and no switch", () => {
-    const html = renderIn("nl", wizard("PHQ9"));
-    const dutch = WORDING.PHQ9.nl;
-    expect(html).toContain(dutch.stems.period);
-    expect(html).toContain(dutch.items[0]);
-    for (const v of [0, 1, 2, 3]) expect(html).toContain(dutch.anchors.all[v]);
-    expect(html).not.toContain(WORDING.PHQ9.en.items[0]);
-    expect(html).not.toContain('data-slot="check-in-unvalidated-note"');
-    expect(html).not.toContain('data-slot="check-in-wording-toggle"');
-  });
-
-  it("the SCI in Dutch shows the translation under the note, with the switch to the English original", () => {
-    const html = renderIn("nl", wizard("SCI"));
-    const dutch = WORDING.SCI.nl;
-    expect(dutch.validated).toBe(false);
-    expect(html).toContain(dutch.stems.night);
-    expect(html).toContain(dutch.items[0]);
-    expect(html).not.toContain(WORDING.SCI.en.items[0]);
-    expect(html).toContain('data-slot="check-in-unvalidated-note"');
-    expect(html).toContain(nl.mentalHealth.wording.unvalidatedNote);
-    expect(html).toContain('data-slot="check-in-wording-toggle"');
-    expect(html).toContain(nl.mentalHealth.wording.showOriginal);
-  });
-
   it("the result and the history mark an unvalidated translation, and only that", () => {
     const row = (wording: AssessmentRow["wording"]): AssessmentRow => ({
       id: `s-${wording}`,
diff --git a/src/components/settings/__tests__/dashboard-layout-section.test.tsx b/src/components/settings/__tests__/dashboard-layout-section.test.tsx
index 79cb3b143..a350585bc 100644
--- a/src/components/settings/__tests__/dashboard-layout-section.test.tsx
+++ b/src/components/settings/__tests__/dashboard-layout-section.test.tsx
@@ -80,11 +80,11 @@ vi.mock("@/hooks/use-mounted", () => ({
 }));
 
 import { I18nProvider } from "@/lib/i18n/context";
+import { DashboardLayoutSection } from "../dashboard-layout-section";
 import {
-  DashboardLayoutSection,
   reorderWidgets,
   setHeroItemKindEnabled,
-} from "../dashboard-layout-section";
+} from "../dashboard-layout/layout-model";
 import { primeLocales } from "@/__tests__/helpers/prime-locales";
 
 primeLocales("de");
diff --git a/src/components/settings/__tests__/dashboard-layout-snapshot-invalidation.test.ts b/src/components/settings/__tests__/dashboard-layout-snapshot-invalidation.test.ts
index 5241c11c9..954f80df2 100644
--- a/src/components/settings/__tests__/dashboard-layout-snapshot-invalidation.test.ts
+++ b/src/components/settings/__tests__/dashboard-layout-snapshot-invalidation.test.ts
@@ -1,3 +1,4 @@
+import { dashboardSource } from "@/__tests__/helpers/dashboard-source";
 import { describe, it, expect, vi } from "vitest";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
@@ -127,7 +128,10 @@ describe("dashboard snapshot invalidation — same-tab staleness mechanism", ()
 
 describe("dashboard layout save — every layout source is covered (source pins)", () => {
   const sectionSrc = readFileSync(
-    join(process.cwd(), "src/components/settings/dashboard-layout-section.tsx"),
+    join(
+      process.cwd(),
+      "src/components/settings/dashboard-layout/use-dashboard-layout-draft.ts",
+    ),
     "utf8",
   );
 
@@ -151,10 +155,7 @@ describe("dashboard layout save — every layout source is covered (source pins)
   });
 
   it("the dashboard reads layout from the snapshot (or the dashboardWidgets cell) only", () => {
-    const pageSrc = readFileSync(
-      join(process.cwd(), "src/app/page-client.tsx"),
-      "utf8",
-    );
+    const pageSrc = dashboardSource();
     // Snapshot path: layout comes off the snapshot payload…
     expect(pageSrc).toContain("snapshotQuery.data?.layout");
     // …legacy path: the dashboardWidgets factory key (no bare literal).
diff --git a/src/components/settings/__tests__/managed-record-settings-section.test.tsx b/src/components/settings/__tests__/managed-record-settings-section.test.tsx
index 06d646cd3..fe973f5c4 100644
--- a/src/components/settings/__tests__/managed-record-settings-section.test.tsx
+++ b/src/components/settings/__tests__/managed-record-settings-section.test.tsx
@@ -5,10 +5,8 @@ import { I18nProvider } from "@/lib/i18n/context";
 import { MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS } from "@/lib/record-settings";
 import { ALL_METRICS } from "@/lib/validations/thresholds";
 
-import {
-  managedModulesPatch,
-  ManagedRecordSettingsForm,
-} from "../managed-record-settings-section";
+import { ManagedRecordSettingsForm } from "../managed-record-settings-section";
+import { managedModulesPatch } from "../managed-record/modules-form";
 
 const LOCALES = [
   "de",
diff --git a/src/components/settings/dashboard-layout-section.tsx b/src/components/settings/dashboard-layout-section.tsx
index fb1ee25ba..e38165ea0 100644
--- a/src/components/settings/dashboard-layout-section.tsx
+++ b/src/components/settings/dashboard-layout-section.tsx
@@ -1,215 +1,37 @@
 "use client";
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useId, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { showErrorToast } from "@/lib/errors/error-toast";
-import {
-  LayoutDashboard,
-  RotateCcw,
-  Loader2,
-  ArrowUp,
-  ArrowDown,
-  GripVertical,
-} from "lucide-react";
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Button } from "@/components/ui/button";
+import { useId } from "react";
+import { LayoutDashboard, Loader2, RotateCcw } from "lucide-react";
+
 import { SettingsCardActions } from "@/components/settings/_card-actions";
-import { ConfirmButton } from "@/components/ui/confirm-button";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { NativeSelect } from "@/components/ui/native-select";
-import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
-import { useTranslations } from "@/lib/i18n/context";
-import { queryKeys } from "@/lib/query-keys";
-import {
-  type DashboardLayout,
-  type DashboardWidgetId,
-  DEFAULT_DASHBOARD_LAYOUT,
-  DASHBOARD_WIDGET_IDS,
-  DASHBOARD_IOS_ONLY_WIDGET_IDS,
-  IOS_PIN_ONLY_WIDGET_IDS,
-  type DashboardWidgetCatalogueId,
-  type DashboardLayoutWithToken,
-} from "@/lib/dashboard-layout";
-import {
-  PRIORITY_ITEM_KINDS,
-  type PriorityItemKind,
-} from "@/lib/daily/priority-item";
-import { apiDelete, apiGet, apiPut, ApiError } from "@/lib/api/api-fetch";
-import { useMounted } from "@/hooks/use-mounted";
-import { useAuth } from "@/hooks/use-auth";
-import { NATIVE_ONLY_WIDGET_LABEL_KEYS } from "@/lib/dashboard/widget-modules";
-import { isSurfaceVisible } from "@/lib/modules/surface";
-import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { Button } from "@/components/ui/button";
+import { ConfirmButton } from "@/components/ui/confirm-button";
+import { useMounted } from "@/hooks/use-mounted";
+import { PRIORITY_ITEM_KINDS } from "@/lib/daily/priority-item";
+import { DEFAULT_DASHBOARD_LAYOUT } from "@/lib/dashboard-layout";
+import { useTranslations } from "@/lib/i18n/context";
+
+import { HeroSettingsFieldset } from "./dashboard-layout/hero-settings-fieldset";
+import { useDashboardLayoutDraft } from "./dashboard-layout/use-dashboard-layout-draft";
+import {
+  NativeWidgetList,
+  WebWidgetList,
+} from "./dashboard-layout/widget-lists";
 
 /**
- * v1.4.47 — pure reorder helper shared by the arrow buttons and the
- * @dnd-kit drag-end handler. Both surfaces produce the same `widgets[]`
- * shape (`order: 0..n-1`) so the existing PUT contract stays untouched
- * and either input mode flushes via the same Save mutation. Exported so
- * the unit test can pin the contract without spinning up a DndContext.
- *
- * v1.4.48 — also drives the arrow-button `move()` handler below;
- * the previous in-file swap-and-renumber implementation was a second
- * copy of the same logic.
+ * Settings → Dashboard: the top card's settings, the widget list (tile and
+ * chart switches, order by arrows or drag), the native-only widgets, and
+ * save / cancel / reset. The draft and its writes live in
+ * `./dashboard-layout/`.
  */
-export function reorderWidgets(
-  widgets: readonly { id: string; order: number }[],
-  fromId: string,
-  toId: string,
-): { id: string; order: number }[] {
-  const sorted = [...widgets].sort((a, b) => a.order - b.order);
-  const fromIdx = sorted.findIndex((w) => w.id === fromId);
-  const toIdx = sorted.findIndex((w) => w.id === toId);
-  if (fromIdx < 0 || toIdx < 0 || fromIdx === toIdx) {
-    return sorted.map((w, i) => ({ ...w, order: i }));
-  }
-  const next = [...sorted];
-  const [removed] = next.splice(fromIdx, 1);
-  next.splice(toIdx, 0, removed);
-  return next.map((w, i) => ({ ...w, order: i }));
-}
-
-export function setHeroItemKindEnabled(
-  enabledKinds: readonly PriorityItemKind[] | undefined,
-  kind: PriorityItemKind,
-  enabled: boolean,
-): PriorityItemKind[] {
-  const next = new Set(enabledKinds ?? PRIORITY_ITEM_KINDS);
-  if (enabled) next.add(kind);
-  else next.delete(kind);
-  return PRIORITY_ITEM_KINDS.filter((itemKind) => next.has(itemKind));
-}
-
-/**
- * v1.4.48 — merge the `{ id, order }` shape returned by
- * `reorderWidgets()` back into the full `DashboardWidgetConfig[]` so
- * the section's draft state keeps every per-row flag (`visible`,
- * `tileVisible`) while the order is rewritten. The arrow buttons and
- * the @dnd-kit drag-end handler both flow through this helper so
- * neither surface can silently drop a flag.
- */
-function mergeReorderIntoLayout(
-  widgets: DashboardLayout["widgets"],
-  reordered: readonly { id: string; order: number }[],
-): DashboardLayout["widgets"] {
-  const byId = new Map(widgets.map((w) => [w.id, w]));
-  return reordered.map((r, i) => {
-    const original = byId.get(r.id as DashboardWidgetId);
-    if (!original) {
-      // v1.4.49 — defence-in-depth dev warning for the orphan branch.
-      // Today this branch is statically unreachable: every id in
-      // `reordered` is sourced from `layout.widgets`, so `byId.get`
-      // always hits. The upcoming per-tile Suspense refactor will
-      // introduce dynamic widgets where this invariant could break;
-      // the warning fires in dev only so a regression surfaces in the
-      // console instead of silently dropping the row via the cast.
-      if (
-        typeof window !== "undefined" &&
-        process.env.NODE_ENV === "development"
-      ) {
-        console.warn(
-          `mergeReorderIntoLayout: orphan widget id "${r.id}" dropped`,
-        );
-      }
-      return { ...r, order: i } as never;
-    }
-    return { ...original, order: i };
-  });
-}
-
-/** Serialise layout saves and resets against the same endpoint. */
-const DASHBOARD_WIDGETS_MUTATION_SCOPE = "dashboard-widgets" as const;
-
-const WIDGET_LABEL_KEYS: Record<DashboardWidgetId, string> = {
-  weight: "dashboard.weight",
-  bp: "dashboard.bloodPressure",
-  pulse: "dashboard.pulse",
-  bodyFat: "dashboard.bodyFat",
-  mood: "dashboard.mood",
-  medications: "dashboard.medications",
-  sleep: "measurements.typeSleep",
-  steps: "measurements.typeSteps",
-  glucose: "measurements.typeBloodGlucose",
-  totalBodyWater: "measurements.typeTotalBodyWater",
-  boneMass: "measurements.typeBoneMass",
-  // v1.28.52 — muscle mass joins the body-composition strip tiles.
-  muscleMass: "measurements.typeMuscleMass",
-  bpInTarget: "dashboard.bpInTarget",
-  oxygenSaturation: "measurements.typeOxygenSaturation",
-  // v1.28.52 — HRV + respiratory rate graduate to web-writable widgets.
-  hrv: "measurements.typeHeartRateVariability",
-  respiratoryRate: "measurements.typeRespiratoryRate",
-  achievements: "achievements.title",
-  // v1.4.25 — VO2 max secondary-metric tile (opt-in).
-  vo2Max: "dashboard.vo2Max",
-  // v1.4.32 — Recent workouts tile (default-on).
-  recentWorkouts: "dashboard.recentWorkouts.title",
-  // v1.11.2 — v1.10 additive HealthKit signals, now pinnable. Each
-  // reuses the existing measurement-type label key.
-  cardioRecovery: "measurements.typeCardioRecovery",
-  sixMinuteWalk: "measurements.typeSixMinuteWalkDistance",
-  stairAscentSpeed: "measurements.typeStairAscentSpeed",
-  stairDescentSpeed: "measurements.typeStairDescentSpeed",
-  breathingDisturbances: "measurements.typeBreathingDisturbances",
-  wristTemperature: "measurements.typeWristTemperature",
-  falls: "measurements.typeFallCount",
-  walkingSteadiness: "measurements.typeWalkingSteadiness",
-  // v1.18.2 — Vorsorge preventive-care summary card.
-  vorsorge: "measurementReminders.sectionTitle",
-  // v1.29 — fluid intake strip tile (nutrients-store-backed).
-  waterIntake: "nutrients.names.water",
-};
-
-const HERO_ITEM_LABEL_KEYS: Record<PriorityItemKind, string> = {
-  coach_checkin: "dashboard.heroItems.coach_checkin",
-  dose_window: "dashboard.heroItems.dose_window",
-  preventive_care: "dashboard.heroItems.preventive_care",
-  sync_issue: "dashboard.heroItems.sync_issue",
-  milestone: "dashboard.heroItems.milestone",
-  ecg_new_recording: "dashboard.heroItems.ecg_new_recording",
-  tension_window: "dashboard.heroItems.tension_window",
-  same_time_baseline: "dashboard.heroItems.same_time_baseline",
-  upcoming_visit: "dashboard.heroItems.upcoming_visit",
-};
-
 export function DashboardLayoutSection({ id }: { id: string }) {
   const { t } = useTranslations();
-  const queryClient = useQueryClient();
-  // v1.18.0 — a widget toggle whose owning module is disabled is a dead
-  // control (the snapshot gates the tile/chart out server-side regardless
-  // of the switch). Read the resolved module map and hide those rows.
-  // Fail-open: a missing map / absent key (stale /me payload, core widget)
-  // reads as enabled, so the row always shows unless the module is
-  // explicitly `false`.
-  const { user } = useAuth();
-  const modules = user?.modules;
-  // v1.4.47 — stable id namespace for the drag-handle `aria-describedby`
-  // tooltip. One hint paragraph is rendered once at the bottom of the list
-  // and referenced by every drag handle in this section.
+  // One hint paragraph, rendered once below the list and referenced by every
+  // drag handle's `aria-describedby`.
   const dragHintId = useId();
-  const heroDescriptionId = useId();
-  const heroNotificationNoteId = useId();
-  const heroContentSelectId = useId();
-  const todayCardSwitchId = useId();
-  // v1.34 — the "Today highlights" fieldset below is gated on `layout`,
+  // The "Today highlights" fieldset below is gated on `layout`,
   // which can be truthy on the very first client render whenever a
   // returning visitor's browser already has a warm, offline-persisted
   // `dashboardWidgets` cache (queryKeys.dashboardWidgets() sits in
@@ -220,258 +42,16 @@ export function DashboardLayoutSection({ id }: { id: string }) {
   // the server on the hydrating render (both false), the same pattern
   // `LayoutModuleGate` already uses for the same class of mismatch.
   const hydrated = useMounted();
-
-  // v1.4.47 — sensors: pointer for mouse/touch, keyboard for Tab + Space
-  // + arrow-key reordering. The KeyboardSensor still works for users who
-  // tab to the GripVertical handle; the legacy ArrowUp / ArrowDown buttons
-  // below remain the primary keyboard surface for accessibility.
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      // Activation distance avoids the drag stealing every click on the row
-      // switches — only a 6 px pointer-down → move counts as drag intent.
-      activationConstraint: { distance: 6 },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  const { data: remote, isLoading } = useQuery({
-    queryKey: queryKeys.dashboardWidgets(),
-    queryFn: async () => {
-      return apiGet<DashboardLayoutWithToken>("/api/dashboard/widgets");
-    },
-    // v1.32.19 (B-3, belt for the #581 fix) — the home RSC seeds
-    // `dashboardWidgets()` from the dashboard SNAPSHOT layout, which carries
-    // NO `updatedAt` optimistic-concurrency token (it is a token-less
-    // `DashboardLayout`, not the `DashboardLayoutWithToken` this section's GET
-    // returns). Within the global 5-min `staleTime` a visit to `/` then Settings
-    // read that seeded token-less value with no mount refetch, so `readBaseToken()`
-    // returned undefined, the Save sent no `baseUpdatedAt`, and the route's
-    // compat fallback silently reverted to last-write-wins — disabling the
-    // just-shipped 409 belt. Force a mount refetch so this section always holds
-    // its own tokened GET response and every write carries the base token. The
-    // smallest correct option: the alternatives (a distinct seed key, or
-    // threading the token through the snapshot layout) touch the home client and
-    // the server snapshot shape; this is one line, config-independent, and makes
-    // the settings query authoritative for its own tokened read.
-    refetchOnMount: "always",
-  });
-
-  // Toggles the SERVER resolved as unavailable for this account — a switch
-  // that is on but can never paint a tile is exactly the confusion this
-  // screen must not create. Decided server-side (see `unavailableWidgetIds`)
-  // so this screen needs no dashboard data of its own. Absent field, or a
-  // query still in flight, means nothing is dead: the row shows, which is
-  // the fail-open direction the module gate below also takes.
-  const unavailableIds = useMemo(
-    () => new Set(remote?.unavailableWidgetIds ?? []),
-    [remote?.unavailableWidgetIds],
-  );
-
-  /**
-   * v1.32.16 (issue #581) — the freshest optimistic-concurrency token the
-   * client knows. Read straight from the widgets query cache at mutate time
-   * (not a render snapshot) so it reflects whatever the last settled write
-   * or refetch advanced it to. Every write sends it as `baseUpdatedAt`.
-   */
-  const readBaseToken = () =>
-    queryClient.getQueryData<DashboardLayoutWithToken>(
-      queryKeys.dashboardWidgets(),
-    )?.updatedAt;
-
-  // Local draft state — null means "use server copy". User edits create the
-  // draft so reordering/toggling doesn't fire a network call per click; Save
-  // flushes it, Cancel clears it. Avoids a setState-in-effect (eslint
-  // react-hooks/set-state-in-effect is strict in this repo).
-  const [draft, setDraft] = useState<DashboardLayout | null>(null);
-  const layout = draft ?? remote ?? null;
-
-  const saveMutation = useMutation({
-    scope: { id: DASHBOARD_WIDGETS_MUTATION_SCOPE },
-    mutationFn: async (next: DashboardLayout) => {
-      return apiPut<DashboardLayoutWithToken>("/api/dashboard/widgets", {
-        ...next,
-        // Guard the write on the token this edit was based on.
-        baseUpdatedAt: readBaseToken(),
-      });
-    },
-    onSuccess: (saved) => {
-      queryClient.setQueryData(queryKeys.dashboardWidgets(), saved);
-      // v1.18.10 — the Startseite reads its layout (tile/chart visibility,
-      // order, comparison baseline, hero toggle) from the dashboard
-      // SNAPSHOT, not from this `dashboardWidgets` key. Without an
-      // invalidation the snapshot keeps its cached layout and the dashboard
-      // looks stale until a manual reload. Invalidate the snapshot so the
-      // next visit (or open tab) re-reads the saved layout immediately.
-      //
-      // `refetchType: "all"` is load-bearing: while the user sits on this
-      // settings page the dashboard is UNMOUNTED, so its snapshot cell is
-      // inactive — the default `refetchType: "active"` only marks it stale,
-      // and the snapshot query's deliberate `refetchOnMount: false`
-      // (use-dashboard-snapshot.ts) then suppresses the mount-time refetch
-      // on a same-tab navigation back to `/`. The saved tile selection only
-      // surfaced on the 120 s poll or a window-focus flick ("saved but the
-      // dashboard shows old tiles"). Refetching ALL matching cells fires the
-      // request right here, so the dashboard mounts onto fresh data.
-      queryClient.invalidateQueries({
-        queryKey: queryKeys.dashboardSnapshot(),
-        refetchType: "all",
-      });
-      queryClient.invalidateQueries({
-        queryKey: queryKeys.dailyDigest(),
-        refetchType: "all",
-      });
-      setDraft(null);
-      toast.success(t("dashboard.layoutSaveSuccess"));
-    },
-    onError: (err) => {
-      // A 409 means another client committed since this edit was based.
-      // Refetch the winning layout so the base token advances, keep the draft,
-      // and let the user save the change again.
-      if (err instanceof ApiError && err.status === 409) {
-        queryClient.invalidateQueries({
-          queryKey: queryKeys.dashboardWidgets(),
-        });
-        toast.message(t("dashboard.layoutConflictReloaded"));
-        return;
-      }
-      showErrorToast(t("dashboard.layoutSaveError"), { cause: err });
-    },
-  });
-
-  const resetMutation = useMutation({
-    scope: { id: DASHBOARD_WIDGETS_MUTATION_SCOPE },
-    mutationFn: async () => {
-      return apiDelete<DashboardLayoutWithToken>("/api/dashboard/widgets");
-    },
-    onSuccess: (saved) => {
-      queryClient.setQueryData(queryKeys.dashboardWidgets(), saved);
-      // v1.18.10 — same snapshot invalidation as the save path so a reset
-      // to defaults reflects on the Startseite without a manual reload.
-      // `refetchType: "all"` for the same reason as the save path: the
-      // unmounted snapshot cell must refetch NOW, not on its next poll.
-      queryClient.invalidateQueries({
-        queryKey: queryKeys.dashboardSnapshot(),
-        refetchType: "all",
-      });
-      queryClient.invalidateQueries({
-        queryKey: queryKeys.dailyDigest(),
-        refetchType: "all",
-      });
-      setDraft(null);
-      toast.success(t("dashboard.layoutResetSuccess"));
-    },
-  });
-
-  function toggle(widgetId: DashboardWidgetCatalogueId, visible: boolean) {
-    if (!layout) return;
-    setDraft({
-      ...layout,
-      widgets: layout.widgets.map((w) =>
-        w.id === widgetId ? { ...w, visible } : w,
-      ),
-    });
-  }
-
-  /**
-   * v1.4.15 — independent toggle for the *strip tile* (the upper
-   * row of trend cards). Until v1.4.14 a single switch controlled both
-   * the tile AND the chart for the same metric, which the maintainer found too
-   * coarse: they wanted a chart visible without the tile (for metrics they
-   * tracks without wanting the at-a-glance number) or vice versa.
-   */
-  function toggleTile(
-    widgetId: DashboardWidgetCatalogueId,
-    tileVisible: boolean,
-  ) {
-    if (!layout) return;
-    setDraft({
-      ...layout,
-      widgets: layout.widgets.map((w) =>
-        w.id === widgetId ? { ...w, tileVisible } : w,
-      ),
-    });
-  }
-
-  function toggleHeroItem(kind: PriorityItemKind, enabled: boolean) {
-    if (!layout) return;
-    setDraft({
-      ...layout,
-      enabledHeroItemKinds: setHeroItemKindEnabled(
-        layout.enabledHeroItemKinds,
-        kind,
-        enabled,
-      ),
-    });
-  }
-
-  /** v1.42 — the server-persisted on/off switch for the dashboard's top card. */
-  function setTodayCardVisible(visible: boolean) {
-    if (!layout) return;
-    setDraft({ ...layout, todayCardVisible: visible });
-  }
-
-  /**
-   * Hero primary content — the server-persisted `hero` field on the layout
-   * blob. The value set is closed ("score" | "reminders"); anything else a
-   * DOM event could carry collapses to the default rather than a cast.
-   */
-  function setHeroContent(value: string) {
-    if (!layout) return;
-    setDraft({
-      ...layout,
-      hero: value === "reminders" ? "reminders" : "score",
-    });
-  }
-
-  /**
-   * v1.4.48 — the arrow buttons now delegate to `reorderWidgets()`
-   * so the swap-and-renumber logic lives in exactly one place. The
-   * neighbour id is derived from the sorted layout index + delta;
-   * out-of-bounds clicks (top row + ArrowUp, bottom row + ArrowDown)
-   * short-circuit before the helper sees them so the button disabled
-   * state stays the single source of truth for the boundary.
-   */
-  function move(widgetId: DashboardWidgetId, delta: -1 | 1) {
-    if (!layout) return;
-    const sorted = [...layout.widgets].sort((a, b) => a.order - b.order);
-    const idx = sorted.findIndex((w) => w.id === widgetId);
-    const targetIdx = idx + delta;
-    if (idx < 0 || targetIdx < 0 || targetIdx >= sorted.length) return;
-    const neighbourId = sorted[targetIdx].id;
-    const reordered = reorderWidgets(layout.widgets, widgetId, neighbourId);
-    setDraft({
-      ...layout,
-      widgets: mergeReorderIntoLayout(layout.widgets, reordered),
-    });
-  }
-
-  /**
-   * v1.4.47 — drag-and-drop reorder via @dnd-kit. Persists the same
-   * `order` rewrite shape the arrow buttons already use, so save / cancel
-   * / reset and the existing draft state machine work unchanged. The
-   * pointer + keyboard sensors are wired in the same `useSensors` call;
-   * keyboard a11y still also works through the legacy arrow buttons that
-   * remain on every row.
-   */
-  function handleDragEnd(event: DragEndEvent) {
-    if (!layout) return;
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    const reordered = reorderWidgets(
-      layout.widgets,
-      String(active.id),
-      String(over.id),
-    );
-    setDraft({
-      ...layout,
-      widgets: mergeReorderIntoLayout(layout.widgets, reordered),
-    });
-  }
-
-  // Presence of a draft implies dirty — no JSON comparison needed.
-  const dirty = draft !== null && layout !== null;
+  const draft = useDashboardLayoutDraft();
+  const {
+    remote,
+    isLoading,
+    layout,
+    setDraft,
+    dirty,
+    saveMutation,
+    resetMutation,
+  } = draft;
 
   return (
     <SettingsCard id={id} className="scroll-mt-28">
@@ -480,86 +60,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
         title={t("dashboard.customizeTitle")}
       />
       {hydrated && layout && (
-        <fieldset
-          aria-describedby={`${heroDescriptionId} ${heroNotificationNoteId}`}
-          data-slot="hero-content-settings"
-          className="border-border bg-background/30 space-y-3 rounded-lg border px-3 py-3"
-        >
-          <legend className="text-foreground text-sm font-medium">
-            {t("dashboard.heroItemsTitle")}
-          </legend>
-          <p id={heroDescriptionId} className="text-muted-foreground text-xs">
-            {t("dashboard.heroItemsDescription")}
-          </p>
-          {/* v1.42 — the top card itself can be switched off. Shown is the
-              default; the choices below shape the card while it is shown. */}
-          <div className="flex min-h-11 items-center justify-between gap-3">
-            <Label htmlFor={todayCardSwitchId} className="text-sm font-medium">
-              {t("dashboard.todayCardVisible")}
-            </Label>
-            <Switch
-              id={todayCardSwitchId}
-              checked={layout.todayCardVisible !== false}
-              onCheckedChange={setTodayCardVisible}
-              disabled={saveMutation.isPending}
-              data-slot="today-card-switch"
-            />
-          </div>
-          {/* Hero primary content — a single labelled select beside the
-              highlight toggles. "score" keeps the health-score read;
-              "reminders" promotes the highlight rail into the hero slot. */}
-          <div className="space-y-1.5">
-            <Label
-              htmlFor={heroContentSelectId}
-              className="text-sm font-medium"
-            >
-              {t("dashboard.heroContentTitle")}
-            </Label>
-            <NativeSelect
-              id={heroContentSelectId}
-              value={layout.hero ?? "score"}
-              onChange={(event) => setHeroContent(event.target.value)}
-              disabled={saveMutation.isPending}
-              data-slot="hero-content-select"
-              className="sm:max-w-xs"
-            >
-              <option value="score">{t("dashboard.heroContentScore")}</option>
-              <option value="reminders">
-                {t("dashboard.heroContentReminders")}
-              </option>
-            </NativeSelect>
-          </div>
-          <div className="divide-border divide-y">
-            {PRIORITY_ITEM_KINDS.map((kind) => {
-              const inputId = `hero-item-${kind}`;
-              const checked = (
-                layout.enabledHeroItemKinds ?? PRIORITY_ITEM_KINDS
-              ).includes(kind);
-              return (
-                <div
-                  key={kind}
-                  className="flex min-h-11 items-center justify-between gap-3 py-2"
-                >
-                  <Label htmlFor={inputId} className="text-sm font-medium">
-                    {t(HERO_ITEM_LABEL_KEYS[kind])}
-                  </Label>
-                  <Switch
-                    id={inputId}
-                    checked={checked}
-                    onCheckedChange={(value) => toggleHeroItem(kind, value)}
-                    disabled={saveMutation.isPending}
-                    aria-label={t(HERO_ITEM_LABEL_KEYS[kind])}
-                    data-slot="hero-item-switch"
-                    data-kind={kind}
-                  />
-                </div>
-              );
-            })}
-          </div>
-          <p id={heroNotificationNoteId} className="text-foreground text-sm">
-            {t("dashboard.heroItemsNotificationNote")}
-          </p>
-        </fieldset>
+        <HeroSettingsFieldset layout={layout} draft={draft} />
       )}
 
       {isLoading || !layout ? (
@@ -577,20 +78,10 @@ export function DashboardLayoutSection({ id }: { id: string }) {
         // (ui-standards.md §9 one-scroll-floor; guarded by
         // e2e/settings-overscroll.spec.ts).
         <div className="relative space-y-2">
-          {/* v1.4.15 — table-style header naming the two
-              switches. The "tile" column controls the strip tile in
-              the upper row; the "chart" column controls the line
-              chart in the lower row. the maintainer wanted independent control
-              of the two surfaces (per feedback_dashboard_top_tiles
-              _selectable.md). */}
-          {/* v1.4.29 — column-header alignment for the new
-              horizontal arrow pair on the trailing edge. The
-              right-hand spacer reserves the width of two
-              size-11/sm:size-9 buttons so the Tile / Chart column
-              headers continue to line up with the switches below. */}
-          {/* v1.4.47 — column header spacer additionally reserves the
-              width of the new drag-handle icon (w-7) so Tile / Chart
-              alignment with the row switches below stays pixel-perfect. */}
+          {/* The column header names the two switches (the tile in the
+              upper strip, the chart in the lower row); the spacers reserve
+              the drag handle and the arrow pair so the headings line up with
+              the switches below. */}
           <div className="text-muted-foreground flex items-center gap-2 px-3 pb-1 text-xs font-medium tracking-wide uppercase">
             <span className="w-7" aria-hidden="true" />
             <span className="flex-1" aria-hidden="true" />
@@ -602,151 +93,23 @@ export function DashboardLayoutSection({ id }: { id: string }) {
             </span>
             <span className="w-22 sm:w-18" aria-hidden="true" />
           </div>
-          {(() => {
-            // v1.7.0 — the stored layout now round-trips the 11 iOS-only
-            // widget ids so the native client can drop its local merge
-            // workarounds. The web Settings list has no tile/chart
-            // surface for them, so skip any id outside the web-known
-            // ids rather than render an unlabelled row with dead toggles.
-            // The skipped ids stay untouched in the persisted layout
-            // because the Save mutation PUTs `layout.widgets` whole and
-            // the server retains every catalogue id.
-            //
-            // v1.11.2 — the 8 B5 ids are WRITABLE (in
-            // `DASHBOARD_WIDGET_IDS` so the iOS pin PUT validates) but
-            // have no web render path either, so exclude
-            // `IOS_PIN_ONLY_WIDGET_IDS` too: a web toggle for them would
-            // be a silent no-op on the web dashboard.
-            const iosPinOnly = new Set<string>(IOS_PIN_ONLY_WIDGET_IDS);
-            const webWidgetIds = new Set<string>(
-              DASHBOARD_WIDGET_IDS.filter((wid) => !iosPinOnly.has(wid)),
-            );
-            const sortedWidgets = [...layout.widgets]
-              .filter((w): w is typeof w & { id: DashboardWidgetId } =>
-                webWidgetIds.has(w.id),
-              )
-              // Hide a widget toggle whose owning module is off, through the
-              // one surface map. A core widget has no owner and always shows;
-              // only an explicit `false` hides the row.
-              .filter((w) => isSurfaceVisible(`widget:${w.id}`, modules))
-              .filter((w) => !unavailableIds.has(w.id))
-              .sort((a, b) => a.order - b.order);
-            const sortedIds = sortedWidgets.map((w) => w.id);
-            return (
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                <SortableContext
-                  items={sortedIds}
-                  strategy={verticalListSortingStrategy}
-                >
-                  {sortedWidgets.map((widget, index, arr) => (
-                    <SortableWidgetRow
-                      key={widget.id}
-                      widget={widget}
-                      labelKey={WIDGET_LABEL_KEYS[widget.id] ?? widget.id}
-                      index={index}
-                      total={arr.length}
-                      dragHintId={dragHintId}
-                      disabled={saveMutation.isPending}
-                      labels={{
-                        tileColumn: t("dashboard.layoutTileColumn"),
-                        chartColumn: t("dashboard.layoutChartColumn"),
-                        moveUp: t("dashboard.moveUp"),
-                        moveDown: t("dashboard.moveDown"),
-                        dragHandle: t("dashboard.dragHandle"),
-                        widgetLabel: t(
-                          WIDGET_LABEL_KEYS[widget.id] ?? widget.id,
-                        ),
-                      }}
-                      onToggleTile={toggleTile}
-                      onToggleChart={toggle}
-                      onMove={move}
-                    />
-                  ))}
-                </SortableContext>
-              </DndContext>
-            );
-          })()}
-          {/* v1.4.47 — single shared aria-describedby target for all
+          <WebWidgetList
+            layout={layout}
+            draft={draft}
+            dragHintId={dragHintId}
+          />
+          {/* Single shared aria-describedby target for all
               drag handles. Screen readers read this once per focused
               handle; sighted users see it in the native browser tooltip
-              via the matching `title` attribute on each handle.
-              v1.4.48 — gate on widget count so an empty layout never
-              orphans the paragraph (no handles to describe). */}
+              via the matching `title` attribute on each handle. Gated on
+              the widget count, so an empty layout never orphans it. */}
           {layout.widgets.length > 0 && (
             <p id={dragHintId} className="text-muted-foreground sr-only">
               {t("dashboard.dragHandleHint")}
             </p>
           )}
 
-          {/* issue #581 — widgets the mobile app draws and this page does
-              not. Filtering them out of the list above is right (a toggle
-              over something the web cannot draw would be a silent no-op),
-              but the native client materialises them into the SAME stored
-              layout, so the account ended up holding rows it never set and
-              could not change from anywhere. They get their own labelled
-              group: the same two flags, no reordering (placement is the
-              native client's), and only for ids the layout actually holds —
-              an account with no native client has nothing to configure here
-              and sees nothing. */}
-          {(() => {
-            const nativeOnlyIds = new Set<string>([
-              ...IOS_PIN_ONLY_WIDGET_IDS,
-              ...DASHBOARD_IOS_ONLY_WIDGET_IDS,
-            ]);
-            const nativeWidgets = layout.widgets
-              .filter((w) => nativeOnlyIds.has(w.id))
-              // Same fail-open module gate as the web list: only an explicit
-              // `false` hides the row.
-              .filter((w) => isSurfaceVisible(`widget:${w.id}`, modules))
-              .filter((w) => !unavailableIds.has(w.id))
-              .sort((a, b) => a.order - b.order);
-            if (nativeWidgets.length === 0) return null;
-            return (
-              <div
-                data-slot="native-only-widgets"
-                className="border-border/60 mt-6 space-y-2 border-t pt-4"
-              >
-                <p className="text-sm font-medium">
-                  {t("dashboard.layoutNativeOnlyTitle")}
-                </p>
-                <p className="text-muted-foreground text-xs">
-                  {t("dashboard.layoutNativeOnlyHint")}
-                </p>
-                <div className="text-muted-foreground flex items-center gap-2 px-3 pt-2 pb-1 text-xs font-medium tracking-wide uppercase">
-                  <span className="flex-1" aria-hidden="true" />
-                  <span className="w-12 text-center">
-                    {t("dashboard.layoutTileColumn")}
-                  </span>
-                  <span className="w-12 text-center">
-                    {t("dashboard.layoutChartColumn")}
-                  </span>
-                </div>
-                {nativeWidgets.map((widget) => {
-                  const label = t(
-                    NATIVE_ONLY_WIDGET_LABEL_KEYS[widget.id] ?? widget.id,
-                  );
-                  return (
-                    <StaticWidgetRow
-                      key={widget.id}
-                      widget={widget}
-                      disabled={saveMutation.isPending}
-                      labels={{
-                        tileColumn: t("dashboard.layoutTileColumn"),
-                        chartColumn: t("dashboard.layoutChartColumn"),
-                        widgetLabel: label,
-                      }}
-                      onToggleTile={toggleTile}
-                      onToggleChart={toggle}
-                    />
-                  );
-                })}
-              </div>
-            );
-          })()}
+          <NativeWidgetList layout={layout} draft={draft} />
         </div>
       )}
 
@@ -810,224 +173,3 @@ export function DashboardLayoutSection({ id }: { id: string }) {
     </SettingsCard>
   );
 }
-
-/**
- * v1.4.47 — sortable row primitive extracted from the section render
- * so the @dnd-kit `useSortable` hook stays scoped to one row. Translation
- * strings are passed in pre-resolved (rather than calling `useTranslations`
- * inside) so this component stays cheap to re-render for the 13+ rows.
- *
- * The drag handle is the only listener-bearing surface — the row body
- * stays click-through so the switches and arrow buttons keep working.
- * Pointer activation has a 6 px distance constraint (configured on the
- * parent sensor) so a tap on the handle never accidentally drags.
- */
-interface SortableWidgetRowProps {
-  widget: {
-    id: DashboardWidgetId;
-    visible: boolean;
-    tileVisible?: boolean;
-    order: number;
-  };
-  labelKey: string;
-  index: number;
-  total: number;
-  dragHintId: string;
-  disabled: boolean;
-  labels: {
-    tileColumn: string;
-    chartColumn: string;
-    moveUp: string;
-    moveDown: string;
-    dragHandle: string;
-    widgetLabel: string;
-  };
-  onToggleTile: (id: DashboardWidgetId, value: boolean) => void;
-  onToggleChart: (id: DashboardWidgetId, value: boolean) => void;
-  onMove: (id: DashboardWidgetId, delta: -1 | 1) => void;
-}
-
-function SortableWidgetRow({
-  widget,
-  index,
-  total,
-  dragHintId,
-  disabled,
-  labels,
-  onToggleTile,
-  onToggleChart,
-  onMove,
-}: SortableWidgetRowProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: widget.id });
-
-  // v1.4.48 — honour the OS `prefers-reduced-motion` preference. The
-  // rest of HealthLog pairs every transition with a `motion-reduce`
-  // companion; dnd-kit's default `transform 250ms ease` was the lone
-  // surface that ignored it. Short-circuit to `none` when reduced
-  // motion is requested so dragged rows snap to place instead of
-  // sliding through the list.
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition: prefersReducedMotion() ? "none" : transition,
-  };
-
-  const tileChecked =
-    typeof widget.tileVisible === "boolean"
-      ? widget.tileVisible
-      : widget.visible;
-
-  return (
-    // v1.4.29 — row sized at 48 px (`min-h-12`) with 44-px mobile tap
-    // targets preserved on the trailing arrow buttons (`size-11`),
-    // shrunk to `sm:size-9` on desktop. v1.4.47 W4 — `isDragging`
-    // raises the row visually (elevation + accent ring) so the ghost
-    // overlay is unambiguous during a drag.
-    <div
-      ref={setNodeRef}
-      style={style}
-      data-slot="widget-row"
-      data-dragging={isDragging ? "true" : undefined}
-      className={`border-border bg-background/30 flex min-h-12 flex-wrap items-center gap-2 rounded-md border px-3 py-2 sm:flex-nowrap ${
-        isDragging ? "ring-primary z-10 opacity-90 shadow-lg ring-2" : ""
-      }`}
-    >
-      <button
-        type="button"
-        {...attributes}
-        {...listeners}
-        aria-label={`${labels.dragHandle}: ${labels.widgetLabel}`}
-        // v1.4.47 — `aria-describedby` is set after `{...attributes}`
-        // so our shared hint paragraph wins over dnd-kit's own announcer
-        // hookup. The announcer still fires on drag-start / drag-over /
-        // drag-end via the screenReaderInstructions slot below.
-        aria-describedby={dragHintId}
-        title={labels.dragHandle}
-        disabled={disabled}
-        data-slot="widget-drag-handle"
-        // v1.4.47 W10 design-H1 — extend the WCAG 2.5.5 hit target to
-        // 44 × 44 px via a `::before` pseudo-element while keeping the
-        // visible GripVertical at 28 px (matches the Switch primitive
-        // pattern from v1.4.43 W5-H1). v1.4.47 W10 design-M1 — drop
-        // dnd-kit's CSS transition under prefers-reduced-motion.
-        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative -m-1 inline-flex h-7 w-7 cursor-grab touch-none items-center justify-center rounded transition-colors before:absolute before:inset-[-8px] before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none"
-      >
-        <GripVertical className="h-4 w-4" />
-      </button>
-      <span className="flex-1 truncate text-sm" title={labels.widgetLabel}>
-        {labels.widgetLabel}
-      </span>
-      {/* On a phone the two switches and two arrows (~250 px) left the name
-          five characters ("Gewic…"). Below `sm` the controls wrap onto a
-          second line, right-aligned under the column heads, and the name
-          keeps the first line to itself. */}
-      <span className="basis-full sm:hidden" aria-hidden="true" />
-      <div className="flex w-12 justify-center max-sm:ml-auto">
-        <Switch
-          checked={tileChecked}
-          onCheckedChange={(v) => onToggleTile(widget.id, v)}
-          aria-label={`${labels.widgetLabel}: ${labels.tileColumn}`}
-          disabled={disabled}
-          data-slot="widget-tile-switch"
-        />
-      </div>
-      <div className="flex w-12 justify-center">
-        <Switch
-          checked={widget.visible}
-          onCheckedChange={(v) => onToggleChart(widget.id, v)}
-          aria-label={`${labels.widgetLabel}: ${labels.chartColumn}`}
-          disabled={disabled}
-          data-slot="widget-chart-switch"
-        />
-      </div>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="size-11 sm:size-9"
-        onClick={() => onMove(widget.id, -1)}
-        disabled={index === 0 || disabled}
-        aria-label={labels.moveUp}
-      >
-        <ArrowUp className="h-4 w-4" />
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="size-11 sm:size-9"
-        onClick={() => onMove(widget.id, 1)}
-        disabled={index === total - 1 || disabled}
-        aria-label={labels.moveDown}
-      >
-        <ArrowDown className="h-4 w-4" />
-      </Button>
-    </div>
-  );
-}
-
-/**
- * issue #581 — one row in the native-only group: the same two switches as a
- * widget row above, without the drag handle or the arrow buttons. Placement
- * of these widgets belongs to the client that draws them, so the web offers
- * visibility and nothing it cannot honour.
- */
-function StaticWidgetRow({
-  widget,
-  disabled,
-  labels,
-  onToggleTile,
-  onToggleChart,
-}: {
-  widget: {
-    id: DashboardWidgetCatalogueId;
-    visible: boolean;
-    tileVisible?: boolean;
-    order: number;
-  };
-  disabled: boolean;
-  labels: { tileColumn: string; chartColumn: string; widgetLabel: string };
-  onToggleTile: (id: DashboardWidgetCatalogueId, value: boolean) => void;
-  onToggleChart: (id: DashboardWidgetCatalogueId, value: boolean) => void;
-}) {
-  const tileChecked =
-    typeof widget.tileVisible === "boolean"
-      ? widget.tileVisible
-      : widget.visible;
-
-  return (
-    <div
-      data-slot="native-widget-row"
-      data-widget-id={widget.id}
-      className="border-border bg-background/30 flex min-h-12 items-center gap-2 rounded-md border px-3 py-2"
-    >
-      <span className="flex-1 truncate text-sm" title={labels.widgetLabel}>
-        {labels.widgetLabel}
-      </span>
-      <div className="flex w-12 justify-center">
-        <Switch
-          checked={tileChecked}
-          onCheckedChange={(v) => onToggleTile(widget.id, v)}
-          aria-label={`${labels.widgetLabel}: ${labels.tileColumn}`}
-          disabled={disabled}
-          data-slot="widget-tile-switch"
-        />
-      </div>
-      <div className="flex w-12 justify-center">
-        <Switch
-          checked={widget.visible}
-          onCheckedChange={(v) => onToggleChart(widget.id, v)}
-          aria-label={`${labels.widgetLabel}: ${labels.chartColumn}`}
-          disabled={disabled}
-          data-slot="widget-chart-switch"
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/settings/dashboard-layout/hero-settings-fieldset.tsx b/src/components/settings/dashboard-layout/hero-settings-fieldset.tsx
new file mode 100644
index 000000000..208fc71b3
--- /dev/null
+++ b/src/components/settings/dashboard-layout/hero-settings-fieldset.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { useId } from "react";
+
+import { Label } from "@/components/ui/label";
+import { NativeSelect } from "@/components/ui/native-select";
+import { Switch } from "@/components/ui/switch";
+import { PRIORITY_ITEM_KINDS } from "@/lib/daily/priority-item";
+import type { DashboardLayout } from "@/lib/dashboard-layout";
+import { useTranslations } from "@/lib/i18n/context";
+
+import { HERO_ITEM_LABEL_KEYS } from "./layout-model";
+import type { DashboardLayoutDraft } from "./use-dashboard-layout-draft";
+
+/**
+ * The top card's settings: whether it shows, what leads it (the health score
+ * or the reminders rail), and which highlights may appear in it.
+ */
+export function HeroSettingsFieldset({
+  layout,
+  draft,
+}: {
+  layout: DashboardLayout;
+  draft: DashboardLayoutDraft;
+}) {
+  const { t } = useTranslations();
+  const heroDescriptionId = useId();
+  const heroNotificationNoteId = useId();
+  const heroContentSelectId = useId();
+  const todayCardSwitchId = useId();
+  const { saveMutation, setTodayCardVisible, setHeroContent, toggleHeroItem } =
+    draft;
+  return (
+    <fieldset
+      aria-describedby={`${heroDescriptionId} ${heroNotificationNoteId}`}
+      data-slot="hero-content-settings"
+      className="border-border bg-background/30 space-y-3 rounded-lg border px-3 py-3"
+    >
+      <legend className="text-foreground text-sm font-medium">
+        {t("dashboard.heroItemsTitle")}
+      </legend>
+      <p id={heroDescriptionId} className="text-muted-foreground text-xs">
+        {t("dashboard.heroItemsDescription")}
+      </p>
+      {/* The top card itself can be switched off. Shown is the
+          default; the choices below shape the card while it is shown. */}
+      <div className="flex min-h-11 items-center justify-between gap-3">
+        <Label htmlFor={todayCardSwitchId} className="text-sm font-medium">
+          {t("dashboard.todayCardVisible")}
+        </Label>
+        <Switch
+          id={todayCardSwitchId}
+          checked={layout.todayCardVisible !== false}
+          onCheckedChange={setTodayCardVisible}
+          disabled={saveMutation.isPending}
+          data-slot="today-card-switch"
+        />
+      </div>
+      {/* Hero primary content — a single labelled select beside the
+          highlight toggles. "score" keeps the health-score read;
+          "reminders" promotes the highlight rail into the hero slot. */}
+      <div className="space-y-1.5">
+        <Label htmlFor={heroContentSelectId} className="text-sm font-medium">
+          {t("dashboard.heroContentTitle")}
+        </Label>
+        <NativeSelect
+          id={heroContentSelectId}
+          value={layout.hero ?? "score"}
+          onChange={(event) => setHeroContent(event.target.value)}
+          disabled={saveMutation.isPending}
+          data-slot="hero-content-select"
+          className="sm:max-w-xs"
+        >
+          <option value="score">{t("dashboard.heroContentScore")}</option>
+          <option value="reminders">
+            {t("dashboard.heroContentReminders")}
+          </option>
+        </NativeSelect>
+      </div>
+      <div className="divide-border divide-y">
+        {PRIORITY_ITEM_KINDS.map((kind) => {
+          const inputId = `hero-item-${kind}`;
+          const checked = (
+            layout.enabledHeroItemKinds ?? PRIORITY_ITEM_KINDS
+          ).includes(kind);
+          return (
+            <div
+              key={kind}
+              className="flex min-h-11 items-center justify-between gap-3 py-2"
+            >
+              <Label htmlFor={inputId} className="text-sm font-medium">
+                {t(HERO_ITEM_LABEL_KEYS[kind])}
+              </Label>
+              <Switch
+                id={inputId}
+                checked={checked}
+                onCheckedChange={(value) => toggleHeroItem(kind, value)}
+                disabled={saveMutation.isPending}
+                aria-label={t(HERO_ITEM_LABEL_KEYS[kind])}
+                data-slot="hero-item-switch"
+                data-kind={kind}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <p id={heroNotificationNoteId} className="text-foreground text-sm">
+        {t("dashboard.heroItemsNotificationNote")}
+      </p>
+    </fieldset>
+  );
+}
diff --git a/src/components/settings/dashboard-layout/layout-model.ts b/src/components/settings/dashboard-layout/layout-model.ts
new file mode 100644
index 000000000..a5dacf291
--- /dev/null
+++ b/src/components/settings/dashboard-layout/layout-model.ts
@@ -0,0 +1,139 @@
+import type {
+  DashboardLayout,
+  DashboardWidgetId,
+} from "@/lib/dashboard-layout";
+import {
+  PRIORITY_ITEM_KINDS,
+  type PriorityItemKind,
+} from "@/lib/daily/priority-item";
+
+/**
+ * Pure reorder helper shared by the arrow buttons and the
+ * @dnd-kit drag-end handler. Both surfaces produce the same `widgets[]`
+ * shape (`order: 0..n-1`) so the existing PUT contract stays untouched
+ * and either input mode flushes via the same Save mutation. Exported so
+ * the unit test can pin the contract without spinning up a DndContext.
+ *
+ * Also drives the arrow-button `move()` handler below;
+ * the previous in-file swap-and-renumber implementation was a second
+ * copy of the same logic.
+ */
+export function reorderWidgets(
+  widgets: readonly { id: string; order: number }[],
+  fromId: string,
+  toId: string,
+): { id: string; order: number }[] {
+  const sorted = [...widgets].sort((a, b) => a.order - b.order);
+  const fromIdx = sorted.findIndex((w) => w.id === fromId);
+  const toIdx = sorted.findIndex((w) => w.id === toId);
+  if (fromIdx < 0 || toIdx < 0 || fromIdx === toIdx) {
+    return sorted.map((w, i) => ({ ...w, order: i }));
+  }
+  const next = [...sorted];
+  const [removed] = next.splice(fromIdx, 1);
+  next.splice(toIdx, 0, removed);
+  return next.map((w, i) => ({ ...w, order: i }));
+}
+
+export function setHeroItemKindEnabled(
+  enabledKinds: readonly PriorityItemKind[] | undefined,
+  kind: PriorityItemKind,
+  enabled: boolean,
+): PriorityItemKind[] {
+  const next = new Set(enabledKinds ?? PRIORITY_ITEM_KINDS);
+  if (enabled) next.add(kind);
+  else next.delete(kind);
+  return PRIORITY_ITEM_KINDS.filter((itemKind) => next.has(itemKind));
+}
+
+/**
+ * Merge the `{ id, order }` shape returned by
+ * `reorderWidgets()` back into the full `DashboardWidgetConfig[]` so
+ * the section's draft state keeps every per-row flag (`visible`,
+ * `tileVisible`) while the order is rewritten. The arrow buttons and
+ * the @dnd-kit drag-end handler both flow through this helper so
+ * neither surface can silently drop a flag.
+ */
+export function mergeReorderIntoLayout(
+  widgets: DashboardLayout["widgets"],
+  reordered: readonly { id: string; order: number }[],
+): DashboardLayout["widgets"] {
+  const byId = new Map(widgets.map((w) => [w.id, w]));
+  return reordered.map((r, i) => {
+    const original = byId.get(r.id as DashboardWidgetId);
+    if (!original) {
+      // Defence-in-depth dev warning for the orphan branch.
+      // Today this branch is statically unreachable: every id in
+      // `reordered` is sourced from `layout.widgets`, so `byId.get`
+      // always hits. The upcoming per-tile Suspense refactor will
+      // introduce dynamic widgets where this invariant could break;
+      // the warning fires in dev only so a regression surfaces in the
+      // console instead of silently dropping the row via the cast.
+      if (
+        typeof window !== "undefined" &&
+        process.env.NODE_ENV === "development"
+      ) {
+        console.warn(
+          `mergeReorderIntoLayout: orphan widget id "${r.id}" dropped`,
+        );
+      }
+      return { ...r, order: i } as never;
+    }
+    return { ...original, order: i };
+  });
+}
+
+/** Serialise layout saves and resets against the same endpoint. */
+export const DASHBOARD_WIDGETS_MUTATION_SCOPE = "dashboard-widgets" as const;
+
+export const WIDGET_LABEL_KEYS: Record<DashboardWidgetId, string> = {
+  weight: "dashboard.weight",
+  bp: "dashboard.bloodPressure",
+  pulse: "dashboard.pulse",
+  bodyFat: "dashboard.bodyFat",
+  mood: "dashboard.mood",
+  medications: "dashboard.medications",
+  sleep: "measurements.typeSleep",
+  steps: "measurements.typeSteps",
+  glucose: "measurements.typeBloodGlucose",
+  totalBodyWater: "measurements.typeTotalBodyWater",
+  boneMass: "measurements.typeBoneMass",
+  // Muscle mass joins the body-composition strip tiles.
+  muscleMass: "measurements.typeMuscleMass",
+  bpInTarget: "dashboard.bpInTarget",
+  oxygenSaturation: "measurements.typeOxygenSaturation",
+  // HRV + respiratory rate graduate to web-writable widgets.
+  hrv: "measurements.typeHeartRateVariability",
+  respiratoryRate: "measurements.typeRespiratoryRate",
+  achievements: "achievements.title",
+  // VO2 max secondary-metric tile (opt-in).
+  vo2Max: "dashboard.vo2Max",
+  // Recent workouts tile (default-on).
+  recentWorkouts: "dashboard.recentWorkouts.title",
+  // V1.10 additive HealthKit signals, now pinnable. Each
+  // reuses the existing measurement-type label key.
+  cardioRecovery: "measurements.typeCardioRecovery",
+  sixMinuteWalk: "measurements.typeSixMinuteWalkDistance",
+  stairAscentSpeed: "measurements.typeStairAscentSpeed",
+  stairDescentSpeed: "measurements.typeStairDescentSpeed",
+  breathingDisturbances: "measurements.typeBreathingDisturbances",
+  wristTemperature: "measurements.typeWristTemperature",
+  falls: "measurements.typeFallCount",
+  walkingSteadiness: "measurements.typeWalkingSteadiness",
+  // Vorsorge preventive-care summary card.
+  vorsorge: "measurementReminders.sectionTitle",
+  // Fluid intake strip tile (nutrients-store-backed).
+  waterIntake: "nutrients.names.water",
+};
+
+export const HERO_ITEM_LABEL_KEYS: Record<PriorityItemKind, string> = {
+  coach_checkin: "dashboard.heroItems.coach_checkin",
+  dose_window: "dashboard.heroItems.dose_window",
+  preventive_care: "dashboard.heroItems.preventive_care",
+  sync_issue: "dashboard.heroItems.sync_issue",
+  milestone: "dashboard.heroItems.milestone",
+  ecg_new_recording: "dashboard.heroItems.ecg_new_recording",
+  tension_window: "dashboard.heroItems.tension_window",
+  same_time_baseline: "dashboard.heroItems.same_time_baseline",
+  upcoming_visit: "dashboard.heroItems.upcoming_visit",
+};
diff --git a/src/components/settings/dashboard-layout/use-dashboard-layout-draft.ts b/src/components/settings/dashboard-layout/use-dashboard-layout-draft.ts
new file mode 100644
index 000000000..e931c362c
--- /dev/null
+++ b/src/components/settings/dashboard-layout/use-dashboard-layout-draft.ts
@@ -0,0 +1,308 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { DragEndEvent } from "@dnd-kit/core";
+import { toast } from "sonner";
+
+import { apiDelete, apiGet, apiPut, ApiError } from "@/lib/api/api-fetch";
+import type { PriorityItemKind } from "@/lib/daily/priority-item";
+import type {
+  DashboardLayout,
+  DashboardLayoutWithToken,
+  DashboardWidgetCatalogueId,
+  DashboardWidgetId,
+} from "@/lib/dashboard-layout";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+
+import {
+  DASHBOARD_WIDGETS_MUTATION_SCOPE,
+  mergeReorderIntoLayout,
+  reorderWidgets,
+  setHeroItemKindEnabled,
+} from "./layout-model";
+
+/**
+ * The layout editor's state: the tokened server copy, a local draft that
+ * every toggle and move edits (null means "use the server copy"), and the
+ * save and reset writes, which also refresh the dashboard snapshot and the
+ * daily digest so the dashboard mounts onto the saved layout.
+ */
+export function useDashboardLayoutDraft() {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const { data: remote, isLoading } = useQuery({
+    queryKey: queryKeys.dashboardWidgets(),
+    queryFn: async () => {
+      return apiGet<DashboardLayoutWithToken>("/api/dashboard/widgets");
+    },
+    // The home RSC seeds
+    // `dashboardWidgets()` from the dashboard SNAPSHOT layout, which carries
+    // NO `updatedAt` optimistic-concurrency token (it is a token-less
+    // `DashboardLayout`, not the `DashboardLayoutWithToken` this section's GET
+    // returns). Within the global 5-min `staleTime` a visit to `/` then Settings
+    // read that seeded token-less value with no mount refetch, so `readBaseToken()`
+    // returned undefined, the Save sent no `baseUpdatedAt`, and the route's
+    // compat fallback silently reverted to last-write-wins — disabling the
+    // just-shipped 409 belt. Force a mount refetch so this section always holds
+    // its own tokened GET response and every write carries the base token. The
+    // smallest correct option: the alternatives (a distinct seed key, or
+    // threading the token through the snapshot layout) touch the home client and
+    // the server snapshot shape; this is one line, config-independent, and makes
+    // the settings query authoritative for its own tokened read.
+    refetchOnMount: "always",
+  });
+
+  // Toggles the SERVER resolved as unavailable for this account — a switch
+  // that is on but can never paint a tile is exactly the confusion this
+  // screen must not create. Decided server-side (see `unavailableWidgetIds`)
+  // so this screen needs no dashboard data of its own. Absent field, or a
+  // query still in flight, means nothing is dead: the row shows, which is
+  // the fail-open direction the module gate below also takes.
+  const unavailableIds = useMemo(
+    () => new Set(remote?.unavailableWidgetIds ?? []),
+    [remote?.unavailableWidgetIds],
+  );
+
+  /**
+   * The freshest optimistic-concurrency token the
+   * client knows. Read straight from the widgets query cache at mutate time
+   * (not a render snapshot) so it reflects whatever the last settled write
+   * or refetch advanced it to. Every write sends it as `baseUpdatedAt`.
+   */
+  const readBaseToken = () =>
+    queryClient.getQueryData<DashboardLayoutWithToken>(
+      queryKeys.dashboardWidgets(),
+    )?.updatedAt;
+
+  // Local draft state — null means "use server copy". User edits create the
+  // draft so reordering/toggling doesn't fire a network call per click; Save
+  // flushes it, Cancel clears it. Avoids a setState-in-effect (eslint
+  // react-hooks/set-state-in-effect is strict in this repo).
+  const [draft, setDraft] = useState<DashboardLayout | null>(null);
+  const layout = draft ?? remote ?? null;
+
+  const saveMutation = useMutation({
+    scope: { id: DASHBOARD_WIDGETS_MUTATION_SCOPE },
+    mutationFn: async (next: DashboardLayout) => {
+      return apiPut<DashboardLayoutWithToken>("/api/dashboard/widgets", {
+        ...next,
+        // Guard the write on the token this edit was based on.
+        baseUpdatedAt: readBaseToken(),
+      });
+    },
+    onSuccess: (saved) => {
+      queryClient.setQueryData(queryKeys.dashboardWidgets(), saved);
+      // The Startseite reads its layout (tile/chart visibility,
+      // order, comparison baseline, hero toggle) from the dashboard
+      // SNAPSHOT, not from this `dashboardWidgets` key. Without an
+      // invalidation the snapshot keeps its cached layout and the dashboard
+      // looks stale until a manual reload. Invalidate the snapshot so the
+      // next visit (or open tab) re-reads the saved layout immediately.
+      //
+      // `refetchType: "all"` is load-bearing: while the user sits on this
+      // settings page the dashboard is UNMOUNTED, so its snapshot cell is
+      // inactive — the default `refetchType: "active"` only marks it stale,
+      // and the snapshot query's deliberate `refetchOnMount: false`
+      // (use-dashboard-snapshot.ts) then suppresses the mount-time refetch
+      // on a same-tab navigation back to `/`. The saved tile selection only
+      // surfaced on the 120 s poll or a window-focus flick ("saved but the
+      // dashboard shows old tiles"). Refetching ALL matching cells fires the
+      // request right here, so the dashboard mounts onto fresh data.
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.dashboardSnapshot(),
+        refetchType: "all",
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.dailyDigest(),
+        refetchType: "all",
+      });
+      setDraft(null);
+      toast.success(t("dashboard.layoutSaveSuccess"));
+    },
+    onError: (err) => {
+      // A 409 means another client committed since this edit was based.
+      // Refetch the winning layout so the base token advances, keep the draft,
+      // and let the user save the change again.
+      if (err instanceof ApiError && err.status === 409) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.dashboardWidgets(),
+        });
+        toast.message(t("dashboard.layoutConflictReloaded"));
+        return;
+      }
+      showErrorToast(t("dashboard.layoutSaveError"), { cause: err });
+    },
+  });
+
+  const resetMutation = useMutation({
+    scope: { id: DASHBOARD_WIDGETS_MUTATION_SCOPE },
+    mutationFn: async () => {
+      return apiDelete<DashboardLayoutWithToken>("/api/dashboard/widgets");
+    },
+    onSuccess: (saved) => {
+      queryClient.setQueryData(queryKeys.dashboardWidgets(), saved);
+      // Same snapshot invalidation as the save path so a reset
+      // to defaults reflects on the Startseite without a manual reload.
+      // `refetchType: "all"` for the same reason as the save path: the
+      // unmounted snapshot cell must refetch NOW, not on its next poll.
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.dashboardSnapshot(),
+        refetchType: "all",
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.dailyDigest(),
+        refetchType: "all",
+      });
+      setDraft(null);
+      toast.success(t("dashboard.layoutResetSuccess"));
+    },
+  });
+
+  const edits = layoutEdits(layout, setDraft);
+
+  // Presence of a draft implies dirty — no JSON comparison needed.
+  const dirty = draft !== null && layout !== null;
+
+  return {
+    remote,
+    isLoading,
+    unavailableIds,
+    layout,
+    setDraft,
+    dirty,
+    saveMutation,
+    resetMutation,
+    ...edits,
+  };
+}
+
+export type DashboardLayoutDraft = ReturnType<typeof useDashboardLayoutDraft>;
+
+/**
+ * The draft edits: the tile and chart switches, the top card's settings, and
+ * reordering by arrow or drag. Each writes a new draft from the current
+ * layout; nothing is sent until Save.
+ */
+function layoutEdits(
+  layout: DashboardLayout | null,
+  setDraft: (next: DashboardLayout | null) => void,
+) {
+  function toggle(widgetId: DashboardWidgetCatalogueId, visible: boolean) {
+    if (!layout) return;
+    setDraft({
+      ...layout,
+      widgets: layout.widgets.map((w) =>
+        w.id === widgetId ? { ...w, visible } : w,
+      ),
+    });
+  }
+
+  /**
+   * Independent toggle for the *strip tile* (the upper
+   * row of trend cards). Until v1.4.14 a single switch controlled both
+   * the tile AND the chart for the same metric, which the maintainer found too
+   * coarse: they wanted a chart visible without the tile (for metrics they
+   * tracks without wanting the at-a-glance number) or vice versa.
+   */
+  function toggleTile(
+    widgetId: DashboardWidgetCatalogueId,
+    tileVisible: boolean,
+  ) {
+    if (!layout) return;
+    setDraft({
+      ...layout,
+      widgets: layout.widgets.map((w) =>
+        w.id === widgetId ? { ...w, tileVisible } : w,
+      ),
+    });
+  }
+
+  function toggleHeroItem(kind: PriorityItemKind, enabled: boolean) {
+    if (!layout) return;
+    setDraft({
+      ...layout,
+      enabledHeroItemKinds: setHeroItemKindEnabled(
+        layout.enabledHeroItemKinds,
+        kind,
+        enabled,
+      ),
+    });
+  }
+
+  /** The server-persisted on/off switch for the dashboard's top card. */
+  function setTodayCardVisible(visible: boolean) {
+    if (!layout) return;
+    setDraft({ ...layout, todayCardVisible: visible });
+  }
+
+  /**
+   * Hero primary content — the server-persisted `hero` field on the layout
+   * blob. The value set is closed ("score" | "reminders"); anything else a
+   * DOM event could carry collapses to the default rather than a cast.
+   */
+  function setHeroContent(value: string) {
+    if (!layout) return;
+    setDraft({
+      ...layout,
+      hero: value === "reminders" ? "reminders" : "score",
+    });
+  }
+
+  /**
+   * The arrow buttons now delegate to `reorderWidgets()`
+   * so the swap-and-renumber logic lives in exactly one place. The
+   * neighbour id is derived from the sorted layout index + delta;
+   * out-of-bounds clicks (top row + ArrowUp, bottom row + ArrowDown)
+   * short-circuit before the helper sees them so the button disabled
+   * state stays the single source of truth for the boundary.
+   */
+  function move(widgetId: DashboardWidgetId, delta: -1 | 1) {
+    if (!layout) return;
+    const sorted = [...layout.widgets].sort((a, b) => a.order - b.order);
+    const idx = sorted.findIndex((w) => w.id === widgetId);
+    const targetIdx = idx + delta;
+    if (idx < 0 || targetIdx < 0 || targetIdx >= sorted.length) return;
+    const neighbourId = sorted[targetIdx].id;
+    const reordered = reorderWidgets(layout.widgets, widgetId, neighbourId);
+    setDraft({
+      ...layout,
+      widgets: mergeReorderIntoLayout(layout.widgets, reordered),
+    });
+  }
+
+  /**
+   * Drag-and-drop reorder via @dnd-kit. Persists the same
+   * `order` rewrite shape the arrow buttons already use, so save / cancel
+   * / reset and the existing draft state machine work unchanged. The
+   * pointer + keyboard sensors are wired in the same `useSensors` call;
+   * keyboard a11y still also works through the legacy arrow buttons that
+   * remain on every row.
+   */
+  function handleDragEnd(event: DragEndEvent) {
+    if (!layout) return;
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const reordered = reorderWidgets(
+      layout.widgets,
+      String(active.id),
+      String(over.id),
+    );
+    setDraft({
+      ...layout,
+      widgets: mergeReorderIntoLayout(layout.widgets, reordered),
+    });
+  }
+
+  return {
+    toggle,
+    toggleTile,
+    toggleHeroItem,
+    setTodayCardVisible,
+    setHeroContent,
+    move,
+    handleDragEnd,
+  };
+}
diff --git a/src/components/settings/dashboard-layout/widget-lists.tsx b/src/components/settings/dashboard-layout/widget-lists.tsx
new file mode 100644
index 000000000..0a7c3dde2
--- /dev/null
+++ b/src/components/settings/dashboard-layout/widget-lists.tsx
@@ -0,0 +1,431 @@
+"use client";
+
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ArrowDown, ArrowUp, GripVertical } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { useAuth } from "@/hooks/use-auth";
+import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
+import {
+  DASHBOARD_IOS_ONLY_WIDGET_IDS,
+  DASHBOARD_WIDGET_IDS,
+  IOS_PIN_ONLY_WIDGET_IDS,
+  type DashboardLayout,
+  type DashboardWidgetCatalogueId,
+  type DashboardWidgetId,
+} from "@/lib/dashboard-layout";
+import { NATIVE_ONLY_WIDGET_LABEL_KEYS } from "@/lib/dashboard/widget-modules";
+import { useTranslations } from "@/lib/i18n/context";
+import { isSurfaceVisible } from "@/lib/modules/surface";
+
+import { WIDGET_LABEL_KEYS } from "./layout-model";
+import type { DashboardLayoutDraft } from "./use-dashboard-layout-draft";
+
+/**
+ * The widgets the web dashboard draws, in their order, each with its tile
+ * and chart switches, arrow buttons and a drag handle.
+ */
+export function WebWidgetList({
+  layout,
+  draft,
+  dragHintId,
+}: {
+  layout: DashboardLayout;
+  draft: DashboardLayoutDraft;
+  dragHintId: string;
+}) {
+  const { t } = useTranslations();
+  // A widget toggle whose owning module is disabled is a dead control (the
+  // snapshot gates the tile and chart out regardless of the switch), so the
+  // resolved module map hides those rows. Fail-open: only an explicit
+  // `false` hides one.
+  const { user } = useAuth();
+  const modules = user?.modules;
+  const {
+    unavailableIds,
+    saveMutation,
+    toggleTile,
+    toggle,
+    move,
+    handleDragEnd,
+  } = draft;
+  // Pointer for mouse and touch, keyboard for Tab + Space + arrows. The
+  // arrow buttons on every row stay the primary keyboard surface.
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      // A 6 px move before a drag starts, so the row switches keep their
+      // clicks.
+      activationConstraint: { distance: 6 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  // The stored layout now round-trips the 11 iOS-only
+  // widget ids so the native client can drop its local merge
+  // workarounds. The web Settings list has no tile/chart
+  // surface for them, so skip any id outside the web-known
+  // ids rather than render an unlabelled row with dead toggles.
+  // The skipped ids stay untouched in the persisted layout
+  // because the Save mutation PUTs `layout.widgets` whole and
+  // the server retains every catalogue id.
+  //
+  // The 8 B5 ids are WRITABLE (in
+  // `DASHBOARD_WIDGET_IDS` so the iOS pin PUT validates) but
+  // have no web render path either, so exclude
+  // `IOS_PIN_ONLY_WIDGET_IDS` too: a web toggle for them would
+  // be a silent no-op on the web dashboard.
+  const iosPinOnly = new Set<string>(IOS_PIN_ONLY_WIDGET_IDS);
+  const webWidgetIds = new Set<string>(
+    DASHBOARD_WIDGET_IDS.filter((wid) => !iosPinOnly.has(wid)),
+  );
+  const sortedWidgets = [...layout.widgets]
+    .filter((w): w is typeof w & { id: DashboardWidgetId } =>
+      webWidgetIds.has(w.id),
+    )
+    // Hide a widget toggle whose owning module is off, through the
+    // one surface map. A core widget has no owner and always shows;
+    // only an explicit `false` hides the row.
+    .filter((w) => isSurfaceVisible(`widget:${w.id}`, modules))
+    .filter((w) => !unavailableIds.has(w.id))
+    .sort((a, b) => a.order - b.order);
+  const sortedIds = sortedWidgets.map((w) => w.id);
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
+        {sortedWidgets.map((widget, index, arr) => (
+          <SortableWidgetRow
+            key={widget.id}
+            widget={widget}
+            labelKey={WIDGET_LABEL_KEYS[widget.id] ?? widget.id}
+            index={index}
+            total={arr.length}
+            dragHintId={dragHintId}
+            disabled={saveMutation.isPending}
+            labels={{
+              tileColumn: t("dashboard.layoutTileColumn"),
+              chartColumn: t("dashboard.layoutChartColumn"),
+              moveUp: t("dashboard.moveUp"),
+              moveDown: t("dashboard.moveDown"),
+              dragHandle: t("dashboard.dragHandle"),
+              widgetLabel: t(WIDGET_LABEL_KEYS[widget.id] ?? widget.id),
+            }}
+            onToggleTile={toggleTile}
+            onToggleChart={toggle}
+            onMove={move}
+          />
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+/**
+ * Widgets the mobile app draws and this page does not (#581). The native
+ * client materialises them into the same stored layout, so they get their
+ * own labelled group: the same two flags, no reordering, and only for ids the
+ * layout holds.
+ */
+export function NativeWidgetList({
+  layout,
+  draft,
+}: {
+  layout: DashboardLayout;
+  draft: DashboardLayoutDraft;
+}) {
+  const { t } = useTranslations();
+  const { user } = useAuth();
+  const modules = user?.modules;
+  const { unavailableIds, saveMutation, toggleTile, toggle } = draft;
+  const nativeOnlyIds = new Set<string>([
+    ...IOS_PIN_ONLY_WIDGET_IDS,
+    ...DASHBOARD_IOS_ONLY_WIDGET_IDS,
+  ]);
+  const nativeWidgets = layout.widgets
+    .filter((w) => nativeOnlyIds.has(w.id))
+    // Same fail-open module gate as the web list: only an explicit
+    // `false` hides the row.
+    .filter((w) => isSurfaceVisible(`widget:${w.id}`, modules))
+    .filter((w) => !unavailableIds.has(w.id))
+    .sort((a, b) => a.order - b.order);
+  if (nativeWidgets.length === 0) return null;
+  return (
+    <div
+      data-slot="native-only-widgets"
+      className="border-border/60 mt-6 space-y-2 border-t pt-4"
+    >
+      <p className="text-sm font-medium">
+        {t("dashboard.layoutNativeOnlyTitle")}
+      </p>
+      <p className="text-muted-foreground text-xs">
+        {t("dashboard.layoutNativeOnlyHint")}
+      </p>
+      <div className="text-muted-foreground flex items-center gap-2 px-3 pt-2 pb-1 text-xs font-medium tracking-wide uppercase">
+        <span className="flex-1" aria-hidden="true" />
+        <span className="w-12 text-center">
+          {t("dashboard.layoutTileColumn")}
+        </span>
+        <span className="w-12 text-center">
+          {t("dashboard.layoutChartColumn")}
+        </span>
+      </div>
+      {nativeWidgets.map((widget) => {
+        const label = t(NATIVE_ONLY_WIDGET_LABEL_KEYS[widget.id] ?? widget.id);
+        return (
+          <StaticWidgetRow
+            key={widget.id}
+            widget={widget}
+            disabled={saveMutation.isPending}
+            labels={{
+              tileColumn: t("dashboard.layoutTileColumn"),
+              chartColumn: t("dashboard.layoutChartColumn"),
+              widgetLabel: label,
+            }}
+            onToggleTile={toggleTile}
+            onToggleChart={toggle}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Sortable row primitive extracted from the section render
+ * so the @dnd-kit `useSortable` hook stays scoped to one row. Translation
+ * strings are passed in pre-resolved (rather than calling `useTranslations`
+ * inside) so this component stays cheap to re-render for the 13+ rows.
+ *
+ * The drag handle is the only listener-bearing surface — the row body
+ * stays click-through so the switches and arrow buttons keep working.
+ * Pointer activation has a 6 px distance constraint (configured on the
+ * parent sensor) so a tap on the handle never accidentally drags.
+ */
+interface SortableWidgetRowProps {
+  widget: {
+    id: DashboardWidgetId;
+    visible: boolean;
+    tileVisible?: boolean;
+    order: number;
+  };
+  labelKey: string;
+  index: number;
+  total: number;
+  dragHintId: string;
+  disabled: boolean;
+  labels: {
+    tileColumn: string;
+    chartColumn: string;
+    moveUp: string;
+    moveDown: string;
+    dragHandle: string;
+    widgetLabel: string;
+  };
+  onToggleTile: (id: DashboardWidgetId, value: boolean) => void;
+  onToggleChart: (id: DashboardWidgetId, value: boolean) => void;
+  onMove: (id: DashboardWidgetId, delta: -1 | 1) => void;
+}
+
+function SortableWidgetRow({
+  widget,
+  index,
+  total,
+  dragHintId,
+  disabled,
+  labels,
+  onToggleTile,
+  onToggleChart,
+  onMove,
+}: SortableWidgetRowProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: widget.id });
+
+  // Honour the OS `prefers-reduced-motion` preference. The
+  // rest of HealthLog pairs every transition with a `motion-reduce`
+  // companion; dnd-kit's default `transform 250ms ease` was the lone
+  // surface that ignored it. Short-circuit to `none` when reduced
+  // motion is requested so dragged rows snap to place instead of
+  // sliding through the list.
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: prefersReducedMotion() ? "none" : transition,
+  };
+
+  const tileChecked =
+    typeof widget.tileVisible === "boolean"
+      ? widget.tileVisible
+      : widget.visible;
+
+  return (
+    // Row sized at 48 px (`min-h-12`) with 44-px mobile tap
+    // targets preserved on the trailing arrow buttons (`size-11`),
+    // shrunk to `sm:size-9` on desktop. v1.4.47 W4 — `isDragging`
+    // raises the row visually (elevation + accent ring) so the ghost
+    // overlay is unambiguous during a drag.
+    <div
+      ref={setNodeRef}
+      style={style}
+      data-slot="widget-row"
+      data-dragging={isDragging ? "true" : undefined}
+      className={`border-border bg-background/30 flex min-h-12 flex-wrap items-center gap-2 rounded-md border px-3 py-2 sm:flex-nowrap ${
+        isDragging ? "ring-primary z-10 opacity-90 shadow-lg ring-2" : ""
+      }`}
+    >
+      <button
+        type="button"
+        {...attributes}
+        {...listeners}
+        aria-label={`${labels.dragHandle}: ${labels.widgetLabel}`}
+        // `aria-describedby` is set after `{...attributes}`
+        // so our shared hint paragraph wins over dnd-kit's own announcer
+        // hookup. The announcer still fires on drag-start / drag-over /
+        // drag-end via the screenReaderInstructions slot below.
+        aria-describedby={dragHintId}
+        title={labels.dragHandle}
+        disabled={disabled}
+        data-slot="widget-drag-handle"
+        // W10 design-H1 — extend the WCAG 2.5.5 hit target to
+        // 44 × 44 px via a `::before` pseudo-element while keeping the
+        // visible GripVertical at 28 px (matches the Switch primitive
+        // pattern from v1.4.43 W5-H1). v1.4.47 W10 design-M1 — drop
+        // dnd-kit's CSS transition under prefers-reduced-motion.
+        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative -m-1 inline-flex h-7 w-7 cursor-grab touch-none items-center justify-center rounded transition-colors before:absolute before:inset-[-8px] before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none"
+      >
+        <GripVertical className="h-4 w-4" />
+      </button>
+      <span className="flex-1 truncate text-sm" title={labels.widgetLabel}>
+        {labels.widgetLabel}
+      </span>
+      {/* On a phone the two switches and two arrows (~250 px) left the name
+          five characters ("Gewic…"). Below `sm` the controls wrap onto a
+          second line, right-aligned under the column heads, and the name
+          keeps the first line to itself. */}
+      <span className="basis-full sm:hidden" aria-hidden="true" />
+      <div className="flex w-12 justify-center max-sm:ml-auto">
+        <Switch
+          checked={tileChecked}
+          onCheckedChange={(v) => onToggleTile(widget.id, v)}
+          aria-label={`${labels.widgetLabel}: ${labels.tileColumn}`}
+          disabled={disabled}
+          data-slot="widget-tile-switch"
+        />
+      </div>
+      <div className="flex w-12 justify-center">
+        <Switch
+          checked={widget.visible}
+          onCheckedChange={(v) => onToggleChart(widget.id, v)}
+          aria-label={`${labels.widgetLabel}: ${labels.chartColumn}`}
+          disabled={disabled}
+          data-slot="widget-chart-switch"
+        />
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="size-11 sm:size-9"
+        onClick={() => onMove(widget.id, -1)}
+        disabled={index === 0 || disabled}
+        aria-label={labels.moveUp}
+      >
+        <ArrowUp className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="size-11 sm:size-9"
+        onClick={() => onMove(widget.id, 1)}
+        disabled={index === total - 1 || disabled}
+        aria-label={labels.moveDown}
+      >
+        <ArrowDown className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * issue #581 — one row in the native-only group: the same two switches as a
+ * widget row above, without the drag handle or the arrow buttons. Placement
+ * of these widgets belongs to the client that draws them, so the web offers
+ * visibility and nothing it cannot honour.
+ */
+function StaticWidgetRow({
+  widget,
+  disabled,
+  labels,
+  onToggleTile,
+  onToggleChart,
+}: {
+  widget: {
+    id: DashboardWidgetCatalogueId;
+    visible: boolean;
+    tileVisible?: boolean;
+    order: number;
+  };
+  disabled: boolean;
+  labels: { tileColumn: string; chartColumn: string; widgetLabel: string };
+  onToggleTile: (id: DashboardWidgetCatalogueId, value: boolean) => void;
+  onToggleChart: (id: DashboardWidgetCatalogueId, value: boolean) => void;
+}) {
+  const tileChecked =
+    typeof widget.tileVisible === "boolean"
+      ? widget.tileVisible
+      : widget.visible;
+
+  return (
+    <div
+      data-slot="native-widget-row"
+      data-widget-id={widget.id}
+      className="border-border bg-background/30 flex min-h-12 items-center gap-2 rounded-md border px-3 py-2"
+    >
+      <span className="flex-1 truncate text-sm" title={labels.widgetLabel}>
+        {labels.widgetLabel}
+      </span>
+      <div className="flex w-12 justify-center">
+        <Switch
+          checked={tileChecked}
+          onCheckedChange={(v) => onToggleTile(widget.id, v)}
+          aria-label={`${labels.widgetLabel}: ${labels.tileColumn}`}
+          disabled={disabled}
+          data-slot="widget-tile-switch"
+        />
+      </div>
+      <div className="flex w-12 justify-center">
+        <Switch
+          checked={widget.visible}
+          onCheckedChange={(v) => onToggleChart(widget.id, v)}
+          aria-label={`${labels.widgetLabel}: ${labels.chartColumn}`}
+          disabled={disabled}
+          data-slot="widget-chart-switch"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/settings/managed-record-settings-labels.ts b/src/components/settings/managed-record-settings-labels.ts
index 7e4a54d4c..c581be5d4 100644
--- a/src/components/settings/managed-record-settings-labels.ts
+++ b/src/components/settings/managed-record-settings-labels.ts
@@ -2,7 +2,7 @@
  * The option lists and label keys of the managed-record settings forms:
  * which Coach metrics and data clusters a guardian can exclude, and the
  * bundle key each option, insights section and threshold metric renders
- * with. Data only; the forms live in `managed-record-settings-section.tsx`.
+ * with. Data only; the forms live in `managed-record/`.
  */
 import type { InsightsSectionId } from "@/lib/insights-layout";
 import type { ThresholdMetric } from "@/lib/analytics/effective-range";
diff --git a/src/components/settings/managed-record-settings-section.tsx b/src/components/settings/managed-record-settings-section.tsx
index 219578aed..62577dbb0 100644
--- a/src/components/settings/managed-record-settings-section.tsx
+++ b/src/components/settings/managed-record-settings-section.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import { useState, type FormEvent, type ReactNode } from "react";
+import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Settings } from "lucide-react";
 
+import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { useAuth } from "@/hooks/use-auth";
 import { apiGet, apiPatch } from "@/lib/api/api-fetch";
 import { useTranslations } from "@/lib/i18n/context";
-import { normalizeInsightsTileId } from "@/lib/insights-layout";
-import { MODULE_REGISTRY } from "@/lib/modules/registry";
 import {
   aiInputDependentKeys,
   invalidateKeys,
@@ -16,42 +15,19 @@ import {
 } from "@/lib/query-keys";
 import {
   assertRecordSettingsResponseForRecord,
-  MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS,
   safeParseManagedRecordSettingsPatch,
   type ManagedRecordSettingsFamily,
 } from "@/lib/record-settings";
-import {
-  METRIC_BOUNDS,
-  type ThresholdMetric,
-} from "@/lib/analytics/effective-range";
-import { ALL_METRICS } from "@/lib/validations/thresholds";
-import { SUB_PAGE_TABS } from "@/components/insights/insights-tab-strip";
-import { Button } from "@/components/ui/button";
-import { DateField } from "@/components/ui/date-field";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { NativeSelect } from "@/components/ui/native-select";
-import {
-  COACH_HISTORY_WINDOWS,
-  HISTORY_REACH_DAYS,
-  lookbackText,
-} from "@/lib/ai/coach/history-reach";
-import type { CoachDefaultWindow } from "@/lib/validations/coach-prefs";
-import { QueryErrorCard } from "@/components/ui/query-error-card";
-import { Switch } from "@/components/ui/switch";
-import { SettingsCardActions } from "./_card-actions";
+
 import { SettingsCardHeader } from "./_card-header";
+import { CoachSettingsForm } from "./managed-record/coach-form";
+import type { SettingsFormProps } from "./managed-record/form-kit";
+import { InsightsSettingsForm } from "./managed-record/insights-form";
+import { ModulesSettingsForm } from "./managed-record/modules-form";
+import { NotificationsSettingsForm } from "./managed-record/notifications-form";
+import { ProfileSettingsForm } from "./managed-record/profile-form";
+import { ThresholdsSettingsForm } from "./managed-record/thresholds-form";
 import { SettingsCard } from "./settings-card";
-import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
-import { locales } from "@/lib/i18n/config";
-import {
-  COACH_EXCLUDE_METRICS,
-  COACH_DATA_CLUSTERS,
-  COACH_EXCLUDE_METRIC_LABEL_KEYS,
-  COACH_DATA_CLUSTER_LABEL_KEYS,
-  INSIGHTS_SECTION_LABEL_KEYS,
-  METRIC_LABEL_KEYS,
-} from "./managed-record-settings-labels";
 
 interface ManagedRecordSettingsResponse {
   recordId: string;
@@ -63,885 +39,6 @@ type ManagedSettingsFamily = Exclude<
   ManagedRecordSettingsFamily,
   "integrations"
 >;
-type SettingsFormProps = {
-  settings: Record<string, unknown>;
-  disabled: boolean;
-  onSave: (patch: unknown) => void;
-  saveLabel: string;
-  /** Save/validation error, rendered ABOVE the action row per §12. */
-  error?: ReactNode;
-};
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return value !== null && typeof value === "object" && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : {};
-}
-
-function asString(value: unknown, fallback = ""): string {
-  return typeof value === "string" ? value : fallback;
-}
-
-function asNumber(value: unknown, fallback: number): number {
-  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
-}
-
-function asStringArray(value: unknown): string[] {
-  return Array.isArray(value)
-    ? value.filter((entry): entry is string => typeof entry === "string")
-    : [];
-}
-
-function formNumber(form: FormData, name: string, fallback: number): number {
-  const value = Number(form.get(name));
-  return Number.isFinite(value) ? value : fallback;
-}
-
-function ownStringValue(inventory: object, id: string): string | undefined {
-  if (!Object.hasOwn(inventory, id)) return undefined;
-  const value = Reflect.get(inventory, id);
-  return typeof value === "string" ? value : undefined;
-}
-
-function coachMetricLabel(
-  t: ReturnType<typeof useTranslations>["t"],
-  metric: (typeof COACH_EXCLUDE_METRICS)[number],
-): string {
-  const labelKey = ownStringValue(COACH_EXCLUDE_METRIC_LABEL_KEYS, metric);
-  return labelKey
-    ? t(labelKey)
-    : t("settings.sharedRecord.managedSettings.insights.unknownItem");
-}
-
-function coachClusterLabel(
-  t: ReturnType<typeof useTranslations>["t"],
-  cluster: (typeof COACH_DATA_CLUSTERS)[number],
-): string {
-  const labelKey = ownStringValue(COACH_DATA_CLUSTER_LABEL_KEYS, cluster);
-  return labelKey
-    ? t(labelKey)
-    : t("settings.sharedRecord.managedSettings.insights.unknownItem");
-}
-
-function insightItemLabel(
-  t: ReturnType<typeof useTranslations>["t"],
-  kind: "section" | "tile",
-  id: string,
-): string {
-  if (kind === "section") {
-    const labelKey = ownStringValue(INSIGHTS_SECTION_LABEL_KEYS, id);
-    return labelKey
-      ? t(labelKey)
-      : t("settings.sharedRecord.managedSettings.insights.unknownItem");
-  }
-
-  const normalizedId = normalizeInsightsTileId(id);
-  if (normalizedId === "overview") return t("insights.navOverview");
-  if (!Object.hasOwn(SUB_PAGE_TABS, normalizedId)) {
-    return t("settings.sharedRecord.managedSettings.insights.unknownItem");
-  }
-
-  const labelKey =
-    SUB_PAGE_TABS[normalizedId as keyof typeof SUB_PAGE_TABS]?.labelKey;
-  return typeof labelKey === "string"
-    ? t(labelKey)
-    : t("settings.sharedRecord.managedSettings.insights.unknownItem");
-}
-
-/**
- * The form footer, §12: the error line sits ABOVE the action row, and the
- * action row (`SettingsCardActions`) is the last thing in the form. `span`
- * lets a grid form put the footer in a full-width cell.
- */
-function FormFooter({
-  disabled,
-  label,
-  error,
-  span,
-}: {
-  disabled: boolean;
-  label: string;
-  error?: ReactNode;
-  span?: string;
-}) {
-  return (
-    <div className={span ? `${span} space-y-3` : "space-y-3"}>
-      {error ? (
-        <p className="text-destructive text-sm" role="alert">
-          {error}
-        </p>
-      ) : null}
-      <SettingsCardActions>
-        <Button disabled={disabled} type="submit">
-          {label}
-        </Button>
-      </SettingsCardActions>
-    </div>
-  );
-}
-
-/**
- * A managed-settings toggle row — a `<Switch>` (the same primitive the owner
- * module section uses) paired with a hidden mirror input so the FormData
- * submit still reads `name === "on"`. Uncontrolled at the DOM level, controlled
- * in React so the switch and its mirror stay in lockstep.
- */
-function ManagedSwitchRow({
-  name,
-  label,
-  defaultChecked,
-  disabled,
-  className,
-}: {
-  name: string;
-  label: string;
-  defaultChecked: boolean;
-  disabled: boolean;
-  className?: string;
-}) {
-  const id = `managed-switch-${name}`;
-  const [on, setOn] = useState(defaultChecked);
-  return (
-    <div
-      className={className ?? "flex items-center justify-between gap-3 text-sm"}
-    >
-      <Label htmlFor={id} className="font-normal">
-        {label}
-      </Label>
-      <Switch
-        id={id}
-        checked={on}
-        onCheckedChange={setOn}
-        disabled={disabled}
-        aria-label={label}
-        className="shrink-0"
-      />
-      <input name={name} type="hidden" value={on ? "on" : "off"} />
-    </div>
-  );
-}
-
-function ProfileSettingsForm({
-  settings,
-  disabled,
-  onSave,
-  saveLabel,
-  error,
-}: SettingsFormProps) {
-  const { t } = useTranslations();
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    const displayName = asString(form.get("displayName")).trim();
-    const heightValue = asString(form.get("heightCm")).trim();
-    onSave({
-      displayName: displayName || null,
-      heightCm: heightValue === "" ? null : Number(heightValue),
-      dateOfBirth: asString(form.get("dateOfBirth")) || null,
-      gender: asString(form.get("gender")) || null,
-      locale: asString(form.get("locale")) || null,
-      timezone: asString(form.get("timezone")),
-      unitPreference: asString(form.get("unitPreference")),
-      timeFormat: asString(form.get("timeFormat")),
-      dateFormat: asString(form.get("dateFormat")),
-    });
-  }
-
-  return (
-    <form className="grid gap-4 sm:grid-cols-2" onSubmit={submit}>
-      <label className="grid gap-1 text-sm" htmlFor="managed-display-name">
-        {t("settings.sharedRecord.managedSettings.profile.displayName")}
-        <Input
-          defaultValue={asString(settings.displayName)}
-          disabled={disabled}
-          id="managed-display-name"
-          name="displayName"
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-height">
-        {t("settings.sharedRecord.managedSettings.profile.height")}
-        <Input
-          defaultValue={
-            settings.heightCm === null ? "" : String(settings.heightCm ?? "")
-          }
-          disabled={disabled}
-          id="managed-height"
-          max="300"
-          min="30"
-          name="heightCm"
-          type="number"
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-date-of-birth">
-        {t("settings.sharedRecord.managedSettings.profile.dateOfBirth")}
-        {/* v1.25.4 — the profile date must not depend on the browser's date
-            parsing; DateField displays in the user's order and submits ISO
-            through its hidden mirror. */}
-        <DateField
-          defaultValue={asString(settings.dateOfBirth)}
-          disabled={disabled}
-          id="managed-date-of-birth"
-          name="dateOfBirth"
-          autoComplete="bday"
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-gender">
-        {t("settings.sharedRecord.managedSettings.profile.gender")}
-        <NativeSelect
-          defaultValue={asString(settings.gender)}
-          disabled={disabled}
-          id="managed-gender"
-          name="gender"
-        >
-          <option value="">
-            {t("settings.sharedRecord.managedSettings.profile.notSpecified")}
-          </option>
-          <option value="MALE">
-            {t("settings.sharedRecord.managedSettings.profile.male")}
-          </option>
-          <option value="FEMALE">
-            {t("settings.sharedRecord.managedSettings.profile.female")}
-          </option>
-          <option value="OTHER">
-            {t("settings.sharedRecord.managedSettings.profile.other")}
-          </option>
-        </NativeSelect>
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-locale">
-        {t("settings.sharedRecord.managedSettings.profile.locale")}
-        <NativeSelect
-          defaultValue={asString(settings.locale)}
-          disabled={disabled}
-          id="managed-locale"
-          name="locale"
-        >
-          <option value="">
-            {t("settings.sharedRecord.managedSettings.profile.systemDefault")}
-          </option>
-          {locales.map((locale) => (
-            <option key={locale} value={locale}>
-              {locale}
-            </option>
-          ))}
-        </NativeSelect>
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-timezone">
-        {t("settings.sharedRecord.managedSettings.profile.timezone")}
-        <Input
-          defaultValue={asString(settings.timezone, DEFAULT_TIMEZONE)}
-          disabled={disabled}
-          id="managed-timezone"
-          name="timezone"
-          required
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-units">
-        {t("settings.sharedRecord.managedSettings.profile.units")}
-        <NativeSelect
-          defaultValue={asString(settings.unitPreference, "metric")}
-          disabled={disabled}
-          id="managed-units"
-          name="unitPreference"
-        >
-          <option value="metric">
-            {t("settings.sharedRecord.managedSettings.profile.metric")}
-          </option>
-          <option value="imperial">
-            {t("settings.sharedRecord.managedSettings.profile.imperial")}
-          </option>
-        </NativeSelect>
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-time-format">
-        {t("settings.sharedRecord.managedSettings.profile.timeFormat")}
-        <NativeSelect
-          defaultValue={asString(settings.timeFormat, "AUTO")}
-          disabled={disabled}
-          id="managed-time-format"
-          name="timeFormat"
-        >
-          <option value="AUTO">
-            {t("settings.sharedRecord.managedSettings.profile.automatic")}
-          </option>
-          <option value="H12">
-            {t("settings.sharedRecord.managedSettings.profile.hour12")}
-          </option>
-          <option value="H24">
-            {t("settings.sharedRecord.managedSettings.profile.hour24")}
-          </option>
-        </NativeSelect>
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-date-format">
-        {t("settings.sharedRecord.managedSettings.profile.dateFormat")}
-        <NativeSelect
-          defaultValue={asString(settings.dateFormat, "AUTO")}
-          disabled={disabled}
-          id="managed-date-format"
-          name="dateFormat"
-        >
-          <option value="AUTO">
-            {t("settings.sharedRecord.managedSettings.profile.automatic")}
-          </option>
-          <option value="DMY">
-            {t("settings.sharedRecord.managedSettings.profile.dateDmy")}
-          </option>
-          <option value="MDY">
-            {t("settings.sharedRecord.managedSettings.profile.dateMdy")}
-          </option>
-          <option value="YMD">
-            {t("settings.sharedRecord.managedSettings.profile.dateYmd")}
-          </option>
-        </NativeSelect>
-      </label>
-      <FormFooter
-        disabled={disabled}
-        label={saveLabel}
-        error={error}
-        span="sm:col-span-2"
-      />
-    </form>
-  );
-}
-
-/**
- * What a Modules save actually sends.
- *
- * The direct modules ride along whether or not they moved — they are one blob
- * the route merges, and a key that did not change writes the value it already
- * had. `cycleTrackingEnabled` is not one of them: it is a DELEGATED module
- * whose column the cycle gate honours OVER the sex-derived default, so sending
- * the switch's current position on every save freezes the derivation. A record
- * created with no recorded sex derives cycle OFF; a guardian who turns Labs off
- * and saves would write that OFF as an explicit answer, and the record's sex
- * being set to FEMALE afterwards would then leave cycle off with nothing on
- * screen to say why. It also put `cycleTrackingEnabled` in the record's audit
- * trail on every save of any module.
- *
- * So it is sent only when it differs from the value the form opened on, which
- * is what the managed-record edit form's `managedProfileEditPatch` already does
- * for its own five fields.
- *
- * Exported and pure because it is the decision this form makes, and a decision
- * about what NOT to send is invisible in the rendered markup.
- */
-export function managedModulesPatch(
-  settings: Record<string, unknown>,
-  form: FormData,
-): {
-  modulePreferences: Record<string, boolean>;
-  cycleTrackingEnabled?: boolean;
-} {
-  const cycleTrackingEnabled = form.get("cycleTrackingEnabled") === "on";
-  // The same expression the switch is seeded from, so "differs from what the
-  // form opened on" is one statement rather than two that can drift.
-  const loaded = settings.cycleTrackingEnabled === true;
-  return {
-    modulePreferences: Object.fromEntries(
-      Object.keys(MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS).map((key) => [
-        key,
-        form.get(key) === "on",
-      ]),
-    ),
-    ...(cycleTrackingEnabled !== loaded ? { cycleTrackingEnabled } : {}),
-  };
-}
-
-function ModulesSettingsForm({
-  settings,
-  disabled,
-  onSave,
-  saveLabel,
-  error,
-}: SettingsFormProps) {
-  const { t } = useTranslations();
-  const preferences = asRecord(settings.modulePreferences);
-  const entries = Object.entries(MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS) as [
-    keyof typeof MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS,
-    boolean,
-  ][];
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    onSave(managedModulesPatch(settings, new FormData(event.currentTarget)));
-  }
-
-  return (
-    <form className="space-y-3" onSubmit={submit}>
-      {entries.map(([key, defaultEnabled]) => (
-        <ManagedSwitchRow
-          key={key}
-          name={key}
-          label={t(MODULE_REGISTRY[key].labelKey)}
-          defaultChecked={
-            preferences[key] === undefined
-              ? defaultEnabled
-              : preferences[key] === true
-          }
-          disabled={disabled}
-        />
-      ))}
-      {/* v1.38.14 (#939) — Cycle sits below the rest because it is not one of
-          them: it is a DELEGATED module, so its state lives in the record's own
-          cycle profile rather than in the module blob, and it had no row here
-          at all. A guardian could not turn it off for a record whose sex says
-          it should be on, which is the case the issue was opened about. */}
-      <ManagedSwitchRow
-        name="cycleTrackingEnabled"
-        label={t(MODULE_REGISTRY.cycle.labelKey)}
-        defaultChecked={settings.cycleTrackingEnabled === true}
-        disabled={disabled}
-      />
-      <FormFooter disabled={disabled} label={saveLabel} error={error} />
-    </form>
-  );
-}
-
-function NotificationsSettingsForm({
-  settings,
-  disabled,
-  onSave,
-  saveLabel,
-  error,
-}: SettingsFormProps) {
-  const { t } = useTranslations();
-  const preferences = asRecord(settings.notificationPreferences);
-  const medication = asRecord(preferences.medication);
-  const mood = asRecord(preferences.mood);
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    onSave({
-      moodReminderEnabled: form.get("moodReminderEnabled") === "on",
-      notificationPreferences: {
-        medication: {
-          lowStockRunwayDays:
-            form.get("lowStockRunwayDays") === ""
-              ? null
-              : formNumber(form, "lowStockRunwayDays", 7),
-          reorderLeadDays: formNumber(form, "reorderLeadDays", 10),
-        },
-        mood: { reminderHour: formNumber(form, "reminderHour", 22) },
-      },
-    });
-  }
-
-  return (
-    <form className="grid gap-4 sm:grid-cols-2" onSubmit={submit}>
-      <ManagedSwitchRow
-        name="moodReminderEnabled"
-        label={t(
-          "settings.sharedRecord.managedSettings.notifications.moodReminder",
-        )}
-        defaultChecked={settings.moodReminderEnabled === true}
-        disabled={disabled}
-        className="flex items-center justify-between gap-3 text-sm sm:col-span-2"
-      />
-      <label className="grid gap-1 text-sm" htmlFor="managed-reminder-hour">
-        {t("settings.sharedRecord.managedSettings.notifications.reminderHour")}
-        <Input
-          defaultValue={asNumber(mood.reminderHour, 22)}
-          disabled={disabled}
-          id="managed-reminder-hour"
-          max="23"
-          min="0"
-          name="reminderHour"
-          type="number"
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-low-stock">
-        {t(
-          "settings.sharedRecord.managedSettings.notifications.lowStockRunwayDays",
-        )}
-        <Input
-          defaultValue={
-            medication.lowStockRunwayDays === null
-              ? ""
-              : asNumber(medication.lowStockRunwayDays, 7)
-          }
-          disabled={disabled}
-          id="managed-low-stock"
-          max="60"
-          min="1"
-          name="lowStockRunwayDays"
-          type="number"
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-reorder-lead">
-        {t(
-          "settings.sharedRecord.managedSettings.notifications.reorderLeadDays",
-        )}
-        <Input
-          defaultValue={asNumber(medication.reorderLeadDays, 10)}
-          disabled={disabled}
-          id="managed-reorder-lead"
-          max="60"
-          min="0"
-          name="reorderLeadDays"
-          type="number"
-        />
-      </label>
-      <FormFooter
-        disabled={disabled}
-        label={saveLabel}
-        error={error}
-        span="sm:col-span-2"
-      />
-    </form>
-  );
-}
-
-function ThresholdsSettingsForm({
-  settings,
-  disabled,
-  onSave,
-  saveLabel,
-  error,
-}: SettingsFormProps) {
-  const { t } = useTranslations();
-  const overrides = asRecord(settings.overrides);
-  const effective = asRecord(settings.effective);
-  const [metric, setMetric] = useState<ThresholdMetric>(ALL_METRICS[0]);
-  const overrideRange = asRecord(overrides[metric]);
-  const defaultRange = asRecord(asRecord(effective[metric]).range);
-  const bounds = METRIC_BOUNDS[metric];
-  const minimum = asNumber(
-    overrideRange.min,
-    asNumber(defaultRange.greenMin, bounds.min),
-  );
-  const maximum = asNumber(
-    overrideRange.max,
-    asNumber(defaultRange.greenMax, bounds.max),
-  );
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    onSave({
-      overrides: {
-        [metric]: {
-          min: formNumber(form, "minimum", minimum),
-          max: formNumber(form, "maximum", maximum),
-        },
-      },
-    });
-  }
-
-  return (
-    <form className="grid gap-4 sm:grid-cols-3" onSubmit={submit}>
-      <label className="grid gap-1 text-sm" htmlFor="managed-threshold-metric">
-        {t("settings.sharedRecord.managedSettings.thresholds.metric")}
-        <NativeSelect
-          onChange={(event) => setMetric(event.target.value as ThresholdMetric)}
-          value={metric}
-          disabled={disabled}
-          id="managed-threshold-metric"
-          name="metric"
-        >
-          {ALL_METRICS.map((entry) => (
-            <option key={entry} value={entry}>
-              {t(METRIC_LABEL_KEYS[entry])}
-            </option>
-          ))}
-        </NativeSelect>
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-threshold-minimum">
-        {t("settings.sharedRecord.managedSettings.thresholds.minimum")}
-        <Input
-          defaultValue={minimum}
-          disabled={disabled}
-          id="managed-threshold-minimum"
-          key={`${metric}-minimum`}
-          name="minimum"
-          required
-          type="number"
-        />
-      </label>
-      <label className="grid gap-1 text-sm" htmlFor="managed-threshold-maximum">
-        {t("settings.sharedRecord.managedSettings.thresholds.maximum")}
-        <Input
-          defaultValue={maximum}
-          disabled={disabled}
-          id="managed-threshold-maximum"
-          key={`${metric}-maximum`}
-          name="maximum"
-          required
-          type="number"
-        />
-      </label>
-      <FormFooter
-        disabled={disabled}
-        label={saveLabel}
-        error={error}
-        span="sm:col-span-3"
-      />
-    </form>
-  );
-}
-
-function CoachSettingsForm({
-  settings,
-  disabled,
-  onSave,
-  saveLabel,
-  error,
-}: SettingsFormProps) {
-  const { t } = useTranslations();
-  const preferences = asRecord(settings.preferences);
-  const excluded = new Set(asStringArray(preferences.excludeMetrics));
-  const dataClusters = new Set(asStringArray(preferences.dataClusters));
-  const savedWindow = asString(preferences.defaultWindow, "allTime");
-  const [lookback, setLookback] = useState<CoachDefaultWindow>(
-    (COACH_HISTORY_WINDOWS as readonly string[]).includes(savedWindow)
-      ? (savedWindow as CoachDefaultWindow)
-      : "allTime",
-  );
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    onSave({
-      disableCoach: form.get("disableCoach") === "on",
-      preferences: {
-        tone: asString(form.get("tone"), "warm"),
-        verbosity: asString(form.get("verbosity"), "default"),
-        excludeMetrics: COACH_EXCLUDE_METRICS.filter(
-          (metric) => form.get(`exclude-${metric}`) === "on",
-        ),
-        defaultWindow: asString(form.get("defaultWindow"), "allTime"),
-        ...(form.get("useCustomClusters") === "on"
-          ? {
-              dataClusters: COACH_DATA_CLUSTERS.filter(
-                (cluster) => form.get(`cluster-${cluster}`) === "on",
-              ),
-            }
-          : {}),
-      },
-    });
-  }
-
-  return (
-    <form className="space-y-4" onSubmit={submit}>
-      <ManagedSwitchRow
-        name="disableCoach"
-        label={t("settings.sharedRecord.managedSettings.coach.disable")}
-        defaultChecked={settings.disableCoach === true}
-        disabled={disabled}
-      />
-      <div className="grid gap-4 sm:grid-cols-3">
-        <label className="grid gap-1 text-sm" htmlFor="managed-coach-tone">
-          {t("settings.sharedRecord.managedSettings.coach.tone")}
-          <NativeSelect
-            defaultValue={asString(preferences.tone, "warm")}
-            disabled={disabled}
-            id="managed-coach-tone"
-            name="tone"
-          >
-            <option value="warm">
-              {t("settings.sharedRecord.managedSettings.coach.warm")}
-            </option>
-            <option value="neutral">
-              {t("settings.sharedRecord.managedSettings.coach.neutral")}
-            </option>
-            <option value="concise">
-              {t("settings.sharedRecord.managedSettings.coach.concise")}
-            </option>
-          </NativeSelect>
-        </label>
-        <label className="grid gap-1 text-sm" htmlFor="managed-coach-verbosity">
-          {t("settings.sharedRecord.managedSettings.coach.verbosity")}
-          <NativeSelect
-            defaultValue={asString(preferences.verbosity, "default")}
-            disabled={disabled}
-            id="managed-coach-verbosity"
-            name="verbosity"
-          >
-            <option value="brief">
-              {t("settings.sharedRecord.managedSettings.coach.brief")}
-            </option>
-            <option value="default">
-              {t("settings.sharedRecord.managedSettings.coach.default")}
-            </option>
-            <option value="detailed">
-              {t("settings.sharedRecord.managedSettings.coach.detailed")}
-            </option>
-          </NativeSelect>
-        </label>
-        {/* The same lookback options and wording as the Coach's own picker:
-            the choice is a limit on every Coach read. */}
-        <div className="grid gap-1 text-sm">
-          <label htmlFor="managed-coach-window">
-            {t("insights.coach.lookback.label")}
-          </label>
-          <NativeSelect
-            value={lookback}
-            onChange={(event) =>
-              setLookback(event.currentTarget.value as CoachDefaultWindow)
-            }
-            disabled={disabled}
-            id="managed-coach-window"
-            name="defaultWindow"
-            aria-describedby="managed-coach-window-detail"
-          >
-            {COACH_HISTORY_WINDOWS.map((window) => (
-              <option key={window} value={window}>
-                {t(
-                  `insights.coach.lookback.option.${window}`,
-                  lookbackText(window).optionParams,
-                )}
-              </option>
-            ))}
-          </NativeSelect>
-          <p
-            id="managed-coach-window-detail"
-            className="text-muted-foreground text-xs"
-          >
-            {t(
-              `insights.coach.lookback.${lookbackText(lookback).detailKey}`,
-              lookbackText(lookback).detailParams,
-            )}
-            {HISTORY_REACH_DAYS[lookback] !== null
-              ? ` ${t("insights.coach.lookback.note")}`
-              : null}
-          </p>
-        </div>
-      </div>
-      <fieldset className="space-y-2">
-        <legend className="text-sm font-medium">
-          {t("settings.sharedRecord.managedSettings.coach.excludedMetrics")}
-        </legend>
-        <div className="grid gap-2 sm:grid-cols-2">
-          {COACH_EXCLUDE_METRICS.map((metric) => (
-            <ManagedSwitchRow
-              key={metric}
-              name={`exclude-${metric}`}
-              label={coachMetricLabel(t, metric)}
-              defaultChecked={excluded.has(metric)}
-              disabled={disabled}
-            />
-          ))}
-        </div>
-      </fieldset>
-      <fieldset className="space-y-2">
-        <legend className="text-sm font-medium">
-          {t("settings.sharedRecord.managedSettings.coach.dataClusters")}
-        </legend>
-        <ManagedSwitchRow
-          name="useCustomClusters"
-          label={t(
-            "settings.sharedRecord.managedSettings.coach.customClusters",
-          )}
-          defaultChecked={Array.isArray(preferences.dataClusters)}
-          disabled={disabled}
-        />
-        <div className="grid gap-2 sm:grid-cols-2">
-          {COACH_DATA_CLUSTERS.map((cluster) => (
-            <ManagedSwitchRow
-              key={cluster}
-              name={`cluster-${cluster}`}
-              label={coachClusterLabel(t, cluster)}
-              defaultChecked={dataClusters.has(cluster)}
-              disabled={disabled}
-            />
-          ))}
-        </div>
-      </fieldset>
-      <FormFooter disabled={disabled} label={saveLabel} error={error} />
-    </form>
-  );
-}
-
-type LayoutItem = { id: string; visible: boolean; order: number };
-
-function layoutItems(value: unknown): LayoutItem[] {
-  if (!Array.isArray(value)) return [];
-  return value.flatMap((entry) => {
-    const item = asRecord(entry);
-    const id = asString(item.id);
-    return id
-      ? [
-          {
-            id,
-            visible: item.visible === true,
-            order: asNumber(item.order, 0),
-          },
-        ]
-      : [];
-  });
-}
-
-function InsightsSettingsForm({
-  settings,
-  disabled,
-  onSave,
-  saveLabel,
-  error,
-}: SettingsFormProps) {
-  const { t } = useTranslations();
-  const layout = asRecord(settings.layout);
-  const sections = layoutItems(layout.sections);
-  const tiles = layoutItems(layout.tiles);
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const form = new FormData(event.currentTarget);
-    const toPatch = (kind: "section" | "tile", item: LayoutItem) => ({
-      id: item.id,
-      visible: form.get(`${kind}-visible-${item.id}`) === "on",
-      order: formNumber(form, `${kind}-order-${item.id}`, item.order),
-    });
-    onSave({
-      layout: {
-        version: asNumber(layout.version, 2),
-        sections: sections.map((section) => toPatch("section", section)),
-        tiles: tiles.map((tile) => toPatch("tile", tile)),
-      },
-    });
-  }
-
-  const renderItems = (kind: "section" | "tile", items: LayoutItem[]) => (
-    <fieldset className="space-y-2">
-      <legend className="text-sm font-medium">
-        {kind === "section"
-          ? t("settings.sharedRecord.managedSettings.insights.sections")
-          : t("settings.sharedRecord.managedSettings.insights.tiles")}
-      </legend>
-      {items.map((item) => (
-        <div className="flex items-center gap-3 text-sm" key={item.id}>
-          <ManagedSwitchRow
-            className="flex flex-1 items-center justify-between gap-2 text-sm"
-            name={`${kind}-visible-${item.id}`}
-            label={insightItemLabel(t, kind, item.id)}
-            defaultChecked={item.visible}
-            disabled={disabled}
-          />
-          <label
-            className="flex items-center gap-2"
-            htmlFor={`${kind}-order-${item.id}`}
-          >
-            {t("settings.sharedRecord.managedSettings.insights.order")}
-            <Input
-              className="w-16"
-              defaultValue={item.order}
-              disabled={disabled}
-              id={`${kind}-order-${item.id}`}
-              min="0"
-              name={`${kind}-order-${item.id}`}
-              type="number"
-            />
-          </label>
-        </div>
-      ))}
-    </fieldset>
-  );
-
-  return (
-    <form className="space-y-4" onSubmit={submit}>
-      {renderItems("section", sections)}
-      {renderItems("tile", tiles)}
-      <FormFooter disabled={disabled} label={saveLabel} error={error} />
-    </form>
-  );
-}
 
 export function ManagedRecordSettingsForm({
   family,
diff --git a/src/components/settings/managed-record/coach-form.tsx b/src/components/settings/managed-record/coach-form.tsx
new file mode 100644
index 000000000..a6bfd415c
--- /dev/null
+++ b/src/components/settings/managed-record/coach-form.tsx
@@ -0,0 +1,218 @@
+import { useState, type FormEvent } from "react";
+
+import { NativeSelect } from "@/components/ui/native-select";
+import {
+  COACH_HISTORY_WINDOWS,
+  HISTORY_REACH_DAYS,
+  lookbackText,
+} from "@/lib/ai/coach/history-reach";
+import { useTranslations } from "@/lib/i18n/context";
+import type { CoachDefaultWindow } from "@/lib/validations/coach-prefs";
+
+import {
+  COACH_DATA_CLUSTER_LABEL_KEYS,
+  COACH_DATA_CLUSTERS,
+  COACH_EXCLUDE_METRIC_LABEL_KEYS,
+  COACH_EXCLUDE_METRICS,
+} from "../managed-record-settings-labels";
+import {
+  asRecord,
+  asString,
+  asStringArray,
+  FormFooter,
+  ManagedSwitchRow,
+  ownStringValue,
+  type SettingsFormProps,
+} from "./form-kit";
+
+function coachMetricLabel(
+  t: ReturnType<typeof useTranslations>["t"],
+  metric: (typeof COACH_EXCLUDE_METRICS)[number],
+): string {
+  const labelKey = ownStringValue(COACH_EXCLUDE_METRIC_LABEL_KEYS, metric);
+  return labelKey
+    ? t(labelKey)
+    : t("settings.sharedRecord.managedSettings.insights.unknownItem");
+}
+
+function coachClusterLabel(
+  t: ReturnType<typeof useTranslations>["t"],
+  cluster: (typeof COACH_DATA_CLUSTERS)[number],
+): string {
+  const labelKey = ownStringValue(COACH_DATA_CLUSTER_LABEL_KEYS, cluster);
+  return labelKey
+    ? t(labelKey)
+    : t("settings.sharedRecord.managedSettings.insights.unknownItem");
+}
+
+export function CoachSettingsForm({
+  settings,
+  disabled,
+  onSave,
+  saveLabel,
+  error,
+}: SettingsFormProps) {
+  const { t } = useTranslations();
+  const preferences = asRecord(settings.preferences);
+  const excluded = new Set(asStringArray(preferences.excludeMetrics));
+  const dataClusters = new Set(asStringArray(preferences.dataClusters));
+  const savedWindow = asString(preferences.defaultWindow, "allTime");
+  const [lookback, setLookback] = useState<CoachDefaultWindow>(
+    (COACH_HISTORY_WINDOWS as readonly string[]).includes(savedWindow)
+      ? (savedWindow as CoachDefaultWindow)
+      : "allTime",
+  );
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    onSave({
+      disableCoach: form.get("disableCoach") === "on",
+      preferences: {
+        tone: asString(form.get("tone"), "warm"),
+        verbosity: asString(form.get("verbosity"), "default"),
+        excludeMetrics: COACH_EXCLUDE_METRICS.filter(
+          (metric) => form.get(`exclude-${metric}`) === "on",
+        ),
+        defaultWindow: asString(form.get("defaultWindow"), "allTime"),
+        ...(form.get("useCustomClusters") === "on"
+          ? {
+              dataClusters: COACH_DATA_CLUSTERS.filter(
+                (cluster) => form.get(`cluster-${cluster}`) === "on",
+              ),
+            }
+          : {}),
+      },
+    });
+  }
+
+  return (
+    <form className="space-y-4" onSubmit={submit}>
+      <ManagedSwitchRow
+        name="disableCoach"
+        label={t("settings.sharedRecord.managedSettings.coach.disable")}
+        defaultChecked={settings.disableCoach === true}
+        disabled={disabled}
+      />
+      <div className="grid gap-4 sm:grid-cols-3">
+        <label className="grid gap-1 text-sm" htmlFor="managed-coach-tone">
+          {t("settings.sharedRecord.managedSettings.coach.tone")}
+          <NativeSelect
+            defaultValue={asString(preferences.tone, "warm")}
+            disabled={disabled}
+            id="managed-coach-tone"
+            name="tone"
+          >
+            <option value="warm">
+              {t("settings.sharedRecord.managedSettings.coach.warm")}
+            </option>
+            <option value="neutral">
+              {t("settings.sharedRecord.managedSettings.coach.neutral")}
+            </option>
+            <option value="concise">
+              {t("settings.sharedRecord.managedSettings.coach.concise")}
+            </option>
+          </NativeSelect>
+        </label>
+        <label className="grid gap-1 text-sm" htmlFor="managed-coach-verbosity">
+          {t("settings.sharedRecord.managedSettings.coach.verbosity")}
+          <NativeSelect
+            defaultValue={asString(preferences.verbosity, "default")}
+            disabled={disabled}
+            id="managed-coach-verbosity"
+            name="verbosity"
+          >
+            <option value="brief">
+              {t("settings.sharedRecord.managedSettings.coach.brief")}
+            </option>
+            <option value="default">
+              {t("settings.sharedRecord.managedSettings.coach.default")}
+            </option>
+            <option value="detailed">
+              {t("settings.sharedRecord.managedSettings.coach.detailed")}
+            </option>
+          </NativeSelect>
+        </label>
+        {/* The same lookback options and wording as the Coach's own picker:
+            the choice is a limit on every Coach read. */}
+        <div className="grid gap-1 text-sm">
+          <label htmlFor="managed-coach-window">
+            {t("insights.coach.lookback.label")}
+          </label>
+          <NativeSelect
+            value={lookback}
+            onChange={(event) =>
+              setLookback(event.currentTarget.value as CoachDefaultWindow)
+            }
+            disabled={disabled}
+            id="managed-coach-window"
+            name="defaultWindow"
+            aria-describedby="managed-coach-window-detail"
+          >
+            {COACH_HISTORY_WINDOWS.map((window) => (
+              <option key={window} value={window}>
+                {t(
+                  `insights.coach.lookback.option.${window}`,
+                  lookbackText(window).optionParams,
+                )}
+              </option>
+            ))}
+          </NativeSelect>
+          <p
+            id="managed-coach-window-detail"
+            className="text-muted-foreground text-xs"
+          >
+            {t(
+              `insights.coach.lookback.${lookbackText(lookback).detailKey}`,
+              lookbackText(lookback).detailParams,
+            )}
+            {HISTORY_REACH_DAYS[lookback] !== null
+              ? ` ${t("insights.coach.lookback.note")}`
+              : null}
+          </p>
+        </div>
+      </div>
+      <fieldset className="space-y-2">
+        <legend className="text-sm font-medium">
+          {t("settings.sharedRecord.managedSettings.coach.excludedMetrics")}
+        </legend>
+        <div className="grid gap-2 sm:grid-cols-2">
+          {COACH_EXCLUDE_METRICS.map((metric) => (
+            <ManagedSwitchRow
+              key={metric}
+              name={`exclude-${metric}`}
+              label={coachMetricLabel(t, metric)}
+              defaultChecked={excluded.has(metric)}
+              disabled={disabled}
+            />
+          ))}
+        </div>
+      </fieldset>
+      <fieldset className="space-y-2">
+        <legend className="text-sm font-medium">
+          {t("settings.sharedRecord.managedSettings.coach.dataClusters")}
+        </legend>
+        <ManagedSwitchRow
+          name="useCustomClusters"
+          label={t(
+            "settings.sharedRecord.managedSettings.coach.customClusters",
+          )}
+          defaultChecked={Array.isArray(preferences.dataClusters)}
+          disabled={disabled}
+        />
+        <div className="grid gap-2 sm:grid-cols-2">
+          {COACH_DATA_CLUSTERS.map((cluster) => (
+            <ManagedSwitchRow
+              key={cluster}
+              name={`cluster-${cluster}`}
+              label={coachClusterLabel(t, cluster)}
+              defaultChecked={dataClusters.has(cluster)}
+              disabled={disabled}
+            />
+          ))}
+        </div>
+      </fieldset>
+      <FormFooter disabled={disabled} label={saveLabel} error={error} />
+    </form>
+  );
+}
diff --git a/src/components/settings/managed-record/form-kit.tsx b/src/components/settings/managed-record/form-kit.tsx
new file mode 100644
index 000000000..ded5cf854
--- /dev/null
+++ b/src/components/settings/managed-record/form-kit.tsx
@@ -0,0 +1,128 @@
+import { useState, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+import { SettingsCardActions } from "../_card-actions";
+
+/** What every managed-record family form receives from the section. */
+export type SettingsFormProps = {
+  settings: Record<string, unknown>;
+  disabled: boolean;
+  onSave: (patch: unknown) => void;
+  saveLabel: string;
+  /** Save/validation error, rendered ABOVE the action row per §12. */
+  error?: ReactNode;
+};
+
+export function asRecord(value: unknown): Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+export function asString(value: unknown, fallback = ""): string {
+  return typeof value === "string" ? value : fallback;
+}
+
+export function asNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+export function asStringArray(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((entry): entry is string => typeof entry === "string")
+    : [];
+}
+
+export function formNumber(
+  form: FormData,
+  name: string,
+  fallback: number,
+): number {
+  const value = Number(form.get(name));
+  return Number.isFinite(value) ? value : fallback;
+}
+
+export function ownStringValue(
+  inventory: object,
+  id: string,
+): string | undefined {
+  if (!Object.hasOwn(inventory, id)) return undefined;
+  const value = Reflect.get(inventory, id);
+  return typeof value === "string" ? value : undefined;
+}
+
+/**
+ * The form footer, §12: the error line sits ABOVE the action row, and the
+ * action row (`SettingsCardActions`) is the last thing in the form. `span`
+ * lets a grid form put the footer in a full-width cell.
+ */
+export function FormFooter({
+  disabled,
+  label,
+  error,
+  span,
+}: {
+  disabled: boolean;
+  label: string;
+  error?: ReactNode;
+  span?: string;
+}) {
+  return (
+    <div className={span ? `${span} space-y-3` : "space-y-3"}>
+      {error ? (
+        <p className="text-destructive text-sm" role="alert">
+          {error}
+        </p>
+      ) : null}
+      <SettingsCardActions>
+        <Button disabled={disabled} type="submit">
+          {label}
+        </Button>
+      </SettingsCardActions>
+    </div>
+  );
+}
+
+/**
+ * A managed-settings toggle row — a `<Switch>` (the same primitive the owner
+ * module section uses) paired with a hidden mirror input so the FormData
+ * submit still reads `name === "on"`. Uncontrolled at the DOM level, controlled
+ * in React so the switch and its mirror stay in lockstep.
+ */
+export function ManagedSwitchRow({
+  name,
+  label,
+  defaultChecked,
+  disabled,
+  className,
+}: {
+  name: string;
+  label: string;
+  defaultChecked: boolean;
+  disabled: boolean;
+  className?: string;
+}) {
+  const id = `managed-switch-${name}`;
+  const [on, setOn] = useState(defaultChecked);
+  return (
+    <div
+      className={className ?? "flex items-center justify-between gap-3 text-sm"}
+    >
+      <Label htmlFor={id} className="font-normal">
+        {label}
+      </Label>
+      <Switch
+        id={id}
+        checked={on}
+        onCheckedChange={setOn}
+        disabled={disabled}
+        aria-label={label}
+        className="shrink-0"
+      />
+      <input name={name} type="hidden" value={on ? "on" : "off"} />
+    </div>
+  );
+}
diff --git a/src/components/settings/managed-record/insights-form.tsx b/src/components/settings/managed-record/insights-form.tsx
new file mode 100644
index 000000000..f96d03df8
--- /dev/null
+++ b/src/components/settings/managed-record/insights-form.tsx
@@ -0,0 +1,136 @@
+import type { FormEvent } from "react";
+
+import { SUB_PAGE_TABS } from "@/components/insights/insights-tab-strip";
+import { Input } from "@/components/ui/input";
+import { useTranslations } from "@/lib/i18n/context";
+import { normalizeInsightsTileId } from "@/lib/insights-layout";
+
+import { INSIGHTS_SECTION_LABEL_KEYS } from "../managed-record-settings-labels";
+import {
+  asNumber,
+  asRecord,
+  asString,
+  FormFooter,
+  formNumber,
+  ManagedSwitchRow,
+  ownStringValue,
+  type SettingsFormProps,
+} from "./form-kit";
+
+function insightItemLabel(
+  t: ReturnType<typeof useTranslations>["t"],
+  kind: "section" | "tile",
+  id: string,
+): string {
+  if (kind === "section") {
+    const labelKey = ownStringValue(INSIGHTS_SECTION_LABEL_KEYS, id);
+    return labelKey
+      ? t(labelKey)
+      : t("settings.sharedRecord.managedSettings.insights.unknownItem");
+  }
+
+  const normalizedId = normalizeInsightsTileId(id);
+  if (normalizedId === "overview") return t("insights.navOverview");
+  if (!Object.hasOwn(SUB_PAGE_TABS, normalizedId)) {
+    return t("settings.sharedRecord.managedSettings.insights.unknownItem");
+  }
+
+  const labelKey =
+    SUB_PAGE_TABS[normalizedId as keyof typeof SUB_PAGE_TABS]?.labelKey;
+  return typeof labelKey === "string"
+    ? t(labelKey)
+    : t("settings.sharedRecord.managedSettings.insights.unknownItem");
+}
+
+type LayoutItem = { id: string; visible: boolean; order: number };
+
+function layoutItems(value: unknown): LayoutItem[] {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((entry) => {
+    const item = asRecord(entry);
+    const id = asString(item.id);
+    return id
+      ? [
+          {
+            id,
+            visible: item.visible === true,
+            order: asNumber(item.order, 0),
+          },
+        ]
+      : [];
+  });
+}
+
+export function InsightsSettingsForm({
+  settings,
+  disabled,
+  onSave,
+  saveLabel,
+  error,
+}: SettingsFormProps) {
+  const { t } = useTranslations();
+  const layout = asRecord(settings.layout);
+  const sections = layoutItems(layout.sections);
+  const tiles = layoutItems(layout.tiles);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const toPatch = (kind: "section" | "tile", item: LayoutItem) => ({
+      id: item.id,
+      visible: form.get(`${kind}-visible-${item.id}`) === "on",
+      order: formNumber(form, `${kind}-order-${item.id}`, item.order),
+    });
+    onSave({
+      layout: {
+        version: asNumber(layout.version, 2),
+        sections: sections.map((section) => toPatch("section", section)),
+        tiles: tiles.map((tile) => toPatch("tile", tile)),
+      },
+    });
+  }
+
+  const renderItems = (kind: "section" | "tile", items: LayoutItem[]) => (
+    <fieldset className="space-y-2">
+      <legend className="text-sm font-medium">
+        {kind === "section"
+          ? t("settings.sharedRecord.managedSettings.insights.sections")
+          : t("settings.sharedRecord.managedSettings.insights.tiles")}
+      </legend>
+      {items.map((item) => (
+        <div className="flex items-center gap-3 text-sm" key={item.id}>
+          <ManagedSwitchRow
+            className="flex flex-1 items-center justify-between gap-2 text-sm"
+            name={`${kind}-visible-${item.id}`}
+            label={insightItemLabel(t, kind, item.id)}
+            defaultChecked={item.visible}
+            disabled={disabled}
+          />
+          <label
+            className="flex items-center gap-2"
+            htmlFor={`${kind}-order-${item.id}`}
+          >
+            {t("settings.sharedRecord.managedSettings.insights.order")}
+            <Input
+              className="w-16"
+              defaultValue={item.order}
+              disabled={disabled}
+              id={`${kind}-order-${item.id}`}
+              min="0"
+              name={`${kind}-order-${item.id}`}
+              type="number"
+            />
+          </label>
+        </div>
+      ))}
+    </fieldset>
+  );
+
+  return (
+    <form className="space-y-4" onSubmit={submit}>
+      {renderItems("section", sections)}
+      {renderItems("tile", tiles)}
+      <FormFooter disabled={disabled} label={saveLabel} error={error} />
+    </form>
+  );
+}
diff --git a/src/components/settings/managed-record/modules-form.tsx b/src/components/settings/managed-record/modules-form.tsx
new file mode 100644
index 000000000..c2e77d1bd
--- /dev/null
+++ b/src/components/settings/managed-record/modules-form.tsx
@@ -0,0 +1,105 @@
+import type { FormEvent } from "react";
+
+import { useTranslations } from "@/lib/i18n/context";
+import { MODULE_REGISTRY } from "@/lib/modules/registry";
+import { MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS } from "@/lib/record-settings";
+
+import {
+  asRecord,
+  FormFooter,
+  ManagedSwitchRow,
+  type SettingsFormProps,
+} from "./form-kit";
+
+/**
+ * What a Modules save actually sends.
+ *
+ * The direct modules ride along whether or not they moved — they are one blob
+ * the route merges, and a key that did not change writes the value it already
+ * had. `cycleTrackingEnabled` is not one of them: it is a DELEGATED module
+ * whose column the cycle gate honours OVER the sex-derived default, so sending
+ * the switch's current position on every save freezes the derivation. A record
+ * created with no recorded sex derives cycle OFF; a guardian who turns Labs off
+ * and saves would write that OFF as an explicit answer, and the record's sex
+ * being set to FEMALE afterwards would then leave cycle off with nothing on
+ * screen to say why. It also put `cycleTrackingEnabled` in the record's audit
+ * trail on every save of any module.
+ *
+ * So it is sent only when it differs from the value the form opened on, which
+ * is what the managed-record edit form's `managedProfileEditPatch` already does
+ * for its own five fields.
+ *
+ * Exported and pure because it is the decision this form makes, and a decision
+ * about what NOT to send is invisible in the rendered markup.
+ */
+export function managedModulesPatch(
+  settings: Record<string, unknown>,
+  form: FormData,
+): {
+  modulePreferences: Record<string, boolean>;
+  cycleTrackingEnabled?: boolean;
+} {
+  const cycleTrackingEnabled = form.get("cycleTrackingEnabled") === "on";
+  // The same expression the switch is seeded from, so "differs from what the
+  // form opened on" is one statement rather than two that can drift.
+  const loaded = settings.cycleTrackingEnabled === true;
+  return {
+    modulePreferences: Object.fromEntries(
+      Object.keys(MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS).map((key) => [
+        key,
+        form.get(key) === "on",
+      ]),
+    ),
+    ...(cycleTrackingEnabled !== loaded ? { cycleTrackingEnabled } : {}),
+  };
+}
+
+export function ModulesSettingsForm({
+  settings,
+  disabled,
+  onSave,
+  saveLabel,
+  error,
+}: SettingsFormProps) {
+  const { t } = useTranslations();
+  const preferences = asRecord(settings.modulePreferences);
+  const entries = Object.entries(MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS) as [
+    keyof typeof MANAGED_RECORD_SETTINGS_MODULE_DEFAULTS,
+    boolean,
+  ][];
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    onSave(managedModulesPatch(settings, new FormData(event.currentTarget)));
+  }
+
+  return (
+    <form className="space-y-3" onSubmit={submit}>
+      {entries.map(([key, defaultEnabled]) => (
+        <ManagedSwitchRow
+          key={key}
+          name={key}
+          label={t(MODULE_REGISTRY[key].labelKey)}
+          defaultChecked={
+            preferences[key] === undefined
+              ? defaultEnabled
+              : preferences[key] === true
+          }
+          disabled={disabled}
+        />
+      ))}
+      {/* Cycle sits below the rest because it is not one of
+          them: it is a DELEGATED module, so its state lives in the record's own
+          cycle profile rather than in the module blob, and it had no row here
+          at all. A guardian could not turn it off for a record whose sex says
+          it should be on, which is the case #939 was opened about. */}
+      <ManagedSwitchRow
+        name="cycleTrackingEnabled"
+        label={t(MODULE_REGISTRY.cycle.labelKey)}
+        defaultChecked={settings.cycleTrackingEnabled === true}
+        disabled={disabled}
+      />
+      <FormFooter disabled={disabled} label={saveLabel} error={error} />
+    </form>
+  );
+}
diff --git a/src/components/settings/managed-record/notifications-form.tsx b/src/components/settings/managed-record/notifications-form.tsx
new file mode 100644
index 000000000..474f86b43
--- /dev/null
+++ b/src/components/settings/managed-record/notifications-form.tsx
@@ -0,0 +1,108 @@
+import type { FormEvent } from "react";
+
+import { Input } from "@/components/ui/input";
+import { useTranslations } from "@/lib/i18n/context";
+
+import {
+  asNumber,
+  asRecord,
+  FormFooter,
+  formNumber,
+  ManagedSwitchRow,
+  type SettingsFormProps,
+} from "./form-kit";
+
+export function NotificationsSettingsForm({
+  settings,
+  disabled,
+  onSave,
+  saveLabel,
+  error,
+}: SettingsFormProps) {
+  const { t } = useTranslations();
+  const preferences = asRecord(settings.notificationPreferences);
+  const medication = asRecord(preferences.medication);
+  const mood = asRecord(preferences.mood);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    onSave({
+      moodReminderEnabled: form.get("moodReminderEnabled") === "on",
+      notificationPreferences: {
+        medication: {
+          lowStockRunwayDays:
+            form.get("lowStockRunwayDays") === ""
+              ? null
+              : formNumber(form, "lowStockRunwayDays", 7),
+          reorderLeadDays: formNumber(form, "reorderLeadDays", 10),
+        },
+        mood: { reminderHour: formNumber(form, "reminderHour", 22) },
+      },
+    });
+  }
+
+  return (
+    <form className="grid gap-4 sm:grid-cols-2" onSubmit={submit}>
+      <ManagedSwitchRow
+        name="moodReminderEnabled"
+        label={t(
+          "settings.sharedRecord.managedSettings.notifications.moodReminder",
+        )}
+        defaultChecked={settings.moodReminderEnabled === true}
+        disabled={disabled}
+        className="flex items-center justify-between gap-3 text-sm sm:col-span-2"
+      />
+      <label className="grid gap-1 text-sm" htmlFor="managed-reminder-hour">
+        {t("settings.sharedRecord.managedSettings.notifications.reminderHour")}
+        <Input
+          defaultValue={asNumber(mood.reminderHour, 22)}
+          disabled={disabled}
+          id="managed-reminder-hour"
+          max="23"
+          min="0"
+          name="reminderHour"
+          type="number"
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-low-stock">
+        {t(
+          "settings.sharedRecord.managedSettings.notifications.lowStockRunwayDays",
+        )}
+        <Input
+          defaultValue={
+            medication.lowStockRunwayDays === null
+              ? ""
+              : asNumber(medication.lowStockRunwayDays, 7)
+          }
+          disabled={disabled}
+          id="managed-low-stock"
+          max="60"
+          min="1"
+          name="lowStockRunwayDays"
+          type="number"
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-reorder-lead">
+        {t(
+          "settings.sharedRecord.managedSettings.notifications.reorderLeadDays",
+        )}
+        <Input
+          defaultValue={asNumber(medication.reorderLeadDays, 10)}
+          disabled={disabled}
+          id="managed-reorder-lead"
+          max="60"
+          min="0"
+          name="reorderLeadDays"
+          type="number"
+        />
+      </label>
+      <FormFooter
+        disabled={disabled}
+        label={saveLabel}
+        error={error}
+        span="sm:col-span-2"
+      />
+    </form>
+  );
+}
diff --git a/src/components/settings/managed-record/profile-form.tsx b/src/components/settings/managed-record/profile-form.tsx
new file mode 100644
index 000000000..068d63f18
--- /dev/null
+++ b/src/components/settings/managed-record/profile-form.tsx
@@ -0,0 +1,191 @@
+import type { FormEvent } from "react";
+
+import { DateField } from "@/components/ui/date-field";
+import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
+import { locales } from "@/lib/i18n/config";
+import { useTranslations } from "@/lib/i18n/context";
+import { DEFAULT_TIMEZONE } from "@/lib/tz/format";
+
+import { asString, FormFooter, type SettingsFormProps } from "./form-kit";
+
+export function ProfileSettingsForm({
+  settings,
+  disabled,
+  onSave,
+  saveLabel,
+  error,
+}: SettingsFormProps) {
+  const { t } = useTranslations();
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    const displayName = asString(form.get("displayName")).trim();
+    const heightValue = asString(form.get("heightCm")).trim();
+    onSave({
+      displayName: displayName || null,
+      heightCm: heightValue === "" ? null : Number(heightValue),
+      dateOfBirth: asString(form.get("dateOfBirth")) || null,
+      gender: asString(form.get("gender")) || null,
+      locale: asString(form.get("locale")) || null,
+      timezone: asString(form.get("timezone")),
+      unitPreference: asString(form.get("unitPreference")),
+      timeFormat: asString(form.get("timeFormat")),
+      dateFormat: asString(form.get("dateFormat")),
+    });
+  }
+
+  return (
+    <form className="grid gap-4 sm:grid-cols-2" onSubmit={submit}>
+      <label className="grid gap-1 text-sm" htmlFor="managed-display-name">
+        {t("settings.sharedRecord.managedSettings.profile.displayName")}
+        <Input
+          defaultValue={asString(settings.displayName)}
+          disabled={disabled}
+          id="managed-display-name"
+          name="displayName"
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-height">
+        {t("settings.sharedRecord.managedSettings.profile.height")}
+        <Input
+          defaultValue={
+            settings.heightCm === null ? "" : String(settings.heightCm ?? "")
+          }
+          disabled={disabled}
+          id="managed-height"
+          max="300"
+          min="30"
+          name="heightCm"
+          type="number"
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-date-of-birth">
+        {t("settings.sharedRecord.managedSettings.profile.dateOfBirth")}
+        {/* The profile date must not depend on the browser's date
+            parsing; DateField displays in the user's order and submits ISO
+            through its hidden mirror. */}
+        <DateField
+          defaultValue={asString(settings.dateOfBirth)}
+          disabled={disabled}
+          id="managed-date-of-birth"
+          name="dateOfBirth"
+          autoComplete="bday"
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-gender">
+        {t("settings.sharedRecord.managedSettings.profile.gender")}
+        <NativeSelect
+          defaultValue={asString(settings.gender)}
+          disabled={disabled}
+          id="managed-gender"
+          name="gender"
+        >
+          <option value="">
+            {t("settings.sharedRecord.managedSettings.profile.notSpecified")}
+          </option>
+          <option value="MALE">
+            {t("settings.sharedRecord.managedSettings.profile.male")}
+          </option>
+          <option value="FEMALE">
+            {t("settings.sharedRecord.managedSettings.profile.female")}
+          </option>
+          <option value="OTHER">
+            {t("settings.sharedRecord.managedSettings.profile.other")}
+          </option>
+        </NativeSelect>
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-locale">
+        {t("settings.sharedRecord.managedSettings.profile.locale")}
+        <NativeSelect
+          defaultValue={asString(settings.locale)}
+          disabled={disabled}
+          id="managed-locale"
+          name="locale"
+        >
+          <option value="">
+            {t("settings.sharedRecord.managedSettings.profile.systemDefault")}
+          </option>
+          {locales.map((locale) => (
+            <option key={locale} value={locale}>
+              {locale}
+            </option>
+          ))}
+        </NativeSelect>
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-timezone">
+        {t("settings.sharedRecord.managedSettings.profile.timezone")}
+        <Input
+          defaultValue={asString(settings.timezone, DEFAULT_TIMEZONE)}
+          disabled={disabled}
+          id="managed-timezone"
+          name="timezone"
+          required
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-units">
+        {t("settings.sharedRecord.managedSettings.profile.units")}
+        <NativeSelect
+          defaultValue={asString(settings.unitPreference, "metric")}
+          disabled={disabled}
+          id="managed-units"
+          name="unitPreference"
+        >
+          <option value="metric">
+            {t("settings.sharedRecord.managedSettings.profile.metric")}
+          </option>
+          <option value="imperial">
+            {t("settings.sharedRecord.managedSettings.profile.imperial")}
+          </option>
+        </NativeSelect>
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-time-format">
+        {t("settings.sharedRecord.managedSettings.profile.timeFormat")}
+        <NativeSelect
+          defaultValue={asString(settings.timeFormat, "AUTO")}
+          disabled={disabled}
+          id="managed-time-format"
+          name="timeFormat"
+        >
+          <option value="AUTO">
+            {t("settings.sharedRecord.managedSettings.profile.automatic")}
+          </option>
+          <option value="H12">
+            {t("settings.sharedRecord.managedSettings.profile.hour12")}
+          </option>
+          <option value="H24">
+            {t("settings.sharedRecord.managedSettings.profile.hour24")}
+          </option>
+        </NativeSelect>
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-date-format">
+        {t("settings.sharedRecord.managedSettings.profile.dateFormat")}
+        <NativeSelect
+          defaultValue={asString(settings.dateFormat, "AUTO")}
+          disabled={disabled}
+          id="managed-date-format"
+          name="dateFormat"
+        >
+          <option value="AUTO">
+            {t("settings.sharedRecord.managedSettings.profile.automatic")}
+          </option>
+          <option value="DMY">
+            {t("settings.sharedRecord.managedSettings.profile.dateDmy")}
+          </option>
+          <option value="MDY">
+            {t("settings.sharedRecord.managedSettings.profile.dateMdy")}
+          </option>
+          <option value="YMD">
+            {t("settings.sharedRecord.managedSettings.profile.dateYmd")}
+          </option>
+        </NativeSelect>
+      </label>
+      <FormFooter
+        disabled={disabled}
+        label={saveLabel}
+        error={error}
+        span="sm:col-span-2"
+      />
+    </form>
+  );
+}
diff --git a/src/components/settings/managed-record/thresholds-form.tsx b/src/components/settings/managed-record/thresholds-form.tsx
new file mode 100644
index 000000000..0aaed7468
--- /dev/null
+++ b/src/components/settings/managed-record/thresholds-form.tsx
@@ -0,0 +1,107 @@
+import { useState, type FormEvent } from "react";
+
+import { Input } from "@/components/ui/input";
+import { NativeSelect } from "@/components/ui/native-select";
+import {
+  METRIC_BOUNDS,
+  type ThresholdMetric,
+} from "@/lib/analytics/effective-range";
+import { useTranslations } from "@/lib/i18n/context";
+import { ALL_METRICS } from "@/lib/validations/thresholds";
+
+import { METRIC_LABEL_KEYS } from "../managed-record-settings-labels";
+import {
+  asNumber,
+  asRecord,
+  FormFooter,
+  formNumber,
+  type SettingsFormProps,
+} from "./form-kit";
+
+export function ThresholdsSettingsForm({
+  settings,
+  disabled,
+  onSave,
+  saveLabel,
+  error,
+}: SettingsFormProps) {
+  const { t } = useTranslations();
+  const overrides = asRecord(settings.overrides);
+  const effective = asRecord(settings.effective);
+  const [metric, setMetric] = useState<ThresholdMetric>(ALL_METRICS[0]);
+  const overrideRange = asRecord(overrides[metric]);
+  const defaultRange = asRecord(asRecord(effective[metric]).range);
+  const bounds = METRIC_BOUNDS[metric];
+  const minimum = asNumber(
+    overrideRange.min,
+    asNumber(defaultRange.greenMin, bounds.min),
+  );
+  const maximum = asNumber(
+    overrideRange.max,
+    asNumber(defaultRange.greenMax, bounds.max),
+  );
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    onSave({
+      overrides: {
+        [metric]: {
+          min: formNumber(form, "minimum", minimum),
+          max: formNumber(form, "maximum", maximum),
+        },
+      },
+    });
+  }
+
+  return (
+    <form className="grid gap-4 sm:grid-cols-3" onSubmit={submit}>
+      <label className="grid gap-1 text-sm" htmlFor="managed-threshold-metric">
+        {t("settings.sharedRecord.managedSettings.thresholds.metric")}
+        <NativeSelect
+          onChange={(event) => setMetric(event.target.value as ThresholdMetric)}
+          value={metric}
+          disabled={disabled}
+          id="managed-threshold-metric"
+          name="metric"
+        >
+          {ALL_METRICS.map((entry) => (
+            <option key={entry} value={entry}>
+              {t(METRIC_LABEL_KEYS[entry])}
+            </option>
+          ))}
+        </NativeSelect>
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-threshold-minimum">
+        {t("settings.sharedRecord.managedSettings.thresholds.minimum")}
+        <Input
+          defaultValue={minimum}
+          disabled={disabled}
+          id="managed-threshold-minimum"
+          key={`${metric}-minimum`}
+          name="minimum"
+          required
+          type="number"
+        />
+      </label>
+      <label className="grid gap-1 text-sm" htmlFor="managed-threshold-maximum">
+        {t("settings.sharedRecord.managedSettings.thresholds.maximum")}
+        <Input
+          defaultValue={maximum}
+          disabled={disabled}
+          id="managed-threshold-maximum"
+          key={`${metric}-maximum`}
+          name="maximum"
+          required
+          type="number"
+        />
+      </label>
+      <FormFooter
+        disabled={disabled}
+        label={saveLabel}
+        error={error}
+        span="sm:col-span-3"
+      />
+    </form>
+  );
+}
diff --git a/src/components/settings/security-section/__tests__/recent-proof-callers.test.tsx b/src/components/settings/security-section/__tests__/recent-proof-callers.test.tsx
index 6d22165d5..b93f081a7 100644
--- a/src/components/settings/security-section/__tests__/recent-proof-callers.test.tsx
+++ b/src/components/settings/security-section/__tests__/recent-proof-callers.test.tsx
@@ -65,7 +65,12 @@ describe("recentProofErrorMessage", () => {
   });
 });
 
-describe.each([
+/**
+ * [component, gated route, the hook that sends it]. The component holds the
+ * flow and renders its dialog; the request runs through `recentProof.run`,
+ * in the component itself or in a hook the component hands the flow to.
+ */
+describe.each<[string, string, string?]>([
   ["components/settings/export-section.tsx", "/api/export/full-backup"],
   ["components/settings/export-section.tsx", "/api/export/encrypted"],
   ["components/settings/share-link-create-form.tsx", "/api/share-links"],
@@ -73,21 +78,43 @@ describe.each([
   ["components/settings/api-section.tsx", "/api/tokens/measurements"],
   ["components/settings/api-section.tsx", "/api/tokens/documents"],
   ["components/settings/api-section.tsx", "/api/tokens/workouts"],
-  ["components/admin/backups-section.tsx", "/download"],
-  ["components/admin/backups-section.tsx", "/restore"],
-  ["components/admin/backups-section.tsx", "/api/admin/backups/upload"],
+  [
+    "components/admin/backups-section.tsx",
+    "/download",
+    "components/admin/backups/use-backup-actions.ts",
+  ],
+  [
+    "components/admin/backups-section.tsx",
+    "/restore",
+    "components/admin/backups/use-backup-restores.ts",
+  ],
+  [
+    "components/admin/backups-section.tsx",
+    "/api/admin/backups/upload",
+    "components/admin/backups/use-backup-upload.ts",
+  ],
   ["components/admin/danger-zone-section.tsx", "/api/admin/data"],
   ["components/admin/user-management-section.tsx", "/reset-password"],
-])("%s → %s", (file, endpoint) => {
+])("%s → %s", (file, endpoint, caller = file) => {
   const source = read(file);
+  const calling = read(caller);
 
   it("calls the gated route", () => {
-    expect(source).toContain(endpoint);
+    expect(calling).toContain(endpoint);
   });
 
   it("runs it through the recent-proof hook and renders the dialog", () => {
     expect(source).toContain("useRecentProof()");
-    expect(source).toMatch(/recentProof\.run\(/);
+    expect(calling).toMatch(/recentProof\.run\(/);
     expect(source).toContain("{recentProof.dialog}");
+    if (caller !== file) {
+      // The component hands its flow to the hook that sends the request.
+      const hook = caller
+        .split("/")
+        .pop()!
+        .replace(/\.tsx?$/, "");
+      expect(source).toMatch(new RegExp(`from "\\./[\\w/-]*${hook}"`));
+      expect(source).toMatch(/\(recentProof\)/);
+    }
   });
 });
diff --git a/src/components/ui/__tests__/filter-bar.test.tsx b/src/components/ui/__tests__/filter-bar.test.tsx
deleted file mode 100644
index 8ab5fd593..000000000
--- a/src/components/ui/__tests__/filter-bar.test.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-import { renderToStaticMarkup } from "react-dom/server";
-
-import { I18nProvider } from "@/lib/i18n/context";
-import { FilterBar, FilterBarDateRange, FilterBarSelect } from "../filter-bar";
-import { primeLocales } from "@/__tests__/helpers/prime-locales";
-
-primeLocales("de");
-
-/**
- * v1.16.1 — unified filter rail. SSR-markup guards for the shared
- * grammar: pill = trigger + active chip in one element, reset only
- * while filtered, count slot, per-pill clear button with a translated
- * aria-label.
- */
-
-const options = [
-  { value: "WEIGHT", label: "Weight" },
-  { value: "PULSE", label: "Pulse" },
-];
-
-function render(node: React.ReactElement, locale: "en" | "de" = "en") {
-  return renderToStaticMarkup(
-    <I18nProvider initialLocale={locale}>{node}</I18nProvider>,
-  );
-}
-
-describe("FilterBarSelect", () => {
-  it("inactive: shows only the dimension name, no clear button", () => {
-    const html = render(
-      <FilterBar isFiltered={false} onReset={() => {}}>
-        <FilterBarSelect
-          label="Type"
-          value="ALL"
-          onValueChange={() => {}}
-          allLabel="All types"
-          options={options}
-        />
-      </FilterBar>,
-    );
-    expect(html).toContain('data-slot="filter-bar-pill"');
-    expect(html).toContain('data-active="false"');
-    expect(html).toContain("Type");
-    expect(html).not.toContain("Clear filter");
-  });
-
-  it("active: shows `label: value`, active styling and a labelled clear button", () => {
-    const html = render(
-      <FilterBar isFiltered onReset={() => {}}>
-        <FilterBarSelect
-          label="Type"
-          value="WEIGHT"
-          onValueChange={() => {}}
-          allLabel="All types"
-          options={options}
-        />
-      </FilterBar>,
-    );
-    expect(html).toContain('data-active="true"');
-    expect(html).toContain("Weight");
-    expect(html).toContain('aria-label="Clear filter: Type"');
-  });
-});
-
-describe("FilterBarDateRange", () => {
-  it("inactive: pill shows the dimension name only", () => {
-    const html = render(
-      <FilterBar isFiltered={false} onReset={() => {}}>
-        <FilterBarDateRange
-          label="Date range"
-          from=""
-          to=""
-          onFromChange={() => {}}
-          onToChange={() => {}}
-          idPrefix="probe"
-        />
-      </FilterBar>,
-    );
-    expect(html).toContain('data-active="false"');
-    expect(html).toContain("Date range");
-  });
-
-  it("active: pill shows the formatted bounds and a clear button", () => {
-    const html = render(
-      <FilterBar isFiltered onReset={() => {}}>
-        <FilterBarDateRange
-          label="Date range"
-          from="2026-05-12"
-          to="2026-06-10"
-          onFromChange={() => {}}
-          onToChange={() => {}}
-          idPrefix="probe"
-        />
-      </FilterBar>,
-    );
-    expect(html).toContain('data-active="true"');
-    // en dateShort: "05/12" / "06/10" — assert both day fragments are in.
-    expect(html).toMatch(/05\/12/);
-    expect(html).toMatch(/06\/10/);
-    expect(html).toContain('aria-label="Clear filter: Date range"');
-  });
-});
-
-describe("FilterBar shell", () => {
-  it("shows the reset action only while filtered", () => {
-    const inactive = render(
-      <FilterBar isFiltered={false} onReset={() => {}}>
-        <span />
-      </FilterBar>,
-    );
-    const active = render(
-      <FilterBar isFiltered onReset={() => {}}>
-        <span />
-      </FilterBar>,
-    );
-    expect(inactive).not.toContain("Reset");
-    expect(active).toContain("Reset");
-  });
-
-  it("renders the result count slot", () => {
-    const html = render(
-      <FilterBar isFiltered={false} onReset={() => {}} count="42 readings">
-        <span />
-      </FilterBar>,
-    );
-    expect(html).toContain("42 readings");
-    expect(html).toContain("tabular-nums");
-  });
-
-  it("localises reset + clear labels in German", () => {
-    const html = render(
-      <FilterBar isFiltered onReset={() => {}}>
-        <FilterBarSelect
-          label="Quelle"
-          value="MANUAL"
-          onValueChange={() => {}}
-          allLabel="Alle Quellen"
-          options={[{ value: "MANUAL", label: "Manuell" }]}
-        />
-      </FilterBar>,
-      "de",
-    );
-    expect(html).toContain("Zurücksetzen");
-    expect(html).toContain('aria-label="Filter entfernen: Quelle"');
-  });
-});
-
-describe("FilterBarSelect — menu positioning (source pin)", () => {
-  // The pill trigger paints its own label spans and mounts no
-  // `<SelectValue>`. Radix's default item-aligned placement silently
-  // skips ALL positioning when the value node is absent — the open
-  // menu then lays out below the height-locked app shell, fully
-  // off-viewport, which users report as "clicking does nothing". SSR
-  // markup cannot exercise an open portal, so this pins the source:
-  // the content must request popper placement, which has no
-  // value-node dependency.
-  it("requests popper placement on the select content", () => {
-    const src = readFileSync(
-      join(process.cwd(), "src/components/ui/filter-bar.tsx"),
-      "utf8",
-    );
-    expect(src).toMatch(/<SelectContent\s+position="popper"\s+align="start">/);
-  });
-});
diff --git a/src/components/ui/__tests__/segmented-single-implementation.test.ts b/src/components/ui/__tests__/segmented-single-implementation.test.ts
new file mode 100644
index 000000000..8183f8365
--- /dev/null
+++ b/src/components/ui/__tests__/segmented-single-implementation.test.ts
@@ -0,0 +1,81 @@
+/**
+ * Segmented is the one segmented control in the tree. Its behaviour (roving
+ * focus, toggle mode, disabled, the chosen segment's fill) is driven in a real
+ * browser by `segmented.browser.test.tsx`; this file holds the source sweeps
+ * that keep a second control from appearing beside it.
+ */
+import { describe, expect, it } from "vitest";
+
+describe("one segmented control", () => {
+  it("is the only segmented-control component in the tree", async () => {
+    const { join } = await import("node:path");
+    const { readSourceText, walkSourceFiles } =
+      await import("@/__tests__/helpers/source-files");
+    const src = join(__dirname, "../../..");
+    const defining = walkSourceFiles(src, { floor: 2000 })
+      .filter((p) => !p.includes("__tests__/"))
+      .filter((p) =>
+        /export function (?:Segmented\w*|ViewToggle|\w*SegmentedToggle)\b/.test(
+          readSourceText(join(src, p)),
+        ),
+      );
+    expect(defining).toEqual(["components/ui/segmented.tsx"]);
+  });
+});
+
+/**
+ * A row of buttons whose `aria-pressed` compares a state to each button's
+ * value is a segmented control spelled by hand: six of them sat beside
+ * `Segmented` (the narrative period, the lab result type, both admin filters,
+ * the chart range tabs, the mood chart's copy of them), each with its own
+ * size, fill and gap. New ones are refused; the ones that remain are not one
+ * choice on one track, and say why.
+ */
+describe("no hand-built segmented control", () => {
+  const PRESSED_BY_VALUE = /aria-pressed=\{[^}]*===[^}]*\}/g;
+
+  const NOT_A_SEGMENT: Record<string, string> = {
+    "components/settings/security-section/passkey-list-section.tsx":
+      "one method is disabled while the account has no passkey; Segmented disables the whole track",
+    "components/medications/units-per-dose-field.tsx":
+      "a chip row that opens a free-number field for any other count",
+    "components/body-sites/body-sites-section.tsx":
+      "wrapping side chips under a body-site picker, not a track",
+    "components/illness/log-day-sheet.tsx":
+      "a graded severity scale per symptom, one square per level",
+    "components/cycle/log-day-sheet.tsx":
+      "a graded severity scale per symptom, one circle per level",
+    "components/charts/chart-overlay-controls.tsx":
+      "baselines stay pressable while greyed, with a tooltip saying why there is no data",
+    "components/timeline/timeline-view.tsx":
+      "a single button that opens the range sheet, beside the zoom Segmented",
+  };
+
+  function pressedByValue(source: string): number {
+    return (source.match(PRESSED_BY_VALUE) ?? []).length;
+  }
+
+  it("finds none outside the reasoned exceptions", async () => {
+    const { join } = await import("node:path");
+    const { readSourceText, stripComments, walkSourceFiles } =
+      await import("@/__tests__/helpers/source-files");
+    const src = join(__dirname, "../../..");
+    const found = walkSourceFiles(src, { floor: 2000 })
+      .filter((p) => /^(components|app)\//.test(p))
+      .filter((p) => !p.includes("__tests__/"))
+      .filter((p) => p !== "components/ui/segmented.tsx")
+      .filter(
+        (p) => pressedByValue(stripComments(readSourceText(join(src, p)))) > 0,
+      )
+      .sort();
+    expect(found).toEqual(Object.keys(NOT_A_SEGMENT).sort());
+  });
+
+  it("counter-check: catches a hand-built pair, not an on/off toggle", () => {
+    expect(
+      pressedByValue(`<Button aria-pressed={filter === "all"}>All</Button>
+<Button aria-pressed={filter === "failed"}>Failed</Button>`),
+    ).toBe(2);
+    expect(pressedByValue(`<Button aria-pressed={open}>Show</Button>`)).toBe(0);
+  });
+});
diff --git a/src/components/ui/__tests__/segmented.browser.test.tsx b/src/components/ui/__tests__/segmented.browser.test.tsx
new file mode 100644
index 000000000..d4bf150c0
--- /dev/null
+++ b/src/components/ui/__tests__/segmented.browser.test.tsx
@@ -0,0 +1,229 @@
+import { useState } from "react";
+import { LayoutGrid, Table } from "lucide-react";
+import { describe, expect, it, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+
+import { renderWithApp } from "../../../../tests/browser/render";
+import { Segmented, type SegmentedProps } from "../segmented";
+
+type Zoom = "day" | "week" | "month";
+
+const OPTIONS = [
+  { value: "day", label: "Day" },
+  { value: "week", label: "Week" },
+  { value: "month", label: "Month" },
+] as const;
+
+/**
+ * The control as a caller holds it: the value lives in the parent and moves
+ * only when `onChange` says so, which is what makes the roving tab stop
+ * follow the selection.
+ */
+function Controlled({
+  initial = "day",
+  onChange,
+  ...props
+}: Partial<Omit<SegmentedProps<Zoom>, "value">> & { initial?: Zoom }) {
+  const [value, setValue] = useState<Zoom>(initial);
+  return (
+    <>
+      <button type="button">Before</button>
+      <Segmented
+        options={OPTIONS}
+        label="Zoom"
+        slot="zoom"
+        {...props}
+        value={value}
+        onChange={(next) => {
+          onChange?.(next);
+          setValue(next);
+        }}
+      />
+      <button type="button">After</button>
+    </>
+  );
+}
+
+async function mount(props: Parameters<typeof Controlled>[0] = {}) {
+  const onChange = vi.fn();
+  const { screen } = await renderWithApp(
+    <Controlled onChange={onChange} {...props} />,
+  );
+  const radio = (name: string) => screen.getByRole("radio", { name });
+  return { screen, onChange, radio };
+}
+
+describe("<Segmented> in radio mode", () => {
+  it("is one tab stop, on the chosen segment", async () => {
+    const { screen, radio } = await mount({ initial: "week" });
+    await expect
+      .element(screen.getByRole("radiogroup", { name: "Zoom" }))
+      .toBeInTheDocument();
+    await expect.element(radio("Week")).toBeChecked();
+    await expect.element(radio("Day")).not.toBeChecked();
+
+    await screen.getByRole("button", { name: "Before" }).click();
+    await userEvent.tab();
+    await expect.element(radio("Week")).toHaveFocus();
+    await userEvent.tab();
+    await expect
+      .element(screen.getByRole("button", { name: "After" }))
+      .toHaveFocus();
+  });
+
+  it("moves focus and selection together with the arrow keys", async () => {
+    const { onChange, radio } = await mount();
+    await radio("Day").click();
+    onChange.mockClear();
+
+    await userEvent.keyboard("{ArrowRight}");
+    await expect.element(radio("Week")).toHaveFocus();
+    await expect.element(radio("Week")).toBeChecked();
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(radio("Month")).toBeChecked();
+    await userEvent.keyboard("{ArrowLeft}");
+    await expect.element(radio("Week")).toHaveFocus();
+    expect(onChange.mock.calls).toEqual([["week"], ["month"], ["week"]]);
+  });
+
+  it("wraps at both ends", async () => {
+    const { radio } = await mount({ initial: "month" });
+    await radio("Month").click();
+    await userEvent.keyboard("{ArrowRight}");
+    await expect.element(radio("Day")).toHaveFocus();
+    await expect.element(radio("Day")).toBeChecked();
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(radio("Month")).toHaveFocus();
+    await expect.element(radio("Month")).toBeChecked();
+  });
+
+  it("jumps to the first and last segment with Home and End", async () => {
+    const { onChange, radio } = await mount({ initial: "week" });
+    await radio("Week").click();
+    await userEvent.keyboard("{End}");
+    await expect.element(radio("Month")).toHaveFocus();
+    await userEvent.keyboard("{Home}");
+    await expect.element(radio("Day")).toHaveFocus();
+    await expect.element(radio("Day")).toBeChecked();
+    expect(onChange).toHaveBeenLastCalledWith("day");
+  });
+
+  it("fires again on the chosen segment, which can open something", async () => {
+    const { onChange, radio } = await mount({ initial: "day" });
+    await radio("Day").click();
+    await radio("Day").click();
+    expect(onChange.mock.calls).toEqual([["day"], ["day"]]);
+  });
+
+  it("takes no press and no key while disabled", async () => {
+    const { screen, onChange, radio } = await mount({ disabled: true });
+    await expect
+      .element(screen.getByRole("radiogroup", { name: "Zoom" }))
+      .toHaveAttribute("aria-disabled", "true");
+    await expect.element(radio("Week")).toBeDisabled();
+    await radio("Week").click({ force: true });
+    await screen.getByRole("button", { name: "Before" }).click();
+    await userEvent.tab();
+    await userEvent.keyboard("{ArrowRight}{End}");
+    expect(onChange).not.toHaveBeenCalled();
+    await expect.element(radio("Day")).toBeChecked();
+  });
+});
+
+describe("<Segmented> in toggle mode", () => {
+  it("renders pressed buttons and ignores a press on the active one", async () => {
+    const { screen, onChange } = await mount({ mode: "toggle" });
+    await expect
+      .element(screen.getByRole("group", { name: "Zoom" }))
+      .toBeInTheDocument();
+    expect(screen.getByRole("radio").elements()).toHaveLength(0);
+    const day = screen.getByRole("button", { name: "Day" });
+    const week = screen.getByRole("button", { name: "Week" });
+    await expect.element(day).toHaveAttribute("aria-pressed", "true");
+
+    await day.click();
+    expect(onChange).not.toHaveBeenCalled();
+    await week.click();
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("week");
+    await expect.element(week).toHaveAttribute("aria-pressed", "true");
+    await expect.element(day).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("leaves every segment its own tab stop and the arrows alone", async () => {
+    const { screen, onChange } = await mount({ mode: "toggle" });
+    await screen.getByRole("button", { name: "Day" }).click();
+    await userEvent.keyboard("{ArrowRight}");
+    expect(onChange).not.toHaveBeenCalled();
+    await userEvent.tab();
+    await expect
+      .element(screen.getByRole("button", { name: "Week" }))
+      .toHaveFocus();
+  });
+});
+
+describe("<Segmented> look", () => {
+  it("fills only the chosen segment in the primary colour, on no track", async () => {
+    const { screen, radio } = await mount({ initial: "week" });
+    const group = screen.getByRole("radiogroup").element();
+    const probe = document.createElement("span");
+    probe.className = "bg-primary";
+    document.body.append(probe);
+    const primary = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+
+    const background = (name: string) =>
+      getComputedStyle(radio(name).element()).backgroundColor;
+    expect(background("Week")).toBe(primary);
+    expect(background("Day")).not.toBe(primary);
+    expect(getComputedStyle(group).backgroundColor).toBe("rgba(0, 0, 0, 0)");
+  });
+
+  it("sets the small size in smaller type and keeps the 36 px floor", async () => {
+    const { radio } = await mount();
+    const md = radio("Day").element();
+    expect(getComputedStyle(md).fontSize).toBe("14px");
+    expect(md.getBoundingClientRect().height).toBeGreaterThanOrEqual(36);
+
+    const { screen } = await renderWithApp(
+      <Segmented
+        options={OPTIONS}
+        value="day"
+        onChange={() => {}}
+        label="Range"
+        size="sm"
+      />,
+    );
+    const sm = screen
+      .getByRole("radiogroup", { name: "Range" })
+      .getByRole("radio", { name: "Day" })
+      .element();
+    expect(getComputedStyle(sm).fontSize).toBe("12px");
+    expect(sm.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
+  });
+
+  it("names icon-only segments without showing the label", async () => {
+    const onChange = vi.fn();
+    const { screen } = await renderWithApp(
+      <Segmented
+        mode="toggle"
+        iconOnly
+        options={[
+          { value: "cards", label: "Cards", icon: LayoutGrid },
+          { value: "table", label: "Table", icon: Table },
+        ]}
+        value="cards"
+        onChange={onChange}
+        label="View"
+        optionSlot={(v) => `medications-view-${v}`}
+      />,
+    );
+    const table = screen.getByRole("button", { name: "Table" });
+    await expect.element(table).toHaveAttribute("title", "Table");
+    await expect
+      .element(table)
+      .toHaveAttribute("data-slot", "medications-view-table");
+    await expect.element(screen.getByText("Cards")).not.toBeInTheDocument();
+    await table.click();
+    expect(onChange).toHaveBeenCalledWith("table");
+  });
+});
diff --git a/src/components/ui/__tests__/segmented.test.tsx b/src/components/ui/__tests__/segmented.test.tsx
deleted file mode 100644
index 7f3770b4c..000000000
--- a/src/components/ui/__tests__/segmented.test.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-import { isValidElement, type ReactElement, type ReactNode } from "react";
-import { LayoutGrid, Table } from "lucide-react";
-
-import { Segmented, type SegmentedProps } from "../segmented";
-
-const OPTIONS = [
-  { value: "recent", label: "Last 90 days" },
-  { value: "all", label: "All" },
-] as const;
-
-type Props = SegmentedProps<"recent" | "all">;
-
-function html(props: Partial<Props> = {}) {
-  return renderToStaticMarkup(
-    <Segmented
-      options={OPTIONS}
-      value="recent"
-      onChange={() => {}}
-      label="History"
-      slot="history-view"
-      {...props}
-    />,
-  );
-}
-
-/** The segment buttons of a rendered tree, for driving their handlers. */
-function buttons(node: ReactNode): ReactElement<{ onClick: () => void }>[] {
-  const out: ReactElement<{ onClick: () => void }>[] = [];
-  const walk = (n: ReactNode) => {
-    if (Array.isArray(n)) return n.forEach(walk);
-    if (!isValidElement(n)) return;
-    const el = n as ReactElement<{ children?: ReactNode; onClick: () => void }>;
-    if (el.type === "button") out.push(el);
-    walk(el.props.children);
-  };
-  walk(node);
-  return out;
-}
-
-vi.mock("@/hooks/use-roving-radio-group", () => ({
-  useRovingRadioGroup: () => ({
-    getRadioProps: (i: number) => ({ tabIndex: i === 0 ? 0 : -1 }),
-  }),
-}));
-
-describe("<Segmented>", () => {
-  it("is a radiogroup with one checked radio by default", () => {
-    const out = html();
-    expect(out).toContain('role="radiogroup"');
-    expect(out).toContain('aria-label="History"');
-    expect(out.match(/role="radio"/g)?.length).toBe(2);
-    expect(out.match(/aria-checked="true"/g)?.length).toBe(1);
-    expect(out).toContain('data-slot="history-view-all"');
-  });
-
-  it("gives every segment the 44 px floor on a coarse pointer", () => {
-    const out = html();
-    expect(out.match(/pointer-coarse:min-h-11/g)?.length).toBe(2);
-    expect(out).toContain("min-h-9");
-  });
-
-  it("fills the chosen segment in the primary colour, on no track", () => {
-    const out = html();
-    const segments = out.match(/<button[^>]*>/g) ?? [];
-    expect(segments).toHaveLength(2);
-    const chosen = segments.filter((b) => b.includes('aria-checked="true"'));
-    expect(chosen).toHaveLength(1);
-    expect(chosen[0]).toContain("bg-primary text-primary-foreground");
-    const other = segments.find((b) => b.includes('aria-checked="false"'));
-    expect(other).not.toContain("bg-primary");
-    const group = out.match(/<div[^>]*role="radiogroup"[^>]*>/)?.[0];
-    expect(group).not.toContain("bg-muted");
-  });
-
-  it("sets a chart header's range row in the small type", () => {
-    expect(html()).toContain("text-sm");
-    const small = html({ size: "sm" });
-    expect(small).toContain("text-xs");
-    expect(small).not.toContain("text-sm");
-    expect(small.match(/min-h-11/g)?.length).toBe(2);
-  });
-
-  it("keeps a disabled chosen segment on the readable token pair", () => {
-    const chosen = html({ disabled: true })
-      .match(/<button[^>]*>/g)
-      ?.find((b) => b.includes('aria-checked="true"'));
-    expect(chosen).toContain("disabled:bg-primary-disabled");
-    expect(chosen).toContain("disabled:opacity-100");
-  });
-
-  it("renders pressed buttons in toggle mode", () => {
-    const out = html({ mode: "toggle" });
-    expect(out).toContain('role="group"');
-    expect(out).not.toContain('role="radio"');
-    expect(out).toContain('aria-pressed="true"');
-    expect(out).toContain('aria-pressed="false"');
-  });
-
-  it("names icon-only segments and sizes them square", () => {
-    const out = renderToStaticMarkup(
-      <Segmented
-        mode="toggle"
-        iconOnly
-        options={[
-          { value: "cards", label: "Cards", icon: LayoutGrid },
-          { value: "table", label: "Table", icon: Table },
-        ]}
-        value="cards"
-        onChange={() => {}}
-        label="View"
-        optionSlot={(v) => `medications-view-${v}`}
-      />,
-    );
-    expect(out).toContain('aria-label="Cards"');
-    expect(out).toContain('title="Table"');
-    expect(out.match(/pointer-coarse:size-11/g)?.length).toBe(2);
-    expect(out).toContain('data-slot="medications-view-table"');
-    expect(out).not.toContain(">Cards<");
-  });
-
-  it("re-fires the chosen segment in radio mode, which can open something", () => {
-    const onChange = vi.fn();
-    const tree = Segmented({
-      options: OPTIONS,
-      value: "recent",
-      onChange,
-      label: "History",
-    });
-    buttons(tree)[0].props.onClick();
-    expect(onChange).toHaveBeenCalledWith("recent");
-  });
-
-  it("ignores a press on the active segment in toggle mode", () => {
-    const onChange = vi.fn();
-    const tree = Segmented({
-      options: OPTIONS,
-      value: "recent",
-      onChange,
-      label: "History",
-      mode: "toggle",
-    });
-    const [active, other] = buttons(tree);
-    active.props.onClick();
-    expect(onChange).not.toHaveBeenCalled();
-    other.props.onClick();
-    expect(onChange).toHaveBeenCalledWith("all");
-  });
-});
-
-describe("one segmented control", () => {
-  it("is the only segmented-control component in the tree", async () => {
-    const { readFileSync } = await import("node:fs");
-    const { join } = await import("node:path");
-    const { walkSourceFiles } =
-      await import("@/__tests__/helpers/source-files");
-    const src = join(__dirname, "../../..");
-    const defining = walkSourceFiles(src, { floor: 2000 })
-      .filter((p) => !p.includes("__tests__/"))
-      .filter((p) =>
-        /export function (?:Segmented\w*|ViewToggle|\w*SegmentedToggle)\b/.test(
-          readFileSync(join(src, p), "utf8"),
-        ),
-      );
-    expect(defining).toEqual(["components/ui/segmented.tsx"]);
-  });
-});
-
-/**
- * A row of buttons whose `aria-pressed` compares a state to each button's
- * value is a segmented control spelled by hand: six of them sat beside
- * `Segmented` (the narrative period, the lab result type, both admin filters,
- * the chart range tabs, the mood chart's copy of them), each with its own
- * size, fill and gap. New ones are refused; the ones that remain are not one
- * choice on one track, and say why.
- */
-describe("no hand-built segmented control", () => {
-  const PRESSED_BY_VALUE = /aria-pressed=\{[^}]*===[^}]*\}/g;
-
-  const NOT_A_SEGMENT: Record<string, string> = {
-    "components/settings/security-section/passkey-list-section.tsx":
-      "one method is disabled while the account has no passkey; Segmented disables the whole track",
-    "components/medications/units-per-dose-field.tsx":
-      "a chip row that opens a free-number field for any other count",
-    "components/body-sites/body-sites-section.tsx":
-      "wrapping side chips under a body-site picker, not a track",
-    "components/illness/log-day-sheet.tsx":
-      "a graded severity scale per symptom, one square per level",
-    "components/cycle/log-day-sheet.tsx":
-      "a graded severity scale per symptom, one circle per level",
-    "components/charts/chart-overlay-controls.tsx":
-      "baselines stay pressable while greyed, with a tooltip saying why there is no data",
-    "components/timeline/timeline-view.tsx":
-      "a single button that opens the range sheet, beside the zoom Segmented",
-  };
-
-  function pressedByValue(source: string): number {
-    return (source.match(PRESSED_BY_VALUE) ?? []).length;
-  }
-
-  it("finds none outside the reasoned exceptions", async () => {
-    const { readFileSync } = await import("node:fs");
-    const { join } = await import("node:path");
-    const { stripComments, walkSourceFiles } =
-      await import("@/__tests__/helpers/source-files");
-    const src = join(__dirname, "../../..");
-    const found = walkSourceFiles(src, { floor: 2000 })
-      .filter((p) => /^(components|app)\//.test(p))
-      .filter((p) => !p.includes("__tests__/"))
-      .filter((p) => p !== "components/ui/segmented.tsx")
-      .filter(
-        (p) =>
-          pressedByValue(stripComments(readFileSync(join(src, p), "utf8"))) > 0,
-      )
-      .sort();
-    expect(found).toEqual(Object.keys(NOT_A_SEGMENT).sort());
-  });
-
-  it("counter-check: catches a hand-built pair, not an on/off toggle", () => {
-    expect(
-      pressedByValue(`<Button aria-pressed={filter === "all"}>All</Button>
-<Button aria-pressed={filter === "failed"}>Failed</Button>`),
-    ).toBe(2);
-    expect(pressedByValue(`<Button aria-pressed={open}>Show</Button>`)).toBe(0);
-  });
-});
diff --git a/src/components/workouts/__tests__/manual-workout-form.browser.test.tsx b/src/components/workouts/__tests__/manual-workout-form.browser.test.tsx
new file mode 100644
index 000000000..305a63e6d
--- /dev/null
+++ b/src/components/workouts/__tests__/manual-workout-form.browser.test.tsx
@@ -0,0 +1,205 @@
+/**
+ * `<ManualWorkoutForm>`, the quick-entry sheet's workout form, driven by
+ * picking, typing and pressing Save. The entry rules live in
+ * `manual-entry.ts` and its own suite; this one pins what the person sees
+ * and what reaches `POST /api/workouts/batch`: the field errors, the distance
+ * asked in the reader's unit and sent in metres, the start counted back from
+ * now, the pending state, and one external id per opened form.
+ */
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { page } from "vitest/browser";
+
+import type { AuthUser } from "@/hooks/use-auth";
+import { manualWorkoutOriginalFromRow } from "@/lib/workouts/manual-entry";
+
+import { pinDate } from "../../../../tests/browser/clock";
+import {
+  stubFetch,
+  type FetchStub,
+} from "../../../../tests/browser/fetch-stub";
+import { renderWithApp } from "../../../../tests/browser/render";
+import { ManualWorkoutForm } from "../manual-workout-form";
+
+const NOW = "2026-09-15T10:00:00.000Z";
+const BATCH = "/api/workouts/batch";
+
+let api: FetchStub;
+
+beforeEach(() => {
+  pinDate(NOW);
+  api = stubFetch().on("POST", BATCH, {
+    data: { entries: [{ index: 0, status: "inserted" }] },
+  });
+});
+
+async function mount(
+  props: Parameters<typeof ManualWorkoutForm>[0] = {},
+  user: Partial<AuthUser> = {},
+) {
+  const onSuccess = vi.fn();
+  const { screen } = await renderWithApp(
+    <ManualWorkoutForm onSuccess={onSuccess} onCancel={() => {}} {...props} />,
+    { user },
+  );
+  const save = screen.getByRole("button", { name: "Save" });
+  const pickSport = async (name: string) => {
+    await screen.getByRole("combobox", { name: /^Activity/ }).click();
+    await screen.getByRole("option", { name }).click();
+  };
+  return { screen, onSuccess, save, pickSport };
+}
+
+type Posted = { workouts: Array<Record<string, unknown>> };
+const posted = () => api.calls("POST", BATCH).map((r) => r.body as Posted);
+
+describe("<ManualWorkoutForm>", () => {
+  it("names what is missing under each field and sends nothing", async () => {
+    const { screen, save } = await mount();
+    await save.click();
+    await expect.element(screen.getByText("Choose an activity.")).toBeVisible();
+    await expect
+      .element(screen.getByText("Enter how long the workout lasted."))
+      .toBeVisible();
+    await expect
+      .element(screen.getByLabelText("Hours"))
+      .toHaveAttribute("aria-invalid", "true");
+    expect(api.requests).toEqual([]);
+  });
+
+  it("asks an imperial reader for miles and sends metres, counted back from now", async () => {
+    const { screen, save, onSuccess, pickSport } = await mount(
+      {},
+      { unitPreference: "imperial" },
+    );
+    await pickSport("Running");
+    await screen.getByLabelText("Hours").fill("1");
+    await screen.getByLabelText("Minutes").fill("30");
+    await screen.getByLabelText("Distance (mi)").fill("10");
+    await screen.getByLabelText("Active energy (kcal)").fill("640");
+    await save.click();
+
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    const [body] = posted();
+    expect(body.workouts).toHaveLength(1);
+    expect(body.workouts[0]).toEqual({
+      sportType: "running",
+      startedAt: "2026-09-15T08:30:00.000Z",
+      endedAt: NOW,
+      source: "MANUAL",
+      externalId: expect.stringMatching(/^manual:/),
+      totalDistanceM: 16093.4,
+      totalEnergyKcal: 640,
+    });
+  });
+
+  it("asks a metric reader for kilometres", async () => {
+    const { screen, save, onSuccess, pickSport } = await mount();
+    await pickSport("Cycling");
+    await screen.getByLabelText("Minutes").fill("45");
+    await screen.getByLabelText("Distance (km)").fill("21,5");
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()[0].workouts[0]).toMatchObject({
+      sportType: "cycling",
+      startedAt: "2026-09-15T09:15:00.000Z",
+      totalDistanceM: 21500,
+    });
+  });
+
+  it("holds Save while the write is pending, then reports it once", async () => {
+    const pending = api.deferred("POST", BATCH);
+    const { screen, save, onSuccess, pickSport } = await mount();
+    await pickSport("Yoga");
+    await screen.getByLabelText("Minutes").fill("20");
+    await save.click();
+
+    await expect.element(save).toBeDisabled();
+    await expect
+      .element(screen.getByRole("button", { name: "Cancel" }))
+      .toBeDisabled();
+    pending.release({ data: { entries: [{ index: 0, status: "inserted" }] } });
+    await expect.element(save).toBeEnabled();
+    expect(onSuccess).toHaveBeenCalledOnce();
+  });
+
+  it("retries a failed save under the same external id", async () => {
+    api.on("POST", BATCH, { status: 503, error: "Service unavailable" });
+    const { screen, save, onSuccess, pickSport } = await mount();
+    await pickSport("Running");
+    await screen.getByLabelText("Minutes").fill("30");
+    await save.click();
+    await expect
+      .element(screen.getByRole("alert"))
+      .toHaveTextContent("Service unavailable");
+    expect(onSuccess).not.toHaveBeenCalled();
+
+    api.on("POST", BATCH, {
+      data: { entries: [{ index: 0, status: "duplicate" }] },
+    });
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    const [first, second] = posted();
+    expect(second.workouts[0].externalId).toBe(first.workouts[0].externalId);
+  });
+
+  it("lays out for a phone: duration side by side, distance over energy", async () => {
+    await page.viewport(390, 844);
+    const { screen, save } = await mount();
+    const top = (label: string) =>
+      screen.getByLabelText(label).element().getBoundingClientRect().top;
+    expect(top("Hours")).toBe(top("Minutes"));
+    expect(top("Active energy (kcal)")).toBeGreaterThan(top("Distance (km)"));
+    expect(
+      save.element().getBoundingClientRect().height,
+    ).toBeGreaterThanOrEqual(44);
+    // A record, not a training log: no heart rate, sets or route to fill in.
+    await expect
+      .element(screen.getByText(/heart|bpm|sets|reps/i))
+      .not.toBeInTheDocument();
+  });
+
+  it("opens an edit on the stored values and re-posts them unchanged", async () => {
+    const original = manualWorkoutOriginalFromRow(
+      {
+        sportType: "cycling",
+        startedAt: "2026-09-14T06:00:00.000Z",
+        endedAt: "2026-09-14T07:30:00.000Z",
+        durationSec: 5400,
+        distanceM: 32000,
+        activeEnergyKcal: 640,
+        minHr: null,
+        stepCount: null,
+        elevationM: null,
+        pauseDurationSec: null,
+        storedAvgHr: 131,
+        storedMaxHr: null,
+      },
+      { timezone: "UTC", unitPreference: "metric" },
+    );
+    const externalId = "manual:5b0f3c1e-1111-4222-8333-444455556666";
+    api.on("POST", BATCH, {
+      data: { entries: [{ index: 0, status: "updated" }] },
+    });
+    const { screen, save, onSuccess } = await mount({
+      edit: { externalId, original },
+    });
+    await expect
+      .element(screen.getByRole("combobox", { name: /^Activity/ }))
+      .toHaveTextContent("Cycling");
+    await expect.element(screen.getByLabelText("Hours")).toHaveValue("1");
+    await expect.element(screen.getByLabelText("Minutes")).toHaveValue("30");
+    await expect
+      .element(screen.getByLabelText("Distance (km)"))
+      .toHaveValue("32");
+    await save.click();
+    await expect.poll(() => onSuccess.mock.calls.length).toBe(1);
+    expect(posted()[0].workouts[0]).toMatchObject({
+      externalId,
+      startedAt: "2026-09-14T06:00:00.000Z",
+      endedAt: "2026-09-14T07:30:00.000Z",
+      totalDistanceM: 32000,
+      totalEnergyKcal: 640,
+      avgHeartRate: 131,
+    });
+  });
+});
diff --git a/src/components/workouts/__tests__/manual-workout-form.test.tsx b/src/components/workouts/__tests__/manual-workout-save.test.ts
similarity index 57%
rename from src/components/workouts/__tests__/manual-workout-form.test.tsx
rename to src/components/workouts/__tests__/manual-workout-save.test.ts
index ff947bbf6..e04b69829 100644
--- a/src/components/workouts/__tests__/manual-workout-form.test.tsx
+++ b/src/components/workouts/__tests__/manual-workout-save.test.ts
@@ -1,56 +1,28 @@
 /**
- * `<ManualWorkoutForm>` and its save path, and the detail page's delete.
+ * The manual workout save path, and the detail page's delete.
  *
- * SSR-only, like the other capture-form suites (vitest runs in `node`, no
- * testing-library). The rules themselves live in `manual-entry.ts` and are
- * pinned in its own suite; this one pins the wire and the markup:
+ * The rules themselves live in `manual-entry.ts` and are pinned in its own
+ * suite, and the mounted form (fields, units, layout, editing) is driven in
+ * `manual-workout-form.browser.test.tsx`. This one pins the save and delete
+ * helpers on their own:
  *
  *   1. the save posts ONE entry to `POST /api/workouts/batch`, MANUAL, with
  *      the form's external id, and refreshes the workout reads;
  *   2. a `duplicate` (a second tap) is a success, a `skipped` entry is not;
- *   3. the form renders its five fields, the distance in the reader's unit,
- *      and a layout that stacks distance / energy on a phone;
- *   4. delete is offered for a hand-entered workout in one's own record only,
+ *   3. delete is offered for a hand-entered workout in one's own record only,
  *      and calls `DELETE /api/workouts/{id}`.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
 import type { QueryClient } from "@tanstack/react-query";
 
-import { I18nProvider } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
 
-vi.mock("@tanstack/react-query", () => ({
-  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
-}));
-vi.mock("sonner", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
-
-const authRef: { unitPreference: "metric" | "imperial" } = {
-  unitPreference: "metric",
-};
-vi.mock("@/hooks/use-auth", () => ({
-  useAuth: () => ({
-    user: {
-      username: "tester",
-      timezone: "Europe/Berlin",
-      unitPreference: authRef.unitPreference,
-    },
-  }),
-}));
-
-import {
-  ManualWorkoutForm,
-  saveManualWorkout,
-  sportOptions,
-} from "../manual-workout-form";
+import { saveManualWorkout, sportOptions } from "../manual-workout-form";
 import {
   canDeleteWorkout,
   deleteManualWorkout,
 } from "../delete-workout-button";
-import {
-  manualWorkoutOriginalFromRow,
-  type ManualWorkoutEntry,
-} from "@/lib/workouts/manual-entry";
+import type { ManualWorkoutEntry } from "@/lib/workouts/manual-entry";
 
 const ENTRY: ManualWorkoutEntry = {
   sportType: "cycling",
@@ -75,16 +47,9 @@ function fakeClient() {
   };
 }
 
-function render(node: React.ReactElement) {
-  return renderToStaticMarkup(
-    <I18nProvider initialLocale="en">{node}</I18nProvider>,
-  );
-}
-
 let fetchSpy: ReturnType<typeof vi.spyOn>;
 
 beforeEach(() => {
-  authRef.unitPreference = "metric";
   fetchSpy = vi.spyOn(globalThis, "fetch");
 });
 
@@ -176,43 +141,6 @@ describe("sportOptions", () => {
   });
 });
 
-describe("<ManualWorkoutForm> — markup", () => {
-  it("renders the five fields and nothing else", () => {
-    const html = render(<ManualWorkoutForm />);
-    expect(html).toContain('data-testid="manual-workout-sport"');
-    expect(html).toContain('data-testid="manual-workout-start"');
-    expect(html).toContain('data-testid="manual-workout-hours"');
-    expect(html).toContain('data-testid="manual-workout-minutes"');
-    expect(html).toContain('data-testid="manual-workout-distance"');
-    expect(html).toContain('data-testid="manual-workout-energy"');
-    expect(html).toContain("Activity");
-    expect(html).toContain("Duration");
-    expect(html).toContain("Active energy (kcal)");
-    // No heart rate, no sets, no route: a record, not a training log.
-    expect(html).not.toMatch(/heart|bpm|sets|reps/i);
-  });
-
-  it("names the distance in kilometres for a metric reader", () => {
-    expect(render(<ManualWorkoutForm />)).toContain("Distance (km)");
-  });
-
-  it("names the distance in miles for an imperial reader", () => {
-    authRef.unitPreference = "imperial";
-    expect(render(<ManualWorkoutForm />)).toContain("Distance (mi)");
-  });
-
-  it("keeps hours and minutes side by side and stacks distance and energy on a phone", () => {
-    const html = render(<ManualWorkoutForm />);
-    // Two short numeric fields fit a 390 px sheet side by side.
-    expect(html).toMatch(/class="grid grid-cols-2 gap-4"/);
-    // Distance and energy carry longer labels: one column below `sm`, two
-    // from 640 px up.
-    expect(html).toMatch(/class="grid gap-4 sm:grid-cols-2"/);
-    // The action buttons keep the 44 px touch floor on a phone.
-    expect(html).toContain("min-h-11 sm:min-h-9");
-  });
-});
-
 describe("delete — a hand-entered workout in one's own record only", () => {
   it("is offered for a MANUAL workout in one's own record", () => {
     expect(
@@ -254,39 +182,3 @@ describe("delete — a hand-entered workout in one's own record only", () => {
     });
   });
 });
-
-describe("<ManualWorkoutForm> — editing a stored workout (#1162)", () => {
-  const original = manualWorkoutOriginalFromRow(
-    {
-      sportType: "cycling",
-      startedAt: "2026-09-15T06:00:00.000Z",
-      endedAt: "2026-09-15T07:30:00.000Z",
-      durationSec: 5400,
-      distanceM: 32000,
-      activeEnergyKcal: 640,
-      minHr: null,
-      stepCount: null,
-      elevationM: null,
-      pauseDurationSec: null,
-      storedAvgHr: 131,
-      storedMaxHr: null,
-    },
-    { timezone: "Europe/Berlin", unitPreference: "metric" },
-  );
-
-  it("opens on the stored values", () => {
-    const html = render(
-      <ManualWorkoutForm edit={{ externalId: ENTRY.externalId, original }} />,
-    );
-    expect(html).toContain('value="2026-09-15T08:00"');
-    expect(html).toContain('value="1"');
-    expect(html).toContain('value="30"');
-    expect(html).toContain('value="32"');
-    expect(html).toContain('value="640"');
-  });
-
-  it("opens empty when it is not editing", () => {
-    const html = render(<ManualWorkoutForm />);
-    expect(html).not.toContain('value="640"');
-  });
-});
diff --git a/src/hooks/__tests__/use-url-filter-sync.browser.test.tsx b/src/hooks/__tests__/use-url-filter-sync.browser.test.tsx
new file mode 100644
index 000000000..6897b0b2e
--- /dev/null
+++ b/src/hooks/__tests__/use-url-filter-sync.browser.test.tsx
@@ -0,0 +1,268 @@
+/**
+ * The URL-owned filter contract, driven the way a list page uses it: a
+ * `FilterBar` of pills over `useUrlFilterSync`, in a real browser with a real
+ * address bar. What these pin and the markup tests could not: a facet picked
+ * from the open menu lands in the query as a new history entry, typed input
+ * rewrites the current one, the per-pill clear and Reset leave a bare URL, two
+ * writes in a row both land, and Back or an edited address re-seeds the pills.
+ */
+import { describe, expect, it } from "vitest";
+import { userEvent } from "vitest/browser";
+
+import {
+  FilterBar,
+  FilterBarDateRange,
+  FilterBarSelect,
+} from "@/components/ui/filter-bar";
+import { Input } from "@/components/ui/input";
+
+import { renderWithApp } from "../../../tests/browser/render";
+import {
+  currentSearch,
+  navigateExternally,
+  recordHistory,
+  setSearch,
+} from "../../../tests/browser/url";
+import { useUrlFilterSync } from "../use-url-filter-sync";
+
+interface Filters {
+  type?: string;
+  source?: string;
+  q?: string;
+  from?: string;
+  to?: string;
+}
+
+const KEYS = ["type", "source", "q", "from", "to"] as const;
+
+function parse(params: URLSearchParams): Filters {
+  const filters: Filters = {};
+  for (const key of KEYS) {
+    const value = params.get(key);
+    if (value) filters[key] = value;
+  }
+  return filters;
+}
+
+function serialise(filters: Filters): string {
+  const sp = new URLSearchParams();
+  for (const key of KEYS) {
+    const value = filters[key];
+    if (value) sp.set(key, value);
+  }
+  return sp.toString();
+}
+
+const TYPES = [
+  { value: "WEIGHT", label: "Weight" },
+  { value: "PULSE", label: "Pulse" },
+];
+const SOURCES = [
+  { value: "MANUAL", label: "Manual" },
+  { value: "WITHINGS", label: "Withings" },
+];
+
+/** A list page's filter rail, as the measurements and mood lists build it. */
+function FilterRail({ syncToUrl = true }: { syncToUrl?: boolean }) {
+  const { filters, applyFilters, patchFilters } = useUrlFilterSync<Filters>({
+    parse,
+    serialise,
+    syncToUrl,
+  });
+  const isFiltered = Object.keys(filters).length > 0;
+  return (
+    <>
+      <Input
+        aria-label="Search notes"
+        value={filters.q ?? ""}
+        onChange={(e) => patchFilters({ q: e.target.value }, "replace")}
+      />
+      <FilterBar
+        isFiltered={isFiltered}
+        onReset={() => applyFilters({})}
+        count={`${Object.keys(filters).length} active`}
+      >
+        <FilterBarDateRange
+          label="Date range"
+          from={filters.from ?? ""}
+          to={filters.to ?? ""}
+          onFromChange={(from) => patchFilters({ from })}
+          onToChange={(to) => patchFilters({ to })}
+          idPrefix="probe"
+        />
+        <FilterBarSelect
+          label="Type"
+          value={filters.type ?? "ALL"}
+          onValueChange={(v) =>
+            patchFilters({ type: v === "ALL" ? undefined : v })
+          }
+          allLabel="All types"
+          options={TYPES}
+        />
+        <FilterBarSelect
+          label="Source"
+          value={filters.source ?? "ALL"}
+          onValueChange={(v) =>
+            patchFilters({ source: v === "ALL" ? undefined : v })
+          }
+          allLabel="All sources"
+          options={SOURCES}
+        />
+      </FilterBar>
+    </>
+  );
+}
+
+async function mount(search = "", props: { syncToUrl?: boolean } = {}) {
+  setSearch(search);
+  const history = recordHistory();
+  const { screen } = await renderWithApp(<FilterRail {...props} />);
+  const pill = (name: string | RegExp) =>
+    screen.getByRole("combobox", { name });
+  const reset = () => screen.getByRole("button", { name: "Reset" });
+  const pick = async (pillName: string | RegExp, option: string) => {
+    await pill(pillName).click();
+    await screen.getByRole("option", { name: option }).click();
+  };
+  return { screen, history, pill, reset, pick };
+}
+
+/** The URL settles a task after the write; wait for the expected query. */
+async function expectSearch(search: string) {
+  await expect.poll(currentSearch).toBe(search);
+}
+
+describe("useUrlFilterSync with FilterBar", () => {
+  it("seeds the pills from the address it mounts on", async () => {
+    const { screen, pill, reset } = await mount("?type=WEIGHT&source=WITHINGS");
+    await expect
+      .element(pill("Type: Weight"))
+      .toHaveAttribute("data-active", "true");
+    await expect.element(pill("Source: Withings")).toBeInTheDocument();
+    await expect.element(reset()).toBeVisible();
+    await expect.element(screen.getByText("2 active")).toBeVisible();
+  });
+
+  it("shows no Reset and no clear button while unfiltered", async () => {
+    const { screen, pill } = await mount();
+    await expect.element(pill("Type")).toHaveAttribute("data-active", "false");
+    await expect
+      .element(screen.getByRole("button", { name: "Reset" }))
+      .not.toBeInTheDocument();
+    await expect
+      .element(screen.getByRole("button", { name: /^Clear filter/ }))
+      .not.toBeInTheDocument();
+  });
+
+  it("writes a facet picked from the open menu as a new history entry", async () => {
+    const { pill, history, pick } = await mount();
+    const entries = window.history.length;
+    await pick("Type", "Pulse");
+    await expectSearch("?type=PULSE");
+    expect(history.pushes()).toEqual(["?type=PULSE"]);
+    expect(history.replaces()).toEqual([]);
+    expect(window.history.length).toBe(entries + 1);
+    await expect.element(pill("Type: Pulse")).toBeInTheDocument();
+  });
+
+  it("opens the menu inside the viewport, under its pill", async () => {
+    const { screen, pill } = await mount();
+    // Read before opening: the open menu hides the rest of the page from
+    // the accessibility tree, the pill included.
+    const trigger = pill("Source").element().getBoundingClientRect();
+    await pill("Source").click();
+    const listbox = screen.getByRole("listbox");
+    await expect.element(listbox).toBeVisible();
+    // The menu slides in from above its resting place; measure where it rests.
+    await Promise.all(document.getAnimations().map((a) => a.finished));
+    const menu = listbox.element().getBoundingClientRect();
+    expect(menu.top).toBeGreaterThanOrEqual(trigger.bottom - 1);
+    expect(menu.bottom).toBeLessThanOrEqual(window.innerHeight);
+    expect(menu.left).toBeGreaterThanOrEqual(0);
+    await userEvent.keyboard("{Escape}");
+    await expect.element(listbox).not.toBeInTheDocument();
+  });
+
+  it("rewrites the current entry for typed input instead of stacking one per key", async () => {
+    const { screen, history } = await mount("?type=WEIGHT");
+    const entries = window.history.length;
+    await screen.getByRole("textbox", { name: "Search notes" }).fill("knee");
+    await expectSearch("?type=WEIGHT&q=knee");
+    expect(history.pushes()).toEqual([]);
+    expect(history.replaces().at(-1)).toBe("?type=WEIGHT&q=knee");
+    expect(window.history.length).toBe(entries);
+  });
+
+  it("drops one facet with its clear button and keeps the others", async () => {
+    const { screen, pill } = await mount("?type=WEIGHT&source=MANUAL");
+    await screen.getByRole("button", { name: "Clear filter: Type" }).click();
+    await expectSearch("?source=MANUAL");
+    await expect.element(pill("Type")).toHaveAttribute("data-active", "false");
+    await expect.element(pill("Source: Manual")).toBeInTheDocument();
+  });
+
+  it("clears both date bounds in one press, two writes in a row", async () => {
+    const { screen } = await mount("?from=2026-05-12&to=2026-06-10&type=PULSE");
+    const range = screen.getByRole("button", { name: /^Date range: / });
+    await expect.element(range).toHaveTextContent("Date range: 05/12–06/10");
+    await screen
+      .getByRole("button", { name: "Clear filter: Date range" })
+      .click();
+    await expectSearch("?type=PULSE");
+    await expect
+      .element(screen.getByRole("button", { name: "Date range" }))
+      .toHaveAttribute("data-active", "false");
+  });
+
+  it("resets every facet to a bare URL and hides Reset", async () => {
+    const { reset, pill, history } = await mount("?type=WEIGHT&source=MANUAL");
+    await reset().click();
+    await expectSearch("");
+    expect(history.pushes()).toEqual([""]);
+    await expect.element(pill("Type")).toHaveAttribute("data-active", "false");
+    await expect
+      .element(pill("Source"))
+      .toHaveAttribute("data-active", "false");
+    await expect.element(reset()).not.toBeInTheDocument();
+  });
+
+  it("re-seeds from an address changed outside the component", async () => {
+    const { pill, reset } = await mount("?type=WEIGHT");
+    navigateExternally("?source=WITHINGS");
+    await expect.element(pill("Source: Withings")).toBeInTheDocument();
+    await expect.element(pill("Type")).toHaveAttribute("data-active", "false");
+    navigateExternally("");
+    await expect.element(reset()).not.toBeInTheDocument();
+  });
+
+  it("steps back through filter states with the browser's Back", async () => {
+    const { pill, pick } = await mount("?type=WEIGHT");
+    await pick("Type: Weight", "Pulse");
+    await expectSearch("?type=PULSE");
+    window.history.back();
+    await expectSearch("?type=WEIGHT");
+    await expect.element(pill("Type: Weight")).toBeInTheDocument();
+  });
+
+  it("keeps the state in memory and the address untouched with syncToUrl off", async () => {
+    const { pill, pick, history } = await mount("?type=WEIGHT", {
+      syncToUrl: false,
+    });
+    await expect.element(pill("Type")).toHaveAttribute("data-active", "false");
+    await pick("Type", "Pulse");
+    await expect.element(pill("Type: Pulse")).toBeInTheDocument();
+    expect(currentSearch()).toBe("?type=WEIGHT");
+    expect(history.writes).toEqual([]);
+  });
+
+  it("names Reset and the clear buttons in the reader's language", async () => {
+    setSearch("?source=MANUAL");
+    const { screen } = await renderWithApp(<FilterRail />, { locale: "de" });
+    await expect
+      .element(screen.getByRole("button", { name: "Zurücksetzen" }))
+      .toBeVisible();
+    await expect
+      .element(screen.getByRole("button", { name: "Filter entfernen: Source" }))
+      .toBeInTheDocument();
+  });
+});
diff --git a/src/hooks/__tests__/use-url-filter-sync.test.tsx b/src/hooks/__tests__/use-url-filter-sync.test.tsx
deleted file mode 100644
index 81e5a00bd..000000000
--- a/src/hooks/__tests__/use-url-filter-sync.test.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * The shared URL-owned-filter hook (`use-url-filter-sync.ts`) — the
- * documents-vault pattern extracted for the measurements and mood lists.
- * Pinned here: mount parses the live query string, a filter change writes
- * the serialised form back through the router (push by default, replace on
- * request), an empty filter set restores the bare pathname, and
- * `syncToUrl: false` detaches the state from the URL entirely.
- */
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-
-let mockSearch = "";
-const pushMock = vi.fn();
-const replaceMock = vi.fn();
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: pushMock, replace: replaceMock }),
-  usePathname: () => "/measurements",
-  useSearchParams: () => new URLSearchParams(mockSearch),
-}));
-
-import { useUrlFilterSync } from "../use-url-filter-sync";
-import {
-  installUrlStateBrowser,
-  type UrlStateBrowser,
-} from "@/__tests__/helpers/url-state-browser";
-
-let browser: UrlStateBrowser = installUrlStateBrowser("/");
-afterEach(() => browser.uninstall());
-
-interface ProbeFilters {
-  type?: string;
-  source?: string;
-}
-
-function parse(params: URLSearchParams): ProbeFilters {
-  const filters: ProbeFilters = {};
-  const type = params.get("type");
-  if (type) filters.type = type;
-  const source = params.get("source");
-  if (source) filters.source = source;
-  return filters;
-}
-
-function serialise(filters: ProbeFilters): string {
-  const sp = new URLSearchParams();
-  if (filters.type) sp.set("type", filters.type);
-  if (filters.source) sp.set("source", filters.source);
-  return sp.toString();
-}
-
-interface ProbeResult {
-  filters: ProbeFilters;
-  applyFilters: (next: ProbeFilters, mode?: "push" | "replace") => void;
-}
-
-function mount(search: string, syncToUrl?: boolean): ProbeResult {
-  mockSearch = search;
-  // Ref-shaped capture cell: the render-scoped assignment happens inside a
-  // closure the control-flow analysis cannot see through.
-  const captured: { current: ProbeResult | null } = { current: null };
-  function Probe() {
-    captured.current = useUrlFilterSync<ProbeFilters>({
-      parse,
-      serialise,
-      syncToUrl,
-    });
-    return null;
-  }
-  renderToStaticMarkup(<Probe />);
-  if (!captured.current) throw new Error("probe did not render");
-  // The live address the writes start from (`@/lib/url-state`).
-  browser.uninstall();
-  browser = installUrlStateBrowser(
-    search ? `/measurements?${search}` : "/measurements",
-  );
-  return captured.current;
-}
-
-beforeEach(() => {
-  pushMock.mockClear();
-  replaceMock.mockClear();
-});
-
-describe("useUrlFilterSync", () => {
-  it("parses the mounted query string into the filter object", () => {
-    const { filters } = mount("type=WEIGHT&source=WITHINGS");
-    expect(filters).toEqual({ type: "WEIGHT", source: "WITHINGS" });
-  });
-
-  it("writes a filter change to the URL via push by default", () => {
-    const { applyFilters } = mount("");
-    applyFilters({ type: "WEIGHT" });
-    expect(browser.push).toHaveBeenCalledWith("/measurements?type=WEIGHT");
-    expect(browser.replace).not.toHaveBeenCalled();
-  });
-
-  it("writes via replace when asked (high-frequency input)", () => {
-    const { applyFilters } = mount("");
-    applyFilters({ source: "MANUAL" }, "replace");
-    expect(browser.replace).toHaveBeenCalledWith("/measurements?source=MANUAL");
-    expect(browser.push).not.toHaveBeenCalled();
-  });
-
-  it("restores the bare pathname when every facet clears", () => {
-    const { applyFilters } = mount("type=WEIGHT");
-    applyFilters({});
-    expect(browser.push).toHaveBeenCalledWith("/measurements");
-  });
-
-  it("syncToUrl: false ignores the URL and never navigates", () => {
-    const { filters, applyFilters } = mount("type=WEIGHT", false);
-    expect(filters).toEqual({});
-    applyFilters({ type: "PULSE" });
-    expect(browser.push).not.toHaveBeenCalled();
-    expect(browser.replace).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/lib/charts/__tests__/data-ready-latch.test.ts b/src/lib/charts/__tests__/data-ready-latch.test.ts
index 21e9a46c7..0c310dd0d 100644
--- a/src/lib/charts/__tests__/data-ready-latch.test.ts
+++ b/src/lib/charts/__tests__/data-ready-latch.test.ts
@@ -66,7 +66,7 @@ describe("shouldFireDataReady", () => {
 
 describe("chart notify wiring", () => {
   const charts = [
-    "src/components/charts/health-chart.tsx",
+    "src/components/charts/health-chart/use-health-chart-series.ts",
     "src/components/charts/mood-chart.tsx",
     "src/components/charts/medication-compliance-chart.tsx",
   ];
diff --git a/src/lib/charts/__tests__/fetch-window.test.ts b/src/lib/charts/__tests__/fetch-window.test.ts
index 96287d8b6..589af8553 100644
--- a/src/lib/charts/__tests__/fetch-window.test.ts
+++ b/src/lib/charts/__tests__/fetch-window.test.ts
@@ -65,7 +65,10 @@ describe.each([
 describe("health chart wiring", () => {
   it("builds its fetch window from today's key, not the mount instant", () => {
     const chart = readFileSync(
-      join(process.cwd(), "src/components/charts/health-chart.tsx"),
+      join(
+        process.cwd(),
+        "src/components/charts/health-chart/use-health-chart-series.ts",
+      ),
       "utf8",
     );
     const memo = chart.slice(chart.indexOf("const fetchWindow = useMemo("));
diff --git a/tests/browser/clock.ts b/tests/browser/clock.ts
new file mode 100644
index 000000000..b1ffd8b5f
--- /dev/null
+++ b/tests/browser/clock.ts
@@ -0,0 +1,14 @@
+/**
+ * Pin `Date` for a browser test, and nothing else.
+ *
+ * Forms default their timestamp to "now" and refuse a future one, so a test
+ * that asserts the instant a form sends has to say what now is. Only `Date`
+ * is faked: timers, animation frames and the microtask queue keep running,
+ * which is what Radix, TanStack Query and the URL-state queue wait on.
+ * `setup.ts` restores the real clock after every test.
+ */
+import { vi } from "vitest";
+
+export function pinDate(iso: string): void {
+  vi.useFakeTimers({ toFake: ["Date"], now: new Date(iso) });
+}
diff --git a/tests/browser/fetch-stub.ts b/tests/browser/fetch-stub.ts
new file mode 100644
index 000000000..5bcbe4fd2
--- /dev/null
+++ b/tests/browser/fetch-stub.ts
@@ -0,0 +1,175 @@
+/**
+ * The network boundary for browser tests.
+ *
+ * Components talk to the server through `@/lib/api/api-fetch`, which calls
+ * the global `fetch`. Replacing `fetch` and nothing else keeps everything
+ * above it real: the envelope unwrapping, the idempotency header, TanStack
+ * Query's caching and retries, the component's own pending and error states.
+ * Never mock `@tanstack/react-query` or the API wrapper in this project; a
+ * test that does asserts its own stand-in.
+ *
+ * Every request is recorded with its parsed JSON body, so a form test asserts
+ * the payload the server would receive. A route can answer later than the
+ * request (`deferred`), which is how a test holds a form in its pending
+ * state. A request no route matches fails with a 404 envelope and is recorded
+ * too, so an unexpected call is visible rather than hanging.
+ *
+ * One request is ambient: `I18nProvider` mirrors the active locale to
+ * `PUT /api/auth/me/locale` on every mount, as it does in the app. The stub
+ * answers it and leaves it out of `requests`, so "nothing was sent" means
+ * nothing the component under test sent.
+ *
+ * `setup.ts` restores the real `fetch` after every test.
+ */
+export interface RecordedRequest {
+  method: string;
+  /** Path and query, without the origin. */
+  path: string;
+  headers: Headers;
+  /** The parsed JSON body, or the raw text when it is not JSON. */
+  body: unknown;
+}
+
+export interface StubResponse {
+  status?: number;
+  /** The envelope's `data`. Ignored when `error` is set. */
+  data?: unknown;
+  error?: string;
+  /** The envelope's `meta` (an error's `errorCode`, a list's totals). */
+  meta?: Record<string, unknown>;
+}
+
+type Responder = (
+  request: RecordedRequest,
+) => StubResponse | Promise<StubResponse>;
+
+interface Route {
+  method: string;
+  path: string | RegExp;
+  respond: Responder;
+}
+
+export interface FetchStub {
+  /** Answer `method path` (exact path, or a pattern) with `response`. */
+  on(
+    method: string,
+    path: string | RegExp,
+    response: StubResponse | Responder,
+  ): FetchStub;
+  /**
+   * Answer `method path` only when `release` is called, for asserting the
+   * pending state in between.
+   */
+  deferred(
+    method: string,
+    path: string | RegExp,
+  ): { release: (response?: StubResponse) => void };
+  /** Every request so far, in order. */
+  requests: RecordedRequest[];
+  /** The requests that hit `method path`. */
+  calls(method: string, path: string | RegExp): RecordedRequest[];
+}
+
+let realFetch: typeof fetch | null = null;
+
+/** Sent by the providers on every mount, not by the component under test. */
+const AMBIENT = [{ method: "PUT", path: "/api/auth/me/locale" }];
+
+function matches(route: Route, method: string, path: string): boolean {
+  if (route.method !== method) return false;
+  const bare = path.split("?")[0];
+  return typeof route.path === "string"
+    ? route.path === bare
+    : route.path.test(path);
+}
+
+function envelope({ status = 200, data = null, error, meta }: StubResponse) {
+  const body = {
+    ...(error ? { data: null, error } : { data, error: null }),
+    ...(meta ? { meta } : {}),
+  };
+  return new Response(JSON.stringify(body), {
+    status: error && status === 200 ? 400 : status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+async function record(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): Promise<RecordedRequest> {
+  const request = new Request(input, init);
+  const url = new URL(request.url, window.location.href);
+  const text = request.method === "GET" ? "" : await request.text();
+  let body: unknown = text === "" ? undefined : text;
+  try {
+    if (text !== "") body = JSON.parse(text);
+  } catch {
+    // Keep the raw text.
+  }
+  return {
+    method: request.method,
+    path: `${url.pathname}${url.search}`,
+    headers: request.headers,
+    body,
+  };
+}
+
+/** Replace `fetch` for the rest of the test. */
+export function stubFetch(): FetchStub {
+  realFetch ??= window.fetch;
+  const routes: Route[] = [];
+  const requests: RecordedRequest[] = [];
+
+  window.fetch = async (input, init) => {
+    const request = await record(input, init);
+    const ambient = AMBIENT.some(
+      (a) => a.method === request.method && a.path === request.path,
+    );
+    if (ambient) return envelope({ data: request.body ?? null });
+    requests.push(request);
+    // The newest route wins, so a test can override a default it set up.
+    const route = [...routes]
+      .reverse()
+      .find((r) => matches(r, request.method, request.path));
+    if (!route) {
+      return envelope({
+        status: 404,
+        error: `no stubbed route for ${request.method} ${request.path}`,
+      });
+    }
+    return envelope(await route.respond(request));
+  };
+
+  const stub: FetchStub = {
+    requests,
+    on(method, path, response) {
+      routes.push({
+        method,
+        path,
+        respond: typeof response === "function" ? response : () => response,
+      });
+      return stub;
+    },
+    deferred(method, path) {
+      let release: (response?: StubResponse) => void = () => {};
+      const answer = new Promise<StubResponse>((resolve) => {
+        release = (response = {}) => resolve(response);
+      });
+      routes.push({ method, path, respond: () => answer });
+      return { release: (response) => release(response) };
+    },
+    calls(method, path) {
+      return requests.filter((r) =>
+        matches({ method, path, respond: () => ({}) }, r.method, r.path),
+      );
+    },
+  };
+  return stub;
+}
+
+/** Called by `setup.ts` after each test. */
+export function restoreFetch(): void {
+  if (realFetch) window.fetch = realFetch;
+  realFetch = null;
+}
diff --git a/tests/browser/next-navigation.ts b/tests/browser/next-navigation.ts
new file mode 100644
index 000000000..4c1084968
--- /dev/null
+++ b/tests/browser/next-navigation.ts
@@ -0,0 +1,89 @@
+/**
+ * `next/navigation` for the browser project, aliased in `vitest.config.mts`.
+ *
+ * The App Router's hooks throw unless a router is mounted, and mounting one
+ * means booting Next. What a component needs from them is smaller: the
+ * current path and query, and a way to change them. This module answers both
+ * from the page's real `location` and `history`, so `@/lib/url-state` writes
+ * through the same `pushState` / `replaceState` it uses in the app.
+ *
+ * `useSearchParams` follows the address bar the way the router does: it
+ * re-reads on `popstate` and on the URL-state event, one task after the write
+ * rather than synchronously, which is the "adopted a render later" gap the
+ * helper's queue exists for. A test that only asserts what the page shows
+ * never sees the gap; one that writes twice in a row exercises it.
+ *
+ * `redirect` and `notFound` throw like Next's do, so a component that calls
+ * one fails its test loudly instead of rendering past it.
+ */
+import { useMemo, useSyncExternalStore } from "react";
+
+import { URL_STATE_EVENT } from "@/lib/url-state";
+
+function subscribe(onChange: () => void): () => void {
+  // The router adopts a write after the event loop turns, not inside the
+  // dispatch that announced it.
+  const deferred = () => setTimeout(onChange, 0);
+  window.addEventListener("popstate", deferred);
+  window.addEventListener(URL_STATE_EVENT, deferred);
+  return () => {
+    window.removeEventListener("popstate", deferred);
+    window.removeEventListener(URL_STATE_EVENT, deferred);
+  };
+}
+
+const readSearch = () => window.location.search;
+const readPathname = () => window.location.pathname;
+
+export function useSearchParams(): URLSearchParams {
+  const search = useSyncExternalStore(subscribe, readSearch, readSearch);
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+
+export function usePathname(): string {
+  return useSyncExternalStore(subscribe, readPathname, readPathname);
+}
+
+function navigate(mode: "push" | "replace", href: string): void {
+  const url = new URL(href, window.location.href);
+  if (mode === "push") window.history.pushState(null, "", url);
+  else window.history.replaceState(null, "", url);
+  window.dispatchEvent(new PopStateEvent("popstate"));
+}
+
+const router = {
+  push: (href: string) => navigate("push", href),
+  replace: (href: string) => navigate("replace", href),
+  back: () => window.history.back(),
+  forward: () => window.history.forward(),
+  refresh: () => {},
+  prefetch: () => {},
+};
+
+export function useRouter(): typeof router {
+  return router;
+}
+
+export function useParams(): Record<string, string> {
+  return {};
+}
+
+export function useSelectedLayoutSegment(): string | null {
+  return null;
+}
+
+export function useSelectedLayoutSegments(): string[] {
+  return [];
+}
+
+export function redirect(href: string): never {
+  throw new Error(`redirect(${href}) called in a browser test`);
+}
+
+export function permanentRedirect(href: string): never {
+  throw new Error(`permanentRedirect(${href}) called in a browser test`);
+}
+
+export function notFound(): never {
+  throw new Error("notFound() called in a browser test");
+}
diff --git a/tests/browser/render.tsx b/tests/browser/render.tsx
new file mode 100644
index 000000000..dc692a03d
--- /dev/null
+++ b/tests/browser/render.tsx
@@ -0,0 +1,101 @@
+/**
+ * Render a component the way the app mounts it, in a real browser.
+ *
+ * The providers are the app's own: `I18nProvider` with a real catalog and a
+ * real TanStack `QueryClient`. The signed-in account is seeded into that
+ * client under `queryKeys.authMe()`, exactly where `useAuth` reads it once
+ * `/api/auth/me` has answered, so a component that asks for the account gets
+ * it without a request. Everything else a component fetches goes through the
+ * network and is answered by `stubFetch()` from `./fetch-stub`.
+ *
+ * The app stylesheet is loaded by `setup.ts` for every browser test, so
+ * `hidden`, `pointer-events-none`, popper placement and the breakpoints lay
+ * out as they do in the app.
+ *
+ *   const { screen, queryClient } = await renderWithApp(<MeasurementForm />, {
+ *     user: { unitPreference: "imperial" },
+ *   });
+ *   await screen.getByLabelText("Value (lb)").fill("210");
+ */
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, type RenderResult } from "vitest-browser-react";
+
+import type { AuthUser } from "@/hooks/use-auth";
+import type { Locale } from "@/lib/i18n/config";
+import { I18nProvider } from "@/lib/i18n/context";
+import { loadMessages } from "@/lib/i18n/load-locale";
+import { queryKeys } from "@/lib/query-keys";
+
+/** A signed-in account with every preference at its default. */
+export function authUser(overrides: Partial<AuthUser> = {}): AuthUser {
+  return {
+    id: "user-1",
+    username: "user",
+    email: null,
+    role: "USER",
+    heightCm: null,
+    dateOfBirth: null,
+    gender: null,
+    timezone: "UTC",
+    onboardingCompletedAt: "2026-01-01T00:00:00.000Z",
+    onboardingTourCompleted: true,
+    onboardingTourProgress: null,
+    avatarUrl: null,
+    glucoseUnit: null,
+    unitPreference: "metric",
+    timeFormat: "AUTO",
+    dateFormat: "AUTO",
+    disableCoach: false,
+    fullName: null,
+    insurerName: null,
+    insurerIkNumber: null,
+    insuranceNumber: null,
+    lastReportPracticeName: null,
+    reportSelection: null,
+    cycleTrackingEnabled: false,
+    ...overrides,
+  };
+}
+
+export interface RenderWithAppOptions {
+  /** The reader's language. Its catalog is loaded before the first render. */
+  locale?: Locale;
+  /**
+   * The signed-in account, merged over `authUser()`. `null` leaves the
+   * account unanswered, as before `/api/auth/me` returns.
+   */
+  user?: Partial<AuthUser> | null;
+  /** Bring a client to seed more reads before rendering. */
+  queryClient?: QueryClient;
+}
+
+export interface AppRender {
+  screen: RenderResult;
+  queryClient: QueryClient;
+}
+
+/** A client configured like a test should want it: no retries, no refetch. */
+export function testQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false, refetchOnWindowFocus: false },
+      mutations: { retry: false },
+    },
+  });
+}
+
+export async function renderWithApp(
+  ui: ReactNode,
+  { locale = "en", user = {}, queryClient }: RenderWithAppOptions = {},
+): Promise<AppRender> {
+  const client = queryClient ?? testQueryClient();
+  if (user !== null) client.setQueryData(queryKeys.authMe(), authUser(user));
+  if (locale !== "en") await loadMessages(locale);
+  const screen = await render(
+    <QueryClientProvider client={client}>
+      <I18nProvider initialLocale={locale}>{ui}</I18nProvider>
+    </QueryClientProvider>,
+  );
+  return { screen, queryClient: client };
+}
diff --git a/tests/browser/setup.ts b/tests/browser/setup.ts
new file mode 100644
index 000000000..2a6647028
--- /dev/null
+++ b/tests/browser/setup.ts
@@ -0,0 +1,40 @@
+/**
+ * Setup for the `browser` project (`*.browser.test.tsx`, headless Chromium).
+ *
+ * - The app stylesheet, compiled by Vite through the project's PostCSS
+ *   config, so components lay out and hide as they do in the app, under the
+ *   theme class the boot script sets for a first visit (`dark`, see
+ *   `src/lib/pwa/theme-color.ts`); without one no colour token resolves.
+ * - The EN catalog, the fallback floor of every `t()` chain, loaded through
+ *   the production loader. `renderWithApp` loads any other locale it is
+ *   asked for.
+ * - After every test: the real `fetch`, the real clock, the page's starting
+ *   address and an empty `localStorage` come back, so a stub, a pinned date,
+ *   a URL write or a remembered preference never reaches the next test. Rendered
+ *   trees are unmounted by `vitest-browser-react` itself.
+ */
+import "@/app/globals.css";
+
+import { afterEach, beforeAll, beforeEach, vi } from "vitest";
+
+import { loadMessages } from "@/lib/i18n/load-locale";
+
+import { restoreFetch } from "./fetch-stub";
+import { rememberAddress, restoreAddress } from "./url";
+
+document.documentElement.classList.add("dark");
+
+beforeAll(async () => {
+  await loadMessages("en");
+});
+
+beforeEach(() => {
+  rememberAddress();
+});
+
+afterEach(() => {
+  restoreFetch();
+  vi.useRealTimers();
+  restoreAddress();
+  window.localStorage.clear();
+});
diff --git a/tests/browser/url.ts b/tests/browser/url.ts
new file mode 100644
index 000000000..55540b193
--- /dev/null
+++ b/tests/browser/url.ts
@@ -0,0 +1,89 @@
+/**
+ * The page's address, for URL-state tests in the browser project.
+ *
+ * Each test file runs in its own page, and `setup.ts` puts the address the
+ * page started on back after every test, so a test may write the URL freely.
+ * Only the query and hash are ever changed: the path is the test runner's
+ * own, and a component that writes state keeps the path it found.
+ */
+import { resetUrlStateForTests } from "@/lib/url-state";
+
+export interface HistoryRecord {
+  /** Every `pushState` and `replaceState` since `recordHistory()`, in order. */
+  writes: Array<{ mode: "push" | "replace"; search: string }>;
+  pushes: () => string[];
+  replaces: () => string[];
+}
+
+let restoreHistory: (() => void) | null = null;
+
+/**
+ * Record history writes without changing them: the real methods still run,
+ * so the page's location moves exactly as it would in the app.
+ */
+export function recordHistory(): HistoryRecord {
+  restoreHistory?.();
+  const { history } = window;
+  const push = history.pushState.bind(history);
+  const replace = history.replaceState.bind(history);
+  const writes: HistoryRecord["writes"] = [];
+  const searchOf = (url: string | URL | null | undefined) =>
+    url == null
+      ? window.location.search
+      : new URL(url, window.location.href).search;
+  history.pushState = (data, unused, url) => {
+    push(data, unused, url);
+    writes.push({ mode: "push", search: searchOf(url) });
+  };
+  history.replaceState = (data, unused, url) => {
+    replace(data, unused, url);
+    writes.push({ mode: "replace", search: searchOf(url) });
+  };
+  restoreHistory = () => {
+    history.pushState = push;
+    history.replaceState = replace;
+    restoreHistory = null;
+  };
+  return {
+    writes,
+    pushes: () => writes.filter((w) => w.mode === "push").map((w) => w.search),
+    replaces: () =>
+      writes.filter((w) => w.mode === "replace").map((w) => w.search),
+  };
+}
+
+/** Start the test on `search` (`""` for a bare path). */
+export function setSearch(search: string): void {
+  const query = search === "" || search.startsWith("?") ? search : `?${search}`;
+  window.history.replaceState(null, "", `${window.location.pathname}${query}`);
+}
+
+/**
+ * Change the query the way the person would from outside the component:
+ * Back, Forward or an edited address. The router hears `popstate`.
+ */
+export function navigateExternally(search: string): void {
+  setSearch(search);
+  window.dispatchEvent(new PopStateEvent("popstate"));
+}
+
+/** The current query string, `?`-prefixed or empty. */
+export function currentSearch(): string {
+  return window.location.search;
+}
+
+let initialHref: string | null = null;
+
+/** Called by `setup.ts` before each test. */
+export function rememberAddress(): void {
+  initialHref = window.location.href;
+}
+
+/** Called by `setup.ts` after each test. */
+export function restoreAddress(): void {
+  restoreHistory?.();
+  resetUrlStateForTests();
+  if (initialHref !== null && window.location.href !== initialHref) {
+    window.history.replaceState(null, "", initialHref);
+  }
+}
diff --git a/vitest.config.mts b/vitest.config.mts
index b62ed7af1..995c34e16 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -1,3 +1,4 @@
+import { playwright } from "@vitest/browser-playwright";
 import { defineConfig } from "vitest/config";
 import { globSync } from "node:fs";
 import { dirname, resolve } from "node:path";
@@ -10,12 +11,17 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 /**
- * Three projects, decided per file from its source (`tests/unit-projects.ts`):
- * `guards` and `unit` share a module graph inside a worker (`isolate:
- * false`), because their files neither mock nor stub anything; `isolated`
- * keeps one fresh graph per file for the ones that do. Run one with
- * `pnpm test --project guards`.
+ * Four projects. Three run in Node and are decided per file from its source
+ * (`tests/unit-projects.ts`): `guards` and `unit` share a module graph inside
+ * a worker (`isolate: false`), because their files neither mock nor stub
+ * anything; `isolated` keeps one fresh graph per file for the ones that do.
+ * The fourth, `browser`, runs `*.browser.test.tsx` in headless Chromium for
+ * components whose behaviour is interaction (see `tests/browser/`). Run one
+ * with `pnpm test --project guards`.
  */
+/** Files the `browser` project owns; no Node project collects them. */
+const BROWSER_TEST = /\.browser\.test\.tsx$/;
+
 const projectFiles = classifyUnitFiles(
   __dirname,
   globSync(
@@ -28,28 +34,34 @@ const projectFiles = classifyUnitFiles(
     {
       cwd: __dirname,
       exclude: (path) =>
-        path.startsWith("tests/integration") || path.includes("node_modules"),
+        path.startsWith("tests/integration") ||
+        path.includes("node_modules") ||
+        BROWSER_TEST.test(path),
     },
   ).sort(),
 );
 
+/** What the three Node projects share; the browser project sets its own. */
+const nodeTest = {
+  globals: true,
+  environment: "node",
+  // Pin the host timezone. CI runs UTC; without this a contributor in any
+  // other zone sees a different suite than the gate does — verified: a
+  // UTC+14 host fails five tests on an otherwise green tree. Pinning makes
+  // local and CI agree, and makes "which zone does this test mean?" an
+  // explicit choice the fixture has to state rather than a property of the
+  // machine it runs on. Tests that need a different HOST zone set
+  // `process.env.TZ` themselves and restore it afterwards (see
+  // `next-due-day-label.test.ts`).
+  env: { TZ: "UTC" },
+  // Primes the i18n locale cache so provider mounts resolve every
+  // locale synchronously (production gets the active bundle as an RSC
+  // prop instead — see src/lib/i18n/load-locale.ts).
+  setupFiles: ["./vitest.setup.ts"],
+};
+
 export default defineConfig({
   test: {
-    globals: true,
-    environment: "node",
-    // Pin the host timezone. CI runs UTC; without this a contributor in any
-    // other zone sees a different suite than the gate does — verified: a
-    // UTC+14 host fails five tests on an otherwise green tree. Pinning makes
-    // local and CI agree, and makes "which zone does this test mean?" an
-    // explicit choice the fixture has to state rather than a property of the
-    // machine it runs on. Tests that need a different HOST zone set
-    // `process.env.TZ` themselves and restore it afterwards (see
-    // `next-due-day-label.test.ts`).
-    env: { TZ: "UTC" },
-    // Primes the i18n locale cache so provider mounts resolve every
-    // locale synchronously (production gets the active bundle as an RSC
-    // prop instead — see src/lib/i18n/load-locale.ts).
-    setupFiles: ["./vitest.setup.ts"],
     // `--shard` splits by measured duration rather than file count, and files
     // start longest first. See `tests/durations/sequencer.ts`.
     sequence: {
@@ -77,15 +89,84 @@ export default defineConfig({
     projects: [
       {
         extends: true,
-        test: { name: "guards", include: projectFiles.guards, isolate: false },
+        test: {
+          ...nodeTest,
+          name: "guards",
+          include: projectFiles.guards,
+          isolate: false,
+        },
       },
       {
         extends: true,
-        test: { name: "unit", include: projectFiles.shared, isolate: false },
+        test: {
+          ...nodeTest,
+          name: "unit",
+          include: projectFiles.shared,
+          isolate: false,
+        },
       },
       {
         extends: true,
-        test: { name: "isolated", include: projectFiles.isolated },
+        test: {
+          ...nodeTest,
+          name: "isolated",
+          include: projectFiles.isolated,
+        },
+      },
+      // Not `extends: true` and none of `nodeTest`: the Node setup file reads
+      // the file system and mocks the write meter. Each file gets its own
+      // page, so a stubbed `fetch` or a rewritten URL cannot leak into the
+      // next file.
+      {
+        resolve: {
+          alias: {
+            "@": resolve(__dirname, "src"),
+            // The App Router's hooks throw outside a mounted router. The shim
+            // reads and writes the page's real location instead.
+            "next/navigation": resolve(
+              __dirname,
+              "tests/browser/next-navigation.ts",
+            ),
+          },
+        },
+        // Next's client modules (`next/link` among them) read
+        // `process.env.*`, which Next's own bundler inlines at build time.
+        // A page has no `process`; this inlines an environment with no
+        // public variables set, as a build without any would.
+        define: {
+          "process.env": JSON.stringify({
+            NODE_ENV: process.env.NODE_ENV ?? "test",
+          }),
+        },
+        // Pre-bundle every dependency the browser files reach before the
+        // first one loads. Discovered late, a dependency makes Vite re-bundle
+        // and reload the page mid-run, which fails the file that was
+        // importing it; CI starts every run on an empty cache. `force`
+        // makes a local run start there too: a cache warmed before a new
+        // browser file existed does not know that file's dependencies, and
+        // the late re-bundle loads a second React ("Invalid hook call").
+        // A cold bundle costs about half a second.
+        optimizeDeps: {
+          force: true,
+          entries: ["src/**/*.browser.test.tsx", "tests/browser/**/*.{ts,tsx}"],
+        },
+        test: {
+          name: "browser",
+          include: ["src/**/*.browser.test.tsx"],
+          globals: true,
+          setupFiles: ["./tests/browser/setup.ts"],
+          browser: {
+            enabled: true,
+            headless: true,
+            // Pinned like the Node projects' `TZ`, so a date the form
+            // derives from the clock means the same instant everywhere.
+            provider: playwright({
+              contextOptions: { timezoneId: "UTC", locale: "en-US" },
+            }),
+            instances: [{ browser: "chromium" }],
+            screenshotFailures: false,
+          },
+        },
       },
     ],
     coverage: {