diff --git a/README.md b/README.md
index 0293392..33ce075 100644
--- a/README.md
+++ b/README.md
@@ -676,11 +676,30 @@ All of these work from any terminal on the Mac. Inside a configured `repoDir` yo
 - **Ask what the next tick would do:** `foreman -p widgets next`. The only subcommand that calls
   GitHub; it explains why each open PR is or is not mergeable, and it ignores the `STOP` file.
 - **The page:** `foreman -p widgets page` opens `http://127.0.0.1:<webPort>`, served by the daemon
-  while it runs and bound to localhost only. It carries the same view plus a pipeline table
-  (build → review → validate → CI → merge per in-flight issue), a **Phase** card with a progress
-  bar, a **Needs you** card, an **Owner** card of label gates, and a live event feed per session.
-  Feeds live in `~/.foreman/<name>/activity/<sessionId>.jsonl` and hold tool names and one-line
-  summaries only, never tool inputs or thinking.
+  while it runs and bound to localhost only. A sidebar names the instance and switches between
+  five tabs, each reachable by its own URL fragment (`#dashboard`, `#needs-you`, `#waiting`,
+  `#board`, `#session`):
+  - **Dashboard** — the controls, a banner for every reason the foreman is not taking work (STOP,
+    failed preflight, daily cap, paused phase, stalled session, orphaned child, unfinished
+    bookkeeping), the running session, the in-flight pipeline (build → review → validate → CI →
+    merge per issue) and the live event feed.
+  - **Needs you** — every decision only the owner can make, grouped by the action: approve a
+    plan, sign off a phase, ready to plan, unblock, answer or close. The sidebar badge counts them,
+    Ready to plan excepted.
+  - **Waiting on** — what the foreman is waiting for by itself: CI, review rounds, dependencies,
+    another Mac's claim, the phase gate, and setup problems to fix on GitHub.
+  - **Board** — every open issue, on the project board or not, grouped under its phase epic, with
+    each epic's progress and Pause/Resume, and a model and an effort picker per issue.
+  - **Session** — spend and sessions from `sessions.log` for today, 7 days, 30 days, the whole log
+    or a custom range: a daily chart, spend by role, cost per task with each session's feed, and
+    the daemon's model, daily cap, GitHub budget and tick.
+
+  Each instance gets its own color theme so that several open tabs are easy to tell apart. The
+  first start picks the theme the other instances on this Mac use least; the swatches in the
+  sidebar footer change it (`POST /api/theme`, saved in `state.json`). Feeds live in
+  `~/.foreman/<name>/activity/<sessionId>.jsonl` and hold tool names and one-line summaries only,
+  never tool inputs or thinking. The Session tab reads `GET /api/sessions?from=&to=` (local dates,
+  both optional).
 - **Show the board as it is now:** the page's **Refresh project** button. It drops the cached
   board and wakes the loop, so a Status you set in the GitHub UI shows up within a tick rather
   than at the end of the poll interval. `foreman go` does the waking half only.
@@ -705,7 +724,7 @@ All of these work from any terminal on the Mac. Inside a configured `repoDir` yo
 - **Raise the daily cap:** `foreman -p widgets cap` prints the cap the next tick will enforce and
   where it came from; `foreman -p widgets cap 50` raises it; `cap default` hands control back to
   `foreman.json`. The cap is read per tick, so raising it un-parks a capped daemon immediately.
-  The override survives a restart. The **Tick** card offers the same, confirm-first.
+  The override survives a restart. The page's **Session** tab offers the same, confirm-first.
 - **Change the model:** `foreman -p widgets model` prints what the next session will run as;
   `foreman -p widgets model sonnet` changes it. With the daemon running the change goes through
   the page, which owns `state.json`, and applies at the next dispatch — the session running now
@@ -715,21 +734,22 @@ All of these work from any terminal on the Mac. Inside a configured `repoDir` yo
   builder, reviewer, validator, fix rounds — as that model, outranking both the live override and
   `foreman.json`. The label is the source of truth, so it works from `gh issue edit` too.
 - **Change one task's effort:** every session runs at `high` effort. To run a task at a different
-  level, give it a label: `foreman -p widgets effort xhigh --issue 12`, or use the effort buttons
-  under the task on the page's **Phases** card. This covers builder, reviewer, validator and fix
+  level, give it a label: `foreman -p widgets effort xhigh --issue 12`, or use the issue's effort
+  picker on the page's **Board** tab. This covers builder, reviewer, validator and fix
   rounds. The levels are Claude Code's own: `low`, `medium`, `high`, `xhigh`, `max`. Choosing
   `high` or `default` removes the label. There is no global effort setting.
   `foreman -p widgets effort` prints the default and every task with an effort label;
   `effort --issue 12` prints that task's effort. With the daemon running, a change goes through
-  the page, which only accepts tasks listed on the board. With no daemon, it edits the label on
+  the page, which only accepts issues its Board tab lists. With no daemon, it edits the label on
   GitHub directly. A session already running keeps its effort; the issue's next session uses the
   new one. `gh issue edit 12 --add-label effort:max` works the same way.
-- **Owner gates, from the page:** the **Owner** card lists every open epic with the label gates
-  only a human can open — **Sign off**, **Approve plan**, **Start planning**, **Pause**/**Resume**.
-  Each button confirms the exact label change and wakes the daemon. The same gates are just
+- **Owner gates, from the page:** the **Needs you** tab offers **Approve plan**, **Sign off** and
+  **Start planning** on the epics waiting for them, and the **Board** tab's epic headers offer
+  **Pause**/**Resume**. A phase review issue is shown on its epic's Sign off row. Each button
+  confirms the exact label change and wakes the daemon. The same gates are just
   labels, so `gh issue edit <epic> --add-label <label>` is identical.
-- **Issues waiting on you:** the **Needs you** card lists every open non-epic issue labelled
-  `needs-owner`, `decision` or `blocked`, oldest first. `foreman status` prints the same list.
+- **Issues waiting on you:** the **Needs you** tab lists every open non-epic issue labelled
+  `needs-owner`, `decision` or `blocked`, oldest first, with how long each has waited. `foreman status` prints the same list.
   A `blocked` row has an **Unblock** button: it removes `blocked`, sets Status **Ready** and
   comments `unblocked by owner via foreman@<host>` — fix whatever caused the block first, because
   nothing else about the issue changes.
