From 3f0478fbb7d9f8350d2b316b4fc7dcd9c0d1a5af Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:20:03 +0200
Subject: [PATCH 01/32] refactor(ui): the console is split into data, model,
 state, design-system and screen layers

---
 .dependency-cruiser-known-violations.json     |    6 +-
 .dependency-cruiser.mjs                       |   38 +
 src/lint-rules.test.ts                        |   67 +
 ui/AGENTS.md                                  |   82 ++
 ui/CLAUDE.md                                  |    1 +
 ui/src/app.tsx                                |   32 -
 ui/src/app/app.tsx                            |   36 +
 ui/src/app/routes.test.ts                     |   28 +
 ui/src/app/routes.ts                          |   33 +
 ui/src/app/shell.tsx                          |   81 ++
 ui/src/{ => data}/api.test.ts                 |    8 +-
 ui/src/{ => data}/api.ts                      |   30 +-
 ui/src/{views => data}/event-feed.ts          |   43 +-
 ui/src/{ => data}/live/browser.ts             |    2 -
 ui/src/data/live/clock.ts                     |    7 +
 ui/src/{ => data}/live/connection.test.ts     |   27 -
 ui/src/{ => data}/live/connection.ts          |  108 +-
 ui/src/{ => data}/live/sse.test.ts            |    5 -
 ui/src/{ => data}/live/sse.ts                 |   26 +-
 ui/src/{ => data}/live/test-support.ts        |   26 +-
 ui/src/data/preferences.test.ts               |   41 +
 ui/src/data/preferences.ts                    |   32 +
 ui/src/{ => data}/session.test.ts             |    2 -
 ui/src/{ => data}/session.ts                  |   15 +-
 ui/src/{ => data}/sign-in-check.test.ts       |    3 -
 ui/src/{ => data}/sign-in-check.ts            |   15 +-
 ui/src/{screen => data}/stream.test.ts        |    0
 ui/src/{screen => data}/stream.ts             |    0
 ui/src/ds/button.css                          |   70 +
 ui/src/ds/button.tsx                          |   38 +
 ui/src/ds/chart.css                           |  108 ++
 ui/src/{charts.test.tsx => ds/chart.test.tsx} |    2 +-
 ui/src/{charts.tsx => ds/chart.tsx}           |   26 +-
 ui/src/ds/choice.css                          |  101 ++
 ui/src/ds/choice.tsx                          |   81 ++
 ui/src/ds/facts.css                           |   41 +
 ui/src/ds/facts.tsx                           |   24 +
 ui/src/ds/foundation.css                      |  263 ++++
 ui/src/ds/icon.tsx                            |   34 +
 ui/src/ds/index.ts                            |   27 +
 ui/src/{router.test.ts => ds/link.test.ts}    |    3 +-
 ui/src/ds/link.tsx                            |   45 +
 ui/src/ds/loaded.tsx                          |   35 +
 ui/src/ds/master-detail.css                   |  231 +++
 ui/src/ds/master-detail.tsx                   |  137 ++
 ui/src/ds/meter.css                           |   58 +
 ui/src/ds/meter.tsx                           |   25 +
 ui/src/ds/pager.css                           |   50 +
 ui/src/ds/pager.tsx                           |   60 +
 ui/src/ds/panel.css                           |   98 ++
 ui/src/ds/panel.tsx                           |   69 +
 ui/src/ds/sidebar.css                         |  333 +++++
 ui/src/ds/sidebar.tsx                         |  128 ++
 ui/src/ds/slots.css                           |   90 ++
 ui/src/ds/slots.tsx                           |   69 +
 ui/src/ds/stat.css                            |   62 +
 ui/src/ds/stat.tsx                            |   54 +
 ui/src/ds/status.css                          |   35 +
 ui/src/ds/status.tsx                          |   23 +
 ui/src/ds/table.css                           |  183 +++
 ui/src/{ => ds}/table.tsx                     |   46 +-
 ui/src/layout.tsx                             |  101 --
 ui/src/live/connection-banner.tsx             |   39 -
 ui/src/live/route-state.tsx                   |   44 -
 ui/src/live/time.ts                           |   46 -
 ui/src/main.tsx                               |   11 +-
 ui/src/model/activity.test.ts                 |   61 +
 ui/src/model/activity.ts                      |   47 +
 .../attention-model.ts => model/attention.ts} |   26 +-
 .../events-model.ts => model/events.ts}       |   69 +-
 ui/src/model/fleet.test.ts                    |  112 ++
 ui/src/model/fleet.ts                         |  104 ++
 .../history.test.ts}                          |   22 +-
 .../history-model.ts => model/history.ts}     |   32 +-
 .../leases-model.ts => model/leases.ts}       |   52 +-
 ui/src/{ => model}/load-thresholds.test.ts    |    0
 ui/src/{ => model}/load-thresholds.ts         |    2 +-
 .../load-model.test.ts => model/load.test.ts} |    2 +-
 ui/src/{views/load-model.ts => model/load.ts} |    2 +-
 ui/src/model/overview.test.ts                 |  150 ++
 ui/src/model/overview.ts                      |  211 +++
 ui/src/{ => model}/paging.test.ts             |    2 -
 ui/src/{ => model}/paging.ts                  |   35 +-
 ui/src/model/paths.test.ts                    |   22 +
 ui/src/model/paths.ts                         |   18 +
 ui/src/model/stat.ts                          |    5 +
 ui/src/model/time.ts                          |   25 +
 ui/src/{status.tsx => model/tones.ts}         |   16 +-
 .../waiting-model.ts => model/waiting.ts}     |   31 +-
 .../workers.test.ts}                          |    2 +-
 .../workers-model.ts => model/workers.ts}     |   42 +-
 ui/src/pager.tsx                              |  125 --
 ui/src/router.tsx                             |   72 -
 ui/src/screen/viewer.test.tsx                 |   96 --
 ui/src/screen/viewer.tsx                      |  265 ----
 ui/src/screens/attention/index.tsx            |    9 +
 ui/src/screens/events/index.tsx               |    9 +
 ui/src/screens/leases/index.tsx               |    9 +
 ui/src/screens/not-found.tsx                  |   12 +
 ui/src/screens/overview/index.tsx             |  195 +++
 ui/src/screens/overview/overview.css          |  142 ++
 ui/src/screens/sign-in.css                    |   48 +
 ui/src/screens/sign-in.tsx                    |   58 +
 ui/src/screens/waiting/index.tsx              |    9 +
 ui/src/screens/workers/index.tsx              |    9 +
 ui/src/shell.test.tsx                         |   71 -
 ui/src/shell.tsx                              |   95 --
 ui/src/sign-in.tsx                            |   86 --
 ui/src/state/events.ts                        |   19 +
 .../{live/live-context.tsx => state/live.tsx} |   28 +-
 ui/src/state/overview.ts                      |   37 +
 ui/src/state/paging.ts                        |   45 +
 ui/src/state/resource.ts                      |   46 +
 ui/src/state/router.ts                        |   41 +
 .../services.tsx}                             |   20 +-
 ui/src/state/shell.ts                         |   43 +
 ui/src/state/sidebar.ts                       |   27 +
 ui/src/state/sign-in.ts                       |   23 +
 ui/src/styles.css                             | 1289 -----------------
 ui/src/views/attention.test.tsx               |  221 ---
 ui/src/views/attention.tsx                    |  146 --
 ui/src/views/events.test.tsx                  |  690 ---------
 ui/src/views/events.tsx                       |  282 ----
 ui/src/views/index.test.ts                    |   23 -
 ui/src/views/index.tsx                        |   36 -
 ui/src/views/leases.test.tsx                  |  284 ----
 ui/src/views/leases.tsx                       |  360 -----
 ui/src/views/not-found.tsx                    |   18 -
 ui/src/views/stats.test.tsx                   |  186 ---
 ui/src/views/waiting.test.tsx                 |  145 --
 ui/src/views/waiting.tsx                      |  113 --
 ui/src/views/worker-detail.test.tsx           |  691 ---------
 ui/src/views/worker-detail.tsx                |  444 ------
 ui/src/views/worker-facts.tsx                 |  128 --
 ui/src/views/workers.test.tsx                 |  330 -----
 ui/src/views/workers.tsx                      |  183 ---
 136 files changed, 4716 insertions(+), 7266 deletions(-)
 create mode 100644 ui/AGENTS.md
 create mode 100644 ui/CLAUDE.md
 delete mode 100644 ui/src/app.tsx
 create mode 100644 ui/src/app/app.tsx
 create mode 100644 ui/src/app/routes.test.ts
 create mode 100644 ui/src/app/routes.ts
 create mode 100644 ui/src/app/shell.tsx
 rename ui/src/{ => data}/api.test.ts (94%)
 rename ui/src/{ => data}/api.ts (71%)
 rename ui/src/{views => data}/event-feed.ts (60%)
 rename ui/src/{ => data}/live/browser.ts (78%)
 create mode 100644 ui/src/data/live/clock.ts
 rename ui/src/{ => data}/live/connection.test.ts (90%)
 rename ui/src/{ => data}/live/connection.ts (67%)
 rename ui/src/{ => data}/live/sse.test.ts (82%)
 rename ui/src/{ => data}/live/sse.ts (63%)
 rename ui/src/{ => data}/live/test-support.ts (75%)
 create mode 100644 ui/src/data/preferences.test.ts
 create mode 100644 ui/src/data/preferences.ts
 rename ui/src/{ => data}/session.test.ts (92%)
 rename ui/src/{ => data}/session.ts (64%)
 rename ui/src/{ => data}/sign-in-check.test.ts (95%)
 rename ui/src/{ => data}/sign-in-check.ts (71%)
 rename ui/src/{screen => data}/stream.test.ts (100%)
 rename ui/src/{screen => data}/stream.ts (100%)
 create mode 100644 ui/src/ds/button.css
 create mode 100644 ui/src/ds/button.tsx
 create mode 100644 ui/src/ds/chart.css
 rename ui/src/{charts.test.tsx => ds/chart.test.tsx} (95%)
 rename ui/src/{charts.tsx => ds/chart.tsx} (75%)
 create mode 100644 ui/src/ds/choice.css
 create mode 100644 ui/src/ds/choice.tsx
 create mode 100644 ui/src/ds/facts.css
 create mode 100644 ui/src/ds/facts.tsx
 create mode 100644 ui/src/ds/foundation.css
 create mode 100644 ui/src/ds/icon.tsx
 create mode 100644 ui/src/ds/index.ts
 rename ui/src/{router.test.ts => ds/link.test.ts} (80%)
 create mode 100644 ui/src/ds/link.tsx
 create mode 100644 ui/src/ds/loaded.tsx
 create mode 100644 ui/src/ds/master-detail.css
 create mode 100644 ui/src/ds/master-detail.tsx
 create mode 100644 ui/src/ds/meter.css
 create mode 100644 ui/src/ds/meter.tsx
 create mode 100644 ui/src/ds/pager.css
 create mode 100644 ui/src/ds/pager.tsx
 create mode 100644 ui/src/ds/panel.css
 create mode 100644 ui/src/ds/panel.tsx
 create mode 100644 ui/src/ds/sidebar.css
 create mode 100644 ui/src/ds/sidebar.tsx
 create mode 100644 ui/src/ds/slots.css
 create mode 100644 ui/src/ds/slots.tsx
 create mode 100644 ui/src/ds/stat.css
 create mode 100644 ui/src/ds/stat.tsx
 create mode 100644 ui/src/ds/status.css
 create mode 100644 ui/src/ds/status.tsx
 create mode 100644 ui/src/ds/table.css
 rename ui/src/{ => ds}/table.tsx (53%)
 delete mode 100644 ui/src/layout.tsx
 delete mode 100644 ui/src/live/connection-banner.tsx
 delete mode 100644 ui/src/live/route-state.tsx
 delete mode 100644 ui/src/live/time.ts
 create mode 100644 ui/src/model/activity.test.ts
 create mode 100644 ui/src/model/activity.ts
 rename ui/src/{views/attention-model.ts => model/attention.ts} (76%)
 rename ui/src/{views/events-model.ts => model/events.ts} (58%)
 create mode 100644 ui/src/model/fleet.test.ts
 create mode 100644 ui/src/model/fleet.ts
 rename ui/src/{views/history-model.test.ts => model/history.test.ts} (77%)
 rename ui/src/{views/history-model.ts => model/history.ts} (58%)
 rename ui/src/{views/leases-model.ts => model/leases.ts} (60%)
 rename ui/src/{ => model}/load-thresholds.test.ts (100%)
 rename ui/src/{ => model}/load-thresholds.ts (95%)
 rename ui/src/{views/load-model.test.ts => model/load.test.ts} (99%)
 rename ui/src/{views/load-model.ts => model/load.ts} (98%)
 create mode 100644 ui/src/model/overview.test.ts
 create mode 100644 ui/src/model/overview.ts
 rename ui/src/{ => model}/paging.test.ts (94%)
 rename ui/src/{ => model}/paging.ts (54%)
 create mode 100644 ui/src/model/paths.test.ts
 create mode 100644 ui/src/model/paths.ts
 create mode 100644 ui/src/model/stat.ts
 create mode 100644 ui/src/model/time.ts
 rename ui/src/{status.tsx => model/tones.ts} (74%)
 rename ui/src/{views/waiting-model.ts => model/waiting.ts} (58%)
 rename ui/src/{views/workers-model.test.ts => model/workers.test.ts} (94%)
 rename ui/src/{views/workers-model.ts => model/workers.ts} (64%)
 delete mode 100644 ui/src/pager.tsx
 delete mode 100644 ui/src/router.tsx
 delete mode 100644 ui/src/screen/viewer.test.tsx
 delete mode 100644 ui/src/screen/viewer.tsx
 create mode 100644 ui/src/screens/attention/index.tsx
 create mode 100644 ui/src/screens/events/index.tsx
 create mode 100644 ui/src/screens/leases/index.tsx
 create mode 100644 ui/src/screens/not-found.tsx
 create mode 100644 ui/src/screens/overview/index.tsx
 create mode 100644 ui/src/screens/overview/overview.css
 create mode 100644 ui/src/screens/sign-in.css
 create mode 100644 ui/src/screens/sign-in.tsx
 create mode 100644 ui/src/screens/waiting/index.tsx
 create mode 100644 ui/src/screens/workers/index.tsx
 delete mode 100644 ui/src/shell.test.tsx
 delete mode 100644 ui/src/shell.tsx
 delete mode 100644 ui/src/sign-in.tsx
 create mode 100644 ui/src/state/events.ts
 rename ui/src/{live/live-context.tsx => state/live.tsx} (72%)
 create mode 100644 ui/src/state/overview.ts
 create mode 100644 ui/src/state/paging.ts
 create mode 100644 ui/src/state/resource.ts
 create mode 100644 ui/src/state/router.ts
 rename ui/src/{console-context.tsx => state/services.tsx} (57%)
 create mode 100644 ui/src/state/shell.ts
 create mode 100644 ui/src/state/sidebar.ts
 create mode 100644 ui/src/state/sign-in.ts
 delete mode 100644 ui/src/styles.css
 delete mode 100644 ui/src/views/attention.test.tsx
 delete mode 100644 ui/src/views/attention.tsx
 delete mode 100644 ui/src/views/events.test.tsx
 delete mode 100644 ui/src/views/events.tsx
 delete mode 100644 ui/src/views/index.test.ts
 delete mode 100644 ui/src/views/index.tsx
 delete mode 100644 ui/src/views/leases.test.tsx
 delete mode 100644 ui/src/views/leases.tsx
 delete mode 100644 ui/src/views/not-found.tsx
 delete mode 100644 ui/src/views/stats.test.tsx
 delete mode 100644 ui/src/views/waiting.test.tsx
 delete mode 100644 ui/src/views/waiting.tsx
 delete mode 100644 ui/src/views/worker-detail.test.tsx
 delete mode 100644 ui/src/views/worker-detail.tsx
 delete mode 100644 ui/src/views/worker-facts.tsx
 delete mode 100644 ui/src/views/workers.test.tsx
 delete mode 100644 ui/src/views/workers.tsx

diff --git a/.dependency-cruiser-known-violations.json b/.dependency-cruiser-known-violations.json
index 57b5e0acb..6f0eea046 100644
--- a/.dependency-cruiser-known-violations.json
+++ b/.dependency-cruiser-known-violations.json
@@ -232,7 +232,7 @@
   },
   {
     "type": "dependency",
-    "from": "ui/src/views/leases-model.ts",
+    "from": "ui/src/model/leases.ts",
     "to": "src/contract/schemas.ts",
     "unresolvedTo": "../../../src/contract/schemas",
     "dependencyTypes": ["local", "type-only", "import"],
@@ -243,7 +243,7 @@
   },
   {
     "type": "dependency",
-    "from": "ui/src/views/waiting-model.ts",
+    "from": "ui/src/model/waiting.ts",
     "to": "src/contract/schemas.ts",
     "unresolvedTo": "../../../src/contract/schemas",
     "dependencyTypes": ["local", "type-only", "import"],
@@ -254,7 +254,7 @@
   },
   {
     "type": "dependency",
-    "from": "ui/src/views/workers-model.ts",
+    "from": "ui/src/model/workers.ts",
     "to": "src/contract/schemas.ts",
     "unresolvedTo": "../../../src/contract/schemas",
     "dependencyTypes": ["local", "type-only", "import"],
diff --git a/.dependency-cruiser.mjs b/.dependency-cruiser.mjs
index 3b4f611a6..06d5a8a1b 100644
--- a/.dependency-cruiser.mjs
+++ b/.dependency-cruiser.mjs
@@ -14,6 +14,8 @@ function findComponents(dir) {
 const escape = (path) => path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 const testFile = "(\\.test\\.tsx?|/test-[^/]+\\.tsx?)$";
 const linkTestFile = "(\\.test\\.tsx?|/test-[^/]+\\.tsx?|/testing\\.ts)$";
+// why: the console layers below the screens are plain TypeScript, so a test drives them without a browser.
+const uiLibrary = "(^|node_modules/)(react|react-dom|recharts|@tanstack/[^/]+)(/|$)";
 const fsOrProcess = "^(node:)?(fs|fs/promises|child_process)$";
 
 // why: e2e imports the compiled package from dist/, which mirrors src/, so each component's rule covers its compiled copy too.
@@ -195,6 +197,42 @@ export default {
       "^src/(core|leasing|drivers|gateway|contract)/",
       { path: "^src/(modules|module-registry)/" },
     ),
+    direction(
+      "ui-ds-stands-alone",
+      "the console's design system imports nothing else of the console",
+      "^ui/src/ds/",
+      { path: "^ui/src/(app|screens|state|data|model)/" },
+    ),
+    direction(
+      "ui-model-is-pure",
+      "the console's business rules import no other layer and no UI library",
+      "^ui/src/model/",
+      { path: `^ui/src/(app|screens|state|data|ds)/|${uiLibrary}` },
+    ),
+    direction(
+      "ui-data-is-below-the-ui",
+      "the console's network and storage layer imports no state, screen, design system or UI library",
+      "^ui/src/data/",
+      { path: `^ui/src/(app|screens|state|ds)/|${uiLibrary}` },
+    ),
+    direction(
+      "ui-state-feeds-screens",
+      "the console's state layer imports no screen, and from the design system only the types it fills",
+      "^ui/src/state/",
+      { path: "^ui/src/(app|screens)/" },
+    ),
+    direction(
+      "ui-state-ds-types-only",
+      "the console's state layer imports no screen, and from the design system only the types it fills",
+      "^ui/src/state/",
+      { path: "^ui/src/ds/", dependencyTypesNot: ["type-only"] },
+    ),
+    direction(
+      "ui-screens-present-only",
+      "a console screen reaches data only through the state layer: no network, storage or business rule of its own",
+      "^ui/src/screens/",
+      { path: "^ui/src/(app|data|model)/" },
+    ),
     direction(
       "contract-imports-nothing",
       "the contract imports nothing outside src/contract/",
diff --git a/src/lint-rules.test.ts b/src/lint-rules.test.ts
index 9808b6ba2..86693cc6f 100644
--- a/src/lint-rules.test.ts
+++ b/src/lint-rules.test.ts
@@ -652,6 +652,73 @@ describe("the cycle check between components", () => {
   });
 });
 
+describe("the console's layers", () => {
+  function layerViolations(world: Readonly<Record<string, string>>): string[] {
+    const dir = join(scratch, `ui-layers-${counter++}`);
+    for (const [path, contents] of Object.entries(world)) {
+      mkdirSync(dirname(join(dir, path)), { recursive: true });
+      writeFileSync(join(dir, path), contents);
+    }
+    copyFileSync(join(repoRoot, ".dependency-cruiser.mjs"), join(dir, ".dependency-cruiser.mjs"));
+    copyFileSync(join(repoRoot, "tsconfig.json"), join(dir, "tsconfig.json"));
+    return cruise(dir, ["ui"])
+      .filter((v) => v.rule.name.startsWith("ui-"))
+      .map((v) => `${v.rule.name} ${v.from} -> ${v.to}`)
+      .sort();
+  }
+
+  const layers = {
+    // why: the config looks for components under src/ when it loads, so the fixture needs one.
+    "src/x.ts": "export {};\n",
+    "ui/src/app/app.ts":
+      'import "../screens/s.js";\nimport "../state/s.js";\nimport "../data/d.js";\nexport {};\n',
+    "ui/src/data/d.ts": 'import "../model/m.js";\nexport const d = 1;\n',
+    "ui/src/ds/b.ts": "export type Props = number;\nexport const b = 1;\n",
+    "ui/src/model/m.ts": "export const m = 1;\n",
+    "ui/src/screens/s.ts": 'import "../ds/b.js";\nimport "../state/s.js";\nexport {};\n',
+    "ui/src/state/s.ts":
+      'import type { Props } from "../ds/b.js";\nimport "../data/d.js";\nimport "../model/m.js";\nexport type P = Props;\n',
+  };
+
+  it("passes each layer importing only the layers below it, and the state layer taking design-system types", () => {
+    expect(layerViolations(layers)).toEqual([]);
+  });
+
+  it("fails every import that crosses a layer the wrong way", () => {
+    const found = layerViolations({
+      ...layers,
+      "ui/src/data/d.ts": 'import "../state/s.js";\nimport "react";\nexport const d = 1;\n',
+      "ui/src/ds/b.ts":
+        'import "../model/m.js";\nexport type Props = number;\nexport const b = 1;\n',
+      "ui/src/model/m.ts": 'import "../data/d.js";\nimport "recharts";\nexport const m = 1;\n',
+      "ui/src/screens/s.ts": 'import "../model/m.js";\nimport "../data/d.js";\nexport {};\n',
+      "ui/src/state/s.ts":
+        'import { b } from "../ds/b.js";\nimport "../screens/s.js";\nexport const s = b;\n',
+    });
+
+    expect(found).toEqual([
+      "ui-data-is-below-the-ui ui/src/data/d.ts -> react",
+      "ui-data-is-below-the-ui ui/src/data/d.ts -> ui/src/state/s.ts",
+      "ui-ds-stands-alone ui/src/ds/b.ts -> ui/src/model/m.ts",
+      "ui-model-is-pure ui/src/model/m.ts -> recharts",
+      "ui-model-is-pure ui/src/model/m.ts -> ui/src/data/d.ts",
+      "ui-screens-present-only ui/src/screens/s.ts -> ui/src/data/d.ts",
+      "ui-screens-present-only ui/src/screens/s.ts -> ui/src/model/m.ts",
+      "ui-state-ds-types-only ui/src/state/s.ts -> ui/src/ds/b.ts",
+      "ui-state-feeds-screens ui/src/state/s.ts -> ui/src/screens/s.ts",
+    ]);
+  });
+
+  it("lets a test reach across layers, as a test drives its subject through what it needs", () => {
+    expect(
+      layerViolations({
+        ...layers,
+        "ui/src/model/m.test.ts": 'import "../data/d.js";\nexport {};\n',
+      }),
+    ).toEqual([]);
+  });
+});
+
 describe("the repo's known violations", () => {
   const read = (file: string): Violation[] =>
     JSON.parse(readFileSync(join(repoRoot, file), "utf8")) as Violation[];
diff --git a/ui/AGENTS.md b/ui/AGENTS.md
new file mode 100644
index 000000000..e56f28568
--- /dev/null
+++ b/ui/AGENTS.md
@@ -0,0 +1,82 @@
+# Web console
+
+Does: the operator's web console — a React page the daemon serves from `dist/ui`.
+Entry: `src/main.tsx` → `App` (`src/app/app.tsx`).
+Uses: the daemon's `/v1` HTTP API and event stream; contract types from `src/contract/` (type-only).
+Surface: [CONSOLE.md](../docs/CONSOLE.md). Look and voice: [DESIGN.md](../docs/internal/DESIGN.md).
+
+## Layers
+
+Each layer imports only the layers below it. `.dependency-cruiser.mjs` enforces it (rules
+`ui-*`); `src/lint-rules.test.ts` proves each rule fires.
+
+| Layer          | Holds                                                                     | May import                  |
+| -------------- | ------------------------------------------------------------------------- | --------------------------- |
+| `src/app/`     | `App`, the `Shell`, the route table (`routes.ts`)                         | every layer                 |
+| `src/screens/` | one folder per page: presentation only                                    | `ds`, `state`               |
+| `src/state/`   | React hooks that read `data`, apply `model`, return view models           | `data`, `model`, `ds` types |
+| `src/ds/`      | the design system: tokens, components, their CSS                          | nothing of the console      |
+| `src/data/`    | the API client, session, preferences, live connection, SSE, screen stream | `model`                     |
+| `src/model/`   | business rules: pure functions over the daemon's data                     | nothing; contract types     |
+
+- A screen never fetches, never reads a route, never decides what a state means. It gets a view
+  model from a `state/` hook (`useOverview`) and draws it with `ds/` components.
+- `model/` has no React and no network, so every rule is a plain unit test.
+- `ds/` knows nothing of Simlock's data: props are plain values (`tone`, `percent`, `to`).
+  `Link` navigates through `NavigationProvider`, which `App` feeds with `state/router.ts`.
+
+## How a screen is built
+
+1. Model: a pure builder in `src/model/<page>.ts` turns route data into the page's view model
+   (`overviewOf` in `overview.ts`). Shared rules live once: `workerHealth`, `workerSlots`
+   (`fleet.ts`), `eventSummary`, `eventTone` (`activity.ts`), `attentionTone`
+   (`attention.ts`), the word → tone tables (`tones.ts`), page paths (`paths.ts`).
+2. State: a hook in `src/state/<page>.ts` reads routes with `useLiveResource`, turns each into a
+   `LoadView` (`resource.ts`: `loadView`, `mapView`, `bothViews`), and maps it through the
+   builder. It re-exports the view-model types the screen needs.
+3. Screen: `src/screens/<page>/index.tsx` exports `<Page>Screen`, wraps content in `Loaded`, and
+   composes `ds` components. Its CSS sits beside it.
+4. Route: an entry in `src/app/routes.ts` gives it a path, a label and an icon.
+
+## Pages
+
+| Path                | Screen    | Layout                                                                |
+| ------------------- | --------- | --------------------------------------------------------------------- |
+| `/`                 | Overview  | stat tiles, lease chart, capacity, workers table, attention, activity |
+| `/workers[/<id>]`   | Workers   | list + inspector (`MasterDetail`)                                     |
+| `/leases[/<id>]`    | Leases    | list + inspector; the inspector holds the live screen                 |
+| `/waiting[/<id>]`   | Waiting   | list + inspector                                                      |
+| `/attention[/<id>]` | Attention | list + inspector                                                      |
+| `/events[/<id>]`    | Events    | list + inspector with the payload                                     |
+
+On a list page the URL names the chosen item; with none, the first item shows on a wide screen
+and the list alone on a phone. Lists page in the URL (`state/paging.ts`, `model/paging.ts`).
+
+## Design system
+
+`src/ds/index.ts` exports every component. Tokens and base elements: `foundation.css`.
+
+- Frame: `AppFrame`, `Sidebar` (collapsible; width kept per browser by `data/preferences.ts`),
+  `Page`, `MasterDetail`, `ListPane`, `List`, `ListRow`, `Inspector`.
+- Content: `Panel`, `Card`, `Row`, `Grid`, `StatRow`, `StatTile`, `Facts`, `DataTable`, `Pager`,
+  `MinuteChart`, `MinuteTable`, `Empty`, `Id`, `Loaded`.
+- Signals: `Status` (square and word), `StatusDot` (square alone, the word as its name),
+  `Meter`, `Slots`, `ShareBar`, `SlotLegend`.
+- Controls: `Button`, `ButtonLink`, `Link`, `ChoiceChips` (a radio group), `Tabs`, `Icon`.
+
+## Rules
+
+- Colour is never the only signal: a `StatusDot` and a `Slots` group carry their words as
+  accessible names; a `Meter` and a `ShareBar` only shade a figure printed beside them.
+- Orange is brand and interaction only: never a state.
+- Nothing sets a `<style>` element (CSP `style-src 'self'`); a level arrives as a CSS custom
+  property through React's `style` prop, as `Meter` does.
+- Motion stays under 0.3 s, never loops, and stops under `prefers-reduced-motion`.
+- Every page works at 360px wide with no sideways page scroll.
+- Unit tests run in Node with no DOM: test `model/` and `data/` directly, and a screen or a
+  `ds` component with `renderToStaticMarkup`. The browser lane (`e2e/console/`) covers the rest.
+
+## Known gaps
+
+- **No history beyond the last hour.** Charts are counted back from the events the console
+  holds; the daemon keeps no longer series.
diff --git a/ui/CLAUDE.md b/ui/CLAUDE.md
new file mode 100644
index 000000000..43c994c2d
--- /dev/null
+++ b/ui/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/ui/src/app.tsx b/ui/src/app.tsx
deleted file mode 100644
index 9d0530364..000000000
--- a/ui/src/app.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useSyncExternalStore } from "react";
-
-import type { ApiClient, Fetch } from "./api";
-import { ConsoleProvider } from "./console-context";
-import { LiveProvider } from "./live/live-context";
-import type { Session } from "./session";
-import { Shell } from "./shell";
-import { SignIn } from "./sign-in";
-
-/**
- * Signed out, the sign-in screen; signed in, the shell and its live data. A sign-out anywhere
- * comes straight back here, which unmounts the live data and closes its stream.
- */
-export function App(props: {
-  readonly api: ApiClient;
-  readonly fetch: Fetch;
-  readonly session: Session;
-}) {
-  const { api, fetch, session } = props;
-  const token = useSyncExternalStore(session.subscribe, session.token);
-  return (
-    <ConsoleProvider api={api} session={session}>
-      {token === undefined ? (
-        <SignIn fetch={fetch} />
-      ) : (
-        <LiveProvider>
-          <Shell />
-        </LiveProvider>
-      )}
-    </ConsoleProvider>
-  );
-}
diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
new file mode 100644
index 000000000..bf54ac7c6
--- /dev/null
+++ b/ui/src/app/app.tsx
@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from "react";
+
+import type { ApiClient, Fetch } from "../data/api";
+import type { Preferences } from "../data/preferences";
+import type { Session } from "../data/session";
+import { NavigationProvider } from "../ds";
+import { SignInScreen } from "../screens/sign-in";
+import { LiveProvider } from "../state/live";
+import { navigate } from "../state/router";
+import { ConsoleProvider } from "../state/services";
+import { Shell } from "./shell";
+
+// why: a sign-out anywhere comes straight back here, which unmounts the live data and closes its
+// stream.
+export function App(props: {
+  readonly api: ApiClient;
+  readonly fetch: Fetch;
+  readonly preferences: Preferences;
+  readonly session: Session;
+}) {
+  const { session } = props;
+  const token = useSyncExternalStore(session.subscribe, session.token);
+  return (
+    <ConsoleProvider {...props}>
+      <NavigationProvider navigate={navigate}>
+        {token === undefined ? (
+          <SignInScreen />
+        ) : (
+          <LiveProvider>
+            <Shell />
+          </LiveProvider>
+        )}
+      </NavigationProvider>
+    </ConsoleProvider>
+  );
+}
diff --git a/ui/src/app/routes.test.ts b/ui/src/app/routes.test.ts
new file mode 100644
index 000000000..83c662844
--- /dev/null
+++ b/ui/src/app/routes.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { ROUTES, routeFor } from "./routes";
+
+describe("the console's routes", () => {
+  it("opens the overview at the root and each section at its path and the pages under it", () => {
+    expect(routeFor("/")?.label).toBe("Overview");
+    expect(routeFor("/workers")?.label).toBe("Workers");
+    expect(routeFor("/workers/wrk_1")?.label).toBe("Workers");
+    expect(routeFor("/events/e1")?.label).toBe("Events");
+  });
+
+  it("has no route for a path no section owns, one that only shares a prefix included", () => {
+    expect(routeFor("/workersx")).toBeUndefined();
+    expect(routeFor("/nope")).toBeUndefined();
+  });
+
+  it("lists the sections in the sidebar's order, the overview first", () => {
+    expect(ROUTES.map((route) => route.path)).toEqual([
+      "/",
+      "/workers",
+      "/leases",
+      "/waiting",
+      "/attention",
+      "/events",
+    ]);
+  });
+});
diff --git a/ui/src/app/routes.ts b/ui/src/app/routes.ts
new file mode 100644
index 000000000..8be37ed94
--- /dev/null
+++ b/ui/src/app/routes.ts
@@ -0,0 +1,33 @@
+import type { ComponentType } from "react";
+
+import type { IconName } from "../ds";
+import { AttentionScreen } from "../screens/attention";
+import { EventsScreen } from "../screens/events";
+import { LeasesScreen } from "../screens/leases";
+import { OverviewScreen } from "../screens/overview";
+import { WaitingScreen } from "../screens/waiting";
+import { WorkersScreen } from "../screens/workers";
+
+export interface Route {
+  readonly path: `/${string}`;
+  readonly label: string;
+  readonly icon: IconName;
+  readonly Screen: ComponentType;
+}
+
+export const ROUTES: readonly Route[] = [
+  { Screen: OverviewScreen, icon: "overview", label: "Overview", path: "/" },
+  { Screen: WorkersScreen, icon: "workers", label: "Workers", path: "/workers" },
+  { Screen: LeasesScreen, icon: "leases", label: "Leases", path: "/leases" },
+  { Screen: WaitingScreen, icon: "waiting", label: "Waiting", path: "/waiting" },
+  { Screen: AttentionScreen, icon: "attention", label: "Attention", path: "/attention" },
+  { Screen: EventsScreen, icon: "events", label: "Events", path: "/events" },
+];
+
+// why: a section's own pages live under its path (`/workers/<id>`), so a path belongs to the route
+// it starts with; only the overview is matched exactly, since every path starts with `/`.
+export function routeFor(path: string): Route | undefined {
+  return ROUTES.find((route) =>
+    route.path === "/" ? path === "/" : path === route.path || path.startsWith(`${route.path}/`),
+  );
+}
diff --git a/ui/src/app/shell.tsx b/ui/src/app/shell.tsx
new file mode 100644
index 000000000..eb5f94055
--- /dev/null
+++ b/ui/src/app/shell.tsx
@@ -0,0 +1,81 @@
+import { useEffect } from "react";
+
+import { AppFrame, Button, Icon, Sidebar, Status, StatusDot } from "../ds";
+import { NotFoundScreen } from "../screens/not-found";
+import { usePath } from "../state/router";
+import { useAttentionCount, useConnectionStatus, useSignOut, useTokenCheck } from "../state/shell";
+import { useSidebar } from "../state/sidebar";
+import { ROUTES, routeFor } from "./routes";
+
+export function Shell() {
+  const path = usePath();
+  const route = routeFor(path);
+  const attention = useAttentionCount();
+  const sidebar = useSidebar();
+  useTokenCheck();
+
+  useEffect(() => {
+    document.title = route === undefined ? "Simlock" : `${route.label} · Simlock`;
+  }, [route]);
+
+  const entries = ROUTES.map((entry) => ({
+    current: entry === route,
+    icon: entry.icon,
+    label: entry.label,
+    to: entry.path,
+    ...(entry.path === "/attention" && attention !== undefined
+      ? { alert: true, count: attention }
+      : {}),
+  }));
+
+  return (
+    <AppFrame
+      sidebar={
+        <Sidebar
+          entries={entries}
+          collapsed={sidebar.collapsed}
+          onToggle={sidebar.toggle}
+          footer={(collapsed) => <SidebarFoot collapsed={collapsed} />}
+        />
+      }
+    >
+      {route === undefined ? <NotFoundScreen /> : <route.Screen />}
+    </AppFrame>
+  );
+}
+
+// why: the connection's word is a live region so a screen reader hears it change; the data's age
+// beside it ticks every second, so it stays outside the region.
+function SidebarFoot({ collapsed }: { readonly collapsed: boolean }) {
+  const status = useConnectionStatus();
+  const signOut = useSignOut();
+  return (
+    <>
+      <div className="connection">
+        {collapsed ? (
+          <>
+            <StatusDot tone={status.tone} label={status.word} />
+            <span role="status" className="visually-hidden">
+              {status.word}
+            </span>
+          </>
+        ) : (
+          <Status tone={status.tone}>
+            <span role="status">{status.word}</span>
+            {status.age === undefined ? null : <span> — data from {status.age} ago</span>}
+          </Status>
+        )}
+      </div>
+      <Button
+        variant="secondary"
+        className="sign-out"
+        onClick={signOut}
+        aria-label="Sign out"
+        title="Sign out"
+      >
+        <Icon name="signOut" />
+        <span className="nav-label">Sign out</span>
+      </Button>
+    </>
+  );
+}
diff --git a/ui/src/api.test.ts b/ui/src/data/api.test.ts
similarity index 94%
rename from ui/src/api.test.ts
rename to ui/src/data/api.test.ts
index c3d1d9018..c3ddbac4e 100644
--- a/ui/src/api.test.ts
+++ b/ui/src/data/api.test.ts
@@ -2,7 +2,6 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { ApiError, type ApiPath, createApiClient, type Fetch, RequestTimeoutError } from "./api";
 
-/** A fetch that records what it was asked and answers `status`. */
 function answering(status: number, body: unknown = {}) {
   const calls: { readonly input: string; readonly init: RequestInit }[] = [];
   const fetch: Fetch = async (input, init) => {
@@ -12,7 +11,6 @@ function answering(status: number, body: unknown = {}) {
   return { calls, fetch };
 }
 
-/** A fetch that never answers, and rejects only when its request is aborted. */
 const hanging: Fetch = (_input, init) =>
   new Promise((_resolve, reject) => {
     init.signal?.addEventListener("abort", () => reject(new DOMException("aborted", "AbortError")));
@@ -41,7 +39,6 @@ describe("createApiClient", () => {
     await expect(refusal).rejects.toBeInstanceOf(ApiError);
     await expect(refusal).rejects.toMatchObject({ code: "UNAUTHENTICATED", status: 401 });
     expect(signOut).toHaveBeenCalledTimes(1);
-    // Any other refusal leaves the operator signed in.
     await expect(forbidden.getJson("/v1/workers")).rejects.toMatchObject({ status: 403 });
     expect(signOut).toHaveBeenCalledTimes(1);
   });
@@ -64,7 +61,7 @@ describe("createApiClient", () => {
 
   it("the 10 seconds cover reading the body, not only the headers", async () => {
     vi.useFakeTimers();
-    // Headers at once, then a body that never ends, as a real fetch's body does until its
+    // why: headers at once, then a body that never ends, as a real fetch's body does until its
     // request is aborted.
     const stalledBody: Fetch = async (_input, init) =>
       new Response(
@@ -97,7 +94,7 @@ describe("createApiClient", () => {
     expect(calls[0]?.input).toBe("/v1/workers");
     expect(calls[0]?.init.headers).toEqual({ Authorization: "Bearer slk_op" });
     expect(calls[0]?.init.credentials).toBe("omit");
-    // Never answered from the browser's cache: what the daemon holds now is the answer.
+    // why: never answered from the browser's cache: what the daemon holds now is the answer.
     expect(calls[0]?.init.cache).toBe("no-store");
     await expect(api.getJson("//elsewhere.example/v1/workers" as ApiPath)).rejects.toThrow(
       "Not an API path",
@@ -191,7 +188,6 @@ describe("createApiClient", () => {
     const controller = new AbortController();
 
     const { body } = await api.stream("/v1/events/stream", controller.signal);
-    // The 10 seconds cover the headers only: an open stream outlives them.
     await vi.advanceTimersByTimeAsync(60_000);
     expect(closedWith).toBeUndefined();
 
diff --git a/ui/src/api.ts b/ui/src/data/api.ts
similarity index 71%
rename from ui/src/api.ts
rename to ui/src/data/api.ts
index c04ad7e55..6e974d87a 100644
--- a/ui/src/api.ts
+++ b/ui/src/data/api.ts
@@ -1,13 +1,6 @@
-/**
- * The one way the console talks to the daemon (ADR 0011 §6). Every request goes to `/v1` on the
- * page's own origin, carries the operator token only as `Authorization: Bearer`, and gives up
- * after 10 seconds. Views never call `fetch` themselves.
- */
-
-/** ADR 0013 §3: every request gives up after this long. */
 const REQUEST_TIMEOUT_MS = 10_000;
 
-/** A path on the daemon's API. Relative, so the browser sends it to the page's own origin only. */
+// why: relative, so the browser sends it to the page's own origin only.
 export type ApiPath = `/v1/${string}`;
 
 export type Fetch = (input: string, init: RequestInit) => Promise<Response>;
@@ -19,7 +12,6 @@ export class RequestTimeoutError extends Error {
   }
 }
 
-/** The daemon answered with an error status. `code` is the API's own error code, when it sent one. */
 export class ApiError extends Error {
   readonly status: number;
   readonly code: string | undefined;
@@ -34,24 +26,17 @@ export class ApiError extends Error {
 
 interface SendOptions {
   readonly fetch: Fetch;
-  /** Absent for the one route that needs none, `GET /v1/healthz`. */
   readonly token?: string;
-  /** Aborts the request, and the body of a response already handed back. */
   readonly signal?: AbortSignal;
   readonly timeoutMs?: number;
 }
 
-/**
- * One request, bounded by {@link REQUEST_TIMEOUT_MS} from the moment it is sent until `read`
- * has finished with the body. A timeout rejects with {@link RequestTimeoutError}; a request
- * that never reached the daemon rejects with what `fetch` threw.
- */
 export async function send<T>(
   path: ApiPath,
   options: SendOptions,
   read: (response: Response) => Promise<T>,
 ): Promise<T> {
-  // The type says this already; the check keeps a path built at runtime from ever sending the
+  // why: the type says this already; the check keeps a path built at runtime from ever sending the
   // token anywhere but this origin's API.
   if (!path.startsWith("/v1/")) throw new Error(`Not an API path: ${path}`);
   const controller = new AbortController();
@@ -76,23 +61,19 @@ export async function send<T>(
     if (timedOut) throw new RequestTimeoutError(path, timeoutMs);
     throw error;
   } finally {
-    // The `abort` listener stays: a streamed body is still being read after this returns, and
+    // why: the `abort` listener stays: a streamed body is still being read after this returns, and
     // `signal` is how its reader closes it.
     clearTimeout(timer);
   }
 }
 
-/** A response's body, with the `Date` header the daemon sent it with (ADR 0013 §4). */
 export interface ApiResponse<T> {
   readonly body: T;
-  /** The raw `Date` header, or `null` when the response had none. */
   readonly date: string | null;
 }
 
 export interface ApiClient {
-  /** `GET` a route and parse its JSON. Rejects with {@link ApiError} on any error status. */
   getJson<T>(path: ApiPath): Promise<T>;
-  /** {@link getJson}, with the response's `Date` header. */
   get<T>(path: ApiPath): Promise<ApiResponse<T>>;
   // why: a stream's bound, 10 seconds unless `headTimeoutMs` says otherwise, covers its headers
   // only; the body stays open until it ends or `signal` aborts it.
@@ -101,15 +82,12 @@ export interface ApiClient {
     signal: AbortSignal,
     headTimeoutMs?: number,
   ): Promise<ApiResponse<ReadableStream<Uint8Array>>>;
-  /** `GET /v1/healthz`, with no token: whether the daemon answered with success. */
   healthz(): Promise<ApiResponse<boolean>>;
 }
 
 export interface ApiClientOptions {
   readonly fetch: Fetch;
-  /** The signed-in operator's token, read on every request. */
   readonly token: () => string | undefined;
-  /** ADR 0011 §6: a `401` at any time signs the operator out. */
   readonly signOut: () => void;
 }
 
@@ -145,13 +123,11 @@ export function createApiClient(options: ApiClientOptions): ApiClient {
   };
 }
 
-/** Throws {@link ApiError} for an error status; a `401` signs the operator out first. */
 async function refuseError(response: Response, signOut: () => void): Promise<void> {
   if (response.status === 401) signOut();
   if (!response.ok) throw await apiError(response);
 }
 
-/** The API's error body is `{ error: { code, message } }`; anything else still fails by status. */
 async function apiError(response: Response): Promise<ApiError> {
   const fallback = `The daemon answered ${response.status}`;
   try {
diff --git a/ui/src/views/event-feed.ts b/ui/src/data/event-feed.ts
similarity index 60%
rename from ui/src/views/event-feed.ts
rename to ui/src/data/event-feed.ts
index a8ca4e864..634010161 100644
--- a/ui/src/views/event-feed.ts
+++ b/ui/src/data/event-feed.ts
@@ -1,34 +1,11 @@
-/**
- * The events view's list, filled as ADR 0013 §2 and §5 say: the stream's events as they come,
- * and `GET /v1/events` for what came before, each event once. Plain TypeScript, so the fill is
- * tested against the real live connection on a scripted daemon; `events.tsx` wires it to the
- * stream with `useLiveEvents` and `useStreamOpened`.
- *
- * The feed keeps track of what may be missing, and loads until nothing is:
- *
- * - The last hour, as `simlock events --since 1h` shows, until a load of it answers. The view
- *   opening asks for it, and so does the stream's first open: a view opened before the stream
- *   loads once more after it, so nothing sent between the two is lost.
- * - A gap: each time the stream opens again, after a lost daemon or a hidden tab, everything
- *   since the console last heard from the stream. It is asked for as `since` that long, in whole
- *   seconds, rounded up. Gaps not yet loaded add up: the load covers from the earliest.
- *
- * A load clears what was missing only if the stream did not open again while it was out: what
- * the stream missed meanwhile may be newer than the load's answer, so the feed loads again.
- *
- * One load at a time. A load that does not reach the daemon is sent again after 1, 2, 4 and 8
- * seconds, then every 10, and shows nothing of its own: the connection banner says when the
- * daemon is lost. A load the daemon refuses shows why, above the events already shown, and is
- * asked for again when the stream next opens.
- */
-import type { ApiPath } from "../api";
+import type { ApiPath } from "./api";
 import {
   type Clock,
   isRefusal,
   type ResourceState,
   type StreamEvent,
   type StreamOpened,
-} from "../live/connection";
+} from "./live/connection";
 import {
   type ConsoleEvent,
   mergeEvents,
@@ -36,7 +13,7 @@ import {
   readReplay,
   RECENT,
   sinceFor,
-} from "./events-model";
+} from "../model/events";
 
 const RETRY_BACKOFF_MS = [1_000, 2_000, 4_000, 8_000] as const;
 const RETRY_INTERVAL_MS = 10_000;
@@ -47,26 +24,21 @@ export class EventFeed {
   readonly #listeners = new Set<() => void>();
   #events: readonly ConsoleEvent[] = [];
   #state: ResourceState<readonly ConsoleEvent[]> = {};
-  /** Whether a load has answered or been refused; until then the view says it is loading. */
   #settled = false;
-  /** Whether the last hour still has to be loaded. */
   #needRecent = true;
-  /** The browser time from which events may be missing; `undefined` when none are. */
   #gapFrom: number | undefined;
   #loading = false;
-  /** Counts the stream's opens, so a load knows whether one happened while it was out. */
+  // why: counts the stream's opens, so a load knows whether one happened while it was out.
   #opens = 0;
   #retryTimer: unknown;
   #retryAttempt = 0;
   #active = false;
 
-  /** `get` reads a route and resolves its JSON body. */
   constructor(get: (path: ApiPath) => Promise<unknown>, clock: Clock) {
     this.#get = get;
     this.#clock = clock;
   }
 
-  /** The view opened: load the recent events. Returns the function that stops the feed. */
   start(): () => void {
     this.#active = true;
     this.#loadMissing();
@@ -75,14 +47,12 @@ export class EventFeed {
     };
   }
 
-  /** An event off the stream. Not an event envelope: ignored. */
   readonly streamEvent = (message: StreamEvent): void => {
     if (!this.#active) return;
     const event = readEvent(message.data);
     if (event !== undefined) this.#add([event]);
   };
 
-  /** The stream opened: load what it may have missed. */
   readonly streamOpened = (opened: StreamOpened): void => {
     const gap = opened.closedForMs;
     if (gap === undefined) this.#needRecent = true;
@@ -95,10 +65,6 @@ export class EventFeed {
     this.#loadMissing();
   };
 
-  /**
-   * The events, newest first, once a load has settled. `error` is why the latest load was
-   * refused, cleared by the next that answers. The same object until it changes.
-   */
   readonly snapshot = (): ResourceState<readonly ConsoleEvent[]> => this.#state;
 
   readonly subscribe = (listener: () => void): (() => void) => {
@@ -108,7 +74,6 @@ export class EventFeed {
     };
   };
 
-  /** The `since` that covers everything missing now, or `undefined` when nothing is. */
   #since(): string | undefined {
     if (this.#needRecent) return RECENT;
     return this.#gapFrom === undefined ? undefined : sinceFor(this.#clock.now() - this.#gapFrom);
diff --git a/ui/src/live/browser.ts b/ui/src/data/live/browser.ts
similarity index 78%
rename from ui/src/live/browser.ts
rename to ui/src/data/live/browser.ts
index 2bcbfb981..9e7012aba 100644
--- a/ui/src/live/browser.ts
+++ b/ui/src/data/live/browser.ts
@@ -1,13 +1,11 @@
 import type { Clock, Visibility } from "./connection";
 
-/** The browser's own clock and timers: the one place the live layer reads them. */
 export const browserClock: Clock = {
   now: () => Date.now(),
   setTimeout: (run, ms) => window.setTimeout(run, ms),
   clearTimeout: (handle) => window.clearTimeout(handle as number | undefined),
 };
 
-/** The page's visibility, from `document.visibilityState`. */
 export const documentVisibility: Visibility = {
   hidden: () => document.visibilityState === "hidden",
   subscribe(listener) {
diff --git a/ui/src/data/live/clock.ts b/ui/src/data/live/clock.ts
new file mode 100644
index 000000000..4f9d4e0ff
--- /dev/null
+++ b/ui/src/data/live/clock.ts
@@ -0,0 +1,7 @@
+// why: the browser's clock may differ from the daemon's, so every duration is measured against the
+// daemon's time; a missing or bad `Date` header returns `undefined` and leaves the last good offset.
+export function clockOffset(date: string | null, receivedAt: number): number | undefined {
+  if (date === null) return undefined;
+  const sent = Date.parse(date);
+  return Number.isFinite(sent) ? sent - receivedAt : undefined;
+}
diff --git a/ui/src/live/connection.test.ts b/ui/src/data/live/connection.test.ts
similarity index 90%
rename from ui/src/live/connection.test.ts
rename to ui/src/data/live/connection.test.ts
index b0fe9cdb7..afc9759ac 100644
--- a/ui/src/live/connection.test.ts
+++ b/ui/src/data/live/connection.test.ts
@@ -10,7 +10,6 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-/** The paths read since `from`, in order. */
 function readsSince(gets: readonly { readonly path: ApiPath }[], from: number): ApiPath[] {
   return gets.slice(from).map((get) => get.path);
 }
@@ -20,7 +19,6 @@ describe("LiveConnection", () => {
     const { connection, daemon } = connect();
     connection.watch("/v1/workers", () => {});
     connection.watch("/v1/leases", () => {});
-    // A route a screen read before and no longer does.
     connection.watch("/v1/leases/l_1", () => {})();
     await settle();
     const before = daemon.gets.length;
@@ -29,7 +27,6 @@ describe("LiveConnection", () => {
     await settle();
 
     expect(readsSince(daemon.gets, before)).toEqual(["/v1/workers", "/v1/leases"]);
-    // At once: the clock has not moved, so no poll could have sent them.
     expect(daemon.gets.slice(before).every((get) => get.at === Date.now())).toBe(true);
   });
 
@@ -76,7 +73,6 @@ describe("LiveConnection", () => {
     visibility.set(true);
     await settle();
     const hiddenAt = daemon.gets.length;
-    // Not a poll that will find the tab hidden when it fires: no timer at all.
     expect(vi.getTimerCount()).toBe(0);
     await vi.advanceTimersByTimeAsync(5_000);
 
@@ -88,7 +84,6 @@ describe("LiveConnection", () => {
     connection.onStreamOpened((event) => opened.push(event.closedForMs));
     visibility.set(false);
     await settle();
-    // Shown: the screen at once, a new stream, and the poll again.
     expect(daemon.gets).toHaveLength(hiddenAt + 1);
     expect(daemon.streams).toHaveLength(2);
     expect(daemon.openStream()).toBe(daemon.streams[1]);
@@ -102,7 +97,6 @@ describe("LiveConnection", () => {
     daemon.reads = () => Promise.reject(new ApiError(500, "INTERNAL", "Internal error"));
     connection.watch("/v1/workers", () => {});
     await settle();
-    // A refusal is the daemon answering: still connected, and the refusal is the route's.
     expect(connection.state().phase).toBe("connected");
     expect(connection.resource("/v1/workers").error).toBeInstanceOf(ApiError);
 
@@ -137,7 +131,6 @@ describe("LiveConnection", () => {
     connection.watch("/v1/workers", () => {});
     await settle();
 
-    // A keepalive is not silence: it starts the 40 seconds again.
     await vi.advanceTimersByTimeAsync(30_000);
     daemon.openStream()?.send(": keepalive\n\n");
     await vi.advanceTimersByTimeAsync(39_999);
@@ -161,7 +154,6 @@ describe("LiveConnection", () => {
 
     const offsets = daemon.healthChecks.map((at) => at - lostAt);
     expect(offsets).toEqual([1_000, 3_000, 7_000, 15_000, 25_000, 35_000, 45_000]);
-    // Nothing else is asked while disconnected: no poll, no stream.
     expect(daemon.gets).toHaveLength(reads);
     expect(daemon.streams).toHaveLength(1);
     expect(connection.state().phase).toBe("disconnected");
@@ -182,7 +174,6 @@ describe("LiveConnection", () => {
     const opened: (number | undefined)[] = [];
     connection.onStreamOpened((event) => opened.push(event.closedForMs));
 
-    // A starting daemon answers /v1/healthz and holds its reads and its stream until it is ready.
     daemon.health = "up";
     daemon.reads = "hold";
     daemon.holdStreams = true;
@@ -199,7 +190,6 @@ describe("LiveConnection", () => {
     expect(daemon.openStream()).toBe(daemon.streams[1]);
     expect(opened).toEqual([7_000]);
 
-    // And the poll is back.
     daemon.reads = "answer";
     const recovered = daemon.gets.length;
     await vi.advanceTimersByTimeAsync(1_000);
@@ -212,7 +202,6 @@ describe("LiveConnection", () => {
     await settle();
     daemon.openStream()?.end();
     await settle();
-    // A starting daemon holds both until each gives up, 10 seconds later.
     const givesUp = (path: ApiPath) =>
       new Promise<never>((_resolve, reject) => {
         setTimeout(() => reject(new RequestTimeoutError(path)), 10_000);
@@ -222,7 +211,6 @@ describe("LiveConnection", () => {
     const reads = daemon.gets.length;
     const streams = daemon.streams.length;
 
-    // /v1/healthz answers after a second, then two rounds of giving up.
     await vi.advanceTimersByTimeAsync(21_000);
 
     expect(connection.state().phase).toBe("starting");
@@ -237,21 +225,18 @@ describe("LiveConnection", () => {
     connection.onEvent((event) => events.push(event));
     await settle();
 
-    // An open stream, idle, closed by hiding the tab.
     visibility.set(true);
     await settle();
     expect(connection.state().phase).toBe("connected");
     visibility.set(false);
     await settle();
 
-    // An open stream, closed by hiding the tab, with an event already read off it.
     daemon.openStream()?.send(EVENT);
     visibility.set(true);
     await settle();
     expect(events).toEqual([]);
     expect(connection.state().phase).toBe("connected");
 
-    // A stream whose headers have not arrived yet, closed the same way.
     daemon.holdStreams = true;
     visibility.set(false);
     await settle();
@@ -270,7 +255,6 @@ describe("LiveConnection", () => {
     connection.onStreamOpened((event) => opened.push(event));
     daemon.openStream()?.end();
     await settle();
-    // Recovering: the stream's headers and the screen's read are both held.
     let failRead: (error: unknown) => void = () => {};
     daemon.reads = () =>
       new Promise((_resolve, reject) => {
@@ -280,7 +264,6 @@ describe("LiveConnection", () => {
     await vi.advanceTimersByTimeAsync(1_000);
     expect(connection.state().phase).toBe("starting");
 
-    // The headers arrive, and in the same moment the read fails at the network level.
     daemon.openHeldStreams();
     failRead(new TypeError("Failed to fetch"));
     await settle();
@@ -341,14 +324,12 @@ describe("LiveConnection", () => {
       });
     connection.watch("/v1/workers", () => {});
     await settle();
-    // An event while the read is in flight asks for one more read after it.
     daemon.openStream()?.send(EVENT);
     await settle();
     visibility.set(true);
     await settle();
     const reads = daemon.gets.length;
 
-    // The read fails while the tab is hidden: lost, but nothing more is asked.
     failRead(new TypeError("Failed to fetch"));
     await vi.advanceTimersByTimeAsync(30_000);
 
@@ -373,7 +354,6 @@ describe("LiveConnection", () => {
 
     expect(daemon.healthChecks).toEqual([shownAt]);
     expect(connection.state().phase).toBe("disconnected");
-    // And the backoff starts again from 1 second.
     await vi.advanceTimersByTimeAsync(3_000);
     expect(daemon.healthChecks.map((at) => at - shownAt)).toEqual([0, 1_000, 3_000]);
   });
@@ -392,7 +372,6 @@ describe("LiveConnection", () => {
       error: expect.any(ApiError),
     });
 
-    // A body that is not JSON is the daemon answering too.
     daemon.reads = () => Promise.reject(new SyntaxError("Unexpected token <"));
     await vi.advanceTimersByTimeAsync(1_000);
     expect(connection.resource("/v1/workers").error).toBeInstanceOf(SyntaxError);
@@ -422,7 +401,6 @@ describe("LiveConnection", () => {
     const streams = daemon.streams.length;
     daemon.refuseStreams = undefined;
 
-    // Recovery opened one and it was refused; the console is back, and the poll asks again.
     await vi.advanceTimersByTimeAsync(1_000);
 
     expect(connection.state().phase).toBe("connected");
@@ -502,13 +480,10 @@ describe("LiveConnection", () => {
     const { connection, daemon } = connect();
     const browserNow = Date.now();
     connection.watch("/v1/workers", () => {});
-    // Sent with the next poll's answer, one second from now.
     daemon.date = new Date(browserNow + 1_000 + 90_000).toUTCString();
     await vi.advanceTimersByTimeAsync(1_000);
-    // The daemon's clock is 90 seconds ahead of the browser's.
     expect(connection.serverNow() - Date.now()).toBe(90_000);
 
-    // The latest header wins, and a header that is not a date changes nothing.
     daemon.date = new Date(Date.now() + 1_000 - 30_000).toUTCString();
     await vi.advanceTimersByTimeAsync(1_000);
     expect(connection.serverNow() - Date.now()).toBe(-30_000);
@@ -523,13 +498,11 @@ describe("StreamOpened", () => {
     const { connection, daemon } = connect();
     await settle();
     await vi.advanceTimersByTimeAsync(10_000);
-    // The daemon's keepalive, then nothing: the stream is dead and the console does not know yet.
     daemon.openStream()?.send(": keepalive\n\n");
     await settle();
     const opened: (number | undefined)[] = [];
     connection.onStreamOpened((event) => opened.push(event.closedForMs));
 
-    // 40 seconds of silence mark the console disconnected; /v1/healthz answers 1 second later.
     await vi.advanceTimersByTimeAsync(41_000);
 
     expect(connection.state().phase).toBe("connected");
diff --git a/ui/src/live/connection.ts b/ui/src/data/live/connection.ts
similarity index 67%
rename from ui/src/live/connection.ts
rename to ui/src/data/live/connection.ts
index 68a825fd7..876865510 100644
--- a/ui/src/live/connection.ts
+++ b/ui/src/data/live/connection.ts
@@ -1,48 +1,21 @@
-/**
- * The console's live data (ADR 0013 §2 to §5): the routes the current screen reads, kept fresh by
- * the event stream and a one-second poll, and the state of the console's connection to the
- * daemon. Plain TypeScript with its clock, its visibility and its API injected, so every rule
- * here is tested as a function; `live-context.tsx` puts it behind React hooks.
- *
- * The rules, in one place:
- *
- * - Any event refetches every route the screen reads, at once, and so does a one-second poll.
- *   At most one request per route is in flight; calls that arrive meanwhile cause one more
- *   request after it, not one each.
- * - While the tab is hidden, the poll stops and the stream is closed. Shown again, the screen is
- *   refetched and the stream reopened.
- * - A request that fails at the network level or gives up after 10 seconds, a stream the daemon
- *   closes, and a stream silent for 40 seconds each mark the console disconnected. While
- *   disconnected nothing is polled and the stream stays closed; `/v1/healthz` is asked after 1,
- *   2, 4 and 8 seconds, then every 10. When it answers, the screen is refetched and the stream
- *   reopened, and the console says the daemon is starting until the daemon answers a read or
- *   opens the stream. A starting daemon holds both until it is ready, so while it is starting a
- *   request that gives up is sent again rather than counted as a loss. Each new loss starts the
- *   backoff from 1 second again, and so does a tab shown again while disconnected, which asks
- *   at once.
- * - A stream the console closed itself, hiding the tab or signing out, is not a loss.
- * - A request the daemon refuses is a fact about its route, not about the connection. A refused
- *   stream is asked for again with the next poll.
- */
 import { ApiError, type ApiClient, type ApiPath, RequestTimeoutError } from "../api";
 import { createSseParser, type SseMessage } from "./sse";
-import { clockOffset } from "./time";
+import { clockOffset } from "./clock";
 
 const POLL_INTERVAL_MS = 1_000;
-/** More than two of the daemon's 15-second keepalives. */
+// why: more than two of the daemon's 15-second keepalives, so one lost keepalive never marks a live
+// stream dead.
 const STREAM_SILENCE_MS = 40_000;
 const HEALTHZ_BACKOFF_MS = [1_000, 2_000, 4_000, 8_000] as const;
 const HEALTHZ_INTERVAL_MS = 10_000;
 const STREAM_PATH = "/v1/events/stream";
 
-/** The time and timers, injected (the browser's in `browser.ts`, a fake one in tests). */
 export interface Clock {
   now(): number;
   setTimeout(run: () => void, ms: number): unknown;
   clearTimeout(handle: unknown): void;
 }
 
-/** Whether the tab is hidden, and a way to hear when that changes. */
 export interface Visibility {
   hidden(): boolean;
   subscribe(listener: () => void): () => void;
@@ -50,43 +23,27 @@ export interface Visibility {
 
 export type LiveApi = Pick<ApiClient, "get" | "healthz" | "stream">;
 
-/** What the console has for one route. */
 export interface ResourceState<T> {
-  /** The latest answer. Kept while a later request fails, so the screen keeps its data. */
+  // why: kept while a later request fails, so the screen keeps its data.
   readonly data?: T;
-  /** Why the latest request was refused; cleared by the next answer. */
   readonly error?: unknown;
 }
 
-/**
- * `connected`: reading and following the stream. `disconnected`: lost the daemon; waiting for
- * `/v1/healthz`. `starting`: `/v1/healthz` answered, and no read has yet.
- */
 export type ConnectionPhase = "connected" | "disconnected" | "starting";
 
 export interface ConnectionState {
   readonly phase: ConnectionPhase;
-  /**
-   * Browser time of the latest answer to a read, which is how old the data on screen is. Set
-   * only while not connected, and absent when no read has ever been answered.
-   */
   readonly answeredAt?: number;
 }
 
-/** One event off the stream: its name, and its data parsed as JSON (`undefined` if it was not). */
 export interface StreamEvent {
   readonly event: string;
   readonly data: unknown;
 }
 
-/** The stream opened. */
 export interface StreamOpened {
-  /**
-   * How long the console has not heard from a stream: since the last message or keepalive the
-   * previous stream sent, or since it opened if it sent none. A stream that died without closing
-   * counts from its last sign of life, not from when the console noticed. Absent the first time
-   * a stream opens.
-   */
+  // why: a stream that died without closing counts from its last sign of life, not from when the
+  // console noticed.
   readonly closedForMs?: number;
 }
 
@@ -103,11 +60,6 @@ export interface LiveConnectionOptions {
   readonly visibility: Visibility;
 }
 
-/**
- * Whether a failed request means the daemon answered and refused it: an error status, or a body
- * that is not what was asked for. Anything else means the request did not reach the daemon or
- * did not come back.
- */
 export function isRefusal(error: unknown): boolean {
   return error instanceof ApiError || error instanceof SyntaxError;
 }
@@ -122,7 +74,6 @@ export class LiveConnection {
   readonly #openListeners = new Set<(opened: StreamOpened) => void>();
   readonly #stopWatchingVisibility: () => void;
   #state: ConnectionState = { phase: "connected" };
-  /** Browser time of the latest answer to a read. */
   #answeredAt: number | undefined;
   #offset = 0;
   #disposed = false;
@@ -130,12 +81,9 @@ export class LiveConnection {
   #healthTimer: unknown;
   #healthAttempt = 0;
   #silenceTimer: unknown;
-  /** The current stream's controller; aborting it closes the stream. */
   #stream: AbortController | undefined;
   #streamIsOpen = false;
-  /** When the open stream last sent anything, or opened. */
   #streamHeardAt: number | undefined;
-  /** When the closed stream last sent anything; `undefined` until one has been open. */
   #streamClosedAt: number | undefined;
 
   constructor(options: LiveConnectionOptions) {
@@ -149,11 +97,6 @@ export class LiveConnection {
     }
   }
 
-  /**
-   * Marks `path` as a route the current screen reads, for as long as the returned function is
-   * not called, and calls `listener` whenever what the console has for it changes. The first
-   * watcher fetches it at once.
-   */
   watch(path: ApiPath, listener: () => void): () => void {
     const resource = this.#resource(path);
     const first = resource.listeners.size === 0;
@@ -164,12 +107,10 @@ export class LiveConnection {
     };
   }
 
-  /** What the console has for `path`. The same object until it changes. */
   resource<T>(path: ApiPath): ResourceState<T> {
     return this.#resource(path).state as ResourceState<T>;
   }
 
-  /** The connection's state. The same object until it changes. */
   state(): ConnectionState {
     return this.#state;
   }
@@ -181,12 +122,10 @@ export class LiveConnection {
     };
   }
 
-  /** The daemon's time now, by the browser's clock and the latest `Date` header. */
   serverNow(): number {
     return this.#clock.now() + this.#offset;
   }
 
-  /** Every event the stream delivers, in order. */
   onEvent(listener: (event: StreamEvent) => void): () => void {
     this.#eventListeners.add(listener);
     return () => {
@@ -194,7 +133,6 @@ export class LiveConnection {
     };
   }
 
-  /** Each time the stream opens, so a view can load what it missed while it was closed. */
   onStreamOpened(listener: (opened: StreamOpened) => void): () => void {
     this.#openListeners.add(listener);
     return () => {
@@ -202,7 +140,6 @@ export class LiveConnection {
     };
   }
 
-  /** Signed out: close the stream, stop every timer, and ignore whatever is still in flight. */
   dispose(): void {
     this.#disposed = true;
     this.#stopWatchingVisibility();
@@ -223,7 +160,6 @@ export class LiveConnection {
     return resource;
   }
 
-  /** Requests may be sent: signed in, the tab shown, and the daemon not lost. */
   #reading(): boolean {
     return !this.#disposed && !this.#visibility.hidden() && this.#state.phase !== "disconnected";
   }
@@ -268,7 +204,7 @@ export class LiveConnection {
   #failed(resource: Resource, error: unknown): void {
     switch (this.#classify(error)) {
       case "refused": {
-        // A fact about this route, not about the connection.
+        // why: a fact about this route, not about the connection.
         this.#daemonAnswered();
         const { data } = resource.state;
         this.#update(resource, data === undefined ? { error } : { data, error });
@@ -282,12 +218,8 @@ export class LiveConnection {
     }
   }
 
-  /**
-   * What a failed request says about the daemon, for reads and the stream alike. `refused`: it
-   * answered, with an error status or a body that is not JSON. `retry`: it is starting, and holds
-   * every request until it is ready, so the request gave up waiting. `lost`: the request never
-   * reached it or never came back.
-   */
+  // why: a starting daemon holds every request until it is ready, so a request that gave up waiting
+  // (`retry`) is sent again instead of counted as a loss.
   #classify(error: unknown): "refused" | "retry" | "lost" {
     if (isRefusal(error)) return "refused";
     if (error instanceof RequestTimeoutError && this.#state.phase === "starting") return "retry";
@@ -299,20 +231,17 @@ export class LiveConnection {
     for (const listener of resource.listeners) listener();
   }
 
-  /** ADR 0013 §4: the latest response's `Date` header sets the clock offset. */
   #observe(date: string | null): void {
     const offset = clockOffset(date, this.#clock.now());
     if (offset !== undefined) this.#offset = offset;
   }
 
-  /** The daemon answered a read or opened the stream. A starting daemon that answers is ready. */
   #daemonAnswered(): void {
     if (this.#state.phase !== "starting") return;
     this.#setState("connected");
     this.#schedulePoll();
   }
 
-  /** Connected needs no age; the other two carry the age of the data on screen. */
   #setState(phase: ConnectionPhase): void {
     const answeredAt = this.#answeredAt;
     this.#state =
@@ -320,8 +249,6 @@ export class LiveConnection {
     for (const listener of this.#stateListeners) listener();
   }
 
-  // ---- the poll ---------------------------------------------------------------------------
-
   #schedulePoll(): void {
     if (this.#pollTimer !== undefined) return;
     this.#pollTimer = this.#clock.setTimeout(() => {
@@ -338,8 +265,6 @@ export class LiveConnection {
     this.#pollTimer = undefined;
   }
 
-  // ---- the stream -------------------------------------------------------------------------
-
   #openStream(): void {
     this.#closeStream();
     const controller = new AbortController();
@@ -361,17 +286,15 @@ export class LiveConnection {
     const body = await this.#connectStream(controller);
     if (body === undefined) return;
     if (this.#stream !== controller) {
-      // Closed while its headers were being handed over, by a loss or a hidden tab.
+      // why: closed while its headers were being handed over, by a loss or a hidden tab.
       void body.cancel().catch(() => undefined);
       return;
     }
     this.#streamOpened();
     const ended = await this.#follow(controller, body);
-    // The daemon closed the stream, or it broke.
     if (ended) this.#lose();
   }
 
-  /** The stream's body once its headers arrive; `undefined` when it did not open. */
   async #connectStream(
     controller: AbortController,
   ): Promise<ReadableStream<Uint8Array> | undefined> {
@@ -390,7 +313,8 @@ export class LiveConnection {
       if (outcome === "retry") this.#openStream();
       else if (outcome === "lost") this.#lose();
       else {
-        // Refused: the daemon is there. No stream for now; the next poll asks for one again.
+        // why: refused means the daemon is there: no stream for now, and the next poll asks for one
+        // again.
         this.#stream = undefined;
         this.#daemonAnswered();
       }
@@ -398,10 +322,6 @@ export class LiveConnection {
     }
   }
 
-  /**
-   * Reads the stream until it ends. `true` when the daemon ended it or it broke; `false` when
-   * the console closed it.
-   */
   async #follow(controller: AbortController, body: ReadableStream<Uint8Array>): Promise<boolean> {
     const reader = body.getReader();
     const parser = createSseParser();
@@ -448,8 +368,6 @@ export class LiveConnection {
     if (this.#reading()) this.#refetchScreen();
   }
 
-  // ---- losing and finding the daemon ------------------------------------------------------
-
   #lose(): void {
     if (this.#disposed || this.#state.phase === "disconnected") return;
     this.#stopPoll();
@@ -488,8 +406,6 @@ export class LiveConnection {
     this.#openStream();
   }
 
-  // ---- the tab ----------------------------------------------------------------------------
-
   #visibilityChanged(): void {
     if (this.#disposed) return;
     if (this.#visibility.hidden()) {
diff --git a/ui/src/live/sse.test.ts b/ui/src/data/live/sse.test.ts
similarity index 82%
rename from ui/src/live/sse.test.ts
rename to ui/src/data/live/sse.test.ts
index 340ec9649..f4a01d362 100644
--- a/ui/src/live/sse.test.ts
+++ b/ui/src/data/live/sse.test.ts
@@ -2,8 +2,6 @@ import { describe, expect, it } from "vitest";
 
 import { createSseParser, type SseMessage } from "./sse";
 
-/** Three events as the daemon frames them, a keepalive between them, one in `\r\n` line ends
- * with two data lines, and a character that takes more than one byte. */
 const BODY =
   'event: lease.granted\ndata: {"seq":1}\n\n' +
   ": keepalive\n\n" +
@@ -23,15 +21,12 @@ describe("createSseParser", () => {
     const whole = createSseParser().push(bytes);
     expect(whole).toEqual(EXPECTED);
 
-    // Every place one chunk can end and the next begin, including inside `\r\n` and inside
-    // the two-byte characters.
     for (let cut = 1; cut < bytes.length; cut += 1) {
       const parser = createSseParser();
       const messages = [...parser.push(bytes.slice(0, cut)), ...parser.push(bytes.slice(cut))];
       expect(messages, `cut at byte ${cut}`).toEqual(EXPECTED);
     }
 
-    // One byte at a time.
     const parser = createSseParser();
     const messages = [...bytes].flatMap((byte) => parser.push(Uint8Array.of(byte)));
     expect(messages).toEqual(EXPECTED);
diff --git a/ui/src/live/sse.ts b/ui/src/data/live/sse.ts
similarity index 63%
rename from ui/src/live/sse.ts
rename to ui/src/data/live/sse.ts
index 41d613db2..a7ca78228 100644
--- a/ui/src/live/sse.ts
+++ b/ui/src/data/live/sse.ts
@@ -1,28 +1,18 @@
-/**
- * Server-Sent Events, read off a `fetch` body (ADR 0013 §2). The browser's `EventSource` would
- * parse this for us, but it cannot send the `Authorization` header, so the console parses the
- * frames itself. The format is the one the HTML standard defines: lines of `field: value`, a
- * blank line ends a message, a line starting with `:` is a comment (the daemon's keepalive).
- */
+// why: the browser's `EventSource` cannot send the `Authorization` header, so the console parses
+// the frames itself.
 
 export interface SseMessage {
-  /** The `event:` field, or `message` when the frame had none. */
   readonly event: string;
-  /** Every `data:` line of the frame, joined with newlines. */
   readonly data: string;
   readonly id?: string;
 }
 
 export interface SseParser {
-  /** Feeds the next chunk of the body and returns the messages it completed, in order. */
   push(chunk: Uint8Array | string): SseMessage[];
 }
 
-/**
- * A parser for one stream. A chunk may end anywhere: inside a line, between a `\r` and its
- * `\n`, or inside a UTF-8 character. What it cannot finish yet waits for the next chunk, so each
- * message comes out once, whole.
- */
+// why: a chunk may end anywhere (inside a line, between a `\r` and its `\n`, or inside a UTF-8
+// character), so what cannot be finished yet waits for the next chunk.
 export function createSseParser(): SseParser {
   const decoder = new TextDecoder();
   let buffer = "";
@@ -30,7 +20,6 @@ export function createSseParser(): SseParser {
   let data: string[] = [];
   let id: string | undefined;
 
-  /** A blank line: the message so far is complete, if it had any data. */
   const dispatch = (out: SseMessage[]) => {
     if (data.length > 0) {
       out.push({ data: data.join("\n"), event: event === "" ? "message" : event, ...idField(id) });
@@ -39,7 +28,6 @@ export function createSseParser(): SseParser {
     data = [];
   };
 
-  /** `name: value`, or a bare `name`. Fields the console does not use are ignored. */
   const field = (text: string) => {
     const colon = text.indexOf(":");
     const name = colon < 0 ? text : text.slice(0, colon);
@@ -74,10 +62,8 @@ function idField(id: string | undefined): { readonly id?: string } {
   return id === undefined ? {} : { id };
 }
 
-/**
- * Where the first complete line in `text` ends. A `\r` at the very end is not complete yet: the
- * next chunk may start with the `\n` that makes it one `\r\n`.
- */
+// why: a `\r` at the very end is not complete yet: the next chunk may start with the `\n` that
+// makes it one `\r\n`.
 function lineEnd(text: string): { readonly index: number; readonly length: number } | undefined {
   for (let index = 0; index < text.length; index += 1) {
     const char = text[index];
diff --git a/ui/src/live/test-support.ts b/ui/src/data/live/test-support.ts
similarity index 75%
rename from ui/src/live/test-support.ts
rename to ui/src/data/live/test-support.ts
index b2bca8c9a..08a9ffc12 100644
--- a/ui/src/live/test-support.ts
+++ b/ui/src/data/live/test-support.ts
@@ -1,8 +1,3 @@
-/**
- * A scripted daemon for the live layer's tests: the three API calls the layer makes, each
- * recorded with the fake clock's time, and a visibility the test flips. Every timer the layer
- * sets runs on vitest's fake timers, so a test moves time with `vi.advanceTimersByTimeAsync`.
- */
 import { vi } from "vitest";
 
 import { type ApiPath, type ApiResponse } from "../api";
@@ -14,12 +9,9 @@ const fakeClock: Clock = {
   clearTimeout: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
 };
 
-/** One stream the layer opened: what the test sends down it, and whether the layer closed it. */
 interface FakeStream {
   send(text: string): void;
-  /** The daemon ends the stream. */
   end(): void;
-  /** The connection breaks in the middle of the stream. */
   break(): void;
   readonly closedByConsole: () => boolean;
 }
@@ -41,22 +33,13 @@ function deferred<T>(): Deferred<T> {
 }
 
 class FakeDaemon implements LiveApi {
-  /** Every read, by path and the time it was sent. */
   readonly gets: { readonly path: ApiPath; readonly at: number }[] = [];
   readonly healthChecks: number[] = [];
   readonly streams: FakeStream[] = [];
-  /**
-   * How the next reads answer. `"answer"` (the default) answers at once; `"hold"` keeps each
-   * read pending until `release()`; a function decides per read.
-   */
   reads: "answer" | "hold" | ((path: ApiPath) => Promise<ApiResponse<unknown>>) = "answer";
-  /** Whether a new stream's headers wait for `release()`, as a starting daemon's do. */
   holdStreams = false;
-  /** When set, every new stream fails to open as the promise this returns does. */
   refuseStreams: (() => Promise<never>) | undefined;
-  /** What `/v1/healthz` does: answer up, answer down, or fail at the network level. */
   health: "up" | "down" | "unreachable" = "up";
-  /** The `Date` header every answer carries. */
   date: string | null = null;
   readonly #held: Deferred<ApiResponse<unknown>>[] = [];
   readonly #heldStreams: (() => void)[] = [];
@@ -74,12 +57,10 @@ class FakeDaemon implements LiveApi {
     return Promise.resolve({ body: { read: this.gets.length }, date: this.date } as never);
   }
 
-  /** Sends the headers of every held stream, and leaves held reads held. */
   openHeldStreams(): void {
     for (const open of this.#heldStreams.splice(0)) open();
   }
 
-  /** Answers every held read, and sends the headers of every held stream. */
   release(): void {
     for (const held of this.#held.splice(0))
       held.resolve({ body: { held: true }, date: this.date });
@@ -105,7 +86,7 @@ class FakeDaemon implements LiveApi {
       try {
         controller.error(new DOMException("The stream was aborted", "AbortError"));
       } catch {
-        // Already closed by the daemon's side.
+        // why: already closed by the daemon's side.
       }
     });
     this.streams.push({
@@ -117,7 +98,7 @@ class FakeDaemon implements LiveApi {
     if (this.refuseStreams !== undefined) return this.refuseStreams();
     const response = { body, date: this.date };
     if (!this.holdStreams) return Promise.resolve(response);
-    // As `fetch` does, a request aborted before its headers arrive rejects with an AbortError.
+    // why: as `fetch` does, a request aborted before its headers arrive rejects with an AbortError.
     return new Promise((resolve, reject) => {
       this.#heldStreams.push(() => resolve(response));
       signal.addEventListener("abort", () =>
@@ -126,7 +107,6 @@ class FakeDaemon implements LiveApi {
     });
   }
 
-  /** The stream the layer has open now, if any. */
   openStream(): FakeStream | undefined {
     const last = this.streams.at(-1);
     return last === undefined || last.closedByConsole() ? undefined : last;
@@ -152,7 +132,6 @@ class FakeVisibility implements Visibility {
   }
 }
 
-/** A connection on a fake daemon, with fake timers already on. */
 export function connect(): {
   readonly connection: LiveConnection;
   readonly daemon: FakeDaemon;
@@ -166,7 +145,6 @@ export function connect(): {
   return { connection, daemon, visibility };
 }
 
-/** Lets every promise the layer is waiting on settle, without moving the clock. */
 export async function settle(): Promise<void> {
   await vi.advanceTimersByTimeAsync(0);
 }
diff --git a/ui/src/data/preferences.test.ts b/ui/src/data/preferences.test.ts
new file mode 100644
index 000000000..03b2dc5a3
--- /dev/null
+++ b/ui/src/data/preferences.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+
+import { createPreferences } from "./preferences";
+
+function memory(): Pick<Storage, "getItem" | "setItem"> & { readonly items: Map<string, string> } {
+  const items = new Map<string, string>();
+  return {
+    getItem: (key) => items.get(key) ?? null,
+    items,
+    setItem: (key, value) => void items.set(key, value),
+  };
+}
+
+describe("the console's preferences", () => {
+  it("keeps the sidebar width the viewer chose, for the next page load", () => {
+    const storage = memory();
+
+    createPreferences(() => storage).setSidebar("narrow");
+
+    expect(createPreferences(() => storage).sidebar()).toBe("narrow");
+  });
+
+  it("has no sidebar width until one is chosen, and ignores a value it did not write", () => {
+    const storage = memory();
+    expect(createPreferences(() => storage).sidebar()).toBeUndefined();
+
+    storage.items.set("simlock.sidebar", "huge");
+
+    expect(createPreferences(() => storage).sidebar()).toBeUndefined();
+  });
+
+  it("works without storage in a browser that blocks site data", () => {
+    const blocked = () => {
+      throw new Error("SecurityError");
+    };
+    const preferences = createPreferences(blocked);
+
+    expect(() => preferences.setSidebar("wide")).not.toThrow();
+    expect(preferences.sidebar()).toBeUndefined();
+  });
+});
diff --git a/ui/src/data/preferences.ts b/ui/src/data/preferences.ts
new file mode 100644
index 000000000..255e27c89
--- /dev/null
+++ b/ui/src/data/preferences.ts
@@ -0,0 +1,32 @@
+const SIDEBAR_KEY = "simlock.sidebar";
+
+type Storage = Pick<globalThis.Storage, "getItem" | "setItem">;
+
+export type SidebarWidth = "wide" | "narrow";
+
+export interface Preferences {
+  sidebar(): SidebarWidth | undefined;
+  setSidebar(width: SidebarWidth): void;
+}
+
+function attempt<T>(run: () => T): T | undefined {
+  try {
+    return run();
+  } catch {
+    return undefined;
+  }
+}
+
+// why: a viewer's convenience, kept in the browser that chose it; a browser that refuses site data
+// (or a value from elsewhere) leaves the choice to the window's width, and nothing breaks.
+export function createPreferences(storage: () => Storage): Preferences {
+  return {
+    sidebar() {
+      const saved = attempt(() => storage().getItem(SIDEBAR_KEY));
+      return saved === "wide" || saved === "narrow" ? saved : undefined;
+    },
+    setSidebar(width) {
+      attempt(() => storage().setItem(SIDEBAR_KEY, width));
+    },
+  };
+}
diff --git a/ui/src/session.test.ts b/ui/src/data/session.test.ts
similarity index 92%
rename from ui/src/session.test.ts
rename to ui/src/data/session.test.ts
index 9cf8034a1..92f4cde4e 100644
--- a/ui/src/session.test.ts
+++ b/ui/src/data/session.test.ts
@@ -2,7 +2,6 @@ import { describe, expect, it } from "vitest";
 
 import { createSession } from "./session";
 
-/** A `sessionStorage` stand-in that keeps what it is given. */
 function memoryStorage() {
   const items = new Map<string, string>();
   return {
@@ -44,7 +43,6 @@ describe("createSession", () => {
   });
 
   it("still signs in and out when the browser refuses storage, keeping the token in the page", () => {
-    // Either each call is refused, or reading `window.sessionStorage` itself throws.
     const unreachable = (): typeof refusing => {
       throw new DOMException("blocked", "SecurityError");
     };
diff --git a/ui/src/session.ts b/ui/src/data/session.ts
similarity index 64%
rename from ui/src/session.ts
rename to ui/src/data/session.ts
index 3e0b8301a..018917c87 100644
--- a/ui/src/session.ts
+++ b/ui/src/data/session.ts
@@ -1,8 +1,3 @@
-/**
- * The operator's token, kept per tab (ADR 0011 §6): in `sessionStorage`, so a reload keeps the
- * operator signed in and a new tab asks again. Nothing else in the console stores it.
- */
-
 const STORAGE_KEY = "simlock.operatorToken";
 
 type Storage = Pick<globalThis.Storage, "getItem" | "removeItem" | "setItem">;
@@ -11,15 +6,12 @@ export interface Session {
   token(): string | undefined;
   signIn(token: string): void;
   signOut(): void;
-  /** For `useSyncExternalStore`: called after every sign-in and sign-out. */
   subscribe(listener: () => void): () => void;
 }
 
-/**
- * `storage` is asked for lazily, because a browser with site data blocked throws on merely
- * reading `window.sessionStorage`; it may also refuse each read and write. The console then
- * still signs in, and the token lives only as long as the page.
- */
+// why: `storage` is asked for lazily, because a browser with site data blocked throws on merely
+// reading `window.sessionStorage`; it may also refuse each read and write, and the console then
+// still signs in with the token living only as long as the page.
 export function createSession(storage: () => Storage): Session {
   const listeners = new Set<() => void>();
   let current = attempt(() => storage().getItem(STORAGE_KEY) ?? undefined);
@@ -43,7 +35,6 @@ export function createSession(storage: () => Storage): Session {
   };
 }
 
-/** Runs a storage call, treating a refusal as "nothing stored". */
 function attempt<T>(call: () => T): T | undefined {
   try {
     return call();
diff --git a/ui/src/sign-in-check.test.ts b/ui/src/data/sign-in-check.test.ts
similarity index 95%
rename from ui/src/sign-in-check.test.ts
rename to ui/src/data/sign-in-check.test.ts
index 648c327fe..427a7203b 100644
--- a/ui/src/sign-in-check.test.ts
+++ b/ui/src/data/sign-in-check.test.ts
@@ -5,7 +5,6 @@ import { checkToken, refusalMessage } from "./sign-in-check";
 
 type Answer = number | "network-error" | "hang";
 
-/** A daemon that answers `/v1/healthz` and `/v1/workers` as scripted. */
 function daemon(healthz: Answer, workers: Answer): Fetch {
   return (input, init) => {
     const answer = input === "/v1/healthz" ? healthz : workers;
@@ -80,8 +79,6 @@ describe("checkToken", () => {
   });
 
   it("says the daemon cannot be reached when something else answers /v1/healthz", async () => {
-    // A daemon always answers its liveness route with 200; a proxy with no daemon behind it
-    // answers 502.
     expect(await checkToken("slk_op", daemon(502, 200))).toEqual({ kind: "unreachable" });
   });
 
diff --git a/ui/src/sign-in-check.ts b/ui/src/data/sign-in-check.ts
similarity index 71%
rename from ui/src/sign-in-check.ts
rename to ui/src/data/sign-in-check.ts
index 1b0ff5582..47666add8 100644
--- a/ui/src/sign-in-check.ts
+++ b/ui/src/data/sign-in-check.ts
@@ -1,6 +1,5 @@
 import { type Fetch, RequestTimeoutError, send } from "./api";
 
-/** What checking a pasted token found (ADR 0011 §6). */
 export type SignInOutcome =
   | { readonly kind: "signed-in" }
   | { readonly kind: "unknown-token" }
@@ -11,15 +10,12 @@ export type SignInOutcome =
 
 const TOKEN_SHAPE = /^[\x21-\x7e]+$/;
 
-/**
- * First `GET /v1/healthz`, to learn whether the daemon is up at all; then `GET /v1/workers`, a
- * read only an operator token may make, in both modes. A timeout on the second while the first
- * answered means the daemon is still starting: its reads wait until it is ready.
- */
+// why: a timeout on the second request while the first answered means the daemon is still starting:
+// its reads wait until it is ready.
 export async function checkToken(token: string, fetch: Fetch): Promise<SignInOutcome> {
-  // A token is printable ASCII. Anything else, such as a "…" copied from a document, cannot be
-  // one the daemon issued, and cannot go in a header either: `fetch` would refuse it with the
-  // same error as a network failure, and the screen would wrongly say the daemon is down.
+  // why: a token is printable ASCII; anything else, such as a "…" copied from a document, cannot be
+  // one the daemon issued and cannot go in a header either: `fetch` would refuse it with the same
+  // error as a network failure, and the screen would wrongly say the daemon is down.
   if (!TOKEN_SHAPE.test(token)) return { kind: "unknown-token" };
   try {
     const up = await send("/v1/healthz", { fetch }, async (response) => response.ok);
@@ -39,7 +35,6 @@ export async function checkToken(token: string, fetch: Fetch): Promise<SignInOut
   return { kind: "failed", status };
 }
 
-/** What the sign-in screen says for each refusal. */
 export function refusalMessage(outcome: Exclude<SignInOutcome, { kind: "signed-in" }>): string {
   switch (outcome.kind) {
     case "unknown-token":
diff --git a/ui/src/screen/stream.test.ts b/ui/src/data/stream.test.ts
similarity index 100%
rename from ui/src/screen/stream.test.ts
rename to ui/src/data/stream.test.ts
diff --git a/ui/src/screen/stream.ts b/ui/src/data/stream.ts
similarity index 100%
rename from ui/src/screen/stream.ts
rename to ui/src/data/stream.ts
diff --git a/ui/src/ds/button.css b/ui/src/ds/button.css
new file mode 100644
index 000000000..071c98e86
--- /dev/null
+++ b/ui/src/ds/button.css
@@ -0,0 +1,70 @@
+/* Buttons. Primary is filled orange with dark text, secondary is outlined, quiet is text only. */
+
+.button {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--text-sm);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color var(--duration),
+    border-color var(--duration),
+    color var(--duration);
+}
+
+.button:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+  color: var(--on-accent);
+}
+
+.button:disabled {
+  cursor: progress;
+  opacity: 0.6;
+}
+
+.button-secondary {
+  border-color: var(--border-strong);
+  background: transparent;
+  color: var(--text);
+}
+
+.button-secondary:hover {
+  border-color: var(--text);
+  background: var(--surface);
+  color: var(--text);
+}
+
+.button-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text);
+}
+
+.button-quiet:hover {
+  border-color: transparent;
+  background: var(--surface);
+  color: var(--text);
+}
+
+/* A button that does nothing here, such as Next on the last page. It keeps its place and its
+ * focus; its text and edge go quiet. */
+.button[aria-disabled="true"],
+.button[aria-disabled="true"]:hover {
+  border-color: var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: default;
+}
diff --git a/ui/src/ds/button.tsx b/ui/src/ds/button.tsx
new file mode 100644
index 000000000..47f05399e
--- /dev/null
+++ b/ui/src/ds/button.tsx
@@ -0,0 +1,38 @@
+import "./button.css";
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { Link } from "./link";
+
+export type ButtonVariant = "primary" | "secondary" | "quiet";
+
+function classOf(variant: ButtonVariant): string {
+  return variant === "primary" ? "button" : `button button-${variant}`;
+}
+
+export function Button(
+  props: ButtonHTMLAttributes<HTMLButtonElement> & { readonly variant?: ButtonVariant },
+) {
+  const { variant = "secondary", type = "button", className, ...rest } = props;
+  const base = classOf(variant);
+  return (
+    <button
+      {...rest}
+      type={type}
+      className={className === undefined ? base : `${base} ${className}`}
+    />
+  );
+}
+
+export function ButtonLink(props: {
+  readonly to: string;
+  readonly variant?: ButtonVariant;
+  readonly children: ReactNode;
+}) {
+  const { children, to, variant = "secondary" } = props;
+  return (
+    <Link to={to} className={classOf(variant)}>
+      {children}
+    </Link>
+  );
+}
diff --git a/ui/src/ds/chart.css b/ui/src/ds/chart.css
new file mode 100644
index 000000000..0c30fa619
--- /dev/null
+++ b/ui/src/ds/chart.css
@@ -0,0 +1,108 @@
+/* Charts: an orange line or columns with a faint orange fill, light grid lines, mono axis
+ * labels. Recharts draws the SVG; every colour here overrides its defaults. */
+
+.chart {
+  margin: 0 0 var(--space-3);
+}
+
+.chart svg {
+  overflow: visible;
+}
+
+.chart .recharts-cartesian-grid line {
+  stroke: var(--border);
+}
+
+.chart .recharts-cartesian-axis-line {
+  stroke: var(--border);
+}
+
+.chart .recharts-cartesian-axis-tick-value {
+  fill: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.chart-area .recharts-area-curve {
+  stroke: var(--accent);
+  stroke-width: 2px;
+}
+
+.chart-area .recharts-area-area {
+  fill: var(--accent);
+  fill-opacity: 0.08;
+}
+
+.chart-area .recharts-tooltip-cursor {
+  stroke: var(--border-strong);
+}
+
+.chart-columns .recharts-bar-rectangle path {
+  fill: var(--accent);
+}
+
+.chart-cursor {
+  fill: var(--accent);
+  fill-opacity: 0.08;
+}
+
+.chart-dot {
+  fill: var(--accent);
+  stroke: var(--surface);
+}
+
+.chart-tip {
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--border-strong);
+  background: var(--bg);
+  color: var(--text);
+  font-size: var(--text-sm);
+}
+
+.chart-tip-label {
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+/* A chart takes focus so the arrow keys can step through it. The ring goes round the whole
+ * chart, and only for keyboard focus: a click on a chart draws none. */
+.chart:has(:focus-visible) {
+  outline: var(--focus-width) solid var(--accent-text);
+  outline-offset: 2px;
+}
+
+.chart :focus {
+  outline: none;
+}
+
+.chart-summary {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.chart-summary strong {
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.chart-data summary {
+  padding: var(--space-2) 0;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  cursor: pointer;
+}
+
+.chart-data summary:hover {
+  color: var(--text);
+}
+
+.chart-data[open] summary {
+  margin-bottom: var(--space-3);
+}
+
+.chart-data summary {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+}
diff --git a/ui/src/charts.test.tsx b/ui/src/ds/chart.test.tsx
similarity index 95%
rename from ui/src/charts.test.tsx
rename to ui/src/ds/chart.test.tsx
index c9f364b7b..6b1ad8ea4 100644
--- a/ui/src/charts.test.tsx
+++ b/ui/src/ds/chart.test.tsx
@@ -1,7 +1,7 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
-import { MinuteTable } from "./charts";
+import { MinuteTable } from "./chart";
 
 describe("the minute-by-minute table", () => {
   it("lists every minute of a chart and its count as text, newest first", () => {
diff --git a/ui/src/charts.tsx b/ui/src/ds/chart.tsx
similarity index 75%
rename from ui/src/charts.tsx
rename to ui/src/ds/chart.tsx
index 28603ad41..d077da0ac 100644
--- a/ui/src/charts.tsx
+++ b/ui/src/ds/chart.tsx
@@ -1,11 +1,7 @@
-/**
- * The console's charts, drawn with Recharts in the style docs/internal/DESIGN.md describes: an
- * orange line or columns, a faint orange fill, light grid lines, mono axis labels. Every colour
- * comes from the stylesheet, by class, so both themes apply and nothing sets a `<style>`
- * element (ADR 0011 §4). Nothing moves: animation is off.
- *
- * A chart is never the only place its numbers are: `MinuteTable` lists every minute as text.
- */
+// why: every colour comes from the stylesheet, by class, so both themes apply and nothing sets a
+// `<style>` element.
+import "./chart.css";
+
 import {
   Area,
   AreaChart,
@@ -20,20 +16,18 @@ import {
 } from "recharts";
 import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
 
-import type { MinuteCount } from "./views/history-model";
+export interface MinuteCount {
+  readonly at: number;
+  readonly label: string;
+  readonly count: number;
+}
 
 const HEIGHT = 240;
 const MARGIN = { bottom: 0, left: 0, right: 8, top: 8 };
 
-/**
- * A chart of a count per minute: an area for a level held over time, columns for how many
- * things happened in each minute. `title` names it to a screen reader, which can also step
- * through its minutes with the arrow keys once the chart has focus.
- */
 export function MinuteChart(props: {
   readonly kind: "area" | "columns";
   readonly title: string;
-  /** What one minute's count is, such as "leases held": the tooltip's label. */
   readonly unit: string;
   readonly minutes: readonly MinuteCount[];
 }) {
@@ -94,10 +88,8 @@ function MinuteTip({
   );
 }
 
-/** Every minute of a chart and its count, as text, behind a disclosure under the chart. */
 export function MinuteTable(props: {
   readonly minutes: readonly MinuteCount[];
-  /** The count column's heading, such as "Leases held". */
   readonly heading: string;
 }) {
   const { heading, minutes } = props;
diff --git a/ui/src/ds/choice.css b/ui/src/ds/choice.css
new file mode 100644
index 000000000..139f73a96
--- /dev/null
+++ b/ui/src/ds/choice.css
@@ -0,0 +1,101 @@
+/* Filter chips: radios drawn as small mono buttons, the one on filled. */
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.chip-choice {
+  position: relative;
+  font-weight: 400;
+}
+
+.chip-choice input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.chip-choice span {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  transition:
+    background-color var(--duration),
+    border-color var(--duration),
+    color var(--duration);
+}
+
+.chip-choice:hover span {
+  color: var(--text);
+}
+
+.chip-choice input:checked + span {
+  border-color: var(--border-strong);
+  background: var(--field);
+  color: var(--text);
+}
+
+.chip-choice input:focus-visible + span {
+  outline: var(--focus-width) solid var(--accent-text);
+  outline-offset: 2px;
+}
+
+/* Tabs: labels in a row, the current one underlined in orange. */
+
+.tab-list {
+  display: flex;
+  gap: var(--space-6);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+}
+
+.tab {
+  height: 40px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow: inset 0 0 0 transparent;
+  transition:
+    color var(--duration),
+    box-shadow var(--duration);
+}
+
+.tab:hover {
+  color: var(--text);
+}
+
+.tab[aria-selected="true"] {
+  color: var(--text);
+  box-shadow: inset 0 -2px 0 var(--accent);
+}
+
+.tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding-top: var(--space-4);
+}
diff --git a/ui/src/ds/choice.tsx b/ui/src/ds/choice.tsx
new file mode 100644
index 000000000..b0b6f70ac
--- /dev/null
+++ b/ui/src/ds/choice.tsx
@@ -0,0 +1,81 @@
+import "./choice.css";
+
+import { type ReactNode, useId } from "react";
+
+export interface Choice<T extends string> {
+  readonly value: T;
+  readonly label: string;
+}
+
+// why: a filter is one choice of several, so it is a radio group: the arrow keys move along it
+// and a screen reader says which one is on; the chips are only how the radios look.
+export function ChoiceChips<T extends string>(props: {
+  readonly legend: string;
+  readonly choices: readonly Choice<T>[];
+  readonly value: T;
+  readonly onChange: (value: T) => void;
+}) {
+  const { choices, legend, onChange, value } = props;
+  const name = useId();
+  return (
+    <fieldset className="chips">
+      <legend className="visually-hidden">{legend}</legend>
+      {choices.map((choice) => (
+        <label key={choice.value} className="chip-choice">
+          <input
+            type="radio"
+            name={name}
+            value={choice.value}
+            checked={choice.value === value}
+            onChange={() => onChange(choice.value)}
+          />
+          <span>{choice.label}</span>
+        </label>
+      ))}
+    </fieldset>
+  );
+}
+
+export interface Tab<T extends string> {
+  readonly value: T;
+  readonly label: string;
+}
+
+export function Tabs<T extends string>(props: {
+  readonly label: string;
+  readonly tabs: readonly Tab<T>[];
+  readonly value: T;
+  readonly onChange: (value: T) => void;
+  readonly children: ReactNode;
+}) {
+  const { children, label, onChange, tabs, value } = props;
+  const base = useId();
+  return (
+    <div className="tabs">
+      <div role="tablist" aria-label={label} className="tab-list">
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            type="button"
+            role="tab"
+            id={`${base}-${tab.value}`}
+            aria-selected={tab.value === value}
+            aria-controls={`${base}-panel`}
+            className="tab"
+            onClick={() => onChange(tab.value)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div
+        role="tabpanel"
+        id={`${base}-panel`}
+        aria-labelledby={`${base}-${value}`}
+        className="tab-panel"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/ds/facts.css b/ui/src/ds/facts.css
new file mode 100644
index 000000000..2bb72f998
--- /dev/null
+++ b/ui/src/ds/facts.css
@@ -0,0 +1,41 @@
+/* Facts: a label and its value, side by side. */
+
+.facts {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.facts > div {
+  display: grid;
+  grid-template-columns: 9rem minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: baseline;
+}
+
+.facts dt {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.facts dd {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.facts-raw dt {
+  font-size: var(--text-sm);
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.facts-raw dd {
+  font-family: var(--font-mono);
+}
diff --git a/ui/src/ds/facts.tsx b/ui/src/ds/facts.tsx
new file mode 100644
index 000000000..42e6cc576
--- /dev/null
+++ b/ui/src/ds/facts.tsx
@@ -0,0 +1,24 @@
+import "./facts.css";
+
+import type { ReactNode } from "react";
+
+export interface Fact {
+  readonly label: string;
+  readonly value: ReactNode;
+}
+
+// why: `raw` keeps keys as the daemon spelled them (`leaseId`), where the label capitals would
+// make a camelCase name unreadable.
+export function Facts(props: { readonly facts: readonly Fact[]; readonly raw?: boolean }) {
+  const { facts, raw = false } = props;
+  return (
+    <dl className={raw ? "facts facts-raw" : "facts"}>
+      {facts.map((fact) => (
+        <div key={fact.label}>
+          <dt>{fact.label}</dt>
+          <dd>{fact.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
diff --git a/ui/src/ds/foundation.css b/ui/src/ds/foundation.css
new file mode 100644
index 000000000..37634d231
--- /dev/null
+++ b/ui/src/ds/foundation.css
@@ -0,0 +1,263 @@
+/* The console's tokens and base elements. docs/internal/DESIGN.md is the guide these follow;
+ * change both together. */
+
+:root {
+  color-scheme: light dark;
+
+  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.75rem;
+  --text-2xl: 2rem;
+
+  --label-tracking: 0.08em;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  --radius: 0;
+  --focus-width: 2px;
+  --duration: 120ms;
+
+  /* Light theme. */
+  --bg: #f8f8f7;
+  --surface: #f1f1ef;
+  --field: #e9e9e7;
+  --chip: #e6e6e3;
+  --border: #dededb;
+  --border-strong: #85857f;
+  --text: #111110;
+  --text-muted: #5a5a55;
+  --accent: #f76b15;
+  --accent-hover: #e2560a;
+  --on-accent: #111110;
+  --accent-text: #b93d0b;
+  --selection: #fed7aa;
+
+  --status-ok: #15803d;
+  --status-warn: #a16207;
+  --status-error: #b91c1c;
+  --status-idle: #57534e;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0e0e0f;
+    --surface: #161618;
+    --field: #1e1e21;
+    --chip: #232326;
+    --border: #2b2b2f;
+    --border-strong: #75757d;
+    --text: #f2f2f0;
+    --text-muted: #a1a1a8;
+    --accent: #ff7a1a;
+    --accent-hover: #ff9442;
+    --on-accent: #0e0e0f;
+    --accent-text: #ff8c42;
+    --selection: #7c2d12;
+
+    --status-ok: #4ade80;
+    --status-warn: #facc15;
+    --status-error: #f87171;
+    --status-idle: #a8a29e;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection {
+  background: var(--selection);
+  color: var(--text);
+}
+
+h1,
+h2 {
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+
+h1 {
+  font-size: var(--text-xl);
+}
+
+p {
+  margin: 0 0 var(--space-3);
+}
+
+code {
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+
+a {
+  color: var(--accent-text);
+}
+
+a:hover {
+  color: var(--text);
+}
+
+:focus-visible {
+  outline: var(--focus-width) solid var(--accent-text);
+  outline-offset: 2px;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.mono {
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+
+/* Inputs: a grey fill and a 1px border. */
+
+label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+}
+
+input {
+  min-height: 44px;
+  width: 100%;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--field);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+/* A select draws its own chevron, the same in every browser and theme: two gradients that meet
+ * in a V, in the text's colour, 12px in from the right edge. Gradients are CSS, not images, so
+ * the CSP's `img-src 'self'` has nothing to refuse. The right padding keeps the value clear of
+ * it. */
+select {
+  appearance: none;
+  min-height: 40px;
+  padding: 0 calc(var(--space-3) + 20px) 0 var(--space-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background-color: var(--field);
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--text) 50%),
+    linear-gradient(135deg, var(--text) 50%, transparent 50%);
+  background-position:
+    right calc(var(--space-3) + 5px) center,
+    right var(--space-3) center;
+  background-repeat: no-repeat;
+  background-size: 5px 5px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+
+input[aria-invalid="true"] {
+  border-color: var(--status-error);
+}
+
+.hint {
+  margin: 0 0 var(--space-2);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+
+.refusal {
+  margin: 0 0 var(--space-2);
+  color: var(--status-error);
+  font-size: var(--text-sm);
+  font-weight: 500;
+}
+
+
+.skip-link {
+  position: absolute;
+  left: var(--space-2);
+  top: -100px;
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg);
+  border: 1px solid var(--accent-text);
+  z-index: 10;
+}
+
+.skip-link:focus {
+  top: var(--space-2);
+}
+
+
+/* A label: mono, uppercase, letter-spaced. The capitals are CSS, so the text stays as written. */
+.ds-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+:root {
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --duration-move: 220ms;
+  --slot-leased: #3f3f3b;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --slot-leased: #d6d6d0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration: 0ms;
+    --duration-move: 0ms;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+  }
+}
diff --git a/ui/src/ds/icon.tsx b/ui/src/ds/icon.tsx
new file mode 100644
index 000000000..085dbe364
--- /dev/null
+++ b/ui/src/ds/icon.tsx
@@ -0,0 +1,34 @@
+const PATHS = {
+  overview: "M2 2h5v5H2zM9 2h5v5H9zM2 9h5v5H2zM9 9h5v5H9z",
+  workers: "M2 3h12v4H2zM2 9h12v4H2zM5 5h.01M5 11h.01",
+  leases: "M10 2a4 4 0 1 1-3.5 6L2 12.5V14h2v-1.5h1.5V11h1.5l1-1",
+  waiting: "M2 4h12M2 8h9M2 12h6",
+  attention: "M8 2l6.5 11.5h-13zM8 6.5v3M8 11.5v.01",
+  events: "M1.5 8h3l2-5 3 10 2-5h3",
+  collapse: "M2 2.5h12v11H2zM6 2.5v11M11.5 6L9.5 8l2 2",
+  expand: "M2 2.5h12v11H2zM6 2.5v11M9.5 6l2 2-2 2",
+  menu: "M2 4h12M2 8h12M2 12h12",
+  close: "M3 3l10 10M13 3L3 13",
+  signOut: "M6 2.5H2.5v11H6M10 5l3 3-3 3M13 8H6",
+  device: "M5 1.5h6v13H5zM7.5 12.5h1",
+} as const;
+
+export type IconName = keyof typeof PATHS;
+
+export function Icon({ name }: { readonly name: IconName }) {
+  return (
+    <svg
+      className="icon"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d={PATHS[name]} />
+    </svg>
+  );
+}
diff --git a/ui/src/ds/index.ts b/ui/src/ds/index.ts
new file mode 100644
index 000000000..e023e1ed1
--- /dev/null
+++ b/ui/src/ds/index.ts
@@ -0,0 +1,27 @@
+import "./foundation.css";
+
+export { Button, ButtonLink, type ButtonVariant } from "./button";
+export { MinuteChart, type MinuteCount, MinuteTable } from "./chart";
+export { type Choice, ChoiceChips, type Tab, Tabs } from "./choice";
+export { type Fact, Facts } from "./facts";
+export { Icon, type IconName } from "./icon";
+export { Link, type LinkProps, NavigationProvider } from "./link";
+export { Loaded, type LoadView, Refusal } from "./loaded";
+export {
+  type Crumb,
+  Inspector,
+  InspectorEmpty,
+  List,
+  ListPane,
+  ListRow,
+  type ListRowProps,
+  MasterDetail,
+} from "./master-detail";
+export { Meter } from "./meter";
+export { Pager, type Paging } from "./pager";
+export { Card, Empty, Grid, Id, Panel, Row } from "./panel";
+export { AppFrame, type NavEntry, Page, Sidebar, Wordmark } from "./sidebar";
+export { type Share, ShareBar, type Slot, type SlotKind, SlotLegend, Slots } from "./slots";
+export { StatRow, StatTile, type StatTileProps } from "./stat";
+export { Status, StatusDot, type Tone } from "./status";
+export { type Column, DataTable } from "./table";
diff --git a/ui/src/router.test.ts b/ui/src/ds/link.test.ts
similarity index 80%
rename from ui/src/router.test.ts
rename to ui/src/ds/link.test.ts
index 030c4648b..ca66005a5 100644
--- a/ui/src/router.test.ts
+++ b/ui/src/ds/link.test.ts
@@ -1,13 +1,12 @@
 import { describe, expect, it } from "vitest";
 
-import { opensInThisTab } from "./router";
+import { opensInThisTab } from "./link";
 
 const plain = { altKey: false, button: 0, ctrlKey: false, metaKey: false, shiftKey: false };
 
 describe("opensInThisTab", () => {
   it("handles a plain primary click in the console, and leaves every other click to the browser", () => {
     expect(opensInThisTab(plain)).toBe(true);
-    // A middle click, or a click with a modifier, opens a new tab or window as it always does.
     expect(opensInThisTab({ ...plain, button: 1 })).toBe(false);
     for (const key of ["altKey", "ctrlKey", "metaKey", "shiftKey"] as const) {
       expect(opensInThisTab({ ...plain, [key]: true }), key).toBe(false);
diff --git a/ui/src/ds/link.tsx b/ui/src/ds/link.tsx
new file mode 100644
index 000000000..d07cc408e
--- /dev/null
+++ b/ui/src/ds/link.tsx
@@ -0,0 +1,45 @@
+import {
+  type AnchorHTMLAttributes,
+  createContext,
+  type MouseEvent,
+  type ReactNode,
+  useContext,
+} from "react";
+
+type Navigate = (to: string) => void;
+
+// why: the design system knows nothing of the console's router; the app hands it the one way to
+// move between pages, so a link here navigates without a reload wherever it is drawn.
+const NavigateContext = createContext<Navigate | undefined>(undefined);
+
+export function NavigationProvider(props: {
+  readonly navigate: Navigate;
+  readonly children: ReactNode;
+}) {
+  return (
+    <NavigateContext.Provider value={props.navigate}>{props.children}</NavigateContext.Provider>
+  );
+}
+
+const MODIFIER_KEYS = ["altKey", "ctrlKey", "metaKey", "shiftKey"] as const;
+
+type ClickKeys = Pick<MouseEvent, "button" | (typeof MODIFIER_KEYS)[number]>;
+
+export function opensInThisTab(event: ClickKeys): boolean {
+  return event.button === 0 && !MODIFIER_KEYS.some((key) => event[key]);
+}
+
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  readonly to: string;
+}
+
+export function Link({ onClick, to, ...rest }: LinkProps) {
+  const navigate = useContext(NavigateContext);
+  const follow = (event: MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(event);
+    if (navigate === undefined || !opensInThisTab(event)) return;
+    event.preventDefault();
+    navigate(to);
+  };
+  return <a {...rest} href={to} onClick={follow} />;
+}
diff --git a/ui/src/ds/loaded.tsx b/ui/src/ds/loaded.tsx
new file mode 100644
index 000000000..b9f40154e
--- /dev/null
+++ b/ui/src/ds/loaded.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export type LoadView<T> =
+  | { readonly kind: "loading" }
+  | { readonly kind: "unsupported" }
+  | { readonly kind: "refused"; readonly message: string }
+  | { readonly kind: "ready"; readonly data: T; readonly refusal?: string };
+
+// why: a refusal after earlier answers shows above the data kept from them, so an operator never
+// loses what they were reading to a passing error.
+export function Loaded<T>(props: {
+  readonly view: LoadView<T>;
+  readonly children: (data: T) => ReactNode;
+}) {
+  const { children, view } = props;
+  if (view.kind === "loading") return <p className="muted loaded-note">Loading…</p>;
+  if (view.kind === "unsupported") {
+    return <p className="muted loaded-note">Not available on a single host.</p>;
+  }
+  if (view.kind === "refused") return <Refusal message={view.message} />;
+  return (
+    <>
+      {view.refusal === undefined ? null : <Refusal message={view.refusal} />}
+      {children(view.data)}
+    </>
+  );
+}
+
+export function Refusal({ message }: { readonly message: string }) {
+  return (
+    <p className="refusal" role="alert">
+      {message}
+    </p>
+  );
+}
diff --git a/ui/src/ds/master-detail.css b/ui/src/ds/master-detail.css
new file mode 100644
index 000000000..8417efde4
--- /dev/null
+++ b/ui/src/ds/master-detail.css
@@ -0,0 +1,231 @@
+/* A list on the left, the chosen item on the right. Below 768px only one of them shows. */
+
+.master-detail {
+  display: grid;
+  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.master-wide {
+  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
+}
+
+.list-pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-right: 1px solid var(--border);
+  animation: enter-left var(--duration-move) var(--ease) both;
+}
+
+.list-head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-4) var(--space-3);
+  border-bottom: 1px solid var(--border);
+}
+
+.list-title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.list-title h1 {
+  flex: 1;
+  font-size: var(--text-lg);
+}
+
+.list-meta {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+
+.list-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.list-foot {
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--border);
+}
+
+.list-foot .pager {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.list-foot .pager-steps {
+  margin-left: 0;
+  justify-content: space-between;
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.list-row {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--duration),
+    box-shadow var(--duration-move) var(--ease);
+}
+
+.list-row:hover {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.list-row[aria-current="page"] {
+  background: var(--surface);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.list-lead {
+  display: inline-flex;
+}
+
+.list-row-title {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+}
+
+.list-aside,
+.list-trail {
+  justify-self: end;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.list-sub {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+}
+
+.inspector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+  padding: var(--space-4) var(--space-6) var(--space-12);
+  animation: enter-right var(--duration-move) var(--ease) both;
+}
+
+.inspector-empty {
+  justify-content: center;
+  align-items: center;
+}
+
+.crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.crumb + .crumb::before {
+  content: "/";
+  margin-right: var(--space-2);
+}
+
+.inspector-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.inspector-heading {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.inspector-title {
+  font-size: var(--text-xl);
+  overflow-wrap: anywhere;
+}
+
+.inspector-title.mono {
+  font-size: var(--text-lg);
+  font-weight: 500;
+}
+
+.inspector-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+
+.inspector-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.inspector-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+@keyframes enter-left {
+  from {
+    opacity: 0;
+    transform: translateX(-18px);
+  }
+}
+
+@keyframes enter-right {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .master-detail {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .focus-list > .inspector,
+  .focus-detail > .list-pane {
+    display: none;
+  }
+
+  .list-pane {
+    border-right: 0;
+  }
+
+  .inspector {
+    padding: var(--space-4) var(--space-4) var(--space-12);
+  }
+}
diff --git a/ui/src/ds/master-detail.tsx b/ui/src/ds/master-detail.tsx
new file mode 100644
index 000000000..d873c4a74
--- /dev/null
+++ b/ui/src/ds/master-detail.tsx
@@ -0,0 +1,137 @@
+import "./master-detail.css";
+
+import { type ReactNode, useId } from "react";
+
+import { Link } from "./link";
+
+// why: below 768px there is room for one pane, so the page shows the list until something is
+// chosen and the inspector after; `focus` says which, from the URL, so back returns to the list.
+export function MasterDetail(props: {
+  readonly focus: "list" | "detail";
+  readonly list: ReactNode;
+  readonly detail: ReactNode;
+  readonly wide?: boolean;
+}) {
+  const { detail, focus, list, wide = false } = props;
+  return (
+    <div className={`master-detail focus-${focus}${wide ? " master-wide" : ""}`}>
+      {list}
+      {detail}
+    </div>
+  );
+}
+
+export function ListPane(props: {
+  readonly title: string;
+  readonly meta?: ReactNode;
+  readonly toolbar?: ReactNode;
+  readonly footer?: ReactNode;
+  readonly children: ReactNode;
+}) {
+  const { children, footer, meta, title, toolbar } = props;
+  const id = useId();
+  return (
+    <section className="list-pane" aria-labelledby={id}>
+      <header className="list-head">
+        <div className="list-title">
+          <h1 id={id}>{title}</h1>
+          {meta === undefined ? null : <span className="list-meta">{meta}</span>}
+        </div>
+        {toolbar}
+      </header>
+      <div className="list-body">{children}</div>
+      {footer === undefined ? null : <div className="list-foot">{footer}</div>}
+    </section>
+  );
+}
+
+export function List({
+  label,
+  children,
+}: {
+  readonly label: string;
+  readonly children: ReactNode;
+}) {
+  return (
+    <ul className="list" aria-label={label}>
+      {children}
+    </ul>
+  );
+}
+
+export interface ListRowProps {
+  readonly to: string;
+  readonly selected: boolean;
+  readonly title: ReactNode;
+  readonly lead?: ReactNode;
+  readonly aside?: ReactNode;
+  readonly sub?: ReactNode;
+  readonly trail?: ReactNode;
+  readonly mono?: boolean;
+}
+
+export function ListRow(props: ListRowProps) {
+  const { aside, lead, mono = false, selected, sub, title, to, trail } = props;
+  return (
+    <li className="list-item">
+      <Link to={to} className="list-row" aria-current={selected ? "page" : undefined}>
+        <span className="list-lead">{lead}</span>
+        <span className={mono ? "list-row-title mono" : "list-row-title"}>{title}</span>
+        <span className="list-aside">{aside}</span>
+        {sub === undefined && trail === undefined ? null : (
+          <>
+            <span />
+            <span className="list-sub">{sub}</span>
+            <span className="list-trail">{trail}</span>
+          </>
+        )}
+      </Link>
+    </li>
+  );
+}
+
+export interface Crumb {
+  readonly label: string;
+  readonly to?: string;
+}
+
+export function Inspector(props: {
+  readonly crumbs: readonly Crumb[];
+  readonly title: ReactNode;
+  readonly mono?: boolean;
+  readonly line?: ReactNode;
+  readonly actions?: ReactNode;
+  readonly children: ReactNode;
+}) {
+  const { actions, children, crumbs, line, mono = false, title } = props;
+  const id = useId();
+  return (
+    <section className="inspector" aria-labelledby={id}>
+      <nav className="crumbs" aria-label="Breadcrumb">
+        {crumbs.map((crumb, index) => (
+          <span key={`${crumb.label}-${index}`} className="crumb">
+            {crumb.to === undefined ? crumb.label : <Link to={crumb.to}>{crumb.label}</Link>}
+          </span>
+        ))}
+      </nav>
+      <header className="inspector-head">
+        <div className="inspector-heading">
+          <h2 id={id} className={mono ? "inspector-title mono" : "inspector-title"}>
+            {title}
+          </h2>
+          {line === undefined ? null : <p className="inspector-line">{line}</p>}
+        </div>
+        {actions === undefined ? null : <div className="inspector-actions">{actions}</div>}
+      </header>
+      <div className="inspector-body">{children}</div>
+    </section>
+  );
+}
+
+export function InspectorEmpty({ children }: { readonly children: ReactNode }) {
+  return (
+    <section className="inspector inspector-empty">
+      <p className="muted">{children}</p>
+    </section>
+  );
+}
diff --git a/ui/src/ds/meter.css b/ui/src/ds/meter.css
new file mode 100644
index 000000000..56cd7227b
--- /dev/null
+++ b/ui/src/ds/meter.css
@@ -0,0 +1,58 @@
+/* Load gauges: how full one machine figure is, as a bar in a line of its own under the figure
+ * it belongs to. Every colour comes from here by class, so both themes apply (ADR 0011 §4); only
+ * the level arrives inline, which the Content-Security-Policy allows (style-src governs style
+ * elements, not style attributes). A gauge only shades what its figure already says, so it is
+ * square, quiet, and never the accent. */
+
+.load-figure {
+  display: grid;
+  gap: var(--space-1);
+}
+
+/* why: the bar stops where a reading is readable rather than filling the panel — a full-width
+ * band would outweigh the one line of text it shades. */
+.load-bar {
+  display: block;
+  height: 8px;
+  max-width: 20rem;
+  background: var(--field);
+}
+
+/* why: a new reading lands every 15 seconds, so the fill slides to its level over --duration
+ * rather than jumping; --duration is already zero under `prefers-reduced-motion: reduce`. Moving
+ * the width costs 0.13ms of layout per change, measured, and no long task either way. */
+.load-bar-fill {
+  display: block;
+  height: 100%;
+  width: var(--load-bar, 0%);
+  transition: width var(--duration);
+}
+
+.load-bar-ok .load-bar-fill {
+  background: var(--status-ok);
+}
+
+.load-bar-warn .load-bar-fill {
+  background: var(--status-warn);
+}
+
+.load-bar-error .load-bar-fill {
+  background: var(--status-error);
+}
+
+.load-bar-idle .load-bar-fill {
+  background: var(--status-idle);
+}
+
+.load-bar-neutral .load-bar-fill {
+  background: var(--slot-leased);
+}
+
+.meter-thin {
+  height: 4px;
+  max-width: none;
+}
+
+.meter-regular {
+  max-width: none;
+}
diff --git a/ui/src/ds/meter.tsx b/ui/src/ds/meter.tsx
new file mode 100644
index 000000000..5e1c085ef
--- /dev/null
+++ b/ui/src/ds/meter.tsx
@@ -0,0 +1,25 @@
+import "./meter.css";
+
+import type { CSSProperties } from "react";
+
+import type { Tone } from "./status";
+
+// why: a meter only shades a figure printed beside it, so it has no accessible name of its own;
+// the level arrives as a custom property, which the CSP allows where a style attribute is not.
+export function Meter(props: {
+  readonly percent: number;
+  readonly tone: Tone | "neutral";
+  readonly size?: "thin" | "regular";
+}) {
+  const { percent, size = "regular", tone } = props;
+  const level = `${Math.max(0, Math.min(100, percent))}%`;
+  return (
+    <span
+      className={`load-bar load-bar-${tone} meter-${size}`}
+      aria-hidden="true"
+      style={{ "--load-bar": level } as CSSProperties}
+    >
+      <span className="load-bar-fill" />
+    </span>
+  );
+}
diff --git a/ui/src/ds/pager.css b/ui/src/ds/pager.css
new file mode 100644
index 000000000..b2c544d12
--- /dev/null
+++ b/ui/src/ds/pager.css
@@ -0,0 +1,50 @@
+/* The pager under a long list: which rows show of how many, the page size, and previous and
+ * next with the page number between them. Under a table it runs edge to edge, with a line above
+ * it like a row's. */
+
+.pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+}
+
+.pager-range {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.pager-size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.pager-steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+  margin-left: auto;
+}
+
+.pager-page {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.panel-body > .pager,
+.panel-body > .panel-footer {
+  margin: var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-4));
+  padding: var(--space-3) var(--space-6);
+  border-top: 1px solid var(--border);
+}
+
+.panel-footer {
+  font-size: var(--text-sm);
+}
diff --git a/ui/src/ds/pager.tsx b/ui/src/ds/pager.tsx
new file mode 100644
index 000000000..e9196e715
--- /dev/null
+++ b/ui/src/ds/pager.tsx
@@ -0,0 +1,60 @@
+import "./pager.css";
+
+import { Button } from "./button";
+
+export interface Paging {
+  readonly page: number;
+  readonly size: number;
+  readonly last: number;
+  readonly total: number;
+  readonly sizes: readonly number[];
+  readonly range: string;
+  readonly go: (page: number) => void;
+  readonly resize: (size: number) => void;
+}
+
+// why: at either end the button that would leave the list stays in place and keeps focus for a
+// keyboard, saying it is unavailable rather than vanishing.
+export function Pager(props: { readonly label: string; readonly paging: Paging }) {
+  const { label, paging } = props;
+  const { go, last, page, range, resize, size, sizes, total } = paging;
+  if (total <= size) return null;
+  const first = page <= 1;
+  const end = page >= last;
+  return (
+    <nav className="pager" aria-label={`${label} pages`}>
+      <p className="pager-range">{range}</p>
+      <label className="pager-size">
+        Per page
+        <select value={size} onChange={(event) => resize(Number(event.currentTarget.value))}>
+          {sizes.map((size) => (
+            <option key={size} value={size}>
+              {size}
+            </option>
+          ))}
+        </select>
+      </label>
+      <div className="pager-steps">
+        <Button
+          aria-disabled={first}
+          onClick={() => {
+            if (!first) go(page - 1);
+          }}
+        >
+          Previous
+        </Button>
+        <span className="pager-page">
+          Page {page} of {last}
+        </span>
+        <Button
+          aria-disabled={end}
+          onClick={() => {
+            if (!end) go(page + 1);
+          }}
+        >
+          Next
+        </Button>
+      </div>
+    </nav>
+  );
+}
diff --git a/ui/src/ds/panel.css b/ui/src/ds/panel.css
new file mode 100644
index 000000000..6e67f4227
--- /dev/null
+++ b/ui/src/ds/panel.css
@@ -0,0 +1,98 @@
+/* Panels: a card with a title and actions over its body. A table, a chart or a list sits in one. */
+
+.panel,
+.card {
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.card {
+  padding: var(--space-4);
+}
+
+.panel {
+  position: relative;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 52px;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-title {
+  flex: 1;
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.panel-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--text-sm);
+}
+
+.panel-body {
+  padding: var(--space-4);
+}
+
+.panel-flush > .panel-body {
+  padding: 0;
+}
+
+.grid {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.grid-sm {
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+.grid-md {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.grid-lg {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.row {
+  display: grid;
+  gap: var(--space-3);
+  align-items: start;
+}
+
+@media (min-width: 1024px) {
+  .row {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  }
+
+  .row-even {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+
+.empty {
+  margin: 0;
+  padding: var(--space-4);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+
+.id {
+  display: inline-block;
+  max-width: min(100%, 16rem);
+  overflow: hidden;
+  font-family: var(--font-mono);
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
diff --git a/ui/src/ds/panel.tsx b/ui/src/ds/panel.tsx
new file mode 100644
index 000000000..95f32cd2a
--- /dev/null
+++ b/ui/src/ds/panel.tsx
@@ -0,0 +1,69 @@
+import "./panel.css";
+
+import { type ReactNode, useId } from "react";
+
+// why: a panel is a region named by its title, so a screen reader can jump straight to it.
+export function Panel(props: {
+  readonly title: string;
+  readonly actions?: ReactNode;
+  readonly flush?: boolean;
+  readonly level?: 1 | 2;
+  readonly className?: string;
+  readonly children: ReactNode;
+}) {
+  const { actions, children, className, flush = false, level = 2, title } = props;
+  const Heading = level === 1 ? "h1" : "h2";
+  const id = useId();
+  const classes = ["panel", flush ? "panel-flush" : undefined, className].filter(Boolean).join(" ");
+  return (
+    <section className={classes} aria-labelledby={id}>
+      <header className="panel-header">
+        <Heading id={id} className="panel-title">
+          {title}
+        </Heading>
+        {actions === undefined ? null : <div className="panel-actions">{actions}</div>}
+      </header>
+      <div className="panel-body">{children}</div>
+    </section>
+  );
+}
+
+export function Card(props: { readonly className?: string; readonly children: ReactNode }) {
+  const { children, className } = props;
+  return <div className={className === undefined ? "card" : `card ${className}`}>{children}</div>;
+}
+
+export function Grid(props: {
+  readonly min?: "sm" | "md" | "lg";
+  readonly children: ReactNode;
+  readonly label?: string;
+}) {
+  const { children, label, min = "md" } = props;
+  return (
+    <div
+      className={`grid grid-${min}`}
+      role={label === undefined ? undefined : "group"}
+      aria-label={label}
+    >
+      {children}
+    </div>
+  );
+}
+
+// why: the main panel takes two shares and its neighbour one, and they stack on a phone; a row
+// laid out here keeps every page's proportions the same.
+export function Row(props: { readonly children: ReactNode; readonly even?: boolean }) {
+  return <div className={props.even === true ? "row row-even" : "row"}>{props.children}</div>;
+}
+
+export function Empty({ children }: { readonly children: ReactNode }) {
+  return <p className="empty">{children}</p>;
+}
+
+export function Id({ children }: { readonly children: string }) {
+  return (
+    <span className="id" title={children}>
+      {children}
+    </span>
+  );
+}
diff --git a/ui/src/ds/sidebar.css b/ui/src/ds/sidebar.css
new file mode 100644
index 000000000..a2a5e045d
--- /dev/null
+++ b/ui/src/ds/sidebar.css
@@ -0,0 +1,333 @@
+/* The app frame: the sidebar on the left, the page beside it. On a phone the sidebar is a bar on
+ * top with a menu button. */
+
+.app-frame {
+  display: flex;
+  min-height: 100vh;
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-main:focus {
+  outline: none;
+}
+
+.wordmark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 var(--space-2);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--text-md);
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.wordmark-short {
+  width: 32px;
+  padding: 0;
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex: 0 0 232px;
+  flex-direction: column;
+  gap: var(--space-6);
+  width: 232px;
+  height: 100vh;
+  padding: var(--space-4) var(--space-3);
+  overflow: hidden;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  transition:
+    flex-basis var(--duration-move) var(--ease),
+    width var(--duration-move) var(--ease),
+    padding var(--duration-move) var(--ease);
+}
+
+.sidebar-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-2);
+}
+
+.sidebar-menu {
+  display: none;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 40px;
+  padding: 0 var(--space-3);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--duration),
+    color var(--duration);
+}
+
+.nav-item:hover {
+  background: var(--field);
+  color: var(--text);
+}
+
+.nav-item[aria-current="page"] {
+  background: var(--field);
+  color: var(--text);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.nav-item .icon {
+  flex: none;
+}
+
+.nav-item[aria-current="page"] .icon {
+  color: var(--accent-text);
+}
+
+.nav-label {
+  flex: 1;
+  overflow: hidden;
+  transition: opacity var(--duration);
+}
+
+.nav-count {
+  padding: 0 5px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.nav-count-alert {
+  border: 1px solid var(--border-strong);
+  color: var(--text);
+}
+
+.sidebar-foot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-top: auto;
+  padding: 0 var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  height: 32px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.sidebar-toggle .nav-label {
+  flex: 0 1 auto;
+}
+
+/* Collapsed: the labels take no width and the gaps close, so every icon sits on the centre line. */
+.sidebar-collapsed {
+  flex-basis: 64px;
+  width: 64px;
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+
+.sidebar-collapsed .sidebar-top,
+.sidebar-collapsed .sidebar-foot {
+  justify-content: center;
+  padding: 0;
+}
+
+.sidebar-collapsed .nav-item {
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+}
+
+.sidebar-collapsed .nav-label {
+  flex: 0 0 0;
+  max-width: 0;
+  opacity: 0;
+}
+
+.sidebar-collapsed .nav-count {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  padding: 0 3px;
+  background: var(--bg);
+  font-size: 10px;
+  line-height: 13px;
+}
+
+.sidebar-collapsed .nav-count:not(.nav-count-alert) {
+  display: none;
+}
+
+.sidebar-collapsed .sidebar-toggle {
+  gap: 0;
+}
+
+@media (max-width: 767.98px) {
+  .app-frame {
+    flex-direction: column;
+  }
+
+  .sidebar,
+  .sidebar-collapsed {
+    position: sticky;
+    z-index: 5;
+    flex: none;
+    width: 100%;
+    height: auto;
+    padding: var(--space-3) var(--space-4);
+    gap: var(--space-3);
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sidebar-top {
+    padding: 0;
+  }
+
+  .sidebar-menu {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--border-strong);
+    background: transparent;
+    color: var(--text);
+    cursor: pointer;
+  }
+
+  .sidebar-nav,
+  .sidebar-foot {
+    display: none;
+  }
+
+  .sidebar-open .sidebar-nav,
+  .sidebar-open .sidebar-foot {
+    display: flex;
+  }
+
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .sidebar-collapsed .nav-item {
+    justify-content: flex-start;
+    gap: var(--space-3);
+    padding: 0 var(--space-3);
+  }
+
+  .sidebar-collapsed .nav-label {
+    flex: 1;
+    max-width: none;
+    opacity: 1;
+  }
+
+  .sidebar-collapsed .sidebar-foot {
+    justify-content: flex-start;
+  }
+}
+
+/* A page that is not a list: the overview. */
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-8) var(--space-12);
+  animation: enter-up var(--duration-move) var(--ease) both;
+}
+
+.page-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.page-head h1 {
+  flex: 1;
+  font-size: var(--text-xl);
+}
+
+.page-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
+@keyframes enter-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .page {
+    padding: var(--space-4) var(--space-4) var(--space-12);
+  }
+}
+
+.connection {
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+  font-size: var(--text-sm);
+}
+
+.sign-out {
+  gap: var(--space-2);
+  min-height: 36px;
+}
+
+.sidebar-collapsed .sign-out {
+  gap: 0;
+  padding: 0;
+}
+
+.sidebar-collapsed .connection {
+  justify-content: center;
+}
diff --git a/ui/src/ds/sidebar.tsx b/ui/src/ds/sidebar.tsx
new file mode 100644
index 000000000..4429bbe9d
--- /dev/null
+++ b/ui/src/ds/sidebar.tsx
@@ -0,0 +1,128 @@
+import "./sidebar.css";
+
+import { type ReactNode, useState } from "react";
+
+import { Icon, type IconName } from "./icon";
+import { Link } from "./link";
+
+export interface NavEntry {
+  readonly to: string;
+  readonly label: string;
+  readonly icon: IconName;
+  readonly current: boolean;
+  readonly count?: number;
+  readonly alert?: boolean;
+}
+
+export function Wordmark({ short = false }: { readonly short?: boolean }) {
+  return (
+    <span className={short ? "wordmark wordmark-short" : "wordmark"}>
+      {short ? (
+        <>
+          <span aria-hidden="true">S</span>
+          <span className="visually-hidden">Simlock</span>
+        </>
+      ) : (
+        "Simlock"
+      )}
+    </span>
+  );
+}
+
+export function AppFrame(props: { readonly sidebar: ReactNode; readonly children: ReactNode }) {
+  return (
+    <div className="app-frame">
+      <a className="skip-link" href="#main">
+        Skip to content
+      </a>
+      {props.sidebar}
+      <main id="main" className="app-main" tabIndex={-1}>
+        {props.children}
+      </main>
+    </div>
+  );
+}
+
+// why: on a phone the sidebar folds into a bar with a menu button; `collapsed` is the operator's
+// own choice on a wide screen, kept by the app, and changing pages never changes it.
+export function Sidebar(props: {
+  readonly entries: readonly NavEntry[];
+  readonly collapsed: boolean;
+  readonly onToggle: () => void;
+  readonly footer: (collapsed: boolean) => ReactNode;
+}) {
+  const { collapsed, entries, footer, onToggle } = props;
+  const [menuOpen, setMenuOpen] = useState(false);
+  return (
+    <nav
+      className={`sidebar${collapsed ? " sidebar-collapsed" : ""}${menuOpen ? " sidebar-open" : ""}`}
+      aria-label="Console"
+    >
+      <div className="sidebar-top">
+        <Wordmark short={collapsed} />
+        <button
+          type="button"
+          className="sidebar-menu"
+          aria-expanded={menuOpen}
+          aria-label={menuOpen ? "Close menu" : "Open menu"}
+          onClick={() => setMenuOpen(!menuOpen)}
+        >
+          <Icon name={menuOpen ? "close" : "menu"} />
+        </button>
+      </div>
+      <ul className="sidebar-nav">
+        {entries.map((entry) => (
+          <li key={entry.to}>
+            <Link
+              to={entry.to}
+              className="nav-item"
+              aria-current={entry.current ? "page" : undefined}
+              title={collapsed ? entry.label : undefined}
+              onClick={() => setMenuOpen(false)}
+            >
+              <Icon name={entry.icon} />
+              <span className="nav-label">{entry.label}</span>
+              {entry.count === undefined || entry.count === 0 ? null : (
+                <span className={entry.alert === true ? "nav-count nav-count-alert" : "nav-count"}>
+                  {entry.count}
+                  <span className="visually-hidden">{entry.count === 1 ? " item" : " items"}</span>
+                </span>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <div className="sidebar-foot">
+        {footer(collapsed)}
+        <button
+          type="button"
+          className="sidebar-toggle"
+          aria-expanded={!collapsed}
+          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          onClick={onToggle}
+        >
+          <Icon name={collapsed ? "expand" : "collapse"} />
+          <span className="nav-label">Collapse</span>
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+export function Page(props: {
+  readonly title: string;
+  readonly actions?: ReactNode;
+  readonly children: ReactNode;
+}) {
+  const { actions, children, title } = props;
+  return (
+    <div className="page">
+      <header className="page-head">
+        <h1>{title}</h1>
+        {actions === undefined ? null : <div className="page-actions">{actions}</div>}
+      </header>
+      {children}
+    </div>
+  );
+}
diff --git a/ui/src/ds/slots.css b/ui/src/ds/slots.css
new file mode 100644
index 000000000..591a99617
--- /dev/null
+++ b/ui/src/ds/slots.css
@@ -0,0 +1,90 @@
+/* Slots: one square per device a worker can run, shaded by what the device is doing. */
+
+.slots {
+  display: flex;
+  min-width: 0;
+}
+
+.slots-sm {
+  gap: 2px;
+}
+
+.slots-sm .slot {
+  flex: 1 1 0;
+  min-width: 4px;
+  max-width: 9px;
+  height: 9px;
+}
+
+.slots-lg {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: var(--space-1);
+}
+
+.slots-lg .slot {
+  height: 22px;
+}
+
+.slot {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.slot-leased {
+  background: var(--slot-leased);
+}
+
+.slot-ready {
+  background: var(--status-ok);
+}
+
+.slot-busy {
+  background: var(--status-idle);
+}
+
+.slot-broken {
+  background: var(--status-error);
+}
+
+.slot-absent {
+  background: var(--status-warn);
+}
+
+.slot-free {
+  border: 1px dashed var(--border-strong);
+}
+
+.slot-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+.slot-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.slot-legend .slot {
+  width: 8px;
+  height: 8px;
+}
+
+.share-bar {
+  display: flex;
+  height: 10px;
+  background: var(--field);
+}
+
+.share {
+  display: block;
+  width: var(--share, 0%);
+  transition: width var(--duration-move) var(--ease);
+}
diff --git a/ui/src/ds/slots.tsx b/ui/src/ds/slots.tsx
new file mode 100644
index 000000000..7fab38af9
--- /dev/null
+++ b/ui/src/ds/slots.tsx
@@ -0,0 +1,69 @@
+import "./slots.css";
+
+import type { CSSProperties } from "react";
+
+export type SlotKind = "leased" | "ready" | "busy" | "broken" | "absent" | "free";
+
+export interface Slot {
+  readonly kind: SlotKind;
+  readonly label: string;
+}
+
+// why: every slot carries its word as a tooltip and in the group's text, so the colours are never
+// the only way to read a worker's devices.
+export function Slots(props: {
+  readonly slots: readonly Slot[];
+  readonly label: string;
+  readonly size?: "sm" | "lg";
+}) {
+  const { label, size = "sm", slots } = props;
+  return (
+    <span className={`slots slots-${size}`} role="img" aria-label={label}>
+      {slots.map((slot, index) => (
+        <span key={index} className={`slot slot-${slot.kind}`} title={slot.label} />
+      ))}
+    </span>
+  );
+}
+
+const LEGEND: readonly { readonly kind: SlotKind; readonly word: string }[] = [
+  { kind: "leased", word: "leased" },
+  { kind: "ready", word: "ready" },
+  { kind: "busy", word: "booting" },
+  { kind: "broken", word: "quarantined" },
+  { kind: "free", word: "free" },
+];
+
+export function SlotLegend() {
+  return (
+    <ul className="slot-legend" aria-hidden="true">
+      {LEGEND.map((entry) => (
+        <li key={entry.kind}>
+          <span className={`slot slot-${entry.kind}`} />
+          {entry.word}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface Share {
+  readonly kind: SlotKind;
+  readonly percent: number;
+}
+
+// why: the bar repeats figures printed beside it, so it is hidden from a screen reader; each share's
+// width arrives as a custom property, which the CSP allows where a style attribute is not.
+export function ShareBar({ shares }: { readonly shares: readonly Share[] }) {
+  return (
+    <span className="share-bar" aria-hidden="true">
+      {shares.map((share) => (
+        <span
+          key={share.kind}
+          className={`share slot-${share.kind}`}
+          style={{ "--share": `${Math.max(0, Math.min(100, share.percent))}%` } as CSSProperties}
+        />
+      ))}
+    </span>
+  );
+}
diff --git a/ui/src/ds/stat.css b/ui/src/ds/stat.css
new file mode 100644
index 000000000..f59475868
--- /dev/null
+++ b/ui/src/ds/stat.css
@@ -0,0 +1,62 @@
+/* Stat tiles: a mono label, a big number and a short unit beside it. */
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.stat {
+  min-width: 0;
+}
+
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  height: 100%;
+  padding: var(--space-3) var(--space-4) var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  text-decoration: none;
+  transition:
+    background-color var(--duration),
+    border-color var(--duration);
+}
+
+.stat-link:hover {
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+
+.stat-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.stat-line {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.stat-value {
+  font-size: var(--text-xl);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.stat-unit {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
diff --git a/ui/src/ds/stat.tsx b/ui/src/ds/stat.tsx
new file mode 100644
index 000000000..35eaedc7a
--- /dev/null
+++ b/ui/src/ds/stat.tsx
@@ -0,0 +1,54 @@
+import "./stat.css";
+
+import type { ReactNode } from "react";
+
+import { Link } from "./link";
+
+export interface StatTileProps {
+  readonly label: string;
+  readonly value: string;
+  readonly unit?: string;
+  readonly to?: string;
+  readonly children?: ReactNode;
+}
+
+// why: a tile that leads somewhere is a link as a whole, so the number itself is the target and
+// a screen reader hears label, value and unit as one name.
+export function StatTile(props: StatTileProps) {
+  const { children, label, to, unit, value } = props;
+  const body = (
+    <>
+      <span className="stat-label">{label}</span>
+      <span className="stat-line">
+        <span className="stat-value">{value}</span>
+        {unit === undefined ? null : <span className="stat-unit">{unit}</span>}
+      </span>
+      {children}
+    </>
+  );
+  return (
+    <li className="stat">
+      {to === undefined ? (
+        <div className="stat-body">{body}</div>
+      ) : (
+        <Link className="stat-body stat-link" to={to}>
+          {body}
+        </Link>
+      )}
+    </li>
+  );
+}
+
+export function StatRow({
+  label,
+  children,
+}: {
+  readonly label: string;
+  readonly children: ReactNode;
+}) {
+  return (
+    <ul className="stats" aria-label={label}>
+      {children}
+    </ul>
+  );
+}
diff --git a/ui/src/ds/status.css b/ui/src/ds/status.css
new file mode 100644
index 000000000..80ca76bea
--- /dev/null
+++ b/ui/src/ds/status.css
@@ -0,0 +1,35 @@
+/* A status: the daemon's word, with a square of its colour before it. Never the accent. */
+
+.status {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.status-dot {
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  align-self: center;
+}
+
+.status-ok .status-dot,
+.status-dot-ok {
+  background: var(--status-ok);
+}
+
+.status-warn .status-dot,
+.status-dot-warn {
+  background: var(--status-warn);
+}
+
+.status-error .status-dot,
+.status-dot-error {
+  background: var(--status-error);
+}
+
+.status-idle .status-dot,
+.status-dot-idle {
+  background: var(--status-idle);
+}
diff --git a/ui/src/ds/status.tsx b/ui/src/ds/status.tsx
new file mode 100644
index 000000000..7b90a0b12
--- /dev/null
+++ b/ui/src/ds/status.tsx
@@ -0,0 +1,23 @@
+import "./status.css";
+
+import type { ReactNode } from "react";
+
+// why: the colour is a second signal, never the only one, and never the accent.
+export type Tone = "ok" | "warn" | "error" | "idle";
+
+export function Status({ tone, children }: { readonly tone: Tone; readonly children: ReactNode }) {
+  return (
+    <span className={`status status-${tone}`}>
+      <span className="status-dot" aria-hidden="true" />
+      {children}
+    </span>
+  );
+}
+
+// why: where a row has no room for the word, the square stands alone and carries the word as its
+// accessible name and tooltip, so a screen reader and a pointer still read the state.
+export function StatusDot({ tone, label }: { readonly tone: Tone; readonly label: string }) {
+  return (
+    <span className={`status-dot status-dot-${tone}`} role="img" aria-label={label} title={label} />
+  );
+}
diff --git a/ui/src/ds/table.css b/ui/src/ds/table.css
new file mode 100644
index 000000000..adf4b01ec
--- /dev/null
+++ b/ui/src/ds/table.css
@@ -0,0 +1,183 @@
+/* Tables: a row per item, in a panel. Headers are labels, rows are roomy, numbers sit right.
+ * Under 768px each row stacks into labelled lines, so the page never scrolls sideways. */
+
+/* Fixed layout: the columns share the panel's width and a long cell wraps or is cut, so a table
+ * never grows wider than its panel. */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  table-layout: fixed;
+}
+
+.table th,
+.table td {
+  padding: var(--space-4) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  vertical-align: middle;
+  overflow-wrap: break-word;
+}
+
+.table th:first-child,
+.table td:first-child {
+  padding-left: var(--space-6);
+}
+
+.table th:last-child,
+.table td:last-child {
+  padding-right: var(--space-6);
+}
+
+.table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.table .mono {
+  overflow-wrap: break-word;
+}
+
+.table th {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+.table .num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.table th.num {
+  width: 8rem;
+}
+
+/* A table stacks its rows into labelled lines where its columns would be too narrow: every
+ * table under 768px, and a wide one, of six columns or more, under 1100px. */
+@media (max-width: 1099.98px) {
+  .table-wide thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .table-wide thead th {
+    white-space: normal;
+  }
+
+  .table-wide,
+  .table-wide tbody,
+  .table-wide tr {
+    display: block;
+  }
+
+  .table-wide tr {
+    padding: var(--space-3) var(--space-6);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .table-wide tbody tr:last-child {
+    border-bottom: 0;
+  }
+
+  .table-wide td,
+  .table-wide td:first-child,
+  .table-wide td:last-child {
+    display: grid;
+    grid-template-columns: 8rem minmax(0, 1fr);
+    gap: var(--space-3);
+    padding: var(--space-1) 0;
+    border: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .table-wide .mono {
+    overflow-wrap: anywhere;
+  }
+
+  .table-wide .num {
+    text-align: left;
+  }
+
+  .table-wide th.num {
+    width: auto;
+  }
+
+  .table-wide td::before {
+    content: attr(data-label);
+    color: var(--text-muted);
+    font-family: var(--font-sans);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .table thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .table thead th {
+    white-space: normal;
+  }
+
+  .table,
+  .table tbody,
+  .table tr {
+    display: block;
+  }
+
+  .table tr {
+    padding: var(--space-3) var(--space-6);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .table tbody tr:last-child {
+    border-bottom: 0;
+  }
+
+  .table td,
+  .table td:first-child,
+  .table td:last-child {
+    display: grid;
+    grid-template-columns: 8rem minmax(0, 1fr);
+    gap: var(--space-3);
+    padding: var(--space-1) 0;
+    border: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .table .mono {
+    overflow-wrap: anywhere;
+  }
+
+  .table .num {
+    text-align: left;
+  }
+
+  .table th.num {
+    width: auto;
+  }
+
+  .table td::before {
+    content: attr(data-label);
+    color: var(--text-muted);
+    font-family: var(--font-sans);
+  }
+}
+
+
+.table th {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+}
diff --git a/ui/src/table.tsx b/ui/src/ds/table.tsx
similarity index 53%
rename from ui/src/table.tsx
rename to ui/src/ds/table.tsx
index 6ba5026cb..9d14658f9 100644
--- a/ui/src/table.tsx
+++ b/ui/src/ds/table.tsx
@@ -1,9 +1,5 @@
-/**
- * The console's one table, built on `@tanstack/react-table`, with its pager under it. Every
- * table of a view's items is one of these: the rows come whole from the route the view reads,
- * and the table pages them in the browser. The page lives in the URL (see `pager.tsx`). A
- * chart's minute-by-minute table is not: it always has its 60 rows.
- */
+import "./table.css";
+
 import {
   createColumnHelper,
   createPaginatedRowModel,
@@ -14,17 +10,13 @@ import {
 } from "@tanstack/react-table";
 import type { ReactNode } from "react";
 
-import { Pager, usePaging } from "./pager";
-import { TABLE_SIZES } from "./paging";
+import { Pager, type Paging } from "./pager";
 
-/** One column: its header, and what each row shows in it. */
 export interface Column<T> {
   readonly header: string;
-  /** Called as the table draws, not mounted, so it calls no hook: a component it returns may. */
+  // why: called as the table draws, not mounted, so it calls no hook: a component it returns may.
   readonly cell: (row: T) => ReactNode;
-  /** A number or a duration: mono, and right-aligned where the table has columns. */
   readonly numeric?: boolean;
-  /** Mono, for what people copy or compare. */
   readonly mono?: boolean;
 }
 
@@ -33,47 +25,33 @@ const features = tableFeatures({
   rowPaginationFeature,
 });
 
-/**
- * `rows` as a table, a page at a time. Rows show in the order given: the table never sorts, so
- * a row moves only when the data moves it. `rowId` keeps each row's identity across refreshes.
- * Each cell carries its column's header as `data-label`, so on a phone the row stacks into
- * labelled lines. A `wide` table, of six columns or more, stacks below 1100px as well.
- */
 export function DataTable<T extends RowData>(props: {
-  /** Names the table's pager: the title of the panel it sits in. */
   readonly label: string;
   readonly rows: readonly T[];
   readonly columns: readonly Column<T>[];
   readonly rowId: (row: T) => string;
-  /** What to say instead of an empty table. */
   readonly empty: string;
-  /** Where the table keeps its page in the URL, when a page has more than one table. */
-  readonly name?: string;
+  readonly paging: Paging;
   readonly wide?: boolean;
   readonly className?: string;
 }) {
-  const { className, columns, empty, label, name, rowId, rows, wide = false } = props;
-  const paging = usePaging({
-    ...(name === undefined ? {} : { name }),
-    sizes: TABLE_SIZES,
-    total: rows.length,
-  });
-  // The table cuts out the page and keeps each row's id. It does not draw the cells: its
-  // `FlexRender` mounts a cell function as a component, a view builds its columns anew on every
-  // render, so each refresh would mount a new component, draw the cell's elements afresh and take
-  // the keyboard's focus off a link in it. Below, each cell's function is called instead.
+  const { className, columns, empty, label, paging, rowId, rows, wide = false } = props;
+  // why: `FlexRender` mounts a cell function as a component, and a view builds its columns anew on
+  // every render, so each refresh would mount a new component, draw the cell's elements afresh and
+  // take the keyboard's focus off a link in it. Each cell's function is called instead.
   const helper = createColumnHelper<typeof features, T>();
   const definitions = helper.columns(
     columns.map((column, index) => helper.display({ header: column.header, id: String(index) })),
   );
-  // The URL owns the page (`usePaging`), and the pager moves it; the table cuts out that page.
+  // why: the page belongs to whoever hands in `paging` (the URL, in the console); the table only
+  // cuts that page out of the rows.
   const table = useTable({
     autoResetPageIndex: false,
     columns: definitions,
     data: rows as T[],
     features,
     getRowId: (row) => rowId(row),
-    state: { pagination: { pageIndex: paging.at.page - 1, pageSize: paging.at.size } },
+    state: { pagination: { pageIndex: paging.page - 1, pageSize: paging.size } },
   });
   if (rows.length === 0) return <p className="muted">{empty}</p>;
   const classes = ["table", wide ? "table-wide" : undefined, className].filter(Boolean).join(" ");
diff --git a/ui/src/layout.tsx b/ui/src/layout.tsx
deleted file mode 100644
index b420f111f..000000000
--- a/ui/src/layout.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * The pieces every view is laid out with (docs/internal/DESIGN.md): a page header, a row of stat
- * cards, and panels, each a card with a header over a table, a chart or a list.
- */
-import { type ReactNode, useId } from "react";
-
-/** The wordmark in its orange block, and who makes it. The sign-in screen has it too. */
-export function Brand() {
-  return (
-    <span className="brand">
-      <span className="wordmark">Simlock</span>
-      <span className="chip">By Callstack</span>
-    </span>
-  );
-}
-
-/** A view's title, a one-line muted subtitle under it, and its actions on the right. */
-export function PageHeader(props: {
-  readonly title: ReactNode;
-  readonly subtitle?: ReactNode;
-  readonly actions?: ReactNode;
-  /** Set the title in mono, for a title that is an id. */
-  readonly mono?: boolean;
-}) {
-  const { actions, mono = false, subtitle, title } = props;
-  return (
-    <header className="page-header">
-      <div className="page-heading">
-        <h1 className={mono ? "mono" : undefined}>{title}</h1>
-        {subtitle === undefined ? null : <p className="page-subtitle">{subtitle}</p>}
-      </div>
-      {actions === undefined ? null : <div className="page-actions">{actions}</div>}
-    </header>
-  );
-}
-
-/** One stat card: a label, a big number, and a caption saying what the number counts. */
-export interface Stat {
-  readonly label: string;
-  readonly value: string;
-  readonly caption: string;
-}
-
-/** A row of stat cards. Each card's label, number and caption are read in that order. */
-export function StatCards({ stats }: { readonly stats: readonly Stat[] }) {
-  return (
-    <ul className="stats" aria-label="Summary">
-      {stats.map((stat) => (
-        <li key={stat.label} className="stat">
-          <p className="stat-label">{stat.label}</p>
-          <p className="stat-value">{stat.value}</p>
-          <p className="stat-caption">{stat.caption}</p>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-/**
- * A card with a header: a title, a description under it, and actions on the right. The panel
- * is a region named by its title, so a screen reader can jump to it.
- */
-export function Panel(props: {
-  readonly title: string;
-  readonly description?: ReactNode;
-  readonly actions?: ReactNode;
-  readonly className?: string;
-  readonly children: ReactNode;
-}) {
-  const { actions, children, className, description, title } = props;
-  const id = useId();
-  return (
-    <section
-      className={className === undefined ? "panel" : `panel ${className}`}
-      aria-labelledby={id}
-    >
-      <div className="panel-header">
-        <div>
-          <h2 id={id} className="panel-title">
-            {title}
-          </h2>
-          {description === undefined ? null : <p className="panel-description">{description}</p>}
-        </div>
-        {actions === undefined ? null : <div className="panel-actions">{actions}</div>}
-      </div>
-      <div className="panel-body">{children}</div>
-    </section>
-  );
-}
-
-/**
- * A long id (a lease's, a worker's, a device's) on one line, cut with an ellipsis where it does
- * not fit. The whole id is in its `title`, and in the text a screen reader and a copy read.
- */
-export function Id({ children }: { readonly children: string }) {
-  return (
-    <span className="id" title={children}>
-      {children}
-    </span>
-  );
-}
diff --git a/ui/src/live/connection-banner.tsx b/ui/src/live/connection-banner.tsx
deleted file mode 100644
index 45c8bbefa..000000000
--- a/ui/src/live/connection-banner.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Status, type Tone } from "../status";
-import type { ConnectionPhase, ConnectionState } from "./connection";
-import { useConnection, useNow } from "./live-context";
-import { formatDuration } from "./time";
-
-/**
- * What the console says about its connection (ADR 0013 §5). The phase is a live region; the
- * data's age beside it ticks every second, so it is left out of the region to keep a screen
- * reader from announcing every tick.
- */
-export function ConnectionBanner() {
-  const state = useConnection();
-  const now = useNow();
-  const { age, phase, tone } = describe(state, now.browser);
-  return (
-    <div className="connection">
-      <Status tone={tone}>
-        <span role="status">{phase}</span>
-        {age === undefined ? null : <span> — data from {age} ago</span>}
-      </Status>
-    </div>
-  );
-}
-
-const PHASES: Readonly<Record<ConnectionPhase, { readonly phase: string; readonly tone: Tone }>> = {
-  connected: { phase: "Connected", tone: "ok" },
-  disconnected: { phase: "Reconnecting", tone: "error" },
-  starting: { phase: "Daemon is starting", tone: "warn" },
-};
-
-/** The data's age shows only while reconnecting: starting, the daemon is about to answer. */
-function describe(
-  state: ConnectionState,
-  browserNow: number,
-): { readonly phase: string; readonly tone: Tone; readonly age?: string } {
-  const shown = PHASES[state.phase];
-  if (state.phase !== "disconnected" || state.answeredAt === undefined) return shown;
-  return { ...shown, age: formatDuration(browserNow - state.answeredAt) };
-}
diff --git a/ui/src/live/route-state.tsx b/ui/src/live/route-state.tsx
deleted file mode 100644
index f98174e94..000000000
--- a/ui/src/live/route-state.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { ReactNode } from "react";
-
-import { ApiError } from "../api";
-import type { ResourceState } from "./connection";
-
-/**
- * A view's data, or what to show instead: "Loading" before the first answer, and the daemon's
- * refusal when it refused. A refusal after earlier answers shows above the data kept from them.
- * A route a single host does not answer (`501` `UNSUPPORTED_IN_WORKER_MODE`) is not an error
- * there: the view says it is not available, in place of its content.
- */
-export function Loaded<T>(props: {
-  readonly state: ResourceState<T>;
-  readonly children: (data: T) => ReactNode;
-}) {
-  const { children, state } = props;
-  const { data, error } = state;
-  if (isUnsupportedHere(error)) return <p className="muted">Not available on a single host.</p>;
-  if (data === undefined) {
-    return error === undefined ? <p className="muted">Loading…</p> : <Refusal error={error} />;
-  }
-  return (
-    <>
-      {error === undefined ? null : <Refusal error={error} />}
-      {children(data)}
-    </>
-  );
-}
-
-function isUnsupportedHere(error: unknown): boolean {
-  return (
-    error instanceof ApiError && error.status === 501 && error.code === "UNSUPPORTED_IN_WORKER_MODE"
-  );
-}
-
-function Refusal({ error }: { readonly error: unknown }) {
-  const message =
-    error instanceof ApiError ? error.message : "The daemon's answer could not be read.";
-  return (
-    <p className="refusal" role="alert">
-      {message}
-    </p>
-  );
-}
diff --git a/ui/src/live/time.ts b/ui/src/live/time.ts
deleted file mode 100644
index 77c839a7d..000000000
--- a/ui/src/live/time.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Times the console shows are counted in the browser from the timestamps in the data
- * (ADR 0013 §4). The browser's clock may differ from the daemon's, so every duration is measured
- * against the daemon's time: the browser's own, plus the offset the latest `Date` header showed.
- */
-
-/**
- * How far the daemon's clock is ahead of the browser's, in milliseconds, from a response's
- * `Date` header and the browser time it arrived at. `undefined` when the header is missing or
- * not a date, so a bad header leaves the last good offset in place.
- */
-export function clockOffset(date: string | null, receivedAt: number): number | undefined {
-  if (date === null) return undefined;
-  const sent = Date.parse(date);
-  return Number.isFinite(sent) ? sent - receivedAt : undefined;
-}
-
-const SECOND = 1_000;
-const MINUTE = 60 * SECOND;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-
-/**
- * A duration the way the console writes one: the largest two units, rounded down, such as
- * `12 s`, `4 min 5 s`, `3 h 20 min`, `2 d 1 h`. A negative duration, which a skewed timestamp
- * can produce, shows as `0 s`.
- */
-export function formatDuration(ms: number): string {
-  const total = Math.max(0, Math.floor(ms / SECOND)) * SECOND;
-  if (total < MINUTE) return `${total / SECOND} s`;
-  const units: readonly [number, string][] = [
-    [DAY, "d"],
-    [HOUR, "h"],
-    [MINUTE, "min"],
-    [SECOND, "s"],
-  ];
-  const first = units.findIndex(([size]) => total >= size);
-  const parts: string[] = [];
-  let rest = total;
-  for (const [size, name] of units.slice(first, first + 2)) {
-    const count = Math.floor(rest / size);
-    rest -= count * size;
-    if (count > 0 || parts.length === 0) parts.push(`${count} ${name}`);
-  }
-  return parts.join(" ");
-}
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index d09569969..20bd299a4 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -1,22 +1,23 @@
 import "@fontsource-variable/geist";
 import "@fontsource-variable/geist-mono";
-import "./styles.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import { createApiClient, type Fetch } from "./api";
-import { App } from "./app";
-import { createSession } from "./session";
+import { App } from "./app/app";
+import { createApiClient, type Fetch } from "./data/api";
+import { createPreferences } from "./data/preferences";
+import { createSession } from "./data/session";
 
 const fetch: Fetch = (input, init) => window.fetch(input, init);
 const session = createSession(() => window.sessionStorage);
+const preferences = createPreferences(() => window.localStorage);
 const api = createApiClient({ fetch, signOut: session.signOut, token: session.token });
 
 const root = document.getElementById("root");
 if (root === null) throw new Error("The console page has no #root element");
 createRoot(root).render(
   <StrictMode>
-    <App api={api} fetch={fetch} session={session} />
+    <App api={api} fetch={fetch} preferences={preferences} session={session} />
   </StrictMode>,
 );
diff --git a/ui/src/model/activity.test.ts b/ui/src/model/activity.test.ts
new file mode 100644
index 000000000..f17bd7c27
--- /dev/null
+++ b/ui/src/model/activity.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+
+import { eventSummary, eventTone } from "./activity";
+import type { ConsoleEvent } from "./events";
+import type { WorkerView } from "./workers";
+
+const studio = {
+  catalog: [],
+  connection: "connected",
+  devices: [
+    {
+      id: "dev_1",
+      mode: "full",
+      physical: false,
+      spec: { model: "Pixel 8", osVersion: "35", physical: false, platform: "android" },
+      state: "leased",
+    },
+  ],
+  drained: false,
+  id: "wrk_studio",
+  label: "mac-studio-01",
+  lastSeenAt: 0,
+  leases: [],
+} as unknown as WorkerView;
+
+function event(name: string, payload: unknown): ConsoleEvent {
+  return { event: name, id: "e1", payload, seq: 1, timestamp: 0 };
+}
+
+describe("an event's one-line summary", () => {
+  it("names who, which device and where, from the fields the payload has", () => {
+    const granted = event("lease.granted", {
+      deviceId: "dev_1",
+      requester: "claude-ios-4",
+      workerId: "wrk_studio",
+    });
+
+    expect(eventSummary(granted, [studio])).toBe("claude-ios-4 · Pixel 8 35 · mac-studio-01");
+  });
+
+  it("falls back to the event's name when the payload names nothing it knows", () => {
+    expect(eventSummary(event("daemon.started", { pid: 4 }), [studio])).toBe("daemon.started");
+    expect(eventSummary(event("daemon.started", "text"), [])).toBe("daemon.started");
+  });
+
+  it("keeps a device id it cannot place out of the line rather than guessing", () => {
+    const reclaimed = event("device.reclaimed", { deviceId: "dev_gone", reason: "erase" });
+
+    expect(eventSummary(reclaimed, [studio])).toBe("erase");
+  });
+});
+
+describe("an event's tone", () => {
+  it("is red for trouble, yellow for a warning, and none for an ordinary event", () => {
+    expect(eventTone("device.quarantined")).toBe("error");
+    expect(eventTone("worker.disconnected")).toBe("error");
+    expect(eventTone("lease.expired")).toBe("warn");
+    expect(eventTone("worker.drain-started")).toBe("warn");
+    expect(eventTone("lease.granted")).toBeUndefined();
+  });
+});
diff --git a/ui/src/model/activity.ts b/ui/src/model/activity.ts
new file mode 100644
index 000000000..f12ea3359
--- /dev/null
+++ b/ui/src/model/activity.ts
@@ -0,0 +1,47 @@
+import { type ConsoleEvent, workerIdOf } from "./events";
+import type { Tone } from "./tones";
+import { type WorkerView, workerName } from "./workers";
+
+function field(payload: unknown, key: string): string | undefined {
+  if (typeof payload !== "object" || payload === null) return undefined;
+  const value = (payload as Record<string, unknown>)[key];
+  return typeof value === "string" && value !== "" ? value : undefined;
+}
+
+function deviceName(
+  deviceId: string | undefined,
+  workers: readonly WorkerView[],
+): string | undefined {
+  if (deviceId === undefined) return undefined;
+  for (const worker of workers) {
+    const device = worker.devices?.find((entry) => entry.id === deviceId);
+    if (device !== undefined) return `${device.spec.model} ${device.spec.osVersion}`;
+  }
+  return undefined;
+}
+
+// why: a row has one line for an event, so it names who, what and where from whichever payload
+// fields the event carries; the payload itself stays whole on the event's own page.
+export function eventSummary(event: ConsoleEvent, workers: readonly WorkerView[]): string {
+  const { payload } = event;
+  const workerId = workerIdOf(event);
+  const worker = workers.find((entry) => entry.id === workerId);
+  const parts = [
+    field(payload, "requester") ?? field(payload, "requesterId"),
+    deviceName(field(payload, "deviceId"), workers),
+    field(payload, "component"),
+    worker === undefined ? field(payload, "label") : workerName(worker),
+    field(payload, "reason"),
+  ].filter((part): part is string => part !== undefined);
+  return parts.length === 0 ? event.event : parts.join(" · ");
+}
+
+const ERROR_EVENT = /(quarantined|disconnected|failed|rejected|crash|stranded)/;
+const WARN_EVENT = /(expired|drain-started|absence|stalled|pressure|declined)/;
+
+// why: an event's name is coloured only where it reports trouble, so a quiet feed reads quiet.
+export function eventTone(name: string): Tone | undefined {
+  if (ERROR_EVENT.test(name)) return "error";
+  if (WARN_EVENT.test(name)) return "warn";
+  return undefined;
+}
diff --git a/ui/src/views/attention-model.ts b/ui/src/model/attention.ts
similarity index 76%
rename from ui/src/views/attention-model.ts
rename to ui/src/model/attention.ts
index eabe3bd4a..13d60bb1b 100644
--- a/ui/src/views/attention-model.ts
+++ b/ui/src/model/attention.ts
@@ -1,12 +1,7 @@
-/**
- * What needs the operator's attention, worked out from `GET /v1/workers` (ADR 0013 §1) and
- * nothing else. Pure, so the Attention view and the count in the shell read one list, and an
- * item leaves it the moment the data no longer says it.
- */
-import type { Stat } from "../layout";
-import type { WorkerDevice, WorkerView } from "./workers-model";
+import type { Stat } from "./stat";
+import type { Tone } from "./tones";
+import type { WorkerDevice, WorkerView } from "./workers";
 
-/** One thing that needs attention. `condition` is the word the console shows for it. */
 export type AttentionItem =
   | {
       readonly key: string;
@@ -27,11 +22,7 @@ export type AttentionItem =
       readonly device: WorkerDevice;
     };
 
-/**
- * Every item, worker by worker in the order the daemon lists them: the worker's own conditions
- * first, then its devices'. A worker that is both disconnected and drained is two items, since
- * each clears on its own.
- */
+// why: a worker that is both disconnected and drained is two items, since each clears on its own.
 export function attentionItems(workers: readonly WorkerView[]): readonly AttentionItem[] {
   return workers.flatMap((worker) => [...workerItems(worker), ...deviceItems(worker)]);
 }
@@ -69,7 +60,6 @@ function deviceItems(worker: WorkerView): AttentionItem[] {
   });
 }
 
-/** The Attention view's stat cards: how many items, and how many workers and devices they name. */
 export function attentionStats(items: readonly AttentionItem[]): readonly Stat[] {
   const workers = new Set(items.map((item) => item.worker.id));
   const devices = new Set(
@@ -81,3 +71,11 @@ export function attentionStats(items: readonly AttentionItem[]): readonly Stat[]
     { caption: "quarantined or stalled", label: "Devices affected", value: String(devices.size) },
   ];
 }
+
+// why: a lost worker or a quarantined device is broken; everything else on the list needs a look
+// soon, which is the warning tone, the same split the status words use.
+export function attentionTone(condition: AttentionItem["condition"]): Tone {
+  return condition === "disconnected" || condition === "incompatible" || condition === "quarantined"
+    ? "error"
+    : "warn";
+}
diff --git a/ui/src/views/events-model.ts b/ui/src/model/events.ts
similarity index 58%
rename from ui/src/views/events-model.ts
rename to ui/src/model/events.ts
index 8cd66d94a..ad4d9fd02 100644
--- a/ui/src/views/events-model.ts
+++ b/ui/src/model/events.ts
@@ -1,36 +1,21 @@
-/**
- * The facts the events view shows, from `GET /v1/events` and the event stream (ADR 0013 §1,
- * §2). Pure, so the view stays rendering and these stay tested. Wire input is a claim: an
- * envelope is read field by field, and an event name or payload this console has never heard
- * of is shown as it came.
- */
-import type { Stat } from "../layout";
-
-/** One business event, as the daemon sent it. */
+import type { Stat } from "./stat";
+
 export interface ConsoleEvent {
-  /** What names the event for good: survives a daemon restart (ADR 0014). */
+  // why: names the event for good: survives a daemon restart.
   readonly id: string;
   readonly seq: number;
   readonly timestamp: number;
   readonly event: string;
-  /** The payload as sent: any JSON value, or `undefined` when the envelope had none. */
   readonly payload: unknown;
 }
 
-/** How many events the view keeps. Older ones drop off the end. */
 export const MAX_EVENTS = 10_000;
 
-/**
- * The window the view loads when it opens, the same as `simlock events --since 1h`, so the two
- * show the same events.
- */
+// why: the same window as `simlock events --since 1h`, so the two show the same events.
 export const RECENT = "1h";
 
-/**
- * An envelope off the wire, or `undefined` when it is not one: without a numeric `seq`, a
- * `timestamp` that is a date, and a string `event` and `id`, it cannot be placed in time or told apart
- * from another.
- */
+// why: an envelope without a numeric `seq`, a date `timestamp`, and a string `event` and `id`
+// cannot be placed in time or told apart from another, so it is dropped.
 export function readEvent(data: unknown): ConsoleEvent | undefined {
   if (typeof data !== "object" || data === null) return undefined;
   const { event, id, payload, seq, timestamp } = data as Record<string, unknown>;
@@ -46,30 +31,25 @@ export function readEvent(data: unknown): ConsoleEvent | undefined {
   return { event, id, payload, seq, timestamp };
 }
 
-/**
- * The events in a `GET /v1/events` answer. Throws when the answer has no `events` list, so the
- * view says it could not read it rather than showing nothing.
- */
+// why: throws when the answer has no `events` list, so the view says it could not read it rather
+// than showing nothing.
 export function readReplay(body: unknown): readonly ConsoleEvent[] {
   const events = (body as { readonly events?: unknown } | null)?.events;
   if (!Array.isArray(events)) throw new SyntaxError("The answer has no events list");
   return events.flatMap((data: unknown) => readEvent(data) ?? []);
 }
 
-/** What makes two events the same: their `id`, and nothing else (ADR 0014). */
+// why: identity is the `id` alone, so an event seen twice, by the stream and by the `since` window,
+// is shown once.
 export function keyOf(event: ConsoleEvent): string {
   return event.id;
 }
 
-/** Newest first: by time, and by `seq` within the same millisecond. */
+// why: `seq` orders events inside the same millisecond.
 function newestFirst(a: ConsoleEvent, b: ConsoleEvent): number {
   return b.timestamp - a.timestamp || b.seq - a.seq;
 }
 
-/**
- * `current` with `incoming` added: each event once, newest first, and only the newest
- * {@link MAX_EVENTS}. Returns `current` itself when nothing new came.
- */
 export function mergeEvents(
   current: readonly ConsoleEvent[],
   incoming: readonly ConsoleEvent[],
@@ -86,31 +66,22 @@ export function mergeEvents(
   return [...current, ...added].sort(newestFirst).slice(0, MAX_EVENTS);
 }
 
-/**
- * The `since` that covers a gap of `ms` milliseconds, in whole seconds, rounded up, so the gap's
- * first event is inside it (ADR 0013 §5).
- */
+// why: rounded up, so the gap's first event is inside the window.
 export function sinceFor(ms: number): string {
   return `${Math.ceil(ms / 1_000)}s`;
 }
 
-/** The subjects the filter offers. `other` is every subject not named here. */
 const SUBJECTS = ["lease", "device", "worker", "component"] as const;
 
 export type Subject = (typeof SUBJECTS)[number] | "other";
 
-/** The subject of an event: the part of its name before the first dot (`lease.granted`). */
 export function subjectOf(name: string): Subject {
   const subject = name.split(".", 1)[0];
   return SUBJECTS.find((known) => known === subject) ?? "other";
 }
 
-/**
- * The worker an event is about, from the `workerId` a gateway adds to each worker's event, or
- * the one a gateway's own `worker.*` events carry. `undefined` on a single host, and for
- * `worker.rejected`: its `workerId` is what a refused dial claimed, so it names no worker, and
- * shows only in the payload.
- */
+// why: `worker.rejected` has no worker: its `workerId` is what a refused dial claimed, so it names
+// no worker and shows only in the payload.
 export function workerIdOf(event: ConsoleEvent): string | undefined {
   const { payload } = event;
   if (event.event === "worker.rejected" || typeof payload !== "object" || payload === null) {
@@ -120,11 +91,8 @@ export function workerIdOf(event: ConsoleEvent): string | undefined {
   return typeof workerId === "string" ? workerId : undefined;
 }
 
-/**
- * The payload as key and value pairs, in the order the daemon sent them. A string shows as
- * itself; any other value as its JSON. A payload that is not an object shows as one pair,
- * `payload`, so an unknown shape is still shown whole.
- */
+// why: a payload that is not an object shows as one pair, `payload`, so an unknown shape is still
+// shown whole.
 export function payloadPairs(
   payload: unknown,
 ): readonly { readonly key: string; readonly value: string }[] {
@@ -140,10 +108,6 @@ function valueText(value: unknown): string {
   return JSON.stringify(value) ?? String(value);
 }
 
-/**
- * The Events view's stat cards: how many events the list shows, of how many it holds when a
- * filter hides some, and the time of the newest one shown. `shown` is newest first.
- */
 export function eventsStats(
   shown: readonly ConsoleEvent[],
   held: number,
@@ -164,7 +128,6 @@ export function eventsStats(
   ];
 }
 
-/** An event's time of day, `HH:MM:SS` on the browser's clock face. */
 export function timeOfDay(timestamp: number): string {
   const date = new Date(timestamp);
   return [date.getHours(), date.getMinutes(), date.getSeconds()]
diff --git a/ui/src/model/fleet.test.ts b/ui/src/model/fleet.test.ts
new file mode 100644
index 000000000..3c736e4ee
--- /dev/null
+++ b/ui/src/model/fleet.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+
+import { platformSlots, slotsLabel, workerHealth } from "./fleet";
+import type { WorkerDevice, WorkerView } from "./workers";
+
+const NOW = Date.parse("2026-10-15T12:00:00Z");
+const GIB = 2 ** 30;
+
+function worker(overrides: Partial<WorkerView> = {}): WorkerView {
+  return {
+    catalog: [],
+    connection: "connected",
+    devices: [],
+    drained: false,
+    id: "wrk_1",
+    lastSeenAt: NOW,
+    leases: [],
+    ...overrides,
+  };
+}
+
+function device(id: string, state: string, platform: "ios" | "android" = "ios"): WorkerDevice {
+  return {
+    id,
+    mode: "full",
+    physical: false,
+    spec: { model: "iPhone 16", osVersion: "18.4", physical: false, platform },
+    state,
+  } as unknown as WorkerDevice;
+}
+
+function capacity(ios: number, android: number): NonNullable<WorkerView["capacity"]> {
+  return {
+    android: { limit: android, running: 0 },
+    global: { limit: ios + android, running: 0, warm: 0 },
+    ios: { limit: ios, running: 0 },
+  } as unknown as NonNullable<WorkerView["capacity"]>;
+}
+
+function load(cpu: number, memoryUsed: number, pressure?: "normal" | "warn" | "critical") {
+  return {
+    cpu: { busyPercent: cpu, cores: 8, limited: false },
+    disk: { freeBytes: 500 * GIB, totalBytes: 1000 * GIB },
+    memory: {
+      availableBytes: (1 - memoryUsed / 100) * 32 * GIB,
+      limited: false,
+      totalBytes: 32 * GIB,
+      ...(pressure === undefined ? {} : { pressure }),
+    },
+    readAt: NOW,
+  } as unknown as NonNullable<WorkerView["load"]>;
+}
+
+describe("a worker's health square", () => {
+  it("is green and reads connected when nothing is wrong", () => {
+    expect(workerHealth(worker({ load: load(40, 50) }))).toEqual({ tone: "ok", word: "connected" });
+  });
+
+  it("names the worst finding: red for a lost worker, yellow for drained or a load over its threshold", () => {
+    const cases: readonly [Partial<WorkerView>, string, string][] = [
+      [{ connection: "disconnected", drained: true }, "error", "disconnected"],
+      [{ connection: "incompatible" }, "error", "incompatible"],
+      [{ drained: true }, "warn", "drained"],
+      [{ load: load(91, 40) }, "warn", "CPU 91%"],
+      [{ load: load(30, 88) }, "warn", "memory 88%"],
+      [{ load: load(97, 88) }, "error", "CPU 97%"],
+      [{ load: load(30, 97, "warn") }, "warn", "memory pressure warn"],
+      [{ load: load(30, 40, "critical") }, "error", "memory pressure critical"],
+    ];
+    for (const [overrides, tone, word] of cases) {
+      expect(workerHealth(worker(overrides)), word).toEqual({ tone, word });
+    }
+  });
+
+  it("ignores a stale load reading from a worker that is not connected", () => {
+    expect(workerHealth(worker({ connection: "disconnected", load: load(99, 99) }))).toEqual({
+      tone: "error",
+      word: "disconnected",
+    });
+  });
+});
+
+describe("a worker's slots", () => {
+  it("draws each running device by its state and the room left under the limit as free", () => {
+    const slots = platformSlots(
+      worker({
+        capacity: capacity(4, 2),
+        devices: [
+          device("a", "leased"),
+          device("b", "ready"),
+          device("c", "provisioning"),
+          device("d", "shutdown"),
+          device("e", "quarantined", "android"),
+        ],
+      }),
+      "ios",
+    );
+
+    expect(slots.map((slot) => slot.kind)).toEqual(["leased", "ready", "busy", "free"]);
+    expect(slotsLabel(slots)).toBe("1 leased, 1 ready, 1 booting, 1 free");
+  });
+
+  it("has no free slots on a worker that is not connected", () => {
+    const slots = platformSlots(
+      worker({ capacity: capacity(4, 0), connection: "disconnected" }),
+      "ios",
+    );
+
+    expect(slots).toEqual([]);
+    expect(slotsLabel(slots)).toBe("No devices");
+  });
+});
diff --git a/ui/src/model/fleet.ts b/ui/src/model/fleet.ts
new file mode 100644
index 000000000..5d4716fdc
--- /dev/null
+++ b/ui/src/model/fleet.ts
@@ -0,0 +1,104 @@
+import { loadGauges } from "./load";
+import { levelOf } from "./load-thresholds";
+import type { Tone, Toned } from "./tones";
+import type { WorkerDevice, WorkerView } from "./workers";
+
+const RANK: Readonly<Record<Tone, number>> = { error: 3, idle: 0, ok: 1, warn: 2 };
+
+// why: a list row has room for one square, so of everything wrong with a worker the worst is
+// shown and its word goes in the square's name; a worker with nothing wrong reads "connected".
+export function workerHealth(worker: WorkerView): Toned {
+  const findings: Toned[] = [];
+  if (worker.connection !== "connected") {
+    findings.push({ tone: "error", word: worker.connection });
+  }
+  if (worker.health === "failed") findings.push({ tone: "error", word: "failed" });
+  if (worker.drained) findings.push({ tone: "warn", word: "drained" });
+  if (worker.health === "starting") findings.push({ tone: "warn", word: "starting" });
+  if (worker.capacity?.ramBudget?.overLimit === true) {
+    findings.push({ tone: "warn", word: "over RAM budget" });
+  }
+  if (worker.connection === "connected" && worker.load !== undefined) {
+    const pressure = worker.load.memory?.pressure;
+    if (pressure === "warn" || pressure === "critical") {
+      findings.push({
+        tone: pressure === "critical" ? "error" : "warn",
+        word: `memory pressure ${pressure}`,
+      });
+    }
+    const gauges = loadGauges(worker.load);
+    for (const [name, percent] of [
+      ["CPU", gauges.cpu],
+      ["memory", pressure === undefined ? gauges.memory : undefined],
+      ["disk", gauges.disk],
+    ] as const) {
+      const tone = levelOf(percent);
+      if (tone !== "idle") findings.push({ tone, word: `${name} ${percent}%` });
+    }
+  }
+  return findings.reduce<Toned>(
+    (worst, finding) => (RANK[finding.tone] > RANK[worst.tone] ? finding : worst),
+    { tone: "ok", word: "connected" },
+  );
+}
+
+export type SlotKind = "leased" | "ready" | "busy" | "broken" | "absent" | "free";
+
+export interface DeviceSlot {
+  readonly kind: SlotKind;
+  readonly label: string;
+}
+
+const SLOT_OF_STATE: Readonly<Partial<Record<string, SlotKind>>> = {
+  absent: "absent",
+  leased: "leased",
+  provisioning: "busy",
+  quarantined: "broken",
+  ready: "ready",
+  reclaiming: "busy",
+};
+
+export function slotOf(device: WorkerDevice): DeviceSlot | undefined {
+  const kind = SLOT_OF_STATE[device.state];
+  if (kind === undefined) return undefined;
+  return { kind, label: `${device.spec.model} ${device.spec.osVersion}, ${device.state}` };
+}
+
+// why: a slot is a device the worker may run; a shut-down device holds none, so it is not drawn,
+// and the room left under the platform's limit shows as free slots.
+export function platformSlots(
+  worker: WorkerView,
+  platform: "ios" | "android",
+): readonly DeviceSlot[] {
+  const taken = (worker.devices ?? [])
+    .filter((device) => device.spec.platform === platform)
+    .flatMap((device) => {
+      const slot = slotOf(device);
+      return slot === undefined ? [] : [slot];
+    });
+  const limit = worker.connection === "connected" ? (worker.capacity?.[platform].limit ?? 0) : 0;
+  const free = Math.max(0, limit - taken.length);
+  return [
+    ...taken,
+    ...Array.from({ length: free }, () => ({ kind: "free", label: "free" }) as const),
+  ];
+}
+
+export function workerSlots(worker: WorkerView): readonly DeviceSlot[] {
+  return [...platformSlots(worker, "ios"), ...platformSlots(worker, "android")];
+}
+
+export function slotsLabel(slots: readonly DeviceSlot[]): string {
+  const counts = new Map<SlotKind, number>();
+  for (const slot of slots) counts.set(slot.kind, (counts.get(slot.kind) ?? 0) + 1);
+  const words: Readonly<Record<SlotKind, string>> = {
+    absent: "absent",
+    broken: "quarantined",
+    busy: "booting",
+    free: "free",
+    leased: "leased",
+    ready: "ready",
+  };
+  const parts = [...counts].map(([kind, count]) => `${count} ${words[kind]}`);
+  return parts.length === 0 ? "No devices" : parts.join(", ");
+}
diff --git a/ui/src/views/history-model.test.ts b/ui/src/model/history.test.ts
similarity index 77%
rename from ui/src/views/history-model.test.ts
rename to ui/src/model/history.test.ts
index d2555fedf..f0f8e845b 100644
--- a/ui/src/views/history-model.test.ts
+++ b/ui/src/model/history.test.ts
@@ -1,16 +1,9 @@
 import { describe, expect, it } from "vitest";
 
-import type { ConsoleEvent } from "./events-model";
-import {
-  eventsPerMinute,
-  extremes,
-  HISTORY_MINUTES,
-  leaseHistory,
-  minuteLabel,
-} from "./history-model";
+import type { ConsoleEvent } from "./events";
+import { eventsPerMinute, extremes, HISTORY_MINUTES, leaseHistory, minuteLabel } from "./history";
 
 const MINUTE = 60_000;
-/** 12:00:30 on the daemon's clock: half a minute into the current minute. */
 const NOW = Date.parse("2026-10-02T12:00:30Z");
 const CURRENT = Date.parse("2026-10-02T12:00:00Z");
 
@@ -20,18 +13,12 @@ function event(name: string, timestamp: number): ConsoleEvent {
   return { event: name, id: `evt_${seq}`, payload: {}, seq, timestamp };
 }
 
-/** The count of each minute, keyed by how many minutes before the current one it starts. */
 function byMinutesAgo(minutes: readonly { at: number; count: number }[]): Map<number, number> {
   return new Map(minutes.map((minute) => [(CURRENT - minute.at) / MINUTE, minute.count]));
 }
 
 describe("the lease history", () => {
   it("the lease history counts back from today's leases through granted, released and expired events", () => {
-    // Held now: 3. One was granted after the view's last tick of now, stamped in the next minute
-    // by the daemon's clock, so it is in now's count.
-    // Walking back: 10 s ago one was granted (1 before it); 3 min ago one was
-    // released (2 before it); 5 min ago one expired (3 before it); 20 min ago one was granted
-    // (2 before it). Other events change nothing.
     const events = [
       event("lease.granted", NOW + 45_000),
       event("lease.granted", NOW - 10_000),
@@ -49,12 +36,9 @@ describe("the lease history", () => {
     expect(minutes.at(-1)?.at).toBe(CURRENT);
     expect(minutes.at(-1)?.label).toBe(minuteLabel(CURRENT));
     const counts = byMinutesAgo(minutes);
-    // The current minute is now: what the workers hold.
     expect(counts.get(0)).toBe(3);
-    // The end of the minute before is before the grant 10 s ago.
     expect(counts.get(1)).toBe(1);
     expect(counts.get(2)).toBe(1);
-    // The minute the release happened in ends after it; the minute before ends before it.
     expect(counts.get(3)).toBe(1);
     expect(counts.get(4)).toBe(2);
     expect(counts.get(5)).toBe(2);
@@ -84,9 +68,7 @@ describe("events per minute", () => {
       event("lease.queued", CURRENT - MINUTE),
       event("worker.connected", CURRENT - 2 * MINUTE + 59_999),
       event("daemon.started", CURRENT - 59 * MINUTE),
-      // Older than the last hour: in no minute.
       event("lease.released", CURRENT - 59 * MINUTE - 1),
-      // Stamped after now by a skewed clock: the current minute.
       event("lease.expired", NOW + 90_000),
     ];
 
diff --git a/ui/src/views/history-model.ts b/ui/src/model/history.ts
similarity index 58%
rename from ui/src/views/history-model.ts
rename to ui/src/model/history.ts
index d8a332459..eb6baaf6d 100644
--- a/ui/src/views/history-model.ts
+++ b/ui/src/model/history.ts
@@ -1,28 +1,19 @@
-/**
- * The last hour, minute by minute, for the console's two charts. Worked out from what the views
- * already hold: today's leases from `GET /v1/workers`, and the events from `GET /v1/events` and
- * the stream (ADR 0013 §1). Pure, so the charts stay drawing and these stay tested.
- */
-import type { ConsoleEvent } from "./events-model";
+import type { ConsoleEvent } from "./events";
 
 const MINUTE = 60_000;
 
-/** How many minutes a chart shows: the current one and the 59 before it. */
 export const HISTORY_MINUTES = 60;
 
-/** One minute of a chart: when it starts, its `HH:MM` on the browser's clock face, its count. */
 export interface MinuteCount {
   readonly at: number;
   readonly label: string;
   readonly count: number;
 }
 
-/** The start of the clock minute `at` falls in. */
 function minuteOf(at: number): number {
   return Math.floor(at / MINUTE) * MINUTE;
 }
 
-/** The start of each of the last {@link HISTORY_MINUTES} clock minutes, oldest first. */
 function lastHour(now: number): readonly number[] {
   const current = minuteOf(now);
   return Array.from(
@@ -31,7 +22,6 @@ function lastHour(now: number): readonly number[] {
   );
 }
 
-/** A minute's `HH:MM` on the browser's clock face, as the events view writes an event's time. */
 export function minuteLabel(at: number): string {
   const date = new Date(at);
   return [date.getHours(), date.getMinutes()]
@@ -39,20 +29,14 @@ export function minuteLabel(at: number): string {
     .join(":");
 }
 
-/** What an event did to the number of leases held: one more, one fewer, or nothing. */
 function leaseChange(event: ConsoleEvent): number {
   if (event.event === "lease.granted") return 1;
   if (event.event === "lease.released" || event.event === "lease.expired") return -1;
   return 0;
 }
 
-/**
- * How many leases were held at the end of each of the last 60 minutes, and now in the current
- * one. It starts from `current`, the leases held now, and walks back through `events`: before
- * a `lease.granted` there was one lease fewer, and before a `lease.released` or a
- * `lease.expired` one more. Events the view does not hold, older than the last hour or past
- * what `GET /v1/events` returns, cannot be walked back through, and a count never goes below 0.
- */
+// why: events the view does not hold, older than the last hour or past what `GET /v1/events`
+// returns, cannot be walked back through, so a count never goes below 0.
 export function leaseHistory(
   current: number,
   events: readonly ConsoleEvent[],
@@ -63,7 +47,7 @@ export function leaseHistory(
     .filter((entry) => entry.change !== 0);
   const minutes = lastHour(now);
   return minutes.map((at, index) => {
-    // The current minute is `current` itself: an event stamped after `now`, which ticks once a
+    // why: the current minute is `current` itself: an event stamped after `now`, which ticks once a
     // second, is already in it.
     const end = index === minutes.length - 1 ? Infinity : at + MINUTE;
     const since = changes.reduce((sum, entry) => (entry.at > end ? sum + entry.change : sum), 0);
@@ -71,11 +55,8 @@ export function leaseHistory(
   });
 }
 
-/**
- * How many of `events` happened in each of the last 60 minutes. An event stamped later than
- * `now`, which a skewed clock can produce, counts in the current minute; one older than the
- * last hour counts in none.
- */
+// why: an event stamped later than `now`, which a skewed clock can produce, counts in the current
+// minute; one older than the last hour counts in none.
 export function eventsPerMinute(
   events: readonly ConsoleEvent[],
   now: number,
@@ -90,7 +71,6 @@ export function eventsPerMinute(
   return minutes.map((at) => ({ at, count: counts.get(at) ?? 0, label: minuteLabel(at) }));
 }
 
-/** The highest and the lowest count, each at the latest minute it was reached. */
 export function extremes(
   minutes: readonly MinuteCount[],
 ): { readonly highest: MinuteCount; readonly lowest: MinuteCount } | undefined {
diff --git a/ui/src/views/leases-model.ts b/ui/src/model/leases.ts
similarity index 60%
rename from ui/src/views/leases-model.ts
rename to ui/src/model/leases.ts
index b15cd8733..944002f1c 100644
--- a/ui/src/views/leases-model.ts
+++ b/ui/src/model/leases.ts
@@ -1,17 +1,9 @@
-/**
- * The facts the leases views show, computed from `GET /v1/leases`, `GET /v1/tokens`,
- * `GET /v1/workers` and, for one lease, `GET /v1/leases/{id}` (ADR 0013 §1). Pure, so the views
- * stay rendering and these stay tested. The types are the contract's where it has them, imported
- * type-only (ADR 0011 §1); every value is still a claim, so a fact the data lacks shows as
- * missing rather than guessed.
- */
 import type { z } from "zod";
 
 import type { statusLeaseSchema, tokenRecordSchema } from "../../../src/contract/schemas";
-import type { Stat } from "../layout";
-import { type WorkerDevice, type WorkerView, workerName } from "./workers-model";
+import type { Stat } from "./stat";
+import { type WorkerDevice, type WorkerView, workerName } from "./workers";
 
-/** One lease as `GET /v1/leases` lists it. `workerId` is set on a gateway and absent on a host. */
 export type LeaseRecord = z.infer<typeof statusLeaseSchema>;
 
 export interface LeaseList {
@@ -24,7 +16,6 @@ export interface TokenList {
   readonly tokens: readonly TokenRecord[];
 }
 
-/** The fields of `GET /v1/leases/{id}`'s lease that the details page reads. */
 export interface LeaseDetails {
   readonly id: string;
   readonly requestId?: string;
@@ -33,33 +24,27 @@ export interface LeaseDetails {
   readonly deviceId: string;
   readonly createdAt: string;
   readonly expiresAt: string;
-  /** Absent for a lease on a physical device, which has no mode. */
+  // why: a lease on a physical device has no mode.
   readonly mode?: string;
   readonly imageTag?: string;
   readonly workerId?: string;
   readonly worker?: { readonly id: string; readonly label?: string };
 }
 
-/** Who holds a lease: its token's label when a token has the requester's id, and the id. */
 export interface Holder {
   readonly id: string;
   readonly label?: string;
 }
 
-/**
- * The holder of a lease taken with `requesterId`. Over HTTP a requester's id is its token's id,
- * so a token with that id names it. A requester no token matches, such as an agent that leased
- * over the local socket, is its id alone.
- */
+// why: over HTTP a requester's id is its token's id, so a token with that id names it; a requester
+// no token matches, such as an agent on the local socket, is its id alone.
 export function holderOf(requesterId: string, tokens: readonly TokenRecord[]): Holder {
   const label = tokens.find((token) => token.id === requesterId)?.label;
   return label === undefined ? { id: requesterId } : { id: requesterId, label };
 }
 
-/**
- * The worker a lease lives on. A gateway names it on every lease it lists; a single host names
- * none, and every lease there is on its one worker, the host itself.
- */
+// why: a single host names no worker on its leases, and every lease there is on its one worker, the
+// host itself.
 export function workerOfLease(
   lease: { readonly workerId?: string | undefined },
   workers: readonly WorkerView[],
@@ -68,7 +53,6 @@ export function workerOfLease(
   return workers.find((worker) => worker.id === lease.workerId);
 }
 
-/** The leases on one worker, by the same rule `workerOfLease` names a lease's worker. */
 export function leasesOnWorker(
   leases: readonly LeaseRecord[],
   workerId: string,
@@ -77,11 +61,8 @@ export function leasesOnWorker(
   return leases.filter((lease) => workerOfLease(lease, workers)?.id === workerId);
 }
 
-/**
- * The leases oldest granted first, by the worker's id and the lease's own id where two were
- * granted in the same millisecond. `GET /v1/leases` promises no order, so the console sets its
- * own from facts a lease keeps for life, and a refresh moves no lease to another page.
- */
+// why: `GET /v1/leases` promises no order, so the console sets its own from facts a lease keeps for
+// life, and a refresh moves no lease to another page.
 export function inGrantOrder(leases: readonly LeaseRecord[]): readonly LeaseRecord[] {
   return [...leases].sort(
     (a, b) =>
@@ -96,7 +77,6 @@ function compare(a: string, b: string): number {
   return a < b ? -1 : 1;
 }
 
-/** The device a lease holds, as its worker reports it. A device id is matched on its own worker. */
 export function deviceOfLease(
   lease: LeaseRecord,
   workers: readonly WorkerView[],
@@ -104,7 +84,6 @@ export function deviceOfLease(
   return workerOfLease(lease, workers)?.devices?.find((device) => device.id === lease.deviceId);
 }
 
-/** The name of the worker a lease lives on: its label, else its id, else `undefined`. */
 export function workerNameOfLease(
   lease: {
     readonly workerId?: string | undefined;
@@ -117,22 +96,14 @@ export function workerNameOfLease(
   return lease.worker?.label ?? lease.workerId;
 }
 
-/**
- * A lease's page. A gateway's lease id holds a `.`, and the daemon serves the console's page only
- * for a path whose last segment has none, so the page's path ends in `/`: a reload, or a pasted
- * link, still lands on it.
- */
+// why: a gateway's lease id holds a `.`, and the daemon serves the console's page only for a path
+// whose last segment has none, so the path ends in `/`.
 export function leasePath(id: string): `/${string}` {
   return `/leases/${encodeURIComponent(id)}/`;
 }
 
-/** How soon a lease expires for the Leases view to count it as expiring. */
 const EXPIRING_WITHIN_MS = 15 * 60_000;
 
-/**
- * The Leases view's stat cards: how many leases, how many holders hold them, and how many
- * expire within 15 minutes of the daemon's `now` unless they are renewed.
- */
 export function leasesStats(leases: readonly LeaseRecord[], now: number): readonly Stat[] {
   const holders = new Set(leases.map((lease) => lease.requesterId));
   const expiring = leases.filter((lease) => lease.ttlDeadline - now <= EXPIRING_WITHIN_MS);
@@ -147,7 +118,6 @@ export function leasesStats(leases: readonly LeaseRecord[], now: number): readon
   ];
 }
 
-/** The lease id a page path names, or `undefined` for the list (`/leases`). */
 export function leaseIdFrom(path: string): string | undefined {
   const rest = path.replace(/^\/leases\/?/, "").replace(/\/$/, "");
   if (rest === "") return undefined;
diff --git a/ui/src/load-thresholds.test.ts b/ui/src/model/load-thresholds.test.ts
similarity index 100%
rename from ui/src/load-thresholds.test.ts
rename to ui/src/model/load-thresholds.test.ts
diff --git a/ui/src/load-thresholds.ts b/ui/src/model/load-thresholds.ts
similarity index 95%
rename from ui/src/load-thresholds.ts
rename to ui/src/model/load-thresholds.ts
index 41c436490..95a926ab3 100644
--- a/ui/src/load-thresholds.ts
+++ b/ui/src/model/load-thresholds.ts
@@ -1,4 +1,4 @@
-import type { Tone } from "./status";
+import type { Tone } from "./tones";
 
 // why: the worker sends no thresholds, so the CPU and disk gauges would have nothing to be
 // coloured by. These are the console's own opinion, read off the one figure each gauge is drawn
diff --git a/ui/src/views/load-model.test.ts b/ui/src/model/load.test.ts
similarity index 99%
rename from ui/src/views/load-model.test.ts
rename to ui/src/model/load.test.ts
index 9aa13c9e8..72fb70b48 100644
--- a/ui/src/views/load-model.test.ts
+++ b/ui/src/model/load.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { formatBusyPercent, formatBytes, formatCores, loadGauges, loadSummary } from "./load-model";
+import { formatBusyPercent, formatBytes, formatCores, loadGauges, loadSummary } from "./load";
 
 const MIB = 1024 ** 2;
 const GIB = 1024 ** 3;
diff --git a/ui/src/views/load-model.ts b/ui/src/model/load.ts
similarity index 98%
rename from ui/src/views/load-model.ts
rename to ui/src/model/load.ts
index 7220fc0b9..e110207bf 100644
--- a/ui/src/views/load-model.ts
+++ b/ui/src/model/load.ts
@@ -1,4 +1,4 @@
-import type { WorkerView } from "./workers-model";
+import type { WorkerView } from "./workers";
 
 export type WorkerLoad = NonNullable<WorkerView["load"]>;
 
diff --git a/ui/src/model/overview.test.ts b/ui/src/model/overview.test.ts
new file mode 100644
index 000000000..76239e186
--- /dev/null
+++ b/ui/src/model/overview.test.ts
@@ -0,0 +1,150 @@
+import { describe, expect, it } from "vitest";
+
+import type { ConsoleEvent } from "./events";
+import { overviewOf } from "./overview";
+import type { WaitingRequest } from "./waiting";
+import type { WorkerDevice, WorkerView } from "./workers";
+
+const NOW = Date.parse("2026-10-15T12:00:00Z");
+
+function device(id: string, state: string, platform: "ios" | "android"): WorkerDevice {
+  return {
+    id,
+    mode: "full",
+    physical: false,
+    spec: {
+      model: platform === "ios" ? "iPhone 16" : "Pixel 8",
+      osVersion: "1",
+      physical: false,
+      platform,
+    },
+    state,
+  } as unknown as WorkerDevice;
+}
+
+function worker(
+  id: string,
+  devices: readonly WorkerDevice[],
+  overrides: Partial<WorkerView> = {},
+): WorkerView {
+  return {
+    capacity: {
+      android: { limit: 2, running: 0 },
+      global: { limit: 6, running: 0, warm: 0 },
+      ios: { limit: 4, running: 0 },
+    },
+    catalog: [],
+    connection: "connected",
+    devices: [...devices],
+    drained: false,
+    id,
+    label: id,
+    lastSeenAt: NOW,
+    leases: devices
+      .filter((entry) => entry.state === "leased")
+      .map((entry) => ({ deviceId: entry.id, grantedAt: NOW - 60_000, id: `l_${entry.id}` })),
+    ...overrides,
+  } as unknown as WorkerView;
+}
+
+function event(seq: number, name: string, at: number): ConsoleEvent {
+  return { event: name, id: `e${seq}`, payload: {}, seq, timestamp: at };
+}
+
+const fleet = [
+  worker("mini-1", [
+    device("a", "leased", "ios"),
+    device("b", "ready", "ios"),
+    device("c", "leased", "android"),
+  ]),
+  worker("mini-2", [device("d", "quarantined", "android")], { drained: true }),
+  worker("down-1", [], { connection: "disconnected" }),
+];
+
+describe("the overview", () => {
+  it("counts the fleet's headline figures from what the workers, the queue and the events say", () => {
+    const requests = [{ createdAt: NOW - 74_000, id: "r1" }] as unknown as WaitingRequest[];
+    const events = [
+      event(1, "lease.granted", NOW - 2 * 60 * 60 * 1_000),
+      event(2, "lease.granted", NOW - 10 * 60 * 1_000),
+      event(3, "lease.released", NOW - 5 * 60 * 1_000),
+    ];
+
+    const { tiles } = overviewOf({ events, now: NOW, requests, workers: fleet });
+
+    expect(tiles.map((tile) => [tile.label, tile.value, tile.unit])).toEqual([
+      ["Utilisation", "17", "%"],
+      ["Leases", "2", "of 12"],
+      ["Waiting", "1", "longest 1 min 14 s"],
+      ["Workers", "2", "of 3 up"],
+      ["Granted", "1", "last hour"],
+    ]);
+  });
+
+  it("splits each platform's limit into leased, ready and booting, counting connected workers only", () => {
+    const { platforms } = overviewOf({ events: [], now: NOW, requests: [], workers: fleet });
+
+    expect(platforms).toEqual([
+      {
+        busyPercent: 0,
+        leasedPercent: 12.5,
+        limit: 8,
+        name: "iOS",
+        readyPercent: 12.5,
+        running: 2,
+      },
+      { busyPercent: 0, leasedPercent: 25, limit: 4, name: "Android", readyPercent: 0, running: 1 },
+    ]);
+  });
+
+  it("lists what needs attention, each linked to its own page and toned by how bad it is", () => {
+    const { attention } = overviewOf({ events: [], now: NOW, requests: [], workers: fleet });
+
+    expect(attention.map((item) => [item.word, item.tone, item.subject, item.to])).toEqual([
+      ["drained", "warn", "mini-2", "/attention/mini-2%2Fdrained"],
+      ["quarantined", "error", "Pixel 8 on mini-2", "/attention/mini-2%2Fd%2Fquarantined"],
+      ["disconnected", "error", "down-1", "/attention/down-1%2Fdisconnected"],
+    ]);
+  });
+
+  it("shows the newest eight events, newest first, each linked to its page", () => {
+    const events = Array.from({ length: 10 }, (_, index) =>
+      event(
+        index + 1,
+        index === 9 ? "device.quarantined" : "lease.granted",
+        NOW - (10 - index) * 1_000,
+      ),
+    );
+
+    const { activity } = overviewOf({ events, now: NOW, requests: [], workers: fleet });
+
+    expect(activity.map((row) => row.key)).toEqual([
+      "e10",
+      "e9",
+      "e8",
+      "e7",
+      "e6",
+      "e5",
+      "e4",
+      "e3",
+    ]);
+    expect(activity[0]).toMatchObject({
+      name: "device.quarantined",
+      to: "/events/e10",
+      tone: "error",
+    });
+    expect(activity[1]).not.toHaveProperty("tone");
+  });
+
+  it("gives each worker its health square, its slots and its load, and a lost worker no load", () => {
+    const { workers } = overviewOf({ events: [], now: NOW, requests: [], workers: fleet });
+
+    expect(workers.map((row) => [row.name, row.health.tone, row.health.word, row.leases])).toEqual([
+      ["mini-1", "ok", "connected", 2],
+      ["mini-2", "warn", "drained", 0],
+      ["down-1", "error", "disconnected", 0],
+    ]);
+    expect(workers[0]?.slotsLabel).toBe("2 leased, 1 ready, 3 free");
+    expect(workers[2]).not.toHaveProperty("cpu");
+  });
+});
diff --git a/ui/src/model/overview.ts b/ui/src/model/overview.ts
new file mode 100644
index 000000000..9049291d4
--- /dev/null
+++ b/ui/src/model/overview.ts
@@ -0,0 +1,211 @@
+import { eventSummary, eventTone } from "./activity";
+import { attentionItems, attentionTone } from "./attention";
+import type { ConsoleEvent } from "./events";
+import { type DeviceSlot, slotsLabel, workerHealth, workerSlots } from "./fleet";
+import { extremes, leaseHistory, type MinuteCount, minuteLabel } from "./history";
+import { formatBusyPercent, loadGauges } from "./load";
+import { levelOf } from "./load-thresholds";
+import { formatCount } from "./paging";
+import { itemPath } from "./paths";
+import { formatDuration } from "./time";
+import type { Tone, Toned } from "./tones";
+import type { WaitingRequest } from "./waiting";
+import { leasesHeld, type WorkerView, workerName, workerPath } from "./workers";
+
+export interface OverviewTile {
+  readonly label: string;
+  readonly value: string;
+  readonly unit: string;
+  readonly to?: string;
+}
+
+export interface PlatformUse {
+  readonly name: string;
+  readonly running: number;
+  readonly limit: number;
+  readonly leasedPercent: number;
+  readonly readyPercent: number;
+  readonly busyPercent: number;
+}
+
+export interface Gauge {
+  readonly percent: number;
+  readonly text: string;
+  readonly tone: Tone | "neutral";
+}
+
+export interface OverviewWorker {
+  readonly id: string;
+  readonly name: string;
+  readonly to: string;
+  readonly health: Toned;
+  readonly slots: readonly DeviceSlot[];
+  readonly slotsLabel: string;
+  readonly cpu?: Gauge;
+  readonly memory?: Gauge;
+  readonly leases: number;
+}
+
+export interface OverviewItem {
+  readonly key: string;
+  readonly word: string;
+  readonly tone: Tone;
+  readonly subject: string;
+  readonly to: string;
+}
+
+export interface OverviewActivity {
+  readonly key: string;
+  readonly time: string;
+  readonly name: string;
+  readonly tone?: Tone;
+  readonly text: string;
+  readonly to: string;
+}
+
+export interface Overview {
+  readonly tiles: readonly OverviewTile[];
+  readonly minutes: readonly MinuteCount[];
+  readonly chartSummary: string;
+  readonly platforms: readonly PlatformUse[];
+  readonly workers: readonly OverviewWorker[];
+  readonly attention: readonly OverviewItem[];
+  readonly activity: readonly OverviewActivity[];
+}
+
+const ACTIVITY_ROWS = 8;
+const HOUR = 60 * 60 * 1_000;
+
+function percentOf(part: number, whole: number): number {
+  return whole === 0 ? 0 : (part / whole) * 100;
+}
+
+function platformUse(workers: readonly WorkerView[], platform: "ios" | "android"): PlatformUse {
+  const live = workers.filter((worker) => worker.connection === "connected");
+  const limit = live.reduce((sum, worker) => sum + (worker.capacity?.[platform].limit ?? 0), 0);
+  const devices = live.flatMap((worker) =>
+    (worker.devices ?? []).filter((device) => device.spec.platform === platform),
+  );
+  const count = (...states: readonly string[]) =>
+    devices.filter((device) => states.includes(device.state)).length;
+  const leased = count("leased");
+  const ready = count("ready");
+  const busy = count("provisioning", "reclaiming");
+  return {
+    busyPercent: percentOf(busy, limit),
+    leasedPercent: percentOf(leased, limit),
+    limit,
+    name: platform === "ios" ? "iOS" : "Android",
+    readyPercent: percentOf(ready, limit),
+    running: leased + ready + busy,
+  };
+}
+
+function gauge(percent: number | undefined): Gauge | undefined {
+  if (percent === undefined) return undefined;
+  const tone = levelOf(percent);
+  return { percent, text: formatBusyPercent(percent), tone: tone === "idle" ? "neutral" : tone };
+}
+
+function overviewWorker(worker: WorkerView): OverviewWorker {
+  const slots = workerSlots(worker);
+  const gauges =
+    worker.connection === "connected" && worker.load !== undefined ? loadGauges(worker.load) : {};
+  const cpu = gauge(gauges.cpu);
+  const memory = gauge(gauges.memory);
+  return {
+    health: workerHealth(worker),
+    id: worker.id,
+    leases: worker.leases?.length ?? 0,
+    name: workerName(worker),
+    slots,
+    slotsLabel: slotsLabel(slots),
+    to: workerPath(worker.id),
+    ...(cpu === undefined ? {} : { cpu }),
+    ...(memory === undefined ? {} : { memory }),
+  };
+}
+
+function historySummary(minutes: readonly MinuteCount[]): string {
+  const range = extremes(minutes);
+  const current = minutes.at(-1);
+  if (range === undefined || current === undefined) return "";
+  return `Now ${current.count}; highest ${range.highest.count} at ${range.highest.label}; lowest ${range.lowest.count} at ${range.lowest.label}.`;
+}
+
+function tiles(
+  workers: readonly WorkerView[],
+  requests: readonly WaitingRequest[],
+  events: readonly ConsoleEvent[],
+  platforms: readonly PlatformUse[],
+  now: number,
+): readonly OverviewTile[] {
+  const held = leasesHeld(workers);
+  const limit = platforms.reduce((sum, platform) => sum + platform.limit, 0);
+  const connected = workers.filter((worker) => worker.connection === "connected").length;
+  const granted = events.filter(
+    (event) => event.event === "lease.granted" && event.timestamp > now - HOUR,
+  ).length;
+  const oldest = Math.min(...requests.map((request) => request.createdAt));
+  return [
+    { label: "Utilisation", unit: "%", value: String(Math.round(percentOf(held, limit))) },
+    { label: "Leases", to: "/leases", unit: `of ${formatCount(limit)}`, value: formatCount(held) },
+    {
+      label: "Waiting",
+      to: "/waiting",
+      unit: requests.length === 0 ? "none" : `longest ${formatDuration(now - oldest)}`,
+      value: formatCount(requests.length),
+    },
+    {
+      label: "Workers",
+      to: "/workers",
+      unit: `of ${formatCount(workers.length)} up`,
+      value: formatCount(connected),
+    },
+    { label: "Granted", to: "/events", unit: "last hour", value: formatCount(granted) },
+  ];
+}
+
+// why: the overview reads three routes the other pages read too, and every figure on it is worked
+// out here from those, so a figure on the overview and the same figure on its page always agree.
+export function overviewOf(input: {
+  readonly workers: readonly WorkerView[];
+  readonly requests: readonly WaitingRequest[];
+  readonly events: readonly ConsoleEvent[];
+  readonly now: number;
+}): Overview {
+  const { events, now, requests, workers } = input;
+  const platforms = [platformUse(workers, "ios"), platformUse(workers, "android")];
+  const minutes = leaseHistory(leasesHeld(workers), events, now);
+  return {
+    activity: [...events]
+      .sort((a, b) => b.seq - a.seq)
+      .slice(0, ACTIVITY_ROWS)
+      .map((event) => {
+        const tone = eventTone(event.event);
+        return {
+          key: event.id,
+          name: event.event,
+          text: eventSummary(event, workers),
+          time: minuteLabel(event.timestamp),
+          to: itemPath("/events", event.id),
+          ...(tone === undefined ? {} : { tone }),
+        };
+      }),
+    attention: attentionItems(workers).map((item) => ({
+      key: item.key,
+      subject:
+        "device" in item
+          ? `${item.device.spec.model} on ${workerName(item.worker)}`
+          : workerName(item.worker),
+      to: itemPath("/attention", item.key),
+      tone: attentionTone(item.condition),
+      word: item.condition,
+    })),
+    chartSummary: historySummary(minutes),
+    minutes,
+    platforms,
+    tiles: tiles(workers, requests, events, platforms, now),
+    workers: workers.map(overviewWorker),
+  };
+}
diff --git a/ui/src/paging.test.ts b/ui/src/model/paging.test.ts
similarity index 94%
rename from ui/src/paging.test.ts
rename to ui/src/model/paging.test.ts
index be0a8ed12..271cb6656 100644
--- a/ui/src/paging.test.ts
+++ b/ui/src/model/paging.test.ts
@@ -45,9 +45,7 @@ describe("paging", () => {
   });
 
   it("a new page size keeps the first row shown in view", () => {
-    // Rows 51 to 75 at 25 a page; at 50 a page, row 51 starts page 2.
     expect(resized({ page: 3, size: 25 }, 50)).toEqual({ page: 2, size: 50 });
-    // Rows 101 to 200 at 100 a page; at 25 a page, row 101 starts page 5.
     expect(resized({ page: 2, size: 100 }, 25)).toEqual({ page: 5, size: 25 });
   });
 
diff --git a/ui/src/paging.ts b/ui/src/model/paging.ts
similarity index 54%
rename from ui/src/paging.ts
rename to ui/src/model/paging.ts
index 0a36ad2e1..2ded27ecc 100644
--- a/ui/src/paging.ts
+++ b/ui/src/model/paging.ts
@@ -1,45 +1,27 @@
-/**
- * Paging a list in the browser: which page of it shows, read from and written to the page URL's
- * query, so a reload or a shared link opens the same page. Pure, so the rules stay tested; the
- * pager in `pager.tsx` wires them to the URL.
- */
-
-/** The page sizes a list offers, smallest first. The first is the default. */
 export type PageSizes = readonly [number, ...number[]];
 
-/** Every table's sizes. */
 export const TABLE_SIZES: PageSizes = [25, 50, 100];
 
-/** The worker cards' sizes: whole rows of the card grid at two, three and four columns. */
 export const CARD_SIZES: PageSizes = [24, 48, 96];
 
-/** The query keys one list keeps its page and size in. */
 export interface PageKeys {
   readonly page: string;
   readonly size: string;
 }
 
-/**
- * The keys of a list called `name`, or `page` and `size` for the one list a page has. Each list
- * on a page has its own name, so each keeps its own page.
- */
 export function pageKeys(name?: string): PageKeys {
   return name === undefined
     ? { page: "page", size: "size" }
     : { page: `${name}-page`, size: `${name}-size` };
 }
 
-/** A page of a list: its number, counting from 1, and how many rows a page holds. */
 export interface PageAt {
   readonly page: number;
   readonly size: number;
 }
 
-/**
- * The page the query asks for. A size the list does not offer is its default size, and a page
- * that is not a whole number from 1 up is the first page. The page may lie past the end of the
- * list; `lastPage` says where the list ends.
- */
+// why: the query is editable by hand, so a size the list does not offer, or a page that is not a
+// whole number from 1 up, falls back to the default.
 export function readPage(search: string, keys: PageKeys, sizes: PageSizes): PageAt {
   const query = new URLSearchParams(search);
   const size = Number(query.get(keys.size));
@@ -50,15 +32,12 @@ export function readPage(search: string, keys: PageKeys, sizes: PageSizes): Page
   };
 }
 
-/** The last page of `total` rows at `size` a page: 1 for an empty list. */
 export function lastPage(total: number, size: number): number {
   return Math.max(1, Math.ceil(total / size));
 }
 
-/**
- * `search` with the list's page and size set to `at`. The first page and the default size are
- * left out, so a list that was never paged adds nothing to its URL. Every other key is kept.
- */
+// why: the first page and the default size are left out, so a list that was never paged adds
+// nothing to its URL.
 export function writePage(search: string, keys: PageKeys, sizes: PageSizes, at: PageAt): string {
   const query = new URLSearchParams(search);
   if (at.page === 1) query.delete(keys.page);
@@ -69,22 +48,16 @@ export function writePage(search: string, keys: PageKeys, sizes: PageSizes, at:
   return written === "" ? "" : `?${written}`;
 }
 
-/**
- * The page that keeps the first row shown in view when the size changes, as a pager moving from
- * 25 to 50 a page keeps the reader where they were.
- */
 export function resized(at: PageAt, size: number): PageAt {
   return { page: Math.floor(((at.page - 1) * at.size) / size) + 1, size };
 }
 
 const COUNT = new Intl.NumberFormat("en-US");
 
-/** A count with its thousands marked, such as `1,240`. */
 export function formatCount(count: number): string {
   return COUNT.format(count);
 }
 
-/** Which rows a page shows of how many, such as `26–50 of 1,240`. */
 export function rangeOf(at: PageAt, total: number): string {
   const first = Math.min(total, (at.page - 1) * at.size + 1);
   const last = Math.min(total, at.page * at.size);
diff --git a/ui/src/model/paths.test.ts b/ui/src/model/paths.test.ts
new file mode 100644
index 000000000..f24edb4e3
--- /dev/null
+++ b/ui/src/model/paths.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+
+import { itemIdFrom, itemPath } from "./paths";
+
+describe("an item's page path", () => {
+  it("carries any id, a slash or a space included, and reads it back whole", () => {
+    for (const id of ["wrk_1", "wrk 1/dev_2/quarantined", "a%b"]) {
+      expect(itemIdFrom("/attention", itemPath("/attention", id)), id).toBe(id);
+    }
+  });
+
+  it("names no item on the section's own page or on another section's", () => {
+    expect(itemIdFrom("/events", "/events")).toBeUndefined();
+    expect(itemIdFrom("/events", "/events/")).toBeUndefined();
+    expect(itemIdFrom("/events", "/eventsx/1")).toBeUndefined();
+    expect(itemIdFrom("/events", "/leases/1")).toBeUndefined();
+  });
+
+  it("keeps a malformed escape as it was typed", () => {
+    expect(itemIdFrom("/events", "/events/%E0%A4%A")).toBe("%E0%A4%A");
+  });
+});
diff --git a/ui/src/model/paths.ts b/ui/src/model/paths.ts
new file mode 100644
index 000000000..1f9bf108c
--- /dev/null
+++ b/ui/src/model/paths.ts
@@ -0,0 +1,18 @@
+export type Section = "/workers" | "/leases" | "/waiting" | "/attention" | "/events";
+
+export function itemPath(section: Section, id: string): `/${string}` {
+  return `${section}/${encodeURIComponent(id)}`;
+}
+
+// why: ids are opaque and may hold a slash (an attention item's key does), so the whole rest of the
+// path is one id; a malformed escape is kept as typed rather than thrown.
+export function itemIdFrom(section: Section, path: string): string | undefined {
+  if (!path.startsWith(`${section}/`)) return undefined;
+  const rest = path.slice(section.length + 1).replace(/\/$/, "");
+  if (rest === "") return undefined;
+  try {
+    return decodeURIComponent(rest);
+  } catch {
+    return rest;
+  }
+}
diff --git a/ui/src/model/stat.ts b/ui/src/model/stat.ts
new file mode 100644
index 000000000..e747f717f
--- /dev/null
+++ b/ui/src/model/stat.ts
@@ -0,0 +1,5 @@
+export interface Stat {
+  readonly label: string;
+  readonly value: string;
+  readonly caption: string;
+}
diff --git a/ui/src/model/time.ts b/ui/src/model/time.ts
new file mode 100644
index 000000000..07a4c6a56
--- /dev/null
+++ b/ui/src/model/time.ts
@@ -0,0 +1,25 @@
+const SECOND = 1_000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+// why: a negative duration, which a skewed timestamp can produce, shows as `0 s`.
+export function formatDuration(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / SECOND)) * SECOND;
+  if (total < MINUTE) return `${total / SECOND} s`;
+  const units: readonly [number, string][] = [
+    [DAY, "d"],
+    [HOUR, "h"],
+    [MINUTE, "min"],
+    [SECOND, "s"],
+  ];
+  const first = units.findIndex(([size]) => total >= size);
+  const parts: string[] = [];
+  let rest = total;
+  for (const [size, name] of units.slice(first, first + 2)) {
+    const count = Math.floor(rest / size);
+    rest -= count * size;
+    if (count > 0 || parts.length === 0) parts.push(`${count} ${name}`);
+  }
+  return parts.join(" ");
+}
diff --git a/ui/src/status.tsx b/ui/src/model/tones.ts
similarity index 74%
rename from ui/src/status.tsx
rename to ui/src/model/tones.ts
index bcf762391..d397292fa 100644
--- a/ui/src/status.tsx
+++ b/ui/src/model/tones.ts
@@ -1,15 +1,9 @@
-import type { ReactNode } from "react";
-
-/** why: the colour is a second signal, never the only one, and never the accent. */
+// why: the colour is a second signal, never the only one, and never the accent.
 export type Tone = "ok" | "warn" | "error" | "idle";
 
-export function Status({ tone, children }: { readonly tone: Tone; readonly children: ReactNode }) {
-  return (
-    <span className={`status status-${tone}`}>
-      <span className="status-dot" aria-hidden="true" />
-      {children}
-    </span>
-  );
+export interface Toned {
+  readonly word: string;
+  readonly tone: Tone;
 }
 
 type Tones = Readonly<Partial<Record<string, Tone>>>;
@@ -39,7 +33,7 @@ const WAITING_STAGES: Tones = { queued: "idle", starting: "ok" };
  * why: wire input is a claim: a word from a newer daemon this console does not know still shows as
  * itself, in the neutral tone.
  */
-function statusOf(tones: Tones, word: string): { readonly word: string; readonly tone: Tone } {
+function statusOf(tones: Tones, word: string): Toned {
   return { tone: tones[word] ?? "idle", word };
 }
 
diff --git a/ui/src/views/waiting-model.ts b/ui/src/model/waiting.ts
similarity index 58%
rename from ui/src/views/waiting-model.ts
rename to ui/src/model/waiting.ts
index 4d210ddd7..5ffd36d99 100644
--- a/ui/src/views/waiting-model.ts
+++ b/ui/src/model/waiting.ts
@@ -1,14 +1,9 @@
-/**
- * The facts the Waiting view shows, computed from `GET /v1/lease-requests` and `GET /v1/workers`.
- * Pure, so the view stays rendering and these stay tested. The types are the contract's, imported
- * type-only (ADR 0011 §1).
- */
 import type { z } from "zod";
 
 import type { waitingRequestSchema } from "../../../src/contract/schemas";
-import type { Stat } from "../layout";
-import { formatDuration } from "../live/time";
-import { platformName, type WorkerView } from "./workers-model";
+import type { Stat } from "./stat";
+import { formatDuration } from "./time";
+import { platformName, type WorkerView } from "./workers";
 
 export type WaitingRequest = z.infer<typeof waitingRequestSchema>;
 
@@ -16,10 +11,6 @@ export interface WaitingList {
   readonly requests: readonly WaitingRequest[];
 }
 
-/**
- * The device a request asked for, with only the fields it named: `iOS iPhone 16, runtime 18.4,
- * mode slim, image tag google_apis`.
- */
 export function requestedDevice(spec: WaitingRequest["spec"]): string {
   return [
     [platformName(spec.platform), spec.model ?? spec.class]
@@ -33,15 +24,9 @@ export function requestedDevice(spec: WaitingRequest["spec"]): string {
     .join(", ");
 }
 
-/**
- * The worker whose own queue a request waits in: the one it names, or on a single host the one
- * worker, the host itself, whose view lists the same request. `undefined` for a request in a
- * gateway's queue, which no worker holds yet, and for a worker the console has no view of.
- *
- * A single host names no worker on its requests, so the request is found in the host's view by
- * its id and requester. A gateway's own request never matches a worker's: its id comes from the
- * gateway, and a worker lists the copy the gateway sent it under the gateway's requester id.
- */
+// why: a single host names no worker on its requests, so the request is found in the host's view by
+// its id and requester. A gateway's own request never matches a worker's: its id comes from the
+// gateway, and a worker lists the copy the gateway sent it under the gateway's requester id.
 export function waitingOn(
   request: WaitingRequest,
   workers: readonly WorkerView[],
@@ -56,10 +41,6 @@ export function waitingOn(
   );
 }
 
-/**
- * The Waiting view's stat cards: how many requests are waiting, and how long the oldest has,
- * measured against the daemon's `now`.
- */
 export function waitingStats(requests: readonly WaitingRequest[], now: number): readonly Stat[] {
   const oldest = Math.min(...requests.map((request) => request.createdAt));
   return [
diff --git a/ui/src/views/workers-model.test.ts b/ui/src/model/workers.test.ts
similarity index 94%
rename from ui/src/views/workers-model.test.ts
rename to ui/src/model/workers.test.ts
index 7bf955d42..836a26890 100644
--- a/ui/src/views/workers-model.test.ts
+++ b/ui/src/model/workers.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { warmPoolRows, type WarmTarget } from "./workers-model";
+import { warmPoolRows, type WarmTarget } from "./workers";
 
 const REFUSED: WarmTarget = {
   booting: 0,
diff --git a/ui/src/views/workers-model.ts b/ui/src/model/workers.ts
similarity index 64%
rename from ui/src/views/workers-model.ts
rename to ui/src/model/workers.ts
index 25d1bcf0d..5c5d7eb97 100644
--- a/ui/src/views/workers-model.ts
+++ b/ui/src/model/workers.ts
@@ -1,13 +1,7 @@
-/**
- * The facts the workers views show, computed from `GET /v1/workers` (ADR 0013 §1). Pure, so the
- * views stay rendering and these stay tested. The types are the contract's, imported type-only
- * (ADR 0011 §1); the values are still a claim, so every word the daemon sends is shown as it
- * came rather than looked up in a list that could be older than the daemon.
- */
 import type { z } from "zod";
 
 import type { workerViewSchema } from "../../../src/contract/schemas";
-import type { Stat } from "../layout";
+import type { Stat } from "./stat";
 
 export type WorkerView = z.infer<typeof workerViewSchema>;
 export type WorkerDevice = NonNullable<WorkerView["devices"]>[number];
@@ -17,17 +11,15 @@ export interface WorkerList {
   readonly workers: readonly WorkerView[];
 }
 
-/** A worker's name: its label, or its id when it has none. */
 export function workerName(worker: WorkerView): string {
   return worker.label ?? worker.id;
 }
 
-/** The detail page of a worker. Ids are opaque, so the id is encoded. */
+// why: ids are opaque, so the id is encoded.
 export function workerPath(id: string): `/${string}` {
   return `/workers/${encodeURIComponent(id)}`;
 }
 
-/** The worker id a page path names, or `undefined` for the list (`/workers`). */
 export function workerIdFrom(path: string): string | undefined {
   const rest = path.replace(/^\/workers\/?/, "").replace(/\/$/, "");
   if (rest === "") return undefined;
@@ -47,7 +39,7 @@ export function platformName(platform: string): string {
   return PLATFORM_NAMES[platform] ?? platform;
 }
 
-/** `{ running, leased }`, or `undefined` for a worker whose capacity or leases were never read, as a starting one's are not. */
+// why: a starting worker's capacity and leases were never read, so there is nothing to report.
 export function deviceCounts(
   worker: WorkerView,
 ): { readonly running: number; readonly leased: number } | undefined {
@@ -55,10 +47,6 @@ export function deviceCounts(
   return { leased: worker.leases.length, running: worker.capacity.global.running };
 }
 
-/**
- * Capacity per platform, as `simlock worker list` writes it: devices running out of the limit.
- * Empty for a worker whose capacity was never read.
- */
 export function capacityByPlatform(
   worker: WorkerView,
 ): readonly { readonly platform: string; readonly running: number; readonly limit: number }[] {
@@ -70,16 +58,10 @@ export function capacityByPlatform(
   ];
 }
 
-/** How many leases the workers hold between them now: where the lease chart starts from. */
 export function leasesHeld(workers: readonly WorkerView[]): number {
   return workers.reduce((sum, worker) => sum + (worker.leases?.length ?? 0), 0);
 }
 
-/**
- * The Workers view's stat cards: workers connected of all, devices running of all, leases held
- * and requests waiting in the workers' own queues. A worker whose capacity was never read counts
- * no devices running, as its card says "Not reported".
- */
 export function workersStats(workers: readonly WorkerView[]): readonly Stat[] {
   const connected = workers.filter((worker) => worker.connection === "connected").length;
   const devices = workers.reduce((sum, worker) => sum + (worker.devices?.length ?? 0), 0);
@@ -93,18 +75,12 @@ export function workersStats(workers: readonly WorkerView[]): readonly Stat[] {
   ];
 }
 
-/** The workers ranked by how many leases each holds now, most first; ties keep the daemon's order. */
 export function busiestWorkers(workers: readonly WorkerView[]): readonly WorkerView[] {
   return [...workers].sort((a, b) => (b.leases?.length ?? 0) - (a.leases?.length ?? 0));
 }
 
-/**
- * When a device entered the state it is in, where the data says: a leased device since its
- * lease was granted, a device mid-provisioning or mid-reclaim from the age the worker reported
- * at `lastSeenAt`. That age is read only from a connected worker: a gateway moves `lastSeenAt`
- * when a worker disconnects, without reading its devices again. `undefined` for any other
- * state, which the worker view carries no time for.
- */
+// why: the age is read only from a connected worker: a gateway moves `lastSeenAt` when a worker
+// disconnects, without reading its devices again.
 export function stateEnteredAt(device: WorkerDevice, worker: WorkerView): number | undefined {
   if (device.state === "leased") {
     return worker.leases?.find((lease) => lease.deviceId === device.id)?.grantedAt;
@@ -116,11 +92,9 @@ export function stateEnteredAt(device: WorkerDevice, worker: WorkerView): number
 export type WarmTarget = NonNullable<WorkerView["warmPool"]>["targets"][number];
 export type WarmPoolRow = WarmTarget & { readonly key: string };
 
-/**
- * A row's identity: its kind, and which of the rows of that same kind it is. The worker sends no
- * id, and two refused entries of one kind (or the same entry twice, with the pool off) look alike,
- * so the kind alone would hand them one id and the table would drop or repeat them on a refresh.
- */
+// why: the worker sends no id, and two refused entries of one kind (or the same entry twice, with
+// the pool off) look alike, so the kind alone would give them one id and the table would drop or
+// repeat them on a refresh.
 export function warmPoolRows(targets: readonly WarmTarget[]): WarmPoolRow[] {
   const seen = new Map<string, number>();
   return targets.map((target) => {
diff --git a/ui/src/pager.tsx b/ui/src/pager.tsx
deleted file mode 100644
index e8bcd0b92..000000000
--- a/ui/src/pager.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * The pager under a long list, and the page it shows, kept in the page URL's query
- * (`?page=3&size=50`) so a reload or a shared link opens the same page.
- */
-import { useEffect } from "react";
-
-import {
-  lastPage,
-  type PageAt,
-  pageKeys,
-  type PageSizes,
-  rangeOf,
-  readPage,
-  resized,
-  writePage,
-} from "./paging";
-import { setSearch, useSearch } from "./router";
-
-/** Where a list is, and how to move it. */
-export interface Paging {
-  /** The page shown: never past the last page. */
-  readonly at: PageAt;
-  /** How many rows the whole list has. */
-  readonly total: number;
-  readonly sizes: PageSizes;
-  /** The number of the last page. */
-  readonly last: number;
-  /** Shows `to`, and writes it to the URL as a new history entry. */
-  readonly go: (to: PageAt) => void;
-}
-
-/**
- * The page of a list of `total` rows that the URL asks for. A list keeps its page under its own
- * `name` (see `pageKeys`), so two lists on one page move apart. When the list shrinks below the
- * page asked for, the last page shows, and the URL is corrected to say so.
- */
-export function usePaging(options: {
-  readonly name?: string;
-  readonly sizes: PageSizes;
-  readonly total: number;
-}): Paging {
-  const { name, sizes, total } = options;
-  const keys = pageKeys(name);
-  const asked = readPage(useSearch(), keys, sizes);
-  const last = lastPage(total, asked.size);
-  const at = { page: Math.min(asked.page, last), size: asked.size };
-  const moved = at.page !== asked.page;
-  useEffect(() => {
-    if (!moved) return;
-    const corrected = { page: last, size: asked.size };
-    setSearch(writePage(window.location.search, pageKeys(name), sizes, corrected), {
-      replace: true,
-    });
-  }, [moved, last, asked.size, name, sizes]);
-  return {
-    at,
-    go: (to) => setSearch(writePage(window.location.search, keys, sizes, to)),
-    last,
-    sizes,
-    total,
-  };
-}
-
-/**
- * The pager under a list: which rows show of how many ("1–25 of 1,240"), the page size, and
- * previous and next with the page number between them. Hidden when the whole list fits on the
- * page. At either end the button that would leave the list says it is unavailable and does
- * nothing, but keeps its place, so focus stays put for a keyboard. Every list, a table or the
- * worker cards, moves by these rules alone: a page at a time, and to a new size at the page
- * that keeps its first row in view.
- */
-export function Pager(props: {
-  /** What the list is, to name the pager: "All leases" makes "All leases pages". */
-  readonly label: string;
-  readonly paging: Paging;
-}) {
-  const { label, paging } = props;
-  const { at, go, last, sizes, total } = paging;
-  if (total <= at.size) return null;
-  const first = at.page <= 1;
-  const end = at.page >= last;
-  return (
-    <nav className="pager" aria-label={`${label} pages`}>
-      <p className="pager-range">{rangeOf(at, total)}</p>
-      <label className="pager-size">
-        Per page
-        <select
-          value={at.size}
-          onChange={(event) => go(resized(at, Number(event.currentTarget.value)))}
-        >
-          {sizes.map((size) => (
-            <option key={size} value={size}>
-              {size}
-            </option>
-          ))}
-        </select>
-      </label>
-      <div className="pager-steps">
-        <button
-          className="button button-secondary"
-          type="button"
-          aria-disabled={first}
-          onClick={() => {
-            if (!first) go({ ...at, page: at.page - 1 });
-          }}
-        >
-          Previous
-        </button>
-        <span className="pager-page">
-          Page {at.page} of {last}
-        </span>
-        <button
-          className="button button-secondary"
-          type="button"
-          aria-disabled={end}
-          onClick={() => {
-            if (!end) go({ ...at, page: at.page + 1 });
-          }}
-        >
-          Next
-        </button>
-      </div>
-    </nav>
-  );
-}
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
deleted file mode 100644
index 95db52b59..000000000
--- a/ui/src/router.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { type AnchorHTMLAttributes, type MouseEvent, useSyncExternalStore } from "react";
-
-/**
- * Real page URLs (`/workers`), not hashes (ADR 0011 §3): the daemon answers every path with no
- * file extension with the console's page, so a reload or a pasted link lands on the same view.
- */
-
-const listeners = new Set<() => void>();
-
-function subscribe(listener: () => void): () => void {
-  listeners.add(listener);
-  window.addEventListener("popstate", listener);
-  return () => {
-    listeners.delete(listener);
-    window.removeEventListener("popstate", listener);
-  };
-}
-
-/** The current path, re-rendering on every navigation and on the browser's back and forward. */
-export function usePath(): string {
-  return useSyncExternalStore(subscribe, () => window.location.pathname);
-}
-
-/**
- * The page URL's query, such as `?page=3&size=50`, re-rendering when it changes. Empty where
- * there is no page URL, as when a test renders a view to a string.
- */
-export function useSearch(): string {
-  return useSyncExternalStore(
-    subscribe,
-    () => window.location.search,
-    () => "",
-  );
-}
-
-/**
- * Sets the current page's query to `search`, keeping its path. `replace` overwrites the
- * history entry instead of adding one, for a correction the operator did not ask for.
- */
-export function setSearch(search: string, options: { readonly replace?: boolean } = {}): void {
-  const { hash, pathname } = window.location;
-  navigate(`${pathname}${search}${hash}`, options);
-}
-
-export function navigate(to: string, options: { readonly replace?: boolean } = {}): void {
-  if (options.replace === true) window.history.replaceState(null, "", to);
-  else window.history.pushState(null, "", to);
-  for (const listener of listeners) listener();
-}
-
-interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick"> {
-  readonly to: string;
-}
-
-const MODIFIER_KEYS = ["altKey", "ctrlKey", "metaKey", "shiftKey"] as const;
-
-type ClickKeys = Pick<MouseEvent, "button" | (typeof MODIFIER_KEYS)[number]>;
-
-/** A primary click with no modifier key: the browser would open the link in this tab. */
-export function opensInThisTab(event: ClickKeys): boolean {
-  return event.button === 0 && !MODIFIER_KEYS.some((key) => event[key]);
-}
-
-/** An ordinary link that navigates without a reload; a modified click still opens a new tab. */
-export function Link({ to, ...rest }: LinkProps) {
-  const follow = (event: MouseEvent<HTMLAnchorElement>) => {
-    if (!opensInThisTab(event)) return;
-    event.preventDefault();
-    navigate(to);
-  };
-  return <a {...rest} href={to} onClick={follow} />;
-}
diff --git a/ui/src/screen/viewer.test.tsx b/ui/src/screen/viewer.test.tsx
deleted file mode 100644
index 53839208b..000000000
--- a/ui/src/screen/viewer.test.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { ApiError, type ApiClient } from "../api";
-import { ConsoleProvider } from "../console-context";
-import type { Session } from "../session";
-import { refusalOf, ScreenPane } from "./viewer";
-
-/**
- * why: these are the sentences whoever pressed the button is left with, and each is the answer to a
- * different daemon refusal — so each is pinned to the status and the words that produce it, including
- * what the daemon's own refusal contributes.
- */
-describe("what a refused stream says", () => {
-  it("says which devices can be streamed when the daemon answers that this one cannot", () => {
-    const refused = new ApiError(
-      415,
-      undefined,
-      "A physical iPhone's screen cannot be streamed; only a simulator's can",
-    );
-
-    expect(refusalOf(refused)).toBe(
-      "This device cannot be streamed. A live screen is captured from a simulator or an emulator, not from a physical phone.",
-    );
-  });
-
-  it("keeps the daemon's own reason when it named one, and says what else to check", () => {
-    const refused = new ApiError(404, undefined, "Unknown lease: lse_1");
-
-    expect(refusalOf(refused)).toBe(
-      "Unknown lease: lse_1 A stream is only offered where capabilities.stream.enabled is on, and only for a lease that is still held.",
-    );
-  });
-
-  it("keeps a capture program's own words when the worker could not run one", () => {
-    const refused = new ApiError(
-      500,
-      undefined,
-      "The screen capture produced no stream (the capture tool exited with code 1)",
-    );
-
-    expect(refusalOf(refused)).toBe(
-      "The screen capture produced no stream (the capture tool exited with code 1)",
-    );
-  });
-
-  it("keeps the daemon's words for a refusal this console has no advice about", () => {
-    expect(refusalOf(new ApiError(401, "UNAUTHENTICATED", "Unknown bearer token"))).toBe(
-      "Unknown bearer token",
-    );
-  });
-
-  it("says what the browser itself threw, rather than that something went wrong", () => {
-    expect(refusalOf(new TypeError("Failed to fetch"))).toBe("Failed to fetch");
-    expect(refusalOf("nope")).toBe("nope");
-  });
-});
-
-describe("the pane before anything is asked for", () => {
-  // why: a pane rendered for a claim about its markup never talks to a daemon, so the services it
-  // reads are there to satisfy the context, and a call into either would be the finding.
-  const services = {
-    api: {} as unknown as ApiClient,
-    session: {} as unknown as Session,
-  };
-  const html = renderToStaticMarkup(
-    <ConsoleProvider {...services}>
-      <ScreenPane leaseId="lse_1" />
-    </ConsoleProvider>,
-  );
-
-  it("offers the one control a screen has, and says nothing runs while it is off", () => {
-    expect(html).toContain("Show screen");
-    expect(html).toContain("Nothing runs while this is off.");
-    expect(html).toContain("No picture while this is off.");
-  });
-
-  it("shows the state as a word, and every figure it cannot yet fill as missing", () => {
-    const words = [...html.matchAll(/<dt>([^<]*)<\/dt><dd[^>]*>(.*?)<\/dd>/g)].map(
-      ([, label = "", value = ""]) =>
-        `${label}=${value
-          .split(/<[^>]*>/)
-          .join("")
-          .trim()}`,
-    );
-
-    expect(words).toEqual([
-      "State=off",
-      "Picture=—",
-      "Frames=—",
-      "Rate=—",
-      "Bandwidth=—",
-      "Dropped=—",
-    ]);
-  });
-});
diff --git a/ui/src/screen/viewer.tsx b/ui/src/screen/viewer.tsx
deleted file mode 100644
index 46433fdd4..000000000
--- a/ui/src/screen/viewer.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * why: one button turns a device's picture on and off and nothing else controls it, because this
- * surface has no command of its own to send — the request *is* the on command and aborting it *is* the
- * off one. So the pane's lifecycle is the capture's lifecycle: closing the page, navigating away,
- * signing out and pressing Stop are four ways of doing the same single thing, and a capture cannot
- * outlive the pane that asked for it. That is also why nothing here polls, retries, or holds a stream
- * open across a navigation.
- */
-import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
-
-import { ApiError } from "../api";
-import { useApi } from "../console-context";
-import { Panel } from "../layout";
-import { Status, type Tone } from "../status";
-import { readStream, type StreamMeta, type StreamStats } from "./stream";
-
-type Phase = "idle" | "starting" | "live" | "stopped";
-
-const EMPTY: StreamStats = {
-  dropped: 0,
-  error: undefined,
-  fed: 0,
-  framesPerSecond: 0,
-  kilobitsPerSecond: 0,
-  painted: 0,
-};
-
-// why: a worker answers a stream's headers only once its capture wrote its first frame, and it may
-// take up to 75 s to give up (an emulator's push 30 s, its server 15 s, the first frame 30 s); a
-// console that gave up at the API's usual 10 s would show its own timeout instead of the worker's
-// reason.
-const STREAM_HEAD_TIMEOUT_MS = 90_000;
-
-function useScreenStream(leaseId: string, canvas: RefObject<HTMLCanvasElement | null>) {
-  const api = useApi();
-  const controller = useRef<AbortController | undefined>(undefined);
-  const [phase, setPhase] = useState<Phase>("idle");
-  const [meta, setMeta] = useState<StreamMeta | undefined>(undefined);
-  const [stats, setStats] = useState<StreamStats>(EMPTY);
-  const [note, setNote] = useState<string | undefined>(undefined);
-
-  const stop = useCallback(() => {
-    controller.current?.abort();
-    controller.current = undefined;
-    setPhase("stopped");
-  }, []);
-
-  // why: leaving the page stops the capture with the same abort the Stop button performs — a page that
-  // was navigated away from must not leave a device being filmed for a viewer that is no longer there.
-  // Navigating to another lease is that same event, and asks for the other lease's picture instead.
-  useEffect(() => stop, [leaseId, stop]);
-
-  const start = useCallback(() => {
-    const abort = new AbortController();
-    controller.current = abort;
-    setNote(undefined);
-    setMeta(undefined);
-    setStats(EMPTY);
-    setPhase("starting");
-    void (async () => {
-      try {
-        const { body } = await api.stream(
-          `/v1/stream/leases/${encodeURIComponent(leaseId)}`,
-          abort.signal,
-          STREAM_HEAD_TIMEOUT_MS,
-        );
-        setPhase("live");
-        await readStream(
-          body,
-          {
-            onEnd: (reason) => {
-              // why: a stream that ended because this pane asked it to says nothing — the operator
-              // pressed Stop, and telling them the stream they stopped has stopped is noise.
-              if (abort.signal.aborted) return;
-              setNote(reason ?? "The stream ended.");
-              setPhase("stopped");
-            },
-            onFrame: (frame) => {
-              paint(canvas.current, frame.displayWidth, frame.displayHeight, frame);
-              frame.close();
-            },
-            onImage: (image) => paint(canvas.current, image.width, image.height, image),
-            onMeta: setMeta,
-            onStats: setStats,
-          },
-          abort.signal,
-        );
-      } catch (error) {
-        if (abort.signal.aborted) return;
-        setNote(refusalOf(error));
-        setPhase("stopped");
-      }
-    })();
-  }, [api, leaseId]);
-
-  return { meta, note, phase, start, stats, stop };
-}
-
-export function ScreenPane({ leaseId }: { readonly leaseId: string }) {
-  const canvas = useRef<HTMLCanvasElement | null>(null);
-  const { meta, note, phase, start, stats, stop } = useScreenStream(leaseId, canvas);
-  const live = phase === "live" || phase === "starting";
-  const failure = stats.error ?? (phase === "stopped" ? note : undefined);
-  // why: the canvas is mounted as soon as a picture has been asked for rather than when the first frame
-  // arrives — a frame can arrive before React has painted anything, and a pane that mounts its canvas
-  // in reply to that frame has nothing to draw the first picture on. It goes away with the stream
-  // rather than staying: a last frame kept on the page after Stop looks like a live device and shows a
-  // screen its viewer has already asked not to see.
-  const shown = live;
-  const waiting = shown && stats.painted === 0;
-  return (
-    <Panel
-      title="Screen"
-      description="A live view of the device, captured on the worker that holds it. Nothing runs while this is off."
-      actions={
-        <button className="button button-secondary" onClick={live ? stop : start} type="button">
-          {live ? "Stop" : "Show screen"}
-        </button>
-      }
-    >
-      <ScreenPicture canvas={canvas} meta={meta} phase={phase} shown={shown} waiting={waiting} />
-      <ScreenFacts failed={failure !== undefined} meta={meta} phase={phase} stats={stats} />
-      {note === undefined ? null : (
-        <p className="refusal" role="alert">
-          {note}
-        </p>
-      )}
-    </Panel>
-  );
-}
-
-function ScreenPicture({
-  canvas,
-  meta,
-  phase,
-  shown,
-  waiting,
-}: {
-  readonly canvas: RefObject<HTMLCanvasElement | null>;
-  readonly meta: StreamMeta | undefined;
-  readonly phase: Phase;
-  readonly shown: boolean;
-  readonly waiting: boolean;
-}) {
-  return (
-    <>
-      {shown ? (
-        <canvas
-          aria-label="The leased device's screen"
-          className="screen"
-          height={meta?.height ?? 0}
-          ref={canvas}
-          width={meta?.width ?? 0}
-        />
-      ) : (
-        <p className="muted">No picture while this is off.</p>
-      )}
-      {waiting ? (
-        <p className="muted">
-          {phase === "starting"
-            ? "Starting the capture on the worker."
-            : "Waiting for the first frame."}
-        </p>
-      ) : null}
-    </>
-  );
-}
-
-function ScreenFacts({
-  failed,
-  meta,
-  phase,
-  stats,
-}: {
-  readonly failed: boolean;
-  readonly meta: StreamMeta | undefined;
-  readonly phase: Phase;
-  readonly stats: StreamStats;
-}) {
-  const tone: Tone = failed ? "error" : phase === "live" ? "ok" : "idle";
-  return (
-    <dl className="facts">
-      <div>
-        <dt>State</dt>
-        <dd>
-          <Status tone={tone}>{stateWord(phase, failed)}</Status>
-        </dd>
-      </div>
-      <div>
-        <dt>Picture</dt>
-        <dd className="mono">{meta === undefined ? "—" : pictureOf(meta)}</dd>
-      </div>
-      <div>
-        <dt>Frames</dt>
-        <dd className="mono">{counted(stats, (frames) => `${frames}`)}</dd>
-      </div>
-      <div>
-        <dt>Rate</dt>
-        <dd className="mono">{counted(stats, () => `${stats.framesPerSecond.toFixed(1)} fps`)}</dd>
-      </div>
-      <div>
-        <dt>Bandwidth</dt>
-        <dd className="mono">
-          {counted(stats, () => `${Math.round(stats.kilobitsPerSecond)} kbit/s`)}
-        </dd>
-      </div>
-      <div>
-        <dt>Dropped</dt>
-        <dd className="mono">{counted(stats, () => `${stats.dropped}`)}</dd>
-      </div>
-    </dl>
-  );
-}
-
-function counted(stats: StreamStats, show: (frames: number) => string): string {
-  return stats.painted === 0 ? "—" : show(stats.painted);
-}
-
-function pictureOf(meta: StreamMeta): string {
-  return `${meta.width} × ${meta.height} ${meta.codec}`;
-}
-
-function stateWord(phase: Phase, failed: boolean): string {
-  if (failed) return "failed";
-  if (phase === "live") return "live";
-  if (phase === "starting") return "starting";
-  return "off";
-}
-
-/**
- * why: the daemon names its reason in its own words and those words are kept, because they say what its
- * operator has to fix; the status only decides what to add, since a refusal the console can explain
- * better than the daemon did — a device that cannot be streamed at all — would otherwise leave the
- * reader with a sentence that does not say what to do.
- */
-export function refusalOf(error: unknown): string {
-  if (!(error instanceof ApiError)) {
-    return error instanceof Error ? error.message : String(error);
-  }
-  // why: an unknown route and an unknown lease are the same answer, because a daemon with
-  // `capabilities.stream.enabled` off does not mount the route at all and answers like any path it has not heard of.
-  if (error.status === 404) {
-    return `${error.message} A stream is only offered where capabilities.stream.enabled is on, and only for a lease that is still held.`;
-  }
-  if (error.status === 415) {
-    return "This device cannot be streamed. A live screen is captured from a simulator or an emulator, not from a physical phone.";
-  }
-  return error.message;
-}
-
-function paint(
-  target: HTMLCanvasElement | null,
-  width: number,
-  height: number,
-  source: CanvasImageSource,
-): void {
-  // why: the canvas goes away with the stream, and a frame the decoder was still holding arrives after
-  // that; drawing into nothing is what a stream ending looks like from here.
-  if (target === null) return;
-  if (target.width !== width || target.height !== height) {
-    target.width = width;
-    target.height = height;
-  }
-  target.getContext("2d")?.drawImage(source, 0, 0);
-}
diff --git a/ui/src/screens/attention/index.tsx b/ui/src/screens/attention/index.tsx
new file mode 100644
index 000000000..9d5244139
--- /dev/null
+++ b/ui/src/screens/attention/index.tsx
@@ -0,0 +1,9 @@
+import { Empty, Page } from "../../ds";
+
+export function AttentionScreen() {
+  return (
+    <Page title="Attention">
+      <Empty>Coming soon.</Empty>
+    </Page>
+  );
+}
diff --git a/ui/src/screens/events/index.tsx b/ui/src/screens/events/index.tsx
new file mode 100644
index 000000000..74bb8be59
--- /dev/null
+++ b/ui/src/screens/events/index.tsx
@@ -0,0 +1,9 @@
+import { Empty, Page } from "../../ds";
+
+export function EventsScreen() {
+  return (
+    <Page title="Events">
+      <Empty>Coming soon.</Empty>
+    </Page>
+  );
+}
diff --git a/ui/src/screens/leases/index.tsx b/ui/src/screens/leases/index.tsx
new file mode 100644
index 000000000..085f9f908
--- /dev/null
+++ b/ui/src/screens/leases/index.tsx
@@ -0,0 +1,9 @@
+import { Empty, Page } from "../../ds";
+
+export function LeasesScreen() {
+  return (
+    <Page title="Leases">
+      <Empty>Coming soon.</Empty>
+    </Page>
+  );
+}
diff --git a/ui/src/screens/not-found.tsx b/ui/src/screens/not-found.tsx
new file mode 100644
index 000000000..2d9a9e064
--- /dev/null
+++ b/ui/src/screens/not-found.tsx
@@ -0,0 +1,12 @@
+import { Link, Page } from "../ds";
+
+export function NotFoundScreen() {
+  return (
+    <Page title="Page not found">
+      <p className="muted">The console has no page at this address.</p>
+      <p>
+        <Link to="/">Go to the overview</Link>
+      </p>
+    </Page>
+  );
+}
diff --git a/ui/src/screens/overview/index.tsx b/ui/src/screens/overview/index.tsx
new file mode 100644
index 000000000..4fb576282
--- /dev/null
+++ b/ui/src/screens/overview/index.tsx
@@ -0,0 +1,195 @@
+import "./overview.css";
+
+import {
+  Empty,
+  Link,
+  Loaded,
+  Meter,
+  MinuteChart,
+  MinuteTable,
+  Page,
+  Panel,
+  Row,
+  ShareBar,
+  SlotLegend,
+  Slots,
+  StatRow,
+  StatTile,
+  Status,
+  StatusDot,
+} from "../../ds";
+import {
+  type Gauge,
+  type Overview,
+  type OverviewActivity,
+  type OverviewItem,
+  type OverviewWorker,
+  type PlatformUse,
+  useOverview,
+} from "../../state/overview";
+
+export function OverviewScreen() {
+  const view = useOverview();
+  return (
+    <Page title="Overview">
+      <Loaded view={view}>{(overview) => <OverviewBody overview={overview} />}</Loaded>
+    </Page>
+  );
+}
+
+export function OverviewBody({ overview }: { readonly overview: Overview }) {
+  return (
+    <>
+      <StatRow label="Fleet at a glance">
+        {overview.tiles.map((tile) => (
+          <StatTile key={tile.label} {...tile} />
+        ))}
+      </StatRow>
+      <Row>
+        <Panel title="Leases held, last hour">
+          <MinuteChart
+            kind="area"
+            title="Leases held, last hour"
+            unit="leases held"
+            minutes={overview.minutes}
+          />
+          <p className="chart-summary">{overview.chartSummary}</p>
+          <MinuteTable minutes={overview.minutes} heading="Leases held" />
+        </Panel>
+        <Panel title="Capacity">
+          <div className="capacity">
+            {overview.platforms.map((platform) => (
+              <PlatformBar key={platform.name} platform={platform} />
+            ))}
+            <SlotLegend />
+          </div>
+        </Panel>
+      </Row>
+      <Row>
+        <Panel
+          title="Workers"
+          flush
+          actions={<Link to="/workers">All {overview.workers.length}</Link>}
+        >
+          <WorkerTable workers={overview.workers} />
+        </Panel>
+        <div className="overview-side">
+          <Panel title="Attention" flush>
+            <AttentionList items={overview.attention} />
+          </Panel>
+          <Panel title="Activity" flush actions={<Link to="/events">All events</Link>}>
+            <ActivityList rows={overview.activity} />
+          </Panel>
+        </div>
+      </Row>
+    </>
+  );
+}
+
+function PlatformBar({ platform }: { readonly platform: PlatformUse }) {
+  return (
+    <div className="platform">
+      <p className="platform-head">
+        <span>{platform.name}</span>
+        <span className="mono">
+          {platform.running} <span className="muted">of {platform.limit} running</span>
+        </span>
+      </p>
+      <ShareBar
+        shares={[
+          { kind: "leased", percent: platform.leasedPercent },
+          { kind: "ready", percent: platform.readyPercent },
+          { kind: "busy", percent: platform.busyPercent },
+        ]}
+      />
+    </div>
+  );
+}
+
+function GaugeCell({ gauge }: { readonly gauge: Gauge | undefined }) {
+  if (gauge === undefined) return <span className="gauge muted">—</span>;
+  return (
+    <span className="gauge">
+      <Meter percent={gauge.percent} tone={gauge.tone} size="thin" />
+      <span className="mono">{gauge.text}</span>
+    </span>
+  );
+}
+
+function WorkerTable({ workers }: { readonly workers: readonly OverviewWorker[] }) {
+  if (workers.length === 0) return <Empty>No workers have connected.</Empty>;
+  return (
+    <table className="table worker-table">
+      <thead>
+        <tr>
+          <th scope="col">Worker</th>
+          <th scope="col">Devices</th>
+          <th scope="col">CPU</th>
+          <th scope="col">Memory</th>
+          <th scope="col" className="num">
+            Leases
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {workers.map((worker) => (
+          <tr key={worker.id}>
+            <td data-label="Worker">
+              <span className="worker-name">
+                <StatusDot tone={worker.health.tone} label={worker.health.word} />
+                <Link to={worker.to}>{worker.name}</Link>
+              </span>
+            </td>
+            <td data-label="Devices">
+              <Slots slots={worker.slots} label={worker.slotsLabel} />
+            </td>
+            <td data-label="CPU">
+              <GaugeCell gauge={worker.cpu} />
+            </td>
+            <td data-label="Memory">
+              <GaugeCell gauge={worker.memory} />
+            </td>
+            <td data-label="Leases" className="num">
+              {worker.leases}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function AttentionList({ items }: { readonly items: readonly OverviewItem[] }) {
+  if (items.length === 0) return <Empty>Nothing needs attention.</Empty>;
+  return (
+    <ul className="overview-list">
+      {items.map((item) => (
+        <li key={item.key}>
+          <Link to={item.to} className="overview-row">
+            <Status tone={item.tone}>{item.word}</Status>
+            <span className="overview-row-aside">{item.subject}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ActivityList({ rows }: { readonly rows: readonly OverviewActivity[] }) {
+  if (rows.length === 0) return <Empty>No events in the last hour.</Empty>;
+  return (
+    <ul className="overview-list">
+      {rows.map((row) => (
+        <li key={row.key}>
+          <Link to={row.to} className="overview-row activity-row">
+            <span className="mono muted">{row.time}</span>
+            <span className={row.tone === undefined ? "mono" : `mono event-${row.tone}`}>
+              {row.name}
+            </span>
+            <span className="activity-text">{row.text}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/ui/src/screens/overview/overview.css b/ui/src/screens/overview/overview.css
new file mode 100644
index 000000000..028184bfd
--- /dev/null
+++ b/ui/src/screens/overview/overview.css
@@ -0,0 +1,142 @@
+.capacity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.platform {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.platform-head {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.overview-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.worker-table td {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+}
+
+.worker-table th:nth-child(2) {
+  width: 30%;
+}
+
+.worker-table th:nth-child(3),
+.worker-table th:nth-child(4) {
+  width: 18%;
+}
+
+.worker-table th.num {
+  width: 5.5rem;
+}
+
+.worker-name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.worker-name a {
+  overflow: hidden;
+  color: var(--text);
+  font-weight: 500;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worker-name a:hover {
+  color: var(--accent-text);
+}
+
+.gauge {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 2.5rem;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.gauge .mono {
+  font-size: var(--text-xs);
+  text-align: right;
+}
+
+.overview-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.overview-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  font-size: var(--text-sm);
+  text-decoration: none;
+  transition: background-color var(--duration);
+}
+
+.overview-list li:last-child .overview-row {
+  border-bottom: 0;
+}
+
+.overview-row:hover {
+  background: var(--field);
+  color: var(--text);
+}
+
+.overview-row-aside {
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.activity-row {
+  display: grid;
+  grid-template-columns: 3rem 9rem minmax(0, 1fr);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+
+.activity-row .mono {
+  overflow: hidden;
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.activity-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.event-error {
+  color: var(--status-error);
+}
+
+.event-warn {
+  color: var(--status-warn);
+}
diff --git a/ui/src/screens/sign-in.css b/ui/src/screens/sign-in.css
new file mode 100644
index 000000000..67ba6d974
--- /dev/null
+++ b/ui/src/screens/sign-in.css
@@ -0,0 +1,48 @@
+.sign-in {
+  min-height: 100vh;
+}
+
+.sign-in-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border);
+}
+
+.byline {
+  padding: var(--space-1) var(--space-2);
+  background: var(--chip);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+}
+
+.sign-in-main {
+  display: grid;
+  justify-items: center;
+  padding: var(--space-12) var(--space-4);
+}
+
+.sign-in-panel {
+  width: 100%;
+  max-width: 440px;
+}
+
+.sign-in-form {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (min-width: 768px) {
+  .sign-in-top {
+    padding: var(--space-4) var(--space-6);
+  }
+}
diff --git a/ui/src/screens/sign-in.tsx b/ui/src/screens/sign-in.tsx
new file mode 100644
index 000000000..45a6d0192
--- /dev/null
+++ b/ui/src/screens/sign-in.tsx
@@ -0,0 +1,58 @@
+import "./sign-in.css";
+
+import { type FormEvent, useState } from "react";
+
+import { Button, Panel, Wordmark } from "../ds";
+import { useSignIn } from "../state/sign-in";
+
+export function SignInScreen() {
+  const [token, setToken] = useState("");
+  const { checking, refusal, submit } = useSignIn();
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    void submit(token.trim());
+  };
+  const refused = refusal !== undefined;
+
+  return (
+    <div className="sign-in">
+      <header className="sign-in-top">
+        <Wordmark />
+        <span className="byline">By Callstack</span>
+      </header>
+      <main className="sign-in-main">
+        <div className="sign-in-panel">
+          <Panel title="Sign in" level={1}>
+            <form className="sign-in-form" onSubmit={onSubmit} noValidate>
+              <label htmlFor="token">Operator token</label>
+              <input
+                id="token"
+                name="token"
+                type="password"
+                autoComplete="off"
+                spellCheck={false}
+                value={token}
+                onChange={(event) => setToken(event.target.value)}
+                aria-describedby={refused ? "token-hint token-refusal" : "token-hint"}
+                aria-invalid={refused || undefined}
+              />
+              <p id="token-hint" className="hint">
+                Create one with <code>simlock token create --role operator</code>.
+              </p>
+              {refusal === undefined ? null : (
+                <p id="token-refusal" className="refusal" role="alert">
+                  {refusal}
+                </p>
+              )}
+              <div className="form-actions">
+                <Button variant="primary" type="submit" disabled={checking}>
+                  {checking ? "Checking…" : "Sign in"}
+                </Button>
+              </div>
+            </form>
+          </Panel>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/ui/src/screens/waiting/index.tsx b/ui/src/screens/waiting/index.tsx
new file mode 100644
index 000000000..0a4fc9a57
--- /dev/null
+++ b/ui/src/screens/waiting/index.tsx
@@ -0,0 +1,9 @@
+import { Empty, Page } from "../../ds";
+
+export function WaitingScreen() {
+  return (
+    <Page title="Waiting">
+      <Empty>Coming soon.</Empty>
+    </Page>
+  );
+}
diff --git a/ui/src/screens/workers/index.tsx b/ui/src/screens/workers/index.tsx
new file mode 100644
index 000000000..a5eea26fe
--- /dev/null
+++ b/ui/src/screens/workers/index.tsx
@@ -0,0 +1,9 @@
+import { Empty, Page } from "../../ds";
+
+export function WorkersScreen() {
+  return (
+    <Page title="Workers">
+      <Empty>Coming soon.</Empty>
+    </Page>
+  );
+}
diff --git a/ui/src/shell.test.tsx b/ui/src/shell.test.tsx
deleted file mode 100644
index 8f5a75296..000000000
--- a/ui/src/shell.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { TabBar } from "./shell";
-import { VIEWS } from "./views/index";
-
-/** Each tab as its path, its text, and whether it is marked current, in the order rendered. */
-function tabs(html: string) {
-  return [...html.matchAll(/<a([^>]*)>(.*?)<\/a>/g)].map(([, attributes = "", inner = ""]) => ({
-    current: attributes.includes('aria-current="page"'),
-    path: /href="([^"]*)"/.exec(attributes)?.[1],
-    text: inner
-      .replace(/<[^>]+>/g, " ")
-      .replace(/\s+/g, " ")
-      .trim(),
-    count: /<span class="nav-count">(\d+)/.exec(inner)?.[1],
-  }));
-}
-
-const attention = VIEWS.find((view) => view.path === "/attention");
-
-describe("the tab bar", () => {
-  it("the shell shows the five tabs and marks the current one", () => {
-    const html = renderToStaticMarkup(<TabBar views={VIEWS} current={attention} counts={{}} />);
-
-    expect(html).toContain('<nav class="tabs" aria-label="Console">');
-    expect(tabs(html)).toEqual([
-      { count: undefined, current: false, path: "/workers", text: "Workers" },
-      { count: undefined, current: false, path: "/leases", text: "Leases" },
-      { count: undefined, current: false, path: "/waiting", text: "Waiting" },
-      { count: undefined, current: true, path: "/attention", text: "Attention" },
-      { count: undefined, current: false, path: "/events", text: "Events" },
-    ]);
-
-    // A page no view has, such as a mistyped link, marks no tab.
-    const none = renderToStaticMarkup(<TabBar views={VIEWS} current={undefined} counts={{}} />);
-    expect(tabs(none).filter((tab) => tab.current)).toEqual([]);
-  });
-
-  it("the attention count shows on its tab and hides at zero", () => {
-    const shown = tabs(
-      renderToStaticMarkup(
-        <TabBar views={VIEWS} current={VIEWS[0]} counts={{ "/attention": 2 }} />,
-      ),
-    );
-    expect(shown.map((tab) => tab.count)).toEqual([
-      undefined,
-      undefined,
-      undefined,
-      "2",
-      undefined,
-    ]);
-    // A screen reader hears what the number counts.
-    expect(shown[3]?.text).toBe("Attention 2 items");
-
-    const one = tabs(
-      renderToStaticMarkup(
-        <TabBar views={VIEWS} current={VIEWS[0]} counts={{ "/attention": 1 }} />,
-      ),
-    );
-    expect(one[3]?.text).toBe("Attention 1 item");
-
-    for (const count of [0, undefined]) {
-      const hidden = renderToStaticMarkup(
-        <TabBar views={VIEWS} current={VIEWS[0]} counts={{ "/attention": count }} />,
-      );
-      expect(hidden).not.toContain("nav-count");
-      expect(tabs(hidden)[3]?.text).toBe("Attention");
-    }
-  });
-});
diff --git a/ui/src/shell.tsx b/ui/src/shell.tsx
deleted file mode 100644
index aedfa7508..000000000
--- a/ui/src/shell.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useEffect } from "react";
-
-import { useApi, useSession } from "./console-context";
-import { Brand } from "./layout";
-import { ConnectionBanner } from "./live/connection-banner";
-import { Link, navigate, usePath } from "./router";
-import { useAttentionCount } from "./views/attention";
-import { VIEWS, type View, viewFor } from "./views/index";
-import { NotFound } from "./views/not-found";
-
-/** The signed-in console: the header, the tab bar from `VIEWS`, and the current view. */
-export function Shell() {
-  const api = useApi();
-  const session = useSession();
-  const path = usePath();
-  const view = viewFor(path);
-  const attention = useAttentionCount();
-
-  // ADR 0011 §6: a 401 at any time signs the operator out. A tab reloaded with a token that has
-  // since been revoked finds out here, before any view asks for data.
-  useEffect(() => {
-    api.getJson("/v1/workers").catch(() => undefined);
-  }, [api]);
-
-  useEffect(() => {
-    if (path === "/" && view !== undefined) navigate(view.path, { replace: true });
-  }, [path, view]);
-
-  useEffect(() => {
-    document.title = view === undefined ? "Simlock" : `${view.label} · Simlock`;
-  }, [view]);
-
-  return (
-    <div className="shell">
-      <a className="skip-link" href="#main">
-        Skip to content
-      </a>
-      <header className="topbar">
-        <Brand />
-        <div className="topbar-end">
-          <ConnectionBanner />
-          <button
-            className="button button-secondary"
-            type="button"
-            onClick={() => session.signOut()}
-          >
-            Sign out
-          </button>
-        </div>
-      </header>
-      <TabBar views={VIEWS} current={view} counts={{ "/attention": attention }} />
-      <main id="main" className="main" tabIndex={-1}>
-        {view === undefined ? <NotFound /> : <view.Component />}
-      </main>
-    </div>
-  );
-}
-
-/**
- * One tab per view, in the order of `views`. The current one is marked for the eye with an
- * underline and for a screen reader with `aria-current`. A view with a count above zero in
- * `counts` shows it on its tab; at zero, or with none, the tab shows no number.
- */
-export function TabBar(props: {
-  readonly views: readonly View[];
-  readonly current: View | undefined;
-  readonly counts: Readonly<Partial<Record<View["path"], number | undefined>>>;
-}) {
-  const { counts, current, views } = props;
-  return (
-    <nav className="tabs" aria-label="Console">
-      <ul>
-        {views.map((entry) => {
-          const count = counts[entry.path];
-          return (
-            <li key={entry.path}>
-              <Link to={entry.path} aria-current={entry === current ? "page" : undefined}>
-                {entry.label}
-                {count === undefined || count === 0 ? null : (
-                  <>
-                    {" "}
-                    <span className="nav-count">
-                      {count}
-                      <span className="visually-hidden">{count === 1 ? " item" : " items"}</span>
-                    </span>
-                  </>
-                )}
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-}
diff --git a/ui/src/sign-in.tsx b/ui/src/sign-in.tsx
deleted file mode 100644
index 29a93fe19..000000000
--- a/ui/src/sign-in.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { type FormEvent, useState } from "react";
-
-import type { Fetch } from "./api";
-import { useSession } from "./console-context";
-import { Brand } from "./layout";
-import { checkToken, refusalMessage } from "./sign-in-check";
-
-/** Checks a pasted token and signs in with it, or keeps the reason it was refused. */
-function useSignIn(fetch: Fetch) {
-  const session = useSession();
-  const [checking, setChecking] = useState(false);
-  const [refusal, setRefusal] = useState<string | undefined>(undefined);
-  // No guard against a second submit while checking: the disabled button blocks it, the Enter
-  // key included, since a form with a disabled submit button does not submit implicitly.
-  const submit = async (token: string) => {
-    if (token === "") return;
-    setChecking(true);
-    setRefusal(undefined);
-    const outcome = await checkToken(token, fetch);
-    setChecking(false);
-    if (outcome.kind === "signed-in") session.signIn(token);
-    else setRefusal(refusalMessage(outcome));
-  };
-  return { checking, refusal, submit };
-}
-
-/** The screen a tab without a token sees (ADR 0011 §6). */
-export function SignIn({ fetch }: { readonly fetch: Fetch }) {
-  const [token, setToken] = useState("");
-  const { checking, refusal, submit } = useSignIn(fetch);
-  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    void submit(token.trim());
-  };
-  const refused = refusal !== undefined;
-
-  return (
-    <div className="sign-in">
-      <header className="topbar">
-        <Brand />
-      </header>
-      <main className="sign-in-main">
-        <div className="panel sign-in-panel">
-          <div className="panel-header">
-            <div>
-              <h1 className="panel-title">Sign in</h1>
-              <p className="panel-description">The console needs an operator token.</p>
-            </div>
-          </div>
-          <form className="panel-body" onSubmit={onSubmit} noValidate>
-            <label htmlFor="token">Operator token</label>
-            <input
-              id="token"
-              name="token"
-              type="password"
-              autoComplete="off"
-              spellCheck={false}
-              value={token}
-              onChange={(event) => setToken(event.target.value)}
-              aria-describedby={refused ? "token-hint token-refusal" : "token-hint"}
-              aria-invalid={refused || undefined}
-            />
-            <p id="token-hint" className="hint">
-              Create one with <code>simlock token create --role operator</code>.
-            </p>
-            <Refusal message={refusal} />
-            <div className="form-actions">
-              <button className="button" type="submit" disabled={checking}>
-                {checking ? "Checking…" : "Sign in"}
-              </button>
-            </div>
-          </form>
-        </div>
-      </main>
-    </div>
-  );
-}
-
-function Refusal({ message }: { readonly message: string | undefined }) {
-  if (message === undefined) return null;
-  return (
-    <p id="token-refusal" className="refusal" role="alert">
-      {message}
-    </p>
-  );
-}
diff --git a/ui/src/state/events.ts b/ui/src/state/events.ts
new file mode 100644
index 000000000..83a5469f7
--- /dev/null
+++ b/ui/src/state/events.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+import { EventFeed } from "../data/event-feed";
+import { browserClock } from "../data/live/browser";
+import type { ResourceState } from "../data/live/connection";
+import type { ConsoleEvent } from "../model/events";
+import { useLiveEvents, useStreamOpened } from "./live";
+import { useApi } from "./services";
+
+// why: each screen that reads events holds its own feed, filled from the last hour and then the
+// stream while it is on screen, so a screen opened later still starts from a full hour.
+export function useRecentEvents(): ResourceState<readonly ConsoleEvent[]> {
+  const api = useApi();
+  const [feed] = useState(() => new EventFeed((path) => api.getJson(path), browserClock));
+  useLiveEvents(feed.streamEvent);
+  useStreamOpened(feed.streamOpened);
+  useEffect(() => feed.start(), [feed]);
+  return useSyncExternalStore(feed.subscribe, feed.snapshot);
+}
diff --git a/ui/src/live/live-context.tsx b/ui/src/state/live.tsx
similarity index 72%
rename from ui/src/live/live-context.tsx
rename to ui/src/state/live.tsx
index a166e85da..c903e230d 100644
--- a/ui/src/live/live-context.tsx
+++ b/ui/src/state/live.tsx
@@ -1,11 +1,3 @@
-/**
- * The live data layer behind React hooks. The shell mounts one `LiveProvider` while the operator
- * is signed in; unmounting it, as signing out does, closes the stream and stops every timer.
- *
- * A view reads a route with `useLiveResource(path)`: while the view is on screen, that route is
- * one "the current screen reads", refetched on every event and every second (ADR 0013 §3).
- * `useNow()` ticks once a second for durations, and `useConnection()` is what the banner shows.
- */
 import {
   createContext,
   type ReactNode,
@@ -16,9 +8,9 @@ import {
   useSyncExternalStore,
 } from "react";
 
-import type { ApiPath } from "../api";
-import { useApi } from "../console-context";
-import { browserClock, documentVisibility } from "./browser";
+import type { ApiPath } from "../data/api";
+import { useApi } from "./services";
+import { browserClock, documentVisibility } from "../data/live/browser";
 import {
   type Clock,
   type ConnectionState,
@@ -26,9 +18,8 @@ import {
   type ResourceState,
   type StreamEvent,
   type StreamOpened,
-} from "./connection";
+} from "../data/live/connection";
 
-/** The browser's time and the daemon's, at the latest tick. */
 export interface Now {
   readonly browser: number;
   readonly server: number;
@@ -67,7 +58,6 @@ function useLive(): Live {
   return live;
 }
 
-/** What the console has for `path`, kept fresh while the calling view is on screen. */
 export function useLiveResource<T>(path: ApiPath): ResourceState<T> {
   const { connection } = useLive();
   const subscribe = useCallback(
@@ -86,22 +76,16 @@ export function useConnection(): ConnectionState {
   );
 }
 
-/** Now, by the browser and by the daemon, re-rendering once a second (ADR 0013 §4). */
 export function useNow(): Now {
   const { ticker } = useLive();
   return useSyncExternalStore(ticker.subscribe, ticker.now);
 }
 
-/** Calls `listener` for every event the stream delivers while the calling view is on screen. */
 export function useLiveEvents(listener: (event: StreamEvent) => void): void {
   const { connection } = useLive();
   useEffect(() => connection.onEvent(listener), [connection, listener]);
 }
 
-/**
- * Calls `listener` each time the stream opens, with how long it was closed, so a view can load
- * what it missed (ADR 0013 §2, §5).
- */
 export function useStreamOpened(listener: (opened: StreamOpened) => void): void {
   const { connection } = useLive();
   useEffect(() => connection.onStreamOpened(listener), [connection, listener]);
@@ -113,10 +97,6 @@ interface Ticker {
   readonly dispose: () => void;
 }
 
-/**
- * One timer for every duration on screen, running while anything reads it. The connection
- * banner does, on every signed-in page, for the data's age.
- */
 function createTicker(clock: Clock, serverNow: () => number): Ticker {
   const listeners = new Set<() => void>();
   const read = (): Now => ({ browser: clock.now(), server: serverNow() });
diff --git a/ui/src/state/overview.ts b/ui/src/state/overview.ts
new file mode 100644
index 000000000..89e3282a8
--- /dev/null
+++ b/ui/src/state/overview.ts
@@ -0,0 +1,37 @@
+import type { LoadView } from "../ds/loaded";
+import { overviewOf, type Overview } from "../model/overview";
+import type { WaitingList } from "../model/waiting";
+import type { WorkerList } from "../model/workers";
+import { useRecentEvents } from "./events";
+import { useLiveResource, useNow } from "./live";
+import { bothViews, loadView, mapView } from "./resource";
+
+export type {
+  Overview,
+  OverviewActivity,
+  OverviewItem,
+  OverviewTile,
+  OverviewWorker,
+  Gauge,
+  PlatformUse,
+} from "../model/overview";
+
+export function useOverview(): LoadView<Overview> {
+  const workers = loadView(useLiveResource<WorkerList>("/v1/workers"));
+  const asked = loadView(useLiveResource<WaitingList>("/v1/lease-requests"));
+  // why: a daemon that keeps no queue of its own answers 501; the overview then counts no waiting
+  // requests instead of hiding the whole fleet behind "not available".
+  const waiting: LoadView<WaitingList> =
+    asked.kind === "unsupported" ? { data: { requests: [] }, kind: "ready" } : asked;
+  const events = loadView(useRecentEvents());
+  const now = useNow();
+  const reads = bothViews(bothViews(workers, waiting), events);
+  return mapView(reads, ([[workerList, waitingList], recent]) =>
+    overviewOf({
+      events: recent,
+      now: now.server,
+      requests: waitingList.requests,
+      workers: workerList.workers,
+    }),
+  );
+}
diff --git a/ui/src/state/paging.ts b/ui/src/state/paging.ts
new file mode 100644
index 000000000..6bf00ef74
--- /dev/null
+++ b/ui/src/state/paging.ts
@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+import type { Paging } from "../ds/pager";
+import {
+  lastPage,
+  type PageAt,
+  pageKeys,
+  type PageSizes,
+  rangeOf,
+  readPage,
+  resized,
+  writePage,
+} from "../model/paging";
+import { setSearch, useSearch } from "./router";
+
+export function usePaging(options: {
+  readonly name?: string;
+  readonly sizes: PageSizes;
+  readonly total: number;
+}): Paging {
+  const { name, sizes, total } = options;
+  const keys = pageKeys(name);
+  const asked = readPage(useSearch(), keys, sizes);
+  const last = lastPage(total, asked.size);
+  const at = { page: Math.min(asked.page, last), size: asked.size };
+  const moved = at.page !== asked.page;
+  useEffect(() => {
+    if (!moved) return;
+    const corrected = { page: last, size: asked.size };
+    setSearch(writePage(window.location.search, pageKeys(name), sizes, corrected), {
+      replace: true,
+    });
+  }, [moved, last, asked.size, name, sizes]);
+  const go = (to: PageAt) => setSearch(writePage(window.location.search, keys, sizes, to));
+  return {
+    go: (page) => go({ ...at, page }),
+    last,
+    page: at.page,
+    range: rangeOf(at, total),
+    resize: (size) => go(resized(at, size)),
+    size: at.size,
+    sizes,
+    total,
+  };
+}
diff --git a/ui/src/state/resource.ts b/ui/src/state/resource.ts
new file mode 100644
index 000000000..9a5d1b6cf
--- /dev/null
+++ b/ui/src/state/resource.ts
@@ -0,0 +1,46 @@
+import type { LoadView } from "../ds/loaded";
+import { ApiError } from "../data/api";
+import type { ResourceState } from "../data/live/connection";
+
+function isUnsupportedHere(error: unknown): boolean {
+  return (
+    error instanceof ApiError && error.status === 501 && error.code === "UNSUPPORTED_IN_WORKER_MODE"
+  );
+}
+
+function refusalOf(error: unknown): string {
+  return error instanceof ApiError ? error.message : "The daemon's answer could not be read.";
+}
+
+// why: a route a single host does not answer (`501` `UNSUPPORTED_IN_WORKER_MODE`) is not an error
+// there: the screen says it is not available, in place of its content.
+export function loadView<T>(state: ResourceState<T>): LoadView<T> {
+  const { data, error } = state;
+  if (isUnsupportedHere(error)) return { kind: "unsupported" };
+  if (data === undefined) {
+    return error === undefined
+      ? { kind: "loading" }
+      : { kind: "refused", message: refusalOf(error) };
+  }
+  return error === undefined
+    ? { data, kind: "ready" }
+    : { data, kind: "ready", refusal: refusalOf(error) };
+}
+
+export function mapView<T, U>(view: LoadView<T>, map: (data: T) => U): LoadView<U> {
+  if (view.kind !== "ready") return view;
+  const data = map(view.data);
+  return view.refusal === undefined
+    ? { data, kind: "ready" }
+    : { data, kind: "ready", refusal: view.refusal };
+}
+
+// why: a screen built from two routes shows nothing until both have answered; the first refusal
+// wins, so the operator reads one reason rather than two.
+export function bothViews<A, B>(a: LoadView<A>, b: LoadView<B>): LoadView<readonly [A, B]> {
+  if (a.kind !== "ready") return a;
+  if (b.kind !== "ready") return b;
+  const refusal = a.refusal ?? b.refusal;
+  const data = [a.data, b.data] as const;
+  return refusal === undefined ? { data, kind: "ready" } : { data, kind: "ready", refusal };
+}
diff --git a/ui/src/state/router.ts b/ui/src/state/router.ts
new file mode 100644
index 000000000..cb349378f
--- /dev/null
+++ b/ui/src/state/router.ts
@@ -0,0 +1,41 @@
+import { useSyncExternalStore } from "react";
+
+// why: the daemon answers every path with no file extension with the console's page, so a reload or
+// a pasted link lands on the same view.
+
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  window.addEventListener("popstate", listener);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("popstate", listener);
+  };
+}
+
+export function usePath(): string {
+  return useSyncExternalStore(subscribe, () => window.location.pathname);
+}
+
+// why: empty where there is no page URL, as when a test renders a view to a string.
+export function useSearch(): string {
+  return useSyncExternalStore(
+    subscribe,
+    () => window.location.search,
+    () => "",
+  );
+}
+
+// why: `replace` overwrites the history entry instead of adding one, for a correction the operator
+// did not ask for.
+export function setSearch(search: string, options: { readonly replace?: boolean } = {}): void {
+  const { hash, pathname } = window.location;
+  navigate(`${pathname}${search}${hash}`, options);
+}
+
+export function navigate(to: string, options: { readonly replace?: boolean } = {}): void {
+  if (options.replace === true) window.history.replaceState(null, "", to);
+  else window.history.pushState(null, "", to);
+  for (const listener of listeners) listener();
+}
diff --git a/ui/src/console-context.tsx b/ui/src/state/services.tsx
similarity index 57%
rename from ui/src/console-context.tsx
rename to ui/src/state/services.tsx
index 820269056..187237a3c 100644
--- a/ui/src/console-context.tsx
+++ b/ui/src/state/services.tsx
@@ -1,18 +1,21 @@
 import { createContext, type ReactNode, useContext } from "react";
 
-import type { ApiClient } from "./api";
-import type { Session } from "./session";
+import type { ApiClient, Fetch } from "../data/api";
+import type { Preferences } from "../data/preferences";
+import type { Session } from "../data/session";
 
 interface ConsoleServices {
   readonly api: ApiClient;
+  readonly fetch: Fetch;
+  readonly preferences: Preferences;
   readonly session: Session;
 }
 
 const ConsoleContext = createContext<ConsoleServices | undefined>(undefined);
 
 export function ConsoleProvider(props: ConsoleServices & { readonly children: ReactNode }) {
-  const { api, children, session } = props;
-  return <ConsoleContext.Provider value={{ api, session }}>{children}</ConsoleContext.Provider>;
+  const { children, ...services } = props;
+  return <ConsoleContext.Provider value={services}>{children}</ConsoleContext.Provider>;
 }
 
 function useServices(): ConsoleServices {
@@ -21,7 +24,6 @@ function useServices(): ConsoleServices {
   return services;
 }
 
-/** The daemon's API for the signed-in operator. The live data layer reads every route with it. */
 export function useApi(): ApiClient {
   return useServices().api;
 }
@@ -29,3 +31,11 @@ export function useApi(): ApiClient {
 export function useSession(): Session {
   return useServices().session;
 }
+
+export function useFetch(): Fetch {
+  return useServices().fetch;
+}
+
+export function usePreferences(): Preferences {
+  return useServices().preferences;
+}
diff --git a/ui/src/state/shell.ts b/ui/src/state/shell.ts
new file mode 100644
index 000000000..baf1c6ce6
--- /dev/null
+++ b/ui/src/state/shell.ts
@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+
+import type { ConnectionPhase } from "../data/live/connection";
+import { attentionItems } from "../model/attention";
+import { formatDuration } from "../model/time";
+import type { Toned } from "../model/tones";
+import type { WorkerList } from "../model/workers";
+import { useConnection, useLiveResource, useNow } from "./live";
+import { useApi, useSession } from "./services";
+
+export function useAttentionCount(): number | undefined {
+  const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers;
+  return workers === undefined ? undefined : attentionItems(workers).length;
+}
+
+// why: a 401 at any time signs the operator out; a tab reloaded with a token since revoked finds out
+// here, before any screen asks for data.
+export function useTokenCheck(): void {
+  const api = useApi();
+  useEffect(() => {
+    api.getJson("/v1/workers").catch(() => undefined);
+  }, [api]);
+}
+
+export function useSignOut(): () => void {
+  const session = useSession();
+  return () => session.signOut();
+}
+
+const PHASES: Readonly<Record<ConnectionPhase, Toned>> = {
+  connected: { tone: "ok", word: "Connected" },
+  disconnected: { tone: "error", word: "Reconnecting" },
+  starting: { tone: "warn", word: "Daemon is starting" },
+};
+
+// why: the data's age shows only while reconnecting; while the daemon starts it is about to answer.
+export function useConnectionStatus(): Toned & { readonly age?: string } {
+  const state = useConnection();
+  const now = useNow();
+  const shown = PHASES[state.phase];
+  if (state.phase !== "disconnected" || state.answeredAt === undefined) return shown;
+  return { ...shown, age: formatDuration(now.browser - state.answeredAt) };
+}
diff --git a/ui/src/state/sidebar.ts b/ui/src/state/sidebar.ts
new file mode 100644
index 000000000..58cf8f449
--- /dev/null
+++ b/ui/src/state/sidebar.ts
@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+import { usePreferences } from "./services";
+
+const WIDE_FROM = "(min-width: 1280px)";
+
+function wideByDefault(): boolean {
+  return typeof window.matchMedia !== "function" || window.matchMedia(WIDE_FROM).matches;
+}
+
+// why: the operator decides the sidebar's width and every page keeps it; with no choice made, a
+// window too narrow for the sidebar, a list and an inspector side by side starts it collapsed.
+export function useSidebar(): { readonly collapsed: boolean; readonly toggle: () => void } {
+  const preferences = usePreferences();
+  const [collapsed, setCollapsed] = useState(() => {
+    const saved = preferences.sidebar();
+    return saved === undefined ? !wideByDefault() : saved === "narrow";
+  });
+  return {
+    collapsed,
+    toggle: () => {
+      const next = !collapsed;
+      preferences.setSidebar(next ? "narrow" : "wide");
+      setCollapsed(next);
+    },
+  };
+}
diff --git a/ui/src/state/sign-in.ts b/ui/src/state/sign-in.ts
new file mode 100644
index 000000000..abefc11a7
--- /dev/null
+++ b/ui/src/state/sign-in.ts
@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+import { checkToken, refusalMessage } from "../data/sign-in-check";
+import { useFetch, useSession } from "./services";
+
+export function useSignIn() {
+  const fetch = useFetch();
+  const session = useSession();
+  const [checking, setChecking] = useState(false);
+  const [refusal, setRefusal] = useState<string | undefined>(undefined);
+  // why: no guard against a second submit while checking: the disabled button blocks it, the Enter
+  // key included, since a form with a disabled submit button does not submit implicitly.
+  const submit = async (token: string) => {
+    if (token === "") return;
+    setChecking(true);
+    setRefusal(undefined);
+    const outcome = await checkToken(token, fetch);
+    setChecking(false);
+    if (outcome.kind === "signed-in") session.signIn(token);
+    else setRefusal(refusalMessage(outcome));
+  };
+  return { checking, refusal, submit };
+}
diff --git a/ui/src/styles.css b/ui/src/styles.css
deleted file mode 100644
index 8b0cbfcef..000000000
--- a/ui/src/styles.css
+++ /dev/null
@@ -1,1289 +0,0 @@
-/*
- * The console's design tokens and components. docs/internal/DESIGN.md is the guide these
- * follow; change both together.
- */
-
-:root {
-  color-scheme: light dark;
-
-  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
-
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-md: 1rem;
-  --text-lg: 1.25rem;
-  --text-xl: 1.75rem;
-  --text-2xl: 2rem;
-
-  --label-tracking: 0.08em;
-
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-12: 48px;
-
-  --radius: 0;
-  --focus-width: 2px;
-  --duration: 120ms;
-
-  /* Light theme. */
-  --bg: #f8f8f7;
-  --surface: #f1f1ef;
-  --field: #e9e9e7;
-  --chip: #e6e6e3;
-  --border: #dededb;
-  --border-strong: #85857f;
-  --text: #111110;
-  --text-muted: #5a5a55;
-  --accent: #f76b15;
-  --accent-hover: #e2560a;
-  --on-accent: #111110;
-  --accent-text: #b93d0b;
-  --selection: #fed7aa;
-
-  --status-ok: #15803d;
-  --status-warn: #a16207;
-  --status-error: #b91c1c;
-  --status-idle: #57534e;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #0e0e0f;
-    --surface: #161618;
-    --field: #1e1e21;
-    --chip: #232326;
-    --border: #2b2b2f;
-    --border-strong: #75757d;
-    --text: #f2f2f0;
-    --text-muted: #a1a1a8;
-    --accent: #ff7a1a;
-    --accent-hover: #ff9442;
-    --on-accent: #0e0e0f;
-    --accent-text: #ff8c42;
-    --selection: #7c2d12;
-
-    --status-ok: #4ade80;
-    --status-warn: #facc15;
-    --status-error: #f87171;
-    --status-idle: #a8a29e;
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-}
-
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: var(--text-md);
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-
-::selection {
-  background: var(--selection);
-  color: var(--text);
-}
-
-h1,
-h2 {
-  margin: 0;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  line-height: 1.25;
-}
-
-h1 {
-  font-size: var(--text-xl);
-}
-
-p {
-  margin: 0 0 var(--space-3);
-}
-
-code {
-  font-family: var(--font-mono);
-  overflow-wrap: anywhere;
-}
-
-a {
-  color: var(--accent-text);
-}
-
-a:hover {
-  color: var(--text);
-}
-
-:focus-visible {
-  outline: var(--focus-width) solid var(--accent-text);
-  outline-offset: 2px;
-}
-
-.muted {
-  color: var(--text-muted);
-}
-
-.mono {
-  font-family: var(--font-mono);
-  overflow-wrap: anywhere;
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/* A label: mono, uppercase, letter-spaced. Tabs, stat labels, table headers and buttons. */
-
-.button,
-.tabs a,
-.chip,
-.stat-label,
-.table th,
-.chart-data summary {
-  font-family: var(--font-mono);
-  font-weight: 500;
-  letter-spacing: var(--label-tracking);
-  text-transform: uppercase;
-}
-
-/* Buttons. Primary is filled orange with dark text, secondary is outlined, quiet is text only. */
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  padding: 0 var(--space-4);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: var(--text-sm);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background-color var(--duration),
-    border-color var(--duration),
-    color var(--duration);
-}
-
-.button:hover {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
-  color: var(--on-accent);
-}
-
-.button:disabled {
-  cursor: progress;
-  opacity: 0.6;
-}
-
-.button-secondary {
-  border-color: var(--border-strong);
-  background: transparent;
-  color: var(--text);
-}
-
-.button-secondary:hover {
-  border-color: var(--text);
-  background: var(--surface);
-  color: var(--text);
-}
-
-.button-quiet {
-  border-color: transparent;
-  background: transparent;
-  color: var(--text);
-}
-
-.button-quiet:hover {
-  border-color: transparent;
-  background: var(--surface);
-  color: var(--text);
-}
-
-/* A button that does nothing here, such as Next on the last page. It keeps its place and its
- * focus; its text and edge go quiet. */
-.button[aria-disabled="true"],
-.button[aria-disabled="true"]:hover {
-  border-color: var(--border);
-  background: transparent;
-  color: var(--text-muted);
-  cursor: default;
-}
-
-/* Inputs: a grey fill and a 1px border. */
-
-label {
-  font-size: var(--text-sm);
-  font-weight: 500;
-}
-
-input {
-  min-height: 44px;
-  width: 100%;
-  padding: 0 var(--space-3);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  background: var(--field);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-}
-
-/* A select draws its own chevron, the same in every browser and theme: two gradients that meet
- * in a V, in the text's colour, 12px in from the right edge. Gradients are CSS, not images, so
- * the CSP's `img-src 'self'` has nothing to refuse. The right padding keeps the value clear of
- * it. */
-select {
-  appearance: none;
-  min-height: 40px;
-  padding: 0 calc(var(--space-3) + 20px) 0 var(--space-3);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  background-color: var(--field);
-  background-image:
-    linear-gradient(45deg, transparent 50%, var(--text) 50%),
-    linear-gradient(135deg, var(--text) 50%, transparent 50%);
-  background-position:
-    right calc(var(--space-3) + 5px) center,
-    right var(--space-3) center;
-  background-repeat: no-repeat;
-  background-size: 5px 5px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  cursor: pointer;
-}
-
-input[aria-invalid="true"] {
-  border-color: var(--status-error);
-}
-
-.hint {
-  margin: 0 0 var(--space-2);
-  color: var(--text-muted);
-  font-size: var(--text-sm);
-}
-
-.refusal {
-  margin: 0 0 var(--space-2);
-  color: var(--status-error);
-  font-size: var(--text-sm);
-  font-weight: 500;
-}
-
-/* The header: the wordmark in an orange block and its chip on the left; the connection and
- * sign-out on the right. */
-
-.topbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3) var(--space-4);
-  padding: var(--space-4);
-}
-
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.wordmark {
-  padding: 0 var(--space-1);
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: var(--text-lg);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1.3;
-  text-transform: uppercase;
-}
-
-.chip {
-  padding: var(--space-1) var(--space-2);
-  background: var(--chip);
-  color: var(--text);
-  font-size: var(--text-xs);
-  line-height: 1.25;
-}
-
-.topbar-end {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  gap: var(--space-3);
-}
-
-/* The connection: a bordered box with the state as a word and its colour. */
-.connection {
-  display: flex;
-  align-items: center;
-  min-height: 40px;
-  padding: var(--space-1) var(--space-4);
-  border: 1px solid var(--border);
-  background: var(--bg);
-  font-size: var(--text-sm);
-}
-
-.skip-link {
-  position: absolute;
-  left: var(--space-2);
-  top: -100px;
-  padding: var(--space-2) var(--space-3);
-  background: var(--bg);
-  border: 1px solid var(--accent-text);
-  z-index: 10;
-}
-
-.skip-link:focus {
-  top: var(--space-2);
-}
-
-/* The tab bar: one tab per view, the current one underlined in orange. When the tabs do not
- * fit, as on a phone, it scrolls sideways inside itself; the page does not. */
-
-.tabs {
-  border-bottom: 1px solid var(--border);
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-
-.tabs ul {
-  display: flex;
-  width: max-content;
-  margin: 0;
-  padding: 0 var(--space-4);
-  list-style: none;
-}
-
-.tabs a {
-  /* Holds the count's hidden words, so they scroll with the tab and never widen the page. */
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: 48px;
-  padding: 0 var(--space-3);
-  border-bottom: 2px solid transparent;
-  color: var(--text-muted);
-  font-size: var(--text-sm);
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.tabs a:hover {
-  color: var(--text);
-}
-
-.tabs a[aria-current="page"] {
-  border-bottom-color: var(--accent);
-  color: var(--text);
-}
-
-.tabs a:focus-visible {
-  outline-offset: -2px;
-}
-
-/* A count on a tab, such as how many items need attention. A number, not a status: no status
- * colour, and never the accent. */
-.nav-count {
-  padding: 0 var(--space-1);
-  border: 1px solid var(--border-strong);
-  color: var(--text);
-  font-size: var(--text-xs);
-  letter-spacing: 0;
-}
-
-.main {
-  min-width: 0;
-  padding: var(--space-6) var(--space-4) var(--space-12);
-}
-
-.main:focus {
-  outline: none;
-}
-
-.view {
-  display: grid;
-  gap: var(--space-4);
-}
-
-/* A page header: the title and a muted subtitle, actions on the right. */
-
-.page-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-2);
-}
-
-.page-heading {
-  min-width: 0;
-}
-
-.page-heading h1 {
-  overflow-wrap: anywhere;
-}
-
-.page-subtitle {
-  margin: var(--space-1) 0 0;
-  color: var(--text-muted);
-}
-
-.page-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-}
-
-/* Stat cards: a mono label, a big number, a small caption. */
-
-.stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
-  gap: var(--space-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.stat {
-  min-width: 0;
-  padding: var(--space-4) var(--space-6) var(--space-6);
-  border: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.stat p {
-  margin: 0;
-}
-
-.stat-label {
-  color: var(--text-muted);
-  font-size: var(--text-xs);
-}
-
-.stat-value {
-  margin-top: var(--space-2);
-  font-size: var(--text-xl);
-  font-variant-numeric: tabular-nums;
-  font-weight: 500;
-  letter-spacing: -0.02em;
-  line-height: 1.25;
-}
-
-.stat-caption {
-  margin-top: var(--space-1);
-  color: var(--text-muted);
-  font-size: var(--text-sm);
-  overflow-wrap: anywhere;
-}
-
-/* Panels: a card with a header (a title, a description, actions) over its body. */
-
-/* Positioned, so what a table hides off-screen on a phone stays inside the panel. */
-.panel {
-  position: relative;
-  min-width: 0;
-  border: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.panel-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-4) var(--space-6);
-  border-bottom: 1px solid var(--border);
-}
-
-.panel-title {
-  font-size: var(--text-md);
-}
-
-.panel-description {
-  margin: var(--space-1) 0 0;
-  color: var(--text-muted);
-  font-size: var(--text-sm);
-}
-
-.panel-body {
-  padding: var(--space-4) var(--space-6);
-}
-
-.panel-body > :last-child {
-  margin-bottom: 0;
-}
-
-/* A table fills its panel edge to edge. */
-.panel-body > .table,
-.panel-body > .chart-data .table {
-  width: calc(100% + 2 * var(--space-6));
-  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-6));
-}
-
-.panel-body > .chart-data .table {
-  margin-top: 0;
-  border-top: 1px solid var(--border);
-}
-
-.panel-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--space-4);
-}
-
-/* Cards: one per worker. */
-
-.cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
-  gap: var(--space-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.card {
-  min-width: 0;
-  padding: var(--space-4) var(--space-6) var(--space-6);
-  border: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.card-title {
-  margin: 0 0 var(--space-1);
-  font-size: var(--text-md);
-  overflow-wrap: anywhere;
-}
-
-.card .muted {
-  margin-bottom: var(--space-2);
-  font-size: var(--text-sm);
-}
-
-/* A long id: one line, cut with an ellipsis; the whole id is in its title. */
-
-.id {
-  display: inline-block;
-  max-width: min(100%, 16rem);
-  overflow: hidden;
-  font-family: var(--font-mono);
-  text-overflow: ellipsis;
-  vertical-align: bottom;
-  white-space: nowrap;
-}
-
-/* Facts: a label and its value, side by side. */
-
-.facts {
-  display: grid;
-  gap: var(--space-2);
-  margin: var(--space-3) 0 0;
-  font-size: var(--text-sm);
-}
-
-/* The live screen. A device's picture is taller than it is wide and its own size is what the capture
- * cost, so the canvas keeps the ratio it was painted at and is scaled to fit the panel: capped in
- * height so a phone's picture does not push the rest of the page away, and in width so a landscape one
- * never grows past the panel. Both maxima with both sides auto is what keeps the ratio. */
-.screen {
-  display: block;
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  max-height: min(60vh, 40rem);
-  margin: 0 auto var(--space-4);
-  background: var(--field);
-  border: 1px solid var(--border);
-}
-
-.panel-body > .facts {
-  margin-top: 0;
-}
-
-.facts > div {
-  display: grid;
-  grid-template-columns: 8rem minmax(0, 1fr);
-  gap: var(--space-3);
-}
-
-.facts dt {
-  color: var(--text-muted);
-}
-
-.facts dd {
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.facts dd p {
-  margin: 0;
-}
-
-.plain-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.plain-list li + li {
-  margin-top: var(--space-1);
-}
-
-/* A status: the daemon's word, with a square of its colour before it. Never the accent. */
-
-.status {
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--space-2);
-}
-
-.status-dot {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  align-self: center;
-}
-
-.status-ok .status-dot {
-  background: var(--status-ok);
-}
-
-.status-warn .status-dot {
-  background: var(--status-warn);
-}
-
-.status-error .status-dot {
-  background: var(--status-error);
-}
-
-.status-idle .status-dot {
-  background: var(--status-idle);
-}
-
-.statuses {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-4);
-}
-
-/* The attention table: one row per item, its status first in a column wide enough for the
- * longest word, "over RAM budget". */
-
-.attention-table th:first-child {
-  width: 14rem;
-}
-
-/* The pager under a long list: which rows show of how many, the page size, and previous and
- * next with the page number between them. Under a table it runs edge to edge, with a line above
- * it like a row's. */
-
-.pager {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-3) var(--space-4);
-  font-size: var(--text-sm);
-}
-
-.pager-range {
-  margin: 0;
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-}
-
-.pager-size {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  color: var(--text-muted);
-  font-weight: 400;
-}
-
-.pager-steps {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-3);
-  margin-left: auto;
-}
-
-.pager-page {
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-}
-
-.panel-body > .pager,
-.panel-body > .panel-footer {
-  margin: var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-4));
-  padding: var(--space-3) var(--space-6);
-  border-top: 1px solid var(--border);
-}
-
-.panel-footer {
-  font-size: var(--text-sm);
-}
-
-/* A grid of cards and the pager under them. The pager is a bar of the cards' own colour. */
-.card-list {
-  display: grid;
-  gap: var(--space-4);
-  min-width: 0;
-}
-
-.card-list > .pager {
-  padding: var(--space-3) var(--space-6);
-  border: 1px solid var(--border);
-  background: var(--surface);
-}
-
-/* Events: a filter by subject, then one block per event, newest first. */
-
-.filter {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-4);
-  margin: 0 0 var(--space-3);
-  padding: 0;
-  border: 0;
-  font-size: var(--text-sm);
-}
-
-.filter legend {
-  margin-bottom: var(--space-1);
-  padding: 0;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  letter-spacing: var(--label-tracking);
-  text-transform: uppercase;
-}
-
-.filter label {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: 32px;
-  cursor: pointer;
-}
-
-.filter input {
-  width: auto;
-  min-height: 0;
-  margin: 0;
-  padding: 0;
-  accent-color: var(--accent-text);
-}
-
-/* The feed: a box of fixed height that scrolls, edge to edge in its panel. Only the rows in view
- * are in the page, each placed by its offset; the list is as tall as every row together. The
- * browser's own scroll anchoring is off: the feed keeps the reader's row in place itself. */
-
-.feed {
-  position: relative;
-}
-
-.panel-body > .feed {
-  margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-4));
-}
-
-.feed-box {
-  height: min(40rem, 70vh);
-  overflow-y: auto;
-  overflow-anchor: none;
-  overscroll-behavior: contain;
-  border-top: 1px solid var(--border);
-}
-
-.feed-box:focus-visible {
-  outline-offset: -2px;
-}
-
-/* "N new events": over the top of the box, while the operator reads further down. */
-.feed-new {
-  position: absolute;
-  top: var(--space-3);
-  left: 50%;
-  z-index: 1;
-  min-height: 32px;
-  background: var(--bg);
-  transform: translateX(-50%);
-}
-
-.events {
-  position: relative;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.event {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  min-width: 0;
-  padding: var(--space-3) var(--space-6);
-  border-bottom: 1px solid var(--border);
-}
-
-.event-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--space-1) var(--space-3);
-  margin: 0;
-  font-size: var(--text-sm);
-}
-
-.event-head time,
-.event-worker {
-  color: var(--text-muted);
-}
-
-.event-name {
-  font-weight: 500;
-}
-
-.event-payload {
-  display: grid;
-  gap: var(--space-1);
-  margin: var(--space-2) 0 0;
-  font-size: var(--text-sm);
-}
-
-.event-payload > div {
-  display: grid;
-  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
-  gap: var(--space-3);
-}
-
-.event-payload dt {
-  color: var(--text-muted);
-}
-
-.event-payload dd {
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-/* Charts: an orange line or columns with a faint orange fill, light grid lines, mono axis
- * labels. Recharts draws the SVG; every colour here overrides its defaults. */
-
-.chart {
-  margin: 0 0 var(--space-3);
-}
-
-.chart svg {
-  overflow: visible;
-}
-
-.chart .recharts-cartesian-grid line {
-  stroke: var(--border);
-}
-
-.chart .recharts-cartesian-axis-line {
-  stroke: var(--border);
-}
-
-.chart .recharts-cartesian-axis-tick-value {
-  fill: var(--text-muted);
-  font-family: var(--font-mono);
-  font-size: 11px;
-}
-
-.chart-area .recharts-area-curve {
-  stroke: var(--accent);
-  stroke-width: 2px;
-}
-
-.chart-area .recharts-area-area {
-  fill: var(--accent);
-  fill-opacity: 0.08;
-}
-
-.chart-area .recharts-tooltip-cursor {
-  stroke: var(--border-strong);
-}
-
-.chart-columns .recharts-bar-rectangle path {
-  fill: var(--accent);
-}
-
-.chart-cursor {
-  fill: var(--accent);
-  fill-opacity: 0.08;
-}
-
-.chart-dot {
-  fill: var(--accent);
-  stroke: var(--surface);
-}
-
-.chart-tip {
-  padding: var(--space-1) var(--space-2);
-  border: 1px solid var(--border-strong);
-  background: var(--bg);
-  color: var(--text);
-  font-size: var(--text-sm);
-}
-
-.chart-tip-label {
-  font-family: var(--font-mono);
-  color: var(--text-muted);
-}
-
-/* A chart takes focus so the arrow keys can step through it. The ring goes round the whole
- * chart, and only for keyboard focus: a click on a chart draws none. */
-.chart:has(:focus-visible) {
-  outline: var(--focus-width) solid var(--accent-text);
-  outline-offset: 2px;
-}
-
-.chart :focus {
-  outline: none;
-}
-
-.chart-summary {
-  margin: 0 0 var(--space-2);
-  font-size: var(--text-sm);
-}
-
-.chart-summary strong {
-  font-family: var(--font-mono);
-  font-weight: 600;
-}
-
-.chart-data summary {
-  padding: var(--space-2) 0;
-  color: var(--text-muted);
-  font-size: var(--text-xs);
-  cursor: pointer;
-}
-
-.chart-data summary:hover {
-  color: var(--text);
-}
-
-.chart-data[open] summary {
-  margin-bottom: var(--space-3);
-}
-
-/* Load gauges: how full one machine figure is, as a bar in a line of its own under the figure
- * it belongs to. Every colour comes from here by class, so both themes apply (ADR 0011 §4); only
- * the level arrives inline, which the Content-Security-Policy allows (style-src governs style
- * elements, not style attributes). A gauge only shades what its figure already says, so it is
- * square, quiet, and never the accent. */
-
-.load-figure {
-  display: grid;
-  gap: var(--space-1);
-}
-
-/* why: the bar stops where a reading is readable rather than filling the panel — a full-width
- * band would outweigh the one line of text it shades. */
-.load-bar {
-  display: block;
-  height: 8px;
-  max-width: 20rem;
-  background: var(--field);
-}
-
-/* why: a new reading lands every 15 seconds, so the fill slides to its level over --duration
- * rather than jumping; --duration is already zero under `prefers-reduced-motion: reduce`. Moving
- * the width costs 0.13ms of layout per change, measured, and no long task either way. */
-.load-bar-fill {
-  display: block;
-  height: 100%;
-  width: var(--load-bar, 0%);
-  transition: width var(--duration);
-}
-
-.load-bar-ok .load-bar-fill {
-  background: var(--status-ok);
-}
-
-.load-bar-warn .load-bar-fill {
-  background: var(--status-warn);
-}
-
-.load-bar-error .load-bar-fill {
-  background: var(--status-error);
-}
-
-.load-bar-idle .load-bar-fill {
-  background: var(--status-idle);
-}
-
-/* Tables: a row per item, in a panel. Headers are labels, rows are roomy, numbers sit right.
- * Under 768px each row stacks into labelled lines, so the page never scrolls sideways. */
-
-/* Fixed layout: the columns share the panel's width and a long cell wraps or is cut, so a table
- * never grows wider than its panel. */
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--text-sm);
-  table-layout: fixed;
-}
-
-.table th,
-.table td {
-  padding: var(--space-4) var(--space-3);
-  border-bottom: 1px solid var(--border);
-  text-align: left;
-  vertical-align: middle;
-  overflow-wrap: break-word;
-}
-
-.table th:first-child,
-.table td:first-child {
-  padding-left: var(--space-6);
-}
-
-.table th:last-child,
-.table td:last-child {
-  padding-right: var(--space-6);
-}
-
-.table tbody tr:last-child td {
-  border-bottom: 0;
-}
-
-.table .mono {
-  overflow-wrap: break-word;
-}
-
-.table th {
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-  color: var(--text-muted);
-  font-size: var(--text-xs);
-}
-
-.table .num {
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.table th.num {
-  width: 8rem;
-}
-
-/* A table stacks its rows into labelled lines where its columns would be too narrow: every
- * table under 768px, and a wide one, of six columns or more, under 1100px. */
-@media (max-width: 1099.98px) {
-  .table-wide thead {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  .table-wide thead th {
-    white-space: normal;
-  }
-
-  .table-wide,
-  .table-wide tbody,
-  .table-wide tr {
-    display: block;
-  }
-
-  .table-wide tr {
-    padding: var(--space-3) var(--space-6);
-    border-bottom: 1px solid var(--border);
-  }
-
-  .table-wide tbody tr:last-child {
-    border-bottom: 0;
-  }
-
-  .table-wide td,
-  .table-wide td:first-child,
-  .table-wide td:last-child {
-    display: grid;
-    grid-template-columns: 8rem minmax(0, 1fr);
-    gap: var(--space-3);
-    padding: var(--space-1) 0;
-    border: 0;
-    overflow-wrap: anywhere;
-  }
-
-  .table-wide .mono {
-    overflow-wrap: anywhere;
-  }
-
-  .table-wide .num {
-    text-align: left;
-  }
-
-  .table-wide th.num {
-    width: auto;
-  }
-
-  .table-wide td::before {
-    content: attr(data-label);
-    color: var(--text-muted);
-    font-family: var(--font-sans);
-  }
-}
-
-@media (max-width: 767.98px) {
-  .table thead {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  .table thead th {
-    white-space: normal;
-  }
-
-  .table,
-  .table tbody,
-  .table tr {
-    display: block;
-  }
-
-  .table tr {
-    padding: var(--space-3) var(--space-6);
-    border-bottom: 1px solid var(--border);
-  }
-
-  .table tbody tr:last-child {
-    border-bottom: 0;
-  }
-
-  .table td,
-  .table td:first-child,
-  .table td:last-child {
-    display: grid;
-    grid-template-columns: 8rem minmax(0, 1fr);
-    gap: var(--space-3);
-    padding: var(--space-1) 0;
-    border: 0;
-    overflow-wrap: anywhere;
-  }
-
-  .table .mono {
-    overflow-wrap: anywhere;
-  }
-
-  .table .num {
-    text-align: left;
-  }
-
-  .table th.num {
-    width: auto;
-  }
-
-  .table td::before {
-    content: attr(data-label);
-    color: var(--text-muted);
-    font-family: var(--font-sans);
-  }
-}
-
-/* Sign-in: the same header, then one panel with the token's input and the button. */
-
-.sign-in {
-  min-height: 100vh;
-}
-
-.sign-in .topbar {
-  border-bottom: 1px solid var(--border);
-}
-
-.sign-in-main {
-  display: grid;
-  justify-items: center;
-  padding: var(--space-12) var(--space-4);
-}
-
-.sign-in-panel {
-  width: 100%;
-  max-width: 440px;
-}
-
-.sign-in-panel .panel-title {
-  font-size: var(--text-lg);
-}
-
-.sign-in form {
-  display: grid;
-  gap: var(--space-2);
-  padding-top: var(--space-6);
-  padding-bottom: var(--space-6);
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-@media (min-width: 768px) {
-  .topbar {
-    padding: var(--space-4) var(--space-6);
-  }
-
-  .tabs ul {
-    padding: 0 var(--space-6);
-  }
-
-  .main {
-    padding: var(--space-8) var(--space-6) var(--space-12);
-  }
-
-  .panel-row {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
-  }
-
-  .panel-row-even {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --duration: 0ms;
-  }
-}
diff --git a/ui/src/views/attention.test.tsx b/ui/src/views/attention.test.tsx
deleted file mode 100644
index e6c602f65..000000000
--- a/ui/src/views/attention.test.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { AttentionList } from "./attention";
-import { attentionItems } from "./attention-model";
-import type { WorkerDevice, WorkerView } from "./workers-model";
-
-const NOW = Date.parse("2026-10-02T12:00:00Z");
-const GIB = 1024 ** 3;
-
-function worker(overrides: Partial<WorkerView> = {}): WorkerView {
-  return {
-    catalog: [],
-    connection: "connected",
-    devices: [],
-    drained: false,
-    id: "wrk_1",
-    lastSeenAt: NOW,
-    leases: [],
-    ...overrides,
-  };
-}
-
-function device(id: string, overrides: Partial<WorkerDevice> = {}): WorkerDevice {
-  return {
-    physical: false,
-    id,
-    mode: "full",
-    servesDefaultMode: true,
-    spec: { physical: false, model: "iPhone 16", osVersion: "18.4", platform: "ios" },
-    state: "ready",
-    ...overrides,
-  };
-}
-
-function capacity(ramBudget?: { usedBytes: number; limitBytes: number; overLimit: boolean }) {
-  const entry = {
-    atRamBudget: false,
-    limit: 4,
-    maxRunning: 4,
-    overLimit: false,
-    reserved: 0,
-    running: 1,
-    used: 1,
-  };
-  return {
-    android: { ...entry, warm: 0 },
-    global: { maxRunning: 4, overLimit: false, reserved: 0, running: 1, warm: 0 },
-    ios: { ...entry, warm: 0 },
-    ...(ramBudget === undefined ? {} : { ramBudget }),
-  };
-}
-
-/** Each item as `<worker id> <device id or -> <condition>`, the facts a test compares. */
-function summary(workers: readonly WorkerView[]): string[] {
-  return attentionItems(workers).map((item) =>
-    [item.worker.id, "device" in item ? item.device.id : "-", item.condition].join(" "),
-  );
-}
-
-/** The text a screen shows, without markup: the items, without the table's column headers. */
-function text(html: string): string {
-  return html
-    .replace(/<thead>.*?<\/thead>/s, "")
-    .replace(/<[^>]+>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-describe("the attention list", () => {
-  it("the attention list holds a disconnected, an incompatible and a drained worker", () => {
-    const workers = [
-      worker({ id: "wrk_ok" }),
-      worker({ connection: "disconnected", id: "wrk_gone" }),
-      worker({ connection: "incompatible", id: "wrk_old" }),
-      worker({ drained: true, id: "wrk_drained" }),
-      // Both at once are two items: each clears on its own.
-      worker({ connection: "disconnected", drained: true, id: "wrk_both" }),
-    ];
-
-    expect(summary(workers)).toEqual([
-      "wrk_gone - disconnected",
-      "wrk_old - incompatible",
-      "wrk_drained - drained",
-      "wrk_both - disconnected",
-      "wrk_both - drained",
-    ]);
-  });
-
-  it("the attention list holds a quarantined device and a stalled device", () => {
-    const workers = [
-      worker({
-        devices: [
-          device("dev_ready"),
-          device("dev_quarantined", { state: "quarantined" }),
-          device("dev_stuck", { stalled: true, state: "reclaiming", transitionAgeMs: 300_000 }),
-          // Mid-transition but not stalled: in progress, not a problem.
-          device("dev_busy", { state: "provisioning", transitionAgeMs: 2_000 }),
-        ],
-      }),
-    ];
-
-    expect(summary(workers)).toEqual([
-      "wrk_1 dev_quarantined quarantined",
-      "wrk_1 dev_stuck stalled",
-    ]);
-  });
-
-  it("a quarantined physical device is an attention item like any quarantined device", () => {
-    const physical: WorkerDevice = {
-      class: "phone",
-      id: "dev_phone",
-      physical: true,
-      servesDefaultMode: false,
-      spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
-      state: "quarantined",
-    };
-
-    expect(summary([worker({ devices: [physical] })])).toEqual(["wrk_1 dev_phone quarantined"]);
-  });
-
-  it("the attention list holds a worker over its RAM budget", () => {
-    const workers = [
-      worker({
-        capacity: capacity({ limitBytes: 12 * GIB, overLimit: true, usedBytes: 13 * GIB }),
-        id: "wrk_over",
-      }),
-      worker({
-        capacity: capacity({ limitBytes: 12 * GIB, overLimit: false, usedBytes: 4 * GIB }),
-        id: "wrk_under",
-      }),
-      // No RAM budget kept, or capacity never read: nothing to be over.
-      worker({ capacity: capacity(), id: "wrk_none" }),
-      worker({ id: "wrk_unread" }),
-    ];
-
-    expect(summary(workers)).toEqual(["wrk_over - over RAM budget"]);
-    const shown = text(
-      renderToStaticMarkup(<AttentionList items={attentionItems(workers)} now={NOW} />),
-    );
-    expect(shown).toBe("over RAM budget wrk_over : 13.00 GiB of 12.00 GiB used.");
-  });
-
-  it("an item leaves the attention list when its condition clears", () => {
-    const quarantined = device("dev_1", { state: "quarantined" });
-    const stalled = device("dev_2", { stalled: true, state: "provisioning" });
-    const ramBudget = { limitBytes: 12 * GIB, usedBytes: 13 * GIB };
-    const over = capacity({ ...ramBudget, overLimit: true });
-    const before = worker({
-      capacity: over,
-      connection: "disconnected",
-      devices: [quarantined, stalled],
-      drained: true,
-    });
-    expect(attentionItems([before])).toHaveLength(5);
-
-    const cleared: [string, WorkerView][] = [
-      ["disconnected", { ...before, connection: "connected" }],
-      ["drained", { ...before, drained: false }],
-      ["over RAM budget", { ...before, capacity: capacity({ ...ramBudget, overLimit: false }) }],
-      ["quarantined", { ...before, devices: [{ ...quarantined, state: "ready" }, stalled] }],
-      ["stalled", { ...before, devices: [quarantined, device("dev_2", { state: "ready" })] }],
-    ];
-    for (const [condition, after] of cleared) {
-      const conditions = attentionItems([after]).map((item) => item.condition);
-      expect(conditions, condition).toHaveLength(4);
-      expect(conditions, condition).not.toContain(condition);
-    }
-  });
-
-  it("each item names its worker and links to its page", () => {
-    const workers = [
-      worker({ connection: "disconnected", id: "wrk/1", label: "mac-mini-1" }),
-      worker({
-        devices: [
-          device("dev_stuck", { stalled: true, state: "provisioning", transitionAgeMs: 90_000 }),
-        ],
-        id: "wrk_2",
-        lastSeenAt: NOW - 10_000,
-      }),
-    ];
-
-    const html = renderToStaticMarkup(<AttentionList items={attentionItems(workers)} now={NOW} />);
-
-    expect(html).toContain('<a href="/workers/wrk%2F1">mac-mini-1</a>');
-    expect(html).toContain('<a href="/workers/wrk_2">wrk_2</a>');
-    expect(text(html)).toContain(
-      "disconnected mac-mini-1 : the gateway has lost its connection to this worker.",
-    );
-    // 90 s in when the worker answered, 10 s ago.
-    expect(text(html)).toContain(
-      "stalled Device dev_stuck on wrk_2 : stuck provisioning for 1 min 40 s.",
-    );
-  });
-
-  it("a stalled device on a disconnected worker shows no time in its state", () => {
-    // A gateway keeps a disconnected worker's devices as last reported, with an age it can no
-    // longer count from.
-    const workers = [
-      worker({
-        connection: "disconnected",
-        devices: [
-          device("dev_stuck", { stalled: true, state: "reclaiming", transitionAgeMs: 90_000 }),
-        ],
-        lastSeenAt: NOW - 10_000,
-      }),
-    ];
-
-    const shown = text(
-      renderToStaticMarkup(<AttentionList items={attentionItems(workers)} now={NOW} />),
-    );
-
-    expect(shown).toContain("stalled Device dev_stuck on wrk_1 : stuck reclaiming.");
-  });
-
-  it("says so when nothing needs attention", () => {
-    const html = renderToStaticMarkup(<AttentionList items={[]} now={NOW} />);
-
-    expect(text(html)).toBe("Nothing needs attention.");
-  });
-});
diff --git a/ui/src/views/attention.tsx b/ui/src/views/attention.tsx
deleted file mode 100644
index be054671e..000000000
--- a/ui/src/views/attention.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import type { ReactNode } from "react";
-
-import { Id, PageHeader, Panel, StatCards } from "../layout";
-import { useLiveResource, useNow } from "../live/live-context";
-import { Loaded } from "../live/route-state";
-import { formatDuration } from "../live/time";
-import { Link } from "../router";
-import { Status, type Tone } from "../status";
-import { type Column, DataTable } from "../table";
-import { type AttentionItem, attentionItems, attentionStats } from "./attention-model";
-import {
-  stateEnteredAt,
-  type WorkerList,
-  type WorkerView,
-  workerName,
-  workerPath,
-} from "./workers-model";
-
-/**
- * Everything that needs the operator's attention, in one list, fed by `GET /v1/workers`
- * (ADR 0013 §1) like the workers views. An item shows within a second of the daemon reporting
- * it and leaves when the daemon stops reporting it.
- */
-export function AttentionView() {
-  const state = useLiveResource<WorkerList>("/v1/workers");
-  const now = useNow();
-  return (
-    <section className="view">
-      <PageHeader
-        title="Attention"
-        subtitle="Workers and devices that need you, as the daemon reports them."
-      />
-      <Loaded state={state}>
-        {(list) => {
-          const items = attentionItems(list.workers);
-          return (
-            <>
-              <StatCards stats={attentionStats(items)} />
-              <Panel
-                title="Needs attention"
-                description="Each item leaves this list when the daemon reports it cleared."
-              >
-                <AttentionList items={items} now={now.server} />
-              </Panel>
-            </>
-          );
-        }}
-      </Loaded>
-    </section>
-  );
-}
-
-/**
- * How many items need attention, for the count on the view's tab, on every page. `undefined`
- * before the first answer.
- */
-export function useAttentionCount(): number | undefined {
-  const { data } = useLiveResource<WorkerList>("/v1/workers");
-  return data === undefined ? undefined : attentionItems(data.workers).length;
-}
-
-/**
- * One row per item, a page at a time, its condition first: the workers in the daemon's order,
- * each worker's own items before its devices'.
- */
-export function AttentionList(props: {
-  readonly items: readonly AttentionItem[];
-  /** The daemon's time now, for how long a device has been stalled. */
-  readonly now: number;
-}) {
-  const { items, now } = props;
-  const columns: Column<AttentionItem>[] = [
-    {
-      cell: (item) => <Status tone={TONES[item.condition]}>{item.condition}</Status>,
-      header: "Condition",
-    },
-    {
-      cell: (item) => (
-        <span>
-          <Subject item={item} />: {describe(item, now)}
-        </span>
-      ),
-      header: "Item",
-    },
-  ];
-  return (
-    <DataTable
-      label="Needs attention"
-      className="attention-table"
-      rows={items}
-      columns={columns}
-      rowId={(item) => item.key}
-      empty="Nothing needs attention."
-    />
-  );
-}
-
-const TONES: Readonly<Record<AttentionItem["condition"], Tone>> = {
-  disconnected: "error",
-  drained: "warn",
-  incompatible: "error",
-  "over RAM budget": "warn",
-  quarantined: "error",
-  stalled: "warn",
-};
-
-/** The worker the item is about, as a link to its page, and the device when it is a device. */
-function Subject({ item }: { readonly item: AttentionItem }) {
-  const worker = <WorkerLink worker={item.worker} />;
-  if (!("device" in item)) return worker;
-  return (
-    <>
-      Device <Id>{item.device.id}</Id> on {worker}
-    </>
-  );
-}
-
-function WorkerLink({ worker }: { readonly worker: WorkerView }) {
-  return <Link to={workerPath(worker.id)}>{workerName(worker)}</Link>;
-}
-
-function describe(item: AttentionItem, now: number): ReactNode {
-  switch (item.condition) {
-    case "disconnected":
-      return "the gateway has lost its connection to this worker.";
-    case "incompatible":
-      return "this worker and the gateway have no protocol version in common.";
-    case "drained":
-      return "this worker gets no new leases.";
-    case "over RAM budget":
-      return `${gibibytes(item.usedBytes)} of ${gibibytes(item.limitBytes)} used.`;
-    case "quarantined":
-      return "Simlock is retrying its cleanup, and leases it to no one meanwhile.";
-    case "stalled": {
-      const since = stateEnteredAt(item.device, item.worker);
-      return since === undefined
-        ? `stuck ${item.device.state}.`
-        : `stuck ${item.device.state} for ${formatDuration(now - since)}.`;
-    }
-  }
-}
-
-/** Bytes as `simlock status` writes its RAM budget: GiB with two decimals. */
-function gibibytes(bytes: number): string {
-  return `${(bytes / 1024 ** 3).toFixed(2)} GiB`;
-}
diff --git a/ui/src/views/events.test.tsx b/ui/src/views/events.test.tsx
deleted file mode 100644
index e20120d16..000000000
--- a/ui/src/views/events.test.tsx
+++ /dev/null
@@ -1,690 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { ApiError, type ApiPath, type ApiResponse } from "../api";
-import type { Clock } from "../live/connection";
-import { Loaded } from "../live/route-state";
-import { connect, settle } from "../live/test-support";
-import { EventFeed } from "./event-feed";
-import { EventList } from "./events";
-import { type ConsoleEvent, MAX_EVENTS } from "./events-model";
-import type { WorkerView } from "./workers-model";
-
-const T0 = Date.parse("2026-10-02T11:30:00Z");
-
-/** Vitest's fake time and timers, as the live connection's tests use them. */
-const fakeClock: Clock = {
-  now: () => Date.now(),
-  setTimeout: (run, ms) => setTimeout(run, ms),
-  clearTimeout: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
-};
-
-function envelope(
-  seq: number,
-  timestamp: number,
-  event = "lease.granted",
-  payload: unknown = {},
-  id = `evt_${seq}_${timestamp}`,
-) {
-  return { event, id, module: "lease", payload, seq, timestamp };
-}
-
-/** One event as the stream frames it. */
-function frame(event: ReturnType<typeof envelope>): string {
-  return `event: ${event.event}\ndata: ${JSON.stringify(event)}\n\n`;
-}
-
-/** The text a screen shows, without markup. */
-function text(html: string): string {
-  return html
-    .replace(/<[^>]+>/g, " ")
-    .replace(/&quot;/g, '"')
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-/** What `GET /v1/events` answers: these events, or whatever this returns. */
-type Replay = unknown[] | ((path: ApiPath) => Promise<unknown>);
-
-/**
- * A daemon's event file: answers `GET /v1/events?since=<n>s|1h` with the events newer than that,
- * by the fake clock, as the daemon does.
- */
-function eventLog(
-  events: readonly ReturnType<typeof envelope>[],
-): (path: ApiPath) => Promise<unknown> {
-  return (path) => {
-    const match = /since=(\d+)(s|h)$/.exec(path);
-    if (match === null) throw new Error(`Unexpected path ${path}`);
-    const ms = Number(match[1]) * (match[2] === "h" ? 3_600_000 : 1_000);
-    return Promise.resolve({ events: events.filter((event) => event.timestamp > Date.now() - ms) });
-  };
-}
-
-/**
- * The events view's feed on a live connection to a scripted daemon. `replay` is what
- * `GET /v1/events` answers, whatever its `since`; every other read answers `{}`.
- */
-function openView(first: Replay = []) {
-  const live = connect();
-  const replays: ApiPath[] = [];
-  let replay: Replay = first;
-  live.daemon.reads = async (path) => {
-    if (!path.startsWith("/v1/events?")) return { body: {}, date: null };
-    replays.push(path);
-    const body = typeof replay === "function" ? await replay(path) : { events: replay };
-    return { body, date: null } satisfies ApiResponse<unknown>;
-  };
-  const feed = new EventFeed(async (path) => (await live.daemon.get(path)).body, fakeClock);
-  live.connection.onEvent(feed.streamEvent);
-  live.connection.onStreamOpened(feed.streamOpened);
-  const stop = feed.start();
-  return {
-    ...live,
-    feed,
-    replays,
-    stop,
-    /** Sets what `GET /v1/events` answers from now on. */
-    replayWith(next: Replay) {
-      replay = next;
-    },
-    /** The ids of the events the view shows, newest first. */
-    ids(): string[] {
-      return (feed.snapshot().data ?? []).map((event) => event.id);
-    },
-    /** The events the view shows, as `seq@timestamp`, newest first. */
-    shown(): string[] {
-      return (feed.snapshot().data ?? []).map((event) => `${event.seq}@${event.timestamp}`);
-    },
-  };
-}
-
-/** What the view's page shows for the feed now, as `EventsView` renders it, as markup. */
-function screen(feed: EventFeed): string {
-  return renderToStaticMarkup(
-    <Loaded state={feed.snapshot()}>
-      {(events) => <EventList events={events} workers={undefined} />}
-    </Loaded>,
-  );
-}
-
-/** A worker the daemon lists, with a label or without one. */
-function worker(id: string, label?: string): WorkerView {
-  return {
-    catalog: [],
-    connection: "connected",
-    devices: [],
-    drained: false,
-    id,
-    lastSeenAt: T0,
-    leases: [],
-    ...(label === undefined ? {} : { label }),
-  };
-}
-
-afterEach(() => {
-  vi.useRealTimers();
-});
-
-describe("the events view", () => {
-  it("the events view lists events from the stream and from the replay once each", async () => {
-    const view = openView();
-    view.replayWith([envelope(1, T0), envelope(2, T0 + 1_000)]);
-    await settle();
-
-    view.daemon.openStream()?.send(frame(envelope(3, T0 + 2_000)));
-    view.daemon.openStream()?.send(frame(envelope(4, T0 + 3_000)));
-    await settle();
-
-    expect(view.shown()).toEqual([
-      `4@${T0 + 3_000}`,
-      `3@${T0 + 2_000}`,
-      `2@${T0 + 1_000}`,
-      `1@${T0}`,
-    ]);
-  });
-
-  it("an event in both the replay and the stream is shown once", async () => {
-    const view = openView();
-    const both = envelope(7, T0);
-    // The stream sends it before the replay answers, and the replay holds it too.
-    view.daemon.openStream()?.send(frame(both));
-    view.replayWith([envelope(6, T0 - 1_000), both]);
-    await settle();
-    expect(view.shown()).toEqual([`7@${T0}`, `6@${T0 - 1_000}`]);
-
-    // And the other way round: replayed first, then streamed.
-    view.daemon.openStream()?.send(frame(both));
-    await settle();
-
-    expect(view.shown()).toEqual([`7@${T0}`, `6@${T0 - 1_000}`]);
-  });
-
-  it("two events with the same seq and timestamp but different ids are both shown", async () => {
-    const view = openView();
-    view.replayWith([envelope(1, T0, "lease.granted", {}, "evt_a")]);
-    await settle();
-
-    view.daemon.openStream()?.send(frame(envelope(1, T0, "lease.granted", {}, "evt_b")));
-    await settle();
-
-    expect(view.ids().sort()).toEqual(["evt_a", "evt_b"]);
-  });
-
-  it("events with the same timestamp are listed by seq, newest first", async () => {
-    const view = openView();
-    view.replayWith([envelope(2, T0), envelope(9, T0), envelope(5, T0)]);
-    await settle();
-
-    expect(view.shown()).toEqual([`9@${T0}`, `5@${T0}`, `2@${T0}`]);
-  });
-
-  it("an envelope without an id is not shown", async () => {
-    const view = openView();
-    const { id: _id, ...withoutId } = envelope(2, T0);
-    view.replayWith([withoutId, { ...envelope(3, T0), id: 3 }, envelope(4, T0)]);
-    await settle();
-
-    expect(view.ids()).toEqual(["evt_4_" + T0]);
-  });
-
-  it("events with the same seq from before and after a daemon restart are both shown", async () => {
-    const view = openView();
-    await settle();
-    const before = envelope(1, T0, "daemon.started");
-    view.daemon.openStream()?.send(frame(before));
-    await settle();
-
-    // The daemon stops, and starts again with its seq counting from 1.
-    view.daemon.openStream()?.end();
-    await settle();
-    const after = envelope(1, T0 + 5_000, "daemon.started");
-    view.replayWith([before, after]);
-    await vi.advanceTimersByTimeAsync(1_000);
-    view.daemon.openStream()?.send(frame(after));
-    await settle();
-
-    expect(view.shown()).toEqual([`1@${T0 + 5_000}`, `1@${T0}`]);
-  });
-
-  it("after a reconnect the gap is filled from GET /v1/events with since rounded up to whole seconds", async () => {
-    const view = openView();
-    await settle();
-    expect(view.replays).toEqual(["/v1/events?since=1h", "/v1/events?since=1h"]);
-
-    // The daemon goes away. `/v1/healthz` answers after 1 s; the new stream's headers take 0.3 s
-    // more, so the stream was closed for 1.3 s.
-    view.daemon.holdStreams = true;
-    view.daemon.openStream()?.end();
-    await settle();
-    const missed = envelope(1, Date.now() + 500, "daemon.started");
-    view.replayWith([missed]);
-    await vi.advanceTimersByTimeAsync(1_300);
-    expect(view.replays).toHaveLength(2);
-    view.daemon.openHeldStreams();
-    await settle();
-
-    expect(view.replays.slice(2)).toEqual(["/v1/events?since=2s"]);
-    expect(view.shown()).toEqual([`1@${missed.timestamp}`]);
-  });
-
-  it("after a hidden tab is shown again the gap is filled the same way", async () => {
-    const view = openView();
-    await settle();
-
-    view.visibility.set(true);
-    await vi.advanceTimersByTimeAsync(4_001);
-    const missed = envelope(5, Date.now() - 2_000);
-    view.replayWith([missed]);
-    view.visibility.set(false);
-    await settle();
-
-    expect(view.replays.slice(2)).toEqual(["/v1/events?since=5s"]);
-    expect(view.shown()).toEqual([`5@${missed.timestamp}`]);
-  });
-
-  it("a view opened before the stream loads the recent events again once the stream opens", async () => {
-    const view = openView();
-    // The first load answers before the stream's headers arrive.
-    expect(view.replays).toEqual(["/v1/events?since=1h"]);
-    const sentBetween = envelope(9, T0);
-    view.replayWith([sentBetween]);
-    await settle();
-
-    expect(view.replays).toEqual(["/v1/events?since=1h", "/v1/events?since=1h"]);
-    expect(view.shown()).toEqual([`9@${T0}`]);
-  });
-
-  it("a stream that first opens after the last hour loaded loads it again", async () => {
-    const view = openView([]);
-    await settle();
-    const sent = view.replays.length;
-    view.replayWith([envelope(1, T0)]);
-
-    // The stream's headers took longer than the load: its first open comes after.
-    view.feed.streamOpened({});
-    await settle();
-
-    expect(view.replays.slice(sent)).toEqual(["/v1/events?since=1h"]);
-    expect(view.shown()).toEqual([`1@${T0}`]);
-  });
-
-  it("the view keeps the newest 10,000 events", async () => {
-    expect(MAX_EVENTS).toBe(10_000);
-    const view = openView();
-    view.replayWith(
-      Array.from({ length: MAX_EVENTS }, (_, index) => envelope(index + 1, T0 + index * 1_000)),
-    );
-    await settle();
-    expect(view.shown()).toHaveLength(MAX_EVENTS);
-
-    view.daemon.openStream()?.send(frame(envelope(MAX_EVENTS + 1, T0 + MAX_EVENTS * 1_000)));
-    // An event older than every one kept arrives late: it does not push a newer one out.
-    view.daemon.openStream()?.send(frame(envelope(0, T0 - 1_000)));
-    await settle();
-
-    const shown = view.shown();
-    expect(shown).toHaveLength(MAX_EVENTS);
-    expect(shown[0]).toBe(`${MAX_EVENTS + 1}@${T0 + MAX_EVENTS * 1_000}`);
-    // The oldest one dropped off the end.
-    expect(shown.at(-1)).toBe(`2@${T0 + 1_000}`);
-  });
-
-  it("an unknown event name renders with its payload", () => {
-    const events: ConsoleEvent[] = [
-      {
-        event: "gizmo.frobnicated",
-        id: "evt_3",
-        payload: { count: 3, nested: { deep: true }, reason: "because", workerId: "wrk_1" },
-        seq: 3,
-        timestamp: T0,
-      },
-      // A payload that is not an object at all.
-      { event: "gizmo.listed", id: "evt_2", payload: ["a", 1], seq: 2, timestamp: T0 - 1_000 },
-      // No payload at all.
-      { event: "gizmo.pinged", id: "evt_1", payload: undefined, seq: 1, timestamp: T0 - 2_000 },
-    ];
-
-    const html = renderToStaticMarkup(
-      <EventList events={events} workers={[worker("wrk_1", "mac-1")]} />,
-    );
-    const shown = text(html);
-
-    expect(shown).toContain(
-      'gizmo.frobnicated mac-1 count 3 nested {"deep":true} reason because workerId wrk_1',
-    );
-    expect(shown).toContain('gizmo.listed payload ["a",1]');
-    expect(shown).toMatch(/gizmo\.pinged$/);
-    expect(html.match(/<dl/g)).toHaveLength(2);
-  });
-
-  it("the time is the event's time of day on the browser's clock face", () => {
-    const zone = process.env.TZ;
-    // Five and a half hours ahead of UTC, so neither the hour nor the minute matches UTC's.
-    process.env.TZ = "Asia/Kolkata";
-    try {
-      const event: ConsoleEvent = {
-        event: "lease.granted",
-        id: "evt_1",
-        payload: {},
-        seq: 1,
-        timestamp: T0,
-      };
-
-      const html = renderToStaticMarkup(<EventList events={[event]} workers={undefined} />);
-
-      expect(html).toContain(
-        '<time class="mono" dateTime="2026-10-02T11:30:00.000Z">17:00:00</time>',
-      );
-    } finally {
-      if (zone === undefined) delete process.env.TZ;
-      else process.env.TZ = zone;
-    }
-  });
-
-  it("an empty list says why it is empty", () => {
-    const leases: ConsoleEvent[] = [
-      { event: "lease.granted", id: "evt_1", payload: {}, seq: 1, timestamp: T0 },
-    ];
-    const render = (events: ConsoleEvent[], filter: "all" | "device") =>
-      text(renderToStaticMarkup(<EventList events={events} workers={undefined} filter={filter} />));
-
-    expect(render([], "all")).toBe("No events in the last hour.");
-    expect(render([], "device")).toBe("No events in the last hour.");
-    expect(render(leases, "device")).toBe("No events of this kind.");
-  });
-
-  it("the filter shows only the events about the subject it names", () => {
-    const events: ConsoleEvent[] = [
-      "lease.granted",
-      "device.ready",
-      "worker.connected",
-      "component.installed",
-      "daemon.started",
-      "gizmo.frobnicated",
-    ].map((event, index) => ({
-      event,
-      id: `evt_${index}`,
-      payload: {},
-      seq: index,
-      timestamp: T0 - index,
-    }));
-    const names = (filter: "all" | "lease" | "device" | "worker" | "component" | "other") =>
-      [
-        ...renderToStaticMarkup(
-          <EventList events={events} workers={undefined} filter={filter} />,
-        ).matchAll(/<span class="event-name mono">([^<]*)<\/span>/g),
-      ].map((match) => match[1]);
-
-    expect(names("all")).toHaveLength(6);
-    expect(names("lease")).toEqual(["lease.granted"]);
-    expect(names("device")).toEqual(["device.ready"]);
-    expect(names("worker")).toEqual(["worker.connected"]);
-    expect(names("component")).toEqual(["component.installed"]);
-    expect(names("other")).toEqual(["daemon.started", "gizmo.frobnicated"]);
-  });
-
-  it("a worker the console does not know, or that has no label, shows as its id", () => {
-    const about = (workerId: string, seq: number): ConsoleEvent => ({
-      event: "lease.granted",
-      id: `evt_${seq}`,
-      payload: { workerId },
-      seq,
-      timestamp: T0 - seq,
-    });
-    const events = [about("wrk_1", 1), about("wrk_2", 2), about("wrk_gone", 3)];
-    const workers = [worker("wrk_1", "mac-1"), worker("wrk_2")];
-    const names = (listed: readonly WorkerView[] | undefined) =>
-      [
-        ...renderToStaticMarkup(<EventList events={events} workers={listed} />).matchAll(
-          /<span class="event-worker">([^<]*)<\/span>/g,
-        ),
-      ].map((match) => match[1]);
-
-    // Newest first: wrk_1, then wrk_2, then wrk_gone.
-    expect(names(workers)).toEqual(["mac-1", "wrk_2", "wrk_gone"]);
-    // Before the worker list is read, every worker shows as its id.
-    expect(names(undefined)).toEqual(["wrk_1", "wrk_2", "wrk_gone"]);
-  });
-  it("a worker.rejected event names no worker, even one the console knows", () => {
-    const rejected: ConsoleEvent = {
-      event: "worker.rejected",
-      id: "evt_1",
-      payload: { reason: "unauthenticated", workerId: "wrk_1" },
-      seq: 1,
-      timestamp: T0,
-    };
-
-    const html = renderToStaticMarkup(
-      <EventList events={[rejected]} workers={[worker("wrk_1", "mac-1")]} />,
-    );
-
-    expect(html).not.toContain("event-worker");
-    expect(text(html)).not.toContain("mac-1");
-    // The claim is still shown, as the payload the daemon sent.
-    expect(text(html)).toContain("workerId wrk_1");
-  });
-
-  it("an envelope without a numeric seq, a timestamp that is a date, or a name is not shown", async () => {
-    const view = openView();
-    view.replayWith([
-      { event: "lease.granted", id: "evt_a", timestamp: T0 },
-      { event: "lease.granted", id: "evt_b", seq: 1 },
-      { id: "evt_c", seq: 2, timestamp: T0 },
-      { event: "lease.granted", id: "evt_d", seq: 3, timestamp: 1e300 },
-      // A date, but as a string: not a timestamp.
-      { event: "lease.granted", id: "evt_e", seq: 5, timestamp: "2026-10-02T11:30:00Z" },
-      { event: "lease.granted", id: "evt_f", seq: "6", timestamp: T0 },
-      { event: 7, id: "evt_g", seq: 7, timestamp: T0 },
-      envelope(4, T0),
-    ]);
-    await settle();
-
-    expect(view.shown()).toEqual([`4@${T0}`]);
-  });
-
-  it("until the first load answers, the view says it is loading", async () => {
-    let answer: (body: unknown) => void = () => {};
-    const view = openView(
-      () =>
-        new Promise((resolve) => {
-          answer = resolve;
-        }),
-    );
-    // The stream opens and sends an event; both loads of the last hour are still out.
-    await settle();
-    view.daemon.openStream()?.send(frame(envelope(2, T0)));
-    await settle();
-    expect(text(screen(view.feed))).toBe("Loading…");
-
-    answer({ events: [envelope(1, T0 - 1_000)] });
-    await settle();
-
-    expect(view.shown()).toEqual([`2@${T0}`, `1@${T0 - 1_000}`]);
-  });
-
-  it("a load the daemon refuses shows why, and keeps the events already shown", async () => {
-    const view = openView();
-    view.replayWith([envelope(1, T0)]);
-    await settle();
-    expect(view.feed.snapshot().error).toBeUndefined();
-
-    // The stream is closed and opens again; the daemon refuses the load that fills the gap.
-    const refusal = new ApiError(500, "INTERNAL", "Internal error");
-    view.replayWith(() => Promise.reject(refusal));
-    view.visibility.set(true);
-    view.visibility.set(false);
-    await settle();
-
-    expect(view.feed.snapshot().error).toBe(refusal);
-    expect(view.shown()).toEqual([`1@${T0}`]);
-    const shown = screen(view.feed);
-    expect(shown).toContain('<p class="refusal" role="alert">Internal error</p><div class="feed">');
-    expect(text(shown)).toMatch(/^Internal error \d\d:\d\d:\d\d lease\.granted$/);
-
-    // The next load that answers clears it.
-    view.replayWith([envelope(2, T0 + 1_000)]);
-    view.visibility.set(true);
-    view.visibility.set(false);
-    await settle();
-
-    expect(view.feed.snapshot().error).toBeUndefined();
-    expect(view.shown()).toEqual([`2@${T0 + 1_000}`, `1@${T0}`]);
-  });
-
-  it("an answer with no events list is refused as unreadable", async () => {
-    const view = openView(() => Promise.resolve({ items: [envelope(1, T0)] }));
-    await settle();
-
-    const { data, error } = view.feed.snapshot();
-    expect(error).toBeInstanceOf(SyntaxError);
-    expect(data).toEqual([]);
-  });
-
-  it("a view opened while the daemon is away loads the last hour once it is back", async () => {
-    // The daemon is gone: the view's first loads fail at the network level.
-    const view = openView(() => Promise.reject(new TypeError("Failed to fetch")));
-    view.daemon.health = "unreachable";
-    await settle();
-    view.daemon.openStream()?.end();
-    await vi.advanceTimersByTimeAsync(7_000);
-    expect(view.connection.state().phase).toBe("disconnected");
-    // Nothing of its own: the connection says the daemon is lost.
-    expect(view.feed.snapshot()).toEqual({});
-
-    // Back, with an event from half an hour ago in its log: only the last hour holds it.
-    const earlier = envelope(1, Date.now() - 30 * 60_000);
-    view.replayWith(eventLog([earlier]));
-    view.daemon.health = "up";
-    await vi.advanceTimersByTimeAsync(8_000);
-    expect(view.connection.state().phase).toBe("connected");
-
-    expect(view.shown()).toEqual([`1@${earlier.timestamp}`]);
-  });
-
-  it("a closed view ignores what arrives after", async () => {
-    let answer: (body: unknown) => void = () => {};
-    let loads = 0;
-    // The first load answers at once; the one the stream's opening asks for is held.
-    const view = openView(() => {
-      loads += 1;
-      if (loads === 1) return Promise.resolve({ events: [envelope(1, T0 - 1_000)] });
-      return new Promise((resolve) => {
-        answer = resolve;
-      });
-    });
-    await settle();
-    const before = view.feed.snapshot();
-    expect(view.shown()).toEqual([`1@${T0 - 1_000}`]);
-
-    view.stop();
-    view.daemon.openStream()?.send(frame(envelope(2, T0)));
-    answer({ events: [envelope(3, T0 + 1_000)] });
-    await settle();
-    view.visibility.set(true);
-    view.visibility.set(false);
-    await settle();
-
-    expect(view.feed.snapshot()).toBe(before);
-    // The stream opening again asked for nothing.
-    expect(view.replays).toHaveLength(2);
-  });
-});
-
-describe("the events view's loads", () => {
-  it("a closed view shows no refusal and sends no retry that would arrive after", async () => {
-    const refused = openView(() => Promise.reject(new ApiError(500, "INTERNAL", "Internal error")));
-    refused.stop();
-    await settle();
-    expect(refused.feed.snapshot()).toEqual({});
-
-    const lost = openView(() => Promise.reject(new TypeError("Failed to fetch")));
-    await settle();
-    const sent = lost.replays.length;
-    lost.stop();
-    await vi.advanceTimersByTimeAsync(30_000);
-    expect(lost.replays).toHaveLength(sent);
-  });
-
-  it("a replay that holds the same event twice shows it once", async () => {
-    const view = openView([envelope(1, T0), envelope(1, T0), envelope(2, T0 + 1)]);
-    await settle();
-
-    expect(view.shown()).toEqual([`2@${T0 + 1}`, `1@${T0}`]);
-  });
-
-  it("an event already shown changes nothing", async () => {
-    const view = openView([envelope(1, T0)]);
-    await settle();
-    const before = view.feed.snapshot();
-    let changes = 0;
-    view.feed.subscribe(() => {
-      changes += 1;
-    });
-
-    view.daemon.openStream()?.send(frame(envelope(1, T0)));
-    await settle();
-
-    expect(view.feed.snapshot()).toBe(before);
-    expect(changes).toBe(0);
-  });
-
-  it("a refusal stays shown while the stream adds events, and those events show", async () => {
-    const refusal = new ApiError(500, "INTERNAL", "Internal error");
-    const view = openView(() => Promise.reject(refusal));
-    await settle();
-    expect(view.feed.snapshot()).toEqual({ data: [], error: refusal });
-
-    view.daemon.openStream()?.send(frame(envelope(1, T0)));
-    await settle();
-
-    expect(view.feed.snapshot().error).toBe(refusal);
-    expect(view.shown()).toEqual([`1@${T0}`]);
-  });
-
-  it("a load that fails at the network level is sent again while the stream stays open", async () => {
-    let failures = 2;
-    const view = openView(() => {
-      if (failures > 0) {
-        failures -= 1;
-        return Promise.reject(new TypeError("Failed to fetch"));
-      }
-      return Promise.resolve({ events: [envelope(1, T0)] });
-    });
-    await settle();
-    expect(view.replays).toEqual(["/v1/events?since=1h"]);
-    expect(view.feed.snapshot()).toEqual({});
-
-    // After 1 second, and after 2 more.
-    await vi.advanceTimersByTimeAsync(1_000);
-    expect(view.replays).toHaveLength(2);
-    expect(view.feed.snapshot()).toEqual({});
-    await vi.advanceTimersByTimeAsync(2_000);
-
-    expect(view.replays).toEqual(
-      ["/v1/events?since=1h", "/v1/events?since=1h"].concat(["/v1/events?since=1h"]),
-    );
-    expect(view.connection.state().phase).toBe("connected");
-    expect(view.shown()).toEqual([`1@${T0}`]);
-  });
-
-  it("a gap not loaded before the daemon goes away again is loaded with the next one", async () => {
-    const view = openView([]);
-    await settle();
-    view.daemon.health = "up";
-
-    // The first outage: the stream ends, with an event sent just after, and the daemon is back
-    // after 1 s; the load of that gap does not reach it.
-    view.daemon.openStream()?.end();
-    await settle();
-    const missed = envelope(1, Date.now() + 200);
-    view.replayWith(() => Promise.reject(new TypeError("Failed to fetch")));
-    await vi.advanceTimersByTimeAsync(1_000);
-    expect(view.replays.at(-1)).toBe("/v1/events?since=1s");
-
-    // The second outage, before that load is sent again, then 30 s more of failed loads.
-    view.daemon.openStream()?.end();
-    await vi.advanceTimersByTimeAsync(30_000);
-    expect(view.shown()).toEqual([]);
-
-    // The daemon answers again. The load reaches back to the first gap, not just the second.
-    view.replayWith(eventLog([missed]));
-    await vi.advanceTimersByTimeAsync(10_000);
-
-    expect(view.connection.state().phase).toBe("connected");
-    expect(view.shown()).toEqual([`1@${missed.timestamp}`]);
-  });
-
-  it("a stream that opens while a load is out is loaded again after it", async () => {
-    let answer: (body: unknown) => void = () => {};
-    const view = openView([]);
-    await settle();
-    expect(view.replays).toHaveLength(2);
-    view.replayWith(
-      () =>
-        new Promise((resolve) => {
-          answer = resolve;
-        }),
-    );
-
-    // A gap load goes out; the stream closes and opens again before it answers.
-    view.visibility.set(true);
-    await vi.advanceTimersByTimeAsync(2_000);
-    view.visibility.set(false);
-    await settle();
-    expect(view.replays.at(-1)).toBe("/v1/events?since=2s");
-    view.visibility.set(true);
-    await vi.advanceTimersByTimeAsync(3_000);
-    view.visibility.set(false);
-    await settle();
-    expect(view.replays).toHaveLength(3);
-
-    view.replayWith([envelope(1, T0)]);
-    answer({ events: [] });
-    await settle();
-
-    // Again, from the first gap's start: the answer may be older than what the second missed.
-    expect(view.replays.slice(3)).toEqual(["/v1/events?since=5s"]);
-    expect(view.shown()).toEqual([`1@${T0}`]);
-  });
-});
diff --git a/ui/src/views/events.tsx b/ui/src/views/events.tsx
deleted file mode 100644
index 3657cff9e..000000000
--- a/ui/src/views/events.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
-
-import { MinuteChart, MinuteTable } from "../charts";
-import { useApi } from "../console-context";
-import { PageHeader, Panel, StatCards } from "../layout";
-import { browserClock } from "../live/browser";
-import type { ResourceState } from "../live/connection";
-import { useLiveEvents, useLiveResource, useNow, useStreamOpened } from "../live/live-context";
-import { Loaded } from "../live/route-state";
-import { formatCount } from "../paging";
-import { EventFeed } from "./event-feed";
-import {
-  type ConsoleEvent,
-  eventsStats,
-  keyOf,
-  MAX_EVENTS,
-  payloadPairs,
-  type Subject,
-  subjectOf,
-  timeOfDay,
-  workerIdOf,
-} from "./events-model";
-import { eventsPerMinute, extremes, type MinuteCount } from "./history-model";
-import { type WorkerList, type WorkerView, workerName } from "./workers-model";
-
-const FILTERS: readonly { readonly value: Subject | "all"; readonly label: string }[] = [
-  { label: "All", value: "all" },
-  { label: "Leases", value: "lease" },
-  { label: "Devices", value: "device" },
-  { label: "Workers", value: "worker" },
-  { label: "Components", value: "component" },
-  { label: "Other", value: "other" },
-];
-
-/**
- * The events the calling view holds, newest first: the last hour when it opened, then each one
- * the stream sends while it is on screen, filled as `EventFeed` says. The newest
- * {@link MAX_EVENTS} are kept; none drops off by age.
- */
-export function useRecentEvents(): ResourceState<readonly ConsoleEvent[]> {
-  const api = useApi();
-  const [feed] = useState(() => new EventFeed((path) => api.getJson(path), browserClock));
-  useLiveEvents(feed.streamEvent);
-  useStreamOpened(feed.streamOpened);
-  useEffect(() => feed.start(), [feed]);
-  return useSyncExternalStore(feed.subscribe, feed.snapshot);
-}
-
-/**
- * Recent events, newest first, with new ones added as the stream sends them (ADR 0013 §1, §2).
- * Each shows the payload as the daemon sent it: keeping secrets out of events is the daemon's
- * job, not the console's.
- */
-export function EventsView() {
-  const state = useRecentEvents();
-  const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers;
-  const now = useNow();
-  const [filter, setFilter] = useState<Subject | "all">("all");
-  return (
-    <section className="view">
-      <PageHeader
-        title="Events"
-        subtitle="What happened on the daemon in the last hour, newest first, as it happens."
-      />
-      <Loaded state={state}>
-        {(events) => {
-          const shown = shownEvents(events, filter);
-          return (
-            <>
-              <StatCards stats={eventsStats(shown, events.length, filter === "all")} />
-              <EventsPerMinute minutes={eventsPerMinute(events, now.server)} />
-              <Panel
-                title="Recent events"
-                description={`Newest first, each with its payload. The newest ${formatCount(MAX_EVENTS)} are kept.`}
-              >
-                <fieldset className="filter">
-                  <legend>Show</legend>
-                  {FILTERS.map((option) => (
-                    <label key={option.value}>
-                      <input
-                        type="radio"
-                        name="event-subject"
-                        value={option.value}
-                        checked={filter === option.value}
-                        onChange={() => setFilter(option.value)}
-                      />
-                      {option.label}
-                    </label>
-                  ))}
-                </fieldset>
-                <EventList events={events} workers={workers} filter={filter} />
-              </Panel>
-            </>
-          );
-        }}
-      </Loaded>
-    </section>
-  );
-}
-
-/** The events the filter lets through, newest first. */
-function shownEvents(
-  events: readonly ConsoleEvent[],
-  filter: Subject | "all",
-): readonly ConsoleEvent[] {
-  return filter === "all" ? events : events.filter((event) => subjectOf(event.event) === filter);
-}
-
-/** The column chart of every event the view holds, minute by minute, with its numbers as text. */
-function EventsPerMinute({ minutes }: { readonly minutes: readonly MinuteCount[] }) {
-  const total = minutes.reduce((sum, minute) => sum + minute.count, 0);
-  const busiest = extremes(minutes)?.highest;
-  return (
-    <Panel
-      title="Events per minute"
-      description="How many of the events below happened in each minute of the last hour, whatever the filter shows."
-    >
-      <MinuteChart kind="columns" title="Events per minute" unit="events" minutes={minutes} />
-      <p className="chart-summary">
-        {total === 1 ? "1 event" : `${total} events`} in the last hour
-        {busiest === undefined || busiest.count === 0 ? null : (
-          <>
-            ; the busiest minute was {busiest.label}, with {busiest.count}
-          </>
-        )}
-        .
-      </p>
-      <MinuteTable minutes={minutes} heading="Events" />
-    </Panel>
-  );
-}
-
-/**
- * The events, newest first, in a scrolling box of fixed height. Each one's payload is a list of
- * its keys and values. A filter starts the box again at the top.
- */
-export function EventList(props: {
-  readonly events: readonly ConsoleEvent[];
-  /** The workers the daemon lists, to name an event's worker; `undefined` until read. */
-  readonly workers: readonly WorkerView[] | undefined;
-  /** Only the events about this subject; all of them when absent. */
-  readonly filter?: Subject | "all";
-}) {
-  const { filter = "all", workers } = props;
-  if (props.events.length === 0) return <p className="muted">No events in the last hour.</p>;
-  const events = shownEvents(props.events, filter);
-  if (events.length === 0) return <p className="muted">No events of this kind.</p>;
-  return <Feed key={filter} events={events} workers={workers} />;
-}
-
-/** The box's height and a row's before either is measured: what a first draw lays out. */
-const FEED_HEIGHT_PX = 640;
-const ROW_ESTIMATE_PX = 120;
-
-/** Rows drawn past each edge of the box, so a short scroll shows rows already there. */
-const OVERSCAN = 5;
-
-/**
- * The feed's scrolling box. Only the rows in view, and {@link OVERSCAN} past each edge, are in
- * the page; each is measured as it is drawn, since a payload that wraps makes its row taller.
- *
- * New events come in at the top. While the box is at the top, they push the rows down, so the
- * newest is always in view. Once the operator scrolls down, the row they are reading stays where
- * it is (`anchorTo: "end"` keeps the row at the top of the box in place when rows are added
- * above it), and a button counts the events that came in since; it scrolls back to the top.
- */
-function Feed(props: {
-  readonly events: readonly ConsoleEvent[];
-  readonly workers: readonly WorkerView[] | undefined;
-}) {
-  const { events, workers } = props;
-  const box = useRef<HTMLDivElement>(null);
-  const [atTop, setAtTop] = useState(true);
-  const newest = events[0] === undefined ? undefined : keyOf(events[0]);
-  // The newest event the operator saw at the top of the box: every event above it is new to them.
-  const [seen, setSeen] = useState(newest);
-  useEffect(() => {
-    if (atTop) setSeen(newest);
-  }, [atTop, newest]);
-  const virtualizer = useVirtualizer({
-    anchorTo: atTop ? "start" : "end",
-    count: events.length,
-    estimateSize: () => ROW_ESTIMATE_PX,
-    getItemKey: (index) => {
-      const event = events[index];
-      return event === undefined ? index : keyOf(event);
-    },
-    getScrollElement: () => box.current,
-    initialRect: { height: FEED_HEIGHT_PX, width: 0 },
-    overscan: OVERSCAN,
-  });
-  const unseen = atTop
-    ? 0
-    : Math.max(
-        0,
-        events.findIndex((event) => keyOf(event) === seen),
-      );
-  const toTop = () => {
-    virtualizer.scrollToOffset(0);
-    box.current?.focus();
-  };
-  return (
-    <div className="feed">
-      {unseen === 0 ? null : (
-        <button className="button button-secondary feed-new" type="button" onClick={toTop}>
-          {unseen === 1 ? "1 new event" : `${formatCount(unseen)} new events`}
-        </button>
-      )}
-      <div
-        ref={box}
-        className="feed-box"
-        role="region"
-        aria-label="Event feed"
-        tabIndex={0}
-        onScroll={(event) => setAtTop(event.currentTarget.scrollTop < 1)}
-      >
-        <ol className="events" style={{ height: virtualizer.getTotalSize() }}>
-          {virtualizer.getVirtualItems().map((item) => {
-            const event = events[item.index];
-            if (event === undefined) return null;
-            return (
-              <li
-                key={item.key.toString()}
-                ref={virtualizer.measureElement}
-                data-index={item.index}
-                className="event"
-                aria-setsize={events.length}
-                aria-posinset={item.index + 1}
-                style={{ transform: `translateY(${item.start}px)` }}
-              >
-                <EventRow event={event} workers={workers} />
-              </li>
-            );
-          })}
-        </ol>
-      </div>
-    </div>
-  );
-}
-
-/** One event: its time, its name, its worker on a gateway, and its payload. */
-function EventRow(props: {
-  readonly event: ConsoleEvent;
-  readonly workers: readonly WorkerView[] | undefined;
-}) {
-  const { event, workers } = props;
-  const workerId = workerIdOf(event);
-  const pairs = payloadPairs(event.payload);
-  return (
-    <>
-      <p className="event-head">
-        <time className="mono" dateTime={new Date(event.timestamp).toISOString()}>
-          {timeOfDay(event.timestamp)}
-        </time>
-        <span className="event-name mono">{event.event}</span>
-        {workerId === undefined ? null : (
-          <span className="event-worker">{eventWorkerName(workerId, workers)}</span>
-        )}
-      </p>
-      {pairs.length === 0 ? null : (
-        <dl className="event-payload">
-          {pairs.map((pair) => (
-            <div key={pair.key}>
-              <dt className="mono">{pair.key}</dt>
-              <dd className="mono">{pair.value}</dd>
-            </div>
-          ))}
-        </dl>
-      )}
-    </>
-  );
-}
-
-/**
- * The name to show for the worker an event is about: its label when the daemon lists it, its
- * id when the worker has no label or is not listed (yet, or any more).
- */
-function eventWorkerName(id: string, workers: readonly WorkerView[] | undefined): string {
-  const worker = workers?.find((candidate) => candidate.id === id);
-  return worker === undefined ? id : workerName(worker);
-}
diff --git a/ui/src/views/index.test.ts b/ui/src/views/index.test.ts
deleted file mode 100644
index 1e30513d4..000000000
--- a/ui/src/views/index.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { VIEWS, viewFor } from "./index";
-
-describe("viewFor", () => {
-  it("finds each view by its path, and the first view at /", () => {
-    expect(VIEWS.map((view) => view.label)).toEqual([
-      "Workers",
-      "Leases",
-      "Waiting",
-      "Attention",
-      "Events",
-    ]);
-    for (const view of VIEWS) expect(viewFor(view.path)).toBe(view);
-    expect(viewFor("/leases/lease_1")?.label).toBe("Leases");
-    expect(viewFor("/")).toBe(VIEWS[0]);
-  });
-
-  it("finds no view for a path the console does not have", () => {
-    expect(viewFor("/no-such-page")).toBeUndefined();
-    expect(viewFor("/workersx")).toBeUndefined();
-  });
-});
diff --git a/ui/src/views/index.tsx b/ui/src/views/index.tsx
deleted file mode 100644
index d1a07dba0..000000000
--- a/ui/src/views/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { ComponentType } from "react";
-
-import { AttentionView } from "./attention";
-import { EventsView } from "./events";
-import { LeasesView } from "./leases";
-import { WaitingView } from "./waiting";
-import { WorkersView } from "./workers";
-
-/**
- * Every view the console has, in tab order. An entry is one tab and one page: its `path` is the
- * page's URL, `label` names it on its tab and in the page title, and `Component` renders the
- * page inside the shell. A view's own pages live under its path, as one worker's page lives at
- * `/workers/<id>`. Adding a view is adding an entry here.
- */
-export interface View {
-  readonly path: `/${string}`;
-  readonly label: string;
-  readonly Component: ComponentType;
-}
-
-export const VIEWS: readonly View[] = [
-  { path: "/workers", label: "Workers", Component: WorkersView },
-  { path: "/leases", label: "Leases", Component: LeasesView },
-  { path: "/waiting", label: "Waiting", Component: WaitingView },
-  { path: "/attention", label: "Attention", Component: AttentionView },
-  { path: "/events", label: "Events", Component: EventsView },
-];
-
-/**
- * The view a path shows, or `undefined` for a path the console has no view for. `/` shows the
- * first view; the shell then rewrites the address to that view's own path.
- */
-export function viewFor(path: string): View | undefined {
-  if (path === "/") return VIEWS[0];
-  return VIEWS.find((view) => path === view.path || path.startsWith(`${view.path}/`));
-}
diff --git a/ui/src/views/leases.test.tsx b/ui/src/views/leases.test.tsx
deleted file mode 100644
index 13df596a0..000000000
--- a/ui/src/views/leases.test.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { LeaseFacts, LeaseTable } from "./leases";
-import {
-  type LeaseDetails,
-  leaseIdFrom,
-  leasePath,
-  type LeaseRecord,
-  leasesOnWorker,
-  type TokenRecord,
-} from "./leases-model";
-import type { WorkerView } from "./workers-model";
-
-const NOW = Date.parse("2026-10-02T12:00:00Z");
-
-function lease(overrides: Partial<LeaseRecord> = {}): LeaseRecord {
-  return {
-    deviceId: "dev_1",
-    grantedAt: NOW - 90_000,
-    id: "lse_1",
-    lastRenewedAt: NOW - 30_000,
-    ownerId: "tok_1",
-    requesterId: "tok_1",
-    ttlDeadline: NOW + 125_000,
-    idChosenByRequester: false,
-    ttlMs: 215_000,
-    ...overrides,
-  };
-}
-
-function token(overrides: Partial<TokenRecord> = {}): TokenRecord {
-  return {
-    createdAt: NOW - 1_000_000,
-    id: "tok_1",
-    label: "ci-runner-3",
-    role: "agent",
-    ...overrides,
-  };
-}
-
-const HOST: WorkerView = {
-  catalog: [],
-  connection: "connected",
-  devices: [
-    {
-      physical: false,
-      id: "dev_1",
-      mode: "slim",
-      servesDefaultMode: false,
-      spec: {
-        physical: false,
-        imageTag: "base",
-        model: "iPhone 16",
-        osVersion: "18.4",
-        platform: "ios",
-      },
-      state: "leased",
-    },
-  ],
-  drained: false,
-  id: "wrk_host",
-  label: "mac-mini-1",
-  lastSeenAt: NOW,
-  leases: [],
-};
-
-/** The text of every cell with `data-label="<label>"`, without markup. */
-function cells(html: string, label: string): string[] {
-  const pattern = new RegExp(`<td data-label="${label}"[^>]*>(.*?)</td>`, "g");
-  return [...html.matchAll(pattern)].map((match) => text(match[1] ?? ""));
-}
-
-/** The text a screen shows, without markup. */
-function text(html: string): string {
-  return html
-    .replace(/<[^>]+>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-function table(leases: readonly LeaseRecord[], tokens: readonly TokenRecord[]): string {
-  return renderToStaticMarkup(
-    <LeaseTable
-      leases={leases}
-      tokens={tokens}
-      workers={[HOST]}
-      now={NOW}
-      showWorker
-      label="All leases"
-    />,
-  );
-}
-
-describe("the leases views", () => {
-  it("a lease's holder shows its token's label with the token id beside it", () => {
-    const html = table(
-      [lease(), lease({ id: "lse_2", requesterId: "tok_2" })],
-      [token(), token({ id: "tok_2", label: "nightly" }), token({ id: "tok_3", label: "other" })],
-    );
-
-    expect(cells(html, "Holder")).toEqual(["ci-runner-3 tok_1", "nightly tok_2"]);
-  });
-
-  it("a holder with no matching token shows its id alone", () => {
-    const html = table(
-      [lease({ requesterId: "agent-7" }), lease({ id: "lse_2", requesterId: "tok_9" })],
-      // tok_9 is known but has no label.
-      [token(), { createdAt: NOW, id: "tok_9", role: "agent" }],
-    );
-
-    expect(cells(html, "Holder")).toEqual(["agent-7", "tok_9"]);
-  });
-
-  it("a lease row shows its worker, device, mode, image tag and times", () => {
-    const html = table([lease()], [token()]);
-
-    expect(cells(html, "Worker")).toEqual(["mac-mini-1"]);
-    expect(cells(html, "Device")).toEqual(["iPhone 16 dev_1"]);
-    expect(cells(html, "Mode")).toEqual(["slim"]);
-    expect(cells(html, "Image tag")).toEqual(["base"]);
-    expect(cells(html, "Granted")).toEqual(["1 min 30 s ago"]);
-    expect(cells(html, "Expires in")).toEqual(["2 min 5 s"]);
-    expect(cells(html, "Last renewed")).toEqual(["30 s ago"]);
-  });
-
-  it("a lease on a physical device shows a dash in the table's Mode cell and an empty Mode fact on its page", () => {
-    const physical: WorkerView = {
-      ...HOST,
-      devices: [
-        {
-          class: "phone",
-          id: "dev_p",
-          physical: true,
-          servesDefaultMode: false,
-          spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
-          state: "leased",
-        },
-      ],
-    };
-    const html = renderToStaticMarkup(
-      <LeaseTable
-        leases={[lease({ deviceId: "dev_p" })]}
-        tokens={[token()]}
-        workers={[physical]}
-        now={NOW}
-        showWorker
-        label="All leases"
-      />,
-    );
-    const details: LeaseDetails = {
-      createdAt: new Date(NOW - 90_000).toISOString(),
-      device: "iPhone 15 Pro",
-      deviceId: "dev_p",
-      expiresAt: new Date(NOW + 125_000).toISOString(),
-      id: "lse_1",
-      udid: "00008110-001A2B3C4D5E",
-    };
-    const facts = text(
-      renderToStaticMarkup(
-        <LeaseFacts
-          lease={details}
-          record={lease()}
-          tokens={[token()]}
-          workers={[physical]}
-          now={NOW}
-        />,
-      ),
-    );
-
-    expect(cells(html, "Mode")).toEqual(["—"]);
-    expect(facts).toContain("UDID 00008110-001A2B3C4D5E Mode Image tag");
-  });
-
-  it("no leases shows as one line saying so", () => {
-    expect(text(table([], [token()]))).toBe("No leases.");
-  });
-
-  it("the table lists leases oldest granted first, whatever order the daemon sends", () => {
-    const sent = [
-      lease({ grantedAt: NOW - 1_000, id: "lse_newest", workerId: "wrk_a" }),
-      lease({ grantedAt: NOW - 9_000, id: "lse_b", workerId: "wrk_b" }),
-      lease({ grantedAt: NOW - 9_000, id: "lse_a", workerId: "wrk_b" }),
-      lease({ grantedAt: NOW - 9_000, id: "lse_z", workerId: "wrk_a" }),
-    ];
-
-    const shown = cells(table(sent, [token()]), "Lease");
-
-    // Granted in the same millisecond: by worker, then by the lease's own id.
-    expect(shown).toEqual(["lse_z", "lse_a", "lse_b", "lse_newest"]);
-    expect(cells(table(sent.toReversed(), [token()]), "Lease")).toEqual(shown);
-  });
-
-  it("a worker's leases are the ones that name it, or every one on a single host", () => {
-    const onA = lease({ id: "a", workerId: "wrk_a" });
-    const onB = lease({ id: "b", workerId: "wrk_b" });
-    const local = lease({ id: "local" });
-
-    const a = { ...HOST, id: "wrk_a" };
-    const b = { ...HOST, id: "wrk_b" };
-
-    expect(leasesOnWorker([onA, onB], "wrk_a", [a, b])).toEqual([onA]);
-    expect(leasesOnWorker([local], "wrk_host", [HOST])).toEqual([local]);
-    // A lease that names no worker, among several, is on none of them.
-    expect(leasesOnWorker([local], "wrk_a", [a, b])).toEqual([]);
-  });
-
-  it("a gateway lease's page path has no `.` in its last segment, and names the lease again", () => {
-    const id = "3f81a2c4-9b7d-4e21-8a55-1c0e6f2d7b93.lse_9f2c";
-    const path = leasePath(id);
-
-    // The daemon serves the page only for a path whose last segment has no `.`.
-    expect(path.slice(path.lastIndexOf("/") + 1)).not.toContain(".");
-    expect(leaseIdFrom(path)).toBe(id);
-    expect(leaseIdFrom("/leases")).toBeUndefined();
-    // A malformed escape in a pasted address is read as written, not thrown.
-    expect(leaseIdFrom("/leases/lse_%E0%A4%A/")).toBe("lse_%E0%A4%A");
-  });
-
-  it("a lease's details show its request id when it has one, and its udid", () => {
-    const details: LeaseDetails = {
-      createdAt: new Date(NOW - 90_000).toISOString(),
-      device: "iPhone 16",
-      deviceId: "dev_1",
-      expiresAt: new Date(NOW + 125_000).toISOString(),
-      id: "lse_1",
-      mode: "slim",
-      imageTag: "base",
-      requestId: "req_7d1a",
-      udid: "ABCD-1234",
-    };
-    const facts = (shown: LeaseDetails) =>
-      text(
-        renderToStaticMarkup(
-          <LeaseFacts
-            lease={shown}
-            record={lease()}
-            tokens={[token()]}
-            workers={[HOST]}
-            now={NOW}
-          />,
-        ),
-      );
-
-    const withRequest = facts(details);
-    const { requestId: _dropped, ...withoutRequestId } = details;
-    const withoutRequest = facts(withoutRequestId);
-
-    expect(withRequest).toContain("Holder ci-runner-3 tok_1");
-    expect(withRequest).toContain("Worker mac-mini-1");
-    expect(withRequest).toContain("UDID ABCD-1234");
-    expect(withRequest).toContain("Last renewed 30 s ago");
-    expect(withRequest).toContain("Granted 1 min 30 s ago");
-    expect(withRequest).toContain("Expires in 2 min 5 s");
-    expect(withRequest).toContain("Image tag base");
-    expect(withRequest).toContain("Request req_7d1a");
-    expect(withoutRequest).not.toContain("Request");
-  });
-
-  it("a lease's worker is named from the lease itself when no worker view has it", () => {
-    const details: LeaseDetails = {
-      createdAt: new Date(NOW).toISOString(),
-      device: "iPhone 16",
-      deviceId: "dev_1",
-      expiresAt: new Date(NOW + 60_000).toISOString(),
-      id: "wrk_gone.lse_1",
-      mode: "full",
-      udid: "ABCD-1234",
-    };
-    const worker = (shown: LeaseDetails) =>
-      /Worker (\S+)/.exec(
-        text(
-          renderToStaticMarkup(
-            <LeaseFacts lease={shown} record={undefined} tokens={[]} workers={[]} now={NOW} />,
-          ),
-        ),
-      )?.[1];
-
-    expect(worker({ ...details, worker: { id: "wrk_gone", label: "mac-studio-2" } })).toBe(
-      "mac-studio-2",
-    );
-    expect(worker({ ...details, workerId: "wrk_gone" })).toBe("wrk_gone");
-  });
-});
diff --git a/ui/src/views/leases.tsx b/ui/src/views/leases.tsx
deleted file mode 100644
index 01487bf70..000000000
--- a/ui/src/views/leases.tsx
+++ /dev/null
@@ -1,360 +0,0 @@
-import type { ReactNode } from "react";
-
-import { ApiError } from "../api";
-import { ScreenPane } from "../screen/viewer";
-import { Id, PageHeader, Panel, StatCards } from "../layout";
-import { useLiveResource, useNow } from "../live/live-context";
-import { Loaded } from "../live/route-state";
-import { formatDuration } from "../live/time";
-import { Link, usePath } from "../router";
-import { type Column, DataTable } from "../table";
-import {
-  deviceOfLease,
-  type Holder,
-  holderOf,
-  inGrantOrder,
-  type LeaseDetails,
-  leaseIdFrom,
-  type LeaseList,
-  leasePath,
-  type LeaseRecord,
-  leasesOnWorker,
-  leasesStats,
-  type TokenList,
-  type TokenRecord,
-  workerNameOfLease,
-  workerOfLease,
-} from "./leases-model";
-import type { WorkerList, WorkerView } from "./workers-model";
-
-/**
- * The leases views (ADR 0013 §1): every lease at `/leases`, from `GET /v1/leases`, and one lease
- * at `/leases/<id>/`, from `GET /v1/leases/{id}`. A holder is named from `GET /v1/tokens`, and a
- * lease's device and worker from `GET /v1/workers`.
- */
-export function LeasesView() {
-  const id = leaseIdFrom(usePath());
-  return (
-    <section className="view">{id === undefined ? <FleetLeases /> : <Lease id={id} />}</section>
-  );
-}
-
-/** Every lease the daemon lists: on a gateway, the whole fleet's. */
-function FleetLeases() {
-  const leases = useLiveResource<LeaseList>("/v1/leases");
-  const tokens = useTokens();
-  const workers = useWorkers();
-  const now = useNow();
-  return (
-    <>
-      <PageHeader
-        title="Leases"
-        subtitle="Who holds which device, on which worker, and for how much longer."
-      />
-      <Loaded state={leases}>
-        {(list) => (
-          <>
-            <StatCards stats={leasesStats(list.leases, now.server)} />
-            <Panel
-              title="All leases"
-              description="Every lease the daemon holds. Select one to see its details."
-            >
-              <LeaseTable
-                leases={list.leases}
-                tokens={tokens}
-                workers={workers}
-                now={now.server}
-                showWorker
-                label="All leases"
-              />
-            </Panel>
-          </>
-        )}
-      </Loaded>
-    </>
-  );
-}
-
-/** The leases on one worker, for that worker's page. */
-export function WorkerLeases(props: {
-  readonly worker: WorkerView;
-  readonly workers: readonly WorkerView[];
-  readonly now: number;
-}) {
-  const leases = useLiveResource<LeaseList>("/v1/leases");
-  const tokens = useTokens();
-  return (
-    <Loaded state={leases}>
-      {(list) => (
-        <LeaseTable
-          leases={leasesOnWorker(list.leases, props.worker.id, props.workers)}
-          tokens={tokens}
-          workers={props.workers}
-          now={props.now}
-          showWorker={false}
-          label="Leases"
-          name="leases"
-        />
-      )}
-    </Loaded>
-  );
-}
-
-/**
- * The token records, or none while they have not arrived or were refused: a holder then shows
- * its id alone, and the leases still show.
- */
-function useTokens(): readonly TokenRecord[] {
-  return useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
-}
-
-function useWorkers(): readonly WorkerView[] {
-  return useLiveResource<WorkerList>("/v1/workers").data?.workers ?? [];
-}
-
-/** A lease's holder: the token's label with the token id beside it, or the id alone. */
-function HolderName({ holder }: { readonly holder: Holder }) {
-  if (holder.label === undefined) return <span className="mono">{holder.id}</span>;
-  return (
-    <>
-      {holder.label} <span className="muted mono">{holder.id}</span>
-    </>
-  );
-}
-
-/**
- * Each lease as a row, oldest granted first, a page at a time. On a phone each row stacks into a
- * block of labelled lines.
- */
-export function LeaseTable(props: {
-  readonly leases: readonly LeaseRecord[];
-  readonly tokens: readonly TokenRecord[];
-  readonly workers: readonly WorkerView[];
-  /** The daemon's time now, for every time on the page. */
-  readonly now: number;
-  /** Off on a worker's own page, where every lease is on that worker. */
-  readonly showWorker: boolean;
-  /** Names the pager: the title of the panel the table sits in. */
-  readonly label: string;
-  /** Where the table keeps its page in the URL, on a page with another table. */
-  readonly name?: string;
-}) {
-  const { label, leases, name, now, showWorker, tokens, workers } = props;
-  const columns: Column<LeaseRecord>[] = [
-    {
-      cell: (lease) => (
-        <Link to={leasePath(lease.id)} className="id" title={lease.id}>
-          {lease.id}
-        </Link>
-      ),
-      header: "Lease",
-    },
-    {
-      cell: (lease) => (
-        <span>
-          <HolderName holder={holderOf(lease.requesterId, tokens)} />
-        </span>
-      ),
-      header: "Holder",
-    },
-    ...(showWorker
-      ? [
-          {
-            cell: (lease: LeaseRecord) => <LeaseWorker lease={lease} workers={workers} />,
-            header: "Worker",
-          },
-        ]
-      : []),
-    {
-      cell: (lease) => {
-        const device = deviceOfLease(lease, workers);
-        return (
-          <span>
-            {device === undefined ? null : <>{device.spec.model} </>}
-            <span className="muted">
-              <Id>{lease.deviceId}</Id>
-            </span>
-          </span>
-        );
-      },
-      header: "Device",
-    },
-    { cell: (lease) => deviceOfLease(lease, workers)?.mode ?? "—", header: "Mode" },
-    {
-      cell: (lease) => deviceOfLease(lease, workers)?.spec.imageTag ?? "—",
-      header: "Image tag",
-      mono: true,
-    },
-    {
-      cell: (lease) => <Ago at={lease.grantedAt} now={now} />,
-      header: "Granted",
-      numeric: true,
-    },
-    {
-      cell: (lease) => <Until at={lease.ttlDeadline} now={now} />,
-      header: "Expires in",
-      numeric: true,
-    },
-    {
-      cell: (lease) => <Ago at={lease.lastRenewedAt} now={now} />,
-      header: "Last renewed",
-      numeric: true,
-    },
-  ];
-  return (
-    <DataTable
-      label={label}
-      rows={inGrantOrder(leases)}
-      columns={columns}
-      rowId={(lease) => `${lease.workerId ?? ""} ${lease.id}`}
-      empty="No leases."
-      wide
-      {...(name === undefined ? {} : { name })}
-    />
-  );
-}
-
-/** The worker a lease is on, by its label, or by its id on one line when it has none. */
-function LeaseWorker(props: {
-  readonly lease: LeaseRecord;
-  readonly workers: readonly WorkerView[];
-}) {
-  const name = workerNameOfLease(props.lease, props.workers);
-  if (name === undefined) return "—";
-  const labelled = workerOfLease(props.lease, props.workers)?.label !== undefined;
-  return labelled ? name : <Id>{name}</Id>;
-}
-
-/** How long ago `at` was, with the moment itself for a tooltip and a machine. */
-function Ago({ at, now }: { readonly at: number; readonly now: number }) {
-  return <time dateTime={isoOf(at)}>{formatDuration(now - at)} ago</time>;
-}
-
-/** How long until `at`, counting down; `0 s` once it has passed. */
-function Until({ at, now }: { readonly at: number; readonly now: number }) {
-  return <time dateTime={isoOf(at)}>{formatDuration(at - now)}</time>;
-}
-
-function isoOf(at: number): string | undefined {
-  return Number.isFinite(at) ? new Date(at).toISOString() : undefined;
-}
-
-/** One lease: everything the list says about it, plus its request id and its device's udid. */
-function Lease({ id }: { readonly id: string }) {
-  const details = useLiveResource<{ readonly lease: LeaseDetails }>(
-    `/v1/leases/${encodeURIComponent(id)}`,
-  );
-  const leases = useLiveResource<LeaseList>("/v1/leases");
-  const tokens = useTokens();
-  const workers = useWorkers();
-  const now = useNow();
-  const gone = isUnknownLease(details.error);
-  return (
-    <>
-      {gone ? (
-        <>
-          <PageHeader title="Lease not found" actions={<AllLeases />} />
-          <p className="muted">
-            No lease has the id <code>{id}</code>. A lease that was released or expired is gone.
-          </p>
-        </>
-      ) : (
-        <>
-          <PageHeader
-            title={id}
-            mono
-            subtitle="One lease: who holds it, its device, and when it expires."
-            actions={<AllLeases />}
-          />
-          <Loaded state={details}>
-            {({ lease }) => (
-              <Panel title="Details" description="As the daemon holds the lease now.">
-                <LeaseFacts
-                  lease={lease}
-                  record={leases.data?.leases.find((candidate) => candidate.id === lease.id)}
-                  tokens={tokens}
-                  workers={workers}
-                  now={now.server}
-                />
-              </Panel>
-            )}
-          </Loaded>
-          <ScreenPane leaseId={id} />
-        </>
-      )}
-    </>
-  );
-}
-
-function AllLeases() {
-  return (
-    <Link to="/leases" className="button button-secondary">
-      All leases
-    </Link>
-  );
-}
-
-function isUnknownLease(error: unknown): boolean {
-  return error instanceof ApiError && error.status === 404 && error.code === "UNKNOWN_LEASE";
-}
-
-/** A lease's facts. `record` is its entry in `GET /v1/leases`: who holds it, when it was renewed. */
-export function LeaseFacts(props: {
-  readonly lease: LeaseDetails;
-  readonly record: LeaseRecord | undefined;
-  readonly tokens: readonly TokenRecord[];
-  readonly workers: readonly WorkerView[];
-  readonly now: number;
-}) {
-  const { lease, now, record, tokens, workers } = props;
-  const worker = workerNameOfLease(
-    { worker: lease.worker, workerId: lease.workerId ?? record?.workerId },
-    workers,
-  );
-  return (
-    <dl className="facts">
-      <Fact label="Holder">
-        {record === undefined ? "—" : <HolderName holder={holderOf(record.requesterId, tokens)} />}
-      </Fact>
-      <Fact label="Worker">{worker ?? "—"}</Fact>
-      <Fact label="Device">{lease.device}</Fact>
-      <Fact label="Device id" mono>
-        {lease.deviceId}
-      </Fact>
-      <Fact label="UDID" mono>
-        {lease.udid}
-      </Fact>
-      <Fact label="Mode">{lease.mode}</Fact>
-      <Fact label="Image tag" mono>
-        {lease.imageTag ?? "—"}
-      </Fact>
-      <Fact label="Granted" mono>
-        <Ago at={Date.parse(lease.createdAt)} now={now} />
-      </Fact>
-      <Fact label="Expires in" mono>
-        <Until at={Date.parse(lease.expiresAt)} now={now} />
-      </Fact>
-      <Fact label="Last renewed" mono>
-        {record === undefined ? "—" : <Ago at={record.lastRenewedAt} now={now} />}
-      </Fact>
-      {lease.requestId === undefined ? null : (
-        <Fact label="Request" mono>
-          {lease.requestId}
-        </Fact>
-      )}
-    </dl>
-  );
-}
-
-function Fact(props: {
-  readonly label: string;
-  readonly mono?: boolean;
-  readonly children: ReactNode;
-}) {
-  return (
-    <div>
-      <dt>{props.label}</dt>
-      <dd className={props.mono === true ? "mono" : undefined}>{props.children}</dd>
-    </div>
-  );
-}
diff --git a/ui/src/views/not-found.tsx b/ui/src/views/not-found.tsx
deleted file mode 100644
index cddd3a333..000000000
--- a/ui/src/views/not-found.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PageHeader } from "../layout";
-import { Link } from "../router";
-import { VIEWS } from "./index";
-
-/** A path the console has no view for, such as an old or mistyped link. */
-export function NotFound() {
-  const home = VIEWS[0];
-  return (
-    <section className="view">
-      <PageHeader title="Page not found" subtitle="The console has no page at this address." />
-      {home === undefined ? null : (
-        <p>
-          <Link to={home.path}>Go to {home.label}</Link>
-        </p>
-      )}
-    </section>
-  );
-}
diff --git a/ui/src/views/stats.test.tsx b/ui/src/views/stats.test.tsx
deleted file mode 100644
index 9f059bcc3..000000000
--- a/ui/src/views/stats.test.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { type Stat, StatCards } from "../layout";
-import { attentionItems, attentionStats } from "./attention-model";
-import { type ConsoleEvent, eventsStats, timeOfDay } from "./events-model";
-import { type LeaseRecord, leasesStats } from "./leases-model";
-import { type WaitingRequest, waitingStats } from "./waiting-model";
-import { type WorkerDevice, type WorkerView, workersStats } from "./workers-model";
-
-const NOW = Date.parse("2026-10-02T12:00:00Z");
-const MINUTE = 60_000;
-
-/** Each stat card as `label | value | caption`, read from the markup the view renders. */
-function cards(stats: readonly Stat[]): string[] {
-  const html = renderToStaticMarkup(<StatCards stats={stats} />);
-  return [...html.matchAll(/<li class="stat">(.*?)<\/li>/g)].map(([, inner = ""]) =>
-    [...inner.matchAll(/<p class="stat-(?:label|value|caption)">(.*?)<\/p>/g)]
-      .map(([, text = ""]) => text.replace(/&#x27;/g, "'"))
-      .join(" | "),
-  );
-}
-
-function capacity(running: number) {
-  const entry = {
-    atRamBudget: false,
-    limit: 4,
-    maxRunning: 4,
-    overLimit: false,
-    reserved: 0,
-    running,
-    used: running,
-  };
-  return {
-    android: { ...entry, running: 0, used: 0, warm: 0 },
-    global: { maxRunning: 4, overLimit: false, reserved: 0, running, warm: 0 },
-    ios: { ...entry, warm: 0 },
-  };
-}
-
-function device(id: string, state: string, overrides: Partial<WorkerDevice> = {}): WorkerDevice {
-  return {
-    id,
-    mode: "full",
-    spec: { model: "iPhone 16", osVersion: "18.4", platform: "ios" },
-    state,
-    ...overrides,
-  } as WorkerDevice;
-}
-
-function lease(id: string, requesterId: string, ttlDeadline: number): LeaseRecord {
-  return {
-    deviceId: `dev_${id}`,
-    grantedAt: NOW - MINUTE,
-    id,
-    lastRenewedAt: NOW - MINUTE,
-    ownerId: requesterId,
-    requesterId,
-    ttlDeadline,
-    idChosenByRequester: false,
-    ttlMs: 15 * MINUTE,
-  };
-}
-
-function worker(id: string, overrides: Partial<WorkerView> = {}): WorkerView {
-  return {
-    catalog: [],
-    connection: "connected",
-    devices: [],
-    drained: false,
-    id,
-    lastSeenAt: NOW,
-    leases: [],
-    ...overrides,
-  };
-}
-
-function waitingRequest(id: string, createdAt: number): WaitingRequest {
-  return {
-    createdAt,
-    id,
-    requesterId: `agent-${id}`,
-    spec: { model: "iPhone 16", platform: "ios" },
-    stage: "queued",
-  } as WaitingRequest;
-}
-
-describe("the stat cards", () => {
-  it("each view's stat cards count what its data gives, as label, number and caption", () => {
-    const fleet = [
-      worker("wrk_a", {
-        capacity: capacity(2),
-        devices: [device("d1", "leased"), device("d2", "leased"), device("d3", "shutdown")],
-        leases: [lease("l1", "agent-1", NOW + MINUTE), lease("l2", "agent-2", NOW + MINUTE)],
-        waiting: [
-          { createdAt: NOW, id: "r1", requesterId: "agent-3" },
-          { createdAt: NOW, id: "r2", requesterId: "agent-4" },
-        ] as WorkerView["waiting"],
-      }),
-      worker("wrk_b", {
-        capacity: capacity(1),
-        devices: [device("d4", "quarantined")],
-        drained: true,
-        leases: [lease("l3", "agent-1", NOW + MINUTE)],
-      }),
-      // Never read: its devices count as not running, as its card says "Not reported".
-      worker("wrk_c", { connection: "disconnected", devices: [device("d5", "ready")] }),
-    ];
-    expect(cards(workersStats(fleet))).toEqual([
-      "Workers | 2 | connected of 3",
-      "Devices | 3 | running of 5",
-      "Leases | 3 | held now",
-      "Waiting | 2 | requests in the workers' queues",
-    ]);
-
-    // Two holders between three leases; one expires in 15 minutes exactly, one in 14, one in 16.
-    const leases = [
-      lease("l1", "agent-1", NOW + 15 * MINUTE),
-      lease("l2", "agent-1", NOW + 14 * MINUTE),
-      lease("l3", "agent-2", NOW + 16 * MINUTE),
-    ];
-    expect(cards(leasesStats(leases, NOW))).toEqual([
-      "Leases | 3 | held now",
-      "Holders | 2 | holding at least one lease",
-      "Expiring soon | 2 | expire within 15 minutes unless renewed",
-    ]);
-
-    const requests = [
-      waitingRequest("r1", NOW - 30_000),
-      waitingRequest("r2", NOW - 90_000),
-      waitingRequest("r3", NOW - 5_000),
-    ];
-    expect(cards(waitingStats(requests, NOW))).toEqual([
-      "Requests waiting | 3 | for a device",
-      "Longest wait | 1 min 30 s | the oldest request so far",
-    ]);
-    expect(cards(waitingStats([], NOW))).toEqual([
-      "Requests waiting | 0 | for a device",
-      "Longest wait | — | no request is waiting",
-    ]);
-
-    // wrk_b: drained, and its device d4 quarantined; wrk_c: disconnected; wrk_a: nothing.
-    expect(cards(attentionStats(attentionItems(fleet)))).toEqual([
-      "Items | 3 | need attention now",
-      "Workers affected | 2 | with at least one item",
-      "Devices affected | 1 | quarantined or stalled",
-    ]);
-    // Device ids are a worker's own: the same id quarantined on two workers is two devices.
-    const twins = [
-      worker("wrk_x", { devices: [device("d1", "quarantined")] }),
-      worker("wrk_y", { devices: [device("d1", "quarantined")] }),
-    ];
-    expect(cards(attentionStats(attentionItems(twins)))).toEqual([
-      "Items | 2 | need attention now",
-      "Workers affected | 2 | with at least one item",
-      "Devices affected | 2 | quarantined or stalled",
-    ]);
-
-    const newest: ConsoleEvent = {
-      event: "lease.granted",
-      id: "evt_2",
-      payload: {},
-      seq: 2,
-      timestamp: NOW - 5_000,
-    };
-    const older: ConsoleEvent = {
-      event: "device.ready",
-      id: "evt_1",
-      payload: {},
-      seq: 1,
-      timestamp: NOW - 9_000,
-    };
-    expect(cards(eventsStats([newest, older], 2, true))).toEqual([
-      "Events shown | 2 | in the list",
-      `Newest | ${timeOfDay(newest.timestamp)} | lease.granted`,
-    ]);
-    expect(cards(eventsStats([older], 2, false))).toEqual([
-      "Events shown | 1 | of 2 in the list",
-      `Newest | ${timeOfDay(older.timestamp)} | device.ready`,
-    ]);
-    expect(cards(eventsStats([], 0, true))).toEqual([
-      "Events shown | 0 | in the list",
-      "Newest | — | no event to show",
-    ]);
-  });
-});
diff --git a/ui/src/views/waiting.test.tsx b/ui/src/views/waiting.test.tsx
deleted file mode 100644
index 6a22942d8..000000000
--- a/ui/src/views/waiting.test.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { WaitingTable } from "./waiting";
-import { requestedDevice, type WaitingRequest } from "./waiting-model";
-import type { WorkerView } from "./workers-model";
-
-const NOW = Date.parse("2026-10-02T12:00:00Z");
-
-function request(overrides: Partial<WaitingRequest> = {}): WaitingRequest {
-  return {
-    createdAt: NOW - 75_000,
-    id: "req_1",
-    queuePosition: 1,
-    requesterId: "agent-b",
-    spec: { model: "iPhone 16", platform: "ios" },
-    stage: "queued",
-    ...overrides,
-  };
-}
-
-function worker(overrides: Partial<WorkerView> = {}): WorkerView {
-  return {
-    catalog: [],
-    connection: "connected",
-    devices: [],
-    drained: false,
-    id: "wrk_1",
-    lastSeenAt: NOW,
-    leases: [],
-    ...overrides,
-  };
-}
-
-/** The text a screen shows, without markup. */
-function text(html: string): string {
-  return html
-    .replace(/<[^>]+>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-describe("the Waiting view", () => {
-  it("writes the device a request asked for with only the fields it named", () => {
-    expect(requestedDevice({ model: "iPhone 16", platform: "ios" })).toBe("iOS iPhone 16");
-    expect(
-      requestedDevice({
-        imageTag: "google_apis",
-        mode: "slim",
-        model: "Pixel 8",
-        osVersion: "35",
-        platform: "android",
-      }),
-    ).toBe("Android Pixel 8, runtime 35, mode slim, image tag google_apis");
-  });
-
-  it("writes a request that named a class or only a platform without a model, never as undefined", () => {
-    expect(requestedDevice({ class: "phone", platform: "ios" })).toBe("iOS phone");
-    expect(requestedDevice({ platform: "android" })).toBe("Android");
-  });
-
-  it("names the worker a request waits on: by its workerId, or on a single host the worker whose view lists the same request", () => {
-    const onGateway = request({ id: "req_w", workerId: "wrk_2" });
-    const onHost = request({ id: "req_h" });
-    const inFleetQueue = request({ id: "req_f", requesterId: "fleet-agent" });
-    // The copy a gateway sent worker-b, under the gateway's requester id: never the same request,
-    // even under the same id.
-    const sentOn = request({ id: "req_f", requesterId: "gw:gateway-1:fleet-agent" });
-    // Another request from the same requester, under another id: not this one either.
-    const another = request({ id: "req_x", requesterId: "fleet-agent" });
-    const workers = [
-      worker({ id: "wrk_1", label: "host", waiting: [onHost] }),
-      worker({ id: "wrk_2", label: "worker-b", waiting: [sentOn] }),
-      worker({ id: "wrk_3", label: "worker-c", waiting: [another] }),
-    ];
-
-    const html = renderToStaticMarkup(
-      <WaitingTable requests={[onGateway, onHost, inFleetQueue]} workers={workers} now={NOW} />,
-    );
-
-    expect(html).toContain('href="/workers/wrk_2"');
-    expect(text(html)).toContain("agent-b iOS iPhone 16 worker-b queued 1 1 min 15 s");
-    expect(html).toContain('href="/workers/wrk_1"');
-    expect(text(html)).toContain("agent-b iOS iPhone 16 host queued");
-    expect(text(html)).toContain("fleet-agent iOS iPhone 16 — queued");
-  });
-
-  it("names a worker the console has no view of by its id", () => {
-    const html = renderToStaticMarkup(
-      <WaitingTable requests={[request({ workerId: "wrk_gone" })]} workers={[]} now={NOW} />,
-    );
-
-    expect(text(html)).toContain("agent-b iOS iPhone 16 wrk_gone queued");
-    expect(html).not.toContain("href=");
-  });
-
-  it("shows a starting request with no place in the queue, and a stage it does not know as its raw word", () => {
-    const starting = request({ id: "req_s", stage: "starting" });
-    delete (starting as { queuePosition?: number }).queuePosition;
-    // A stage a newer daemon may send, which this console has never heard of.
-    const unknown = {
-      ...request({ id: "req_u" }),
-      stage: "hibernating",
-    } as unknown as WaitingRequest;
-
-    const html = renderToStaticMarkup(
-      <WaitingTable requests={[starting, unknown]} workers={[]} now={NOW} />,
-    );
-
-    expect(text(html)).toContain("starting — 1 min 15 s");
-    expect(html).toContain('class="status status-ok"');
-    expect(text(html)).toContain("hibernating 1");
-    expect(html).toContain('class="status status-idle"');
-  });
-
-  it('shows "1 (physical)" as the place of a waiting physical request at place 1, and "1" for a virtual one', () => {
-    const physical = request({
-      id: "req_p",
-      requesterId: "agent-p",
-      spec: { model: "iPhone 15 Pro", physical: true, platform: "ios" },
-    } as unknown as Partial<WaitingRequest>);
-    const virtual = request({ id: "req_v", requesterId: "agent-v" });
-
-    const html = renderToStaticMarkup(
-      <WaitingTable requests={[physical, virtual]} workers={[]} now={NOW} />,
-    );
-
-    expect(text(html)).toContain("agent-p iOS iPhone 15 Pro — queued 1 (physical) 1 min 15 s");
-    expect(text(html)).toContain("agent-v iOS iPhone 16 — queued 1 1 min 15 s");
-  });
-
-  it("heads the place column as a numeric Place in queue column", () => {
-    const html = renderToStaticMarkup(
-      <WaitingTable requests={[request()]} workers={[]} now={NOW} />,
-    );
-
-    expect(html).toContain('<th scope="col" class="num">Place in queue</th>');
-  });
-
-  it("says so when nothing is waiting", () => {
-    const html = renderToStaticMarkup(<WaitingTable requests={[]} workers={[]} now={NOW} />);
-
-    expect(text(html)).toBe("No requests are waiting.");
-  });
-});
diff --git a/ui/src/views/waiting.tsx b/ui/src/views/waiting.tsx
deleted file mode 100644
index 0bd040fc2..000000000
--- a/ui/src/views/waiting.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Id, PageHeader, Panel, StatCards } from "../layout";
-import { useLiveResource, useNow } from "../live/live-context";
-import { Loaded } from "../live/route-state";
-import { formatDuration } from "../live/time";
-import { Link } from "../router";
-import { Status, waitingStageStatus } from "../status";
-import { type Column, DataTable } from "../table";
-import {
-  requestedDevice,
-  type WaitingList,
-  type WaitingRequest,
-  waitingOn,
-  waitingStats,
-} from "./waiting-model";
-import { type WorkerList, type WorkerView, workerName, workerPath } from "./workers-model";
-
-/**
- * Every request waiting for a device, from `GET /v1/lease-requests`. `GET /v1/workers` names
- * the worker each one waits on. Time waited counts in the browser (ADR 0013 §4).
- */
-export function WaitingView() {
-  const requests = useLiveResource<WaitingList>("/v1/lease-requests");
-  const workers = useLiveResource<WorkerList>("/v1/workers");
-  const now = useNow();
-  return (
-    <section className="view">
-      <PageHeader
-        title="Waiting"
-        subtitle="Requests waiting for a device, oldest first, and their place in the queue."
-      />
-      <Loaded state={requests}>
-        {(list) => (
-          <>
-            <StatCards stats={waitingStats(list.requests, now.server)} />
-            <Panel
-              title="Waiting requests"
-              description="Each leaves this list when it gets its device, fails or is cancelled."
-            >
-              <WaitingTable
-                requests={list.requests}
-                workers={workers.data?.workers ?? []}
-                now={now.server}
-              />
-            </Panel>
-          </>
-        )}
-      </Loaded>
-    </section>
-  );
-}
-
-/**
- * One row per waiting request, a page at a time, in the order the daemon lists them: on a
- * gateway its own queue, then each worker's. On a phone each row stacks into a block of
- * labelled lines.
- */
-export function WaitingTable(props: {
-  readonly requests: readonly WaitingRequest[];
-  readonly workers: readonly WorkerView[];
-  readonly now: number;
-}) {
-  const { now, requests, workers } = props;
-  const columns: Column<WaitingRequest>[] = [
-    { cell: (request) => request.requesterId, header: "Requester", mono: true },
-    { cell: (request) => requestedDevice(request.spec), header: "Device" },
-    {
-      cell: (request) => <WorkerCell request={request} workers={workers} />,
-      header: "Worker",
-    },
-    {
-      cell: (request) => {
-        const stage = waitingStageStatus(request.stage);
-        return <Status tone={stage.tone}>{stage.word}</Status>;
-      },
-      header: "Stage",
-    },
-    { cell: (request) => queuePlace(request), header: "Place in queue", numeric: true },
-    {
-      cell: (request) => formatDuration(now - request.createdAt),
-      header: "Waiting for",
-      numeric: true,
-    },
-  ];
-  return (
-    <DataTable
-      label="Waiting requests"
-      rows={requests}
-      columns={columns}
-      rowId={(request) => `${request.workerId ?? ""}/${request.id}`}
-      empty="No requests are waiting."
-      wide
-    />
-  );
-}
-
-function queuePlace(request: WaitingRequest): string {
-  if (request.queuePosition === undefined) return "—";
-  return request.spec.physical === true
-    ? `${String(request.queuePosition)} (physical)`
-    : String(request.queuePosition);
-}
-
-function WorkerCell(props: {
-  readonly request: WaitingRequest;
-  readonly workers: readonly WorkerView[];
-}) {
-  const worker = waitingOn(props.request, props.workers);
-  if (worker === undefined) {
-    const id = props.request.workerId;
-    return id === undefined ? "—" : <Id>{id}</Id>;
-  }
-  return <Link to={workerPath(worker.id)}>{workerName(worker)}</Link>;
-}
diff --git a/ui/src/views/worker-detail.test.tsx b/ui/src/views/worker-detail.test.tsx
deleted file mode 100644
index fbaa15087..000000000
--- a/ui/src/views/worker-detail.test.tsx
+++ /dev/null
@@ -1,691 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
-
-import { WorkerDetail } from "./worker-detail";
-import { WorkerFacts } from "./worker-facts";
-import type { WorkerView } from "./workers-model";
-
-// The leases panel reads the live connection, which a string render has none of; it has its own
-// tests with the leases view.
-vi.mock("./leases", () => ({ WorkerLeases: () => <p>the leases panel</p> }));
-
-const NOW = Date.parse("2026-10-02T12:00:00Z");
-
-const ENTRY = {
-  atRamBudget: false,
-  limit: 4,
-  maxRunning: 4,
-  overLimit: false,
-  reserved: 0,
-  running: 1,
-  used: 1,
-  warm: 0,
-};
-
-const RUNNING: WorkerView = {
-  capacity: {
-    android: { ...ENTRY, running: 0, used: 0 },
-    global: { maxRunning: 4, overLimit: false, reserved: 0, running: 1, warm: 0 },
-    ios: ENTRY,
-  },
-  catalog: [
-    {
-      classDefaults: {},
-      defaultRuntime: "26.0",
-      modelAliases: {},
-      modelClasses: {},
-      modelRuntimes: {},
-      models: ["iPhone 17"],
-      platform: "ios",
-      runtimes: ["26.0"],
-    },
-  ],
-  connection: "connected",
-  devices: [
-    {
-      physical: false,
-      id: "dev_1",
-      mode: "full",
-      servesDefaultMode: true,
-      spec: { physical: false, model: "iPhone 17", osVersion: "26.0", platform: "ios" },
-      state: "ready",
-    },
-  ],
-  drained: false,
-  health: "running",
-  host: { arch: "arm64", os: "macOS", osVersion: "15.5", tools: [] },
-  id: "wrk_1",
-  lastSeenAt: NOW,
-  leases: [
-    {
-      deviceId: "dev_1",
-      grantedAt: NOW,
-      id: "l_1",
-      lastRenewedAt: NOW,
-      ownerId: "agent",
-      requesterId: "agent",
-      ttlDeadline: NOW + 60_000,
-      idChosenByRequester: false,
-      ttlMs: 60_000,
-    },
-  ],
-};
-
-function text(html: string): string {
-  return html
-    .replace(/<[^>]+>/g, " ")
-    .replace(/&#x27;/g, "'")
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-function detail(worker: WorkerView): string {
-  return text(renderToStaticMarkup(<WorkerDetail id="wrk_1" workers={[worker]} now={NOW} />));
-}
-
-describe("the page of a worker that has finished starting", () => {
-  it("shows its devices, leases, host, catalog and installs, and not the starting line", () => {
-    const shown = detail(RUNNING);
-
-    expect(shown).toContain("dev_1 ready");
-    expect(shown).toContain("the leases panel");
-    expect(shown).toContain("Operating system macOS 15.5");
-    expect(shown).toContain("iOS Models: iPhone 17 Runtimes: 26.0 (default)");
-    expect(shown).toContain("No installs in progress.");
-    expect(shown).not.toContain("appear once startup finishes");
-  });
-
-  it("marks a simulator Virtual and an enrolled device Physical, and shows a dash for the physical device's mode and image tag and for a simulator with no image tag", () => {
-    const shown = detail({
-      ...RUNNING,
-      devices: [
-        {
-          physical: false,
-          id: "dev_sim",
-          mode: "full",
-          servesDefaultMode: true,
-          spec: {
-            imageTag: "google_apis",
-            model: "Pixel 9",
-            osVersion: "35",
-            physical: false,
-            platform: "android",
-          },
-          state: "ready",
-        },
-        {
-          physical: false,
-          id: "dev_ios",
-          mode: "full",
-          servesDefaultMode: true,
-          spec: { model: "iPhone 16", osVersion: "26.5", physical: false, platform: "ios" },
-          state: "ready",
-        },
-        {
-          class: "phone",
-          driverDeviceId: "00008110-001A2B3C4D5E",
-          id: "dev_phys",
-          physical: true,
-          servesDefaultMode: true,
-          spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
-          state: "ready",
-        },
-      ],
-    });
-
-    expect(shown).toContain("Android Virtual Pixel 9 35 full google_apis");
-    expect(shown).toContain("iOS Virtual iPhone 16 26.5 full —");
-    expect(shown).toContain("iOS Physical iPhone 15 Pro 18.4 — —");
-  });
-
-  it("a worker's page shows an absent device's state as the word absent in the warn tone", () => {
-    const device = (id: string, state: string) =>
-      ({
-        class: "phone",
-        driverDeviceId: "00008110-001A2B3C4D5E",
-        id,
-        physical: true,
-        servesDefaultMode: true,
-        spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
-        state,
-        ...(state === "absent" ? { absentReason: "locked" } : {}),
-      }) as unknown as NonNullable<WorkerView["devices"]>[number];
-
-    const html = renderToStaticMarkup(
-      <WorkerDetail
-        id="wrk_1"
-        workers={[
-          { ...RUNNING, devices: [device("dev_up", "ready"), device("dev_gone", "absent")] },
-        ]}
-        now={NOW}
-      />,
-    );
-
-    const status = (tone: string, word: string) =>
-      `<span class="status status-${tone}"><span class="status-dot" aria-hidden="true"></span>${word}</span>`;
-    expect(html).toContain(status("ok", "ready"));
-    expect(html).toContain(status("warn", "absent"));
-    expect(text(html)).toContain("dev_gone absent");
-  });
-
-  it("says so where a worker's catalog and devices were never read", () => {
-    const { catalog: _catalog, devices: _devices, ...unread } = RUNNING;
-
-    const shown = detail(unread);
-
-    expect(shown).toContain("Nothing reported.");
-    expect(shown).toContain("No devices.");
-  });
-});
-
-describe("the warm pool section of a worker's page", () => {
-  const WARM_POOL = {
-    enabled: true,
-    reserveRunning: { android: 0, ios: 1 },
-    targets: [
-      {
-        booting: 1,
-        count: 2,
-        mode: "full" as const,
-        model: "iPhone 17",
-        osVersion: "26.0",
-        platform: "ios" as const,
-        ready: 1,
-      },
-      {
-        booting: 0,
-        count: 1,
-        mode: "full" as const,
-        model: "iPhone 17",
-        osVersion: "27.0",
-        platform: "ios" as const,
-        ready: 0,
-        short: "runtime-missing" as const,
-      },
-    ],
-  };
-
-  it("lists each kind the pool keeps with its wanted, ready and booting numbers and the reason it is short", () => {
-    const shown = detail({ ...RUNNING, warmPool: WARM_POOL });
-
-    expect(shown).toContain("Warm pool");
-    expect(shown).toContain("iPhone 17 26.0 full 2 1 1 —");
-    expect(shown).toContain("iPhone 17 27.0 full 1 0 0 runtime-missing");
-  });
-
-  it("heads the table with its seven columns, right-aligns the numbers and sets the runtime and the reason in mono", () => {
-    const html = renderToStaticMarkup(
-      <WorkerDetail id="wrk_1" workers={[{ ...RUNNING, warmPool: WARM_POOL }]} now={NOW} />,
-    );
-
-    // The devices table carries a Model and a Mode column too, so each is there twice.
-    const occurrences = (text: string): number => html.split(text).length - 1;
-    for (const header of ["Model", "Mode"]) {
-      expect(occurrences(`<th scope="col">${header}</th>`)).toBe(2);
-    }
-    for (const header of ["Runtime", "Short"]) {
-      expect(html).toContain(`<th scope="col">${header}</th>`);
-    }
-    for (const header of ["Wanted", "Ready", "Booting"]) {
-      expect(html).toContain(`<th scope="col" class="num">${header}</th>`);
-    }
-    expect(html).toContain('<td data-label="Runtime" class="mono">27.0</td>');
-    expect(html).toContain('<td data-label="Short" class="mono">runtime-missing</td>');
-    expect(html).toContain('<td data-label="Wanted" class="num">2</td>');
-    expect(html).toContain('<td data-label="Model">iPhone 17</td>');
-  });
-
-  it("shows a runtime-less target's runtime as a dash, says the pool is on, and says when there are no targets", () => {
-    const unversioned = {
-      booting: 0,
-      count: 1,
-      mode: "full" as const,
-      model: "iPhone 17",
-      platform: "ios" as const,
-      ready: 0,
-      short: "runtime-missing" as const,
-    };
-    const shown = detail({ ...RUNNING, warmPool: { ...WARM_POOL, targets: [unversioned] } });
-    const empty = detail({ ...RUNNING, warmPool: { ...WARM_POOL, targets: [] } });
-
-    expect(shown).toContain("iPhone 17 — full 1 0 0 runtime-missing");
-    expect(shown).toContain("Pool On");
-    expect(empty).toContain("No targets.");
-  });
-
-  it("shows two refused targets of one kind as two rows", () => {
-    const refused = WARM_POOL.targets[1]!;
-
-    const shown = detail({ ...RUNNING, warmPool: { ...WARM_POOL, targets: [refused, refused] } });
-
-    expect(shown.split("iPhone 17 27.0 full 1 0 0 runtime-missing")).toHaveLength(3);
-  });
-
-  it("says the pool is off when the worker reports it so, and shows the reserve", () => {
-    const shown = detail({ ...RUNNING, warmPool: { ...WARM_POOL, enabled: false } });
-
-    expect(shown).toContain("Pool Off");
-    expect(shown).toContain("Reserved running slots iOS 1, Android 0");
-  });
-
-  it("the warm pool's Not reported test checks the Warm pool panel alone", () => {
-    const shown = detail(RUNNING);
-    const start = shown.indexOf("The devices the worker keeps booted ahead of demand");
-    const panel = shown.slice(start, shown.indexOf("Installs in progress", start));
-
-    expect(start).toBeGreaterThan(-1);
-    expect(panel).toContain("Not reported.");
-  });
-
-  it("shows none for a worker that is still starting", () => {
-    const shown = detail({
-      health: "starting",
-      connection: "connected",
-      drained: false,
-      id: "wrk_1",
-      lastSeenAt: NOW,
-    });
-
-    expect(shown).not.toContain("Warm pool");
-  });
-});
-
-describe("a worker's card once it has finished starting", () => {
-  it("counts its devices and capacity, and says Not reported for what it has not read", () => {
-    const shown = text(renderToStaticMarkup(<WorkerFacts worker={RUNNING} />));
-
-    expect(shown).toContain("Health running");
-    expect(shown).toContain("Devices 1 running, 1 leased");
-    expect(shown).toContain("Capacity iOS 1 of 4 running, Android 0 of 4 running");
-
-    const { capacity: _capacity, ...unread } = RUNNING;
-    const unreadShown = text(renderToStaticMarkup(<WorkerFacts worker={unread} />));
-    expect(unreadShown).toContain("Devices Not reported");
-    expect(unreadShown).toContain("Capacity Not reported");
-  });
-});
-
-describe("the Capabilities row of a worker's page", () => {
-  const status = (tone: string, word: string) =>
-    `<span class="status status-${tone}"><span class="status-dot" aria-hidden="true"></span>${word}</span>`;
-  const page = (worker: WorkerView) =>
-    renderToStaticMarkup(<WorkerDetail id="wrk_1" workers={[worker]} now={NOW} />);
-
-  it("shows available in the ok tone, off in the neutral tone, and unavailable in the warn tone with its reason", () => {
-    const html = page({
-      ...RUNNING,
-      capabilities: [
-        { name: "agent-device", state: "available" },
-        { name: "second", state: "off" },
-        { name: "third", reason: "found 0.20.1, need 0.21.28 or later", state: "unavailable" },
-      ],
-    });
-
-    expect(text(html)).toContain("Capabilities");
-    expect(html).toContain(status("ok", "available"));
-    expect(html).toContain(status("idle", "off"));
-    expect(html).toContain(status("warn", "unavailable"));
-    expect(text(html)).toContain("third unavailable found 0.20.1, need 0.21.28 or later");
-  });
-
-  it("says Not reported for an absent list on a running worker", () => {
-    expect(text(page(RUNNING))).toContain("Capabilities Not reported");
-  });
-
-  it("leaves the row out for a starting worker", () => {
-    const starting = text(
-      page({
-        connection: "connected",
-        drained: false,
-        health: "starting",
-        id: "wrk_1",
-        lastSeenAt: NOW,
-      }),
-    );
-
-    expect(text(page(RUNNING))).toContain("Capabilities");
-    expect(starting).not.toContain("Capabilities");
-  });
-
-  it("shows the same row on the worker's card", () => {
-    const card = text(
-      renderToStaticMarkup(
-        <WorkerFacts
-          worker={{ ...RUNNING, capabilities: [{ name: "agent-device", state: "available" }] }}
-        />,
-      ),
-    );
-
-    expect(card).toContain("Capabilities agent-device available");
-  });
-});
-
-const GIB = 1024 ** 3;
-
-const LOAD = {
-  cpu: { busyPercent: 34, cores: 10, limited: false },
-  disk: { freeBytes: 112.4 * GIB, totalBytes: 494.4 * GIB },
-  memory: {
-    availableBytes: 9.8 * GIB,
-    limited: false,
-    pressure: "normal" as const,
-    swapUsedBytes: 1.2 * GIB,
-    totalBytes: 32 * GIB,
-  },
-  readAt: NOW - 12_000,
-};
-
-const STARTING: WorkerView = {
-  connection: "connected",
-  drained: false,
-  health: "starting",
-  host: RUNNING.host,
-  id: "wrk_1",
-  lastSeenAt: NOW,
-};
-
-const LOAD_DESCRIPTION = "How busy the machine is right now";
-
-function detailAt(worker: WorkerView, now: number): string {
-  return text(renderToStaticMarkup(<WorkerDetail id="wrk_1" workers={[worker]} now={now} />));
-}
-
-function loadPanel(shown: string): string {
-  const start = shown.indexOf(LOAD_DESCRIPTION);
-  if (start === -1) return "";
-  const ends = ["Warm pool", "Devices, leases and capacity appear"]
-    .map((marker) => shown.indexOf(marker, start))
-    .filter((index) => index !== -1);
-  return shown.slice(start, ends.length === 0 ? undefined : Math.min(...ends));
-}
-
-describe("a worker's card shows its load", () => {
-  const card = (worker: WorkerView) => text(renderToStaticMarkup(<WorkerFacts worker={worker} />));
-
-  it("a running worker's card shows the Load row right after Capabilities, and a starting worker's right after Version", () => {
-    const running = card({ ...RUNNING, load: LOAD });
-    expect(running).toContain("Load CPU 34% · memory 9.8 of 32.0 GiB · disk 112.4 GiB free");
-    expect(running.indexOf("Capabilities")).toBeGreaterThan(running.indexOf("Capacity"));
-    expect(running.indexOf("Load")).toBeGreaterThan(running.indexOf("Capabilities"));
-
-    const starting = card({ ...STARTING, load: LOAD, version: "1.2.3" });
-    expect(starting).toContain("Version 1.2.3 Load CPU 34% · memory 9.8 of 32.0 GiB");
-    expect(starting).not.toContain("Devices");
-  });
-
-  it("a worker card says Not reported for a connected worker with no load, and No reading while disconnected for a disconnected one", () => {
-    expect(card(RUNNING)).toContain("Load Not reported");
-    expect(card({ ...RUNNING, connection: "disconnected", load: LOAD })).toContain(
-      "Load No reading while disconnected",
-    );
-  });
-
-  it("an incompatible worker's card and page have no Load row or panel", () => {
-    const incompatible: WorkerView = {
-      connection: "incompatible",
-      drained: false,
-      id: "wrk_1",
-      lastSeenAt: NOW,
-      load: LOAD,
-      protocol: { gateway: { max: 35, min: 35 }, worker: { max: 30, min: 30 } },
-    };
-
-    expect(card(incompatible)).not.toContain("Load");
-    const page = detailAt(incompatible, NOW);
-    expect(page).not.toContain("Load ");
-    expect(page).not.toContain(LOAD_DESCRIPTION);
-  });
-});
-
-describe("a worker's page shows its load", () => {
-  it("a running worker's detail shows the Load panel after Host and Catalog, with CPU, memory, swap, pressure, disk and the reading's age", () => {
-    const shown = detailAt({ ...RUNNING, load: LOAD }, NOW);
-
-    expect(shown.indexOf(LOAD_DESCRIPTION)).toBeGreaterThan(
-      shown.indexOf("The models and runtimes it can lease."),
-    );
-    expect(shown.indexOf("The models and runtimes it can lease.")).toBeGreaterThan(
-      shown.indexOf("The machine the worker runs on."),
-    );
-    const panel = loadPanel(shown);
-    expect(panel).toContain("CPU 34% busy, 10 cores");
-    expect(panel).toContain("Memory 9.8 GiB of 32.0 GiB available");
-    expect(panel).toContain("Swap 1.2 GiB used");
-    expect(panel).toContain("Pressure normal");
-    expect(panel).toContain("Disk 112.4 GiB of 494.4 GiB free");
-    expect(panel).toContain("Read 12 s ago");
-  });
-
-  it("a starting worker's detail shows the Load panel after Host and before the startup line", () => {
-    const shown = detailAt({ ...STARTING, load: LOAD }, NOW);
-    const at = shown.indexOf(LOAD_DESCRIPTION);
-
-    expect(at).toBeGreaterThan(shown.indexOf("The machine the worker runs on."));
-    expect(at).toBeGreaterThan(-1);
-    expect(at).toBeLessThan(shown.indexOf("Devices, leases and capacity appear once startup"));
-  });
-
-  it("a worker's detail leaves out Pressure when the view has none, and leaves out Swap and Pressure when memory is absent", () => {
-    const { pressure: _pressure, ...noPressure } = LOAD.memory;
-    const withoutPressure = loadPanel(
-      detailAt({ ...RUNNING, load: { ...LOAD, memory: noPressure } }, NOW),
-    );
-    expect(withoutPressure).toContain("Swap 1.2 GiB used");
-    expect(withoutPressure).not.toContain("Pressure");
-
-    const { memory: _memory, ...noMemory } = LOAD;
-    const withoutMemory = loadPanel(detailAt({ ...RUNNING, load: noMemory }, NOW));
-    expect(withoutMemory).toContain("CPU 34% busy");
-    expect(withoutMemory).not.toContain("Swap");
-    expect(withoutMemory).not.toContain("Pressure");
-  });
-
-  it("a worker's detail shows pressure normal, warn and critical in the ok, warn and error tones", () => {
-    const tone = (pressure: "normal" | "warn" | "critical") =>
-      renderToStaticMarkup(
-        <WorkerDetail
-          id="wrk_1"
-          workers={[{ ...RUNNING, load: { ...LOAD, memory: { ...LOAD.memory, pressure } } }]}
-          now={NOW}
-        />,
-      );
-    const status = (kind: string, word: string) =>
-      `<span class="status status-${kind}"><span class="status-dot" aria-hidden="true"></span>${word}</span>`;
-
-    expect(tone("normal")).toContain(status("ok", "normal"));
-    expect(tone("warn")).toContain(status("warn", "warn"));
-    expect(tone("critical")).toContain(status("error", "critical"));
-  });
-
-  it("a worker's detail says Unavailable in the row of an absent CPU, memory or disk", () => {
-    const { cpu: _cpu, ...noCpu } = LOAD;
-    const { memory: _memory, ...noMemory } = LOAD;
-    const { disk: _disk, ...noDisk } = LOAD;
-
-    expect(loadPanel(detailAt({ ...RUNNING, load: noCpu }, NOW))).toContain("CPU Unavailable");
-    expect(loadPanel(detailAt({ ...RUNNING, load: noMemory }, NOW))).toContain(
-      "Memory Unavailable",
-    );
-    expect(loadPanel(detailAt({ ...RUNNING, load: noDisk }, NOW))).toContain("Disk Unavailable");
-  });
-
-  it("a worker's detail says Not reported. in the Load panel with no load, and No reading while disconnected. for a disconnected worker", () => {
-    expect(loadPanel(detailAt(RUNNING, NOW))).toContain("Not reported.");
-    expect(
-      loadPanel(detailAt({ ...RUNNING, connection: "disconnected", load: LOAD }, NOW)),
-    ).toContain("No reading while disconnected.");
-  });
-
-  it("a worker's detail ages the reading as now minus readAt rounded up to a whole second, and shows a larger age for a later now", () => {
-    const worker = { ...RUNNING, load: { ...LOAD, readAt: NOW - 4_100 } };
-
-    expect(loadPanel(detailAt(worker, NOW))).toContain("Read 5 s ago");
-    expect(loadPanel(detailAt(worker, NOW + 10_000))).toContain("Read 15 s ago");
-    expect(
-      loadPanel(detailAt({ ...worker, load: { ...LOAD, readAt: NOW + 3_000 } }, NOW)),
-    ).toContain("Read 0 s ago");
-  });
-
-  it("the Status panel's description reads the worker's connection, health, capacity and load, and the Load panel's How busy the machine is right now", () => {
-    const shown = detailAt({ ...RUNNING, load: LOAD }, NOW);
-
-    expect(shown).toContain("The worker's connection, health, capacity and load.");
-    expect(shown).toContain("How busy the machine is right now");
-  });
-
-  it("a worker's detail writes (limit) as muted text after a limited CPU or memory figure", () => {
-    const html = renderToStaticMarkup(
-      <WorkerDetail
-        id="wrk_1"
-        workers={[
-          {
-            ...RUNNING,
-            load: {
-              ...LOAD,
-              cpu: { busyPercent: 61, cores: 2, limited: true },
-              memory: { ...LOAD.memory, limited: true },
-            },
-          },
-        ]}
-        now={NOW}
-      />,
-    );
-    const panel = loadPanel(text(html));
-
-    expect(panel).toContain("CPU 61% busy, 2 cores (limit)");
-    expect(panel).toContain("Memory 9.8 GiB of 32.0 GiB available (limit)");
-    expect(html.match(/<span class="muted">\(limit\)<\/span>/g)).toHaveLength(2);
-  });
-});
-
-describe("the Load gauges", () => {
-  const htmlAt = (worker: WorkerView, now = NOW) =>
-    renderToStaticMarkup(<WorkerDetail id="wrk_1" workers={[worker]} now={now} />);
-  const panelOf = (worker: WorkerView) => loadPanel(htmlAt(worker));
-  const bar = (tone: string, percent: number) =>
-    `<span class="load-bar load-bar-${tone}" aria-hidden="true" style="--load-bar:${percent}%"><span class="load-bar-fill"></span></span>`;
-  const row = (html: string, label: string) => {
-    const start = html.indexOf(`<dt>${label}</dt>`);
-    if (start === -1) throw new Error(`the panel has no ${label} row`);
-    const next = html.indexOf("<dt>", start + 1);
-    return html.slice(start, next === -1 ? undefined : next);
-  };
-
-  it("a worker's detail draws one gauge in each of its CPU, Memory and Disk rows and none in Swap, Pressure or Read", () => {
-    const panel = panelOf({ ...RUNNING, load: LOAD });
-
-    expect(row(panel, "CPU")).toContain(bar("idle", 34));
-    expect(row(panel, "Memory")).toContain(bar("ok", 69));
-    expect(row(panel, "Disk")).toContain(bar("idle", 77));
-    for (const label of ["Swap", "Pressure", "Read"]) {
-      expect(row(panel, label)).not.toContain("load-bar");
-    }
-    expect(panel.match(/class="load-bar /g)).toHaveLength(3);
-  });
-
-  it("a worker's detail draws no gauge in the row of a figure that says Unavailable", () => {
-    const { cpu: _cpu, ...noCpu } = LOAD;
-    const { memory: _memory, ...noMemory } = LOAD;
-    const { disk: _disk, ...noDisk } = LOAD;
-
-    expect(row(panelOf({ ...RUNNING, load: noCpu }), "CPU")).toContain("Unavailable");
-    expect(row(panelOf({ ...RUNNING, load: noCpu }), "CPU")).not.toContain("load-bar");
-    expect(row(panelOf({ ...RUNNING, load: noMemory }), "Memory")).not.toContain("load-bar");
-    expect(row(panelOf({ ...RUNNING, load: noDisk }), "Disk")).not.toContain("load-bar");
-  });
-
-  it("a worker's detail prints a figure whose total is zero without a gauge", () => {
-    // why: a reading that cannot be divided has no percent to draw, but its number is still the
-    // worker's own and still belongs on the page.
-    const zeroTotal = {
-      ...LOAD,
-      memory: { ...LOAD.memory, availableBytes: 12 * GIB, totalBytes: 0 },
-    };
-    const panel = panelOf({ ...RUNNING, load: zeroTotal });
-
-    expect(row(panel, "Memory")).toContain("available");
-    expect(row(panel, "Memory")).not.toContain("load-bar");
-  });
-
-  it("a worker's detail colours the memory gauge with its pressure word", () => {
-    type Memory = NonNullable<NonNullable<WorkerView["load"]>["memory"]>;
-    const memoryBar = (memory: Memory) =>
-      row(panelOf({ ...RUNNING, load: { ...LOAD, memory } }), "Memory");
-
-    expect(memoryBar(LOAD.memory)).toContain(bar("ok", 69));
-    expect(memoryBar({ ...LOAD.memory, pressure: "warn" })).toContain(bar("warn", 69));
-    expect(memoryBar({ ...LOAD.memory, pressure: "critical" })).toContain(bar("error", 69));
-  });
-
-  it("a worker's detail falls back to the console's threshold for memory the worker gives no word for", () => {
-    const { pressure: _pressure, ...noPressure } = LOAD.memory;
-    // why: 97% of a 32 GiB worker is the figure the spec names, over the edge; 1.5 GiB available is
-    // 95% used, the error threshold itself. The one step under it is the CPU and disk test's job.
-    const almostGone = { ...noPressure, availableBytes: 0.96 * GIB };
-    const atTheEdge = { ...noPressure, availableBytes: 1.5 * GIB };
-    const plenty = { ...noPressure, availableBytes: 30 * GIB };
-
-    expect(row(panelOf({ ...RUNNING, load: { ...LOAD, memory: almostGone } }), "Memory")).toContain(
-      bar("error", 97),
-    );
-    expect(row(panelOf({ ...RUNNING, load: { ...LOAD, memory: atTheEdge } }), "Memory")).toContain(
-      bar("error", 95),
-    );
-    expect(row(panelOf({ ...RUNNING, load: { ...LOAD, memory: plenty } }), "Memory")).toContain(
-      bar("idle", 6),
-    );
-  });
-
-  it("a worker's detail colours the CPU and disk gauges by the console's own thresholds", () => {
-    type Cpu = NonNullable<NonNullable<WorkerView["load"]>["cpu"]>;
-    type Disk = NonNullable<NonNullable<WorkerView["load"]>["disk"]>;
-    const rowFor = (label: string, cpu: Partial<Cpu>, disk: Partial<Disk>) =>
-      row(
-        panelOf({
-          ...RUNNING,
-          load: { ...LOAD, cpu: { ...LOAD.cpu, ...cpu }, disk: { ...LOAD.disk, ...disk } },
-        }),
-        label,
-      );
-
-    // why: the worker sends no threshold for either figure, so the console's own decides, one step
-    // under each edge included. The disk is 500 GiB so each case lands on a whole percent: 84, 85,
-    // 94 and 95% used.
-    const disk = (free: number) => ({ freeBytes: free * GIB, totalBytes: 500 * GIB });
-    expect(rowFor("CPU", { busyPercent: 84 }, disk(500))).toContain(bar("idle", 84));
-    expect(rowFor("CPU", { busyPercent: 85 }, disk(500))).toContain(bar("warn", 85));
-    expect(rowFor("CPU", { busyPercent: 94 }, disk(500))).toContain(bar("warn", 94));
-    expect(rowFor("CPU", { busyPercent: 95 }, disk(500))).toContain(bar("error", 95));
-    expect(rowFor("Disk", { busyPercent: 0 }, disk(80))).toContain(bar("idle", 84));
-    expect(rowFor("Disk", { busyPercent: 0 }, disk(75))).toContain(bar("warn", 85));
-    expect(rowFor("Disk", { busyPercent: 0 }, disk(30))).toContain(bar("warn", 94));
-    expect(rowFor("Disk", { busyPercent: 0 }, disk(25))).toContain(bar("error", 95));
-  });
-
-  it("a worker's detail says each figure's number once, the gauge carrying none of its own", () => {
-    const panel = text(htmlAt({ ...RUNNING, load: LOAD }));
-
-    expect(loadPanel(panel).match(/34%/g)).toHaveLength(1);
-    expect(loadPanel(panel)).not.toContain("69%");
-    expect(loadPanel(panel)).not.toContain("77%");
-    const gauges = panelOf({ ...RUNNING, load: LOAD }).match(
-      /class="load-bar load-bar-\w+" aria-hidden="true"/g,
-    );
-
-    expect(gauges).toHaveLength(3);
-  });
-
-  it("a worker's detail draws no gauge at all where it says Not reported. or No reading while disconnected.", () => {
-    expect(panelOf(RUNNING)).not.toContain("load-bar");
-    expect(panelOf({ ...RUNNING, connection: "disconnected", load: LOAD })).not.toContain(
-      "load-bar",
-    );
-  });
-
-  it("the worker's card prints its Load row as one line of text with no gauge", () => {
-    const card = renderToStaticMarkup(<WorkerFacts worker={{ ...RUNNING, load: LOAD }} />);
-
-    expect(text(card)).toContain("Load CPU 34% · memory 9.8 of 32.0 GiB · disk 112.4 GiB free");
-    expect(card).not.toContain("load-bar");
-  });
-});
diff --git a/ui/src/views/worker-detail.tsx b/ui/src/views/worker-detail.tsx
deleted file mode 100644
index 65e5751ef..000000000
--- a/ui/src/views/worker-detail.tsx
+++ /dev/null
@@ -1,444 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-import { Id, PageHeader, Panel } from "../layout";
-import { formatDuration } from "../live/time";
-import { Link } from "../router";
-import { deviceStateStatus, installStatus, pressureStatus, Status, type Tone } from "../status";
-import { type Column, DataTable } from "../table";
-import { WorkerLeases } from "./leases";
-import { levelOf } from "../load-thresholds";
-import { formatBusyPercent, formatBytes, formatCores, loadGauges } from "./load-model";
-import { WorkerFacts } from "./worker-facts";
-import {
-  platformName,
-  stateEnteredAt,
-  type WorkerCatalogEntry,
-  type WorkerDevice,
-  type WarmPoolRow,
-  warmPoolRows,
-  type WorkerView,
-  workerName,
-} from "./workers-model";
-
-/**
- * One worker: its facts, its devices, its leases, its host, its catalog and its installs in
- * progress.
- */
-export function WorkerDetail(props: {
-  readonly id: string;
-  readonly workers: readonly WorkerView[];
-  /** The daemon's time now, for every duration on the page. */
-  readonly now: number;
-}) {
-  const { id, now, workers } = props;
-  const worker = workers.find((candidate) => candidate.id === id);
-  return (
-    <>
-      {worker === undefined ? (
-        <>
-          <PageHeader title="Worker not found" actions={<AllWorkers />} />
-          <p className="muted">
-            No worker has the id <code>{id}</code>. A gateway forgets a worker that is removed.
-          </p>
-        </>
-      ) : (
-        <>
-          <PageHeader
-            title={workerName(worker)}
-            mono={worker.label === undefined}
-            subtitle={
-              worker.label === undefined ? (
-                "One worker: its devices, leases and host."
-              ) : (
-                <span className="mono">{worker.id}</span>
-              )
-            }
-            actions={<AllWorkers />}
-          />
-          <Panel title="Status" description="The worker's connection, health, capacity and load.">
-            <WorkerFacts worker={worker} />
-          </Panel>
-          {worker.health === "starting" ? (
-            <>
-              <Panel title="Host" description="The machine the worker runs on.">
-                <HostFacts worker={worker} />
-              </Panel>
-              <LoadPanel worker={worker} now={now} />
-              <p className="muted">Devices, leases and capacity appear once startup finishes.</p>
-            </>
-          ) : (
-            <WorkerReads worker={worker} workers={workers} now={now} />
-          )}
-        </>
-      )}
-    </>
-  );
-}
-
-function WorkerReads(props: {
-  readonly worker: WorkerView;
-  readonly workers: readonly WorkerView[];
-  readonly now: number;
-}) {
-  const { now, worker, workers } = props;
-  return (
-    <>
-      <Panel title="Devices" description="Every device on this worker, and its state.">
-        <DeviceTable worker={worker} now={now} />
-      </Panel>
-      <Panel title="Leases" description="The leases on this worker's devices.">
-        <WorkerLeases worker={worker} workers={workers} now={now} />
-      </Panel>
-      <div className="panel-row panel-row-even">
-        <Panel title="Host" description="The machine the worker runs on.">
-          <HostFacts worker={worker} />
-        </Panel>
-        <Panel title="Catalog" description="The models and runtimes it can lease.">
-          <Catalog catalog={worker.catalog ?? []} />
-        </Panel>
-      </div>
-      <LoadPanel worker={worker} now={now} />
-      <Panel
-        title="Warm pool"
-        description="The devices the worker keeps booted ahead of demand, and why a target is short."
-      >
-        <WarmPool worker={worker} />
-      </Panel>
-      <Panel
-        title="Installs in progress"
-        description="Runtimes and system images being downloaded, or waiting to be."
-      >
-        <Installs worker={worker} now={now} />
-      </Panel>
-    </>
-  );
-}
-
-function AllWorkers() {
-  return (
-    <Link to="/workers" className="button button-secondary">
-      All workers
-    </Link>
-  );
-}
-
-/**
- * Every device on the worker, a page at a time, in the order the worker lists them. On a phone
- * each row stacks into a block of labelled lines.
- */
-export function DeviceTable({
-  now,
-  worker,
-}: {
-  readonly worker: WorkerView;
-  readonly now: number;
-}) {
-  const columns: Column<WorkerDevice>[] = [
-    { cell: (device) => <Id>{device.id}</Id>, header: "Device" },
-    {
-      cell: (device) => {
-        const state = deviceStateStatus(device.state);
-        return <Status tone={state.tone}>{state.word}</Status>;
-      },
-      header: "State",
-    },
-    {
-      cell: (device) => {
-        const since = stateEnteredAt(device, worker);
-        return since === undefined ? "—" : formatDuration(now - since);
-      },
-      header: "In state for",
-      numeric: true,
-    },
-    { cell: (device) => platformName(device.spec.platform), header: "Platform" },
-    { cell: (device) => (device.physical ? "Physical" : "Virtual"), header: "Type" },
-    { cell: (device) => device.spec.model, header: "Model" },
-    { cell: (device) => device.spec.osVersion, header: "Runtime", mono: true },
-    { cell: (device) => (device.physical ? "—" : device.mode), header: "Mode" },
-    {
-      cell: (device) => (device.physical ? "—" : (device.spec.imageTag ?? "—")),
-      header: "Image tag",
-      mono: true,
-    },
-  ];
-  return (
-    <DataTable
-      label="Devices"
-      name="devices"
-      rows={worker.devices ?? []}
-      columns={columns}
-      rowId={(device) => device.id}
-      empty="No devices."
-      wide
-    />
-  );
-}
-
-function HostFacts({ worker }: { readonly worker: WorkerView }) {
-  const { host } = worker;
-  if (host === undefined) return <p className="muted">Not reported.</p>;
-  return (
-    <dl className="facts">
-      <div>
-        <dt>Operating system</dt>
-        <dd>
-          {host.os} {host.osVersion}
-        </dd>
-      </div>
-      <div>
-        <dt>CPU architecture</dt>
-        <dd className="mono">{host.arch}</dd>
-      </div>
-      <div>
-        <dt>Tools</dt>
-        <dd>
-          {host.tools.length === 0 ? (
-            "None"
-          ) : (
-            <ul className="plain-list">
-              {host.tools.map((tool) => (
-                <li key={`${tool.platform}-${tool.name}`}>
-                  {tool.name}{" "}
-                  <span className="mono">
-                    {tool.version}
-                    {tool.build === undefined ? "" : ` (${tool.build})`}
-                  </span>{" "}
-                  <span className="muted">for {platformName(tool.platform)}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </dd>
-      </div>
-    </dl>
-  );
-}
-
-function Catalog({ catalog }: { readonly catalog: readonly WorkerCatalogEntry[] }) {
-  if (catalog.length === 0) return <p className="muted">Nothing reported.</p>;
-  return (
-    <dl className="facts">
-      {catalog.map((entry) => (
-        <div key={entry.platform}>
-          <dt>{platformName(entry.platform)}</dt>
-          <dd>
-            <p>
-              <span className="muted">Models:</span>{" "}
-              {entry.models.length === 0 ? "none" : entry.models.join(", ")}
-            </p>
-            <p>
-              <span className="muted">Runtimes:</span>{" "}
-              {entry.runtimes.length === 0
-                ? "none"
-                : entry.runtimes
-                    .map((runtime) =>
-                      runtime === entry.defaultRuntime ? `${runtime} (default)` : runtime,
-                    )
-                    .join(", ")}
-            </p>
-          </dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-/**
- * The worker's warm pool: whether it is on, the slots it holds back, and a row for each kind of
- * device the pool keeps (targets naming one device are one row) with the four numbers and the
- * reason it is short, as the worker sent them.
- */
-function WarmPool({ worker }: { readonly worker: WorkerView }) {
-  const { warmPool } = worker;
-  if (warmPool === undefined) return <p className="muted">Not reported.</p>;
-  const columns: Column<WarmPoolRow>[] = [
-    { cell: (target) => target.model, header: "Model" },
-    { cell: (target) => target.osVersion ?? "—", header: "Runtime", mono: true },
-    { cell: (target) => target.mode, header: "Mode" },
-    { cell: (target) => target.count, header: "Wanted", numeric: true },
-    { cell: (target) => target.ready, header: "Ready", numeric: true },
-    { cell: (target) => target.booting, header: "Booting", numeric: true },
-    { cell: (target) => target.short ?? "—", header: "Short", mono: true },
-  ];
-  return (
-    <>
-      <dl className="facts">
-        <div>
-          <dt>Pool</dt>
-          <dd>{warmPool.enabled ? "On" : "Off"}</dd>
-        </div>
-        <div>
-          <dt>Reserved running slots</dt>
-          <dd>
-            iOS {warmPool.reserveRunning.ios}, Android {warmPool.reserveRunning.android}
-          </dd>
-        </div>
-      </dl>
-      <DataTable
-        label="Warm pool"
-        name="warm-pool"
-        rows={warmPoolRows(warmPool.targets)}
-        columns={columns}
-        rowId={(row) => row.key}
-        empty="No targets."
-        wide
-      />
-    </>
-  );
-}
-
-function Installs({ now, worker }: { readonly worker: WorkerView; readonly now: number }) {
-  const installs = worker.installs ?? [];
-  if (installs.length === 0) return <p className="muted">No installs in progress.</p>;
-  return (
-    <ul className="plain-list">
-      {installs.map((install) => {
-        const state = installStatus(install.state);
-        return (
-          <li key={`${install.platform}-${install.component}`}>
-            {platformName(install.platform)} <span className="mono">{install.component}</span>{" "}
-            <Status tone={state.tone}>{state.word}</Status> for{" "}
-            <span className="mono">{formatDuration(now - install.since)}</span>,{" "}
-            {install.waiters === 1 ? "1 waiter" : `${install.waiters} waiters`}
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-function LoadPanel({ now, worker }: { readonly worker: WorkerView; readonly now: number }) {
-  if (worker.connection === "incompatible") return null;
-  return (
-    <Panel title="Load" description="How busy the machine is right now.">
-      <LoadFacts worker={worker} now={now} />
-    </Panel>
-  );
-}
-
-function Limit({ limited }: { readonly limited: boolean }) {
-  return limited ? (
-    <>
-      {" "}
-      <span className="muted">(limit)</span>
-    </>
-  ) : null;
-}
-
-function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now: number }) {
-  if (worker.connection === "disconnected") {
-    return <p className="muted">No reading while disconnected.</p>;
-  }
-  const { load } = worker;
-  if (load === undefined) return <p className="muted">Not reported.</p>;
-  const { cpu, disk, memory } = load;
-  const age = formatDuration(Math.ceil((now - load.readAt) / 1000) * 1000);
-  const gauges = loadGauges(load);
-  // why: a gauge only shades the figure beside it. Memory has a level the worker sends — its
-  // pressure — and takes that tone; where the worker sends none, which is every Linux worker, it
-  // falls back to the console's own threshold like the other two. Those two have nothing to ask the
-  // worker for, so `load-thresholds.ts` decides, and a figure stays in the neutral tone until one
-  // is crossed.
-  const memoryTone =
-    memory?.pressure === undefined ? levelOf(gauges.memory) : pressureStatus(memory.pressure).tone;
-  const cpuTone = levelOf(gauges.cpu);
-  const diskTone = levelOf(gauges.disk);
-  return (
-    <dl className="facts">
-      <FigureRow
-        label="CPU"
-        part={cpu}
-        gauge={gauges.cpu}
-        tone={cpuTone}
-        figure={(part) => (
-          <>
-            {formatBusyPercent(part.busyPercent)} busy, {formatCores(part.cores)}
-            <Limit limited={part.limited} />
-          </>
-        )}
-      />
-      <FigureRow
-        label="Memory"
-        part={memory}
-        gauge={gauges.memory}
-        tone={memoryTone}
-        figure={(part) => (
-          <>
-            {formatBytes(part.availableBytes)} of {formatBytes(part.totalBytes)} available
-            <Limit limited={part.limited} />
-          </>
-        )}
-      />
-      {memory === undefined ? null : (
-        <div>
-          <dt>Swap</dt>
-          <dd>{formatBytes(memory.swapUsedBytes)} used</dd>
-        </div>
-      )}
-      {memory?.pressure === undefined ? null : (
-        <div>
-          <dt>Pressure</dt>
-          <dd>
-            <Status tone={pressureStatus(memory.pressure).tone}>{memory.pressure}</Status>
-          </dd>
-        </div>
-      )}
-      <FigureRow
-        label="Disk"
-        part={disk}
-        gauge={gauges.disk}
-        tone={diskTone}
-        figure={(part) => `${formatBytes(part.freeBytes)} of ${formatBytes(part.totalBytes)} free`}
-      />
-      <div>
-        <dt>Read</dt>
-        <dd>{age} ago</dd>
-      </div>
-    </dl>
-  );
-}
-
-function FigureRow<Part extends object>(props: {
-  readonly figure: (part: Part) => ReactNode;
-  readonly gauge?: number | undefined;
-  readonly label: string;
-  readonly part: Part | undefined;
-  readonly tone?: Tone;
-}) {
-  const { figure, gauge, label, part, tone = "idle" } = props;
-  return (
-    <div>
-      <dt>{label}</dt>
-      <dd>
-        {part === undefined ? (
-          "Unavailable"
-        ) : (
-          <span className="load-figure">
-            <span>{figure(part)}</span>
-            {gauge === undefined ? null : <LoadGauge percent={gauge} tone={tone} />}
-          </span>
-        )}
-      </dd>
-    </div>
-  );
-}
-
-// why: a gauge is never the only place its number is -- the figure above it is the text, so it
-// carries no accessible name of its own (`aria-hidden`) and takes no focus. Its colour comes from
-// the stylesheet by class, so both themes apply. Only its level arrives inline: `style-src 'self'`
-// refuses a style attribute written into markup, which would leave the bar empty, and the level
-// still arrives because React writes it through the CSSOM, where the policy does not reach. ADR
-// 0011 is what allows this prop at all (it creates no <style> element); it says nothing about the
-// attribute, so do not read this policy's behaviour into it. A gauge is drawn by this component,
-// never by server-rendered markup.
-function LoadGauge(props: { readonly percent: number; readonly tone: Tone }) {
-  const { percent, tone } = props;
-  return (
-    <span
-      className={`load-bar load-bar-${tone}`}
-      aria-hidden="true"
-      style={{ "--load-bar": `${percent}%` } as CSSProperties}
-    >
-      <span className="load-bar-fill" />
-    </span>
-  );
-}
diff --git a/ui/src/views/worker-facts.tsx b/ui/src/views/worker-facts.tsx
deleted file mode 100644
index 9286f65b0..000000000
--- a/ui/src/views/worker-facts.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { connectionStatus, healthStatus, Status } from "../status";
-import { loadSummary } from "./load-model";
-import { capacityByPlatform, deviceCounts, platformName, type WorkerView } from "./workers-model";
-
-const capabilityTone = { available: "ok", off: "idle", unavailable: "warn" } as const;
-
-/** What the list says about a worker, and what its detail page starts with. */
-export function WorkerFacts({ worker }: { readonly worker: WorkerView }) {
-  const connection = connectionStatus(worker.connection);
-  const counts = deviceCounts(worker);
-  const capacity = capacityByPlatform(worker);
-  // A starting worker has reported no devices or capacity yet: its card leaves those rows out,
-  // where "Not reported" would suggest it is a worker that cannot report them.
-  const starting = worker.health === "starting";
-  return (
-    <dl className="facts">
-      <div>
-        <dt>Connection</dt>
-        <dd className="statuses">
-          <Status tone={connection.tone}>{connection.word}</Status>
-          {worker.drained ? (
-            <>
-              {" "}
-              <Status tone="warn">drained</Status>
-            </>
-          ) : null}
-        </dd>
-      </div>
-      <div>
-        <dt>Health</dt>
-        <dd>{worker.health === undefined ? "Not reported" : <Health health={worker.health} />}</dd>
-      </div>
-      <div>
-        <dt>Protocol</dt>
-        <dd>
-          <Protocol worker={worker} />
-        </dd>
-      </div>
-      <div>
-        <dt>Version</dt>
-        <dd className="mono">{worker.version ?? "Not reported"}</dd>
-      </div>
-      {starting ? <LoadRow worker={worker} /> : null}
-      {starting ? null : (
-        <>
-          <div>
-            <dt>Devices</dt>
-            <dd>
-              {counts === undefined
-                ? "Not reported"
-                : `${counts.running} running, ${counts.leased} leased`}
-            </dd>
-          </div>
-          <div>
-            <dt>Capacity</dt>
-            <dd>
-              {capacity.length === 0
-                ? "Not reported"
-                : capacity
-                    .map(
-                      (entry) =>
-                        `${platformName(entry.platform)} ${entry.running} of ${entry.limit} running`,
-                    )
-                    .join(", ")}
-            </dd>
-          </div>
-          <div>
-            <dt>Capabilities</dt>
-            <dd>
-              {worker.capabilities === undefined
-                ? "Not reported"
-                : worker.capabilities.map((entry, index) => (
-                    <span key={entry.name}>
-                      {index === 0 ? "" : ", "}
-                      {entry.name} <Status tone={capabilityTone[entry.state]}>{entry.state}</Status>
-                      {entry.reason === undefined ? null : ` ${entry.reason}`}
-                    </span>
-                  ))}
-            </dd>
-          </div>
-          <LoadRow worker={worker} />
-        </>
-      )}
-    </dl>
-  );
-}
-
-function LoadRow({ worker }: { readonly worker: WorkerView }) {
-  if (worker.connection === "incompatible") return null;
-  let shown = "Not reported";
-  if (worker.connection === "disconnected") shown = "No reading while disconnected";
-  else if (worker.load !== undefined) shown = loadSummary(worker.load);
-  return (
-    <div>
-      <dt>Load</dt>
-      <dd>{shown}</dd>
-    </div>
-  );
-}
-
-function Health({ health }: { readonly health: string }) {
-  const status = healthStatus(health);
-  return <Status tone={status.tone}>{status.word}</Status>;
-}
-
-/** Compatible or not; an incompatible worker names both protocol ranges, so an operator can
- * see which side to upgrade. */
-function Protocol({ worker }: { readonly worker: WorkerView }) {
-  if (worker.connection !== "incompatible" && worker.protocol === undefined) {
-    return <Status tone="ok">compatible</Status>;
-  }
-  const { protocol } = worker;
-  return (
-    <>
-      <Status tone="error">incompatible</Status>
-      {protocol === undefined ? null : (
-        <span className="mono">
-          {" "}
-          gateway {range(protocol.gateway)}, worker {range(protocol.worker)}
-        </span>
-      )}
-    </>
-  );
-}
-
-function range({ max, min }: { readonly min: number; readonly max: number }): string {
-  return `${min}–${max}`;
-}
diff --git a/ui/src/views/workers.test.tsx b/ui/src/views/workers.test.tsx
deleted file mode 100644
index 773da998f..000000000
--- a/ui/src/views/workers.test.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { ApiError } from "../api";
-import { Loaded } from "../live/route-state";
-import { DeviceTable, WorkerDetail } from "./worker-detail";
-import { BusiestWorkers } from "./workers";
-import { WorkerFacts } from "./worker-facts";
-import { attentionItems } from "./attention-model";
-import { deviceOfLease } from "./leases-model";
-import {
-  busiestWorkers,
-  deviceCounts,
-  leasesHeld,
-  stateEnteredAt,
-  type WorkerView,
-  workersStats,
-} from "./workers-model";
-
-const NOW = Date.parse("2026-10-02T12:00:00Z");
-
-function worker(overrides: Partial<WorkerView> = {}): WorkerView {
-  return {
-    catalog: [],
-    connection: "connected",
-    devices: [],
-    drained: false,
-    id: "wrk_1",
-    lastSeenAt: NOW,
-    leases: [],
-    ...overrides,
-  };
-}
-
-/** The text a screen shows, without markup. */
-function text(html: string): string {
-  return html
-    .replace(/<[^>]+>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-describe("the workers views", () => {
-  it("an unknown device state renders as its raw name", () => {
-    const device = {
-      id: "dev_1",
-      mode: "full",
-      spec: { physical: false, model: "iPhone 16", osVersion: "18.4", platform: "ios" },
-      // A state a newer daemon may send, which this console has never heard of.
-      state: "hibernating",
-    } as unknown as NonNullable<WorkerView["devices"]>[number];
-
-    const html = renderToStaticMarkup(
-      <DeviceTable worker={worker({ devices: [device] })} now={NOW} />,
-    );
-
-    expect(text(html)).toContain("dev_1 hibernating");
-    expect(html).toContain('class="status status-idle"');
-  });
-
-  it("each device shows how long it has been in its state, where the data says", () => {
-    const leased = {
-      physical: false,
-      id: "dev_leased",
-      mode: "full",
-      servesDefaultMode: true,
-      spec: { physical: false, model: "iPhone 16", osVersion: "18.4", platform: "ios" },
-      state: "leased",
-    } as const;
-    const provisioning = {
-      ...leased,
-      id: "dev_new",
-      state: "provisioning",
-      transitionAgeMs: 4_000,
-    } as const;
-    const ready = { ...leased, id: "dev_ready", state: "ready" } as const;
-    const lease = {
-      deviceId: "dev_leased",
-      grantedAt: NOW - 125_000,
-      id: "l_1",
-      lastRenewedAt: NOW - 125_000,
-      ownerId: "agent",
-      requesterId: "agent",
-      ttlDeadline: NOW + 60_000,
-      idChosenByRequester: false,
-      ttlMs: 185_000,
-    };
-    const view = worker({
-      devices: [leased, provisioning, ready],
-      lastSeenAt: NOW - 10_000,
-      leases: [lease],
-    });
-
-    const shown = text(renderToStaticMarkup(<DeviceTable worker={view} now={NOW} />));
-
-    expect(shown).toContain("dev_leased leased 2 min 5 s");
-    expect(shown).toContain("dev_new provisioning 14 s");
-    expect(shown).toContain("dev_ready ready —");
-  });
-
-  it("a physical device is a row of the worker's Devices table typed Physical with a dash for Mode and Image tag, and counts in the Workers view's device total", () => {
-    const physical = {
-      class: "phone" as const,
-      id: "dev_p",
-      physical: true as const,
-      servesDefaultMode: false,
-      spec: {
-        model: "iPhone 15 Pro",
-        osVersion: "18.4",
-        physical: true as const,
-        platform: "ios" as const,
-      },
-      state: "ready" as const,
-    };
-    const view = worker({ devices: [physical] });
-
-    const html = renderToStaticMarkup(<DeviceTable worker={view} now={NOW} />);
-
-    expect(text(html)).toContain("dev_p ready");
-    expect(html).toContain('<td data-label="Model">iPhone 15 Pro</td>');
-    expect(html).toContain('<td data-label="Type">Physical</td>');
-    expect(html).toContain('<td data-label="Mode">—</td>');
-    expect(html).toContain('<td data-label="Image tag" class="mono">—</td>');
-    expect(workersStats([view]).find((stat) => stat.label === "Devices")?.caption).toBe(
-      "running of 1",
-    );
-  });
-
-  it('a 501 UNSUPPORTED_IN_WORKER_MODE shows "Not available on a single host"', () => {
-    const render = (error: ApiError) =>
-      renderToStaticMarkup(<Loaded state={{ error }}>{() => "the view"}</Loaded>);
-
-    const unsupported = render(
-      new ApiError(501, "UNSUPPORTED_IN_WORKER_MODE", "worker.drain is not supported"),
-    );
-    expect(text(unsupported)).toBe("Not available on a single host.");
-    expect(unsupported).not.toContain('role="alert"');
-
-    const failed = render(new ApiError(500, "INTERNAL", "Internal error"));
-    expect(failed).toContain('role="alert"');
-    expect(text(failed)).toBe("Internal error");
-  });
-
-  it("a refusal after earlier answers shows above the data kept from them", () => {
-    const html = renderToStaticMarkup(
-      <Loaded state={{ data: "the view", error: new ApiError(500, "INTERNAL", "Internal error") }}>
-        {(data) => data}
-      </Loaded>,
-    );
-
-    expect(html).toContain('role="alert"');
-    expect(text(html)).toBe("Internal error the view");
-  });
-
-  it("a disconnected worker shows no time for a device mid-provisioning", () => {
-    const provisioning = {
-      physical: false,
-      id: "dev_new",
-      mode: "full",
-      servesDefaultMode: true,
-      spec: { physical: false, model: "iPhone 16", osVersion: "18.4", platform: "ios" },
-      state: "provisioning",
-      transitionAgeMs: 4_000,
-    } as const;
-    const render = (connection: WorkerView["connection"]) =>
-      text(
-        renderToStaticMarkup(
-          <DeviceTable
-            worker={worker({ connection, devices: [provisioning], lastSeenAt: NOW - 10_000 })}
-            now={NOW}
-          />,
-        ),
-      );
-
-    expect(render("connected")).toContain("dev_new provisioning 14 s");
-    expect(render("disconnected")).toContain("dev_new provisioning —");
-  });
-});
-
-describe("the busiest workers", () => {
-  it("ranks the workers by the leases each holds now, most first, ties in the daemon's order", () => {
-    const lease = (id: string) => ({
-      deviceId: `dev_${id}`,
-      grantedAt: NOW,
-      id,
-      lastRenewedAt: NOW,
-      ownerId: "agent",
-      requesterId: "agent",
-      ttlDeadline: NOW + 60_000,
-      idChosenByRequester: false,
-      ttlMs: 60_000,
-    });
-    const fleet = [
-      worker({ id: "wrk_one", leases: [lease("l1")] }),
-      worker({ id: "wrk_none" }),
-      worker({ id: "wrk_three", leases: [lease("l2"), lease("l3"), lease("l4")] }),
-      worker({ id: "wrk_also_one", leases: [lease("l5")] }),
-    ];
-
-    expect(busiestWorkers(fleet).map((entry) => entry.id)).toEqual([
-      "wrk_three",
-      "wrk_one",
-      "wrk_also_one",
-      "wrk_none",
-    ]);
-    // The daemon's list is left as it came.
-    expect(fleet.map((entry) => entry.id)[0]).toBe("wrk_one");
-  });
-
-  describe("a worker that reports starting", () => {
-    const DEVICE = {
-      physical: false,
-      id: "dev_1",
-      mode: "full",
-      servesDefaultMode: true,
-      spec: { physical: false, model: "iPhone 16", osVersion: "18.4", platform: "ios" },
-      state: "ready",
-    } as const;
-    const LEASE = {
-      deviceId: "dev_1",
-      grantedAt: NOW,
-      id: "l_0",
-      lastRenewedAt: NOW,
-      ownerId: "agent",
-      requesterId: "agent",
-      ttlDeadline: NOW + 60_000,
-      idChosenByRequester: false,
-      ttlMs: 60_000,
-    };
-    // A gateway's view of a starting worker: its health and host, and nothing else it reports.
-    const starting: WorkerView = {
-      connection: "connected",
-      drained: false,
-      health: "starting",
-      host: { arch: "arm64", os: "macOS", osVersion: "15.5", tools: [] },
-      id: "wrk_1",
-      lastSeenAt: NOW,
-    };
-
-    it("the worker's page shows it as starting, and no device, lease or capacity view", () => {
-      const shown = text(
-        renderToStaticMarkup(<WorkerDetail id="wrk_1" workers={[starting]} now={NOW} />),
-      );
-
-      expect(shown).toContain("starting");
-      expect(shown).toContain("Devices, leases and capacity appear once startup finishes.");
-      expect(shown).not.toContain("No devices.");
-      expect(shown).not.toContain("0 leased");
-    });
-
-    it("counts no devices, leases or capacity for it, ranks it last by leases, and lists nothing that needs attention on it", () => {
-      const busy = worker({ id: "wrk_busy", leases: [{ ...LEASE, id: "l_1" }] });
-
-      expect(deviceCounts(starting)).toBeUndefined();
-      // A worker that reported its capacity but no leases has no count of leased devices either.
-      const entry = {
-        atRamBudget: false,
-        limit: 4,
-        maxRunning: 4,
-        overLimit: false,
-        reserved: 0,
-        running: 1,
-        used: 1,
-        warm: 0,
-      };
-      const capacity = {
-        android: entry,
-        global: { maxRunning: 4, overLimit: false, reserved: 0, running: 1, warm: 0 },
-        ios: entry,
-      };
-      expect(deviceCounts({ ...starting, capacity })).toBeUndefined();
-      expect(leasesHeld([starting, busy])).toBe(1);
-      expect(busiestWorkers([starting, busy]).map((entry) => entry.id)).toEqual([
-        "wrk_busy",
-        "wrk_1",
-      ]);
-      expect(workersStats([starting]).map((stat) => stat.value)).toEqual(["1", "0", "0", "0"]);
-      expect(attentionItems([starting])).toEqual([]);
-      expect(stateEnteredAt({ ...DEVICE, state: "leased" }, starting)).toBeUndefined();
-      expect(deviceOfLease(LEASE, [starting])).toBeUndefined();
-    });
-
-    it("the busiest table shows a dash for its leases, under a numeric Leases heading", () => {
-      const busy = worker({ id: "wrk_busy", leases: [{ ...LEASE, id: "l_1" }] });
-      const html = renderToStaticMarkup(<BusiestWorkers workers={[starting, busy]} />);
-
-      expect(text(html)).toContain("Worker Leases");
-      expect(html).toContain('<th scope="col" class="num">Leases</th>');
-      expect(text(html)).toContain("wrk_1 —");
-      expect(text(html)).toContain("wrk_busy 1");
-    });
-
-    it("ranks it last whichever side of a comparison it is on", () => {
-      const busy = worker({ id: "wrk_busy", leases: [{ ...LEASE, id: "l_1" }] });
-      const ids = (workers: WorkerView[]) => busiestWorkers(workers).map(({ id }) => id);
-
-      expect(ids([busy, starting])).toEqual(["wrk_busy", "wrk_1"]);
-      expect(ids([starting, busy, starting])).toEqual(["wrk_busy", "wrk_1", "wrk_1"]);
-    });
-
-    it("tells a leased device's time from its own lease, and none for a lease it does not find", () => {
-      const own = { ...LEASE, deviceId: "dev_1", grantedAt: NOW - 5_000, id: "l_own" };
-      const other = { ...LEASE, deviceId: "dev_2", grantedAt: NOW - 9_000, id: "l_other" };
-      const holder = worker({ leases: [other, own] });
-
-      expect(stateEnteredAt({ ...DEVICE, state: "leased" }, holder)).toBe(NOW - 5_000);
-      expect(stateEnteredAt({ ...DEVICE, id: "dev_3", state: "leased" }, holder)).toBeUndefined();
-    });
-
-    it("finds a lease's own device among its worker's", () => {
-      const holder = worker({
-        devices: [
-          { ...DEVICE, id: "dev_0" },
-          { ...DEVICE, id: "dev_1", mode: "slim" },
-        ],
-      });
-
-      expect(deviceOfLease(LEASE, [holder])).toMatchObject({ id: "dev_1", mode: "slim" });
-    });
-
-    it("the worker's card shows it as starting, with no device or capacity count", () => {
-      const html = renderToStaticMarkup(<WorkerFacts worker={starting} />);
-
-      expect(html).toContain("status-warn");
-      expect(text(html)).toContain("Health starting");
-      expect(text(html)).not.toContain("Devices");
-      expect(text(html)).not.toContain("Capacity");
-    });
-  });
-});
diff --git a/ui/src/views/workers.tsx b/ui/src/views/workers.tsx
deleted file mode 100644
index d1a1da048..000000000
--- a/ui/src/views/workers.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { MinuteChart, MinuteTable } from "../charts";
-import { Id, PageHeader, Panel, StatCards } from "../layout";
-import { useLiveResource, useNow } from "../live/live-context";
-import { Loaded } from "../live/route-state";
-import { Pager, usePaging } from "../pager";
-import { CARD_SIZES, formatCount } from "../paging";
-import { Link, usePath } from "../router";
-import { type Column, DataTable } from "../table";
-import { useRecentEvents } from "./events";
-import { extremes, leaseHistory, type MinuteCount } from "./history-model";
-import { WorkerDetail } from "./worker-detail";
-import { WorkerFacts } from "./worker-facts";
-import {
-  busiestWorkers,
-  leasesHeld,
-  type WorkerList,
-  type WorkerView,
-  workerIdFrom,
-  workerName,
-  workerPath,
-  workersStats,
-} from "./workers-model";
-
-/**
- * The workers views, both fed by `GET /v1/workers` (ADR 0013 §1): the list at `/workers`, and
- * one worker at `/workers/<id>`. On a single host the list has one worker, the host itself. The
- * list's lease chart also reads the last hour of events, as the events view does.
- */
-export function WorkersView() {
-  const id = workerIdFrom(usePath());
-  const state = useLiveResource<WorkerList>("/v1/workers");
-  const now = useNow();
-  if (id !== undefined) {
-    return (
-      <section className="view">
-        <Loaded state={state}>
-          {(list) => <WorkerDetail id={id} workers={list.workers} now={now.server} />}
-        </Loaded>
-      </section>
-    );
-  }
-  return (
-    <section className="view">
-      <PageHeader
-        title="Workers"
-        subtitle="Every worker in the fleet: its connection, its devices and its leases."
-      />
-      <Loaded state={state}>
-        {(list) => (
-          <>
-            <StatCards stats={workersStats(list.workers)} />
-            <div className="panel-row">
-              <LeaseHistory workers={list.workers} />
-              <BusiestWorkers workers={list.workers} />
-            </div>
-            <WorkerCards workers={list.workers} />
-          </>
-        )}
-      </Loaded>
-    </section>
-  );
-}
-
-/** The lease chart: today's leases, counted back minute by minute through the last hour's events. */
-function LeaseHistory({ workers }: { readonly workers: readonly WorkerView[] }) {
-  const events = useRecentEvents();
-  const now = useNow();
-  return (
-    <Panel
-      className="panel-wide"
-      title="Leases, last hour"
-      description="How many leases were held at the end of each minute, counted back from now through the lease events."
-    >
-      {/* No history until the events have loaded: a flat line would be a guess. */}
-      <Loaded state={events}>
-        {(held) => {
-          const minutes = leaseHistory(leasesHeld(workers), held, now.server);
-          return (
-            <>
-              <MinuteChart
-                kind="area"
-                title="Leases, last hour"
-                unit="leases held"
-                minutes={minutes}
-              />
-              <LeaseSummary minutes={minutes} />
-              <MinuteTable minutes={minutes} heading="Leases held" />
-            </>
-          );
-        }}
-      </Loaded>
-    </Panel>
-  );
-}
-
-/** The chart's numbers as one line of text: now, and the highest and lowest of the hour. */
-function LeaseSummary({ minutes }: { readonly minutes: readonly MinuteCount[] }) {
-  const range = extremes(minutes);
-  const current = minutes.at(-1);
-  if (range === undefined || current === undefined) return null;
-  return (
-    <p className="chart-summary">
-      Now <strong>{current.count}</strong>; highest <strong>{range.highest.count}</strong> at{" "}
-      {range.highest.label}; lowest <strong>{range.lowest.count}</strong> at {range.lowest.label}.
-    </p>
-  );
-}
-
-/** How many workers Busiest workers ranks. The cards below have every one. */
-const BUSIEST = 5;
-
-const BUSIEST_COLUMNS: readonly Column<WorkerView>[] = [
-  {
-    cell: (worker) => (worker.label === undefined ? <Id>{worker.id}</Id> : worker.label),
-    header: "Worker",
-  },
-  { cell: (worker) => worker.leases?.length ?? "—", header: "Leases", numeric: true },
-];
-
-/**
- * The five workers holding the most leases now, most first, and a link to the cards below for
- * the rest. Each card links to its worker's page.
- */
-export function BusiestWorkers({ workers }: { readonly workers: readonly WorkerView[] }) {
-  return (
-    <Panel title="Busiest workers" description="By leases held now, most first.">
-      <DataTable
-        label="Busiest workers"
-        name="busiest"
-        rows={busiestWorkers(workers).slice(0, BUSIEST)}
-        columns={BUSIEST_COLUMNS}
-        rowId={(worker) => worker.id}
-        empty="No workers have connected."
-      />
-      {workers.length <= BUSIEST ? null : (
-        <p className="panel-footer">
-          <a href={`#${ALL_WORKERS}`}>All {formatCount(workers.length)} workers</a>
-        </p>
-      )}
-    </Panel>
-  );
-}
-
-/** A link to a worker's page, by its label, or by its id on one line when it has none. */
-function WorkerLink({ worker }: { readonly worker: WorkerView }) {
-  const name = workerName(worker);
-  if (worker.label !== undefined) return <Link to={workerPath(worker.id)}>{name}</Link>;
-  return (
-    <Link to={workerPath(worker.id)} className="id" title={name}>
-      {name}
-    </Link>
-  );
-}
-
-/** The id of the worker cards, where Busiest workers links for the rest. */
-const ALL_WORKERS = "all-workers";
-
-/** A card per worker, in the daemon's order, 24 to a page. */
-function WorkerCards({ workers }: { readonly workers: readonly WorkerView[] }) {
-  const paging = usePaging({ sizes: CARD_SIZES, total: workers.length });
-  if (workers.length === 0) return <p className="muted">No workers have connected.</p>;
-  const { page, size } = paging.at;
-  return (
-    <section id={ALL_WORKERS} className="card-list" aria-label="All workers">
-      <ul className="cards">
-        {workers.slice((page - 1) * size, page * size).map((worker) => (
-          <li key={worker.id} className="card">
-            <h2 className="card-title">
-              <WorkerLink worker={worker} />
-            </h2>
-            {worker.label === undefined ? null : (
-              <p className="muted">
-                <Id>{worker.id}</Id>
-              </p>
-            )}
-            <WorkerFacts worker={worker} />
-          </li>
-        ))}
-      </ul>
-      <Pager label="All workers" paging={paging} />
-    </section>
-  );
-}

From 5659b0e5dbbd91fa2695f37a0f0937cd85b71d22 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:24:57 +0200
Subject: [PATCH 02/32] feat(ui): the console opens on an overview, inside a
 collapsible sidebar

---
 e2e/console/fixtures.ts     |  28 +++++++++-
 e2e/console/shell.spec.ts   | 101 ++++++++++++++++++++++++++++--------
 e2e/console/sign-in.spec.ts |  18 +++----
 3 files changed, 115 insertions(+), 32 deletions(-)

diff --git a/e2e/console/fixtures.ts b/e2e/console/fixtures.ts
index 1b02e6bcb..d8ceaf004 100644
--- a/e2e/console/fixtures.ts
+++ b/e2e/console/fixtures.ts
@@ -318,5 +318,29 @@ export async function signIn(page: Page, token: string): Promise<void> {
   await page.getByRole("button", { name: "Sign in" }).click();
 }
 
-/** Every navigation entry the shell has, in order. */
-export const NAV_LABELS = ["Workers", "Leases", "Waiting", "Attention", "Events"] as const;
+export const NAV = [
+  { label: "Overview", path: "/" },
+  { label: "Workers", path: "/workers" },
+  { label: "Leases", path: "/leases" },
+  { label: "Waiting", path: "/waiting" },
+  { label: "Attention", path: "/attention" },
+  { label: "Events", path: "/events" },
+] as const;
+
+export const NAV_LABELS = NAV.map((entry) => entry.label);
+
+// why: pages slide and fade in; an audit or a measurement taken mid-way reads a half-faded colour.
+export async function settled(page: Page): Promise<void> {
+  await page.evaluate(() =>
+    Promise.all(document.getAnimations().map((animation) => animation.finished)),
+  );
+}
+
+// why: on a phone the sidebar folds into a menu, which has to be opened before its links show.
+export async function openFromNav(page: Page, label: string): Promise<void> {
+  const nav = page.getByRole("navigation", { name: "Console" });
+  if ((page.viewportSize()?.width ?? Infinity) < 768) {
+    await nav.getByRole("button", { name: "Open menu" }).click();
+  }
+  await nav.getByRole("link", { name: label, exact: true }).click();
+}
diff --git a/e2e/console/shell.spec.ts b/e2e/console/shell.spec.ts
index d7328042f..50519c808 100644
--- a/e2e/console/shell.spec.ts
+++ b/e2e/console/shell.spec.ts
@@ -1,9 +1,8 @@
 import { AxeBuilder } from "@axe-core/playwright";
 import type { Page } from "@playwright/test";
 
-import { expect, NAV_LABELS, signIn, test } from "./fixtures.js";
+import { expect, NAV, NAV_LABELS, openFromNav, settled, signIn, test } from "./fixtures.js";
 
-/** Whether the page itself scrolls sideways; a scrolling region inside it does not count. */
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
   return page.evaluate(
     () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
@@ -11,7 +10,10 @@ async function hasHorizontalScroll(page: Page): Promise<boolean> {
 }
 
 test.describe("the shell", () => {
-  test("the shell has no horizontal scroll at 360px wide", async ({ daemon, page }) => {
+  test("the shell has no horizontal scroll at 360px wide, its sidebar folded into a menu", async ({
+    daemon,
+    page,
+  }) => {
     await page.setViewportSize({ height: 740, width: 360 });
     await page.goto("/");
     await signIn(page, daemon.tokens.agent);
@@ -19,9 +21,12 @@ test.describe("the shell", () => {
     expect(await hasHorizontalScroll(page)).toBe(false);
 
     await signIn(page, daemon.tokens.operator);
+    const nav = page.getByRole("navigation", { name: "Console" });
+    await expect(nav.getByRole("link", { name: "Workers" })).toBeHidden();
     for (const label of NAV_LABELS) {
-      await page.getByRole("link", { name: label }).click();
+      await openFromNav(page, label);
       await expect(page.getByRole("heading", { level: 1, name: label })).toBeVisible();
+      await expect(nav.getByRole("link", { name: "Workers" })).toBeHidden();
       expect(await hasHorizontalScroll(page)).toBe(false);
     }
     await page.goto("/no-such-page");
@@ -34,12 +39,13 @@ test.describe("the shell", () => {
     daemon,
     page,
   }) => {
-    // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
+    // why: Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const back = browserName === "webkit" ? "Alt+Shift+Tab" : "Shift+Tab";
     const pressTimes = async (key: string, times: number) => {
       for (let step = 0; step < times; step += 1) await page.keyboard.press(key);
     };
+    await page.setViewportSize({ height: 900, width: 1440 });
     await page.goto("/");
 
     await page.keyboard.press(tab);
@@ -48,45 +54,97 @@ test.describe("the shell", () => {
     await page.keyboard.press("Enter");
     await expect(page.getByRole("button", { name: "Sign out" })).toBeVisible();
 
-    // Every focusable control in the shell, outside the view, then the order Tab visits them in.
     const controls = await page
       .locator("a[href], button, input, select, textarea, [tabindex]:not([tabindex='-1'])")
       .evaluateAll((elements) =>
         elements
           .filter((element) => element.closest("#main") === null)
-          .map((element) => element.textContent?.trim() ?? ""),
+          .filter((element) => element.getClientRects().length > 0)
+          .map(
+            (element) => element.getAttribute("aria-label") ?? element.textContent?.trim() ?? "",
+          ),
       );
     const visited: string[] = [];
     for (let step = 0; step < controls.length; step += 1) {
       await page.keyboard.press(tab);
-      visited.push(await page.evaluate(() => document.activeElement?.textContent?.trim() ?? ""));
+      visited.push(
+        await page.evaluate(
+          () =>
+            document.activeElement?.getAttribute("aria-label") ??
+            document.activeElement?.textContent?.trim() ??
+            "",
+        ),
+      );
     }
-    expect(controls).toEqual(["Skip to content", "Sign out", ...NAV_LABELS]);
+    expect(controls).toEqual(["Skip to content", ...NAV_LABELS, "Sign out", "Collapse sidebar"]);
     expect(visited).toEqual(controls);
 
-    // Each control does its job from the keyboard. Focus is on the last nav link, Events; walk
-    // back through every nav link and open each one with Enter.
-    for (const [index, label] of [...NAV_LABELS].reverse().entries()) {
+    // why: focus is on the sidebar toggle; walk back past Sign out to the last page link, then open
+    // each page with Enter on the way up.
+    await pressTimes(back, 2);
+    for (const [index, entry] of [...NAV].reverse().entries()) {
       if (index > 0) await page.keyboard.press(back);
-      await expect(page.getByRole("link", { name: label })).toBeFocused();
+      await expect(page.getByRole("link", { name: entry.label, exact: true })).toBeFocused();
       await page.keyboard.press("Enter");
-      await expect(page).toHaveURL(new RegExp(`/${label.toLowerCase()}$`));
-      await expect(page.getByRole("heading", { level: 1, name: label })).toBeVisible();
+      await expect(page).toHaveURL(new RegExp(`${entry.path === "/" ? "/" : entry.path}$`));
+      await expect(page.getByRole("heading", { level: 1, name: entry.label })).toBeVisible();
     }
 
-    // Back past Sign out to the skip link, which moves focus to the view.
-    await pressTimes(back, 2);
+    await page.keyboard.press(back);
     await expect(page.getByRole("link", { name: "Skip to content" })).toBeFocused();
     await page.keyboard.press("Enter");
     await expect(page.locator("#main")).toBeFocused();
 
-    // Back from the view past the five nav links to Sign out.
-    await pressTimes(back, 6);
-    await expect(page.getByRole("button", { name: "Sign out" })).toBeFocused();
+    await page.getByRole("button", { name: "Sign out" }).focus();
     await page.keyboard.press("Enter");
     await expect(page.getByLabel("Operator token")).toBeVisible();
   });
 
+  test("the sidebar collapses to icons on request, keeps every link's name, and stays collapsed on every page and after a reload", async ({
+    daemon,
+    page,
+  }) => {
+    await page.setViewportSize({ height: 900, width: 1440 });
+    await page.goto("/");
+    await signIn(page, daemon.tokens.operator);
+    const nav = page.getByRole("navigation", { name: "Console" });
+    const label = nav.getByText("Workers", { exact: true });
+    await expect(label).toBeVisible();
+
+    await nav.getByRole("button", { name: "Collapse sidebar" }).click();
+    await expect(label).toBeHidden();
+    await expect(nav.getByRole("link", { name: "Workers" })).toBeVisible();
+    await expect(nav.getByRole("button", { name: "Expand sidebar" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+
+    await nav.getByRole("link", { name: "Leases" }).click();
+    await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
+    await expect(label).toBeHidden();
+    await page.reload();
+    await expect(nav.getByRole("button", { name: "Expand sidebar" })).toBeVisible();
+    await expect(label).toBeHidden();
+
+    await nav.getByRole("button", { name: "Expand sidebar" }).click();
+    await expect(label).toBeVisible();
+  });
+
+  test("a window narrower than 1280px starts with the sidebar collapsed until the operator chooses", async ({
+    daemon,
+    page,
+  }) => {
+    await page.setViewportSize({ height: 900, width: 1100 });
+    await page.goto("/");
+    await signIn(page, daemon.tokens.operator);
+    const nav = page.getByRole("navigation", { name: "Console" });
+
+    await expect(nav.getByRole("button", { name: "Expand sidebar" })).toBeVisible();
+    await nav.getByRole("button", { name: "Expand sidebar" }).click();
+    await page.reload();
+    await expect(nav.getByRole("button", { name: "Collapse sidebar" })).toBeVisible();
+  });
+
   test("the shell follows the dark and the light system setting", async ({ daemon, page }) => {
     const background = () => page.evaluate(() => getComputedStyle(document.body).backgroundColor);
     const text = () => page.evaluate(() => getComputedStyle(document.body).color);
@@ -110,10 +168,10 @@ test.describe("the shell", () => {
     }) => {
       await page.emulateMedia({ colorScheme });
       const audit = async () => {
+        await settled(page);
         const results = await new AxeBuilder({ page })
           .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
           .analyze();
-        // The contrast rule ran and found text to check: an empty violation list means something.
         expect(results.passes.map((rule) => rule.id)).toContain("color-contrast");
         return results.violations.map((violation) => ({
           id: violation.id,
@@ -128,6 +186,7 @@ test.describe("the shell", () => {
 
       await signIn(page, daemon.tokens.operator);
       await expect(page.getByRole("button", { name: "Sign out" })).toBeVisible();
+      await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
       expect(await audit()).toEqual([]);
     });
   }
diff --git a/e2e/console/sign-in.spec.ts b/e2e/console/sign-in.spec.ts
index 460c0ceef..8b8d544af 100644
--- a/e2e/console/sign-in.spec.ts
+++ b/e2e/console/sign-in.spec.ts
@@ -1,4 +1,4 @@
-import { expect, NAV_LABELS, signIn, test } from "./fixtures.js";
+import { expect, NAV_LABELS, openFromNav, signIn, test } from "./fixtures.js";
 
 const OPERATOR_NEEDED = "That token is real, but the console needs an operator token.";
 
@@ -10,8 +10,8 @@ test.describe("sign-in", () => {
     await expect(page.getByRole("button", { name: "Sign out" })).toBeVisible();
     const nav = page.getByRole("navigation", { name: "Console" });
     await expect(nav.getByRole("link")).toHaveText([...NAV_LABELS]);
-    await expect(page).toHaveURL(/\/workers$/);
-    await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+    await expect(page).toHaveURL(/\/$/);
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
     await expect(page.locator(".connection")).toHaveText("Connected");
     await expect(page.getByLabel("Operator token")).toHaveCount(0);
   });
@@ -24,8 +24,8 @@ test.describe("sign-in", () => {
     await signIn(page, daemon.tokens.operator);
     const nav = page.getByRole("navigation", { name: "Console" });
 
-    await expect(nav.locator("[aria-current='page']")).toHaveText("Workers");
-    await expect(page).toHaveTitle("Workers · Simlock");
+    await expect(nav.locator("[aria-current='page']")).toHaveText("Overview");
+    await expect(page).toHaveTitle("Overview · Simlock");
     await nav.getByRole("link", { name: "Events" }).click();
 
     await expect(nav.locator("[aria-current='page']")).toHaveText("Events");
@@ -33,8 +33,8 @@ test.describe("sign-in", () => {
 
     // The browser's back and forward move between the console's pages too.
     await page.goBack();
-    await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
-    await expect(nav.locator("[aria-current='page']")).toHaveText("Workers");
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
+    await expect(nav.locator("[aria-current='page']")).toHaveText("Overview");
     await page.goForward();
     await expect(page.getByRole("heading", { level: 1, name: "Events" })).toBeVisible();
   });
@@ -107,7 +107,7 @@ test.describe("sign-in", () => {
   test("a reload keeps the operator signed in", async ({ daemon, page }) => {
     await page.goto("/");
     await signIn(page, daemon.tokens.operator);
-    await page.getByRole("link", { name: "Leases" }).click();
+    await openFromNav(page, "Leases");
     await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
 
     await page.reload();
@@ -158,7 +158,7 @@ test.describe("sign-in", () => {
     await expect(page.getByRole("alert")).toBeVisible();
     await signIn(page, daemon.tokens.operator);
     for (const label of NAV_LABELS) {
-      await page.getByRole("link", { name: label }).click();
+      await openFromNav(page, label);
       await expect(page.getByRole("heading", { level: 1, name: label })).toBeVisible();
     }
     await page.reload();

From 51a91e988f208b5fac1df5b35ca719b7209ba47c Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:26:26 +0200
Subject: [PATCH 03/32] docs(ui): the design guide describes the sidebar,
 list-and-inspector pages and their motion

---
 docs/internal/ARCHITECTURE.md |   2 +-
 docs/internal/DESIGN.md       | 195 +++++++++++++++++++---------------
 2 files changed, 109 insertions(+), 88 deletions(-)

diff --git a/docs/internal/ARCHITECTURE.md b/docs/internal/ARCHITECTURE.md
index e3c0699ec..87da983b3 100644
--- a/docs/internal/ARCHITECTURE.md
+++ b/docs/internal/ARCHITECTURE.md
@@ -58,7 +58,7 @@ worker daemon ── uplink (WebSocket to /v1/uplink, worker dials) ──┘
 | agent-identity | Default requester id for CLI and MCP | [agent-identity](../../src/agent-identity/AGENTS.md) |
 | daemon-protocol | Socket framing and the protocol version | [daemon-protocol](../../src/daemon-protocol/AGENTS.md) |
 | test-support | Shared test helpers | [test-support](../../src/test-support/AGENTS.md) |
-| `ui/` | Web console, served by the daemon | [CONSOLE.md](../CONSOLE.md) |
+| `ui/` | Web console, served by the daemon: data, model, state, design system and screens in layers | [ui](../../ui/AGENTS.md) · [CONSOLE.md](../CONSOLE.md) |
 
 ## Dependencies
 
diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index 8c757d99b..329aed81d 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -1,11 +1,13 @@
 # Design guide
 
 How Simlock looks. The web console follows it today, and the landing page will
-follow it when it is built. The tokens live in `ui/src/styles.css`; change this
-guide and that file together.
+follow it when it is built. The tokens live in `ui/src/ds/foundation.css`; change
+this guide and that file together.
 
 The style is Callstack's console style, the one Apex uses: an off-white page,
 square cards a shade darker, mono labels in capitals, and one accent colour.
+Few words: a page says what it shows with its numbers, its statuses and its
+shape, not with sentences about them.
 Simlock's accent is orange where Apex's is green.
 
 ## Type
@@ -25,11 +27,11 @@ Simlock's accent is orange where Apex's is green.
 
   | Token | Size | Use |
   | --- | --- | --- |
-  | `--text-xs` | 12px | labels on cards and tables, the chip, a tab's count |
-  | `--text-sm` | 14px | tabs, buttons, captions, descriptions, table cells |
+  | `--text-xs` | 12px | labels, units, a row's second line, a link's count |
+  | `--text-sm` | 14px | links in the sidebar, buttons, table cells, facts |
   | `--text-md` | 16px | body text, page subtitles, card and panel titles |
-  | `--text-lg` | 20px | the wordmark |
-  | `--text-xl` | 28px | a page's title (`h1`), a stat card's number |
+  | `--text-lg` | 20px | a list's title, an inspector title that is an id |
+  | `--text-xl` | 28px | a page's and an inspector's title, a tile's number |
   | `--text-2xl` | 32px | the landing page's headings only |
 
 - Weights: 400 for text, 500 for labels and big numbers, 600 for titles, 700
@@ -54,8 +56,8 @@ have the same structure; only the values change.
 | `--border` | `#dededb` | `#2b2b2f` | card edges, dividers, grid lines |
 | `--border-strong` | `#85857f` | `#75757d` | an input's border, an outlined button |
 | `--text` | `#111110` | `#f2f2f0` | text |
-| `--text-muted` | `#5a5a55` | `#a1a1a8` | subtitles, captions, labels, inactive tabs |
-| `--accent` | `#f76b15` | `#ff7a1a` | orange fills: the wordmark, filled buttons, the tab underline, charts |
+| `--text-muted` | `#5a5a55` | `#a1a1a8` | units, second lines, labels, inactive links and tabs |
+| `--accent` | `#f76b15` | `#ff7a1a` | orange fills: the wordmark, filled buttons, the current page's and row's bar, the tab underline, charts |
 | `--accent-hover` | `#e2560a` | `#ff9442` | a hovered filled button |
 | `--on-accent` | `#111110` | `#0e0e0f` | text on an orange fill |
 | `--accent-text` | `#b93d0b` | `#ff8c42` | orange as text or a line: links, the focus ring |
@@ -68,8 +70,9 @@ links and the focus ring use `--accent-text`, which passes AA there.
 ### Orange is for brand and interaction only
 
 Use the accent the way Apex uses its green: the wordmark's block, the current
-tab's underline, filled buttons, links, the focus ring, selection, and the
-line or columns of a chart. Never use it to say something about state: not
+page's bar in the sidebar, the chosen row's bar, the current tab's underline,
+filled buttons, links, the focus ring, selection, and the line or columns of a
+chart. Never use it to say something about state: not
 for "busy", not for "warning", not for "new". A reader who sees orange should
 think "this is Simlock" or "I can act here", nothing else.
 
@@ -82,14 +85,23 @@ think "this is Simlock" or "I can act here", nothing else.
 | `--status-error` | `#b91c1c` | `#f87171` | broken: disconnected, incompatible, quarantined, a refused sign-in |
 | `--status-idle` | `#57534e` | `#a8a29e` | neither: shut down, waiting, unknown |
 
-**A status always shows a word.** The colour is a second signal, never the only
-one: `● connected`, not a green dot. Use the daemon's own word for the state
-(`leased`, `quarantined`, `drained`), so the console and the CLI agree. In the
-console a status is an 8px square of its colour, then the word in `--text`
-(`Status` in `ui/src/status.tsx`). A word the console does not know, from a
-newer daemon, shows as itself in `--status-idle`. A count, such as the one on
-the Attention tab, is a number, not a status: it has neither a status colour
-nor the accent.
+One more fill is a neutral, not a status: `--slot-leased` (`#3f3f3b` light,
+`#d6d6d0` dark), for a leased device's slot and a share of leased capacity. A
+leased device is neither healthy nor in trouble; it is in use.
+
+**A status always has a word.** The colour is a second signal, never the only
+one. Use the daemon's own word for the state (`leased`, `quarantined`,
+`drained`), so the console and the CLI agree. In the console a status is an 8px
+square of its colour, then the word in `--text` (`Status` in
+`ui/src/ds/status.tsx`). In a list row, where there is room for the square
+alone (`StatusDot`), the word is the square's accessible name and its tooltip,
+and the chosen row's inspector shows it in full. A worker's square shows the
+worst of what is wrong with it: red for a lost or failed worker, amber for a
+drained or starting one, one over its RAM budget, or a load figure past its
+threshold, green otherwise (`workerHealth` in `ui/src/model/fleet.ts`). A word
+the console does not know, from a newer daemon, shows as itself in
+`--status-idle`. A count, such as the one on the Attention link, is a number,
+not a status: it has neither a status colour nor the accent.
 
 Every pair of text and background colour in both themes meets WCAG AA: 4.5:1
 for text, and 3:1 for the focus ring and an input's border against what is
@@ -116,38 +128,60 @@ scale; never a value between.
 
 ## Components
 
-- **Header.** Left: the "SIMLOCK" wordmark, `--on-accent` on an `--accent`
-  block, then the "By Callstack" chip. Right: the connection in a bordered box,
-  as a status (its word and its colour), then **Sign out** as a secondary
-  button. The sign-in screen has the same header, without the right side.
-- **Tab bar.** Under the header, one tab per view in a fixed order: Workers,
-  Leases, Waiting, Attention, Events. A tab is a label in `--text-muted`; the
-  current one is `--text` with a 2px `--accent` underline and
-  `aria-current="page"`. A 1px `--border` line runs under the bar. Attention
-  carries its count in a small bordered box, and none at zero.
-- **Page header.** The view's title, a one-line subtitle in `--text-muted`
-  under it, and the view's actions on the right, such as **All workers** on a
-  worker's page.
-- **Stat cards.** A row of cards under the page header: a label, a big number
-  (`--text-xl`), and a caption in `--text-muted` saying what it counts. A
-  card shows only numbers the view already has; it never makes a request of
-  its own.
-- **Panel.** A card with a header: a title, a description in
-  `--text-muted`, actions on the right, and a 1px line between the header and
-  its body. A table, a chart or a list sits in a panel. A panel is a region
-  named by its title.
+The components live in `ui/src/ds/` (the design system); `ui/AGENTS.md` lists them. A screen is
+put together from them and draws nothing of its own that one of them already draws.
+
+- **Sidebar.** The console's navigation, on the left of every signed-in page: the "SIMLOCK"
+  wordmark (`--on-accent` on an `--accent` block), one link per page in a fixed order (Overview,
+  Workers, Leases, Waiting, Attention, Events), then at the bottom the connection as a status,
+  **Sign out** and the collapse button. A link is an icon and its label in `--text-muted`; the
+  current one is `--text` on `--field` with a 2px `--accent` bar on its left and
+  `aria-current="page"`. Attention carries its count in a small bordered box, and none at zero.
+  Collapsed, the sidebar is 64px wide: the labels go, every icon sits on its centre line, each
+  link keeps its name (and a tooltip), the wordmark becomes "S" and the connection its square.
+  Only the operator collapses or widens it, with the button at its bottom; the browser keeps the
+  choice, and changing pages never changes it. With no choice made, a window under 1280px starts
+  it collapsed. Under 768px it is a bar along the top: the wordmark and a **menu** button that
+  opens the links and the bottom block under it.
+- **Page.** A page that is not a list, as the overview: its title (`h1`) and its actions on the
+  right, then its content. No subtitle: the title and what is under it say what the page is.
+- **List and inspector.** Every page of things (workers, leases, waiting requests, attention
+  items, events) is a list on the left, 260–360px wide (wider for events), and the chosen thing in
+  an inspector filling the rest. The list has a header (the page's title as `h1`, a short count
+  in mono beside it, then its filters), its rows, and the pager under them. A row is one or two
+  short lines: a status square, a title, one figure on the right, and at most one muted line or
+  bar under them; the chosen row is `--surface` with a 2px `--accent` bar on its left and
+  `aria-current="page"`. The address names the chosen thing (`/workers/<id>`). The inspector
+  has a breadcrumb, the thing's title (`h2`), one muted line under it, actions on the right, and
+  then cards, facts, tabs and panels.
+- **Stat tiles.** A row of tiles: a label, a big number (`--text-xl`), and a short unit in mono
+  beside it ("of 48", "last hour"). A tile that leads somewhere is a link as a whole. A tile
+  shows only numbers its page already has; it never makes a request of its own.
+- **Panel.** A card with a header: a title and, on the right, its actions. No description: a
+  panel's title says what it holds. A panel is a region named by its title.
+- **Facts.** A label and its value side by side, the label as a label. Facts that show a
+  payload keep the keys as the daemon spelled them (`leaseId`), in mono, not in capitals.
+- **Filters.** A row of chips, one choice of several: a radio group drawn as small mono boxes,
+  the chosen one filled `--field` with a `--border-strong` edge.
+- **Tabs.** Labels in a row over a 1px `--border` line; the current one `--text` with a 2px
+  `--accent` underline.
+- **Slots.** One square per device a worker may run, shaded by what the device is doing:
+  leased (a neutral fill, `--slot-leased`), ready (`--status-ok`), booting (`--status-idle`),
+  quarantined (`--status-error`), absent (`--status-warn`), free (a dashed `--border-strong`
+  outline). A group of slots carries its counts as words in its accessible name ("2 leased, 1
+  ready, 3 free") and each square its device in a tooltip; a legend names the shades.
 - **Table.** Fills its panel edge to edge. Headers are labels in
   `--text-muted`. Rows are roomy, 16px above and below, with a 1px line
   between them. Numbers, durations included, are mono and right-aligned.
-  Every table of a view's items is the one table component
-  (`ui/src/table.tsx`), so every such table pages the same way. A chart's
+  Every table of a page's items is the one table component
+  (`ui/src/ds/table.tsx`), so every such table pages the same way. A chart's
   "Minute by minute" table is not one: it always has its 60 rows.
 - **Pager.** Under a table, edge to edge in its panel, with a 1px `--border`
   line above it like a row's: the rows shown of how many in mono (`26–50 of
   1,240`), **Per page** as a select, then **Previous**, the page number in
   mono `--text-muted` (`Page 2 of 50`), and **Next**, as secondary buttons.
-  It wraps on a phone. Under a grid of cards it is a bar of its own, a
-  `--surface` card with a `--border` edge. It is hidden when every row fits
+  It wraps on a phone. Under a list it sits in the list's footer, its parts
+  stacked to fit the list's width. It is hidden when every row fits
   on one page. At either end, the button that would leave the list keeps its
   place and its focus, says so with `aria-disabled`, and goes quiet: its text
   `--text-muted`, its edge `--border`.
@@ -174,49 +208,34 @@ scale; never a value between.
   `--accent`, an area with a faint fill of it (8%), horizontal grid lines in
   `--border`, axis labels in Geist Mono `--text-muted`. Every colour comes from
   the stylesheet by class. Nothing moves: animation is off. Every chart has a
-  title, a caption saying what it counts, its numbers as a line of text under
-  it, and every minute as a table behind a "Minute by minute" disclosure, so
+  title saying what it counts, its numbers as a line of text under it, and every minute as a table behind a "Minute by minute" disclosure, so
   nothing is visible only in the picture. A chart can be focused, and the
   arrow keys step through it. Its focus ring goes round the whole chart, for
   keyboard focus only: a click on a chart draws none.
-- **Load gauges.** On a worker's page, each of the Load panel's CPU, memory and
-  disk figures carries a bar in a line of its own under it: 8px high, `--field`
-  track, `max-width: 20rem`, square, and never the accent. Its fill takes a
-  status colour by class; its level arrives inline: `style-src 'self'` refuses a
-  style attribute in markup, and the level arrives anyway because React writes
-  styles through the CSSOM, where the policy does not reach. ADR 0011 allows the
-  `style` prop because it creates no `<style>` element — it says nothing about
-  the attribute. So a
-  gauge is drawn by the console's own code and never by server-rendered output. A gauge
-  is never the only place its number is, so it carries no accessible name and
-  takes no focus — the figure above it is the text. Where the worker sends a
-  memory pressure, that word colours its bar, so there colour is a second signal
-  for a fact the panel prints as a word. Every figure without a word to echo —
-  CPU and disk always, memory on a worker that reports no pressure — takes
-  `LOAD_THRESHOLDS` from `ui/src/load-thresholds.ts`: amber at 85% full, red at
-  95%, neutral below, the current reading only, nothing remembered between them.
-  That is the one place in the console where a colour says something no word
-  does, so it is kept where a gauge is — beside the figure it judges — and
-  nowhere else: not in a status, not in a table, not in the card's one line of
-  text. A worker sends no thresholds, so these are the console's opinion alone
-  and `simlock status` reports the same figures without one. A gauge belongs to
-  this panel alone.
+- **Meters.** A bar under or beside a figure it shades: `--field` track, square, never the
+  accent. Its fill takes a status colour by class, or a neutral one; its level arrives inline as
+  a CSS custom property: `style-src 'self'` refuses a style attribute in markup, and the level
+  arrives anyway because React writes styles through the CSSOM, where the policy does not reach.
+  ADR 0011 allows the `style` prop because it creates no `<style>` element. A meter is never the
+  only place its number is, so it carries no accessible name and takes no focus. A load figure —
+  CPU, memory, disk — takes `LOAD_THRESHOLDS` from `ui/src/model/load-thresholds.ts`: amber at
+  85% full, red at 95%, neutral below, the current reading only; where the worker sends a memory
+  pressure, that word decides memory's colour instead. A worker sends no thresholds, so these are
+  the console's opinion alone and `simlock status` reports the same figures without one.
 
 ## Layout
 
-- Phone first. Every page works at 360px wide with no sideways scrolling of the
-  page. When the tabs do not fit, as on a phone, the tab bar scrolls sideways inside itself. Under 768px a
-  table's rows stack into blocks, each cell a line with its column's name
-  beside it (`data-label`). A wide table, of six columns or more, stacks the
-  same way under 1100px. Otherwise a table has a fixed layout: a column of
-  numbers is 8rem wide, the others share the rest, and a long cell wraps or,
-  for an id, is cut, so a table is never wider than its panel.
-- Stat cards fill the row, each at least 200px wide, and wrap.
-- From 768px a chart and the panel beside it share a row, two thirds and one
-  third; two panels of the same weight share it half and half.
-- A list of things that each carry several facts, such as workers, is a grid
-  of cards, each a title and its facts as label and value pairs. It pages at
-  24, 48 or 96 cards, whole rows of the grid at two, three or four columns.
+- Phone first. Every page works at 360px wide with no sideways scrolling of the page. Under 768px
+  the sidebar is a bar on top with a menu, and a list page shows its list until something is
+  chosen and the inspector after (the address says which). Under 768px a table's rows stack into
+  blocks, each cell a line with its column's name beside it (`data-label`). A wide table, of six
+  columns or more, stacks the same way under 1100px. Otherwise a table has a fixed layout: a
+  column of numbers is 8rem wide, the others share the rest, and a long cell wraps or, for an id,
+  is cut, so a table is never wider than its panel.
+- Stat tiles fill the row, each at least 170px wide, and wrap.
+- From 1024px a chart and the panel beside it share a row, two thirds and one third; two panels
+  of the same weight share it half and half.
+- A list page with nothing in its address shows its first row in the inspector on a wide screen.
 
 ## Focus and keyboard
 
@@ -229,12 +248,13 @@ scale; never a value between.
 
 ## Motion
 
-Almost none. Colour changes on hover take 120ms (`--duration`). Nothing slides,
-fades or bounces, charts included. The one exception is a load gauge's fill: it
-takes 120ms (`--duration`) to reach a new level rather than jumping, because a
-new reading lands every 15 seconds and a jump reads as a glitch. Nothing else
-moves, and nothing ever loops. With `prefers-reduced-motion: reduce`, there
-are no transitions at all.
+Short, and only where it says where something came from. Colour changes on hover take 120ms
+(`--duration`). Moves take 220ms (`--duration-move`) on one easing (`--ease`): the sidebar
+widens and narrows; a page rises 10px as it opens; a list slides in from the left and an
+inspector from the right, again each time another thing is chosen; the chosen row's bar and a
+meter or share bar slide to their new place. Nothing loops, nothing moves on its own, and
+charts never animate. With `prefers-reduced-motion: reduce`, there are no transitions and no
+animations at all.
 
 ## Voice
 
@@ -244,6 +264,7 @@ are no transitions at all.
   cannot be reached." Never blame the reader.
 - No exclamation marks, no emoji, no "please", no "oops".
 - Buttons are verbs: "Sign in", "Sign out".
-- A subtitle or a caption says what is shown, in one line: "Every worker in
-  the fleet: its connection, its devices and its leases."
+- Fewer words beat more. No subtitles under page titles, no descriptions under
+  panel titles, no column that repeats one value on every row. A figure's unit
+  is a word or two in mono beside it ("of 48", "last hour").
 - An empty or unfinished page says so in one line: "Coming soon.", "No leases."

From c8b9449dcaee95cae643a696fd8f31551ff43dc5 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:26:42 +0200
Subject: [PATCH 04/32] feat(ui): the waiting page is a list with an inspector

---
 e2e/console/waiting.spec.ts             | 129 ++++++++++++------
 ui/src/model/waiting.test.ts            | 174 ++++++++++++++++++++++++
 ui/src/model/waiting.ts                 | 118 ++++++++++++++--
 ui/src/screens/waiting/index.tsx        | 143 ++++++++++++++++++-
 ui/src/screens/waiting/waiting.css      |  44 ++++++
 ui/src/screens/waiting/waiting.test.tsx | 146 ++++++++++++++++++++
 ui/src/state/waiting.ts                 |  53 ++++++++
 7 files changed, 748 insertions(+), 59 deletions(-)
 create mode 100644 ui/src/model/waiting.test.ts
 create mode 100644 ui/src/screens/waiting/waiting.css
 create mode 100644 ui/src/screens/waiting/waiting.test.tsx
 create mode 100644 ui/src/state/waiting.ts

diff --git a/e2e/console/waiting.spec.ts b/e2e/console/waiting.spec.ts
index dc60a5bf5..0d41988f0 100644
--- a/e2e/console/waiting.spec.ts
+++ b/e2e/console/waiting.spec.ts
@@ -5,6 +5,7 @@ import { expect, type RunningDaemon, signIn, startDaemon, test } from "./fixture
 
 /** What `GET /v1/lease-requests` answers, as far as these tests read. */
 interface WaitingRequest {
+  readonly id: string;
   readonly requesterId: string;
   readonly queuePosition?: number;
   readonly workerId?: string;
@@ -46,21 +47,21 @@ async function untilTheDaemonSays(
   });
 }
 
-async function openWaiting(page: Page, daemon: RunningDaemon): Promise<void> {
-  await page.goto(new URL("/waiting", daemon.url).toString());
+async function openWaiting(page: Page, daemon: RunningDaemon, path = "/waiting"): Promise<void> {
+  await page.goto(new URL(path, daemon.url).toString());
   await signIn(page, daemon.tokens.operator);
   await expect(page.getByRole("heading", { level: 1, name: "Waiting" })).toBeVisible();
 }
 
-/** A waiting request's row, by its requester. */
 function row(page: Page, requester: string): Locator {
   return page
-    .getByRole("row")
-    .filter({ has: page.getByRole("cell", { name: requester, exact: true }) });
+    .getByRole("list", { name: "Waiting requests" })
+    .getByRole("link")
+    .filter({ hasText: requester });
 }
 
-function cell(scope: Locator, label: string): Locator {
-  return scope.locator(`td[data-label="${label}"]`);
+function inspectorOf(page: Page, requester: string): Locator {
+  return page.getByRole("region", { name: requester, exact: true });
 }
 
 /** Whether the page itself scrolls sideways. */
@@ -70,8 +71,8 @@ async function hasHorizontalScroll(page: Page): Promise<boolean> {
   );
 }
 
-test.describe("the Waiting view", () => {
-  test("a request waiting for a device appears with its requester, spec, time waited and queue position", async ({
+test.describe("the Waiting page", () => {
+  test("a request waiting for a device appears in the list with its place, device and stage, and opens with its time waited", async ({
     page,
   }) => {
     const host = await startDaemon("worker", { config: ONE_DEVICE, driverScript: { ios: IOS } });
@@ -84,23 +85,34 @@ test.describe("the Waiting view", () => {
 
       await openWaiting(page, host);
 
-      const b = row(page, "agent-b");
-      await expect(cell(b, "Device")).toHaveText("iOS iPhone 16, runtime 18.4");
-      await expect(cell(b, "Stage")).toHaveText("queued");
-      await expect(cell(b, "Place in queue")).toHaveText("1");
-      await expect(cell(b, "Waiting for")).toHaveText(/^\d+ s$/);
-      const c = row(page, "agent-c");
-      await expect(cell(c, "Device")).toHaveText("iOS iPhone 16, runtime 18.4, mode slim");
-      await expect(cell(c, "Place in queue")).toHaveText("2");
+      await expect(row(page, "agent-b")).toContainText("#1");
+      await expect(row(page, "agent-b")).toContainText("iOS iPhone 16, runtime 18.4");
+      await expect(row(page, "agent-b")).toContainText("queued");
+      await expect(row(page, "agent-c")).toContainText("#2");
+      await expect(row(page, "agent-c")).toContainText("iOS iPhone 16, runtime 18.4, mode slim");
+      await expect(page.getByText("2 waiting")).toBeVisible();
+
+      // why: With no request named, the first row is the one shown, and the URL stays as it was.
+      await expect(page.getByRole("heading", { level: 2, name: "agent-b" })).toBeVisible();
+      expect(new URL(page.url()).pathname).toBe("/waiting");
+
+      await row(page, "agent-c").click();
+      await expect(page.getByRole("heading", { level: 2, name: "agent-c" })).toBeVisible();
+      expect(new URL(page.url()).pathname).toMatch(/^\/waiting\/.+/);
+      const inspector = inspectorOf(page, "agent-c");
+      await expect(inspector).toContainText("wants iOS iPhone 16, runtime 18.4, mode slim");
+      await expect(inspector).toContainText("2 of 2");
+      await expect(inspector.getByRole("navigation", { name: "Breadcrumb" })).toBeVisible();
       // The time waited counts on in the browser, with no reload.
-      const before = await cell(c, "Waiting for").textContent();
-      await expect(cell(c, "Waiting for")).not.toHaveText(before ?? "", { timeout: 3_000 });
+      const waited = inspector.locator(".waiting-card-value").first();
+      const before = await waited.textContent();
+      await expect(waited).not.toHaveText(before ?? "", { timeout: 3_000 });
     } finally {
       await host.dispose();
     }
   });
 
-  test("on a gateway, the fleet queue's requests and a worker's own appear, the worker's with that worker", async ({
+  test("on a gateway, a worker's request links to that worker and the fleet queue's request names the gateway's queue", async ({
     page,
   }) => {
     const gateway = await startDaemon("gateway");
@@ -131,26 +143,34 @@ test.describe("the Waiting view", () => {
 
       await openWaiting(page, gateway);
 
-      await expect(cell(row(page, "local-b"), "Worker")).toHaveText("worker-a");
-      await expect(cell(row(page, "local-b"), "Place in queue")).toHaveText("1");
-      await expect(cell(row(page, "fleet-c"), "Device")).toHaveText("iOS iPhone 16, runtime 18.4");
-      await expect(cell(row(page, "fleet-c"), "Stage")).toHaveText("queued");
-      await expect(cell(row(page, "fleet-c"), "Place in queue")).toHaveText("1");
-      await expect(cell(row(page, "fleet-c"), "Worker")).toHaveText("—");
+      await row(page, "local-b").click();
+      const local = inspectorOf(page, "local-b");
+      await expect(local.getByRole("link", { name: "worker-a" })).toBeVisible();
+      await expect(local).toContainText("1 of 1");
+
+      await row(page, "fleet-c").click();
+      const fleet = inspectorOf(page, "fleet-c");
+      await expect(fleet).toContainText("the gateway's queue");
+      await expect(fleet).toContainText("iOS iPhone 16, runtime 18.4");
+      await expect(fleet).toContainText("queued");
+      await expect(fleet).toContainText("1 of 1");
     } finally {
       await worker?.dispose();
       await gateway.dispose();
     }
   });
 
-  test("a waiting request leaves the view within a second of being granted", async ({ page }) => {
+  test("a waiting request leaves the list within a second of being granted, and its own page says it is not waiting", async ({
+    page,
+  }) => {
     const host = await startDaemon("worker", { config: ONE_DEVICE, driverScript: { ios: IOS } });
     try {
       const held = await holdTheDevice(host, "holder");
       const waiter = host.cliBackground([...LEASE, "--agent-id", "agent-b"]);
       await untilTheDaemonSays(host, (requests) => requests.length === 1);
       await openWaiting(page, host);
-      await expect(row(page, "agent-b")).toBeVisible();
+      await row(page, "agent-b").click();
+      await expect(page.getByRole("heading", { level: 2, name: "agent-b" })).toBeVisible();
 
       expect((await host.cli(["release", held])).code).toBe(0);
       const grant = JSON.parse(await waiter.firstStdoutLine(10_000)) as {
@@ -161,12 +181,30 @@ test.describe("the Waiting view", () => {
 
       await expect(row(page, "agent-b")).toHaveCount(0, { timeout: 1_000 });
       await expect(page.getByText("No requests are waiting.")).toBeVisible();
+      await expect(page.getByText("Request not waiting.")).toBeVisible();
+
+      await page.getByRole("link", { name: "Back to waiting" }).click();
+      expect(new URL(page.url()).pathname).toBe("/waiting");
+      await expect(page.getByText("Request not waiting.")).toHaveCount(0);
+      await expect(page.getByRole("heading", { level: 2 })).toHaveCount(0);
     } finally {
       await host.dispose();
     }
   });
 
-  test("the Waiting view has no horizontal scroll at 360px wide", async ({ page }) => {
+  test("a request id that was never waiting says it is not waiting", async ({ page }) => {
+    const host = await startDaemon("worker", { config: ONE_DEVICE, driverScript: { ios: IOS } });
+    try {
+      await openWaiting(page, host, "/waiting/req_none");
+
+      await expect(page.getByText("Request not waiting.")).toBeVisible();
+      await expect(page.getByRole("link", { name: "Back to waiting" })).toBeVisible();
+    } finally {
+      await host.dispose();
+    }
+  });
+
+  test("the Waiting page has no horizontal scroll at 360px wide", async ({ page }) => {
     const host = await startDaemon("worker", { config: ONE_DEVICE, driverScript: { ios: IOS } });
     try {
       await holdTheDevice(host, "holder");
@@ -182,14 +220,21 @@ test.describe("the Waiting view", () => {
 
       await openWaiting(page, host);
 
-      await expect(page.locator("tbody tr")).toHaveCount(1);
+      await expect(
+        page.getByRole("list", { name: "Waiting requests" }).getByRole("link"),
+      ).toHaveCount(1);
+      expect(await hasHorizontalScroll(page)).toBe(false);
+      await page.getByRole("list", { name: "Waiting requests" }).getByRole("link").click();
+      await expect(page.getByRole("heading", { level: 2 })).toBeVisible();
+      // why: The inspector slides in from the right; the page is measured once it has settled.
+      await page.evaluate(() => Promise.all(document.getAnimations().map((a) => a.finished)));
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
       await host.dispose();
     }
   });
 
-  test("the Waiting view is usable with the keyboard alone", async ({ browserName, page }) => {
+  test("the Waiting page is usable with the keyboard alone", async ({ browserName, page }) => {
     // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const host = await startDaemon("worker", { config: ONE_DEVICE, driverScript: { ios: IOS } });
@@ -197,31 +242,27 @@ test.describe("the Waiting view", () => {
       await holdTheDevice(host, "holder");
       host.cliBackground([...LEASE, "--agent-id", "agent-b"]);
       await untilTheDaemonSays(host, (requests) => requests.length === 1);
-      const listed = await host.cli(["worker", "list", "--json"]);
-      const hostId = (listed.json as { workers: { id: string }[] }).workers[0]?.id ?? "";
-      /** Tabs forward until the link named `label` has focus, and follows it with Enter. */
-      const follow = async (label: string) => {
-        const link = page.getByRole("link", { name: label, exact: true });
-        for (let step = 0; step < 20; step += 1) {
+      const follow = async (link: Locator) => {
+        for (let step = 0; step < 30; step += 1) {
           if (await link.evaluate((element) => element === document.activeElement)) break;
           await page.keyboard.press(tab);
         }
         await expect(link).toBeFocused();
         await page.keyboard.press("Enter");
       };
-      await page.goto(host.url);
+      await page.goto(new URL("/waiting", host.url).toString());
       await page.keyboard.press(tab);
       await page.keyboard.type(host.tokens.operator);
       await page.keyboard.press("Enter");
-      await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
-
-      await follow("Waiting");
       await expect(page.getByRole("heading", { level: 1, name: "Waiting" })).toBeVisible();
-      await expect(row(page, "agent-b")).toBeVisible();
+
+      await follow(row(page, "agent-b"));
+      await expect(page.getByRole("heading", { level: 2, name: "agent-b" })).toBeVisible();
+      expect(new URL(page.url()).pathname).toMatch(/^\/waiting\/.+/);
 
       // The request's worker opens that worker's page.
-      await follow(hostId);
-      await expect(page.getByRole("heading", { level: 1, name: hostId })).toBeVisible();
+      await follow(inspectorOf(page, "agent-b").getByRole("link").last());
+      expect(new URL(page.url()).pathname).toMatch(/^\/workers\/.+/);
     } finally {
       await host.dispose();
     }
diff --git a/ui/src/model/waiting.test.ts b/ui/src/model/waiting.test.ts
new file mode 100644
index 000000000..c70a4fa61
--- /dev/null
+++ b/ui/src/model/waiting.test.ts
@@ -0,0 +1,174 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  chooseWaiting,
+  requestedDevice,
+  type WaitingRequest,
+  type WaitingRow,
+  waitingTable,
+} from "./waiting";
+import type { WorkerView } from "./workers";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+
+function request(overrides: Partial<WaitingRequest> = {}): WaitingRequest {
+  return {
+    createdAt: NOW - 75_000,
+    id: "req_1",
+    queuePosition: 1,
+    requesterId: "agent-b",
+    spec: { model: "iPhone 16", platform: "ios" },
+    stage: "queued",
+    ...overrides,
+  };
+}
+
+function worker(overrides: Partial<WorkerView> = {}): WorkerView {
+  return {
+    catalog: [],
+    connection: "connected",
+    devices: [],
+    drained: false,
+    id: "wrk_1",
+    lastSeenAt: NOW,
+    leases: [],
+    ...overrides,
+  };
+}
+
+function rowOf(overrides: Partial<WaitingRequest> = {}, workers: WorkerView[] = []): WaitingRow {
+  const row = waitingTable([request(overrides)], workers, NOW).rows[0];
+  if (row === undefined) throw new Error("no row");
+  return row;
+}
+
+describe("the waiting table", () => {
+  it("writes the device a request asked for with only the fields it named", () => {
+    expect(requestedDevice({ model: "iPhone 16", platform: "ios" })).toBe("iOS iPhone 16");
+    expect(
+      requestedDevice({
+        imageTag: "google_apis",
+        mode: "slim",
+        model: "Pixel 8",
+        osVersion: "35",
+        platform: "android",
+      }),
+    ).toBe("Android Pixel 8, runtime 35, mode slim, image tag google_apis");
+  });
+
+  it("writes a request that named a class or only a platform without a model, never as undefined", () => {
+    expect(requestedDevice({ class: "phone", platform: "ios" })).toBe("iOS phone");
+    expect(requestedDevice({ platform: "android" })).toBe("Android");
+  });
+
+  it("names the worker a request waits on: by its workerId, or on a single host the worker whose view lists the same request", () => {
+    const onGateway = request({ id: "req_w", workerId: "wrk_2" });
+    const onHost = request({ id: "req_h" });
+    const inFleetQueue = request({ id: "req_f", requesterId: "fleet-agent" });
+    // why: The copy a gateway sent worker-b, under the gateway's requester id: never the same request,
+    // even under the same id.
+    const sentOn = request({ id: "req_f", requesterId: "gw:gateway-1:fleet-agent" });
+    // why: Another request from the same requester, under another id: not this one either.
+    const another = request({ id: "req_x", requesterId: "fleet-agent" });
+    const workers = [
+      worker({ id: "wrk_1", label: "host", waiting: [onHost] }),
+      worker({ id: "wrk_2", label: "worker-b", waiting: [sentOn] }),
+      worker({ id: "wrk_3", label: "worker-c", waiting: [another] }),
+    ];
+
+    const rows = waitingTable([onGateway, onHost, inFleetQueue], workers, NOW).rows;
+
+    expect(rows.map((row) => row.queue)).toEqual([
+      { kind: "worker", name: "worker-b", to: "/workers/wrk_2" },
+      { kind: "worker", name: "host", to: "/workers/wrk_1" },
+      { kind: "gateway" },
+    ]);
+  });
+
+  it("names a worker the console has no view of by its id", () => {
+    expect(rowOf({ workerId: "wrk_gone" }).queue).toEqual({ id: "wrk_gone", kind: "unseen" });
+  });
+
+  it("shows a starting request with no place in the queue, and a stage it does not know as its raw word", () => {
+    const starting = request({ id: "req_s", stage: "starting" });
+    delete (starting as { queuePosition?: number }).queuePosition;
+    // why: A stage a newer daemon may send, which this console has never heard of.
+    const unknown = {
+      ...request({ id: "req_u" }),
+      stage: "hibernating",
+    } as unknown as WaitingRequest;
+
+    const [first, second] = waitingTable([starting, unknown], [], NOW).rows;
+
+    expect(first).toMatchObject({
+      place: "—",
+      placeOf: "—",
+      stage: { tone: "ok", word: "starting" },
+    });
+    expect(second).toMatchObject({ place: "#1", stage: { tone: "idle", word: "hibernating" } });
+  });
+
+  it("counts a place among the requests of the same queue, the physical queue apart from the virtual one", () => {
+    const physical = (id: string, queuePosition: number) =>
+      request({
+        id,
+        queuePosition,
+        spec: { model: "iPhone 15 Pro", physical: true, platform: "ios" },
+      } as unknown as Partial<WaitingRequest>);
+    const rows = waitingTable(
+      [
+        request({ id: "v1", queuePosition: 1 }),
+        request({ id: "v2", queuePosition: 2 }),
+        request({ id: "w1", queuePosition: 1, workerId: "wrk_2" }),
+        physical("p1", 1),
+      ],
+      [],
+      NOW,
+    ).rows;
+
+    expect(rows.map((row) => row.placeOf)).toEqual(["1 of 2", "2 of 2", "1 of 1", "1 of 1"]);
+    expect(rows.map((row) => row.physicalQueue)).toEqual([false, false, false, true]);
+  });
+
+  it("shows how long a request has waited, when it was created, and the path that opens it", () => {
+    expect(rowOf({ id: "req a/b" })).toMatchObject({
+      created: "2026-10-02 11:58:45 UTC",
+      to: "/waiting/req%20a%2Fb",
+      waited: "1 min 15 s",
+    });
+  });
+
+  it("keeps the order the daemon lists the requests in, and counts them with the longest wait", () => {
+    const table = waitingTable(
+      [
+        request({ id: "a", createdAt: NOW - 10_000 }),
+        request({ id: "b", createdAt: NOW - 75_000 }),
+      ],
+      [],
+      NOW,
+    );
+
+    expect(table.rows.map((row) => row.id)).toEqual(["a", "b"]);
+    expect(table.meta).toBe("2 waiting · longest 1 min 15 s");
+  });
+
+  it("says 0 waiting when nothing is waiting", () => {
+    expect(waitingTable([], [], NOW)).toEqual({ meta: "0 waiting", rows: [] });
+  });
+});
+
+describe("choosing a waiting request", () => {
+  const rows = waitingTable([request({ id: "a" }), request({ id: "b" })], [], NOW).rows;
+
+  it("chooses the first row of the page when the URL names none", () => {
+    expect(chooseWaiting(rows, undefined, rows.slice(1))).toEqual({ chosen: rows[1], gone: false });
+  });
+
+  it("chooses the request the URL names, even from another page", () => {
+    expect(chooseWaiting(rows, "a", rows.slice(1))).toEqual({ chosen: rows[0], gone: false });
+  });
+
+  it("calls a named request that is no longer waiting gone, and chooses nothing", () => {
+    expect(chooseWaiting(rows, "granted", rows)).toEqual({ chosen: undefined, gone: true });
+  });
+});
diff --git a/ui/src/model/waiting.ts b/ui/src/model/waiting.ts
index 5ffd36d99..f415302ce 100644
--- a/ui/src/model/waiting.ts
+++ b/ui/src/model/waiting.ts
@@ -1,9 +1,10 @@
 import type { z } from "zod";
 
 import type { waitingRequestSchema } from "../../../src/contract/schemas";
-import type { Stat } from "./stat";
+import { itemPath } from "./paths";
 import { formatDuration } from "./time";
-import { platformName, type WorkerView } from "./workers";
+import { type Toned, waitingStageStatus } from "./tones";
+import { platformName, type WorkerView, workerName, workerPath } from "./workers";
 
 export type WaitingRequest = z.infer<typeof waitingRequestSchema>;
 
@@ -41,14 +42,109 @@ export function waitingOn(
   );
 }
 
-export function waitingStats(requests: readonly WaitingRequest[], now: number): readonly Stat[] {
+export type WaitingQueue =
+  | { readonly kind: "worker"; readonly name: string; readonly to: string }
+  | { readonly kind: "unseen"; readonly id: string }
+  | { readonly kind: "gateway" };
+
+export interface WaitingRow {
+  readonly key: string;
+  readonly id: string;
+  readonly to: string;
+  readonly requester: string;
+  readonly device: string;
+  readonly stage: Toned;
+  readonly waited: string;
+  readonly place: string;
+  readonly placeOf: string;
+  readonly physicalQueue: boolean;
+  readonly created: string;
+  readonly queue: WaitingQueue;
+}
+
+export interface WaitingTable {
+  readonly meta: string;
+  readonly rows: readonly WaitingRow[];
+}
+
+function queueOf(request: WaitingRequest, workers: readonly WorkerView[]): WaitingQueue {
+  const worker = waitingOn(request, workers);
+  if (worker !== undefined) {
+    return { kind: "worker", name: workerName(worker), to: workerPath(worker.id) };
+  }
+  return request.workerId === undefined
+    ? { kind: "gateway" }
+    : { id: request.workerId, kind: "unseen" };
+}
+
+// why: a place in the queue means something only among the requests of the same queue: one holder
+// (a worker or the gateway), and the physical queue apart from the virtual one.
+function queueKey(request: WaitingRequest, workers: readonly WorkerView[]): string {
+  const holder = waitingOn(request, workers)?.id ?? request.workerId ?? "";
+  return `${holder}/${request.spec.physical === true ? "physical" : "virtual"}`;
+}
+
+// why: UTC and ISO-shaped, so the same instant reads the same on every operator's machine.
+export function createdAtOf(timestamp: number): string {
+  return `${new Date(timestamp).toISOString().slice(0, 19).replace("T", " ")} UTC`;
+}
+
+// why: the rows keep the order the daemon lists them in (a gateway's own queue, then each worker's),
+// which is oldest first within a queue.
+export function waitingTable(
+  requests: readonly WaitingRequest[],
+  workers: readonly WorkerView[],
+  now: number,
+): WaitingTable {
+  const sizes = new Map<string, number>();
+  for (const request of requests) {
+    const key = queueKey(request, workers);
+    sizes.set(key, (sizes.get(key) ?? 0) + 1);
+  }
+  const rows = requests.map((request): WaitingRow => {
+    const position = request.queuePosition;
+    const inQueue = sizes.get(queueKey(request, workers)) ?? 0;
+    return {
+      created: createdAtOf(request.createdAt),
+      device: requestedDevice(request.spec),
+      id: request.id,
+      key: `${request.workerId ?? ""}/${request.id}`,
+      physicalQueue: request.spec.physical === true,
+      place: position === undefined ? "—" : `#${String(position)}`,
+      placeOf:
+        position === undefined
+          ? "—"
+          : `${String(position)} of ${String(Math.max(position, inQueue))}`,
+      queue: queueOf(request, workers),
+      requester: request.requesterId,
+      stage: waitingStageStatus(request.stage),
+      to: itemPath("/waiting", request.id),
+      waited: formatDuration(now - request.createdAt),
+    };
+  });
   const oldest = Math.min(...requests.map((request) => request.createdAt));
-  return [
-    { caption: "for a device", label: "Requests waiting", value: String(requests.length) },
-    {
-      caption: requests.length === 0 ? "no request is waiting" : "the oldest request so far",
-      label: "Longest wait",
-      value: requests.length === 0 ? "—" : formatDuration(now - oldest),
-    },
-  ];
+  return {
+    meta:
+      requests.length === 0
+        ? "0 waiting"
+        : `${String(requests.length)} waiting · longest ${formatDuration(now - oldest)}`,
+    rows,
+  };
+}
+
+export interface WaitingChoice {
+  readonly chosen: WaitingRow | undefined;
+  readonly gone: boolean;
+}
+
+// why: with no id in the URL a wide screen shows the first row of the page; an id that matches no
+// waiting request is "gone", whatever page it would have been on.
+export function chooseWaiting(
+  all: readonly WaitingRow[],
+  id: string | undefined,
+  pageRows: readonly WaitingRow[],
+): WaitingChoice {
+  if (id === undefined) return { chosen: pageRows[0], gone: false };
+  const chosen = all.find((row) => row.id === id);
+  return { chosen, gone: chosen === undefined };
 }
diff --git a/ui/src/screens/waiting/index.tsx b/ui/src/screens/waiting/index.tsx
index 0a4fc9a57..fa09f579f 100644
--- a/ui/src/screens/waiting/index.tsx
+++ b/ui/src/screens/waiting/index.tsx
@@ -1,9 +1,144 @@
-import { Empty, Page } from "../../ds";
+import "./waiting.css";
+
+import {
+  Card,
+  Empty,
+  Facts,
+  Grid,
+  Id,
+  Inspector,
+  InspectorEmpty,
+  Link,
+  List,
+  ListPane,
+  ListRow,
+  Loaded,
+  MasterDetail,
+  Pager,
+  Status,
+  StatusDot,
+} from "../../ds";
+import {
+  type WaitingPage,
+  type WaitingQueue,
+  type WaitingRow,
+  useWaiting,
+} from "../../state/waiting";
 
 export function WaitingScreen() {
+  const view = useWaiting();
+  return <Loaded view={view}>{(page) => <WaitingBody page={page} />}</Loaded>;
+}
+
+export function WaitingBody({ page }: { readonly page: WaitingPage }) {
+  const { chosen, gone, named, rows } = page;
   return (
-    <Page title="Waiting">
-      <Empty>Coming soon.</Empty>
-    </Page>
+    <MasterDetail
+      focus={named ? "detail" : "list"}
+      wide
+      list={
+        <ListPane
+          title="Waiting"
+          meta={page.meta}
+          footer={
+            page.paging.total > page.paging.size ? (
+              <Pager label="Waiting requests" paging={page.paging} />
+            ) : undefined
+          }
+        >
+          {rows.length === 0 ? (
+            <Empty>No requests are waiting.</Empty>
+          ) : (
+            <div className="waiting-list">
+              <List label="Waiting requests">
+                {rows.map((row) => (
+                  <WaitingListRow key={row.key} row={row} selected={row === chosen} />
+                ))}
+              </List>
+            </div>
+          )}
+        </ListPane>
+      }
+      detail={detailOf(chosen, gone)}
+    />
   );
 }
+
+function detailOf(chosen: WaitingRow | undefined, gone: boolean) {
+  if (gone) {
+    return (
+      <InspectorEmpty>
+        Request not waiting. <Link to="/waiting">Back to waiting</Link>
+      </InspectorEmpty>
+    );
+  }
+  return chosen === undefined ? null : <WaitingInspector key={chosen.key} row={chosen} />;
+}
+
+function WaitingListRow({
+  row,
+  selected,
+}: {
+  readonly row: WaitingRow;
+  readonly selected: boolean;
+}) {
+  return (
+    <ListRow
+      to={row.to}
+      selected={selected}
+      mono
+      lead={<span className="waiting-place">{row.place}</span>}
+      title={row.requester}
+      aside={row.waited}
+      sub={row.device}
+      trail={
+        <span className="waiting-stage">
+          <StatusDot tone={row.stage.tone} label={row.stage.word} />
+          {row.stage.word}
+        </span>
+      }
+    />
+  );
+}
+
+function WaitingInspector({ row }: { readonly row: WaitingRow }) {
+  return (
+    <Inspector
+      crumbs={[{ label: "Waiting", to: "/waiting" }, { label: row.id }]}
+      title={row.requester}
+      mono
+      line={`wants ${row.device}`}
+    >
+      <Grid min="sm">
+        <Card>
+          <p className="waiting-card-label">Waiting</p>
+          <p className="waiting-card-value">{row.waited}</p>
+        </Card>
+        <Card>
+          <p className="waiting-card-label">Place</p>
+          <p className="waiting-card-value">{row.placeOf}</p>
+          {row.physicalQueue ? <p className="waiting-card-note">physical queue</p> : null}
+        </Card>
+        <Card>
+          <p className="waiting-card-label">Stage</p>
+          <p className="waiting-card-value waiting-card-word">
+            <Status tone={row.stage.tone}>{row.stage.word}</Status>
+          </p>
+        </Card>
+      </Grid>
+      <Facts
+        facts={[
+          { label: "Request", value: <Id>{row.id}</Id> },
+          { label: "Created", value: row.created },
+          { label: "Queue", value: <QueueValue queue={row.queue} /> },
+        ]}
+      />
+    </Inspector>
+  );
+}
+
+function QueueValue({ queue }: { readonly queue: WaitingQueue }) {
+  if (queue.kind === "worker") return <Link to={queue.to}>{queue.name}</Link>;
+  if (queue.kind === "unseen") return <Id>{queue.id}</Id>;
+  return "the gateway's queue";
+}
diff --git a/ui/src/screens/waiting/waiting.css b/ui/src/screens/waiting/waiting.css
new file mode 100644
index 000000000..b5490ebdb
--- /dev/null
+++ b/ui/src/screens/waiting/waiting.css
@@ -0,0 +1,44 @@
+/* why: the list row's lead track is a 10px square's width; a place in the queue (`#12`) is text, so
+ * here the track grows to fit it. */
+.waiting-list .list-row {
+  grid-template-columns: minmax(2.5ch, auto) minmax(0, 1fr) auto;
+}
+
+.waiting-place {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.waiting-stage {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.waiting-card-label {
+  margin: 0;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+}
+
+.waiting-card-value {
+  margin: var(--space-1) 0 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-lg);
+  font-weight: 500;
+}
+
+.waiting-card-word {
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+}
+
+.waiting-card-note {
+  margin: var(--space-1) 0 0;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
diff --git a/ui/src/screens/waiting/waiting.test.tsx b/ui/src/screens/waiting/waiting.test.tsx
new file mode 100644
index 000000000..171ea184c
--- /dev/null
+++ b/ui/src/screens/waiting/waiting.test.tsx
@@ -0,0 +1,146 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import type { Paging } from "../../ds";
+import { chooseWaiting, type WaitingRequest, waitingTable } from "../../model/waiting";
+import type { WaitingPage } from "../../state/waiting";
+import { WaitingBody } from ".";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+
+function request(overrides: Partial<WaitingRequest> = {}): WaitingRequest {
+  return {
+    createdAt: NOW - 75_000,
+    id: "req_1",
+    queuePosition: 1,
+    requesterId: "agent-b",
+    spec: { model: "iPhone 16", platform: "ios" },
+    stage: "queued",
+    ...overrides,
+  };
+}
+
+const PAGING: Paging = {
+  go: () => undefined,
+  last: 1,
+  page: 1,
+  range: "1–1 of 1",
+  resize: () => undefined,
+  size: 25,
+  sizes: [25, 50, 100],
+  total: 1,
+};
+
+function pageOf(requests: readonly WaitingRequest[], id?: string): WaitingPage {
+  const table = waitingTable(requests, [], NOW);
+  return {
+    ...chooseWaiting(table.rows, id, table.rows),
+    count: table.rows.length,
+    meta: table.meta,
+    named: id !== undefined,
+    paging: { ...PAGING, total: table.rows.length },
+    rows: table.rows,
+  };
+}
+
+function text(html: string): string {
+  return html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+describe("the Waiting screen", () => {
+  it("leads each row with its place, then the requester, the time waited, the device and the stage", () => {
+    const html = renderToStaticMarkup(<WaitingBody page={pageOf([request()])} />);
+
+    expect(html).toContain('<ul class="list" aria-label="Waiting requests">');
+    expect(html).toContain('href="/waiting/req_1"');
+    expect(text(html)).toContain("#1 agent-b 1 min 15 s iOS iPhone 16 queued");
+    expect(html).toContain('aria-label="queued"');
+  });
+
+  it("marks the first row as the chosen one when the URL names none, and the named one otherwise", () => {
+    const two = [request({ id: "a" }), request({ id: "b", requesterId: "agent-c" })];
+
+    const first = renderToStaticMarkup(<WaitingBody page={pageOf(two)} />);
+    const second = renderToStaticMarkup(<WaitingBody page={pageOf(two, "b")} />);
+
+    expect(first.match(/aria-current="page"/g)).toHaveLength(1);
+    expect(first).toMatch(/aria-current="page"[^>]*>.*?agent-b/);
+    expect(second).toMatch(/aria-current="page"[^>]*>.*?agent-c/);
+    expect(second).toContain("focus-detail");
+    expect(first).toContain("focus-list");
+  });
+
+  it("titles the inspector with the requester and says what it wants, with three cards and the facts", () => {
+    const html = renderToStaticMarkup(<WaitingBody page={pageOf([request()])} />);
+
+    expect(html).toMatch(/<h2[^>]*>agent-b<\/h2>/);
+    expect(text(html)).toContain("wants iOS iPhone 16");
+    expect(text(html)).toContain("Waiting 1 min 15 s");
+    expect(text(html)).toContain("Place 1 of 1");
+    expect(text(html)).toContain("Stage queued");
+    expect(text(html)).toContain("Request req_1");
+    expect(text(html)).toContain("Created 2026-10-02 11:58:45 UTC");
+  });
+
+  it("links the worker whose queue holds the request, names the gateway's queue when none does, and the raw id of a worker it cannot see", () => {
+    const onWorker = renderToStaticMarkup(
+      <WaitingBody
+        page={{
+          ...pageOf([request()]),
+          chosen: {
+            ...pageOf([request()]).rows[0]!,
+            queue: { kind: "worker", name: "worker-a", to: "/workers/wrk_1" },
+          },
+        }}
+      />,
+    );
+    const onGateway = renderToStaticMarkup(<WaitingBody page={pageOf([request()])} />);
+    const unseen = renderToStaticMarkup(
+      <WaitingBody page={pageOf([request({ workerId: "wrk_gone" })])} />,
+    );
+
+    expect(onWorker).toContain('<a href="/workers/wrk_1">worker-a</a>');
+    expect(text(onGateway)).toContain("Queue the gateway&#x27;s queue");
+    expect(text(unseen)).toContain("Queue wrk_gone");
+    expect(unseen).not.toContain("/workers/");
+  });
+
+  it("shows a request with no place in the queue as a dash in both the row and the card", () => {
+    const starting = request({ stage: "starting" });
+    delete (starting as { queuePosition?: number }).queuePosition;
+
+    const html = renderToStaticMarkup(<WaitingBody page={pageOf([starting])} />);
+
+    expect(text(html)).toContain("— agent-b");
+    expect(text(html)).toContain("Place —");
+  });
+
+  it("says the request is in the physical queue when it is", () => {
+    const physical = request({
+      spec: { model: "iPhone 15 Pro", physical: true, platform: "ios" },
+    } as unknown as Partial<WaitingRequest>);
+
+    const html = renderToStaticMarkup(<WaitingBody page={pageOf([physical])} />);
+
+    expect(text(html)).toContain("physical queue");
+  });
+
+  it("says so when nothing is waiting, and shows no inspector", () => {
+    const html = renderToStaticMarkup(<WaitingBody page={pageOf([])} />);
+
+    expect(text(html)).toContain("No requests are waiting.");
+    expect(text(html)).toContain("0 waiting");
+    expect(html).not.toContain("<h2");
+  });
+
+  it("says a named request is not waiting, with a link back to the list", () => {
+    const html = renderToStaticMarkup(<WaitingBody page={pageOf([request()], "granted")} />);
+
+    expect(text(html)).toContain("Request not waiting.");
+    expect(html).toContain('<a href="/waiting">Back to waiting</a>');
+    expect(html).not.toContain("<h2");
+  });
+});
diff --git a/ui/src/state/waiting.ts b/ui/src/state/waiting.ts
new file mode 100644
index 000000000..641951218
--- /dev/null
+++ b/ui/src/state/waiting.ts
@@ -0,0 +1,53 @@
+import type { LoadView } from "../ds/loaded";
+import type { Paging } from "../ds/pager";
+import { TABLE_SIZES } from "../model/paging";
+import { itemIdFrom } from "../model/paths";
+import {
+  chooseWaiting,
+  type WaitingChoice,
+  type WaitingList,
+  type WaitingRow,
+  waitingTable,
+} from "../model/waiting";
+import type { WorkerList } from "../model/workers";
+import { useLiveResource, useNow } from "./live";
+import { usePaging } from "./paging";
+import { loadView, mapView } from "./resource";
+import { usePath } from "./router";
+
+export type { WaitingQueue, WaitingRow } from "../model/waiting";
+
+export interface WaitingPage extends WaitingChoice {
+  readonly meta: string;
+  readonly rows: readonly WaitingRow[];
+  readonly count: number;
+  readonly paging: Paging;
+  readonly named: boolean;
+}
+
+// why: until the queue has answered its size is unknown, and a page asked for in the URL must not
+// be corrected down to page 1 by a count of zero.
+const UNKNOWN_TOTAL = Number.MAX_SAFE_INTEGER;
+
+export function useWaiting(): LoadView<WaitingPage> {
+  const requests = loadView(useLiveResource<WaitingList>("/v1/lease-requests"));
+  const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers ?? [];
+  const now = useNow();
+  const id = itemIdFrom("/waiting", usePath());
+  const table = mapView(requests, (list) => waitingTable(list.requests, workers, now.server));
+  const paging = usePaging({
+    sizes: TABLE_SIZES,
+    total: table.kind === "ready" ? table.data.rows.length : UNKNOWN_TOTAL,
+  });
+  return mapView(table, (all) => {
+    const rows = all.rows.slice((paging.page - 1) * paging.size, paging.page * paging.size);
+    return {
+      ...chooseWaiting(all.rows, id, rows),
+      count: all.rows.length,
+      meta: all.meta,
+      named: id !== undefined,
+      paging,
+      rows,
+    };
+  });
+}

From f3533ecd79f1d851162ee0860ae53c4aa32a2a75 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:26:45 +0200
Subject: [PATCH 05/32] test(ui): the overview names each worker's health and
 says so when there is nothing to show

---
 ui/src/screens/overview/overview.test.tsx | 61 +++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 ui/src/screens/overview/overview.test.tsx

diff --git a/ui/src/screens/overview/overview.test.tsx b/ui/src/screens/overview/overview.test.tsx
new file mode 100644
index 000000000..01e3f133b
--- /dev/null
+++ b/ui/src/screens/overview/overview.test.tsx
@@ -0,0 +1,61 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import type { Overview } from "../../state/overview";
+import { OverviewBody } from "./index";
+
+function text(html: string): string {
+  return html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+const quiet: Overview = {
+  activity: [],
+  attention: [],
+  chartSummary: "",
+  minutes: [],
+  platforms: [],
+  tiles: [],
+  workers: [],
+};
+
+describe("the overview screen", () => {
+  it("says so in one line where a fleet has no workers, nothing needs attention and nothing happened", () => {
+    const shown = text(renderToStaticMarkup(<OverviewBody overview={quiet} />));
+
+    expect(shown).toContain("No workers have connected.");
+    expect(shown).toContain("Nothing needs attention.");
+    expect(shown).toContain("No events in the last hour.");
+  });
+
+  it("names each worker's health in its square, and its devices in words beside the slots", () => {
+    const html = renderToStaticMarkup(
+      <OverviewBody
+        overview={{
+          ...quiet,
+          workers: [
+            {
+              health: { tone: "warn", word: "memory 88%" },
+              id: "w1",
+              leases: 2,
+              name: "mac-mini-01",
+              slots: [
+                { kind: "leased", label: "iPhone 16 18.4, leased" },
+                { kind: "free", label: "free" },
+              ],
+              slotsLabel: "1 leased, 1 free",
+              to: "/workers/w1",
+            },
+          ],
+        }}
+      />,
+    );
+
+    expect(html).toContain('class="status-dot status-dot-warn" role="img" aria-label="memory 88%"');
+    expect(html).toContain('role="img" aria-label="1 leased, 1 free"');
+    expect(html).toContain('href="/workers/w1"');
+    expect(text(html)).not.toContain("memory 88%");
+  });
+});

From 8b52e7f5f169991e30d7b5d3b63cc938b49835e8 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:27:46 +0200
Subject: [PATCH 06/32] fix(ui): a list keeps the page its address asks for
 while it loads, and a sliding inspector never widens the page

---
 ui/src/ds/master-detail.css | 3 ++-
 ui/src/ds/sidebar.css       | 1 +
 ui/src/state/paging.ts      | 9 ++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/src/ds/master-detail.css b/ui/src/ds/master-detail.css
index 8417efde4..22981b06c 100644
--- a/ui/src/ds/master-detail.css
+++ b/ui/src/ds/master-detail.css
@@ -1,6 +1,7 @@
 /* A list on the left, the chosen item on the right. Below 768px only one of them shows. */
 
 .master-detail {
+  overflow-x: clip;
   display: grid;
   grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
   min-height: 100vh;
@@ -72,7 +73,7 @@
 
 .list-row {
   display: grid;
-  grid-template-columns: 10px minmax(0, 1fr) auto;
+  grid-template-columns: minmax(10px, auto) minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-2) var(--space-3);
   padding: var(--space-3) var(--space-4);
diff --git a/ui/src/ds/sidebar.css b/ui/src/ds/sidebar.css
index a2a5e045d..b863ea8bc 100644
--- a/ui/src/ds/sidebar.css
+++ b/ui/src/ds/sidebar.css
@@ -9,6 +9,7 @@
 .app-main {
   flex: 1;
   min-width: 0;
+  overflow-x: clip;
 }
 
 .app-main:focus {
diff --git a/ui/src/state/paging.ts b/ui/src/state/paging.ts
index 6bf00ef74..ea7e7a181 100644
--- a/ui/src/state/paging.ts
+++ b/ui/src/state/paging.ts
@@ -16,12 +16,15 @@ import { setSearch, useSearch } from "./router";
 export function usePaging(options: {
   readonly name?: string;
   readonly sizes: PageSizes;
-  readonly total: number;
+  readonly total: number | undefined;
 }): Paging {
-  const { name, sizes, total } = options;
+  const { name, sizes } = options;
   const keys = pageKeys(name);
   const asked = readPage(useSearch(), keys, sizes);
-  const last = lastPage(total, asked.size);
+  // why: before its data arrives a list has no length; correcting the page against zero rows would
+  // throw away the page a reload or a shared link asked for.
+  const total = options.total ?? 0;
+  const last = options.total === undefined ? asked.page : lastPage(total, asked.size);
   const at = { page: Math.min(asked.page, last), size: asked.size };
   const moved = at.page !== asked.page;
   useEffect(() => {

From 1f956fa18fba6b605bf2e4f5ef5ba341f6d42a9e Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:28:05 +0200
Subject: [PATCH 07/32] refactor(ui): the waiting page leaves an unknown length
 to the pager

---
 ui/src/state/waiting.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/ui/src/state/waiting.ts b/ui/src/state/waiting.ts
index 641951218..2dbecd254 100644
--- a/ui/src/state/waiting.ts
+++ b/ui/src/state/waiting.ts
@@ -25,10 +25,6 @@ export interface WaitingPage extends WaitingChoice {
   readonly named: boolean;
 }
 
-// why: until the queue has answered its size is unknown, and a page asked for in the URL must not
-// be corrected down to page 1 by a count of zero.
-const UNKNOWN_TOTAL = Number.MAX_SAFE_INTEGER;
-
 export function useWaiting(): LoadView<WaitingPage> {
   const requests = loadView(useLiveResource<WaitingList>("/v1/lease-requests"));
   const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers ?? [];
@@ -37,7 +33,7 @@ export function useWaiting(): LoadView<WaitingPage> {
   const table = mapView(requests, (list) => waitingTable(list.requests, workers, now.server));
   const paging = usePaging({
     sizes: TABLE_SIZES,
-    total: table.kind === "ready" ? table.data.rows.length : UNKNOWN_TOTAL,
+    total: table.kind === "ready" ? table.data.rows.length : undefined,
   });
   return mapView(table, (all) => {
     const rows = all.rows.slice((paging.page - 1) * paging.size, paging.page * paging.size);

From c0e6354c34ed7ad660445b6bace82b00b553e485 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:28:06 +0200
Subject: [PATCH 08/32] feat(ui): the events page is a feed with an inspector

---
 ui/src/data/event-feed.test.ts        | 477 ++++++++++++++++++++++++++
 ui/src/ds/feed.css                    |  41 +++
 ui/src/ds/feed.tsx                    |  94 +++++
 ui/src/ds/index.ts                    |   1 +
 ui/src/model/event-list.test.ts       | 294 ++++++++++++++++
 ui/src/model/event-list.ts            | 219 ++++++++++++
 ui/src/model/events.test.ts           | 133 +++++++
 ui/src/model/events.ts                |  22 --
 ui/src/screens/events/events.css      |  31 ++
 ui/src/screens/events/events.test.tsx | 200 +++++++++++
 ui/src/screens/events/index.tsx       | 185 +++++++++-
 ui/src/state/events.ts                |  85 ++++-
 12 files changed, 1754 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/data/event-feed.test.ts
 create mode 100644 ui/src/ds/feed.css
 create mode 100644 ui/src/ds/feed.tsx
 create mode 100644 ui/src/model/event-list.test.ts
 create mode 100644 ui/src/model/event-list.ts
 create mode 100644 ui/src/model/events.test.ts
 create mode 100644 ui/src/screens/events/events.css
 create mode 100644 ui/src/screens/events/events.test.tsx

diff --git a/ui/src/data/event-feed.test.ts b/ui/src/data/event-feed.test.ts
new file mode 100644
index 000000000..a9bc675b9
--- /dev/null
+++ b/ui/src/data/event-feed.test.ts
@@ -0,0 +1,477 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ApiError, type ApiPath, type ApiResponse } from "./api";
+import type { Clock } from "./live/connection";
+import { connect, settle } from "./live/test-support";
+import { EventFeed } from "./event-feed";
+import { MAX_EVENTS } from "../model/events";
+
+const T0 = Date.parse("2026-10-02T11:30:00Z");
+
+const fakeClock: Clock = {
+  now: () => Date.now(),
+  setTimeout: (run, ms) => setTimeout(run, ms),
+  clearTimeout: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
+};
+
+function envelope(
+  seq: number,
+  timestamp: number,
+  event = "lease.granted",
+  payload: unknown = {},
+  id = `evt_${seq}_${timestamp}`,
+) {
+  return { event, id, module: "lease", payload, seq, timestamp };
+}
+
+function frame(event: ReturnType<typeof envelope>): string {
+  return `event: ${event.event}\ndata: ${JSON.stringify(event)}\n\n`;
+}
+
+type Replay = unknown[] | ((path: ApiPath) => Promise<unknown>);
+
+function eventLog(
+  events: readonly ReturnType<typeof envelope>[],
+): (path: ApiPath) => Promise<unknown> {
+  return (path) => {
+    const match = /since=(\d+)(s|h)$/.exec(path);
+    if (match === null) throw new Error(`Unexpected path ${path}`);
+    const ms = Number(match[1]) * (match[2] === "h" ? 3_600_000 : 1_000);
+    return Promise.resolve({ events: events.filter((event) => event.timestamp > Date.now() - ms) });
+  };
+}
+
+function openView(first: Replay = []) {
+  const live = connect();
+  const replays: ApiPath[] = [];
+  let replay: Replay = first;
+  live.daemon.reads = async (path) => {
+    if (!path.startsWith("/v1/events?")) return { body: {}, date: null };
+    replays.push(path);
+    const body = typeof replay === "function" ? await replay(path) : { events: replay };
+    return { body, date: null } satisfies ApiResponse<unknown>;
+  };
+  const feed = new EventFeed(async (path) => (await live.daemon.get(path)).body, fakeClock);
+  live.connection.onEvent(feed.streamEvent);
+  live.connection.onStreamOpened(feed.streamOpened);
+  const stop = feed.start();
+  return {
+    ...live,
+    feed,
+    replays,
+    stop,
+    replayWith(next: Replay) {
+      replay = next;
+    },
+    ids(): string[] {
+      return (feed.snapshot().data ?? []).map((event) => event.id);
+    },
+    shown(): string[] {
+      return (feed.snapshot().data ?? []).map((event) => `${event.seq}@${event.timestamp}`);
+    },
+  };
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("the event feed", () => {
+  it("the feed lists events from the stream and from the replay once each", async () => {
+    const view = openView();
+    view.replayWith([envelope(1, T0), envelope(2, T0 + 1_000)]);
+    await settle();
+
+    view.daemon.openStream()?.send(frame(envelope(3, T0 + 2_000)));
+    view.daemon.openStream()?.send(frame(envelope(4, T0 + 3_000)));
+    await settle();
+
+    expect(view.shown()).toEqual([
+      `4@${T0 + 3_000}`,
+      `3@${T0 + 2_000}`,
+      `2@${T0 + 1_000}`,
+      `1@${T0}`,
+    ]);
+  });
+
+  it("an event in both the replay and the stream is shown once", async () => {
+    const view = openView();
+    const both = envelope(7, T0);
+    view.daemon.openStream()?.send(frame(both));
+    view.replayWith([envelope(6, T0 - 1_000), both]);
+    await settle();
+    expect(view.shown()).toEqual([`7@${T0}`, `6@${T0 - 1_000}`]);
+
+    view.daemon.openStream()?.send(frame(both));
+    await settle();
+
+    expect(view.shown()).toEqual([`7@${T0}`, `6@${T0 - 1_000}`]);
+  });
+
+  it("two events with the same seq and timestamp but different ids are both shown", async () => {
+    const view = openView();
+    view.replayWith([envelope(1, T0, "lease.granted", {}, "evt_a")]);
+    await settle();
+
+    view.daemon.openStream()?.send(frame(envelope(1, T0, "lease.granted", {}, "evt_b")));
+    await settle();
+
+    expect(view.ids().sort()).toEqual(["evt_a", "evt_b"]);
+  });
+
+  it("events with the same timestamp are listed by seq, newest first", async () => {
+    const view = openView();
+    view.replayWith([envelope(2, T0), envelope(9, T0), envelope(5, T0)]);
+    await settle();
+
+    expect(view.shown()).toEqual([`9@${T0}`, `5@${T0}`, `2@${T0}`]);
+  });
+
+  it("an envelope without an id is not shown", async () => {
+    const view = openView();
+    const { id: _id, ...withoutId } = envelope(2, T0);
+    view.replayWith([withoutId, { ...envelope(3, T0), id: 3 }, envelope(4, T0)]);
+    await settle();
+
+    expect(view.ids()).toEqual(["evt_4_" + T0]);
+  });
+
+  it("events with the same seq from before and after a daemon restart are both shown", async () => {
+    const view = openView();
+    await settle();
+    const before = envelope(1, T0, "daemon.started");
+    view.daemon.openStream()?.send(frame(before));
+    await settle();
+
+    view.daemon.openStream()?.end();
+    await settle();
+    const after = envelope(1, T0 + 5_000, "daemon.started");
+    view.replayWith([before, after]);
+    await vi.advanceTimersByTimeAsync(1_000);
+    view.daemon.openStream()?.send(frame(after));
+    await settle();
+
+    expect(view.shown()).toEqual([`1@${T0 + 5_000}`, `1@${T0}`]);
+  });
+
+  it("after a reconnect the gap is filled from GET /v1/events with since rounded up to whole seconds", async () => {
+    const view = openView();
+    await settle();
+    expect(view.replays).toEqual(["/v1/events?since=1h", "/v1/events?since=1h"]);
+
+    view.daemon.holdStreams = true;
+    view.daemon.openStream()?.end();
+    await settle();
+    const missed = envelope(1, Date.now() + 500, "daemon.started");
+    view.replayWith([missed]);
+    await vi.advanceTimersByTimeAsync(1_300);
+    expect(view.replays).toHaveLength(2);
+    view.daemon.openHeldStreams();
+    await settle();
+
+    expect(view.replays.slice(2)).toEqual(["/v1/events?since=2s"]);
+    expect(view.shown()).toEqual([`1@${missed.timestamp}`]);
+  });
+
+  it("after a hidden tab is shown again the gap is filled the same way", async () => {
+    const view = openView();
+    await settle();
+
+    view.visibility.set(true);
+    await vi.advanceTimersByTimeAsync(4_001);
+    const missed = envelope(5, Date.now() - 2_000);
+    view.replayWith([missed]);
+    view.visibility.set(false);
+    await settle();
+
+    expect(view.replays.slice(2)).toEqual(["/v1/events?since=5s"]);
+    expect(view.shown()).toEqual([`5@${missed.timestamp}`]);
+  });
+
+  it("a feed opened before the stream loads the recent events again once the stream opens", async () => {
+    const view = openView();
+    expect(view.replays).toEqual(["/v1/events?since=1h"]);
+    const sentBetween = envelope(9, T0);
+    view.replayWith([sentBetween]);
+    await settle();
+
+    expect(view.replays).toEqual(["/v1/events?since=1h", "/v1/events?since=1h"]);
+    expect(view.shown()).toEqual([`9@${T0}`]);
+  });
+
+  it("a stream that first opens after the last hour loaded loads it again", async () => {
+    const view = openView([]);
+    await settle();
+    const sent = view.replays.length;
+    view.replayWith([envelope(1, T0)]);
+
+    view.feed.streamOpened({});
+    await settle();
+
+    expect(view.replays.slice(sent)).toEqual(["/v1/events?since=1h"]);
+    expect(view.shown()).toEqual([`1@${T0}`]);
+  });
+
+  it("the feed keeps the newest 10,000 events", async () => {
+    expect(MAX_EVENTS).toBe(10_000);
+    const view = openView();
+    view.replayWith(
+      Array.from({ length: MAX_EVENTS }, (_, index) => envelope(index + 1, T0 + index * 1_000)),
+    );
+    await settle();
+    expect(view.shown()).toHaveLength(MAX_EVENTS);
+
+    view.daemon.openStream()?.send(frame(envelope(MAX_EVENTS + 1, T0 + MAX_EVENTS * 1_000)));
+    view.daemon.openStream()?.send(frame(envelope(0, T0 - 1_000)));
+    await settle();
+
+    const shown = view.shown();
+    expect(shown).toHaveLength(MAX_EVENTS);
+    expect(shown[0]).toBe(`${MAX_EVENTS + 1}@${T0 + MAX_EVENTS * 1_000}`);
+    expect(shown.at(-1)).toBe(`2@${T0 + 1_000}`);
+  });
+
+  it("an envelope without a numeric seq, a timestamp that is a date, or a name is not shown", async () => {
+    const view = openView();
+    view.replayWith([
+      { event: "lease.granted", id: "evt_a", timestamp: T0 },
+      { event: "lease.granted", id: "evt_b", seq: 1 },
+      { id: "evt_c", seq: 2, timestamp: T0 },
+      { event: "lease.granted", id: "evt_d", seq: 3, timestamp: 1e300 },
+      { event: "lease.granted", id: "evt_e", seq: 5, timestamp: "2026-10-02T11:30:00Z" },
+      { event: "lease.granted", id: "evt_f", seq: "6", timestamp: T0 },
+      { event: 7, id: "evt_g", seq: 7, timestamp: T0 },
+      envelope(4, T0),
+    ]);
+    await settle();
+
+    expect(view.shown()).toEqual([`4@${T0}`]);
+  });
+
+  it("until the first load answers, the feed holds nothing yet", async () => {
+    let answer: (body: unknown) => void = () => {};
+    const view = openView(
+      () =>
+        new Promise((resolve) => {
+          answer = resolve;
+        }),
+    );
+    await settle();
+    view.daemon.openStream()?.send(frame(envelope(2, T0)));
+    await settle();
+    expect(view.feed.snapshot()).toEqual({});
+
+    answer({ events: [envelope(1, T0 - 1_000)] });
+    await settle();
+
+    expect(view.shown()).toEqual([`2@${T0}`, `1@${T0 - 1_000}`]);
+  });
+
+  it("a load the daemon refuses shows why, and keeps the events already shown", async () => {
+    const view = openView();
+    view.replayWith([envelope(1, T0)]);
+    await settle();
+    expect(view.feed.snapshot().error).toBeUndefined();
+
+    const refusal = new ApiError(500, "INTERNAL", "Internal error");
+    view.replayWith(() => Promise.reject(refusal));
+    view.visibility.set(true);
+    view.visibility.set(false);
+    await settle();
+
+    expect(view.feed.snapshot().error).toBe(refusal);
+    expect(view.shown()).toEqual([`1@${T0}`]);
+
+    view.replayWith([envelope(2, T0 + 1_000)]);
+    view.visibility.set(true);
+    view.visibility.set(false);
+    await settle();
+
+    expect(view.feed.snapshot().error).toBeUndefined();
+    expect(view.shown()).toEqual([`2@${T0 + 1_000}`, `1@${T0}`]);
+  });
+
+  it("an answer with no events list is refused as unreadable", async () => {
+    const view = openView(() => Promise.resolve({ items: [envelope(1, T0)] }));
+    await settle();
+
+    const { data, error } = view.feed.snapshot();
+    expect(error).toBeInstanceOf(SyntaxError);
+    expect(data).toEqual([]);
+  });
+
+  it("a feed opened while the daemon is away loads the last hour once it is back", async () => {
+    const view = openView(() => Promise.reject(new TypeError("Failed to fetch")));
+    view.daemon.health = "unreachable";
+    await settle();
+    view.daemon.openStream()?.end();
+    await vi.advanceTimersByTimeAsync(7_000);
+    expect(view.connection.state().phase).toBe("disconnected");
+    expect(view.feed.snapshot()).toEqual({});
+
+    const earlier = envelope(1, Date.now() - 30 * 60_000);
+    view.replayWith(eventLog([earlier]));
+    view.daemon.health = "up";
+    await vi.advanceTimersByTimeAsync(8_000);
+    expect(view.connection.state().phase).toBe("connected");
+
+    expect(view.shown()).toEqual([`1@${earlier.timestamp}`]);
+  });
+
+  it("a closed feed ignores what arrives after", async () => {
+    let answer: (body: unknown) => void = () => {};
+    let loads = 0;
+    const view = openView(() => {
+      loads += 1;
+      if (loads === 1) return Promise.resolve({ events: [envelope(1, T0 - 1_000)] });
+      return new Promise((resolve) => {
+        answer = resolve;
+      });
+    });
+    await settle();
+    const before = view.feed.snapshot();
+    expect(view.shown()).toEqual([`1@${T0 - 1_000}`]);
+
+    view.stop();
+    view.daemon.openStream()?.send(frame(envelope(2, T0)));
+    answer({ events: [envelope(3, T0 + 1_000)] });
+    await settle();
+    view.visibility.set(true);
+    view.visibility.set(false);
+    await settle();
+
+    expect(view.feed.snapshot()).toBe(before);
+    expect(view.replays).toHaveLength(2);
+  });
+});
+
+describe("the event feed's loads", () => {
+  it("a closed feed shows no refusal and sends no retry that would arrive after", async () => {
+    const refused = openView(() => Promise.reject(new ApiError(500, "INTERNAL", "Internal error")));
+    refused.stop();
+    await settle();
+    expect(refused.feed.snapshot()).toEqual({});
+
+    const lost = openView(() => Promise.reject(new TypeError("Failed to fetch")));
+    await settle();
+    const sent = lost.replays.length;
+    lost.stop();
+    await vi.advanceTimersByTimeAsync(30_000);
+    expect(lost.replays).toHaveLength(sent);
+  });
+
+  it("a replay that holds the same event twice shows it once", async () => {
+    const view = openView([envelope(1, T0), envelope(1, T0), envelope(2, T0 + 1)]);
+    await settle();
+
+    expect(view.shown()).toEqual([`2@${T0 + 1}`, `1@${T0}`]);
+  });
+
+  it("an event already shown changes nothing", async () => {
+    const view = openView([envelope(1, T0)]);
+    await settle();
+    const before = view.feed.snapshot();
+    let changes = 0;
+    view.feed.subscribe(() => {
+      changes += 1;
+    });
+
+    view.daemon.openStream()?.send(frame(envelope(1, T0)));
+    await settle();
+
+    expect(view.feed.snapshot()).toBe(before);
+    expect(changes).toBe(0);
+  });
+
+  it("a refusal stays shown while the stream adds events, and those events show", async () => {
+    const refusal = new ApiError(500, "INTERNAL", "Internal error");
+    const view = openView(() => Promise.reject(refusal));
+    await settle();
+    expect(view.feed.snapshot()).toEqual({ data: [], error: refusal });
+
+    view.daemon.openStream()?.send(frame(envelope(1, T0)));
+    await settle();
+
+    expect(view.feed.snapshot().error).toBe(refusal);
+    expect(view.shown()).toEqual([`1@${T0}`]);
+  });
+
+  it("a load that fails at the network level is sent again while the stream stays open", async () => {
+    let failures = 2;
+    const view = openView(() => {
+      if (failures > 0) {
+        failures -= 1;
+        return Promise.reject(new TypeError("Failed to fetch"));
+      }
+      return Promise.resolve({ events: [envelope(1, T0)] });
+    });
+    await settle();
+    expect(view.replays).toEqual(["/v1/events?since=1h"]);
+    expect(view.feed.snapshot()).toEqual({});
+
+    await vi.advanceTimersByTimeAsync(1_000);
+    expect(view.replays).toHaveLength(2);
+    expect(view.feed.snapshot()).toEqual({});
+    await vi.advanceTimersByTimeAsync(2_000);
+
+    expect(view.replays).toEqual(
+      ["/v1/events?since=1h", "/v1/events?since=1h"].concat(["/v1/events?since=1h"]),
+    );
+    expect(view.connection.state().phase).toBe("connected");
+    expect(view.shown()).toEqual([`1@${T0}`]);
+  });
+
+  it("a gap not loaded before the daemon goes away again is loaded with the next one", async () => {
+    const view = openView([]);
+    await settle();
+    view.daemon.health = "up";
+
+    view.daemon.openStream()?.end();
+    await settle();
+    const missed = envelope(1, Date.now() + 200);
+    view.replayWith(() => Promise.reject(new TypeError("Failed to fetch")));
+    await vi.advanceTimersByTimeAsync(1_000);
+    expect(view.replays.at(-1)).toBe("/v1/events?since=1s");
+
+    view.daemon.openStream()?.end();
+    await vi.advanceTimersByTimeAsync(30_000);
+    expect(view.shown()).toEqual([]);
+
+    view.replayWith(eventLog([missed]));
+    await vi.advanceTimersByTimeAsync(10_000);
+
+    expect(view.connection.state().phase).toBe("connected");
+    expect(view.shown()).toEqual([`1@${missed.timestamp}`]);
+  });
+
+  it("a stream that opens while a load is out is loaded again after it", async () => {
+    let answer: (body: unknown) => void = () => {};
+    const view = openView([]);
+    await settle();
+    expect(view.replays).toHaveLength(2);
+    view.replayWith(
+      () =>
+        new Promise((resolve) => {
+          answer = resolve;
+        }),
+    );
+
+    view.visibility.set(true);
+    await vi.advanceTimersByTimeAsync(2_000);
+    view.visibility.set(false);
+    await settle();
+    expect(view.replays.at(-1)).toBe("/v1/events?since=2s");
+    view.visibility.set(true);
+    await vi.advanceTimersByTimeAsync(3_000);
+    view.visibility.set(false);
+    await settle();
+    expect(view.replays).toHaveLength(3);
+
+    view.replayWith([envelope(1, T0)]);
+    answer({ events: [] });
+    await settle();
+
+    expect(view.replays.slice(3)).toEqual(["/v1/events?since=5s"]);
+    expect(view.shown()).toEqual([`1@${T0}`]);
+  });
+});
diff --git a/ui/src/ds/feed.css b/ui/src/ds/feed.css
new file mode 100644
index 000000000..b7f8455fc
--- /dev/null
+++ b/ui/src/ds/feed.css
@@ -0,0 +1,41 @@
+/* The feed: a box of fixed height that scrolls inside itself. Only the rows in view are in the page;
+ * the space of the rest is the list's padding. The browser's own scroll anchoring is off: the feed
+ * keeps the reader's row in place itself. */
+
+.feed {
+  position: relative;
+}
+
+.feed-box {
+  height: min(40rem, 70vh);
+  overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+  border-top: 1px solid var(--border);
+}
+
+.feed-box:focus-visible {
+  outline-offset: -2px;
+}
+
+/* One row is as tall as the feed says, whatever it holds, so the rows can be placed by arithmetic. */
+.feed-list .list-item {
+  height: var(--feed-row);
+}
+
+.feed-list .list-row {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* "N new events": over the top of the box, while the reader is further down. */
+.feed-new {
+  position: absolute;
+  top: var(--space-3);
+  left: 50%;
+  z-index: 1;
+  min-height: 32px;
+  background: var(--bg);
+  transform: translateX(-50%);
+}
diff --git a/ui/src/ds/feed.tsx b/ui/src/ds/feed.tsx
new file mode 100644
index 000000000..829ccadf1
--- /dev/null
+++ b/ui/src/ds/feed.tsx
@@ -0,0 +1,94 @@
+import "./feed.css";
+
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { type CSSProperties, Fragment, type ReactNode, useEffect, useRef, useState } from "react";
+
+// why: the box's height and a row's before either is measured: what a first draw lays out. A row's
+// height is fixed (the caller's rows do not wrap), so no row is measured as it is drawn.
+const BOX_HEIGHT_PX = 640;
+
+// why: rows drawn past each edge of the box, so a short scroll shows rows already there.
+const OVERSCAN = 5;
+
+// why: only the rows in view, and a few past each edge, are in the page; the space of the rest is
+// padding, so the scroll bar is as long as every row. New rows come in at the top: while the box
+// is at the top they push the rows down, so the newest is always in view; once the reader scrolls
+// down the row they are reading stays where it is (`anchorTo: "end"`), and a button counts the
+// rows that came in since and scrolls back to the top.
+export function Feed(props: {
+  readonly label: string;
+  readonly listLabel: string;
+  readonly count: number;
+  readonly rowHeight: number;
+  readonly keyAt: (index: number) => string;
+  readonly newText: (count: number) => string;
+  readonly startAt?: number;
+  readonly renderRow: (index: number) => ReactNode;
+}) {
+  const { count, keyAt, label, listLabel, newText, renderRow, rowHeight, startAt = 0 } = props;
+  const box = useRef<HTMLDivElement>(null);
+  const [atTop, setAtTop] = useState(true);
+  const newest = count === 0 ? undefined : keyAt(0);
+  // why: the newest row the reader saw at the top of the box: every row above it is new to them.
+  const [seen, setSeen] = useState(newest);
+  useEffect(() => {
+    if (atTop) setSeen(newest);
+  }, [atTop, newest]);
+  const virtualizer = useVirtualizer({
+    anchorTo: atTop ? "start" : "end",
+    count,
+    estimateSize: () => rowHeight,
+    getItemKey: keyAt,
+    getScrollElement: () => box.current,
+    initialRect: { height: BOX_HEIGHT_PX, width: 0 },
+    overscan: OVERSCAN,
+  });
+  // why: once, when the box opens: a row chosen by a link is brought into view, and later choices
+  // are the reader's own scrolling to keep.
+  const opened = useRef(false);
+  useEffect(() => {
+    if (opened.current) return;
+    opened.current = true;
+    if (startAt > 0) virtualizer.scrollToIndex(startAt, { align: "center" });
+  }, [startAt, virtualizer]);
+  let unseen = 0;
+  if (!atTop) {
+    while (unseen < count && keyAt(unseen) !== seen) unseen += 1;
+    // why: a row the reader saw that is no longer held (past the cap) leaves nothing to count from.
+    if (unseen === count) unseen = 0;
+  }
+  const toTop = () => {
+    virtualizer.scrollToOffset(0);
+    box.current?.focus();
+  };
+  const items = virtualizer.getVirtualItems();
+  const before = items[0]?.start ?? 0;
+  const after = Math.max(0, virtualizer.getTotalSize() - (items.at(-1)?.end ?? 0));
+  return (
+    <div className="feed" style={{ "--feed-row": `${rowHeight}px` } as CSSProperties}>
+      {unseen === 0 ? null : (
+        <button className="button button-secondary feed-new" type="button" onClick={toTop}>
+          {newText(unseen)}
+        </button>
+      )}
+      <div
+        ref={box}
+        className="feed-box"
+        role="region"
+        aria-label={label}
+        tabIndex={0}
+        onScroll={(event) => setAtTop(event.currentTarget.scrollTop < 1)}
+      >
+        <ul
+          className="list feed-list"
+          aria-label={listLabel}
+          style={{ paddingBottom: after, paddingTop: before }}
+        >
+          {items.map((item) => (
+            <Fragment key={item.key.toString()}>{renderRow(item.index)}</Fragment>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/ds/index.ts b/ui/src/ds/index.ts
index e023e1ed1..41d362929 100644
--- a/ui/src/ds/index.ts
+++ b/ui/src/ds/index.ts
@@ -3,6 +3,7 @@ import "./foundation.css";
 export { Button, ButtonLink, type ButtonVariant } from "./button";
 export { MinuteChart, type MinuteCount, MinuteTable } from "./chart";
 export { type Choice, ChoiceChips, type Tab, Tabs } from "./choice";
+export { Feed } from "./feed";
 export { type Fact, Facts } from "./facts";
 export { Icon, type IconName } from "./icon";
 export { Link, type LinkProps, NavigationProvider } from "./link";
diff --git a/ui/src/model/event-list.test.ts b/ui/src/model/event-list.test.ts
new file mode 100644
index 000000000..720361547
--- /dev/null
+++ b/ui/src/model/event-list.test.ts
@@ -0,0 +1,294 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  chosenEvent,
+  dayWord,
+  eventAction,
+  eventDetail,
+  type EventPlaces,
+  eventRows,
+  eventsChart,
+  readSubject,
+  shownEvents,
+  writeSubject,
+} from "./event-list";
+import type { ConsoleEvent } from "./events";
+import type { LeaseRecord } from "./leases";
+import type { WaitingRequest } from "./waiting";
+import type { WorkerView } from "./workers";
+
+const T0 = Date.parse("2026-10-02T11:30:00Z");
+
+function event(name: string, payload: unknown = {}, seq = 1, timestamp = T0): ConsoleEvent {
+  return { event: name, id: `evt_${seq}`, payload, seq, timestamp };
+}
+
+function worker(id: string, label?: string, extra: object = {}): WorkerView {
+  return {
+    catalog: [],
+    connection: "connected",
+    devices: [],
+    drained: false,
+    id,
+    lastSeenAt: T0,
+    leases: [],
+    ...(label === undefined ? {} : { label }),
+    ...extra,
+  } as unknown as WorkerView;
+}
+
+const NO_PLACES: EventPlaces = { leases: [], requests: [], workers: [] };
+
+function places(extra: Partial<EventPlaces>): EventPlaces {
+  return { ...NO_PLACES, ...extra };
+}
+
+const lease = (id: string) => ({ id }) as unknown as LeaseRecord;
+const request = (id: string) => ({ id }) as unknown as WaitingRequest;
+
+describe("the events filter in the URL", () => {
+  it("reads a known subject and takes anything else as the whole feed", () => {
+    expect(readSubject("?subject=lease")).toBe("lease");
+    expect(readSubject("?subject=other&page=2")).toBe("other");
+    expect(readSubject("?subject=gizmo")).toBe("all");
+    expect(readSubject("")).toBe("all");
+  });
+
+  it("is written beside the other keys, and dropped for all", () => {
+    expect(writeSubject("", "device")).toBe("?subject=device");
+    expect(writeSubject("?page=2", "worker")).toBe("?page=2&subject=worker");
+    expect(writeSubject("?subject=lease&page=2", "all")).toBe("?page=2");
+    expect(writeSubject("?subject=lease", "all")).toBe("");
+  });
+});
+
+describe("the events a filter lets through", () => {
+  const events = [
+    "lease.granted",
+    "device.ready",
+    "worker.connected",
+    "component.installed",
+    "daemon.started",
+    "gizmo.frobnicated",
+  ].map((name, index) => event(name, {}, index));
+  const names = (subject: Parameters<typeof shownEvents>[1]) =>
+    shownEvents(events, subject).map((entry) => entry.event);
+
+  it("show only the events about the subject it names", () => {
+    expect(names("all")).toHaveLength(6);
+    expect(names("lease")).toEqual(["lease.granted"]);
+    expect(names("device")).toEqual(["device.ready"]);
+    expect(names("worker")).toEqual(["worker.connected"]);
+    expect(names("component")).toEqual(["component.installed"]);
+    expect(names("other")).toEqual(["daemon.started", "gizmo.frobnicated"]);
+  });
+});
+
+describe("a list row", () => {
+  it("has the time, the name, the summary and a link that keeps the filter", () => {
+    const granted = event("lease.granted", { requester: "claude-1", workerId: "wrk_1" }, 7);
+
+    const [row] = eventRows([granted], [worker("wrk_1", "mac-1")], "lease");
+
+    expect(row).toEqual({
+      id: "evt_7",
+      iso: "2026-10-02T11:30:00.000Z",
+      name: "lease.granted",
+      summary: "claude-1 · mac-1",
+      time: expect.stringMatching(/^\d\d:\d\d:\d\d$/),
+      to: "/events/evt_7?subject=lease",
+    });
+    expect(eventRows([granted], [], "all")[0]?.to).toBe("/events/evt_7");
+  });
+
+  it("is toned only where the name reports trouble", () => {
+    const rows = eventRows(
+      [event("device.quarantined"), event("lease.expired", {}, 2), event("lease.granted", {}, 3)],
+      [],
+      "all",
+    );
+
+    expect(rows.map((row) => row.tone)).toEqual(["error", "warn", undefined]);
+  });
+
+  it("names no worker for worker.rejected, even one the console lists", () => {
+    const rejected = event("worker.rejected", { reason: "unauthenticated", workerId: "wrk_1" });
+
+    const [row] = eventRows([rejected], [worker("wrk_1", "mac-1")], "all");
+
+    expect(row?.summary).toBe("unauthenticated");
+  });
+});
+
+describe("an event's day", () => {
+  const noon = new Date(2026, 9, 2, 12, 0, 0).getTime();
+
+  it("is today, yesterday, or the date", () => {
+    const at = (day: number, hour: number) => new Date(2026, 9, day, hour, 0, 0).getTime();
+
+    expect(dayWord(at(2, 0), noon)).toBe("today");
+    expect(dayWord(at(1, 23), noon)).toBe("yesterday");
+    expect(dayWord(new Date(2026, 8, 29, 23).getTime(), noon)).not.toMatch(/today|yesterday/);
+  });
+});
+
+describe("an event's detail", () => {
+  const now = Date.now();
+  const granted = event("lease.granted", { requester: "claude-1", leaseId: "lse_1" }, 1, now);
+
+  it("has the time and day, the summary, and the payload whole", () => {
+    const detail = eventDetail(
+      event("gizmo.frobnicated", { count: 3, nested: { deep: true } }, 1, now),
+      NO_PLACES,
+      now,
+    );
+
+    expect(detail.line).toMatch(/^\d\d:\d\d:\d\d today$/);
+    expect(detail.pairs).toEqual([
+      { key: "count", value: "3" },
+      { key: "nested", value: '{"deep":true}' },
+    ]);
+    expect(eventDetail(granted, NO_PLACES, now).line).toMatch(/^\d\d:\d\d:\d\d today · claude-1$/);
+  });
+
+  it("keeps a payload that holds a token-shaped value as the daemon sent it", () => {
+    const secret = event("daemon.started", { config: { token: "tok_secret" } });
+
+    expect(eventDetail(secret, NO_PLACES, T0).pairs).toEqual([
+      { key: "config", value: '{"token":"tok_secret"}' },
+    ]);
+  });
+});
+
+describe("what an event links to", () => {
+  it("is its lease when the console lists it, under the id the worker used or the gateway's", () => {
+    const granted = event("lease.granted", { leaseId: "lse_1", workerId: "wrk_1" });
+
+    expect(eventAction(granted, places({ leases: [lease("lse_1")] }))).toEqual({
+      label: "Open lease",
+      to: "/leases/lse_1/",
+    });
+    expect(eventAction(granted, places({ leases: [lease("wrk_1.lse_1")] }))).toEqual({
+      label: "Open lease",
+      to: "/leases/wrk_1.lse_1/",
+    });
+  });
+
+  it("is no lease once the lease is gone", () => {
+    expect(eventAction(event("lease.released", { leaseId: "lse_1" }), NO_PLACES)).toBeUndefined();
+  });
+
+  it("is a waiting request the console lists", () => {
+    const queued = event("lease.queued", { requestId: "req_1" });
+
+    expect(eventAction(queued, places({ requests: [request("req_1")] }))).toEqual({
+      label: "Open request",
+      to: "/waiting/req_1",
+    });
+    expect(eventAction(queued, NO_PLACES)).toBeUndefined();
+  });
+
+  it("is the attention item of a quarantined device", () => {
+    const quarantined = worker("wrk_1", "mac-1", {
+      devices: [
+        {
+          id: "dev_1",
+          spec: { model: "iPhone 16", osVersion: "18.4" },
+          state: "quarantined",
+        },
+      ],
+    });
+
+    expect(
+      eventAction(
+        event("device.quarantined", { deviceId: "dev_1", workerId: "wrk_1" }),
+        places({ workers: [quarantined] }),
+      ),
+    ).toEqual({ label: "Open attention item", to: "/attention/wrk_1%2Fdev_1%2Fquarantined" });
+  });
+
+  it("is the worker the console lists, and none for one it does not", () => {
+    const connected = event("worker.connected", { workerId: "wrk_1" });
+
+    expect(eventAction(connected, places({ workers: [worker("wrk_1")] }))).toEqual({
+      label: "Open worker",
+      to: "/workers/wrk_1",
+    });
+    expect(eventAction(connected, NO_PLACES)).toBeUndefined();
+  });
+
+  it("is no worker for worker.rejected, whose workerId is only a claim", () => {
+    const rejected = event("worker.rejected", { workerId: "wrk_1" });
+
+    expect(eventAction(rejected, places({ workers: [worker("wrk_1")] }))).toBeUndefined();
+  });
+
+  it("is the lease before the worker when it names both", () => {
+    const granted = event("lease.granted", { leaseId: "lse_1", workerId: "wrk_1" });
+
+    const action = eventAction(
+      granted,
+      places({ leases: [lease("lse_1")], workers: [worker("wrk_1")] }),
+    );
+
+    expect(action?.label).toBe("Open lease");
+  });
+});
+
+describe("the events chart", () => {
+  const now = Date.parse("2026-10-02T11:30:30Z");
+
+  it("counts every event held, in words too, with the busiest minute", () => {
+    const events = [
+      event("a", {}, 1, now - 5_000),
+      event("b", {}, 2, now - 6_000),
+      event("c", {}, 3, now - 120_000),
+    ];
+
+    const chart = eventsChart(events, now);
+
+    expect(chart.minutes).toHaveLength(60);
+    expect(chart.summary).toMatch(
+      /^3 events in the last hour; the busiest minute was \d\d:\d\d, with 2\.$/,
+    );
+  });
+
+  it("says one event in the singular and names no busiest minute for none", () => {
+    expect(eventsChart([event("a", {}, 1, now)], now).summary).toMatch(
+      /^1 event in the last hour;/,
+    );
+    expect(eventsChart([], now).summary).toBe("0 events in the last hour.");
+  });
+});
+
+describe("the event chosen", () => {
+  const events = [event("lease.granted", {}, 2), event("device.ready", {}, 1)];
+  const rows = eventRows(events, [], "all");
+  const choose = (id: string | undefined, shown = rows) =>
+    chosenEvent(events, shown, id, NO_PLACES, T0);
+
+  it("is the one the URL names", () => {
+    const chosen = choose("evt_1");
+
+    expect(chosen.kind === "event" && chosen.detail.name).toBe("device.ready");
+  });
+
+  it("is the first row when the URL names none", () => {
+    const chosen = choose(undefined);
+
+    expect(chosen.kind === "event" && chosen.detail.id).toBe("evt_2");
+  });
+
+  it("opens an event the filter hides", () => {
+    const filtered = eventRows(events, [], "lease");
+
+    const chosen = choose("evt_1", filtered);
+
+    expect(chosen.kind === "event" && chosen.detail.id).toBe("evt_1");
+  });
+
+  it("is missing for an id the feed does not hold, and none for an empty feed", () => {
+    expect(choose("evt_gone")).toEqual({ id: "evt_gone", kind: "missing" });
+    expect(chosenEvent([], [], undefined, NO_PLACES, T0)).toEqual({ kind: "none" });
+  });
+});
diff --git a/ui/src/model/event-list.ts b/ui/src/model/event-list.ts
new file mode 100644
index 000000000..ff004f057
--- /dev/null
+++ b/ui/src/model/event-list.ts
@@ -0,0 +1,219 @@
+import { eventSummary, eventTone } from "./activity";
+import { attentionItems } from "./attention";
+import {
+  type ConsoleEvent,
+  payloadPairs,
+  type Subject,
+  subjectOf,
+  timeOfDay,
+  workerIdOf,
+} from "./events";
+import { eventsPerMinute, extremes, type MinuteCount } from "./history";
+import { type LeaseRecord, leasePath } from "./leases";
+import { formatCount } from "./paging";
+import { itemPath } from "./paths";
+import type { Tone } from "./tones";
+import type { WaitingRequest } from "./waiting";
+import { type WorkerView, workerPath } from "./workers";
+
+export type SubjectFilter = Subject | "all";
+
+export const SUBJECT_CHOICES: readonly { readonly value: SubjectFilter; readonly label: string }[] =
+  [
+    { label: "All", value: "all" },
+    { label: "Leases", value: "lease" },
+    { label: "Devices", value: "device" },
+    { label: "Workers", value: "worker" },
+    { label: "Components", value: "component" },
+    { label: "Other", value: "other" },
+  ];
+
+// why: the filter lives in the URL as `?subject=`, so a reload or a shared link shows the same
+// events; a value this console does not know is the whole feed, not an empty one.
+export function readSubject(search: string): SubjectFilter {
+  const asked = new URLSearchParams(search).get("subject");
+  return SUBJECT_CHOICES.find((choice) => choice.value === asked)?.value ?? "all";
+}
+
+// why: any other key of the query is not the filter's to touch, so only `subject` is set or
+// dropped.
+export function writeSubject(search: string, subject: SubjectFilter): string {
+  const params = new URLSearchParams(search);
+  if (subject === "all") params.delete("subject");
+  else params.set("subject", subject);
+  const text = params.toString();
+  return text === "" ? "" : `?${text}`;
+}
+
+export function shownEvents(
+  events: readonly ConsoleEvent[],
+  subject: SubjectFilter,
+): readonly ConsoleEvent[] {
+  return subject === "all" ? events : events.filter((event) => subjectOf(event.event) === subject);
+}
+
+const DAY = 86_400_000;
+
+function startOfDay(timestamp: number): number {
+  const date = new Date(timestamp);
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+
+// why: the feed holds an hour, so an event can be from before midnight, and "today" would then be
+// false.
+export function dayWord(timestamp: number, now: number): string {
+  const days = Math.round((startOfDay(now) - startOfDay(timestamp)) / DAY);
+  if (days <= 0) return "today";
+  if (days === 1) return "yesterday";
+  return new Date(timestamp).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+export interface EventRow {
+  readonly id: string;
+  readonly to: string;
+  readonly iso: string;
+  readonly time: string;
+  readonly name: string;
+  readonly tone?: Tone;
+  readonly summary: string;
+}
+
+// why: a row keeps the filter in its link, so choosing an event does not undo the filter.
+export function eventRows(
+  events: readonly ConsoleEvent[],
+  workers: readonly WorkerView[],
+  subject: SubjectFilter,
+): readonly EventRow[] {
+  const query = writeSubject("", subject);
+  return shownEvents(events, subject).map((event) => {
+    const tone = eventTone(event.event);
+    return {
+      id: event.id,
+      iso: new Date(event.timestamp).toISOString(),
+      name: event.event,
+      summary: eventSummary(event, workers),
+      time: timeOfDay(event.timestamp),
+      to: `${itemPath("/events", event.id)}${query}`,
+      ...(tone === undefined ? {} : { tone }),
+    };
+  });
+}
+
+export interface EventAction {
+  readonly label: string;
+  readonly to: string;
+}
+
+export interface EventDetail {
+  readonly id: string;
+  readonly name: string;
+  readonly tone?: Tone;
+  readonly iso: string;
+  readonly line: string;
+  readonly action?: EventAction;
+  readonly pairs: readonly { readonly key: string; readonly value: string }[];
+}
+
+export interface EventPlaces {
+  readonly workers: readonly WorkerView[];
+  readonly leases: readonly LeaseRecord[];
+  readonly requests: readonly WaitingRequest[];
+}
+
+function textField(payload: unknown, key: string): string | undefined {
+  if (typeof payload !== "object" || payload === null) return undefined;
+  const value = (payload as Record<string, unknown>)[key];
+  return typeof value === "string" && value !== "" ? value : undefined;
+}
+
+// why: a link goes only where the console has a page now: a released lease, an answered request or
+// an unlisted worker has none. A relayed worker event names the lease as the worker did, and a
+// gateway lists it as `<workerId>.<id>`, so both spellings are tried.
+export function eventAction(event: ConsoleEvent, places: EventPlaces): EventAction | undefined {
+  const { payload } = event;
+  const workerId = workerIdOf(event);
+  const leaseId = textField(payload, "leaseId");
+  const lease =
+    leaseId === undefined
+      ? undefined
+      : places.leases.find(
+          (entry) =>
+            entry.id === leaseId ||
+            (workerId !== undefined && entry.id === `${workerId}.${leaseId}`),
+        );
+  if (lease !== undefined) return { label: "Open lease", to: leasePath(lease.id) };
+  const requestId = textField(payload, "requestId");
+  const request = places.requests.find((entry) => entry.id === requestId);
+  if (request !== undefined) {
+    return { label: "Open request", to: itemPath("/waiting", request.id) };
+  }
+  const deviceId = textField(payload, "deviceId");
+  const item = attentionItems(places.workers).find(
+    (entry) => "device" in entry && entry.worker.id === workerId && entry.device.id === deviceId,
+  );
+  if (item !== undefined) {
+    return { label: "Open attention item", to: itemPath("/attention", item.key) };
+  }
+  const worker = places.workers.find((entry) => entry.id === workerId);
+  if (worker !== undefined) return { label: "Open worker", to: workerPath(worker.id) };
+  return undefined;
+}
+
+// why: the payload is shown whole, as the daemon sent it: keeping secrets out of events is the
+// daemon's job, not the console's.
+export function eventDetail(event: ConsoleEvent, places: EventPlaces, now: number): EventDetail {
+  const tone = eventTone(event.event);
+  const summary = eventSummary(event, places.workers);
+  const when = `${timeOfDay(event.timestamp)} ${dayWord(event.timestamp, now)}`;
+  const action = eventAction(event, places);
+  return {
+    id: event.id,
+    iso: new Date(event.timestamp).toISOString(),
+    line: summary === event.event ? when : `${when} · ${summary}`,
+    name: event.event,
+    pairs: payloadPairs(event.payload),
+    ...(action === undefined ? {} : { action }),
+    ...(tone === undefined ? {} : { tone }),
+  };
+}
+
+export interface EventsChart {
+  readonly minutes: readonly MinuteCount[];
+  readonly summary: string;
+}
+
+// why: the chart counts every event held, whatever the filter shows, so its numbers stay put when
+// a chip is chosen; they are also text, for whoever cannot see the columns.
+export function eventsChart(events: readonly ConsoleEvent[], now: number): EventsChart {
+  const minutes = eventsPerMinute(events, now);
+  const total = minutes.reduce((sum, minute) => sum + minute.count, 0);
+  const busiest = extremes(minutes)?.highest;
+  const count = `${total === 1 ? "1 event" : `${formatCount(total)} events`} in the last hour`;
+  const peak =
+    busiest === undefined || busiest.count === 0
+      ? ""
+      : `; the busiest minute was ${busiest.label}, with ${formatCount(busiest.count)}`;
+  return { minutes, summary: `${count}${peak}.` };
+}
+
+export type Chosen =
+  | { readonly kind: "none" }
+  | { readonly kind: "missing"; readonly id: string }
+  | { readonly kind: "event"; readonly detail: EventDetail };
+
+// why: with no id in the URL the first row shows, so a wide screen is never half empty; an id the
+// feed does not hold (older than the hour, or not loaded yet) is said so, not guessed at. An id is
+// looked up among every event held, so an event the filter hides still opens.
+export function chosenEvent(
+  events: readonly ConsoleEvent[],
+  rows: readonly EventRow[],
+  id: string | undefined,
+  places: EventPlaces,
+  now: number,
+): Chosen {
+  const wanted = id ?? rows[0]?.id;
+  if (wanted === undefined) return { kind: "none" };
+  const event = events.find((entry) => entry.id === wanted);
+  if (event === undefined) return { id: wanted, kind: "missing" };
+  return { detail: eventDetail(event, places, now), kind: "event" };
+}
diff --git a/ui/src/model/events.test.ts b/ui/src/model/events.test.ts
new file mode 100644
index 000000000..66c125730
--- /dev/null
+++ b/ui/src/model/events.test.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  type ConsoleEvent,
+  mergeEvents,
+  payloadPairs,
+  readEvent,
+  readReplay,
+  sinceFor,
+  subjectOf,
+  timeOfDay,
+  workerIdOf,
+} from "./events";
+
+const T0 = Date.parse("2026-10-02T11:30:00Z");
+
+function event(name: string, payload: unknown = {}, seq = 1, id = `evt_${seq}`): ConsoleEvent {
+  return { event: name, id, payload, seq, timestamp: T0 };
+}
+
+describe("an envelope off the wire", () => {
+  it("is not an event without a numeric seq, a timestamp that is a date, or a string name and id", () => {
+    const valid = { event: "lease.granted", id: "evt_1", seq: 1, timestamp: T0 };
+    const broken = [
+      { event: "lease.granted", id: "evt_a", timestamp: T0 },
+      { event: "lease.granted", id: "evt_b", seq: 1 },
+      { id: "evt_c", seq: 2, timestamp: T0 },
+      { event: "lease.granted", id: "evt_d", seq: 3, timestamp: 1e300 },
+      { event: "lease.granted", id: "evt_e", seq: 5, timestamp: "2026-10-02T11:30:00Z" },
+      { event: "lease.granted", id: "evt_f", seq: "6", timestamp: T0 },
+      { event: 7, id: "evt_g", seq: 7, timestamp: T0 },
+      { event: "lease.granted", seq: 8, timestamp: T0 },
+      { event: "lease.granted", id: 9, seq: 9, timestamp: T0 },
+      null,
+      "text",
+    ];
+
+    expect(readReplay({ events: [...broken, valid] }).map((entry) => entry.id)).toEqual(["evt_1"]);
+    expect(broken.map(readEvent)).toEqual(broken.map(() => undefined));
+  });
+
+  it("is refused as unreadable when the answer has no events list", () => {
+    expect(() => readReplay({ items: [] })).toThrow(SyntaxError);
+    expect(() => readReplay(null)).toThrow(SyntaxError);
+  });
+});
+
+describe("the events the console holds", () => {
+  it("are listed newest first, by seq inside the same millisecond", () => {
+    const merged = mergeEvents([], [event("a", {}, 2), event("b", {}, 9), event("c", {}, 5)]);
+
+    expect(merged.map((entry) => entry.seq)).toEqual([9, 5, 2]);
+  });
+
+  it("show an event seen twice once, and two ids with the same seq and time both", () => {
+    const first = event("lease.granted", {}, 1, "evt_a");
+    const merged = mergeEvents([first], [first, event("lease.granted", {}, 1, "evt_b")]);
+
+    expect(merged.map((entry) => entry.id).sort()).toEqual(["evt_a", "evt_b"]);
+  });
+
+  it("change nothing for an event already held", () => {
+    const held = [event("lease.granted")];
+
+    expect(mergeEvents(held, [event("lease.granted")])).toBe(held);
+  });
+});
+
+describe("the gap to load after the stream was closed", () => {
+  it("is rounded up to whole seconds, so its first event is inside the window", () => {
+    expect(sinceFor(1_300)).toBe("2s");
+    expect(sinceFor(2_000)).toBe("2s");
+  });
+});
+
+describe("an event's subject", () => {
+  it("is the word before the first dot, or other for a word the console does not know", () => {
+    expect(
+      ["lease.granted", "device.ready", "worker.connected", "component.installed"].map(subjectOf),
+    ).toEqual(["lease", "device", "worker", "component"]);
+    expect(["daemon.started", "gizmo.frobnicated", "plain"].map(subjectOf)).toEqual([
+      "other",
+      "other",
+      "other",
+    ]);
+  });
+});
+
+describe("an event's worker", () => {
+  it("is the workerId its payload names", () => {
+    expect(workerIdOf(event("lease.granted", { workerId: "wrk_1" }))).toBe("wrk_1");
+    expect(workerIdOf(event("lease.granted", {}))).toBeUndefined();
+    expect(workerIdOf(event("lease.granted", "text"))).toBeUndefined();
+  });
+
+  it("is none for worker.rejected, whose workerId is what a refused dial claimed", () => {
+    expect(workerIdOf(event("worker.rejected", { workerId: "wrk_1" }))).toBeUndefined();
+  });
+});
+
+describe("an event's payload", () => {
+  it("is every key as the daemon spelled it, text as itself and anything else as JSON", () => {
+    expect(
+      payloadPairs({ count: 3, nested: { deep: true }, reason: "because", workerId: "wrk_1" }),
+    ).toEqual([
+      { key: "count", value: "3" },
+      { key: "nested", value: '{"deep":true}' },
+      { key: "reason", value: "because" },
+      { key: "workerId", value: "wrk_1" },
+    ]);
+  });
+
+  it("shows as one pair, payload, when it is not an object, and as none when absent", () => {
+    expect(payloadPairs(["a", 1])).toEqual([{ key: "payload", value: '["a",1]' }]);
+    expect(payloadPairs("text")).toEqual([{ key: "payload", value: "text" }]);
+    expect(payloadPairs(null)).toEqual([{ key: "payload", value: "null" }]);
+    expect(payloadPairs(undefined)).toEqual([]);
+    expect(payloadPairs({})).toEqual([]);
+  });
+});
+
+describe("an event's time", () => {
+  it("is its time of day on the browser's clock face", () => {
+    const zone = process.env.TZ;
+    process.env.TZ = "Asia/Kolkata";
+    try {
+      expect(timeOfDay(T0)).toBe("17:00:00");
+    } finally {
+      if (zone === undefined) delete process.env.TZ;
+      else process.env.TZ = zone;
+    }
+  });
+});
diff --git a/ui/src/model/events.ts b/ui/src/model/events.ts
index ad4d9fd02..2574c1130 100644
--- a/ui/src/model/events.ts
+++ b/ui/src/model/events.ts
@@ -1,5 +1,3 @@
-import type { Stat } from "./stat";
-
 export interface ConsoleEvent {
   // why: names the event for good: survives a daemon restart.
   readonly id: string;
@@ -108,26 +106,6 @@ function valueText(value: unknown): string {
   return JSON.stringify(value) ?? String(value);
 }
 
-export function eventsStats(
-  shown: readonly ConsoleEvent[],
-  held: number,
-  unfiltered: boolean,
-): readonly Stat[] {
-  const newest = shown[0];
-  return [
-    {
-      caption: unfiltered ? "in the list" : `of ${held} in the list`,
-      label: "Events shown",
-      value: String(shown.length),
-    },
-    {
-      caption: newest === undefined ? "no event to show" : newest.event,
-      label: "Newest",
-      value: newest === undefined ? "—" : timeOfDay(newest.timestamp),
-    },
-  ];
-}
-
 export function timeOfDay(timestamp: number): string {
   const date = new Date(timestamp);
   return [date.getHours(), date.getMinutes(), date.getSeconds()]
diff --git a/ui/src/screens/events/events.css b/ui/src/screens/events/events.css
new file mode 100644
index 000000000..d8a58b1dc
--- /dev/null
+++ b/ui/src/screens/events/events.css
@@ -0,0 +1,31 @@
+/* The events page: a small column chart over the filter, then the feed. */
+
+.events-chart {
+  min-width: 0;
+}
+
+/* why: the shared chart draws 240px tall, which is the whole list head here; the container takes its
+ * height from an inline style, so only a stronger rule can make it a strip. */
+.events-chart .recharts-responsive-container {
+  height: 96px !important;
+}
+
+.events-chart .chart-summary {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+.event-time {
+  margin-right: var(--space-2);
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  font-weight: 400;
+}
+
+.event-warn {
+  color: var(--status-warn);
+}
+
+.event-error {
+  color: var(--status-error);
+}
diff --git a/ui/src/screens/events/events.test.tsx b/ui/src/screens/events/events.test.tsx
new file mode 100644
index 000000000..3e13ae552
--- /dev/null
+++ b/ui/src/screens/events/events.test.tsx
@@ -0,0 +1,200 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import type { LoadView } from "../../ds";
+import type { EventDetail, EventRow, EventsPage } from "../../state/events";
+import { EventsContent } from ".";
+
+function text(html: string): string {
+  return html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/&quot;/g, '"')
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function row(index: number, over: Partial<EventRow> = {}): EventRow {
+  return {
+    id: `evt_${index}`,
+    iso: "2026-10-02T11:30:00.000Z",
+    name: "lease.granted",
+    summary: "claude-1 · mac-1",
+    time: "11:30:00",
+    to: `/events/evt_${index}`,
+    ...over,
+  };
+}
+
+const DETAIL: EventDetail = {
+  id: "evt_1",
+  iso: "2026-10-02T11:30:00.000Z",
+  line: "11:30:00 today · claude-1 · mac-1",
+  name: "lease.granted",
+  pairs: [
+    { key: "leaseId", value: "lse_1" },
+    { key: "nested", value: '{"deep":true}' },
+  ],
+};
+
+function page(over: Partial<EventsPage> = {}): EventsPage {
+  return {
+    chart: {
+      minutes: [
+        { at: 1, count: 0, label: "11:29" },
+        { at: 2, count: 3, label: "11:30" },
+      ],
+      summary: "3 events in the last hour; the busiest minute was 11:30, with 3.",
+    },
+    chosen: { detail: DETAIL, kind: "event" },
+    chosenIndex: 0,
+    held: 1,
+    named: false,
+    rows: [row(1)],
+    subject: "all",
+    ...over,
+  };
+}
+
+function render(view: LoadView<EventsPage>): string {
+  return renderToStaticMarkup(<EventsContent view={view} onSubject={() => {}} />);
+}
+
+function ready(over: Partial<EventsPage> = {}): string {
+  return render({ data: page(over), kind: "ready" });
+}
+
+describe("the events page", () => {
+  it("lists each event as its time, its name and its summary, linking to its page", () => {
+    const html = ready({ rows: [row(2), row(1, { name: "lease.expired", summary: "claude-2" })] });
+
+    expect(html).toContain('<time class="event-time mono" dateTime="2026-10-02T11:30:00.000Z">');
+    expect(text(html)).toContain(
+      "11:30:00 lease.granted claude-1 · mac-1 11:30:00 lease.expired claude-2",
+    );
+    expect(html).toContain('href="/events/evt_2"');
+    expect(html).toContain('href="/events/evt_1"');
+  });
+
+  it("marks the chosen event's row as the current one, and no other", () => {
+    const html = ready({ rows: [row(2), row(1)] });
+
+    expect(html.match(/aria-current="page"/g)).toHaveLength(1);
+    expect(html).toMatch(
+      /href="\/events\/evt_1"[^>]*aria-current="page"|aria-current="page"[^>]*href="\/events\/evt_1"/,
+    );
+  });
+
+  it("colours an event's name only where the row says it reports trouble", () => {
+    const html = ready({
+      rows: [row(3, { tone: "error" }), row(2, { tone: "warn" }), row(1)],
+    });
+
+    expect(html).toContain('<span class="mono event-error">lease.granted</span>');
+    expect(html).toContain('<span class="mono event-warn">lease.granted</span>');
+    expect(html).toContain('<span class="mono">lease.granted</span>');
+  });
+
+  it("draws only the rows in view of ten thousand, in a box a keyboard can scroll", () => {
+    const rows = Array.from({ length: 10_000 }, (_, index) => row(index));
+
+    const html = ready({ rows });
+
+    expect(html).toContain('role="region" aria-label="Event feed" tabindex="0"');
+    const drawn = html.match(/class="list-item"/g)?.length ?? 0;
+    expect(drawn).toBeGreaterThan(0);
+    expect(drawn).toBeLessThan(40);
+  });
+
+  it("shows the per-minute chart's numbers as text too", () => {
+    const html = ready();
+
+    expect(text(html)).toContain(
+      "3 events in the last hour; the busiest minute was 11:30, with 3.",
+    );
+    expect(html).toContain("<summary>Minute by minute</summary>");
+  });
+
+  it("offers the subjects as a radio group with the chosen one checked", () => {
+    const html = ready({ subject: "device" });
+
+    const labels = [...html.matchAll(/<input type="radio"[^>]*\/><span>([^<]*)<\/span>/g)].map(
+      (match) => match[1],
+    );
+    expect(labels).toEqual(["All", "Leases", "Devices", "Workers", "Components", "Other"]);
+    expect(html.match(/checked=""/g)).toHaveLength(1);
+    expect(html).toMatch(/value="device" checked=""|checked="" value="device"/);
+  });
+
+  it("says why an empty list is empty", () => {
+    expect(text(ready({ chosen: { kind: "none" }, held: 0, rows: [] }))).toContain(
+      "No events in the last hour.",
+    );
+    expect(
+      text(ready({ chosen: { kind: "none" }, held: 5, rows: [], subject: "device" })),
+    ).toContain("No events of this kind.");
+  });
+
+  it("says it is loading, or why it could not load", () => {
+    expect(text(render({ kind: "loading" }))).toContain("Loading…");
+    expect(text(render({ kind: "refused", message: "Internal error" }))).toContain(
+      "Internal error",
+    );
+  });
+
+  it("shows a refusal above the events it keeps", () => {
+    const html = render({ data: page(), kind: "ready", refusal: "Internal error" });
+
+    expect(html).toMatch(/^<p class="refusal" role="alert">Internal error<\/p>/);
+    expect(text(html)).toContain("lease.granted");
+  });
+
+  it("opens on the phone at the inspector only when the URL names an event", () => {
+    expect(ready({ named: true })).toContain("focus-detail");
+    expect(ready({ named: false })).toContain("focus-list");
+  });
+});
+
+describe("the events page's inspector", () => {
+  it("is titled with the event's name and says when and what", () => {
+    const html = ready();
+
+    expect(html).toMatch(
+      /<h2 [^>]*class="inspector-title mono"[^>]*><span>lease\.granted<\/span><\/h2>/,
+    );
+    expect(text(html)).toContain("11:30:00 today · claude-1 · mac-1");
+  });
+
+  it("shows the payload whole, keys as the daemon spelled them", () => {
+    const html = ready();
+
+    expect(html).toContain('<dl class="facts facts-raw">');
+    expect(text(html)).toContain('leaseId lse_1 nested {"deep":true}');
+  });
+
+  it("says when there is no payload", () => {
+    expect(text(ready({ chosen: { detail: { ...DETAIL, pairs: [] }, kind: "event" } }))).toContain(
+      "No payload.",
+    );
+  });
+
+  it("links to what the event is about when the console has a page for it", () => {
+    const withAction = ready({
+      chosen: {
+        detail: { ...DETAIL, action: { label: "Open lease", to: "/leases/lse_1/" } },
+        kind: "event",
+      },
+    });
+
+    expect(withAction).toContain(
+      '<a class="button button-secondary" href="/leases/lse_1/">Open lease</a>',
+    );
+    expect(ready()).not.toContain("Open lease");
+  });
+
+  it("says an event older than the hour is not there, and links back to the list", () => {
+    const html = ready({ chosen: { id: "evt_old", kind: "missing" }, named: true });
+
+    expect(text(html)).toContain("Event not in the last hour.");
+    expect(html).toContain('<a href="/events">Back to events</a>');
+  });
+});
diff --git a/ui/src/screens/events/index.tsx b/ui/src/screens/events/index.tsx
index 74bb8be59..628724c60 100644
--- a/ui/src/screens/events/index.tsx
+++ b/ui/src/screens/events/index.tsx
@@ -1,9 +1,186 @@
-import { Empty, Page } from "../../ds";
+import "./events.css";
+
+import {
+  ButtonLink,
+  ChoiceChips,
+  Empty,
+  Facts,
+  Feed,
+  Inspector,
+  InspectorEmpty,
+  Link,
+  ListPane,
+  ListRow,
+  Loaded,
+  type LoadView,
+  MasterDetail,
+  MinuteChart,
+  MinuteTable,
+  Panel,
+} from "../../ds";
+import {
+  type EventDetail,
+  type EventRow,
+  type EventsChart,
+  type EventsPage,
+  SUBJECT_CHOICES,
+  setSubject,
+  type SubjectFilter,
+  useEvents,
+} from "../../state/events";
+
+// why: a row is two lines of fixed height, so the feed can place the rows it draws by arithmetic.
+const ROW_PX = 60;
 
 export function EventsScreen() {
+  return <EventsContent view={useEvents()} onSubject={setSubject} />;
+}
+
+export function EventsContent(props: {
+  readonly view: LoadView<EventsPage>;
+  readonly onSubject: (subject: SubjectFilter) => void;
+}) {
+  const { onSubject, view } = props;
+  if (view.kind !== "ready") {
+    return (
+      <MasterDetail
+        wide
+        focus="list"
+        list={
+          <ListPane title="Events">
+            <Loaded view={view}>{() => null}</Loaded>
+          </ListPane>
+        }
+        detail={<InspectorEmpty>Nothing to show yet.</InspectorEmpty>}
+      />
+    );
+  }
+  return (
+    <Loaded view={view}>
+      {(page) => (
+        <MasterDetail
+          wide
+          focus={page.named ? "detail" : "list"}
+          list={<EventList page={page} onSubject={onSubject} />}
+          detail={<Chosen page={page} />}
+        />
+      )}
+    </Loaded>
+  );
+}
+
+function EventList(props: {
+  readonly page: EventsPage;
+  readonly onSubject: (subject: SubjectFilter) => void;
+}) {
+  const { onSubject, page } = props;
+  const { rows } = page;
+  const chosenId = page.chosen.kind === "event" ? page.chosen.detail.id : undefined;
+  return (
+    <ListPane
+      title="Events"
+      meta="live"
+      toolbar={
+        <>
+          <PerMinute chart={page.chart} />
+          <ChoiceChips
+            legend="Show"
+            choices={SUBJECT_CHOICES}
+            value={page.subject}
+            onChange={onSubject}
+          />
+        </>
+      }
+    >
+      {rows.length === 0 ? (
+        <Empty>{page.held === 0 ? "No events in the last hour." : "No events of this kind."}</Empty>
+      ) : (
+        <Feed
+          key={page.subject}
+          label="Event feed"
+          listLabel="Events"
+          count={rows.length}
+          rowHeight={ROW_PX}
+          keyAt={(index) => rows[index]?.id ?? String(index)}
+          newText={(count) => (count === 1 ? "1 new event" : `${count} new events`)}
+          startAt={page.chosenIndex}
+          renderRow={(index) => {
+            const row = rows[index];
+            return row === undefined ? null : <Row row={row} selected={row.id === chosenId} />;
+          }}
+        />
+      )}
+    </ListPane>
+  );
+}
+
+function PerMinute({ chart }: { readonly chart: EventsChart }) {
+  return (
+    <div className="events-chart">
+      <MinuteChart kind="columns" title="Events per minute" unit="events" minutes={chart.minutes} />
+      <p className="chart-summary">{chart.summary}</p>
+      <MinuteTable minutes={chart.minutes} heading="Events" />
+    </div>
+  );
+}
+
+function Row({ row, selected }: { readonly row: EventRow; readonly selected: boolean }) {
+  return (
+    <ListRow
+      to={row.to}
+      selected={selected}
+      title={
+        <>
+          <time className="event-time mono" dateTime={row.iso}>
+            {row.time}
+          </time>
+          <span className={toneClass(row.tone, "mono")}>{row.name}</span>
+        </>
+      }
+      sub={row.summary}
+    />
+  );
+}
+
+function toneClass(tone: EventRow["tone"], base: string): string | undefined {
+  return (
+    [base, tone === undefined ? undefined : `event-${tone}`].filter(Boolean).join(" ") || undefined
+  );
+}
+
+function Chosen({ page }: { readonly page: EventsPage }) {
+  const { chosen } = page;
+  if (chosen.kind === "none") return <InspectorEmpty>No events yet.</InspectorEmpty>;
+  if (chosen.kind === "missing") {
+    return (
+      <InspectorEmpty>
+        Event not in the last hour. <Link to="/events">Back to events</Link>
+      </InspectorEmpty>
+    );
+  }
+  return <Detail key={chosen.detail.id} detail={chosen.detail} />;
+}
+
+function Detail({ detail }: { readonly detail: EventDetail }) {
   return (
-    <Page title="Events">
-      <Empty>Coming soon.</Empty>
-    </Page>
+    <Inspector
+      crumbs={[{ label: "Events", to: "/events" }, { label: detail.name }]}
+      title={<span className={toneClass(detail.tone, "")}>{detail.name}</span>}
+      mono
+      line={<time dateTime={detail.iso}>{detail.line}</time>}
+      actions={
+        detail.action === undefined ? undefined : (
+          <ButtonLink to={detail.action.to}>{detail.action.label}</ButtonLink>
+        )
+      }
+    >
+      <Panel title="Payload">
+        {detail.pairs.length === 0 ? (
+          <Empty>No payload.</Empty>
+        ) : (
+          <Facts raw facts={detail.pairs.map((pair) => ({ label: pair.key, value: pair.value }))} />
+        )}
+      </Panel>
+    </Inspector>
   );
 }
diff --git a/ui/src/state/events.ts b/ui/src/state/events.ts
index 83a5469f7..de3463a76 100644
--- a/ui/src/state/events.ts
+++ b/ui/src/state/events.ts
@@ -1,12 +1,35 @@
-import { useEffect, useState, useSyncExternalStore } from "react";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 
 import { EventFeed } from "../data/event-feed";
 import { browserClock } from "../data/live/browser";
 import type { ResourceState } from "../data/live/connection";
+import type { LoadView } from "../ds/loaded";
+import {
+  type Chosen,
+  chosenEvent,
+  type EventDetail,
+  type EventRow,
+  eventRows,
+  type EventsChart,
+  eventsChart,
+  readSubject,
+  SUBJECT_CHOICES,
+  type SubjectFilter,
+  writeSubject,
+} from "../model/event-list";
 import type { ConsoleEvent } from "../model/events";
-import { useLiveEvents, useStreamOpened } from "./live";
+import type { LeaseList, LeaseRecord } from "../model/leases";
+import { itemIdFrom } from "../model/paths";
+import type { WaitingList, WaitingRequest } from "../model/waiting";
+import type { WorkerList, WorkerView } from "../model/workers";
+import { useLiveEvents, useLiveResource, useNow, useStreamOpened } from "./live";
+import { loadView, mapView } from "./resource";
+import { setSearch, usePath, useSearch } from "./router";
 import { useApi } from "./services";
 
+export type { Chosen, EventDetail, EventRow, EventsChart, SubjectFilter };
+export { SUBJECT_CHOICES };
+
 // why: each screen that reads events holds its own feed, filled from the last hour and then the
 // stream while it is on screen, so a screen opened later still starts from a full hour.
 export function useRecentEvents(): ResourceState<readonly ConsoleEvent[]> {
@@ -17,3 +40,61 @@ export function useRecentEvents(): ResourceState<readonly ConsoleEvent[]> {
   useEffect(() => feed.start(), [feed]);
   return useSyncExternalStore(feed.subscribe, feed.snapshot);
 }
+
+const NO_WORKERS: readonly WorkerView[] = [];
+const NO_LEASES: readonly LeaseRecord[] = [];
+const NO_REQUESTS: readonly WaitingRequest[] = [];
+const MINUTE = 60_000;
+
+export interface EventsPage {
+  readonly subject: SubjectFilter;
+  // why: an empty list says whether nothing happened or the filter hides it.
+  readonly held: number;
+  readonly rows: readonly EventRow[];
+  readonly chart: EventsChart;
+  readonly chosen: Chosen;
+  // why: only a URL that names an event shows the inspector first on a phone.
+  readonly named: boolean;
+  // why: the row the chosen event sits at, so the box opens with it in view.
+  readonly chosenIndex: number;
+}
+
+export function useEvents(): LoadView<EventsPage> {
+  const feed = useRecentEvents();
+  const events = feed.data;
+  // why: the places an event links to are read for the links only; a route that is slow, refused
+  // or not served here costs the feed nothing, only the link.
+  const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers ?? NO_WORKERS;
+  const leases = useLiveResource<LeaseList>("/v1/leases").data?.leases ?? NO_LEASES;
+  const requests = useLiveResource<WaitingList>("/v1/lease-requests").data?.requests ?? NO_REQUESTS;
+  const now = useNow().server;
+  const subject = readSubject(useSearch());
+  const id = itemIdFrom("/events", usePath());
+  const rows = useMemo(
+    () => (events === undefined ? [] : eventRows(events, workers, subject)),
+    [events, workers, subject],
+  );
+  // why: the chart moves once a minute, not with the clock's every tick.
+  const minute = Math.floor(now / MINUTE) * MINUTE;
+  const chart = useMemo(() => eventsChart(events ?? [], minute), [events, minute]);
+  return mapView(loadView(feed), (held) => {
+    const chosen = chosenEvent(held, rows, id, { leases, requests, workers }, now);
+    const chosenId = chosen.kind === "event" ? chosen.detail.id : undefined;
+    return {
+      chart,
+      chosen,
+      held: held.length,
+      chosenIndex: Math.max(
+        0,
+        rows.findIndex((row) => row.id === chosenId),
+      ),
+      named: id !== undefined,
+      rows,
+      subject,
+    };
+  });
+}
+
+export function setSubject(subject: SubjectFilter): void {
+  setSearch(writeSubject(window.location.search, subject), { replace: true });
+}

From 5ab8df92cca3d6be54653efac2921c24d9979bb5 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:27:46 +0200
Subject: [PATCH 09/32] fix(ui): a list keeps the page its address asks for
 while it loads, and a sliding inspector never widens the page

---
 ui/src/ds/master-detail.css | 3 ++-
 ui/src/ds/sidebar.css       | 1 +
 ui/src/state/paging.ts      | 9 ++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/src/ds/master-detail.css b/ui/src/ds/master-detail.css
index 8417efde4..22981b06c 100644
--- a/ui/src/ds/master-detail.css
+++ b/ui/src/ds/master-detail.css
@@ -1,6 +1,7 @@
 /* A list on the left, the chosen item on the right. Below 768px only one of them shows. */
 
 .master-detail {
+  overflow-x: clip;
   display: grid;
   grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
   min-height: 100vh;
@@ -72,7 +73,7 @@
 
 .list-row {
   display: grid;
-  grid-template-columns: 10px minmax(0, 1fr) auto;
+  grid-template-columns: minmax(10px, auto) minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-2) var(--space-3);
   padding: var(--space-3) var(--space-4);
diff --git a/ui/src/ds/sidebar.css b/ui/src/ds/sidebar.css
index a2a5e045d..b863ea8bc 100644
--- a/ui/src/ds/sidebar.css
+++ b/ui/src/ds/sidebar.css
@@ -9,6 +9,7 @@
 .app-main {
   flex: 1;
   min-width: 0;
+  overflow-x: clip;
 }
 
 .app-main:focus {
diff --git a/ui/src/state/paging.ts b/ui/src/state/paging.ts
index 6bf00ef74..ea7e7a181 100644
--- a/ui/src/state/paging.ts
+++ b/ui/src/state/paging.ts
@@ -16,12 +16,15 @@ import { setSearch, useSearch } from "./router";
 export function usePaging(options: {
   readonly name?: string;
   readonly sizes: PageSizes;
-  readonly total: number;
+  readonly total: number | undefined;
 }): Paging {
-  const { name, sizes, total } = options;
+  const { name, sizes } = options;
   const keys = pageKeys(name);
   const asked = readPage(useSearch(), keys, sizes);
-  const last = lastPage(total, asked.size);
+  // why: before its data arrives a list has no length; correcting the page against zero rows would
+  // throw away the page a reload or a shared link asked for.
+  const total = options.total ?? 0;
+  const last = options.total === undefined ? asked.page : lastPage(total, asked.size);
   const at = { page: Math.min(asked.page, last), size: asked.size };
   const moved = at.page !== asked.page;
   useEffect(() => {

From 14498877d04b1d3772c25be0f377679a04f9b75d Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:31:09 +0200
Subject: [PATCH 10/32] test(ui): the events page is proved in the browser lane

---
 e2e/console/events.spec.ts | 243 ++++++++++++++++++++++++-------------
 1 file changed, 159 insertions(+), 84 deletions(-)

diff --git a/e2e/console/events.spec.ts b/e2e/console/events.spec.ts
index c5366f902..5d9f0e5e8 100644
--- a/e2e/console/events.spec.ts
+++ b/e2e/console/events.spec.ts
@@ -12,15 +12,12 @@ import {
 
 const IOS = { availableOsVersions: ["18.4"], knownModels: ["iPhone 16"] };
 
-/** One line of `simlock events`, as far as these tests read it. */
 interface Envelope {
-  readonly seq: number;
+  readonly id: string;
   readonly timestamp: number;
   readonly event: string;
-  readonly payload: Record<string, unknown>;
 }
 
-/** Takes a lease with the CLI, detached, and returns its id. */
 async function lease(daemon: RunningDaemon, agent: string): Promise<string> {
   const granted = await daemon.cli([
     "lease",
@@ -40,7 +37,6 @@ async function lease(daemon: RunningDaemon, agent: string): Promise<string> {
   return id as string;
 }
 
-/** What `simlock events --since 1h` prints. */
 async function cliEvents(daemon: RunningDaemon): Promise<readonly Envelope[]> {
   const result = await daemon.cli(["events", "--since", "1h"]);
   expect(result.code, result.stderr).toBe(0);
@@ -50,46 +46,40 @@ async function cliEvents(daemon: RunningDaemon): Promise<readonly Envelope[]> {
     .map((line) => JSON.parse(line) as Envelope);
 }
 
-async function openEvents(page: Page, daemon: RunningDaemon): Promise<void> {
-  await page.goto(new URL("/events", daemon.url).href);
+async function openEvents(page: Page, daemon: RunningDaemon, path = "/events"): Promise<void> {
+  await page.goto(new URL(path, daemon.url).href);
   await signIn(page, daemon.tokens.operator);
   await expect(page.getByRole("heading", { level: 1, name: "Events" })).toBeVisible();
 }
 
-/** Every event the view shows. */
+function feed(page: Page): Locator {
+  return page.getByRole("region", { name: "Event feed" });
+}
+
 function rows(page: Page): Locator {
-  return page.locator("#main li.event");
+  return feed(page).getByRole("listitem");
 }
 
-/** The events the view shows with this name and this payload value somewhere in it. */
-function row(page: Page, name: string, value: string): Locator {
-  return rows(page)
-    .filter({ has: page.locator(".event-name", { hasText: new RegExp(`^${name}$`) }) })
-    .filter({ has: page.locator("dd", { hasText: new RegExp(`^${value}$`) }) });
+function title(page: Page): Locator {
+  return page.getByRole("heading", { level: 2 }).first();
 }
 
-/**
- * Each event the view shows, as its time, name and payload, in the order shown. The feed draws
- * only the rows in its box, so this scrolls it from the top to the bottom, reading each row as
- * it is drawn, and back to the top.
- */
 async function shownEvents(page: Page): Promise<string[]> {
-  return page.getByRole("region", { name: "Event feed" }).evaluate(async (box) => {
+  return feed(page).evaluate(async (box) => {
     const frame = () => new Promise((resolve) => requestAnimationFrame(resolve));
     const seen = new Map<number, string>();
     box.scrollTop = 0;
     for (let step = 0; step < 1_000; step += 1) {
       await frame();
-      for (const item of box.querySelectorAll("li.event")) {
+      for (const item of box.querySelectorAll("li")) {
+        const link = item.querySelector("a");
+        const name = item.querySelector("time + span");
         seen.set(
-          Number(item.getAttribute("aria-posinset")),
+          Math.round(item.getBoundingClientRect().top + box.scrollTop),
           [
             item.querySelector("time")?.getAttribute("datetime") ?? "",
-            item.querySelector(".event-name")?.textContent ?? "",
-            ...[...item.querySelectorAll(".event-payload > div")].map(
-              (pair) =>
-                `${pair.querySelector("dt")?.textContent ?? ""}=${pair.querySelector("dd")?.textContent ?? ""}`,
-            ),
+            name?.textContent ?? "",
+            link?.getAttribute("href")?.replace("/events/", "") ?? "",
           ].join(" "),
         );
       }
@@ -101,53 +91,57 @@ async function shownEvents(page: Page): Promise<string[]> {
   });
 }
 
-/** An event from the CLI, written as {@link shownEvents} reads the view: strings as themselves. */
 function asShown(event: Envelope): string {
-  return [
-    new Date(event.timestamp).toISOString(),
-    event.event,
-    ...Object.entries(event.payload).map(
-      ([key, value]) => `${key}=${typeof value === "string" ? value : JSON.stringify(value)}`,
-    ),
-  ].join(" ");
+  return `${new Date(event.timestamp).toISOString()} ${event.event} ${encodeURIComponent(event.id)}`;
 }
 
-/**
- * Scrolls the feed's box to its last row, the oldest event. The feed draws only the rows in its
- * box, so the first events of a run (`daemon.started`) are drawn only there once newer events,
- * such as `capacity.changed`, sit above them.
- */
-async function scrollFeedToOldest(page: Page): Promise<void> {
-  await page
-    .getByRole("region", { name: "Event feed" })
-    .evaluate((box) => box.scrollTo({ top: box.scrollHeight }));
+async function openEvent(page: Page, id: string): Promise<void> {
+  const link = feed(page).locator(`a[href="/events/${encodeURIComponent(id)}"]`);
+  await feed(page).evaluate((box) => box.scrollTo({ top: 0 }));
+  for (let step = 0; step < 200 && (await link.count()) === 0; step += 1) {
+    await feed(page).evaluate((box) => box.scrollBy({ top: box.clientHeight / 2 }));
+    await page.waitForTimeout(30);
+  }
+  await link.click();
 }
 
-/** Whether the page itself scrolls sideways. */
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
+  await page.evaluate(() =>
+    Promise.all(document.getAnimations().map((animation) => animation.finished)),
+  );
   return page.evaluate(
     () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
   );
 }
 
-test.describe("the events view", () => {
-  test("a lease taken with the CLI appears in the events view within a second", async ({
+test.describe("the events page", () => {
+  test("a lease taken with the CLI appears in the feed within a second, and its page opens from it", async ({
     page,
   }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       await openEvents(page, host);
       await expect(rows(page).first()).toBeVisible();
+      const granted = rows(page).filter({ hasText: "lease.granted" });
+      await expect(granted).toHaveCount(0);
 
       const id = await lease(host, "console-e2e-events");
 
-      await expect(row(page, "lease.granted", id)).toHaveCount(1, { timeout: 1_000 });
+      await expect(granted).toHaveCount(1, { timeout: 1_000 });
+      await granted.click();
+      await expect(title(page)).toHaveText("lease.granted");
+      await expect(page).toHaveURL(/\/events\/[^/]+$/);
+      await expect(page.getByText("leaseId", { exact: true })).toBeVisible();
+      await expect(page.locator("dd", { hasText: new RegExp(`^${id}$`) })).toBeVisible();
+
+      await page.getByRole("link", { name: "Open lease" }).click();
+      await expect(page).toHaveURL(new RegExp(`/leases/${id}/?$`));
     } finally {
       await host.dispose();
     }
   });
 
-  test("the events view matches simlock events --since 1h, and a restart leaves no gap and no duplicate", async ({
+  test("the feed matches simlock events --since 1h, and a restart leaves no gap and no duplicate", async ({
     page,
   }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
@@ -163,7 +157,6 @@ test.describe("the events view", () => {
       await expect(page.locator(".connection")).toHaveText("Connected", { timeout: 30_000 });
       await lease(host, "console-e2e-after");
 
-      // Every event once, newest first, the ones sent while the console was away included.
       const after = await cliEvents(host);
       expect(after.length).toBeGreaterThan(before.length);
       await expect.poll(() => shownEvents(page)).toEqual(after.map(asShown).toReversed());
@@ -172,25 +165,103 @@ test.describe("the events view", () => {
     }
   });
 
+  test("choosing a row puts the event in the URL and its payload whole in the inspector", async ({
+    page,
+  }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
+    try {
+      await lease(host, "console-e2e-choose");
+      await openEvents(page, host);
+      const started = (await cliEvents(host)).find((event) => event.event === "daemon.started");
+      expect(started).toBeDefined();
+
+      await openEvent(page, (started as Envelope).id);
+
+      await expect(page).toHaveURL(new RegExp(`/events/${(started as Envelope).id}$`));
+      await expect(title(page)).toHaveText("daemon.started");
+      await expect(page.getByRole("heading", { level: 2, name: "Payload" })).toBeVisible();
+      await page.reload();
+      await expect(title(page)).toHaveText("daemon.started");
+    } finally {
+      await host.dispose();
+    }
+  });
+
+  test("an event the feed does not hold says so and links back", async ({ page }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
+    try {
+      await openEvents(page, host, "/events/evt_not_there");
+
+      await expect(page.getByText("Event not in the last hour.")).toBeVisible();
+      await page.getByRole("link", { name: "Back to events" }).click();
+      await expect(page).toHaveURL(/\/events$/);
+    } finally {
+      await host.dispose();
+    }
+  });
+
+  test("the filter shows only one subject's events and is kept in the URL", async ({ page }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
+    try {
+      await lease(host, "console-e2e-filter");
+      await openEvents(page, host);
+
+      await page.getByRole("radio", { name: "Leases" }).check({ force: true });
+
+      await expect(page).toHaveURL(/\?subject=lease$/);
+      const names = await rows(page).locator("time + span").allTextContents();
+      expect(names.length).toBeGreaterThan(0);
+      expect(names.every((name) => name.startsWith("lease."))).toBe(true);
+      await page.reload();
+      await expect(page.getByRole("radio", { name: "Leases" })).toBeChecked();
+    } finally {
+      await host.dispose();
+    }
+  });
+
+  test("the feed scrolls inside itself with the keyboard, and counts the events that came in while scrolled down", async ({
+    page,
+  }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
+    try {
+      for (let index = 0; index < 6; index += 1) await lease(host, `console-e2e-scroll-${index}`);
+      await openEvents(page, host);
+      await expect.poll(() => rows(page).count()).toBeGreaterThan(5);
+
+      await feed(page).focus();
+      await page.keyboard.press("End");
+      await expect.poll(() => feed(page).evaluate((box) => box.scrollTop)).toBeGreaterThan(0);
+
+      await lease(host, "console-e2e-scroll-new");
+      const more = page.getByRole("button", { name: /^\d+ new events?$/ });
+      await expect(more).toBeVisible();
+      await more.click();
+      await expect.poll(() => feed(page).evaluate((box) => box.scrollTop)).toBe(0);
+      await expect(more).toHaveCount(0);
+    } finally {
+      await host.dispose();
+    }
+  });
+
   test("on a gateway, a worker's event shows that worker's label", async ({ page }) => {
     const fleet = await startFleet([{ driverScript: { ios: IOS }, label: "worker-a" }]);
     try {
       const worker = fleet.workers[0] as RunningDaemon;
       await openEvents(page, fleet.gateway);
 
-      const id = await lease(worker, "console-e2e-label");
+      await lease(worker, "console-e2e-label");
 
-      const granted = row(page, "lease.granted", id);
+      const granted = rows(page).filter({ hasText: "lease.granted" });
       await expect(granted).toHaveCount(1);
-      // The payload names the worker by id only; the label comes from the worker list.
-      await expect(granted.locator("dt", { hasText: /^workerId$/ })).toHaveCount(1);
-      await expect(granted.locator(".event-worker")).toHaveText("worker-a");
+      await expect(granted).toContainText("worker-a");
+      await granted.click();
+      await expect(page.getByText("workerId", { exact: true })).toBeVisible();
     } finally {
       await disposeFleet(fleet);
     }
   });
 
-  test("a worker joining a gateway shows no join token anywhere in the events view", async ({
+  test("a worker joining a gateway shows no join token anywhere in the events page", async ({
     page,
   }) => {
     const fleet = await startFleet([{ driverScript: { ios: IOS }, label: "worker-a" }]);
@@ -200,20 +271,19 @@ test.describe("the events view", () => {
       for (const daemon of [fleet.gateway, worker]) {
         const name = daemon === worker ? "the worker" : "the gateway";
         await openEvents(page, daemon);
-        // The events that would carry the join token if anything did: the worker's own start,
-        // with its config, and the gateway's word that the worker joined.
         const wanted = daemon === worker ? "daemon.started" : "worker.connected";
-        await expect(
-          rows(page).filter({ has: page.locator(".event-name", { hasText: wanted }) }),
-          name,
-        ).not.toHaveCount(0);
-        const started = await cliEvents(daemon);
-        await expect.poll(async () => (await shownEvents(page)).length, name).toBe(started.length);
-
-        // Every event, drawn as the feed scrolls past it, and the page as it stands.
-        expect((await shownEvents(page)).join("\n"), name).not.toContain(joinToken);
+        await expect(rows(page).filter({ hasText: wanted }), name).not.toHaveCount(0);
+        const events = await cliEvents(daemon);
+        await expect.poll(async () => (await shownEvents(page)).length, name).toBe(events.length);
+
+        const seen: string[] = [];
+        for (const event of events) {
+          await openEvent(page, event.id);
+          await expect(title(page)).toHaveText(event.event);
+          seen.push(await page.locator("#main").innerText());
+        }
+        expect(seen.join("\n"), name).not.toContain(joinToken);
         expect(await page.content(), name).not.toContain(joinToken);
-        expect(await page.locator("body").innerText(), name).not.toContain(joinToken);
 
         await page.getByRole("button", { name: "Sign out" }).click();
       }
@@ -222,19 +292,19 @@ test.describe("the events view", () => {
     }
   });
 
-  test("the Events view has no horizontal scroll at 360px wide", async ({ page }) => {
+  test("the events page has no horizontal scroll at 360px wide, even with the longest payload", async ({
+    page,
+  }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       await lease(host, "console-e2e-narrow");
       await page.setViewportSize({ height: 740, width: 360 });
       await openEvents(page, host);
-      // `daemon.started` carries the whole config: the longest payload there is. It is the
-      // oldest event, so the feed is scrolled to it to be drawn.
-      await expect(rows(page).filter({ hasText: "lease.granted" })).not.toHaveCount(0);
-      await scrollFeedToOldest(page);
-      await expect(
-        rows(page).filter({ has: page.locator(".event-name", { hasText: "daemon.started" }) }),
-      ).not.toHaveCount(0);
+      expect(await hasHorizontalScroll(page)).toBe(false);
+
+      const started = (await cliEvents(host)).find((event) => event.event === "daemon.started");
+      await openEvent(page, (started as Envelope).id);
+      await expect(title(page)).toHaveText("daemon.started");
 
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
@@ -242,8 +312,7 @@ test.describe("the events view", () => {
     }
   });
 
-  test("the Events view is usable with the keyboard alone", async ({ browserName, page }) => {
-    // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
+  test("the events page is usable with the keyboard alone", async ({ browserName, page }) => {
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
@@ -255,16 +324,15 @@ test.describe("the events view", () => {
   });
 });
 
-/** Signs in, opens the Events view and filters it, with the keyboard alone. */
 async function keyboardOnly(page: Page, host: RunningDaemon, tab: string): Promise<void> {
   await page.goto(host.url);
   await page.keyboard.press(tab);
   await page.keyboard.type(host.tokens.operator);
   await page.keyboard.press("Enter");
-  await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+  await expect(page.getByRole("navigation").first()).toBeVisible();
 
   const nav = page.getByRole("link", { name: "Events", exact: true });
-  for (let step = 0; step < 20 && !(await isFocused(nav)); step += 1) {
+  for (let step = 0; step < 30 && !(await isFocused(nav)); step += 1) {
     await page.keyboard.press(tab);
   }
   await expect(nav).toBeFocused();
@@ -272,9 +340,8 @@ async function keyboardOnly(page: Page, host: RunningDaemon, tab: string): Promi
   await expect(page.getByRole("heading", { level: 1, name: "Events" })).toBeVisible();
   await expect(rows(page).filter({ hasText: "lease.granted" })).not.toHaveCount(0);
 
-  // Into the filter: Tab reaches the checked choice, and the arrow keys move along them.
   const all = page.getByRole("radio", { name: "All" });
-  for (let step = 0; step < 20 && !(await isFocused(all)); step += 1) {
+  for (let step = 0; step < 30 && !(await isFocused(all)); step += 1) {
     await page.keyboard.press(tab);
   }
   await expect(all).toBeFocused();
@@ -282,9 +349,17 @@ async function keyboardOnly(page: Page, host: RunningDaemon, tab: string): Promi
   await page.keyboard.press("ArrowRight");
   await expect(page.getByRole("radio", { name: "Leases" })).toBeChecked();
 
-  const names = await rows(page).locator(".event-name").allTextContents();
+  const names = await rows(page).locator("time + span").allTextContents();
   expect(names.length).toBeGreaterThan(0);
   expect(names.every((name) => name.startsWith("lease."))).toBe(true);
+
+  for (let step = 0; step < 10 && !(await isFocused(feed(page))); step += 1) {
+    await page.keyboard.press(tab);
+  }
+  await expect(feed(page)).toBeFocused();
+  await page.keyboard.press(tab);
+  await page.keyboard.press("Enter");
+  await expect(page).toHaveURL(/\/events\/[^/?]+\?subject=lease$/);
 }
 
 async function isFocused(locator: Locator): Promise<boolean> {

From 6d4c76e2849d021f6a62d00afd4cc7a44acbdbf9 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:31:37 +0200
Subject: [PATCH 11/32] feat(ui): the leases page is a list with an inspector
 and the live screen

---
 e2e/console/leases.spec.ts             | 265 +++++++++---------
 e2e/console/screen.spec.ts             |  13 +-
 ui/src/model/leases.test.ts            | 359 +++++++++++++++++++++++++
 ui/src/model/leases.ts                 | 197 ++++++++++++--
 ui/src/model/screen.test.ts            |  41 +++
 ui/src/model/screen.ts                 |  52 ++++
 ui/src/screens/leases/index.tsx        |  89 +++++-
 ui/src/screens/leases/inspector.tsx    | 150 +++++++++++
 ui/src/screens/leases/leases.css       | 154 +++++++++++
 ui/src/screens/leases/leases.test.tsx  | 250 +++++++++++++++++
 ui/src/screens/leases/screen-panel.tsx |  74 +++++
 ui/src/state/leases.ts                 | 110 ++++++++
 ui/src/state/screen.test.ts            |  49 ++++
 ui/src/state/screen.ts                 | 166 ++++++++++++
 14 files changed, 1818 insertions(+), 151 deletions(-)
 create mode 100644 ui/src/model/leases.test.ts
 create mode 100644 ui/src/model/screen.test.ts
 create mode 100644 ui/src/model/screen.ts
 create mode 100644 ui/src/screens/leases/inspector.tsx
 create mode 100644 ui/src/screens/leases/leases.css
 create mode 100644 ui/src/screens/leases/leases.test.tsx
 create mode 100644 ui/src/screens/leases/screen-panel.tsx
 create mode 100644 ui/src/state/leases.ts
 create mode 100644 ui/src/state/screen.test.ts
 create mode 100644 ui/src/state/screen.ts

diff --git a/e2e/console/leases.spec.ts b/e2e/console/leases.spec.ts
index 343386043..84e1a4562 100644
--- a/e2e/console/leases.spec.ts
+++ b/e2e/console/leases.spec.ts
@@ -114,34 +114,30 @@ async function untilTheDaemonSays(
   );
 }
 
-async function openLeases(page: Page, daemon: RunningDaemon): Promise<void> {
-  await page.goto(daemon.url);
+async function openLeases(page: Page, daemon: RunningDaemon, path = "/leases"): Promise<void> {
+  await page.goto(new URL(path, daemon.url).toString());
   await signIn(page, daemon.tokens.operator);
-  await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
-  await page.getByRole("link", { name: "Leases", exact: true }).click();
   await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
 }
 
-/** A lease's row, by its id. */
 function leaseRow(page: Page, id: string): Locator {
-  return page.getByRole("row").filter({ has: page.getByRole("link", { name: id, exact: true }) });
+  return page
+    .getByRole("list", { name: "Leases" })
+    .locator(`a[href="/leases/${encodeURIComponent(id)}/"]`);
 }
 
-/** A lease's cell in the column named `label`. */
-function leaseCell(page: Page, id: string, label: string): Locator {
-  return leaseRow(page, id).locator(`td[data-label="${label}"]`);
+function inspectorTitle(page: Page, name: string | RegExp): Locator {
+  return page.getByRole("heading", { level: 2, name });
 }
 
-/** The value beside a label in a list of facts. */
-function fact(page: Page, label: string): Locator {
-  return page
-    .locator("#main dt", { hasText: new RegExp(`^${label}$`) })
-    .locator("xpath=following-sibling::dd[1]");
+function card(page: Page, name: string): Locator {
+  return page.getByRole("region", { exact: true, name });
 }
 
-/** What the panel titled `heading` on a worker's page holds, under its header. */
-function tableUnder(page: Page, heading: string): Locator {
-  return page.getByRole("region", { name: heading, exact: true }).locator(".panel-body");
+function fact(page: Page, cardName: string, label: string): Locator {
+  return card(page, cardName)
+    .locator("dt", { hasText: new RegExp(`^${label}$`) })
+    .locator("xpath=following-sibling::dd[1]");
 }
 
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
@@ -150,8 +146,8 @@ async function hasHorizontalScroll(page: Page): Promise<boolean> {
   );
 }
 
-test.describe("the leases views", () => {
-  test("every lease in simlock list --leases appears in the fleet view", async ({ page }) => {
+test.describe("the leases page", () => {
+  test("every lease in simlock list --leases appears in the fleet list", async ({ page }) => {
     const fleet = await startFleet([
       { driverScript: { ios: IOS }, label: "worker-a" },
       { driverScript: { ios: { ...IOS, knownModels: ["iPhone 17"] } }, label: "worker-b" },
@@ -175,15 +171,19 @@ test.describe("the leases views", () => {
 
       await openLeases(page, fleet.gateway);
 
-      await expect(page.locator("tbody tr")).toHaveCount(listed.length);
+      await expect(page.getByRole("list", { name: "Leases" }).getByRole("listitem")).toHaveCount(
+        listed.length,
+      );
+      await expect(page.getByText(`${listed.length} held`)).toBeVisible();
       for (const lease of listed) {
-        await expect(leaseRow(page, lease.id), lease.id).toBeVisible();
-        const holder = lease.requesterId === ci.id ? `ci-runner-3 ${ci.id}` : lease.requesterId;
-        await expect(leaseCell(page, lease.id, "Holder")).toHaveText(holder);
+        const row = leaseRow(page, lease.id);
+        await expect(row, lease.id).toBeVisible();
+        await expect(row).toContainText(
+          lease.requesterId === ci.id ? "ci-runner-3" : lease.requesterId,
+        );
         const worker = workers.find((candidate) => candidate.id === lease.workerId);
-        await expect(leaseCell(page, lease.id, "Worker")).toHaveText(worker?.label ?? "");
-        await expect(leaseCell(page, lease.id, "Device")).toContainText(lease.deviceId);
-        await expect(leaseCell(page, lease.id, "Expires in")).toHaveText(/^\d+ min( \d+ s)?$/);
+        await expect(row).toContainText(worker?.label ?? "");
+        await expect(row).toContainText(/\d+ min( \d+ s)?|\d+ s/);
       }
       expect(listed.map((lease) => lease.requesterId)).toContain(ci.id);
     } finally {
@@ -201,40 +201,29 @@ test.describe("the leases views", () => {
 
       await openLeases(page, host);
 
-      await expect(leaseCell(page, granted.id, "Holder")).toHaveText(`ci-runner-3 ${ci.id}`);
+      await expect(leaseRow(page, granted.id)).toContainText("ci-runner-3");
+      await expect(leaseRow(page, granted.id)).not.toContainText(ci.id);
     } finally {
       await host.dispose();
     }
   });
 
-  test("a worker's detail lists only that worker's leases", async ({ page }) => {
-    const fleet = await startFleet([
-      { driverScript: { ios: IOS }, label: "worker-a" },
-      { driverScript: { ios: { ...IOS, knownModels: ["iPhone 17"] } }, label: "worker-b" },
-    ]);
+  test("with no lease named in the address the first lease shows in the inspector, and the address stays", async ({
+    page,
+  }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
-      await leaseOverSocket(fleet.gateway, "agent-a", "iPhone 16");
-      await leaseOverSocket(fleet.gateway, "agent-b", "iPhone 17");
-      await waitFor(async () => (await listLeases(fleet.gateway)).length === 2, {
-        label: "the gateway lists both leases",
-      });
-      const listed = await listLeases(fleet.gateway);
-      const holderOf = { "worker-a": "agent-a", "worker-b": "agent-b" } as const;
+      await leaseOverSocket(host, "agent-first");
+      await leaseOverSocket(host, "agent-second");
+      const first = (await listLeases(host)).find((lease) => lease.requesterId === "agent-first");
 
-      await openLeases(page, fleet.gateway);
-      for (const label of ["worker-a", "worker-b"] as const) {
-        await page.getByRole("link", { name: "Workers", exact: true }).click();
-        await page.getByRole("link", { name: label, exact: true }).click();
-        await expect(page.getByRole("heading", { level: 1, name: label })).toBeVisible();
-
-        const own = listed.filter((lease) => lease.requesterId === holderOf[label]);
-        expect(own).toHaveLength(1);
-        const rows = tableUnder(page, "Leases").locator("tbody tr");
-        await expect(rows).toHaveCount(1);
-        await expect(rows.getByRole("link", { name: own[0]?.id ?? "", exact: true })).toBeVisible();
-      }
+      await openLeases(page, host);
+
+      await expect(inspectorTitle(page, /agent-first/)).toBeVisible();
+      await expect(leaseRow(page, first?.id ?? "")).toHaveAttribute("aria-current", "page");
+      expect(new URL(page.url()).pathname).toBe("/leases");
     } finally {
-      await disposeFleet(fleet);
+      await host.dispose();
     }
   });
 
@@ -256,27 +245,30 @@ test.describe("the leases views", () => {
       expect(granted.id).toContain(".");
 
       await openLeases(page, fleet.gateway);
-      await page.getByRole("link", { name: granted.id, exact: true }).click();
-
-      await expect(page.getByRole("heading", { level: 1, name: granted.id })).toBeVisible();
-      await expect(fact(page, "Holder")).toHaveText(`ci-runner-3 ${ci.id}`);
-      await expect(fact(page, "Worker")).toHaveText("worker-a");
-      await expect(fact(page, "Device")).toContainText(granted.device);
-      await expect(fact(page, "UDID")).toHaveText(granted.udid);
-      await expect(fact(page, "Mode")).toHaveText(granted.mode);
-      await expect(fact(page, "Request")).toHaveText(granted.requestId ?? "");
-      await expect(fact(page, "Expires in")).toHaveText(/^\d+ min( \d+ s)?$/);
+      await leaseRow(page, granted.id).click();
+
+      await expect(inspectorTitle(page, /ci-runner-3/)).toBeVisible();
+      await expect(
+        page.getByRole("navigation", { name: "Breadcrumb" }).getByText(granted.id),
+      ).toBeVisible();
+      await expect(fact(page, "Lease", "Holder")).toHaveText(`ci-runner-3 ${ci.id}`);
+      await expect(fact(page, "Device", "Worker")).toHaveText("worker-a");
+      await expect(fact(page, "Device", "Model")).toHaveText(granted.device);
+      await expect(fact(page, "Device", "UDID")).toHaveText(granted.udid);
+      await expect(fact(page, "Device", "Mode")).toHaveText(granted.mode);
+      await expect(fact(page, "Lease", "Request")).toHaveText(granted.requestId ?? "");
+      await expect(card(page, "Expires in").getByRole("timer")).toHaveText(
+        /^\d+ min( \d+ s)?$|^\d+ s$/,
+      );
       // The page's own address survives a reload, though the id holds a `.`.
       await page.reload();
-      await expect(fact(page, "UDID")).toHaveText(granted.udid);
+      await expect(fact(page, "Device", "UDID")).toHaveText(granted.udid);
 
       // A worker's own lease, which the gateway did not issue, opens too.
-      await page.getByRole("link", { name: "All leases" }).click();
-      await page.getByRole("link", { name: local?.id ?? "", exact: true }).click();
-      await expect(page.getByRole("heading", { level: 1, name: local?.id ?? "" })).toBeVisible();
-      await expect(fact(page, "Holder")).toHaveText("local-agent");
-      await expect(fact(page, "Worker")).toHaveText("worker-b");
-      await expect(fact(page, "UDID")).not.toHaveText("—");
+      await leaseRow(page, local?.id ?? "").click();
+      await expect(inspectorTitle(page, /local-agent/)).toBeVisible();
+      await expect(fact(page, "Device", "Worker")).toHaveText("worker-b");
+      await expect(fact(page, "Device", "UDID")).not.toHaveText("—");
     } finally {
       await disposeFleet(fleet);
     }
@@ -293,28 +285,55 @@ test.describe("the leases views", () => {
       ).workers;
 
       await openLeases(page, host);
-      await page.getByRole("link", { name: granted.id, exact: true }).click();
+      await leaseRow(page, granted.id).click();
 
-      await expect(page.getByRole("heading", { level: 1, name: granted.id })).toBeVisible();
-      await expect(fact(page, "Holder")).toHaveText(`ci-runner-3 ${ci.id}`);
-      await expect(fact(page, "Worker")).toHaveText(view?.id ?? "");
-      await expect(fact(page, "UDID")).toHaveText(granted.udid);
-      await expect(fact(page, "Request")).toHaveText(granted.requestId ?? "");
+      await expect(inspectorTitle(page, /ci-runner-3/)).toBeVisible();
+      await expect(fact(page, "Lease", "Holder")).toHaveText(`ci-runner-3 ${ci.id}`);
+      await expect(fact(page, "Device", "Worker")).toHaveText(view?.id ?? "");
+      await expect(fact(page, "Device", "UDID")).toHaveText(granted.udid);
+      await expect(fact(page, "Lease", "Request")).toHaveText(granted.requestId ?? "");
       await page.reload();
-      await expect(fact(page, "UDID")).toHaveText(granted.udid);
+      await expect(fact(page, "Device", "UDID")).toHaveText(granted.udid);
+    } finally {
+      await host.dispose();
+    }
+  });
+
+  test("the filters narrow the list to the expiring leases or to one platform", async ({
+    page,
+  }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
+    try {
+      const ci = await labelledToken(host, "ci-runner-3");
+      const soon = await leaseOverHttp(host, ci.secret, { ttlMs: 120_000 });
+      const nightly = await labelledToken(host, "nightly");
+      const later = await leaseOverHttp(host, nightly.secret, { ttlMs: 3_000_000 });
+      await openLeases(page, host);
+      await expect(leaseRow(page, soon.id)).toBeVisible();
+      await expect(leaseRow(page, later.id)).toBeVisible();
+
+      await page.getByRole("radio", { name: "Expiring" }).check();
+      await expect(leaseRow(page, soon.id)).toBeVisible();
+      await expect(leaseRow(page, later.id)).toHaveCount(0);
+
+      await page.getByRole("radio", { name: "iOS" }).check();
+      await expect(leaseRow(page, later.id)).toBeVisible();
+
+      await page.getByRole("radio", { name: "Android" }).check();
+      await expect(page.getByText("No leases match this filter.")).toBeVisible();
     } finally {
       await host.dispose();
     }
   });
 
-  test("a released lease leaves the view within a second, without a reload", async ({ page }) => {
+  test("a released lease leaves the list within a second, without a reload", async ({ page }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       await leaseOverSocket(host, "agent-1");
       await leaseOverSocket(host, "agent-2");
       const [released, kept] = (await listLeases(host)) as [ListedLease, ListedLease];
       await openLeases(page, host);
-      await expect(page.locator("tbody tr")).toHaveCount(2);
+      await expect(page.getByRole("list", { name: "Leases" }).getByRole("listitem")).toHaveCount(2);
 
       expect((await host.cli(["release", released.id])).code).toBe(0);
       await untilTheDaemonSays(host, (leases) => leases.every((lease) => lease.id !== released.id));
@@ -326,33 +345,49 @@ test.describe("the leases views", () => {
     }
   });
 
-  test("a lease's page says it is not found once the lease is released", async ({ page }) => {
+  test("a lease's page says it is not found once the lease is released, with a way back", async ({
+    page,
+  }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       await leaseOverSocket(host, "agent-1");
       const [released] = (await listLeases(host)) as [ListedLease];
       await openLeases(page, host);
-      await page.getByRole("link", { name: released.id, exact: true }).click();
-      await expect(page.getByRole("heading", { level: 1, name: released.id })).toBeVisible();
+      await leaseRow(page, released.id).click();
+      await expect(inspectorTitle(page, /agent-1/)).toBeVisible();
 
       expect((await host.cli(["release", released.id])).code).toBe(0);
 
-      await expect(page.getByRole("heading", { level: 1, name: "Lease not found" })).toBeVisible();
-      await expect(fact(page, "UDID")).toHaveCount(0);
+      await expect(page.getByText("Lease not found.")).toBeVisible();
+      await expect(fact(page, "Device", "UDID")).toHaveCount(0);
+      await page.getByRole("link", { name: "All leases" }).click();
+      expect(new URL(page.url()).pathname).toBe("/leases");
+    } finally {
+      await host.dispose();
+    }
+  });
+
+  test("an address naming no lease says it is not found", async ({ page }) => {
+    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
+    try {
+      await openLeases(page, host, "/leases/lse_nobody/");
+
+      await expect(page.getByText("Lease not found.")).toBeVisible();
+      await expect(page.getByRole("link", { name: "All leases" })).toBeVisible();
     } finally {
       await host.dispose();
     }
   });
 
-  test("a renewed lease shows its new expiry within a second", async ({ page }) => {
+  test("a renewed lease shows its new time left within a second", async ({ page }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       const ci = await labelledToken(host, "ci-runner-3");
       const granted = await leaseOverHttp(host, ci.secret, { ttlMs: 120_000 });
       const [before] = await listLeases(host);
       await openLeases(page, host);
-      const expiry = leaseCell(page, granted.id, "Expires in");
-      await expect(expiry).toHaveText(/^1 min \d+ s$/);
+      const expiry = leaseRow(page, granted.id);
+      await expect(expiry).toContainText(/\b1 min \d+ s/);
 
       const renewed = await fetch(new URL(`/v1/leases/${granted.id}/renew`, host.url), {
         body: JSON.stringify({ ttlMs: 3_000_000 }),
@@ -366,13 +401,15 @@ test.describe("the leases views", () => {
         ),
       );
 
-      await expect(expiry).toHaveText(/^(49|50) min( \d+ s)?$/, { timeout: 1_000 });
+      await expect(expiry).toContainText(/(49|50) min/, { timeout: 1_000 });
     } finally {
       await host.dispose();
     }
   });
 
-  test("the leases views have no horizontal scroll at 360px wide", async ({ page }) => {
+  test("the leases page has no horizontal scroll at 360px wide, and shows the list before a lease", async ({
+    page,
+  }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       const ci = await labelledToken(host, "ci-runner-3");
@@ -380,36 +417,29 @@ test.describe("the leases views", () => {
       await page.setViewportSize({ height: 740, width: 360 });
       await openLeases(page, host);
       await expect(leaseRow(page, granted.id)).toBeVisible();
+      await expect(inspectorTitle(page, /ci-runner-3/)).toBeHidden();
       expect(await hasHorizontalScroll(page)).toBe(false);
 
-      await page.getByRole("link", { name: granted.id, exact: true }).click();
-      await expect(fact(page, "UDID")).toHaveText(granted.udid);
-      expect(await hasHorizontalScroll(page)).toBe(false);
-
-      await page.getByRole("link", { name: "Workers", exact: true }).click();
-      await page.locator(".card").getByRole("link").click();
-      await expect(tableUnder(page, "Leases").locator("tbody tr")).toHaveCount(1);
+      await leaseRow(page, granted.id).click();
+      await expect(inspectorTitle(page, /ci-runner-3/)).toBeVisible();
+      await expect(fact(page, "Device", "UDID")).toHaveText(granted.udid);
+      await expect(page.getByRole("button", { name: "Show screen" })).toBeVisible();
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
       await host.dispose();
     }
   });
 
-  test("the leases views are usable with the keyboard alone", async ({ browserName, page }) => {
+  test("the leases page is usable with the keyboard alone", async ({ browserName, page }) => {
     // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
     try {
       const ci = await labelledToken(host, "ci-runner-3");
       const granted = await leaseOverHttp(host, ci.secret);
-      /**
-       * Tabs until the link named `label` has focus, forward or, for a link earlier on the page
-       * such as the navigation, backward, and follows it with Enter.
-       */
-      const follow = async (label: string, direction: "forward" | "backward" = "forward") => {
-        const link = page.getByRole("link", { name: label, exact: true });
+      const follow = async (link: Locator, direction: "forward" | "backward" = "forward") => {
         const key = direction === "forward" ? tab : `Shift+${tab}`;
-        for (let step = 0; step < 30; step += 1) {
+        for (let step = 0; step < 40; step += 1) {
           if (await link.evaluate((element) => element === document.activeElement)) break;
           await page.keyboard.press(key);
         }
@@ -420,25 +450,20 @@ test.describe("the leases views", () => {
       await page.keyboard.press(tab);
       await page.keyboard.type(host.tokens.operator);
       await page.keyboard.press("Enter");
-      await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+      await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 
-      await follow("Leases");
-      await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
-      await follow(granted.id);
-      await expect(page.getByRole("heading", { level: 1, name: granted.id })).toBeVisible();
-      await follow("All leases");
+      await follow(
+        page.getByRole("navigation", { name: "Console" }).getByRole("link", { name: "Leases" }),
+      );
       await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
-
-      // The same lease, from the table on its worker's page.
-      const [view] = (
-        (await host.cli(["worker", "list", "--json"])).json as { workers: { id: string }[] }
-      ).workers;
-      const name = view?.id ?? "";
-      await follow("Workers", "backward");
-      await follow(name);
-      await expect(page.getByRole("heading", { level: 1, name })).toBeVisible();
-      await follow(granted.id);
-      await expect(page.getByRole("heading", { level: 1, name: granted.id })).toBeVisible();
+      await follow(leaseRow(page, granted.id));
+      await expect(inspectorTitle(page, /ci-runner-3/)).toBeVisible();
+      await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText(granted.id);
+      await follow(
+        page.getByRole("navigation", { name: "Breadcrumb" }).getByRole("link", { name: "Leases" }),
+        "backward",
+      );
+      expect(new URL(page.url()).pathname).toBe("/leases");
     } finally {
       await host.dispose();
     }
diff --git a/e2e/console/screen.spec.ts b/e2e/console/screen.spec.ts
index 6c24c45a0..db672635b 100644
--- a/e2e/console/screen.spec.ts
+++ b/e2e/console/screen.spec.ts
@@ -56,7 +56,7 @@ async function cleanup(started: StreamingHost): Promise<void> {
 async function openLeasePage(page: Page, host: RunningDaemon, lease: string): Promise<void> {
   await page.goto(new URL(`/leases/${encodeURIComponent(lease)}`, host.url).toString());
   await signIn(page, host.tokens.operator);
-  await expect(page.getByRole("heading", { level: 2, name: "Screen" })).toBeVisible();
+  await expect(page.getByRole("heading", { level: 3, name: "Screen" })).toBeVisible();
 }
 
 function showButton(page: Page) {
@@ -92,6 +92,7 @@ async function averageColour(page: Page): Promise<string> {
 
 async function fact(page: Page, label: string): Promise<string> {
   return page
+    .getByRole("region", { exact: true, name: "Screen" })
     .locator(".facts > div")
     .filter({ has: page.getByText(label, { exact: true }) })
     .first()
@@ -197,7 +198,9 @@ test.describe("the Screen pane", () => {
     }
   });
 
-  test("a worker with streaming off refuses the picture and says what to do", async ({ page }) => {
+  test("a worker with streaming off disables Show screen and says why before any click", async ({
+    page,
+  }) => {
     const dir = await mkdtemp(join(tmpdir(), "simlock-screen-"));
     let host: RunningDaemon | undefined;
     try {
@@ -206,8 +209,8 @@ test.describe("the Screen pane", () => {
       expect(granted.code, granted.stderr).toBe(0);
       const lease = (granted.json as { lease: { id: string } }).lease.id;
       await openLeasePage(page, host, lease);
-      await showButton(page).click();
-      await expect(page.getByRole("alert")).toContainText("capabilities.stream.enabled is on");
+      await expect(showButton(page)).toBeDisabled();
+      await expect(page.getByText(/^Streaming is off on /)).toBeVisible();
       expect(await streamCapability(host)).toBe("off");
       await expect(screen(page)).toHaveCount(0);
       expect(await captureLog(dir)).toBe("");
@@ -234,7 +237,7 @@ test.describe("the Screen pane", () => {
       // still connected is not observable from a browser -- it is pinned in
       // `src/stream/captures.test.ts`, where a capture can be held open past the lease.
       await logReached(started.dir, "closed", 1);
-      await expect(page.getByText("Lease not found")).toBeVisible();
+      await expect(page.getByText("Lease not found.")).toBeVisible();
       expect(await captureLogLines(started.dir, "opened")).toBe(1);
     } finally {
       await cleanup(started);
diff --git a/ui/src/model/leases.test.ts b/ui/src/model/leases.test.ts
new file mode 100644
index 000000000..53686ca6c
--- /dev/null
+++ b/ui/src/model/leases.test.ts
@@ -0,0 +1,359 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  filterLeaseRows,
+  type LeaseDetails,
+  type LeaseRecord,
+  leaseInspection,
+  leasePath,
+  leaseRows,
+  leasesOnWorker,
+  streamOffer,
+  type TokenRecord,
+} from "./leases";
+import { itemIdFrom } from "./paths";
+import type { WorkerView } from "./workers";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+
+function lease(overrides: Partial<LeaseRecord> = {}): LeaseRecord {
+  return {
+    deviceId: "dev_1",
+    grantedAt: NOW - 90_000,
+    id: "lse_1",
+    idChosenByRequester: false,
+    lastRenewedAt: NOW - 30_000,
+    ownerId: "tok_1",
+    requesterId: "tok_1",
+    ttlDeadline: NOW + 125_000,
+    ttlMs: 250_000,
+    ...overrides,
+  };
+}
+
+const TOKEN: TokenRecord = {
+  createdAt: NOW - 1_000_000,
+  id: "tok_1",
+  label: "ci-runner-3",
+  role: "agent",
+};
+
+function host(overrides: Partial<WorkerView> = {}): WorkerView {
+  return {
+    capabilities: [{ name: "stream", state: "available" }],
+    catalog: [],
+    connection: "connected",
+    devices: [
+      {
+        id: "dev_1",
+        mode: "slim",
+        physical: false,
+        servesDefaultMode: false,
+        spec: {
+          imageTag: "base",
+          model: "iPhone 16",
+          osVersion: "18.4",
+          physical: false,
+          platform: "ios",
+        },
+        state: "leased",
+      },
+      {
+        id: "dev_a",
+        mode: "full",
+        physical: false,
+        servesDefaultMode: false,
+        spec: { model: "Pixel 8", osVersion: "35", physical: false, platform: "android" },
+        state: "leased",
+      },
+    ],
+    drained: false,
+    id: "wrk_host",
+    label: "mac-mini-1",
+    lastSeenAt: NOW,
+    leases: [],
+    ...overrides,
+  } as unknown as WorkerView;
+}
+
+function details(overrides: Partial<LeaseDetails> = {}): LeaseDetails {
+  return {
+    createdAt: new Date(NOW - 90_000).toISOString(),
+    device: "iPhone 16",
+    deviceId: "dev_1",
+    expiresAt: new Date(NOW + 125_000).toISOString(),
+    id: "lse_1",
+    imageTag: "base",
+    mode: "slim",
+    requestId: "req_7d1a",
+    udid: "ABCD-1234",
+    ...overrides,
+  };
+}
+
+describe("the lease list rows", () => {
+  it("names a lease by its token's label, else by its requester's id", () => {
+    const rows = leaseRows({
+      leases: [lease(), lease({ id: "lse_2", requesterId: "agent-7" })],
+      now: NOW,
+      tokens: [TOKEN],
+      workers: [host()],
+    });
+
+    expect(rows.map((row) => row.holder)).toEqual(["ci-runner-3", "agent-7"]);
+  });
+
+  it("puts the time left, then the device model and the worker, on a row", () => {
+    const [row] = leaseRows({ leases: [lease()], now: NOW, tokens: [], workers: [host()] });
+
+    expect(row).toMatchObject({
+      id: "lse_1",
+      remaining: "2 min 5 s",
+      sub: "iPhone 16 · mac-mini-1",
+      to: "/leases/lse_1/",
+    });
+    expect(row?.percent).toBeCloseTo(50);
+  });
+
+  it("falls back to the device id when no worker view has the device", () => {
+    const [row] = leaseRows({ leases: [lease()], now: NOW, tokens: [], workers: [] });
+
+    expect(row?.sub).toBe("dev_1");
+    expect(row?.platform).toBeUndefined();
+  });
+
+  it("lists leases oldest granted first, whatever order the daemon sends", () => {
+    const sent = [
+      lease({ grantedAt: NOW - 1_000, id: "lse_newest", workerId: "wrk_a" }),
+      lease({ grantedAt: NOW - 9_000, id: "lse_b", workerId: "wrk_b" }),
+      lease({ grantedAt: NOW - 9_000, id: "lse_a", workerId: "wrk_b" }),
+      lease({ grantedAt: NOW - 9_000, id: "lse_z", workerId: "wrk_a" }),
+    ];
+    const ids = (leases: readonly LeaseRecord[]) =>
+      leaseRows({ leases, now: NOW, tokens: [], workers: [] }).map((row) => row.id);
+
+    expect(ids(sent)).toEqual(["lse_z", "lse_a", "lse_b", "lse_newest"]);
+    expect(ids(sent.toReversed())).toEqual(ids(sent));
+  });
+
+  it("marks a lease expiring only when under 15 minutes are left", () => {
+    const left = (ms: number) =>
+      leaseRows({
+        leases: [lease({ ttlDeadline: NOW + ms })],
+        now: NOW,
+        tokens: [],
+        workers: [],
+      })[0]?.expiring;
+
+    expect(left(15 * 60_000 - 1)).toBe(true);
+    expect(left(15 * 60_000)).toBe(false);
+    expect(left(-5_000)).toBe(true);
+  });
+
+  it("filters to the expiring leases or to one platform, and keeps all of them for All", () => {
+    const rows = leaseRows({
+      leases: [
+        lease({ grantedAt: 1, id: "ios_soon", ttlDeadline: NOW + 60_000 }),
+        lease({
+          deviceId: "dev_a",
+          grantedAt: 2,
+          id: "android_late",
+          ttlDeadline: NOW + 3_600_000,
+        }),
+        lease({
+          deviceId: "dev_x",
+          grantedAt: 3,
+          id: "unknown_late",
+          ttlDeadline: NOW + 3_600_000,
+        }),
+      ],
+      now: NOW,
+      tokens: [],
+      workers: [host()],
+    });
+    const ids = (filter: Parameters<typeof filterLeaseRows>[1]) =>
+      filterLeaseRows(rows, filter).map((row) => row.id);
+
+    expect(ids("all")).toEqual(["ios_soon", "android_late", "unknown_late"]);
+    expect(ids("expiring")).toEqual(["ios_soon"]);
+    expect(ids("ios")).toEqual(["ios_soon"]);
+    expect(ids("android")).toEqual(["android_late"]);
+  });
+});
+
+describe("a lease's page path", () => {
+  it("has no `.` in its last segment for a gateway lease id, and names the lease again", () => {
+    const id = "3f81a2c4-9b7d-4e21-8a55-1c0e6f2d7b93.lse_9f2c";
+    const path = leasePath(id);
+
+    expect(path.slice(path.lastIndexOf("/") + 1)).not.toContain(".");
+    expect(itemIdFrom("/leases", path)).toBe(id);
+  });
+});
+
+describe("a worker's leases", () => {
+  it("are the ones that name it, or every one on a single host", () => {
+    const onA = lease({ id: "a", workerId: "wrk_a" });
+    const onB = lease({ id: "b", workerId: "wrk_b" });
+    const local = lease({ id: "local" });
+    const a = host({ id: "wrk_a" });
+    const b = host({ id: "wrk_b" });
+
+    expect(leasesOnWorker([onA, onB], "wrk_a", [a, b])).toEqual([onA]);
+    expect(leasesOnWorker([local], "wrk_host", [host()])).toEqual([local]);
+    expect(leasesOnWorker([local], "wrk_a", [a, b])).toEqual([]);
+  });
+});
+
+describe("whether a worker offers the live screen", () => {
+  it("offers it when the worker's stream capability is available", () => {
+    expect(streamOffer(host())).toEqual({ offered: true });
+  });
+
+  it("says streaming is off on the worker when the capability is off or not reported", () => {
+    const off = host({ capabilities: [{ name: "stream", state: "off" }] });
+    const silent = host({ capabilities: [] });
+    const unreported = host({ capabilities: undefined });
+
+    expect(streamOffer(off)).toEqual({ offered: false, reason: "Streaming is off on mac-mini-1." });
+    expect(streamOffer(silent).offered).toBe(false);
+    expect(streamOffer(unreported).offered).toBe(false);
+  });
+
+  it("gives the worker's reason when the capability is unavailable", () => {
+    const worker = host({
+      capabilities: [{ name: "stream", reason: "ffmpeg is missing", state: "unavailable" }],
+    });
+
+    expect(streamOffer(worker)).toEqual({
+      offered: false,
+      reason: "Streaming is unavailable on mac-mini-1. ffmpeg is missing",
+    });
+  });
+
+  it("leaves it to the daemon's answer when the lease's worker is not known", () => {
+    expect(streamOffer(undefined)).toEqual({ offered: true });
+  });
+});
+
+describe("a lease's inspection", () => {
+  const inspect = (
+    overrides: {
+      lease?: LeaseDetails;
+      record?: LeaseRecord | undefined;
+      workers?: readonly WorkerView[];
+    } = {},
+  ) =>
+    leaseInspection({
+      lease: overrides.lease ?? details(),
+      now: NOW,
+      record: "record" in overrides ? overrides.record : lease(),
+      tokens: [TOKEN],
+      workers: overrides.workers ?? [host()],
+    });
+
+  it("shows the holder as the title, and every fact the daemon holds about the lease", () => {
+    const shown = inspect();
+
+    expect(shown).toMatchObject({
+      device: {
+        deviceId: "dev_1",
+        imageTag: "base",
+        kind: "Virtual",
+        mode: "slim",
+        udid: "ABCD-1234",
+      },
+      expiring: true,
+      heldFor: "1 min 30 s",
+      holder: { id: "tok_1", label: "ci-runner-3" },
+      id: "lse_1",
+      model: "iPhone 16",
+      remaining: "2 min 5 s",
+      renewed: "30 s ago",
+      requestId: "req_7d1a",
+      runtime: "18.4",
+      title: "ci-runner-3",
+      worker: { name: "mac-mini-1", to: "/workers/wrk_host" },
+    });
+    expect(shown.percent).toBeCloseTo(50);
+  });
+
+  it("shows the grant time as a local HH:MM", () => {
+    const at = new Date(2026, 9, 2, 7, 5, 59).getTime();
+
+    const shown = inspect({ lease: details({ createdAt: new Date(at).toISOString() }) });
+
+    expect(shown.granted).toBe("07:05");
+  });
+
+  it("warns once under 15 minutes are left", () => {
+    const soon = details({ expiresAt: new Date(NOW + 14 * 60_000).toISOString() });
+    const later = details({ expiresAt: new Date(NOW + 16 * 60_000).toISOString() });
+
+    expect(inspect({ lease: soon }).expiring).toBe(true);
+    expect(inspect({ lease: later }).expiring).toBe(false);
+  });
+
+  it("names the owner only where it is not the holder, and the request only when there is one", () => {
+    const { requestId: _dropped, ...noRequest } = details();
+
+    expect(inspect().ownerId).toBeUndefined();
+    expect(inspect({ record: lease({ ownerId: "tok_9" }) }).ownerId).toBe("tok_9");
+    expect(inspect({ lease: noRequest }).requestId).toBeUndefined();
+  });
+
+  it("shows a physical device without a mode", () => {
+    const physical = host({
+      devices: [
+        {
+          class: "phone",
+          id: "dev_p",
+          physical: true,
+          servesDefaultMode: false,
+          spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
+          state: "leased",
+        },
+      ],
+    } as unknown as Partial<WorkerView>);
+    const { imageTag: _tag, mode: _mode, ...bare } = details({ deviceId: "dev_p" });
+
+    const shown = inspect({ lease: bare, workers: [physical] });
+
+    expect(shown.device.kind).toBe("Physical");
+    expect(shown.device.mode).toBeUndefined();
+    expect(shown.device.imageTag).toBeUndefined();
+  });
+
+  it("titles the lease by its id and shows the missing facts as missing while the list has not answered", () => {
+    const shown = inspect({ record: undefined });
+
+    expect(shown.title).toBe("lse_1");
+    expect(shown.holder).toBeUndefined();
+    expect(shown.renewed).toBe("—");
+    expect(shown.percent).toBeUndefined();
+  });
+
+  it("names the worker from the lease itself when no worker view has it", () => {
+    const gone = details({
+      id: "wrk_gone.lse_1",
+      worker: { id: "wrk_gone", label: "mac-studio-2" },
+    });
+
+    expect(inspect({ lease: gone, record: undefined, workers: [] }).worker).toEqual({
+      name: "mac-studio-2",
+    });
+    expect(
+      inspect({ lease: details({ workerId: "wrk_gone" }), record: undefined, workers: [] }).worker,
+    ).toEqual({ name: "wrk_gone" });
+  });
+
+  it("carries whether the lease's worker offers the live screen", () => {
+    const off = host({ capabilities: [{ name: "stream", state: "off" }] });
+
+    expect(inspect({ workers: [off] }).stream).toEqual({
+      offered: false,
+      reason: "Streaming is off on mac-mini-1.",
+    });
+    expect(inspect().stream.offered).toBe(true);
+  });
+});
diff --git a/ui/src/model/leases.ts b/ui/src/model/leases.ts
index 944002f1c..5df6518f8 100644
--- a/ui/src/model/leases.ts
+++ b/ui/src/model/leases.ts
@@ -1,8 +1,8 @@
 import type { z } from "zod";
 
 import type { statusLeaseSchema, tokenRecordSchema } from "../../../src/contract/schemas";
-import type { Stat } from "./stat";
-import { type WorkerDevice, type WorkerView, workerName } from "./workers";
+import { formatDuration } from "./time";
+import { type WorkerDevice, type WorkerView, workerName, workerPath } from "./workers";
 
 export type LeaseRecord = z.infer<typeof statusLeaseSchema>;
 
@@ -43,6 +43,11 @@ export function holderOf(requesterId: string, tokens: readonly TokenRecord[]): H
   return label === undefined ? { id: requesterId } : { id: requesterId, label };
 }
 
+// why: a holder's title is its token's label, or its id where no label names it.
+export function holderTitle(holder: Holder): string {
+  return holder.label ?? holder.id;
+}
+
 // why: a single host names no worker on its leases, and every lease there is on its one worker, the
 // host itself.
 export function workerOfLease(
@@ -102,28 +107,176 @@ export function leasePath(id: string): `/${string}` {
   return `/leases/${encodeURIComponent(id)}/`;
 }
 
-const EXPIRING_WITHIN_MS = 15 * 60_000;
+export type LeaseFilter = "all" | "expiring" | "ios" | "android";
 
-export function leasesStats(leases: readonly LeaseRecord[], now: number): readonly Stat[] {
-  const holders = new Set(leases.map((lease) => lease.requesterId));
-  const expiring = leases.filter((lease) => lease.ttlDeadline - now <= EXPIRING_WITHIN_MS);
-  return [
-    { caption: "held now", label: "Leases", value: String(leases.length) },
-    { caption: "holding at least one lease", label: "Holders", value: String(holders.size) },
-    {
-      caption: "expire within 15 minutes unless renewed",
-      label: "Expiring soon",
-      value: String(expiring.length),
-    },
-  ];
+export const LEASE_FILTERS: readonly { readonly value: LeaseFilter; readonly label: string }[] = [
+  { label: "All", value: "all" },
+  { label: "Expiring", value: "expiring" },
+  { label: "iOS", value: "ios" },
+  { label: "Android", value: "android" },
+];
+
+// why: a lease with under 15 minutes left has not been renewed for a while, so the list and the
+// inspector warn by the same rule.
+const EXPIRING_UNDER_MS = 15 * 60_000;
+
+export function isExpiring(deadline: number, now: number): boolean {
+  return deadline - now < EXPIRING_UNDER_MS;
+}
+
+function percentLeft(deadline: number, now: number, ttlMs: number): number {
+  return ttlMs <= 0 ? 0 : Math.max(0, Math.min(100, ((deadline - now) / ttlMs) * 100));
+}
+
+// why: a local clock time, since an operator reads "granted" against their own day.
+function clockTime(at: number): string {
+  const date = new Date(at);
+  return [date.getHours(), date.getMinutes()]
+    .map((part) => String(part).padStart(2, "0"))
+    .join(":");
+}
+
+export interface LeaseRowView {
+  readonly key: string;
+  readonly id: string;
+  readonly to: string;
+  readonly holder: string;
+  readonly remaining: string;
+  readonly expiring: boolean;
+  readonly percent: number;
+  readonly sub: string;
+  readonly platform?: string;
+}
+
+export function leaseRows(input: {
+  readonly leases: readonly LeaseRecord[];
+  readonly tokens: readonly TokenRecord[];
+  readonly workers: readonly WorkerView[];
+  readonly now: number;
+}): readonly LeaseRowView[] {
+  const { leases, now, tokens, workers } = input;
+  return inGrantOrder(leases).map((lease) => {
+    const device = deviceOfLease(lease, workers);
+    const sub = [device?.spec.model ?? lease.deviceId, workerNameOfLease(lease, workers)]
+      .filter((part) => part !== undefined)
+      .join(" · ");
+    return {
+      expiring: isExpiring(lease.ttlDeadline, now),
+      holder: holderTitle(holderOf(lease.requesterId, tokens)),
+      id: lease.id,
+      key: `${lease.workerId ?? ""} ${lease.id}`,
+      percent: percentLeft(lease.ttlDeadline, now, lease.ttlMs),
+      remaining: formatDuration(lease.ttlDeadline - now),
+      sub,
+      to: leasePath(lease.id),
+      ...(device === undefined ? {} : { platform: device.spec.platform }),
+    };
+  });
+}
+
+export function filterLeaseRows(
+  rows: readonly LeaseRowView[],
+  filter: LeaseFilter,
+): readonly LeaseRowView[] {
+  if (filter === "all") return rows;
+  if (filter === "expiring") return rows.filter((row) => row.expiring);
+  return rows.filter((row) => row.platform === filter);
 }
 
-export function leaseIdFrom(path: string): string | undefined {
-  const rest = path.replace(/^\/leases\/?/, "").replace(/\/$/, "");
-  if (rest === "") return undefined;
-  try {
-    return decodeURIComponent(rest);
-  } catch {
-    return rest;
+export interface StreamOffer {
+  readonly offered: boolean;
+  readonly reason?: string;
+}
+
+// why: a worker answers a stream request with a 404 when its `stream` capability is not on, so the
+// console says so before the click; a worker the console cannot see is left to the daemon's own
+// answer.
+export function streamOffer(worker: WorkerView | undefined): StreamOffer {
+  if (worker === undefined) return { offered: true };
+  const entry = worker.capabilities?.find((capability) => capability.name === "stream");
+  if (entry?.state === "available") return { offered: true };
+  const name = workerName(worker);
+  if (entry?.state === "unavailable") {
+    const reason = `Streaming is unavailable on ${name}. ${entry.reason ?? ""}`;
+    return { offered: false, reason: reason.trim() };
   }
+  return { offered: false, reason: `Streaming is off on ${name}.` };
+}
+
+export interface LeaseInspection {
+  readonly id: string;
+  readonly title: string;
+  readonly expiring: boolean;
+  readonly model: string;
+  readonly runtime?: string;
+  readonly worker?: { readonly name: string; readonly to?: string };
+  readonly remaining: string;
+  readonly percent?: number;
+  readonly heldFor: string;
+  readonly renewed: string;
+  readonly granted: string;
+  readonly device: {
+    readonly mode?: string;
+    readonly imageTag?: string;
+    readonly kind?: string;
+    readonly deviceId: string;
+    readonly udid: string;
+  };
+  readonly holder?: Holder;
+  readonly ownerId?: string;
+  readonly requestId?: string;
+  readonly stream: StreamOffer;
+}
+
+// why: `record` is the lease's entry in `GET /v1/leases`, which alone says who holds it and when it
+// was renewed; without it those facts show as missing and the rest still shows.
+export function leaseInspection(input: {
+  readonly lease: LeaseDetails;
+  readonly record: LeaseRecord | undefined;
+  readonly tokens: readonly TokenRecord[];
+  readonly workers: readonly WorkerView[];
+  readonly now: number;
+}): LeaseInspection {
+  const { lease, now, record, tokens, workers } = input;
+  const named = { worker: lease.worker, workerId: lease.workerId ?? record?.workerId };
+  const worker = workerOfLease(named, workers);
+  const workerLabel = workerNameOfLease(named, workers);
+  const device = worker?.devices?.find((candidate) => candidate.id === lease.deviceId);
+  const grantedAt = Date.parse(lease.createdAt);
+  const deadline = Date.parse(lease.expiresAt);
+  const holder = record === undefined ? undefined : holderOf(record.requesterId, tokens);
+  const imageTag = lease.imageTag ?? device?.spec.imageTag;
+  return {
+    device: {
+      deviceId: lease.deviceId,
+      udid: lease.udid,
+      ...(lease.mode === undefined ? {} : { mode: lease.mode }),
+      ...(imageTag === undefined ? {} : { imageTag }),
+      ...(device === undefined ? {} : { kind: device.physical ? "Physical" : "Virtual" }),
+    },
+    expiring: isExpiring(deadline, now),
+    granted: clockTime(grantedAt),
+    heldFor: formatDuration(now - grantedAt),
+    id: lease.id,
+    model: lease.device,
+    remaining: formatDuration(deadline - now),
+    renewed: record === undefined ? "—" : `${formatDuration(now - record.lastRenewedAt)} ago`,
+    stream: streamOffer(worker),
+    title: holder === undefined ? lease.id : holderTitle(holder),
+    ...(record === undefined ? {} : { percent: percentLeft(deadline, now, record.ttlMs) }),
+    ...(holder === undefined ? {} : { holder }),
+    ...(record !== undefined && record.ownerId !== record.requesterId
+      ? { ownerId: record.ownerId }
+      : {}),
+    ...(device === undefined ? {} : { runtime: device.spec.osVersion }),
+    ...(lease.requestId === undefined ? {} : { requestId: lease.requestId }),
+    ...(workerLabel === undefined
+      ? {}
+      : {
+          worker: {
+            name: workerLabel,
+            ...(worker === undefined ? {} : { to: workerPath(worker.id) }),
+          },
+        }),
+  };
 }
diff --git a/ui/src/model/screen.test.ts b/ui/src/model/screen.test.ts
new file mode 100644
index 000000000..577b657dc
--- /dev/null
+++ b/ui/src/model/screen.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+
+import { readout, type ScreenPhase } from "./screen";
+
+const NONE = { dropped: 0, framesPerSecond: 0, kilobitsPerSecond: 0, painted: 0 };
+const META = { codec: "mjpeg", height: 240, width: 120 };
+
+function state(phase: ScreenPhase, failed: boolean) {
+  return readout({ failed, meta: undefined, phase, stats: NONE }).state;
+}
+
+describe("the screen readout", () => {
+  it("shows every figure it cannot yet fill as missing", () => {
+    expect(readout({ failed: false, meta: undefined, phase: "idle", stats: NONE }).facts).toEqual([
+      { label: "Picture", value: "—" },
+      { label: "Frames", value: "—" },
+      { label: "Rate", value: "—" },
+      { label: "Bandwidth", value: "—" },
+      { label: "Dropped", value: "—" },
+    ]);
+  });
+
+  it("shows the picture's size once known, and the figures once a frame is painted", () => {
+    const stats = { dropped: 2, framesPerSecond: 4.96, kilobitsPerSecond: 812.4, painted: 31 };
+
+    expect(readout({ failed: false, meta: META, phase: "live", stats: NONE }).facts[0]?.value).toBe(
+      "120 × 240 mjpeg",
+    );
+    expect(
+      readout({ failed: false, meta: META, phase: "live", stats }).facts.map((fact) => fact.value),
+    ).toEqual(["120 × 240 mjpeg", "31", "5.0 fps", "812 kbit/s", "2"]);
+  });
+
+  it("names the state as a word with its tone, and a failure outranks the phase", () => {
+    expect(state("idle", false)).toEqual({ tone: "idle", word: "off" });
+    expect(state("stopped", false)).toEqual({ tone: "idle", word: "off" });
+    expect(state("starting", false)).toEqual({ tone: "idle", word: "starting" });
+    expect(state("live", false)).toEqual({ tone: "ok", word: "live" });
+    expect(state("live", true)).toEqual({ tone: "error", word: "failed" });
+  });
+});
diff --git a/ui/src/model/screen.ts b/ui/src/model/screen.ts
new file mode 100644
index 000000000..797318394
--- /dev/null
+++ b/ui/src/model/screen.ts
@@ -0,0 +1,52 @@
+import type { Toned } from "./tones";
+
+export type ScreenPhase = "idle" | "starting" | "live" | "stopped";
+
+export interface ScreenFact {
+  readonly label: string;
+  readonly value: string;
+}
+
+export interface Readout {
+  readonly state: Toned;
+  readonly facts: readonly ScreenFact[];
+}
+
+function stateOf(phase: ScreenPhase, failed: boolean): Toned {
+  if (failed) return { tone: "error", word: "failed" };
+  if (phase === "live") return { tone: "ok", word: "live" };
+  if (phase === "starting") return { tone: "idle", word: "starting" };
+  return { tone: "idle", word: "off" };
+}
+
+// why: a figure counts painted frames, so until the first one is painted every figure is missing
+// rather than a misleading zero.
+export function readout(input: {
+  readonly phase: ScreenPhase;
+  readonly failed: boolean;
+  readonly meta:
+    | { readonly width: number; readonly height: number; readonly codec: string }
+    | undefined;
+  readonly stats: {
+    readonly painted: number;
+    readonly framesPerSecond: number;
+    readonly kilobitsPerSecond: number;
+    readonly dropped: number;
+  };
+}): Readout {
+  const { failed, meta, phase, stats } = input;
+  const counted = (show: string) => (stats.painted === 0 ? "—" : show);
+  return {
+    facts: [
+      {
+        label: "Picture",
+        value: meta === undefined ? "—" : `${meta.width} × ${meta.height} ${meta.codec}`,
+      },
+      { label: "Frames", value: counted(String(stats.painted)) },
+      { label: "Rate", value: counted(`${stats.framesPerSecond.toFixed(1)} fps`) },
+      { label: "Bandwidth", value: counted(`${Math.round(stats.kilobitsPerSecond)} kbit/s`) },
+      { label: "Dropped", value: counted(String(stats.dropped)) },
+    ],
+    state: stateOf(phase, failed),
+  };
+}
diff --git a/ui/src/screens/leases/index.tsx b/ui/src/screens/leases/index.tsx
index 085f9f908..89e113141 100644
--- a/ui/src/screens/leases/index.tsx
+++ b/ui/src/screens/leases/index.tsx
@@ -1,9 +1,90 @@
-import { Empty, Page } from "../../ds";
+import "./leases.css";
+
+import {
+  ChoiceChips,
+  Empty,
+  InspectorEmpty,
+  List,
+  ListPane,
+  ListRow,
+  Loaded,
+  MasterDetail,
+  Meter,
+  Pager,
+} from "../../ds";
+import { LEASE_FILTERS, type LeaseFilter, type LeaseRowView, useLeases } from "../../state/leases";
+import { LeaseInspector } from "./inspector";
 
 export function LeasesScreen() {
+  const { choose, filter, paging, urlId, view } = useLeases();
+  const chosen = view.kind === "ready" ? view.data.chosen : urlId;
+  return (
+    <MasterDetail
+      focus={urlId === undefined ? "list" : "detail"}
+      list={
+        <ListPane
+          title="Leases"
+          meta={view.kind === "ready" ? `${view.data.held} held` : undefined}
+          toolbar={
+            <ChoiceChips
+              legend="Filter leases"
+              choices={LEASE_FILTERS}
+              value={filter}
+              onChange={choose}
+            />
+          }
+          footer={<Pager label="Leases" paging={paging} />}
+        >
+          <Loaded view={view}>
+            {(page) => <LeaseRows rows={page.rows} chosen={page.chosen} filter={filter} />}
+          </Loaded>
+        </ListPane>
+      }
+      detail={
+        chosen === undefined ? (
+          <InspectorEmpty>
+            {view.kind === "ready" ? "No leases." : "Select a lease."}
+          </InspectorEmpty>
+        ) : (
+          <LeaseInspector key={chosen} id={chosen} />
+        )
+      }
+    />
+  );
+}
+
+export function LeaseRows(props: {
+  readonly rows: readonly LeaseRowView[];
+  readonly chosen: string | undefined;
+  readonly filter: LeaseFilter;
+}) {
+  const { chosen, filter, rows } = props;
+  if (rows.length === 0) {
+    return <Empty>{filter === "all" ? "No leases." : "No leases match this filter."}</Empty>;
+  }
   return (
-    <Page title="Leases">
-      <Empty>Coming soon.</Empty>
-    </Page>
+    <List label="Leases">
+      {rows.map((row) => (
+        <ListRow
+          key={row.key}
+          to={row.to}
+          selected={row.id === chosen}
+          mono
+          title={row.holder}
+          aside={
+            <span className={row.expiring ? "lease-warn" : undefined}>
+              {row.expiring ? <span className="visually-hidden">expiring, </span> : null}
+              {row.remaining}
+            </span>
+          }
+          sub={row.sub}
+          trail={
+            <span className="lease-meter">
+              <Meter percent={row.percent} tone={row.expiring ? "warn" : "neutral"} size="thin" />
+            </span>
+          }
+        />
+      ))}
+    </List>
   );
 }
diff --git a/ui/src/screens/leases/inspector.tsx b/ui/src/screens/leases/inspector.tsx
new file mode 100644
index 000000000..e9f47c115
--- /dev/null
+++ b/ui/src/screens/leases/inspector.tsx
@@ -0,0 +1,150 @@
+import { type ReactNode, useId } from "react";
+
+import { Facts, Id, Inspector, InspectorEmpty, Link, Loaded, Meter, Status } from "../../ds";
+import { type LeaseInspection, useLeaseInspection } from "../../state/leases";
+import { ScreenPanel } from "./screen-panel";
+
+export function LeaseInspector({ id }: { readonly id: string }) {
+  const view = useLeaseInspection(id);
+  if (view.kind === "ready" && view.data === undefined) {
+    return (
+      <InspectorEmpty>
+        Lease not found. <Link to="/leases">All leases</Link>
+      </InspectorEmpty>
+    );
+  }
+  if (view.kind !== "ready") {
+    return (
+      <section className="inspector">
+        <Loaded view={view}>{() => null}</Loaded>
+      </section>
+    );
+  }
+  return (
+    <Loaded view={view}>
+      {(inspection) => (inspection === undefined ? null : <LeaseDetail lease={inspection} />)}
+    </Loaded>
+  );
+}
+
+export function LeaseDetail({ lease }: { readonly lease: LeaseInspection }) {
+  const { device, worker } = lease;
+  return (
+    <Inspector
+      crumbs={[{ label: "Leases", to: "/leases" }, { label: lease.id }]}
+      title={
+        <span className="lease-title">
+          {lease.title}
+          {lease.expiring ? <Status tone="warn">expiring</Status> : null}
+        </span>
+      }
+      mono
+      line={
+        <>
+          {lease.model}
+          {lease.runtime === undefined ? "" : ` ${lease.runtime}`}
+          {worker === undefined ? null : (
+            <>
+              {" on "}
+              <WorkerName worker={worker} />
+            </>
+          )}
+        </>
+      }
+    >
+      <div className="lease-body">
+        <div className="lease-cards">
+          <LeaseCard title="Expires in">
+            <p className={lease.expiring ? "lease-countdown lease-warn" : "lease-countdown"}>
+              <span role="timer">{lease.remaining}</span>
+            </p>
+            {lease.percent === undefined ? null : (
+              <Meter percent={lease.percent} tone={lease.expiring ? "warn" : "neutral"} />
+            )}
+            <dl className="lease-figures">
+              <Figure label="Held for" value={lease.heldFor} />
+              <Figure label="Renewed" value={lease.renewed} />
+              <Figure label="Granted" value={lease.granted} />
+            </dl>
+          </LeaseCard>
+          <LeaseCard title="Device">
+            <Facts
+              facts={[
+                { label: "Model", value: lease.model },
+                { label: "Runtime", value: lease.runtime ?? "—" },
+                { label: "Mode", value: device.mode ?? "—" },
+                {
+                  label: "Image tag",
+                  value: <span className="mono">{device.imageTag ?? "—"}</span>,
+                },
+                { label: "Kind", value: device.kind ?? "—" },
+                {
+                  label: "Worker",
+                  value: worker === undefined ? "—" : <WorkerName worker={worker} />,
+                },
+                { label: "Device id", value: <Id>{device.deviceId}</Id> },
+                { label: "UDID", value: <span className="mono">{device.udid}</span> },
+              ]}
+            />
+          </LeaseCard>
+          <LeaseCard title="Lease">
+            <Facts
+              facts={[
+                { label: "Lease id", value: <Id>{lease.id}</Id> },
+                ...(lease.requestId === undefined
+                  ? []
+                  : [{ label: "Request", value: <span className="mono">{lease.requestId}</span> }]),
+                {
+                  label: "Holder",
+                  value:
+                    lease.holder === undefined ? (
+                      "—"
+                    ) : lease.holder.label === undefined ? (
+                      <span className="mono">{lease.holder.id}</span>
+                    ) : (
+                      <>
+                        {lease.holder.label} <span className="muted mono">{lease.holder.id}</span>
+                      </>
+                    ),
+                },
+                ...(lease.ownerId === undefined
+                  ? []
+                  : [{ label: "Owner", value: <span className="mono">{lease.ownerId}</span> }]),
+              ]}
+            />
+          </LeaseCard>
+        </div>
+        <ScreenPanel
+          leaseId={lease.id}
+          offered={lease.stream.offered}
+          reason={lease.stream.reason}
+        />
+      </div>
+    </Inspector>
+  );
+}
+
+function WorkerName({ worker }: { readonly worker: NonNullable<LeaseInspection["worker"]> }) {
+  return worker.to === undefined ? <>{worker.name}</> : <Link to={worker.to}>{worker.name}</Link>;
+}
+
+function LeaseCard(props: { readonly title: string; readonly children: ReactNode }) {
+  const id = useId();
+  return (
+    <section className="card lease-card" aria-labelledby={id}>
+      <h3 id={id} className="lease-card-title">
+        {props.title}
+      </h3>
+      {props.children}
+    </section>
+  );
+}
+
+function Figure({ label, value }: { readonly label: string; readonly value: string }) {
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd className="mono">{value}</dd>
+    </div>
+  );
+}
diff --git a/ui/src/screens/leases/leases.css b/ui/src/screens/leases/leases.css
new file mode 100644
index 000000000..7d1c92d5c
--- /dev/null
+++ b/ui/src/screens/leases/leases.css
@@ -0,0 +1,154 @@
+.lease-warn {
+  color: var(--status-warn);
+}
+
+.lease-meter {
+  display: block;
+  width: 4rem;
+}
+
+.lease-title {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.lease-title .status {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 400;
+}
+
+/* Two columns once there is room: the cards on the left, the phone on the right. On a narrower
+ * pane the phone comes first, since the picture is what an operator opens a lease for. */
+.lease-body {
+  display: grid;
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.lease-body > .screen-panel {
+  order: -1;
+}
+
+@media (min-width: 1200px) {
+  .lease-body {
+    grid-template-columns: minmax(0, 1fr) 20rem;
+  }
+
+  .lease-body > .screen-panel {
+    order: 0;
+  }
+}
+
+.lease-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.lease-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.lease-card-title {
+  margin: 0;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+}
+
+.lease-countdown {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xl);
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.lease-figures {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  gap: var(--space-3);
+  margin: 0;
+}
+
+.lease-figures dt {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+.lease-figures dd {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+.screen-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+  padding: var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.screen-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.screen-head .button:disabled {
+  cursor: not-allowed;
+}
+
+.screen-reason {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
+/* The picture sits in a phone-shaped frame; the canvas keeps the ratio it was painted at inside
+ * it, so a landscape picture letterboxes rather than stretches. */
+.phone {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 300px;
+  margin: 0 auto;
+  aspect-ratio: 9 / 19.5;
+  background: var(--field);
+  border: 1px solid var(--border-strong);
+}
+
+.phone-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.phone-off,
+.phone-wait {
+  margin: 0;
+  padding: var(--space-4);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+
+.phone-wait {
+  position: absolute;
+  inset: auto 0 0;
+  background: var(--field);
+}
diff --git a/ui/src/screens/leases/leases.test.tsx b/ui/src/screens/leases/leases.test.tsx
new file mode 100644
index 000000000..c6eee85ab
--- /dev/null
+++ b/ui/src/screens/leases/leases.test.tsx
@@ -0,0 +1,250 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import type { ApiClient, Fetch } from "../../data/api";
+import type { Preferences } from "../../data/preferences";
+import type { Session } from "../../data/session";
+import { ConsoleProvider } from "../../state/services";
+import type { LeaseInspection, LeaseRowView } from "../../state/leases";
+import type { Screen } from "../../state/screen";
+import { LeaseRows } from "./index";
+import { LeaseDetail } from "./inspector";
+import { ScreenView } from "./screen-panel";
+
+// why: a panel rendered for a claim about its markup never talks to a daemon, so the services it
+// reads are there to satisfy the context, and a call into either would be the finding.
+function inConsole(node: ReactNode): string {
+  const services = {
+    api: {} as unknown as ApiClient,
+    fetch: (() => Promise.reject(new Error("unused"))) as unknown as Fetch,
+    preferences: {} as unknown as Preferences,
+    session: {} as unknown as Session,
+  };
+  return renderToStaticMarkup(<ConsoleProvider {...services}>{node}</ConsoleProvider>);
+}
+
+function text(html: string): string {
+  return html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function row(overrides: Partial<LeaseRowView> = {}): LeaseRowView {
+  return {
+    expiring: false,
+    holder: "ci-runner-3",
+    id: "lse_1",
+    key: " lse_1",
+    percent: 50,
+    remaining: "2 min 5 s",
+    sub: "iPhone 16 · mac-mini-1",
+    to: "/leases/lse_1/",
+    ...overrides,
+  };
+}
+
+function inspection(overrides: Partial<LeaseInspection> = {}): LeaseInspection {
+  return {
+    device: {
+      deviceId: "dev_1",
+      imageTag: "base",
+      kind: "Virtual",
+      mode: "slim",
+      udid: "ABCD-1234",
+    },
+    expiring: false,
+    granted: "11:58",
+    heldFor: "1 min 30 s",
+    holder: { id: "tok_1", label: "ci-runner-3" },
+    id: "lse_1",
+    model: "iPhone 16",
+    percent: 50,
+    remaining: "2 min 5 s",
+    renewed: "30 s ago",
+    requestId: "req_7d1a",
+    runtime: "18.4",
+    stream: { offered: true },
+    title: "ci-runner-3",
+    worker: { name: "mac-mini-1", to: "/workers/wrk_host" },
+    ...overrides,
+  };
+}
+
+const IDLE: Screen = {
+  canvas: { current: null },
+  height: 0,
+  live: false,
+  note: undefined,
+  readout: {
+    facts: [
+      { label: "Picture", value: "—" },
+      { label: "Frames", value: "—" },
+      { label: "Rate", value: "—" },
+      { label: "Bandwidth", value: "—" },
+      { label: "Dropped", value: "—" },
+    ],
+    state: { tone: "idle", word: "off" },
+  },
+  start: () => undefined,
+  stop: () => undefined,
+  waiting: undefined,
+  width: 0,
+};
+
+describe("the lease list", () => {
+  it("shows each lease's holder, time left, device and worker, and links to it", () => {
+    const html = renderToStaticMarkup(<LeaseRows rows={[row()]} chosen={undefined} filter="all" />);
+
+    expect(text(html)).toBe("ci-runner-3 2 min 5 s iPhone 16 · mac-mini-1");
+    expect(html).toContain('href="/leases/lse_1/"');
+  });
+
+  it("marks the chosen row as current, and no other", () => {
+    const html = renderToStaticMarkup(
+      <LeaseRows
+        rows={[row(), row({ id: "lse_2", key: " lse_2", to: "/leases/lse_2/" })]}
+        chosen="lse_2"
+        filter="all"
+      />,
+    );
+
+    const current = [...html.matchAll(/<a [^>]*>/g)]
+      .map(([tag = ""]) => tag)
+      .filter((tag) => tag.includes('aria-current="page"'));
+
+    expect(current).toHaveLength(1);
+    expect(current[0]).toContain('href="/leases/lse_2/"');
+  });
+
+  it("says in words that a lease is expiring, not only in colour", () => {
+    const expiring = text(
+      renderToStaticMarkup(
+        <LeaseRows rows={[row({ expiring: true, remaining: "4 min" })]} chosen="x" filter="all" />,
+      ),
+    );
+    const fine = text(renderToStaticMarkup(<LeaseRows rows={[row()]} chosen="x" filter="all" />));
+
+    expect(expiring).toContain("expiring, 4 min");
+    expect(fine).not.toContain("expiring");
+  });
+
+  it("says there are no leases, or none matching the filter", () => {
+    expect(
+      text(renderToStaticMarkup(<LeaseRows rows={[]} chosen={undefined} filter="all" />)),
+    ).toBe("No leases.");
+    expect(
+      text(renderToStaticMarkup(<LeaseRows rows={[]} chosen={undefined} filter="ios" />)),
+    ).toBe("No leases match this filter.");
+  });
+});
+
+describe("a lease's inspector", () => {
+  it("shows the holder as its title with no expiring word while the lease has time", () => {
+    const html = inConsole(<LeaseDetail lease={inspection()} />);
+
+    expect(html).toMatch(/<h2[^>]*>[^<]*<span class="lease-title">ci-runner-3<\/span>/);
+    expect(text(html)).toContain("iPhone 16 18.4 on mac-mini-1");
+    expect(text(html)).not.toContain("expiring");
+  });
+
+  it("shows an expiring status next to the title once the lease is under 15 minutes from its end", () => {
+    const html = inConsole(<LeaseDetail lease={inspection({ expiring: true })} />);
+
+    expect(html).toMatch(/<h2[^>]*>.*ci-runner-3.*status-warn.*expiring/);
+  });
+
+  it("shows every fact the old details panel showed, in its cards", () => {
+    const html = text(inConsole(<LeaseDetail lease={inspection()} />));
+
+    expect(html).toContain("Expires in 2 min 5 s");
+    expect(html).toContain("Held for 1 min 30 s");
+    expect(html).toContain("Renewed 30 s ago");
+    expect(html).toContain("Granted 11:58");
+    expect(html).toContain("Mode slim");
+    expect(html).toContain("Image tag base");
+    expect(html).toContain("Worker mac-mini-1");
+    expect(html).toContain("UDID ABCD-1234");
+    expect(html).toContain("Request req_7d1a");
+    expect(html).toContain("Holder ci-runner-3 tok_1");
+  });
+
+  it("leaves out the request when there is none, and shows a physical device's mode as missing", () => {
+    const { requestId: _dropped, ...bare } = inspection();
+    const { mode: _mode, imageTag: _tag, ...device } = inspection().device;
+
+    const html = text(
+      inConsole(<LeaseDetail lease={{ ...bare, device: { ...device, kind: "Physical" } }} />),
+    );
+
+    expect(html).not.toContain("Request");
+    expect(html).toContain("Mode — Image tag — Kind Physical");
+  });
+});
+
+describe("the screen panel before anything is asked for", () => {
+  it("offers the one control a screen has and says there is no picture while it is off", () => {
+    const html = renderToStaticMarkup(<ScreenView screen={IDLE} offered reason={undefined} />);
+
+    expect(html).toContain("Show screen");
+    expect(html).not.toContain("disabled");
+    expect(html).toContain("No picture while this is off.");
+    expect(html).not.toContain("<canvas");
+  });
+
+  it("shows the state as a word, and every figure it cannot yet fill as missing", () => {
+    const html = renderToStaticMarkup(<ScreenView screen={IDLE} offered reason={undefined} />);
+    const words = [...html.matchAll(/<dt>([^<]*)<\/dt><dd[^>]*>(.*?)<\/dd>/g)].map(
+      ([, label = "", value = ""]) => `${label}=${text(value)}`,
+    );
+
+    expect(words).toEqual([
+      "State=off",
+      "Picture=—",
+      "Frames=—",
+      "Rate=—",
+      "Bandwidth=—",
+      "Dropped=—",
+    ]);
+  });
+
+  it("disables Show screen and says why before any click when the worker has streaming off", () => {
+    const html = renderToStaticMarkup(
+      <ScreenView screen={IDLE} offered={false} reason="Streaming is off on mac-mini-1." />,
+    );
+
+    expect(html).toMatch(/<button[^>]*disabled=""[^>]*>Show screen<\/button>/);
+    expect(text(html)).toContain("Streaming is off on mac-mini-1.");
+  });
+});
+
+describe("the screen panel while a picture is asked for", () => {
+  const live: Screen = {
+    ...IDLE,
+    height: 240,
+    live: true,
+    readout: { ...IDLE.readout, state: { tone: "ok", word: "live" } },
+    waiting: "Waiting for the first frame.",
+    width: 120,
+  };
+
+  it("offers Stop, mounts the canvas, and says it is waiting for the first frame", () => {
+    const html = renderToStaticMarkup(<ScreenView screen={live} offered reason={undefined} />);
+
+    expect(html).toContain(">Stop<");
+    expect(html).toContain('aria-label="The leased device&#x27;s screen"');
+    expect(html).toContain("Waiting for the first frame.");
+    expect(html).not.toContain("No picture while this is off.");
+  });
+
+  it("shows a refusal as an alert, and no canvas, once the stream has stopped", () => {
+    const html = renderToStaticMarkup(
+      <ScreenView screen={{ ...IDLE, note: "Unknown lease: lse_1" }} offered reason={undefined} />,
+    );
+
+    expect(html).toContain('role="alert"');
+    expect(html).toContain("Unknown lease: lse_1");
+    expect(html).not.toContain("<canvas");
+  });
+});
diff --git a/ui/src/screens/leases/screen-panel.tsx b/ui/src/screens/leases/screen-panel.tsx
new file mode 100644
index 000000000..e531f9684
--- /dev/null
+++ b/ui/src/screens/leases/screen-panel.tsx
@@ -0,0 +1,74 @@
+import { useId } from "react";
+
+import { Button, Facts, Refusal, Status } from "../../ds";
+import { type Screen, useScreen } from "../../state/screen";
+
+// why: the hook lives in the panel's own component so that closing the page, leaving the lease and
+// pressing Stop all end the same capture, and a panel that is not drawn never starts one.
+export function ScreenPanel(props: {
+  readonly leaseId: string;
+  readonly offered: boolean;
+  readonly reason: string | undefined;
+}) {
+  const screen = useScreen(props.leaseId);
+  return <ScreenView screen={screen} offered={props.offered} reason={props.reason} />;
+}
+
+export function ScreenView(props: {
+  readonly screen: Screen;
+  readonly offered: boolean;
+  readonly reason: string | undefined;
+}) {
+  const { offered, reason, screen } = props;
+  const { live, note, readout, waiting } = screen;
+  const title = useId();
+  const why = useId();
+  return (
+    <section className="screen-panel" aria-labelledby={title}>
+      <header className="screen-head">
+        <h3 id={title} className="lease-card-title">
+          Screen
+        </h3>
+        <Button
+          disabled={!offered}
+          aria-describedby={offered ? undefined : why}
+          onClick={live ? screen.stop : screen.start}
+        >
+          {live ? "Stop" : "Show screen"}
+        </Button>
+      </header>
+      {offered || reason === undefined ? null : (
+        <p id={why} className="muted screen-reason">
+          {reason}
+        </p>
+      )}
+      <div className="phone">
+        {live ? (
+          <canvas
+            aria-label="The leased device's screen"
+            className="phone-canvas"
+            height={screen.height}
+            ref={screen.canvas}
+            width={screen.width}
+          />
+        ) : (
+          <p className="phone-off">No picture while this is off.</p>
+        )}
+        {waiting === undefined ? null : <p className="phone-wait">{waiting}</p>}
+      </div>
+      <Facts
+        facts={[
+          {
+            label: "State",
+            value: <Status tone={readout.state.tone}>{readout.state.word}</Status>,
+          },
+          ...readout.facts.map((fact) => ({
+            label: fact.label,
+            value: <span className="mono">{fact.value}</span>,
+          })),
+        ]}
+      />
+      {note === undefined ? null : <Refusal message={note} />}
+    </section>
+  );
+}
diff --git a/ui/src/state/leases.ts b/ui/src/state/leases.ts
new file mode 100644
index 000000000..589dc4f19
--- /dev/null
+++ b/ui/src/state/leases.ts
@@ -0,0 +1,110 @@
+import { useState } from "react";
+
+import { ApiError } from "../data/api";
+import type { LoadView } from "../ds/loaded";
+import type { Paging } from "../ds/pager";
+import {
+  filterLeaseRows,
+  type LeaseDetails,
+  type LeaseFilter,
+  type LeaseInspection,
+  type LeaseList,
+  type LeaseRowView,
+  leaseInspection,
+  leaseRows,
+  type TokenList,
+} from "../model/leases";
+import { TABLE_SIZES } from "../model/paging";
+import { itemIdFrom } from "../model/paths";
+import type { WorkerList } from "../model/workers";
+import { useLiveResource, useNow } from "./live";
+import { usePaging } from "./paging";
+import { loadView, mapView } from "./resource";
+import { usePath } from "./router";
+
+export {
+  LEASE_FILTERS,
+  type LeaseFilter,
+  type LeaseInspection,
+  type LeaseRowView,
+} from "../model/leases";
+export type { Readout } from "../model/screen";
+
+export interface LeasesPage {
+  readonly rows: readonly LeaseRowView[];
+  readonly held: number;
+  // why: the id the inspector shows: the one the URL names, or on a wide screen with none, the
+  // first row of the list, without rewriting the URL.
+  readonly chosen: string | undefined;
+}
+
+export interface Leases {
+  readonly view: LoadView<LeasesPage>;
+  readonly filter: LeaseFilter;
+  readonly choose: (filter: LeaseFilter) => void;
+  readonly paging: Paging;
+  // why: the id in the URL stands even before the list has loaded, so the inspector can ask for it.
+  readonly urlId: string | undefined;
+}
+
+// why: tokens and workers only name what the leases already show, so while they have not arrived
+// or were refused a holder shows its id alone and the leases still show.
+export function useLeases(): Leases {
+  const urlId = itemIdFrom("/leases", usePath());
+  const leases = loadView(useLiveResource<LeaseList>("/v1/leases"));
+  const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
+  const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers ?? [];
+  const now = useNow();
+  const [filter, setFilter] = useState<LeaseFilter>("all");
+  const all = mapView(leases, (list) =>
+    leaseRows({ leases: list.leases, now: now.server, tokens, workers }),
+  );
+  const shown = all.kind === "ready" ? filterLeaseRows(all.data, filter) : [];
+  const paging = usePaging({
+    sizes: TABLE_SIZES,
+    total: all.kind === "ready" ? shown.length : undefined,
+  });
+  const start = (paging.page - 1) * paging.size;
+  const rows = shown.slice(start, start + paging.size);
+  const view = mapView(all, (every) => ({
+    chosen: urlId ?? rows[0]?.id,
+    held: every.length,
+    rows,
+  }));
+  return {
+    choose: (next) => {
+      setFilter(next);
+      if (paging.page !== 1) paging.go(1);
+    },
+    filter,
+    paging,
+    urlId,
+    view,
+  };
+}
+
+function isUnknownLease(error: unknown): boolean {
+  return error instanceof ApiError && error.status === 404 && error.code === "UNKNOWN_LEASE";
+}
+
+// why: a lease that was released or has expired is gone, and the page says so instead of keeping
+// the details it last held; `undefined` is that answer.
+export function useLeaseInspection(id: string): LoadView<LeaseInspection | undefined> {
+  const details = useLiveResource<{ readonly lease: LeaseDetails }>(
+    `/v1/leases/${encodeURIComponent(id)}`,
+  );
+  const list = useLiveResource<LeaseList>("/v1/leases").data?.leases ?? [];
+  const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
+  const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers ?? [];
+  const now = useNow();
+  if (isUnknownLease(details.error)) return { data: undefined, kind: "ready" };
+  return mapView(loadView(details), ({ lease }) =>
+    leaseInspection({
+      lease,
+      now: now.server,
+      record: list.find((candidate) => candidate.id === lease.id),
+      tokens,
+      workers,
+    }),
+  );
+}
diff --git a/ui/src/state/screen.test.ts b/ui/src/state/screen.test.ts
new file mode 100644
index 000000000..79ef4e2a1
--- /dev/null
+++ b/ui/src/state/screen.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+
+import { ApiError } from "../data/api";
+import { refusalOf } from "./screen";
+
+describe("what a refused stream says", () => {
+  it("says which devices can be streamed when the daemon answers that this one cannot", () => {
+    const refused = new ApiError(
+      415,
+      undefined,
+      "A physical iPhone's screen cannot be streamed; only a simulator's can",
+    );
+
+    expect(refusalOf(refused)).toBe(
+      "This device cannot be streamed. A live screen is captured from a simulator or an emulator, not from a physical phone.",
+    );
+  });
+
+  it("keeps the daemon's own reason when it named one, and says what else to check", () => {
+    const refused = new ApiError(404, undefined, "Unknown lease: lse_1");
+
+    expect(refusalOf(refused)).toBe(
+      "Unknown lease: lse_1 A stream is only offered where capabilities.stream.enabled is on, and only for a lease that is still held.",
+    );
+  });
+
+  it("keeps a capture program's own words when the worker could not run one", () => {
+    const refused = new ApiError(
+      500,
+      undefined,
+      "The screen capture produced no stream (the capture tool exited with code 1)",
+    );
+
+    expect(refusalOf(refused)).toBe(
+      "The screen capture produced no stream (the capture tool exited with code 1)",
+    );
+  });
+
+  it("keeps the daemon's words for a refusal this console has no advice about", () => {
+    expect(refusalOf(new ApiError(401, "UNAUTHENTICATED", "Unknown bearer token"))).toBe(
+      "Unknown bearer token",
+    );
+  });
+
+  it("says what the browser itself threw, rather than that something went wrong", () => {
+    expect(refusalOf(new TypeError("Failed to fetch"))).toBe("Failed to fetch");
+    expect(refusalOf("nope")).toBe("nope");
+  });
+});
diff --git a/ui/src/state/screen.ts b/ui/src/state/screen.ts
new file mode 100644
index 000000000..4e92ead7f
--- /dev/null
+++ b/ui/src/state/screen.ts
@@ -0,0 +1,166 @@
+/**
+ * why: one button turns a device's picture on and off and nothing else controls it, because this
+ * surface has no command of its own to send — the request *is* the on command and aborting it *is* the
+ * off one. So the pane's lifecycle is the capture's lifecycle: closing the page, navigating away,
+ * signing out and pressing Stop are four ways of doing the same single thing, and a capture cannot
+ * outlive the pane that asked for it. That is also why nothing here polls, retries, or holds a stream
+ * open across a navigation.
+ */
+import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+
+import { ApiError } from "../data/api";
+import { readStream, type StreamMeta, type StreamStats } from "../data/stream";
+import { type Readout, readout, type ScreenPhase } from "../model/screen";
+import { useApi } from "./services";
+
+export type { Readout } from "../model/screen";
+
+const EMPTY: StreamStats = {
+  dropped: 0,
+  error: undefined,
+  fed: 0,
+  framesPerSecond: 0,
+  kilobitsPerSecond: 0,
+  painted: 0,
+};
+
+// why: a worker answers a stream's headers only once its capture wrote its first frame, and it may
+// take up to 75 s to give up (an emulator's push 30 s, its server 15 s, the first frame 30 s); a
+// console that gave up at the API's usual 10 s would show its own timeout instead of the worker's
+// reason.
+const STREAM_HEAD_TIMEOUT_MS = 90_000;
+
+export interface Screen {
+  readonly canvas: RefObject<HTMLCanvasElement | null>;
+  readonly width: number;
+  readonly height: number;
+  readonly live: boolean;
+  readonly waiting: string | undefined;
+  readonly readout: Readout;
+  readonly note: string | undefined;
+  readonly start: () => void;
+  readonly stop: () => void;
+}
+
+export function useScreen(leaseId: string): Screen {
+  const api = useApi();
+  const canvas = useRef<HTMLCanvasElement | null>(null);
+  const controller = useRef<AbortController | undefined>(undefined);
+  const [phase, setPhase] = useState<ScreenPhase>("idle");
+  const [meta, setMeta] = useState<StreamMeta | undefined>(undefined);
+  const [stats, setStats] = useState<StreamStats>(EMPTY);
+  const [note, setNote] = useState<string | undefined>(undefined);
+
+  const stop = useCallback(() => {
+    controller.current?.abort();
+    controller.current = undefined;
+    setPhase("stopped");
+  }, []);
+
+  // why: leaving the page stops the capture with the same abort the Stop button performs — a page that
+  // was navigated away from must not leave a device being filmed for a viewer that is no longer there.
+  // Navigating to another lease is that same event, and asks for the other lease's picture instead.
+  useEffect(() => stop, [leaseId, stop]);
+
+  const start = useCallback(() => {
+    const abort = new AbortController();
+    controller.current = abort;
+    setNote(undefined);
+    setMeta(undefined);
+    setStats(EMPTY);
+    setPhase("starting");
+    void (async () => {
+      try {
+        const { body } = await api.stream(
+          `/v1/stream/leases/${encodeURIComponent(leaseId)}`,
+          abort.signal,
+          STREAM_HEAD_TIMEOUT_MS,
+        );
+        setPhase("live");
+        await readStream(
+          body,
+          {
+            onEnd: (reason) => {
+              // why: a stream that ended because this pane asked it to says nothing — the operator
+              // pressed Stop, and telling them the stream they stopped has stopped is noise.
+              if (abort.signal.aborted) return;
+              setNote(reason ?? "The stream ended.");
+              setPhase("stopped");
+            },
+            onFrame: (frame) => {
+              paint(canvas.current, frame.displayWidth, frame.displayHeight, frame);
+              frame.close();
+            },
+            onImage: (image) => paint(canvas.current, image.width, image.height, image),
+            onMeta: setMeta,
+            onStats: setStats,
+          },
+          abort.signal,
+        );
+      } catch (error) {
+        if (abort.signal.aborted) return;
+        setNote(refusalOf(error));
+        setPhase("stopped");
+      }
+    })();
+  }, [api, leaseId]);
+
+  // why: the canvas is mounted as soon as a picture has been asked for rather than when the first frame
+  // arrives — a frame can arrive before React has painted anything, and a pane that mounts its canvas
+  // in reply to that frame has nothing to draw the first picture on. It goes away with the stream
+  // rather than staying: a last frame kept on the page after Stop looks like a live device and shows a
+  // screen its viewer has already asked not to see.
+  const live = phase === "live" || phase === "starting";
+  const failure = stats.error ?? (phase === "stopped" ? note : undefined);
+  const waiting = live && stats.painted === 0;
+  const waitingNote =
+    phase === "starting" ? "Starting the capture on the worker." : "Waiting for the first frame.";
+  return {
+    canvas,
+    height: meta?.height ?? 0,
+    live,
+    note,
+    readout: readout({ failed: failure !== undefined, meta, phase, stats }),
+    start,
+    stop,
+    waiting: waiting ? waitingNote : undefined,
+    width: meta?.width ?? 0,
+  };
+}
+
+/**
+ * why: the daemon names its reason in its own words and those words are kept, because they say what its
+ * operator has to fix; the status only decides what to add, since a refusal the console can explain
+ * better than the daemon did — a device that cannot be streamed at all — would otherwise leave the
+ * reader with a sentence that does not say what to do.
+ */
+export function refusalOf(error: unknown): string {
+  if (!(error instanceof ApiError)) {
+    return error instanceof Error ? error.message : String(error);
+  }
+  // why: an unknown route and an unknown lease are the same answer, because a daemon with
+  // `capabilities.stream.enabled` off does not mount the route at all and answers like any path it has not heard of.
+  if (error.status === 404) {
+    return `${error.message} A stream is only offered where capabilities.stream.enabled is on, and only for a lease that is still held.`;
+  }
+  if (error.status === 415) {
+    return "This device cannot be streamed. A live screen is captured from a simulator or an emulator, not from a physical phone.";
+  }
+  return error.message;
+}
+
+function paint(
+  target: HTMLCanvasElement | null,
+  width: number,
+  height: number,
+  source: CanvasImageSource,
+): void {
+  // why: the canvas goes away with the stream, and a frame the decoder was still holding arrives after
+  // that; drawing into nothing is what a stream ending looks like from here.
+  if (target === null) return;
+  if (target.width !== width || target.height !== height) {
+    target.width = width;
+    target.height = height;
+  }
+  target.getContext("2d")?.drawImage(source, 0, 0);
+}

From 5e4f6d9f1beeea40c3b7b4172a94db2e38e32a99 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:32:17 +0200
Subject: [PATCH 12/32] refactor(ui): a chart takes its height, and the events
 strip asks for 96px

---
 ui/src/ds/chart.tsx              | 5 +++--
 ui/src/screens/events/events.css | 6 ------
 ui/src/screens/events/index.tsx  | 8 +++++++-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/ui/src/ds/chart.tsx b/ui/src/ds/chart.tsx
index d077da0ac..887675dfb 100644
--- a/ui/src/ds/chart.tsx
+++ b/ui/src/ds/chart.tsx
@@ -30,8 +30,9 @@ export function MinuteChart(props: {
   readonly title: string;
   readonly unit: string;
   readonly minutes: readonly MinuteCount[];
+  readonly height?: number;
 }) {
-  const { kind, minutes, title, unit } = props;
+  const { height = HEIGHT, kind, minutes, title, unit } = props;
   const data = [...minutes];
   const axes = (
     <>
@@ -47,7 +48,7 @@ export function MinuteChart(props: {
   );
   return (
     <div className={`chart chart-${kind}`}>
-      <ResponsiveContainer width="100%" height={HEIGHT}>
+      <ResponsiveContainer width="100%" height={height}>
         {kind === "area" ? (
           <AreaChart data={data} margin={MARGIN} title={title}>
             {axes}
diff --git a/ui/src/screens/events/events.css b/ui/src/screens/events/events.css
index d8a58b1dc..eb717478f 100644
--- a/ui/src/screens/events/events.css
+++ b/ui/src/screens/events/events.css
@@ -4,12 +4,6 @@
   min-width: 0;
 }
 
-/* why: the shared chart draws 240px tall, which is the whole list head here; the container takes its
- * height from an inline style, so only a stronger rule can make it a strip. */
-.events-chart .recharts-responsive-container {
-  height: 96px !important;
-}
-
 .events-chart .chart-summary {
   color: var(--text-muted);
   font-size: var(--text-xs);
diff --git a/ui/src/screens/events/index.tsx b/ui/src/screens/events/index.tsx
index 628724c60..ed3afa75f 100644
--- a/ui/src/screens/events/index.tsx
+++ b/ui/src/screens/events/index.tsx
@@ -117,7 +117,13 @@ function EventList(props: {
 function PerMinute({ chart }: { readonly chart: EventsChart }) {
   return (
     <div className="events-chart">
-      <MinuteChart kind="columns" title="Events per minute" unit="events" minutes={chart.minutes} />
+      <MinuteChart
+        kind="columns"
+        title="Events per minute"
+        unit="events"
+        minutes={chart.minutes}
+        height={96}
+      />
       <p className="chart-summary">{chart.summary}</p>
       <MinuteTable minutes={chart.minutes} heading="Events" />
     </div>

From 58813744800329e0543b8998079e0b9fa052c000 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:36:20 +0200
Subject: [PATCH 13/32] feat(ui): the attention page is a list with an
 inspector

---
 e2e/console/attention.spec.ts           | 119 +++++++--
 ui/src/model/attention.test.ts          | 329 ++++++++++++++++++++++++
 ui/src/model/attention.ts               | 194 +++++++++++++-
 ui/src/screens/attention/attention.css  |  76 ++++++
 ui/src/screens/attention/index.test.tsx |  64 +++++
 ui/src/screens/attention/index.tsx      | 131 +++++++++-
 ui/src/state/attention.ts               |  44 ++++
 7 files changed, 915 insertions(+), 42 deletions(-)
 create mode 100644 ui/src/model/attention.test.ts
 create mode 100644 ui/src/screens/attention/attention.css
 create mode 100644 ui/src/screens/attention/index.test.tsx
 create mode 100644 ui/src/state/attention.ts

diff --git a/e2e/console/attention.spec.ts b/e2e/console/attention.spec.ts
index 76af7a3cc..7bacd7584 100644
--- a/e2e/console/attention.spec.ts
+++ b/e2e/console/attention.spec.ts
@@ -131,18 +131,26 @@ async function strandProvisioning(
 async function openAttention(page: Page, daemon: RunningDaemon): Promise<void> {
   await page.goto(daemon.url);
   await signIn(page, daemon.tokens.operator);
-  await page.getByRole("link", { name: "Attention" }).click();
+  // why: a phone folds the navigation into a menu, so the page is opened by its address.
+  await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
+  await page.goto(new URL("/attention", daemon.url).href);
   await expect(page.getByRole("heading", { level: 1, name: "Attention" })).toBeVisible();
 }
 
-/** The item for `condition` about the worker or device named `subject`. */
+function rows(page: Page): Locator {
+  return page.getByRole("list", { name: "Needs attention" }).getByRole("link");
+}
+
 function item(page: Page, condition: string, subject: string): Locator {
-  return page
-    .locator(".attention-table tbody tr")
-    .filter({ has: page.locator(".status", { hasText: new RegExp(`^${condition}$`) }) })
+  return rows(page)
+    .filter({ has: page.getByRole("img", { exact: true, name: condition }) })
     .filter({ hasText: subject });
 }
 
+function facts(page: Page): Locator {
+  return page.getByRole("group", { name: "Facts" });
+}
+
 /** Whether the page itself scrolls sideways. */
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
   return page.evaluate(
@@ -169,11 +177,23 @@ test.describe("the attention view", () => {
 
       const drained = item(page, "drained", "worker-b");
       await expect(drained).toBeVisible({ timeout: 1_000 });
-      await expect(drained.getByRole("link", { name: "worker-b" })).toHaveAttribute(
+      await expect(drained).toHaveAttribute(
+        "href",
+        `/attention/${encodeURIComponent(`${b?.id}/drained`)}`,
+      );
+      await expect(rows(page)).toHaveCount(1);
+      await expect(page).toHaveURL(/\/attention$/);
+      await expect(page.getByRole("heading", { level: 2, name: "worker-b" })).toBeVisible();
+      await expect(page.getByRole("link", { name: "Open worker" })).toHaveAttribute(
         "href",
         `/workers/${encodeURIComponent(b?.id ?? "")}`,
       );
-      await expect(page.locator(".attention-table tbody tr")).toHaveCount(1);
+      await expect(facts(page)).toContainText("Leases still held");
+      const recent = page.getByRole("region", { name: "Recent events" });
+      await expect(recent.getByRole("link", { name: /worker\.drain-started/ })).toHaveAttribute(
+        "href",
+        /^\/events\/.+/,
+      );
     } finally {
       await disposeFleet(fleet);
     }
@@ -198,6 +218,30 @@ test.describe("the attention view", () => {
     }
   });
 
+  test("an item named in the URL that stops needing attention says Resolved. with a link back", async ({
+    page,
+  }) => {
+    const fleet = await startFleet([{ driverScript: { ios: IOS }, label: "worker-a" }]);
+    try {
+      const [a] = await workers(fleet.gateway);
+      expect((await fleet.gateway.cli(["worker", "drain", a?.id ?? ""])).code).toBe(0);
+      await openAttention(page, fleet.gateway);
+      await item(page, "drained", "worker-a").click();
+      await expect(page).toHaveURL(/\/attention\/.+/);
+      await expect(page.getByRole("heading", { level: 2, name: "worker-a" })).toBeVisible();
+
+      expect((await fleet.gateway.cli(["worker", "undrain", a?.id ?? ""])).code).toBe(0);
+      await untilTheDaemonSays(fleet.gateway, (views) => views[0]?.drained === false);
+
+      await expect(page.getByText("Resolved.")).toBeVisible({ timeout: 1_000 });
+      await page.getByRole("link", { name: "Back to Attention" }).click();
+      await expect(page).toHaveURL(/\/attention$/);
+      await expect(page.getByText("Nothing needs attention.")).toBeVisible();
+    } finally {
+      await disposeFleet(fleet);
+    }
+  });
+
   test("stopping a worker adds it as disconnected within a second", async ({ page }) => {
     const fleet = await startFleet([
       { driverScript: { ios: IOS }, label: "worker-a" },
@@ -215,6 +259,8 @@ test.describe("the attention view", () => {
 
       await expect(item(page, "disconnected", "worker-b")).toBeVisible({ timeout: 1_000 });
       await expect(item(page, "disconnected", "worker-a")).toHaveCount(0);
+      await item(page, "disconnected", "worker-b").click();
+      await expect(facts(page)).toContainText(/Last seen\s*\d+ s ago/);
     } finally {
       await disposeFleet(fleet);
     }
@@ -266,12 +312,16 @@ test.describe("the attention view", () => {
       await openAttention(page, fleet.gateway);
 
       await expect(item(page, "incompatible", "old-worker")).toBeVisible();
-      await expect(
-        item(page, "quarantined", `Device ${quarantined?.id} on worker-a`),
-      ).toBeVisible();
-      await expect(item(page, "stalled", `Device ${stalled?.id} on worker-a`)).toContainText(
-        /stuck provisioning for \d+ (s|min)/,
-      );
+      await item(page, "incompatible", "old-worker").click();
+      await expect(facts(page)).toContainText("Gateway protocol");
+      await expect(facts(page)).toContainText("Worker protocol");
+
+      await item(page, "quarantined", "iPhone 16 on worker-a").click();
+      await expect(facts(page)).toContainText(quarantined?.id ?? "");
+
+      await item(page, "stalled", "iPhone 16 on worker-a").click();
+      await expect(facts(page)).toContainText(stalled?.id ?? "");
+      await expect(facts(page)).toContainText(/In this state for\s*\d+ (s|min)/);
     } finally {
       hangUp();
       await disposeFleet(fleet);
@@ -317,10 +367,16 @@ test.describe("the attention view", () => {
       await openAttention(page, host);
 
       const name = view?.id ?? "";
-      await expect(item(page, "quarantined", `Device ${quarantined?.id} on ${name}`)).toBeVisible();
-      await expect(item(page, "stalled", `Device ${stalled?.id} on ${name}`)).toBeVisible();
+      await expect(item(page, "quarantined", `iPhone 16 on ${name}`)).toBeVisible();
+      await expect(item(page, "stalled", `iPhone 16 on ${name}`)).toBeVisible();
       await expect(item(page, "over RAM budget", name)).toBeVisible();
-      await expect(page.locator(".attention-table tbody tr")).toHaveCount(3);
+      await expect(rows(page)).toHaveCount(3);
+      expect(quarantined?.id).toBeTruthy();
+      expect(stalled?.id).toBeTruthy();
+
+      await item(page, "over RAM budget", name).click();
+      await expect(facts(page)).toContainText(/Used\s*\d+\.\d\d GiB/);
+      await expect(facts(page)).toContainText(/Limit\s*\d+\.\d\d GiB/);
     } finally {
       await host.dispose();
     }
@@ -339,11 +395,15 @@ test.describe("the attention view", () => {
       await page.goto(gateway.url);
       await signIn(page, gateway.tokens.operator);
 
-      const attention = page.getByRole("navigation").getByRole("link", { name: /^Attention/ });
+      const attention = page
+        .getByRole("navigation", { name: "Console" })
+        .getByRole("link", { name: /^Attention/ });
       for (const label of NAV_LABELS) {
-        await page.getByRole("navigation").getByRole("link", { name: label }).click();
+        await page
+          .getByRole("navigation", { name: "Console" })
+          .getByRole("link", { name: label })
+          .click();
         await expect(page.getByRole("heading", { level: 1, name: label })).toBeVisible();
-        await expect(attention.locator(".nav-count")).toHaveText(/^\D*2\D*$/);
         await expect(attention).toHaveAccessibleName("Attention 2 items");
       }
 
@@ -375,7 +435,13 @@ test.describe("the attention view", () => {
 
       await openAttention(page, gateway);
 
-      await expect(page.locator(".attention-table tbody tr")).toHaveCount(1);
+      await expect(rows(page)).toHaveCount(1);
+      expect(await hasHorizontalScroll(page)).toBe(false);
+      await rows(page).click();
+      await expect(page.getByRole("heading", { level: 2, name: /^aworkerwith/ })).toBeVisible();
+      await page.waitForFunction(() =>
+        document.getAnimations().every((a) => a.playState !== "running"),
+      );
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
       hangUp();
@@ -404,13 +470,18 @@ test.describe("the attention view", () => {
       await page.keyboard.press(tab);
       await page.keyboard.type(gateway.tokens.operator);
       await page.keyboard.press("Enter");
-      await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+      await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 
-      await follow(page.getByRole("navigation").getByRole("link", { name: /^Attention/ }));
+      await follow(
+        page.getByRole("navigation", { name: "Console" }).getByRole("link", { name: /^Attention/ }),
+      );
       await expect(page.getByRole("heading", { level: 1, name: "Attention" })).toBeVisible();
 
-      await follow(item(page, "incompatible", "old-worker").getByRole("link"));
-      await expect(page.getByRole("heading", { level: 1, name: "old-worker" })).toBeVisible();
+      await follow(item(page, "incompatible", "old-worker"));
+      await expect(page.getByRole("heading", { level: 2, name: "old-worker" })).toBeVisible();
+
+      await follow(page.getByRole("link", { name: "Open worker" }));
+      await expect(page).toHaveURL(/\/workers\/wrk_old$/);
     } finally {
       hangUp();
       await gateway.dispose();
diff --git a/ui/src/model/attention.test.ts b/ui/src/model/attention.test.ts
new file mode 100644
index 000000000..93417297d
--- /dev/null
+++ b/ui/src/model/attention.test.ts
@@ -0,0 +1,329 @@
+import { describe, expect, it } from "vitest";
+
+import { attentionItems, attentionPageOf } from "./attention";
+import type { ConsoleEvent } from "./events";
+import type { WorkerDevice, WorkerView } from "./workers";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+const GIB = 1024 ** 3;
+
+function worker(overrides: Partial<WorkerView> = {}): WorkerView {
+  return {
+    catalog: [],
+    connection: "connected",
+    devices: [],
+    drained: false,
+    id: "wrk_1",
+    lastSeenAt: NOW,
+    leases: [],
+    ...overrides,
+  };
+}
+
+function device(id: string, overrides: Partial<WorkerDevice> = {}): WorkerDevice {
+  return {
+    physical: false,
+    id,
+    mode: "full",
+    servesDefaultMode: true,
+    spec: { physical: false, model: "iPhone 16", osVersion: "18.4", platform: "ios" },
+    state: "ready",
+    ...overrides,
+  };
+}
+
+function capacity(ramBudget?: { usedBytes: number; limitBytes: number; overLimit: boolean }) {
+  const entry = {
+    atRamBudget: false,
+    limit: 4,
+    maxRunning: 4,
+    overLimit: false,
+    reserved: 0,
+    running: 1,
+    used: 1,
+  };
+  return {
+    android: { ...entry, warm: 0 },
+    global: { maxRunning: 4, overLimit: false, reserved: 0, running: 1, warm: 0 },
+    ios: { ...entry, warm: 0 },
+    ...(ramBudget === undefined ? {} : { ramBudget }),
+  };
+}
+
+function event(seq: number, name: string, at: number, payload: unknown = {}): ConsoleEvent {
+  return { event: name, id: `e${seq}`, payload, seq, timestamp: at };
+}
+
+function summary(workers: readonly WorkerView[]): string[] {
+  return attentionItems(workers).map((item) =>
+    [item.worker.id, "device" in item ? item.device.id : "-", item.condition].join(" "),
+  );
+}
+
+function pageOf(
+  workers: readonly WorkerView[],
+  key?: string,
+  events: readonly ConsoleEvent[] = [],
+) {
+  return attentionPageOf({ events, key, now: NOW, workers });
+}
+
+function shownOf(page: ReturnType<typeof pageOf>) {
+  if (typeof page.shown !== "object") throw new Error("no item is shown");
+  return page.shown;
+}
+
+function factsOf(w: WorkerView, key: string) {
+  return shownOf(pageOf([w], key)).facts;
+}
+
+describe("the items that need attention", () => {
+  it("hold a disconnected, an incompatible and a drained worker, one item per condition", () => {
+    const workers = [
+      worker({ id: "wrk_ok" }),
+      worker({ connection: "disconnected", id: "wrk_gone" }),
+      worker({ connection: "incompatible", id: "wrk_old" }),
+      worker({ drained: true, id: "wrk_drained" }),
+      worker({ connection: "disconnected", drained: true, id: "wrk_both" }),
+    ];
+
+    expect(summary(workers)).toEqual([
+      "wrk_gone - disconnected",
+      "wrk_old - incompatible",
+      "wrk_drained - drained",
+      "wrk_both - disconnected",
+      "wrk_both - drained",
+    ]);
+  });
+
+  it("hold a quarantined device and a stalled device, not one mid-transition", () => {
+    const workers = [
+      worker({
+        devices: [
+          device("dev_ready"),
+          device("dev_quarantined", { state: "quarantined" }),
+          device("dev_stuck", { stalled: true, state: "reclaiming", transitionAgeMs: 300_000 }),
+          device("dev_busy", { state: "provisioning", transitionAgeMs: 2_000 }),
+        ],
+      }),
+    ];
+
+    expect(summary(workers)).toEqual([
+      "wrk_1 dev_quarantined quarantined",
+      "wrk_1 dev_stuck stalled",
+    ]);
+  });
+
+  it("hold a quarantined physical device like any quarantined device", () => {
+    const physical: WorkerDevice = {
+      class: "phone",
+      id: "dev_phone",
+      physical: true,
+      servesDefaultMode: false,
+      spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
+      state: "quarantined",
+    };
+
+    expect(summary([worker({ devices: [physical] })])).toEqual(["wrk_1 dev_phone quarantined"]);
+  });
+
+  it("hold a worker over its RAM budget, not one under it or with no budget", () => {
+    const workers = [
+      worker({
+        capacity: capacity({ limitBytes: 12 * GIB, overLimit: true, usedBytes: 13 * GIB }),
+        id: "wrk_over",
+      }),
+      worker({
+        capacity: capacity({ limitBytes: 12 * GIB, overLimit: false, usedBytes: 4 * GIB }),
+        id: "wrk_under",
+      }),
+      worker({ capacity: capacity(), id: "wrk_none" }),
+      worker({ id: "wrk_unread" }),
+    ];
+
+    expect(summary(workers)).toEqual(["wrk_over - over RAM budget"]);
+  });
+
+  it("lose an item when its condition clears", () => {
+    const quarantined = device("dev_1", { state: "quarantined" });
+    const stalled = device("dev_2", { stalled: true, state: "provisioning" });
+    const ramBudget = { limitBytes: 12 * GIB, usedBytes: 13 * GIB };
+    const before = worker({
+      capacity: capacity({ ...ramBudget, overLimit: true }),
+      connection: "disconnected",
+      devices: [quarantined, stalled],
+      drained: true,
+    });
+    expect(attentionItems([before])).toHaveLength(5);
+
+    const cleared: [string, WorkerView][] = [
+      ["disconnected", { ...before, connection: "connected" }],
+      ["drained", { ...before, drained: false }],
+      ["over RAM budget", { ...before, capacity: capacity({ ...ramBudget, overLimit: false }) }],
+      ["quarantined", { ...before, devices: [{ ...quarantined, state: "ready" }, stalled] }],
+      ["stalled", { ...before, devices: [quarantined, device("dev_2", { state: "ready" })] }],
+    ];
+    for (const [condition, after] of cleared) {
+      const conditions = attentionItems([after]).map((item) => item.condition);
+      expect(conditions, condition).toHaveLength(4);
+      expect(conditions, condition).not.toContain(condition);
+    }
+  });
+});
+
+describe("the attention page", () => {
+  it("lists a row per item, naming the worker or the device on its worker", () => {
+    const page = pageOf([
+      worker({ connection: "disconnected", id: "wrk/1", label: "mac-mini-1" }),
+      worker({ devices: [device("dev_q", { state: "quarantined" })], id: "wrk_2" }),
+    ]);
+
+    expect(page.rows.map((row) => [row.word, row.tone, row.subject, row.to])).toEqual([
+      ["disconnected", "error", "mac-mini-1", "/attention/wrk%2F1%2Fdisconnected"],
+      ["quarantined", "error", "iPhone 16 on wrk_2", "/attention/wrk_2%2Fdev_q%2Fquarantined"],
+    ]);
+  });
+
+  it("shows the first item when the URL names none", () => {
+    const page = pageOf([worker({ drained: true }), worker({ drained: true, id: "wrk_2" })]);
+
+    expect(page.named).toBe(false);
+    expect(shownOf(page).key).toBe("wrk_1/drained");
+  });
+
+  it("shows the item the URL names", () => {
+    const page = pageOf(
+      [worker({ drained: true }), worker({ drained: true, id: "wrk_2" })],
+      "wrk_2/drained",
+    );
+
+    expect(page.named).toBe(true);
+    expect(shownOf(page).key).toBe("wrk_2/drained");
+  });
+
+  it("says an item the URL names is resolved once the daemon stops reporting it", () => {
+    const page = pageOf([worker()], "wrk_1/drained");
+
+    expect(page.shown).toBe("resolved");
+  });
+
+  it("shows nothing when nothing needs attention and the URL names nothing", () => {
+    const page = pageOf([worker()]);
+
+    expect(page.rows).toEqual([]);
+    expect(page.shown).toBeUndefined();
+  });
+
+  it("titles a worker item by the worker and a device item by its model and runtime", () => {
+    const workers = [
+      worker({ drained: true, label: "mac-mini-1" }),
+      worker({ devices: [device("dev_q", { state: "quarantined" })], id: "wrk_2" }),
+    ];
+
+    expect(shownOf(pageOf(workers)).title).toBe("mac-mini-1");
+    expect(shownOf(pageOf(workers, "wrk_2/dev_q/quarantined")).title).toBe("iPhone 16 18.4");
+  });
+
+  it("gives a disconnected worker the time since it was last seen", () => {
+    const w = worker({ connection: "disconnected", lastSeenAt: NOW - 100_000 });
+
+    expect(factsOf(w, "wrk_1/disconnected")).toEqual([
+      { label: "Last seen", value: "1 min 40 s ago" },
+    ]);
+  });
+
+  it("gives an incompatible worker both protocol ranges", () => {
+    const w = worker({
+      connection: "incompatible",
+      protocol: { gateway: { max: 3, min: 2 }, worker: { max: 1, min: 1 } },
+    });
+
+    expect(factsOf(w, "wrk_1/incompatible")).toEqual([
+      { label: "Gateway protocol", value: "2–3" },
+      { label: "Worker protocol", value: "1" },
+    ]);
+  });
+
+  it("gives a drained worker the leases it still holds", () => {
+    const lease = { deviceId: "d", grantedAt: NOW, id: "l" } as unknown as never;
+    const w = worker({ drained: true, leases: [lease] });
+
+    expect(factsOf(w, "wrk_1/drained")).toEqual([{ label: "Leases still held", value: "1" }]);
+  });
+
+  it("gives a worker over its RAM budget what it uses and its limit", () => {
+    const ramBudget = { limitBytes: 12 * GIB, overLimit: true, usedBytes: 13 * GIB };
+
+    expect(factsOf(worker({ capacity: capacity(ramBudget) }), "wrk_1/ram")).toEqual([
+      { label: "Used", value: "13.00 GiB" },
+      { label: "Limit", value: "12.00 GiB" },
+    ]);
+  });
+
+  it("gives a stalled device its id, state and time in that state", () => {
+    const w = worker({
+      devices: [
+        device("dev_stuck", { stalled: true, state: "provisioning", transitionAgeMs: 90_000 }),
+      ],
+      lastSeenAt: NOW - 10_000,
+    });
+
+    expect(factsOf(w, "wrk_1/dev_stuck/stalled")).toEqual([
+      { label: "Device", value: "dev_stuck" },
+      { label: "State", value: "provisioning" },
+      { label: "In this state for", value: "1 min 40 s" },
+    ]);
+  });
+
+  it("gives a quarantined device no time in its state", () => {
+    const w = worker({ devices: [device("dev_q", { state: "quarantined" })] });
+
+    expect(factsOf(w, "wrk_1/dev_q/quarantined")).toEqual([
+      { label: "Device", value: "dev_q" },
+      { label: "State", value: "quarantined" },
+    ]);
+  });
+
+  it("gives a stalled device on a disconnected worker no time in its state", () => {
+    // why: a gateway keeps a disconnected worker's devices as last reported, with an age it can no
+    // longer count from.
+    const w = worker({
+      connection: "disconnected",
+      devices: [
+        device("dev_stuck", { stalled: true, state: "reclaiming", transitionAgeMs: 90_000 }),
+      ],
+    });
+
+    const labels = factsOf(w, "wrk_1/dev_stuck/stalled").map((fact) => fact.label);
+
+    expect(labels).toEqual(["Device", "State"]);
+  });
+
+  it("lists the last hour's events naming the worker or the device, newest first", () => {
+    const w = worker({ devices: [device("dev_1", { state: "quarantined" })], drained: true });
+    const events = [
+      event(1, "worker.drain-started", NOW - 50 * 60_000, { workerId: "wrk_1" }),
+      event(2, "device.quarantined", NOW - 5 * 60_000, { deviceId: "dev_1" }),
+      event(3, "lease.granted", NOW - 60_000, { deviceId: "dev_other" }),
+      event(4, "worker.drain-started", NOW - 2 * 60 * 60_000, { workerId: "wrk_1" }),
+      event(5, "worker.rejected", NOW - 60_000, { workerId: "wrk_1" }),
+    ];
+
+    const ofWorker = shownOf(pageOf([w], "wrk_1/drained", events));
+    const ofDevice = shownOf(pageOf([w], "wrk_1/dev_1/quarantined", events));
+
+    expect(ofWorker.events.map((entry) => entry.key)).toEqual(["e1"]);
+    expect(ofDevice.events.map((entry) => entry.key)).toEqual(["e2", "e1"]);
+    expect(ofDevice.events[0]).toMatchObject({
+      name: "device.quarantined",
+      to: "/events/e2",
+      tone: "error",
+    });
+  });
+
+  it("links each item to its worker's page", () => {
+    const page = pageOf([worker({ drained: true, id: "wrk/1", label: "mac-mini-1" })]);
+
+    expect(shownOf(page).worker).toEqual({ name: "mac-mini-1", to: "/workers/wrk%2F1" });
+  });
+});
diff --git a/ui/src/model/attention.ts b/ui/src/model/attention.ts
index 13d60bb1b..fccc4d4c1 100644
--- a/ui/src/model/attention.ts
+++ b/ui/src/model/attention.ts
@@ -1,6 +1,15 @@
-import type { Stat } from "./stat";
+import { eventSummary, eventTone } from "./activity";
+import { type ConsoleEvent, workerIdOf } from "./events";
+import { itemPath } from "./paths";
+import { formatDuration } from "./time";
 import type { Tone } from "./tones";
-import type { WorkerDevice, WorkerView } from "./workers";
+import {
+  stateEnteredAt,
+  type WorkerDevice,
+  type WorkerView,
+  workerName,
+  workerPath,
+} from "./workers";
 
 export type AttentionItem =
   | {
@@ -60,18 +69,6 @@ function deviceItems(worker: WorkerView): AttentionItem[] {
   });
 }
 
-export function attentionStats(items: readonly AttentionItem[]): readonly Stat[] {
-  const workers = new Set(items.map((item) => item.worker.id));
-  const devices = new Set(
-    items.flatMap((item) => ("device" in item ? [`${item.worker.id}/${item.device.id}`] : [])),
-  );
-  return [
-    { caption: "need attention now", label: "Items", value: String(items.length) },
-    { caption: "with at least one item", label: "Workers affected", value: String(workers.size) },
-    { caption: "quarantined or stalled", label: "Devices affected", value: String(devices.size) },
-  ];
-}
-
 // why: a lost worker or a quarantined device is broken; everything else on the list needs a look
 // soon, which is the warning tone, the same split the status words use.
 export function attentionTone(condition: AttentionItem["condition"]): Tone {
@@ -79,3 +76,172 @@ export function attentionTone(condition: AttentionItem["condition"]): Tone {
     ? "error"
     : "warn";
 }
+
+export interface AttentionRow {
+  readonly key: string;
+  readonly to: string;
+  readonly tone: Tone;
+  readonly word: string;
+  readonly subject: string;
+}
+
+export interface AttentionFact {
+  readonly label: string;
+  readonly value: string;
+}
+
+export interface AttentionEvent {
+  readonly key: string;
+  readonly time: string;
+  readonly name: string;
+  readonly tone?: Tone;
+  readonly text: string;
+  readonly to: string;
+}
+
+export interface AttentionDetail {
+  readonly key: string;
+  readonly title: string;
+  readonly tone: Tone;
+  readonly word: string;
+  readonly worker: { readonly name: string; readonly to: string };
+  readonly facts: readonly AttentionFact[];
+  readonly events: readonly AttentionEvent[];
+}
+
+export interface AttentionPage {
+  readonly rows: readonly AttentionRow[];
+  // why: a URL can name an item the daemon has since cleared; that is told apart from a list
+  // with nothing in it, which has no item to show at all.
+  readonly shown: AttentionDetail | "resolved" | undefined;
+  readonly named: boolean;
+}
+
+const HOUR = 60 * 60 * 1_000;
+const EVENT_ROWS = 25;
+
+function gibibytes(bytes: number): string {
+  return `${(bytes / 1024 ** 3).toFixed(2)} GiB`;
+}
+
+function protocolText(versions: { readonly min: number; readonly max: number }): string {
+  return versions.min === versions.max
+    ? String(versions.min)
+    : `${versions.min}\u2013${versions.max}`;
+}
+
+function timeOfDay(timestamp: number): string {
+  const date = new Date(timestamp);
+  return [date.getHours(), date.getMinutes(), date.getSeconds()]
+    .map((part) => String(part).padStart(2, "0"))
+    .join(":");
+}
+
+function subjectOf(item: AttentionItem): string {
+  return "device" in item
+    ? `${item.device.spec.model} on ${workerName(item.worker)}`
+    : workerName(item.worker);
+}
+
+function factsOf(item: AttentionItem, now: number): readonly AttentionFact[] {
+  const { worker } = item;
+  switch (item.condition) {
+    case "disconnected":
+      return [{ label: "Last seen", value: `${formatDuration(now - worker.lastSeenAt)} ago` }];
+    case "incompatible":
+      return worker.protocol === undefined
+        ? []
+        : [
+            { label: "Gateway protocol", value: protocolText(worker.protocol.gateway) },
+            { label: "Worker protocol", value: protocolText(worker.protocol.worker) },
+          ];
+    case "drained":
+      return [{ label: "Leases still held", value: String(worker.leases?.length ?? 0) }];
+    case "over RAM budget":
+      return [
+        { label: "Used", value: gibibytes(item.usedBytes) },
+        { label: "Limit", value: gibibytes(item.limitBytes) },
+      ];
+    case "quarantined":
+    case "stalled": {
+      const since = stateEnteredAt(item.device, worker);
+      return [
+        { label: "Device", value: item.device.id },
+        { label: "State", value: item.device.state },
+        ...(since === undefined
+          ? []
+          : [{ label: "In this state for", value: formatDuration(now - since) }]),
+      ];
+    }
+  }
+}
+
+function namesItem(event: ConsoleEvent, item: AttentionItem): boolean {
+  if (workerIdOf(event) === item.worker.id) return true;
+  if (!("device" in item)) return false;
+  const { payload } = event;
+  return (
+    typeof payload === "object" &&
+    payload !== null &&
+    (payload as Record<string, unknown>).deviceId === item.device.id
+  );
+}
+
+function detailOf(
+  item: AttentionItem,
+  input: {
+    readonly workers: readonly WorkerView[];
+    readonly events: readonly ConsoleEvent[];
+    readonly now: number;
+  },
+): AttentionDetail {
+  const { events, now, workers } = input;
+  return {
+    events: events
+      .filter((event) => event.timestamp > now - HOUR && namesItem(event, item))
+      .sort((a, b) => b.timestamp - a.timestamp || b.seq - a.seq)
+      .slice(0, EVENT_ROWS)
+      .map((event) => {
+        const tone = eventTone(event.event);
+        return {
+          key: event.id,
+          name: event.event,
+          text: eventSummary(event, workers),
+          time: timeOfDay(event.timestamp),
+          to: itemPath("/events", event.id),
+          ...(tone === undefined ? {} : { tone }),
+        };
+      }),
+    facts: factsOf(item, now),
+    key: item.key,
+    title:
+      "device" in item
+        ? `${item.device.spec.model} ${item.device.spec.osVersion}`
+        : workerName(item.worker),
+    tone: attentionTone(item.condition),
+    word: item.condition,
+    worker: { name: workerName(item.worker), to: workerPath(item.worker.id) },
+  };
+}
+
+// why: the list and the inspector are worked out together from the same items, so the row that is
+// marked chosen is always the item the inspector shows.
+export function attentionPageOf(input: {
+  readonly workers: readonly WorkerView[];
+  readonly events: readonly ConsoleEvent[];
+  readonly now: number;
+  readonly key: string | undefined;
+}): AttentionPage {
+  const items = attentionItems(input.workers);
+  const rows = items.map((item) => ({
+    key: item.key,
+    subject: subjectOf(item),
+    to: itemPath("/attention", item.key),
+    tone: attentionTone(item.condition),
+    word: item.condition,
+  }));
+  const named = input.key !== undefined;
+  const chosen = named ? items.find((item) => item.key === input.key) : items[0];
+  if (chosen !== undefined) return { named, rows, shown: detailOf(chosen, input) };
+  return { named, rows, shown: named ? "resolved" : undefined };
+}
diff --git a/ui/src/screens/attention/attention.css b/ui/src/screens/attention/attention.css
new file mode 100644
index 000000000..1f8a6868f
--- /dev/null
+++ b/ui/src/screens/attention/attention.css
@@ -0,0 +1,76 @@
+.fact-label {
+  margin: 0 0 var(--space-1);
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+.fact-value {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+  font-size: var(--text-md);
+}
+
+.attention-events {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.attention-event {
+  display: grid;
+  grid-template-columns: 4.5rem 11rem minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  font-size: var(--text-sm);
+  text-decoration: none;
+  transition: background-color var(--duration);
+}
+
+.attention-events li:last-child .attention-event {
+  border-bottom: 0;
+}
+
+.attention-event:hover {
+  background: var(--field);
+  color: var(--text);
+}
+
+.attention-event .mono {
+  overflow: hidden;
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attention-event-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attention-event-error {
+  color: var(--status-error);
+}
+
+.attention-event-warn {
+  color: var(--status-warn);
+}
+
+@media (max-width: 600px) {
+  .attention-event {
+    grid-template-columns: 4.5rem minmax(0, 1fr);
+  }
+
+  .attention-event-text {
+    grid-column: 1 / -1;
+  }
+}
+
+.attention-worker {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
diff --git a/ui/src/screens/attention/index.test.tsx b/ui/src/screens/attention/index.test.tsx
new file mode 100644
index 000000000..a1f7ed523
--- /dev/null
+++ b/ui/src/screens/attention/index.test.tsx
@@ -0,0 +1,64 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { attentionPageOf } from "../../model/attention";
+import type { WorkerView } from "../../model/workers";
+import { AttentionBody } from ".";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+
+function worker(overrides: Partial<WorkerView> = {}): WorkerView {
+  return {
+    catalog: [],
+    connection: "connected",
+    devices: [],
+    drained: false,
+    id: "wrk_1",
+    lastSeenAt: NOW,
+    leases: [],
+    ...overrides,
+  };
+}
+
+function render(workers: readonly WorkerView[], key?: string): string {
+  const page = attentionPageOf({ events: [], key, now: NOW, workers });
+  return renderToStaticMarkup(<AttentionBody page={page} />);
+}
+
+describe("the attention screen", () => {
+  it("says so when nothing needs attention", () => {
+    const html = render([worker()]);
+
+    expect(html).toContain("Nothing needs attention.");
+    expect(html).toContain("0 open");
+  });
+
+  it("counts the open items and links each row to its item, with its condition as its name", () => {
+    const html = render([
+      worker({ connection: "disconnected", id: "wrk_a", label: "mac-mini-1" }),
+      worker({ drained: true, id: "wrk_b" }),
+    ]);
+
+    expect(html).toContain("2 open");
+    expect(html).toContain('aria-label="disconnected"');
+    expect(html).toContain('href="/attention/wrk_a%2Fdisconnected"');
+    expect(html).toContain('href="/attention/wrk_b%2Fdrained"');
+  });
+
+  it("shows the first item in the inspector with its worker linked and an Open worker button", () => {
+    const html = render([worker({ drained: true, id: "wrk/1", label: "mac-mini-1" })]);
+
+    expect(html).toContain("Leases still held");
+    expect(html).toContain('href="/workers/wrk%2F1"');
+    expect(html).toContain("Open worker");
+    expect(html).toContain("Recent events");
+    expect(html).toContain("No events in the last hour.");
+  });
+
+  it("says Resolved. with a link back when the URL names an item that no longer needs attention", () => {
+    const html = render([worker()], "wrk_1/drained");
+
+    expect(html).toContain("Resolved.");
+    expect(html).toContain('<a href="/attention">Back to Attention</a>');
+  });
+});
diff --git a/ui/src/screens/attention/index.tsx b/ui/src/screens/attention/index.tsx
index 9d5244139..b2e41801f 100644
--- a/ui/src/screens/attention/index.tsx
+++ b/ui/src/screens/attention/index.tsx
@@ -1,9 +1,132 @@
-import { Empty, Page } from "../../ds";
+import "./attention.css";
+
+import {
+  ButtonLink,
+  Card,
+  Empty,
+  Grid,
+  Inspector,
+  InspectorEmpty,
+  Link,
+  List,
+  ListPane,
+  ListRow,
+  Loaded,
+  MasterDetail,
+  Pager,
+  Panel,
+  Status,
+  StatusDot,
+} from "../../ds";
+import {
+  type AttentionDetail,
+  type AttentionEvent,
+  type AttentionPage,
+  useAttention,
+  useAttentionRows,
+} from "../../state/attention";
 
 export function AttentionScreen() {
+  const view = useAttention();
+  return <Loaded view={view}>{(page) => <AttentionBody page={page} />}</Loaded>;
+}
+
+export function AttentionBody({ page }: { readonly page: AttentionPage }) {
+  const { paging, shown } = useAttentionRows(page.rows);
+  const chosen = typeof page.shown === "object" ? page.shown.key : undefined;
+  return (
+    <MasterDetail
+      focus={page.named ? "detail" : "list"}
+      list={
+        <ListPane
+          title="Attention"
+          meta={`${page.rows.length} open`}
+          footer={<Pager label="Attention" paging={paging} />}
+        >
+          {page.rows.length === 0 ? (
+            <Empty>Nothing needs attention.</Empty>
+          ) : (
+            <List label="Needs attention">
+              {shown.map((row) => (
+                <ListRow
+                  key={row.key}
+                  to={row.to}
+                  selected={row.key === chosen}
+                  lead={<StatusDot tone={row.tone} label={row.word} />}
+                  title={row.word}
+                  sub={row.subject}
+                />
+              ))}
+            </List>
+          )}
+        </ListPane>
+      }
+      detail={<Detail shown={page.shown} />}
+    />
+  );
+}
+
+function Detail({ shown }: { readonly shown: AttentionPage["shown"] }) {
+  if (shown === undefined) return <InspectorEmpty>Nothing to show.</InspectorEmpty>;
+  if (shown === "resolved") {
+    return (
+      <InspectorEmpty>
+        Resolved. <Link to="/attention">Back to Attention</Link>
+      </InspectorEmpty>
+    );
+  }
+  return <Item key={shown.key} detail={shown} />;
+}
+
+function Item({ detail }: { readonly detail: AttentionDetail }) {
+  return (
+    <Inspector
+      crumbs={[{ label: "Attention", to: "/attention" }]}
+      title={detail.title}
+      line={
+        <>
+          <Status tone={detail.tone}>{detail.word}</Status> ·{" "}
+          <span className="attention-worker">
+            <Link to={detail.worker.to}>{detail.worker.name}</Link>
+          </span>
+        </>
+      }
+      actions={<ButtonLink to={detail.worker.to}>Open worker</ButtonLink>}
+    >
+      {detail.facts.length === 0 ? null : (
+        <Grid min="sm" label="Facts">
+          {detail.facts.map((fact) => (
+            <Card key={fact.label}>
+              <p className="fact-label">{fact.label}</p>
+              <p className="fact-value">{fact.value}</p>
+            </Card>
+          ))}
+        </Grid>
+      )}
+      <Panel title="Recent events" flush>
+        <EventList events={detail.events} />
+      </Panel>
+    </Inspector>
+  );
+}
+
+function EventList({ events }: { readonly events: readonly AttentionEvent[] }) {
+  if (events.length === 0) return <Empty>No events in the last hour.</Empty>;
   return (
-    <Page title="Attention">
-      <Empty>Coming soon.</Empty>
-    </Page>
+    <ul className="attention-events">
+      {events.map((event) => (
+        <li key={event.key}>
+          <Link to={event.to} className="attention-event">
+            <span className="mono muted">{event.time}</span>
+            <span
+              className={event.tone === undefined ? "mono" : `mono attention-event-${event.tone}`}
+            >
+              {event.name}
+            </span>
+            <span className="attention-event-text">{event.text}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
   );
 }
diff --git a/ui/src/state/attention.ts b/ui/src/state/attention.ts
new file mode 100644
index 000000000..00dffaa50
--- /dev/null
+++ b/ui/src/state/attention.ts
@@ -0,0 +1,44 @@
+import type { LoadView } from "../ds/loaded";
+import type { Paging } from "../ds/pager";
+import { type AttentionPage, attentionPageOf, type AttentionRow } from "../model/attention";
+import { TABLE_SIZES } from "../model/paging";
+import { itemIdFrom } from "../model/paths";
+import type { WorkerList } from "../model/workers";
+import { useRecentEvents } from "./events";
+import { useLiveResource, useNow } from "./live";
+import { usePaging } from "./paging";
+import { bothViews, loadView, mapView } from "./resource";
+import { usePath } from "./router";
+
+export type {
+  AttentionDetail,
+  AttentionEvent,
+  AttentionFact,
+  AttentionPage,
+  AttentionRow,
+} from "../model/attention";
+export type { Paging } from "../ds/pager";
+
+export function useAttention(): LoadView<AttentionPage> {
+  const workers = loadView(useLiveResource<WorkerList>("/v1/workers"));
+  // why: the events only fill the inspector's list, so a feed still loading shows the page with
+  // none rather than holding back the list.
+  const feed = useRecentEvents();
+  const now = useNow();
+  const key = itemIdFrom("/attention", usePath());
+  const reads = bothViews(workers, { data: feed.data ?? [], kind: "ready" });
+  return mapView(reads, ([list, events]) =>
+    attentionPageOf({ events, key, now: now.server, workers: list.workers }),
+  );
+}
+
+// why: the pager is read once the list is known, so a page in the URL is never corrected against
+// a list that has not arrived.
+export function useAttentionRows(rows: readonly AttentionRow[]): {
+  readonly shown: readonly AttentionRow[];
+  readonly paging: Paging;
+} {
+  const paging = usePaging({ sizes: TABLE_SIZES, total: rows.length });
+  const start = (paging.page - 1) * paging.size;
+  return { paging, shown: rows.slice(start, start + paging.size) };
+}

From 9f33adbbfe9164ee7e7d601572a33da2cf2a0043 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:37:01 +0200
Subject: [PATCH 14/32] refactor(ui): attention reads the time of day from the
 events model

---
 e2e/console/attention.spec.ts | 3 ---
 ui/src/model/attention.ts     | 9 +--------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/e2e/console/attention.spec.ts b/e2e/console/attention.spec.ts
index 7bacd7584..ffa6e9a93 100644
--- a/e2e/console/attention.spec.ts
+++ b/e2e/console/attention.spec.ts
@@ -439,9 +439,6 @@ test.describe("the attention view", () => {
       expect(await hasHorizontalScroll(page)).toBe(false);
       await rows(page).click();
       await expect(page.getByRole("heading", { level: 2, name: /^aworkerwith/ })).toBeVisible();
-      await page.waitForFunction(() =>
-        document.getAnimations().every((a) => a.playState !== "running"),
-      );
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
       hangUp();
diff --git a/ui/src/model/attention.ts b/ui/src/model/attention.ts
index fccc4d4c1..933de918c 100644
--- a/ui/src/model/attention.ts
+++ b/ui/src/model/attention.ts
@@ -1,5 +1,5 @@
 import { eventSummary, eventTone } from "./activity";
-import { type ConsoleEvent, workerIdOf } from "./events";
+import { type ConsoleEvent, timeOfDay, workerIdOf } from "./events";
 import { itemPath } from "./paths";
 import { formatDuration } from "./time";
 import type { Tone } from "./tones";
@@ -130,13 +130,6 @@ function protocolText(versions: { readonly min: number; readonly max: number }):
     : `${versions.min}\u2013${versions.max}`;
 }
 
-function timeOfDay(timestamp: number): string {
-  const date = new Date(timestamp);
-  return [date.getHours(), date.getMinutes(), date.getSeconds()]
-    .map((part) => String(part).padStart(2, "0"))
-    .join(":");
-}
-
 function subjectOf(item: AttentionItem): string {
   return "device" in item
     ? `${item.device.spec.model} on ${workerName(item.worker)}`

From 9ca15ca4b2b1f6bca83d3b8a2cdc17cd13c53710 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:37:02 +0200
Subject: [PATCH 15/32] feat(ui): the workers page is a list with an inspector

---
 e2e/console/workers.spec.ts             | 615 ++++++++++++-----------
 ui/src/model/load.test.ts               |  34 +-
 ui/src/model/load.ts                    |  25 -
 ui/src/model/worker-page.test.ts        | 639 ++++++++++++++++++++++++
 ui/src/model/worker-page.ts             | 514 +++++++++++++++++++
 ui/src/model/workers.ts                 |  37 --
 ui/src/screens/workers/index.tsx        | 491 +++++++++++++++++-
 ui/src/screens/workers/workers.css      |  68 +++
 ui/src/screens/workers/workers.test.tsx | 373 ++++++++++++++
 ui/src/state/workers.ts                 | 115 +++++
 10 files changed, 2508 insertions(+), 403 deletions(-)
 create mode 100644 ui/src/model/worker-page.test.ts
 create mode 100644 ui/src/model/worker-page.ts
 create mode 100644 ui/src/screens/workers/workers.css
 create mode 100644 ui/src/screens/workers/workers.test.tsx
 create mode 100644 ui/src/state/workers.ts

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index 748ca3d72..e971d218b 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -13,7 +13,6 @@ import {
   test,
 } from "./fixtures.js";
 
-/** What `simlock worker list --json` and `simlock status --json` say, as far as these tests read. */
 interface WorkerView {
   readonly id: string;
   readonly label?: string;
@@ -30,7 +29,11 @@ interface WorkerView {
     readonly ios: { readonly running: number; readonly limit: number };
     readonly android: { readonly running: number; readonly limit: number };
   };
-  readonly leases: readonly { readonly deviceId: string; readonly grantedAt: number }[];
+  readonly leases: readonly {
+    readonly id: string;
+    readonly deviceId: string;
+    readonly grantedAt: number;
+  }[];
   readonly load?: {
     readonly readAt: number;
     readonly cpu?: { readonly busyPercent: number; readonly cores: number };
@@ -80,6 +83,23 @@ async function answerMemory(page: Page, claim: () => MemoryClaim): Promise<void>
   );
 }
 
+/**
+ * why: a machine's own disk or CPU may already be over a threshold, which would turn every square
+ * the page draws and hide the state a test is about (a drain, a lost link). A test about squares
+ * answers the page's read of the worker list without the load reading, so only the states are left.
+ */
+async function answerWithoutLoad(page: Page): Promise<void> {
+  await page.route(
+    (url) => url.pathname === "/v1/workers",
+    async (route: Route) => {
+      const response = await route.fetch();
+      const listed = (await response.json()) as { workers: WorkerPayload[] };
+      for (const worker of listed.workers) delete worker.load;
+      await route.fulfill({ json: listed, response });
+    },
+  );
+}
+
 interface Status {
   readonly devices: readonly {
     readonly id: string;
@@ -130,10 +150,6 @@ async function lease(daemon: RunningDaemon, agent: string, model = "iPhone 16"):
   expect(granted.code, granted.stderr).toBe(0);
 }
 
-/**
- * Waits, asking every 20 ms, until the gateway's own `GET /v1/workers` says what `predicate`
- * looks for. The console's second starts there: it cannot show a fact before its daemon has it.
- */
 async function untilTheGatewaySays(
   gateway: RunningDaemon,
   predicate: (views: readonly WorkerView[]) => boolean,
@@ -152,21 +168,39 @@ async function untilTheGatewaySays(
 async function openConsole(page: Page, daemon: RunningDaemon): Promise<void> {
   await page.goto(daemon.url);
   await signIn(page, daemon.tokens.operator);
+  await page.getByRole("link", { name: "Workers", exact: true }).click();
   await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
 }
 
-/** A worker's card on the list, by the name it shows. */
-function card(page: Page, name: string): Locator {
+function row(page: Page, name: string): Locator {
   return page
+    .getByRole("list", { name: "Workers", exact: true })
     .getByRole("listitem")
-    .filter({ has: page.getByRole("heading", { level: 2, name, exact: true }) });
+    .filter({ has: page.getByText(name, { exact: true }) });
+}
+
+function title(page: Page, name: string): Locator {
+  return page.getByRole("heading", { level: 2, name, exact: true });
+}
+
+function figures(page: Page): Locator {
+  return page.getByRole("group", { name: "Load and leases" });
+}
+
+function figure(page: Page, label: string): Locator {
+  return figures(page)
+    .locator(".card")
+    .filter({ has: page.getByText(label, { exact: true }) });
 }
 
-/** The value beside a label in a list of facts. */
 function fact(scope: Locator, label: string): Locator {
   return scope.locator("dt", { hasText: label }).locator("xpath=following-sibling::dd[1]");
 }
 
+async function openTab(page: Page, name: string): Promise<void> {
+  await page.getByRole("tab", { name }).click();
+}
+
 interface PaintedGauge {
   readonly track: number;
   readonly fill: number;
@@ -186,12 +220,12 @@ function gaugePercents(load: NonNullable<WorkerView["load"]>): readonly number[]
   ];
 }
 
-function paintedGauges(panel: Locator): Promise<readonly PaintedGauge[]> {
-  return panel.locator(".load-bar").evaluateAll((bars) =>
+function paintedGauges(scope: Locator): Promise<readonly PaintedGauge[]> {
+  return scope.locator(".load-bar").evaluateAll((bars) =>
     bars.map((bar) => {
       const fill = bar.firstElementChild as HTMLElement;
-      // why: the fill's own 120 ms ease means a width read mid-slide sits between two levels, so
-      // this asks the browser whether a transition is still running and reports it with the width.
+      // why: the fill's own ease means a width read mid-slide sits between two levels, so this asks
+      // the browser whether a transition is still running and reports it with the width.
       return {
         track: bar.getBoundingClientRect().width,
         fill: fill.getBoundingClientRect().width,
@@ -211,54 +245,9 @@ function fillsMatch(painted: readonly PaintedGauge[], percents: readonly number[
   );
 }
 
-interface PaintedTone {
-  readonly colour: string;
-  readonly tone: string;
-}
-
-// why: what the memory poll cannot see, because it watches one gauge: that every other gauge on
-// the panel carries a tone class at all, and wears none of them in the accent. Which token a tone
-// class resolves to is the poll's claim, proven for all four in both themes.
-function gaugeToneFaults(painted: readonly PaintedTone[], accent: string): string[] {
-  const faults: string[] = [];
-  for (const fill of painted) {
-    if (fill.tone === "") faults.push("a gauge carries no tone class");
-    else if (fill.colour === accent)
-      faults.push(`the ${fill.tone} gauge is painted with the accent`);
-  }
-  return faults;
-}
-
-/** A device's row in a worker's device table. */
-function deviceRow(page: Page, id: string): Locator {
-  return page.getByRole("row").filter({ has: page.getByRole("cell", { name: id, exact: true }) });
-}
-
-/** What the list shows for a worker, written the way the console writes it. */
-function expectedFacts(view: WorkerView): Record<string, string> {
-  const capacity = view.capacity;
-  return {
-    Capacity:
-      capacity === undefined
-        ? "Not reported"
-        : `iOS ${capacity.ios.running} of ${capacity.ios.limit} running, ` +
-          `Android ${capacity.android.running} of ${capacity.android.limit} running`,
-    Connection: view.drained ? `${view.connection} drained` : view.connection,
-    Devices:
-      capacity === undefined
-        ? "Not reported"
-        : `${capacity.global.running} running, ${view.leases.length} leased`,
-    Health: view.health ?? "Not reported",
-    Version: view.version ?? "Not reported",
-  };
-}
-
-/** The status tones, in the order the colour test reads their tokens. */
 const TONES = ["ok", "warn", "error", "idle"] as const;
 
-/** What each word the colour test meets means, as the design guide sorts them. */
 const TONE_OF: Readonly<Partial<Record<string, (typeof TONES)[number]>>> = {
-  Connected: "ok",
   compatible: "ok",
   connected: "ok",
   drained: "warn",
@@ -268,9 +257,8 @@ const TONE_OF: Readonly<Partial<Record<string, (typeof TONES)[number]>>> = {
   running: "ok",
 };
 
-/** Every status on the page: its word and its square's colour, with the tokens' colours. */
-async function readStatuses(page: Page) {
-  return page.locator(".status").evaluateAll((elements) => {
+async function readSquares(page: Page) {
+  return page.locator(".status-dot").evaluateAll((elements) => {
     const root = getComputedStyle(document.documentElement);
     const named = (token: string) => {
       const probe = document.createElement("span");
@@ -282,46 +270,43 @@ async function readStatuses(page: Page) {
     };
     return {
       accent: named("--accent"),
+      neutral: named("--slot-leased"),
       shown: elements.map((element) => ({
-        colour: getComputedStyle(element.querySelector(".status-dot") ?? element).backgroundColor,
-        word: element.textContent?.trim() ?? "",
+        colour: getComputedStyle(element).backgroundColor,
+        word:
+          element.getAttribute("aria-label") ?? element.parentElement?.textContent?.trim() ?? "",
       })),
       tones: ["--status-ok", "--status-warn", "--status-error", "--status-idle"].map(named),
     };
   });
 }
 
-/**
- * Every status on the page is a word with a status colour that is not the accent, the colour
- * each known word should have; and `words` are among them.
- */
-async function expectStatusColours(
+async function expectSquareColours(
   page: Page,
   where: string,
   words: readonly string[],
 ): Promise<void> {
-  await expect(page.locator(".status").first()).toBeVisible();
-  const { accent, shown, tones } = await readStatuses(page);
-  expect(shown.map((status) => status.word)).toEqual(expect.arrayContaining([...words]));
-  for (const status of shown) {
-    const context = `${status.word} in ${where}`;
-    expect(status.word, where).not.toBe("");
-    expect(tones, context).toContain(status.colour);
-    expect(status.colour, context).not.toBe(accent);
-    const tone = TONE_OF[status.word];
-    if (tone !== undefined) expect(status.colour, context).toBe(tones[TONES.indexOf(tone)]);
+  await expect(page.locator(".status-dot").first()).toBeVisible();
+  const { accent, shown, tones } = await readSquares(page);
+  expect(shown.map((square) => square.word)).toEqual(expect.arrayContaining([...words]));
+  for (const square of shown) {
+    const context = `${square.word} in ${where}`;
+    expect(square.word, where).not.toBe("");
+    expect(tones, context).toContain(square.colour);
+    expect(square.colour, context).not.toBe(accent);
+    const tone = TONE_OF[square.word];
+    if (tone !== undefined) expect(square.colour, context).toBe(tones[TONES.indexOf(tone)]);
   }
 }
 
-/** Whether the page itself scrolls sideways. */
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
   return page.evaluate(
     () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
   );
 }
 
-test.describe("the workers views", () => {
-  test("on a gateway, every worker in simlock worker list appears with its state", async ({
+test.describe("the workers page", () => {
+  test("on a gateway, every worker appears as a row with its state square, its name and its running over limit, and opens in the inspector", async ({
     page,
   }) => {
     const fleet = await startFleet([
@@ -338,17 +323,32 @@ test.describe("the workers views", () => {
       );
       const listed = await workerList(fleet.gateway);
 
+      await answerWithoutLoad(page);
       await openConsole(page, fleet.gateway);
 
-      await expect(page.locator(".card")).toHaveCount(listed.length);
+      await expect(
+        page.getByRole("list", { name: "Workers", exact: true }).getByRole("listitem"),
+      ).toHaveCount(listed.length);
+      await expect(page.locator(".list-meta")).toHaveText(`${listed.length} / ${listed.length} up`);
       for (const view of listed) {
-        const shown = card(page, view.label ?? view.id);
-        await expect(shown).toContainText(view.id);
-        for (const [label, value] of Object.entries(expectedFacts(view))) {
-          await expect(fact(shown, label), `${view.label} ${label}`).toHaveText(value);
-        }
-        await expect(fact(shown, "Protocol")).toHaveText("compatible");
+        const shown = row(page, view.label ?? view.id);
+        const capacity = view.capacity;
+        const limit = (capacity?.ios.limit ?? 0) + (capacity?.android.limit ?? 0);
+        const running = (capacity?.ios.running ?? 0) + (capacity?.android.running ?? 0);
+        await expect(shown, view.label).toHaveText(`${view.label}${running} / ${limit}`);
+        await expect(
+          shown.getByRole("img", { name: view.drained ? "drained" : "connected" }),
+        ).toBeVisible();
       }
+
+      await row(page, "worker-a").getByRole("link").click();
+      const a = listed.find((view) => view.label === "worker-a");
+      await expect(page).toHaveURL(new RegExp(`/workers/${a?.id}$`));
+      await expect(title(page, "worker-a")).toBeVisible();
+      await expect(fact(page.locator("#main"), "Leases").or(figure(page, "Leases"))).toContainText(
+        "1",
+      );
+      await expect(row(page, "worker-a").getByRole("link")).toHaveAttribute("aria-current", "page");
     } finally {
       await disposeFleet(fleet);
     }
@@ -371,35 +371,89 @@ test.describe("the workers views", () => {
       expect(view?.protocol?.worker).toEqual(OLD_PROTOCOL);
 
       await openConsole(page, gateway);
+      await expect(
+        row(page, "old-worker").getByRole("img", { name: "incompatible" }),
+      ).toBeVisible();
+      await row(page, "old-worker").getByRole("link").click();
 
-      const shown = card(page, "old-worker");
-      await expect(fact(shown, "Connection")).toHaveText("incompatible");
-      await expect(fact(shown, "Protocol")).toHaveText(
+      const expected =
         `incompatible gateway ${gatewayRange?.min}–${gatewayRange?.max}, ` +
-          `worker ${OLD_PROTOCOL.min}–${OLD_PROTOCOL.max}`,
-      );
+        `worker ${OLD_PROTOCOL.min}–${OLD_PROTOCOL.max}`;
+      await expect(page.getByRole("tabpanel")).toContainText(expected);
+      await openTab(page, "Host");
+      await expect(fact(page.locator("#main"), "Protocol")).toHaveText(expected);
+      await expect(fact(page.locator("#main"), "Connection")).toHaveText("incompatible");
     } finally {
       hangUp();
       await gateway.dispose();
     }
   });
 
-  test("on a single host, the workers view shows one worker", async ({ daemon, page }) => {
+  test("on a single host, the list has one worker, and with no id in the URL it shows that worker in the inspector", async ({
+    daemon,
+    page,
+  }) => {
     const [host] = await workerList(daemon);
     expect(host).toBeDefined();
 
+    await answerWithoutLoad(page);
     await openConsole(page, daemon);
 
-    await expect(page.locator(".card")).toHaveCount(1);
-    const shown = card(page, host?.id ?? "");
-    await expect(fact(shown, "Connection")).toHaveText("connected");
-    await expect(fact(shown, "Version")).toHaveText(host?.version ?? "");
-    await shown.getByRole("link", { name: host?.id ?? "" }).click();
-    await expect(page.getByRole("heading", { level: 1, name: host?.id ?? "" })).toBeVisible();
-    await expect(page.getByRole("heading", { level: 2, name: "Devices" })).toBeVisible();
+    await expect(
+      page.getByRole("list", { name: "Workers", exact: true }).getByRole("listitem"),
+    ).toHaveCount(1);
+    await expect(page).toHaveURL(/\/workers$/);
+    await expect(title(page, host?.id ?? "")).toBeVisible();
+    await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText(
+      host?.id ?? "",
+    );
+    await row(page, host?.id ?? "")
+      .getByRole("link")
+      .click();
+    await expect(page).toHaveURL(new RegExp(`/workers/${encodeURIComponent(host?.id ?? "")}$`));
+    await expect(page.locator(".inspector-line")).toContainText(host?.version ?? "");
+    await expect(page.locator(".inspector-line")).toContainText("connected");
+  });
+
+  test("a worker that no list has says so and links back to the list", async ({ daemon, page }) => {
+    await openConsole(page, daemon);
+
+    await page.goto(new URL("/workers/wrk_nope", daemon.url).href);
+
+    await expect(page.getByText("Worker not found.")).toBeVisible();
+    await page.getByRole("link", { name: "All workers" }).click();
+    await expect(page).toHaveURL(/\/workers$/);
+    await expect(page.getByRole("list", { name: "Workers", exact: true })).toBeVisible();
   });
 
-  test("a worker's detail lists every device it has, with state and, where the data has one, time in that state", async ({
+  test("the Issues and Busy filters keep the workers they name", async ({ page }) => {
+    const fleet = await startFleet([
+      { driverScript: { ios: IOS }, label: "worker-a" },
+      { driverScript: { ios: IOS }, label: "worker-b" },
+    ]);
+    try {
+      const b = (await workerList(fleet.gateway)).find((view) => view.label === "worker-b");
+      expect((await fleet.gateway.cli(["worker", "drain", b?.id ?? ""])).code).toBe(0);
+      await answerWithoutLoad(page);
+      await openConsole(page, fleet.gateway);
+      await expect(row(page, "worker-a")).toBeVisible();
+
+      await page.getByLabel("Issues").check();
+      await expect(row(page, "worker-b")).toBeVisible();
+      await expect(row(page, "worker-a")).toHaveCount(0);
+
+      await page.getByLabel("Busy").check();
+      await expect(page.getByText("No worker matches.")).toBeVisible();
+
+      await page.getByLabel("All", { exact: true }).check();
+      await expect(row(page, "worker-a")).toBeVisible();
+      await expect(row(page, "worker-b")).toBeVisible();
+    } finally {
+      await disposeFleet(fleet);
+    }
+  });
+
+  test("a worker's devices list every device it has, with state and, where the data has one, time in that state", async ({
     page,
   }) => {
     const host = await startDaemon("worker", { driverScript: { ios: IOS } });
@@ -408,7 +462,6 @@ test.describe("the workers views", () => {
       await lease(host, "console-e2e-2");
       expect((await host.cli(["release", "--all", "--yes"])).code).toBe(0);
       await lease(host, "console-e2e-3");
-      // Settled: no device between states, so the CLI and the page see the same states.
       await waitFor(
         async () =>
           (await status(host)).devices.every(
@@ -421,45 +474,48 @@ test.describe("the workers views", () => {
       expect(devices.map((device) => device.state).sort()).toEqual(
         expect.arrayContaining(["leased", "ready"]),
       );
-      // The browser's clock is three hours fast; durations are by the daemon's clock all the same.
       await page.clock.setSystemTime(Date.now() + 3 * 60 * 60 * 1000);
 
       await openConsole(page, host);
-      await page.getByRole("link", { name: view?.id ?? "" }).click();
+      await row(page, view?.id ?? "")
+        .getByRole("link")
+        .click();
 
-      const deviceTable = page
-        .getByRole("region", { name: "Devices", exact: true })
-        .locator(".panel-body");
-      await expect(deviceTable.locator("tbody tr")).toHaveCount(devices.length);
+      const table = page.getByRole("region", { name: "Devices", exact: true });
+      await expect(table.locator("tbody tr")).toHaveCount(devices.length);
       for (const device of devices) {
-        const cells = deviceRow(page, device.id).getByRole("cell");
-        await expect(cells.nth(1)).toHaveText(device.state);
-        await expect(cells.nth(3)).toHaveText(device.spec.platform === "ios" ? "iOS" : "Android");
-        await expect(cells.nth(4)).toHaveText(device.physical ? "Physical" : "Virtual");
-        await expect(cells.nth(5)).toHaveText(device.spec.model);
-        await expect(cells.nth(6)).toHaveText(device.spec.osVersion);
-        await expect(cells.nth(7)).toHaveText(device.mode);
-        await expect(cells.nth(8)).toHaveText(device.spec.imageTag ?? "—");
+        const shown = table.getByRole("row").filter({ hasText: device.id });
+        const cells = shown.getByRole("cell");
+        await expect(shown.getByRole("img", { name: device.state })).toBeVisible();
+        await expect(cells.nth(0)).toContainText(device.spec.model);
+        await expect(cells.nth(0)).toContainText(device.spec.osVersion);
+        await expect(cells.nth(0)).toContainText(
+          device.spec.platform === "ios" ? "iOS" : "Android",
+        );
+        await expect(cells.nth(3)).toContainText(device.physical ? "Physical" : "Virtual");
         const held = view?.leases.find((candidate) => candidate.deviceId === device.id);
         if (held === undefined) {
-          // A ready device: the worker view carries no time for that state.
+          await expect(cells.nth(1), device.id).toHaveText(device.state);
           await expect(cells.nth(2), device.id).toHaveText("—");
           continue;
         }
-        await expect(cells.nth(2), device.id).toHaveText(/^\d+ s$/);
-        const shown = Number.parseInt((await cells.nth(2).textContent()) ?? "", 10);
-        // Within 3 seconds: the Date header counts whole seconds, the page shows whole seconds,
-        // and the page is read a moment before the expected value is worked out. Three hours
-        // off, as the browser's own clock would make it, is far outside.
-        expect(Math.abs(shown - (Date.now() - held.grantedAt) / 1000)).toBeLessThanOrEqual(3);
-        await expect(cells.nth(2)).not.toHaveText(`${shown} s`);
+        await expect(cells.nth(1).getByRole("link")).toHaveAttribute(
+          "href",
+          new RegExp(`/leases/${encodeURIComponent(held.id)}/?$`),
+        );
+        await expect(cells.nth(2), device.id).toHaveText(/^\d+ s.*expires in /);
+        const shownSeconds = Number.parseInt((await cells.nth(2).textContent()) ?? "", 10);
+        expect(Math.abs(shownSeconds - (Date.now() - held.grantedAt) / 1000)).toBeLessThanOrEqual(
+          3,
+        );
+        await expect(cells.nth(2)).not.toContainText(`${shownSeconds} s expires`);
       }
     } finally {
       await host.dispose();
     }
   });
 
-  test("a worker's detail shows its host facts, catalog and installs in progress", async ({
+  test("a worker's host tab shows its facts and catalog, and its warm pool tab the installs in progress", async ({
     page,
   }) => {
     const host = await startDaemon("worker", {
@@ -467,7 +523,6 @@ test.describe("the workers views", () => {
         ios: {
           availableOsVersions: ["18.4", "26.0"],
           knownModels: ["iPhone 16", "iPad Air"],
-          // Held open for the whole test.
           latencyMs: { installComponent: 120_000 },
           toolVersions: [{ build: "16F6", name: "xcode", version: "16.4" }],
         },
@@ -492,24 +547,29 @@ test.describe("the workers views", () => {
       const [view] = await workerList(host);
 
       await openConsole(page, host);
-      await page.getByRole("link", { name: view?.id ?? "" }).click();
+      await row(page, view?.id ?? "")
+        .getByRole("link")
+        .click();
 
+      await openTab(page, "Host");
       const main = page.locator("#main");
       await expect(fact(main, "Operating system")).toHaveText(`${facts.os} ${facts.osVersion}`);
       await expect(fact(main, "CPU architecture")).toHaveText(facts.arch);
       await expect(fact(main, "Tools")).toHaveText("xcode 16.4 (16F6) for iOS");
+      await expect(fact(main, "Worker id")).toHaveText(view?.id ?? "");
       await expect(fact(main, "iOS")).toContainText("Models: iPhone 16, iPad Air");
       await expect(fact(main, "iOS")).toContainText(/Runtimes: 18\.4.*, 26\.0/);
-      const installs = page
-        .getByRole("region", { name: "Installs in progress", exact: true })
-        .locator(".panel-body");
-      await expect(installs).toHaveText(/^iOS 19\.0 downloading for \d+ s, 1 waiter$/);
+      await expect(fact(main, "agent-device")).toContainText(/available|off|unavailable/);
+
+      await openTab(page, "Warm pool");
+      const installs = page.getByRole("region", { name: "Installs in progress", exact: true });
+      await expect(installs).toContainText(/iOS 19\.0\s*downloading for \d+ s, 1 waiter/);
     } finally {
       await host.dispose();
     }
   });
 
-  test("a granted lease shows on the worker within a second, without a reload", async ({
+  test("a granted lease shows on the worker's row and inspector within a second, without a reload", async ({
     page,
   }) => {
     const fleet = await startFleet([
@@ -518,66 +578,57 @@ test.describe("the workers views", () => {
     ]);
     try {
       await openConsole(page, fleet.gateway);
-      const shown = fact(card(page, "worker-a"), "Devices");
-      await expect(shown).toHaveText(/, 0 leased$/);
+      await row(page, "worker-a").getByRole("link").click();
+      await expect(row(page, "worker-a")).toHaveText(/0 \/ \d+$/);
+      await expect(figure(page, "Leases")).toContainText("0");
 
-      // Through the gateway, as an agent would: only worker-a has an iPhone 16.
       await lease(fleet.gateway, "console-e2e");
       await untilTheGatewaySays(
         fleet.gateway,
         (views) => views.find((view) => view.label === "worker-a")?.leases.length === 1,
       );
 
-      await expect(shown).toHaveText(/, 1 leased$/, { timeout: 1_000 });
+      await expect(row(page, "worker-a")).toHaveText(/1 \/ \d+$/, { timeout: 1_000 });
+      await expect(figure(page, "Leases")).toContainText("1", { timeout: 1_000 });
     } finally {
       await disposeFleet(fleet);
     }
   });
 
-  test("on a single host, a card shows its Load row and the detail shows the Load panel with an age that ticks", async ({
+  test("on a single host, the overview shows CPU, memory and disk as figures with the reading's age ticking", async ({
     daemon,
     page,
   }) => {
-    const [host] = await workerList(daemon);
     await openConsole(page, daemon);
 
-    const shown = card(page, host?.id ?? "");
-    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
-    await shown.getByRole("link", { name: host?.id ?? "" }).click();
-
-    const panel = page.getByRole("region", { name: "Load", exact: true });
-    const read = fact(panel, "Read");
-    await expect(read).toHaveText(/^\d+ s ago$/);
+    await expect(figure(page, "CPU")).toContainText(/\d+% busy, /, { timeout: 20_000 });
+    await expect(figure(page, "Memory")).toContainText("available");
+    await expect(figure(page, "Disk")).toContainText("free");
+    const read = page.getByText(/^Read \d+ s ago$/);
+    await expect(read).toBeVisible();
     const first = await read.textContent();
     await expect(read).not.toHaveText(first ?? "", { timeout: 10_000 });
-    await expect(fact(panel, "Memory")).toContainText("available");
   });
 
-  test("a worker's detail draws a bar under each figure, filled to that figure's own percent", async ({
+  test("a bar sits under each figure, filled to that figure's own percent", async ({
     daemon,
     page,
   }) => {
-    const [host] = await workerList(daemon);
     await openConsole(page, daemon);
-    const shown = card(page, host?.id ?? "");
-    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
-    await shown.getByRole("link", { name: host?.id ?? "" }).click();
+    await expect(figure(page, "CPU")).toContainText("busy", { timeout: 20_000 });
 
-    const panel = page.getByRole("region", { name: "Load", exact: true });
-    // why: both the worker's reading (every 15 s) and the fill's own 120 ms slide can move between
-    // two measurements, so this measures around both and retries until the fill has settled at the
+    // why: both the worker's reading (every 15 s) and the fill's own slide can move between two
+    // measurements, so this measures around both and retries until the fill has settled at the
     // level the reading implies — otherwise the bar and the figure compared are not the same pair.
     await waitFor(
       async () => {
         const before = (await workerList(daemon))[0]?.load;
         const wanted = before === undefined ? undefined : gaugePercents(before);
         if (wanted === undefined) return false;
-        const painted = await paintedGauges(panel);
+        const painted = await paintedGauges(figures(page));
         const now = (await workerList(daemon))[0]?.load;
         // why: what has to hold still is the level, not the reading — a fresh sample that rounds to
-        // the same percents is the same pair of figures and bars. The reading's own stamp moves
-        // between two reads even when nothing in it does, so comparing it here only ever costs
-        // retries.
+        // the same percents is the same pair of figures and bars.
         const since = now === undefined ? undefined : gaugePercents(now);
         if (since === undefined || JSON.stringify(wanted) !== JSON.stringify(since)) return false;
         if (painted.some((bar) => bar.sliding)) return false;
@@ -585,52 +636,25 @@ test.describe("the workers views", () => {
       },
       { interval: 500, timeout: 40_000, label: () => "the fill to match the figure" },
     );
-  });
 
-  test("a load gauge sits in a line of its own under its figure, capped rather than full width", async ({
-    daemon,
-    page,
-  }) => {
-    const [host] = await workerList(daemon);
-    await openConsole(page, daemon);
-    const shown = card(page, host?.id ?? "");
-    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
-    await shown.getByRole("link", { name: host?.id ?? "" }).click();
-
-    const panel = page.getByRole("region", { name: "Load", exact: true });
-    const row = fact(panel, "Memory");
-    await expect(row.locator(".load-bar")).toBeVisible();
-    // why: the viewport is 1280 wide, so the value column is far wider than the cap; a bar that
-    // filled its column instead of capping, or sat beside the text instead of under it, fails here.
-    const geometry = await row.evaluate((cell) => {
-      const figure = cell.querySelector(".load-figure > span") as HTMLElement;
-      const bar = cell.querySelector(".load-bar") as HTMLElement;
-      const text = figure.getBoundingClientRect();
-      const track = bar.getBoundingClientRect();
+    const card = figure(page, "Memory");
+    const geometry = await card.evaluate((element) => {
+      const text = element.querySelector(".figure-text") as HTMLElement;
+      const bar = element.querySelector(".load-bar") as HTMLElement;
       return {
-        column: cell.getBoundingClientRect().width,
-        left: track.left - text.left,
-        root: Number.parseFloat(getComputedStyle(document.documentElement).fontSize),
-        top: track.top,
-        track: track.width,
-        textBottom: text.bottom,
+        textBottom: text.getBoundingClientRect().bottom,
+        top: bar.getBoundingClientRect().top,
       };
     });
-
-    expect(geometry.track).toBeCloseTo(20 * geometry.root, 0);
-    expect(geometry.track).toBeLessThan(geometry.column - 100);
     expect(geometry.top).toBeGreaterThanOrEqual(geometry.textBottom);
-    expect(geometry.left).toBeCloseTo(0, 0);
   });
 
-  test("each memory pressure paints its gauge in that pressure's colour, and never the accent, in both themes", async ({
+  test("each memory pressure paints its bar in that pressure's colour, and never the accent, in both themes", async ({
     daemon,
     page,
   }) => {
-    const [host] = await workerList(daemon);
     await openConsole(page, daemon);
-    const shown = card(page, host?.id ?? "");
-    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
+    await expect(figure(page, "Memory")).toContainText("available");
     // why: only macOS reports a memory pressure, and how full a CI machine's memory happens to be
     // is nobody's to predict. This answers the page's own read of the worker list with the memory
     // reading's own fields set to the level the case asks for and every other field left as the
@@ -638,36 +662,32 @@ test.describe("the workers views", () => {
     // expected on any machine.
     let claim: MemoryClaim = { usedPercent: 50 };
     await answerMemory(page, () => claim);
-    await shown.getByRole("link", { name: host?.id ?? "" }).click();
 
-    const panel = page.getByRole("region", { name: "Load", exact: true });
-    await expect(panel.locator(".load-bar").first()).toBeVisible();
-    const memory = fact(panel, "Memory");
-    const paintedFills = () =>
-      panel.locator(".load-bar").evaluateAll((bars) =>
-        bars.map((bar) => ({
-          tone: /load-bar-(\w+)/.exec(bar.className)?.[1] ?? "",
-          colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
-        })),
-      );
-    // why: the page polls every second, so each level shows within about that. The memory gauge is
-    // identified by its own row, so a tone read here cannot be a leftover of the last level.
     const memoryFill = () =>
-      memory.evaluate((cell) => {
-        const bar = cell.querySelector(".load-bar") as HTMLElement;
+      figure(page, "Memory").evaluate((card) => {
+        const bar = card.querySelector(".load-bar") as HTMLElement;
         return {
           tone: /load-bar-(\w+)/.exec(bar.className)?.[1] ?? "",
           colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
         };
       });
-
-    // why: these six are the whole colour rule for a memory gauge — the worker's three words, that
+    const paintedFills = () =>
+      figures(page)
+        .locator(".load-bar")
+        .evaluateAll((bars) =>
+          bars.map((bar) => ({
+            tone: /load-bar-(\w+)/.exec(bar.className)?.[1] ?? "",
+            colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
+          })),
+        );
+
+    // why: these six are the whole colour rule for a memory bar — the worker's three words, that
     // the word outranks the console's threshold, and the threshold on its own at either end. Each is
     // seen in each theme by the real component, so a tone rule deleted, swapped, or given the accent
-    // fails a named assertion here.
+    // fails a named assertion here. A figure under its threshold is the neutral tone.
     for (const colorScheme of ["light", "dark"] as const) {
       await page.emulateMedia({ colorScheme });
-      const { accent, tones } = await readStatuses(page);
+      const { accent, neutral, tones } = await readSquares(page);
 
       for (const [level, usedPercent, tone] of [
         ["normal", 50, "ok"],
@@ -675,41 +695,39 @@ test.describe("the workers views", () => {
         ["critical", 50, "error"],
         ["normal", 97, "ok"],
         [undefined, 97, "error"],
-        [undefined, 50, "idle"],
+        [undefined, 50, "neutral"],
       ] as const) {
         claim = { usedPercent, ...(level === undefined ? {} : { pressure: level }) };
-        const want = tones[TONES.indexOf(tone)];
+        const want = tone === "neutral" ? neutral : tones[TONES.indexOf(tone)];
         const at = `${usedPercent}%${level === undefined ? " with no word" : ` and ${level}`}`;
         await expect
           .poll(() => memoryFill(), {
             timeout: 5_000,
-            message: `${at} to paint the ${tone} gauge in ${colorScheme}`,
+            message: `${at} to paint the ${tone} bar in ${colorScheme}`,
           })
           .toEqual({ tone, colour: want });
-        expect(want, `the ${tone} gauge in ${colorScheme}`).not.toBe(accent);
+        expect(want, `the ${tone} bar in ${colorScheme}`).not.toBe(accent);
 
-        // why: the poll above watches the memory gauge; this watches the rest of the panel, for the
-        // one thing a poll of a single gauge cannot see.
+        // why: the poll above watches the memory bar; this watches the rest of the figures, for
+        // the one thing a poll of a single bar cannot see.
         const fills = await paintedFills();
         expect(fills.length).toBeGreaterThan(1);
-        expect(gaugeToneFaults(fills, accent)).toEqual([]);
+        for (const fill of fills) {
+          expect(fill.tone, "a bar carries a tone class").not.toBe("");
+          expect(fill.colour, `the ${fill.tone} bar`).not.toBe(accent);
+        }
       }
     }
   });
 
-  test("a load gauge's fill transitions its width over the document's duration token, and over none under reduced motion", async ({
+  test("a bar's fill transitions its width over the document's duration token, and over none under reduced motion", async ({
     browserName,
     daemon,
     page,
   }) => {
-    const [host] = await workerList(daemon);
     await openConsole(page, daemon);
-    const shown = card(page, host?.id ?? "");
-    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
-    await shown.getByRole("link", { name: host?.id ?? "" }).click();
 
-    const panel = page.getByRole("region", { name: "Load", exact: true });
-    const fill = panel.locator(".load-bar-fill").first();
+    const fill = figures(page).locator(".load-bar-fill").first();
     await expect(fill).toBeVisible();
     // why: the stylesheet moves the fill's width over the document's own duration token, which is
     // what `prefers-reduced-motion: reduce` already sets to zero. Both sides are read back as
@@ -739,18 +757,16 @@ test.describe("the workers views", () => {
     }
   });
 
-  test("a disconnected worker's Load row says No reading while disconnected within a second", async ({
-    page,
-  }) => {
+  test("a disconnected worker's square and load say so within a second", async ({ page }) => {
     const fleet = await startFleet([
       { driverScript: { ios: IOS }, label: "worker-a" },
       { driverScript: { ios: IOS }, label: "worker-b" },
     ]);
     try {
       await openConsole(page, fleet.gateway);
-      const load = fact(card(page, "worker-b"), "Load");
+      await row(page, "worker-b").getByRole("link").click();
       // why: the gateway shows a worker's first reading after its refresh, so allow twice the default 5 s wait.
-      await expect(load).toHaveText(/^CPU /, { timeout: 10_000 });
+      await expect(figure(page, "CPU")).toBeVisible({ timeout: 10_000 });
 
       await (fleet.workers[1] as RunningDaemon).stop();
       await untilTheGatewaySays(
@@ -758,73 +774,35 @@ test.describe("the workers views", () => {
         (views) => views.find((view) => view.label === "worker-b")?.connection === "disconnected",
       );
 
-      await expect(load).toHaveText("No reading while disconnected", { timeout: 1_000 });
-    } finally {
-      await disposeFleet(fleet);
-    }
-  });
-
-  test("a disconnected worker shows as disconnected within a second", async ({ page }) => {
-    const fleet = await startFleet([
-      { driverScript: { ios: IOS }, label: "worker-a" },
-      { driverScript: { ios: IOS }, label: "worker-b" },
-    ]);
-    try {
-      await openConsole(page, fleet.gateway);
-      const connection = fact(card(page, "worker-b"), "Connection");
-      await expect(connection).toHaveText("connected");
-
-      await (fleet.workers[1] as RunningDaemon).stop();
-      await untilTheGatewaySays(
-        fleet.gateway,
-        (views) => views.find((view) => view.label === "worker-b")?.connection === "disconnected",
-      );
-
-      await expect(connection).toHaveText("disconnected", { timeout: 1_000 });
-      await expect(fact(card(page, "worker-a"), "Connection")).toHaveText("connected");
+      await expect(row(page, "worker-b").getByRole("img", { name: "disconnected" })).toBeVisible({
+        timeout: 1_000,
+      });
+      await expect(page.getByText("No reading while disconnected")).toBeVisible({ timeout: 1_000 });
+      await expect(row(page, "worker-a").getByRole("img", { name: "disconnected" })).toHaveCount(0);
+      await expect(page.locator(".list-meta")).toHaveText("1 / 2 up");
     } finally {
       await disposeFleet(fleet);
     }
   });
 
-  test("stopping the daemon shows the reconnecting banner with the data's age", async ({
-    page,
-  }) => {
-    const host = await startDaemon("worker", { driverScript: { ios: IOS } });
-    try {
-      await openConsole(page, host);
-      const banner = page.locator(".connection");
-      await expect(banner).toHaveText("Connected");
-      const [view] = await workerList(host);
-
-      await host.stop();
-
-      await expect(banner).toHaveText(/^Reconnecting — data from \d+ s ago$/);
-      const age = async () => Number(/(\d+) s ago/.exec((await banner.textContent()) ?? "")?.[1]);
-      const first = await age();
-      await expect.poll(age).toBeGreaterThan(first);
-      // The data stays on screen.
-      await expect(card(page, view?.id ?? "")).toBeVisible();
-    } finally {
-      await host.dispose();
-    }
-  });
-
-  test("starting the daemon again clears the banner and refreshes the data", async ({ page }) => {
+  test("starting the daemon again refreshes the data the page shows", async ({ page }) => {
     const host = await startDaemon("worker", {
       driverScript: { ios: { ...IOS, toolVersions: [{ name: "xcode", version: "16.4" }] } },
     });
     try {
       const [view] = await workerList(host);
       await openConsole(page, host);
-      await page.getByRole("link", { name: view?.id ?? "" }).click();
+      await row(page, view?.id ?? "")
+        .getByRole("link")
+        .click();
+      await openTab(page, "Host");
       const banner = page.locator(".connection");
       const tools = fact(page.locator("#main"), "Tools");
       await expect(tools).toHaveText("xcode 16.4 for iOS");
 
       await host.stop();
       await expect(banner).toHaveText(/^Reconnecting/);
-      // A fact the daemon reads only as it starts, so the page shows it only if it reads again.
+      await expect(tools).toHaveText("xcode 16.4 for iOS");
       await host.writeDriverScript({
         ios: { ...IOS, toolVersions: [{ name: "xcode", version: "26.0" }] },
       });
@@ -837,7 +815,7 @@ test.describe("the workers views", () => {
     }
   });
 
-  test("every status shows a word with its colour, and none uses the accent colour", async ({
+  test("every status square shows its word with a status colour, and none uses the accent colour", async ({
     page,
   }) => {
     const fleet = await startFleet([
@@ -850,22 +828,29 @@ test.describe("the workers views", () => {
       const b = (await workerList(fleet.gateway)).find((view) => view.label === "worker-b");
       expect((await fleet.gateway.cli(["worker", "drain", b?.id ?? ""])).code).toBe(0);
       await lease(fleet.workers[0] as RunningDaemon, "console-e2e");
+      await answerWithoutLoad(page);
       await openConsole(page, fleet.gateway);
-      await expect(fact(card(page, "old-worker"), "Connection")).toHaveText("incompatible");
-      await expect(fact(card(page, "worker-b"), "Connection")).toHaveText("connected drained");
+      await expect(
+        row(page, "old-worker").getByRole("img", { name: "incompatible" }),
+      ).toBeVisible();
+      await expect(row(page, "worker-b").getByRole("img", { name: "drained" })).toBeVisible();
 
       for (const colorScheme of ["light", "dark"] as const) {
         await page.emulateMedia({ colorScheme });
-        await page.getByRole("link", { name: "Workers", exact: true }).click();
-        await expectStatusColours(page, `list ${colorScheme}`, [
+        await expectSquareColours(page, `list ${colorScheme}`, [
           "connected",
           "drained",
           "incompatible",
+        ]);
+        await row(page, "worker-a").getByRole("link").click();
+        await openTab(page, "Host");
+        await expectSquareColours(page, `host ${colorScheme}`, [
+          "connected",
           "running",
           "compatible",
         ]);
-        await page.getByRole("link", { name: "worker-a", exact: true }).click();
-        await expectStatusColours(page, `detail ${colorScheme}`, ["connected", "leased"]);
+        await openTab(page, "Overview");
+        await expectSquareColours(page, `overview ${colorScheme}`, ["connected", "leased"]);
       }
     } finally {
       hangUp();
@@ -873,7 +858,9 @@ test.describe("the workers views", () => {
     }
   });
 
-  test("the workers views have no horizontal scroll at 360px wide", async ({ page }) => {
+  test("the workers page has no horizontal scroll at 360px wide, in the list and in the inspector", async ({
+    page,
+  }) => {
     const host = await startDaemon("worker", {
       driverScript: {
         ios: {
@@ -885,31 +872,38 @@ test.describe("the workers views", () => {
     try {
       await lease(host, "console-e2e");
       await page.setViewportSize({ height: 740, width: 360 });
-      await openConsole(page, host);
-      await expect(page.locator(".card")).toHaveCount(1);
+      await page.goto(new URL("/workers", host.url).href);
+      await signIn(page, host.tokens.operator);
+      const [view] = await workerList(host);
+      await expect(page.getByRole("list", { name: "Workers", exact: true })).toBeVisible();
+      await expect(page.getByRole("heading", { level: 2 })).toBeHidden();
       expect(await hasHorizontalScroll(page)).toBe(false);
 
-      await page.locator(".card").getByRole("link").click();
+      await row(page, view?.id ?? "")
+        .getByRole("link")
+        .click();
       await expect(page.locator("tbody tr").first()).toBeVisible();
+      await expect(page.getByRole("list", { name: "Workers", exact: true })).toBeHidden();
       expect(await hasHorizontalScroll(page)).toBe(false);
+      for (const tab of ["Host", "Warm pool"]) {
+        await openTab(page, tab);
+        expect(await hasHorizontalScroll(page), tab).toBe(false);
+      }
     } finally {
       await host.dispose();
     }
   });
 
-  test("the workers views are usable with the keyboard alone", async ({
+  test("the workers page is usable with the keyboard alone", async ({
     browserName,
     daemon,
     page,
   }) => {
-    // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const [host] = await workerList(daemon);
     const name = host?.id ?? "";
-    /** Tabs forward until the link named `label` has focus, and follows it with Enter. */
-    const follow = async (label: string) => {
-      const link = page.getByRole("link", { name: label, exact: true });
-      for (let step = 0; step < 20; step += 1) {
+    const follow = async (link: Locator) => {
+      for (let step = 0; step < 30; step += 1) {
         if (await link.evaluate((element) => element === document.activeElement)) break;
         await page.keyboard.press(tab);
       }
@@ -920,12 +914,25 @@ test.describe("the workers views", () => {
     await page.keyboard.press(tab);
     await page.keyboard.type(daemon.tokens.operator);
     await page.keyboard.press("Enter");
+    await follow(page.getByRole("link", { name: "Workers", exact: true }));
     await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
 
-    await follow(name);
-    await expect(page.getByRole("heading", { level: 1, name })).toBeVisible();
+    await follow(row(page, name).getByRole("link"));
+    await expect(page).toHaveURL(new RegExp(`/workers/${encodeURIComponent(name)}$`));
+    await expect(title(page, name)).toBeVisible();
 
-    await follow("All workers");
-    await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+    const host_tab = page.getByRole("tab", { name: "Host" });
+    for (let step = 0; step < 30; step += 1) {
+      if (await host_tab.evaluate((element) => element === document.activeElement)) break;
+      await page.keyboard.press(tab);
+    }
+    await expect(host_tab).toBeFocused();
+    await page.keyboard.press("Enter");
+    await expect(host_tab).toHaveAttribute("aria-selected", "true");
+
+    await follow(
+      page.getByRole("navigation", { name: "Breadcrumb" }).getByRole("link", { name: "Workers" }),
+    );
+    await expect(page).toHaveURL(/\/workers$/);
   });
 });
diff --git a/ui/src/model/load.test.ts b/ui/src/model/load.test.ts
index 72fb70b48..6e27d64d8 100644
--- a/ui/src/model/load.test.ts
+++ b/ui/src/model/load.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { formatBusyPercent, formatBytes, formatCores, loadGauges, loadSummary } from "./load";
+import { formatBusyPercent, formatBytes, formatCores, loadGauges } from "./load";
 
 const MIB = 1024 ** 2;
 const GIB = 1024 ** 3;
@@ -33,38 +33,6 @@ const FULL = {
   readAt: 0,
 };
 
-describe("the card summary", () => {
-  it("lists CPU, memory and disk as the table shows, with (limit) on a limited part, including memory under 1 GiB", () => {
-    expect(loadSummary(FULL)).toBe("CPU 34% · memory 9.8 of 32.0 GiB · disk 112.4 GiB free");
-    expect(
-      loadSummary({
-        ...FULL,
-        cpu: { busyPercent: 61, cores: 2, limited: true },
-        disk: { freeBytes: 40.2 * GIB, totalBytes: 100 * GIB },
-        memory: { ...FULL.memory, availableBytes: 3.1 * GIB, limited: true, totalBytes: 8 * GIB },
-      }),
-    ).toBe("CPU 61% (limit) · memory 3.1 of 8.0 GiB (limit) · disk 40.2 GiB free");
-    expect(
-      loadSummary({
-        ...FULL,
-        memory: { ...FULL.memory, availableBytes: 300 * MIB, totalBytes: 8 * GIB },
-      }),
-    ).toContain("memory 300 MiB of 8.0 GiB");
-  });
-
-  it("says CPU unavailable, memory unavailable or disk unavailable for an absent part", () => {
-    const { cpu: _cpu, ...noCpu } = FULL;
-    const { memory: _memory, ...noMemory } = FULL;
-    const { disk: _disk, ...noDisk } = FULL;
-
-    expect(loadSummary(noCpu)).toBe(
-      "CPU unavailable · memory 9.8 of 32.0 GiB · disk 112.4 GiB free",
-    );
-    expect(loadSummary(noMemory)).toBe("CPU 34% · memory unavailable · disk 112.4 GiB free");
-    expect(loadSummary(noDisk)).toBe("CPU 34% · memory 9.8 of 32.0 GiB · disk unavailable");
-  });
-});
-
 describe("how full each figure is", () => {
   it("answers each figure's fullness as a whole percent", () => {
     expect(loadGauges(FULL)).toEqual({ cpu: 34, disk: 77, memory: 69 });
diff --git a/ui/src/model/load.ts b/ui/src/model/load.ts
index e110207bf..750642f08 100644
--- a/ui/src/model/load.ts
+++ b/ui/src/model/load.ts
@@ -10,10 +10,6 @@ function roundHalfUp(value: number, decimals: number): number {
   return Math.floor(value * scale + 0.5) / scale;
 }
 
-function isGib(bytes: number): boolean {
-  return bytes > 0 && Math.floor(bytes / MIB + 0.5) >= 1024;
-}
-
 export function formatBytes(bytes: number): string {
   if (bytes <= 0) return "0 B";
   const mebibytes = Math.floor(bytes / MIB + 0.5);
@@ -57,24 +53,3 @@ function usedPercent(available: number, total: number): number | undefined {
   if (!(total > 0)) return undefined;
   return clampPercent((1 - available / total) * 100);
 }
-
-export function loadSummary(load: WorkerLoad): string {
-  const { cpu, disk, memory } = load;
-  const cpuPart =
-    cpu === undefined
-      ? "CPU unavailable"
-      : `CPU ${formatBusyPercent(cpu.busyPercent)}${cpu.limited ? " (limit)" : ""}`;
-  let memoryPart = "memory unavailable";
-  if (memory !== undefined) {
-    const bothGib = isGib(memory.availableBytes) && isGib(memory.totalBytes);
-    const available = bothGib
-      ? roundHalfUp(memory.availableBytes / GIB, 1).toFixed(1)
-      : formatBytes(memory.availableBytes);
-    memoryPart = `memory ${available} of ${formatBytes(memory.totalBytes)}${
-      memory.limited ? " (limit)" : ""
-    }`;
-  }
-  const diskPart =
-    disk === undefined ? "disk unavailable" : `disk ${formatBytes(disk.freeBytes)} free`;
-  return [cpuPart, memoryPart, diskPart].join(" · ");
-}
diff --git a/ui/src/model/worker-page.test.ts b/ui/src/model/worker-page.test.ts
new file mode 100644
index 000000000..d10ddb64a
--- /dev/null
+++ b/ui/src/model/worker-page.test.ts
@@ -0,0 +1,639 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  filterWorkers,
+  listSearch,
+  upMeta,
+  type WorkerInspector,
+  workerInspectorOf,
+  workerRow,
+} from "./worker-page";
+import type { WorkerDevice, WorkerView } from "./workers";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+const GIB = 1024 ** 3;
+
+const ENTRY = {
+  atRamBudget: false,
+  limit: 4,
+  maxRunning: 4,
+  overLimit: false,
+  reserved: 0,
+  running: 1,
+  used: 1,
+  warm: 0,
+};
+
+const CAPACITY = {
+  android: { ...ENTRY, running: 0, used: 0 },
+  global: { maxRunning: 4, overLimit: false, reserved: 0, running: 1, warm: 0 },
+  ios: ENTRY,
+};
+
+function worker(overrides: Partial<WorkerView> = {}): WorkerView {
+  return {
+    capacity: CAPACITY,
+    catalog: [],
+    connection: "connected",
+    devices: [],
+    drained: false,
+    health: "running",
+    id: "wrk_1",
+    lastSeenAt: NOW,
+    leases: [],
+    ...overrides,
+  };
+}
+
+function device(overrides: Record<string, unknown> = {}): WorkerDevice {
+  return {
+    id: "dev_1",
+    mode: "full",
+    physical: false,
+    servesDefaultMode: true,
+    spec: { model: "iPhone 16", osVersion: "18.4", physical: false, platform: "ios" },
+    state: "ready",
+    ...overrides,
+  } as unknown as WorkerDevice;
+}
+
+const LEASE = {
+  deviceId: "dev_1",
+  grantedAt: NOW - 125_000,
+  id: "l_1",
+  idChosenByRequester: false,
+  lastRenewedAt: NOW - 20_000,
+  ownerId: "agent",
+  requesterId: "tok_1",
+  ttlDeadline: NOW + 60_000,
+  ttlMs: 185_000,
+};
+
+const LOAD = {
+  cpu: { busyPercent: 34, cores: 10, limited: false },
+  disk: { freeBytes: 112.4 * GIB, totalBytes: 494.4 * GIB },
+  memory: {
+    availableBytes: 9.8 * GIB,
+    limited: false,
+    pressure: "normal" as const,
+    swapUsedBytes: 1.2 * GIB,
+    totalBytes: 32 * GIB,
+  },
+  readAt: NOW - 12_000,
+};
+
+function inspect(
+  view: WorkerView,
+  now = NOW,
+  tokens: Parameters<typeof workerInspectorOf>[0]["tokens"] = [],
+) {
+  return workerInspectorOf({ now, tokens, worker: view });
+}
+
+function figure(inspector: WorkerInspector, label: string) {
+  return inspector.overview.figures.find((card) => card.label === label);
+}
+
+describe("a worker's row in the list", () => {
+  it("carries the worker's name, its health square and its running figure over the sum of its platform limits", () => {
+    const row = workerRow(worker({ label: "worker-a" }));
+
+    expect(row).toMatchObject({
+      health: { tone: "ok", word: "connected" },
+      mono: false,
+      name: "worker-a",
+      to: "/workers/wrk_1",
+      use: { limit: 8, percent: 12.5, running: 1 },
+    });
+  });
+
+  it("names a worker with no label by its id, in mono", () => {
+    expect(workerRow(worker())).toMatchObject({ mono: true, name: "wrk_1" });
+  });
+
+  it("puts the worst finding in the square's word and nowhere else in the row", () => {
+    const row = workerRow(worker({ drained: true }));
+
+    expect(row.health).toEqual({ tone: "warn", word: "drained" });
+    expect(Object.keys(row).sort()).toEqual(["health", "id", "mono", "name", "to", "use"]);
+  });
+
+  it("has no use for a worker that is not connected or has reported no capacity", () => {
+    expect(workerRow(worker({ connection: "disconnected" })).use).toBeUndefined();
+    expect(workerRow(worker({ capacity: undefined })).use).toBeUndefined();
+  });
+
+  it("keeps the list's page and size on the link, and nothing of a worker's own pagers", () => {
+    expect(listSearch("?page=2&size=50&devices-page=3&warm-pool-size=50")).toBe("?page=2&size=50");
+    expect(listSearch("?devices-page=3")).toBe("");
+    expect(workerRow(worker(), "?page=2").to).toBe("/workers/wrk_1?page=2");
+  });
+});
+
+describe("the list's filters and header", () => {
+  const busy = worker({
+    id: "wrk_busy",
+    capacity: {
+      ...CAPACITY,
+      android: { ...ENTRY, limit: 2, running: 2 },
+      ios: { ...ENTRY, limit: 4, running: 4 },
+    },
+  });
+  const quiet = worker({ id: "wrk_quiet" });
+  const lost = worker({ connection: "disconnected", id: "wrk_lost" });
+  const all = [quiet, busy, lost];
+
+  it("All keeps every worker, Issues those whose health is not ok, Busy those with three quarters of their slots in use", () => {
+    expect(filterWorkers(all, "all").map((entry) => entry.id)).toEqual([
+      "wrk_quiet",
+      "wrk_busy",
+      "wrk_lost",
+    ]);
+    expect(filterWorkers(all, "issues").map((entry) => entry.id)).toEqual(["wrk_lost"]);
+    expect(filterWorkers(all, "busy").map((entry) => entry.id)).toEqual(["wrk_busy"]);
+  });
+
+  it("counts a worker as busy at exactly 75% and not below it", () => {
+    const at = (running: number) =>
+      worker({
+        capacity: {
+          ...CAPACITY,
+          android: { ...ENTRY, limit: 0, running: 0 },
+          ios: { ...ENTRY, limit: 4, running },
+        },
+      });
+
+    expect(filterWorkers([at(3)], "busy")).toHaveLength(1);
+    expect(filterWorkers([at(2)], "busy")).toHaveLength(0);
+  });
+
+  it("reads how many workers are up of all", () => {
+    expect(upMeta(all)).toBe("2 / 3 up");
+    expect(upMeta([])).toBe("0 / 0 up");
+  });
+});
+
+describe("a worker's load figures", () => {
+  it("states CPU, memory, swap, pressure, disk and the reading's age in the old panel's words", () => {
+    const inspector = inspect(worker({ load: LOAD }));
+
+    expect(figure(inspector, "CPU")?.text).toBe("34% busy, 10 cores");
+    expect(figure(inspector, "Memory")?.text).toBe("9.8 GiB of 32.0 GiB available");
+    expect(figure(inspector, "Memory")?.details).toEqual([
+      { label: "Swap", text: "1.2 GiB used" },
+      { label: "Pressure", text: "normal", tone: "ok" },
+    ]);
+    expect(figure(inspector, "Disk")?.text).toBe("112.4 GiB of 494.4 GiB free");
+    expect(inspector.overview.read).toBe("12 s ago");
+  });
+
+  it("fills each meter to the figure's own percent", () => {
+    const inspector = inspect(worker({ load: LOAD }));
+
+    expect(
+      [figure(inspector, "CPU"), figure(inspector, "Memory"), figure(inspector, "Disk")].map(
+        (card) => card?.percent,
+      ),
+    ).toEqual([34, 69, 77]);
+  });
+
+  it("writes (limit) after a limited CPU or memory figure", () => {
+    const inspector = inspect(
+      worker({
+        load: {
+          ...LOAD,
+          cpu: { busyPercent: 61, cores: 2, limited: true },
+          memory: { ...LOAD.memory, limited: true },
+        },
+      }),
+    );
+
+    expect(figure(inspector, "CPU")?.text).toBe("61% busy, 2 cores (limit)");
+    expect(figure(inspector, "Memory")?.text).toBe("9.8 GiB of 32.0 GiB available (limit)");
+  });
+
+  it("colours the memory meter by the worker's pressure word, whatever the percent", () => {
+    const memory = (pressure: "normal" | "warn" | "critical") =>
+      figure(
+        inspect(worker({ load: { ...LOAD, memory: { ...LOAD.memory, pressure } } })),
+        "Memory",
+      );
+
+    expect(memory("normal")?.tone).toBe("ok");
+    expect(memory("warn")?.tone).toBe("warn");
+    expect(memory("critical")?.tone).toBe("error");
+  });
+
+  it("falls back to the console's threshold for memory the worker gives no pressure for", () => {
+    const { pressure: _pressure, ...bare } = LOAD.memory;
+    const memory = (availableBytes: number) =>
+      figure(inspect(worker({ load: { ...LOAD, memory: { ...bare, availableBytes } } })), "Memory");
+
+    expect(memory(0.96 * GIB)).toMatchObject({ percent: 97, tone: "error" });
+    expect(memory(1.5 * GIB)).toMatchObject({ percent: 95, tone: "error" });
+    expect(memory(30 * GIB)).toMatchObject({ percent: 6, tone: "neutral" });
+    expect(memory(30 * GIB)?.details.map((detail) => detail.label)).toEqual(["Swap"]);
+  });
+
+  it("colours the CPU and disk meters by the console's own thresholds, one step under each edge included", () => {
+    const cpu = (busyPercent: number) =>
+      figure(inspect(worker({ load: { ...LOAD, cpu: { ...LOAD.cpu, busyPercent } } })), "CPU")
+        ?.tone;
+    const disk = (free: number) =>
+      figure(
+        inspect(
+          worker({ load: { ...LOAD, disk: { freeBytes: free * GIB, totalBytes: 500 * GIB } } }),
+        ),
+        "Disk",
+      )?.tone;
+
+    expect([84, 85, 94, 95].map(cpu)).toEqual(["neutral", "warn", "warn", "error"]);
+    expect([80, 75, 30, 25].map(disk)).toEqual(["neutral", "warn", "warn", "error"]);
+  });
+
+  it("says Unavailable, with no meter, for an absent CPU, memory or disk", () => {
+    const { cpu: _cpu, ...noCpu } = LOAD;
+    const { memory: _memory, ...noMemory } = LOAD;
+    const { disk: _disk, ...noDisk } = LOAD;
+
+    expect(figure(inspect(worker({ load: noCpu })), "CPU")).toMatchObject({ text: "Unavailable" });
+    expect(figure(inspect(worker({ load: noCpu })), "CPU")?.percent).toBeUndefined();
+    expect(figure(inspect(worker({ load: noMemory })), "Memory")?.text).toBe("Unavailable");
+    expect(figure(inspect(worker({ load: noDisk })), "Disk")?.text).toBe("Unavailable");
+  });
+
+  it("prints a figure whose total is zero without a meter", () => {
+    const inspector = inspect(
+      worker({
+        load: { ...LOAD, memory: { ...LOAD.memory, availableBytes: 12 * GIB, totalBytes: 0 } },
+      }),
+    );
+
+    expect(figure(inspector, "Memory")?.text).toContain("available");
+    expect(figure(inspector, "Memory")?.percent).toBeUndefined();
+  });
+
+  it("ages the reading as now minus readAt rounded up to a whole second", () => {
+    const view = worker({ load: { ...LOAD, readAt: NOW - 4_100 } });
+
+    expect(inspect(view).overview.read).toBe("5 s ago");
+    expect(inspect(view, NOW + 10_000).overview.read).toBe("15 s ago");
+    expect(inspect(worker({ load: { ...LOAD, readAt: NOW + 3_000 } })).overview.read).toBe(
+      "0 s ago",
+    );
+  });
+
+  it("says No reading while disconnected for a disconnected worker, Not reported for a connected one with no load, and nothing for an incompatible one", () => {
+    expect(inspect(worker({ connection: "disconnected", load: LOAD })).overview).toMatchObject({
+      figures: [],
+      loadNote: "No reading while disconnected",
+    });
+    expect(inspect(worker()).overview).toMatchObject({ figures: [], loadNote: "Not reported" });
+    const incompatible = inspect(worker({ connection: "incompatible", load: LOAD }));
+    expect(incompatible.overview.figures).toEqual([]);
+    expect(incompatible.overview.loadNote).toBeUndefined();
+  });
+});
+
+describe("a worker's capacity and leases", () => {
+  it("gives each platform its running and limit, and its slots by state with the room left as free", () => {
+    const inspector = inspect(worker({ devices: [device()] }));
+
+    expect(
+      inspector.overview.platforms.map((platform) => [
+        platform.name,
+        platform.running,
+        platform.limit,
+      ]),
+    ).toEqual([
+      ["iOS", 1, 4],
+      ["Android", 0, 4],
+    ]);
+    expect(inspector.overview.platforms[0]?.label).toBe("iOS: 1 ready, 3 free");
+    expect(inspector.overview.platforms[0]?.slots).toHaveLength(4);
+  });
+
+  it("counts the leases it holds beside the devices running", () => {
+    expect(inspect(worker({ leases: [LEASE] })).overview.leases).toEqual({ count: 1, running: 1 });
+  });
+
+  it("leaves capacity, leases and devices out for a worker that reports it is starting", () => {
+    const starting: WorkerView = {
+      connection: "connected",
+      drained: false,
+      health: "starting",
+      host: { arch: "arm64", os: "macOS", osVersion: "15.5", tools: [] },
+      id: "wrk_1",
+      lastSeenAt: NOW,
+    };
+
+    const inspector = inspect(starting);
+
+    expect(inspector.overview).toMatchObject({ platforms: [], starting: true });
+    expect(inspector.overview.devices).toBeUndefined();
+    expect(inspector.overview.leases).toBeUndefined();
+    expect(inspector.warm).toBeUndefined();
+    expect(inspector.tabs.map((tab) => tab.value)).toEqual(["overview", "host"]);
+    expect(inspector.host.capabilities).toBeUndefined();
+    expect(inspector.health).toEqual({ tone: "warn", word: "starting" });
+  });
+});
+
+describe("a worker's device rows", () => {
+  it("shows an unknown state as its own word in the neutral tone", () => {
+    const [row] =
+      inspect(worker({ devices: [device({ state: "hibernating" })] })).overview.devices ?? [];
+
+    expect(row?.status).toEqual({ tone: "idle", word: "hibernating" });
+  });
+
+  it("shows an absent device's state as absent in the warn tone", () => {
+    const [row] =
+      inspect(worker({ devices: [device({ state: "absent" })] })).overview.devices ?? [];
+
+    expect(row?.status).toEqual({ tone: "warn", word: "absent" });
+  });
+
+  it("gives a leased device its holder, a link to the lease, the time on the lease and what is left of it", () => {
+    const view = worker({ devices: [device({ state: "leased" })], leases: [LEASE] });
+
+    const [row] =
+      inspect(view, NOW, [{ id: "tok_1", label: "ci-agent" }] as never).overview.devices ?? [];
+
+    expect(row).toMatchObject({
+      expires: "1 min",
+      holder: { id: "tok_1", name: "ci-agent", to: "/leases/l_1/" },
+      renewed: "20 s ago",
+      since: "2 min 5 s",
+    });
+  });
+
+  it("names a holder by its id where no token has it", () => {
+    const view = worker({ devices: [device({ state: "leased" })], leases: [LEASE] });
+
+    expect(inspect(view).overview.devices?.[0]?.holder?.name).toBe("tok_1");
+  });
+
+  it("shows how long a device has been in a state the data dates, and a dash-able gap for one it does not", () => {
+    const view = worker({
+      devices: [
+        device({ id: "dev_new", state: "provisioning", transitionAgeMs: 4_000 }),
+        device({ id: "dev_ready" }),
+      ],
+      lastSeenAt: NOW - 10_000,
+    });
+
+    const rows = inspect(view).overview.devices ?? [];
+
+    expect(rows.map((row) => [row.id, row.since])).toEqual([
+      ["dev_new", "14 s"],
+      ["dev_ready", undefined],
+    ]);
+  });
+
+  it("shows no time for a device mid-provisioning on a disconnected worker", () => {
+    const view = worker({
+      connection: "disconnected",
+      devices: [device({ state: "provisioning", transitionAgeMs: 4_000 })],
+      lastSeenAt: NOW - 10_000,
+    });
+
+    expect(inspect(view).overview.devices?.[0]?.since).toBeUndefined();
+  });
+
+  it("marks a physical device Physical with no mode and no image tag, and a simulator Virtual", () => {
+    const physical = device({
+      class: "phone",
+      id: "dev_p",
+      mode: undefined,
+      physical: true,
+      spec: { model: "iPhone 15 Pro", osVersion: "18.4", physical: true, platform: "ios" },
+    });
+    const rows =
+      inspect(worker({ devices: [physical, device({ id: "dev_v" })] })).overview.devices ?? [];
+
+    expect(rows.map((row) => [row.id, row.physical, row.mode, row.imageTag])).toEqual([
+      ["dev_p", true, undefined, undefined],
+      ["dev_v", false, undefined, undefined],
+    ]);
+  });
+
+  it("shows a mode only where the device is not served as the default, and an image tag where it has one", () => {
+    const slim = device({ id: "dev_slim", mode: "slim", servesDefaultMode: false });
+    const tagged = device({
+      id: "dev_tag",
+      spec: {
+        imageTag: "google_apis",
+        model: "Pixel 9",
+        osVersion: "35",
+        physical: false,
+        platform: "android",
+      },
+    });
+
+    const rows = inspect(worker({ devices: [slim, tagged] })).overview.devices ?? [];
+
+    expect(rows.map((row) => [row.id, row.mode, row.imageTag, row.platform])).toEqual([
+      ["dev_slim", "slim", undefined, "iOS"],
+      ["dev_tag", undefined, "google_apis", "Android"],
+    ]);
+  });
+});
+
+describe("a worker's host tab", () => {
+  it("names the machine, its tools with their build, its connection, drain and health", () => {
+    const { host } = inspect(
+      worker({
+        drained: true,
+        host: {
+          arch: "arm64",
+          os: "macOS",
+          osVersion: "15.5",
+          tools: [{ build: "16F6", name: "xcode", platform: "ios", version: "16.4" }],
+        },
+      }),
+    );
+
+    expect(host).toMatchObject({
+      connection: { tone: "ok", word: "connected" },
+      drained: true,
+      health: { tone: "ok", word: "running" },
+      host: {
+        arch: "arm64",
+        os: "macOS 15.5",
+        tools: [{ name: "xcode", platform: "iOS", version: "16.4 (16F6)" }],
+      },
+      id: "wrk_1",
+    });
+  });
+
+  it("calls a worker compatible, and names both protocol ranges for an incompatible one", () => {
+    expect(inspect(worker()).host.protocol).toEqual({ compatible: true });
+    const old = inspect({
+      connection: "incompatible",
+      drained: false,
+      id: "wrk_1",
+      lastSeenAt: NOW,
+      protocol: { gateway: { max: 35, min: 35 }, worker: { max: 30, min: 30 } },
+    });
+
+    expect(old.host.protocol).toEqual({ compatible: false, ranges: "gateway 35–35, worker 30–30" });
+    expect(old.overview.incompatible).toBe(true);
+  });
+
+  it("shows a capability's state in its tone with its reason, and Not reported for an absent list", () => {
+    const { host } = inspect(
+      worker({
+        capabilities: [
+          { name: "agent-device", state: "available" },
+          { name: "second", state: "off" },
+          { name: "third", reason: "found 0.20.1, need 0.21.28 or later", state: "unavailable" },
+        ],
+      }),
+    );
+
+    expect(host.capabilities).toEqual([
+      { name: "agent-device", state: "available", tone: "ok" },
+      { name: "second", state: "off", tone: "idle" },
+      {
+        name: "third",
+        reason: "found 0.20.1, need 0.21.28 or later",
+        state: "unavailable",
+        tone: "warn",
+      },
+    ]);
+    expect(inspect(worker()).host.capabilities).toBe("not-reported");
+  });
+
+  it("lists the catalog's models and runtimes per platform, marking the default runtime", () => {
+    const { host } = inspect(
+      worker({
+        catalog: [
+          {
+            classDefaults: {},
+            defaultRuntime: "26.0",
+            modelAliases: {},
+            modelClasses: {},
+            modelRuntimes: {},
+            models: ["iPhone 17"],
+            platform: "ios",
+            runtimes: ["18.4", "26.0"],
+          },
+          {
+            classDefaults: {},
+            modelAliases: {},
+            modelClasses: {},
+            modelRuntimes: {},
+            models: [],
+            platform: "android",
+            runtimes: [],
+          },
+        ],
+      }),
+    );
+
+    expect(host.catalog).toEqual([
+      { models: "iPhone 17", platform: "iOS", runtimes: "18.4, 26.0 (default)" },
+      { models: "none", platform: "Android", runtimes: "none" },
+    ]);
+    expect(inspect(worker({ catalog: undefined })).host.catalog).toEqual([]);
+  });
+});
+
+describe("a worker's warm pool tab", () => {
+  const target = {
+    booting: 0,
+    count: 1,
+    mode: "full" as const,
+    model: "iPhone 17",
+    osVersion: "27.0",
+    platform: "ios" as const,
+    ready: 0,
+    short: "runtime-missing" as const,
+  };
+
+  it("lists each kind the pool keeps with its wanted, ready and booting numbers and the reason it is short, a dash where there is none", () => {
+    const { warm } = inspect(
+      worker({
+        warmPool: {
+          enabled: true,
+          reserveRunning: { android: 0, ios: 1 },
+          targets: [
+            { ...target, booting: 1, count: 2, osVersion: "26.0", ready: 1, short: undefined },
+            { ...target, osVersion: undefined },
+          ],
+        },
+      }),
+    );
+
+    expect(warm?.pool).toEqual({ enabled: "On", reserve: "iOS 1, Android 0" });
+    expect(
+      warm?.targets.map((row) => [
+        row.model,
+        row.runtime,
+        row.wanted,
+        row.ready,
+        row.booting,
+        row.short,
+      ]),
+    ).toEqual([
+      ["iPhone 17", "26.0", 2, 1, 1, "—"],
+      ["iPhone 17", "—", 1, 0, 0, "runtime-missing"],
+    ]);
+  });
+
+  it("says the pool is off when the worker reports it so, and keeps two refused targets of one kind as two rows", () => {
+    const { warm } = inspect(
+      worker({
+        warmPool: {
+          enabled: false,
+          reserveRunning: { android: 0, ios: 0 },
+          targets: [target, target],
+        },
+      }),
+    );
+
+    expect(warm?.pool?.enabled).toBe("Off");
+    expect(new Set(warm?.targets.map((row) => row.key)).size).toBe(2);
+  });
+
+  it("has no pool for a worker that has not reported one", () => {
+    expect(inspect(worker()).warm?.pool).toBeUndefined();
+  });
+
+  it("lists the installs in progress with their state, how long and how many wait", () => {
+    const { warm } = inspect(
+      worker({
+        installs: [
+          {
+            component: "19.0",
+            platform: "ios",
+            since: NOW - 7_000,
+            state: "downloading",
+            waiters: 1,
+          },
+          {
+            component: "36",
+            platform: "android",
+            since: NOW - 3_000,
+            state: "waiting",
+            waiters: 3,
+          },
+        ],
+      }),
+    );
+
+    expect(
+      warm?.installs.map((install) => [
+        install.platform,
+        install.component,
+        install.status,
+        install.duration,
+        install.waiters,
+      ]),
+    ).toEqual([
+      ["iOS", "19.0", { tone: "ok", word: "downloading" }, "7 s", "1 waiter"],
+      ["Android", "36", { tone: "idle", word: "waiting" }, "3 s", "3 waiters"],
+    ]);
+  });
+});
diff --git a/ui/src/model/worker-page.ts b/ui/src/model/worker-page.ts
new file mode 100644
index 000000000..a4c0e362a
--- /dev/null
+++ b/ui/src/model/worker-page.ts
@@ -0,0 +1,514 @@
+import { type DeviceSlot, platformSlots, slotsLabel, workerHealth } from "./fleet";
+import { formatBusyPercent, formatBytes, formatCores, loadGauges } from "./load";
+import { levelOf } from "./load-thresholds";
+import { holderOf, leasePath, type TokenRecord } from "./leases";
+import { formatDuration } from "./time";
+import {
+  connectionStatus,
+  deviceStateStatus,
+  healthStatus,
+  installStatus,
+  pressureStatus,
+  type Tone,
+  type Toned,
+} from "./tones";
+import {
+  capacityByPlatform,
+  platformName,
+  stateEnteredAt,
+  type WarmPoolRow,
+  warmPoolRows,
+  type WorkerDevice,
+  type WorkerView,
+  workerName,
+  workerPath,
+} from "./workers";
+
+export type WorkerFilter = "all" | "issues" | "busy";
+
+export const WORKER_FILTERS: readonly { readonly value: WorkerFilter; readonly label: string }[] = [
+  { label: "All", value: "all" },
+  { label: "Issues", value: "issues" },
+  { label: "Busy", value: "busy" },
+];
+
+// why: a worker is busy once three quarters of the slots it may run are in use, which is where an
+// operator starts to wonder whether the next lease will wait.
+const BUSY_PERCENT = 75;
+
+export interface WorkerUse {
+  readonly running: number;
+  readonly limit: number;
+  readonly percent: number;
+}
+
+export interface WorkerRow {
+  readonly id: string;
+  readonly name: string;
+  readonly mono: boolean;
+  readonly to: string;
+  readonly health: Toned;
+  readonly use?: WorkerUse;
+}
+
+// why: a worker that is not connected keeps the capacity it last reported, which would read as
+// slots in use that nobody can lease, so its row says nothing about use.
+function useOf(worker: WorkerView): WorkerUse | undefined {
+  if (worker.connection !== "connected" || worker.capacity === undefined) return undefined;
+  const platforms = capacityByPlatform(worker);
+  const running = platforms.reduce((sum, platform) => sum + platform.running, 0);
+  const limit = platforms.reduce((sum, platform) => sum + platform.limit, 0);
+  return { limit, percent: limit === 0 ? 0 : (running / limit) * 100, running };
+}
+
+export function workerRow(worker: WorkerView, search = ""): WorkerRow {
+  const use = useOf(worker);
+  return {
+    health: workerHealth(worker),
+    id: worker.id,
+    mono: worker.label === undefined,
+    name: workerName(worker),
+    to: `${workerPath(worker.id)}${search}`,
+    ...(use === undefined ? {} : { use }),
+  };
+}
+
+function matches(worker: WorkerView, filter: WorkerFilter): boolean {
+  if (filter === "issues") return workerHealth(worker).tone !== "ok";
+  if (filter === "busy") return (useOf(worker)?.percent ?? 0) >= BUSY_PERCENT;
+  return true;
+}
+
+export function filterWorkers(
+  workers: readonly WorkerView[],
+  filter: WorkerFilter,
+): readonly WorkerView[] {
+  return workers.filter((worker) => matches(worker, filter));
+}
+
+export function upMeta(workers: readonly WorkerView[]): string {
+  const up = workers.filter((worker) => worker.connection === "connected").length;
+  return `${up} / ${workers.length} up`;
+}
+
+// why: choosing a row must not throw the list back to its first page, but the inspector's own
+// pagers (devices, warm pool) belong to one worker and are left behind.
+export function listSearch(search: string): string {
+  const query = new URLSearchParams(search);
+  const kept = new URLSearchParams();
+  for (const key of ["page", "size"]) {
+    const value = query.get(key);
+    if (value !== null) kept.set(key, value);
+  }
+  const written = kept.toString();
+  return written === "" ? "" : `?${written}`;
+}
+
+export type MeterTone = Tone | "neutral";
+
+export interface LoadDetail {
+  readonly label: string;
+  readonly text: string;
+  readonly tone?: Tone;
+}
+
+export interface FigureCard {
+  readonly label: string;
+  readonly text: string;
+  readonly percent?: number;
+  readonly tone: MeterTone;
+  readonly details: readonly LoadDetail[];
+}
+
+const UNAVAILABLE = "Unavailable";
+
+function meterTone(tone: Tone): MeterTone {
+  return tone === "idle" ? "neutral" : tone;
+}
+
+function limited(text: string, isLimited: boolean): string {
+  return isLimited ? `${text} (limit)` : text;
+}
+
+function figureCards(worker: WorkerView): readonly FigureCard[] {
+  const { load } = worker;
+  if (load === undefined) return [];
+  const gauges = loadGauges(load);
+  const { cpu, disk, memory } = load;
+  // why: memory has a level the worker sends, its pressure, and takes that tone; where the worker
+  // sends none, which is every Linux worker, it falls back to the console's own threshold like the
+  // other two, which have nothing to ask the worker for.
+  const memoryTone =
+    memory?.pressure === undefined ? levelOf(gauges.memory) : pressureStatus(memory.pressure).tone;
+  const unavailable = (label: string): FigureCard => ({
+    details: [],
+    label,
+    text: UNAVAILABLE,
+    tone: "neutral",
+  });
+  const withPercent = (percent: number | undefined) => (percent === undefined ? {} : { percent });
+  return [
+    cpu === undefined
+      ? unavailable("CPU")
+      : {
+          details: [],
+          label: "CPU",
+          text: limited(
+            `${formatBusyPercent(cpu.busyPercent)} busy, ${formatCores(cpu.cores)}`,
+            cpu.limited,
+          ),
+          tone: meterTone(levelOf(gauges.cpu)),
+          ...withPercent(gauges.cpu),
+        },
+    memory === undefined
+      ? unavailable("Memory")
+      : {
+          details: [
+            { label: "Swap", text: `${formatBytes(memory.swapUsedBytes)} used` },
+            ...(memory.pressure === undefined
+              ? []
+              : [
+                  {
+                    label: "Pressure",
+                    text: memory.pressure,
+                    tone: pressureStatus(memory.pressure).tone,
+                  },
+                ]),
+          ],
+          label: "Memory",
+          text: limited(
+            `${formatBytes(memory.availableBytes)} of ${formatBytes(memory.totalBytes)} available`,
+            memory.limited,
+          ),
+          tone: meterTone(memoryTone),
+          ...withPercent(gauges.memory),
+        },
+    disk === undefined
+      ? unavailable("Disk")
+      : {
+          details: [],
+          label: "Disk",
+          text: `${formatBytes(disk.freeBytes)} of ${formatBytes(disk.totalBytes)} free`,
+          tone: meterTone(levelOf(gauges.disk)),
+          ...withPercent(gauges.disk),
+        },
+  ];
+}
+
+export interface PlatformCard {
+  readonly name: string;
+  readonly running: number;
+  readonly limit: number;
+  readonly slots: readonly DeviceSlot[];
+  readonly label: string;
+}
+
+function platformCards(worker: WorkerView): readonly PlatformCard[] {
+  return capacityByPlatform(worker).map((entry) => {
+    const slots = platformSlots(worker, entry.platform === "ios" ? "ios" : "android");
+    const name = platformName(entry.platform);
+    return {
+      label: `${name}: ${slotsLabel(slots)}`,
+      limit: entry.limit,
+      name,
+      running: entry.running,
+      slots,
+    };
+  });
+}
+
+export interface DeviceRow {
+  readonly id: string;
+  readonly model: string;
+  readonly runtime: string;
+  readonly platform: string;
+  readonly status: Toned;
+  readonly holder?: { readonly name: string; readonly id: string; readonly to: string };
+  readonly since?: string;
+  readonly expires?: string;
+  readonly renewed?: string;
+  readonly physical: boolean;
+  readonly mode?: string;
+  readonly imageTag?: string;
+}
+
+function deviceRow(
+  device: WorkerDevice,
+  worker: WorkerView,
+  now: number,
+  tokens: readonly TokenRecord[],
+): DeviceRow {
+  const lease = worker.leases?.find((candidate) => candidate.deviceId === device.id);
+  const entered = stateEnteredAt(device, worker);
+  const holder = lease === undefined ? undefined : holderOf(lease.requesterId, tokens);
+  // why: a virtual device shows its mode only where it is not the one the worker serves by default,
+  // and a physical device has neither a mode nor an image.
+  const mode = !device.physical && !device.servesDefaultMode ? device.mode : undefined;
+  const imageTag = device.physical ? undefined : device.spec.imageTag;
+  return {
+    id: device.id,
+    model: device.spec.model,
+    physical: device.physical,
+    platform: platformName(device.spec.platform),
+    runtime: device.spec.osVersion,
+    status: deviceStateStatus(device.state),
+    ...(lease === undefined || holder === undefined
+      ? {}
+      : {
+          expires: formatDuration(lease.ttlDeadline - now),
+          holder: { id: holder.id, name: holder.label ?? holder.id, to: leasePath(lease.id) },
+          renewed: `${formatDuration(now - lease.lastRenewedAt)} ago`,
+        }),
+    ...(entered === undefined ? {} : { since: formatDuration(now - entered) }),
+    ...(mode === undefined ? {} : { mode }),
+    ...(imageTag === undefined ? {} : { imageTag }),
+  };
+}
+
+export interface ProtocolView {
+  readonly compatible: boolean;
+  readonly ranges?: string;
+}
+
+function range({ max, min }: { readonly min: number; readonly max: number }): string {
+  return `${min}–${max}`;
+}
+
+// why: an incompatible worker names both protocol ranges, so an operator can see which side to
+// upgrade.
+function protocolOf(worker: WorkerView): ProtocolView {
+  const { protocol } = worker;
+  if (worker.connection !== "incompatible" && protocol === undefined) return { compatible: true };
+  return {
+    compatible: false,
+    ...(protocol === undefined
+      ? {}
+      : { ranges: `gateway ${range(protocol.gateway)}, worker ${range(protocol.worker)}` }),
+  };
+}
+
+export interface OverviewTab {
+  readonly starting: boolean;
+  readonly incompatible: boolean;
+  readonly figures: readonly FigureCard[];
+  readonly loadNote?: string;
+  readonly read?: string;
+  readonly leases?: { readonly count: number; readonly running: number | undefined };
+  readonly platforms: readonly PlatformCard[];
+  readonly devices?: readonly DeviceRow[];
+}
+
+function loadOf(
+  worker: WorkerView,
+  now: number,
+): Pick<OverviewTab, "figures" | "loadNote" | "read"> {
+  if (worker.connection === "incompatible") return { figures: [] };
+  if (worker.connection === "disconnected") {
+    return { figures: [], loadNote: "No reading while disconnected" };
+  }
+  if (worker.load === undefined) return { figures: [], loadNote: "Not reported" };
+  const age = formatDuration(Math.ceil((now - worker.load.readAt) / 1000) * 1000);
+  return { figures: figureCards(worker), read: `${age} ago` };
+}
+
+export interface CapabilityRow {
+  readonly name: string;
+  readonly state: string;
+  readonly tone: Tone;
+  readonly reason?: string;
+}
+
+const CAPABILITY_TONE = { available: "ok", off: "idle", unavailable: "warn" } as const;
+
+export interface ToolRow {
+  readonly key: string;
+  readonly name: string;
+  readonly version: string;
+  readonly platform: string;
+}
+
+export interface CatalogRow {
+  readonly platform: string;
+  readonly models: string;
+  readonly runtimes: string;
+}
+
+export interface HostTab {
+  readonly id: string;
+  readonly connection: Toned;
+  readonly drained: boolean;
+  readonly health?: Toned;
+  readonly host?: {
+    readonly os: string;
+    readonly arch: string;
+    readonly tools: readonly ToolRow[];
+  };
+  readonly protocol: ProtocolView;
+  readonly capabilities?: readonly CapabilityRow[] | "not-reported";
+  readonly catalog: readonly CatalogRow[];
+}
+
+function hostTabOf(worker: WorkerView): HostTab {
+  const { capabilities, host } = worker;
+  // why: a starting worker has reported no capabilities yet, so its list leaves the row out where
+  // "Not reported" would suggest a worker that cannot report them.
+  const capabilityRows: HostTab["capabilities"] =
+    worker.health === "starting"
+      ? undefined
+      : (capabilities?.map((entry) => ({
+          name: entry.name,
+          state: entry.state,
+          tone: CAPABILITY_TONE[entry.state],
+          ...(entry.reason === undefined ? {} : { reason: entry.reason }),
+        })) ?? "not-reported");
+  return {
+    connection: connectionStatus(worker.connection),
+    drained: worker.drained,
+    catalog: (worker.catalog ?? []).map((entry) => ({
+      models: entry.models.length === 0 ? "none" : entry.models.join(", "),
+      platform: platformName(entry.platform),
+      runtimes:
+        entry.runtimes.length === 0
+          ? "none"
+          : entry.runtimes
+              .map((runtime) =>
+                runtime === entry.defaultRuntime ? `${runtime} (default)` : runtime,
+              )
+              .join(", "),
+    })),
+    id: worker.id,
+    protocol: protocolOf(worker),
+    ...(worker.health === undefined ? {} : { health: healthStatus(worker.health) }),
+    ...(capabilityRows === undefined ? {} : { capabilities: capabilityRows }),
+    ...(host === undefined
+      ? {}
+      : {
+          host: {
+            arch: host.arch,
+            os: `${host.os} ${host.osVersion}`,
+            tools: host.tools.map((tool) => ({
+              key: `${tool.platform}-${tool.name}`,
+              name: tool.name,
+              platform: platformName(tool.platform),
+              version: `${tool.version}${tool.build === undefined ? "" : ` (${tool.build})`}`,
+            })),
+          },
+        }),
+  };
+}
+
+export interface WarmRow {
+  readonly key: string;
+  readonly model: string;
+  readonly runtime: string;
+  readonly mode: string;
+  readonly wanted: number;
+  readonly ready: number;
+  readonly booting: number;
+  readonly short: string;
+}
+
+export interface InstallRow {
+  readonly key: string;
+  readonly platform: string;
+  readonly component: string;
+  readonly status: Toned;
+  readonly duration: string;
+  readonly waiters: string;
+}
+
+export interface WarmTab {
+  readonly pool?: { readonly enabled: string; readonly reserve: string };
+  readonly targets: readonly WarmRow[];
+  readonly installs: readonly InstallRow[];
+}
+
+function warmRow(row: WarmPoolRow): WarmRow {
+  return {
+    booting: row.booting,
+    key: row.key,
+    mode: row.mode,
+    model: row.model,
+    ready: row.ready,
+    runtime: row.osVersion ?? "—",
+    short: row.short ?? "—",
+    wanted: row.count,
+  };
+}
+
+function warmTabOf(worker: WorkerView, now: number): WarmTab {
+  const { warmPool } = worker;
+  return {
+    installs: (worker.installs ?? []).map((install) => ({
+      component: install.component,
+      duration: formatDuration(now - install.since),
+      key: `${install.platform}-${install.component}`,
+      platform: platformName(install.platform),
+      status: installStatus(install.state),
+      waiters: install.waiters === 1 ? "1 waiter" : `${install.waiters} waiters`,
+    })),
+    targets: warmPool === undefined ? [] : warmPoolRows(warmPool.targets).map(warmRow),
+    ...(warmPool === undefined
+      ? {}
+      : {
+          pool: {
+            enabled: warmPool.enabled ? "On" : "Off",
+            reserve: `iOS ${warmPool.reserveRunning.ios}, Android ${warmPool.reserveRunning.android}`,
+          },
+        }),
+  };
+}
+
+export type WorkerTab = "overview" | "host" | "warm-pool";
+
+export interface WorkerInspector {
+  readonly id: string;
+  readonly title: string;
+  readonly mono: boolean;
+  readonly health: Toned;
+  readonly os?: string;
+  readonly version?: string;
+  readonly tabs: readonly { readonly value: WorkerTab; readonly label: string }[];
+  readonly overview: OverviewTab;
+  readonly host: HostTab;
+  readonly warm?: WarmTab;
+}
+
+export function workerInspectorOf(input: {
+  readonly worker: WorkerView;
+  readonly now: number;
+  readonly tokens: readonly TokenRecord[];
+}): WorkerInspector {
+  const { now, tokens, worker } = input;
+  const starting = worker.health === "starting";
+  const incompatible = worker.connection === "incompatible";
+  const { host } = worker;
+  const leases = worker.leases;
+  return {
+    health: workerHealth(worker),
+    host: hostTabOf(worker),
+    id: worker.id,
+    mono: worker.label === undefined,
+    overview: {
+      incompatible,
+      platforms: starting ? [] : platformCards(worker),
+      starting,
+      ...loadOf(worker, now),
+      ...(starting || leases === undefined
+        ? {}
+        : { leases: { count: leases.length, running: worker.capacity?.global.running } }),
+      ...(starting
+        ? {}
+        : { devices: (worker.devices ?? []).map((d) => deviceRow(d, worker, now, tokens)) }),
+    },
+    tabs: [
+      { label: "Overview", value: "overview" },
+      { label: "Host", value: "host" },
+      ...(starting ? [] : [{ label: "Warm pool", value: "warm-pool" } as const]),
+    ],
+    title: workerName(worker),
+    ...(host === undefined ? {} : { os: `${host.os} ${host.osVersion}` }),
+    ...(worker.version === undefined ? {} : { version: worker.version }),
+    ...(starting ? {} : { warm: warmTabOf(worker, now) }),
+  };
+}
diff --git a/ui/src/model/workers.ts b/ui/src/model/workers.ts
index 5c5d7eb97..f05d4afc8 100644
--- a/ui/src/model/workers.ts
+++ b/ui/src/model/workers.ts
@@ -1,11 +1,9 @@
 import type { z } from "zod";
 
 import type { workerViewSchema } from "../../../src/contract/schemas";
-import type { Stat } from "./stat";
 
 export type WorkerView = z.infer<typeof workerViewSchema>;
 export type WorkerDevice = NonNullable<WorkerView["devices"]>[number];
-export type WorkerCatalogEntry = NonNullable<WorkerView["catalog"]>[number];
 
 export interface WorkerList {
   readonly workers: readonly WorkerView[];
@@ -20,16 +18,6 @@ export function workerPath(id: string): `/${string}` {
   return `/workers/${encodeURIComponent(id)}`;
 }
 
-export function workerIdFrom(path: string): string | undefined {
-  const rest = path.replace(/^\/workers\/?/, "").replace(/\/$/, "");
-  if (rest === "") return undefined;
-  try {
-    return decodeURIComponent(rest);
-  } catch {
-    return rest;
-  }
-}
-
 const PLATFORM_NAMES: Readonly<Partial<Record<string, string>>> = {
   android: "Android",
   ios: "iOS",
@@ -39,14 +27,6 @@ export function platformName(platform: string): string {
   return PLATFORM_NAMES[platform] ?? platform;
 }
 
-// why: a starting worker's capacity and leases were never read, so there is nothing to report.
-export function deviceCounts(
-  worker: WorkerView,
-): { readonly running: number; readonly leased: number } | undefined {
-  if (worker.capacity === undefined || worker.leases === undefined) return undefined;
-  return { leased: worker.leases.length, running: worker.capacity.global.running };
-}
-
 export function capacityByPlatform(
   worker: WorkerView,
 ): readonly { readonly platform: string; readonly running: number; readonly limit: number }[] {
@@ -62,23 +42,6 @@ export function leasesHeld(workers: readonly WorkerView[]): number {
   return workers.reduce((sum, worker) => sum + (worker.leases?.length ?? 0), 0);
 }
 
-export function workersStats(workers: readonly WorkerView[]): readonly Stat[] {
-  const connected = workers.filter((worker) => worker.connection === "connected").length;
-  const devices = workers.reduce((sum, worker) => sum + (worker.devices?.length ?? 0), 0);
-  const running = workers.reduce((sum, worker) => sum + (deviceCounts(worker)?.running ?? 0), 0);
-  const waiting = workers.reduce((sum, worker) => sum + (worker.waiting?.length ?? 0), 0);
-  return [
-    { caption: `connected of ${workers.length}`, label: "Workers", value: String(connected) },
-    { caption: `running of ${devices}`, label: "Devices", value: String(running) },
-    { caption: "held now", label: "Leases", value: String(leasesHeld(workers)) },
-    { caption: "requests in the workers' queues", label: "Waiting", value: String(waiting) },
-  ];
-}
-
-export function busiestWorkers(workers: readonly WorkerView[]): readonly WorkerView[] {
-  return [...workers].sort((a, b) => (b.leases?.length ?? 0) - (a.leases?.length ?? 0));
-}
-
 // why: the age is read only from a connected worker: a gateway moves `lastSeenAt` when a worker
 // disconnects, without reading its devices again.
 export function stateEnteredAt(device: WorkerDevice, worker: WorkerView): number | undefined {
diff --git a/ui/src/screens/workers/index.tsx b/ui/src/screens/workers/index.tsx
index a5eea26fe..9c54d1412 100644
--- a/ui/src/screens/workers/index.tsx
+++ b/ui/src/screens/workers/index.tsx
@@ -1,9 +1,492 @@
-import { Empty, Page } from "../../ds";
+import "./workers.css";
+
+import { useState } from "react";
+
+import {
+  Card,
+  ChoiceChips,
+  type Column,
+  DataTable,
+  Empty,
+  Facts,
+  Grid,
+  Id,
+  Inspector,
+  InspectorEmpty,
+  Link,
+  List,
+  ListPane,
+  ListRow,
+  Loaded,
+  MasterDetail,
+  Meter,
+  Pager,
+  Panel,
+  SlotLegend,
+  Slots,
+  Status,
+  StatusDot,
+  Tabs,
+} from "../../ds";
+import {
+  type CapabilityRow,
+  type DeviceRow,
+  type FigureCard,
+  type InstallRow,
+  type PlatformCard,
+  useWorkers,
+  type WarmRow,
+  WORKER_FILTERS,
+  type WorkerInspectorView,
+  type WorkerRow,
+  type WorkersPage,
+  type WorkerTab,
+} from "../../state/workers";
 
 export function WorkersScreen() {
+  const view = useWorkers();
+  return <Loaded view={view}>{(page) => <WorkersBody page={page} />}</Loaded>;
+}
+
+export function WorkersBody({
+  initialTab = "overview",
+  page,
+}: {
+  readonly page: WorkersPage;
+  readonly initialTab?: WorkerTab;
+}) {
+  return (
+    <MasterDetail
+      focus={page.focus}
+      wide
+      list={<WorkerList page={page} />}
+      detail={
+        page.inspector === undefined ? (
+          <MissingWorker id={page.missing} />
+        ) : (
+          <WorkerDetail
+            key={page.inspector.id}
+            inspector={page.inspector}
+            initialTab={initialTab}
+          />
+        )
+      }
+    />
+  );
+}
+
+function WorkerList({ page }: { readonly page: WorkersPage }) {
+  return (
+    <ListPane
+      title="Workers"
+      meta={page.meta}
+      toolbar={
+        <ChoiceChips
+          legend="Show workers"
+          choices={WORKER_FILTERS}
+          value={page.filter}
+          onChange={page.setFilter}
+        />
+      }
+      footer={<Pager label="Workers" paging={page.paging} />}
+    >
+      {page.rows.length === 0 ? (
+        <Empty>{page.empty ? "No workers have connected." : "No worker matches."}</Empty>
+      ) : (
+        <List label="Workers">
+          {page.rows.map((row) => (
+            <WorkerListRow key={row.id} row={row} selected={row.id === page.chosen} />
+          ))}
+        </List>
+      )}
+    </ListPane>
+  );
+}
+
+function WorkerListRow({ row, selected }: { readonly row: WorkerRow; readonly selected: boolean }) {
+  return (
+    <ListRow
+      to={row.to}
+      selected={selected}
+      mono={row.mono}
+      lead={<StatusDot tone={row.health.tone} label={row.health.word} />}
+      title={row.name}
+      aside={row.use === undefined ? "—" : `${row.use.running} / ${row.use.limit}`}
+      sub={
+        row.use === undefined ? undefined : (
+          <Meter percent={row.use.percent} tone="neutral" size="thin" />
+        )
+      }
+    />
+  );
+}
+
+function MissingWorker({ id }: { readonly id: string | undefined }) {
+  if (id === undefined) return <InspectorEmpty>No worker to show.</InspectorEmpty>;
+  return (
+    <InspectorEmpty>
+      Worker not found. <Link to="/workers">All workers</Link>
+    </InspectorEmpty>
+  );
+}
+
+function WorkerDetail({
+  initialTab,
+  inspector,
+}: {
+  readonly inspector: WorkerInspectorView;
+  readonly initialTab: WorkerTab;
+}) {
+  const [tab, setTab] = useState<WorkerTab>(initialTab);
+  return (
+    <Inspector
+      crumbs={[{ label: "Workers", to: "/workers" }, { label: inspector.title }]}
+      title={inspector.title}
+      mono={inspector.mono}
+      line={
+        <>
+          <Status tone={inspector.health.tone}>{inspector.health.word}</Status>
+          {inspector.os === undefined ? null : <span>· {inspector.os}</span>}
+          {inspector.version === undefined ? null : <span>· {inspector.version}</span>}
+        </>
+      }
+    >
+      <Tabs label="Worker" tabs={inspector.tabs} value={tab} onChange={setTab}>
+        {tab === "overview" ? <OverviewTab inspector={inspector} /> : null}
+        {tab === "host" ? <HostTab inspector={inspector} /> : null}
+        {tab === "warm-pool" ? <WarmTab inspector={inspector} /> : null}
+      </Tabs>
+    </Inspector>
+  );
+}
+
+function OverviewTab({ inspector }: { readonly inspector: WorkerInspectorView }) {
+  const { overview } = inspector;
+  if (overview.incompatible) {
+    return (
+      <Panel title="Protocol">
+        <ProtocolFacts inspector={inspector} />
+      </Panel>
+    );
+  }
+  return (
+    <>
+      <Grid label="Load and leases">
+        {overview.figures.map((card) => (
+          <FigureCardView key={card.label} card={card} />
+        ))}
+        {overview.loadNote === undefined ? null : (
+          <Card>
+            <p className="figure-label">Load</p>
+            <p className="figure-text">{overview.loadNote}</p>
+          </Card>
+        )}
+        {overview.leases === undefined ? null : (
+          <Card>
+            <p className="figure-label">Leases</p>
+            <p className="figure-count mono">{overview.leases.count}</p>
+            {overview.leases.running === undefined ? null : (
+              <p className="figure-detail">
+                <span className="muted">Running</span> {overview.leases.running}
+              </p>
+            )}
+          </Card>
+        )}
+      </Grid>
+      {overview.read === undefined ? null : (
+        <p className="muted figure-read">Read {overview.read}</p>
+      )}
+      {overview.starting ? (
+        <p className="muted">Devices, leases and capacity appear once startup finishes.</p>
+      ) : (
+        <>
+          <PlatformCards platforms={overview.platforms} />
+          <Panel title="Devices" flush>
+            <DataTable
+              label="Devices"
+              rows={overview.devices ?? []}
+              columns={DEVICE_COLUMNS}
+              rowId={(device) => device.id}
+              empty="No devices."
+              paging={inspector.devicesPaging}
+              wide
+            />
+          </Panel>
+        </>
+      )}
+    </>
+  );
+}
+
+function FigureCardView({ card }: { readonly card: FigureCard }) {
+  return (
+    <Card>
+      <p className="figure-label">{card.label}</p>
+      <p className="figure-text">{card.text}</p>
+      {card.percent === undefined ? null : <Meter percent={card.percent} tone={card.tone} />}
+      {card.details.map((detail) => (
+        <p key={detail.label} className="figure-detail">
+          <span className="muted">{detail.label}</span>{" "}
+          {detail.tone === undefined ? (
+            detail.text
+          ) : (
+            <Status tone={detail.tone}>{detail.text}</Status>
+          )}
+        </p>
+      ))}
+    </Card>
+  );
+}
+
+function PlatformCards({ platforms }: { readonly platforms: readonly PlatformCard[] }) {
+  if (platforms.length === 0) return <p className="muted">Capacity not reported.</p>;
+  return (
+    <>
+      <Grid min="lg" label="Capacity">
+        {platforms.map((platform) => (
+          <Card key={platform.name}>
+            <p className="platform-head">
+              <span>{platform.name}</span>
+              <span className="mono">
+                {platform.running} <span className="muted">of {platform.limit} running</span>
+              </span>
+            </p>
+            <Slots size="lg" slots={platform.slots} label={platform.label} />
+          </Card>
+        ))}
+      </Grid>
+      <SlotLegend />
+    </>
+  );
+}
+
+const DEVICE_COLUMNS: readonly Column<DeviceRow>[] = [
+  {
+    cell: (device) => (
+      <span className="device-name">
+        <StatusDot tone={device.status.tone} label={device.status.word} />
+        <span className="device-text">
+          <span>
+            {device.model} <span className="mono muted">{device.runtime}</span>
+          </span>
+          <span className="device-sub">
+            {device.platform} · <Id>{device.id}</Id>
+          </span>
+        </span>
+      </span>
+    ),
+    header: "Device",
+  },
+  {
+    cell: (device) =>
+      device.holder === undefined ? (
+        device.status.word
+      ) : (
+        <span className="device-text">
+          <Link to={device.holder.to}>{device.holder.name}</Link>
+          {device.renewed === undefined ? null : (
+            <span className="device-sub">renewed {device.renewed}</span>
+          )}
+        </span>
+      ),
+    header: "Holder",
+  },
+  {
+    cell: (device) => (
+      <span className="device-text">
+        <span>{device.since ?? "—"}</span>
+        {device.expires === undefined ? null : (
+          <span className="device-sub">expires in {device.expires}</span>
+        )}
+      </span>
+    ),
+    header: "In state for",
+  },
+  {
+    cell: (device) => (
+      <span className="device-text">
+        <span>{device.physical ? "Physical" : "Virtual"}</span>
+        {device.mode === undefined && device.imageTag === undefined ? null : (
+          <span className="device-sub">
+            {[device.mode, device.imageTag].filter((part) => part !== undefined).join(" · ")}
+          </span>
+        )}
+      </span>
+    ),
+    header: "Type",
+  },
+];
+
+function ProtocolFacts({ inspector }: { readonly inspector: WorkerInspectorView }) {
+  const { protocol } = inspector.host;
+  return protocol.compatible ? (
+    <Status tone="ok">compatible</Status>
+  ) : (
+    <>
+      <Status tone="error">incompatible</Status>
+      {protocol.ranges === undefined ? null : <span className="mono"> {protocol.ranges}</span>}
+    </>
+  );
+}
+
+function HostTab({ inspector }: { readonly inspector: WorkerInspectorView }) {
+  const { host } = inspector;
+  return (
+    <>
+      <Panel title="Host">
+        <Facts
+          facts={[
+            { label: "Worker id", value: <span className="mono">{host.id}</span> },
+            {
+              label: "Connection",
+              value: (
+                <span className="host-statuses">
+                  <Status tone={host.connection.tone}>{host.connection.word}</Status>
+                  {host.drained ? <Status tone="warn">drained</Status> : null}
+                </span>
+              ),
+            },
+            {
+              label: "Health",
+              value:
+                host.health === undefined ? (
+                  "Not reported"
+                ) : (
+                  <Status tone={host.health.tone}>{host.health.word}</Status>
+                ),
+            },
+            { label: "Protocol", value: <ProtocolFacts inspector={inspector} /> },
+            ...(host.host === undefined
+              ? [{ label: "Host", value: "Not reported" }]
+              : [
+                  { label: "Operating system", value: host.host.os },
+                  {
+                    label: "CPU architecture",
+                    value: <span className="mono">{host.host.arch}</span>,
+                  },
+                  {
+                    label: "Tools",
+                    value:
+                      host.host.tools.length === 0 ? (
+                        "None"
+                      ) : (
+                        <ul className="plain-list">
+                          {host.host.tools.map((tool) => (
+                            <li key={tool.key}>
+                              {tool.name} <span className="mono">{tool.version}</span>{" "}
+                              <span className="muted">for {tool.platform}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      ),
+                  },
+                ]),
+          ]}
+        />
+      </Panel>
+      {host.capabilities === undefined ? null : (
+        <Panel title="Capabilities">
+          <Capabilities rows={host.capabilities} />
+        </Panel>
+      )}
+      <Panel title="Catalog">
+        {host.catalog.length === 0 ? (
+          <p className="muted">Nothing reported.</p>
+        ) : (
+          <Facts
+            facts={host.catalog.map((entry) => ({
+              label: entry.platform,
+              value: (
+                <>
+                  <p>
+                    <span className="muted">Models:</span> {entry.models}
+                  </p>
+                  <p>
+                    <span className="muted">Runtimes:</span> {entry.runtimes}
+                  </p>
+                </>
+              ),
+            }))}
+          />
+        )}
+      </Panel>
+    </>
+  );
+}
+
+function Capabilities({ rows }: { readonly rows: readonly CapabilityRow[] | "not-reported" }) {
+  if (rows === "not-reported") return <p className="muted">Not reported.</p>;
+  return (
+    <Facts
+      facts={rows.map((row) => ({
+        label: row.name,
+        value: (
+          <>
+            <Status tone={row.tone}>{row.state}</Status>
+            {row.reason === undefined ? null : ` ${row.reason}`}
+          </>
+        ),
+      }))}
+    />
+  );
+}
+
+const WARM_COLUMNS: readonly Column<WarmRow>[] = [
+  { cell: (target) => target.model, header: "Model" },
+  { cell: (target) => target.runtime, header: "Runtime", mono: true },
+  { cell: (target) => target.mode, header: "Mode" },
+  { cell: (target) => target.wanted, header: "Wanted", numeric: true },
+  { cell: (target) => target.ready, header: "Ready", numeric: true },
+  { cell: (target) => target.booting, header: "Booting", numeric: true },
+  { cell: (target) => target.short, header: "Short", mono: true },
+];
+
+function WarmTab({ inspector }: { readonly inspector: WorkerInspectorView }) {
+  const { warm } = inspector;
+  if (warm === undefined) return null;
+  return (
+    <>
+      <Panel title="Warm pool">
+        {warm.pool === undefined ? (
+          <p className="muted">Not reported.</p>
+        ) : (
+          <>
+            <Facts
+              facts={[
+                { label: "Pool", value: warm.pool.enabled },
+                { label: "Reserved running slots", value: warm.pool.reserve },
+              ]}
+            />
+            <DataTable
+              label="Warm pool"
+              rows={warm.targets}
+              columns={WARM_COLUMNS}
+              rowId={(row) => row.key}
+              empty="No targets."
+              paging={inspector.warmPaging}
+              wide
+            />
+          </>
+        )}
+      </Panel>
+      <Panel title="Installs in progress">
+        <Installs rows={warm.installs} />
+      </Panel>
+    </>
+  );
+}
+
+function Installs({ rows }: { readonly rows: readonly InstallRow[] }) {
+  if (rows.length === 0) return <p className="muted">No installs in progress.</p>;
   return (
-    <Page title="Workers">
-      <Empty>Coming soon.</Empty>
-    </Page>
+    <ul className="plain-list">
+      {rows.map((install) => (
+        <li key={install.key}>
+          {install.platform} <span className="mono">{install.component}</span>{" "}
+          <Status tone={install.status.tone}>{install.status.word}</Status> for{" "}
+          <span className="mono">{install.duration}</span>, {install.waiters}
+        </li>
+      ))}
+    </ul>
   );
 }
diff --git a/ui/src/screens/workers/workers.css b/ui/src/screens/workers/workers.css
new file mode 100644
index 000000000..e44f7b88b
--- /dev/null
+++ b/ui/src/screens/workers/workers.css
@@ -0,0 +1,68 @@
+.figure-label {
+  margin: 0 0 var(--space-1);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--label-tracking);
+  text-transform: uppercase;
+}
+
+.figure-text {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.figure-count {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-xl);
+}
+
+.figure-detail {
+  margin: var(--space-2) 0 0;
+  font-size: var(--text-sm);
+}
+
+.figure-read {
+  margin: 0;
+  font-size: var(--text-xs);
+}
+
+.platform-head {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-3);
+  font-size: var(--text-sm);
+}
+
+.device-name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.device-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.device-sub {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+}
+
+.host-statuses {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.plain-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/ui/src/screens/workers/workers.test.tsx b/ui/src/screens/workers/workers.test.tsx
new file mode 100644
index 000000000..6ed432bd7
--- /dev/null
+++ b/ui/src/screens/workers/workers.test.tsx
@@ -0,0 +1,373 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import type { Paging } from "../../ds";
+import {
+  type WorkersPage,
+  type WorkerTab,
+  type WorkerView,
+  workerInspectorOf,
+  workerRow,
+} from "../../state/workers";
+import { WorkersBody } from "./index";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+const GIB = 1024 ** 3;
+
+const ENTRY = {
+  atRamBudget: false,
+  limit: 4,
+  maxRunning: 4,
+  overLimit: false,
+  reserved: 0,
+  running: 1,
+  used: 1,
+  warm: 0,
+};
+
+const WORKER: WorkerView = {
+  capacity: {
+    android: { ...ENTRY, running: 0, used: 0 },
+    global: { maxRunning: 4, overLimit: false, reserved: 0, running: 1, warm: 0 },
+    ios: ENTRY,
+  },
+  catalog: [],
+  connection: "connected",
+  devices: [
+    {
+      id: "dev_1",
+      mode: "full",
+      physical: false,
+      servesDefaultMode: true,
+      spec: { model: "iPhone 17", osVersion: "26.0", physical: false, platform: "ios" },
+      state: "leased",
+    },
+  ],
+  drained: false,
+  health: "running",
+  host: { arch: "arm64", os: "macOS", osVersion: "15.5", tools: [] },
+  id: "wrk_1",
+  label: "worker-a",
+  lastSeenAt: NOW,
+  leases: [
+    {
+      deviceId: "dev_1",
+      grantedAt: NOW - 5_000,
+      id: "l_1",
+      idChosenByRequester: false,
+      lastRenewedAt: NOW,
+      ownerId: "agent",
+      requesterId: "agent",
+      ttlDeadline: NOW + 60_000,
+      ttlMs: 65_000,
+    },
+  ],
+  load: {
+    cpu: { busyPercent: 28, cores: 12, limited: false },
+    disk: { freeBytes: 112.4 * GIB, totalBytes: 494.4 * GIB },
+    memory: {
+      availableBytes: 20.9 * GIB,
+      limited: false,
+      pressure: "warn",
+      swapUsedBytes: 1.2 * GIB,
+      totalBytes: 36 * GIB,
+    },
+    readAt: NOW - 12_000,
+  },
+  version: "1.4.0",
+};
+
+const PAGING: Paging = {
+  go: () => {},
+  last: 1,
+  page: 1,
+  range: "1–1 of 1",
+  resize: () => {},
+  size: 25,
+  sizes: [25],
+  total: 1,
+};
+
+function page(
+  worker: WorkerView | undefined,
+  overrides: Partial<WorkersPage> = {},
+  workers: readonly WorkerView[] = worker === undefined ? [] : [worker],
+): WorkersPage {
+  return {
+    chosen: worker?.id,
+    empty: workers.length === 0,
+    filter: "all",
+    focus: "detail",
+    inspector:
+      worker === undefined
+        ? undefined
+        : {
+            ...workerInspectorOf({ now: NOW, tokens: [], worker }),
+            devicesPaging: PAGING,
+            warmPaging: PAGING,
+          },
+    meta: "1 / 1 up",
+    missing: undefined,
+    paging: PAGING,
+    rows: workers.map((entry) => workerRow(entry)),
+    setFilter: () => {},
+    ...overrides,
+  };
+}
+
+function html(view: WorkersPage, tab?: WorkerTab): string {
+  return renderToStaticMarkup(
+    <WorkersBody page={view} {...(tab === undefined ? {} : { initialTab: tab })} />,
+  );
+}
+
+function text(markup: string): string {
+  return markup
+    .replace(/<[^>]+>/g, " ")
+    .replace(/&#x27;/g, "'")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+describe("the workers list", () => {
+  it("shows a row as a square named by its health word, the worker's name and running over limit, with no warning word in it", () => {
+    const drained = { ...WORKER, drained: true, load: undefined };
+
+    const markup = html(page(drained));
+    const row = markup.slice(markup.indexOf('class="list"'), markup.indexOf("</ul>"));
+
+    expect(row).toContain('aria-label="drained"');
+    expect(row).toContain("status-dot-warn");
+    expect(text(row)).toContain("worker-a 1 / 8");
+    expect(text(row)).not.toMatch(/drained|memory|disconnected/);
+  });
+
+  it("heads the list with how many workers are up and offers the three filters", () => {
+    const markup = html(page(WORKER));
+
+    expect(text(markup)).toContain("Workers 1 / 1 up");
+    for (const label of ["All", "Issues", "Busy"]) expect(text(markup)).toContain(label);
+    expect(markup).toContain('value="issues"');
+  });
+
+  it("draws a thin neutral meter under a worker that reported its capacity and none under one that did not", () => {
+    const lost = { ...WORKER, connection: "disconnected" as const };
+
+    expect(html(page(WORKER))).toContain("load-bar-neutral meter-thin");
+    expect(html(page(lost))).not.toContain("meter-thin");
+    expect(text(html(page(lost)))).toContain("worker-a —");
+  });
+
+  it("marks the chosen row as the current page", () => {
+    expect(html(page(WORKER))).toContain('aria-current="page"');
+  });
+
+  it("says no workers have connected, or that none matches the filter", () => {
+    expect(text(html(page(undefined, { empty: true })))).toContain("No workers have connected.");
+    expect(text(html(page(undefined, { empty: false, filter: "issues" })))).toContain(
+      "No worker matches.",
+    );
+  });
+});
+
+describe("a worker's inspector", () => {
+  it("is titled with the worker's name and reads its health word, operating system and version beneath", () => {
+    const markup = html(page(WORKER));
+
+    expect(markup).toMatch(/<h2[^>]*>worker-a<\/h2>/);
+    expect(text(markup)).toContain("memory pressure warn · macOS 15.5 · 1.4.0");
+  });
+
+  it("states the load in the old panel's words, each beside a meter in its tone, with swap, pressure and the reading's age", () => {
+    const shown = text(html(page(WORKER)));
+
+    expect(shown).toContain("CPU 28% busy, 12 cores");
+    expect(shown).toContain("Memory 20.9 GiB of 36.0 GiB available");
+    expect(shown).toContain("Swap 1.2 GiB used");
+    expect(shown).toContain("Pressure warn");
+    expect(shown).toContain("Disk 112.4 GiB of 494.4 GiB free");
+    expect(shown).toContain("Read 12 s ago");
+    const markup = html(page(WORKER));
+    expect(markup).toContain(
+      'class="load-bar load-bar-warn meter-regular" aria-hidden="true" style="--load-bar:42%"',
+    );
+    expect(markup).toContain(
+      'class="load-bar load-bar-neutral meter-regular" aria-hidden="true" style="--load-bar:28%"',
+    );
+  });
+
+  it("counts the leases and draws a lg slots group with its legend for each platform", () => {
+    const markup = html(page(WORKER));
+
+    expect(text(markup)).toContain("Leases 1");
+    expect(text(markup)).toContain("iOS 1 of 4 running");
+    expect(text(markup)).toContain("Android 0 of 4 running");
+    expect(markup).toContain(
+      'class="slots slots-lg" role="img" aria-label="iOS: 1 leased, 3 free"',
+    );
+    expect(markup).toContain("slot-legend");
+  });
+
+  it("lists a leased device with its holder as a link to the lease, the time on it and what is left", () => {
+    const markup = html(page(WORKER));
+
+    expect(markup).toContain('href="/leases/l_1/"');
+    expect(text(markup)).toContain("iPhone 17 26.0");
+    expect(text(markup)).toContain("agent renewed 0 s ago");
+    expect(text(markup)).toContain("5 s expires in 1 min");
+    expect(text(markup)).toContain("Virtual");
+    expect(markup).toContain('aria-label="leased"');
+  });
+
+  it("says No devices. for a worker whose devices were never read", () => {
+    const { devices: _devices, ...unread } = WORKER;
+
+    expect(text(html(page(unread)))).toContain("No devices.");
+  });
+
+  it("says No reading while disconnected in place of the load figures of a disconnected worker", () => {
+    const shown = text(html(page({ ...WORKER, connection: "disconnected" })));
+
+    expect(shown).toContain("No reading while disconnected");
+    expect(shown).not.toContain("busy,");
+  });
+
+  it("shows a starting worker without devices, capacity or a warm pool tab", () => {
+    const starting: WorkerView = {
+      connection: "connected",
+      drained: false,
+      health: "starting",
+      host: WORKER.host,
+      id: "wrk_1",
+      lastSeenAt: NOW,
+    };
+
+    const shown = text(html(page(starting)));
+
+    expect(shown).toContain("Devices, leases and capacity appear once startup finishes.");
+    expect(shown).not.toContain("Warm pool");
+    expect(shown).not.toContain("No devices.");
+  });
+
+  it("shows an incompatible worker's protocol ranges on its overview", () => {
+    const old: WorkerView = {
+      connection: "incompatible",
+      drained: false,
+      id: "wrk_old",
+      label: "old-worker",
+      lastSeenAt: NOW,
+      protocol: { gateway: { max: 35, min: 35 }, worker: { max: 30, min: 30 } },
+    };
+
+    const shown = text(html(page(old)));
+
+    expect(shown).toContain("incompatible gateway 35–35, worker 30–30");
+    expect(shown).not.toContain("Read ");
+  });
+
+  it("says that no worker has the id in the URL, with a link back to the list", () => {
+    const markup = html(page(undefined, { missing: "wrk_nope" }, [WORKER]));
+
+    expect(text(markup)).toContain("Worker not found. All workers");
+    expect(markup).toContain('href="/workers"');
+  });
+});
+
+describe("a worker's host and warm pool tabs", () => {
+  it("shows the machine, tools, protocol, capabilities with their reasons, and the catalog", () => {
+    const view: WorkerView = {
+      ...WORKER,
+      capabilities: [
+        { name: "agent-device", state: "available" },
+        { name: "stream", reason: "found 0.20.1, need 0.21.28 or later", state: "unavailable" },
+      ],
+      catalog: [
+        {
+          classDefaults: {},
+          defaultRuntime: "26.0",
+          modelAliases: {},
+          modelClasses: {},
+          modelRuntimes: {},
+          models: ["iPhone 17"],
+          platform: "ios",
+          runtimes: ["26.0"],
+        },
+      ],
+      host: {
+        arch: "arm64",
+        os: "macOS",
+        osVersion: "15.5",
+        tools: [{ build: "16F6", name: "xcode", platform: "ios", version: "16.4" }],
+      },
+    };
+
+    const markup = html(page(view), "host");
+    const shown = text(markup);
+
+    expect(shown).toContain("Operating system macOS 15.5");
+    expect(shown).toContain("CPU architecture arm64");
+    expect(shown).toContain("xcode 16.4 (16F6) for iOS");
+    expect(shown).toContain("Protocol compatible");
+    expect(shown).toContain("agent-device available");
+    expect(shown).toContain("stream unavailable found 0.20.1, need 0.21.28 or later");
+    expect(shown).toContain("iOS Models: iPhone 17 Runtimes: 26.0 (default)");
+    expect(markup).toContain("status-ok");
+    expect(markup).toContain("status-warn");
+  });
+
+  it("shows the warm pool's facts, its targets table and the installs in progress", () => {
+    const view: WorkerView = {
+      ...WORKER,
+      installs: [
+        {
+          component: "19.0",
+          platform: "ios",
+          since: NOW - 7_000,
+          state: "downloading",
+          waiters: 1,
+        },
+      ],
+      warmPool: {
+        enabled: true,
+        reserveRunning: { android: 0, ios: 1 },
+        targets: [
+          {
+            booting: 1,
+            count: 2,
+            mode: "full",
+            model: "iPhone 17",
+            osVersion: "26.0",
+            platform: "ios",
+            ready: 1,
+          },
+          {
+            booting: 0,
+            count: 1,
+            mode: "full",
+            model: "iPhone 17",
+            platform: "ios",
+            ready: 0,
+            short: "runtime-missing",
+          },
+        ],
+      },
+    };
+
+    const markup = html(page(view), "warm-pool");
+    const shown = text(markup);
+
+    expect(shown).toContain("Pool On");
+    expect(shown).toContain("Reserved running slots iOS 1, Android 0");
+    expect(shown).toContain("iPhone 17 26.0 full 2 1 1 —");
+    expect(shown).toContain("iPhone 17 — full 1 0 0 runtime-missing");
+    expect(shown).toContain("iOS 19.0 downloading for 7 s , 1 waiter");
+    expect(markup).toContain('<td data-label="Wanted" class="num">2</td>');
+  });
+
+  it("says Not reported. for a pool the worker has not reported and No installs in progress. for none", () => {
+    const shown = text(html(page(WORKER), "warm-pool"));
+
+    expect(shown).toContain("Not reported.");
+    expect(shown).toContain("No installs in progress.");
+  });
+});
diff --git a/ui/src/state/workers.ts b/ui/src/state/workers.ts
new file mode 100644
index 000000000..37061c15c
--- /dev/null
+++ b/ui/src/state/workers.ts
@@ -0,0 +1,115 @@
+import { useState } from "react";
+
+import type { LoadView } from "../ds/loaded";
+import type { Paging } from "../ds/pager";
+import type { TokenList } from "../model/leases";
+import { TABLE_SIZES } from "../model/paging";
+import { itemIdFrom } from "../model/paths";
+import {
+  filterWorkers,
+  listSearch,
+  upMeta,
+  type WorkerFilter,
+  type WorkerInspector,
+  type WorkerRow,
+  workerInspectorOf,
+  workerRow,
+} from "../model/worker-page";
+import type { WorkerList } from "../model/workers";
+import { useLiveResource, useNow } from "./live";
+import { usePaging } from "./paging";
+import { loadView, mapView } from "./resource";
+import { usePath, useSearch } from "./router";
+
+export type {
+  CapabilityRow,
+  CatalogRow,
+  DeviceRow,
+  FigureCard,
+  InstallRow,
+  LoadDetail,
+  OverviewTab,
+  PlatformCard,
+  WarmRow,
+  WarmTab,
+  WorkerFilter,
+  WorkerInspector,
+  WorkerRow,
+  WorkerTab,
+} from "../model/worker-page";
+// why: a screen's test builds the view model the same way the hook does, and a screen may import
+// no model, so the builders pass through here.
+export { WORKER_FILTERS, workerInspectorOf, workerRow } from "../model/worker-page";
+export type { WorkerView } from "../model/workers";
+
+export interface WorkerInspectorView extends WorkerInspector {
+  readonly devicesPaging: Paging;
+  readonly warmPaging: Paging;
+}
+
+export interface WorkersPage {
+  readonly meta: string;
+  readonly empty: boolean;
+  readonly filter: WorkerFilter;
+  readonly setFilter: (filter: WorkerFilter) => void;
+  readonly rows: readonly WorkerRow[];
+  readonly paging: Paging;
+  readonly chosen: string | undefined;
+  // why: the page is `detail` on a phone only when the URL names a worker.
+  readonly focus: "list" | "detail";
+  readonly inspector: WorkerInspectorView | undefined;
+  readonly missing: string | undefined;
+}
+
+export function useWorkers(): LoadView<WorkersPage> {
+  const workers = loadView(useLiveResource<WorkerList>("/v1/workers"));
+  // why: the holders' labels come from the token records; while they have not arrived or were
+  // refused, a holder shows its id alone and the devices still show.
+  const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
+  const now = useNow();
+  const search = useSearch();
+  const named = itemIdFrom("/workers", usePath());
+  const [filter, setFilter] = useState<WorkerFilter>("all");
+
+  const all = workers.kind === "ready" ? workers.data.workers : [];
+  const shown = filterWorkers(all, filter);
+  const ready = workers.kind === "ready";
+  const paging = usePaging({ sizes: TABLE_SIZES, total: ready ? shown.length : undefined });
+  const first = shown[0];
+  const chosenId = named ?? first?.id;
+  const chosen = all.find((worker) => worker.id === chosenId);
+  const devicesPaging = usePaging({
+    name: "devices",
+    sizes: TABLE_SIZES,
+    total: ready ? (chosen?.devices?.length ?? 0) : undefined,
+  });
+  const warmPaging = usePaging({
+    name: "warm-pool",
+    sizes: TABLE_SIZES,
+    total: ready ? (chosen?.warmPool?.targets.length ?? 0) : undefined,
+  });
+  const keep = listSearch(search);
+
+  return mapView(workers, (list) => {
+    const start = (paging.page - 1) * paging.size;
+    return {
+      chosen: chosenId,
+      empty: list.workers.length === 0,
+      filter,
+      focus: named === undefined ? "list" : "detail",
+      inspector:
+        chosen === undefined
+          ? undefined
+          : {
+              ...workerInspectorOf({ now: now.server, tokens, worker: chosen }),
+              devicesPaging,
+              warmPaging,
+            },
+      meta: upMeta(list.workers),
+      missing: named !== undefined && chosen === undefined ? named : undefined,
+      paging,
+      rows: shown.slice(start, start + paging.size).map((worker) => workerRow(worker, keep)),
+      setFilter,
+    };
+  });
+}

From bd9f8eb148851c61e9d48947a5b036e6fedf66c6 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:38:38 +0200
Subject: [PATCH 16/32] test(ui): the shared console specs check the overview,
 the sidebar and the new pages

---
 e2e/console/views.spec.ts   | 213 ++++++++++++------------------------
 ui/src/ds/master-detail.css |   8 ++
 ui/src/model/stat.ts        |   5 -
 3 files changed, 77 insertions(+), 149 deletions(-)
 delete mode 100644 ui/src/model/stat.ts

diff --git a/e2e/console/views.spec.ts b/e2e/console/views.spec.ts
index bd32bab74..a9d775c75 100644
--- a/e2e/console/views.spec.ts
+++ b/e2e/console/views.spec.ts
@@ -1,18 +1,21 @@
 import type { Page } from "@playwright/test";
 
 import { waitFor } from "../helpers/wait.js";
-import { expect, NAV_LABELS, type RunningDaemon, signIn, startDaemon, test } from "./fixtures.js";
-
-/**
- * What every view shares: the tab bar, a page that fits a phone, the keyboard, the CSP, and the
- * charts. Each test starts its own single host and holds a lease on it, so every view has rows,
- * a chart with a change in it, and a details page to open.
- */
+import {
+  expect,
+  NAV,
+  NAV_LABELS,
+  openFromNav,
+  type RunningDaemon,
+  settled,
+  signIn,
+  startDaemon,
+  test,
+} from "./fixtures.js";
 
 const IOS = { availableOsVersions: ["18.4"], knownModels: ["iPhone 16"] };
 const LEASE = ["lease", "--platform", "ios", "--device", "iPhone 16", "--os", "18.4"] as const;
 
-/** Every page a test visits: the five views, then a worker's page and a lease's page. */
 interface Pages {
   readonly views: readonly { readonly label: string; readonly path: string }[];
   readonly worker: string;
@@ -25,7 +28,6 @@ async function takeLease(host: RunningDaemon, agent: string): Promise<string> {
   return (granted.json as { lease: { id: string } }).lease.id;
 }
 
-/** The daemon's own count of the leases it holds, as an operator reads it over HTTP. */
 async function leasesHeld(host: RunningDaemon): Promise<number> {
   const response = await fetch(new URL("/v1/leases", host.url), {
     headers: { Authorization: `Bearer ${host.tokens.operator}` },
@@ -33,7 +35,6 @@ async function leasesHeld(host: RunningDaemon): Promise<number> {
   return ((await response.json()) as { leases: unknown[] }).leases.length;
 }
 
-/** A single host holding one lease, and the pages of the console it has. */
 async function hostWithLease(): Promise<{ readonly host: RunningDaemon; readonly pages: Pages }> {
   const host = await startDaemon("worker", { driverScript: { ios: IOS } });
   const lease = await takeLease(host, "console-views");
@@ -43,7 +44,7 @@ async function hostWithLease(): Promise<{ readonly host: RunningDaemon; readonly
     host,
     pages: {
       lease: `/leases/${encodeURIComponent(lease)}/`,
-      views: NAV_LABELS.map((label) => ({ label, path: `/${label.toLowerCase()}` })),
+      views: NAV.map((entry) => ({ label: entry.label, path: entry.path })),
       worker: `/workers/${encodeURIComponent(worker?.id ?? "")}`,
     },
   };
@@ -56,14 +57,14 @@ function every(pages: Pages): readonly string[] {
 async function openSignedIn(page: Page, host: RunningDaemon): Promise<void> {
   await page.goto(host.url);
   await signIn(page, host.tokens.operator);
-  await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+  await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 }
 
-/** Opens `path` in the signed-in tab and waits until its content, not "Loading…", shows. */
 async function visit(page: Page, host: RunningDaemon, path: string): Promise<void> {
   await page.goto(new URL(path, host.url).toString());
   await expect(page.locator("#main h1")).toBeVisible();
   await expect(page.locator("#main")).not.toContainText("Loading…");
+  await settled(page);
 }
 
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
@@ -78,13 +79,11 @@ test.describe("every view", () => {
     try {
       await page.setViewportSize({ height: 740, width: 360 });
       await openSignedIn(page, host);
-      // The tab bar is wider than a phone: it scrolls sideways inside itself instead.
-      const tabs = page.getByRole("navigation", { name: "Console" });
-      expect(await tabs.evaluate((nav) => nav.scrollWidth > nav.clientWidth)).toBe(true);
+      const nav = page.getByRole("navigation", { name: "Console" });
+      await expect(nav.getByRole("button", { name: "Open menu" })).toBeVisible();
 
       for (const path of every(pages)) {
         await visit(page, host, path);
-        // The minute-by-minute tables open too, where a view has a chart.
         for (const summary of await page.locator("#main summary").all()) await summary.click();
         expect(await hasHorizontalScroll(page), path).toBe(false);
       }
@@ -94,15 +93,15 @@ test.describe("every view", () => {
   });
 
   test("every view is usable with the keyboard alone", async ({ browserName, page }) => {
-    // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
+    // why: Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const { host, pages } = await hostWithLease();
     try {
       await openSignedIn(page, host);
       for (const path of every(pages)) {
         await visit(page, host, path);
-        // Every control in the view, in the order Tab should visit them: a radio group is one
-        // stop, at its checked radio; nothing inside a closed disclosure is a stop.
+        // why: a radio group is one stop, at its checked radio, and nothing inside a closed
+        // disclosure is a stop, so those are left out of the order Tab should follow.
         const stops = await page.evaluate(() => {
           const candidates = document.querySelectorAll<HTMLElement>(
             "#main a[href], #main button, #main input, #main summary, #main [tabindex]:not([tabindex='-1'])",
@@ -117,7 +116,6 @@ test.describe("every view", () => {
           kept.forEach((element, index) => element.setAttribute("data-stop", String(index)));
           return kept.length;
         });
-        // The skip link moves focus to the view; Tab then walks every control in it, in order.
         await page.keyboard.press(tab);
         await expect(page.getByRole("link", { name: "Skip to content" })).toBeFocused();
         await page.keyboard.press("Enter");
@@ -132,25 +130,23 @@ test.describe("every view", () => {
         expect(visited, path).toEqual(Array.from({ length: stops }, (_, index) => String(index)));
       }
 
-      // Each kind of control works from the keyboard. A chart: arrow keys step through its
-      // minutes and show each one's count.
-      await visit(page, host, "/workers");
+      await visit(page, host, "/");
       const chart = page.locator(".chart [tabindex='0']").first();
       await chart.focus();
       await page.keyboard.press("ArrowLeft");
       await expect(page.locator(".chart-tip")).toContainText("leases held");
-      // A disclosure: Enter opens the minute-by-minute table.
       await page.locator("#main summary").first().focus();
       await page.keyboard.press("Enter");
       await expect(page.getByRole("columnheader", { name: "Leases held" })).toBeVisible();
-      // The radio group on Events: an arrow key picks the next filter.
       await visit(page, host, "/events");
       await page.getByRole("radio", { name: "All" }).focus();
       await page.keyboard.press("ArrowRight");
       await expect(page.getByRole("radio", { name: "Leases" })).toBeChecked();
-      // A link: Enter follows it, here from the lease to back to all leases.
       await visit(page, host, pages.lease);
-      await page.getByRole("link", { name: "All leases" }).focus();
+      await page
+        .getByRole("navigation", { name: "Breadcrumb" })
+        .getByRole("link", { name: "Leases" })
+        .focus();
       await page.keyboard.press("Enter");
       await expect(page).toHaveURL(/\/leases$/);
     } finally {
@@ -159,19 +155,19 @@ test.describe("every view", () => {
   });
 
   test("clicking a chart shows no outline, tabbing to it does", async ({ browserName, page }) => {
-    // Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
+    // why: Safari moves focus to links with Option-Tab; plain Tab reaches only form controls there.
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const { host } = await hostWithLease();
     try {
       await openSignedIn(page, host);
       for (const [path, title] of [
-        ["/workers", "Leases, last hour"],
-        ["/events", "Events per minute"],
+        ["/", "Leases held, last hour"],
+        ["/events", "Events"],
       ] as const) {
         await visit(page, host, path);
-        const chart = page.getByRole("region", { name: title }).locator(".chart");
+        const chart = page.locator("#main .chart").first();
+        const heading = page.getByRole("heading", { name: title, exact: true });
         const ring = () => chart.evaluate((element) => getComputedStyle(element).outlineStyle);
-        /** Whether focus is on the chart's own focusable layer, and what outline it draws. */
         const focused = () =>
           chart.evaluate((element) => {
             const active = document.activeElement;
@@ -181,17 +177,14 @@ test.describe("every view", () => {
             };
           });
 
-        // From the panel's title, the next stop is the chart: the keyboard draws the ring.
-        await page.getByRole("heading", { level: 2, name: title }).click();
+        await heading.click();
         await page.keyboard.press(tab);
         expect(await focused(), `${path} tabbed`).toEqual({ inChart: true, own: "none" });
         expect(await ring(), `${path} tabbed`).toBe("solid");
-        // Still usable from the keyboard: the arrow keys show a minute's count.
         await page.keyboard.press("ArrowLeft");
         await expect(chart.locator(".chart-tip")).toBeVisible();
 
-        // Focus leaves, and a click brings it back with no ring.
-        await page.getByRole("heading", { level: 2, name: title }).click();
+        await heading.click();
         expect(await ring(), `${path} left`).toBe("none");
         await chart.locator("svg").first().click();
         expect(await focused(), `${path} clicked`).toEqual({ inChart: true, own: "none" });
@@ -202,20 +195,19 @@ test.describe("every view", () => {
     }
   });
 
-  test("the tab bar moves between views and the page URL follows", async ({ daemon, page }) => {
+  test("the sidebar moves between pages and the page URL follows", async ({ daemon, page }) => {
     await page.goto("/");
     await signIn(page, daemon.tokens.operator);
     const tabs = page.getByRole("navigation", { name: "Console" });
     await expect(tabs.getByRole("link")).toHaveText([...NAV_LABELS]);
 
-    for (const label of NAV_LABELS) {
-      await tabs.getByRole("link", { name: label }).click();
-      await expect(page).toHaveURL(new RegExp(`/${label.toLowerCase()}$`));
-      await expect(page.getByRole("heading", { level: 1, name: label })).toBeVisible();
-      await expect(tabs.locator("[aria-current='page']")).toHaveText(label);
+    for (const entry of NAV) {
+      await openFromNav(page, entry.label);
+      await expect(page).toHaveURL(new RegExp(`${entry.path}$`));
+      await expect(page.getByRole("heading", { level: 1, name: entry.label })).toBeVisible();
+      await expect(tabs.locator("[aria-current='page']")).toHaveText(entry.label);
     }
 
-    // The browser's back and forward move the tab bar with the URL.
     await page.goBack();
     await expect(page).toHaveURL(/\/attention$/);
     await expect(tabs.locator("[aria-current='page']")).toHaveText(/^Attention/);
@@ -239,14 +231,12 @@ test.describe("every view", () => {
         if (/content.security.policy/i.test(message.text())) errors.push(message.text());
       });
       const response = await page.goto(host.url);
-      // The page is served under the policy this test holds it to.
       expect(response?.headers()["content-security-policy"]).toContain("style-src 'self'");
       await signIn(page, host.tokens.operator);
-      await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+      await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 
       for (const path of every(pages)) {
         await visit(page, host, path);
-        // Draw everything a chart draws: its tooltip, and the table under it.
         const chart = page.locator(".chart svg").first();
         if ((await chart.count()) > 0) {
           await chart.hover();
@@ -265,103 +255,44 @@ test.describe("every view", () => {
     }
   });
 
-  test("each view shows its stat cards with the numbers its data gives", async ({ page }) => {
+  test("the overview's tiles show the numbers the daemon gives", async ({ page }) => {
     const { host } = await hostWithLease();
     try {
-      /** The view's stat cards as `label | number | caption`, as the page holds the text. */
-      const cards = () =>
+      const tiles = () =>
         page
-          .locator(".stat")
+          .getByRole("list", { name: "Fleet at a glance" })
+          .getByRole("listitem")
           .evaluateAll((items) =>
             items.map((item) =>
-              [...item.querySelectorAll("p")].map((part) => part.textContent).join(" | "),
+              [...item.querySelectorAll(".stat-label, .stat-value, .stat-unit")]
+                .map((part) => part.textContent)
+                .join(" | "),
             ),
           );
-      const read = async (path: string) => {
-        const response = await fetch(new URL(path, host.url), {
-          headers: { Authorization: `Bearer ${host.tokens.operator}` },
-        });
-        return (await response.json()) as never;
-      };
-      const { workers } = (await read("/v1/workers")) as {
-        workers: {
-          connection: string;
-          devices: unknown[];
-          leases: unknown[];
-          capacity?: { global: { running: number } };
-          waiting?: unknown[];
-        }[];
+      const response = await fetch(new URL("/v1/workers", host.url), {
+        headers: { Authorization: `Bearer ${host.tokens.operator}` },
+      });
+      const { workers } = (await response.json()) as {
+        workers: { capacity?: { ios: { limit: number }; android: { limit: number } } }[];
       };
-      const [host1] = workers;
+      const limit = workers.reduce(
+        (sum, worker) =>
+          sum + (worker.capacity?.ios.limit ?? 0) + (worker.capacity?.android.limit ?? 0),
+        0,
+      );
       await openSignedIn(page, host);
 
-      await visit(page, host, "/workers");
       await expect
-        .poll(cards)
+        .poll(tiles)
         .toEqual([
-          "Workers | 1 | connected of 1",
-          `Devices | ${host1?.capacity?.global.running ?? 0} | running of ${host1?.devices.length ?? 0}`,
-          "Leases | 1 | held now",
-          `Waiting | ${host1?.waiting?.length ?? 0} | requests in the workers' queues`,
+          `Utilisation | ${Math.round((100 * 1) / limit)} | %`,
+          `Leases | 1 | of ${limit}`,
+          "Waiting | 0 | none",
+          "Workers | 1 | of 1 up",
+          "Granted | 1 | last hour",
         ]);
-
-      const { leases } = (await read("/v1/leases")) as {
-        leases: { requesterId: string; ttlDeadline: number }[];
-      };
-      const expiring = leases.filter((lease) => lease.ttlDeadline - Date.now() <= 15 * 60_000);
-      await visit(page, host, "/leases");
-      await expect
-        .poll(cards)
-        .toEqual([
-          "Leases | 1 | held now",
-          "Holders | 1 | holding at least one lease",
-          `Expiring soon | ${expiring.length} | expire within 15 minutes unless renewed`,
-        ]);
-
-      await visit(page, host, "/waiting");
-      await expect
-        .poll(cards)
-        .toEqual([
-          "Requests waiting | 0 | for a device",
-          "Longest wait | — | no request is waiting",
-        ]);
-
-      await visit(page, host, "/attention");
-      await expect
-        .poll(cards)
-        .toEqual([
-          "Items | 0 | need attention now",
-          "Workers affected | 0 | with at least one item",
-          "Devices affected | 0 | quarantined or stalled",
-        ]);
-
-      // Events: as many as the list holds, and the newest one's time and name. The feed draws only
-      // the rows in view; each says how long the whole list is.
-      await visit(page, host, "/events");
-      const rows = page.locator("#main li.event");
-      await expect(rows.first()).toBeVisible();
-      const listed = async () => Number(await rows.first().getAttribute("aria-setsize"));
-      const shown = await listed();
-      expect(shown).toBeGreaterThanOrEqual(await rows.count());
-      const time = await rows.first().locator("time").textContent();
-      const name = await rows.first().locator(".event-name").textContent();
-      await expect
-        .poll(cards)
-        .toEqual([`Events shown | ${shown} | in the list`, `Newest | ${time} | ${name}`]);
-      // The chart counts every event the list holds, each in its minute.
-      await expect(page.locator(".chart-summary")).toHaveText(
-        new RegExp(
-          `^${shown} events in the last hour; the busiest minute was \\d\\d:\\d\\d, with \\d+\\.$`,
-        ),
-      );
-      // A filter narrows the count to what the list shows.
-      await page.getByRole("radio", { name: "Leases" }).check();
-      await expect(rows.first().locator(".event-name")).toHaveText(/^lease\./);
-      const leasesShown = await listed();
-      expect(leasesShown).toBeLessThan(shown);
-      await expect
-        .poll(cards)
-        .toContainEqual(`Events shown | ${leasesShown} | of ${shown} in the list`);
+      await page.getByRole("link", { name: /^Leases 1/ }).click();
+      await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
     } finally {
       await host.dispose();
     }
@@ -372,26 +303,20 @@ test.describe("every view", () => {
     try {
       const id = decodeURIComponent(pages.lease.replace(/^\/leases\/|\/$/g, ""));
       await openSignedIn(page, host);
-      // A desktop, the widths where the table stacks its rows, and a phone.
       for (const width of [1280, 1024, 768, 360]) {
         await page.setViewportSize({ height: 800, width });
-        await visit(page, host, "/leases");
-        const link = page.getByRole("link", { name: id, exact: true });
-        await expect(link).toHaveAttribute("title", id);
-        const shape = await link.evaluate((element) => ({
-          cut: element.scrollWidth > element.clientWidth,
-          // Cut, but still long enough to tell one lease from another: a dozen characters.
-          readable: element.clientWidth >= 96,
+        await visit(page, host, pages.lease);
+        const shown = page.locator("#main .id", { hasText: id });
+        await expect(shown).toHaveAttribute("title", id);
+        const shape = await shown.evaluate((element) => ({
           lines: Math.round(
             element.getBoundingClientRect().height /
               parseFloat(getComputedStyle(element).lineHeight),
           ),
+          readable: element.clientWidth >= 96,
         }));
-        expect(shape, `${width}px`).toEqual({ cut: true, lines: 1, readable: true });
+        expect(shape, `${width}px`).toEqual({ lines: 1, readable: true });
       }
-      // The details page has the whole id.
-      await page.getByRole("link", { name: id, exact: true }).click();
-      await expect(page.getByRole("heading", { level: 1, name: id })).toHaveText(id);
     } finally {
       await host.dispose();
     }
diff --git a/ui/src/ds/master-detail.css b/ui/src/ds/master-detail.css
index 22981b06c..126ba7482 100644
--- a/ui/src/ds/master-detail.css
+++ b/ui/src/ds/master-detail.css
@@ -230,3 +230,11 @@
     padding: var(--space-4) var(--space-4) var(--space-12);
   }
 }
+
+.crumb {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/ui/src/model/stat.ts b/ui/src/model/stat.ts
deleted file mode 100644
index e747f717f..000000000
--- a/ui/src/model/stat.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Stat {
-  readonly label: string;
-  readonly value: string;
-  readonly caption: string;
-}

From a24ba7a4e8aeda318cf7269bcc46ccd80383f445 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:40:11 +0200
Subject: [PATCH 17/32] docs(ui): the console guide describes the overview, the
 sidebar and the list-and-inspector pages

---
 docs/CONSOLE.md | 334 ++++++++++++++++++++++++++----------------------
 1 file changed, 180 insertions(+), 154 deletions(-)

diff --git a/docs/CONSOLE.md b/docs/CONSOLE.md
index 7641107a4..e1e1518ce 100644
--- a/docs/CONSOLE.md
+++ b/docs/CONSOLE.md
@@ -8,34 +8,46 @@ internet.
 The console is for people who operate Simlock. It needs an operator token.
 Coding agents keep using the CLI, the MCP server, the client and the HTTP API.
 
-This version has sign-in and a page for each tab along the top of the
-console: Workers, Leases, Waiting, Attention and Events. On a narrow screen
-the row of tabs scrolls sideways.
-
-Each page starts with a row of cards that count what the page shows, such as
-the leases held and how many expire within 15 minutes. A long id, such as a
-lease's, is cut to fit its column; point at it to see it whole, or open its
-page.
+## Finding your way
+
+A sidebar on the left leads to every page: **Overview**, **Workers**,
+**Leases**, **Waiting**, **Attention** and **Events**. **Attention** shows how
+many items need you, on every page. At the bottom of the sidebar are the
+connection (see [Live updates](#live-updates)), **Sign out**, and the button
+that collapses the sidebar to its icons and widens it again. The console
+remembers your choice in this browser, and changing pages never changes it.
+A window narrower than 1280 pixels starts with the sidebar collapsed until you
+choose. On a phone the sidebar is a bar along the top with a menu button.
+
+Every page but the overview is a list on the left and the one you choose on
+the right. The address names what you chose, such as `/workers/<id>`, so a
+reload, the browser's back button or a link you share opens the same one. With
+nothing chosen, a wide window shows the first in the list; a phone shows the
+list, and the chosen one in its place after you select it.
+
+A list row is short on purpose: a square of colour, a name, one figure. The
+colour always has a word behind it: point at the square to read it, and a
+screen reader reads it as the square's name. The page on the right has
+everything else. A long id is cut to fit; point at it to see it whole.
 
 ## Long lists
 
-Every table of workers, devices, leases, requests or attention items shows 25
-rows at a time. Under it, the pager says which rows you
-see, such as `26–50 of 1,240`, and has **Previous**, **Next**, the page
-number, and **Per page**: 25, 50 or 100. When everything fits on one page,
-there is no pager. (The **Minute by minute** table under a chart always lists
-its 60 minutes.) The worker cards on **Workers** page the same way, 24 at a
-time, or 48 or 96.
+Every list of workers, leases, requests or attention items shows 25 at a time.
+Under it, the pager says which ones you see, such as `26–50 of 1,240`, and
+has **Previous**, **Next**, the page number, and **Per page**: 25, 50 or 100.
+When everything fits on one page, there is no pager. Tables on a page, such
+as a worker's devices, page the same way. (The **Minute by minute** table
+under a chart always lists its 60 minutes.)
 
-The page you are on is in the address, such as `/leases?page=3&size=50`, so
-a reload or a link you share opens the same page. A page with two tables,
-such as a worker's, keeps each one's page under its own name:
-`?devices-page=2&leases-page=3`.
+The page you are on is in the address, such as `/leases?page=3&size=50`, so a
+reload or a link you share opens the same page. A page with two tables, such
+as a worker's devices and its warm pool, keeps each one's page under its own
+name: `?devices-page=2`.
 
-Rows keep their order as the page refreshes itself, so a row stays on its
-page unless the list changes. When the list shrinks below the page you are
-on, you see its last page instead. Leases are listed oldest first, by when
-they were granted.
+Rows keep their order as the page refreshes itself, so a row stays on its page
+unless the list changes. When the list shrinks below the page you are on, you
+see its last page instead. Leases are listed oldest first, by when they were
+granted.
 
 ## Turn it on
 
@@ -121,77 +133,88 @@ The console keeps the token in this browser tab only.
 Some browsers copy a tab's storage into a duplicated or reopened tab, so such a
 tab may still be signed in.
 
+## Overview
+
+The console opens on **Overview**: the whole fleet on one page.
+
+- **Tiles**: how full the fleet is (leases held, as a share of every running
+  slot on connected workers), the leases held, the requests waiting and the
+  longest wait, the workers connected of all, and the leases granted in the
+  last hour. A tile that has a page of its own opens it.
+- **Leases held, last hour**: a chart of how many leases were held at the end
+  of each minute. It starts from the leases held now and counts back through
+  the lease events of the last hour, the same events the Events page shows, so
+  it can only go back as far as those. A lease that ends with no event, such
+  as one on a worker removed from a gateway, is not counted back. The line
+  under it says now, the highest and the lowest, and **Minute by minute**
+  lists each minute's number.
+- **Capacity**: per platform, the devices running of the limit, and a bar
+  split into leased, ready and booting.
+- **Workers**: a row per worker with its status square, a square per device
+  slot (leased, ready, booting, quarantined, absent or free), its CPU and
+  memory, and the leases it holds. Select a worker to open it.
+- **Attention** and **Activity**: what needs you, and the latest events. Each
+  opens its own page.
+
 ## Workers
 
 **Workers** lists every worker the daemon knows, as `simlock worker list`
 does. On a gateway that is every worker that has joined it. On a single host
 it is one worker: the host itself. The console looks the same either way.
 
-Each worker shows:
+Each row is the worker's status square, its name, its devices running of its
+limit and a bar of how full it is. The square shows the worst of what is wrong
+with the worker:
 
-| Fact | What it says |
+| Square | When |
 | --- | --- |
-| Connection | `connected`, `disconnected` or `incompatible`, and `drained` when the gateway sends it no new leases |
-| Health | The worker daemon's own health: `running`, `starting` or `failed` |
-| Protocol | `compatible`, or `incompatible` with the protocol versions each side speaks, so you can see which one to upgrade |
-| Version | The worker's Simlock version |
-| Devices | How many devices are running, and how many are leased |
-| Capacity | Devices running out of the limit, per platform |
-| Capabilities | Each optional module the worker knows of, such as agent-device: `available`, `off`, or `unavailable` with its reason |
-| Load | The machine's CPU, memory and disk use, such as `CPU 34% · memory 9.8 of 32.0 GiB · disk 112.4 GiB free`. A figure the worker limits itself to, such as a container's, is marked `(limit)`, and one it could not read says `unavailable`. A disconnected worker says "No reading while disconnected" |
-
-A worker the gateway could not read from yet says "Not reported" where it
-has nothing to show. A worker that is still starting shows its health as
-`starting`, and leaves out its devices, capacity and capabilities: they appear once it has
-finished starting. Its page shows the status and the host, and says that devices,
-leases and capacity appear once startup finishes.
-
-Above the workers, **Leases, last hour** charts how many leases were held at
-the end of each minute. It starts from the leases held now and counts back
-through the lease events of the last hour, the same events the Events page
-shows, so it can only go back as far as those. A lease that ends with no
-event, such as one on a worker removed from a gateway, is not counted back. **Minute by minute** under the
-chart lists each minute's number. **Busiest workers** ranks the five workers
-holding the most leases now. With more than five workers, a link under it,
-such as **All 12 workers**, takes you to the cards for the rest.
-
-Select a worker to open its page. It adds:
-
-- **Devices**: every device on the worker, with its state, platform, type
-  (Physical or Virtual), model, runtime, mode and image tag (both `—` for a
-  physical device, which has neither). A leased device shows how long ago its lease
-  was granted, and a device being provisioned or reclaimed on a connected
-  worker how long that has taken so far. Other states show `—`: the daemon
-  reports no time for them.
-- **Leases**: the leases on this worker, as the Leases page shows them.
-- **Host**: the operating system, the CPU architecture, and the version of
-  each platform tool, such as Xcode or the Android emulator.
-- **Catalog**: the models and runtimes the worker can lease. It is read again
+| Red | The worker is `disconnected` or `incompatible`, or its health is `failed`; or its memory pressure is `critical`, or its CPU, memory or disk is 95% full or more |
+| Amber | The worker is `drained`, `starting` or over its RAM budget; or its memory pressure is `warn`, or a figure is 85% full or more |
+| Green | Nothing is wrong |
+
+**Issues** shows only the workers whose square is not green, and **Busy** the
+ones using three quarters of their slots or more.
+
+Select a worker to see it on the right, under three tabs:
+
+- **Overview**:
+  - **CPU**, **Memory** and **Disk**, each as the figure the worker reads,
+    such as `28% busy, 12 cores` or `20.9 GiB of 36.0 GiB available`, with a
+    bar under it showing how full it is. A bar is neutral until the figure is
+    **85% full or more**, amber to 95%, red from there: the console's own
+    rule, read off the one figure it is drawn from. Where memory reports a
+    pressure (`normal`, `warn` or `critical`), that word decides memory's
+    colour instead. Swap used and when the reading was taken are beside them.
+    A figure the worker limits itself to, such as a container's, is marked
+    `(limit)`, and one it could not read says `Unavailable`. A disconnected
+    worker says "No reading while disconnected".
+  - **Leases**: how many the worker holds.
+  - **iOS** and **Android**: a square per slot the worker may run, shaded by
+    what each device is doing, and the devices running of the limit.
+  - **Devices**: every device, with its state, model and runtime, Physical or
+    Virtual, its mode where it is not the worker's default, and its image tag.
+    A leased device names its holder, linked to the lease, and how long the
+    lease has left. A device being provisioned or reclaimed on a connected
+    worker shows how long that has taken so far.
+- **Host**: the worker's id, connection, health and protocol (`compatible`,
+  or `incompatible` with the protocol versions each side speaks, so you can
+  see which one to upgrade); the operating system, the CPU architecture and
+  the version of each platform tool; each optional module, such as
+  agent-device, as `available`, `off`, or `unavailable` with its reason; and
+  the models and runtimes the worker can lease. The catalog is read again
   straight after a component is installed, and otherwise every 30 seconds.
-- **Load**: how busy the machine is right now: CPU busy share and cores,
-  memory available of total, swap used, memory pressure (`normal`, `warn` or
-  `critical`, left out where the system does not report it), and disk free of
-  total. CPU, memory and disk each have a bar under the figure showing how full
-  it is, for scanning at a glance. A bar is neutral until the figure is
-  **85% full or more**, amber to 95%, red from there — the console's own rule,
-  read off the one figure it is drawn from and nothing else. Where memory
-  reports a pressure, that word wins instead: its bar is green, amber or red for
-  `normal`, `warn` or `critical` however full it is. Only the bar is coloured
-  this way: the figures themselves are printed as numbers, and `simlock status`
-  reports them without a verdict. A part the worker could not read says
-  `Unavailable`, and has no bar. **Read** says how
-  long ago the reading was taken, and it ticks up until the next one. A
-  worker that sent no load says "Not reported.", and a disconnected one "No
-  reading while disconnected."
 - **Warm pool**: whether the worker keeps devices warm, the running slots it
   holds back per platform, and a row for each kind of device the targets name
-  (targets that resolve to the same device are one row, their counts added)
-  with the model, runtime and mode it keeps ready, how many it wants, how many are ready and how many are booting.
-  A target the worker could do nothing for shows the reason, such as
-  `runtime-missing`, in the last column, and `—` when it has none. It says "Not
-  reported" for a worker that has not sent it.
-- **Installs in progress**: each runtime or system image being downloaded or
-  waiting to, how long it has been going, and how many requests wait on it.
+  (targets that resolve to the same device are one row, their counts added),
+  with how many it wants, how many are ready and how many are booting. A
+  target the worker could do nothing for shows the reason, such as
+  `runtime-missing`. Under it, **Installs in progress**: each runtime or
+  system image being downloaded or waiting to, how long it has been going,
+  and how many requests wait on it.
+
+A worker the gateway could not read from yet says "Not reported" where it has
+nothing to show. A worker that is still starting leaves out its devices,
+capacity and warm pool: they appear once it has finished starting.
 
 A page the daemon cannot answer on a single host says "Not available on a
 single host" in place of its content.
@@ -202,28 +225,28 @@ single host" in place of its content.
 does. On a gateway that is every lease on every worker, including the ones a
 worker granted itself. On a single host it is the host's own leases.
 
-Each lease shows:
+Each row is who holds the lease (see below), how long it has left, the
+device's model and worker, and a bar of the time left. The time turns amber,
+and the lease reads `expiring`, when less than 15 minutes are left unless it
+is renewed. **Expiring**, **iOS** and **Android** narrow the list.
 
-| Fact | What it says |
-| --- | --- |
-| Holder | Who holds the lease (see below) |
-| Worker | The worker the device is on, by its label, or its id when it has none |
-| Device | The device's model and id |
-| Mode | `slim` or `full`, or `—` for a lease on a physical device, which has none |
-| Image tag | The image tag the device was created from, or `—` |
-| Granted | How long ago the lease was granted |
-| Expires in | How long until the lease expires unless it is renewed. It counts down every second. |
-| Last renewed | How long ago the lease was last renewed, or granted if it never was |
-
-Select a lease to open its page. It shows the same facts, the device's UDID,
-and the id of the request that was granted the lease, while the daemon still
-keeps it. A lease that has been released or has
-expired says "Lease not found".
+Select a lease to see it on the right:
+
+- **Expires in**: the time left, counting down every second, how long the
+  lease has been held, how long ago it was last renewed, and when it was
+  granted.
+- **Device**: the model, runtime, mode (none for a physical device), image
+  tag, Physical or Virtual, the worker it is on, and the device's id and UDID.
+- **Lease**: the lease's id and the id of the request that was granted it,
+  while the daemon still keeps it.
+- **Screen**, beside them: the device's live picture (see below).
+
+A lease that has been released or has expired says "Lease not found."
 
 ### Watching a lease's screen
 
-A lease's page ends with a **Screen** panel: one button, **Show screen**, and
-while it is on, the device's picture with the facts beside it — its size and
+A lease's page has a **Screen** panel: one button, **Show screen**, and
+while it is on, the device's picture with the facts under it — its size and
 codec, the frames painted, the rate they arrive at, the bandwidth they cost, and
 how many were dropped rather than drawn behind an earlier one.
 
@@ -235,7 +258,8 @@ live on the page. What you are looking at is either moving or gone.
 
 The panel is on every lease's page, and streams wherever the worker the lease
 runs on has screen streaming turned on (see [`capabilities.stream.enabled`](CONFIGURATION.md)).
-Where it is off, the panel says so; where the lease is on a device a screen cannot be
+Where it is off, the panel says so before you press anything, and the button
+cannot be pressed; where the lease is on a device a screen cannot be
 captured from — a physical iPhone or Android phone — it says that a live screen
 comes only from a simulator or an emulator. Either way it starts nothing.
 
@@ -245,9 +269,9 @@ start shows the worker's reason rather than a timeout.
 
 ### Who holds a lease
 
-A lease taken over the HTTP API belongs to the token that took it. The console
-shows that token's label, with the token id beside it: `ci-runner-3
-tok_9f2c`. Give each agent's token a label when you create it, so you can tell
+A lease taken over the HTTP API belongs to the token that took it. The list
+shows that token's label, `ci-runner-3`, and the lease's page the token id
+beside it: `ci-runner-3 tok_9f2c`. Give each agent's token a label when you create it, so you can tell
 them apart:
 
 ```sh
@@ -264,39 +288,43 @@ directly shows its holder's id as that worker reports it.
 
 ## Waiting
 
-**Waiting** lists every request waiting for a device, oldest first, as
-`simlock list --requests` does. Each shows:
+**Waiting** lists every request waiting for a device, as `simlock list
+--requests` does. Each row is its place in its queue, the agent that asked,
+how long it has waited, the device it asked for, and its stage: `queued`
+while it waits its turn, `starting` while the daemon is working on it
+(placing it as it arrives, or finding, creating, booting or downloading a
+device for it).
+
+Select a request to see it on the right:
 
 | Fact | What it says |
 | --- | --- |
-| Requester | The agent that asked |
+| Waiting | How long since the daemon received it |
+| Place | Where it stands in its own line, counting from 1, the requests ahead of it in that line that are already starting included; `—` while starting. A request for a physical device waits in a line of its own, and says so |
+| Stage | `queued` or `starting` |
 | Device | The platform and the model it asked for, or the class for a request that named a class, or only the platform for one that named neither; and the runtime, mode and image tag when it named them |
-| Worker | The worker whose own queue it waits in, or `—` for a request in a gateway's queue |
-| Stage | `queued` while it waits its turn, `starting` while the daemon is working on it: placing it as it arrives, or finding, creating, booting or downloading a device for it |
-| Place in queue | Where it stands in its own line, counting from 1, the requests ahead of it in that line that are already starting included; `—` while starting. A request for a physical device waits in a line of its own and shows `(physical)` after its place, for example `1 (physical)` |
-| Waiting for | How long since the daemon received it |
+| Queue | The worker whose own queue it waits in, or the gateway's queue |
 
 On a gateway the list has the gateway's own queue and, for each connected
 worker, the requests its own agents sent to it directly. A request the
-gateway has passed to a worker shows once, as the gateway's. On a single
-host every request shows that host as its worker.
+gateway has passed to a worker shows once, as the gateway's.
 
 A request leaves the list as soon as it gets its device, fails, or is
-cancelled.
+cancelled; its page then says "Request not waiting."
 
 ## Attention
 
-**Attention** lists everything that needs you, in one place. Each item names
-its worker and links to that worker's page. An item leaves the list as soon as
-the daemon reports that its condition cleared. A gateway keeps a disconnected
-worker's devices and RAM use as the worker last reported them, so their items
-stay until the worker reconnects or is removed. The console only shows these;
-it does not fix them.
+**Attention** lists everything that needs you, in one place. Each row is the
+condition, its colour, and the worker or device it is about. An item leaves the
+list as soon as the daemon reports that its condition cleared, and its page
+then says "Resolved." A gateway keeps a disconnected worker's devices and RAM
+use as the worker last reported them, so their items stay until the worker
+reconnects or is removed. The console only shows these; it does not fix them.
 
 | Item | What it means |
 | --- | --- |
 | `disconnected` | The gateway has lost its connection to the worker. |
-| `incompatible` | The worker and the gateway have no protocol version in common. The worker's page says which versions each speaks. |
+| `incompatible` | The worker and the gateway have no protocol version in common. Its page says which versions each speaks. |
 | `drained` | The worker gets no new leases (`simlock worker drain`). |
 | `over RAM budget` | The devices on the worker use more RAM than its budget allows, as `simlock status` reports with `(over limit)`. |
 | `quarantined` | A device Simlock could not clean up. It retries the cleanup in the background and leases the device to no one meanwhile. |
@@ -306,8 +334,10 @@ The first three come from a gateway only: a single host has no gateway to lose
 or disagree with, and cannot be drained. The other three show on a single host
 too.
 
-The **Attention** tab shows how many items there are, on every page. It shows
-no number while there are none.
+Select an item to see the facts that matter for it, such as when a
+disconnected worker was last seen or how much RAM a worker uses of its budget,
+and the events of the last hour about that worker or device. **Open worker**
+opens the worker's page.
 
 Each item shows within about a second of the daemon reporting it. A stalled
 device is the exception on a gateway: a device becomes stalled when its time
@@ -319,36 +349,31 @@ reads that worker, which it does at least every 30 seconds.
 **Events** lists recent events, newest first: the same events as
 `simlock events --since 1h`. New events appear at the top as they happen.
 
-Each event shows:
-
-- its time, on your computer's clock face
-- its name, such as `lease.granted`
-- on a gateway, the worker it came from, by its label, or by its id if the
-  worker has no label or the gateway no longer knows it. A `worker.rejected`
-  event names no worker here: its id is only what the refused worker claimed,
-  and it shows in the payload.
-- its payload, as each key and its value, exactly as the daemon sent it
-
-An event this version of the console does not know still shows, with its
-whole payload.
-
-**Show** picks which events to list: all of them, or only those about leases,
-devices, workers or components. **Other** lists the rest, such as
-`daemon.started`.
-
-The events sit in a box of their own that scrolls; the page around it stays
-put. Click in the box, or Tab to it, to scroll it with the keyboard. While
-you are at the top of the box, new events push the list down, so the newest
-is always in view. Once you scroll down to read, what you are reading stays
-where it is, and a button at the top counts the events that came in since,
-such as **3 new events**. Select it to go back to the top.
+Each row is the event's time, on your computer's clock face, its name, such as
+`lease.granted`, and a line saying who, which device and which worker it is
+about, from what its payload names. An event this version of the console does
+not know still shows.
+
+Above the list, **Events per minute** charts how many of the events the page
+holds happened in each minute of the last hour, and **Minute by minute** lists
+each minute's number. The filter picks which events to list: all of them, or
+only those about leases, devices, workers or components. **Other** lists the
+rest, such as `daemon.started`. The filter is in the address too.
+
+The list scrolls in a box of its own; the page around it stays put. Click in
+the box, or Tab to it, to scroll it with the keyboard. While you are at the
+top, new events push the list down, so the newest is always in view. Once you
+scroll down to read, what you are reading stays where it is, and a button at
+the top counts the events that came in since, such as **3 new events**.
+Select it to go back to the top.
+
+Select an event to see its whole payload, each key and its value exactly as
+the daemon sent it, and a button to the lease, worker, request or attention
+item it is about, when the console has a page for it. An event older than the
+last hour says "Event not in the last hour."
 
 The page keeps the newest 10,000 events. Older ones drop off the end.
 
-**Events per minute** charts how many of the events the page holds happened in
-each minute of the last hour, whatever **Show** picks. **Minute by minute**
-under it lists each minute's number.
-
 When the console loses the daemon, or the tab was hidden, it loads the events
 it missed as soon as it is back, so the list has no gap. An event the console
 already shows is never shown twice, also after the daemon restarts.
@@ -369,8 +394,9 @@ are off by as much.
 A hidden tab stops asking the daemon for anything. When you come back to it,
 it catches up at once.
 
-The box at the top right, beside **Sign out**, says how the console's
-connection is:
+The bottom of the sidebar, above **Sign out**, says how the console's
+connection is (with the sidebar collapsed, as its square: point at it to read
+it):
 
 | It says | What it means |
 | --- | --- |
@@ -380,7 +406,7 @@ connection is:
 
 While reconnecting, the console keeps the last data on screen and tries the
 daemon again after 1, 2, 4 and 8 seconds, then every 10 seconds. When the
-daemon answers, the console refreshes the page and the box goes back to
+daemon answers, the console refreshes the page and it goes back to
 Connected. You do not need to reload.
 
 ## What the page loads

From c2fc27584203480b45ab84b9e8b3096b5e3f9811 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:42:15 +0200
Subject: [PATCH 18/32] fix(ui): a lease a gateway relayed names its agent,
 device rows stay on one line, and a disabled button looks it

---
 ui/src/ds/button.css               |  9 ++++++---
 ui/src/model/activity.test.ts      |  8 ++++++++
 ui/src/model/activity.ts           |  8 +++++++-
 ui/src/model/leases.test.ts        | 16 ++++++++++++++++
 ui/src/model/leases.ts             | 14 ++++++++++++--
 ui/src/screens/workers/index.tsx   |  6 ++++--
 ui/src/screens/workers/workers.css | 17 +++++++++++++++++
 7 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/ui/src/ds/button.css b/ui/src/ds/button.css
index 071c98e86..8d8999e91 100644
--- a/ui/src/ds/button.css
+++ b/ui/src/ds/button.css
@@ -30,9 +30,12 @@
   color: var(--on-accent);
 }
 
-.button:disabled {
-  cursor: progress;
-  opacity: 0.6;
+.button:disabled,
+.button:disabled:hover {
+  border-color: var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: not-allowed;
 }
 
 .button-secondary {
diff --git a/ui/src/model/activity.test.ts b/ui/src/model/activity.test.ts
index f17bd7c27..13cf3d914 100644
--- a/ui/src/model/activity.test.ts
+++ b/ui/src/model/activity.test.ts
@@ -59,3 +59,11 @@ describe("an event's tone", () => {
     expect(eventTone("lease.granted")).toBeUndefined();
   });
 });
+
+describe("a requester a gateway relayed", () => {
+  it("is named by the agent behind the gateway's prefix", () => {
+    const relayed = event("lease.granted", { requester: "gw:03787a13-4eac:claude-ios-3" });
+
+    expect(eventSummary(relayed, [])).toBe("claude-ios-3");
+  });
+});
diff --git a/ui/src/model/activity.ts b/ui/src/model/activity.ts
index f12ea3359..15cffda91 100644
--- a/ui/src/model/activity.ts
+++ b/ui/src/model/activity.ts
@@ -1,4 +1,5 @@
 import { type ConsoleEvent, workerIdOf } from "./events";
+import { agentIdOf } from "./leases";
 import type { Tone } from "./tones";
 import { type WorkerView, workerName } from "./workers";
 
@@ -8,6 +9,11 @@ function field(payload: unknown, key: string): string | undefined {
   return typeof value === "string" && value !== "" ? value : undefined;
 }
 
+function requesterIn(payload: unknown): string | undefined {
+  const requester = field(payload, "requester") ?? field(payload, "requesterId");
+  return requester === undefined ? undefined : agentIdOf(requester);
+}
+
 function deviceName(
   deviceId: string | undefined,
   workers: readonly WorkerView[],
@@ -27,7 +33,7 @@ export function eventSummary(event: ConsoleEvent, workers: readonly WorkerView[]
   const workerId = workerIdOf(event);
   const worker = workers.find((entry) => entry.id === workerId);
   const parts = [
-    field(payload, "requester") ?? field(payload, "requesterId"),
+    requesterIn(payload),
     deviceName(field(payload, "deviceId"), workers),
     field(payload, "component"),
     worker === undefined ? field(payload, "label") : workerName(worker),
diff --git a/ui/src/model/leases.test.ts b/ui/src/model/leases.test.ts
index 53686ca6c..0341609ca 100644
--- a/ui/src/model/leases.test.ts
+++ b/ui/src/model/leases.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import {
   filterLeaseRows,
+  holderOf,
   type LeaseDetails,
   type LeaseRecord,
   leaseInspection,
@@ -357,3 +358,18 @@ describe("a lease's inspection", () => {
     expect(inspect().stream.offered).toBe(true);
   });
 });
+
+describe("a lease's holder on a worker a gateway feeds", () => {
+  it("is the agent behind the gateway's prefix, matched to its token's label", () => {
+    const tokens = [
+      { createdAt: 0, id: "tok_9f2c", label: "ci-runner-3", role: "agent" },
+    ] as unknown as TokenRecord[];
+
+    expect(holderOf("gw:03787a13-4eac:tok_9f2c", tokens)).toEqual({
+      id: "tok_9f2c",
+      label: "ci-runner-3",
+    });
+    expect(holderOf("gw:03787a13-4eac:claude-ios-3", tokens)).toEqual({ id: "claude-ios-3" });
+    expect(holderOf("claude-ios-3", tokens)).toEqual({ id: "claude-ios-3" });
+  });
+});
diff --git a/ui/src/model/leases.ts b/ui/src/model/leases.ts
index 5df6518f8..adb70eeb7 100644
--- a/ui/src/model/leases.ts
+++ b/ui/src/model/leases.ts
@@ -39,8 +39,18 @@ export interface Holder {
 // why: over HTTP a requester's id is its token's id, so a token with that id names it; a requester
 // no token matches, such as an agent on the local socket, is its id alone.
 export function holderOf(requesterId: string, tokens: readonly TokenRecord[]): Holder {
-  const label = tokens.find((token) => token.id === requesterId)?.label;
-  return label === undefined ? { id: requesterId } : { id: requesterId, label };
+  const id = agentIdOf(requesterId);
+  const label = tokens.find((token) => token.id === id)?.label;
+  return label === undefined ? { id } : { id, label };
+}
+
+const GATEWAY_REQUESTER = /^gw:[^:]+:(.+)$/;
+
+// why: a gateway hands a worker its agents' requests under `gw:<gateway instance>:<agent id>`, so a
+// worker's own view names the agent behind that prefix; the console shows the agent, as the
+// gateway's lease list does.
+export function agentIdOf(requesterId: string): string {
+  return GATEWAY_REQUESTER.exec(requesterId)?.[1] ?? requesterId;
 }
 
 // why: a holder's title is its token's label, or its id where no label names it.
diff --git a/ui/src/screens/workers/index.tsx b/ui/src/screens/workers/index.tsx
index 9c54d1412..2fb7a3e0e 100644
--- a/ui/src/screens/workers/index.tsx
+++ b/ui/src/screens/workers/index.tsx
@@ -171,7 +171,7 @@ function OverviewTab({ inspector }: { readonly inspector: WorkerInspectorView })
   }
   return (
     <>
-      <Grid label="Load and leases">
+      <Grid min="sm" label="Load and leases">
         {overview.figures.map((card) => (
           <FigureCardView key={card.label} card={card} />
         ))}
@@ -283,7 +283,9 @@ const DEVICE_COLUMNS: readonly Column<DeviceRow>[] = [
         device.status.word
       ) : (
         <span className="device-text">
-          <Link to={device.holder.to}>{device.holder.name}</Link>
+          <Link to={device.holder.to} title={device.holder.name}>
+            {device.holder.name}
+          </Link>
           {device.renewed === undefined ? null : (
             <span className="device-sub">renewed {device.renewed}</span>
           )}
diff --git a/ui/src/screens/workers/workers.css b/ui/src/screens/workers/workers.css
index e44f7b88b..9e072edf7 100644
--- a/ui/src/screens/workers/workers.css
+++ b/ui/src/screens/workers/workers.css
@@ -66,3 +66,20 @@
   padding: 0;
   list-style: none;
 }
+
+.device-text,
+.device-name {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.device-text > *,
+.device-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.device-sub .id {
+  max-width: 100%;
+}

From 91733625817727dba094b466d8413a1c997b1b87 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:43:13 +0200
Subject: [PATCH 19/32] fix(ui): a phone's top bar shows the full wordmark, and
 a device id under its model cuts at the column

---
 ui/src/ds/sidebar.css              | 21 ++++++++++++++++++++-
 ui/src/ds/sidebar.tsx              |  7 ++++++-
 ui/src/screens/workers/workers.css |  3 ++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/ui/src/ds/sidebar.css b/ui/src/ds/sidebar.css
index b863ea8bc..6a3fd2227 100644
--- a/ui/src/ds/sidebar.css
+++ b/ui/src/ds/sidebar.css
@@ -66,6 +66,15 @@
   display: none;
 }
 
+.sidebar-mark-short,
+.sidebar-collapsed .sidebar-mark-full {
+  display: none;
+}
+
+.sidebar-collapsed .sidebar-mark-short {
+  display: inline-flex;
+}
+
 .sidebar-nav {
   display: flex;
   flex-direction: column;
@@ -225,10 +234,20 @@
     border-bottom: 1px solid var(--border);
   }
 
-  .sidebar-top {
+  .sidebar-top,
+  .sidebar-collapsed .sidebar-top {
+    justify-content: space-between;
     padding: 0;
   }
 
+  .sidebar-collapsed .sidebar-mark-full {
+    display: inline-flex;
+  }
+
+  .sidebar-collapsed .sidebar-mark-short {
+    display: none;
+  }
+
   .sidebar-menu {
     display: inline-flex;
     align-items: center;
diff --git a/ui/src/ds/sidebar.tsx b/ui/src/ds/sidebar.tsx
index 4429bbe9d..e66ad2e1a 100644
--- a/ui/src/ds/sidebar.tsx
+++ b/ui/src/ds/sidebar.tsx
@@ -59,7 +59,12 @@ export function Sidebar(props: {
       aria-label="Console"
     >
       <div className="sidebar-top">
-        <Wordmark short={collapsed} />
+        <span className="sidebar-mark-full">
+          <Wordmark />
+        </span>
+        <span className="sidebar-mark-short">
+          <Wordmark short />
+        </span>
         <button
           type="button"
           className="sidebar-menu"
diff --git a/ui/src/screens/workers/workers.css b/ui/src/screens/workers/workers.css
index 9e072edf7..8e7c36c49 100644
--- a/ui/src/screens/workers/workers.css
+++ b/ui/src/screens/workers/workers.css
@@ -81,5 +81,6 @@
 }
 
 .device-sub .id {
-  max-width: 100%;
+  display: inline;
+  max-width: none;
 }

From 90067e15b58e36dfd4867caa35fb37ac698dfe0e Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:45:15 +0200
Subject: [PATCH 20/32] test(ui): long lists page in the list pane

---
 e2e/console/long-lists.spec.ts | 277 +++++++++++++++++----------------
 1 file changed, 146 insertions(+), 131 deletions(-)

diff --git a/e2e/console/long-lists.spec.ts b/e2e/console/long-lists.spec.ts
index d923df272..466f7d555 100644
--- a/e2e/console/long-lists.spec.ts
+++ b/e2e/console/long-lists.spec.ts
@@ -4,20 +4,14 @@ import type { Locator, Page, Route } from "@playwright/test";
 import { connectSimlock } from "../../dist/client/index.js";
 import {
   expect,
-  NAV_LABELS,
+  NAV,
   type RunningDaemon,
+  settled,
   signIn,
   startDaemon,
   test as base,
 } from "./fixtures.js";
 
-/**
- * Long lists: every table pages, the worker cards page, and the events feed draws only the rows
- * in view. The paging tests answer one route with a list of the length they need, built here,
- * and pass every other request to a real daemon. The browser lane's own tests run against a
- * single host seeded for real with 300 leases and 5,000 events.
- */
-
 const IOS = { availableOsVersions: ["18.4"], knownModels: ["iPhone 16"] };
 
 /** A single host whose limits fit 300 fake devices. */
@@ -98,6 +92,7 @@ async function read(host: RunningDaemon, path: string): Promise<unknown> {
 }
 
 interface Envelope {
+  readonly id: string;
   readonly seq: number;
   readonly timestamp: number;
   readonly event: string;
@@ -111,7 +106,7 @@ async function recentEvents(host: RunningDaemon): Promise<readonly Envelope[]> {
 async function open(page: Page, host: RunningDaemon, path: string): Promise<void> {
   await page.goto(host.url);
   await signIn(page, host.tokens.operator);
-  await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+  await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
   await page.goto(new URL(path, host.url).href);
   await expect(page.locator("#main h1")).toBeVisible();
   await expect(page.locator("#main")).not.toContainText("Loading…");
@@ -151,9 +146,23 @@ function pad(n: number): string {
   return String(n).padStart(4, "0");
 }
 
-/** The ids in the first column of a table, top to bottom. */
-function firstColumn(table: Locator): Promise<string[]> {
-  return table.locator("tbody tr td:first-child").allTextContents();
+function pane(page: Page, title: string): Locator {
+  return page.getByRole("region", { name: title, exact: true });
+}
+
+function rowIds(list: Locator, section: string): Promise<string[]> {
+  return list.getByRole("link").evaluateAll(
+    (links, prefix) =>
+      links.map((link) => {
+        const path = (link.getAttribute("href") ?? "").split("?")[0] ?? "";
+        return decodeURIComponent(path.slice(prefix.length + 1).replace(/\/$/, ""));
+      }),
+    section,
+  );
+}
+
+function leaseRows(page: Page): Locator {
+  return pane(page, "Leases").getByRole("list", { name: "Leases" });
 }
 
 function ids(from: number, to: number, prefix = "lse"): string[] {
@@ -166,24 +175,23 @@ function pager(page: Page, label: string): Locator {
 }
 
 test.describe("long lists page", () => {
-  test("a table of 1,240 rows shows 25 and the pager says 1–25 of 1,240", async ({
+  test("a list of 1,240 leases shows 25 rows and the pager says 1–25 of 1,240", async ({
     daemon,
     page,
   }) => {
     await answer(page, "/v1/leases", () => ({ leases: leases(1_240) }));
     await open(page, daemon, "/leases");
 
-    const table = page.getByRole("region", { name: "All leases" }).locator("table");
-    expect(await firstColumn(table)).toEqual(ids(1, 25));
-    await expect(pager(page, "All leases").locator(".pager-range")).toHaveText("1–25 of 1,240");
-    await expect(pager(page, "All leases")).toContainText("Page 1 of 50");
+    expect(await rowIds(leaseRows(page), "/leases")).toEqual(ids(1, 25));
+    await expect(pager(page, "Leases").locator(".pager-range")).toHaveText("1–25 of 1,240");
+    await expect(pager(page, "Leases")).toContainText("Page 1 of 50");
   });
 
   test("next and previous move by one page and stop at the ends", async ({ daemon, page }) => {
     await answer(page, "/v1/leases", () => ({ leases: leases(60) }));
     await open(page, daemon, "/leases");
-    const table = page.getByRole("region", { name: "All leases" }).locator("table");
-    const nav = pager(page, "All leases");
+    const rows = leaseRows(page);
+    const nav = pager(page, "Leases");
     const range = nav.locator(".pager-range");
     const next = nav.getByRole("button", { name: "Next" });
     const previous = nav.getByRole("button", { name: "Previous" });
@@ -197,10 +205,10 @@ test.describe("long lists page", () => {
 
     await next.click();
     await expect(range).toHaveText("26–50 of 60");
-    expect(await firstColumn(table)).toEqual(ids(26, 50));
+    expect(await rowIds(rows, "/leases")).toEqual(ids(26, 50));
     await next.click();
     await expect(range).toHaveText("51–60 of 60");
-    expect(await firstColumn(table)).toEqual(ids(51, 60));
+    expect(await rowIds(rows, "/leases")).toEqual(ids(51, 60));
     await expect(next).toHaveAttribute("aria-disabled", "true");
     const entries = await page.evaluate(() => window.history.length);
     await next.click({ force: true });
@@ -213,7 +221,7 @@ test.describe("long lists page", () => {
     await expect(range).toHaveText("26–50 of 60");
     await previous.click();
     await expect(range).toHaveText("1–25 of 60");
-    expect(await firstColumn(table)).toEqual(ids(1, 25));
+    expect(await rowIds(rows, "/leases")).toEqual(ids(1, 25));
     // The first page is the plain address.
     await expect(page).toHaveURL(/\/leases$/);
   });
@@ -224,19 +232,18 @@ test.describe("long lists page", () => {
   }) => {
     await answer(page, "/v1/leases", () => ({ leases: leases(1_240) }));
     await open(page, daemon, "/leases");
-    const table = page.getByRole("region", { name: "All leases" }).locator("table");
-    const range = pager(page, "All leases").locator(".pager-range");
+    const range = pager(page, "Leases").locator(".pager-range");
 
-    await pager(page, "All leases").getByLabel("Per page").selectOption("50");
+    await pager(page, "Leases").getByLabel("Per page").selectOption("50");
 
     await expect(range).toHaveText("1–50 of 1,240");
-    expect(await firstColumn(table)).toEqual(ids(1, 50));
+    expect(await rowIds(leaseRows(page), "/leases")).toEqual(ids(1, 50));
     await expect(page).toHaveURL(/\/leases\?size=50$/);
 
     // From rows 101 to 125, 50 a page goes to the page that still starts with row 101.
     await page.goto(new URL("/leases?page=5", daemon.url).href);
     await expect(range).toHaveText("101–125 of 1,240");
-    await pager(page, "All leases").getByLabel("Per page").selectOption("50");
+    await pager(page, "Leases").getByLabel("Per page").selectOption("50");
     await expect(range).toHaveText("101–150 of 1,240");
     expect(new URL(page.url()).searchParams.toString()).toBe("page=3&size=50");
   });
@@ -244,10 +251,9 @@ test.describe("long lists page", () => {
   test("opening a URL with page=3 shows the third page", async ({ daemon, page }) => {
     await answer(page, "/v1/leases", () => ({ leases: leases(1_240) }));
     await open(page, daemon, "/leases?page=3");
-    const table = page.getByRole("region", { name: "All leases" }).locator("table");
 
-    await expect(pager(page, "All leases").locator(".pager-range")).toHaveText("51–75 of 1,240");
-    expect(await firstColumn(table)).toEqual(ids(51, 75));
+    await expect(pager(page, "Leases").locator(".pager-range")).toHaveText("51–75 of 1,240");
+    expect(await rowIds(leaseRows(page), "/leases")).toEqual(ids(51, 75));
     await expect(page).toHaveURL(/\/leases\?page=3$/);
   });
 
@@ -258,19 +264,18 @@ test.describe("long lists page", () => {
     let count = 60;
     await answer(page, "/v1/leases", () => ({ leases: leases(count) }));
     await open(page, daemon, "/leases?page=3");
-    const table = page.getByRole("region", { name: "All leases" }).locator("table");
-    const range = pager(page, "All leases").locator(".pager-range");
+    const range = pager(page, "Leases").locator(".pager-range");
     await expect(range).toHaveText("51–60 of 60");
 
     count = 30;
 
     // The next refresh, within a second, leaves no third page: the second, now the last, shows.
     await expect(range).toHaveText("26–30 of 30", { timeout: 2_000 });
-    expect(await firstColumn(table)).toEqual(ids(26, 30));
+    expect(await rowIds(leaseRows(page), "/leases")).toEqual(ids(26, 30));
     await expect(page).toHaveURL(/\/leases\?page=2$/);
   });
 
-  test("a focused link in a table keeps its focus, and its row its place, across two refreshes", async ({
+  test("a focused link in the list keeps its focus, and its row its place, across two refreshes", async ({
     daemon,
     page,
   }) => {
@@ -282,11 +287,10 @@ test.describe("long lists page", () => {
       return { leases: listed };
     });
     await open(page, daemon, "/leases?page=2");
-    const table = page.getByRole("region", { name: "All leases" }).locator("table");
-    const row = table.locator("tbody tr").nth(2);
+    const row = leaseRows(page).getByRole("listitem").nth(2);
     const link = row.getByRole("link");
-    const expires = row.locator('td[data-label="Expires in"]');
-    await expect(link).toHaveText("lse_0028");
+    const expires = row.locator(".list-aside");
+    await expect(link).toHaveAttribute("href", "/leases/lse_0028/");
     await link.focus();
     await expect(link).toBeFocused();
     // The element itself is marked: a link drawn again in its place would not carry the mark.
@@ -306,7 +310,7 @@ test.describe("long lists page", () => {
     expect(await link.evaluate((element) => (element as unknown as { kept?: boolean }).kept)).toBe(
       true,
     );
-    expect(await firstColumn(table)).toEqual(ids(26, 50));
+    expect(await rowIds(leaseRows(page), "/leases")).toEqual(ids(26, 50));
     await page.keyboard.press("Enter");
     await expect(page).toHaveURL(/\/leases\/lse_0028\/$/);
   });
@@ -315,16 +319,18 @@ test.describe("long lists page", () => {
     let count = 25;
     await answer(page, "/v1/leases", () => ({ leases: leases(count) }));
     await open(page, daemon, "/leases");
-    const rows = page.getByRole("region", { name: "All leases" }).locator("tbody tr");
-    await expect(rows).toHaveCount(25);
-    await expect(pager(page, "All leases")).toHaveCount(0);
+    await expect(leaseRows(page).getByRole("listitem")).toHaveCount(25);
+    await expect(pager(page, "Leases")).toHaveCount(0);
 
     // One row more and the list needs a second page: the pager shows.
     count = 26;
-    await expect(pager(page, "All leases").locator(".pager-range")).toHaveText("1–25 of 26");
+    await expect(pager(page, "Leases").locator(".pager-range")).toHaveText("1–25 of 26");
   });
 
-  test("two tables on one page keep their own page in the URL", async ({ daemon, page }) => {
+  test("the worker list and the devices table in its inspector keep their own page in the URL", async ({
+    daemon,
+    page,
+  }) => {
     const listed = (await read(daemon, "/v1/workers")) as { workers: Record<string, unknown>[] };
     const host = listed.workers[0] ?? {};
     const devices = Array.from({ length: 60 }, (_, index) => ({
@@ -333,69 +339,69 @@ test.describe("long lists page", () => {
       spec: { model: "iPhone 16", osVersion: "18.4", platform: "ios" },
       state: "ready",
     }));
-    await answer(page, "/v1/workers", () => ({ workers: [{ ...host, devices }] }));
-    await answer(page, "/v1/leases", () => ({ leases: leases(60) }));
-    await open(page, daemon, `/workers/${encodeURIComponent(String(host.id))}`);
+    const workers = Array.from({ length: 30 }, (_, index) => ({
+      ...host,
+      devices,
+      id: `wrk_${pad(index + 1)}`,
+      label: `worker-${pad(index + 1)}`,
+    }));
+    await answer(page, "/v1/workers", () => ({ workers }));
+    await open(page, daemon, "/workers/wrk_0001");
     const devicesTable = page.getByRole("region", { name: "Devices" }).locator("table");
-    const leasesTable = page.getByRole("region", { name: "Leases" }).locator("table");
+    const deviceIds = async () =>
+      (await devicesTable.locator("tbody tr td:first-child").allTextContents()).map(
+        (text) => /dev_\d+/.exec(text)?.[0],
+      );
 
+    await pager(page, "Workers").getByRole("button", { name: "Next" }).click();
+    await expect(pager(page, "Workers").locator(".pager-range")).toHaveText("26–30 of 30");
     await pager(page, "Devices").getByRole("button", { name: "Next" }).click();
-    await expect(pager(page, "Devices").locator(".pager-range")).toHaveText("26–50 of 60");
-    await pager(page, "Leases").getByRole("button", { name: "Next" }).click();
-    await pager(page, "Leases").getByRole("button", { name: "Next" }).click();
-    await expect(pager(page, "Leases").locator(".pager-range")).toHaveText("51–60 of 60");
+    await pager(page, "Devices").getByRole("button", { name: "Next" }).click();
+    await expect(pager(page, "Devices").locator(".pager-range")).toHaveText("51–60 of 60");
 
-    // Each table moved on its own, and the URL holds both pages.
-    expect(await firstColumn(devicesTable)).toEqual(ids(26, 50, "dev"));
-    expect(await firstColumn(leasesTable)).toEqual(ids(51, 60));
-    expect(new URL(page.url()).searchParams.toString()).toBe("devices-page=2&leases-page=3");
+    expect(await deviceIds()).toEqual(ids(51, 60, "dev"));
+    expect(await rowIds(pane(page, "Workers"), "/workers")).toEqual(ids(26, 30, "wrk"));
+    expect(Object.fromEntries(new URL(page.url()).searchParams)).toEqual({
+      "devices-page": "3",
+      page: "2",
+    });
 
     // A reload opens both where they were.
     await page.reload();
-    await expect(pager(page, "Devices").locator(".pager-range")).toHaveText("26–50 of 60");
-    await expect(pager(page, "Leases").locator(".pager-range")).toHaveText("51–60 of 60");
+    await expect(pager(page, "Workers").locator(".pager-range")).toHaveText("26–30 of 30");
+    await expect(pager(page, "Devices").locator(".pager-range")).toHaveText("51–60 of 60");
   });
 
-  test("the worker cards page at 24", async ({ daemon, page }) => {
+  test("the worker list pages at 25 like the others and keeps a new size in the URL", async ({
+    daemon,
+    page,
+  }) => {
     const listed = (await read(daemon, "/v1/workers")) as { workers: Record<string, unknown>[] };
     const host = listed.workers[0] ?? {};
-    let count = 30;
     const workers = Array.from({ length: 30 }, (_, index) => ({
       ...host,
       id: `wrk_${pad(index + 1)}`,
       label: `worker-${pad(index + 1)}`,
     }));
-    await answer(page, "/v1/workers", () => ({ workers: workers.slice(0, count) }));
+    await answer(page, "/v1/workers", () => ({ workers }));
     await open(page, daemon, "/workers");
-    const cards = page.getByRole("region", { name: "All workers" }).locator("li.card");
-    const titles = () => cards.locator(".card-title").allTextContents();
-    const labels = (from: number, to: number) =>
-      ids(from, to, "worker").map((id) => id.replace("_", "-"));
-
-    expect(await titles()).toEqual(labels(1, 24));
-    await expect(pager(page, "All workers").locator(".pager-range")).toHaveText("1–24 of 30");
-    await pager(page, "All workers").getByRole("button", { name: "Next" }).click();
-    await expect(pager(page, "All workers").locator(".pager-range")).toHaveText("25–30 of 30");
-    expect(await titles()).toEqual(labels(25, 30));
-    // The cards' sizes are 24, 48 and 96; a new size keeps the first card shown in view.
-    await expect(pager(page, "All workers").getByLabel("Per page").locator("option")).toHaveText([
-      "24",
-      "48",
-      "96",
+    const rows = pane(page, "Workers").getByRole("list", { name: "Workers" });
+    const range = pager(page, "Workers").locator(".pager-range");
+
+    expect(await rowIds(rows, "/workers")).toEqual(ids(1, 25, "wrk"));
+    await expect(range).toHaveText("1–25 of 30");
+    await pager(page, "Workers").getByRole("button", { name: "Next" }).click();
+    await expect(range).toHaveText("26–30 of 30");
+    expect(await rowIds(rows, "/workers")).toEqual(ids(26, 30, "wrk"));
+    await expect(pager(page, "Workers").getByLabel("Per page").locator("option")).toHaveText([
+      "25",
+      "50",
+      "100",
     ]);
-    await pager(page, "All workers").getByLabel("Per page").selectOption("48");
-    await expect(page).toHaveURL(/\/workers\?size=48$/);
-    expect(await titles()).toEqual(labels(1, 30));
-
-    // Busiest workers ranks five, and links to the cards for the rest.
-    const busiest = page.getByRole("region", { name: "Busiest workers" });
-    await expect(busiest.locator("tbody tr")).toHaveCount(5);
-    await busiest.getByRole("link", { name: "All 30 workers" }).click();
-    await expect(page).toHaveURL(/#all-workers$/);
-    // With five workers there is no rest to link to.
-    count = 5;
-    await expect(busiest.locator("tbody tr")).toHaveCount(5);
-    await expect(busiest.getByRole("link")).toHaveCount(0);
+    await pager(page, "Workers").getByLabel("Per page").selectOption("50");
+    await expect(page).toHaveURL(/\/workers\?size=50$/);
+    expect(await rowIds(rows, "/workers")).toEqual(ids(1, 30, "wrk"));
+    await expect(pager(page, "Workers")).toHaveCount(0);
   });
 });
 
@@ -416,11 +422,16 @@ function feed(page: Page): Locator {
   return page.getByRole("region", { name: "Event feed" });
 }
 
-/** The number on the Events shown card. */
-async function eventsShown(page: Page): Promise<number> {
-  return Number(await page.locator(".stat-value").first().textContent());
+// why: the feed draws only the rows in view and prints no count, so its scroll height, one row
+// tall per event, is the only measure of how many events it holds.
+const ROW_PX = 60;
+
+async function eventsHeld(page: Page): Promise<number> {
+  return Math.round((await feed(page).evaluate((box) => box.scrollHeight)) / ROW_PX);
 }
 
+const NUMBER = /evt_load_(\d+)/;
+
 /** Scrolls the feed down past its first 2,000 pixels with the mouse wheel, as a reader would. */
 async function scrollDown(page: Page): Promise<void> {
   const scrolled = () => feed(page).evaluate((box) => box.scrollTop);
@@ -444,20 +455,20 @@ async function scrollDown(page: Page): Promise<void> {
     .toBe(true);
 }
 
-/** The feed's first row in view, by its payload's `n`, and its top against the box's top. */
 async function firstInView(page: Page): Promise<{ n: string; top: number }> {
-  return feed(page).evaluate((box) => {
+  return feed(page).evaluate((box, pattern) => {
     const edge = box.getBoundingClientRect().top;
-    const rows = [...box.querySelectorAll<HTMLElement>("li.event")]
+    const rows = [...box.querySelectorAll<HTMLElement>("li")]
       .map((row) => ({ row, top: row.getBoundingClientRect().top - edge }))
       .filter(({ row, top }) => top + row.getBoundingClientRect().height > 0)
       .sort((a, b) => a.top - b.top);
     const first = rows[0];
+    const href = first?.row.querySelector("a")?.getAttribute("href") ?? "";
     return {
-      n: first?.row.querySelector("dd")?.textContent ?? "",
+      n: new RegExp(pattern).exec(decodeURIComponent(href))?.[1] ?? "",
       top: Math.round(first?.top ?? Number.NaN),
     };
-  });
+  }, NUMBER.source);
 }
 
 test.describe("the events feed", () => {
@@ -468,18 +479,19 @@ test.describe("the events feed", () => {
     const replay = events(10_000);
     await answer(page, "/v1/events", () => ({ events: replay }));
     await open(page, daemon, "/events");
-    await expect.poll(() => eventsShown(page)).toBe(10_000);
+    await expect.poll(() => eventsHeld(page)).toBe(10_000);
 
-    const rows = feed(page).locator("li.event");
+    const rows = feed(page).getByRole("listitem");
     expect(await rows.count()).toBeGreaterThan(0);
     expect(await rows.count()).toBeLessThan(100);
+    expect((await firstInView(page)).n).toBe("10000");
     // Halfway down, the rows there are drawn in place of the first ones, and no more of them.
     await feed(page).evaluate((box) => {
       box.scrollTop = box.scrollHeight / 2;
     });
-    await expect(rows.first()).not.toHaveAttribute("aria-posinset", "1");
+    await expect.poll(async () => Number((await firstInView(page)).n)).toBeGreaterThan(4_000);
+    expect(Number((await firstInView(page)).n)).toBeLessThan(6_000);
     expect(await rows.count()).toBeLessThan(100);
-    await expect(rows.first()).toHaveAttribute("aria-setsize", "10000");
   });
 
   test("a new event while scrolled down keeps the visible rows in place and counts in the new-events button", async ({
@@ -496,7 +508,7 @@ test.describe("the events feed", () => {
       const replay = events(1_000);
       await answer(page, "/v1/events", () => ({ events: replay }));
       await open(page, host, "/events");
-      await expect.poll(() => eventsShown(page)).toBe(1_000);
+      await expect.poll(() => eventsHeld(page)).toBe(1_000);
 
       await scrollDown(page);
       const before = await firstInView(page);
@@ -504,7 +516,7 @@ test.describe("the events feed", () => {
 
       // Each renew is one lease.renewed, newer than every event in the list.
       await client.renewLease({ leaseId: grant.lease.id });
-      await expect.poll(() => eventsShown(page)).toBe(1_001);
+      await expect.poll(() => eventsHeld(page)).toBe(1_001);
       await expect(page.getByRole("button", { name: "1 new event" })).toBeVisible();
       expect(await firstInView(page)).toEqual(before);
 
@@ -529,7 +541,7 @@ test.describe("the events feed", () => {
       const replay = events(1_000);
       await answer(page, "/v1/events", () => ({ events: replay }));
       await open(page, host, "/events");
-      await expect.poll(() => eventsShown(page)).toBe(1_000);
+      await expect.poll(() => eventsHeld(page)).toBe(1_000);
       await scrollDown(page);
       await client.renewLease({ leaseId: grant.lease.id });
       const button = page.getByRole("button", { name: "1 new event" });
@@ -540,11 +552,11 @@ test.describe("the events feed", () => {
       await expect(button).toHaveCount(0);
       // The button is gone, so focus moves to the feed rather than dropping to the page.
       await expect(feed(page)).toBeFocused();
-      const top = feed(page).locator("li.event[aria-posinset='1']");
-      await expect(top.locator(".event-name")).toHaveText("lease.renewed");
+      const top = feed(page).getByRole("listitem").first();
+      await expect(top.locator("time + span")).toHaveText("lease.renewed");
       // At the top, the next event shows at the top with no count.
       await client.renewLease({ leaseId: grant.lease.id });
-      await expect.poll(() => eventsShown(page)).toBe(1_002);
+      await expect.poll(() => eventsHeld(page)).toBe(1_002);
       await expect(page.getByRole("button", { name: /new event/ })).toHaveCount(0);
       expect(await feed(page).evaluate((box) => box.scrollTop)).toBe(0);
       const newest = (await recentEvents(host)).at(-1);
@@ -568,14 +580,14 @@ test.describe("the events feed", () => {
     const replay = events(1_000);
     await answer(page, "/v1/events", () => ({ events: replay }));
     await open(page, daemon, "/events");
-    await expect.poll(() => eventsShown(page)).toBe(1_000);
+    await expect.poll(() => eventsHeld(page)).toBe(1_000);
     await scrollDown(page);
 
     // Every generated event is under Other: the same list, shown again from its top.
     await page.getByRole("radio", { name: "Other" }).check();
 
     await expect.poll(() => feed(page).evaluate((box) => box.scrollTop)).toBe(0);
-    await expect(feed(page).locator("li.event").first()).toHaveAttribute("aria-posinset", "1");
+    expect((await firstInView(page)).n).toBe("1000");
   });
 });
 
@@ -640,12 +652,12 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     await page.keyboard.press(tab);
     await page.keyboard.type(host.tokens.operator);
     await page.keyboard.press("Enter");
-    await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
     await tabTo(page, page.getByRole("link", { name: "Leases", exact: true }), tab);
     await page.keyboard.press("Enter");
     await expect(page.getByRole("heading", { level: 1, name: "Leases" })).toBeVisible();
 
-    const nav = pager(page, "All leases");
+    const nav = pager(page, "Leases");
     const range = nav.locator(".pager-range");
     await expect(range).toHaveText("1–25 of 300");
     await tabTo(page, nav.getByRole("button", { name: "Next" }), tab);
@@ -675,14 +687,13 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     await page.keyboard.press("5");
     await expect(range).toHaveText("251–300 of 300");
 
-    // Back up into the table, to the last lease shown, and open it.
     await page.keyboard.press(back);
-    const last = page.getByRole("region", { name: "All leases" }).locator("tbody tr").last();
-    const link = last.getByRole("link");
+    const link = leaseRows(page).getByRole("link").last();
     await expect(link).toBeFocused();
-    const id = await link.textContent();
+    const href = await link.getAttribute("href");
+    expect(href).toMatch(/^\/leases\/lse_[^/]+\/$/);
     await page.keyboard.press("Enter");
-    await expect(page.getByRole("heading", { level: 1, name: id ?? "" })).toBeVisible();
+    await expect(page).toHaveURL(new RegExp(`${href}$`));
   });
 
   test("the events feed scrolls through 5,000 events smoothly and the newest stays first", async ({
@@ -692,8 +703,8 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
   }) => {
     const { host } = seeded;
     await open(page, host, "/events");
-    await expect.poll(() => eventsShown(page)).toBeGreaterThanOrEqual(EVENTS);
-    const held = await eventsShown(page);
+    await expect.poll(() => eventsHeld(page)).toBeGreaterThanOrEqual(EVENTS);
+    const held = await eventsHeld(page);
 
     // Down to the oldest, two boxes at a time, one step a frame, as a fast fling would.
     const run = await feed(page).evaluate(async (box) => {
@@ -708,7 +719,7 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
         const now = await frame();
         gaps.push(now - last);
         last = now;
-        const rows = box.querySelectorAll("li.event");
+        const rows = box.querySelectorAll("li");
         most = Math.max(most, rows.length);
         const edge = box.getBoundingClientRect();
         const covered = [...rows].some((row) => {
@@ -718,10 +729,10 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
         if (!covered) blank += 1;
       }
       const sorted = [...gaps].sort((a, b) => a - b);
-      const lastRow = [...box.querySelectorAll("li.event")].at(-1);
+      const lastRow = [...box.querySelectorAll("li")].at(-1);
       return {
         blank,
-        end: lastRow?.getAttribute("aria-posinset") === lastRow?.getAttribute("aria-setsize"),
+        lastHref: lastRow?.querySelector("a")?.getAttribute("href") ?? "",
         median: sorted[Math.floor(sorted.length / 2)] ?? 0,
         most,
         p95: sorted[Math.floor(sorted.length * 0.95)] ?? 0,
@@ -730,7 +741,10 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
       };
     });
     console.log(`${browserName}: ${held} events, ${JSON.stringify(run)}`);
-    expect(run.end).toBe(true);
+    const oldest = (await recentEvents(host)).reduce((a, b) =>
+      b.timestamp < a.timestamp || (b.timestamp === a.timestamp && b.seq < a.seq) ? b : a,
+    );
+    expect(run.lastHref).toBe(`/events/${encodeURIComponent(oldest.id)}`);
     expect(run.blank).toBe(0);
     expect(run.most).toBeLessThan(100);
     expect(run.p95).toBeLessThan(50);
@@ -746,12 +760,12 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     const newest = events.reduce((a, b) =>
       b.timestamp > a.timestamp || (b.timestamp === a.timestamp && b.seq > a.seq) ? b : a,
     );
-    const first = feed(page).locator("li.event[aria-posinset='1']");
+    const first = feed(page).getByRole("listitem").first();
     await expect(first.locator("time")).toHaveAttribute(
       "datetime",
       new Date(newest.timestamp).toISOString(),
     );
-    await expect(first.locator(".event-name")).toHaveText(newest.event);
+    await expect(first.locator("time + span")).toHaveText(newest.event);
   });
 
   /** Every page, with a pager in view where the page has one, and the feed scrolled. */
@@ -759,16 +773,16 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     const leaseList = (await read(seeded.host, "/v1/leases")) as { leases: { id: string }[] };
     const lease = leaseList.leases[0]?.id ?? "";
     for (const path of [
-      ...NAV_LABELS.map((label) => `/${label.toLowerCase()}`),
+      ...NAV.map((entry) => entry.path),
       "/leases?page=12",
-      `/workers/${encodeURIComponent(seeded.worker)}?devices-page=2&leases-page=3`,
+      `/workers/${encodeURIComponent(seeded.worker)}?devices-page=2`,
       `/leases/${encodeURIComponent(lease)}/`,
     ]) {
       await page.goto(new URL(path, seeded.host.url).href);
-      await expect(page.locator("#main h1")).toBeVisible();
+      await expect(page.locator("#main").getByRole("heading").first()).toBeVisible();
       await expect(page.locator("#main")).not.toContainText("Loading…");
       if (path === "/events") {
-        await expect.poll(() => eventsShown(page)).toBeGreaterThanOrEqual(EVENTS);
+        await expect.poll(() => eventsHeld(page)).toBeGreaterThanOrEqual(EVENTS);
         await feed(page).evaluate((box) => {
           box.scrollTop = box.scrollHeight / 3;
         });
@@ -776,6 +790,7 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
       if (path.startsWith("/leases?") || path.startsWith("/workers/")) {
         await expect(page.locator(".pager").first()).toBeVisible();
       }
+      await settled(page);
       await visit(path);
     }
   }
@@ -790,7 +805,7 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     });
     await page.goto(seeded.host.url);
     await signIn(page, seeded.host.tokens.operator);
-    await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 
     await everyPage(page, seeded, async (path) => {
       const found = await page.evaluate(() => ({
@@ -805,7 +820,7 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     await page.setViewportSize({ height: 740, width: 360 });
     await page.goto(seeded.host.url);
     await signIn(page, seeded.host.tokens.operator);
-    await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 
     await everyPage(page, seeded, async (path) => {
       expect(await hasHorizontalScroll(page), path).toBe(false);
@@ -820,7 +835,7 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
       await page.emulateMedia({ colorScheme });
       await page.goto(seeded.host.url);
       await signIn(page, seeded.host.tokens.operator);
-      await expect(page.getByRole("heading", { level: 1, name: "Workers" })).toBeVisible();
+      await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible();
 
       await everyPage(page, seeded, async (path) => {
         const results = await new AxeBuilder({ page })

From 1d07628c175d6235079bd43e2c6e450c2929eaa3 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:45:20 +0200
Subject: [PATCH 21/32] fix(ui): the warn colour reads on a selected list row
 in the light theme

---
 ui/src/ds/foundation.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/ds/foundation.css b/ui/src/ds/foundation.css
index 37634d231..8e64d901b 100644
--- a/ui/src/ds/foundation.css
+++ b/ui/src/ds/foundation.css
@@ -44,7 +44,7 @@
   --selection: #fed7aa;
 
   --status-ok: #15803d;
-  --status-warn: #a16207;
+  --status-warn: #92570a;
   --status-error: #b91c1c;
   --status-idle: #57534e;
 }

From 80db7fb1eea00ec40cfa18898f05b3888a216a41 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:48:54 +0200
Subject: [PATCH 22/32] test(ui): the shared view specs wait for any heading
 and skip disabled controls

---
 e2e/console/views.spec.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/e2e/console/views.spec.ts b/e2e/console/views.spec.ts
index a9d775c75..ad26bd5d0 100644
--- a/e2e/console/views.spec.ts
+++ b/e2e/console/views.spec.ts
@@ -62,7 +62,7 @@ async function openSignedIn(page: Page, host: RunningDaemon): Promise<void> {
 
 async function visit(page: Page, host: RunningDaemon, path: string): Promise<void> {
   await page.goto(new URL(path, host.url).toString());
-  await expect(page.locator("#main h1")).toBeVisible();
+  await expect(page.locator("#main").getByRole("heading").first()).toBeVisible();
   await expect(page.locator("#main")).not.toContainText("Loading…");
   await settled(page);
 }
@@ -101,12 +101,14 @@ test.describe("every view", () => {
       for (const path of every(pages)) {
         await visit(page, host, path);
         // why: a radio group is one stop, at its checked radio, and nothing inside a closed
-        // disclosure is a stop, so those are left out of the order Tab should follow.
+        // disclosure is a stop, so those are left out of the order Tab should follow; neither is
+        // a disabled control.
         const stops = await page.evaluate(() => {
           const candidates = document.querySelectorAll<HTMLElement>(
             "#main a[href], #main button, #main input, #main summary, #main [tabindex]:not([tabindex='-1'])",
           );
           const kept = [...candidates].filter((element) => {
+            if (element.matches(":disabled")) return false;
             if (element instanceof HTMLInputElement && element.type === "radio") {
               return element.checked;
             }
@@ -177,8 +179,12 @@ test.describe("every view", () => {
             };
           });
 
+        // why: a click on text inside the page focuses `main` (its skip-link target), so Tab
+        // starts from the top of the page and reaches the chart after the controls above it.
         await heading.click();
-        await page.keyboard.press(tab);
+        for (let step = 0; step < 20 && !(await focused()).inChart; step += 1) {
+          await page.keyboard.press(tab);
+        }
         expect(await focused(), `${path} tabbed`).toEqual({ inChart: true, own: "none" });
         expect(await ring(), `${path} tabbed`).toBe("solid");
         await page.keyboard.press("ArrowLeft");

From 419adaed3867bef37c9752e24205556dab50fceb Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:52:01 +0200
Subject: [PATCH 23/32] fix(ui): opening an item keeps its list on the page it
 was on, on every list page

---
 docs/internal/DESIGN.md          |  2 +-
 ui/src/model/paging.ts           | 13 +++++++++++++
 ui/src/model/worker-page.test.ts |  2 +-
 ui/src/model/worker-page.ts      | 13 -------------
 ui/src/state/attention.ts        | 10 +++++++---
 ui/src/state/leases.ts           |  9 ++++++---
 ui/src/state/waiting.ts          |  9 ++++++---
 ui/src/state/workers.ts          |  3 +--
 8 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index 329aed81d..bad0b6069 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -81,7 +81,7 @@ think "this is Simlock" or "I can act here", nothing else.
 | Token | Light | Dark | Means |
 | --- | --- | --- | --- |
 | `--status-ok` | `#15803d` | `#4ade80` | healthy, connected, ready |
-| `--status-warn` | `#a16207` | `#facc15` | needs a look soon: drained, stalled, over a limit, absent (a physical device that is enrolled and not there) |
+| `--status-warn` | `#92570a` | `#facc15` | needs a look soon: drained, stalled, over a limit, absent (a physical device that is enrolled and not there) |
 | `--status-error` | `#b91c1c` | `#f87171` | broken: disconnected, incompatible, quarantined, a refused sign-in |
 | `--status-idle` | `#57534e` | `#a8a29e` | neither: shut down, waiting, unknown |
 
diff --git a/ui/src/model/paging.ts b/ui/src/model/paging.ts
index 2ded27ecc..903933bac 100644
--- a/ui/src/model/paging.ts
+++ b/ui/src/model/paging.ts
@@ -63,3 +63,16 @@ export function rangeOf(at: PageAt, total: number): string {
   const last = Math.min(total, at.page * at.size);
   return `${formatCount(first)}–${formatCount(last)} of ${formatCount(total)}`;
 }
+
+// why: choosing a row must not throw the list back to its first page, but the inspector's own
+// pagers (devices, warm pool) belong to one worker and are left behind.
+export function listSearch(search: string): string {
+  const query = new URLSearchParams(search);
+  const kept = new URLSearchParams();
+  for (const key of ["page", "size"]) {
+    const value = query.get(key);
+    if (value !== null) kept.set(key, value);
+  }
+  const written = kept.toString();
+  return written === "" ? "" : `?${written}`;
+}
diff --git a/ui/src/model/worker-page.test.ts b/ui/src/model/worker-page.test.ts
index d10ddb64a..fb39d0327 100644
--- a/ui/src/model/worker-page.test.ts
+++ b/ui/src/model/worker-page.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 
+import { listSearch } from "./paging";
 import {
   filterWorkers,
-  listSearch,
   upMeta,
   type WorkerInspector,
   workerInspectorOf,
diff --git a/ui/src/model/worker-page.ts b/ui/src/model/worker-page.ts
index a4c0e362a..bc2832ae1 100644
--- a/ui/src/model/worker-page.ts
+++ b/ui/src/model/worker-page.ts
@@ -91,19 +91,6 @@ export function upMeta(workers: readonly WorkerView[]): string {
   return `${up} / ${workers.length} up`;
 }
 
-// why: choosing a row must not throw the list back to its first page, but the inspector's own
-// pagers (devices, warm pool) belong to one worker and are left behind.
-export function listSearch(search: string): string {
-  const query = new URLSearchParams(search);
-  const kept = new URLSearchParams();
-  for (const key of ["page", "size"]) {
-    const value = query.get(key);
-    if (value !== null) kept.set(key, value);
-  }
-  const written = kept.toString();
-  return written === "" ? "" : `?${written}`;
-}
-
 export type MeterTone = Tone | "neutral";
 
 export interface LoadDetail {
diff --git a/ui/src/state/attention.ts b/ui/src/state/attention.ts
index 00dffaa50..793939f62 100644
--- a/ui/src/state/attention.ts
+++ b/ui/src/state/attention.ts
@@ -1,14 +1,14 @@
 import type { LoadView } from "../ds/loaded";
 import type { Paging } from "../ds/pager";
 import { type AttentionPage, attentionPageOf, type AttentionRow } from "../model/attention";
-import { TABLE_SIZES } from "../model/paging";
+import { listSearch, TABLE_SIZES } from "../model/paging";
 import { itemIdFrom } from "../model/paths";
 import type { WorkerList } from "../model/workers";
 import { useRecentEvents } from "./events";
 import { useLiveResource, useNow } from "./live";
 import { usePaging } from "./paging";
 import { bothViews, loadView, mapView } from "./resource";
-import { usePath } from "./router";
+import { usePath, useSearch } from "./router";
 
 export type {
   AttentionDetail,
@@ -39,6 +39,10 @@ export function useAttentionRows(rows: readonly AttentionRow[]): {
   readonly paging: Paging;
 } {
   const paging = usePaging({ sizes: TABLE_SIZES, total: rows.length });
+  const keep = listSearch(useSearch());
   const start = (paging.page - 1) * paging.size;
-  return { paging, shown: rows.slice(start, start + paging.size) };
+  return {
+    paging,
+    shown: rows.slice(start, start + paging.size).map((row) => ({ ...row, to: row.to + keep })),
+  };
 }
diff --git a/ui/src/state/leases.ts b/ui/src/state/leases.ts
index 589dc4f19..a22839bb9 100644
--- a/ui/src/state/leases.ts
+++ b/ui/src/state/leases.ts
@@ -14,13 +14,13 @@ import {
   leaseRows,
   type TokenList,
 } from "../model/leases";
-import { TABLE_SIZES } from "../model/paging";
+import { listSearch, TABLE_SIZES } from "../model/paging";
 import { itemIdFrom } from "../model/paths";
 import type { WorkerList } from "../model/workers";
 import { useLiveResource, useNow } from "./live";
 import { usePaging } from "./paging";
 import { loadView, mapView } from "./resource";
-import { usePath } from "./router";
+import { usePath, useSearch } from "./router";
 
 export {
   LEASE_FILTERS,
@@ -65,7 +65,10 @@ export function useLeases(): Leases {
     total: all.kind === "ready" ? shown.length : undefined,
   });
   const start = (paging.page - 1) * paging.size;
-  const rows = shown.slice(start, start + paging.size);
+  const keep = listSearch(useSearch());
+  const rows = shown
+    .slice(start, start + paging.size)
+    .map((row) => ({ ...row, to: row.to + keep }));
   const view = mapView(all, (every) => ({
     chosen: urlId ?? rows[0]?.id,
     held: every.length,
diff --git a/ui/src/state/waiting.ts b/ui/src/state/waiting.ts
index 2dbecd254..ff6c719d8 100644
--- a/ui/src/state/waiting.ts
+++ b/ui/src/state/waiting.ts
@@ -1,6 +1,6 @@
 import type { LoadView } from "../ds/loaded";
 import type { Paging } from "../ds/pager";
-import { TABLE_SIZES } from "../model/paging";
+import { listSearch, TABLE_SIZES } from "../model/paging";
 import { itemIdFrom } from "../model/paths";
 import {
   chooseWaiting,
@@ -13,7 +13,7 @@ import type { WorkerList } from "../model/workers";
 import { useLiveResource, useNow } from "./live";
 import { usePaging } from "./paging";
 import { loadView, mapView } from "./resource";
-import { usePath } from "./router";
+import { usePath, useSearch } from "./router";
 
 export type { WaitingQueue, WaitingRow } from "../model/waiting";
 
@@ -30,13 +30,16 @@ export function useWaiting(): LoadView<WaitingPage> {
   const workers = useLiveResource<WorkerList>("/v1/workers").data?.workers ?? [];
   const now = useNow();
   const id = itemIdFrom("/waiting", usePath());
+  const keep = listSearch(useSearch());
   const table = mapView(requests, (list) => waitingTable(list.requests, workers, now.server));
   const paging = usePaging({
     sizes: TABLE_SIZES,
     total: table.kind === "ready" ? table.data.rows.length : undefined,
   });
   return mapView(table, (all) => {
-    const rows = all.rows.slice((paging.page - 1) * paging.size, paging.page * paging.size);
+    const rows = all.rows
+      .slice((paging.page - 1) * paging.size, paging.page * paging.size)
+      .map((row) => ({ ...row, to: row.to + keep }));
     return {
       ...chooseWaiting(all.rows, id, rows),
       count: all.rows.length,
diff --git a/ui/src/state/workers.ts b/ui/src/state/workers.ts
index 37061c15c..a15dbd718 100644
--- a/ui/src/state/workers.ts
+++ b/ui/src/state/workers.ts
@@ -3,11 +3,10 @@ import { useState } from "react";
 import type { LoadView } from "../ds/loaded";
 import type { Paging } from "../ds/pager";
 import type { TokenList } from "../model/leases";
-import { TABLE_SIZES } from "../model/paging";
+import { listSearch, TABLE_SIZES } from "../model/paging";
 import { itemIdFrom } from "../model/paths";
 import {
   filterWorkers,
-  listSearch,
   upMeta,
   type WorkerFilter,
   type WorkerInspector,

From 6009edf0b592bf5d2ced3a2be67d8ef9006fee98 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 21:55:01 +0200
Subject: [PATCH 24/32] test(ui): a list row's link carries the list's page,
 and the opened item stays marked on it

---
 e2e/console/long-lists.spec.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/e2e/console/long-lists.spec.ts b/e2e/console/long-lists.spec.ts
index 466f7d555..6688107cb 100644
--- a/e2e/console/long-lists.spec.ts
+++ b/e2e/console/long-lists.spec.ts
@@ -290,7 +290,7 @@ test.describe("long lists page", () => {
     const row = leaseRows(page).getByRole("listitem").nth(2);
     const link = row.getByRole("link");
     const expires = row.locator(".list-aside");
-    await expect(link).toHaveAttribute("href", "/leases/lse_0028/");
+    await expect(link).toHaveAttribute("href", "/leases/lse_0028/?page=2");
     await link.focus();
     await expect(link).toBeFocused();
     // The element itself is marked: a link drawn again in its place would not carry the mark.
@@ -312,7 +312,11 @@ test.describe("long lists page", () => {
     );
     expect(await rowIds(leaseRows(page), "/leases")).toEqual(ids(26, 50));
     await page.keyboard.press("Enter");
-    await expect(page).toHaveURL(/\/leases\/lse_0028\/$/);
+    await expect(page).toHaveURL(/\/leases\/lse_0028\/\?page=2$/);
+    await expect(leaseRows(page).locator('a[href^="/leases/lse_0028/"]')).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
   });
 
   test("the pager is hidden when every row fits on one page", async ({ daemon, page }) => {
@@ -691,9 +695,9 @@ test.describe("a single host with 300 leases and 5,000 events", () => {
     const link = leaseRows(page).getByRole("link").last();
     await expect(link).toBeFocused();
     const href = await link.getAttribute("href");
-    expect(href).toMatch(/^\/leases\/lse_[^/]+\/$/);
+    expect(href).toMatch(/^\/leases\/lse_[^/]+\/\?page=6&size=50$/);
     await page.keyboard.press("Enter");
-    await expect(page).toHaveURL(new RegExp(`${href}$`));
+    await expect(page).toHaveURL((url) => `${url.pathname}${url.search}` === href);
   });
 
   test("the events feed scrolls through 5,000 events smoothly and the newest stays first", async ({

From 4e2078c7135d579e00c52d21139410528752ea5c Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 22:05:01 +0200
Subject: [PATCH 25/32] fix(ui): a worker's device links to its lease's page on
 a gateway, and pages share one empty state and even panels

---
 ui/src/ds/choice.css             |  2 +-
 ui/src/ds/facts.css              |  9 ++++++++-
 ui/src/ds/panel.css              |  2 +-
 ui/src/ds/stat.css               |  2 +-
 ui/src/model/worker-page.test.ts | 11 +++++++++++
 ui/src/model/worker-page.ts      | 21 +++++++++++++++++++--
 ui/src/screens/events/index.tsx  |  2 +-
 ui/src/screens/waiting/index.tsx |  6 +++++-
 ui/src/screens/workers/index.tsx |  2 +-
 ui/src/state/workers.ts          |  7 +++++--
 10 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/ui/src/ds/choice.css b/ui/src/ds/choice.css
index 139f73a96..19f425377 100644
--- a/ui/src/ds/choice.css
+++ b/ui/src/ds/choice.css
@@ -30,7 +30,7 @@
   display: inline-flex;
   align-items: center;
   height: 28px;
-  padding: 0 var(--space-3);
+  padding: 0 var(--space-2);
   border: 1px solid var(--border);
   color: var(--text-muted);
   font-family: var(--font-mono);
diff --git a/ui/src/ds/facts.css b/ui/src/ds/facts.css
index 2bb72f998..3076f3e37 100644
--- a/ui/src/ds/facts.css
+++ b/ui/src/ds/facts.css
@@ -9,7 +9,7 @@
 
 .facts > div {
   display: grid;
-  grid-template-columns: 9rem minmax(0, 1fr);
+  grid-template-columns: 12rem minmax(0, 1fr);
   gap: var(--space-4);
   align-items: baseline;
 }
@@ -39,3 +39,10 @@
 .facts-raw dd {
   font-family: var(--font-mono);
 }
+
+@media (max-width: 480px) {
+  .facts > div {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-1);
+  }
+}
diff --git a/ui/src/ds/panel.css b/ui/src/ds/panel.css
index 6e67f4227..29b369194 100644
--- a/ui/src/ds/panel.css
+++ b/ui/src/ds/panel.css
@@ -67,7 +67,7 @@
 .row {
   display: grid;
   gap: var(--space-3);
-  align-items: start;
+  align-items: stretch;
 }
 
 @media (min-width: 1024px) {
diff --git a/ui/src/ds/stat.css b/ui/src/ds/stat.css
index f59475868..e3303f091 100644
--- a/ui/src/ds/stat.css
+++ b/ui/src/ds/stat.css
@@ -2,7 +2,7 @@
 
 .stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: var(--space-3);
   margin: 0;
   padding: 0;
diff --git a/ui/src/model/worker-page.test.ts b/ui/src/model/worker-page.test.ts
index fb39d0327..db493248e 100644
--- a/ui/src/model/worker-page.test.ts
+++ b/ui/src/model/worker-page.test.ts
@@ -368,6 +368,17 @@ describe("a worker's device rows", () => {
     });
   });
 
+  it("links a holder to the lease's page under the id the daemon lists it by, a gateway's worker-qualified one included", () => {
+    const view = worker({ devices: [device({ state: "leased" })], leases: [LEASE] });
+    const holderOn = (leaseIds: readonly string[]) =>
+      workerInspectorOf({ leaseIds, now: NOW, tokens: [], worker: view }).overview.devices?.[0]
+        ?.holder?.to;
+
+    expect(holderOn([`${view.id}.l_1`])).toBe(`/leases/${encodeURIComponent(`${view.id}.l_1`)}/`);
+    expect(holderOn(["l_1"])).toBe("/leases/l_1/");
+    expect(holderOn([])).toBe("/leases/l_1/");
+  });
+
   it("names a holder by its id where no token has it", () => {
     const view = worker({ devices: [device({ state: "leased" })], leases: [LEASE] });
 
diff --git a/ui/src/model/worker-page.ts b/ui/src/model/worker-page.ts
index bc2832ae1..8fa381ae5 100644
--- a/ui/src/model/worker-page.ts
+++ b/ui/src/model/worker-page.ts
@@ -219,11 +219,20 @@ export interface DeviceRow {
   readonly imageTag?: string;
 }
 
+// why: a worker names a lease by its own id, but a gateway lists it, and opens its page, as
+// `<worker id>.<lease id>`; the worker's own id stands where the daemon lists it bare, as a single
+// host does.
+function leaseIdOnPage(worker: WorkerView, id: string, listed: ReadonlySet<string>): string {
+  const qualified = `${worker.id}.${id}`;
+  return listed.has(qualified) ? qualified : id;
+}
+
 function deviceRow(
   device: WorkerDevice,
   worker: WorkerView,
   now: number,
   tokens: readonly TokenRecord[],
+  leaseIds: ReadonlySet<string>,
 ): DeviceRow {
   const lease = worker.leases?.find((candidate) => candidate.deviceId === device.id);
   const entered = stateEnteredAt(device, worker);
@@ -243,7 +252,11 @@ function deviceRow(
       ? {}
       : {
           expires: formatDuration(lease.ttlDeadline - now),
-          holder: { id: holder.id, name: holder.label ?? holder.id, to: leasePath(lease.id) },
+          holder: {
+            id: holder.id,
+            name: holder.label ?? holder.id,
+            to: leasePath(leaseIdOnPage(worker, lease.id, leaseIds)),
+          },
           renewed: `${formatDuration(now - lease.lastRenewedAt)} ago`,
         }),
     ...(entered === undefined ? {} : { since: formatDuration(now - entered) }),
@@ -465,8 +478,10 @@ export function workerInspectorOf(input: {
   readonly worker: WorkerView;
   readonly now: number;
   readonly tokens: readonly TokenRecord[];
+  readonly leaseIds?: readonly string[];
 }): WorkerInspector {
   const { now, tokens, worker } = input;
+  const leaseIds = new Set(input.leaseIds ?? []);
   const starting = worker.health === "starting";
   const incompatible = worker.connection === "incompatible";
   const { host } = worker;
@@ -486,7 +501,9 @@ export function workerInspectorOf(input: {
         : { leases: { count: leases.length, running: worker.capacity?.global.running } }),
       ...(starting
         ? {}
-        : { devices: (worker.devices ?? []).map((d) => deviceRow(d, worker, now, tokens)) }),
+        : {
+            devices: (worker.devices ?? []).map((d) => deviceRow(d, worker, now, tokens, leaseIds)),
+          }),
     },
     tabs: [
       { label: "Overview", value: "overview" },
diff --git a/ui/src/screens/events/index.tsx b/ui/src/screens/events/index.tsx
index ed3afa75f..2bc55105e 100644
--- a/ui/src/screens/events/index.tsx
+++ b/ui/src/screens/events/index.tsx
@@ -156,7 +156,7 @@ function toneClass(tone: EventRow["tone"], base: string): string | undefined {
 
 function Chosen({ page }: { readonly page: EventsPage }) {
   const { chosen } = page;
-  if (chosen.kind === "none") return <InspectorEmpty>No events yet.</InspectorEmpty>;
+  if (chosen.kind === "none") return <InspectorEmpty>Nothing to show.</InspectorEmpty>;
   if (chosen.kind === "missing") {
     return (
       <InspectorEmpty>
diff --git a/ui/src/screens/waiting/index.tsx b/ui/src/screens/waiting/index.tsx
index fa09f579f..222f19697 100644
--- a/ui/src/screens/waiting/index.tsx
+++ b/ui/src/screens/waiting/index.tsx
@@ -72,7 +72,11 @@ function detailOf(chosen: WaitingRow | undefined, gone: boolean) {
       </InspectorEmpty>
     );
   }
-  return chosen === undefined ? null : <WaitingInspector key={chosen.key} row={chosen} />;
+  return chosen === undefined ? (
+    <InspectorEmpty>Nothing to show.</InspectorEmpty>
+  ) : (
+    <WaitingInspector key={chosen.key} row={chosen} />
+  );
 }
 
 function WaitingListRow({
diff --git a/ui/src/screens/workers/index.tsx b/ui/src/screens/workers/index.tsx
index 2fb7a3e0e..df0583958 100644
--- a/ui/src/screens/workers/index.tsx
+++ b/ui/src/screens/workers/index.tsx
@@ -122,7 +122,7 @@ function WorkerListRow({ row, selected }: { readonly row: WorkerRow; readonly se
 }
 
 function MissingWorker({ id }: { readonly id: string | undefined }) {
-  if (id === undefined) return <InspectorEmpty>No worker to show.</InspectorEmpty>;
+  if (id === undefined) return <InspectorEmpty>Nothing to show.</InspectorEmpty>;
   return (
     <InspectorEmpty>
       Worker not found. <Link to="/workers">All workers</Link>
diff --git a/ui/src/state/workers.ts b/ui/src/state/workers.ts
index a15dbd718..ad43eb8b7 100644
--- a/ui/src/state/workers.ts
+++ b/ui/src/state/workers.ts
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import type { LoadView } from "../ds/loaded";
 import type { Paging } from "../ds/pager";
-import type { TokenList } from "../model/leases";
+import type { LeaseList, TokenList } from "../model/leases";
 import { listSearch, TABLE_SIZES } from "../model/paging";
 import { itemIdFrom } from "../model/paths";
 import {
@@ -65,6 +65,9 @@ export function useWorkers(): LoadView<WorkersPage> {
   // why: the holders' labels come from the token records; while they have not arrived or were
   // refused, a holder shows its id alone and the devices still show.
   const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
+  const leaseIds = (useLiveResource<LeaseList>("/v1/leases").data?.leases ?? []).map(
+    (lease) => lease.id,
+  );
   const now = useNow();
   const search = useSearch();
   const named = itemIdFrom("/workers", usePath());
@@ -100,7 +103,7 @@ export function useWorkers(): LoadView<WorkersPage> {
         chosen === undefined
           ? undefined
           : {
-              ...workerInspectorOf({ now: now.server, tokens, worker: chosen }),
+              ...workerInspectorOf({ leaseIds, now: now.server, tokens, worker: chosen }),
               devicesPaging,
               warmPaging,
             },

From dc086f0d8181060a55bb222253fdfb7ee46b0649 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 22:11:07 +0200
Subject: [PATCH 26/32] test(ui): waiting for the console's motion to end
 counts an animation cut short as ended

---
 e2e/console/events.spec.ts  | 5 ++---
 e2e/console/waiting.spec.ts | 5 ++---
 ui/src/ds/facts.css         | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/e2e/console/events.spec.ts b/e2e/console/events.spec.ts
index 5d9f0e5e8..c1f2ad4ee 100644
--- a/e2e/console/events.spec.ts
+++ b/e2e/console/events.spec.ts
@@ -7,6 +7,7 @@ import {
   signIn,
   startDaemon,
   startFleet,
+  settled,
   test,
 } from "./fixtures.js";
 
@@ -106,9 +107,7 @@ async function openEvent(page: Page, id: string): Promise<void> {
 }
 
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
-  await page.evaluate(() =>
-    Promise.all(document.getAnimations().map((animation) => animation.finished)),
-  );
+  await settled(page);
   return page.evaluate(
     () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
   );
diff --git a/e2e/console/waiting.spec.ts b/e2e/console/waiting.spec.ts
index 0d41988f0..83d5e4ef1 100644
--- a/e2e/console/waiting.spec.ts
+++ b/e2e/console/waiting.spec.ts
@@ -1,7 +1,7 @@
 import type { Locator, Page } from "@playwright/test";
 
 import { waitFor } from "../helpers/wait.js";
-import { expect, type RunningDaemon, signIn, startDaemon, test } from "./fixtures.js";
+import { expect, type RunningDaemon, settled, signIn, startDaemon, test } from "./fixtures.js";
 
 /** What `GET /v1/lease-requests` answers, as far as these tests read. */
 interface WaitingRequest {
@@ -226,8 +226,7 @@ test.describe("the Waiting page", () => {
       expect(await hasHorizontalScroll(page)).toBe(false);
       await page.getByRole("list", { name: "Waiting requests" }).getByRole("link").click();
       await expect(page.getByRole("heading", { level: 2 })).toBeVisible();
-      // why: The inspector slides in from the right; the page is measured once it has settled.
-      await page.evaluate(() => Promise.all(document.getAnimations().map((a) => a.finished)));
+      await settled(page);
       expect(await hasHorizontalScroll(page)).toBe(false);
     } finally {
       await host.dispose();
diff --git a/ui/src/ds/facts.css b/ui/src/ds/facts.css
index 3076f3e37..8fa422f8a 100644
--- a/ui/src/ds/facts.css
+++ b/ui/src/ds/facts.css
@@ -9,7 +9,7 @@
 
 .facts > div {
   display: grid;
-  grid-template-columns: 12rem minmax(0, 1fr);
+  grid-template-columns: 9rem minmax(0, 1fr);
   gap: var(--space-4);
   align-items: baseline;
 }

From ddc0cb50cfa95b708b2bb9d07b1df8e70bbaa1f5 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 22:31:33 +0200
Subject: [PATCH 27/32] chore(ui): no export nothing imports

---
 ui/src/ds/index.ts        | 29 ++++++++++-------------------
 ui/src/model/events.ts    |  2 +-
 ui/src/model/fleet.ts     |  2 +-
 ui/src/model/leases.ts    | 12 ++++++------
 ui/src/model/paging.ts    |  2 --
 ui/src/model/waiting.ts   |  4 ++--
 ui/src/state/attention.ts |  1 -
 ui/src/state/leases.ts    |  1 -
 ui/src/state/overview.ts  |  1 -
 ui/src/state/workers.ts   |  4 ----
 10 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/ui/src/ds/index.ts b/ui/src/ds/index.ts
index 41d362929..9de99244d 100644
--- a/ui/src/ds/index.ts
+++ b/ui/src/ds/index.ts
@@ -1,28 +1,19 @@
 import "./foundation.css";
 
-export { Button, ButtonLink, type ButtonVariant } from "./button";
-export { MinuteChart, type MinuteCount, MinuteTable } from "./chart";
-export { type Choice, ChoiceChips, type Tab, Tabs } from "./choice";
+export { Button, ButtonLink } from "./button";
+export { MinuteChart, MinuteTable } from "./chart";
+export { ChoiceChips, Tabs } from "./choice";
 export { Feed } from "./feed";
-export { type Fact, Facts } from "./facts";
+export { Facts } from "./facts";
 export { Icon, type IconName } from "./icon";
-export { Link, type LinkProps, NavigationProvider } from "./link";
+export { Link, NavigationProvider } from "./link";
 export { Loaded, type LoadView, Refusal } from "./loaded";
-export {
-  type Crumb,
-  Inspector,
-  InspectorEmpty,
-  List,
-  ListPane,
-  ListRow,
-  type ListRowProps,
-  MasterDetail,
-} from "./master-detail";
+export { Inspector, InspectorEmpty, List, ListPane, ListRow, MasterDetail } from "./master-detail";
 export { Meter } from "./meter";
 export { Pager, type Paging } from "./pager";
 export { Card, Empty, Grid, Id, Panel, Row } from "./panel";
-export { AppFrame, type NavEntry, Page, Sidebar, Wordmark } from "./sidebar";
-export { type Share, ShareBar, type Slot, type SlotKind, SlotLegend, Slots } from "./slots";
-export { StatRow, StatTile, type StatTileProps } from "./stat";
-export { Status, StatusDot, type Tone } from "./status";
+export { AppFrame, Page, Sidebar, Wordmark } from "./sidebar";
+export { ShareBar, SlotLegend, Slots } from "./slots";
+export { StatRow, StatTile } from "./stat";
+export { Status, StatusDot } from "./status";
 export { type Column, DataTable } from "./table";
diff --git a/ui/src/model/events.ts b/ui/src/model/events.ts
index 2574c1130..193404eb7 100644
--- a/ui/src/model/events.ts
+++ b/ui/src/model/events.ts
@@ -39,7 +39,7 @@ export function readReplay(body: unknown): readonly ConsoleEvent[] {
 
 // why: identity is the `id` alone, so an event seen twice, by the stream and by the `since` window,
 // is shown once.
-export function keyOf(event: ConsoleEvent): string {
+function keyOf(event: ConsoleEvent): string {
   return event.id;
 }
 
diff --git a/ui/src/model/fleet.ts b/ui/src/model/fleet.ts
index 5d4716fdc..d6159e779 100644
--- a/ui/src/model/fleet.ts
+++ b/ui/src/model/fleet.ts
@@ -58,7 +58,7 @@ const SLOT_OF_STATE: Readonly<Partial<Record<string, SlotKind>>> = {
   reclaiming: "busy",
 };
 
-export function slotOf(device: WorkerDevice): DeviceSlot | undefined {
+function slotOf(device: WorkerDevice): DeviceSlot | undefined {
   const kind = SLOT_OF_STATE[device.state];
   if (kind === undefined) return undefined;
   return { kind, label: `${device.spec.model} ${device.spec.osVersion}, ${device.state}` };
diff --git a/ui/src/model/leases.ts b/ui/src/model/leases.ts
index adb70eeb7..a3b7837de 100644
--- a/ui/src/model/leases.ts
+++ b/ui/src/model/leases.ts
@@ -54,13 +54,13 @@ export function agentIdOf(requesterId: string): string {
 }
 
 // why: a holder's title is its token's label, or its id where no label names it.
-export function holderTitle(holder: Holder): string {
+function holderTitle(holder: Holder): string {
   return holder.label ?? holder.id;
 }
 
 // why: a single host names no worker on its leases, and every lease there is on its one worker, the
 // host itself.
-export function workerOfLease(
+function workerOfLease(
   lease: { readonly workerId?: string | undefined },
   workers: readonly WorkerView[],
 ): WorkerView | undefined {
@@ -78,7 +78,7 @@ export function leasesOnWorker(
 
 // why: `GET /v1/leases` promises no order, so the console sets its own from facts a lease keeps for
 // life, and a refresh moves no lease to another page.
-export function inGrantOrder(leases: readonly LeaseRecord[]): readonly LeaseRecord[] {
+function inGrantOrder(leases: readonly LeaseRecord[]): readonly LeaseRecord[] {
   return [...leases].sort(
     (a, b) =>
       a.grantedAt - b.grantedAt ||
@@ -92,14 +92,14 @@ function compare(a: string, b: string): number {
   return a < b ? -1 : 1;
 }
 
-export function deviceOfLease(
+function deviceOfLease(
   lease: LeaseRecord,
   workers: readonly WorkerView[],
 ): WorkerDevice | undefined {
   return workerOfLease(lease, workers)?.devices?.find((device) => device.id === lease.deviceId);
 }
 
-export function workerNameOfLease(
+function workerNameOfLease(
   lease: {
     readonly workerId?: string | undefined;
     readonly worker?: { readonly label?: string | undefined } | undefined;
@@ -130,7 +130,7 @@ export const LEASE_FILTERS: readonly { readonly value: LeaseFilter; readonly lab
 // inspector warn by the same rule.
 const EXPIRING_UNDER_MS = 15 * 60_000;
 
-export function isExpiring(deadline: number, now: number): boolean {
+function isExpiring(deadline: number, now: number): boolean {
   return deadline - now < EXPIRING_UNDER_MS;
 }
 
diff --git a/ui/src/model/paging.ts b/ui/src/model/paging.ts
index 903933bac..878030fe5 100644
--- a/ui/src/model/paging.ts
+++ b/ui/src/model/paging.ts
@@ -2,8 +2,6 @@ export type PageSizes = readonly [number, ...number[]];
 
 export const TABLE_SIZES: PageSizes = [25, 50, 100];
 
-export const CARD_SIZES: PageSizes = [24, 48, 96];
-
 export interface PageKeys {
   readonly page: string;
   readonly size: string;
diff --git a/ui/src/model/waiting.ts b/ui/src/model/waiting.ts
index f415302ce..fee499ebf 100644
--- a/ui/src/model/waiting.ts
+++ b/ui/src/model/waiting.ts
@@ -28,7 +28,7 @@ export function requestedDevice(spec: WaitingRequest["spec"]): string {
 // why: a single host names no worker on its requests, so the request is found in the host's view by
 // its id and requester. A gateway's own request never matches a worker's: its id comes from the
 // gateway, and a worker lists the copy the gateway sent it under the gateway's requester id.
-export function waitingOn(
+function waitingOn(
   request: WaitingRequest,
   workers: readonly WorkerView[],
 ): WorkerView | undefined {
@@ -85,7 +85,7 @@ function queueKey(request: WaitingRequest, workers: readonly WorkerView[]): stri
 }
 
 // why: UTC and ISO-shaped, so the same instant reads the same on every operator's machine.
-export function createdAtOf(timestamp: number): string {
+function createdAtOf(timestamp: number): string {
   return `${new Date(timestamp).toISOString().slice(0, 19).replace("T", " ")} UTC`;
 }
 
diff --git a/ui/src/state/attention.ts b/ui/src/state/attention.ts
index 793939f62..a24a736ea 100644
--- a/ui/src/state/attention.ts
+++ b/ui/src/state/attention.ts
@@ -13,7 +13,6 @@ import { usePath, useSearch } from "./router";
 export type {
   AttentionDetail,
   AttentionEvent,
-  AttentionFact,
   AttentionPage,
   AttentionRow,
 } from "../model/attention";
diff --git a/ui/src/state/leases.ts b/ui/src/state/leases.ts
index a22839bb9..2d044d0fd 100644
--- a/ui/src/state/leases.ts
+++ b/ui/src/state/leases.ts
@@ -28,7 +28,6 @@ export {
   type LeaseInspection,
   type LeaseRowView,
 } from "../model/leases";
-export type { Readout } from "../model/screen";
 
 export interface LeasesPage {
   readonly rows: readonly LeaseRowView[];
diff --git a/ui/src/state/overview.ts b/ui/src/state/overview.ts
index 89e3282a8..b251c8c4a 100644
--- a/ui/src/state/overview.ts
+++ b/ui/src/state/overview.ts
@@ -10,7 +10,6 @@ export type {
   Overview,
   OverviewActivity,
   OverviewItem,
-  OverviewTile,
   OverviewWorker,
   Gauge,
   PlatformUse,
diff --git a/ui/src/state/workers.ts b/ui/src/state/workers.ts
index ad43eb8b7..b60e3e616 100644
--- a/ui/src/state/workers.ts
+++ b/ui/src/state/workers.ts
@@ -22,15 +22,11 @@ import { usePath, useSearch } from "./router";
 
 export type {
   CapabilityRow,
-  CatalogRow,
   DeviceRow,
   FigureCard,
   InstallRow,
-  LoadDetail,
-  OverviewTab,
   PlatformCard,
   WarmRow,
-  WarmTab,
   WorkerFilter,
   WorkerInspector,
   WorkerRow,

From 2b665e3c78d55cae780ce5cc6913160553b9217e Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Fri, 16 Oct 2026 08:07:42 +0200
Subject: [PATCH 28/32] refactor(ui): split the functions over the complexity
 limits into named parts

---
 e2e/console/workers.spec.ts         |  78 ++++++++------
 ui/src/ds/feed.tsx                  |  50 +++++----
 ui/src/model/attention.ts           |  67 +++++++-----
 ui/src/model/defined.test.ts        |  12 +++
 ui/src/model/defined.ts             |   9 ++
 ui/src/model/fleet.ts               |  56 +++++-----
 ui/src/model/leases.ts              |  80 +++++++++-----
 ui/src/model/worker-page.ts         |  47 ++++----
 ui/src/screens/leases/inspector.tsx | 159 +++++++++++++++-------------
 ui/src/screens/sign-in.test.tsx     |  37 +++++++
 ui/src/state/screen.ts              |  86 +++++++++------
 ui/src/state/workers.ts             |  64 +++++------
 12 files changed, 461 insertions(+), 284 deletions(-)
 create mode 100644 ui/src/model/defined.test.ts
 create mode 100644 ui/src/model/defined.ts
 create mode 100644 ui/src/screens/sign-in.test.tsx

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index e971d218b..0e4ff2a40 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -299,6 +299,29 @@ async function expectSquareColours(
   }
 }
 
+function found<T>(value: T | undefined, what: string): T {
+  if (value === undefined) throw new Error(`${what} is missing`);
+  return value;
+}
+
+function runningOverLimit(view: WorkerView): string {
+  const ios = view.capacity?.ios ?? { limit: 0, running: 0 };
+  const android = view.capacity?.android ?? { limit: 0, running: 0 };
+  return `${ios.running + android.running} / ${ios.limit + android.limit}`;
+}
+
+async function incompatibleWorker(gateway: RunningDaemon, id: string): Promise<WorkerView> {
+  let view: WorkerView | undefined;
+  await waitFor(
+    async () => {
+      view = (await workerList(gateway)).find((candidate) => candidate.id === id);
+      return view?.connection === "incompatible";
+    },
+    { label: "the gateway lists the old worker as incompatible" },
+  );
+  return found(view, id);
+}
+
 async function hasHorizontalScroll(page: Page): Promise<boolean> {
   return page.evaluate(
     () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
@@ -315,7 +338,8 @@ test.describe("the workers page", () => {
     ]);
     try {
       const b = (await workerList(fleet.gateway)).find((view) => view.label === "worker-b");
-      expect((await fleet.gateway.cli(["worker", "drain", b?.id ?? ""])).code).toBe(0);
+      const drained = found(b, "worker-b").id;
+      expect((await fleet.gateway.cli(["worker", "drain", drained])).code).toBe(0);
       await lease(fleet.workers[0] as RunningDaemon, "console-e2e");
       await waitFor(
         async () => (await workerList(fleet.gateway)).some((view) => view.leases.length === 1),
@@ -332,18 +356,18 @@ test.describe("the workers page", () => {
       await expect(page.locator(".list-meta")).toHaveText(`${listed.length} / ${listed.length} up`);
       for (const view of listed) {
         const shown = row(page, view.label ?? view.id);
-        const capacity = view.capacity;
-        const limit = (capacity?.ios.limit ?? 0) + (capacity?.android.limit ?? 0);
-        const running = (capacity?.ios.running ?? 0) + (capacity?.android.running ?? 0);
-        await expect(shown, view.label).toHaveText(`${view.label}${running} / ${limit}`);
+        await expect(shown, view.label).toHaveText(`${view.label}${runningOverLimit(view)}`);
         await expect(
           shown.getByRole("img", { name: view.drained ? "drained" : "connected" }),
         ).toBeVisible();
       }
 
       await row(page, "worker-a").getByRole("link").click();
-      const a = listed.find((view) => view.label === "worker-a");
-      await expect(page).toHaveURL(new RegExp(`/workers/${a?.id}$`));
+      const a = found(
+        listed.find((view) => view.label === "worker-a"),
+        "worker-a",
+      );
+      await expect(page).toHaveURL(new RegExp(`/workers/${a.id}$`));
       await expect(title(page, "worker-a")).toBeVisible();
       await expect(fact(page.locator("#main"), "Leases").or(figure(page, "Leases"))).toContainText(
         "1",
@@ -359,16 +383,9 @@ test.describe("the workers page", () => {
     let hangUp = () => {};
     try {
       hangUp = await joinOldWorker(gateway, { id: "wrk_old", label: "old-worker" });
-      let view: WorkerView | undefined;
-      await waitFor(
-        async () => {
-          view = (await workerList(gateway)).find((candidate) => candidate.id === "wrk_old");
-          return view?.connection === "incompatible";
-        },
-        { label: "the gateway lists the old worker as incompatible" },
-      );
-      const gatewayRange = view?.protocol?.gateway;
-      expect(view?.protocol?.worker).toEqual(OLD_PROTOCOL);
+      const view = await incompatibleWorker(gateway, "wrk_old");
+      const gatewayRange = found(view.protocol?.gateway, "the gateway's protocol range");
+      expect(view.protocol?.worker).toEqual(OLD_PROTOCOL);
 
       await openConsole(page, gateway);
       await expect(
@@ -377,7 +394,7 @@ test.describe("the workers page", () => {
       await row(page, "old-worker").getByRole("link").click();
 
       const expected =
-        `incompatible gateway ${gatewayRange?.min}–${gatewayRange?.max}, ` +
+        `incompatible gateway ${gatewayRange.min}–${gatewayRange.max}, ` +
         `worker ${OLD_PROTOCOL.min}–${OLD_PROTOCOL.max}`;
       await expect(page.getByRole("tabpanel")).toContainText(expected);
       await openTab(page, "Host");
@@ -393,8 +410,7 @@ test.describe("the workers page", () => {
     daemon,
     page,
   }) => {
-    const [host] = await workerList(daemon);
-    expect(host).toBeDefined();
+    const host = found((await workerList(daemon))[0], "the host's worker");
 
     await answerWithoutLoad(page);
     await openConsole(page, daemon);
@@ -403,15 +419,11 @@ test.describe("the workers page", () => {
       page.getByRole("list", { name: "Workers", exact: true }).getByRole("listitem"),
     ).toHaveCount(1);
     await expect(page).toHaveURL(/\/workers$/);
-    await expect(title(page, host?.id ?? "")).toBeVisible();
-    await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText(
-      host?.id ?? "",
-    );
-    await row(page, host?.id ?? "")
-      .getByRole("link")
-      .click();
-    await expect(page).toHaveURL(new RegExp(`/workers/${encodeURIComponent(host?.id ?? "")}$`));
-    await expect(page.locator(".inspector-line")).toContainText(host?.version ?? "");
+    await expect(title(page, host.id)).toBeVisible();
+    await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText(host.id);
+    await row(page, host.id).getByRole("link").click();
+    await expect(page).toHaveURL(new RegExp(`/workers/${encodeURIComponent(host.id)}$`));
+    await expect(page.locator(".inspector-line")).toContainText(host.version ?? "");
     await expect(page.locator(".inspector-line")).toContainText("connected");
   });
 
@@ -433,7 +445,8 @@ test.describe("the workers page", () => {
     ]);
     try {
       const b = (await workerList(fleet.gateway)).find((view) => view.label === "worker-b");
-      expect((await fleet.gateway.cli(["worker", "drain", b?.id ?? ""])).code).toBe(0);
+      const drained = found(b, "worker-b").id;
+      expect((await fleet.gateway.cli(["worker", "drain", drained])).code).toBe(0);
       await answerWithoutLoad(page);
       await openConsole(page, fleet.gateway);
       await expect(row(page, "worker-a")).toBeVisible();
@@ -826,7 +839,8 @@ test.describe("the workers page", () => {
     try {
       hangUp = await joinOldWorker(fleet.gateway, { id: "wrk_old", label: "old-worker" });
       const b = (await workerList(fleet.gateway)).find((view) => view.label === "worker-b");
-      expect((await fleet.gateway.cli(["worker", "drain", b?.id ?? ""])).code).toBe(0);
+      const drained = found(b, "worker-b").id;
+      expect((await fleet.gateway.cli(["worker", "drain", drained])).code).toBe(0);
       await lease(fleet.workers[0] as RunningDaemon, "console-e2e");
       await answerWithoutLoad(page);
       await openConsole(page, fleet.gateway);
@@ -901,7 +915,7 @@ test.describe("the workers page", () => {
   }) => {
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const [host] = await workerList(daemon);
-    const name = host?.id ?? "";
+    const name = host.id;
     const follow = async (link: Locator) => {
       for (let step = 0; step < 30; step += 1) {
         if (await link.evaluate((element) => element === document.activeElement)) break;
diff --git a/ui/src/ds/feed.tsx b/ui/src/ds/feed.tsx
index 829ccadf1..402390d58 100644
--- a/ui/src/ds/feed.tsx
+++ b/ui/src/ds/feed.tsx
@@ -28,12 +28,7 @@ export function Feed(props: {
   const { count, keyAt, label, listLabel, newText, renderRow, rowHeight, startAt = 0 } = props;
   const box = useRef<HTMLDivElement>(null);
   const [atTop, setAtTop] = useState(true);
-  const newest = count === 0 ? undefined : keyAt(0);
-  // why: the newest row the reader saw at the top of the box: every row above it is new to them.
-  const [seen, setSeen] = useState(newest);
-  useEffect(() => {
-    if (atTop) setSeen(newest);
-  }, [atTop, newest]);
+  const unseen = useUnseen(count, keyAt, atTop);
   const virtualizer = useVirtualizer({
     anchorTo: atTop ? "start" : "end",
     count,
@@ -43,20 +38,7 @@ export function Feed(props: {
     initialRect: { height: BOX_HEIGHT_PX, width: 0 },
     overscan: OVERSCAN,
   });
-  // why: once, when the box opens: a row chosen by a link is brought into view, and later choices
-  // are the reader's own scrolling to keep.
-  const opened = useRef(false);
-  useEffect(() => {
-    if (opened.current) return;
-    opened.current = true;
-    if (startAt > 0) virtualizer.scrollToIndex(startAt, { align: "center" });
-  }, [startAt, virtualizer]);
-  let unseen = 0;
-  if (!atTop) {
-    while (unseen < count && keyAt(unseen) !== seen) unseen += 1;
-    // why: a row the reader saw that is no longer held (past the cap) leaves nothing to count from.
-    if (unseen === count) unseen = 0;
-  }
+  useOpenAt(startAt, virtualizer);
   const toTop = () => {
     virtualizer.scrollToOffset(0);
     box.current?.focus();
@@ -92,3 +74,31 @@ export function Feed(props: {
     </div>
   );
 }
+
+function useUnseen(count: number, keyAt: (index: number) => string, atTop: boolean): number {
+  const newest = count === 0 ? undefined : keyAt(0);
+  // why: the newest row the reader saw at the top of the box: every row above it is new to them.
+  const [seen, setSeen] = useState(newest);
+  useEffect(() => {
+    if (atTop) setSeen(newest);
+  }, [atTop, newest]);
+  if (atTop) return 0;
+  let unseen = 0;
+  while (unseen < count && keyAt(unseen) !== seen) unseen += 1;
+  // why: a row the reader saw that is no longer held (past the cap) leaves nothing to count from.
+  return unseen === count ? 0 : unseen;
+}
+
+// why: once, when the box opens: a row chosen by a link is brought into view, and later choices
+// are the reader's own scrolling to keep.
+function useOpenAt(
+  startAt: number,
+  virtualizer: { readonly scrollToIndex: (index: number, options: { align: "center" }) => void },
+): void {
+  const opened = useRef(false);
+  useEffect(() => {
+    if (opened.current) return;
+    opened.current = true;
+    if (startAt > 0) virtualizer.scrollToIndex(startAt, { align: "center" });
+  }, [startAt, virtualizer]);
+}
diff --git a/ui/src/model/attention.ts b/ui/src/model/attention.ts
index 933de918c..b807f93ec 100644
--- a/ui/src/model/attention.ts
+++ b/ui/src/model/attention.ts
@@ -137,36 +137,47 @@ function subjectOf(item: AttentionItem): string {
 }
 
 function factsOf(item: AttentionItem, now: number): readonly AttentionFact[] {
+  return "device" in item ? deviceFacts(item, now) : workerFacts(item, now);
+}
+
+function deviceFacts(
+  item: Extract<AttentionItem, { readonly device: unknown }>,
+  now: number,
+): readonly AttentionFact[] {
+  const since = stateEnteredAt(item.device, item.worker);
+  return [
+    { label: "Device", value: item.device.id },
+    { label: "State", value: item.device.state },
+    ...(since === undefined
+      ? []
+      : [{ label: "In this state for", value: formatDuration(now - since) }]),
+  ];
+}
+
+function workerFacts(
+  item: Exclude<AttentionItem, { readonly device: unknown }>,
+  now: number,
+): readonly AttentionFact[] {
   const { worker } = item;
-  switch (item.condition) {
-    case "disconnected":
-      return [{ label: "Last seen", value: `${formatDuration(now - worker.lastSeenAt)} ago` }];
-    case "incompatible":
-      return worker.protocol === undefined
-        ? []
-        : [
-            { label: "Gateway protocol", value: protocolText(worker.protocol.gateway) },
-            { label: "Worker protocol", value: protocolText(worker.protocol.worker) },
-          ];
-    case "drained":
-      return [{ label: "Leases still held", value: String(worker.leases?.length ?? 0) }];
-    case "over RAM budget":
-      return [
-        { label: "Used", value: gibibytes(item.usedBytes) },
-        { label: "Limit", value: gibibytes(item.limitBytes) },
-      ];
-    case "quarantined":
-    case "stalled": {
-      const since = stateEnteredAt(item.device, worker);
-      return [
-        { label: "Device", value: item.device.id },
-        { label: "State", value: item.device.state },
-        ...(since === undefined
-          ? []
-          : [{ label: "In this state for", value: formatDuration(now - since) }]),
-      ];
-    }
+  if (item.condition === "over RAM budget") {
+    return [
+      { label: "Used", value: gibibytes(item.usedBytes) },
+      { label: "Limit", value: gibibytes(item.limitBytes) },
+    ];
   }
+  if (item.condition === "disconnected") {
+    return [{ label: "Last seen", value: `${formatDuration(now - worker.lastSeenAt)} ago` }];
+  }
+  if (item.condition === "drained") {
+    return [{ label: "Leases still held", value: String(worker.leases?.length ?? 0) }];
+  }
+  const { protocol } = worker;
+  return protocol === undefined
+    ? []
+    : [
+        { label: "Gateway protocol", value: protocolText(protocol.gateway) },
+        { label: "Worker protocol", value: protocolText(protocol.worker) },
+      ];
 }
 
 function namesItem(event: ConsoleEvent, item: AttentionItem): boolean {
diff --git a/ui/src/model/defined.test.ts b/ui/src/model/defined.test.ts
new file mode 100644
index 000000000..f8b9e93d5
--- /dev/null
+++ b/ui/src/model/defined.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+
+import { defined } from "./defined";
+
+describe("defined", () => {
+  it("keeps every field that has a value, falsy ones included, and leaves out the undefined", () => {
+    const kept = defined({ a: 1, b: undefined, c: "", d: 0, e: null, f: false });
+
+    expect(kept).toEqual({ a: 1, c: "", d: 0, e: null, f: false });
+    expect("b" in kept).toBe(false);
+  });
+});
diff --git a/ui/src/model/defined.ts b/ui/src/model/defined.ts
new file mode 100644
index 000000000..623654ac6
--- /dev/null
+++ b/ui/src/model/defined.ts
@@ -0,0 +1,9 @@
+// why: a view model leaves a missing fact out rather than holding `undefined`, which
+// `exactOptionalPropertyTypes` refuses for an optional field; one helper drops them all at once.
+export function defined<T extends Record<string, unknown>>(
+  fields: T,
+): { [K in keyof T]?: Exclude<T[K], undefined> } {
+  return Object.fromEntries(Object.entries(fields).filter(([, value]) => value !== undefined)) as {
+    [K in keyof T]?: Exclude<T[K], undefined>;
+  };
+}
diff --git a/ui/src/model/fleet.ts b/ui/src/model/fleet.ts
index d6159e779..916ca285b 100644
--- a/ui/src/model/fleet.ts
+++ b/ui/src/model/fleet.ts
@@ -8,38 +8,46 @@ const RANK: Readonly<Record<Tone, number>> = { error: 3, idle: 0, ok: 1, warn: 2
 // why: a list row has room for one square, so of everything wrong with a worker the worst is
 // shown and its word goes in the square's name; a worker with nothing wrong reads "connected".
 export function workerHealth(worker: WorkerView): Toned {
+  return [...stateFindings(worker), ...loadFindings(worker)].reduce<Toned>(
+    (worst, finding) => (RANK[finding.tone] > RANK[worst.tone] ? finding : worst),
+    { tone: "ok", word: "connected" },
+  );
+}
+
+function stateFindings(worker: WorkerView): Toned[] {
   const findings: Toned[] = [];
-  if (worker.connection !== "connected") {
-    findings.push({ tone: "error", word: worker.connection });
-  }
+  if (worker.connection !== "connected") findings.push({ tone: "error", word: worker.connection });
   if (worker.health === "failed") findings.push({ tone: "error", word: "failed" });
   if (worker.drained) findings.push({ tone: "warn", word: "drained" });
   if (worker.health === "starting") findings.push({ tone: "warn", word: "starting" });
   if (worker.capacity?.ramBudget?.overLimit === true) {
     findings.push({ tone: "warn", word: "over RAM budget" });
   }
-  if (worker.connection === "connected" && worker.load !== undefined) {
-    const pressure = worker.load.memory?.pressure;
-    if (pressure === "warn" || pressure === "critical") {
-      findings.push({
-        tone: pressure === "critical" ? "error" : "warn",
-        word: `memory pressure ${pressure}`,
-      });
-    }
-    const gauges = loadGauges(worker.load);
-    for (const [name, percent] of [
-      ["CPU", gauges.cpu],
-      ["memory", pressure === undefined ? gauges.memory : undefined],
-      ["disk", gauges.disk],
-    ] as const) {
-      const tone = levelOf(percent);
-      if (tone !== "idle") findings.push({ tone, word: `${name} ${percent}%` });
-    }
+  return findings;
+}
+
+// why: a reading from a worker that is not connected is stale, so it says nothing about the worker
+// now; where memory reports a pressure, that word judges memory instead of its fill.
+function loadFindings(worker: WorkerView): Toned[] {
+  if (worker.connection !== "connected" || worker.load === undefined) return [];
+  const pressure = worker.load.memory?.pressure;
+  const gauges = loadGauges(worker.load);
+  const figures = [
+    ["CPU", gauges.cpu],
+    ["memory", pressure === undefined ? gauges.memory : undefined],
+    ["disk", gauges.disk],
+  ] as const;
+  const findings: Toned[] = figures.flatMap(([name, percent]) => {
+    const tone = levelOf(percent);
+    return tone === "idle" ? [] : [{ tone, word: `${name} ${percent}%` }];
+  });
+  if (pressure === "warn" || pressure === "critical") {
+    findings.push({
+      tone: pressure === "critical" ? "error" : "warn",
+      word: `memory pressure ${pressure}`,
+    });
   }
-  return findings.reduce<Toned>(
-    (worst, finding) => (RANK[finding.tone] > RANK[worst.tone] ? finding : worst),
-    { tone: "ok", word: "connected" },
-  );
+  return findings;
 }
 
 export type SlotKind = "leased" | "ready" | "busy" | "broken" | "absent" | "free";
diff --git a/ui/src/model/leases.ts b/ui/src/model/leases.ts
index a3b7837de..80c2dfdef 100644
--- a/ui/src/model/leases.ts
+++ b/ui/src/model/leases.ts
@@ -1,6 +1,7 @@
 import type { z } from "zod";
 
 import type { statusLeaseSchema, tokenRecordSchema } from "../../../src/contract/schemas";
+import { defined } from "./defined";
 import { formatDuration } from "./time";
 import { type WorkerDevice, type WorkerView, workerName, workerPath } from "./workers";
 
@@ -250,43 +251,68 @@ export function leaseInspection(input: {
   const { lease, now, record, tokens, workers } = input;
   const named = { worker: lease.worker, workerId: lease.workerId ?? record?.workerId };
   const worker = workerOfLease(named, workers);
-  const workerLabel = workerNameOfLease(named, workers);
   const device = worker?.devices?.find((candidate) => candidate.id === lease.deviceId);
   const grantedAt = Date.parse(lease.createdAt);
   const deadline = Date.parse(lease.expiresAt);
-  const holder = record === undefined ? undefined : holderOf(record.requesterId, tokens);
-  const imageTag = lease.imageTag ?? device?.spec.imageTag;
   return {
-    device: {
-      deviceId: lease.deviceId,
-      udid: lease.udid,
-      ...(lease.mode === undefined ? {} : { mode: lease.mode }),
-      ...(imageTag === undefined ? {} : { imageTag }),
-      ...(device === undefined ? {} : { kind: device.physical ? "Physical" : "Virtual" }),
-    },
+    device: leaseDevice(lease, device),
     expiring: isExpiring(deadline, now),
     granted: clockTime(grantedAt),
     heldFor: formatDuration(now - grantedAt),
     id: lease.id,
     model: lease.device,
     remaining: formatDuration(deadline - now),
-    renewed: record === undefined ? "—" : `${formatDuration(now - record.lastRenewedAt)} ago`,
     stream: streamOffer(worker),
-    title: holder === undefined ? lease.id : holderTitle(holder),
-    ...(record === undefined ? {} : { percent: percentLeft(deadline, now, record.ttlMs) }),
-    ...(holder === undefined ? {} : { holder }),
-    ...(record !== undefined && record.ownerId !== record.requesterId
-      ? { ownerId: record.ownerId }
-      : {}),
-    ...(device === undefined ? {} : { runtime: device.spec.osVersion }),
-    ...(lease.requestId === undefined ? {} : { requestId: lease.requestId }),
-    ...(workerLabel === undefined
-      ? {}
-      : {
-          worker: {
-            name: workerLabel,
-            ...(worker === undefined ? {} : { to: workerPath(worker.id) }),
-          },
-        }),
+    ...recordFacts(record, tokens, deadline, now, lease.id),
+    ...defined({
+      requestId: lease.requestId,
+      runtime: device?.spec.osVersion,
+      worker: leaseWorker(named, worker, workers),
+    }),
   };
 }
+
+function leaseDevice(
+  lease: LeaseDetails,
+  device: WorkerDevice | undefined,
+): LeaseInspection["device"] {
+  return {
+    deviceId: lease.deviceId,
+    udid: lease.udid,
+    ...defined({
+      imageTag: lease.imageTag ?? device?.spec.imageTag,
+      kind: device === undefined ? undefined : device.physical ? "Physical" : "Virtual",
+      mode: lease.mode,
+    }),
+  };
+}
+
+// why: who holds a lease, when it was renewed and how much of its time is left are only in its
+// entry in `GET /v1/leases`; without that entry they show as missing.
+function recordFacts(
+  record: LeaseRecord | undefined,
+  tokens: readonly TokenRecord[],
+  deadline: number,
+  now: number,
+  id: string,
+): Pick<LeaseInspection, "renewed" | "title" | "percent" | "holder" | "ownerId"> {
+  if (record === undefined) return { renewed: "—", title: id };
+  const holder = holderOf(record.requesterId, tokens);
+  return {
+    holder,
+    percent: percentLeft(deadline, now, record.ttlMs),
+    renewed: `${formatDuration(now - record.lastRenewedAt)} ago`,
+    title: holderTitle(holder),
+    ...(record.ownerId === record.requesterId ? {} : { ownerId: record.ownerId }),
+  };
+}
+
+function leaseWorker(
+  named: Parameters<typeof workerNameOfLease>[0],
+  worker: WorkerView | undefined,
+  workers: readonly WorkerView[],
+): LeaseInspection["worker"] | undefined {
+  const name = workerNameOfLease(named, workers);
+  if (name === undefined) return undefined;
+  return worker === undefined ? { name } : { name, to: workerPath(worker.id) };
+}
diff --git a/ui/src/model/worker-page.ts b/ui/src/model/worker-page.ts
index 8fa381ae5..8bb327bd1 100644
--- a/ui/src/model/worker-page.ts
+++ b/ui/src/model/worker-page.ts
@@ -1,3 +1,4 @@
+import { defined } from "./defined";
 import { type DeviceSlot, platformSlots, slotsLabel, workerHealth } from "./fleet";
 import { formatBusyPercent, formatBytes, formatCores, loadGauges } from "./load";
 import { levelOf } from "./load-thresholds";
@@ -234,13 +235,10 @@ function deviceRow(
   tokens: readonly TokenRecord[],
   leaseIds: ReadonlySet<string>,
 ): DeviceRow {
-  const lease = worker.leases?.find((candidate) => candidate.deviceId === device.id);
   const entered = stateEnteredAt(device, worker);
-  const holder = lease === undefined ? undefined : holderOf(lease.requesterId, tokens);
   // why: a virtual device shows its mode only where it is not the one the worker serves by default,
   // and a physical device has neither a mode nor an image.
-  const mode = !device.physical && !device.servesDefaultMode ? device.mode : undefined;
-  const imageTag = device.physical ? undefined : device.spec.imageTag;
+  const virtual = !device.physical;
   return {
     id: device.id,
     model: device.spec.model,
@@ -248,20 +246,33 @@ function deviceRow(
     platform: platformName(device.spec.platform),
     runtime: device.spec.osVersion,
     status: deviceStateStatus(device.state),
-    ...(lease === undefined || holder === undefined
-      ? {}
-      : {
-          expires: formatDuration(lease.ttlDeadline - now),
-          holder: {
-            id: holder.id,
-            name: holder.label ?? holder.id,
-            to: leasePath(leaseIdOnPage(worker, lease.id, leaseIds)),
-          },
-          renewed: `${formatDuration(now - lease.lastRenewedAt)} ago`,
-        }),
-    ...(entered === undefined ? {} : { since: formatDuration(now - entered) }),
-    ...(mode === undefined ? {} : { mode }),
-    ...(imageTag === undefined ? {} : { imageTag }),
+    ...leaseFacts(device, worker, now, tokens, leaseIds),
+    ...defined({
+      imageTag: virtual ? device.spec.imageTag : undefined,
+      mode: virtual && !device.servesDefaultMode ? device.mode : undefined,
+      since: entered === undefined ? undefined : formatDuration(now - entered),
+    }),
+  };
+}
+
+function leaseFacts(
+  device: WorkerDevice,
+  worker: WorkerView,
+  now: number,
+  tokens: readonly TokenRecord[],
+  leaseIds: ReadonlySet<string>,
+): Pick<DeviceRow, "expires" | "holder" | "renewed"> {
+  const lease = worker.leases?.find((candidate) => candidate.deviceId === device.id);
+  if (lease === undefined) return {};
+  const holder = holderOf(lease.requesterId, tokens);
+  return {
+    expires: formatDuration(lease.ttlDeadline - now),
+    holder: {
+      id: holder.id,
+      name: holder.label ?? holder.id,
+      to: leasePath(leaseIdOnPage(worker, lease.id, leaseIds)),
+    },
+    renewed: `${formatDuration(now - lease.lastRenewedAt)} ago`,
   };
 }
 
diff --git a/ui/src/screens/leases/inspector.tsx b/ui/src/screens/leases/inspector.tsx
index e9f47c115..962c40a56 100644
--- a/ui/src/screens/leases/inspector.tsx
+++ b/ui/src/screens/leases/inspector.tsx
@@ -28,7 +28,6 @@ export function LeaseInspector({ id }: { readonly id: string }) {
 }
 
 export function LeaseDetail({ lease }: { readonly lease: LeaseInspection }) {
-  const { device, worker } = lease;
   return (
     <Inspector
       crumbs={[{ label: "Leases", to: "/leases" }, { label: lease.id }]}
@@ -39,80 +38,13 @@ export function LeaseDetail({ lease }: { readonly lease: LeaseInspection }) {
         </span>
       }
       mono
-      line={
-        <>
-          {lease.model}
-          {lease.runtime === undefined ? "" : ` ${lease.runtime}`}
-          {worker === undefined ? null : (
-            <>
-              {" on "}
-              <WorkerName worker={worker} />
-            </>
-          )}
-        </>
-      }
+      line={<LeaseLine lease={lease} />}
     >
       <div className="lease-body">
         <div className="lease-cards">
-          <LeaseCard title="Expires in">
-            <p className={lease.expiring ? "lease-countdown lease-warn" : "lease-countdown"}>
-              <span role="timer">{lease.remaining}</span>
-            </p>
-            {lease.percent === undefined ? null : (
-              <Meter percent={lease.percent} tone={lease.expiring ? "warn" : "neutral"} />
-            )}
-            <dl className="lease-figures">
-              <Figure label="Held for" value={lease.heldFor} />
-              <Figure label="Renewed" value={lease.renewed} />
-              <Figure label="Granted" value={lease.granted} />
-            </dl>
-          </LeaseCard>
-          <LeaseCard title="Device">
-            <Facts
-              facts={[
-                { label: "Model", value: lease.model },
-                { label: "Runtime", value: lease.runtime ?? "—" },
-                { label: "Mode", value: device.mode ?? "—" },
-                {
-                  label: "Image tag",
-                  value: <span className="mono">{device.imageTag ?? "—"}</span>,
-                },
-                { label: "Kind", value: device.kind ?? "—" },
-                {
-                  label: "Worker",
-                  value: worker === undefined ? "—" : <WorkerName worker={worker} />,
-                },
-                { label: "Device id", value: <Id>{device.deviceId}</Id> },
-                { label: "UDID", value: <span className="mono">{device.udid}</span> },
-              ]}
-            />
-          </LeaseCard>
-          <LeaseCard title="Lease">
-            <Facts
-              facts={[
-                { label: "Lease id", value: <Id>{lease.id}</Id> },
-                ...(lease.requestId === undefined
-                  ? []
-                  : [{ label: "Request", value: <span className="mono">{lease.requestId}</span> }]),
-                {
-                  label: "Holder",
-                  value:
-                    lease.holder === undefined ? (
-                      "—"
-                    ) : lease.holder.label === undefined ? (
-                      <span className="mono">{lease.holder.id}</span>
-                    ) : (
-                      <>
-                        {lease.holder.label} <span className="muted mono">{lease.holder.id}</span>
-                      </>
-                    ),
-                },
-                ...(lease.ownerId === undefined
-                  ? []
-                  : [{ label: "Owner", value: <span className="mono">{lease.ownerId}</span> }]),
-              ]}
-            />
-          </LeaseCard>
+          <ExpiryCard lease={lease} />
+          <DeviceCard lease={lease} />
+          <LeaseFactsCard lease={lease} />
         </div>
         <ScreenPanel
           leaseId={lease.id}
@@ -124,6 +56,89 @@ export function LeaseDetail({ lease }: { readonly lease: LeaseInspection }) {
   );
 }
 
+function LeaseLine({ lease }: { readonly lease: LeaseInspection }) {
+  const { worker } = lease;
+  return (
+    <>
+      {lease.model}
+      {lease.runtime === undefined ? "" : ` ${lease.runtime}`}
+      {worker === undefined ? null : (
+        <>
+          {" on "}
+          <WorkerName worker={worker} />
+        </>
+      )}
+    </>
+  );
+}
+
+function ExpiryCard({ lease }: { readonly lease: LeaseInspection }) {
+  return (
+    <LeaseCard title="Expires in">
+      <p className={lease.expiring ? "lease-countdown lease-warn" : "lease-countdown"}>
+        <span role="timer">{lease.remaining}</span>
+      </p>
+      {lease.percent === undefined ? null : (
+        <Meter percent={lease.percent} tone={lease.expiring ? "warn" : "neutral"} />
+      )}
+      <dl className="lease-figures">
+        <Figure label="Held for" value={lease.heldFor} />
+        <Figure label="Renewed" value={lease.renewed} />
+        <Figure label="Granted" value={lease.granted} />
+      </dl>
+    </LeaseCard>
+  );
+}
+
+function DeviceCard({ lease }: { readonly lease: LeaseInspection }) {
+  const { device, worker } = lease;
+  return (
+    <LeaseCard title="Device">
+      <Facts
+        facts={[
+          { label: "Model", value: lease.model },
+          { label: "Runtime", value: lease.runtime ?? "—" },
+          { label: "Mode", value: device.mode ?? "—" },
+          { label: "Image tag", value: <span className="mono">{device.imageTag ?? "—"}</span> },
+          { label: "Kind", value: device.kind ?? "—" },
+          { label: "Worker", value: worker === undefined ? "—" : <WorkerName worker={worker} /> },
+          { label: "Device id", value: <Id>{device.deviceId}</Id> },
+          { label: "UDID", value: <span className="mono">{device.udid}</span> },
+        ]}
+      />
+    </LeaseCard>
+  );
+}
+
+function LeaseFactsCard({ lease }: { readonly lease: LeaseInspection }) {
+  return (
+    <LeaseCard title="Lease">
+      <Facts
+        facts={[
+          { label: "Lease id", value: <Id>{lease.id}</Id> },
+          ...(lease.requestId === undefined
+            ? []
+            : [{ label: "Request", value: <span className="mono">{lease.requestId}</span> }]),
+          { label: "Holder", value: <HolderName holder={lease.holder} /> },
+          ...(lease.ownerId === undefined
+            ? []
+            : [{ label: "Owner", value: <span className="mono">{lease.ownerId}</span> }]),
+        ]}
+      />
+    </LeaseCard>
+  );
+}
+
+function HolderName({ holder }: { readonly holder: LeaseInspection["holder"] }) {
+  if (holder === undefined) return <>—</>;
+  if (holder.label === undefined) return <span className="mono">{holder.id}</span>;
+  return (
+    <>
+      {holder.label} <span className="muted mono">{holder.id}</span>
+    </>
+  );
+}
+
 function WorkerName({ worker }: { readonly worker: NonNullable<LeaseInspection["worker"]> }) {
   return worker.to === undefined ? <>{worker.name}</> : <Link to={worker.to}>{worker.name}</Link>;
 }
diff --git a/ui/src/screens/sign-in.test.tsx b/ui/src/screens/sign-in.test.tsx
new file mode 100644
index 000000000..83962b2a2
--- /dev/null
+++ b/ui/src/screens/sign-in.test.tsx
@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { createApiClient } from "../data/api";
+import { createPreferences } from "../data/preferences";
+import { createSession } from "../data/session";
+import { ConsoleProvider } from "../state/services";
+import { SignInScreen } from "./sign-in";
+
+function services() {
+  const fetch = () => Promise.reject(new Error("no network in this test"));
+  const storage = { getItem: () => null, removeItem: () => undefined, setItem: () => undefined };
+  const session = createSession(() => storage);
+  return {
+    api: createApiClient({ fetch, signOut: session.signOut, token: session.token }),
+    fetch,
+    preferences: createPreferences(() => storage),
+    session,
+  };
+}
+
+describe("the sign-in screen", () => {
+  it("asks for an operator token, says how to make one, and shows no refusal before a try", () => {
+    const html = renderToStaticMarkup(
+      <ConsoleProvider {...services()}>
+        <SignInScreen />
+      </ConsoleProvider>,
+    );
+
+    expect(html).toContain('<h1 id="');
+    expect(html).toMatch(/<label for="token">Operator token<\/label>/);
+    expect(html).toContain('aria-describedby="token-hint"');
+    expect(html).toContain("simlock token create --role operator");
+    expect(html).toMatch(/<button[^>]*type="submit"[^>]*>Sign in<\/button>/);
+    expect(html).not.toContain('role="alert"');
+  });
+});
diff --git a/ui/src/state/screen.ts b/ui/src/state/screen.ts
index 4e92ead7f..2c5b34f98 100644
--- a/ui/src/state/screen.ts
+++ b/ui/src/state/screen.ts
@@ -69,40 +69,16 @@ export function useScreen(leaseId: string): Screen {
     setMeta(undefined);
     setStats(EMPTY);
     setPhase("starting");
-    void (async () => {
-      try {
-        const { body } = await api.stream(
-          `/v1/stream/leases/${encodeURIComponent(leaseId)}`,
-          abort.signal,
-          STREAM_HEAD_TIMEOUT_MS,
-        );
-        setPhase("live");
-        await readStream(
-          body,
-          {
-            onEnd: (reason) => {
-              // why: a stream that ended because this pane asked it to says nothing — the operator
-              // pressed Stop, and telling them the stream they stopped has stopped is noise.
-              if (abort.signal.aborted) return;
-              setNote(reason ?? "The stream ended.");
-              setPhase("stopped");
-            },
-            onFrame: (frame) => {
-              paint(canvas.current, frame.displayWidth, frame.displayHeight, frame);
-              frame.close();
-            },
-            onImage: (image) => paint(canvas.current, image.width, image.height, image),
-            onMeta: setMeta,
-            onStats: setStats,
-          },
-          abort.signal,
-        );
-      } catch (error) {
-        if (abort.signal.aborted) return;
-        setNote(refusalOf(error));
+    void capture(api, leaseId, abort.signal, {
+      canvas,
+      ended: (reason) => {
+        setNote(reason);
         setPhase("stopped");
-      }
-    })();
+      },
+      live: () => setPhase("live"),
+      setMeta,
+      setStats,
+    });
   }, [api, leaseId]);
 
   // why: the canvas is mounted as soon as a picture has been asked for rather than when the first frame
@@ -149,6 +125,50 @@ export function refusalOf(error: unknown): string {
   return error.message;
 }
 
+interface CaptureSinks {
+  readonly canvas: RefObject<HTMLCanvasElement | null>;
+  readonly live: () => void;
+  readonly ended: (reason: string) => void;
+  readonly setMeta: (meta: StreamMeta) => void;
+  readonly setStats: (stats: StreamStats) => void;
+}
+
+// why: a stream that ended because this pane asked it to says nothing — the operator pressed Stop,
+// and telling them the stream they stopped has stopped is noise.
+async function capture(
+  api: ReturnType<typeof useApi>,
+  leaseId: string,
+  signal: AbortSignal,
+  sinks: CaptureSinks,
+): Promise<void> {
+  try {
+    const { body } = await api.stream(
+      `/v1/stream/leases/${encodeURIComponent(leaseId)}`,
+      signal,
+      STREAM_HEAD_TIMEOUT_MS,
+    );
+    sinks.live();
+    await readStream(
+      body,
+      {
+        onEnd: (reason) => {
+          if (!signal.aborted) sinks.ended(reason ?? "The stream ended.");
+        },
+        onFrame: (frame) => {
+          paint(sinks.canvas.current, frame.displayWidth, frame.displayHeight, frame);
+          frame.close();
+        },
+        onImage: (image) => paint(sinks.canvas.current, image.width, image.height, image),
+        onMeta: sinks.setMeta,
+        onStats: sinks.setStats,
+      },
+      signal,
+    );
+  } catch (error) {
+    if (!signal.aborted) sinks.ended(refusalOf(error));
+  }
+}
+
 function paint(
   target: HTMLCanvasElement | null,
   width: number,
diff --git a/ui/src/state/workers.ts b/ui/src/state/workers.ts
index b60e3e616..482d81b94 100644
--- a/ui/src/state/workers.ts
+++ b/ui/src/state/workers.ts
@@ -14,7 +14,7 @@ import {
   workerInspectorOf,
   workerRow,
 } from "../model/worker-page";
-import type { WorkerList } from "../model/workers";
+import type { WorkerList, WorkerView } from "../model/workers";
 import { useLiveResource, useNow } from "./live";
 import { usePaging } from "./paging";
 import { loadView, mapView } from "./resource";
@@ -58,34 +58,17 @@ export interface WorkersPage {
 
 export function useWorkers(): LoadView<WorkersPage> {
   const workers = loadView(useLiveResource<WorkerList>("/v1/workers"));
-  // why: the holders' labels come from the token records; while they have not arrived or were
-  // refused, a holder shows its id alone and the devices still show.
-  const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
-  const leaseIds = (useLiveResource<LeaseList>("/v1/leases").data?.leases ?? []).map(
-    (lease) => lease.id,
-  );
-  const now = useNow();
   const search = useSearch();
   const named = itemIdFrom("/workers", usePath());
   const [filter, setFilter] = useState<WorkerFilter>("all");
 
-  const all = workers.kind === "ready" ? workers.data.workers : [];
-  const shown = filterWorkers(all, filter);
   const ready = workers.kind === "ready";
+  const all = ready ? workers.data.workers : [];
+  const shown = filterWorkers(all, filter);
   const paging = usePaging({ sizes: TABLE_SIZES, total: ready ? shown.length : undefined });
-  const first = shown[0];
-  const chosenId = named ?? first?.id;
+  const chosenId = named ?? shown[0]?.id;
   const chosen = all.find((worker) => worker.id === chosenId);
-  const devicesPaging = usePaging({
-    name: "devices",
-    sizes: TABLE_SIZES,
-    total: ready ? (chosen?.devices?.length ?? 0) : undefined,
-  });
-  const warmPaging = usePaging({
-    name: "warm-pool",
-    sizes: TABLE_SIZES,
-    total: ready ? (chosen?.warmPool?.targets.length ?? 0) : undefined,
-  });
+  const inspector = useInspector(chosen, ready);
   const keep = listSearch(search);
 
   return mapView(workers, (list) => {
@@ -95,14 +78,7 @@ export function useWorkers(): LoadView<WorkersPage> {
       empty: list.workers.length === 0,
       filter,
       focus: named === undefined ? "list" : "detail",
-      inspector:
-        chosen === undefined
-          ? undefined
-          : {
-              ...workerInspectorOf({ leaseIds, now: now.server, tokens, worker: chosen }),
-              devicesPaging,
-              warmPaging,
-            },
+      inspector,
       meta: upMeta(list.workers),
       missing: named !== undefined && chosen === undefined ? named : undefined,
       paging,
@@ -111,3 +87,31 @@ export function useWorkers(): LoadView<WorkersPage> {
     };
   });
 }
+
+// why: the holders' labels come from the token records and their lease links from the lease list;
+// while either has not arrived or was refused, a holder shows its id and the devices still show.
+function useInspector(
+  chosen: WorkerView | undefined,
+  ready: boolean,
+): WorkerInspectorView | undefined {
+  const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
+  const leases = useLiveResource<LeaseList>("/v1/leases").data?.leases ?? [];
+  const now = useNow();
+  const devicesPaging = usePaging({
+    name: "devices",
+    sizes: TABLE_SIZES,
+    total: ready ? (chosen?.devices?.length ?? 0) : undefined,
+  });
+  const warmPaging = usePaging({
+    name: "warm-pool",
+    sizes: TABLE_SIZES,
+    total: ready ? (chosen?.warmPool?.targets.length ?? 0) : undefined,
+  });
+  if (chosen === undefined) return undefined;
+  const leaseIds = leases.map((lease) => lease.id);
+  return {
+    ...workerInspectorOf({ leaseIds, now: now.server, tokens, worker: chosen }),
+    devicesPaging,
+    warmPaging,
+  };
+}

From ea1521606dff49df706a5b95eef52fb8b5511f0f Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Fri, 16 Oct 2026 08:09:06 +0200
Subject: [PATCH 29/32] refactor(ui): the screen pane's view and the
 inspector's totals are plain functions

---
 ui/src/model/screen.test.ts | 45 ++++++++++++++++++++++++++++++-
 ui/src/model/screen.ts      | 54 ++++++++++++++++++++++++++++++-------
 ui/src/state/screen.ts      | 24 ++---------------
 ui/src/state/workers.ts     | 20 +++++++-------
 4 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/ui/src/model/screen.test.ts b/ui/src/model/screen.test.ts
index 577b657dc..ed6785b5f 100644
--- a/ui/src/model/screen.test.ts
+++ b/ui/src/model/screen.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { readout, type ScreenPhase } from "./screen";
+import { readout, type ScreenPhase, screenView } from "./screen";
 
 const NONE = { dropped: 0, framesPerSecond: 0, kilobitsPerSecond: 0, painted: 0 };
 const META = { codec: "mjpeg", height: 240, width: 120 };
@@ -39,3 +39,46 @@ describe("the screen readout", () => {
     expect(state("live", true)).toEqual({ tone: "error", word: "failed" });
   });
 });
+
+describe("the screen pane", () => {
+  const quiet = { ...NONE, error: undefined };
+
+  it("holds a canvas while a picture is asked for or shown, and none when off or stopped", () => {
+    const live = (phase: ScreenPhase) =>
+      screenView({ meta: undefined, note: undefined, phase, stats: quiet }).live;
+
+    expect([live("idle"), live("starting"), live("live"), live("stopped")]).toEqual([
+      false,
+      true,
+      true,
+      false,
+    ]);
+  });
+
+  it("says what it waits for until the first frame is painted, and nothing after", () => {
+    const waiting = (phase: ScreenPhase, painted: number) =>
+      screenView({ meta: META, note: undefined, phase, stats: { ...quiet, painted } }).waiting;
+
+    expect(waiting("starting", 0)).toBe("Starting the capture on the worker.");
+    expect(waiting("live", 0)).toBe("Waiting for the first frame.");
+    expect(waiting("live", 1)).toBeUndefined();
+    expect(waiting("stopped", 0)).toBeUndefined();
+  });
+
+  it("takes the picture's size from the stream, and zero before it is known", () => {
+    const sized = screenView({ meta: META, note: undefined, phase: "live", stats: quiet });
+    const unsized = screenView({ meta: undefined, note: undefined, phase: "live", stats: quiet });
+
+    expect([sized.width, sized.height, unsized.width, unsized.height]).toEqual([120, 240, 0, 0]);
+  });
+
+  it("reads failed on a stream error, or on a stop that left a reason, and not on a plain stop", () => {
+    const word = (phase: ScreenPhase, note: string | undefined, error: string | undefined) =>
+      screenView({ meta: undefined, note, phase, stats: { ...NONE, error } }).readout.state.word;
+
+    expect(word("live", undefined, "decode failed")).toBe("failed");
+    expect(word("stopped", "the worker ended the capture", undefined)).toBe("failed");
+    expect(word("stopped", undefined, undefined)).toBe("off");
+    expect(word("live", "an old reason", undefined)).toBe("live");
+  });
+});
diff --git a/ui/src/model/screen.ts b/ui/src/model/screen.ts
index 797318394..903f48a95 100644
--- a/ui/src/model/screen.ts
+++ b/ui/src/model/screen.ts
@@ -19,20 +19,30 @@ function stateOf(phase: ScreenPhase, failed: boolean): Toned {
   return { tone: "idle", word: "off" };
 }
 
+type Meta = { readonly width: number; readonly height: number; readonly codec: string };
+type Stats = {
+  readonly painted: number;
+  readonly framesPerSecond: number;
+  readonly kilobitsPerSecond: number;
+  readonly dropped: number;
+};
+
+export interface ScreenView {
+  readonly width: number;
+  readonly height: number;
+  readonly live: boolean;
+  readonly waiting: string | undefined;
+  readonly readout: Readout;
+  readonly note: string | undefined;
+}
+
 // why: a figure counts painted frames, so until the first one is painted every figure is missing
 // rather than a misleading zero.
 export function readout(input: {
   readonly phase: ScreenPhase;
   readonly failed: boolean;
-  readonly meta:
-    | { readonly width: number; readonly height: number; readonly codec: string }
-    | undefined;
-  readonly stats: {
-    readonly painted: number;
-    readonly framesPerSecond: number;
-    readonly kilobitsPerSecond: number;
-    readonly dropped: number;
-  };
+  readonly meta: Meta | undefined;
+  readonly stats: Stats;
 }): Readout {
   const { failed, meta, phase, stats } = input;
   const counted = (show: string) => (stats.painted === 0 ? "—" : show);
@@ -50,3 +60,29 @@ export function readout(input: {
     state: stateOf(phase, failed),
   };
 }
+
+// why: the canvas is mounted as soon as a picture has been asked for rather than when the first frame
+// arrives — a frame can arrive before React has painted anything, and a pane that mounts its canvas
+// in reply to that frame has nothing to draw the first picture on. It goes away with the stream
+// rather than staying: a last frame kept on the page after Stop looks like a live device and shows a
+// screen its viewer has already asked not to see.
+export function screenView(input: {
+  readonly phase: ScreenPhase;
+  readonly meta: Meta | undefined;
+  readonly stats: Stats & { readonly error: string | undefined };
+  readonly note: string | undefined;
+}): ScreenView {
+  const { meta, note, phase, stats } = input;
+  const live = phase === "live" || phase === "starting";
+  const failure = stats.error ?? (phase === "stopped" ? note : undefined);
+  const waitingNote =
+    phase === "starting" ? "Starting the capture on the worker." : "Waiting for the first frame.";
+  return {
+    height: meta?.height ?? 0,
+    live,
+    note,
+    readout: readout({ failed: failure !== undefined, meta, phase, stats }),
+    waiting: live && stats.painted === 0 ? waitingNote : undefined,
+    width: meta?.width ?? 0,
+  };
+}
diff --git a/ui/src/state/screen.ts b/ui/src/state/screen.ts
index 2c5b34f98..e6aecc5f2 100644
--- a/ui/src/state/screen.ts
+++ b/ui/src/state/screen.ts
@@ -10,7 +10,7 @@ import { type RefObject, useCallback, useEffect, useRef, useState } from "react"
 
 import { ApiError } from "../data/api";
 import { readStream, type StreamMeta, type StreamStats } from "../data/stream";
-import { type Readout, readout, type ScreenPhase } from "../model/screen";
+import { type Readout, type ScreenPhase, screenView } from "../model/screen";
 import { useApi } from "./services";
 
 export type { Readout } from "../model/screen";
@@ -81,27 +81,7 @@ export function useScreen(leaseId: string): Screen {
     });
   }, [api, leaseId]);
 
-  // why: the canvas is mounted as soon as a picture has been asked for rather than when the first frame
-  // arrives — a frame can arrive before React has painted anything, and a pane that mounts its canvas
-  // in reply to that frame has nothing to draw the first picture on. It goes away with the stream
-  // rather than staying: a last frame kept on the page after Stop looks like a live device and shows a
-  // screen its viewer has already asked not to see.
-  const live = phase === "live" || phase === "starting";
-  const failure = stats.error ?? (phase === "stopped" ? note : undefined);
-  const waiting = live && stats.painted === 0;
-  const waitingNote =
-    phase === "starting" ? "Starting the capture on the worker." : "Waiting for the first frame.";
-  return {
-    canvas,
-    height: meta?.height ?? 0,
-    live,
-    note,
-    readout: readout({ failed: failure !== undefined, meta, phase, stats }),
-    start,
-    stop,
-    waiting: waiting ? waitingNote : undefined,
-    width: meta?.width ?? 0,
-  };
+  return { canvas, start, stop, ...screenView({ meta, note, phase, stats }) };
 }
 
 /**
diff --git a/ui/src/state/workers.ts b/ui/src/state/workers.ts
index 482d81b94..9ab1cf305 100644
--- a/ui/src/state/workers.ts
+++ b/ui/src/state/workers.ts
@@ -88,6 +88,13 @@ export function useWorkers(): LoadView<WorkersPage> {
   });
 }
 
+function inspectorTotals(chosen: WorkerView | undefined): { devices: number; warm: number } {
+  return {
+    devices: chosen?.devices?.length ?? 0,
+    warm: chosen?.warmPool?.targets.length ?? 0,
+  };
+}
+
 // why: the holders' labels come from the token records and their lease links from the lease list;
 // while either has not arrived or was refused, a holder shows its id and the devices still show.
 function useInspector(
@@ -97,16 +104,9 @@ function useInspector(
   const tokens = useLiveResource<TokenList>("/v1/tokens").data?.tokens ?? [];
   const leases = useLiveResource<LeaseList>("/v1/leases").data?.leases ?? [];
   const now = useNow();
-  const devicesPaging = usePaging({
-    name: "devices",
-    sizes: TABLE_SIZES,
-    total: ready ? (chosen?.devices?.length ?? 0) : undefined,
-  });
-  const warmPaging = usePaging({
-    name: "warm-pool",
-    sizes: TABLE_SIZES,
-    total: ready ? (chosen?.warmPool?.targets.length ?? 0) : undefined,
-  });
+  const totals = ready ? inspectorTotals(chosen) : undefined;
+  const devicesPaging = usePaging({ name: "devices", sizes: TABLE_SIZES, total: totals?.devices });
+  const warmPaging = usePaging({ name: "warm-pool", sizes: TABLE_SIZES, total: totals?.warm });
   if (chosen === undefined) return undefined;
   const leaseIds = leases.map((lease) => lease.id);
   return {

From 3d5a57cf132c46a1e96feef3b23b1898784587f3 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Fri, 16 Oct 2026 08:09:58 +0200
Subject: [PATCH 30/32] test(console): the keyboard test names the host's
 worker it reads

---
 e2e/console/workers.spec.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index 0e4ff2a40..c93560a74 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -914,8 +914,7 @@ test.describe("the workers page", () => {
     page,
   }) => {
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
-    const [host] = await workerList(daemon);
-    const name = host.id;
+    const name = found((await workerList(daemon))[0], "the host's worker").id;
     const follow = async (link: Locator) => {
       for (let step = 0; step < 30; step += 1) {
         if (await link.evaluate((element) => element === document.activeElement)) break;

From aa511979600166258dfab51046d07aacceb8d5b0 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Fri, 16 Oct 2026 08:58:03 +0200
Subject: [PATCH 31/32] style(ui): format the foundation and table styles

---
 ui/src/ds/foundation.css | 3 ---
 ui/src/ds/table.css      | 1 -
 2 files changed, 4 deletions(-)

diff --git a/ui/src/ds/foundation.css b/ui/src/ds/foundation.css
index 8e64d901b..f1d34bdef 100644
--- a/ui/src/ds/foundation.css
+++ b/ui/src/ds/foundation.css
@@ -149,7 +149,6 @@ a:hover {
   white-space: nowrap;
 }
 
-
 /* Inputs: a grey fill and a 1px border. */
 
 label {
@@ -211,7 +210,6 @@ input[aria-invalid="true"] {
   font-weight: 500;
 }
 
-
 .skip-link {
   position: absolute;
   left: var(--space-2);
@@ -226,7 +224,6 @@ input[aria-invalid="true"] {
   top: var(--space-2);
 }
 
-
 /* A label: mono, uppercase, letter-spaced. The capitals are CSS, so the text stays as written. */
 .ds-label {
   font-family: var(--font-mono);
diff --git a/ui/src/ds/table.css b/ui/src/ds/table.css
index adf4b01ec..c4a96e211 100644
--- a/ui/src/ds/table.css
+++ b/ui/src/ds/table.css
@@ -174,7 +174,6 @@
   }
 }
 
-
 .table th {
   font-family: var(--font-mono);
   font-weight: 500;

From d7271bd9dbc569391377bb65053db138ffabe6d4 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Fri, 16 Oct 2026 08:58:04 +0200
Subject: [PATCH 32/32] test(console): an animation cut short counts as ended,
 and keyboard tests walk toward the link they want

---
 e2e/console/fixtures.ts     | 4 +++-
 e2e/console/leases.spec.ts  | 1 -
 e2e/console/workers.spec.ts | 8 ++++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/e2e/console/fixtures.ts b/e2e/console/fixtures.ts
index d8ceaf004..c6319be77 100644
--- a/e2e/console/fixtures.ts
+++ b/e2e/console/fixtures.ts
@@ -332,7 +332,9 @@ export const NAV_LABELS = NAV.map((entry) => entry.label);
 // why: pages slide and fade in; an audit or a measurement taken mid-way reads a half-faded colour.
 export async function settled(page: Page): Promise<void> {
   await page.evaluate(() =>
-    Promise.all(document.getAnimations().map((animation) => animation.finished)),
+    Promise.all(
+      document.getAnimations().map((animation) => animation.finished.catch(() => undefined)),
+    ),
   );
 }
 
diff --git a/e2e/console/leases.spec.ts b/e2e/console/leases.spec.ts
index 84e1a4562..0eb3f2d51 100644
--- a/e2e/console/leases.spec.ts
+++ b/e2e/console/leases.spec.ts
@@ -461,7 +461,6 @@ test.describe("the leases page", () => {
       await expect(page.getByRole("navigation", { name: "Breadcrumb" })).toContainText(granted.id);
       await follow(
         page.getByRole("navigation", { name: "Breadcrumb" }).getByRole("link", { name: "Leases" }),
-        "backward",
       );
       expect(new URL(page.url()).pathname).toBe("/leases");
     } finally {
diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index c93560a74..0e6b8b648 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -915,10 +915,13 @@ test.describe("the workers page", () => {
   }) => {
     const tab = browserName === "webkit" ? "Alt+Tab" : "Tab";
     const name = found((await workerList(daemon))[0], "the host's worker").id;
-    const follow = async (link: Locator) => {
+    // why: Firefox does not wrap focus from the page's last control to its first, so a link that
+    // comes before the focused control is reached going backward.
+    const follow = async (link: Locator, direction: "forward" | "backward" = "forward") => {
+      const key = direction === "forward" ? tab : `Shift+${tab}`;
       for (let step = 0; step < 30; step += 1) {
         if (await link.evaluate((element) => element === document.activeElement)) break;
-        await page.keyboard.press(tab);
+        await page.keyboard.press(key);
       }
       await expect(link).toBeFocused();
       await page.keyboard.press("Enter");
@@ -945,6 +948,7 @@ test.describe("the workers page", () => {
 
     await follow(
       page.getByRole("navigation", { name: "Breadcrumb" }).getByRole("link", { name: "Workers" }),
+      "backward",
     );
     await expect(page).toHaveURL(/\/workers$/);
   });