@@ -826,8 +846,9 @@ jq -s 'map(.costUsd) | add' ~/.foreman/widgets/sessions.log
 ```
 
 A merge appends one line to `merges.log` (`issue`, `pr`, `host`, `claimedAt`, `mergedAt`). The
-merged issue drops out of every later snapshot, so this is what keeps the phase card's cycle time
-computable. Both logs are local caches; losing them only empties those numbers.
+merged issue drops out of every later snapshot, so this is what keeps the phase cycle time on the
+Board tab computable. Each `sessions.log` line also records the issue's `title`, so the Session
+tab can name a task after it has closed. Both logs are local caches; losing them only empties those numbers.
 
 ## 9. Resume and multi-Mac
 
diff --git a/docs/superpowers/plans/2026-10-26-web-redesign.md b/docs/superpowers/plans/2026-10-26-web-redesign.md
new file mode 100644
index 0000000..5c19fa0
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-26-web-redesign.md
@@ -0,0 +1,512 @@
+# Web Page Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the one-screen status page with a Dashboard plus four tabs (Needs you, Waiting on, Board, Session), per-instance color themes and a modern card layout, backed by the data the new tabs need.
+
+**Architecture:** Server first: every new fact the page shows is computed in TypeScript from the snapshot the tick already has or from local logs, stored on `Board` / `StatusReport` (or served by one new `GET /api/sessions`), and unit-tested. Then `src/web.html` is rewritten tab by tab as one vanilla HTML/CSS/JS file with hash routing, rendering those fields.
+
+**Tech Stack:** TypeScript (ESM, Node), zod, vitest, Biome; vanilla HTML/CSS/JS with container queries; Google Fonts (Inter, JetBrains Mono).
+
+**Spec:** `docs/superpowers/specs/2026-10-26-web-redesign-design.md`. Mockups (visual reference only, local to the owner's Mac mini): `/Users/matthewsmith/claude-out/foreman-redesign/.superpowers/brainstorm/85817-1793061231/content/` — `dashboard-v4.html`, `colors-v1.html`, `sidebar-v1.html` (option A), `session-tab-v1.html`, `needs-you-v2.html`, `needs-waiting-v1.html` (Waiting on half), `board-v1.html`. Where spec and mockup disagree, the spec wins.
+
+## Global Constraints
+
+- One file, `src/web.html`, inline CSS and vanilla JS; no framework, bundler or build step. `pnpm build` keeps copying it to `dist/`.
+- Fonts: Inter for text, JetBrains Mono for code-like values, from Google Fonts, with system fallbacks.
+- Tabs selected by `location.hash`: `#dashboard`, `#needs-you`, `#waiting`, `#board`, `#session`; default `#dashboard`.
+- One `/api/status` poll every 3 s. `/api/sessions` is fetched only while the Session tab is open.
+- Every new `StatusReport` / `Board` / `ForemanState` / `SessionLogEntry` field is optional or defaulted, so existing tests and older `state.json` / `sessions.log` files keep working.
+- Nothing repository-specific in `src/`: `grep -rniE "pnpm|supabase|docker|playwright" src roles settings` must still return only `src/repo-config.ts`. No project names in sample text.
+- `foreman.json` is never served or written by the page. Page-set preferences go to `state.json` through `store.patch`.
+- No new GitHub reads. `gh` stays the only GitHub client; every write keeps going through `GitHub` and keeps its server-side allowlist.
+- Every write button keeps today's `window.confirm` text (Stop/Abort keep the armed two-click confirm).
+- Every value interpolated into HTML goes through `esc()`.
+- Contrast: every solid button ≥ 4.5:1 text contrast. Sign off green `#287A3A`; light teal primary `#0B7285`.
+- Style: ESM, `.ts` import extensions, double quotes, semicolons, 100-column Biome, `noUncheckedIndexedAccess`; tests next to code as `*.test.ts`; commit messages `type(scope): summary`.
+- Before every commit: `pnpm lint && pnpm typecheck && pnpm test` green.
+
+## Review Focus
+
+- **No state, no log, no board** (a fresh instance, or a daemon that has never ticked): every tab renders an empty state instead of throwing; `/api/sessions` returns zeros. Pinned by tests in Tasks 6 and 7.
+- **An older `state.json`** written before this change (no `theme`, `issues`, `groups`, owner `since`/`review`): `readState` still parses it and the page still renders. Pinned in Tasks 2, 4 and 6.
+- **A bad custom date range** (`from` after `to`, `2026-13-01`, `../etc`): `/api/sessions` answers 400, never 500 and never a partial result. Pinned in Task 7.
+- **An issue title containing HTML** (`<img src=x onerror=…>`): shown as text on every tab. Pinned by the `esc(` checks in Tasks 8–11 and the dogfood step in Task 12.
+- **The 3 s re-render while the owner is mid-action**: an open Board picker, an expanded Session row, a pinned feed or a scrolled tab must survive a poll. Pinned by the state-set checks in Tasks 10 and 11 and the dogfood step in Task 12.
+
+---
+
+### Task 1: Record the issue title in `sessions.log`
+
+**Files:**
+- Modify: `src/sessions.ts` (`SessionLogEntry`, `readSessions`)
+- Modify: `src/loop.ts:533-543` and `src/loop.ts:574-584` (the two `appendSession` calls)
+- Test: `src/sessions.test.ts`, `src/loop.test.ts`
+
+**Interfaces:**
+- Produces: `SessionLogEntry.title?: string` — the issue's (or, for a planner/phase-closer, the epic's) title when the session ran. Absent on older lines.
+
+- [ ] **Step 1: Write the failing tests**
+
+In `src/sessions.test.ts`:
+```ts
+it("reads a title when present and leaves it undefined on older lines", () => {
+  // write two lines: one with "title":"feat: a grid", one without
+  const [withTitle, without] = readSessions(dir);
+  expect(withTitle?.title).toBe("feat: a grid");
+  expect(without?.title).toBeUndefined();
+});
+```
+In `src/loop.test.ts`, extend "sessions.log records the model, turns, duration, denials and subtype" (or add a sibling test) so the issue is `issue({ number: 1, title: "feat: a grid" })` and the parsed line `toMatchObject({ title: "feat: a grid" })`.
+
+- [ ] **Step 2: Run them to verify they fail**
+
+Run: `pnpm test -- src/sessions.test.ts src/loop.test.ts`
+Expected: FAIL — `title` undefined.
+
+- [ ] **Step 3: Implement**
+
+Add `title?: string` to `SessionLogEntry` with a doc comment ("the issue title at the time; absent on lines written before titles were recorded"). In `readSessions`, set `title` only when `typeof j.title === "string"`. In both `appendSession` calls in `src/loop.ts`, add `title: r.issue.title`.
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `pnpm test -- src/sessions.test.ts src/loop.test.ts`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/sessions.ts src/sessions.test.ts src/loop.ts src/loop.test.ts
+git commit -m "feat(sessions): record the issue title on each sessions.log line"
+```
+
+---
+
+### Task 2: `Board.issues` and `Board.groups` for the Board tab
+
+**Files:**
+- Create: `src/board-issues.ts`, `src/board-issues.test.ts`
+- Modify: `src/state-file.ts` (new schemas; `BoardSchema` fields)
+- Modify: `src/board.ts` (`describeBoard` fills them)
+- Modify: `src/status.ts` (`describeStatus` carries them into the merged board)
+- Test: `src/board.test.ts`, `src/status.test.ts`, `src/state-file.test.ts`
+
+**Interfaces:**
+- Consumes: `taskNumbersOf(e: Epic, issues: Issue[]): Set<number>` (`src/phase-progress.ts`), `parseDependsOn(body)`, `phaseOf(labels)` (`src/github.ts`), `MODEL_LABEL_PREFIX`, `EFFORT_LABEL_PREFIX`.
+- Produces (in `src/state-file.ts`):
+  ```ts
+  export const BoardIssueSchema = z.object({
+    issue: z.number().int(),
+    title: z.string(),
+    status: z.string().nullable(),            // null = not on the project board ("Off board")
+    labels: z.array(z.string()),              // display subset: "blocked", "size:*", "area:*"
+    group: z.string(),                        // BoardGroup.key this issue is listed under
+    pr: z.number().int().nullable(),          // open non-draft PR whose `issue` is this one
+    dependsOn: z.array(z.number().int()),
+    openDependsOn: z.array(z.number().int()), // the subset still open in the snapshot
+    blocked: z.boolean(),
+    model: z.string().nullable(),             // `model:<name>` label value
+    effort: z.string().nullable(),            // `effort:<level>` label value
+  });
+  export const BoardGroupSchema = z.object({
+    key: z.string(),                          // "epic:<n>" | "phase:<n>:unlinked" | "phase:<n>:closed" | "none"
+    kind: z.enum(["epic", "unlinked", "closed", "none"]),
+    epic: z.number().int().nullable(),
+    phase: z.number().nullable(),
+    title: z.string(),
+    state: z.enum(["planning", "plan_waiting", "building", "signoff_waiting", "not_started"]).nullable(),
+    paused: z.boolean(),
+    doneTasks: z.array(z.number().int()),     // closed task numbers (taskNumbersOf minus open ones)
+  });
+  // BoardSchema gains:
+  issues: z.array(BoardIssueSchema).default([]),
+  groups: z.array(BoardGroupSchema).default([]),
+  ```
+  and `export function describeBoardIssues(s: Snapshot): { issues: BoardIssue[]; groups: BoardGroup[] }` in `src/board-issues.ts`.
+
+Rules (from the spec, "Data and API changes" 4 and "Board"):
+- `issues`: every open non-epic issue in `s.issues`, on the board or not.
+- Grouping, first match wins: (1) the open epic whose `taskNumbersOf` set has the issue → `epic:<n>`; (2) else the one open epic whose `phase` equals the issue's `phase:<N>` label, when exactly one exists → `epic:<n>`; (3) several open epics share that phase → `phase:<N>:unlinked`, title `Phase <N> · not linked to an epic`; (4) no open epic has that phase → `phase:<N>:closed`, title `Phase <N> · epic closed`; (5) else `none`, title `No phase`.
+- Every open epic gets a group, even with no open issues. Epic title from its issue.
+- `state` from epic labels: `needs-owner` + `plan-approved` → `signoff_waiting`; `needs-owner` alone → `plan_waiting`; `plan-approved` → `building`; `agent-ready` → `planning`; else `not_started`. `paused` = `foreman:pause`. Non-epic groups: `state` null, `paused` false.
+- Group order: epic groups by `phase` then epic number; then `unlinked` and `closed` groups by phase; `none` last. Issues ordered by number within a group.
+
+- [ ] **Step 1: Write the failing tests** in `src/board-issues.test.ts` (use `issue`, `epic`, `snapshot`, `pr` from `test/helpers.ts`):
+  - `"lists open non-epic issues, off-board ones with status null"` — an issue with `status: null` appears with `status: null`.
+  - `"groups by taskNumbersOf, including a Parent epic line"` — epic 10 with `taskNumbers: []`, issue body `Parent epic: #10` → `group: "epic:10"`.
+  - `"falls back to the single open epic with the issue's phase label"` — one open epic `phase:7`, issue labelled `phase:7` with no parent → `epic:<that epic>`.
+  - `"puts a shared-phase issue in an unlinked group"` — two open epics with `phase: 10`, issue `phase:10` unlinked → group `phase:10:unlinked`, title `"Phase 10 · not linked to an epic"`.
+  - `"puts an issue whose phase has no open epic in a closed group"` → `phase:4:closed`, `"Phase 4 · epic closed"`.
+  - `"puts an issue with neither in No phase"` → `none`, `"No phase"`.
+  - `"gives every open epic a group with its state, even with no issues"` — labels → each of the five `state` values and `paused: true` for `foreman:pause`.
+  - `"fills pr, dependsOn, openDependsOn, blocked, model, effort and the display labels"` — PR `pr({ number: 276, issue: 268 })`; body `## Depends on\n- #269\n- #250` with 269 open, 250 absent → `openDependsOn: [269]`; labels `["blocked","size:L","area:web","agent-ready","model:sonnet","effort:xhigh","phase:7"]` → `labels: ["blocked","size:L","area:web"]`, `model: "sonnet"`, `effort: "xhigh"`.
+  - `"lists closed task numbers as doneTasks"` — epic `taskNumbers: [1,2,3]`, only 3 open → `doneTasks: [1,2]`.
+
+  In `src/board.test.ts`: `describeBoard` output has `issues` and `groups` equal to `describeBoardIssues(s)`. In `src/status.test.ts`: a stored board with `issues`/`groups` comes back on `report.board`. In `src/state-file.test.ts`: a `state.json` board without `issues`/`groups` parses with both `[]`.
+
+- [ ] **Step 2: Run to verify failure**
+
+Run: `pnpm test -- src/board-issues.test.ts src/board.test.ts src/status.test.ts src/state-file.test.ts`
+Expected: FAIL — module / fields missing.
+
+- [ ] **Step 3: Implement** the schemas, `describeBoardIssues`, the two fields in `describeBoard`, and `issues: stored?.issues ?? [], groups: stored?.groups ?? []` in the merged board in `describeStatus`. Fix any test fixture that builds a full `Board` literal by adding `issues: [], groups: []`.
+
+- [ ] **Step 4: Run to verify pass**
+
+Run: `pnpm test`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/board-issues.ts src/board-issues.test.ts src/state-file.ts src/board.ts src/status.ts src/*.test.ts
+git commit -m "feat(board): every open issue grouped under its phase epic"
+```
+
+---
+
+### Task 3: Board issues are the model/effort picker allowlist
+
+**Files:**
+- Modify: `src/task-model.ts` (`phaseTasks` → `pickerTasks`, `applyTaskModelToBoard`), `src/task-effort.ts` (`applyTaskEffortToBoard`), `src/web.ts` (`WebDeps`), `src/cli/daemon.ts`
+- Test: `src/task-model.test.ts`, `src/task-effort.test.ts`, `src/web.test.ts`
+
+**Interfaces:**
+- Consumes: `Board.issues` (Task 2).
+- Produces: `export function pickerTasks(board: Board | null): { issue: number; model: string | null; effort: string | null }[]` in `src/task-model.ts` — `board.issues` when non-empty, else today's open phase tasks (an older board before its first new tick). `WebDeps.phaseTasks` is renamed `WebDeps.pickerTasks` with that return type.
+
+- [ ] **Step 1: Write the failing tests**
+  - `src/task-model.test.ts`: `"pickerTasks lists every board issue, off-board included"`; `"pickerTasks falls back to open phase tasks when issues is empty"`; `"applyTaskModelToBoard updates board.issues too"`.
+  - `src/task-effort.test.ts`: `"applyTaskEffortToBoard updates board.issues too"`.
+  - `src/web.test.ts`: `/api/task-model` and `/api/task-effort` accept an issue present only in `pickerTasks()` (an off-board issue) and still answer 400 `"#999 is not a task on the board"` for one that is absent.
+
+- [ ] **Step 2: Run to verify failure**
+
+Run: `pnpm test -- src/task-model.test.ts src/task-effort.test.ts src/web.test.ts`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement** `pickerTasks`; map `issues` in both `apply…ToBoard` functions; rename the dep in `src/web.ts` and its two allowlist checks; in `src/cli/daemon.ts` use `pickerTasks(store.get().board)` for the allowlist and for `current` in `setTaskModel` / `setTaskEffort`.
+
+- [ ] **Step 4: Run to verify pass** — `pnpm test` → PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/task-model.ts src/task-effort.ts src/web.ts src/cli/daemon.ts src/*.test.ts
+git commit -m "feat(web): model and effort pickers for every issue on the board"
+```
+
+---
+
+### Task 4: Owner wait time and phase-review pairing
+
+**Files:**
+- Create: `src/review-pairing.ts`, `src/review-pairing.test.ts`
+- Modify: `src/state-file.ts` (`OwnerItemSchema`, `NeedsYouItemSchema`), `src/owner.ts` (`ownerItems`), `src/needs-you.ts` (`needsYouItems`)
+- Test: `src/owner.test.ts`, `src/needs-you.test.ts`, `src/state-file.test.ts`
+
+**Interfaces:**
+- Produces:
+  ```ts
+  // OwnerItemSchema gains
+  since: z.string().nullable().default(null),     // the epic issue's updatedAt
+  review: z.number().int().nullable().default(null), // paired phase review issue, sign_off epics only
+  // NeedsYouItemSchema gains
+  reviewOf: z.number().int().nullable().default(null), // epic this review issue is paired with
+  phaseReview: z.boolean().default(false),         // title matches /^Phase .+ review:/
+  ```
+  `export function pairReviews(s: Snapshot): Map<number, number>` in `src/review-pairing.ts` — review issue number → open epic number.
+
+Pairing rule (spec, Needs you): (1) an open epic's own comment matching `/^Phase review: #(\d+)/m` pairs that issue; (2) otherwise, a needs-owner issue whose title matches `/^Phase .+ review: (.+)$/` pairs with the open epic whose title, with a leading `/^Phase [^:]+:\s*/` removed, appears in the review's title. Never by `phase:<N>` alone. Comment wins over title.
+
+- [ ] **Step 1: Write the failing tests** in `src/review-pairing.test.ts`:
+  - `"pairs by the epic's Phase review comment"` — epic 514 comment `Phase review: #571` → `get(571) === 514`.
+  - `"pairs by title with the epic's Phase prefix removed"` — epic `Phase 10b: Reports and exports`, review `Phase 10b review: Reports and exports` → paired.
+  - `"pairs a review whose title repeats the epic's full title"` — epic `Phase 10c: Team plans`, review `Phase 10c review: Phase 10c: Team plans` → paired.
+  - `"does not pair two epics that share a phase number by label"` — epics 10a/10b both `phase:10`, review titled for 10b → paired only with 10b.
+  - `"leaves a review unpaired when no open epic matches"`.
+
+  In `src/owner.test.ts`: `ownerItems` sets `since` to the epic issue's `updatedAt` and `review` on a sign_off epic. In `src/needs-you.test.ts`: `reviewOf` set for a paired review, `phaseReview: true` with `reviewOf: null` for an unpaired one. In `src/state-file.test.ts`: an older board's owner/needsYou rows parse with the defaults.
+
+- [ ] **Step 2: Run to verify failure** — `pnpm test -- src/review-pairing.test.ts src/owner.test.ts src/needs-you.test.ts src/state-file.test.ts` → FAIL.
+
+- [ ] **Step 3: Implement** `pairReviews`; call it from `ownerItems` and `needsYouItems`.
+
+- [ ] **Step 4: Run to verify pass** — `pnpm test` → PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/review-pairing.ts src/review-pairing.test.ts src/state-file.ts src/owner.ts src/needs-you.ts src/*.test.ts
+git commit -m "feat(needs-you): owner wait time and phase review pairing"
+```
+
+---
+
+### Task 5: Attention: badge counts, banners and Waiting on rows
+
+**Files:**
+- Create: `src/attention.ts`, `src/attention.test.ts`
+- Modify: `src/status.ts` (`StatusReport.attention`)
+- Test: `src/status.test.ts`
+
+**Interfaces:**
+- Consumes: `Board` with `owner`, `needsYou` (Task 4 fields), `waiting`.
+- Produces:
+  ```ts
+  export const BANNER_KINDS = ["stop", "preflight", "cap", "paused"] as const;
+  export interface Attention {
+    needsYou: number;      // Needs you badge
+    waiting: number;       // Waiting on badge (= waitRows.length)
+    banners: WaitItem[];   // BANNER_KINDS items, in WAIT_KINDS order
+    waitRows: WaitItem[];  // what the Waiting on tab lists
+  }
+  export function describeAttention(board: Board | null): Attention;
+  // StatusReport gains: attention: Attention
+  ```
+
+Rules (spec, Shell badges and Waiting on):
+- `needsYou` = owner items offering `approve_plan` or `sign_off` + `needsYou` items with `reviewOf === null`. `start_planning` not counted.
+- `waitRows` = every waiting item except banner kinds, except a `human` item whose subject (`#N` or `epic #N`) names an issue or epic that is a Needs you row (any owner item with `approve_plan`, `sign_off` or `start_planning`, or any `needsYou` issue), with `dependency` items for the same subject merged into one: detail `#270 waits on #268 and #269` (three or more: `#a, #b and #c`), `since` the earliest non-null.
+
+- [ ] **Step 1: Write the failing tests** in `src/attention.test.ts`:
+  - `"counts approve and sign-off epics and unpaired needs-you issues, not start_planning"` — owner items: one `["approve_plan","pause"]`, one `["sign_off","pause"]`, one `["start_planning","pause"]`, one `["pause"]`; needsYou: three items, one with `reviewOf: 514` → `needsYou: 4`.
+  - `"moves stop, preflight, cap and paused into banners"`.
+  - `"drops human waits whose subject is on Needs you and keeps the rest"` — `epic #93 awaits owner sign-off` dropped; `#41 is agent-ready but Status Backlog` kept.
+  - `"merges dependency rows for one issue"` — two items for `#270` → one with detail `"#270 waits on #268 and #269"`.
+  - `"is all zeros and empty for a null board"`.
+
+  In `src/status.test.ts`: `describeStatus` returns `attention` computed from the merged board (live `stop` wait appears in `banners`).
+
+- [ ] **Step 2: Run to verify failure** — `pnpm test -- src/attention.test.ts src/status.test.ts` → FAIL.
+- [ ] **Step 3: Implement** `describeAttention`; set `attention: describeAttention(board)` in `describeStatus`.
+- [ ] **Step 4: Run to verify pass** — `pnpm test` → PASS.
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/attention.ts src/attention.test.ts src/status.ts src/status.test.ts
+git commit -m "feat(status): badge counts, banners and de-duplicated waiting rows"
+```
+
+---
+
+### Task 6: Per-instance theme and instance name
+
+**Files:**
+- Create: `src/theme.ts`, `src/theme.test.ts`
+- Modify: `src/state-file.ts` (`ForemanStateSchema.theme`, `initialState`), `src/status.ts` (`StatusInput.instance`, `StatusReport.instance`, `StatusReport.theme`), `src/web.ts` (`POST /api/theme`, `WebDeps.setTheme`), `src/cli/daemon.ts`
+- Test: `src/state-file.test.ts`, `src/status.test.ts`, `src/web.test.ts`
+
+**Interfaces:**
+- Produces:
+  ```ts
+  export const THEMES = ["indigo", "violet", "teal", "mono"] as const;
+  export const ThemeSchema = z.enum(THEMES);
+  export type ThemeName = z.infer<typeof ThemeSchema>;
+  export function nameHash(name: string): number;          // stable 32-bit (FNV-1a)
+  export function pickTheme(name: string, taken: readonly ThemeName[]): ThemeName;
+  // ForemanStateSchema gains: theme: ThemeSchema.nullable().default(null)
+  // initialState(o) accepts theme?: ThemeName | null
+  // StatusInput gains: instance?: string   (default "")
+  // StatusReport gains: instance: string; theme: { current: ThemeName; choices: readonly ThemeName[] }
+  // WebDeps gains: setTheme: (theme: ThemeName) => Promise<string>
+  ```
+- `pickTheme`: the themes used least often in `taken`; among those, `candidates[nameHash(name) % candidates.length]`.
+- `StatusReport.theme.current` = `state.theme ?? pickTheme(instance, [])` (a daemon that has never run still gets a stable color).
+- Daemon start: `theme: previous?.theme ?? pickTheme(instance.name, others)`, where `others` are the non-null `readState(i.dir)?.theme` of every other entry in `listInstances()`. Saved immediately (it is part of `initialState`), so it never shifts on its own.
+- `POST /api/theme` body `{ theme: ThemeName }`; anything else → 400 `"bad theme"`; non-POST → 405. Handler: `store.patch({ theme })`, returns `"theme is now <name>"`. (The spec's `"default"` value is dropped: a theme is always saved, so there is no override to clear.)
+
+- [ ] **Step 1: Write the failing tests**
+  - `src/theme.test.ts`: `"pickTheme is stable for a name"`; `"pickTheme takes the only unused theme"` (`taken = ["indigo","violet","teal"]` → `"mono"`); `"four instances in turn get four different themes"` (fold `pickTheme` over four names, accumulating `taken`); `"a fifth instance repeats one"`.
+  - `src/state-file.test.ts`: older state parses with `theme: null`; `initialState({ …, theme: "teal" }).theme === "teal"`.
+  - `src/status.test.ts`: `instance` echoed; `theme.current` from state; with `state: null`, `theme.current === pickTheme(instance, [])`.
+  - `src/web.test.ts`: `POST /api/theme {"theme":"violet"}` → 200 and `setTheme` called with `"violet"`; `{"theme":"pink"}` → 400; `GET` → 405.
+
+- [ ] **Step 2: Run to verify failure** — `pnpm test -- src/theme.test.ts src/state-file.test.ts src/status.test.ts src/web.test.ts` → FAIL.
+- [ ] **Step 3: Implement** the above; pass `instance: instance.name` into `describeStatus` in the daemon.
+- [ ] **Step 4: Run to verify pass** — `pnpm test` → PASS.
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/theme.ts src/theme.test.ts src/state-file.ts src/status.ts src/web.ts src/cli/daemon.ts src/*.test.ts
+git commit -m "feat(web): per-instance color theme, distinct by default"
+```
+
+---
+
+### Task 7: Session history endpoint
+
+**Files:**
+- Create: `src/session-history.ts`, `src/session-history.test.ts`
+- Modify: `src/web.ts` (`GET /api/sessions`, `WebDeps.sessions`), `src/cli/daemon.ts`
+- Test: `src/web.test.ts`
+
+**Interfaces:**
+- Consumes: `SessionLogEntry.title` (Task 1), `Board.issues` (Task 2), `localDate` (`src/preflight.ts`).
+- Produces:
+  ```ts
+  export interface SessionRange { from: string | null; to: string | null } // YYYY-MM-DD, local, inclusive
+  export interface SessionHistory {
+    from: string | null; to: string | null;
+    totals: { spendUsd: number; sessions: number; issues: number };
+    daily: { date: string; spendUsd: number; sessions: number }[];
+    byRole: { role: string; spendUsd: number; sessions: number }[];
+    byIssue: {
+      issue: number; title: string; roles: string[]; sessions: number;
+      lastAt: string; costUsd: number; entries: SessionLogEntry[];
+    }[];
+  }
+  export function describeSessionHistory(
+    entries: SessionLogEntry[], range: SessionRange, openTitles: ReadonlyMap<number, string>,
+  ): SessionHistory;
+  export function boardTitles(board: Board | null): Map<number, string>; // issues, owner, needsYou, pipeline
+  export function parseRange(from: string | null, to: string | null): SessionRange | null; // null = invalid
+  // WebDeps gains: sessions: (range: SessionRange) => SessionHistory
+  ```
+
+Rules (spec, Session and Data 8):
+- Filter by `localDate(new Date(e.t))` within `[from, to]`; a null bound is open.
+- Count per log line, cost summed per line (same as `todayStats`).
+- `daily`: one row per local date from `from ?? first entry's date` to `to ?? last entry's date`, zero rows filled; `[]` when no entries in range.
+- `byRole` sorted by `spendUsd` desc; `byIssue` sorted by `costUsd` desc, `entries` newest first, `roles` in first-seen order.
+- Title: the newest entry in the whole log (not only the range) for that issue with a `title`; else `openTitles`; else `#N`.
+- `parseRange`: each present bound must match `/^\d{4}-\d{2}-\d{2}$/` and be a real date; `from <= to`; otherwise `null`.
+- Route: `GET /api/sessions?from=&to=` → `parseRange` null → 400 `"bad range"`; else 200 with `d.sessions(range)`. Same auth/host check as every route.
+- Daemon: `sessions: (range) => describeSessionHistory(readSessions(STATE_DIR), range, boardTitles(store.get().board))`.
+
+- [ ] **Step 1: Write the failing tests** in `src/session-history.test.ts`:
+  - `"totals, daily, byRole and byIssue for the whole log"` (three entries over two days, two roles, two issues; assert exact numbers).
+  - `"fills zero days between the first and last entry"`.
+  - `"filters by an inclusive local-date range"`.
+  - `"takes a title from the newest titled line, then open titles, then #N"`.
+  - `"is zeros and empty arrays for no entries"`.
+  - `"parseRange rejects a malformed date, a non-date and from after to"` (`"2026-13-01"`, `"../etc"`, `from: "2026-10-27", to: "2026-10-01"` → `null`).
+
+  In `src/web.test.ts`: `GET /api/sessions` → 200 with `sessions` called with `{ from: null, to: null }`; `?from=2026-10-01&to=2026-10-26` passes the range through; `?from=nope` → 400.
+
+- [ ] **Step 2: Run to verify failure** — `pnpm test -- src/session-history.test.ts src/web.test.ts` → FAIL.
+- [ ] **Step 3: Implement** the module, the route and the daemon dep.
+- [ ] **Step 4: Run to verify pass** — `pnpm test` → PASS.
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/session-history.ts src/session-history.test.ts src/web.ts src/cli/daemon.ts src/web.test.ts
+git commit -m "feat(web): session cost history endpoint"
+```
+
+---
+
+### Task 8: Page shell, themes and the Dashboard
+
+**Files:**
+- Modify (rewrite): `src/web.html`
+- Test: `src/web.test.ts` (the `describe("web.html", …)` block)
+
+**Interfaces:**
+- Consumes: `StatusReport` fields `instance`, `theme`, `attention`, `current`, `board.pipeline`, `nowPhase`, `tick`, `stopPresent`, `orphan`, `unfinished`, `stopping`, `daemon`, `uptimeMinutes`, `pid`, `lastPlan`; `POST /api/theme`; existing `/api/go|stop|abort|refresh|next|feed`.
+- Produces (for Tasks 9–11, in the page script): `const $ = …`, `const esc = …`, `function route()` reading `location.hash`, `function toast(message, isError)`, one `<section data-tab="…">` per tab, `let feedSession`, `let feedPinned`, a `function pinFeed(sessionId)` that switches to `#dashboard` and pins the Feed, and a `function renderAll(r)` that each later task extends with its tab's renderer.
+
+Spec sections to implement: Shell (layout, sidebar header option A, nav with icons, badges from `r.attention`, footer with pid and theme swatches, toast, narrow layout via container queries at about 760 px and 460 px), Themes (token table; light sets; `prefers-color-scheme`; status colors; mono active-stage `#5B8DEF`; pale accent never a button fill), Dashboard (header row and button groups, banners from `r.attention.banners` plus stalled / orphan / unfinished / stopping / UNKNOWN, Compute next card, Now card, Pipeline cards with the five-dot track in a fixed-width column and fixed-width tag column, Feed compact rows with "Back to live" when pinned).
+
+- [ ] **Step 1: Rewrite the failing `web.html` tests.** Replace the existing string checks with:
+  - each tab: `expect(html).toContain('data-tab="dashboard"')` … for all five, and `location.hash`.
+  - themes: contains `data-theme="indigo"` handling and each value `#4263EB`, `#6E56CF`, `#22B8CF`, `#EDEDEF`, `#3B5BDB`, `#0B7285`, `#5B8DEF`; `prefers-color-scheme`; `@container`.
+  - `fetch("/api/theme"`, `fetch("/api/next")`, `fetch("/api/refresh"`, `/api/feed?session=`, `const esc =`, `r.attention`, `Back to live`, `no state.json: restart the daemon`, `run ctl abort`, `Confirm ${cmd}?`.
+  - gone: `expect(html).not.toContain('id="tick"')`, same for `id="recent"`, `id="phases"`, `id="owner"`.
+- [ ] **Step 2: Run to verify failure** — `pnpm test -- src/web.test.ts` → FAIL.
+- [ ] **Step 3: Write the page** shell and Dashboard. Other tabs render a placeholder section for now. Keep the Stop/Abort `armed()` behaviour and the feed auto-scroll rule as they are today.
+- [ ] **Step 4: Run to verify pass** — `pnpm test -- src/web.test.ts` → PASS; then `pnpm lint && pnpm typecheck && pnpm test`.
+- [ ] **Step 5: Check it renders.** `pnpm build`, then serve `dist/web.html` against a recorded status (or a dry-run daemon) and look at it at 1400 px and 400 px wide; dots line up across cards, track drops to its own row when narrow, Go button readable in dark mode.
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/web.html src/web.test.ts
+git commit -m "feat(web): dashboard, navigation sidebar and per-instance themes"
+```
+
+---
+
+### Task 9: Needs you and Waiting on tabs
+
+**Files:**
+- Modify: `src/web.html`, `src/web.test.ts`
+
+**Interfaces:**
+- Consumes: `board.owner` (`since`, `review`, `actions`), `board.needsYou` (`reviewOf`, `phaseReview`, `labels`, `since`), `board.phases` (progress for Sign off rows), `r.attention`; `POST /api/owner`, `POST /api/unblock`.
+
+Spec sections: Needs you (group order Approve a plan → Sign off a phase → Ready to plan → Unblock → Answer or close; wait time large, amber over 30 days; sub-lines; group dots; button classes: Approve solid theme primary, Sign off solid `#287A3A`, Start planning amber tint, Unblock neutral, Open ↗ ghost link; a paired review shows as a link on its epic's Sign off row and is not its own row; unpaired `phaseReview` rows say "epic already closed"); Waiting on (green "Nothing stops new claims" line or the banners; groups CI, Review cycle, Dependencies, Another Mac, Phase gate, Fix on GitHub from `r.attention.waitRows`; link row to Needs you with its count).
+
+- [ ] **Step 1: Write the failing tests:** the five group titles appear in order (`indexOf` strictly increasing); `Nothing stops new claims`; `Fix on GitHub`; `epic already closed`; `#287A3A`; today's confirm texts are kept: `` `Sign off #${n}?` ``, `Approve the plan on #`, `` `Start planning #${n}?` ``, `` `Unblock #${issue}?` ``; `fetch("/api/owner"`, `fetch("/api/unblock"`.
+- [ ] **Step 2: Run to verify failure** — `pnpm test -- src/web.test.ts` → FAIL.
+- [ ] **Step 3: Implement** both tabs.
+- [ ] **Step 4: Run to verify pass**, then the full gate.
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/web.html src/web.test.ts
+git commit -m "feat(web): Needs you and Waiting on tabs"
+```
+
+---
+
+### Task 10: Board tab
+
+**Files:**
+- Modify: `src/web.html`, `src/web.test.ts`
+
+**Interfaces:**
+- Consumes: `board.groups`, `board.issues`, `board.phases` (progress facts by epic), `board.pipeline` (hints such as `validator failed · fix round 2`), `r.lastPlan` (first `claim#N` → "next to claim"), `r.model.choices`, `r.effort.levels`; `POST /api/task-model`, `POST /api/task-effort`, `POST /api/owner` (`pause` / `unpause`).
+
+Spec section: Board (top bar with count line, search, Status filter including Off board with counts, Show done; epic card header with eyebrow, title, state chip, Pause/Resume; facts line; task table with labels sub-line and hint, Status dot colors, PR, model and effort dropdown pickers highlighting non-default values, effort menu marking `high` as default; `▸ N done` row listing linked numbers; dimmed `closed` groups without Pause).
+
+- [ ] **Step 1: Write the failing tests:** `Off board`; `Show done`; `esc(g.title)` (group titles come from the server and are escaped); `fetch("/api/task-model"`, `fetch("/api/task-effort"`; confirm texts kept: `Run every foreman session on #` and `A session running now keeps the effort it started with`; `` `Pause #${n}?` ``; the UI-state sets survive polls: `const openPicker` and `const openDone` (or the names chosen) declared at top level, not inside the renderer.
+- [ ] **Step 2: Run to verify failure** — FAIL.
+- [ ] **Step 3: Implement** the tab. Search and filter state live in top-level variables so a poll re-render keeps them; an open picker stays open across a re-render.
+- [ ] **Step 4: Run to verify pass**, then the full gate.
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/web.html src/web.test.ts
+git commit -m "feat(web): Board tab with every open issue and per-task pickers"
+```
+
+---
+
+### Task 11: Session tab
+
+**Files:**
+- Modify: `src/web.html`, `src/web.test.ts`
+
+**Interfaces:**
+- Consumes: `GET /api/sessions` (Task 7), `pinFeed(sessionId)` (Task 8), `r.model`, `r.cap`, `r.today`, `r.budget`, `r.tick`, `r.launchdInstalled`, `r.recent[0].sessionId`; `POST /api/model`, `POST /api/cap`.
+
+Spec section: Session (range segmented control Today / 7 days / 30 days / All / Custom with local dates; four totals tiles with spend per session computed page-side; Daily spend single-series bar chart — accent bars, 4 px rounded tops, 2 px gap, recessive `$` grid, peak label, per-bar hover tooltip with date, cost and session count, no legend; By role bars; Cost by task table, first ten rows then "Show all N", expandable rows with View feed → `pinFeed`; Daemon card with today's model and cap controls and their confirm texts, GitHub budget, last/next tick, backoff, launchd). Fetch `/api/sessions` on tab open, on range change, and when `r.recent[0]?.sessionId` changes.
+
+- [ ] **Step 1: Write the failing tests:** `` fetch(`/api/sessions ``; the five range labels; `View feed`; `Show all`; kept confirm texts `` `Run foreman sessions as ${model}?` `` and `Set the daily session cap to`; `fetch("/api/model"`, `fetch("/api/cap"`; an expanded-rows set declared at top level.
+- [ ] **Step 2: Run to verify failure** — FAIL.
+- [ ] **Step 3: Implement** the tab.
+- [ ] **Step 4: Run to verify pass**, then the full gate.
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/web.html src/web.test.ts
+git commit -m "feat(web): Session tab with spend history and daemon controls"
+```
+
+---
+
+### Task 12: README and live check
+
+**Files:**
+- Modify: `README.md` (the section describing the status page)
+
+- [ ] **Step 1: Update `README.md`**: describe the Dashboard and the four tabs, the theme picker, `GET /api/sessions` and `POST /api/theme`, and that the Tick/Recent/Phase/Owner panels moved.
+- [ ] **Step 2: Full gate** — `pnpm lint && pnpm typecheck && pnpm test && pnpm build` → all green; `grep -rniE "pnpm|supabase|docker|playwright" src roles settings` → only `src/repo-config.ts`.
+- [ ] **Step 3: Ask the owner before touching a live daemon.** Restarting an instance's daemon is outward-facing; get a yes and which instance. Then `npm link` (once), `pnpm build`, `foreman -p <name> stop`, `foreman -p <name> start`.
+- [ ] **Step 4: Look at every tab** on the live page (`http://mini:<webPort>`, laptop and phone width, dark and light): banners appear for a STOP file (`foreman -p <name> stop` then check, then `go`); an issue title with `<b>` renders as text; open a Board picker and expand a Session row, wait two polls, both still open; pick a theme swatch and reload.
+- [ ] **Step 5: Commit**
+
+```bash
+git add README.md
+git commit -m "docs(readme): the redesigned status page"
+```
diff --git a/docs/superpowers/specs/2026-10-26-web-redesign-design.md b/docs/superpowers/specs/2026-10-26-web-redesign-design.md
new file mode 100644
index 0000000..15836ed
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-26-web-redesign-design.md
@@ -0,0 +1,385 @@
+# Web page redesign
+
+Status: final draft, open questions answered · 2026-10-26
+
+## Intent
+
+The status page (`src/web.html`, served by `src/web.ts`) shows everything on one screen: a main
+column (Now, Pipeline, Feed) and a right sidebar of six panels (Phase, Owner, Needs you, Waiting
+on, Tick, Recent). The owner looks at the header, the control buttons, Now, Pipeline and Feed. Of
+the right sidebar, only Needs you is checked regularly; the rest is noise on the screen they open
+most.
+
+The redesign keeps the screen the owner uses as a clean **Dashboard** and moves everything else
+behind a left navigation sidebar with four more tabs: **Needs you**, **Waiting on**, **Board** and
+**Session**. It also modernises the look (more room per item, larger type, cards) and gives each
+foreman instance its own color theme so that several instances open in several browser tabs are
+easy to tell apart.
+
+## Goals
+
+- A Dashboard that answers "what is the foreman doing right now" at a glance: daemon state,
+  controls, the running session, the in-flight pipeline and the live feed.
+- Needs you as its own tab with a red count badge, grouped by the action the owner takes.
+- A whole-board overview (every open issue, grouped by phase epic) with the per-task model and
+  effort pickers.
+- A Session tab with accumulated spend and per-task cost history, filterable by date.
+- A per-instance color theme, with the instance name prominent at the top of the sidebar.
+- Readable on a laptop and usable at phone width.
+
+## Non-goals
+
+- No new foreman behaviour. Every action the page can take today it can still take, with the same
+  confirmation text and the same server-side allowlists; no new kind of GitHub write.
+- No change to the daemon loop, the scheduler, the ledger grammar or the roles, except recording
+  the issue title in each `sessions.log` entry (see "Owner decisions").
+- No frontend framework, bundler or build step for the page.
+- No multi-instance overview page. Each instance keeps its own page on its own port.
+
+## Anti-goals
+
+- A page that looks modern but hides something the owner needs when the foreman is stuck. Every
+  reason the foreman is idle (STOP file, failed preflight, daily cap, paused phase, stalled
+  session, orphaned child, unfinished bookkeeping) must stay visible on the Dashboard.
+- More GitHub API spend. Everything new is computed from the snapshot the tick already fetches or
+  from local logs.
+- A write that skips its confirmation, or an endpoint that accepts an issue the page is not
+  offering.
+
+## Constraints
+
+- One file, `src/web.html`, with inline CSS and vanilla JS. `pnpm build` keeps copying it to
+  `dist/`. Fonts come from Google Fonts with system fallbacks (the current page already loads IBM
+  Plex this way): Inter for text, JetBrains Mono for code-like values.
+- Tabs are client-side, selected by `location.hash` (`#dashboard`, `#needs-you`, `#waiting`,
+  `#board`, `#session`) so a reload keeps the tab and a tab can be linked. Default `#dashboard`.
+- One `/api/status` poll every 3 s, as today. The Session tab fetches its own endpoint (below)
+  only while it is open.
+- Every new `StatusReport` / `Board` field is optional or defaulted, so existing tests and an older
+  `state.json` keep working (CLAUDE.md: every optional parameter defaults to today's behaviour).
+- Nothing repository-specific in `src/`: no project names, no package managers in sample text.
+- `foreman.json` is never served or written by the page (it may hold `webAuth` and a Slack
+  webhook). Page-set preferences go to `state.json` through `store.patch`, like the model and cap
+  overrides already do (`src/cli/daemon.ts`, `setModel` / `setCap`).
+
+## Visual reference
+
+The approved mockups are on the owner's Mac mini (not in this public repository, because they
+contain real project data):
+`/Users/matthewsmith/claude-out/foreman-redesign/.superpowers/brainstorm/85817-1793061231/content/`
+
+| File | Approved for |
+|---|---|
+| `dashboard-v4.html` | Dashboard layout, card style, Pipeline dot track, Feed density, narrow layout |
+| `colors-v1.html` | The four color schemes (dark), with a light-mode strip each |
+| `sidebar-v1.html` | Option **A**: name with an initial tile; theme picker in the footer |
+| `session-tab-v1.html` | Session tab, including the Daemon card |
+| `needs-you-v2.html` | Needs you: group order and button colors |
+| `needs-waiting-v1.html` | Waiting on (second half of the page) |
+| `board-v1.html` | Board tab |
+
+Where this document and a mockup disagree, this document wins.
+
+## Design
+
+### Shell
+
+- **Layout:** a 232 px left sidebar and a main column. The old right sidebar is gone.
+- **Sidebar header (option A):** a 40 px rounded tile in the theme's primary color holding the
+  instance name's first letter, the instance name at 19 px bold, `foreman · <host>` under it in
+  muted text, then the daemon pill: `Running · up 12d` (green), `Stopped` (amber), `Crashed`
+  (red), `Unknown` (amber). STOP present adds `· STOP file` to the pill.
+- **Navigation:** Dashboard, Needs you, Waiting on, Board, Session, each with an icon. The active
+  tab uses the theme's soft accent background.
+- **Badges:**
+
+  | Tab | Badge counts | Style |
+  |---|---|---|
+  | Needs you | rows in Approve a plan + Sign off a phase + Unblock + Answer or close (Ready to plan is not counted) | red when > 0, grey 0 |
+  | Waiting on | rows shown in its groups (banners not counted) | grey |
+  | Others | none | |
+
+- **Sidebar footer:** pid, and the theme picker: four color swatches, the current one ringed.
+- **Feedback:** the result message of every action (today's `#msg`) becomes a toast in the
+  bottom-right corner for about 5 s; errors stay until dismissed.
+- **Narrow screens:** below about 760 px of page width the sidebar becomes a horizontal strip of
+  icon tabs at the top (badges kept, the active tab shows its name), the header controls wrap to
+  their own row, and stat tiles go 2 × 2. Below about 460 px only the active tab shows its label.
+  Use container queries so the breakpoints follow the content width.
+
+### Themes
+
+Four schemes, each with a dark and a light token set. Dark values (from `colors-v1.html`):
+
+| Theme | bg | surface | sunk | line | accent (text) | accent-soft | primary (buttons) | on-primary |
+|---|---|---|---|---|---|---|---|---|
+| indigo | #0E1015 | #161A21 | #1D222B | #262C36 | #8EA6FF | #1E2645 | #4263EB | #FFFFFF |
+| violet | #0E0D13 | #16151E | #1E1C29 | #2A2736 | #B4A4FF | #2A2250 | #6E56CF | #FFFFFF |
+| teal | #0B1114 | #121A1E | #182328 | #223036 | #5FD4E4 | #0F3239 | #22B8CF | #04161A |
+| mono | #0A0A0B | #141416 | #1C1C1F | #27272B | #EDEDEF | #2A2A2F | #EDEDEF | #0A0A0B |
+
+Ink for all dark themes follows the indigo row's pattern (`ink` ≈ #ECEEF2, `ink-2` ≈ #A3AAB5,
+`ink-3` ≈ #6E7581), tinted toward each theme as in the mockup. Light primaries: indigo #3B5BDB,
+violet #6E56CF, teal #0B7285 (white text; darker than the mockup's #0C8599, which fails 4.5:1),
+mono #111113 (white text); the light ground and soft
+accent values are on each theme's strip in the mockup. The builder derives the remaining light
+tokens in the same structure.
+
+Status colors are shared by every theme and keep one meaning each: green done/ok (#5CCB8D dark),
+amber warning (#F0B44C), red failed (#FF8787), each with a soft background variant. In mono, the
+active-stage dot and the session progress bar use a muted blue (#5B8DEF) because its primary is
+near-white.
+
+The page follows `prefers-color-scheme` as today; the theme choice selects which pair of token
+sets applies.
+
+Every solid button meets 4.5:1 text contrast. The pale accent is for text, the active nav item and
+tool pills only; it is never a button fill. (This fixes the current Go button, which is too light
+on a dark background.)
+
+**Choosing a theme:** the swatches in the sidebar footer call `POST /api/theme`. With no choice
+saved, the daemon picks one at start and saves it, so it never changes on its own afterwards: the
+theme least used by the other instances on this Mac (read from their `state.json` files via
+`listInstances`), ties broken by a stable hash of the instance name. Up to four instances
+therefore start with four different themes; a fifth repeats one.
+
+### Dashboard
+
+From top to bottom:
+
+1. **Header row:** the page title `Dashboard`, then the controls in two groups: `Go` (solid
+   primary), `Refresh project`, `Compute next`; then `Stop` and `Abort` (red text, armed
+   two-click confirm as today).
+2. **Banners**, only when present, each one line with its fix: STOP file present (amber, "Go
+   resumes"), preflight failed (red, with the reason), daily cap reached (amber, "N of N
+   sessions today", with a link to the Session tab's cap control), a paused phase (amber), a
+   stalled session (red, "no output for Nm"), an orphaned child (red), unfinished bookkeeping
+   (red, "run ctl abort"), a pending stop/abort (amber), and "no state.json: restart the daemon"
+   when the daemon state is UNKNOWN.
+3. **Compute next output**, when requested: a dismissable card under the banners with the same
+   text the `<pre>` shows today.
+4. **Now card.** While a session runs: a role chip (`REVIEWER`), round chip, effort chip when not
+   high; the title `#<issue> · <title>` at 20 px; a meta line with the PR, the model and the
+   branch; the elapsed-time bar with start, `Nm of Mm` and deadline; four stat tiles (turns,
+   tokens, 5 h window, 7 d window); and the latest tool call with its age, plus the latest
+   assistant text in italics when present. With no session, the card is compact: the phase label
+   (`idle`, `between ticks`, `ticking`, `parked`) and its one-line detail, as today.
+5. **Pipeline.** One card per in-flight issue: `#<issue> <title>` with a sub-line (PR, claim host,
+   role and round, fix round); then the stage track; then tags (model when pinned, `<level>
+   effort` when not high, `blocked`, `CI pending`, `mergeable`, `fix round N`). The track is
+   five dots (Build, Review, Validate, CI, Merge) joined by a line, labels under the dots: green
+   filled for done, a blue ring for active, red filled for failed, hollow grey for pending,
+   dashed for skipped. The track column has a fixed width and the tag column a fixed width, so
+   every card's dots line up, with about 32 px between the track and the tags. When the pipeline
+   is narrower than about 760 px, the track moves to its own full-width row under the title,
+   separated by a hairline, and the tags stay top-right.
+6. **Feed.** A card of compact rows (about 26 px each): time, a kind pill (tool name in the
+   accent pill, red pill for a tool error, plain text for `init`/`text`/`result`), the summary
+   with ellipsis, assistant text wrapping in italics. Newest last, auto-scroll as today, the
+   newest row highlighted. It shows the current session; after "View feed" on the Session tab it
+   shows that session, with a "Back to live" chip in its header.
+
+The Recent list, the Tick panel, the Phase card and the Owner card are no longer on the
+Dashboard; see "Where everything moved".
+
+### Needs you
+
+Grouped by the action the owner takes, in this order, oldest first within a group. Each row shows
+the wait time large on the left (`51d`, amber once over 30 days), the issue number and title, a
+sub-line, and its action on the right.
+
+1. **Approve a plan** · epics offering `approve_plan`. Sub-line: when the plan was drafted and a
+   "read the plan" link. Button: **Approve plan**, solid theme primary.
+2. **Sign off a phase** · epics offering `sign_off`. Sub-line: a small green progress bar with
+   `done/total tasks`, the phase spend, and a link to its review issue. Button: **Sign off**,
+   solid green (#287A3A, white text, 5.3:1).
+3. **Ready to plan** · epics offering `start_planning`. Not counted in the badge. Sub-line notes a
+   planner session costs about $5. Button: **Start planning**, amber tint (amber-soft
+   background, amber text and border).
+4. **Unblock** · `needsYou` items labelled `blocked`, with the reason from the waiting detail.
+   Button: **Unblock**, neutral.
+5. **Answer or close** · the remaining `needsYou` items (`decision`, `needs-owner`). Label tags
+   and, for an old phase review whose epic is no longer open, "epic already closed". Button:
+   **Open ↗** (link to the issue), ghost style.
+
+Each group title has a small dot in its button's color. Every button keeps today's
+`window.confirm` text.
+
+A phase review issue (`Phase <N> review: <epic title>`, created by the phase-closer with
+`needs-owner`) is shown on its epic's Sign off row, not as its own row. Pair them in this order:
+(1) the epic's own comment `Phase review: #<review>`, which `roles/phase-closer.md` has the
+phase-closer post and which is already in the snapshot's comments; (2) otherwise, the epic's title
+with its leading `Phase <X>:` removed appearing in the review's title. Never pair by the
+`phase:<N>` label alone, because several epics can share a phase number. A review issue with no
+open matching epic goes to Answer or close.
+
+Pause and Resume are no longer on this tab; they live on the Board's epic headers.
+
+### Waiting on
+
+- A status line at the top: green "Nothing stops new claims: …" when no global blocker is active;
+  otherwise the same banners as the Dashboard (STOP, preflight, cap, paused).
+- Then groups by wait kind with counts: CI, Review cycle, Dependencies, Another Mac
+  (`other_host`), Phase gate, and Fix on GitHub (the `human` waits that are not on Needs you, such
+  as "agent-ready but Status Backlog" or "no Parent epic line", and "phase N held").
+- Each row: a kind icon, the subject and detail, a sub-line with context (the issue title, the
+  state of each dependency), and `since` when known.
+- Dependency rows for the same issue merge into one (`#270 waits on #268 and #269`).
+- Any `human` wait whose subject issue or epic is a row on Needs you is not repeated; a dashed
+  link row at the bottom points to Needs you with its count.
+
+### Board
+
+Every open issue on the project board, grouped under its phase epic.
+
+- **Top bar:** title with a count line (`N open issues in M phases · read from the last tick,
+  HH:MMZ`), a search box (number or title), a Status filter (All, Ready, In progress, In review,
+  Backlog, Blocked, Off board, each with a count) and a "Show done" checkbox.
+- **Epic card header:** `PHASE <N>` eyebrow, `#<epic> <title>`, a state chip (Planning / Plan
+  waiting / Building / Sign-off waiting / Not started, plus Paused), and **Pause** or **Resume**.
+  A facts line: green progress bar `done of total`, spend and session count, median claim→merge
+  (from today's phase progress), or "no tasks yet" for an epic still being planned.
+- **Task rows** in a table: issue and title with a sub-line of labels (`blocked` in red, `size:*`,
+  `area:*`) and a hint (`waits on #268, #269`, `next to claim`, `validator failed · fix round 2`);
+  Status as a colored dot and word (Backlog grey, Ready blue, In progress amber, In review violet,
+  Done green); PR; a **model** picker; an **effort** picker.
+- **Pickers** are compact dropdowns. A value that differs from the default is highlighted (model
+  in the accent color, effort in amber). The effort menu lists low, medium, high (marked
+  default), xhigh, max; the model menu lists `StatusReport.model.choices` and `default`. Choosing
+  a value shows the same confirm text as today and calls `/api/task-model` or
+  `/api/task-effort`.
+- **Done tasks** collapse into one "▸ N done" row per epic. Closed issues are not in the snapshot,
+  so the expanded list shows numbers (linked) without titles.
+- **Issues whose epic is closed** (a signed-off phase with leftovers) group under `Phase <N>` from
+  their `phase:<N>` label, slightly dimmed, with no Pause button. The closed epic's title is not
+  in the snapshot, so the header reads `Phase <N> · epic closed`. Issues with no epic and no
+  phase label group under "No phase".
+
+### Session
+
+- **Range filter:** a segmented control: Today, 7 days, 30 days, All (the whole `sessions.log`),
+  Custom (a from/to date pair). Days are local days, the same boundary `todayStats` uses for the
+  daily cap.
+- **Totals:** four tiles: spend, sessions, tasks and epics touched, spend per session.
+- **Daily spend:** a single-series bar chart, one bar per day in range, theme accent bars with
+  4 px rounded tops and a 2 px gap, a recessive grid with `$` labels, the peak bar labelled, and a
+  hover tooltip per bar (date, cost, session count). One series, so no legend.
+- **By role:** horizontal bars per role, sorted by spend, value at the end.
+- **Cost by task:** a table, most expensive first: issue and title, role chips, session count,
+  last run, cost with an inline bar. The first ten rows show, then "Show all N". Clicking a row
+  expands its sessions: time, role, model, turns, outcome (green/amber/red), cost, and **View
+  feed**, which switches to the Dashboard with that session pinned in the Feed.
+- **Daemon card** (what today's Tick panel holds): model for new sessions (buttons, current one
+  highlighted, override note), daily session cap (today's count and spend, cap buttons, override
+  note), GitHub budget (remaining of limit, reset time, last tick's read attribution), and a line
+  with last tick and preflight, next tick, backoff, and launchd. Same endpoints and confirm text
+  as today.
+
+### Where everything moved
+
+| Today | Redesign |
+|---|---|
+| Header: daemon badge, pid, uptime | Sidebar pill (state, uptime); pid in sidebar footer |
+| Header: STOP present, stalled, "no state.json" | Dashboard banners |
+| Header buttons, Compute next output | Dashboard header row; output card under the banners |
+| Now, Pipeline, Feed | Dashboard |
+| Phase card (progress, spend, cycle time) | Board epic headers; Sign off rows on Needs you |
+| Phase card task model pins / effort buttons | Board task pickers |
+| Owner card: Sign off, Approve plan, Start planning | Needs you groups |
+| Owner card: Pause / Resume | Board epic headers |
+| Needs you card | Needs you tab |
+| Waiting on card | Waiting on tab |
+| Tick card | Session tab, Daemon card; blockers also as Dashboard banners |
+| Recent card | Session tab, Cost by task (expanded rows) |
+
+## Data and API changes
+
+All computed from the existing snapshot or local files; no new GitHub reads.
+
+1. **`StatusReport.instance`** (string): the instance name, for the sidebar header and the theme
+   hash. Optional in the type so old fixtures parse; the daemon always sets it.
+2. **`StatusReport.theme`**: `{ current, source: "override" | "derived", choices }`. Stored as
+   `theme` in `state.json` via `store.patch`. **`POST /api/theme`** `{ theme: <name> | "default" }`,
+   allowlisted to the four names plus `default` (which clears the override).
+3. **`OwnerItem.since`** (ISO or null): when the epic started waiting, for the wait-time column.
+   `src/waiting.ts` already computes this for the same epics.
+4. **`Board.issues[]`**, built in `describeBoard` from `Snapshot.issues`, `prs` and `epics`: for
+   every open non-epic issue, on the board or not (`status` null shows as "Off board"), `{ issue, title, status, labels (display subset), epic, phase, pr,
+   dependsOn, openDependsOn, blocked, model, effort }`. Grouping, in order: (1) the open epic
+   whose `taskNumbersOf` set includes the issue (sub-issues plus the body's `Parent epic: #N`
+   line, the same set the phase progress uses); (2) else, by its `phase:<N>` label, the one open
+   epic with that phase when exactly one exists; (3) else, when several open epics share that
+   phase, a `Phase <N> · not linked to an epic` group; (4) else, when no open epic has that phase,
+   `Phase <N> · epic closed`; (5) else "No phase".
+5. **`Board.epics[]`** or an extension of `phases`, so the Board can show every open epic
+   (including ones being planned) with its state, not only approved phases.
+6. **Needs-you pairing**: the review-issue-to-epic match described above, computed server-side so
+   the badge count and the rows agree.
+7. **Allowlist for the pickers**: `/api/task-model` and `/api/task-effort` accept any issue in
+   `Board.issues` (today: only tasks under an approved phase). Still the board, still no arbitrary
+   issue number.
+8. **`GET /api/sessions?from=YYYY-MM-DD&to=YYYY-MM-DD`** (both optional; absent means the whole
+   log): `{ totals, daily[], byRole[], byIssue[] }`, each `byIssue` row with its entries. Computed
+   from `readSessions`. Sessions and cost are counted per log line, the same way `todayStats`
+   counts them, so the Session tab and the cap counter agree. Same host check / auth as
+   every other route. The page fetches it when the Session tab opens, when the range changes, and
+   when `recent[0].sessionId` changes in the status poll.
+9. **`SessionLogEntry.title`** (optional string): see "Owner decisions" 1. `readSessions` keeps
+   reading old lines without it.
+
+## Calls made during design (owner may override)
+
+- Theme choice is stored in `state.json` through `store.patch`, not in `foreman.json` as first
+  said in conversation: the daemon reads `foreman.json` only at start and the page never writes
+  it; `state.json` is the existing home for page-set overrides and is per instance.
+- With no saved choice, the daemon saves the theme least used by the other instances on this Mac,
+  so instances start distinct and a theme never shifts on its own.
+- Review pairing uses the epic's `Phase review: #<review>` comment first, then a title match.
+- Board grouping uses `taskNumbersOf`, then a unique open epic for the phase label.
+- Session counts follow `todayStats` (per log line).
+- Sign off green is #287A3A and light teal is #0B7285, to meet 4.5:1.
+- The sidebar shows the instance name (what `foreman -p` uses), not the repository name.
+- A phase review issue shows on its epic's Sign off row.
+- Ready to plan is not counted in the Needs you badge.
+- Waits over 30 days turn amber.
+- The tab is labelled "Session" (the conversation's "Session info").
+- Session days are local days, matching the daily cap.
+- Session tab "View feed" switches to the Dashboard with that session pinned.
+- Board pickers are offered for every open issue on the board, widening the allowlist from
+  approved-phase tasks.
+
+## Owner decisions after review
+
+1. **Titles in the cost history: record them from now on.** `SessionLogEntry` gains an optional
+   `title`, filled from the issue the session ran on wherever `appendSession` is called in
+   `src/loop.ts`. This is the one change to the loop, and it is additive. On the Session tab, a
+   row's title comes from the newest log entry for that issue that has one, else from the
+   snapshot if the issue is still open, else `#N`. No GitHub lookup.
+2. **Open issues not on the project board are shown.** They appear on the Board with the status
+   "Off board" (a hollow grey dot), grouped like any other issue, and the Status filter gains an
+   "Off board" bucket with its count. The model and effort pickers work on them, since
+   `Board.issues` is the picker allowlist.
+
+## Left to the builder
+
+- Exact spacing, radii and type sizes beyond what the mockups show; icons (inline SVG, as in the
+  mockups).
+- The full light-mode token sets, following the dark structure and the strip values.
+- The hash function for the derived theme.
+- Whether `Board.epics` is a new field or an extension of `phases`.
+- How the page keeps a tab's scroll position and an open picker across the 3 s re-render (today's
+  page re-renders whole sections; the Board pickers and the Session expansions must survive a
+  poll, the way `openPhases` survives today).
+- Toast behaviour details.
+
+## Testing
+
+- TDD for every new pure function: `Board.issues` and epic grouping, needs-you grouping and review
+  pairing, the Waiting on de-duplication and badge counts, session aggregation by range, the theme
+  derivation.
+- `src/web.test.ts`: new routes (`/api/theme`, `/api/sessions`, the widened picker allowlist)
+  with the existing request-level tests; the `web.html` string-contains tests at the end of the
+  file are rewritten for the new markup (confirm strings, endpoint paths, element ids).
+- `pnpm lint && pnpm typecheck && pnpm test` green; `pnpm build`; then dogfood with `npm link` on
+  a live instance and check every tab at laptop and phone width, in both color schemes.
+- `README.md`: update the section that describes the page.
diff --git a/src/attention.test.ts b/src/attention.test.ts
new file mode 100644
index 0000000..14d41ca
--- /dev/null
+++ b/src/attention.test.ts
@@ -0,0 +1,128 @@
+import { describe, expect, it } from "vitest";
+import { describeAttention } from "./attention.ts";
+import type { Board, NeedsYouItem, OwnerItem, WaitItem } from "./state-file.ts";
+
+const board = (over: Partial<Board> = {}): Board => ({
+  at: "2026-09-05T10:00:00Z",
+  waiting: [],
+  pipeline: [],
+  owner: [],
+  needsYou: [],
+  phases: [],
+  issues: [],
+  groups: [],
+  explain: [],
+  prs: [],
+  ...over,
+});
+
+const owner = (epic: number, actions: OwnerItem["actions"]): OwnerItem => ({
+  epic,
+  title: `Phase ${epic}`,
+  phase: 1,
+  detail: "",
+  actions,
+  since: null,
+  review: null,
+});
+
+const needs = (issue: number, over: Partial<NeedsYouItem> = {}): NeedsYouItem => ({
+  issue,
+  title: `Task ${issue}`,
+  labels: ["needs-owner"],
+  since: "2026-09-01T00:00:00Z",
+  itemId: null,
+  reviewOf: null,
+  phaseReview: false,
+  ...over,
+});
+
+const wait = (
+  kind: WaitItem["kind"],
+  subject: string,
+  detail: string,
+  since: string | null = null,
+) => ({
+  kind,
+  subject,
+  detail,
+  since,
+});
+
+describe("describeAttention", () => {
+  it("counts approve and sign-off epics and unpaired needs-you issues, not start_planning", () => {
+    const b = board({
+      owner: [
+        owner(1, ["approve_plan", "pause"]),
+        owner(2, ["sign_off", "pause"]),
+        owner(3, ["start_planning", "pause"]),
+        owner(4, ["pause"]),
+      ],
+      needsYou: [needs(11), needs(12, { reviewOf: 2 }), needs(13, { labels: ["blocked"] })],
+    });
+    expect(describeAttention(b).needsYou).toBe(4);
+  });
+
+  it("moves stop, preflight, cap and paused into banners", () => {
+    const b = board({
+      waiting: [
+        wait("stop", "STOP", "STOP file present; ctl go to resume"),
+        wait("preflight", "preflight", "gh not authenticated"),
+        wait("cap", "cap", "20 of 20 sessions today"),
+        wait("paused", "phase 3", "phase 3 paused (foreman:pause on #30)"),
+        wait("ci", "PR #276", "PR #276 checks pending"),
+      ],
+    });
+    const a = describeAttention(b);
+    expect(a.banners.map((w) => w.kind)).toEqual(["stop", "preflight", "cap", "paused"]);
+    expect(a.waitRows.map((w) => w.kind)).toEqual(["ci"]);
+    expect(a.waiting).toBe(1);
+  });
+
+  it("drops human waits whose subject is on Needs you and keeps the rest", () => {
+    const b = board({
+      owner: [owner(93, ["sign_off", "pause"]), owner(77, ["start_planning", "pause"])],
+      needsYou: [needs(609, { labels: ["blocked"] })],
+      waiting: [
+        wait("human", "epic #93", "epic #93 awaits owner sign-off"),
+        wait("human", "#609", "#609 blocked: depends on #608"),
+        wait("human", "#41", "#41 is agent-ready but Status Backlog"),
+        wait(
+          "human",
+          "phase 13",
+          "phase 13 held: 1 blocked tasks need you before any new build starts",
+        ),
+      ],
+    });
+    expect(describeAttention(b).waitRows.map((w) => w.subject)).toEqual(["#41", "phase 13"]);
+  });
+
+  it("merges dependency rows for one issue", () => {
+    const b = board({
+      waiting: [
+        wait("dependency", "#270", "#270 waits on #268"),
+        wait("dependency", "#271", "#271 waits on #269"),
+        wait("dependency", "#270", "#270 waits on #269", "2026-09-02T00:00:00Z"),
+      ],
+    });
+    expect(describeAttention(b).waitRows).toEqual([
+      wait("dependency", "#270", "#270 waits on #268 and #269", "2026-09-02T00:00:00Z"),
+      wait("dependency", "#271", "#271 waits on #269"),
+    ]);
+  });
+
+  it("lists three or more dependencies with commas", () => {
+    const b = board({
+      waiting: [
+        wait("dependency", "#9", "#9 waits on #1"),
+        wait("dependency", "#9", "#9 waits on #2"),
+        wait("dependency", "#9", "#9 waits on #3"),
+      ],
+    });
+    expect(describeAttention(b).waitRows[0]?.detail).toBe("#9 waits on #1, #2 and #3");
+  });
+
+  it("is all zeros and empty for a null board", () => {
+    expect(describeAttention(null)).toEqual({ needsYou: 0, waiting: 0, banners: [], waitRows: [] });
+  });
+});
diff --git a/src/attention.ts b/src/attention.ts
new file mode 100644
index 0000000..f0af52e
--- /dev/null
+++ b/src/attention.ts
@@ -0,0 +1,68 @@
+import type { Board, WaitItem } from "./state-file.ts";
+
+/** Waits that stop this Mac taking any new work; the page shows them as banners, not rows. */
+export const BANNER_KINDS = ["stop", "preflight", "cap", "paused"] as const;
+
+/** What the page's navigation badges, banners and Waiting on tab show. */
+export interface Attention {
+  /** The Needs you badge: decisions only the owner can make. */
+  needsYou: number;
+  /** The Waiting on badge; always `waitRows.length`. */
+  waiting: number;
+  banners: WaitItem[];
+  waitRows: WaitItem[];
+}
+
+const numberIn = (subject: string) => {
+  const m = /#(\d+)/.exec(subject);
+  return m ? Number(m[1]) : null;
+};
+
+const list = (ns: string[]) =>
+  ns.length < 2 ? (ns[0] ?? "") : `${ns.slice(0, -1).join(", ")} and ${ns[ns.length - 1]}`;
+
+/**
+ * Turns the board into what the page counts and lists, so the badge and the rows it counts can
+ * never disagree. A `human` wait for an issue or epic already on Needs you is not repeated on
+ * Waiting on, and one issue's dependency waits read as one row.
+ */
+export function describeAttention(board: Board | null): Attention {
+  if (!board) return { needsYou: 0, waiting: 0, banners: [], waitRows: [] };
+  const gated = board.owner.filter((o) =>
+    o.actions.some((a) => a === "approve_plan" || a === "sign_off"),
+  );
+  const needsYou = gated.length + board.needsYou.filter((n) => n.reviewOf === null).length;
+  // Every issue or epic that has a row of its own on Needs you, Ready to plan included.
+  const onNeedsYou = new Set([
+    ...board.owner
+      .filter((o) => o.actions.some((a) => a !== "pause" && a !== "unpause"))
+      .map((o) => o.epic),
+    ...board.needsYou.map((n) => n.issue),
+  ]);
+  const isBanner = (w: WaitItem) => (BANNER_KINDS as readonly string[]).includes(w.kind);
+  const banners = board.waiting.filter(isBanner);
+  const waitRows: WaitItem[] = [];
+  const deps = new Map<string, { row: WaitItem; on: string[] }>();
+  for (const w of board.waiting) {
+    if (isBanner(w)) continue;
+    const n = numberIn(w.subject);
+    if (w.kind === "human" && n !== null && onNeedsYou.has(n)) continue;
+    if (w.kind === "dependency") {
+      const on = w.detail.slice(w.detail.lastIndexOf(" ") + 1);
+      const seen = deps.get(w.subject);
+      if (seen) {
+        seen.on.push(on);
+        const since = [seen.row.since, w.since].filter((x): x is string => x !== null).sort()[0];
+        seen.row.since = since ?? null;
+        seen.row.detail = `${w.subject} waits on ${list(seen.on)}`;
+        continue;
+      }
+      const row = { ...w };
+      deps.set(w.subject, { row, on: [on] });
+      waitRows.push(row);
+      continue;
+    }
+    waitRows.push(w);
+  }
+  return { needsYou, waiting: waitRows.length, banners, waitRows };
+}
diff --git a/src/board-issues.test.ts b/src/board-issues.test.ts
new file mode 100644
index 0000000..bd08fc5
--- /dev/null
+++ b/src/board-issues.test.ts
@@ -0,0 +1,165 @@
+import { describe, expect, it } from "vitest";
+import { epic, issue, pr, snapshot } from "../test/helpers.ts";
+import { describeBoardIssues } from "./board-issues.ts";
+
+// An epic as the snapshot carries it twice: once as an Epic, once as its open issue (the title).
+const withEpic = (e: ReturnType<typeof epic>, title = `Phase ${e.phase}: work`) =>
+  issue({ number: e.number, title, labels: e.labels, body: "" });
+
+const task = (over: Parameters<typeof issue>[0] = {}) =>
+  issue({ body: "## Depends on\nNone", labels: ["agent-ready"], ...over });
+
+describe("describeBoardIssues", () => {
+  it("lists open non-epic issues, off-board ones with status null", () => {
+    const e = epic({ number: 10, phase: 1, taskNumbers: [11, 12] });
+    const s = snapshot({
+      epics: [e],
+      issues: [withEpic(e), task({ number: 11 }), task({ number: 12, status: null, itemId: null })],
+    });
+    const { issues } = describeBoardIssues(s);
+    expect(issues.map((i) => i.issue)).toEqual([11, 12]);
+    expect(issues.find((i) => i.issue === 12)?.status).toBeNull();
+  });
+
+  it("groups by taskNumbersOf, including a Parent epic line", () => {
+    const e = epic({ number: 10, phase: 1, taskNumbers: [] });
+    const s = snapshot({
+      epics: [e],
+      issues: [withEpic(e), task({ number: 11, body: "Parent epic: #10" })],
+    });
+    expect(describeBoardIssues(s).issues[0]?.group).toBe("epic:10");
+  });
+
+  it("falls back to the single open epic with the issue's phase label", () => {
+    const e = epic({ number: 10, phase: 7, labels: ["epic", "phase:7", "plan-approved"] });
+    const s = snapshot({
+      epics: [e],
+      issues: [withEpic(e), task({ number: 11, labels: ["phase:7"] })],
+    });
+    expect(describeBoardIssues(s).issues[0]?.group).toBe("epic:10");
+  });
+
+  it("puts a shared-phase issue in an unlinked group", () => {
+    const a = epic({ number: 10, phase: 10, labels: ["epic", "phase:10"] });
+    const b = epic({ number: 20, phase: 10, labels: ["epic", "phase:10"] });
+    const s = snapshot({
+      epics: [a, b],
+      issues: [withEpic(a), withEpic(b), task({ number: 11, labels: ["phase:10"] })],
+    });
+    const { issues, groups } = describeBoardIssues(s);
+    expect(issues[0]?.group).toBe("phase:10:unlinked");
+    expect(groups.find((g) => g.key === "phase:10:unlinked")).toMatchObject({
+      kind: "unlinked",
+      epic: null,
+      phase: 10,
+      title: "Phase 10 · not linked to an epic",
+    });
+  });
+
+  it("puts an issue whose phase has no open epic in a closed group", () => {
+    const s = snapshot({ epics: [], issues: [task({ number: 11, labels: ["phase:4"] })] });
+    const { issues, groups } = describeBoardIssues(s);
+    expect(issues[0]?.group).toBe("phase:4:closed");
+    expect(groups).toEqual([
+      expect.objectContaining({
+        key: "phase:4:closed",
+        kind: "closed",
+        title: "Phase 4 · epic closed",
+      }),
+    ]);
+  });
+
+  it("puts an issue with neither in No phase", () => {
+    const s = snapshot({ epics: [], issues: [task({ number: 11, labels: [] })] });
+    const { issues, groups } = describeBoardIssues(s);
+    expect(issues[0]?.group).toBe("none");
+    expect(groups).toEqual([
+      expect.objectContaining({ key: "none", kind: "none", title: "No phase" }),
+    ]);
+  });
+
+  it("gives every open epic a group with its state, even with no issues", () => {
+    const mk = (number: number, extra: string[]) =>
+      epic({ number, phase: number, labels: ["epic", `phase:${number}`, ...extra] });
+    const epics = [
+      mk(1, ["needs-owner", "plan-approved"]),
+      mk(2, ["needs-owner"]),
+      mk(3, ["plan-approved", "foreman:pause"]),
+      mk(4, ["agent-ready"]),
+      mk(5, []),
+    ];
+    const s = snapshot({ epics, issues: epics.map((e) => withEpic(e, `Epic ${e.number}`)) });
+    const { groups } = describeBoardIssues(s);
+    expect(groups.map((g) => [g.key, g.title, g.state, g.paused])).toEqual([
+      ["epic:1", "Epic 1", "signoff_waiting", false],
+      ["epic:2", "Epic 2", "plan_waiting", false],
+      ["epic:3", "Epic 3", "building", true],
+      ["epic:4", "Epic 4", "planning", false],
+      ["epic:5", "Epic 5", "not_started", false],
+    ]);
+  });
+
+  it("orders epic groups by phase, then unlinked and closed groups, then No phase", () => {
+    const a = epic({ number: 30, phase: 9, labels: ["epic", "phase:9"] });
+    const b = epic({ number: 20, phase: 7, labels: ["epic", "phase:7"] });
+    const s = snapshot({
+      epics: [a, b],
+      issues: [
+        withEpic(a),
+        withEpic(b),
+        task({ number: 41, labels: [] }),
+        task({ number: 42, labels: ["phase:4"] }),
+      ],
+    });
+    expect(describeBoardIssues(s).groups.map((g) => g.key)).toEqual([
+      "epic:20",
+      "epic:30",
+      "phase:4:closed",
+      "none",
+    ]);
+  });
+
+  it("fills pr, dependsOn, openDependsOn, blocked, model, effort and the display labels", () => {
+    const e = epic({ number: 10, phase: 7, taskNumbers: [268, 269] });
+    const s = snapshot({
+      epics: [e],
+      prs: [pr({ number: 276, issue: 268 })],
+      issues: [
+        withEpic(e),
+        task({
+          number: 268,
+          body: "## Depends on\n- #269\n- #250",
+          labels: [
+            "blocked",
+            "size:L",
+            "area:web",
+            "agent-ready",
+            "model:sonnet",
+            "effort:xhigh",
+            "phase:7",
+          ],
+        }),
+        task({ number: 269 }),
+      ],
+    });
+    expect(describeBoardIssues(s).issues[0]).toEqual({
+      issue: 268,
+      title: "Task 268",
+      status: "Ready",
+      labels: ["blocked", "size:L", "area:web"],
+      group: "epic:10",
+      pr: 276,
+      dependsOn: [269, 250],
+      openDependsOn: [269],
+      blocked: true,
+      model: "sonnet",
+      effort: "xhigh",
+    });
+  });
+
+  it("lists closed task numbers as doneTasks", () => {
+    const e = epic({ number: 10, phase: 1, taskNumbers: [1, 2, 3] });
+    const s = snapshot({ epics: [e], issues: [withEpic(e), task({ number: 3 })] });
+    expect(describeBoardIssues(s).groups[0]?.doneTasks).toEqual([1, 2]);
+  });
+});
diff --git a/src/board-issues.ts b/src/board-issues.ts
new file mode 100644
index 0000000..1e28d72
--- /dev/null
+++ b/src/board-issues.ts
@@ -0,0 +1,114 @@
+import { parseDependsOn, phaseOf } from "./github.ts";
+import { taskNumbersOf } from "./phase-progress.ts";
+import {
+  type BoardGroup,
+  type BoardIssue,
+  EFFORT_LABEL_PREFIX,
+  MODEL_LABEL_PREFIX,
+} from "./state-file.ts";
+import type { Epic, Snapshot } from "./types.ts";
+
+const SHOWN_LABEL = /^(blocked|size:.+|area:.+)$/;
+
+function epicState(e: Epic): BoardGroup["state"] {
+  const has = (l: string) => e.labels.includes(l);
+  // needs-owner means two things; plan-approved tells them apart, as on the Owner gates.
+  if (has("needs-owner")) return has("plan-approved") ? "signoff_waiting" : "plan_waiting";
+  if (has("plan-approved")) return "building";
+  if (has("agent-ready")) return "planning";
+  return "not_started";
+}
+
+const labelValue = (labels: string[], prefix: string) =>
+  labels.find((l) => l.startsWith(prefix))?.slice(prefix.length) ?? null;
+
+/**
+ * Every open issue on the Board tab, grouped under the epic it belongs to. The epic is the open
+ * one whose task set (sub-issues plus `Parent epic:` lines) includes the issue; failing that, the
+ * only open epic with the issue's `phase:<N>` label. Issues neither rule places are grouped by
+ * phase — `unlinked` when several open epics share it, `closed` when none is open — or "No phase".
+ * Computed from the snapshot the tick already has, so the tab costs no GitHub reads.
+ */
+export function describeBoardIssues(s: Snapshot): { issues: BoardIssue[]; groups: BoardGroup[] } {
+  const open = new Set(s.issues.map((i) => i.number));
+  const epics = s.epics
+    .filter((e) => e.state === "OPEN")
+    .sort((a, b) => a.phase - b.phase || a.number - b.number);
+  const tasksOf = new Map(epics.map((e) => [e.number, taskNumbersOf(e, s.issues)]));
+  const titleOf = (n: number) => s.issues.find((i) => i.number === n)?.title ?? `#${n}`;
+
+  const groups = new Map<string, BoardGroup>();
+  for (const e of epics) {
+    groups.set(`epic:${e.number}`, {
+      key: `epic:${e.number}`,
+      kind: "epic",
+      epic: e.number,
+      phase: e.phase,
+      title: titleOf(e.number),
+      state: epicState(e),
+      paused: e.labels.includes("foreman:pause"),
+      doneTasks: [...(tasksOf.get(e.number) ?? [])]
+        .filter((n) => !open.has(n))
+        .sort((a, b) => a - b),
+    });
+  }
+  const extra = (key: string, kind: BoardGroup["kind"], phase: number | null, title: string) => {
+    if (!groups.has(key))
+      groups.set(key, {
+        key,
+        kind,
+        epic: null,
+        phase,
+        title,
+        state: null,
+        paused: false,
+        doneTasks: [],
+      });
+    return key;
+  };
+  const groupOf = (n: number, labels: string[]): string => {
+    const owner = epics.find((e) => tasksOf.get(e.number)?.has(n));
+    if (owner) return `epic:${owner.number}`;
+    const phase = phaseOf(labels);
+    if (phase === null) return extra("none", "none", null, "No phase");
+    const same = epics.filter((e) => e.phase === phase);
+    if (same.length === 1) return `epic:${(same[0] as Epic).number}`;
+    return same.length > 1
+      ? extra(
+          `phase:${phase}:unlinked`,
+          "unlinked",
+          phase,
+          `Phase ${phase} · not linked to an epic`,
+        )
+      : extra(`phase:${phase}:closed`, "closed", phase, `Phase ${phase} · epic closed`);
+  };
+
+  const issues: BoardIssue[] = s.issues
+    .filter((i) => i.state === "OPEN" && !i.labels.includes("epic"))
+    .sort((a, b) => a.number - b.number)
+    .map((i) => {
+      const dependsOn = parseDependsOn(i.body);
+      return {
+        issue: i.number,
+        title: i.title,
+        status: i.status,
+        labels: i.labels.filter((l) => SHOWN_LABEL.test(l)),
+        group: groupOf(i.number, i.labels),
+        pr: s.prs.find((p) => p.issue === i.number)?.number ?? null,
+        dependsOn,
+        openDependsOn: dependsOn.filter((d) => open.has(d)),
+        blocked: i.labels.includes("blocked"),
+        model: labelValue(i.labels, MODEL_LABEL_PREFIX),
+        effort: labelValue(i.labels, EFFORT_LABEL_PREFIX),
+      };
+    });
+
+  const rank = (g: BoardGroup) => (g.kind === "epic" ? 0 : g.kind === "none" ? 2 : 1);
+  const ordered = [...groups.values()].sort(
+    (a, b) =>
+      rank(a) - rank(b) ||
+      // Epic groups keep the epic order above; the phase groups sort by phase.
+      (rank(a) === 1 ? (a.phase ?? 0) - (b.phase ?? 0) : 0),
+  );
+  return { issues, groups: ordered };
+}
diff --git a/src/board.test.ts b/src/board.test.ts
index 3c56879..304700d 100644
--- a/src/board.test.ts
+++ b/src/board.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { epic, hoursAgo, issue, pr, snapshot } from "../test/helpers.ts";
 import { describeBoard, overlayCurrent } from "./board.ts";
+import { describeBoardIssues } from "./board-issues.ts";
 import type { Board, CurrentSession } from "./state-file.ts";
 
 describe("describeBoard", () => {
@@ -23,6 +24,7 @@ describe("describeBoard", () => {
     expect(b.explain.length).toBeGreaterThan(0);
     // No logs passed: the phase card still lists the approved epic, at zero spend.
     expect(b.phases).toMatchObject([{ tasksTotal: 0, spendUsd: 0, medianMergeMinutes: null }]);
+    expect({ issues: b.issues, groups: b.groups }).toEqual(describeBoardIssues(s));
   });
 
   it("folds the local session and merge logs into the phase card", () => {
@@ -106,6 +108,8 @@ describe("overlayCurrent", () => {
     owner: [],
     needsYou: [],
     phases: [],
+    issues: [],
+    groups: [],
     explain: [],
     prs: [],
   };
diff --git a/src/board.ts b/src/board.ts
index 90b8ade..57f118d 100644
--- a/src/board.ts
+++ b/src/board.ts
@@ -1,3 +1,4 @@
+import { describeBoardIssues } from "./board-issues.ts";
 import { needsYouItems } from "./needs-you.ts";
 import { describeNext } from "./next.ts";
 import { ownerItems } from "./owner.ts";
@@ -30,6 +31,7 @@ export function describeBoard(
     owner: ownerItems(s),
     needsYou: needsYouItems(s),
     phases: phaseProgress(s, logs.sessions, logs.merges),
+    ...describeBoardIssues(s),
     explain: next.explain,
     prs: next.prs,
   };
diff --git a/src/cli/daemon.ts b/src/cli/daemon.ts
index 1a8e3b3..960ae35 100644
--- a/src/cli/daemon.ts
+++ b/src/cli/daemon.ts
@@ -6,7 +6,7 @@ import { realExec } from "../exec.ts";
 import { readFeed } from "../feed.ts";
 import { GitHub } from "../github.ts";
 import { fileHookLog } from "../hooks.ts";
-import type { Instance } from "../instance.ts";
+import { type Instance, listInstances } from "../instance.ts";
 import { launchdInstalled } from "../launchd-status.ts";
 import { log } from "../log.ts";
 import { buildSnapshot, ensureLogin, realCtx, runForever, runOnce } from "../loop.ts";
@@ -15,11 +15,13 @@ import { describeNext } from "../next.ts";
 import { applyOwnerAction, applyOwnerActionToBoard } from "../owner.ts";
 import { checkEnv, preflight } from "../preflight.ts";
 import { loadRepoConfigSafe } from "../repo-config.ts";
+import { boardTitles, describeSessionHistory } from "../session-history.ts";
 import { readSessions } from "../sessions.ts";
 import { initialState, MODEL_DEFAULT, readState, StateStore } from "../state-file.ts";
 import { describeStatus } from "../status.ts";
 import { applyTaskEffort, applyTaskEffortToBoard } from "../task-effort.ts";
-import { applyTaskModel, applyTaskModelToBoard, phaseTasks } from "../task-model.ts";
+import { applyTaskModel, applyTaskModelToBoard, pickerTasks } from "../task-model.ts";
+import { pickTheme, type ThemeName } from "../theme.ts";
 import { startWebServer } from "../web.ts";
 import { launchdLabel } from "./launchd.ts";
 
@@ -139,6 +141,11 @@ export async function runDaemon(
 
   // Long-running daemon: owns state.json, the web page, and the signal handlers.
   const previous = readState(STATE_DIR);
+  // Picked once and saved, so it never shifts: the theme the other instances here use least.
+  const others = listInstances()
+    .filter((i) => i.name !== instance.name)
+    .map((i) => readState(i.dir)?.theme ?? null)
+    .filter((t): t is ThemeName => t !== null);
   const store = new StateStore(
     STATE_DIR,
     initialState({
@@ -150,6 +157,7 @@ export async function runDaemon(
       // A restart must not silently revert the owner's overrides back to foreman.json.
       model: previous?.model ?? null,
       maxSessionsPerDay: previous?.maxSessionsPerDay ?? null,
+      theme: previous?.theme ?? pickTheme(instance.name, others),
     }),
   );
   const controller = new Controller((mode) => {
@@ -197,6 +205,7 @@ export async function runDaemon(
         repo: cfg.repo,
         configModel: cfg.model,
         modelChoices: repo.models,
+        instance: instance.name,
       }),
     next: () => lock.run(async () => describeNext(await buildSnapshot(ctx), repo)),
     act: async (cmd) => {
@@ -218,6 +227,13 @@ export async function runDaemon(
       log("info", "model set", { model: next, configured: cfg.model });
       return `next session runs ${next ?? cfg.model}`;
     },
+    sessions: (range) =>
+      describeSessionHistory(readSessions(STATE_DIR), range, boardTitles(store.get().board)),
+    setTheme: async (theme) => {
+      store.patch({ theme });
+      log("info", "theme set", { theme });
+      return `theme is now ${theme}`;
+    },
     setCap: async (maxSessionsPerDay) => {
       // Read per tick by runOnce's capFor(), so raising it while parked on the cap lets the very
       // next tick run — no restart, and the sleep is cut short so it happens now.
@@ -235,12 +251,12 @@ export async function runDaemon(
       return "project re-read; tick requested";
     },
     ownerItems: () => store.get().board?.owner ?? [],
-    phaseTasks: () => phaseTasks(store.get().board),
+    pickerTasks: () => pickerTasks(store.get().board),
     setTaskModel: async (issue, model) => {
       // The stored task row says which label is on the issue now, so the swap costs at most two
       // label edits and no GitHub read. Read per dispatch by runRole's modelFor(), so it applies
       // to the issue's next session and never to one already running.
-      const current = phaseTasks(store.get().board).find((t) => t.issue === issue)?.model ?? null;
+      const current = pickerTasks(store.get().board).find((t) => t.issue === issue)?.model ?? null;
       const message = await applyTaskModel(gh, { issue, current }, model);
       log("info", "task model set", { issue, model, was: current });
       const board = store.get().board;
@@ -251,7 +267,7 @@ export async function runDaemon(
     setTaskEffort: async (issue, effort) => {
       // Same shape as setTaskModel: the stored row names the label on the issue now, and
       // runRole's effortFor() reads the label per dispatch, so a running session keeps its effort.
-      const current = phaseTasks(store.get().board).find((t) => t.issue === issue)?.effort ?? null;
+      const current = pickerTasks(store.get().board).find((t) => t.issue === issue)?.effort ?? null;
       const message = await applyTaskEffort(gh, { issue, current }, effort);
       log("info", "task effort set", { issue, effort, was: current });
       const board = store.get().board;
diff --git a/src/ctl.test.ts b/src/ctl.test.ts
index 10d3d57..b69e6a1 100644
--- a/src/ctl.test.ts
+++ b/src/ctl.test.ts
@@ -168,6 +168,8 @@ describe("ctlModel", () => {
         pipeline: [],
         owner: [],
         needsYou: [],
+        issues: [],
+        groups: [],
         explain: [],
         prs: [],
         phases: [
diff --git a/src/loop.test.ts b/src/loop.test.ts
index aed8f61..01b5281 100644
--- a/src/loop.test.ts
+++ b/src/loop.test.ts
@@ -1160,7 +1160,7 @@ describe("operator interrupt", () => {
     expect(st.get().unfinished).toBeNull();
   });
   it("abort: releases, unassigns, resets Ready; sessions.log records aborted", async () => {
-    const i = issue({ number: 1, status: "In Progress" });
+    const i = issue({ number: 1, title: "feat: a grid", status: "In Progress" });
     const { gh, calls } = fakeGh([i]);
     const ac = new AbortController();
     ac.abort();
@@ -1180,6 +1180,7 @@ describe("operator interrupt", () => {
     expect(calls).toContain("setStatus PVTI_1 Ready");
     const line = readFileSync(join(dir, "sessions.log"), "utf8").trim();
     expect(JSON.parse(line)).toMatchObject({
+      title: "feat: a grid",
       outcome: "aborted",
       // Recorded on an interrupt too, so an aborted session's spend is still comparable.
       model: "opus",
@@ -1188,7 +1189,7 @@ describe("operator interrupt", () => {
     });
   });
   it("sessions.log records the model, turns, duration, denials and subtype", async () => {
-    const i = issue({ number: 1 });
+    const i = issue({ number: 1, title: "feat: a grid" });
     const { gh } = fakeGh([i]);
     const dir = mkdtempSync(join(tmpdir(), "tt-loop-"));
     await execute(
@@ -1207,6 +1208,7 @@ describe("operator interrupt", () => {
     );
     // No stream events reach the fake spawner, so `model` falls back to the dispatched name.
     expect(JSON.parse(readFileSync(join(dir, "sessions.log"), "utf8").trim())).toMatchObject({
+      title: "feat: a grid",
       model: "opus",
       turns: 2,
       durationMinutes: 3.7,
diff --git a/src/loop.ts b/src/loop.ts
index 48d268c..13d1ff8 100644
--- a/src/loop.ts
+++ b/src/loop.ts
@@ -539,6 +539,7 @@ async function runRole(ctx: Ctx, r: RunRole): Promise<void> {
       attempt: current.attempt,
       costUsd: result.costUsd,
       outcome: mode === "abort" ? "aborted" : "interrupted",
+      title: r.issue.title,
       ...sessionMetrics(result, current, model),
     });
     try {
@@ -580,6 +581,7 @@ async function runRole(ctx: Ctx, r: RunRole): Promise<void> {
     attempt: req.attempt,
     costUsd: result.costUsd,
     outcome: result.outcome?.outcome ?? result.subtype,
+    title: r.issue.title,
     ...sessionMetrics(result, current, model),
   });
   await gh.comment(
diff --git a/src/needs-you.test.ts b/src/needs-you.test.ts
index 9373015..53dff44 100644
--- a/src/needs-you.test.ts
+++ b/src/needs-you.test.ts
@@ -10,6 +10,8 @@ const board = (over: Partial<Board> = {}): Board => ({
   owner: [],
   needsYou: [],
   phases: [],
+  issues: [],
+  groups: [],
   explain: [],
   prs: [],
   ...over,
@@ -36,6 +38,7 @@ describe("needsYouItems", () => {
       ],
       epics: [epic({ number: 10, phase: 1, labels: ["epic", "phase:1", "needs-owner"] })],
     });
+    const unpaired = { reviewOf: null, phaseReview: false };
     expect(needsYouItems(s)).toEqual([
       {
         issue: 165,
@@ -43,17 +46,59 @@ describe("needsYouItems", () => {
         labels: ["decision", "needs-owner"],
         since: hoursAgo(30),
         itemId: "PVTI_165",
+        ...unpaired,
+      },
+      {
+        issue: 5,
+        title: "Task 5",
+        labels: ["blocked"],
+        since: hoursAgo(9),
+        itemId: "PVTI_5",
+        ...unpaired,
       },
-      { issue: 5, title: "Task 5", labels: ["blocked"], since: hoursAgo(9), itemId: "PVTI_5" },
       {
         issue: 171,
         title: "Task 171",
         labels: ["needs-owner"],
         since: hoursAgo(2),
         itemId: "PVTI_171",
+        ...unpaired,
       },
     ]);
   });
+  it("marks a phase review paired with an open epic, and an unpaired one", () => {
+    const s = snapshot({
+      epics: [
+        epic({
+          number: 514,
+          phase: 10,
+          labels: ["epic", "phase:10", "plan-approved", "needs-owner"],
+        }),
+      ],
+      issues: [
+        issue({
+          number: 514,
+          title: "Phase 10a: Billing",
+          labels: ["epic", "phase:10", "plan-approved", "needs-owner"],
+        }),
+        issue({
+          number: 571,
+          title: "Phase 10 review: Phase 10a: Billing",
+          labels: ["phase:10", "needs-owner"],
+        }),
+        issue({
+          number: 336,
+          title: "Phase 3 review: Onboarding",
+          labels: ["phase:3", "needs-owner"],
+        }),
+        issue({ number: 599, title: "decide: billing", labels: ["needs-owner"] }),
+      ],
+    });
+    const byIssue = new Map(needsYouItems(s).map((n) => [n.issue, n]));
+    expect(byIssue.get(571)).toMatchObject({ reviewOf: 514, phaseReview: true });
+    expect(byIssue.get(336)).toMatchObject({ reviewOf: null, phaseReview: true });
+    expect(byIssue.get(599)).toMatchObject({ reviewOf: null, phaseReview: false });
+  });
   it("carries a null itemId for an issue that is not on the project board", () => {
     const s = snapshot({ issues: [issue({ number: 8, labels: ["blocked"], itemId: null })] });
     expect(needsYouItems(s)[0]).toMatchObject({ issue: 8, itemId: null });
@@ -103,13 +148,23 @@ describe("applyUnblockToBoard", () => {
   it("drops the row, its blocked wait item and the pipeline flag, and leaves the rest alone", () => {
     const b = board({
       needsYou: [
-        { issue: 5, title: "Task 5", labels: ["blocked"], since: hoursAgo(9), itemId: "PVTI_5" },
+        {
+          issue: 5,
+          title: "Task 5",
+          labels: ["blocked"],
+          since: hoursAgo(9),
+          itemId: "PVTI_5",
+          reviewOf: null,
+          phaseReview: false,
+        },
         {
           issue: 171,
           title: "Task 171",
           labels: ["needs-owner"],
           since: hoursAgo(2),
           itemId: null,
+          reviewOf: null,
+          phaseReview: false,
         },
       ],
       waiting: [
diff --git a/src/needs-you.ts b/src/needs-you.ts
index 0c5cf38..2521a29 100644
--- a/src/needs-you.ts
+++ b/src/needs-you.ts
@@ -1,5 +1,6 @@
 import type { GitHubApi } from "./github.ts";
 import { fmt } from "./ledger.ts";
+import { PHASE_REVIEW_TITLE, pairReviews } from "./review-pairing.ts";
 import { type Board, NEEDS_YOU_LABELS, type NeedsYouItem } from "./state-file.ts";
 import type { Snapshot } from "./types.ts";
 
@@ -9,6 +10,7 @@ import type { Snapshot } from "./types.ts";
  * are excluded here. Oldest first — the point of the card is the issue that has been waiting a week.
  */
 export function needsYouItems(s: Snapshot): NeedsYouItem[] {
+  const pairs = pairReviews(s);
   return s.issues
     .filter((x) => x.state === "OPEN" && !x.labels.includes("epic"))
     .map((x) => ({
@@ -17,6 +19,8 @@ export function needsYouItems(s: Snapshot): NeedsYouItem[] {
       labels: NEEDS_YOU_LABELS.filter((l) => x.labels.includes(l)) as string[],
       since: x.updatedAt,
       itemId: x.itemId,
+      reviewOf: pairs.get(x.number) ?? null,
+      phaseReview: PHASE_REVIEW_TITLE.test(x.title),
     }))
     .filter((x) => x.labels.length > 0)
     .sort((a, b) => a.since.localeCompare(b.since) || a.issue - b.issue);
diff --git a/src/owner.test.ts b/src/owner.test.ts
index 649a099..1c15c1a 100644
--- a/src/owner.test.ts
+++ b/src/owner.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { epic, issue, snapshot } from "../test/helpers.ts";
+import { comment, epic, issue, snapshot } from "../test/helpers.ts";
 import { applyOwnerAction, applyOwnerActionToBoard, ownerItems } from "./owner.ts";
 
 const e = (over = {}) => epic({ number: 200, phase: 2, labels: ["epic", "phase:2"], ...over });
@@ -36,6 +36,26 @@ describe("ownerItems", () => {
     const items = ownerItems(snap([e({ labels: ["epic", "phase:2", "plan-approved"] })]));
     expect(items[0]?.actions).toEqual(["pause"]);
   });
+  it("carries the epic's updatedAt as since, and its paired review on a sign-off", () => {
+    const signOff = e({ labels: ["epic", "phase:2", "plan-approved", "needs-owner"] });
+    const s = snapshot({
+      epics: [signOff],
+      issues: [
+        issue({
+          number: 200,
+          title: "Phase 2: Things",
+          labels: signOff.labels,
+          updatedAt: "2026-09-01T00:00:00Z",
+          comments: [comment("Phase review: #250")],
+        }),
+        issue({ number: 250, title: "Phase 2 review: Things", labels: ["phase:2", "needs-owner"] }),
+      ],
+    });
+    expect(ownerItems(s)[0]).toMatchObject({ since: "2026-09-01T00:00:00Z", review: 250 });
+    // Not a sign-off: no review to show, even if one is paired.
+    const plan = e({ labels: ["epic", "phase:2", "needs-owner"] });
+    expect(ownerItems(snap([plan]))[0]?.review).toBeNull();
+  });
   it("skips closed epics and sorts by phase", () => {
     const items = ownerItems(
       snap([
@@ -118,6 +138,8 @@ describe("applyOwnerActionToBoard", () => {
         phase: 0,
         detail: "d",
         actions: ["sign_off" as const, "pause" as const],
+        since: null,
+        review: null,
       },
       {
         epic: 26,
@@ -125,10 +147,14 @@ describe("applyOwnerActionToBoard", () => {
         phase: 2,
         detail: "d",
         actions: ["start_planning" as const, "pause" as const],
+        since: null,
+        review: null,
       },
     ],
     needsYou: [],
     phases: [],
+    issues: [],
+    groups: [],
     explain: [],
     prs: [],
   };
@@ -148,6 +174,35 @@ describe("applyOwnerActionToBoard", () => {
     const resumed = applyOwnerActionToBoard(paused, 26, "unpause");
     expect(resumed.owner.find((o) => o.epic === 26)?.actions).toContain("pause");
   });
+  it("unpairs the epic's review on sign-off, so it stays on Needs you until the next tick", () => {
+    const review = {
+      issue: 300,
+      title: "Phase 0.5 review: Setup",
+      labels: ["needs-owner"],
+      since: "2026-09-01T00:00:00Z",
+      itemId: null,
+      reviewOf: 124,
+      phaseReview: true,
+    };
+    const b = applyOwnerActionToBoard({ ...board, needsYou: [review] }, 124, "sign_off");
+    expect(b.needsYou[0]?.reviewOf).toBeNull();
+  });
+  it("flips the Board group's paused flag, so its Pause/Resume button follows the click", () => {
+    const group = {
+      key: "epic:26",
+      kind: "epic" as const,
+      epic: 26,
+      phase: 2,
+      title: "Phase 2",
+      state: "not_started" as const,
+      paused: false,
+      doneTasks: [],
+    };
+    const withGroup = { ...board, groups: [group] };
+    const paused = applyOwnerActionToBoard(withGroup, 26, "pause");
+    expect(paused.groups[0]?.paused).toBe(true);
+    expect(applyOwnerActionToBoard(paused, 26, "unpause").groups[0]?.paused).toBe(false);
+  });
   it("leaves other epics alone and tolerates an unknown epic", () => {
     expect(applyOwnerActionToBoard(board, 999, "pause")).toEqual(board);
   });
diff --git a/src/owner.ts b/src/owner.ts
index de2c633..125e901 100644
--- a/src/owner.ts
+++ b/src/owner.ts
@@ -1,3 +1,4 @@
+import { pairReviews } from "./review-pairing.ts";
 import type { Board, OwnerAction, OwnerItem } from "./state-file.ts";
 import type { Snapshot } from "./types.ts";
 
@@ -22,6 +23,7 @@ const DETAIL: Record<OwnerAction, string> = {
  */
 export function ownerItems(s: Snapshot): OwnerItem[] {
   const titleOf = (n: number) => s.issues.find((i) => i.number === n)?.title ?? `#${n}`;
+  const reviewOf = new Map([...pairReviews(s)].map(([review, epic]) => [epic, review]));
   return [...s.epics]
     .filter((e) => e.state === "OPEN")
     .sort((a, b) => a.phase - b.phase)
@@ -38,6 +40,8 @@ export function ownerItems(s: Snapshot): OwnerItem[] {
         phase: e.phase,
         detail: DETAIL[actions[0] as OwnerAction],
         actions,
+        since: s.issues.find((i) => i.number === e.number)?.updatedAt ?? null,
+        review: actions.includes("sign_off") ? (reviewOf.get(e.number) ?? null) : null,
       };
     });
 }
@@ -67,6 +71,17 @@ export function applyOwnerActionToBoard(board: Board, epic: number, action: Owne
       action === "sign_off" || action === "approve_plan"
         ? board.waiting.filter((w) => w.subject !== subject)
         : board.waiting,
+    // A signed-off epic's row is gone, so its paired review needs its own row again until the
+    // next tick; otherwise a `needs-owner` issue would sit on no tab at all.
+    needsYou:
+      action === "sign_off"
+        ? board.needsYou.map((n) => (n.reviewOf === epic ? { ...n, reviewOf: null } : n))
+        : board.needsYou,
+    // The Board tab's epic header reads `paused`, so it flips with the label too.
+    groups:
+      action === "pause" || action === "unpause"
+        ? board.groups.map((g) => (g.epic === epic ? { ...g, paused: action === "pause" } : g))
+        : board.groups,
   };
 }
 
diff --git a/src/review-pairing.test.ts b/src/review-pairing.test.ts
new file mode 100644
index 0000000..8061a98
--- /dev/null
+++ b/src/review-pairing.test.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import { comment, epic, issue, snapshot } from "../test/helpers.ts";
+import { pairReviews } from "./review-pairing.ts";
+
+const SIGN_OFF = ["needs-owner", "plan-approved"];
+const epicIssue = (number: number, title: string, phase: number, comments: string[] = []) =>
+  issue({
+    number,
+    title,
+    labels: ["epic", `phase:${phase}`, ...SIGN_OFF],
+    body: "",
+    comments: comments.map((c) => comment(c)),
+  });
+const review = (number: number, title: string, phase: number) =>
+  issue({ number, title, labels: [`phase:${phase}`, "needs-owner"], body: "" });
+const epicOf = (number: number, phase: number, labels: string[] = SIGN_OFF) =>
+  epic({ number, phase, labels: ["epic", `phase:${phase}`, ...labels] });
+
+describe("pairReviews", () => {
+  it("pairs by the epic's Phase review comment", () => {
+    const s = snapshot({
+      epics: [epicOf(514, 10)],
+      issues: [
+        epicIssue(514, "Phase 10a: Billing", 10, ["Phase review: #571"]),
+        review(571, "Something else entirely", 10),
+      ],
+    });
+    expect(pairReviews(s).get(571)).toBe(514);
+  });
+
+  it("pairs by title with the epic's Phase prefix removed", () => {
+    const s = snapshot({
+      epics: [epicOf(525, 10)],
+      issues: [
+        epicIssue(525, "Phase 10b: Reports and exports", 10),
+        review(573, "Phase 10b review: Reports and exports", 10),
+      ],
+    });
+    expect(pairReviews(s).get(573)).toBe(525);
+  });
+
+  it("pairs a review whose title repeats the epic's full title", () => {
+    const s = snapshot({
+      epics: [epicOf(575, 10)],
+      issues: [
+        epicIssue(575, "Phase 10c: Team plans", 10),
+        review(594, "Phase 10c review: Phase 10c: Team plans", 10),
+      ],
+    });
+    expect(pairReviews(s).get(594)).toBe(575);
+  });
+
+  it("pairs a review whose phase token differs from its epic's", () => {
+    const s = snapshot({
+      epics: [epicOf(514, 10)],
+      issues: [
+        epicIssue(514, "Phase 10a: Billing", 10),
+        review(571, "Phase 10 review: Phase 10a: Billing", 10),
+      ],
+    });
+    expect(pairReviews(s).get(571)).toBe(514);
+  });
+
+  it("does not pair two epics that share a phase number by label", () => {
+    const s = snapshot({
+      epics: [epicOf(514, 10), epicOf(525, 10)],
+      issues: [
+        epicIssue(514, "Phase 10a: Billing", 10),
+        epicIssue(525, "Phase 10b: Reports and exports", 10),
+        review(573, "Phase 10b review: Reports and exports", 10),
+      ],
+    });
+    const pairs = pairReviews(s);
+    expect(pairs.get(573)).toBe(525);
+    expect([...pairs.values()]).not.toContain(514);
+  });
+
+  it("leaves a review unpaired when no open epic matches", () => {
+    const s = snapshot({
+      epics: [],
+      issues: [review(336, "Phase 3 review: Onboarding", 3)],
+    });
+    expect(pairReviews(s).size).toBe(0);
+  });
+
+  it("does not pair on a title that only contains the epic's name", () => {
+    // The review's own epic is closed; an open epic called "UI" must not swallow it.
+    const s = snapshot({
+      epics: [epicOf(900, 9)],
+      issues: [epicIssue(900, "Phase 9: UI", 9), review(336, "Phase 3 review: Auth UI polish", 3)],
+    });
+    expect(pairReviews(s).size).toBe(0);
+  });
+
+  it("pairs only with an epic that is waiting on its sign-off", () => {
+    const s = snapshot({
+      epics: [epicOf(900, 9, ["plan-approved"])],
+      issues: [
+        issue({
+          number: 900,
+          title: "Phase 9: Search",
+          labels: ["epic", "phase:9", "plan-approved"],
+          body: "",
+          comments: [comment("Phase review: #950")],
+        }),
+        review(950, "Phase 9 review: Search", 9),
+      ],
+    });
+    expect(pairReviews(s).size).toBe(0);
+  });
+
+  it("pairs one review per epic, so a second review keeps its own row", () => {
+    const s = snapshot({
+      epics: [epicOf(514, 10)],
+      issues: [
+        epicIssue(514, "Phase 10a: Billing", 10, ["Phase review: #571"]),
+        review(571, "Phase 10a review: Billing", 10),
+        review(572, "Phase 10a review: Billing", 10),
+      ],
+    });
+    const pairs = pairReviews(s);
+    expect(pairs.get(571)).toBe(514);
+    expect(pairs.has(572)).toBe(false);
+  });
+
+  it("prefers the comment over a title match", () => {
+    const s = snapshot({
+      epics: [epicOf(514, 10), epicOf(525, 10)],
+      issues: [
+        epicIssue(514, "Phase 10a: Billing", 10, ["Phase review: #573"]),
+        epicIssue(525, "Phase 10b: Reports and exports", 10),
+        review(573, "Phase 10b review: Reports and exports", 10),
+      ],
+    });
+    expect(pairReviews(s).get(573)).toBe(514);
+  });
+});
diff --git a/src/review-pairing.ts b/src/review-pairing.ts
new file mode 100644
index 0000000..e8c4965
--- /dev/null
+++ b/src/review-pairing.ts
@@ -0,0 +1,62 @@
+import type { Snapshot } from "./types.ts";
+
+const REVIEW_COMMENT = /^Phase review: #(\d+)/gm;
+/** The title `roles/phase-closer.md` gives a phase review: `Phase <N> review: <epic title>`. */
+export const PHASE_REVIEW_TITLE = /^Phase .+ review: (.+)$/;
+const PHASE_PREFIX = /^Phase [^:]+:\s*/;
+
+/**
+ * Which open epic each phase review issue belongs to: review issue number → epic number. Only an
+ * epic waiting on its sign-off (`needs-owner` and `plan-approved`) takes a review, and only one —
+ * the page shows the pair on that epic's Sign off row, so anything else has to keep its own row.
+ * The phase-closer links the review from the epic with a `Phase review: #<n>` comment, which wins
+ * when present (the newest one); otherwise the review's title must name the epic exactly, with or
+ * without the epic's `Phase <X>:` prefix. Never by `phase:<N>` alone — several open epics can
+ * share a phase number — and never by a substring, which would let an epic called "UI" swallow
+ * an unrelated review.
+ */
+export function pairReviews(s: Snapshot): Map<number, number> {
+  const pairs = new Map<number, number>();
+  const signOff = s.epics
+    .filter(
+      (e) =>
+        e.state === "OPEN" &&
+        e.labels.includes("needs-owner") &&
+        e.labels.includes("plan-approved"),
+    )
+    .flatMap((e) => {
+      const i = s.issues.find((x) => x.number === e.number);
+      return i ? [i] : [];
+    });
+  const isReview = (n: number) => {
+    const r = s.issues.find((x) => x.number === n);
+    return r !== undefined && !r.labels.includes("epic");
+  };
+  const taken = new Set<number>();
+  for (const e of signOff) {
+    const linked = [...e.comments]
+      .sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+      .flatMap((c) => [...c.body.matchAll(REVIEW_COMMENT)].map((m) => Number(m[1])))
+      .filter(isReview);
+    const newest = linked[linked.length - 1];
+    if (newest !== undefined && !pairs.has(newest)) {
+      pairs.set(newest, e.number);
+      taken.add(e.number);
+    }
+  }
+  for (const r of s.issues) {
+    if (pairs.has(r.number) || r.labels.includes("epic")) continue;
+    const named = PHASE_REVIEW_TITLE.exec(r.title)?.[1]?.trim();
+    if (!named) continue;
+    const owner = signOff.find(
+      (e) =>
+        !taken.has(e.number) &&
+        (named === e.title.trim() || named === e.title.replace(PHASE_PREFIX, "").trim()),
+    );
+    if (owner) {
+      pairs.set(r.number, owner.number);
+      taken.add(owner.number);
+    }
+  }
+  return pairs;
+}
diff --git a/src/session-history.test.ts b/src/session-history.test.ts
new file mode 100644
index 0000000..6354f3f
--- /dev/null
+++ b/src/session-history.test.ts
@@ -0,0 +1,159 @@
+import { describe, expect, it } from "vitest";
+import { describeSessionHistory, parseRange } from "./session-history.ts";
+import type { SessionLogEntry } from "./sessions.ts";
+
+// Midday UTC, so the local date is the same day in every timezone the tests might run in.
+const entry = (over: Partial<SessionLogEntry> = {}): SessionLogEntry => ({
+  t: "2026-10-07T12:00:00.000Z",
+  host: "h",
+  role: "builder",
+  issue: 1,
+  sessionId: "s",
+  attempt: 1,
+  costUsd: 1,
+  outcome: "pr_opened",
+  model: "claude-opus-5-5",
+  turns: 10,
+  durationMinutes: 2,
+  denials: 0,
+  subtype: "success",
+  ...over,
+});
+const all = { from: null, to: null };
+
+describe("describeSessionHistory", () => {
+  it("totals, daily, byRole and byIssue for the whole log", () => {
+    const entries = [
+      entry({ issue: 1, role: "builder", costUsd: 4, title: "One" }),
+      entry({ issue: 1, role: "reviewer", costUsd: 1, t: "2026-10-08T12:00:00.000Z" }),
+      entry({ issue: 2, role: "builder", costUsd: 2, t: "2026-10-08T13:00:00.000Z" }),
+    ];
+    const h = describeSessionHistory(entries, all, new Map());
+    expect(h.totals).toEqual({ spendUsd: 7, sessions: 3, issues: 2 });
+    expect(h.daily).toEqual([
+      { date: "2026-10-07", spendUsd: 4, sessions: 1 },
+      { date: "2026-10-08", spendUsd: 3, sessions: 2 },
+    ]);
+    expect(h.byRole).toEqual([
+      { role: "builder", spendUsd: 6, sessions: 2 },
+      { role: "reviewer", spendUsd: 1, sessions: 1 },
+    ]);
+    expect(
+      h.byIssue.map((r) => [r.issue, r.title, r.roles, r.sessions, r.costUsd, r.lastAt]),
+    ).toEqual([
+      [1, "One", ["builder", "reviewer"], 2, 5, "2026-10-08T12:00:00.000Z"],
+      [2, "#2", ["builder"], 1, 2, "2026-10-08T13:00:00.000Z"],
+    ]);
+    // Newest first inside a row.
+    expect(h.byIssue[0]?.entries.map((e) => e.role)).toEqual(["reviewer", "builder"]);
+  });
+
+  it("fills zero days between the first and last entry", () => {
+    const h = describeSessionHistory(
+      [entry(), entry({ t: "2026-10-10T12:00:00.000Z" })],
+      all,
+      new Map(),
+    );
+    expect(h.daily.map((d) => [d.date, d.sessions])).toEqual([
+      ["2026-10-07", 1],
+      ["2026-10-08", 0],
+      ["2026-10-09", 0],
+      ["2026-10-10", 1],
+    ]);
+  });
+
+  it("filters by an inclusive local-date range", () => {
+    const entries = [
+      entry({ t: "2026-10-06T12:00:00.000Z", costUsd: 1 }),
+      entry({ t: "2026-10-07T12:00:00.000Z", costUsd: 2 }),
+      entry({ t: "2026-10-09T12:00:00.000Z", costUsd: 4 }),
+    ];
+    const h = describeSessionHistory(entries, { from: "2026-10-07", to: "2026-10-09" }, new Map());
+    expect(h.totals.spendUsd).toBe(6);
+    expect(h.daily.map((d) => d.date)).toEqual(["2026-10-07", "2026-10-08", "2026-10-09"]);
+    expect(
+      describeSessionHistory(entries, { from: "2026-10-08", to: null }, new Map()).totals.sessions,
+    ).toBe(1);
+  });
+
+  it("takes a title from the newest titled line, then open titles, then #N", () => {
+    const entries = [
+      entry({ issue: 1, title: "Old name" }),
+      entry({ issue: 1, title: "New name", t: "2026-10-09T12:00:00.000Z" }),
+      entry({ issue: 2 }),
+      entry({ issue: 3 }),
+    ];
+    // The range excludes the newest titled line; the title still comes from the whole log.
+    const h = describeSessionHistory(
+      entries,
+      { from: null, to: "2026-10-08" },
+      new Map([[2, "Open two"]]),
+    );
+    const titles = new Map(h.byIssue.map((r) => [r.issue, r.title]));
+    expect(titles.get(1)).toBe("New name");
+    expect(titles.get(2)).toBe("Open two");
+    expect(titles.get(3)).toBe("#3");
+  });
+
+  it("is zeros and empty arrays for no entries", () => {
+    expect(describeSessionHistory([], all, new Map())).toEqual({
+      from: null,
+      to: null,
+      totals: { spendUsd: 0, sessions: 0, issues: 0 },
+      daily: [],
+      byRole: [],
+      byIssue: [],
+    });
+  });
+});
+
+describe("parseRange", () => {
+  it("accepts absent bounds and real dates in order", () => {
+    expect(parseRange(null, null)).toEqual({ from: null, to: null });
+    expect(parseRange("2026-10-01", "2026-10-26")).toEqual({
+      from: "2026-10-01",
+      to: "2026-10-26",
+    });
+    expect(parseRange("2026-10-26", "2026-10-26")).toEqual({
+      from: "2026-10-26",
+      to: "2026-10-26",
+    });
+  });
+
+  it("rejects a malformed date, a non-date and from after to", () => {
+    expect(parseRange("2026-13-01", null)).toBeNull();
+    expect(parseRange("2026-02-30", null)).toBeNull();
+    expect(parseRange("../etc", null)).toBeNull();
+    expect(parseRange(null, "yesterday")).toBeNull();
+    expect(parseRange("2026-10-27", "2026-10-01")).toBeNull();
+  });
+
+  it("rejects the partial years a date input sends while the year is typed", () => {
+    // A date input fires `change` once per year digit: 0002-…, 0020-…, 0202-…, then 2026-….
+    for (const partial of ["0002-10-26", "0020-10-26", "0202-10-26", "1999-12-31"])
+      expect(parseRange(partial, null)).toBeNull();
+    expect(parseRange(null, "2100-01-01")).toBeNull();
+    expect(parseRange("2000-01-01", "2099-12-31")).toEqual({
+      from: "2000-01-01",
+      to: "2099-12-31",
+    });
+  });
+});
+
+describe("describeSessionHistory on a wide range", () => {
+  it("draws only the days the log covers when the range spans more than ten years", () => {
+    const entries = [entry(), entry({ t: "2026-10-09T12:00:00.000Z" })];
+    const h = describeSessionHistory(entries, { from: "2000-01-01", to: "2099-12-31" }, new Map());
+    expect(h.daily.map((d) => d.date)).toEqual(["2026-10-07", "2026-10-08", "2026-10-09"]);
+  });
+
+  it("answers a wide range over a large log quickly", () => {
+    const entries = Array.from({ length: 2000 }, (_, i) =>
+      entry({ t: new Date(Date.parse("2026-01-01T12:00:00Z") + i * 3_600_000).toISOString() }),
+    );
+    const started = Date.now();
+    describeSessionHistory(entries, { from: "2000-01-01", to: "2099-12-31" }, new Map());
+    describeSessionHistory(entries, { from: "2026-01-01", to: "2026-12-31" }, new Map());
+    expect(Date.now() - started).toBeLessThan(500);
+  });
+});
diff --git a/src/session-history.ts b/src/session-history.ts
new file mode 100644
index 0000000..dd8da56
--- /dev/null
+++ b/src/session-history.ts
@@ -0,0 +1,148 @@
+import { localDate } from "./preflight.ts";
+import type { SessionLogEntry } from "./sessions.ts";
+import type { Board } from "./state-file.ts";
+
+/** Local dates (`YYYY-MM-DD`), both ends inclusive; null is open on that side. */
+export interface SessionRange {
+  from: string | null;
+  to: string | null;
+}
+
+/** What the Session tab shows for one range of `sessions.log`. */
+export interface SessionHistory {
+  from: string | null;
+  to: string | null;
+  totals: { spendUsd: number; sessions: number; issues: number };
+  daily: { date: string; spendUsd: number; sessions: number }[];
+  byRole: { role: string; spendUsd: number; sessions: number }[];
+  byIssue: {
+    issue: number;
+    title: string;
+    roles: string[];
+    sessions: number;
+    lastAt: string;
+    costUsd: number;
+    entries: SessionLogEntry[];
+  }[];
+}
+
+/**
+ * Years 2000–2099 only. A date input fires `change` once per typed year digit (`0002-…`,
+ * `0020-…`, `0202-…`), and each of those would otherwise be a valid range of centuries.
+ */
+const DATE = /^20\d{2}-\d{2}-\d{2}$/;
+/** Past ten years the chart stops zero-filling the range and spans only the days the log has. */
+const MAX_FILL_DAYS = 3660;
+
+/** A real calendar date in `YYYY-MM-DD` form; `2026-02-30` is not one. */
+function isDate(s: string): boolean {
+  if (!DATE.test(s)) return false;
+  const d = new Date(`${s}T00:00:00Z`);
+  return !Number.isNaN(d.getTime()) && d.toISOString().slice(0, 10) === s;
+}
+
+const daysBetween = (a: string, b: string) =>
+  Math.round((Date.parse(`${b}T00:00:00Z`) - Date.parse(`${a}T00:00:00Z`)) / 86_400_000);
+
+/** The query string's range, or null when either bound is not a date or they are out of order. */
+export function parseRange(from: string | null, to: string | null): SessionRange | null {
+  if ((from !== null && !isDate(from)) || (to !== null && !isDate(to))) return null;
+  if (from !== null && to !== null && from > to) return null;
+  return { from, to };
+}
+
+/** Every date from `a` to `b` inclusive, stepping in UTC so a DST change cannot skip a day. */
+function datesBetween(a: string, b: string): string[] {
+  const out: string[] = [];
+  for (let d = new Date(`${a}T00:00:00Z`); d.toISOString().slice(0, 10) <= b; ) {
+    out.push(d.toISOString().slice(0, 10));
+    d = new Date(d.getTime() + 86_400_000);
+  }
+  return out;
+}
+
+/** Titles the board knows for open issues and epics, for history rows logged without one. */
+export function boardTitles(board: Board | null): Map<number, string> {
+  const titles = new Map<number, string>();
+  if (!board) return titles;
+  for (const r of board.pipeline) titles.set(r.issue, r.title);
+  for (const n of board.needsYou) titles.set(n.issue, n.title);
+  for (const o of board.owner) titles.set(o.epic, o.title);
+  for (const i of board.issues) titles.set(i.issue, i.title);
+  return titles;
+}
+
+/**
+ * Spend and sessions over a range of the log, counted per line the way `todayStats` counts them
+ * for the daily cap, so the two figures on the page agree. A row's title comes from the newest
+ * line for that issue that recorded one (anywhere in the log), else the board, else `#N`.
+ */
+export function describeSessionHistory(
+  entries: SessionLogEntry[],
+  range: SessionRange,
+  openTitles: ReadonlyMap<number, string>,
+): SessionHistory {
+  const sorted = [...entries].sort((a, b) => a.t.localeCompare(b.t));
+  const days = new Map<SessionLogEntry, string>(sorted.map((e) => [e, localDate(new Date(e.t))]));
+  const dayOf = (e: SessionLogEntry) => days.get(e) as string;
+  const inRange = sorted.filter((e) => {
+    const d = dayOf(e);
+    return (range.from === null || d >= range.from) && (range.to === null || d <= range.to);
+  });
+  const logged = new Map<number, string>();
+  for (const e of sorted) if (e.title) logged.set(e.issue, e.title);
+
+  const spend = (xs: SessionLogEntry[]) => xs.reduce((s, e) => s + e.costUsd, 0);
+  // One pass into per-day buckets, then the days of the chart look them up.
+  const buckets = new Map<string, { spendUsd: number; sessions: number }>();
+  for (const e of inRange) {
+    const b = buckets.get(dayOf(e)) ?? { spendUsd: 0, sessions: 0 };
+    b.spendUsd += e.costUsd;
+    b.sessions += 1;
+    buckets.set(dayOf(e), b);
+  }
+  const first = inRange[0];
+  const last = inRange[inRange.length - 1];
+  let daily: SessionHistory["daily"] = [];
+  if (first && last) {
+    let start = range.from ?? dayOf(first);
+    let end = range.to ?? dayOf(last);
+    if (daysBetween(start, end) > MAX_FILL_DAYS) {
+      start = dayOf(first);
+      end = dayOf(last);
+    }
+    daily = datesBetween(start, end).map((date) => ({
+      date,
+      ...(buckets.get(date) ?? { spendUsd: 0, sessions: 0 }),
+    }));
+  }
+
+  const roles = new Map<string, SessionLogEntry[]>();
+  const issues = new Map<number, SessionLogEntry[]>();
+  for (const e of inRange) {
+    roles.set(e.role, roles.get(e.role) ?? []);
+    roles.get(e.role)?.push(e);
+    issues.set(e.issue, issues.get(e.issue) ?? []);
+    issues.get(e.issue)?.push(e);
+  }
+  return {
+    from: range.from,
+    to: range.to,
+    totals: { spendUsd: spend(inRange), sessions: inRange.length, issues: issues.size },
+    daily,
+    byRole: [...roles]
+      .map(([role, xs]) => ({ role, spendUsd: spend(xs), sessions: xs.length }))
+      .sort((a, b) => b.spendUsd - a.spendUsd),
+    byIssue: [...issues]
+      .map(([issue, xs]) => ({
+        issue,
+        title: logged.get(issue) ?? openTitles.get(issue) ?? `#${issue}`,
+        roles: [...new Set(xs.map((e) => e.role))],
+        sessions: xs.length,
+        lastAt: (xs[xs.length - 1] as SessionLogEntry).t,
+        costUsd: spend(xs),
+        entries: [...xs].reverse(),
+      }))
+      .sort((a, b) => b.costUsd - a.costUsd),
+  };
+}
diff --git a/src/sessions.test.ts b/src/sessions.test.ts
index 11c4fe1..bb62f9e 100644
--- a/src/sessions.test.ts
+++ b/src/sessions.test.ts
@@ -29,6 +29,15 @@ const entry = (over: Partial<SessionLogEntry> = {}): SessionLogEntry => ({
 });
 
 describe("appendSession", () => {
+  it("reads a title when present and leaves it undefined on older lines", () => {
+    const dir = mkdtempSync(join(tmpdir(), "tt-"));
+    appendSession(dir, entry({ title: "feat: a grid" }));
+    appendSession(dir, entry({ sessionId: "t" }));
+    const [withTitle, without] = readSessions(dir);
+    expect(withTitle?.title).toBe("feat: a grid");
+    expect(without?.title).toBeUndefined();
+  });
+
   it("appends one JSON line per session", () => {
     const dir = mkdtempSync(join(tmpdir(), "tt-"));
     appendSession(dir, entry());
diff --git a/src/sessions.ts b/src/sessions.ts
index dee4d44..5d9359b 100644
--- a/src/sessions.ts
+++ b/src/sessions.ts
@@ -19,6 +19,11 @@ export interface SessionLogEntry {
   denials: number;
   /** The CLI's own result subtype (`success`, `error_max_turns`, …), kept next to the outcome. */
   subtype: string;
+  /**
+   * The issue's title when the session ran, so the page's cost history can name a task after it
+   * has closed and left the snapshot. Absent on lines written before titles were recorded.
+   */
+  title?: string;
 }
 
 /**
@@ -64,6 +69,7 @@ export function readSessions(stateDir: string): SessionLogEntry[] {
           durationMinutes: Number(j.durationMinutes ?? 0),
           denials: Number(j.denials ?? 0),
           subtype: String(j.subtype ?? ""),
+          ...(typeof j.title === "string" ? { title: j.title } : {}),
         });
     } catch {
       /* skip a torn line */
diff --git a/src/state-file.test.ts b/src/state-file.test.ts
index df7b92a..82d166b 100644
--- a/src/state-file.test.ts
+++ b/src/state-file.test.ts
@@ -80,6 +80,16 @@ describe("state file", () => {
           tasks: [{ issue: 1, title: "t", status: null, closed: false, model: null }],
         },
       ],
+      owner: [{ epic: 9, title: "p", phase: 1, detail: "", actions: ["pause"] }],
+      needsYou: [
+        {
+          issue: 2,
+          title: "n",
+          labels: ["needs-owner"],
+          since: "2026-09-01T00:00:00Z",
+          itemId: null,
+        },
+      ],
       explain: [],
       prs: [],
     };
@@ -88,6 +98,29 @@ describe("state file", () => {
     expect(s).not.toBeNull();
     expect(s?.board?.pipeline[0]?.effort).toBeNull();
     expect(s?.board?.phases[0]?.tasks[0]?.effort).toBeNull();
+    // Written before the Needs you tab: owner rows without since/review, needs-you rows unpaired.
+    expect(s?.board?.owner[0]).toMatchObject({ since: null, review: null });
+    expect(s?.board?.needsYou[0]).toMatchObject({ reviewOf: null, phaseReview: false });
+    // Written before the Board tab: no issues or groups, which read as empty.
+    expect(s?.board?.issues).toEqual([]);
+    expect(s?.board?.groups).toEqual([]);
+  });
+  it("a state file written before themes parses with theme null; initialState carries one", () => {
+    const dir = mkdtempSync(join(tmpdir(), "tt-state-"));
+    const { theme: _absent, ...old } = base();
+    writeFileSync(statePath(dir), JSON.stringify(old));
+    expect(readState(dir)?.theme).toBeNull();
+    expect(base().theme).toBeNull();
+    expect(
+      initialState({
+        pid: 1,
+        host: "h",
+        configPath: "/c",
+        dryRun: false,
+        startedAt: "2026-09-03T12:00:00.000Z",
+        theme: "teal",
+      }).theme,
+    ).toBe("teal");
   });
   it("StateStore.patch merges and persists", () => {
     const dir = mkdtempSync(join(tmpdir(), "tt-state-"));
diff --git a/src/state-file.ts b/src/state-file.ts
index 94d58db..a2ed29a 100644
--- a/src/state-file.ts
+++ b/src/state-file.ts
@@ -2,6 +2,7 @@ import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "
 import { join } from "node:path";
 import { z } from "zod";
 import { ActivitySchema } from "./stream.ts";
+import { type ThemeName, ThemeSchema } from "./theme.ts";
 
 export const StopModeSchema = z.enum(["stop", "abort"]);
 export type StopMode = z.infer<typeof StopModeSchema>;
@@ -145,6 +146,10 @@ export const OwnerItemSchema = z.object({
   phase: z.number(),
   detail: z.string(),
   actions: z.array(OwnerActionSchema),
+  /** The epic issue's `updatedAt`, so the page can say how long it has waited. */
+  since: z.string().nullable().default(null),
+  /** The phase review issue paired with this epic; set only when it offers `sign_off`. */
+  review: z.number().int().nullable().default(null),
 });
 export type OwnerItem = z.infer<typeof OwnerItemSchema>;
 
@@ -162,6 +167,10 @@ export const NeedsYouItemSchema = z.object({
   since: z.string(),
   /** Project item id, so Unblock can set Status Ready without another read; null when off board. */
   itemId: z.string().nullable(),
+  /** The open epic this phase review belongs to; its Sign off row shows it instead of a row here. */
+  reviewOf: z.number().int().nullable().default(null),
+  /** Titled like a phase review; with `reviewOf` null, its epic is no longer open. */
+  phaseReview: z.boolean().default(false),
 });
 export type NeedsYouItem = z.infer<typeof NeedsYouItemSchema>;
 
@@ -202,6 +211,57 @@ export const PhaseProgressSchema = z.object({
 });
 export type PhaseProgress = z.infer<typeof PhaseProgressSchema>;
 
+/**
+ * One open issue as the Board tab lists it: every open non-epic issue in the snapshot, on the
+ * project board or not (`status` null is "Off board"). Computed in the tick, so no extra reads.
+ */
+export const BoardIssueSchema = z.object({
+  issue: z.number().int(),
+  title: z.string(),
+  status: z.string().nullable(),
+  /** The labels worth showing on the row: `blocked`, `size:*`, `area:*`. */
+  labels: z.array(z.string()),
+  /** The `BoardGroup.key` this issue is listed under. */
+  group: z.string(),
+  /** The open non-draft PR that closes this issue, if any. */
+  pr: z.number().int().nullable(),
+  dependsOn: z.array(z.number().int()),
+  /** The subset of `dependsOn` still open in the snapshot. */
+  openDependsOn: z.array(z.number().int()),
+  blocked: z.boolean(),
+  /** The issue's `model:<name>` label, or null when the global model applies. */
+  model: z.string().nullable(),
+  /** The issue's `effort:<level>` label, or null when the default effort applies. */
+  effort: z.string().nullable(),
+});
+export type BoardIssue = z.infer<typeof BoardIssueSchema>;
+
+export const BOARD_GROUP_STATES = [
+  "planning",
+  "plan_waiting",
+  "building",
+  "signoff_waiting",
+  "not_started",
+] as const;
+
+/**
+ * A heading on the Board tab: an open epic, or — for issues no open epic claims — their phase
+ * (`unlinked` when several open epics share it, `closed` when none is open), or "No phase".
+ */
+export const BoardGroupSchema = z.object({
+  key: z.string(),
+  kind: z.enum(["epic", "unlinked", "closed", "none"]),
+  epic: z.number().int().nullable(),
+  phase: z.number().nullable(),
+  title: z.string(),
+  /** Where an epic stands, from its labels; null for the non-epic groups. */
+  state: z.enum(BOARD_GROUP_STATES).nullable(),
+  paused: z.boolean(),
+  /** Closed task numbers: closed issues have left the snapshot, so only their numbers remain. */
+  doneTasks: z.array(z.number().int()),
+});
+export type BoardGroup = z.infer<typeof BoardGroupSchema>;
+
 export const BoardSchema = z.object({
   at: z.string(),
   waiting: z.array(WaitItemSchema),
@@ -212,6 +272,9 @@ export const BoardSchema = z.object({
   needsYou: z.array(NeedsYouItemSchema).default([]),
   // Same.
   phases: z.array(PhaseProgressSchema).default([]),
+  // Same: the Board tab's rows and headings.
+  issues: z.array(BoardIssueSchema).default([]),
+  groups: z.array(BoardGroupSchema).default([]),
   explain: z.array(z.string()),
   prs: z.array(
     z.object({
@@ -273,6 +336,11 @@ export const ForemanStateSchema = z.object({
    *. Older state.json files predate this field; the default keeps them readable.
    */
   maxSessionsPerDay: z.number().int().nullable().default(null),
+  /**
+   * The page's color theme, picked once when the daemon first starts and changed from the page.
+   * Older state.json files predate this field; the default keeps them readable.
+   */
+  theme: ThemeSchema.nullable().default(null),
 });
 export type ForemanState = z.infer<typeof ForemanStateSchema>;
 
@@ -290,6 +358,8 @@ export function initialState(o: {
   model?: string | null;
   /** Carried over from the previous state.json, like `model`, so a restart keeps the override. */
   maxSessionsPerDay?: number | null;
+  /** Carried over from the previous state.json, or picked at first start; never reset. */
+  theme?: ThemeName | null;
 }): ForemanState {
   return {
     version: 1,
@@ -297,6 +367,7 @@ export function initialState(o: {
     // After the spread: an omitted override arrives as undefined, which the schema rejects.
     model: o.model ?? null,
     maxSessionsPerDay: o.maxSessionsPerDay ?? null,
+    theme: o.theme ?? null,
     exitedAt: null,
     lastTickAt: null,
     nextTickAt: null,
diff --git a/src/status.test.ts b/src/status.test.ts
index 20c0f20..0346514 100644
--- a/src/status.test.ts
+++ b/src/status.test.ts
@@ -3,6 +3,7 @@ import type { SessionLogEntry } from "./sessions.ts";
 import { CAP_CHOICES, initialState, MODEL_CHOICES } from "./state-file.ts";
 import { describeStatus, formatStatus, type StatusInput } from "./status.ts";
 import { emptyActivity } from "./stream.ts";
+import { pickTheme, THEMES } from "./theme.ts";
 
 const now = "2026-09-04T05:10:00.000Z";
 const session = (over: Partial<SessionLogEntry> = {}): SessionLogEntry => ({
@@ -64,6 +65,20 @@ function input(over: Partial<StatusInput> = {}): StatusInput {
   };
 }
 
+describe("describeStatus theme", () => {
+  it("echoes the instance and the saved theme", () => {
+    const r = describeStatus(
+      input({ instance: "widgets", state: { ...state(), theme: "violet" } }),
+    );
+    expect(r.instance).toBe("widgets");
+    expect(r.theme).toEqual({ current: "violet", choices: THEMES });
+  });
+  it("derives a stable theme when there is no state to read one from", () => {
+    const r = describeStatus(input({ instance: "widgets", state: null }));
+    expect(r.theme.current).toBe(pickTheme("widgets", []));
+  });
+});
+
 describe("describeStatus", () => {
   it("RUNNING with uptime and a current session", () => {
     const r = describeStatus(input({ state: { ...state(), current } }));
@@ -294,6 +309,50 @@ describe("live activity and board", () => {
     );
     expect(describeStatus(input()).tick?.blockedBySession).toBe(false);
   });
+  it("carries the stored board's issues and groups into the report", () => {
+    const groups = [
+      {
+        key: "none",
+        kind: "none" as const,
+        epic: null,
+        phase: null,
+        title: "No phase",
+        state: null,
+        paused: false,
+        doneTasks: [],
+      },
+    ];
+    const issues = [
+      {
+        issue: 7,
+        title: "t",
+        status: null,
+        labels: [],
+        group: "none",
+        pr: null,
+        dependsOn: [],
+        openDependsOn: [],
+        blocked: false,
+        model: null,
+        effort: null,
+      },
+    ];
+    const board = {
+      at: now,
+      waiting: [],
+      pipeline: [],
+      owner: [],
+      needsYou: [],
+      phases: [],
+      issues,
+      groups,
+      explain: [],
+      prs: [],
+    };
+    const r = describeStatus(input({ state: { ...state(), board } }));
+    expect(r.board?.issues).toEqual(issues);
+    expect(r.board?.groups).toEqual(groups);
+  });
   it("layers live STOP/preflight/cap waits over the stored board", () => {
     const board = {
       at: now,
@@ -304,13 +363,20 @@ describe("live activity and board", () => {
       owner: [],
       needsYou: [],
       phases: [],
+      issues: [],
+      groups: [],
       explain: [],
       prs: [],
     };
     const r = describeStatus(input({ state: { ...state(), board }, stopPresent: true }));
     expect(r.board?.waiting.map((w) => w.kind)).toEqual(["stop", "ci"]);
+    // The page's banners and Waiting on rows come from the same merged board.
+    expect(r.attention.banners.map((w) => w.kind)).toEqual(["stop"]);
+    expect(r.attention.waitRows.map((w) => w.kind)).toEqual(["ci"]);
+    expect(r.attention.waiting).toBe(1);
     const noBoard = describeStatus(input({ stopPresent: true }));
     expect(noBoard.board?.waiting.map((w) => w.kind)).toEqual(["stop"]);
+    expect(describeStatus(input({ state: null })).attention.needsYou).toBe(0);
     const capped = describeStatus(
       input({
         state: {
@@ -338,6 +404,8 @@ describe("live activity and board", () => {
       owner: [],
       needsYou: [],
       phases: [],
+      issues: [],
+      groups: [],
       explain: [],
       prs: [],
     };
@@ -365,6 +433,8 @@ describe("live activity and board", () => {
       owner: [],
       needsYou: [],
       phases: [],
+      issues: [],
+      groups: [],
       explain: [],
       prs: [],
     };
@@ -403,6 +473,8 @@ describe("live activity and board", () => {
           // A week old: the case the card exists for, and the one a bare clock time cannot say.
           since: "2026-08-28T05:03:00.000Z",
           itemId: "PVTI_165",
+          reviewOf: null,
+          phaseReview: false,
         },
         {
           issue: 5,
@@ -410,9 +482,13 @@ describe("live activity and board", () => {
           labels: ["blocked"],
           since: "2026-09-04T04:00:00.000Z",
           itemId: null,
+          reviewOf: null,
+          phaseReview: false,
         },
       ],
       phases: [],
+      issues: [],
+      groups: [],
       explain: [],
       prs: [],
     };
@@ -443,6 +519,8 @@ describe("live activity and board", () => {
           tasks: [],
         },
       ],
+      issues: [],
+      groups: [],
       explain: [],
       prs: [],
     };
diff --git a/src/status.ts b/src/status.ts
index ac36c05..8646c4d 100644
--- a/src/status.ts
+++ b/src/status.ts
@@ -1,3 +1,4 @@
+import { type Attention, describeAttention } from "./attention.ts";
 import { overlayCurrent } from "./board.ts";
 import { formatBudget } from "./budget.ts";
 import { type SessionLogEntry, todayStats } from "./sessions.ts";
@@ -12,6 +13,7 @@ import {
   type ForemanState,
   type StopMode,
 } from "./state-file.ts";
+import { pickTheme, THEMES, type ThemeName } from "./theme.ts";
 import { liveWaits } from "./waiting.ts";
 
 export type DaemonState = "RUNNING" | "STOPPED" | "CRASHED" | "UNKNOWN";
@@ -42,6 +44,8 @@ export interface StatusInput {
   configModel: string;
   /** The repo's `models`; the page and `ctl status` offer these as one-click choices. */
   modelChoices: readonly string[];
+  /** The instance name (`foreman -p <name>`), for the page header and the derived theme. */
+  instance?: string;
 }
 
 export interface StatusReport {
@@ -86,6 +90,12 @@ export interface StatusReport {
   lastPlan: string[] | null;
   board: Board | null;
   budget: BudgetReport | null;
+  /** Badge counts, banners and the Waiting on rows, from the merged board. */
+  attention: Attention;
+  /** The instance name the page shows at the top of its sidebar. */
+  instance: string;
+  /** The page's color theme for this instance, and the ones it can switch to. */
+  theme: { current: ThemeName; choices: readonly ThemeName[] };
   recent: SessionLogEntry[];
   today: { count: number; cap: number; spendUsd: number };
   /** The daily session cap the next tick will enforce, and the page's one-click choices. */
@@ -156,6 +166,8 @@ export function describeStatus(i: StatusInput): StatusReport {
           owner: stored?.owner ?? [],
           needsYou: stored?.needsYou ?? [],
           phases: stored?.phases ?? [],
+          issues: stored?.issues ?? [],
+          groups: stored?.groups ?? [],
           explain: stored?.explain ?? [],
           prs: stored?.prs ?? [],
         }
@@ -220,6 +232,9 @@ export function describeStatus(i: StatusInput): StatusReport {
     lastPlan: s?.lastPlan ?? null,
     board,
     budget: s?.budget ?? null,
+    attention: describeAttention(board),
+    instance: i.instance ?? "",
+    theme: { current: s?.theme ?? pickTheme(i.instance ?? "", []), choices: THEMES },
     recent,
     today: { count: today.count, cap, spendUsd: today.spendUsd },
   };
diff --git a/src/task-effort.test.ts b/src/task-effort.test.ts
index ffe1398..afe792b 100644
--- a/src/task-effort.test.ts
+++ b/src/task-effort.test.ts
@@ -56,6 +56,8 @@ const board = (over: Partial<Board> = {}): Board => ({
   owner: [],
   needsYou: [],
   phases: [phase()],
+  issues: [],
+  groups: [],
   explain: [],
   prs: [],
   ...over,
@@ -110,6 +112,24 @@ describe("applyTaskEffortToBoard", () => {
     expect(b.pipeline[0]?.effort).toBe("max");
     expect(b.phases[0]?.tasks.find((t) => t.issue === 101)?.effort).toBeNull();
   });
+  it("updates board.issues too", () => {
+    const issue = {
+      issue: 201,
+      title: "Off-board follow-up",
+      status: null,
+      labels: [],
+      group: "none",
+      pr: null,
+      dependsOn: [],
+      openDependsOn: [],
+      blocked: false,
+      model: null,
+      effort: null,
+    };
+    const b = applyTaskEffortToBoard(board({ issues: [issue] }), 201, "xhigh");
+    expect(b.issues[0]?.effort).toBe("xhigh");
+    expect(applyTaskEffortToBoard(b, 201, "default").issues[0]?.effort).toBeNull();
+  });
   it("high clears the label too, since no label means high", () => {
     const b = applyTaskEffortToBoard(board(), 102, "high");
     expect(b.phases[0]?.tasks.find((t) => t.issue === 102)?.effort).toBeNull();
diff --git a/src/task-effort.ts b/src/task-effort.ts
index c48128e..721e70e 100644
--- a/src/task-effort.ts
+++ b/src/task-effort.ts
@@ -39,5 +39,6 @@ export function applyTaskEffortToBoard(board: Board, issue: number, effort: Effo
       tasks: p.tasks.map((t) => (t.issue === issue ? { ...t, effort: next } : t)),
     })),
     pipeline: board.pipeline.map((r) => (r.issue === issue ? { ...r, effort: next } : r)),
+    issues: board.issues.map((i) => (i.issue === issue ? { ...i, effort: next } : i)),
   };
 }
diff --git a/src/task-model.test.ts b/src/task-model.test.ts
index 405a7fe..6679d36 100644
--- a/src/task-model.test.ts
+++ b/src/task-model.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
-import type { Board, PhaseProgress, PipelineRow } from "./state-file.ts";
-import { applyTaskModel, applyTaskModelToBoard, phaseTasks } from "./task-model.ts";
+import type { Board, BoardIssue, PhaseProgress, PipelineRow } from "./state-file.ts";
+import { applyTaskModel, applyTaskModelToBoard, phaseTasks, pickerTasks } from "./task-model.ts";
 
 function fakeGh() {
   const calls: string[] = [];
@@ -64,11 +64,47 @@ const board = (over: Partial<Board> = {}): Board => ({
   owner: [],
   needsYou: [],
   phases: [phase()],
+  issues: [],
+  groups: [],
   explain: [],
   prs: [],
   ...over,
 });
 
+const boardIssue = (over: Partial<BoardIssue> = {}): BoardIssue => ({
+  issue: 201,
+  title: "Off-board follow-up",
+  status: null,
+  labels: [],
+  group: "none",
+  pr: null,
+  dependsOn: [],
+  openDependsOn: [],
+  blocked: false,
+  model: null,
+  effort: null,
+  ...over,
+});
+
+describe("pickerTasks", () => {
+  it("lists every board issue, off-board included", () => {
+    const b = board({
+      issues: [boardIssue(), boardIssue({ issue: 101, status: "Ready", model: "haiku" })],
+    });
+    expect(pickerTasks(b)).toEqual([
+      { issue: 201, model: null, effort: null },
+      { issue: 101, model: "haiku", effort: null },
+    ]);
+  });
+  it("falls back to open phase tasks when issues is empty", () => {
+    expect(pickerTasks(board())).toEqual([
+      { issue: 101, model: null, effort: null },
+      { issue: 102, model: "sonnet", effort: null },
+    ]);
+    expect(pickerTasks(null)).toEqual([]);
+  });
+});
+
 describe("phaseTasks", () => {
   it("flattens the open tasks of every phase on the board; a closed task takes no label", () => {
     expect(phaseTasks(board()).map((t) => t.issue)).toEqual([101, 102]);
@@ -110,6 +146,11 @@ describe("applyTaskModelToBoard", () => {
     // Other rows are untouched.
     expect(b.phases[0]?.tasks.find((t) => t.issue === 101)?.model).toBeNull();
   });
+  it("updates board.issues too", () => {
+    const b = applyTaskModelToBoard(board({ issues: [boardIssue()] }), 201, "haiku");
+    expect(b.issues[0]?.model).toBe("haiku");
+    expect(applyTaskModelToBoard(b, 201, "default").issues[0]?.model).toBeNull();
+  });
   it("`default` clears the override", () => {
     const b = applyTaskModelToBoard(board(), 102, "default");
     expect(b.phases[0]?.tasks.find((t) => t.issue === 102)?.model).toBeNull();
diff --git a/src/task-model.ts b/src/task-model.ts
index 215efbc..1e0ac57 100644
--- a/src/task-model.ts
+++ b/src/task-model.ts
@@ -26,6 +26,23 @@ export function phaseTasks(board: Board | null): PhaseTask[] {
  * then the new one lands; `default` only removes. `current` is what the stored board saw, which
  * is what the page showed the owner when they clicked — the tick's snapshot is the truth we have.
  */
+/** What a model/effort picker needs to know about an issue it may relabel. */
+export interface PickerTask {
+  issue: number;
+  model: string | null;
+  effort: string | null;
+}
+
+/**
+ * The issues the page may relabel with `model:` / `effort:` — every open issue the Board tab
+ * lists, on the project board or not. A board stored before the Board tab existed has no
+ * `issues` until its next tick, so it falls back to the open phase tasks it does have.
+ */
+export function pickerTasks(board: Board | null): PickerTask[] {
+  const rows = board?.issues.length ? board.issues : phaseTasks(board);
+  return rows.map(({ issue, model, effort }) => ({ issue, model, effort }));
+}
+
 export async function applyTaskModel(
   gh: TaskModelGh,
   task: { issue: number; current: string | null },
@@ -51,5 +68,6 @@ export function applyTaskModelToBoard(board: Board, issue: number, model: TaskMo
       tasks: p.tasks.map((t) => (t.issue === issue ? { ...t, model: next } : t)),
     })),
     pipeline: board.pipeline.map((r) => (r.issue === issue ? { ...r, model: next } : r)),
+    issues: board.issues.map((i) => (i.issue === issue ? { ...i, model: next } : i)),
   };
 }
diff --git a/src/theme.test.ts b/src/theme.test.ts
new file mode 100644
index 0000000..bedc24f
--- /dev/null
+++ b/src/theme.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { pickTheme, THEMES, type ThemeName } from "./theme.ts";
+
+describe("pickTheme", () => {
+  it("is stable for a name", () => {
+    expect(pickTheme("widgets", [])).toBe(pickTheme("widgets", []));
+    expect(THEMES).toContain(pickTheme("widgets", []));
+  });
+
+  it("takes the only unused theme", () => {
+    expect(pickTheme("anything", ["indigo", "violet", "teal"])).toBe("mono");
+    expect(pickTheme("else", ["mono", "violet", "teal", "violet"])).toBe("indigo");
+  });
+
+  it("four instances in turn get four different themes", () => {
+    const taken: ThemeName[] = [];
+    for (const name of ["gadgets", "gizmos", "sprockets", "widgets"])
+      taken.push(pickTheme(name, taken));
+    expect(new Set(taken).size).toBe(4);
+  });
+
+  it("a fifth instance repeats one", () => {
+    expect(THEMES).toContain(pickTheme("fifth", ["indigo", "violet", "teal", "mono"]));
+  });
+});
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..22ca7e0
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,28 @@
+import { z } from "zod";
+
+/** The page's color schemes; each instance shows one, so several open tabs are easy to tell apart. */
+export const THEMES = ["indigo", "violet", "teal", "mono"] as const;
+export const ThemeSchema = z.enum(THEMES);
+export type ThemeName = z.infer<typeof ThemeSchema>;
+
+/** FNV-1a, 32-bit: a stable number per instance name, the same on every Mac and every run. */
+export function nameHash(name: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < name.length; i++) {
+    h ^= name.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return h;
+}
+
+/**
+ * The theme a new instance starts with: one the other instances on this Mac use least, so up to
+ * four start with four different themes; among equals, the name's hash decides. The daemon saves
+ * the result, so it never shifts when another instance is added later.
+ */
+export function pickTheme(name: string, taken: readonly ThemeName[]): ThemeName {
+  const uses = (t: ThemeName) => taken.filter((x) => x === t).length;
+  const least = Math.min(...THEMES.map(uses));
+  const candidates = THEMES.filter((t) => uses(t) === least);
+  return candidates[nameHash(name) % candidates.length] as ThemeName;
+}
diff --git a/src/web.html b/src/web.html
index ccdefbf..633c3b0 100644
--- a/src/web.html
+++ b/src/web.html
@@ -1,509 +1,923 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="indigo">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Foreman</title>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
 <style>
+  /* Tokens. Each theme has a light set and a dark set; the OS setting picks which. Status colors
+     (ok/warn/bad) mean the same thing in every theme. The pale accent is for text, the active nav
+     item and tool pills only; buttons use --primary, which always reads at 4.5:1 or better. */
   :root {
-    --ground: #F4F4F0; --panel: #FFFFFF; --panel-2: #ECECE6; --line: #D9D9D2;
-    --ink: #1B1F24; --ink-2: #5B616B; --ink-3: #8A9099;
-    --accent: #2F4BC7; --accent-soft: #E3E8FA;
-    --ok: #237A4B; --ok-soft: #DDF1E4; --warn: #A8650A; --warn-soft: #FBEBD0;
-    --bad: #B3261E; --bad-soft: #F9DEDC;
-    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --ok: #1F8A55; --ok-soft: #E1F4EA; --warn: #B26A00; --warn-soft: #FDF0D9;
+    --bad: #C92A2A; --bad-soft: #FBE4E4; --signoff: #287A3A; --violet-st: #6E56CF;
+    --hot: #E03131;
   }
+  [data-theme="indigo"] { --bg: #F6F7F9; --surface: #FFFFFF; --sunk: #EEF0F3; --line: #E3E6EB; --ink: #111418; --ink-2: #555C66; --ink-3: #8B929C; --accent: #3B5BDB; --accent-soft: #E7ECFD; --primary: #3B5BDB; --on-primary: #FFFFFF; }
+  [data-theme="violet"] { --bg: #F7F7FA; --surface: #FFFFFF; --sunk: #EFEEF4; --line: #E4E2EC; --ink: #16151E; --ink-2: #5A5770; --ink-3: #8D8AA0; --accent: #5B45B8; --accent-soft: #EFEBFF; --primary: #6E56CF; --on-primary: #FFFFFF; }
+  [data-theme="teal"] { --bg: #F4F8F9; --surface: #FFFFFF; --sunk: #EAF1F3; --line: #DCE6E9; --ink: #0B1114; --ink-2: #4F6268; --ink-3: #82949A; --accent: #0B7285; --accent-soft: #E0F5F8; --primary: #0B7285; --on-primary: #FFFFFF; }
+  [data-theme="mono"] { --bg: #FAFAFA; --surface: #FFFFFF; --sunk: #F0F0F2; --line: #E4E4E7; --ink: #0A0A0B; --ink-2: #55555C; --ink-3: #8A8A93; --accent: #111113; --accent-soft: #EDEDEF; --primary: #111113; --on-primary: #FFFFFF; --act: #3B6FD8; }
   @media (prefers-color-scheme: dark) {
-    :root {
-      --ground: #14171C; --panel: #1C2027; --panel-2: #232830; --line: #2F353E;
-      --ink: #E6E8EC; --ink-2: #A5ABB5; --ink-3: #737A85;
-      --accent: #8EA2FF; --accent-soft: #26304F;
-      --ok: #6CCB8F; --ok-soft: #1B3A29; --warn: #E7B15A; --warn-soft: #3E2E12;
-      --bad: #F28B82; --bad-soft: #4A1F1C;
-    }
+    :root { --ok: #5CCB8D; --ok-soft: #15301F; --warn: #F0B44C; --warn-soft: #33270F; --bad: #FF8787; --bad-soft: #3A1717; --violet-st: #C4B5FD; }
+    [data-theme="indigo"] { --bg: #0E1015; --surface: #161A21; --sunk: #1D222B; --line: #262C36; --ink: #ECEEF2; --ink-2: #A3AAB5; --ink-3: #6E7581; --accent: #8EA6FF; --accent-soft: #1E2645; --primary: #4263EB; --on-primary: #FFFFFF; }
+    [data-theme="violet"] { --bg: #0E0D13; --surface: #16151E; --sunk: #1E1C29; --line: #2A2736; --ink: #EEEDF4; --ink-2: #A9A6B8; --ink-3: #716D82; --accent: #B4A4FF; --accent-soft: #2A2250; --primary: #6E56CF; --on-primary: #FFFFFF; }
+    [data-theme="teal"] { --bg: #0B1114; --surface: #121A1E; --sunk: #182328; --line: #223036; --ink: #E8F0F2; --ink-2: #9DB0B6; --ink-3: #66797F; --accent: #5FD4E4; --accent-soft: #0F3239; --primary: #22B8CF; --on-primary: #04161A; }
+    [data-theme="mono"] { --bg: #0A0A0B; --surface: #141416; --sunk: #1C1C1F; --line: #27272B; --ink: #EDEDEF; --ink-2: #A1A1A8; --ink-3: #6B6B73; --accent: #EDEDEF; --accent-soft: #2A2A2F; --primary: #EDEDEF; --on-primary: #0A0A0B; --act: #5B8DEF; }
   }
   * { box-sizing: border-box; }
-  body { margin: 0; background: var(--ground); color: var(--ink); font: 14px/1.45 var(--sans); }
+  html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14.5px/1.5 var(--sans); }
   a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
-  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
-  .wrap { max-width: 1240px; margin: 0 auto; padding: 16px 20px 40px; }
-  header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
-  header h1 { font: 600 16px/1 var(--mono); margin: 0; } header h1 span { color: var(--ink-2); font-weight: 400; }
-  .badge { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; background: var(--panel-2); color: var(--ink-2); }
-  .badge.RUNNING { background: var(--ok-soft); color: var(--ok); }
-  .badge.RUNNING::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
-  .badge.STOPPED, .badge.UNKNOWN { background: var(--warn-soft); color: var(--warn); }
-  .badge.CRASHED, .badge.stalled, .badge.bad { background: var(--bad-soft); color: var(--bad); }
-  .badge.stop { background: var(--warn-soft); color: var(--warn); }
-  .badge[hidden], [hidden] { display: none; }
-  .hmeta { font: 12.5px var(--mono); color: var(--ink-2); }
-  .spacer { flex: 1; }
-  .btns { display: flex; gap: 6px; align-items: center; }
-  button { font: 500 12.5px var(--mono); padding: 7px 12px; border-radius: 3px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
-  button:hover { border-color: var(--ink-3); } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-  button.danger { color: var(--bad); } button.confirm { background: var(--bad); color: #fff; border-color: var(--bad); }
-  #msg { font: 12px var(--mono); color: var(--ink-2); margin-left: 6px; }
-  .grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; }
-  @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
-  section h2 { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; }
-  section h2 small { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 400; }
-  .col > section + section { margin-top: 22px; }
-  .now { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 14px 16px 12px; }
-  .now.idle { border-left-color: var(--line); color: var(--ink-2); }
-  .now.parked { border-left-color: var(--warn); }
-  .now .title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
-  .now .role { font: 600 18px/1.2 var(--sans); color: var(--ink); } .now .sub { color: var(--ink-2); }
-  .now.parked .role { color: var(--warn); }
-  .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); gap: 6px 26px; margin-top: 10px; font: 12.5px var(--mono); color: var(--ink-2); }
-  .kv b { color: var(--ink); font-weight: 500; }
-  .bar { position: relative; height: 6px; background: var(--panel-2); border-radius: 3px; margin: 12px 0 6px; overflow: hidden; }
-  .bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
-  .bar-lbl { display: flex; justify-content: space-between; font: 11.5px var(--mono); color: var(--ink-3); }
+  button { font: 600 13px var(--sans); padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
+  button:hover { border-color: var(--ink-3); }
+  button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
+  button.danger { color: var(--bad); }
+  button.confirm { background: var(--bad); border-color: var(--bad); color: #fff; }
+  button.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
+  button.small { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
+  .mono { font-family: var(--mono); font-size: .9em; font-variant-numeric: tabular-nums; }
+  .muted { color: var(--ink-3); }
+  [hidden] { display: none; }
+
+  /* Frame: sidebar + main. The shell is the container the narrow breakpoints follow. */
+  .shell { container: shell / inline-size; min-height: 100vh; }
+  .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
+  .side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
+  .side .hd { padding: 20px 16px 14px; border-bottom: 1px solid var(--line); }
+  .side .r1 { display: flex; align-items: center; gap: 12px; min-width: 0; }
+  .tile { width: 40px; height: 40px; border-radius: 10px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 700 19px var(--sans); flex: none; text-transform: uppercase; }
+  .pname { font: 700 19px/1.15 var(--sans); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .psub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
+  .pill-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; margin-top: 12px; color: var(--ink-3); }
+  .pill-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+  .pill-state.RUNNING { color: var(--ok); } .pill-state.STOPPED, .pill-state.UNKNOWN { color: var(--warn); } .pill-state.CRASHED, .pill-state.offline { color: var(--bad); }
+  .navs { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
+  .navs a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
+  .navs a:hover { background: var(--sunk); }
+  .navs a svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
+  .navs a.on { background: var(--accent-soft); color: var(--accent); }
+  .count { margin-left: auto; font: 600 11.5px/1 var(--sans); padding: 4px 7px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
+  .count.hot { background: var(--hot); color: #fff; }
+  .side .foot { margin-top: auto; padding: 12px 14px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
+  .swatches { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
+  .swatches button { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; }
+  .swatches button.cur { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-2); }
+  main { padding: 22px 26px 40px; min-width: 0; }
+  .top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+  .top h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
+  .top .sub { color: var(--ink-3); font-size: 13.5px; }
+  .acts { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
+  .group { display: flex; gap: 6px; flex-wrap: wrap; }
+  .sec { margin-top: 22px; }
+  .sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
+  .sec-h h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
+  .sec-h span { color: var(--ink-3); font-size: 13px; }
+  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 3px 12px rgba(16, 24, 40, .04); }
+  .empty { padding: 14px 16px; color: var(--ink-3); }
+  .tag { display: inline-block; font: 600 11.5px/1 var(--sans); padding: 4px 8px; border-radius: 6px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
+  .tag.eff, .tag.warn { background: var(--warn-soft); color: var(--warn); }
+  .tag.ci, .tag.acc { background: var(--accent-soft); color: var(--accent); }
+  .tag.bad { background: var(--bad-soft); color: var(--bad); }
+  .tag.ok { background: var(--ok-soft); color: var(--ok); }
+  .tool { display: inline-block; font: 500 12px/1.3 var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
+  .tool.err { background: var(--bad-soft); color: var(--bad); }
+
+  /* Banners: every reason the foreman is not taking work, one line each. */
+  .banners { display: grid; gap: 8px; margin-bottom: 16px; }
+  .banners:empty { display: none; }
+  .banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px; flex-wrap: wrap; }
+  .banner.warn { background: var(--warn-soft); color: var(--warn); }
+  .banner.bad { background: var(--bad-soft); color: var(--bad); }
+  .banner.ok { background: var(--ok-soft); color: var(--ok); }
+  .banner .fix { margin-left: auto; font-weight: 500; opacity: .85; }
+  .banner a { color: inherit; text-decoration: underline; }
+  .nextout { padding: 12px 16px; margin-bottom: 16px; }
+  .nextout pre { margin: 0; white-space: pre-wrap; font: 12.5px/1.5 var(--mono); color: var(--ink-2); }
+  .nextout .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
+
+  /* Now */
+  .now { padding: 18px 20px; }
+  .now.idle { padding: 14px 18px; }
+  .now .eyebrow { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
+  .now.idle .eyebrow { margin-bottom: 0; }
+  .role { font: 600 11.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 9px; border-radius: 6px; }
+  .role.parked { color: var(--warn); background: var(--warn-soft); }
+  .now h2 { font-size: 20px; margin: 0 0 4px; font-weight: 650; letter-spacing: -.01em; }
+  .now .meta { color: var(--ink-2); display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 13.5px; }
+  .now .meta .mono { overflow-wrap: anywhere; }
+  .prog { margin: 16px 0 6px; height: 7px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
+  .prog i { display: block; height: 100%; border-radius: 99px; background: var(--act, var(--primary)); }
+  .prog-l { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 12.5px; }
+  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
+  .stat { background: var(--sunk); border-radius: 9px; padding: 9px 13px; }
+  .stat b { display: block; font-size: 18px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; }
+  .stat span { color: var(--ink-3); font-size: 12.5px; }
   .doing { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
-  .doing .tool { display: flex; align-items: baseline; gap: 10px; font: 13.5px var(--mono); }
-  .doing .tool .name { background: var(--accent-soft); color: var(--accent); padding: 2px 7px; border-radius: 3px; font-weight: 500; }
-  .doing .tool .name.err { background: var(--bad-soft); color: var(--bad); }
-  .doing .tool .age { color: var(--ink-3); margin-left: auto; white-space: nowrap; }
+  .doing .row1 { display: flex; gap: 10px; align-items: center; font-size: 14px; min-width: 0; }
+  .doing .x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+  .doing .ago { margin-left: auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
   .doing .said { color: var(--ink-2); font-style: italic; }
-  table { border-collapse: collapse; width: 100%; font-size: 13px; }
-  th { text-align: left; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
-  td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
-  .tscroll { overflow-x: auto; }
-  .stage { display: inline-block; width: 46px; height: 16px; border-radius: 2px; font: 500 10px/16px var(--mono); text-align: center; letter-spacing: .04em; text-transform: uppercase; }
-  .stage.done, .stage.success { background: var(--ok-soft); color: var(--ok); }
-  .stage.active, .stage.pending.ci { background: var(--accent-soft); color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
-  .stage.failed, .stage.failure { background: var(--bad-soft); color: var(--bad); }
-  .stage.pending, .stage.none { background: var(--panel-2); color: var(--ink-3); }
-  .stage.skipped { background: transparent; color: var(--ink-3); border: 1px dashed var(--line); line-height: 14px; }
-  .stages { display: flex; gap: 3px; }
+
+  /* Pipeline: the track column and the tag column have fixed widths, so every card's dots sit at
+     the same x. Below 760px of pipeline width the track takes its own row under the title. */
+  .track { display: grid; grid-template-columns: repeat(5, 1fr); }
+  .pl { display: grid; gap: 8px; container: pl / inline-size; }
+  .pi { padding: 13px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 280px 160px; column-gap: 32px; row-gap: 12px; align-items: center; }
+  .pi .ttl { min-width: 0; }
+  .pi .tags { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
+  .pi .t { font-weight: 600; font-size: 14.5px; } .pi .t .num { color: var(--ink-3); font-weight: 500; margin-right: 5px; }
+  .pi .s { color: var(--ink-2); font-size: 13px; margin-top: 1px; }
+  .track .k { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
+  .track .k::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--line); }
+  .track .k:first-child::before { display: none; }
+  .track .k.done::before, .track .k.active::before, .track .k.failed::before { background: var(--ok); }
+  .track .d { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); }
+  .track .done { color: var(--ok); } .track .done .d { background: var(--ok); border-color: var(--ok); }
+  .track .active { color: var(--act, var(--accent)); } .track .active .d { border-color: var(--act, var(--accent)); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 1.6s ease-in-out infinite; }
+  .track .failed { color: var(--bad); } .track .failed .d { background: var(--bad); border-color: var(--bad); }
+  .track .skipped .d { border-style: dashed; }
   @keyframes pulse { 50% { opacity: .55; } }
-  @media (prefers-reduced-motion: reduce) { .stage.active, .stage.pending.ci { animation: none; } }
-  .tag { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; }
-  .tag.bad, .tag.stop, .tag.preflight { background: var(--bad-soft); color: var(--bad); }
-  .tag.human, .tag.cap, .tag.paused { background: var(--warn-soft); color: var(--warn); }
-  .tag.phase_gate { background: var(--warn-soft); color: var(--warn); opacity: .7; }
-  .tag.ci, .tag.review_cycle { background: var(--accent-soft); color: var(--accent); }
-  .feed { background: var(--panel); border: 1px solid var(--line); font: 12.5px/1.5 var(--mono); max-height: 320px; overflow: auto; }
-  .feed .row { display: grid; grid-template-columns: 62px max-content minmax(0, 1fr); gap: 10px; padding: 4px 12px; border-bottom: 1px solid var(--line); }
-  .feed .row:last-child { border-bottom: 0; background: var(--accent-soft); }
-  .feed .t { color: var(--ink-3); } .feed .k { color: var(--accent); font-weight: 500; }
-  .feed .k.text, .feed .k.init, .feed .k.rate_limit { color: var(--ink-2); font-weight: 400; } .feed .k.tool_error { color: var(--bad); }
-  .feed .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed .s.text { color: var(--ink-2); font-style: italic; white-space: normal; }
-  .feed .empty { padding: 10px 12px; color: var(--ink-3); }
-  .wait { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
-  .wait li { display: grid; grid-template-columns: max-content 1fr; gap: 10px; align-items: start; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); }
-  .wait .d { font-size: 13px; } .wait .since { display: block; font: 11px var(--mono); color: var(--ink-3); margin-top: 2px; }
-  .wait .none { color: var(--ink-3); font: 12.5px var(--mono); }
-  .owner { font: 12.5px/1.5 var(--mono); }
-  .owner .o { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
-  .owner .who { color: var(--ink-2); } .owner .why { grid-column: 1 / -1; color: var(--ink-3); font-size: 12px; }
-  .owner .acts { display: flex; gap: 6px; } .owner .empty { color: var(--ink-3); padding: 6px 0; }
-  .phases { font: 12.5px/1.6 var(--mono); }
-  .phases .p { padding: 8px 0; border-bottom: 1px solid var(--line); }
-  .phases .p:last-child { border-bottom: 0; }
-  .phases .who { display: flex; justify-content: space-between; gap: 10px; }
-  .phases .who b { font-weight: 500; }
-  .phases .bar { margin: 8px 0 5px; }
-  .phases .facts { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
-  .phases .empty { color: var(--ink-3); padding: 6px 0; }
-  .phases .toggle { cursor: pointer; color: var(--ink-2); user-select: none; } .phases .toggle:hover { color: var(--ink); }
-  .phases .tasks { margin-top: 6px; }
-  .phases .task { padding: 4px 0; border-top: 1px dashed var(--line); }
-  .phases .task.closed { color: var(--ink-3); } .phases .task .st { color: var(--ink-3); margin-left: 6px; }
-  .phases .task .acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
-  .phases .task .acts button { padding: 2px 7px; font-size: 11.5px; }
-  button.on { border-color: var(--accent); color: var(--accent); }
-  .tick, .recent { font: 12.5px/1.6 var(--mono); }
-  .tick div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); } .tick div span:first-child { color: var(--ink-2); }
-  .tick .acts { display: inline-flex; gap: 6px; margin-left: 8px; } .tick .from { color: var(--ink-3); }
-  .recent .r { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
-  .recent .r > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .recent .r:hover, .recent .r.sel { background: var(--panel-2); }
-  .recent .r:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-  .recent .o { font-weight: 500; } .recent .o.ok { color: var(--ok); } .recent .o.bad { color: var(--bad); } .recent .o.warn { color: var(--warn); } .recent .c { color: var(--ink-3); }
-  pre { white-space: pre-wrap; background: var(--panel-2); padding: .75rem; border-radius: 3px; font: 12px/1.5 var(--mono); }
+  @media (prefers-reduced-motion: reduce) { .track .active .d { animation: none; } }
+  @container pl (max-width: 760px) {
+    .pi { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
+    .pi .ttl { grid-column: 1; grid-row: 1; }
+    .pi .tags { grid-column: 2; grid-row: 1; max-width: 160px; }
+    .pi .track { grid-column: 1 / -1; grid-row: 2; padding-top: 10px; border-top: 1px solid var(--line); }
+  }
+
+  /* Feed */
+  .feed { padding: 4px 0; max-height: 340px; overflow: auto; }
+  .fr { display: grid; grid-template-columns: 64px 74px minmax(0, 1fr); gap: 10px; padding: 4px 16px; align-items: baseline; font-size: 13.5px; line-height: 1.45; }
+  .fr + .fr { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
+  .fr .tm { color: var(--ink-3); font: 12px var(--mono); }
+  .fr .lbl { font: 500 12px var(--mono); color: var(--ink-3); display: block; overflow: hidden; text-overflow: ellipsis; }
+  .fr > span:nth-child(2) { min-width: 0; overflow: hidden; }
+  .fr .x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+  .fr .said { color: var(--ink-2); font-style: italic; white-space: normal; }
+  .fr:last-child { background: var(--accent-soft); }
+  .chip { font: 600 12px/1 var(--sans); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); cursor: pointer; }
+
+  /* Needs you and Waiting on: groups of rows, oldest first, the wait time large on the left. */
+  .grp { margin-top: 20px; }
+  .grp:first-child { margin-top: 4px; }
+  .gh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 14.5px; flex-wrap: wrap; }
+  .gh .c { font: 600 11.5px/1 var(--sans); padding: 3px 7px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
+  .gh small { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
+  .gh .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+  .list { overflow: hidden; }
+  .it { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 11px 16px; }
+  .it + .it { border-top: 1px solid var(--line); }
+  .age { font: 650 17px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
+  .age small { display: block; font: 500 11px var(--sans); color: var(--ink-3); margin-top: 3px; }
+  .age.old { color: var(--warn); }
+  .it .t, .wt .t { font-weight: 600; } .it .t .num, .wt .t .num { color: var(--ink-3); font-weight: 500; margin-right: 6px; }
+  .it .s, .wt .s { color: var(--ink-2); font-size: 13px; margin-top: 2px; display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; }
+  .it .acts { display: flex; gap: 6px; margin-left: 0; }
+  .mini { display: inline-flex; align-items: center; gap: 6px; }
+  .mini .b { width: 60px; height: 5px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
+  .mini .b i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
+  button.approve { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
+  button.signoff { background: var(--signoff); border-color: var(--signoff); color: #fff; }
+  button.plan { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
+  .wt { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 16px; }
+  .wt + .wt { border-top: 1px solid var(--line); }
+  .wt .k { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+  .wt .since { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
+  .linkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line); color: var(--ink-2); margin-top: 20px; flex-wrap: wrap; }
+  .linkrow a { font-weight: 600; }
+
+  /* Board: one card per group, a table of its open issues with model and effort pickers. */
+  .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
+  .filters input[type="search"] { flex: 0 1 240px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 13.5px var(--sans); }
+  .seg { display: inline-flex; background: var(--sunk); border-radius: 9px; padding: 3px; flex-wrap: wrap; }
+  .seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; font-size: 12.5px; color: var(--ink-2); }
+  .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
+  .seg button b { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
+  .check { margin-left: auto; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
+  .ep { margin-bottom: 14px; }
+  .ep.closed { opacity: .8; }
+  .eph { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 18px; align-items: center; }
+  .eph .k { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
+  .eph .t { font-size: 16px; font-weight: 650; } .eph .t .num { color: var(--ink-3); font-weight: 500; margin-right: 6px; }
+  .eph .facts { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; grid-column: 1 / -1; }
+  .eph .right { display: flex; gap: 8px; align-items: center; }
+  .eph .mini .b { width: 120px; }
+  .tk { display: grid; grid-template-columns: minmax(0, 1fr) 112px 60px 112px 100px; gap: 14px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line); }
+  .tk.head { padding: 8px 18px 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
+  .tk .tt { font-weight: 600; font-size: 14px; } .tk .tt .num { color: var(--ink-3); font-weight: 500; margin-right: 6px; }
+  .tk .sub { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
+  .lbl-chip { font: 600 11px/1 var(--sans); padding: 3px 6px; border-radius: 5px; background: var(--sunk); color: var(--ink-2); }
+  .lbl-chip.bad { background: var(--bad-soft); color: var(--bad); }
+  .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink-3); }
+  .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+  .st.ready { color: var(--accent); } .st.progress { color: var(--warn); } .st.review { color: var(--violet-st); } .st.done { color: var(--ok); }
+  .st.off::before { background: transparent; border: 1.5px solid currentColor; }
+  .picker { position: relative; }
+  .picker > button { width: 100%; display: flex; justify-content: space-between; gap: 4px; padding: 4px 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); border-radius: 7px; }
+  .picker > button::after { content: "▾"; font-size: 10px; }
+  .picker > button.set { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
+  .picker > button.set.eff { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); background: var(--warn-soft); }
+  .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); padding: 4px; min-width: 150px; display: grid; }
+  .menu button { border: 0; background: transparent; text-align: left; display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 6px; font-weight: 500; color: var(--ink-2); }
+  .menu button:hover { background: var(--sunk); }
+  .menu button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+  .menu button small { color: var(--ink-3); }
+  .done-row { padding: 9px 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
+  .done-row button { border: 0; background: transparent; padding: 0; color: var(--ink-3); font-weight: 600; }
+  .done-row .nums { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
+  @container shell (max-width: 760px) {
+    .tk { grid-template-columns: minmax(0, 1fr) auto; }
+    .tk.head { display: none; }
+    .tk .pr { display: none; }
+    .tk .picker { grid-column: span 1; }
+  }
+
+  /* Session: totals, a daily spend chart, spend by role, cost by task, the daemon's controls. */
+  .range { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
+  .range input[type="date"] { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 13px var(--sans); }
+  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
+  .kpi { padding: 12px 16px; } .kpi b { display: block; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; } .kpi span { color: var(--ink-3); font-size: 12.5px; }
+  .two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
+  .ch { padding: 14px 18px 12px; min-width: 0; }
+  .ch h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 600; } .ch h3 small { color: var(--ink-3); font-weight: 500; margin-left: 8px; }
+  .plot { position: relative; height: 170px; margin-left: 44px; margin-top: 14px; overflow: hidden; }
+  .gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
+  .gridline span { position: absolute; left: -44px; top: -8px; width: 38px; text-align: right; font: 11px var(--mono); color: var(--ink-3); }
+  .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
+  .bars i { flex: 1; min-width: 0; background: var(--act, var(--accent)); border-radius: 4px 4px 0 0; position: relative; }
+  .bars i:hover { background: var(--ink); }
+  .bars i.zero { background: transparent; }
+  .bars i .peak { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font: 600 11px var(--mono); color: var(--ink-2); white-space: nowrap; }
+  .xax { display: flex; justify-content: space-between; margin: 6px 0 0 44px; font: 11px var(--mono); color: var(--ink-3); }
+  .roles { display: grid; gap: 9px; }
+  .rl { display: grid; grid-template-columns: 92px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 13px; }
+  .rl .b, .costc .b { height: 9px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
+  .rl .b i, .costc .b i { display: block; height: 100%; border-radius: 99px; background: var(--act, var(--accent)); }
+  .rl .v, .costc .v { text-align: right; font: 12.5px var(--mono); color: var(--ink-2); }
+  table.costs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+  table.costs th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 10px 14px 8px; border-bottom: 1px solid var(--line); }
+  table.costs td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
+  table.costs td.n, table.costs th.n { text-align: right; font-variant-numeric: tabular-nums; }
+  table.costs tr.row { cursor: pointer; } table.costs tr.row:hover td { background: var(--sunk); }
+  table.costs tr.sub td { background: color-mix(in srgb, var(--sunk) 55%, transparent); font-size: 13px; padding: 6px 14px; }
+  table.costs tr.sub td:first-child { padding-left: 36px; color: var(--ink-3); font: 12px var(--mono); }
+  table.costs .num { color: var(--ink-3); margin-right: 6px; }
+  .costc { display: grid; grid-template-columns: minmax(40px, 1fr) 76px; gap: 10px; align-items: center; }
+  .oc { font-weight: 600; } .oc.ok { color: var(--ok); } .oc.bad { color: var(--bad); } .oc.warn { color: var(--warn); }
+  .more { padding: 10px 14px; }
+  .dm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .dm > div { padding: 12px 18px; border-right: 1px solid var(--line); min-width: 0; }
+  .dm > div:nth-child(3) { border-right: 0; }
+  .dm .k { font-size: 12px; color: var(--ink-3); font-weight: 600; }
+  .dm .v2 { font-size: 14px; margin-top: 3px; }
+  .dm .note { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
+  .opts { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
+  .opts button { padding: 4px 9px; font-size: 12px; border-radius: 6px; color: var(--ink-2); }
+  .opts button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+  .dm .row2 { grid-column: 1 / -1; border-top: 1px solid var(--line); display: flex; gap: 6px 24px; padding: 10px 18px; font-size: 13px; color: var(--ink-2); border-right: 0; flex-wrap: wrap; }
+  .dm .row2 b { color: var(--ink); font-weight: 600; }
+  @container shell (max-width: 760px) {
+    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .two, .dm { grid-template-columns: minmax(0, 1fr); }
+    .dm > div { border-right: 0; border-bottom: 1px solid var(--line); }
+    table.costs .roles-col { display: none; }
+  }
+
+  /* Toasts */
+  #toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 20; max-width: min(420px, calc(100vw - 36px)); }
+  .toast { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-size: 13.5px; display: flex; gap: 10px; align-items: start; }
+  .toast.err { border-left-color: var(--bad); }
+  .toast button { margin-left: auto; padding: 0 6px; border: 0; background: transparent; color: var(--ink-3); }
+
+  /* Narrow page: the sidebar becomes a strip of icon tabs, header controls wrap, tiles go 2 x 2. */
+  @container shell (max-width: 760px) {
+    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
+    .side { position: static; height: auto; min-width: 0; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
+    .side .hd { border-bottom: 0; padding: 10px 8px 10px 12px; }
+    .side .hd .psub { display: none; }
+    .side .hd .pill-state { margin-top: 2px; font-size: 11px; white-space: nowrap; }
+    .tile { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
+    .pname { font-size: 16px; }
+    .navs { flex-direction: row; padding: 8px; }
+    .navs a { padding: 7px 9px; gap: 7px; }
+    .side .foot { display: none; }
+    main { padding: 16px 14px 28px; }
+    .acts { margin-left: 0; width: 100%; }
+    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .prog-l span:first-child { display: none; }
+    .fr { grid-template-columns: 68px 66px minmax(0, 1fr); gap: 6px; padding: 4px 12px; }
+  }
+  @container shell (max-width: 460px) {
+    .navs a .lbl { display: none; } .navs a.on .lbl { display: inline; }
+    .side .hd .pname { display: none; }
+    .side .hd .pill-state { font-size: 0; gap: 0; }
+  }
 </style>
 </head>
 <body>
-<div class="wrap">
-  <header>
-    <h1>foreman <span id="host"></span></h1>
-    <span id="daemon" class="badge">…</span>
-    <span id="stalled" class="badge stalled" hidden></span>
-    <span id="stopflag" class="badge stop" hidden>STOP present</span>
-    <span id="hmeta" class="hmeta"></span>
-    <span class="spacer"></span>
-    <div class="btns">
-      <button id="go" type="button">Go</button>
-      <button id="stop" class="danger" type="button">Stop</button>
-      <button id="abort" class="danger" type="button">Abort</button>
-      <button id="next" type="button">Compute next</button>
-      <button id="refresh" type="button" title="Re-read the project board from GitHub and run a tick now">Refresh project</button>
-      <span id="msg"></span>
+<div class="shell">
+<div class="app">
+  <nav class="side" aria-label="foreman">
+    <div class="hd">
+      <div class="r1"><span class="tile" id="tile">f</span><div style="min-width:0"><div class="pname" id="pname">foreman</div><div class="psub" id="psub">foreman</div></div></div>
+      <span class="pill-state" id="pill">…</span>
     </div>
-  </header>
-  <pre id="nextOut" hidden></pre>
-  <div class="grid">
-    <div class="col">
-      <section><h2>Now</h2><div id="now" class="now"></div></section>
-      <section><h2>Pipeline <small>in-flight issues, build → review → validate → CI → merge</small></h2><div class="tscroll"><table><thead><tr><th>Issue</th><th>Title</th><th>Stages</th><th>Claim</th><th>PR</th><th></th></tr></thead><tbody id="pipeline"></tbody></table></div></section>
-      <section><h2>Feed <small id="feedMeta"></small></h2><div id="feed" class="feed"></div></section>
+    <div class="navs" id="nav">
+      <a href="#dashboard" data-nav="dashboard"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg><span class="lbl">Dashboard</span></a>
+      <a href="#needs-you" data-nav="needs-you"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0-6 6v4l-2 3h16l-2-3V9a6 6 0 0 0-6-6z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="lbl">Needs you</span><span class="count" id="countNeeds">0</span></a>
+      <a href="#waiting" data-nav="waiting"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="lbl">Waiting on</span><span class="count" id="countWaiting">0</span></a>
+      <a href="#board" data-nav="board"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="5" height="16" rx="1.5"/><rect x="10" y="4" width="5" height="11" rx="1.5"/><rect x="17" y="4" width="4" height="7" rx="1.5"/></svg><span class="lbl">Board</span></a>
+      <a href="#session" data-nav="session"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10"/></svg><span class="lbl">Session</span></a>
     </div>
-    <div class="col">
-      <section><h2>Phase <small>tasks done, spend and cycle time</small></h2><div id="phases" class="phases"></div></section>
-      <section><h2>Owner <small>gates only you can open</small></h2><div id="owner" class="owner"></div></section>
-      <section><h2>Needs you <small>issues waiting on you, oldest first</small></h2><div id="needsYou" class="owner"></div></section>
-      <section><h2>Waiting on</h2><ul id="waiting" class="wait"></ul></section>
-      <section><h2>Tick</h2><div id="tick" class="tick"></div></section>
-      <section><h2>Recent <small>click a row to load its feed</small></h2><div id="recent" class="recent"></div></section>
-    </div>
-  </div>
+    <div class="foot"><span id="pidline">–</span><div class="swatches" id="swatches">Theme </div></div>
+  </nav>
+  <main>
+    <section data-tab="dashboard">
+      <div class="top">
+        <h1>Dashboard</h1>
+        <div class="acts">
+          <div class="group"><button id="go" class="primary" type="button">Go</button><button id="refresh" type="button" title="Re-read the project board from GitHub and run a tick now">Refresh project</button><button id="next" type="button">Compute next</button></div>
+          <div class="group"><button id="stop" class="danger" type="button">Stop</button><button id="abort" class="danger" type="button">Abort</button></div>
+        </div>
+      </div>
+      <div class="banners" id="banners"></div>
+      <div class="card nextout" id="nextOut" hidden><div class="hd"><span>Compute next</span><button class="ghost small" id="nextClose" type="button">Close</button></div><pre id="nextText"></pre></div>
+      <div id="now"></div>
+      <div class="sec"><div class="sec-h"><h3>Pipeline</h3><span id="plMeta"></span></div><div class="pl" id="pipeline"></div></div>
+      <div class="sec"><div class="sec-h"><h3>Feed</h3><span id="feedMeta"></span><button class="chip" id="live" type="button" hidden>Back to live</button></div><div class="card feed" id="feed"></div></div>
+    </section>
+    <section data-tab="needs-you" hidden><div class="top"><h1>Needs you</h1><span class="sub" id="needsMeta"></span></div><div id="needsBody"></div></section>
+    <section data-tab="waiting" hidden><div class="top"><h1>Waiting on</h1><span class="sub">what the foreman is waiting for before it can move work forward</span></div><div id="waitBody"></div></section>
+    <section data-tab="board" hidden><div class="top"><h1>Board</h1><span class="sub" id="boardMeta"></span></div>
+      <div class="filters"><input type="search" id="boardSearch" placeholder="Search issues…" aria-label="Search issues"><div class="seg" id="boardSeg"></div><label class="check"><input type="checkbox" id="showDone"> Show done</label></div>
+      <div id="boardBody"></div></section>
+    <section data-tab="session" hidden><div class="top"><h1>Session</h1>
+      <div class="range"><div class="seg" id="rangeSeg"><button type="button" data-range="today">Today</button><button type="button" data-range="7">7 days</button><button type="button" data-range="30">30 days</button><button type="button" data-range="all" class="on">All</button><button type="button" data-range="custom">Custom</button></div><span id="customRange" hidden><input type="date" id="rangeFrom" aria-label="From" min="2000-01-01" max="2099-12-31"> – <input type="date" id="rangeTo" aria-label="To" min="2000-01-01" max="2099-12-31"></span></div></div>
+      <div id="sessionBody"><div class="card empty">loading…</div></div>
+      <div class="sec"><div class="sec-h"><h3>Daemon</h3><span>what today's sessions run as, and how many may run</span></div><div class="card dm" id="daemonCard"></div></div>
+    </section>
+  </main>
+</div>
 </div>
+<div id="toasts" aria-live="polite"></div>
 <script>
   const $ = (id) => document.getElementById(id);
   const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-  const t = (iso) => (iso ? `${iso.slice(11, 19)}Z` : "–");
-  const hm = (iso) => (iso ? `${iso.slice(11, 16)}Z` : "–");
+  const t = (iso) => (iso ? esc(`${String(iso).slice(11, 19)}Z`) : "–");
+  const hm = (iso) => (iso ? esc(`${String(iso).slice(11, 16)}Z`) : "–");
   const mins = (m) => (m >= 60 ? `${Math.floor(m / 60)}h${String(m % 60).padStart(2, "0")}m` : `${m}m`);
-  const k = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n));
-  // "claude-opus-5" → "opus": what the Recent row has space for, and what one family against
-  // another needs. The names are the repository's own (`StatusReport.model.choices`, filled by the
-  // status poll); a model outside that list keeps whatever the session recorded.
-  const family = (model) => modelChoices.find((c) => (model ?? "").includes(c)) ?? (model || "–");
+  const days = (m) => (m >= 1440 ? `${Math.floor(m / 1440)}d ${Math.floor((m % 1440) / 60)}h` : mins(m));
+  const k = (n) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n));
+  const usd = (n) => `$${Number(n ?? 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   const ago = (iso) => { if (!iso) return "–"; const s = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 1000)); return s < 60 ? `${s}s ago` : s < 3600 ? `${Math.floor(s / 60)}m ago` : `${Math.floor(s / 3600)}h${String(Math.floor((s % 3600) / 60)).padStart(2, "0")}m ago`; };
-  // The same duration as a length rather than a point in time: "waiting 30h12m", not "… ago".
-  const waited = (iso) => ago(iso).replace(/ ago$/, "");
-  let repo = null; // owner/repo, learned from /api/status when available
+  let r = null;            // the last status report
+  let repo = null;         // owner/repo, for GitHub links
   const gh = (kind, n) => `https://github.com/${repo ?? ""}/${kind}/${n}`;
-  const link = (kind, n, label) => repo ? `<a href="${gh(kind, n)}" target="_blank" rel="noopener">${esc(label ?? `#${n}`)}</a>` : esc(label ?? `#${n}`);
-  const subjectLink = (subject) => { const m = /^(PR |epic )?#(\d+)$/.exec(subject); return m ? link(m[1] === "PR " ? "pull" : "issues", m[2], subject) : esc(subject); };
+  const link = (kind, n, label) => (repo ? `<a href="${gh(kind, n)}" target="_blank" rel="noopener">${esc(label ?? `#${n}`)}</a>` : esc(label ?? `#${n}`));
+
+  // ---- toasts: the result of every action, so the header no longer needs a message line ----
+  function toast(message, isError = false) {
+    const el = document.createElement("div");
+    el.className = `toast${isError ? " err" : ""}`;
+    el.innerHTML = `<span>${esc(message)}</span><button type="button" aria-label="Dismiss">×</button>`;
+    el.querySelector("button").onclick = () => el.remove();
+    $("toasts").appendChild(el);
+    if (!isError) setTimeout(() => el.remove(), 5000);
+  }
+  async function post(path, body) {
+    try {
+      const res = await fetch(path, body === undefined ? { method: "POST" } : { method: "POST", body: JSON.stringify(body) });
+      const j = await res.json();
+      j.ok ? toast(j.message) : toast(`error: ${j.error}`, true);
+      return j;
+    } catch (err) { toast(`error: ${err}`, true); return { ok: false }; }
+    finally { refresh(); }
+  }
 
-  let feedSession = null;  // session id whose feed is shown
-  let feedPinned = false;  // true after a Recent row click, so polling does not switch it back
-  let lastRenderedSession = null;  // session id last rendered into the feed, for the scroll rule
+  // ---- routing: one section per tab, chosen by location.hash so a reload keeps the tab ----
+  const TABS = ["dashboard", "needs-you", "waiting", "board", "session"];
+  let tab = "dashboard";
+  function route() {
+    const want = location.hash.slice(1);
+    tab = TABS.includes(want) ? want : "dashboard";
+    for (const s of document.querySelectorAll("section[data-tab]")) s.hidden = s.dataset.tab !== tab;
+    for (const a of document.querySelectorAll("[data-nav]")) a.classList.toggle("on", a.dataset.nav === tab);
+    if (tab === "session") loadSessions();
+  }
+  window.addEventListener("hashchange", route);
+
+  // ---- shell: name, state, badges, theme ----
+  const THEME_SWATCH = { indigo: "#4263EB", violet: "#6E56CF", teal: "#22B8CF", mono: "#EDEDEF" };
+  function renderShell(r) {
+    const name = r.instance || (repo ?? "").split("/").pop() || "foreman";
+    document.documentElement.dataset.theme = r.theme?.current ?? "indigo";
+    document.title = `${name} · foreman`;
+    $("tile").textContent = name.slice(0, 1);
+    $("pname").textContent = name;
+    $("psub").textContent = `foreman · ${r.host}`;
+    const label = { RUNNING: "Running", STOPPED: "Stopped", CRASHED: "Crashed", UNKNOWN: "Unknown" }[r.daemon] ?? r.daemon;
+    $("pill").className = `pill-state ${r.daemon}`;
+    $("pill").textContent = `${label}${r.uptimeMinutes != null ? ` · up ${days(r.uptimeMinutes)}` : ""}${r.stopPresent ? " · STOP file" : ""}`;
+    $("pidline").textContent = r.pid ? `pid ${r.pid}` : "no pid";
+    const needs = r.attention?.needsYou ?? 0;
+    $("countNeeds").textContent = String(needs);
+    $("countNeeds").classList.toggle("hot", needs > 0);
+    $("countWaiting").textContent = String(r.attention?.waiting ?? 0);
+    const cur = r.theme?.current;
+    $("swatches").innerHTML = `Theme ${(r.theme?.choices ?? []).map((n) => `<button type="button" data-theme-pick="${esc(n)}" class="${n === cur ? "cur" : ""}" style="background:${THEME_SWATCH[n] ?? "#888"}" title="${esc(n)}" aria-label="${esc(n)} theme"></button>`).join("")}`;
+    for (const b of $("swatches").querySelectorAll("button")) b.onclick = () => { if (b.dataset.themePick !== cur) post("/api/theme", { theme: b.dataset.themePick }); };
+  }
+
+  // ---- dashboard ----
+  const BANNER = {
+    stop: { cls: "warn", fix: "Go resumes" },
+    preflight: { cls: "bad", fix: "fix the cause; the next tick re-checks" },
+    cap: { cls: "warn", fix: '<a href="#session">raise the cap</a>' },
+    paused: { cls: "warn", fix: "Resume on the Board tab" },
+  };
+  function bannerRows(r) {
+    const rows = (r.attention?.banners ?? []).map((w) => ({ cls: BANNER[w.kind]?.cls ?? "warn", text: esc(w.detail), fix: BANNER[w.kind]?.fix ?? "" }));
+    if (r.daemon === "UNKNOWN") rows.push({ cls: "warn", text: "no state.json: restart the daemon", fix: "" });
+    if (r.daemon === "STOPPED") rows.push({ cls: "warn", text: "the daemon is stopped", fix: "foreman start" });
+    if (r.daemon === "CRASHED") rows.push({ cls: "bad", text: "the daemon crashed", fix: "check foreman.err.log, then start it" });
+    if (r.current?.stalled) rows.push({ cls: "bad", text: `session stalled: no output for ${mins(r.current.silentMinutes)}`, fix: "Abort ends it" });
+    if (r.orphan) rows.push({ cls: "bad", text: `child ${esc(r.orphan.pid)} still running for #${esc(r.orphan.issue)}`, fix: "" });
+    if (r.unfinished) rows.push({ cls: "bad", text: `${esc(r.unfinished.mode)} bookkeeping unfinished for ${esc(r.unfinished.role)} #${esc(r.unfinished.issue)}`, fix: "run ctl abort" });
+    if (r.stopping) rows.push({ cls: "warn", text: `${esc(r.stopping.mode)} requested at ${t(r.stopping.at)}`, fix: "" });
+    return rows;
+  }
+  const bannerHtml = (rows) => rows.map((b) => `<div class="banner ${b.cls}"><span>${b.text}</span>${b.fix ? `<span class="fix">${b.fix}</span>` : ""}</div>`).join("");
 
   function renderNow(r) {
     const el = $("now");
     const c = r.current;
     if (!c) {
-      const first = r.board?.waiting?.[0];
       // "idle" is reserved for a tick that found nothing eligible; between a finished session and
       // the next tick the daemon is asleep on a schedule, and says so.
       const phase = r.nowPhase === "parked"
         ? { label: "parked", sub: esc(r.tick?.preflight?.reason ?? "preflight failed") }
         : r.nowPhase === "between_ticks"
-          ? { label: "between ticks", sub: `next ${t(r.tick?.nextAt)}` }
+          ? { label: "between ticks", sub: `next tick ${t(r.tick?.nextAt)}` }
           : r.nowPhase === "ticking"
             ? { label: "ticking", sub: `since ${t(r.tick?.lastAt)}` }
-            : { label: "idle", sub: `since ${t(r.tick?.lastAt)}` };
-      el.className = r.nowPhase === "parked" ? "now parked" : "now idle";
-      el.innerHTML = `<div class="title"><span class="role">${phase.label}</span><span class="sub">${phase.sub}</span></div>${first ? `<div class="kv"><span>first wait: <b>${esc(first.detail)}</b></span></div>` : ""}${r.daemon !== "RUNNING" ? `<div class="kv"><span>daemon <b>${esc(r.daemon)}</b></span></div>` : ""}`;
+            : { label: "idle", sub: `last tick ${t(r.tick?.lastAt)} · next ${t(r.tick?.nextAt)}` };
+      el.className = "card now idle";
+      el.innerHTML = `<div class="eyebrow"><span class="role${r.nowPhase === "parked" ? " parked" : ""}">${phase.label}</span><span class="muted">${phase.sub}</span></div>`;
       return;
     }
     const a = c.activity;
     const pct = Math.min(100, Math.round((c.elapsedMinutes / c.limitMinutes) * 100));
-    const kv = [
-      `turns <b>${a ? a.turns : "–"}</b>`,
-      a ? `tokens <b>${k(a.tokens.input)}</b> in / <b>${k(a.tokens.output)}</b> out` : "",
-      a?.model ? `model <b>${esc(a.model)}</b>` : "",
-      `branch <b>${esc(c.branch)}</b>`,
-      a?.rateLimit ? `5h window <b>${Math.round(a.rateLimit.fiveHour * 100)}%</b> · 7d <b>${Math.round(a.rateLimit.sevenDay * 100)}%</b>` : "",
-      c.childPid ? `child <b>${c.childPid}</b>` : "",
-    ].filter(Boolean).map((s) => `<span>${s}</span>`).join("");
+    const pipe = (r.board?.pipeline ?? []).find((p) => p.issue === c.issue);
+    const tokens = a ? a.tokens.input + a.tokens.output + (a.tokens.cacheRead ?? 0) + (a.tokens.cacheWrite ?? 0) : null;
+    const stat = (v, l) => `<div class="stat"><b>${v}</b><span>${l}</span></div>`;
     const doing = a?.lastTool
-      ? `<div class="doing"><div class="tool"><span class="name${a.lastError && a.lastError.at >= a.lastTool.at ? " err" : ""}">${esc(a.lastTool.name)}</span><span class="s">${esc(a.lastTool.summary)}</span><span class="age" data-at="${esc(a.lastTool.at)}">${ago(a.lastTool.at)}</span></div>${a.lastText ? `<div class="said">“${esc(a.lastText.text)}”</div>` : ""}</div>`
+      ? `<div class="doing"><div class="row1"><span class="tool${a.lastError && a.lastError.at >= a.lastTool.at ? " err" : ""}">${esc(a.lastTool.name)}</span><span class="x">${esc(a.lastTool.summary)}</span><span class="ago" data-at="${esc(a.lastTool.at)}">${ago(a.lastTool.at)}</span></div>${a.lastText ? `<div class="said">“${esc(a.lastText.text)}”</div>` : ""}</div>`
       : `<div class="doing"><div class="said">${a ? "no tool call yet" : "no live activity: restart the daemon to enable stream-json"}</div></div>`;
-    el.className = "now";
-    el.innerHTML = `<div class="title"><span class="role">${esc(c.role)} on ${link("issues", c.issue)}</span><span class="sub">${esc(c.title)}</span>${c.pr ? `<span class="sub">${link("pull", c.pr, `PR #${c.pr}`)}</span>` : ""}<span class="sub mono">round ${c.round} · attempt ${c.attempt} · session ${esc(c.sessionId.slice(0, 8))}${c.resume ? " · resumed" : ""}</span></div>
-      <div class="kv">${kv}</div>
-      <div class="bar"><i style="width:${pct}%"></i></div>
-      <div class="bar-lbl mono"><span>started ${t(c.startedAt)}</span><span>${mins(c.elapsedMinutes)} of ${c.limitMinutes}m</span><span>deadline ${hm(c.deadlineAt)}</span></div>${doing}`;
+    el.className = "card now";
+    el.innerHTML = `<div class="eyebrow"><span class="role">${esc(c.role)}</span><span class="tag">round ${esc(c.round)}</span><span class="tag">attempt ${esc(c.attempt)}</span>${pipe?.effort ? `<span class="tag eff">${esc(pipe.effort)} effort</span>` : ""}${c.resume ? '<span class="tag">resumed</span>' : ""}</div>
+      <h2>${link("issues", c.issue)} · ${esc(c.title)}</h2>
+      <div class="meta">${c.pr ? `<span>${link("pull", c.pr, `PR #${c.pr}`)}</span>` : ""}${a?.model ? `<span>${esc(a.model)}</span>` : ""}<span class="mono">${esc(c.branch)}</span><span class="mono muted">session ${esc(c.sessionId.slice(0, 8))}${c.childPid ? ` · child ${esc(c.childPid)}` : ""}</span></div>
+      <div class="prog"><i style="width:${pct}%"></i></div>
+      <div class="prog-l"><span>Started ${t(c.startedAt)}</span><span>${mins(c.elapsedMinutes)} of ${c.limitMinutes}m</span><span>Deadline ${hm(c.deadlineAt)}</span></div>
+      <div class="stats">${stat(a ? a.turns : "–", "turns")}${stat(tokens === null ? "–" : k(tokens), "tokens")}${stat(a?.rateLimit ? `${Math.round(a.rateLimit.fiveHour * 100)}%` : "–", "5h window")}${stat(a?.rateLimit ? `${Math.round(a.rateLimit.sevenDay * 100)}%` : "–", "7d window")}</div>${doing}`;
   }
 
+  const STAGES = [["build", "Build"], ["review", "Review"], ["validate", "Validate"], ["ci", "CI"], ["merge", "Merge"]];
+  // CI reports check states; the track speaks stage states.
+  const CI_STAGE = { success: "done", pending: "active", failure: "failed", none: "pending" };
+  function track(stages) {
+    return `<div class="track">${STAGES.map(([key, label]) => {
+      const st = key === "ci" ? CI_STAGE[stages.ci] ?? "pending" : stages[key];
+      return `<div class="k ${esc(st)}" title="${label}: ${esc(st)}"><span class="d"></span>${label}</div>`;
+    }).join("")}</div>`;
+  }
   function renderPipeline(rows) {
-    const cell = (name, st) => `<span class="stage ${esc(st)}${name === "ci" ? " ci" : ""}">${name === "validate" ? "valid" : name}</span>`;
+    $("plMeta").textContent = rows.length ? `${rows.length} in flight` : "";
     $("pipeline").innerHTML = rows.length
-      ? rows.map((p) => `<tr><td class="mono">${link("issues", p.issue)}</td><td>${esc(p.title)}</td><td><div class="stages">${["build", "review", "validate", "ci", "merge"].map((s) => cell(s, p.stages[s])).join("")}</div></td><td class="mono">${p.claim ? `${esc(p.claim.host)} · ${esc(p.claim.role)} r${p.claim.round}` : "—"}</td><td class="mono">${p.pr ? link("pull", p.pr) : "—"}</td><td>${p.model ? `<span class="tag" title="every session on this issue runs as ${esc(p.model)}">${esc(p.model)}</span> ` : ""}${p.effort ? `<span class="tag" title="every session on this issue runs at ${esc(p.effort)} effort">${esc(p.effort)} effort</span> ` : ""}${p.blocked ? '<span class="tag bad">blocked</span>' : p.fixRound > 1 ? `<span class="tag">fix round ${p.fixRound}</span>` : p.stages.ci === "pending" ? '<span class="tag ci">ci pending</span>' : p.stages.merge === "active" ? '<span class="tag">mergeable</span>' : ""}</td></tr>`).join("")
-      : '<tr><td colspan="6" class="mono" style="color:var(--ink-3)">nothing in flight</td></tr>';
-  }
-
-  function renderWaiting(items) {
-    const detail = (w) => w.detail.startsWith(w.subject)
-      ? `${subjectLink(w.subject)}${esc(w.detail.slice(w.subject.length))}`
-      : esc(w.detail);
-    $("waiting").innerHTML = items.length
-      ? items.map((w) => `<li><span class="tag ${esc(w.kind)}">${esc(w.kind.replace("_", " "))}</span><div class="d">${detail(w)}${w.since ? `<span class="since">since ${t(w.since)}</span>` : ""}</div></li>`).join("")
-      : '<li class="none">nothing blocks a new claim</li>';
-  }
-
-  function renderTick(r) {
-    const rows = [];
-    if (r.tick) {
-      rows.push(["last", `${t(r.tick.lastAt)} · ${r.tick.preflight ? (r.tick.preflight.ok ? "preflight ok" : `preflight failed: ${esc(r.tick.preflight.reason)}`) : "no tick yet"}`]);
-      rows.push(["next", r.tick.blockedBySession ? `blocked by session since ${t(r.current?.startedAt)}` : t(r.tick.nextAt)]);
-      rows.push(["backoff", String(r.tick.consecutiveFailures)]);
-    }
-    if (r.model) rows.push(["model", modelControl(r.model)]);
-    if (r.stopping) rows.push(["stopping", `${esc(r.stopping.mode)} since ${t(r.stopping.at)}`]);
-    if (r.orphan) rows.push(["orphan", `child ${r.orphan.pid} still running for #${r.orphan.issue}`]);
-    if (r.unfinished) rows.push(["unfinished", `${esc(r.unfinished.mode)} bookkeeping for ${esc(r.unfinished.role)} #${r.unfinished.issue}; run ctl abort`]);
-    rows.push(["plan", r.lastPlan ? r.lastPlan.map(esc).join(", ") : "–"]);
-    rows.push(["today", `${r.today.count} of ${r.today.cap} sessions · $${r.today.spendUsd.toFixed(2)}${r.cap ? capControl(r.cap) : ""}`]);
-    if (r.budget) {
-      const b = r.budget;
-      rows.push(["gh budget", `${b.remaining} of ${b.limit} points · resets ${hm(b.resetAt)}`]);
-      // Attribution, not just a total: whose calls emptied the hourly budget.
-      rows.push(["last tick", `${b.tickReads} reads · ${b.actionSpend} session · ${b.betweenTicks} elsewhere`]);
-    }
-    rows.push(["launchd", r.launchdInstalled ? "installed" : "not installed"]);
-    $("tick").innerHTML = rows.map(([a, b]) => `<div><span>${a}</span><span>${b}</span></div>`).join("");
-    for (const b of $("tick").querySelectorAll("button[data-model]")) b.onclick = () => setModel(b.dataset.model);
-    for (const b of $("tick").querySelectorAll("button[data-cap]")) b.onclick = () => setCap(b.dataset.cap === "default" ? null : Number(b.dataset.cap));
-  }
-
-  // The daily session cap. Parking on it is the single most likely reason the foreman is doing
-  // nothing, and it is the one knob you want at exactly that moment, so it lives next to the count.
-  function capControl(c) {
-    const choices = c.source === "override" ? [...c.choices, "default"] : c.choices;
-    const btns = choices.filter((n) => n !== c.current)
-      .map((n) => `<button type="button" data-cap="${esc(String(n))}">${esc(n === "default" ? `default (${c.configured})` : String(n))}</button>`).join("");
-    const from = c.source === "override" ? `<span class="from"> override · foreman.json says ${esc(String(c.configured))}</span>` : "";
-    return `${from}<span class="acts">${btns}</span>`;
-  }
-  async function setCap(cap) {
-    const what = cap === null ? "the value in foreman.json" : `${cap} sessions a day`;
-    if (!window.confirm(`Set the daily session cap to ${what}?\n\nEach session costs money; today's spend is on this card. Takes effect on the next tick.`)) return;
-    $("msg").textContent = `cap ${cap ?? "default"}…`;
-    const j = await (await fetch("/api/cap", { method: "POST", body: JSON.stringify({ maxSessionsPerDay: cap }) })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
-  }
-
-  // What the next session runs as. The buttons are the common choices only; foreman.json and
-  // `ctl model <name>` still take any model name.
-  function modelControl(m) {
-    // An override is only reachable-out-of via "default", so offer it whenever one is set.
-    const choices = m.source === "override" ? [...m.choices, "default"] : m.choices;
-    const btns = choices.filter((c) => c !== m.current)
-      .map((c) => `<button type="button" data-model="${esc(c)}">${esc(c === "default" ? `default (${m.configured})` : c)}</button>`).join("");
-    const from = m.source === "override" ? `<span class="from"> override · foreman.json says ${esc(m.configured)}</span>` : "";
-    return `<span><b>${esc(m.current)}</b>${from}<span class="acts">${btns}</span></span>`;
-  }
-  async function setModel(model) {
-    if (!window.confirm(`Run foreman sessions as ${model}?\n\nA session running now keeps the model it started with; the next dispatch uses ${model}.`)) return;
-    $("msg").textContent = `model ${model}…`;
-    const j = await (await fetch("/api/model", { method: "POST", body: JSON.stringify({ model }) })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
-  }
-
-  // How far each approved phase has come and what it has cost. Everything here is computed inside
-  // the tick from the snapshot and the local logs, so it costs no GitHub reads.
-  // Which phases the owner has expanded into their task list; kept across polls so a re-render
-  // does not fold the list they are looking at.
-  const openPhases = new Set();
-  // The one-click model names, from the last status poll (`StatusReport.model.choices`).
-  let modelChoices = [];
-  // Claude Code's effort levels and the fixed default, from the same poll (`StatusReport.effort`).
-  let effort = { default: "high", levels: [] };
-  function renderPhases(items) {
-    $("phases").innerHTML = items.length
-      ? items.map((p) => {
-          const pct = p.tasksTotal ? Math.round((p.tasksDone / p.tasksTotal) * 100) : 0;
-          const median = p.medianMergeMinutes === null ? "no merge yet" : `median ${mins(p.medianMergeMinutes)} claim→merge`;
-          const open = openPhases.has(p.epic);
-          const pinned = (p.tasks ?? []).filter((t) => t.model).length;
-          const efforts = (p.tasks ?? []).filter((t) => t.effort).length;
-          return `<div class="p"><div class="who"><span>${link("issues", p.epic)} phase ${esc(p.phase)} ${esc(p.title)}</span><b>${p.tasksDone}/${p.tasksTotal}</b></div>
-            <div class="bar"><i style="width:${pct}%"></i></div>
-            <div class="facts"><span>$${Number(p.spendUsd).toFixed(2)} · ${p.sessions} sessions</span><span>${esc(median)}</span></div>
-            <div class="facts"><span class="toggle" data-phase="${p.epic}" role="button" tabindex="0">${open ? "▾" : "▸"} tasks${pinned ? ` · ${pinned} pinned to a model` : ""}${efforts ? ` · ${efforts} off ${esc(effort.default)} effort` : ""}</span></div>
-            ${open ? renderTasks(p.tasks ?? []) : ""}</div>`;
+      ? rows.map((p) => {
+          const tags = [
+            p.model ? `<span class="tag acc" title="every session on this issue runs as ${esc(p.model)}">${esc(p.model)}</span>` : "",
+            p.effort ? `<span class="tag eff">${esc(p.effort)} effort</span>` : "",
+            p.blocked ? '<span class="tag bad">blocked</span>' : "",
+            !p.blocked && p.stages.ci === "pending" ? '<span class="tag ci">CI pending</span>' : "",
+            !p.blocked && p.stages.merge === "active" ? '<span class="tag ok">mergeable</span>' : "",
+          ].join("");
+          const sub = [p.pr ? link("pull", p.pr, `PR #${p.pr}`) : "no PR yet", p.claim ? `${esc(p.claim.host)} · ${esc(p.claim.role)} r${esc(p.claim.round)}` : "unclaimed", p.fixRound > 1 ? `fix round ${esc(p.fixRound)}` : ""].filter(Boolean).join(" · ");
+          return `<div class="card pi"><div class="ttl"><div class="t"><span class="num">${link("issues", p.issue)}</span>${esc(p.title)}</div><div class="s">${sub}</div></div>${track(p.stages)}<div class="tags">${tags}</div></div>`;
         }).join("")
-      : '<div class="empty">no approved phase in flight</div>';
-    for (const el of $("phases").querySelectorAll(".toggle")) {
-      const flip = () => { const n = Number(el.dataset.phase); openPhases.has(n) ? openPhases.delete(n) : openPhases.add(n); renderPhases(items); };
-      el.onclick = flip;
-      el.onkeydown = (ev) => { if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); flip(); } };
-    }
-    for (const b of $("phases").querySelectorAll("button[data-task-model]")) b.onclick = () => setTaskModel(Number(b.dataset.issue), b.dataset.taskModel, b.dataset.current || null);
-    for (const b of $("phases").querySelectorAll("button[data-task-effort]")) b.onclick = () => setTaskEffort(Number(b.dataset.issue), b.dataset.taskEffort, b.dataset.current || null);
-  }
-  // One row per task of the phase. A `model:<name>` label on the issue pins every foreman session
-  // on it to that model, outranking the Tick card's choice; `default` removes the label. Closed
-  // tasks have left the snapshot, so they show as done and take no button.
-  // The second row is the task's effort: every session runs at the default unless an
-  // `effort:<level>` label says otherwise, and choosing the default removes the label.
-  function renderTasks(tasks) {
-    if (!tasks.length) return '<div class="tasks"><div class="task closed">no tasks yet</div></div>';
-    const choices = [...modelChoices, "default"];
-    return `<div class="tasks">${tasks.map((t) => {
-      const efforts = `<span class="acts">${effort.levels.map((c) => `<button type="button" data-issue="${t.issue}" data-task-effort="${esc(c)}" data-current="${esc(t.effort ?? "")}" class="${c === (t.effort ?? effort.default) ? "on" : ""}" title="${c === effort.default ? `the default effort; removes #${t.issue}'s effort label` : `run #${t.issue} at ${esc(c)} effort`}">${esc(c)}</button>`).join("")}</span>`;
-      const acts = t.closed ? "" : `<span class="acts">${choices.map((c) => `<button type="button" data-issue="${t.issue}" data-task-model="${esc(c)}" data-current="${esc(t.model ?? "")}" class="${c === (t.model ?? "default") ? "on" : ""}" title="${c === "default" ? "use the global model" : `pin #${t.issue} to ${esc(c)}`}">${esc(c)}</button>`).join("")}</span>${efforts}`;
-      return `<div class="task${t.closed ? " closed" : ""}"><span>${link("issues", t.issue)} ${esc(t.title)}<span class="st">${t.closed ? "done" : esc(t.status ?? "off board")}</span></span>${acts}</div>`;
-    }).join("")}</div>`;
-  }
-  async function setTaskModel(issue, model, current) {
-    const what = model === "default" ? `the global model${current ? ` (drops ${current})` : ""}` : model;
-    if (!window.confirm(`Run every foreman session on #${issue} as ${what}?\n\nBuilder, reviewer and validator alike, outranking the Tick card's model. A session running now keeps the model it started with; the issue's next session uses this.`)) return;
-    $("msg").textContent = `#${issue} model ${model}…`;
-    const j = await (await fetch("/api/task-model", { method: "POST", body: JSON.stringify({ issue, model }) })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
-  }
-
-  async function setTaskEffort(issue, level, current) {
-    const what = level === effort.default ? `the default ${level} effort${current ? ` (drops ${current})` : ""}` : `${level} effort`;
-    if (!window.confirm(`Run every foreman session on #${issue} at ${what}?\n\nBuilder, reviewer and validator alike. A session running now keeps the effort it started with; the issue's next session uses this.`)) return;
-    $("msg").textContent = `#${issue} effort ${level}…`;
-    const j = await (await fetch("/api/task-effort", { method: "POST", body: JSON.stringify({ issue, effort: level }) })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
-  }
-
-  function renderRecent(list) {
-    const cls = (o) => (/^(pr_opened|approved|passed|phase_closed|plan_drafted)$/.test(o) ? "ok" : /^(blocked|failed|aborted|error_max_turns|interrupted)$/.test(o) ? "bad" : "warn");
-    $("recent").innerHTML = list.length
-      ? list.map((e) => `<div class="r${e.sessionId === feedSession ? " sel" : ""}" data-sid="${esc(e.sessionId)}" tabindex="0" role="button" title="${esc(e.model || "model unknown")} · ${e.turns ?? 0} turns · ${mins(Math.round(e.durationMinutes ?? 0))} · ${e.denials ?? 0} denials · ${esc(e.subtype || "?")}"><span class="c">${hm(e.t)}</span><span>${esc(e.role)} #${e.issue}</span><span class="o ${cls(e.outcome)}">${esc(e.outcome)}</span><span class="c">${esc(family(e.model))} ${e.turns ?? 0}t</span><span class="c">$${e.costUsd.toFixed(2)}</span></div>`).join("")
-      : '<div class="c">none</div>';
-    for (const row of $("recent").querySelectorAll(".r")) {
-      row.onclick = () => {
-        if (feedPinned && row.dataset.sid === feedSession) { feedPinned = false; }
-        else { feedSession = row.dataset.sid; feedPinned = true; }
-        loadFeed(); renderRecent(list);
-      };
-      row.onkeydown = (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); row.onclick(); } };
-    }
+      : '<div class="card empty">nothing in flight</div>';
   }
 
+  // ---- feed: the running session, or one pinned from the Session tab ----
+  let feedSession = null;   // session id whose feed is shown
+  let feedPinned = false;   // true after "View feed", so polling does not switch it back
+  let lastRenderedSession = null;
+  $("live").onclick = () => { feedPinned = false; feedSession = r?.current?.sessionId ?? r?.recent?.[0]?.sessionId ?? null; loadFeed(); };
   async function loadFeed() {
     const el = $("feed");
-    if (!feedSession) { el.innerHTML = '<div class="empty">no session selected</div>'; $("feedMeta").textContent = ""; return; }
+    $("live").hidden = !feedPinned;
+    if (!feedSession) { el.innerHTML = '<div class="empty">no session yet</div>'; $("feedMeta").textContent = ""; return; }
     let j;
     try { j = await (await fetch(`/api/feed?session=${encodeURIComponent(feedSession)}&limit=50`)).json(); } catch { return; }
     const entries = Array.isArray(j.entries) ? j.entries : [];
     const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 8;
-    $("feedMeta").textContent = `session ${feedSession.slice(0, 8)} · last ${entries.length} events · newest at bottom`;
+    const which = r?.current?.sessionId === feedSession ? `${r.current.role} #${r.current.issue}` : `session ${feedSession.slice(0, 8)}`;
+    $("feedMeta").textContent = `${which} · newest last`;
     el.innerHTML = entries.length
       ? entries.map((e) => {
-          const s = e.kind === "tool" ? esc(e.summary) : e.kind === "text" ? esc(e.text) : e.kind === "init" ? esc(e.model) : e.kind === "tool_error" ? `${esc(e.name)} returned an error` : e.kind === "rate_limit" ? `5h ${Math.round(e.fiveHour * 100)}% · 7d ${Math.round(e.sevenDay * 100)}%` : `${esc(e.subtype)} · ${esc(e.outcome ?? "no outcome")} · ${e.turns} turns · $${Number(e.costUsd ?? 0).toFixed(2)}`;
-          const kind = e.kind === "tool" ? esc(e.name) : esc(e.kind);
-          return `<div class="row"><span class="t">${t(e.t)}</span><span class="k ${esc(e.kind)}">${kind}</span><span class="s ${e.kind === "text" ? "text" : ""}">${s}</span></div>`;
+          const kind = e.kind === "tool" ? `<span class="tool">${esc(e.name)}</span>` : e.kind === "tool_error" ? `<span class="tool err">${esc(e.name)}</span>` : `<span class="lbl">${esc(e.kind)}</span>`;
+          const s = e.kind === "tool" ? `<span class="x">${esc(e.summary)}</span>`
+            : e.kind === "text" ? `<span class="said">“${esc(e.text)}”</span>`
+            : e.kind === "init" ? `<span class="x">${esc(e.model)}</span>`
+            : e.kind === "tool_error" ? `<span class="x">${esc(e.name)} returned an error</span>`
+            : e.kind === "rate_limit" ? `<span class="x">5h ${Math.round(e.fiveHour * 100)}% · 7d ${Math.round(e.sevenDay * 100)}%</span>`
+            : `<span class="x">${esc(e.subtype)} · ${esc(e.outcome ?? "no outcome")} · ${esc(e.turns)} turns · ${usd(e.costUsd)}</span>`;
+          return `<div class="fr"><span class="tm">${t(e.t)}</span><span>${kind}</span>${s}</div>`;
         }).join("")
       : '<div class="empty">no events recorded for this session</div>';
     if (atBottom || feedSession !== lastRenderedSession) el.scrollTop = el.scrollHeight;
     lastRenderedSession = feedSession;
   }
 
+  // ---- controls ----
+  const pending = {};
+  function armed(cmd, btn) {
+    const reset = () => { pending[cmd] = null; btn.classList.remove("confirm"); btn.textContent = cmd[0].toUpperCase() + cmd.slice(1); };
+    if (pending[cmd]) { clearTimeout(pending[cmd]); reset(); return true; }
+    btn.classList.add("confirm"); btn.textContent = `Confirm ${cmd}?`;
+    pending[cmd] = setTimeout(reset, 5000);
+    return false;
+  }
+  for (const cmd of ["stop", "abort"]) $(cmd).onclick = () => { if (armed(cmd, $(cmd))) post(`/api/${cmd}`); };
+  $("go").onclick = () => post("/api/go");
+  // Board edits made by hand (Status, item-add, labels) reach the page on the next tick; this
+  // asks for that tick now instead of waiting out the poll interval.
+  $("refresh").onclick = () => post("/api/refresh");
+  $("nextClose").onclick = () => { $("nextOut").hidden = true; };
+  $("next").onclick = async () => {
+    $("nextOut").hidden = false; $("nextText").textContent = "computing…";
+    const j = await (await fetch("/api/next")).json();
+    const lines = j.actions.map((a, i) => (i === j.stopAt ? `${a}  ← would stop here` : a));
+    $("nextText").textContent = [`plan   ${lines.join(", ")}`, ...j.explain.map((e) => `       ${e}`), "", ...j.prs.map((p) => `PR #${p.pr} → ${p.issue == null ? "?" : `#${p.issue}`}  status ${p.status}  checks ${p.checks}  labels [${p.labels.join(",")}]   ${p.reason === "eligible to merge" ? p.reason : `not eligible: ${p.reason}`}`)].join("\n");
+  };
+
+  // ---- Needs you: grouped by the action the owner takes ----
+  const waitDays = (iso) => (iso ? Math.max(0, Math.floor((Date.now() - Date.parse(iso)) / 86_400_000)) : null);
+  const subjectLink = (subject) => { const m = /^(PR |epic )?#(\d+)$/.exec(subject); return m ? link(m[1] === "PR " ? "pull" : "issues", m[2], subject) : esc(subject); };
+  const oldestFirst = (a, b) => (a.since ?? "9999").localeCompare(b.since ?? "9999");
   // Label gates a human owns. The confirm text spells out the exact label change, because a
   // mis-click here closes a phase or starts a $5 planning session.
   const OWNER = {
-    sign_off:       { label: "Sign off",       ask: (n) => `Sign off #${n}?\n\nAdds signed-off, removes needs-owner, and closes the epic.` },
-    approve_plan:   { label: "Approve plan",   ask: (n) => `Approve the plan on #${n}?\n\nAdds plan-approved. The foreman then creates the task issues and starts building.` },
-    start_planning: { label: "Start planning", ask: (n) => `Start planning #${n}?\n\nAdds agent-ready. A planner session costs roughly $5.` },
-    pause:          { label: "Pause",          ask: (n) => `Pause #${n}?\n\nAdds foreman:pause. No new claims under this phase on any Mac.` },
-    unpause:        { label: "Resume",         ask: (n) => `Resume #${n}?\n\nRemoves foreman:pause.` },
+    sign_off:       { label: "Sign off",       cls: "signoff", ask: (n) => `Sign off #${n}?\n\nAdds signed-off, removes needs-owner, and closes the epic.` },
+    approve_plan:   { label: "Approve plan",   cls: "approve", ask: (n) => `Approve the plan on #${n}?\n\nAdds plan-approved. The foreman then creates the task issues and starts building.` },
+    start_planning: { label: "Start planning", cls: "plan",    ask: (n) => `Start planning #${n}?\n\nAdds agent-ready. A planner session costs roughly $5.` },
+    pause:          { label: "Pause",          cls: "",        ask: (n) => `Pause #${n}?\n\nAdds foreman:pause. No new claims under this phase on any Mac.` },
+    unpause:        { label: "Resume",         cls: "",        ask: (n) => `Resume #${n}?\n\nRemoves foreman:pause.` },
   };
-  function renderOwner(items) {
-    const el = $("owner");
-    el.innerHTML = items.length
-      ? items.map((i) => {
-          const btns = i.actions.map((a) => `<button type="button" data-epic="${i.epic}" data-action="${esc(a)}">${esc(OWNER[a]?.label ?? a)}</button>`).join("");
-          return `<div class="o"><span class="who">${link("issues", i.epic)} ${esc(i.title)}</span><span class="acts">${btns}</span>${i.detail ? `<span class="why">${esc(i.detail)}</span>` : ""}</div>`;
-        }).join("")
-      : '<div class="empty">no open epics</div>';
-    for (const b of el.querySelectorAll("button")) b.onclick = () => ownerAct(Number(b.dataset.epic), b.dataset.action);
-  }
-  async function ownerAct(epic, action) {
+  function ownerAct(epic, action) {
     if (!window.confirm((OWNER[action]?.ask ?? ((n) => `${action} #${n}?`))(epic))) return;
-    $("msg").textContent = `${action} #${epic}…`;
-    const j = await (await fetch("/api/owner", { method: "POST", body: JSON.stringify({ epic, action }) })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
+    post("/api/owner", { epic, action });
   }
-
-  // Non-epic issues parked on the owner: a decision nobody has answered, and a `blocked` issue
-  // that needs two GitHub edits to restart — which is what the Unblock button does.
-  function renderNeedsYou(items) {
-    const el = $("needsYou");
-    el.innerHTML = items.length
-      ? items.map((i) => {
-          const tags = i.labels.map((l) => `<span class="tag ${l === "blocked" ? "bad" : "human"}">${esc(l)}</span>`).join(" ");
-          const btn = i.labels.includes("blocked") ? `<button type="button" data-unblock="${i.issue}">Unblock</button>` : "";
-          return `<div class="o"><span class="who">${link("issues", i.issue)} ${esc(i.title)}</span><span class="acts">${btn}</span><span class="why">${tags} · waiting <span data-waited="${esc(i.since)}">${waited(i.since)}</span></span></div>`;
-        }).join("")
-      : '<div class="empty">nothing</div>';
+  function unblock(issue) {
+    if (!window.confirm(`Unblock #${issue}?\n\nRemoves the blocked label, sets Status Ready, and comments on the issue. The foreman may claim it on the next tick — fix whatever blocked it first.`)) return;
+    post("/api/unblock", { issue });
+  }
+  const ageCell = (since) => {
+    const d = waitDays(since);
+    return d === null ? '<div class="age">–</div>' : `<div class="age${d > 30 ? " old" : ""}">${d}d<small>waiting</small></div>`;
+  };
+  const ownerButton = (epic, action) => `<button type="button" class="${OWNER[action].cls}" data-owner="${esc(action)}" data-epic="${esc(epic)}">${OWNER[action].label}</button>`;
+  function group(title, dot, note, rows) {
+    if (!rows.length) return "";
+    return `<div class="grp"><div class="gh">${dot ? `<span class="dot" style="background:${dot}"></span>` : ""}${esc(title)} <span class="c">${rows.length}</span><small>${note}</small></div><div class="card list">${rows.join("")}</div></div>`;
+  }
+  function renderNeedsYou(r) {
+    const owner = r.board?.owner ?? [];
+    const needs = (r.board?.needsYou ?? []).filter((n) => n.reviewOf === null).sort(oldestFirst);
+    const phases = new Map((r.board?.phases ?? []).map((p) => [p.epic, p]));
+    const waits = r.board?.waiting ?? [];
+    const by = (action) => owner.filter((o) => o.actions.includes(action)).sort(oldestFirst);
+    const row = (age, title, sub, acts) => `<div class="it">${age}<div><div class="t">${title}</div>${sub ? `<div class="s">${sub}</div>` : ""}</div><div class="acts">${acts}</div></div>`;
+    const approve = by("approve_plan").map((o) => row(ageCell(o.since), `<span class="num">${link("issues", o.epic)}</span>${esc(o.title)}`, `plan drafted · ${link("issues", o.epic, "read the plan")}`, ownerButton(o.epic, "approve_plan")));
+    const signOff = by("sign_off").map((o) => {
+      const p = phases.get(o.epic);
+      const progress = p ? `<span class="mini"><span class="b"><i style="width:${p.tasksTotal ? Math.round((p.tasksDone / p.tasksTotal) * 100) : 0}%"></i></span>${p.tasksDone}/${p.tasksTotal} tasks</span><span>${usd(p.spendUsd)}</span>` : "";
+      return row(ageCell(o.since), `<span class="num">${link("issues", o.epic)}</span>${esc(o.title)}`, `${progress}${o.review ? `<span>review ${link("issues", o.review)}</span>` : ""}`, ownerButton(o.epic, "sign_off"));
+    });
+    const plan = by("start_planning").map((o) => row('<div class="age">–</div>', `<span class="num">${link("issues", o.epic)}</span>${esc(o.title)}`, "", ownerButton(o.epic, "start_planning")));
+    const tags = (n) => n.labels.map((l) => `<span class="tag${l === "blocked" ? " bad" : ""}">${esc(l)}</span>`).join("");
+    const blocked = needs.filter((n) => n.labels.includes("blocked")).map((n) => {
+      const why = waits.find((w) => w.subject === `#${n.issue}` && w.detail.startsWith(`#${n.issue} blocked`))?.detail.replace(`#${n.issue} blocked`, "").replace(/^:\s*/, "");
+      return row(ageCell(n.since), `<span class="num">${link("issues", n.issue)}</span>${esc(n.title)}`, `${tags(n)}${why ? `<span>${esc(why)}</span>` : ""}`, `<button type="button" data-unblock="${esc(n.issue)}">Unblock</button>`);
+    });
+    const answer = needs.filter((n) => !n.labels.includes("blocked")).map((n) => row(ageCell(n.since), `<span class="num">${link("issues", n.issue)}</span>${esc(n.title)}`, `${tags(n)}${n.phaseReview ? "<span>epic already closed</span>" : ""}`, repo ? `<a class="tag" href="${gh("issues", n.issue)}" target="_blank" rel="noopener">Open ↗</a>` : ""));
+    const counted = approve.length + signOff.length + blocked.length + answer.length;
+    $("needsMeta").textContent = counted ? `${counted} waiting on you · oldest first in each group` : "";
+    const html = [
+      group("Approve a plan", "var(--primary)", "the planner drafted these; building starts after approval", approve),
+      group("Sign off a phase", "var(--signoff)", "phase review is done; signing off closes the epic", signOff),
+      group("Ready to plan", "var(--warn)", "not counted in the badge · a planner session costs about $5", plan),
+      group("Unblock", "", "fix the cause first; Unblock moves it back to Ready", blocked),
+      group("Answer or close", "", "decisions and owner tasks; answer on GitHub", answer),
+    ].join("");
+    const el = $("needsBody");
+    el.innerHTML = html || '<div class="card empty">nothing is waiting on you</div>';
+    for (const b of el.querySelectorAll("button[data-owner]")) b.onclick = () => ownerAct(Number(b.dataset.epic), b.dataset.owner);
     for (const b of el.querySelectorAll("button[data-unblock]")) b.onclick = () => unblock(Number(b.dataset.unblock));
   }
-  async function unblock(issue) {
-    if (!window.confirm(`Unblock #${issue}?\n\nRemoves the blocked label, sets Status Ready, and comments on the issue. The foreman may claim it on the next tick — fix whatever blocked it first.`)) return;
-    $("msg").textContent = `unblock #${issue}…`;
-    const j = await (await fetch("/api/unblock", { method: "POST", body: JSON.stringify({ issue }) })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
+
+  // ---- Waiting on: what the foreman resolves by itself, grouped by kind ----
+  const WAIT_GROUPS = [["ci", "CI"], ["review_cycle", "Review cycle"], ["dependency", "Dependencies"], ["other_host", "Another Mac"], ["phase_gate", "Phase gate"], ["human", "Fix on GitHub"]];
+  function renderWaiting(r) {
+    const rows = r.attention?.waitRows ?? [];
+    const issues = new Map((r.board?.issues ?? []).map((i) => [i.issue, i]));
+    const banners = bannerRows(r);
+    const clear = `<div class="banner ok"><span>Nothing stops new claims: no STOP file, preflight ok, ${esc(r.today?.count ?? 0)} of ${esc(r.today?.cap ?? 0)} sessions today</span></div>`;
+    const depState = (w) => {
+      const deps = [...w.detail.replace(/^.*waits on /, "").matchAll(/#(\d+)/g)].map((m) => Number(m[1]));
+      return deps.map((d) => `#${d} ${esc(issues.get(d)?.status ?? (issues.has(d) ? "off board" : "not open"))}`).join(" · ");
+    };
+    const row = (w) => `<div class="wt"><span class="k"></span><div><div class="t">${w.detail.startsWith(w.subject) ? `${subjectLink(w.subject)}${esc(w.detail.slice(w.subject.length))}` : esc(w.detail)}</div>${w.kind === "dependency" ? `<div class="s">${depState(w)}</div>` : ""}</div><span class="since">${w.since ? `since ${t(w.since)}` : ""}</span></div>`;
+    const groups = WAIT_GROUPS.map(([kind, title]) => group(title, "", "", rows.filter((w) => w.kind === kind).map(row))).join("");
+    const needs = r.attention?.needsYou ?? 0;
+    $("waitBody").innerHTML = `<div class="banners">${banners.length ? bannerHtml(banners) : clear}</div>${groups || '<div class="card empty">nothing else is pending</div>'}<div class="linkrow"><span>Items waiting on you are on the Needs you tab, not repeated here.</span><a href="#needs-you">Needs you · ${needs} →</a></div>`;
+  }
+
+  // ---- Board: every open issue, grouped under its epic ----
+  // UI state lives outside the renderer, so the 3 s re-render keeps the search, the filter, an
+  // open picker and an expanded done list exactly as the owner left them.
+  let boardQuery = "";
+  let boardFilter = "all";
+  let showDone = false;
+  const openPicker = { issue: null, kind: null };
+  const openDone = new Set();
+  const STATUS_CLASS = { Backlog: "", Ready: "ready", "In Progress": "progress", "In Review": "review", Done: "done" };
+  const FILTERS = [
+    ["all", "All", () => true],
+    ["Ready", "Ready", (i) => i.status === "Ready"],
+    ["In Progress", "In progress", (i) => i.status === "In Progress"],
+    ["In Review", "In review", (i) => i.status === "In Review"],
+    ["Backlog", "Backlog", (i) => i.status === "Backlog"],
+    ["blocked", "Blocked", (i) => i.blocked],
+    ["off", "Off board", (i) => i.status === null],
+  ];
+  const GROUP_STATE = { planning: ["Planning", "warn"], plan_waiting: ["Plan waiting", "warn"], building: ["Building", "acc"], signoff_waiting: ["Sign-off waiting", "ok"], not_started: ["Not started", ""] };
+  $("boardSearch").oninput = (e) => { boardQuery = e.target.value.trim().toLowerCase(); if (r) renderBoard(r); };
+  $("showDone").onchange = (e) => { showDone = e.target.checked; if (r) renderBoard(r); };
+  document.addEventListener("click", (e) => {
+    if (openPicker.issue !== null && !e.target.closest(".picker")) { openPicker.issue = null; if (r) renderBoard(r); }
+  });
+  // A daemon older than per-task effort reports no `effort`; its sessions run at the default.
+  const effortDefault = () => r?.effort?.default ?? "high";
+
+  function setTaskModel(issue, model, current) {
+    const what = model === "default" ? `the global model${current ? ` (drops ${current})` : ""}` : model;
+    if (!window.confirm(`Run every foreman session on #${issue} as ${what}?\n\nBuilder, reviewer and validator alike, outranking the model on the Session tab. A session running now keeps the model it started with; the issue's next session uses this.`)) return;
+    post("/api/task-model", { issue, model });
+  }
+  function setTaskEffort(issue, level, current) {
+    const what = level === effortDefault() ? `the default ${level} effort${current ? ` (drops ${current})` : ""}` : `${level} effort`;
+    if (!window.confirm(`Run every foreman session on #${issue} at ${what}?\n\nBuilder, reviewer and validator alike. A session running now keeps the effort it started with; the issue's next session uses this.`)) return;
+    post("/api/task-effort", { issue, effort: level });
+  }
+  function picker(i, kind) {
+    const isModel = kind === "model";
+    const value = isModel ? i.model ?? "default" : i.effort ?? effortDefault();
+    const set = isModel ? i.model !== null : i.effort !== null;
+    const options = isModel ? [...(r.model?.choices ?? []), "default"] : r.effort?.levels ?? [];
+    const open = openPicker.issue === i.issue && openPicker.kind === kind;
+    const menu = open
+      ? `<div class="menu">${options.map((o) => `<button type="button" data-pick="${esc(o)}" class="${o === value ? "on" : ""}">${esc(o)}${!isModel && o === effortDefault() ? "<small>default</small>" : ""}</button>`).join("")}</div>`
+      : "";
+    return `<div class="picker" data-issue="${esc(i.issue)}" data-kind="${kind}"><button type="button" class="${set ? `set${isModel ? "" : " eff"}` : ""}" aria-haspopup="true" aria-expanded="${open}">${esc(value)}</button>${menu}</div>`;
+  }
+  function hintsFor(i, nextClaim, pipe) {
+    const out = [];
+    if (i.openDependsOn.length) out.push(`waits on ${i.openDependsOn.map((d) => `#${d}`).join(", ")}`);
+    if (nextClaim === i.issue) out.push("next to claim");
+    const failed = pipe && ["build", "review", "validate"].find((s) => pipe.stages[s] === "failed");
+    if (failed) out.push(`${failed === "validate" ? "validator" : failed} failed${pipe.fixRound > 1 ? ` · fix round ${pipe.fixRound}` : ""}`);
+    return out.map((h) => `<span>${esc(h)}</span>`).join("");
+  }
+  function renderBoard(r) {
+    const all = r.board?.issues ?? [];
+    const groups = r.board?.groups ?? [];
+    const phases = new Map((r.board?.phases ?? []).map((p) => [p.epic, p]));
+    const pipeline = new Map((r.board?.pipeline ?? []).map((p) => [p.issue, p]));
+    const claim = (r.lastPlan ?? []).map((a) => /^claim#(\d+)$/.exec(a)).find(Boolean);
+    const nextClaim = claim ? Number(claim[1]) : null;
+    const match = (i) => !boardQuery || String(i.issue).includes(boardQuery) || i.title.toLowerCase().includes(boardQuery);
+    const filterFn = (FILTERS.find(([key]) => key === boardFilter) ?? FILTERS[0])[2];
+    const shown = all.filter((i) => match(i) && filterFn(i));
+    $("boardSeg").innerHTML = FILTERS.map(([key, label, fn]) => `<button type="button" data-filter="${esc(key)}" class="${key === boardFilter ? "on" : ""}">${label}<b>${all.filter(fn).length}</b></button>`).join("");
+    for (const b of $("boardSeg").querySelectorAll("button")) b.onclick = () => { boardFilter = b.dataset.filter; renderBoard(r); };
+    $("boardMeta").textContent = r.board ? `${all.length} open issues in ${groups.length} groups · read from the last tick, ${hm(r.board.at)}` : "";
+    const narrowed = boardQuery || boardFilter !== "all";
+    const cards = groups.map((g) => {
+      const rows = shown.filter((i) => i.group === g.key);
+      if (narrowed && !rows.length) return "";
+      const p = g.epic !== null ? phases.get(g.epic) : null;
+      const [stateLabel, stateCls] = g.state ? GROUP_STATE[g.state] ?? [g.state, ""] : [null, ""];
+      const facts = p
+        ? `<span class="mini"><span class="b"><i style="width:${p.tasksTotal ? Math.round((p.tasksDone / p.tasksTotal) * 100) : 0}%"></i></span>${p.tasksDone} of ${p.tasksTotal} done</span><span>${usd(p.spendUsd)} · ${p.sessions} sessions</span><span>${p.medianMergeMinutes === null ? "no merge yet" : `median ${mins(p.medianMergeMinutes)} claim→merge`}</span>`
+        : rows.length ? `<span>${rows.length} open</span>` : "<span>no tasks yet</span>";
+      const head = `<div class="eph"><div>${g.phase !== null ? `<div class="k">Phase ${esc(g.phase)}</div>` : ""}<div class="t">${g.epic !== null ? `<span class="num">${link("issues", g.epic)}</span>` : ""}${esc(g.title)}</div></div><div class="right">${stateLabel ? `<span class="tag ${stateCls}">${esc(stateLabel)}</span>` : ""}${g.paused ? '<span class="tag warn">Paused</span>' : ""}${g.kind === "epic" ? ownerButton(g.epic, g.paused ? "unpause" : "pause") : ""}</div><div class="facts">${facts}</div></div>`;
+      const table = rows.length
+        ? `<div class="tk head"><span>Issue</span><span>Status</span><span>PR</span><span>Model</span><span>Effort</span></div>${rows.map((i) => {
+            const labels = i.labels.map((l) => `<span class="lbl-chip${l === "blocked" ? " bad" : ""}">${esc(l)}</span>`).join("");
+            const status = i.status === null ? '<span class="st off">Off board</span>' : `<span class="st ${STATUS_CLASS[i.status] ?? ""}">${esc(i.status)}</span>`;
+            return `<div class="tk"><div><div class="tt"><span class="num">${link("issues", i.issue)}</span>${esc(i.title)}</div><div class="sub">${labels}${hintsFor(i, nextClaim, pipeline.get(i.issue))}</div></div>${status}<span class="pr mono">${i.pr ? link("pull", i.pr) : "–"}</span>${picker(i, "model")}${picker(i, "effort")}</div>`;
+          }).join("")}`
+        : "";
+      const done = showDone && g.doneTasks.length
+        ? `<div class="done-row"><button type="button" data-done="${esc(g.key)}">${openDone.has(g.key) ? "▾" : "▸"} ${g.doneTasks.length} done</button>${openDone.has(g.key) ? `<div class="nums">${g.doneTasks.map((n) => link("issues", n)).join("")}</div>` : ""}</div>`
+        : "";
+      return `<div class="card ep${g.kind === "closed" ? " closed" : ""}">${head}${table}${done}</div>`;
+    }).join("");
+    const el = $("boardBody");
+    el.innerHTML = cards || `<div class="card empty">${r.board ? "no open issues match" : "the board appears after the first tick"}</div>`;
+    for (const b of el.querySelectorAll("button[data-owner]")) b.onclick = () => ownerAct(Number(b.dataset.epic), b.dataset.owner);
+    for (const b of el.querySelectorAll("button[data-done]")) b.onclick = () => { openDone.has(b.dataset.done) ? openDone.delete(b.dataset.done) : openDone.add(b.dataset.done); renderBoard(r); };
+    for (const p of el.querySelectorAll(".picker")) {
+      const issue = Number(p.dataset.issue);
+      const kind = p.dataset.kind;
+      p.querySelector(":scope > button").onclick = () => {
+        const same = openPicker.issue === issue && openPicker.kind === kind;
+        openPicker.issue = same ? null : issue;
+        openPicker.kind = same ? null : kind;
+        renderBoard(r);
+      };
+      for (const o of p.querySelectorAll("button[data-pick]")) o.onclick = () => {
+        const row = all.find((i) => i.issue === issue);
+        openPicker.issue = null;
+        renderBoard(r);
+        if (kind === "model") { if (o.dataset.pick !== (row?.model ?? "default")) setTaskModel(issue, o.dataset.pick, row?.model ?? null); }
+        else if (o.dataset.pick !== (row?.effort ?? effortDefault())) setTaskEffort(issue, o.dataset.pick, row?.effort ?? null);
+      };
+    }
+  }
+
+  // ---- Session: spend and per-task cost history from sessions.log ----
+  let sessionRange = "all";
+  let showAllTasks = false;
+  let lastSessionKey = null;   // the newest session id the history was fetched for
+  let history = null;
+  let sessionSeq = 0;      // bumps per request, so a slow older response cannot overwrite a newer one
+  const openSessionRows = new Set();
+  // "claude-opus-5" → "opus": the repository's one-click names, from `r.model.choices`.
+  const family = (model) => (r?.model?.choices ?? []).find((c) => (model ?? "").includes(c)) ?? (model || "–");
+  const localDay = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  function rangeQuery() {
+    const today = new Date();
+    const back = (n) => localDay(new Date(today.getFullYear(), today.getMonth(), today.getDate() - n));
+    if (sessionRange === "today") return { from: localDay(today), to: localDay(today) };
+    if (sessionRange === "7") return { from: back(6), to: localDay(today) };
+    if (sessionRange === "30") return { from: back(29), to: localDay(today) };
+    if (sessionRange === "custom") return { from: $("rangeFrom").value || null, to: $("rangeTo").value || null };
+    return { from: null, to: null };
+  }
+  for (const b of $("rangeSeg").querySelectorAll("button")) b.onclick = () => {
+    sessionRange = b.dataset.range;
+    for (const x of $("rangeSeg").querySelectorAll("button")) x.classList.toggle("on", x === b);
+    $("customRange").hidden = sessionRange !== "custom";
+    showAllTasks = false;
+    loadSessions();
+  };
+  $("rangeFrom").onchange = () => loadSessions();
+  $("rangeTo").onchange = () => loadSessions();
+  async function loadSessions() {
+    const { from, to } = rangeQuery();
+    const q = new URLSearchParams();
+    if (from) q.set("from", from);
+    if (to) q.set("to", to);
+    const seq = ++sessionSeq;
+    try {
+      const res = await fetch(`/api/sessions?${q}`);
+      const j = await res.json();
+      if (seq !== sessionSeq) return;
+      if (!res.ok) { $("sessionBody").innerHTML = `<div class="card empty">${esc(j.error ?? "could not load the history")}</div>`; return; }
+      history = j;
+      lastSessionKey = r?.recent?.[0]?.sessionId ?? null;
+      renderSessions();
+    } catch { $("sessionBody").innerHTML = '<div class="card empty">could not load the history</div>'; }
+  }
+  const outcomeClass = (o) => (/^(pr_opened|approved|passed|phase_closed|plan_drafted)$/.test(o) ? "ok" : /^(blocked|failed|aborted|error_max_turns|interrupted)$/.test(o) ? "bad" : "warn");
+  // Past 120 days a bar per day is thinner than a pixel; seven days per bar keeps it readable.
+  function weekly(daily) {
+    const out = [];
+    for (let i = 0; i < daily.length; i += 7) {
+      const wk = daily.slice(i, i + 7);
+      out.push({ date: wk[0].date, spendUsd: wk.reduce((a, d) => a + d.spendUsd, 0), sessions: wk.reduce((a, d) => a + d.sessions, 0), week: true });
+    }
+    return out;
+  }
+  function dailyChart(days) {
+    if (!days.length) return '<div class="empty">no sessions in this range</div>';
+    const daily = days.length > 120 ? weekly(days) : days;
+    const max = Math.max(...daily.map((d) => d.spendUsd), 1);
+    const step = max > 400 ? 200 : max > 100 ? 50 : max > 20 ? 10 : 5;
+    const top = Math.ceil(max / step) * step;
+    const peak = daily.reduce((a, b) => (b.spendUsd > a.spendUsd ? b : a));
+    const lines = [];
+    for (let v = 0; v <= top; v += step) lines.push(`<div class="gridline" style="bottom:${(v / top) * 100}%"><span>$${v}</span></div>`);
+    const bars = daily.map((d) => `<i class="${d.spendUsd ? "" : "zero"}" style="height:${(d.spendUsd / top) * 100}%" title="${d.week ? "week of " : ""}${esc(d.date)}: ${usd(d.spendUsd)} · ${d.sessions} sessions">${d === peak && d.spendUsd ? `<span class="peak">${usd(d.spendUsd)}</span>` : ""}</i>`).join("");
+    const ticks = daily.length > 1 ? [0, Math.floor((daily.length - 1) / 2), daily.length - 1].map((i) => daily[i].date.slice(5)) : [daily[0].date.slice(5)];
+    return `<div class="plot">${lines.join("")}<div class="bars">${bars}</div></div><div class="xax">${ticks.map((x) => `<span>${esc(x)}</span>`).join("")}</div>`;
+  }
+  function renderSessions() {
+    const h = history;
+    if (!h) return;
+    const per = h.totals.sessions ? h.totals.spendUsd / h.totals.sessions : 0;
+    const kpi = (v, l) => `<div class="card kpi"><b>${v}</b><span>${l}</span></div>`;
+    const maxRole = Math.max(...h.byRole.map((x) => x.spendUsd), 1);
+    const roles = h.byRole.length
+      ? h.byRole.map((x) => `<div class="rl"><span>${esc(x.role)}</span><span class="b"><i style="width:${(x.spendUsd / maxRole) * 100}%"></i></span><span class="v">${usd(x.spendUsd)}</span></div>`).join("")
+      : '<div class="empty">none</div>';
+    const maxCost = Math.max(...h.byIssue.map((x) => x.costUsd), 1);
+    const shown = showAllTasks ? h.byIssue : h.byIssue.slice(0, 10);
+    const rows = shown.map((x) => {
+      const open = openSessionRows.has(x.issue);
+      const head = `<tr class="row" data-row="${esc(x.issue)}" tabindex="0"><td>${open ? "▾" : "▸"} <span class="num">${link("issues", x.issue)}</span>${x.title === `#${x.issue}` ? "" : esc(x.title)}</td><td class="roles-col">${x.roles.map((ro) => `<span class="tag">${esc(ro)}</span>`).join(" ")}</td><td class="n">${x.sessions}</td><td>${esc(x.lastAt.slice(0, 10))}</td><td><div class="costc"><span class="b"><i style="width:${(x.costUsd / maxCost) * 100}%"></i></span><span class="v">${usd(x.costUsd)}</span></div></td></tr>`;
+      const subs = open
+        ? x.entries.map((e) => `<tr class="sub"><td>${esc(e.t.slice(0, 16).replace("T", " "))}</td><td class="roles-col">${esc(e.role)} · ${esc(family(e.model))} · ${esc(e.turns)} turns</td><td class="n"><span class="oc ${outcomeClass(e.outcome)}">${esc(e.outcome)}</span></td><td><button type="button" class="ghost small" data-feed="${esc(e.sessionId)}">View feed</button></td><td class="n mono">${usd(e.costUsd)}</td></tr>`).join("")
+        : "";
+      return head + subs;
+    }).join("");
+    $("sessionBody").innerHTML = `<div class="kpis">${kpi(usd(h.totals.spendUsd), "spend")}${kpi(h.totals.sessions, "sessions")}${kpi(h.totals.issues, "tasks and epics")}${kpi(usd(per), "per session")}</div>
+      <div class="two"><div class="card ch"><h3>${h.daily.length > 120 ? "Weekly" : "Daily"} spend<small>${h.daily.length > 120 ? "weekly bars" : "local days"} · hover a bar for its sessions</small></h3>${dailyChart(h.daily)}</div><div class="card ch"><h3>By role</h3><div class="roles">${roles}</div></div></div>
+      <div class="sec"><div class="sec-h"><h3>Cost by task</h3><span>most expensive first · click a row for its sessions</span></div><div class="card">${h.byIssue.length
+        ? `<table class="costs"><thead><tr><th>Issue</th><th class="roles-col">Roles</th><th class="n">Sessions</th><th>Last run</th><th style="width:230px">Cost</th></tr></thead><tbody>${rows}</tbody></table>${h.byIssue.length > 10 ? `<div class="more"><button type="button" class="ghost" id="showAll">${showAllTasks ? "Show the top 10" : `Show all ${h.byIssue.length} →`}</button></div>` : ""}`
+        : '<div class="empty">no sessions in this range</div>'}</div></div>`;
+    for (const tr of $("sessionBody").querySelectorAll("tr.row")) {
+      const flip = () => { const n = Number(tr.dataset.row); openSessionRows.has(n) ? openSessionRows.delete(n) : openSessionRows.add(n); renderSessions(); };
+      tr.onclick = (e) => { if (!e.target.closest("a")) flip(); };
+      tr.onkeydown = (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); flip(); } };
+    }
+    for (const b of $("sessionBody").querySelectorAll("button[data-feed]")) b.onclick = (e) => { e.stopPropagation(); pinFeed(b.dataset.feed); };
+    const all = $("showAll");
+    if (all) all.onclick = () => { showAllTasks = !showAllTasks; renderSessions(); };
+  }
+  function pinFeed(sessionId) {
+    feedSession = sessionId;
+    feedPinned = true;
+    location.hash = "#dashboard";
+    loadFeed();
+  }
+
+  // The daemon's own controls: what the next session runs as, and how many may run today. Parking
+  // on the cap is the single most likely reason the foreman is doing nothing, so its count sits
+  // next to the buttons that raise it.
+  function setModel(model) {
+    if (!window.confirm(`Run foreman sessions as ${model}?\n\nA session running now keeps the model it started with; the next dispatch uses ${model}.`)) return;
+    post("/api/model", { model });
+  }
+  function setCap(cap) {
+    const what = cap === null ? "the value in foreman.json" : `${cap} sessions a day`;
+    if (!window.confirm(`Set the daily session cap to ${what}?\n\nEach session costs money; today's spend is on this card. Takes effect on the next tick.`)) return;
+    post("/api/cap", { maxSessionsPerDay: cap });
+  }
+  function renderDaemon(r) {
+    const m = r.model;
+    const c = r.cap;
+    const modelOpts = m ? (m.source === "override" ? [...m.choices, "default"] : m.choices) : [];
+    const capOpts = c ? (c.source === "override" ? [...c.choices, "default"] : c.choices) : [];
+    const b = r.budget;
+    $("daemonCard").innerHTML = `
+      <div><div class="k">Model for new sessions</div><div class="v2">${esc(m?.current ?? "–")}</div>${m?.source === "override" ? `<div class="note">override · foreman.json says ${esc(m.configured)}</div>` : ""}<div class="opts">${modelOpts.map((o) => `<button type="button" data-model="${esc(o)}" class="${o === m.current ? "on" : ""}">${esc(o === "default" ? `default (${m.configured})` : o)}</button>`).join("")}</div></div>
+      <div><div class="k">Daily session cap</div><div class="v2">${esc(r.today?.count ?? 0)} of ${esc(c?.current ?? r.today?.cap ?? 0)} today · ${usd(r.today?.spendUsd)}</div>${c?.source === "override" ? `<div class="note">override · foreman.json says ${esc(c.configured)}</div>` : ""}<div class="opts">${capOpts.map((o) => `<button type="button" data-cap="${esc(String(o))}" class="${o === c.current ? "on" : ""}">${esc(o === "default" ? `default (${c.configured})` : String(o))}</button>`).join("")}</div></div>
+      <div><div class="k">GitHub budget</div><div class="v2">${b ? `${b.remaining.toLocaleString("en-US")} of ${b.limit.toLocaleString("en-US")} points` : "–"}</div>${b ? `<div class="note">resets ${hm(b.resetAt)} · last tick ${esc(b.tickReads)} reads, ${esc(b.actionSpend)} by sessions, ${esc(b.betweenTicks)} elsewhere</div>` : ""}</div>
+      <div class="row2"><span>Last tick <b>${t(r.tick?.lastAt)}</b> · ${r.tick?.preflight ? (r.tick.preflight.ok ? "preflight ok" : `preflight failed: ${esc(r.tick.preflight.reason)}`) : "no tick yet"}</span><span>Next tick <b>${r.tick?.blockedBySession ? "after the session" : t(r.tick?.nextAt)}</b></span><span>Backoff <b>${esc(r.tick?.consecutiveFailures ?? 0)}</b></span><span>launchd <b>${r.launchdInstalled ? "installed" : "not installed"}</b></span>${r.lastPlan ? `<span>Plan <b>${esc(r.lastPlan.join(", "))}</b></span>` : ""}</div>`;
+    for (const x of $("daemonCard").querySelectorAll("button[data-model]")) x.onclick = () => { if (x.dataset.model !== m.current) setModel(x.dataset.model); };
+    for (const x of $("daemonCard").querySelectorAll("button[data-cap]")) x.onclick = () => { if (x.dataset.cap !== String(c.current)) setCap(x.dataset.cap === "default" ? null : Number(x.dataset.cap)); };
   }
 
   async function refresh() {
-    let r;
     try { r = await (await fetch("/api/status")).json(); }
-    catch { $("daemon").textContent = "page offline"; $("daemon").className = "badge CRASHED"; return; }
+    catch {
+      $("pill").textContent = "page offline"; $("pill").className = "pill-state offline";
+      $("banners").innerHTML = bannerHtml([{ cls: "bad", text: "page offline: the daemon is not answering", fix: "what you see is from the last answer" }]);
+      return;
+    }
     repo = r.repo ?? repo;
-    $("host").textContent = r.host;
-    $("daemon").textContent = `${r.daemon}${r.pid ? ` · pid ${r.pid}` : ""}${r.uptimeMinutes != null ? ` · up ${mins(r.uptimeMinutes)}` : ""}`;
-    $("daemon").className = `badge ${r.daemon}`;
-    $("stopflag").hidden = !r.stopPresent;
-    $("stalled").hidden = !r.current?.stalled;
-    if (r.current?.stalled) $("stalled").textContent = `stalled · no output ${mins(r.current.silentMinutes)}`;
-    $("hmeta").textContent = r.daemon === "UNKNOWN" ? "no state.json: restart the daemon" : "";
+    renderShell(r);
+    $("banners").innerHTML = bannerHtml(bannerRows(r));
     renderNow(r);
-    modelChoices = r.model?.choices ?? [];
-    effort = r.effort ?? effort;
     renderPipeline(r.board?.pipeline ?? []);
-    renderPhases(r.board?.phases ?? []);
-    renderOwner(r.board?.owner ?? []);
-    renderNeedsYou(r.board?.needsYou ?? []);
-    renderWaiting(r.board?.waiting ?? []);
-    renderTick(r);
-    if (!feedPinned) feedSession = r.current?.sessionId ?? r.recent[0]?.sessionId ?? null;
-    renderRecent(r.recent);
+    renderNeedsYou(r);
+    renderWaiting(r);
+    renderBoard(r);
+    renderDaemon(r);
+    // The history only changes when a session finishes, so refetch then, not on every poll.
+    if (tab === "session" && (r.recent?.[0]?.sessionId ?? null) !== lastSessionKey) loadSessions();
+    if (!feedPinned) feedSession = r.current?.sessionId ?? r.recent?.[0]?.sessionId ?? null;
     loadFeed();
   }
 
-  const pending = {};
-  function armed(cmd, btn) {
-    if (pending[cmd]) { clearTimeout(pending[cmd]); pending[cmd] = null; btn.classList.remove("confirm"); btn.textContent = cmd[0].toUpperCase() + cmd.slice(1); return true; }
-    btn.classList.add("confirm"); btn.textContent = `Confirm ${cmd}?`;
-    pending[cmd] = setTimeout(() => { pending[cmd] = null; btn.classList.remove("confirm"); btn.textContent = cmd[0].toUpperCase() + cmd.slice(1); }, 5000);
-    return false;
-  }
-  async function act(cmd) {
-    $("msg").textContent = `${cmd}…`;
-    const j = await (await fetch(`/api/${cmd}`, { method: "POST" })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
-  }
-  for (const cmd of ["stop", "abort"]) $(cmd).onclick = () => { if (armed(cmd, $(cmd))) act(cmd); };
-  $("go").onclick = () => act("go");
-  // Board edits made by hand (Status, item-add, labels) reach the cards on the next tick; this
-  // asks for that tick now instead of waiting out the poll interval.
-  $("refresh").onclick = async () => {
-    $("msg").textContent = "refreshing…";
-    const j = await (await fetch("/api/refresh", { method: "POST" })).json();
-    $("msg").textContent = j.ok ? j.message : `error: ${j.error}`;
-    refresh();
-  };
-  $("next").onclick = async () => {
-    $("nextOut").hidden = false; $("nextOut").textContent = "computing…";
-    const j = await (await fetch("/api/next")).json();
-    const lines = j.actions.map((a, i) => (i === j.stopAt ? `${a}  ← would stop here` : a));
-    $("nextOut").textContent = [`plan   ${lines.join(", ")}`, ...j.explain.map((e) => `       ${e}`), "", ...j.prs.map((p) => `PR #${p.pr} → ${p.issue == null ? "?" : `#${p.issue}`}  status ${p.status}  checks ${p.checks}  labels [${p.labels.join(",")}]   ${p.reason === "eligible to merge" ? p.reason : `not eligible: ${p.reason}`}`)].join("\n");
-  };
-  setInterval(() => {
-    for (const el of document.querySelectorAll("[data-at]")) el.textContent = ago(el.dataset.at);
-    for (const el of document.querySelectorAll("[data-waited]")) el.textContent = waited(el.dataset.waited);
-  }, 1000);
+  setInterval(() => { for (const el of document.querySelectorAll("[data-at]")) el.textContent = ago(el.dataset.at); }, 1000);
+  route();
   refresh();
   setInterval(refresh, 3000);
 </script>
diff --git a/src/web.test.ts b/src/web.test.ts
index b73a751..fd38763 100644
--- a/src/web.test.ts
+++ b/src/web.test.ts
@@ -5,6 +5,7 @@ import { join } from "node:path";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 import type { FeedEntry } from "./feed.ts";
 import type { NextReport } from "./next.ts";
+import type { SessionRange } from "./session-history.ts";
 import { CAP_CHOICES, EFFORT_LEVELS, MODEL_CHOICES } from "./state-file.ts";
 import type { StatusReport } from "./status.ts";
 import {
@@ -37,6 +38,9 @@ const report: StatusReport = {
   lastPlan: ["plan#10"],
   board: null,
   budget: null,
+  attention: { needsYou: 0, waiting: 0, banners: [], waitRows: [] },
+  instance: "widgets",
+  theme: { current: "indigo", choices: ["indigo", "violet", "teal", "mono"] },
   recent: [],
   today: { count: 0, cap: 20, spendUsd: 0 },
 };
@@ -55,6 +59,8 @@ describe("web server", () => {
   const unblocked: number[] = [];
   const taskModels: string[] = [];
   const taskEfforts: string[] = [];
+  const themes: string[] = [];
+  const ranges: SessionRange[] = [];
   let refreshes = 0;
   const sid = "144ba520-6c0f-4195-ae18-c67de1443b31";
   const entries: FeedEntry[] = Array.from({ length: 5 }, (_, i) => ({
@@ -78,7 +84,15 @@ describe("web server", () => {
       return `did ${action} on #${epic}`;
     },
     ownerItems: () => [
-      { epic: 124, title: "Phase 0.5", phase: 0, detail: "d", actions: ["sign_off", "pause"] },
+      {
+        epic: 124,
+        title: "Phase 0.5",
+        phase: 0,
+        detail: "d",
+        actions: ["sign_off", "pause"],
+        since: null,
+        review: null,
+      },
     ],
     needsYouItems: () => [
       {
@@ -87,6 +101,8 @@ describe("web server", () => {
         labels: ["blocked"],
         since: "2026-09-03T03:00:00Z",
         itemId: "PVTI_5",
+        reviewOf: null,
+        phaseReview: false,
       },
       {
         issue: 171,
@@ -94,6 +110,8 @@ describe("web server", () => {
         labels: ["needs-owner"],
         since: "2026-09-03T10:00:00Z",
         itemId: null,
+        reviewOf: null,
+        phaseReview: false,
       },
     ],
     unblock: async (issue) => {
@@ -104,6 +122,20 @@ describe("web server", () => {
       models.push(model);
       return `next session runs ${model}`;
     },
+    sessions: (range) => {
+      ranges.push(range);
+      return {
+        ...range,
+        totals: { spendUsd: 0, sessions: 0, issues: 0 },
+        daily: [],
+        byRole: [],
+        byIssue: [],
+      };
+    },
+    setTheme: async (theme) => {
+      themes.push(theme);
+      return `theme is now ${theme}`;
+    },
     setCap: async (cap) => {
       caps.push(cap);
       return `cap is now ${cap ?? "the configured value"}`;
@@ -112,16 +144,11 @@ describe("web server", () => {
       refreshes += 1;
       return "project re-read; tick requested";
     },
-    phaseTasks: () => [
-      { issue: 101, title: "One", status: "Ready", closed: false, model: null, effort: null },
-      {
-        issue: 102,
-        title: "Two",
-        status: "In Progress",
-        closed: false,
-        model: "sonnet",
-        effort: null,
-      },
+    pickerTasks: () => [
+      { issue: 101, model: null, effort: null },
+      { issue: 102, model: "sonnet", effort: null },
+      // On the Board tab but not on the project board: still a picker target.
+      { issue: 103, model: null, effort: null },
     ],
     setTaskModel: async (issue, model) => {
       taskModels.push(`${issue} ${model}`);
@@ -240,6 +267,33 @@ describe("web server", () => {
     expect((await fetch(`${base}/api/model`)).status).toBe(405);
     expect(models).toEqual(["sonnet", "claude-haiku-4-5-20251001"]);
   });
+  it("serves the session history for a valid range and refuses a bad one", async () => {
+    const all = await fetch(`${base}/api/sessions`);
+    expect(all.status).toBe(200);
+    expect((await all.json()).totals).toEqual({ spendUsd: 0, sessions: 0, issues: 0 });
+    expect((await fetch(`${base}/api/sessions?from=2026-10-01&to=2026-10-26`)).status).toBe(200);
+    const bad = await fetch(`${base}/api/sessions?from=nope`);
+    expect(bad.status).toBe(400);
+    expect(await bad.json()).toEqual({ ok: false, error: "bad range" });
+    expect((await fetch(`${base}/api/sessions?from=2026-10-27&to=2026-10-01`)).status).toBe(400);
+    expect(ranges).toEqual([
+      { from: null, to: null },
+      { from: "2026-10-01", to: "2026-10-26" },
+    ]);
+  });
+  it("sets the page theme to one of the four, and nothing else", async () => {
+    const post = (body: unknown) =>
+      fetch(`${base}/api/theme`, { method: "POST", body: JSON.stringify(body) });
+    const ok = await post({ theme: "violet" });
+    expect(ok.status).toBe(200);
+    expect(await ok.json()).toEqual({ ok: true, message: "theme is now violet" });
+    const bad = await post({ theme: "pink" });
+    expect(bad.status).toBe(400);
+    expect(await bad.json()).toEqual({ ok: false, error: "bad theme" });
+    expect((await post({})).status).toBe(400);
+    expect((await fetch(`${base}/api/theme`)).status).toBe(405);
+    expect(themes).toEqual(["violet"]);
+  });
   it("raises the daily cap, and refuses anything that is not a sane session count", async () => {
     const post = (body: unknown) =>
       fetch(`${base}/api/cap`, { method: "POST", body: JSON.stringify(body) });
@@ -264,15 +318,18 @@ describe("web server", () => {
     expect(ok.status).toBe(200);
     expect(await ok.json()).toEqual({ ok: true, message: "#101 runs as sonnet" });
     expect((await post({ issue: 102, model: "default" })).status).toBe(200);
+    expect((await post({ issue: 103, model: "haiku" })).status).toBe(200);
     // A label has to exist in the repo, so unlike /api/model only the one-click names pass.
     expect((await post({ issue: 101, model: "claude-haiku-4-5-20251001" })).status).toBe(400);
     expect((await post({ issue: 101, model: "--dangerously-skip-permissions" })).status).toBe(400);
     // Not a task of any phase on the board: refused before it reaches GitHub.
-    expect((await post({ issue: 999, model: "sonnet" })).status).toBe(400);
+    const absent = await post({ issue: 999, model: "sonnet" });
+    expect(absent.status).toBe(400);
+    expect(await absent.json()).toEqual({ ok: false, error: "#999 is not a task on the board" });
     expect((await post({ issue: "101", model: "sonnet" })).status).toBe(400);
     expect((await post({ model: "sonnet" })).status).toBe(400);
     expect((await fetch(`${base}/api/task-model`)).status).toBe(405);
-    expect(taskModels).toEqual(["101 sonnet", "102 default"]);
+    expect(taskModels).toEqual(["101 sonnet", "102 default", "103 haiku"]);
   });
   it("sets a task's effort when the board lists the task, and only Claude Code's levels", async () => {
     const post = (body: unknown) =>
@@ -281,6 +338,7 @@ describe("web server", () => {
     expect(ok.status).toBe(200);
     expect(await ok.json()).toEqual({ ok: true, message: "#101 runs at xhigh effort" });
     expect((await post({ issue: 102, effort: "default" })).status).toBe(200);
+    expect((await post({ issue: 103, effort: "low" })).status).toBe(200);
     // The effort reaches `claude` as argv: anything but a level is refused.
     expect((await post({ issue: 101, effort: "ultra" })).status).toBe(400);
     expect((await post({ issue: 101, effort: "--dangerously-skip-permissions" })).status).toBe(400);
@@ -288,7 +346,7 @@ describe("web server", () => {
     expect((await post({ issue: 999, effort: "low" })).status).toBe(400);
     expect((await post({ effort: "low" })).status).toBe(400);
     expect((await fetch(`${base}/api/task-effort`)).status).toBe(405);
-    expect(taskEfforts).toEqual(["101 xhigh", "102 default"]);
+    expect(taskEfforts).toEqual(["101 xhigh", "102 default", "103 low"]);
   });
   it("unblocks an issue the board lists as blocked", async () => {
     const r = await fetch(`${base}/api/unblock`, {
@@ -334,9 +392,18 @@ describe("web server with webAuth", () => {
     needsYouItems: () => [],
     unblock: async () => "",
     setModel: async () => "",
+    sessions: () => ({
+      from: null,
+      to: null,
+      totals: { spendUsd: 0, sessions: 0, issues: 0 },
+      daily: [],
+      byRole: [],
+      byIssue: [],
+    }),
+    setTheme: async () => "",
     setCap: async () => "",
     refresh: async () => "",
-    phaseTasks: () => [],
+    pickerTasks: () => [],
     setTaskModel: async () => "",
     modelChoices: () => [],
     setTaskEffort: async () => "",
@@ -479,9 +546,18 @@ describe("web server with webHosts", () => {
     needsYouItems: () => [],
     unblock: async () => "",
     setModel: async () => "",
+    sessions: () => ({
+      from: null,
+      to: null,
+      totals: { spendUsd: 0, sessions: 0, issues: 0 },
+      daily: [],
+      byRole: [],
+      byIssue: [],
+    }),
+    setTheme: async () => "",
     setCap: async () => "",
     refresh: async () => "",
-    phaseTasks: () => [],
+    pickerTasks: () => [],
     setTaskModel: async () => "",
     modelChoices: () => [],
     setTaskEffort: async () => "",
@@ -550,75 +626,141 @@ describe("web server with webHosts", () => {
 });
 
 describe("web.html", () => {
-  it("has the five sections and escapes through esc()", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    for (const id of [
-      "now",
-      "waiting",
-      "owner",
-      "needsYou",
-      "phases",
-      "pipeline",
-      "feed",
-      "recent",
-      "tick",
-    ])
-      expect(html).toContain(`id="${id}"`);
+  const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
+
+  it("routes five tabs by location.hash", () => {
+    for (const tab of ["dashboard", "needs-you", "waiting", "board", "session"]) {
+      expect(html).toContain(`data-tab="${tab}"`);
+      expect(html).toContain(`href="#${tab}"`);
+    }
+    expect(html).toContain("location.hash");
+  });
+  it("carries the four themes, light and dark, with readable buttons", () => {
+    for (const t of ["indigo", "violet", "teal", "mono"])
+      expect(html).toContain(`[data-theme="${t}"]`);
+    for (const hex of ["#4263EB", "#6E56CF", "#22B8CF", "#EDEDEF", "#3B5BDB", "#0B7285", "#5B8DEF"])
+      expect(html).toContain(hex);
+    expect(html).toContain("prefers-color-scheme");
+    expect(html).toContain("@container");
+    expect(html).toContain('post("/api/theme"');
+  });
+  it("renders the dashboard from the status report and escapes through esc()", () => {
     expect(html).toContain("const esc =");
+    expect(html).toContain("r.attention");
+    expect(html).toContain("r.instance");
+    expect(html).toContain('r.nowPhase === "between_ticks"');
+    expect(html).toContain('label: "between ticks"');
+    expect(html).toContain('r.nowPhase === "parked"');
     expect(html).toContain("/api/feed?session=");
-  });
-  it("shows phase progress and puts model and turns next to each session's cost", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain("renderPhases(r.board?.phases ?? [])");
-    expect(html).toContain("claim→merge");
-    expect(html).toContain(">no approved phase in flight<");
-    expect(html).toContain("esc(family(e.model))");
-    expect(html).toContain("e.turns ?? 0");
-  });
-  it("offers the model choices and confirms before POSTing one", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain('rows.push(["model", modelControl(r.model)])');
-    expect(html).toContain("window.confirm(`Run foreman sessions as ");
-    expect(html).toContain('data-model="');
-    expect(html).toContain('fetch("/api/model"');
-  });
-  it("lists each phase's tasks with model buttons and confirms before POSTing one", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain("renderTasks(");
-    expect(html).toContain('data-task-model="');
+    expect(html).toContain('fetch("/api/next")');
+    expect(html).toContain('post("/api/refresh")');
+    expect(html).toContain(`Confirm $${"{cmd}"}?`);
+    expect(html).toContain("Back to live");
+  });
+  it("puts every reason the foreman is idle in a banner", () => {
+    expect(html).toContain("no state.json: restart the daemon");
+    expect(html).toContain("run ctl abort");
+    expect(html).toContain("no output for");
+    expect(html).toContain("r.attention?.banners");
+  });
+  it("no longer has the old right-hand cards", () => {
+    for (const id of ["tick", "recent", "phases", "owner"])
+      expect(html).not.toContain(`id="${id}"`);
+  });
+  it("groups Needs you by the action the owner takes, in order", () => {
+    const at = [
+      "Approve a plan",
+      "Sign off a phase",
+      "Ready to plan",
+      "Unblock",
+      "Answer or close",
+    ].map((g) => html.indexOf(`"${g}"`));
+    expect(at.every((i) => i > 0)).toBe(true);
+    expect([...at].sort((a, b) => a - b)).toEqual(at);
+    expect(html).toContain("epic already closed");
+    expect(html).toContain("#287A3A");
+    expect(html).toContain("button.approve");
+    expect(html).toContain("button.signoff");
+    expect(html).toContain("button.plan");
+  });
+  it("keeps every owner gate's confirm text and endpoint", () => {
+    expect(html).toContain(`Sign off #$${"{n}"}?`);
+    expect(html).toContain("Approve the plan on #");
+    expect(html).toContain(`Start planning #$${"{n}"}?`);
+    expect(html).toContain("window.confirm(`Unblock #");
+    expect(html).toContain('post("/api/owner"');
+    expect(html).toContain('post("/api/unblock"');
+  });
+  it("lists Waiting on rows by kind and points human waits at Needs you", () => {
+    expect(html).toContain("Nothing stops new claims");
+    expect(html).toContain("Fix on GitHub");
+    expect(html).toContain("r.attention?.waitRows");
+    expect(html).toContain('href="#needs-you"');
+  });
+  it("lists every board issue by group with a status filter, off board included", () => {
+    expect(html).toContain("r.board?.groups");
+    expect(html).toContain("r.board?.issues");
+    expect(html).toContain("Off board");
+    expect(html).toContain("Show done");
+    // Group titles come from the server and are escaped like everything else.
+    expect(html).toContain("esc(g.title)");
+  });
+  it("offers model and effort pickers that confirm before POSTing", () => {
     expect(html).toContain("window.confirm(`Run every foreman session on #");
-    expect(html).toContain('fetch("/api/task-model"');
-    // Pipeline rows show the override when one is set.
-    expect(html).toContain("p.model ?");
-  });
-  it("lists each phase's tasks with effort buttons and confirms before POSTing one", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain('data-task-effort="');
     expect(html).toContain("A session running now keeps the effort it started with");
-    expect(html).toContain('fetch("/api/task-effort"');
-    expect(html).toContain("p.effort ?");
-  });
-  it("renders the Now card from nowPhase, not from the absence of a session", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain('r.nowPhase === "between_ticks"');
-    expect(html).toContain('label: "between ticks"');
-    expect(html).toContain(".tag.phase_gate");
+    expect(html).toContain('post("/api/task-model"');
+    expect(html).toContain('post("/api/task-effort"');
+    expect(html).toContain('ownerButton(g.epic, g.paused ? "unpause" : "pause")');
+  });
+  it("keeps Board UI state across the 3 s re-render", () => {
+    for (const v of [
+      "let boardQuery",
+      "let boardFilter",
+      "let showDone",
+      "const openPicker",
+      "const openDone",
+    ])
+      expect(html).toContain(v);
+  });
+  it("loads the Session tab's history by range and offers each session's feed", () => {
+    expect(html).toContain("fetch(`/api/sessions");
+    for (const label of [">Today<", ">7 days<", ">30 days<", ">All<", ">Custom<"])
+      expect(html).toContain(label);
+    expect(html).toContain("View feed");
+    expect(html).toContain("pinFeed(");
+    expect(html).toContain("Show all");
+    expect(html).toContain("const openSessionRows");
+  });
+  it("keeps the model and cap controls, with their confirm texts, on the Session tab", () => {
+    expect(html).toContain(`window.confirm(\`Run foreman sessions as $${"{model}"}?`);
+    expect(html).toContain("Set the daily session cap to");
+    expect(html).toContain('post("/api/model"');
+    expect(html).toContain('post("/api/cap"');
+    expect(html).toContain("GitHub budget");
+    expect(html).toContain("launchd");
+  });
+  it("bounds the custom range inputs and drops a stale history response", () => {
+    expect(html).toContain('min="2000-01-01" max="2099-12-31"');
+    expect(html).toContain("const seq = ++sessionSeq");
+    expect(html).toContain("if (seq !== sessionSeq) return");
+  });
+  it("keeps the daemon's state visible at phone width and when the page is offline", () => {
+    expect(html).not.toContain(".side .hd .psub, .side .hd .pill-state { display: none; }");
+    expect(html).toContain("the daemon is stopped");
+    expect(html).toContain("page offline: the daemon is not answering");
+    // The strip keeps its own height on a short page instead of sharing the viewport with main.
+    expect(html).toContain(
+      ".app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }",
+    );
   });
-  it("lists the Needs you rows and confirms before POSTing an unblock", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain("renderNeedsYou(r.board?.needsYou ?? [])");
-    expect(html).toContain("window.confirm(`Unblock #");
-    expect(html).toContain('data-unblock="');
-    expect(html).toContain('fetch("/api/unblock"');
-    expect(html).toContain(">nothing<");
+  it("keeps a long daily chart inside its card", () => {
+    expect(html).toContain(
+      ".plot { position: relative; height: 170px; margin-left: 44px; margin-top: 14px; overflow: hidden; }",
+    );
+    expect(html).toContain("weekly");
   });
-  it("names the parked reason and offers the cap next to today's count", () => {
-    const html = readFileSync(join(import.meta.dirname, "web.html"), "utf8");
-    expect(html).toContain('r.nowPhase === "parked"');
-    expect(html).toContain('label: "parked"');
-    expect(html).toContain("preflight?.reason");
-    expect(html).toContain("capControl(r.cap)");
-    expect(html).toContain('data-cap="');
-    expect(html).toContain('fetch("/api/cap"');
+  it("escapes clock times, which can come from issue comments", () => {
+    expect(html).toContain("const t = (iso) => (iso ? esc(");
+    expect(html).toContain("const hm = (iso) => (iso ? esc(");
   });
 });
diff --git a/src/web.ts b/src/web.ts
index 3e6318f..b1e8554 100644
--- a/src/web.ts
+++ b/src/web.ts
@@ -8,6 +8,7 @@ import type { WebAuth } from "./config.ts";
 import { FEED_LIMIT_DEFAULT, type FeedEntry, isSessionId } from "./feed.ts";
 import { log } from "./log.ts";
 import type { NextReport } from "./next.ts";
+import { parseRange, type SessionHistory, type SessionRange } from "./session-history.ts";
 import {
   CapSchema,
   type EffortChoice,
@@ -18,11 +19,12 @@ import {
   type OwnerAction,
   OwnerActionSchema,
   type OwnerItem,
-  type PhaseTask,
   type TaskModelChoice,
   TaskModelChoiceSchema,
 } from "./state-file.ts";
 import type { StatusReport } from "./status.ts";
+import type { PickerTask } from "./task-model.ts";
+import { type ThemeName, ThemeSchema } from "./theme.ts";
 
 export type WebCommand = "stop" | "abort" | "go";
 
@@ -52,17 +54,21 @@ export interface WebDeps {
   unblock: (issue: number) => Promise<string>;
   /** Sets the model the next dispatch uses; the name has already passed `ModelSchema`. */
   setModel: (model: string) => Promise<string>;
+  /** Spend and sessions from `sessions.log` over a range already checked by `parseRange`. */
+  sessions: (range: SessionRange) => SessionHistory;
+  /** Saves the page's color theme for this instance; the name has already passed `ThemeSchema`. */
+  setTheme: (theme: ThemeName) => Promise<string>;
   /** Sets the daily session cap the next tick enforces; null clears the override. */
   setCap: (maxSessionsPerDay: number | null) => Promise<string>;
   /** Drops the cached project board and wakes the loop, so the page shows the board as it is now. */
   refresh: () => Promise<string>;
-  /** The open tasks of every phase on the board, as of the last tick; the task-model allowlist. */
-  phaseTasks: () => PhaseTask[];
-  /** Swaps the issue's `model:<name>` label; only called for a task `phaseTasks` lists. */
+  /** Every open issue the Board tab lists, as of the last tick; the model/effort allowlist. */
+  pickerTasks: () => PickerTask[];
+  /** Swaps the issue's `model:<name>` label; only called for an issue `pickerTasks` lists. */
   setTaskModel: (issue: number, model: TaskModelChoice) => Promise<string>;
   /** The repo's configured `models`; the task-model allowlist beyond `MODEL_DEFAULT`. */
   modelChoices: () => string[];
-  /** Swaps the issue's `effort:<level>` label; only called for a task `phaseTasks` lists. */
+  /** Swaps the issue's `effort:<level>` label; only called for an issue `pickerTasks` lists. */
   setTaskEffort: (issue: number, effort: EffortChoice) => Promise<string>;
   /** Page HTML; defaults to src/web.html. Injectable for tests. */
   html?: string;
@@ -133,6 +139,8 @@ const TaskEffortRequestSchema = z.object({
 // fat-fingered 100000 cannot quietly uncap the Mac's daily spend.
 const CapRequestSchema = z.object({ maxSessionsPerDay: CapSchema.nullable() });
 
+const ThemeRequestSchema = z.object({ theme: ThemeSchema });
+
 /** Reads a small JSON body; anything unparsable (or over 8 KB) resolves to null. */
 async function readJson(req: http.IncomingMessage): Promise<unknown> {
   const chunks: Buffer[] = [];
@@ -189,6 +197,11 @@ export function createWebServer(d: WebDeps): http.Server {
           Number(u.searchParams.get("limit") ?? FEED_LIMIT_DEFAULT) || FEED_LIMIT_DEFAULT;
         return json(res, 200, { session, entries: d.feed(session, limit) });
       }
+      if (req.method === "GET" && url === "/api/sessions") {
+        const range = parseRange(u.searchParams.get("from"), u.searchParams.get("to"));
+        if (!range) return json(res, 400, { ok: false, error: "bad range" });
+        return json(res, 200, d.sessions(range));
+      }
       if (url === "/api/owner") {
         if (req.method !== "POST") return json(res, 405, { ok: false, error: "POST only" });
         const parsed = OwnerRequestSchema.safeParse(await readJson(req));
@@ -227,7 +240,7 @@ export function createWebServer(d: WebDeps): http.Server {
         if (!parsed.success) return json(res, 400, { ok: false, error: "bad request" });
         const { issue, model } = parsed.data;
         // Same allowlist pattern as /api/owner: only a task the board lists under a phase.
-        if (!d.phaseTasks().some((t) => t.issue === issue))
+        if (!d.pickerTasks().some((t) => t.issue === issue))
           return json(res, 400, { ok: false, error: `#${issue} is not a task on the board` });
         // TaskModelChoiceSchema now accepts any well-formed name; the repo's configured models
         // are the actual allowlist, checked here so a typo'd model does not reach a label.
@@ -241,10 +254,16 @@ export function createWebServer(d: WebDeps): http.Server {
         // An effort reaches `claude` as argv, so only Claude Code's own levels get past here.
         if (!parsed.success) return json(res, 400, { ok: false, error: "bad request" });
         const { issue, effort } = parsed.data;
-        if (!d.phaseTasks().some((t) => t.issue === issue))
+        if (!d.pickerTasks().some((t) => t.issue === issue))
           return json(res, 400, { ok: false, error: `#${issue} is not a task on the board` });
         return json(res, 200, { ok: true, message: await d.setTaskEffort(issue, effort) });
       }
+      if (url === "/api/theme") {
+        if (req.method !== "POST") return json(res, 405, { ok: false, error: "POST only" });
+        const parsed = ThemeRequestSchema.safeParse(await readJson(req));
+        if (!parsed.success) return json(res, 400, { ok: false, error: "bad theme" });
+        return json(res, 200, { ok: true, message: await d.setTheme(parsed.data.theme) });
+      }
       if (url === "/api/cap") {
         if (req.method !== "POST") return json(res, 405, { ok: false, error: "POST only" });
         const parsed = CapRequestSchema.safeParse(await readJson(req));