diff --git a/.gitignore b/.gitignore
index ca12394b..f3fabc00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,3 +52,6 @@ node_modules/
 
 # UI verification screenshots (regenerated by pnpm test:ui)
 .ui-artifacts/
+
+# Claude Code local config
+CLAUDE.local.md
diff --git a/MAINTAINER.md b/MAINTAINER.md
index 92948b37..7f3cc986 100644
--- a/MAINTAINER.md
+++ b/MAINTAINER.md
@@ -18,7 +18,7 @@ release this kit. User-facing docs live in [README.md](README.md); this file is
 | Module system | **ESM only** (`.mjs`); `.cjs` reserved for the statusline template + its test | `"type": "module"` in `package.json` |
 | Runtime deps | **Zero** | Uses `node:` builtins only — `node:sqlite`, `node:test`, `node:util` (`parseArgs`), `node:child_process`, `node:fs`. Keeps installs instant and supply-chain surface tiny |
 | Node | **≥ 22** (`engines.node`) | `node:sqlite` + `node --test` need it. CI matrix covers 22 / 24 / 26 |
-| Package manager (dev) | **pnpm** pinned via `packageManager: pnpm@11.13.0` | CI uses `pnpm/action-setup` which reads that field — don't drift it casually |
+| Package manager (dev) | **pnpm** pinned via `packageManager: pnpm@11.17.0` | CI uses `pnpm/action-setup` which reads that field — don't drift it casually |
 | Package manager (target) | **npm** | The kit heals `npm root -g` trees; `lib/heal.mjs` shells `npm install -g` |
 | Version source of truth | `package.json` `version` **only** | `bin/agentic-kit.mjs --version` reads it at runtime; no version string is duplicated anywhere else in source |
 
@@ -55,6 +55,8 @@ src/
     health-history.mjs   # regression ring appended by sync, read by status
     dashboard-server.mjs # read-only localhost dashboard (shells `ak status --json`)
     admin-server.mjs     # maintainer admin: loopback server, per-session token auth, page assembly (ADR-0007)
+    admin-styles.mjs     # admin presentation: dashboard-aligned dark/light design tokens
+    admin-theme.mjs      # embedded theme controller; shares the dashboard preference key
     admin-collect.mjs    # admin's server-side GitHub/npm fan-out → typed payload (injectable fetchers)
     admin-model.mjs      # PURE admin number model — imports nothing; embedded in the page AND node-tested
     admin-view.mjs       # admin browser controller (embedded into the page; not node-imported)
diff --git a/README.md b/README.md
index fc04d3ff..eeecac88 100644
--- a/README.md
+++ b/README.md
@@ -69,8 +69,8 @@ What the verbs cover:
 | **setup** | Installs/updates ruflo + agentic-qe + the **agentdb** CLI globally (handling npm ≥11.17's `allow-scripts` so natives build; agentdb is pinned to ruflo's bundled version so the shared learning store stays coherent), installs the **RuvNet Brain** (an offline knowledge base over the rUv stack, powering the `search_ruvnet` MCP — a ~2 GB one-time download, prompted; skip with `--no-ruvnet-brain`), deploys the token-audit skill, merges the managed guidance blocks into the machine-wide guidance files (`~/.claude/CLAUDE.md`, plus `~/.codex/AGENTS.md` on codex machines), offers one-time MCP registration (user scope, with a tool-family picker), and — inside a repo — initializes the project: sanitized `ruflo init`, absolute memory-path pin, a **verified** store→disk write, statusline footer, and a background daemon with **local-only ($0) workers** (token-spending AI workers stay opt-in behind upstream's machine-wide budget). Project scope triggers on a `.git` directory in the current folder; without one it's skipped with a note. `--project` forces it anyway (e.g. a not-yet-`git init`-ed folder), `--minimal` skips it, `--yes` accepts all prompts (non-interactive), `--no-aqe` / `--no-ruvnet-brain` / `--no-security` disable those subsystems, and `--reconfigure` re-offers MCP registration. `--codex` enables + installs the Codex host during setup (dual-mode; both hosts then run at once), and `--primary-host claude\|codex` picks which host leads (codex implies `--codex`). |
 | **status** | Per-subsystem ✓/⚠/✗ (versions, the kit's own version, **ruvnet-brain** (present + release drift, or "not installed"), natives (agentdb copies **and** ruflo's own memory runtime — the one `npx ruflo memory` loads — load-tested for a native better-sqlite3, not just the agentdb dirs), **memory-pin** (warns when `CLAUDE_FLOW_DB_PATH` points off the live DB), security, learning, aqe/RVF, **agentdb** (CLI present + coherent with ruflo's bundled version, or a store-skew warning), MCP, **hosts** (claude/codex — version + install method + **auth mode** (subscription $0 vs metered api-key), with the **primary** host marked and a *fail* when the primary host is absent), **providers** (host wiring + aqe fallback chain, or "drifted"/claude-only default), **routing** (per-activity Claude/Codex host+model policy, when dual-host — with drift vs the on-disk `agentOverrides`), daemons, guidance-file blocks (`~/.claude/CLAUDE.md`, project `AGENTS.md`, and `~/.codex/AGENTS.md` on codex machines), statusline), each drift row naming what `sync` would do about it — plus a **health-history** line that flags regressions since the last sync (learning shrank, native slots dropped, drift/security backslid). |
 | **sync** | The one convergence verb: upgrades first when a new release exists, then re-heals everything an upgrade wipes, then re-checks and reports. Included in that heal: it **installs any enabled frontier host** (claude/codex) that's entirely absent — never touching an external (mise/brew/native) install — and **re-applies provider wiring** (the `ENABLE_*` host env, the aqe fallback chain, and ruflo API providers) whenever it has drifted — and, on a dual-host project, **seeds/heals the per-activity routing policy** (materializing it into agentic-qe's `agentOverrides`, e.g. after an aqe upgrade first makes it eligible). It also **installs/repins the standalone `agentdb` CLI** to ruflo's bundled version (keeping the shared cognitive store coherent) and appends a **health-history snapshot** so `status` can flag regressions across syncs. It also **re-runs the RuvNet Brain installer** to pull the latest release when the on-disk KB has drifted (or installs it if absent, when enabled). It also **self-updates the kit**: when a newer `@pacphi/agentic-kit` exists it installs it as the *last* step (the new code applies from the next `ak` run, never mid-sync). Prerelease installs (`4.0.0-alpha.*`) track the `next` npm dist-tag as well as `latest`, so alphas see their successors; stable installs only ever follow `latest`. `--no-upgrade` skips the self-update along with the package upgrades. |
-| **dashboard** | Opens a read-only local web dashboard (`127.0.0.1:7431`, localhost-only, never detaches) that renders the same subsystem view as `ak status` in an Apple-style five-tab layout — **Overview · Hosts & Routing · Providers · Runtime · Intelligence** — with count badges on any tab holding a failing/warning subsystem. Problems never hide behind a tab: Overview aggregates every attention card, a quiet update notice, and a jump-to status map of all subsystems; Providers shows the **models in play** (distinct host+model pairs from your routing policy); Hosts & Routing carries the **per-activity routing matrix** (vendor-coded Claude/Codex host + model per activity) when dual-host routing is configured; Intelligence keeps the learning-over-time strip. Fully self-contained and offline (no external fetches, nothing leaves your machine). **Auto-opens your browser** (`--no-open` to just print the URL for headless/SSH); `--port N` to change the port; tabs deep-link (`#providers`) and persist. Stop with Ctrl-C. (Also available as `ak x dashboard`.) |
-| **admin** | Opens the **maintainer admin** (`127.0.0.1:7432`, localhost-only, foreground) — the project-telemetry sibling of `dashboard`: unique repo visitors and cloners (GitHub traffic API, needs a push-access token via `GITHUB_TOKEN`/`GH_TOKEN`/`gh auth token` — panels degrade honestly without one), npm download momentum (last 7d vs prior 7d, sparklines), release pulls, a **"since you last looked"** delta strip over a local baseline, open issues/PRs from others (oldest first), and external humans ranked by recency (bots excluded). Access is gated by a **per-session token** carried in the URL fragment and sent header-only; the page makes **zero external fetches** (the server proxies GitHub/npm; your credential never reaches the page or the payload — ADR-0007). Where `dashboard` is offline-first, `admin` does deliberate GitHub/npm egress — that contract split is why they're siblings, not tabs. `--port N`, `--no-open`; Ctrl-C stops. (Also available as `ak x admin`.) |
+| **dashboard** | Opens a read-only local web dashboard (`127.0.0.1:7431`, localhost-only, never detaches) with seven tabs: **Overview · Hosts & Routing · Providers · Runtime · Intelligence · Usage · Live**. The first five render `ak status` health and routing; Usage indexes local Claude/Codex transcripts on demand. Live groups work by project, then provider-branded root sessions with nested agent/worker threads, and pairs an interactive agent/tool execution canvas with a rich, server-masked transcript stream. Active sessions can be followed live or reviewed with synchronized play/pause/seek; completed sessions remain available for bounded playback. Live contains no chat or control plane. Ruflo, agentic-qe, and dual-run stores are not auto-discovered; register each trusted structured JSONL file with repeatable `--live-source 'surface=path'` (`surface` is `ruflo`, `aqe`, or `dual-run`). The page is self-contained and offline-first (no internet fetches; local files and loopback subprocesses/endpoints only). See [Live Sessions](docs/LIVE-SESSIONS.md) for coverage, syntax, and privacy limits. **Auto-opens your browser** (`--no-open` for headless/SSH); `--port N` changes the port; tabs deep-link (`#live`) and persist. Stop with Ctrl-C. (Also available as `ak x dashboard`.) |
+| **admin** | Opens the **maintainer admin** (`127.0.0.1:7432`, localhost-only, foreground) — the project-telemetry sibling of `dashboard`, with the same dark/light visual theme and persisted theme preference: unique repo visitors and cloners (GitHub traffic API, needs a push-access token via `GITHUB_TOKEN`/`GH_TOKEN`/`gh auth token` — panels degrade honestly without one), npm download momentum (last 7d vs prior 7d, sparklines), release pulls, a **"since you last looked"** delta strip over a local baseline, open issues/PRs from others (oldest first), and external humans ranked by recency (bots excluded). Access is gated by a **per-session token** carried in the URL fragment and sent header-only; the page makes **zero external fetches** (the server proxies GitHub/npm; your credential never reaches the page or the payload — ADR-0007). Where `dashboard` is offline-first, `admin` does deliberate GitHub/npm egress — that contract split is why they're siblings, not tabs. `--port N`, `--no-open`; Ctrl-C stops. (Also available as `ak x admin`.) |
 | **dual** | Runs a **Claude + Codex collaboration swarm** using your per-activity routing policy: `ak dual run <template> "<task>"` materializes a dual-run config (each pipeline step assigned to the host + model your policy chose) and drives it via `claude-flow-codex`. Templates: `feature`, `security`, `refactor`, `packaging`, `release`. `--dry-run` prints the plan + config without running; `--route 'activity:host[:model]'` overrides one step for that run; `--escalate` retries once up the cross-vendor ladder on failure. Requires dual-host enabled (`ak setup --codex`, or `ak x provider pick --host claude,codex`). **Pre-flight refusal:** before spawning a worker, `dual run` refuses to start when ruflo's memory runtime lacks a native better-sqlite3 binding **and** the shared DB has an active native WAL (`-wal`/`-shm` sidecars) — the native WAL writer and the WASM `ruflo memory store` cannot share that DB without corrupting it; the fix is `ak sync` (builds the native binding), then retry. |
 | **uninstall** | Removes the kit's footprint (and any legacy shell-kit install); project data is never touched; `--purge` also offers to remove the global packages. |
 
diff --git a/docs/LIVE-SESSIONS.md b/docs/LIVE-SESSIONS.md
new file mode 100644
index 00000000..f5f9474f
--- /dev/null
+++ b/docs/LIVE-SESSIONS.md
@@ -0,0 +1,274 @@
+# Live Sessions
+
+The **Live** tab in `ak dashboard` is a read-only execution workspace for local
+Claude and Codex activity. It pairs an interactive agent/tool canvas with the
+selected session's streaming transcript. It is not a chat client or control
+plane: it cannot send messages, cancel work, or reroute agents.
+
+```bash
+ak dashboard
+
+# Optional structured telemetry; repeat the option for multiple files.
+ak dashboard \
+  --live-source 'ruflo=.claude-flow/live-events.jsonl' \
+  --live-source 'aqe=.agentic-qe/live-events.jsonl' \
+  --live-source 'dual-run=.claude-flow/dual-run-events.jsonl'
+```
+
+Open `#live`, for example `http://127.0.0.1:7431/#live`. Collection starts
+lazily when the snapshot or event endpoint is first requested. Leaving the Live
+tab closes that browser's event stream. After the last snapshot/SSE client
+leaves, collectors stop after 30 seconds by default and restart on the next
+request. Stopping the dashboard closes the live service and all clients.
+
+## Reading the operations console
+
+- Claude and Codex sessions discovered newest-first from their local JSONL
+  stores and bootstrapped from bounded, metadata-only records.
+- Project-first session cards with a provider glyph and text, model when
+  reported, lifecycle, freshness, and a concise operational summary.
+- Session, agent, sub-agent, tool, skill, plugin, MCP, and gate entities when a
+  supported source record identifies them.
+- Authoritative Codex parent/child edges from the Codex state ledger.
+- Human-readable identity and current work: resolved agent or capability name,
+  host/model, lifecycle, elapsed time, latest safe operation summary, and
+  evidence confidence.
+- Typed relationships whose accessible titles use verbs such as **spawned**,
+  **delegated**, **invoked**, **returned**, **evaluated**, and **gated**.
+- A semantic execution canvas with stable agent anchors and bounded tool,
+  skill, plugin, MCP, and gate satellites attached to their owners.
+- Animated active edges that make delegation, invocation, and return flow
+  visible without turning every event into an equal-rank box.
+- A persistent selected-session transcript rail containing rich, server-masked
+  conversation, plaintext reasoning, tool inputs/results/errors, commands,
+  patches, MCP/web activity, and subagent messages as the sources report them.
+- Shared selection: choosing an agent filters the rail; choosing a tool opens
+  its detail; transcript evidence remains tied to its actor.
+- Keyboard-selectable nodes, host/completed filters, reduced-motion support,
+  actor-specific geometry, and a **Pause live** control.
+- Sanitized adapter health showing status and aggregate file/event/error counts.
+
+The overview answers which project/provider is involved, whether the evidence
+is current, who is active, and what operation is happening now. Selecting a
+node highlights adjacent relationships, focuses its work, and synchronizes the
+transcript. Search filters the current stream. Auto-follow yields when the
+reader scrolls away and reports unread activity until following resumes. The
+transcript is newest-first: fresh evidence appears at the top and older entries
+flow downward. Follow anchors to the top; playback remains chronologically
+ordered internally.
+
+Projects are the durable top-level grouping. Select a project first, then one
+of its provider-qualified root sessions; currently active sessions appear
+before recent completed sessions. Selecting a root reveals its agent/worker
+threads as an indented hierarchy. Those child threads remain selectable for
+their own map, transcript, and playback, but do not inflate the project's
+top-level session count. The project row reports nested workers separately.
+Claude and Codex sessions with the same native ID remain distinct.
+
+Linked Git worktrees roll up to their owning repository. A branch-named
+worktree is session context, not a separate project, and its filesystem path is
+never sent to the browser.
+
+Hierarchy may arrive after a thread is first discovered. The dashboard
+reconciles later Codex ledger parentage into the existing session instead of
+showing a second peer row. If a declared parent is not currently retained, the
+thread remains visible as an orphan root until the parent appears; malformed
+cycles are bounded and cannot lock the browser.
+
+Bare `unknown` is not used as user-facing copy. Missing facts are described
+honestly, such as **Model not reported**, **Waiting for lifecycle evidence**,
+**Active; completion unobserved**, or **Task details unavailable**.
+
+Session state is phrased as evidence a person can act on:
+
+- **Working now** means fresh observed execution is still arriving and is the
+  only state that continuously pulses.
+- **Waiting for activity** means a previously running session is quiet inside
+  the quiescence window.
+- **No recent activity** means that quiet period crossed the expiry threshold;
+  it does not assert failure or completion.
+- **Blocked**, **Failed**, **Cancelled**, and **Completed** require explicit
+  source evidence.
+- **Last active** identifies retained historical evidence when no trustworthy
+  completion outcome was recorded.
+
+Color and motion are redundant cues: green motion means current work, amber
+means waiting/stale/queued, red means blocked/failed, and completed history
+recedes. Reduced-motion mode keeps the labels and colors while removing pulse
+and flow animation.
+
+Selecting a session explicitly opens only that session's content stream. The
+previous stream closes; other transcripts are not prefetched. Large thinking,
+arguments, results, and patches are collapsed for readability and carry
+visible truncation metadata when bounded.
+
+### Live and review modes
+
+An active session opens in **Live** mode and follows new topology and transcript
+evidence. **Review session** loads its bounded retained history and reconstructs
+both panes at one playhead. The review bar supports play, pause, seek, and
+0.5×–2× playback. **Resume live** returns an active session to its current
+stream; completed sessions remain review-only.
+
+Review is event reconstruction, not a screen recording. The server returns
+chronological, masked evidence and the browser rebuilds the execution map and
+transcript at each event boundary. The
+`GET /api/live/playback/:host/:id?at=<elapsed-ms>` endpoint supports
+deterministic server-side seeking and reports its retained range, truncation,
+and any history gap.
+
+### Navigating the graph
+
+- Drag empty canvas space to pan. Use a wheel or trackpad scroll gesture to zoom
+  around the pointer.
+- Drag a node to move and pin it without changing the observed topology.
+- Use the visible **Zoom in**, **Zoom out**, **Fit all**, **Focus**, and
+  **Reset layout** controls when pointer gestures are unavailable or imprecise.
+- Select a session to show its work map. Completed high-cardinality resource
+  calls are summarized automatically.
+- Keyboard users can traverse selectable nodes, synchronize transcript detail,
+  and operate every viewport control. Reduced-motion mode removes decorative
+  transitions without removing status or topology.
+
+Live updates preserve the user's viewport, node positions, and selection during
+the active page. A new off-screen event does not forcibly
+recenter the canvas. **Fit** changes the camera to include the current map,
+**Focus** centers the selected actor, and **Reset layout** discards manual node
+positions and restores the deterministic automatic layout.
+**Pause live** freezes visual application while collection continues.
+
+The graph displays at most 80 nodes for one selected session. Completed resource
+nodes are collapsed first. The server retains at most 100 sessions and 1,000
+nodes per session by default, tails at most 256 files, and retains 2,000 events
+for resume. These are implementation bounds, not claims about the number of
+agents the underlying tools can run. Explicit `--live-source` files receive
+tailer slots first; Claude and Codex automatic discovery divide the remaining
+capacity.
+
+## Evidence and limitations
+
+| Source | Current coverage | Confidence |
+|--------|------------------|------------|
+| Claude transcript | Session lifecycle, assistant/tool activity, and explicit sidechain markers supported by the adapter | Observed or correlated according to the record |
+| Codex rollout | Session, response/tool lifecycle, model, and explicit rollout metadata | Observed |
+| Codex state ledger | Parent-to-child spawn edges | Observed |
+| Ruflo / agentic-qe | Conservative adapter for an explicitly supplied structured JSONL source | Observed as reported by that source |
+| Dual run | Planned steps from explicit `dual-run.plan` JSONL records | Planned |
+
+The default dashboard automatically discovers only Claude and Codex transcript
+files and reads the Codex state ledger. It does **not** search arbitrary ruflo,
+agentic-qe, plugin, skill, or dual-run stores. Register a structured source
+explicitly with repeatable `--live-source 'surface=path'`, where `surface` is
+exactly `ruflo`, `aqe`, or `dual-run`.
+
+Relative paths resolve from the directory where `ak dashboard` starts; absolute
+paths remain absolute. The parser rejects an unsupported/missing surface or an
+empty path, but registration does not prove that the file exists, is a regular
+file, is inside the current project, or is produced by the named subsystem.
+Unreadable/malformed sources degrade their adapter rather than crashing the
+dashboard. Only register a local file you trust the dashboard process to read.
+The structured adapter still constructs allowlisted events, so arbitrary JSON
+fields do not pass through to the browser.
+
+The diagram is a bounded current-state projection, not a durable audit log.
+Silence changes a session's projection lifecycle to quiescent after 30 seconds
+and expired after five minutes; it does not claim successful completion.
+Source timestamps are preserved, but the event cursor records ingestion order
+and does not establish causality across clocks.
+
+Names and work summaries are evidence-graded. A source-provided role or tool
+name is preferred. When the source exposes only a generic kind, the UI says
+that the identity is generic or inferred; it does not invent a specialist
+name. “Running” means that supported lifecycle evidence is open and fresh, not
+that the dashboard has inspected an agent's private reasoning.
+
+## Privacy
+
+The topology plane is constructed from an allowlist and contains no transcript
+bodies. The separately selected content plane intentionally carries rich local
+evidence. It parses provider records into a bounded DTO, masks every emitted
+string server-side, and never emits Codex `encrypted_content`. Secret masking
+is best effort, not a guarantee; only run the dashboard where its local
+transcripts may be viewed.
+
+Transcript lookup validates both host and session ID, resolves the real file
+beneath the configured provider root, rejects symlink escapes, and rechecks
+containment after replacement. Content responses are `no-store`, same-origin,
+bounded, and destroyed after their last subscriber.
+
+Run the dashboard only for users who may see local project and model names.
+It binds to `127.0.0.1`, applies Host, Origin, and Fetch Metadata checks, and
+does not support remote binding.
+
+## Streaming and recovery
+
+The browser obtains a snapshot from `GET /api/live` and subscribes to
+`GET /api/live/events`. The latter is a Server-Sent Events stream with:
+
+- named `init`, `delta`, and `reset` events;
+- event IDs and `Last-Event-ID` replay;
+- a 15-second heartbeat by default;
+- subscription-before-snapshot initialization to close the startup race;
+- a default maximum of 32 clients, clamped to 256;
+- a per-client server queue of 256 frames, clamped to 4,096.
+
+If replay history is no longer retained, initialization carries `reset: true`
+and a current snapshot. If a slow client's server queue overflows, queued
+frames are discarded and replaced with a reset snapshot after the socket
+drains. While the UI is paused it buffers 256 updates; overflow causes a
+snapshot reload on resume.
+
+The browser's native `EventSource` reconnects automatically. A stale indicator
+means no telemetry has arrived for 30 seconds; it does not necessarily mean the
+connection failed.
+
+The selected transcript uses
+`GET /api/live/transcripts/:host/:id/events`, a separate SSE stream with bounded
+history/replay and a per-client queue. A stale or cross-session cursor produces
+a bounded reset; a slow client receives an explicit gap instead of an
+unbounded content snapshot.
+
+## Troubleshooting
+
+| Symptom | Explanation |
+|---------|-------------|
+| No sessions | No supported metadata was found within the bounded newest-first discovery set |
+| Many identical provider session rows | Refresh after the current snapshot reconciles ledger hierarchy; root sessions and nested worker threads are counted separately |
+| Worker thread appears at top level | Its declared parent is not currently retained, so it remains navigable as an orphan rather than hiding evidence |
+| Ruflo or AQE absent | Their stores are not auto-discovered; register each JSONL file with `--live-source` |
+| Project name not reported | No supported metadata supplied a working directory; raw paths are never sent to the browser |
+| Node disappeared | Server projection or client visibility bounds evicted/collapsed it |
+| Connection interrupted | `EventSource` retries; a cursor miss or buffer overflow resets from a snapshot |
+| `503 too many live telemetry clients` | The configured concurrent-client bound has been reached |
+| Graph moved while streaming | Existing positions should remain stable; **Reset layout** discards manual positions |
+| Transcript unavailable | The selected session cannot be resolved safely beneath its host root |
+| Detail truncated | The source value exceeded a content bound; the UI reports the original/shown size |
+| Task details unavailable | The topology source did not provide role/task metadata; inspect the selected transcript for available evidence |
+
+Implementation and rationale are documented in
+[ADR-0012](adr/0012-live-sessions-observability.md) and the
+[domain design](ddd/live-sessions.md).
+
+## Design references
+
+The information architecture was independently informed by Albert and Agent
+Flow. Agent Flow's stable agent anchors, owned tool cards, causal movement, and
+synchronized transcript informed the execution grammar; agentic-kit's
+project-first, cross-host identity and isolated content plane are its own
+design. No project branding or assets are copied. See the clean-room decision
+in [ADR-0012](adr/0012-live-sessions-observability.md) and the
+[Agent Flow source](https://github.com/patoles/agent-flow).
+
+The interaction model follows the established “overview first, zoom and
+filter, then details on demand” guidance for network visualizations
+([Shneiderman][eyes-have-it]) and direct-manipulation viewport conventions
+documented by [D3 zoom][d3-zoom]. Stable incremental placement is intentional:
+dynamic-graph research finds that unnecessary movement makes visual search
+harder, while also cautioning that stability must serve the user's task
+([Di Giacomo et al.][stable-graphs],
+[Archambault and Purchase][mental-map-review]).
+
+[d3-zoom]: https://d3js.org/d3-zoom
+[eyes-have-it]: https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
+[mental-map-review]: https://doi.org/10.1016/j.ijhcs.2013.08.004
+[stable-graphs]: https://doi.org/10.1177/1473871620972339
diff --git a/docs/LOCAL-MODEL-VALIDATION.md b/docs/LOCAL-MODEL-VALIDATION.md
new file mode 100644
index 00000000..73c60a81
--- /dev/null
+++ b/docs/LOCAL-MODEL-VALIDATION.md
@@ -0,0 +1,191 @@
+# Validating local-model capture: a two-session protocol
+
+**For:** whoever runs the evidence pass that moves
+[ADR-0011](adr/0011-local-model-provenance-zero-cost-and-transcript-fidelity.md) from **Proposed**
+to **Accepted**.
+
+**Why this exists.** ADR-0011 decides how the usage scorecard should treat sessions served by a
+**local** model (`ollama launch claude`, `ollama launch codex`). Every claim it makes about *what
+Claude Code and Codex actually write to disk* in that situation is **derived from vendor
+specifications, not observed** — at research time (2026-07-27) the Ollama daemon was down and all 754
+indexed transcripts on the reference machine were vendor-metered. This document is the experiment
+that replaces derivation with measurement.
+
+**Time:** about 15 minutes of interactive work, plus two paste-backs.
+
+---
+
+## What we are trying to find out
+
+Six questions. The first four decide whether ADR-0011's sections are right; the last two decide
+whether two of its stated limitations are real.
+
+| # | Question | ADR-0011 depends on it in | Predicted answer |
+|---|---|---|---|
+| Q1 | What literal string lands in `message.model` for a local Claude Code session? | F1, §1 | the Ollama tag, verbatim (e.g. `qwen3.6:latest`) |
+| Q2 | Does `message.usage` carry `cache_read_input_tokens` / `cache_creation_input_tokens`? | F3, §3 | **no** — absent, so the indexer coerces both to `0` |
+| Q3 | Is an `ai-title` event emitted when titling is served locally? | F7a, §7 | uncertain — this is the least-predictable answer |
+| Q4 | Does a **mid-stream interruption** produce an `isApiErrorMessage` turn? | F7b, §7 | uncertain — if not, local failures under-report |
+| Q5 | Does a *second* turn's `input_tokens` behave like a full prompt count, or a KV-cache delta? | F4, §6 | unstable; may drop sharply on turn 2 |
+| Q6 | Does a model id aliased onto a vendor name reach the transcript intact? | **F5, §1 — the load-bearing one** | yes — `claude-opus-5` written verbatim |
+
+Q6 is optional but worth more than the rest combined: ADR-0011's entire out-of-band provenance design
+exists **because** the model id is forgeable. Right now that rests on a documentation sentence.
+
+---
+
+## Before you start
+
+Leave the Ollama daemon **running** for the whole exercise, including afterwards — the capture step
+reads its catalogue.
+
+```bash
+ollama serve &            # or just launch anything; skip if already running
+ollama --version
+curl -s http://localhost:11434/api/tags | head -c 200   # must return JSON, not exit 7
+```
+
+Record the versions you are testing (they belong in the results):
+
+```bash
+ollama --version && claude --version && codex --version
+```
+
+---
+
+## Session 1 — Claude Code (answers Q1–Q5)
+
+Use a tag whose **quantization is not in the name**, so the run also exercises the F2 metadata gap:
+
+```bash
+ollama launch claude --model qwen3.6:latest
+```
+
+Then, inside the session, in this order:
+
+1. **Force a tool call.** *"Read package.json and tell me the version field."*
+   → confirms `tool_use` blocks survive, which the tool-mix classifier prior depends on.
+2. **Two or three more ordinary prompts.** *"What test runner does this project use?"*, *"Summarize
+   the scripts section."* One turn cannot answer Q5 — the second turn is the one that shows whether
+   a warm prefix changes the reported input count.
+3. **Let it sit long enough for a session title to appear** (Q3).
+4. **On the final response, press `Ctrl-C` mid-stream** — while tokens are still printing, not after
+   it finishes. This is Q4, and it is the only question no amount of reading can answer.
+
+Note the **working directory** you ran in; the capture step needs it.
+
+## Session 2 — Codex (confirms the second host)
+
+```bash
+ollama launch codex
+```
+
+Two or three prompts, at least one forcing a file read. This confirms `turn_context.model` carries
+the local tag, that `token_count` events still appear (Codex meters locally, so they should), and
+that `rate_limits` is **absent** rather than zeroed — a zeroed rate limit would render as "0% of plan
+used", which would be a fabricated denominator of exactly the kind ADR-0010 forbids.
+
+## Optional — the alias experiment (Q6)
+
+```bash
+ollama cp qwen3-coder:30b claude-opus-5
+ollama launch claude --model claude-opus-5     # one prompt is plenty
+ollama rm claude-opus-5
+```
+
+Two things to know before running it:
+
+- It leaves **one session in your corpus that today's code prices as genuine Opus at $5/$25 per 1M**.
+  That is the demonstration, not a side effect. Note the session so it can be identified later.
+- `ollama rm` removes only the alias, not the underlying weights. Your model store is untouched.
+
+---
+
+## Capture (run after both sessions)
+
+Substitute the working directory you used. The commands below print **field names, counts, and model
+ids only — never message content** — so the output is safe to paste into an issue or a PR.
+
+```bash
+# 1. Locate the two most recent Claude transcripts
+ls -t ~/.claude/projects/*/*.jsonl | head -3
+
+# 2. Q1 — every model id the session recorded
+T=$(ls -t ~/.claude/projects/*/*.jsonl | head -1)
+grep -o '"model":"[^"]*"' "$T" | sort | uniq -c
+
+# 3. Q2/Q5 — the usage object, verbatim, per assistant turn
+grep -o '"usage":{[^}]*}' "$T"
+
+# 4. Q3 — was a title event written?
+grep -c '"type":"ai-title"' "$T"
+
+# 5. Q4 — did the interrupted stream produce an error turn?
+grep -c '"isApiErrorMessage":true' "$T"
+
+# 6. Codex side
+C=$(ls -t ~/.codex/sessions/**/rollout-*.jsonl 2>/dev/null | head -1)
+grep -o '"model":"[^"]*"' "$C" | sort | uniq -c
+grep -c '"type":"token_count"' "$C"
+grep -c 'rate_limits' "$C"
+
+# 7. The catalogue, for the §5 identity claims (digest + quantization)
+curl -s http://localhost:11434/api/tags \
+  | python3 -c 'import json,sys; [print(m["name"], m["digest"][:12], m["details"].get("parameter_size"), m["details"].get("quantization_level"), m["details"].get("format")) for m in json.load(sys.stdin)["models"]]'
+
+# 8. Full metadata for the one tag you tested
+curl -s http://localhost:11434/api/show -d '{"model":"qwen3.6:latest"}' \
+  | python3 -c 'import json,sys; d=json.load(sys.stdin); print(d.get("capabilities")); print({k:v for k,v in d.get("model_info",{}).items() if "context_length" in k or k.startswith("general.")})'
+```
+
+---
+
+## Results
+
+Fill this in and it becomes the record. An answer that **contradicts** the prediction is the valuable
+outcome — it means ADR-0011 gets corrected before any code is written against it.
+
+| # | Predicted | Observed | ADR action if it differs |
+|---|---|---|---|
+| Q1 | tag verbatim | | F1 and §1's catalogue-membership check need rework |
+| Q2 | no cache fields | | if present, §3's premise weakens and §7's fidelity note narrows |
+| Q3 | uncertain | | if titles are emitted, §7 drops the titling caveat |
+| Q4 | uncertain | | if no error turn, §7 must state that local failures under-report |
+| Q5 | unstable | | if stable, §6's token-KPI split may be unnecessary |
+| Q6 | id verbatim | | **if the id is rewritten, §1 can be simplified drastically** |
+
+| Environment | Value |
+|---|---|
+| `ollama --version` | |
+| `claude --version` | |
+| `codex --version` | |
+| date run | |
+| tag tested | |
+
+**Where the results go:**
+
+1. Observations and any corrected findings → [`USAGE-SCORECARD-METRICS.md`](USAGE-SCORECARD-METRICS.md),
+   which ADR-0011 names as the home for verifiable per-figure detail.
+2. Corrections to the findings themselves → edit ADR-0011's F1–F7 in place, since it is still
+   **Proposed** and has not yet been built against.
+3. Status flip → ADR-0011 `Proposed` → `Accepted`, and the row in
+   [`adr/README.md`](adr/README.md) updated to match.
+4. This document → `docs/archive/2026-07-27-local-model-validation-protocol.md` with an index row
+   stating what it proved, per [`archive/README.md`](archive/README.md)'s naming convention. It is a
+   worklist; when the work is closed it is history, not a living doc.
+
+---
+
+## Two decisions that are not the experiment's to make
+
+Both are recorded here so they are not silently assumed while the evidence is being gathered:
+
+1. **Whether `ak` may read `127.0.0.1:11434` at all.** ADR-0009 §2 promised "zero network calls";
+   ADR-0011 §2 argues a loopback read is not egress and sits inside ADR-0010's provider-mediated
+   precedent. That reasoning is sound but it modifies a promise made in writing, so it wants a
+   deliberate yes rather than an inference.
+2. **Whether to call `/api/show` per tag.** `/api/tags` alone yields family, parameter size,
+   quantization, and digest — enough for the display string in §5. `/api/show` adds architecture and
+   context length at one extra call per distinct tag. Recommendation: ship `/api/tags` only, and add
+   `/api/show` if context length proves to matter. Step 8 of the capture collects it either way, so
+   the decision can be made on real output.
diff --git a/docs/TRANSCRIPTS.md b/docs/TRANSCRIPTS.md
index 3825c90c..7cbb94fc 100644
--- a/docs/TRANSCRIPTS.md
+++ b/docs/TRANSCRIPTS.md
@@ -1,9 +1,10 @@
 # Transcripts & Session Detail — Reference
 
 **Audience.** agentic-kit maintainers and contributors touching the transcript
-pipeline — `src/lib/usage-index.mjs` (parsing, `readSession`) or
-`src/lib/dashboard-server.mjs` (the `/api/session` route, the Sessions and
-Transcript views) — and anyone auditing why a transcript turn is labelled,
+pipeline — `src/lib/usage-index.mjs` (parsing, `readSession`),
+`src/lib/dashboard-server.mjs` (HTTP composition),
+`src/lib/dashboard/session-security.mjs` (request/masking guards), or
+`src/lib/dashboard/client.mjs` (Sessions and Transcript views) — and anyone auditing why a turn is labelled,
 masked, truncated, or attributed the way it is.
 
 **Purpose.** The Transcript view renders raw session content, which makes it
@@ -213,8 +214,8 @@ serialization**, then length-capped at `MAX_TURN_CHARS` (40,000,
 
 The two kinds of withholding keep distinct vocabulary end-to-end: masking
 renders as `…redacted` marks (`markRedactions`,
-`dashboard-server.mjs:2341`), truncation as a `truncated · N of M` badge
-(`truncBadge`, `dashboard-server.mjs:2385`, deriving N from the received
+`dashboard/client.mjs`), truncation as a `truncated · N of M` badge
+(`truncBadge`, `dashboard/client.mjs`, deriving N from the received
 text so a changed constant can't desync the display).
 
 ![Figure: a turn body passes through maskSecrets (leaving redaction marks) and then the 40,000-character cap (leaving a truncated · N of M badge); originalChars is measured after masking](assets/transcript-mask-truncate.svg)
@@ -229,21 +230,20 @@ preamble). Transcript-relevant routes:
 
 | Route | Serves | Notes |
 |---|---|---|
-| `GET /api/usage?days=N` | the aggregate minus `sessions[]` (`dashboard-server.mjs:341`) | Scorecard + Findings + the project tree |
-| `GET /api/sessions` | session rows, filtered/paginated (`dashboard-server.mjs:375`) | the Sessions view's "load all" |
-| `GET /api/session/:id` | one transcript (`dashboard-server.mjs:392-423`) | the Transcript view |
+| `GET /api/usage?days=N` | aggregate minus `sessions[]` | Scorecard + Findings + project tree |
+| `GET /api/sessions` | session rows, filtered and paginated | Sessions view's "load all" |
+| `GET /api/session/:id` | one masked transcript | Transcript view |
 
 `/api/session/:id` order of operations, each step deliberate:
 
-1. `parseSessionId` (`dashboard-server.mjs:174`) + `resolvesInsideRoot`
-   (`dashboard-server.mjs:188`) — **validation before the index is touched**;
+1. `parseSessionId` + `resolvesInsideRoot`
+   (`dashboard/session-security.mjs`) — **validation before the index is touched**;
    a rejected id 400s without any filesystem call.
 2. `readSession` — a well-formed id matching no file is **404, not
    200-with-null** (200 made every nonexistent session look empty and the
    route a mild existence oracle).
-3. **The masking gate covers the whole payload**: `maskMeta`
-   (`dashboard-server.mjs:218`) *and* `maskTurns`
-   (`dashboard-server.mjs:199-208`), both fail-closed — no masker, no
+3. **The masking gate covers the whole payload**: `maskMeta` and `maskTurns`
+   (`dashboard/session-security.mjs`), both fail-closed — no masker, no
    transcript, ever. `maskTurns` rewrites **string fields only**, which is
    what lets the non-string attribution fields (`kind`, `prompt`,
    `truncated`, `originalChars`) survive to the browser; asserted by test
@@ -260,13 +260,13 @@ nothing on the page to reveal.
 
 ### 6.1 Sessions view — the row and its expander
 
-`renderSessions` (`dashboard-server.mjs:2290`) renders the project tree
+`renderSessions` (`dashboard/client.mjs`) renders the project tree
 (collapsed by default; every project starts closed so the cross-project
 comparison stays above the fold). Each session is a `sessionRow`
-(`dashboard-server.mjs:2264-2288`): host chip (claude/codex), title,
+(`sessionRow` in `dashboard/client.mjs`): host chip (claude/codex), title,
 worktree glyph, category chip (dimmed when confidence < 0.6 or
 Unclassified), start, duration, `prompts/responses`, tokens, cost — and an
-expander (`sdetail`, `dashboard-server.mjs:2228-2261`) carrying the
+expander (`sdetail` in `dashboard/client.mjs`) carrying the
 per-session detail fields: classification `basis` + confidence, per-session
 `models`, the token split, top tools, and the
 `skill`/`plugin`/`sidechain`/`worktree` flags. A measured-but-absent value renders as `—`, never disappears — a
@@ -274,15 +274,15 @@ field that vanishes when null teaches the reader it doesn't exist.
 
 ### 6.2 Transcript view — attribution, redaction, truncation
 
-`renderTranscript` (`dashboard-server.mjs:2401`) renders the crumb (title,
+`renderTranscript` (`dashboard/client.mjs`) renders the crumb (title,
 project, duration, `prompts/responses`, tokens, cost — all from masked
 `meta`) and the turn list. **The label comes from `kind`, never from role**
-(`dashboard-server.mjs:2417-2434`):
+(`dashboard/client.mjs`):
 
 | Turn | Label | Styling |
 |---|---|---|
-| user, `kind: 'prompt'` | `you` | accent — reserved for the person (`.t-user .t-who`, `dashboard-server.mjs:1317`) |
-| user, `kind: 'tool-result'` | `tool result` | purple, rhyming with the tool chips (`.t-tool .t-who`, `dashboard-server.mjs:1321`); hover title states the harness — not the person — sent it |
+| user, `kind: 'prompt'` | `you` | accent — reserved for the person |
+| user, `kind: 'tool-result'` | `tool result` | purple; hover says the harness, not the person, sent it |
 | user, `kind: 'context'` | `context` | same purple + hover title |
 | assistant | the model id | dim mono (`exception` placeholder turns label as `exception`) |
 
@@ -299,8 +299,8 @@ blocks (envelope census on the real corpus: task-notification 550,
 local-command-caveat 183, command-name 180, bash-input 85, bash-stdout 85,
 local-command-stdout 60; the stderr variants are the symmetric error-path
 siblings). Rendered literally they read as angle-bracket soup, so
-`fmtHarness` (`dashboard-server.mjs:2354-2373`; CSS
-`dashboard-server.mjs:1322-1334`) reformats them client-side: the command
+`fmtHarness` (`dashboard/client.mjs`; CSS in `dashboard/styles.mjs`) reformats
+them client-side: the command
 triple and `bash-input`
 become chips (`/clear`-style; the bash chip prefixed `!` so it reads as the
 shell invocation it was), and the block wrappers become quiet labelled
@@ -312,8 +312,8 @@ verbatim; only the wrapper tags become styling.** It runs on escaped text
 turn truncation — is left raw rather than half-formatted.
 
 Deep links: `#usage/<sessionId>` opens the Transcript view directly
-(`syncHash`, `dashboard-server.mjs:1450-1451`); the view lazy-fetches via
-`loadTranscript` (`dashboard-server.mjs:1924`).
+(`syncHash` in `dashboard/client.mjs`); the view lazy-fetches via
+`loadTranscript` in the same module.
 
 ---
 
diff --git a/docs/TROUBLESHOOTING.md b/docs/TROUBLESHOOTING.md
index 44a4d74d..64f71c82 100644
--- a/docs/TROUBLESHOOTING.md
+++ b/docs/TROUBLESHOOTING.md
@@ -28,6 +28,7 @@ ak sync             # apply it
 | `status` shows a `memory-pin` warning | `CLAUDE_FLOW_DB_PATH` is pinned to a dead or foreign path, so every memory op targets the wrong DB ("Database not initialized" beside a healthy in-repo DB). The pin may be deliberate, so `sync` never touches it | repoint (or remove) the pin in `.claude/settings.local.json` `env` |
 | `ak dual run` refuses to start ("ruflo's memory runtime lacks a native better-sqlite3 binding AND … active native WAL") | Pre-flight guard: the orchestrator's native WAL writer and the WASM `ruflo memory store` would share one DB and corrupt it. It refuses **before** spawning a worker rather than crashing mid-run | `ak sync` builds the native binding for ruflo's memory runtime, then retry the `dual run` |
 | Suspicious token burn | Background automation vs interactive usage | ask Claude to run the **ruflo-token-audit** skill (deployed by `setup`) |
+| Live dashboard is empty or has no ruflo/AQE nodes | Live tails new Claude/Codex records by default; existing files start at EOF, while ruflo/AQE stores are not auto-discovered | open Live before producing activity; register a trusted JSONL file with repeatable `--live-source 'surface=path'`; see [Live Sessions](LIVE-SESSIONS.md) |
 | `status` shows `ruvnet-brain … not installed` | The RuvNet Brain (offline KB + `search_ruvnet` MCP) isn't on disk | `ak sync` (or `ak setup`) runs the installer; `npx ruvnet-brain --doctor` health-checks it |
 | Don't want the RuvNet Brain (the ~2 GB KB download) | It's on by default | `ak setup --no-ruvnet-brain`, or set `ruvnetBrain: false` in `~/.config/agentic-kit/kit.json` |
 | Don't want the security surface managed | Also on by default | `ak setup --no-security` (persists `security:false`; status shows an info row and sync stops healing it) |
diff --git a/docs/USAGE-SCORECARD-METRICS.md b/docs/USAGE-SCORECARD-METRICS.md
index f98984c6..ad5ac081 100644
--- a/docs/USAGE-SCORECARD-METRICS.md
+++ b/docs/USAGE-SCORECARD-METRICS.md
@@ -98,7 +98,7 @@ responses = Σ over included sessions of session.responses
 - Totals: `totals.responses += s.responses` per included session
   (`usage-index.mjs:884`).
 - Render: `kpi("sessions", fmtNum(t.sessions), fmtNum(t.responses)+" assistant
-  turns", "")` (`dashboard-server.mjs:1983`).
+  turns", "")` (`dashboard/client.mjs`).
 
 **Worked example.** A session with 3 user turns and 2 assistant turns
 contributes `sessions += 1, responses += 2` — prompts (user turns) are tracked
@@ -259,13 +259,13 @@ tokens = input + output + cacheRead + cacheWrite   (summed across all rows in wi
 `usage-index.mjs:824` (`rowTokens = row.input + row.output + row.cacheRead +
 row.cacheWrite`) and rolled into `totals.tokens` via `addTo`
 (`usage-index.mjs:779`). Rendered with `fmtTok()`
-(`dashboard-server.mjs:1890-1896`): `≥1e9` → `"X.XB"`, `≥1e6` → `"X.XM"`,
+(`dashboard/client.mjs`): `≥1e9` → `"X.XB"`, `≥1e6` → `"X.XM"`,
 `≥1e3` → `"X.XK"`, else the rounded integer.
 
 The **token composition bar** immediately below the hero row (cache read /
 cache write / output / input, as four coloured segments) is the same four
-numbers as percentages of `t.tokens` (`dashboard-server.mjs:2019-2026`,
-`pct(a,b) = b ? a/b*100 : 0`, `dashboard-server.mjs:1904`).
+numbers as percentages of `t.tokens` (`dashboard/client.mjs`,
+`pct(a,b) = b ? a/b*100 : 0`, `dashboard/client.mjs`).
 
 **What "input" excludes.** For both providers, the `input` counter recorded
 per row is **gross input minus cached input** — Claude's parser reads
@@ -308,8 +308,8 @@ cacheRead + cacheWrite), **not** as a share of input alone. On the reference
 figures (`cacheRead = 1464.3B`, `tokens = 1495.2B`): `1464.3 / 1495.2 × 100 =
 97.93%`, which rounds to the displayed `97.9%` — confirming the denominator.
 
-**Source:** `dashboard-server.mjs:1981` (`cacheShare = pct(t.cacheRead,
-t.tokens)`), rendered `dashboard-server.mjs:1989`.
+**Source:** `dashboard/client.mjs` (`cacheShare = pct(t.cacheRead,
+t.tokens)`), rendered `dashboard/client.mjs`.
 
 **Why this number matters more than it looks like it should.** On the
 reference corpus, 96.3% of tokens were cache reads — pricing them as fresh
@@ -326,7 +326,7 @@ Codex CLI do by default.
 
 **Displayed as:** `ENGAGED TIME` hero tile — `403h`, subtitle `3286h summed`
 plus a `sessions overlap` note. Hovering the tile reveals a tooltip with all
-three tiers (the "ladder," `dashboard-server.mjs:1971-1977`).
+three tiers (the "ladder," `dashboard/client.mjs`).
 
 This is the single most heavily-caveated metric on the tab, because a naive
 version of it is **wrong by roughly 3×** on the reference corpus — worth
@@ -375,9 +375,9 @@ session data, and each needs its own fix:
   mergeIntervals(sessions.map(s => s._span))` (`usage-index.mjs:926`);
   `totals.spanMinutes` is a running sum of `s._span[1] - s._span[0]` across
   the loop (`usage-index.mjs:888`, finalized `usage-index.mjs:925`).
-- Render: `fmtHours()` (`dashboard-server.mjs:1897`, `≥10h` rounds to the
+- Render: `fmtHours()` (`dashboard/client.mjs`, `≥10h` rounds to the
   nearest hour, else one decimal place) and `fmtMins()`
-  (`dashboard-server.mjs:1898`, `≥60min` rounds to hours, else whole
+  (`dashboard/client.mjs`, `≥60min` rounds to hours, else whole
   minutes).
 
 **Worked example**, the reference-corpus measurement (14-day window, 582–584
@@ -429,7 +429,7 @@ session that runs from 23:58 local to 00:05 local is billed to the day its
 `tests/kit/usage-index.test.mjs:608`, "a session that opens before midnight
 is counted on its first billed day"). Accumulation:
 `byDay[row.day].cost += rowCost` (`usage-index.mjs:827`). Bar height:
-`h = maxDay ? max(2, cost/maxDay*100) : 2` (`dashboard-server.mjs:2000`) —
+`h = maxDay ? max(2, cost/maxDay*100) : 2` (`dashboard/client.mjs`) —
 every non-empty day gets a visually nonzero bar (floor of 2%), so a very
 cheap day is never rendered as invisible.
 
@@ -446,7 +446,7 @@ rather than a continuous 30-day series.
 **Displayed as:** two cards, `claude` and `codex`, each showing cost,
 session count, and total tokens; an idle host (`sessions == 0 && cost == 0`)
 renders "no sessions in window" instead of zeroed figures
-(`dashboard-server.mjs:2012-2016`).
+(`dashboard/client.mjs`).
 
 **Formula:** identical aggregation to every other bucket
 (`byProvider[s.provider]`, populated via `addTo()`, `usage-index.mjs:775-784`,
@@ -492,7 +492,7 @@ punchcard[dow + "-" + hour] += 1   per assistant/agent_message response, at its
 `agent_message` (`usage-index.mjs:597-598`), merged into the window-level
 `punchcard` object per session (`usage-index.mjs:905`). Cell intensity is
 linear against the single busiest cell in the window:
-`v = pcMax ? n/pcMax : 0` (`dashboard-server.mjs:2036`) — this is a
+`v = pcMax ? n/pcMax : 0` (`dashboard/client.mjs`) — this is a
 **relative**, not absolute, scale, so the heatmap's brightest cell is always
 "the busiest hour-of-week in *this* window," not a fixed response-count
 threshold, and comparing brightness across two different date-range views is
@@ -542,9 +542,9 @@ count) once per Codex session, passed at the single point Codex calls
 `addUsage` (`usage-index.mjs:613-624`).
 
 **Render:** `bar(name, fmtUsd(cost), fmtTok(tokens)+" · "+fmtNum(responses)+"
-resp", pct(cost, topModelCost), false)` (`dashboard-server.mjs:2049-2052`),
+resp", pct(cost, topModelCost), false)` (`dashboard/client.mjs`),
 list itself sorted cost-descending by the shared `entries()` helper
-(`dashboard-server.mjs:1905-1910`).
+(`dashboard/client.mjs`).
 
 **Exceptions — a turn that never resolved to a model is excluded here, not
 shown as a $0 row.** A dropped connection, rate limit, or authentication
@@ -565,7 +565,7 @@ create a `byModel` row of any kind. It increments a separate
 (`usage-index.mjs:844`, alongside the existing `sidechain`/`threadSource`
 flags — inspectable in the Sessions tab, never hidden). When
 `totals.exceptions > 0`, the panel header shows a small `"· N
-dropped/errored turns excluded"` note (`dashboard-server.mjs:2053-2058`);
+dropped/errored turns excluded"` note (`dashboard/client.mjs`);
 when it's zero, the note renders empty rather than always claiming a
 count of zero.
 
@@ -591,7 +591,7 @@ N"` when more exist; each row shows `cost`, `N sess · minutes`.
 it masquerade as a sibling project. (The mislabelling this rule corrected is
 recorded in [Appendix A](#appendix-a--fix-history).)
 
-**Source:** ranking and truncation, `dashboard-server.mjs:2060-2069`
+**Source:** ranking and truncation, `dashboard/client.mjs`
 (`shown = projects.slice(0,8)`); accumulation via the same `addTo()`/
 `entries()` machinery as §10, keyed by `s.project` instead of `s.models`.
 
@@ -607,7 +607,7 @@ rather than silently absent from the total.
 **Displayed as:** a ranked bar list of categories, bar width relative to
 the top category's cost; each row shows `cost`, `N sess · $/sess`; a small
 confidence dot on classified rows (opacity `0.5 + confidence×0.5`,
-`dashboard-server.mjs:2076-2077`); `Unclassified` is always shown, never
+`dashboard/client.mjs`); `Unclassified` is always shown, never
 hidden, and carries no confidence dot.
 
 This is the only Scorecard metric that is **not** pure arithmetic over
@@ -678,9 +678,9 @@ coverage was `ai-title` 93%, tool mix 100%,
 cannot classify most sessions and layer 2 (title + tool-mix rules) carries
 the bulk of the load.
 
-**Render:** `dashboard-server.mjs:2072-2083`, sorted cost-descending via the
+**Render:** `dashboard/client.mjs`, sorted cost-descending via the
 shared `entries()` helper, with `$/sess = cost / max(sessions, 1)` guarding
-the zero-session edge case (`dashboard-server.mjs:2074`).
+the zero-session edge case (`dashboard/client.mjs`).
 
 **What this does not model:** the classifier reads only the session's
 *title* (Claude's own `ai-title`, written by the model itself at session
@@ -748,7 +748,7 @@ Anthropic which publishes a fetchable pricing document. OpenAI's rates in
 this table are therefore maintained by hand against OpenAI's own developer
 documentation and are the most drift-prone entries in the file — this is
 explicitly why `PRICES_AS_OF` is surfaced in the UI (`u-asof`,
-`dashboard-server.mjs:1990`) rather than assumed current.
+`dashboard/client.mjs`) rather than assumed current.
 
 | Model (kit key) | Input | Output | Cache read (0.1×, derived) |
 |---|---|---|---|
@@ -851,9 +851,9 @@ normalizer at `usage-index.mjs:560` keeps a flat `windows` list keyed by
 
 **Freshness is part of the number.** Both sides carry `fetchedAt`; the view
 renders "as of Nm ago" and a `stale` badge (Claude's tee is push-only, so it
-ages the moment sessions stop). Served by the `/api/limits` route
-(`dashboard-server.mjs:363`) and rendered by `renderLimits` (`:2128`), with
-`limRow` (`:2119`) coloring each bar by proximity to its cap.
+ages the moment sessions stop). The `/api/limits` route lives in
+`dashboard-server.mjs`; `renderLimits` and `limRow` in `dashboard/client.mjs`
+render and color each bar by proximity to its cap.
 
 **Limit-aware findings.** `detectLimitInsights` (`usage-insights.mjs:625`)
 applies the same evidence rules as every other detector — vendor percentages
diff --git a/docs/adr/0005-dashboard-in-page-routing-reveal.md b/docs/adr/0005-dashboard-in-page-routing-reveal.md
index 918417e6..dc081d56 100644
--- a/docs/adr/0005-dashboard-in-page-routing-reveal.md
+++ b/docs/adr/0005-dashboard-in-page-routing-reveal.md
@@ -6,10 +6,16 @@
 
 ## Context
 
-`ak dashboard` today is a single-page, poll-every-5s, **read-only diagnostic**: a verdict band, a `#cards`
+At the time of this decision, `ak dashboard` was a single-page, poll-every-5s,
+**read-only diagnostic**: a verdict band, a `#cards`
 grid grouped by subsystem, a `#history` strip — all fed by shelling `ak status --json`
 (`src/lib/dashboard-server.mjs`). It is health/status oriented.
 
+> **Current implementation note (2026-07-27):** the read-only and loopback boundaries remain, but
+> the page now has seven tabs, user-configurable status polling, lazy Usage reads, and an SSE-driven
+> Live view. Page, styles, browser client, Live view, and request/session security now live under
+> `src/lib/dashboard/`; `dashboard-server.mjs` is the HTTP composition root.
+
 The routing policy warrants a richer view than a flat status card (a vendor-coded activity→host/model matrix
 with provenance badges and escalation ladders). The question is how to add it without breaking the existing
 health-first mental model. Options considered: a new tab/route (restructures the shell), a separate page
diff --git a/docs/adr/0007-maintainer-admin-local-telemetry.md b/docs/adr/0007-maintainer-admin-local-telemetry.md
index 8fdcd6e4..db99e73b 100644
--- a/docs/adr/0007-maintainer-admin-local-telemetry.md
+++ b/docs/adr/0007-maintainer-admin-local-telemetry.md
@@ -67,7 +67,7 @@ degrade to `configured:false`, never an error). It is **read at runtime, persist
 kit, and never appears in the `/api/admin-stats` payload or the page** (NFR-3). The **page makes
 exactly one network call — a same-origin `fetch('/api/admin-stats')`** — and the server does every
 GitHub/npm fetch on its behalf. A strict CSP (`default-src 'none'`; `connect-src 'self'`;
-`script-src`/`style-src 'unsafe-inline'` for the two inline module scripts and the one inline style;
+`script-src`/`style-src 'unsafe-inline'` for the one inline module script and the one inline style;
 `img-src 'none'` since sparklines are inline SVG) makes "no external fetch" a header the browser
 enforces, not just a convention, and `Cache-Control: no-store` covers every `/api/*` response.
 
@@ -107,6 +107,8 @@ browser-side module fetch, preserving AC-5) while both files stay independently
 ```text
 src/commands/x/admin.mjs     CLI: flags (--port 7432, --no-open), foreground SIGINT loop
 src/lib/admin-server.mjs     node:http server, token mint, Host guard, auth, page assembly
+src/lib/admin-styles.mjs     dashboard-aligned dark/light presentation tokens (embedded)
+src/lib/admin-theme.mjs      theme preference/controller source (embedded)
 src/lib/admin-collect.mjs    server-side Promise.all fan-out → the typed payload (injectable fetchers)
 src/lib/admin-model.mjs      PURE model — imports NOTHING; embedded AND node-imported
 src/lib/admin-view.mjs       browser controller (embedded; not node-tested)
@@ -116,12 +118,17 @@ tests/admin.test.cjs         server tests over real HTTP with injected collect/f
 ```
 
 Dependency direction (acyclic): `admin.mjs → {admin-server, browser}`;
-`admin-server → {admin-collect, admin-model(source), admin-view(source)}`;
+`admin-server → {admin-collect, admin-model(source), admin-view(source), admin-styles,
+admin-theme}`;
 `admin-collect → admin-model`; `admin-model → ∅`. **`admin-model.mjs` is the sink — it imports
 nothing — so no cycle is possible.** `openInBrowser` moves out of `x/dashboard.mjs` into
 `src/lib/browser.mjs` (IP-4) and `dashboard.mjs` imports it from there rather than duplicating it.
 
-No new directories are introduced beyond these files.
+The admin presentation follows the dashboard's system-font, blue-accented Apple dark/light token
+language. `admin-styles.mjs` and `admin-theme.mjs` keep that browser-only concern out of the
+security boundary. Both are embedded into the self-contained document: no stylesheet or module
+fetch is added. The two consoles share the `ak-dash-theme` preference, with the stored choice taking
+precedence over the operating-system color scheme.
 
 ## Consequences
 
diff --git a/docs/adr/0009-usage-scorecard-local-transcript-analytics.md b/docs/adr/0009-usage-scorecard-local-transcript-analytics.md
index 3dfb0fc7..682bb423 100644
--- a/docs/adr/0009-usage-scorecard-local-transcript-analytics.md
+++ b/docs/adr/0009-usage-scorecard-local-transcript-analytics.md
@@ -39,6 +39,9 @@ ADR-0007 split `admin` from `dashboard` along **network egress**: `dashboard` pr
 It therefore sits squarely inside the dashboard's existing offline-first contract and ships as a
 sixth tab (`#usage`), not a new server.
 
+> **Current implementation note (2026-07-27):** Usage remains the sixth tab; Live Sessions is now a
+> seventh tab. Usage still loads lazily and remains separate from the live transcript tailers.
+
 The tab carries four in-page views — **Scorecard → Findings → Sessions → Transcript** — deep-linked
 as `#usage`, `#usage/findings`, `#usage/sessions`, `#usage/<sessionId>`, reusing the in-page reveal
 idiom ADR-0005 established rather than adding navigation concepts.
@@ -102,6 +105,15 @@ would make such a percentage honest, and an invented denominator is worse than n
 OpenAI publishes no pricing in `~/.codex/models_cache.json` (verified), so Codex rates are a
 maintained table and are **date-stamped** in the UI so staleness is visible rather than silent.
 
+> **Amended by [ADR-0011](0011-local-model-provenance-zero-cost-and-transcript-fidelity.md)
+> (2026-07-27):** this section assumes every transcript came from a metered vendor endpoint. A
+> session served by a **local** model (`ollama launch claude` / `ollama launch codex`) breaks three of
+> its premises at once — no cache accounting exists to apply the 0.1× multiplier to, token counts are
+> the provider's own approximations, and the model id is one the vendor documents how to alias onto a
+> Claude name. ADR-0011 therefore splits cost into `metered` / `local` ($0, exact) / `unpriced`, and
+> **retires `FALLBACK_PRICE` from the cost path**: pricing an unrecognised model at Sonnet-class rates
+> is the invented-denominator error this section rejects, applied to a rate instead of a limit.
+
 ### 4. Engaged time is the union of *active* intervals — three tiers, and the honest one leads
 
 Reporting summed spans would have claimed 21 h/day. Merging overlapping session spans fixes only
@@ -290,6 +302,15 @@ prompt" and "not the human" are different claims. Codex rollouts record only rea
 `user_message` events, so every Codex user turn is `kind: prompt` by construction. Full mechanics:
 [`docs/TRANSCRIPTS.md`](../TRANSCRIPTS.md).
 
+> **Amended by [ADR-0011](0011-local-model-provenance-zero-cost-and-transcript-fidelity.md)
+> (2026-07-27):** this section's principle — *withheld content announces itself* — was scoped to
+> masking and truncation, both things **this panel** does. A **provider** withholds too: a local
+> Ollama-backed session reports no cache accounting and approximate token counts, and its titling and
+> mid-stream errors are served locally, so `cacheRead: 0` on a local session is a fact about the
+> provider and not about the work. ADR-0011 §7 extends the same announcement rule to provider
+> capability, so a reader can tell "this workload had no cache hits" from "this provider cannot
+> report cache hits" — which the panel currently renders identically.
+
 ## Consequences
 
 ### Good
diff --git a/docs/adr/0011-local-model-provenance-zero-cost-and-transcript-fidelity.md b/docs/adr/0011-local-model-provenance-zero-cost-and-transcript-fidelity.md
new file mode 100644
index 00000000..8f1dfa28
--- /dev/null
+++ b/docs/adr/0011-local-model-provenance-zero-cost-and-transcript-fidelity.md
@@ -0,0 +1,300 @@
+# ADR-0011 — Local models: provenance out-of-band, $0 per model, and stated transcript fidelity
+
+- **Status:** Proposed — see *Validation required* before this may be marked Accepted
+- **Date:** 2026-07-27
+- **Deciders:** agentic-kit maintainers
+- **Amends:** [ADR-0009](0009-usage-scorecard-local-transcript-analytics.md) §3 (cost) and §8 (transcripts)
+
+## Context
+
+`ak` already treats `ollama` as a first-class provider on the *routing* axis: it is in
+`PROVIDERS` (`src/lib/routing.mjs:30`), in `SUBSCRIPTION_PROVIDERS` as a $0 local backend
+(`:36`), in the aqe provider matrix (`src/lib/providers.mjs:56`), and in the billing hint the
+provider picker prints — *"ollama/onnx = local ($0)"* (`src/commands/x/provider.mjs:54`).
+
+The **usage** axis knows nothing about it. Grepping `ollama|OLLAMA|ANTHROPIC_BASE_URL|OPENAI_BASE_URL`
+across `src/` returns hits in exactly those three routing/provider files and none in
+`usage-index.mjs`, `pricing.mjs`, or `dashboard-server.mjs`. The scorecard is built on an assumption
+it never states: that every transcript on disk was produced by a metered vendor endpoint.
+
+Ollama has since made that assumption easy to violate from the host side. `ollama launch` configures
+and starts a frontier CLI against a local model — `ollama launch claude`, `ollama launch codex`, and
+fourteen other integrations — so a Claude Code or Codex session backed by a local model is now a
+one-command act, not a hand-wired experiment.
+
+**Machine evidence gathered for this ADR** (2026-07-27): `ollama` client **0.32.1** installed, daemon
+**not running** at scan time (`curl :11434` → exit 7), **132 GB** of models on disk, 14 tags across
+8 families — including `qwen3.6:35b-a3b-q4_K_M`, `qwen3.6:27b-mlx`, `qwen3.6:latest`,
+`qwen3-coder:30b`, `qwen3-coder:30b-a3b-q4_K_M`, `gemma4:26b-a4b-it-q4_K_M`, `glm-4.7-flash:q4_K_M`,
+`qwen3:32b`, and `hf.co/yuxinlu1/gemma-4-12B-coder-fable5-composer2.5-v1-GGUF:Q8_0`.
+
+### Findings
+
+Sources are cited inline; every claim below is either a vendor document, upstream source, or a
+measurement on this machine. Where a claim is *derived* rather than observed, it says so.
+
+**F1 — Model identity already flows through, verbatim.** Ollama's Anthropic compatibility layer
+(`anthropic/anthropic.go`, `ToMessagesResponse()`) **echoes the request's `model` string** into the
+response ([DeepWiki: Anthropic Compatibility Layer](https://deepwiki.com/ollama/ollama/3.5-anthropic-compatibility-layer)).
+Claude Code writes that value to `message.model`, which `usage-index.mjs:480` reads verbatim. So a
+local session's model *name* is already captured correctly today — `qwen3.6:35b-a3b-q4_K_M` will
+appear as a model in play. Nothing needs building for identity. What is missing is everything
+attached to it.
+
+**F2 — The tag is not the model.** Quantization, parameter count, family, format, and context length
+are **not in the tag** in the general case: `qwen3.6:latest`, `qwen3:32b`, and `qwen3-coder:30b` carry
+no quant, while `gemma4:26b-a4b-it-q4_K_M` does. That metadata lives only in the daemon's own
+catalogue — `/api/tags` returns `details.{format, family, families, parameter_size,
+quantization_level}` plus `digest` and `size` ([Ollama — List models](https://docs.ollama.com/api/tags));
+`/api/show` adds `model_info` (`general.architecture`, `general.parameter_count`, `general.file_type`,
+`*.context_length`) and `capabilities`; `/api/ps` adds `size_vram`, `context_length`, and `expires_at`
+for what is actually resident ([Ollama — List running models](https://docs.ollama.com/api/ps);
+[`docs/api.md`](https://github.com/ollama/ollama/blob/main/docs/api.md)). **Surfacing the exact model —
+"qwen3.6 · 35B · Q4_K_M · gguf" — therefore requires an out-of-band read. The transcript alone cannot
+answer it.**
+
+**F3 — There is no cache accounting, structurally.** Ollama's `/v1/messages` returns
+`usage.{input_tokens, output_tokens}` and nothing else; `cache_creation_input_tokens` and
+`cache_read_input_tokens` are absent, and **prompt caching is on the explicit unsupported list**
+alongside the token-counting endpoint, Batches, citations, and PDFs
+([Anthropic compatibility](https://docs.ollama.com/api/anthropic-compatibility)). Since
+`usage-index.mjs:483-489` coerces missing counters to `0`, every local session records
+`cacheRead = cacheWrite = 0` — so **100% of its input prices at 1×**. ADR-0009 §3 built the entire
+cost model around the opposite fact: 96.3% of the reference corpus is cache reads billing at 0.1×.
+A local session is the pathological input to that formula.
+
+**F4 — Local token counts are approximations, and not stable ones.** The compatibility doc states
+plainly that *"token counts are approximations based on the underlying model's tokenizer."* Upstream,
+`prompt_eval_count` has a long history of reporting something other than "tokens in this prompt" —
+it disappears entirely on repeated identical requests ([ollama#2068](https://github.com/ollama/ollama/issues/2068))
+and has been reported outright broken ([ollama#3427](https://github.com/ollama/ollama/issues/3427)),
+with KV-cache reuse meaning the count reflects what was *evaluated*, not what was *sent*. So local
+figures are not comparable to vendor-metered ones **in tokens**, before any question of dollars.
+
+**F5 — The model id can be forged, and the vendor recommends it.** For tools that hardcode Anthropic
+names, Ollama's own documentation recommends aliasing:
+`ollama cp qwen3-coder claude-3-5-sonnet` (Anthropic compatibility; the same advice appears for
+OpenAI names). A user following that advice with `ollama cp qwen3-coder claude-opus-5` produces
+transcripts whose `message.model` matches `PRICES['claude-opus-5']` **exactly** and bills a free local
+session at $5/$25 per 1M. **Any scheme that infers "is this local?" from the model string is
+defeated by a documented, recommended workflow.** Provenance must come from a channel the model id
+cannot forge.
+
+**F6 — The fallback path is currently unexercised, which is precisely why it is dangerous.** Measured
+over the live index (`~/.config/agentic-kit/usage-index.json`, schema 6, **754 indexed files**), the
+complete set of model ids carrying usage rows is: `claude-sonnet-5`, `claude-opus-4-8`,
+`claude-fable-5`, `claude-opus-5`, `claude-opus-4-7`, `claude-haiku-4-5-20251001`, `gpt-5.6-sol` —
+**seven ids, all of which match the price table**. (The bare `sonnet`/`haiku`/`opus` strings visible
+in raw transcripts are `Agent`-tool *inputs*, not `message.model`, and never reach pricing — checked.)
+So `FALLBACK_PRICE` ($3/$15, Sonnet-class, `matched:false`) has never once been hit on this corpus,
+and `matched` has no consumer anywhere in `dashboard-server.mjs` or `usage-index.mjs`. The first
+local session would be the first thing to exercise a silent path — and it would exercise it for
+every turn.
+
+**F7 — Transcript fidelity is high on content, gapped on metadata.** `/v1/messages` supports
+messages, multi-turn, streaming, system prompts, **tool calling**, **thinking**, and vision. Tool
+calling is the load-bearing one: `tool_use` blocks are what `usage-index.mjs:492-497` counts, so the
+tool-mix prior in `usage-classify.mjs` and the per-turn tool chips keep working. Three gaps:
+*(a)* `ai-title` is generated by the host's own titling call, which under a local base URL is served
+by the local model — when it yields nothing, `rec.title` falls back to `clip(firstPrompt)`
+(`:507`), and classification loses its 93%-coverage signal; *(b)* **server-sent errors during
+streaming are unsupported**, so a mid-stream local failure may not arrive as the `isApiErrorMessage`
+turn that ADR-0009's exception accounting depends on — local failures can under-report; *(c)* on the
+Codex side `ollama launch codex` writes a dedicated profile, `~/.codex/ollama-launch.config.toml`,
+with `base_url = "http://localhost:11434/v1/"` and `wire_api = "responses"`
+([Ollama — Codex CLI](https://docs.ollama.com/integrations/codex)) — token accounting there is
+Codex's own, so `token_count` events survive, while `rate_limits` is simply absent and
+`rec.rateLimits` correctly stays `null`.
+
+## Decision
+
+### 1. Provenance is established out-of-band and stamped on the session — never inferred from the model id
+
+F5 forecloses id-based inference. Two channels, in order:
+
+1. **The local catalogue.** `GET http://127.0.0.1:11434/api/tags` yields the exact set of tags and
+   digests this machine can serve. Membership is the primary signal.
+2. **ak's own wiring.** `ANTHROPIC_BASE_URL` in the managed `.claude/settings.local.json` `env`
+   block, and the presence of `~/.codex/ollama-launch.config.toml` — both artifacts `ak` or
+   `ollama launch` wrote, both outside the transcript.
+
+When a model id is **both** a local tag and a price-table entry (the F5 alias case), the session is
+**`ambiguous`**: no dollar figure, no $0 claim, and the ambiguity is displayed with its cause
+("`claude-opus-5` is also a local Ollama tag on this machine"). Resolving it would require guessing,
+and this is the ADR series' standing answer to a guess — ADR-0009 §5's `Unclassified` and §6's
+*"no $ claimed"* are the same move.
+
+**Stated limitation, load-bearing:** catalogue membership is read **now** and the session ran
+**then**. A tag pulled today does not prove last week's session was local, and a tag deleted since
+does not prove it was not. Provenance is therefore stamped **at index time**, carries the evidence
+that produced it (`catalog` / `config` / `both`), and is re-derivable on reindex. This is weaker
+than the vendor-mediated facts of ADR-0010 and is labelled as inference in the UI, not as a fact.
+
+### 2. A loopback read of the local daemon is not egress — ADR-0010's pattern, applied to a third provider
+
+ADR-0009 §2 promised "zero network calls" and ADR-0007 drew the `dashboard`/`admin` line at
+**network egress**. A request to `127.0.0.1:11434` crosses no network boundary and touches no
+credential — it is the same shape as ADR-0010 spawning `codex app-server` to read quota, and the
+same trust model as the dashboard shelling out to `ak status`. It stays in `dashboard`.
+
+Rules: read-only (`/api/tags`, and `/api/show` only for tags actually seen in transcripts); cached to
+`~/.config/agentic-kit/ollama-catalog.json` with a TTL; **never starts the daemon** (it was down on
+this machine during research — that must be an ordinary state, not a degraded one); on failure the
+feature returns `provenance: unknown` and the panel says the catalogue was unreachable. No auto-pull,
+no model loading, no write path to Ollama, ever.
+
+### 3. Three cost states replace one silent fallback
+
+`matched` graduates from an unread flag to the thing that decides what may be claimed:
+
+| State | Condition | Cost shown |
+|---|---|---|
+| `metered` | id matches the price table **and** provenance is not local | dollars, as today |
+| `local` | provenance is local | **exactly `$0`** — a fact, not an estimate |
+| `unpriced` | no table match, no local provenance | **no dollar figure at all** |
+
+`FALLBACK_PRICE` **retires from the cost path.** Pricing an unrecognised model at Sonnet-class rates
+was defensible when it could only mean "the table is one release behind"; with local hosts in play it
+means "we invented a rate for tokens that may have cost nothing," which is the fabricated-denominator
+error ADR-0009 §3 rejects, wearing a different hat. `priceFor` keeps returning the fallback for
+callers that want a *rate*; `costOf` returns `null` for `unpriced`, and `null` renders as "unpriced",
+never as `$0`. **`$0` and "no figure" must never render the same** — one is a measurement, the other
+is a refusal.
+
+### 4. Per-model rows for local models — no blanket "local" bucket
+
+Collapsing local usage to a single row would answer "did I use local models" and destroy "*which*
+local models, and how much". Every local model keeps **its own row**, ranked by **tokens** (ranking
+by cost is meaningless when every row is `$0`), carrying tokens, responses, and sessions. Above them
+sits one aggregate line — *"N local models · M sessions · T tokens · $0"* — so the count is directly
+readable rather than something the reader has to tally. The Scorecard's headline cost KPI gains a
+sibling: metered spend and local-and-free stand side by side, never summed.
+
+### 5. Local model identity is keyed on digest and displayed with its quantization
+
+Tags are mutable (`:latest` moves; `ollama cp` makes two names for one blob), so the **digest** is
+the only stable identity. Records carry
+`{ tag, digest, family, parameterSize, quantization, format, contextLength }` from `/api/tags` +
+`/api/show`, displayed as **`qwen3.6:35b-a3b-q4_K_M · 35B · Q4_K_M · gguf · 262k ctx`** and keyed on
+digest. This is what makes the panel able to say two rows are the same weights under different names,
+or that "qwen3.6" in June and "qwen3.6" in July were different models — neither of which the tag can
+express. Metadata absent (daemon down, tag since removed) renders as the tag alone; a missing field
+is shown missing, not defaulted.
+
+### 6. Token totals split the same way cost does
+
+F4 means local token counts are approximations from a different tokenizer with unstable
+prompt-accounting semantics. Blending them into one headline "tokens" KPI would produce a number
+that is neither metered-accurate nor locally-accurate. The KPI therefore reports metered and local
+separately, on the same footing as §3's cost split. One honest number in two parts beats one
+dishonest number.
+
+### 7. Transcript fidelity is stated per session, not silently degraded
+
+ADR-0009 §8's principle — *withheld content announces itself* — extends from truncation and masking
+to **provider capability**. Local sessions render turn-for-turn identically (F7: tools, thinking,
+vision, multi-turn all survive), and carry a **fidelity note** listing what the provider could not
+report:
+
+- **no cache accounting** — `0` cache reads is a fact about Ollama, not about the work;
+- **approximate token counts** — per the vendor's own wording;
+- **no vendor rate limits** — the Limits view shows nothing for this session rather than a stale
+  Anthropic figure (ADR-0010's staleness reporting already covers the mechanism);
+- **titling served locally** — when `ai-title` is absent the title is the first prompt, and the
+  category basis says so.
+
+A reader who sees `cacheRead: 0` next to a metered session showing 96% cache reads must be able to
+tell "this workload had no cache hits" from "this provider cannot report cache hits". Those are
+different statements and the panel currently renders them identically.
+
+### 8. Ollama is the implementation; the seam is "OpenAI/Anthropic-compatible local endpoint"
+
+LM Studio, llama.cpp's server, vLLM, and any OpenAI-compatible gateway create the same three
+problems (no cache fields, forgeable ids, absent quota). Only Ollama is implemented, because it is
+what `ak` already wires and what is installed here. The provenance channel in §1 is defined as an
+interface — *"a catalogue that can be asked which models are local"* — so a second backend is a new
+catalogue reader, not a second cost model. **Nothing else is implemented on speculation.**
+
+## Validation required
+
+This ADR is **Proposed**, not Accepted, and the reason is recorded rather than papered over: **no
+local-model session exists on this machine to observe.** The Ollama daemon was down during research,
+and all 754 indexed files are vendor-metered. Every claim about *what Claude Code actually writes*
+for an Ollama-backed session — §3's `cacheRead: 0`, F7's title and streaming-error behaviour — is
+**derived from two specifications, not measured**.
+
+Before this may be marked Accepted:
+
+1. Run one `ollama launch claude` session and one `ollama launch codex` session against a known tag.
+2. Capture the resulting transcript and confirm: the literal `message.model` string; presence/absence
+   of `usage.cache_*`; whether an `ai-title` event is emitted; and what a deliberately interrupted
+   stream records.
+3. Confirm `/api/tags` `digest` values match what the transcript's tag resolves to.
+4. Record the observations in `docs/USAGE-SCORECARD-METRICS.md` and correct any finding above that
+   the evidence contradicts.
+
+The executable form of this list — exact commands, the six questions with their predicted answers,
+the content-free capture step, and a results table — is
+**[`docs/LOCAL-MODEL-VALIDATION.md`](../LOCAL-MODEL-VALIDATION.md)**. It also carries the optional
+alias experiment (`ollama cp qwen3-coder claude-opus-5`) that would turn F5 from a documented claim
+into a measured one, which is the single highest-value observation available: **§1 exists entirely
+because the model id is forgeable, and if it turns out not to be, §1 collapses to something much
+simpler.**
+
+## Consequences
+
+### Good
+
+- Local sessions become **visible and correctly free** rather than invisible or fictitiously
+  expensive, and "how many local models ran at $0" is a directly readable number (§4).
+- The exact model — family, parameter size, **quantization**, context — is surfaced, which the
+  transcript alone can never provide (F2).
+- Retiring the silent fallback (§3) fixes a latent honesty defect that predates local models:
+  an unrecognised **vendor** id also stops being quietly priced as Sonnet.
+- The offline-first contract holds. Loopback is not egress, and the daemon being absent is an
+  ordinary state.
+
+### Costs and risks
+
+- **Provenance is as-of-read-time, not as-of-session-time** (§1). Explicitly labelled inference.
+- **The alias case is reported, not resolved** (§1). A user who aliases a local model to a vendor
+  name gets `ambiguous` rows until they rename. Accepted: the alternative is guessing about money.
+- **Schema bump.** Provenance and local-metadata fields force `SCHEMA_VERSION` 6 → 7 and a full
+  reindex (~1 min cold, per ADR-0009 §2).
+- **A new dependency surface.** Ollama's API is not versioned in lockstep with `ak`; `/api/tags`
+  field drift degrades metadata to the tag alone rather than breaking the panel.
+- **Local token counts stay approximate** (F4). The panel can label that, not fix it.
+- **`$0` is right for marginal cost and silent about electricity, hardware, and time.** The panel
+  claims API-equivalent metered cost, which for a local model is genuinely zero; it does not claim
+  total cost of ownership, and §4's label says "free" in that specific sense.
+
+## References
+
+- Amends [ADR-0009](0009-usage-scorecard-local-transcript-analytics.md) §3, §8; extends
+  [ADR-0010](0010-provider-mediated-quota-reads.md)'s provider-mediated read pattern to a third
+  (loopback, credential-free) provider; stays inside [ADR-0005](0005-dashboard-in-page-routing-reveal.md)
+  / [ADR-0007](0007-maintainer-admin-local-telemetry.md)'s offline `dashboard` contract.
+- Ollama — [Anthropic compatibility](https://docs.ollama.com/api/anthropic-compatibility)
+  ([source `.mdx`](https://github.com/ollama/ollama/blob/main/docs/api/anthropic-compatibility.mdx)):
+  `/v1/messages`, `usage.{input_tokens, output_tokens}`, unsupported list (prompt caching, token
+  counting, streaming errors), `ollama cp` aliasing, "token counts are approximations".
+- Ollama — [Claude Code integration](https://docs.ollama.com/integrations/claude-code) and
+  [blog: Claude Code with Anthropic API compatibility](https://ollama.com/blog/claude)
+  (v0.14.0+; `ANTHROPIC_BASE_URL`, `ANTHROPIC_AUTH_TOKEN`, `ollama launch claude`).
+- Ollama — [Codex CLI integration](https://docs.ollama.com/integrations/codex)
+  (`~/.codex/ollama-launch.config.toml`, `base_url = "http://localhost:11434/v1/"`,
+  `wire_api = "responses"`, 64k+ context recommendation).
+- Ollama — [List models `/api/tags`](https://docs.ollama.com/api/tags),
+  [List running models `/api/ps`](https://docs.ollama.com/api/ps),
+  [`docs/api.md`](https://github.com/ollama/ollama/blob/main/docs/api.md) (`/api/show` `model_info`,
+  `capabilities`; `/api/chat` `prompt_eval_count` / `eval_count`).
+- Implementation grounding: [DeepWiki — Anthropic Compatibility Layer](https://deepwiki.com/ollama/ollama/3.5-anthropic-compatibility-layer)
+  (`anthropic/anthropic.go` `FromMessagesRequest()` / `ToMessagesResponse()`,
+  `middleware/anthropic.go`; `model` echoed from request; `input_tokens ← prompt_eval_count`,
+  `output_tokens ← eval_count`).
+- Upstream token-accounting instability: [ollama#2068](https://github.com/ollama/ollama/issues/2068)
+  (`prompt_eval_count` disappears on repeated identical requests),
+  [ollama#3427](https://github.com/ollama/ollama/issues/3427) (`prompt_eval_count` broken).
+- Machine measurements (2026-07-27): `ollama` 0.32.1, daemon down, 132 GB / 14 tags in
+  `~/.ollama/models/manifests`; usage index schema 6, 754 files, 7 distinct priced model ids, zero
+  `FALLBACK_PRICE` hits.
diff --git a/docs/adr/0012-live-sessions-observability.md b/docs/adr/0012-live-sessions-observability.md
new file mode 100644
index 00000000..0de29f2b
--- /dev/null
+++ b/docs/adr/0012-live-sessions-observability.md
@@ -0,0 +1,462 @@
+# ADR-0012 — Live sessions as local, evidence-graded observability
+
+- **Status:** Accepted
+- **Date:** 2026-07-27
+- **Deciders:** agentic-kit maintainers
+- **Related:** [ADR-0005](0005-dashboard-in-page-routing-reveal.md),
+  [ADR-0007](0007-maintainer-admin-local-telemetry.md),
+  [ADR-0009](0009-usage-scorecard-local-transcript-analytics.md)
+
+## Context
+
+Before this decision, `ak dashboard` reported configuration health and historical usage but could
+not show work as it happened. Claude, Codex, ruflo, agentic-qe, skills, plugins, MCP tools, and
+delegated agents can all
+participate in one development task. Their evidence is distributed across append-only transcripts,
+Codex's state ledger, local daemon registries, workflow metadata, and quality hooks.
+
+The existing implementation is deliberately local and read-only. `dashboard-server.mjs` binds to
+loopback and protects requests with Host, Origin, and Fetch Metadata checks. `usage-index.mjs`
+incrementally indexes completed and changing transcripts for historical analytics.
+`codex-state.mjs` exposes authoritative `thread_spawn_edges`; `daemons.mjs` discovers local ruflo
+state; and `routing.mjs` knows the planned dual-run topology. These are useful sources, but they do
+not share a live event model. Re-running the historical usage scan on a shorter interval would mix
+two workloads and would still not establish causal topology.
+
+The desired view is a diagrammatic, continuously updating map of sessions, agents, and their
+current work, paired with the selected session's live evidence. Albert informed the first
+information architecture. Agent Flow subsequently demonstrated a stronger execution grammar:
+stable agent anchors, concrete tool satellites, animated dispatch and return paths, and a
+synchronized transcript rail driven by one normalized source stream ([Agent Flow][agent-flow]).
+Source review also established important boundaries:
+Albert's current graph is a fitted, fixed-viewBox SVG. It does not implement graph pan/zoom or
+user-positioned nodes. Those interactions are an independent ak design, not an Albert-derived
+feature. Albert is distributed under PolyForm Noncommercial 1.0.0, while ak is MIT licensed.
+Therefore neither project's branding or assets are copied. The implementation is clean-room work
+based on independently documented protocols, direct-manipulation conventions, and general
+visualization principles. See [Albert's license][albert-license], the reviewed
+[Albert graph source][albert-graph], and Agent Flow's [Apache-2.0 source][agent-flow-source].
+
+Information visualization should provide an overview, zoom and filtering, then details on demand
+([Shneiderman][eyes-have-it]). Dynamic graph research finds that stable placement can improve
+visual search while warning that stability must be balanced against the user's task and
+readability ([Di Giacomo et al.][stable-graphs],
+[Archambault and Purchase][mental-map-review], [Beck et al.][dynamic-graphs]). A causal delegation
+graph also fits hierarchical layout better than an unconstrained force simulation. Accessibility
+requires a way to pause moving information and a non-visual equivalent
+([WCAG 2.2][wcag], [WAI-ARIA Graphics][graphics-aria]).
+
+## Decision
+
+### 1. Add a read-only Live view; do not add chat or a control plane
+
+The dashboard has a top-level Live view that depicts supported evidence:
+
+- sessions and their Claude or Codex host;
+- parent, delegated, and sub-agent relationships;
+- ruflo orchestration and workflow steps;
+- agentic-qe workers, evaluations, gates, and verdicts;
+- skills, plugins, MCP servers, and tool activity when supported by evidence.
+
+The view exposes metadata, lifecycle state, provenance, aggregate metrics, and an on-demand,
+server-redacted transcript for the one selected local session. Interactive chat, cancellation,
+steering, rerouting, and message submission are not part of this decision.
+
+### 2. Introduce a canonical, versioned, OpenTelemetry-aligned event model
+
+Every source adapter emits an allowlisted envelope containing:
+
+- schema version, event ID, source timestamp, observation timestamp, and ingest sequence;
+- session, parent-session, trace, span, and parent-span identifiers when known;
+- host, surface, project, actor kind, role, provider, and model;
+- action, target, lifecycle status, and safe aggregate attributes;
+- source adapter and confidence: `observed`, `correlated`, `inferred`, or `planned`.
+
+The vocabulary aligns where practical with OpenTelemetry's GenAI agent, model, tool, MCP, and
+evaluation conventions, but ak owns its versioned boundary because those conventions are evolving
+([OpenTelemetry GenAI][otel-genai], [semantic conventions][otel-semconv]).
+
+Adapters preserve source ordering. The ingest sequence orders delivery, not causality. Clock skew
+must never be converted into a fabricated global order. Static routing DAGs may appear only as
+`planned` topology tied to a concrete run; seeing a tool name is not proof that an agent is running.
+
+### 3. Separate collection, projection, transport, and rendering
+
+The live feature is implemented as modules rather than growing `dashboard-server.mjs`:
+
+1. Source adapters and append-aware tailers collect local evidence.
+2. A normalizer validates and allowlists canonical events.
+3. A reducer maintains bounded session aggregates and graph projections.
+4. A bounded replay log feeds snapshots and live deltas.
+5. The dashboard server mounts the endpoints and owns connection lifecycle.
+6. A separate client view renders the execution canvas and synchronized evidence rail.
+
+Historical usage indexing remains independent. Shared parsing primitives may be extracted only when
+their contracts truly match; the live path does not make the historical index its event bus.
+
+### 4. Use snapshot plus resumable Server-Sent Events
+
+`GET /api/live` returns the materialized projection, adapter health, schema version, and latest
+cursor. `GET /api/live/events` returns `text/event-stream` with named events, monotonic IDs,
+heartbeat comments, bounded replay, and `Last-Event-ID` resume.
+
+SSE is selected because the flow is one-way and read-only. The HTML standard supplies event IDs,
+automatic reconnection, and named events without adding a runtime dependency
+([WHATWG SSE][sse]). WebSockets are reserved for a future ADR if a bidirectional control plane is
+ever justified ([RFC 6455][websocket]).
+
+When a cursor is outside retention, the server emits a reset instruction and the client fetches a
+fresh snapshot. Filesystem watches are hints, reinforced with stat polling and reconciliation.
+Tailers retain byte offsets, accept only newline-terminated records, tolerate partial writes, and
+reset safely after rotation or truncation.
+
+### 5. Present one coordinated execution workspace, not disconnected modes
+
+The Live view answers five questions in order: which project and provider is this, is the session
+healthy and current, which agent is doing what now, how did execution reach this point, and what
+evidence supports that claim?
+
+Project is the dominant session identity. A sanitized project label, provider badge with visible
+text, model when reported, lifecycle, freshness, and a one-line operational summary appear before
+the visualization. Host/provider, agent role, and evidence confidence are separate concepts.
+Opaque IDs, raw adapter vocabulary, and technical source details remain subordinate.
+
+Projects are the primary navigation aggregate. The first level lists sanitized repository identity,
+provider mix, live/recent session counts, failures, and latest activity. Selecting a project reveals
+its Claude and Codex sessions, ordered live first and then by recency. A session row uses provider
+mark plus text, role/task when evidenced, model, freshness, duration, and lifecycle; UUIDs remain
+technical detail.
+
+The session browser is hierarchical. A root session or orchestrated run is one navigation unit;
+provider worker threads do not become peer rows merely because they have independently addressable
+transcripts. Selecting a root reveals its descendant agent threads as indented, connected rows,
+which remain selectable for their own map, transcript, and playback. Project `sessionCount` counts
+navigation roots, while `childSessionCount` reports nested threads separately.
+
+Hierarchy is reconciled rather than fixed at first observation. Rollout evidence may discover a
+thread before an authoritative ledger supplies its parent, so later parent evidence repairs the
+projection. Session DTOs carry host-qualified parent and root keys, a hierarchy state (`root`,
+`child`, `orphan`, or `cycle`), and whether the session is a navigation root. An unresolved orphan
+remains navigable until its parent arrives. Corrupt cycles terminate deterministically rather than
+hanging projection or navigation. Raw native IDs are never joined across hosts.
+
+The selected session workspace is a persistent split: approximately two thirds execution canvas
+and one third evidence rail. A live session defaults to **Follow Live**. Every retained session can
+enter **Review**, which uses the same canvas and transcript with play/pause, seeking, event markers,
+speed control, and an explicit **Resume Live** when the source remains active.
+
+This is an immersive operations workspace rather than a dashboard panel containing another
+node editor. The usable viewport is edge-to-edge below the global navigation; project/session
+selection is one compact context bar, source diagnostics are disclosed only on demand, and the
+timeline is docked inside the canvas. At 1440×900 the canvas, evidence rail, and timeline are all
+visible without document scrolling.
+
+The canvas renders agents as stable anchors and current or recent tools as smaller owned
+satellites. Parent-child edges express delegation; animated particles distinguish dispatch,
+tool invocation, return, and message flow. Animation carries meaning and stops under reduced
+motion or Pause. Selecting an agent focuses its subtree and filters the rail; selecting a tool
+shows its bounded safe summary. Selecting evidence in the rail highlights and centers its owner.
+
+Agent anchors are compact iconic hex/ring glyphs with role, name, model, and state—not equal-rank
+rectangular workflow cards. Current work appears beside the actor as an evidence-derived bubble;
+tool calls appear as transient tethered chips with verb, target, status, and elapsed time. Finished
+operations recede into the timeline instead of permanently crowding the world. A subtle depth field
+supports spatial orientation; a prominent spreadsheet grid and nested panel borders do not.
+
+The rail is always present and defaults to the selected session's live transcript. It distinguishes
+human, Claude/Codex, thinking/summary, tool call, tool result, status, and error. It supports search,
+role/type filters, auto-follow, an unread indicator when the user scrolls away, and collapsed
+thinking and tool detail. It is evidence, not chat.
+
+Primary labels use a source-provided display name or role; secondary labels show entity kind and
+host/model; the current-work line shows an allowlisted operation summary, lifecycle, and elapsed
+time. Generic `subagent` is a kind, not an adequate display name. Bare `unknown` is not user-facing
+copy. Missing evidence is described precisely, for example `Model not reported`,
+`Waiting for lifecycle evidence`, `Active; completion unobserved`, `Task details unavailable`,
+`Relationship inferred`, or `Source unavailable`.
+
+User-facing state describes work rather than adapter fields. Fresh observed execution is
+`Working now`; quiescent work is `Waiting for activity`; expired open work is
+`No recent activity`; retained evidence without a completion signal is `Last active`.
+`Blocked`, `Failed`, `Cancelled`, and `Completed` require explicit evidence. Continuous pulse and
+flow animation are reserved for `Working now`; waiting/stale/queued use static amber, and
+blocked/failed use static red. Text and geometry remain authoritative when color or motion is
+unavailable.
+
+Users can drag the empty canvas to pan, zoom around the pointer by wheel/trackpad, and drag
+nodes to temporary pinned positions. Visible controls provide zoom in, zoom out, fit, reset, and
+separate camera/layout resets. View transforms follow the conventional scale-and-translation
+model documented by [D3 zoom][d3-zoom]. Live updates preserve viewport, selection, expansion, and
+user pins; status-only updates cannot trigger layout. Topology changes use a seeded layered layout
+with constrained collision relaxation, not continuous force motion. Fit/recenter is explicit, not
+an automatic response to streaming data.
+
+Relationship titles use human verbs—spawned, delegated, invoked, returned, evaluated, and
+gated—rather than raw transport event names. The view batches visual changes on animation frames,
+bounds retained tools/messages, and preserves graph position while evidence streams.
+
+Labels, status colors, actor-specific geometry, and edge verbs provide redundant meaning. The
+textual inventory includes recent events, nodes, and relationships with action and confidence.
+Users can pause live updates, navigate nodes and viewport controls by keyboard, honor
+`prefers-reduced-motion`, filter by host and completion state, and inspect confidence and sanitized
+adapter health.
+
+### 6. Privacy and provenance are domain invariants
+
+Adapters construct output objects field by field. They never copy a raw record and redact it later.
+Unknown fields are dropped. Paths and source artifact identifiers are reduced or hashed before
+leaving the server. Secrets are not logged in adapter errors.
+
+Every node and edge retains its evidence source and confidence. Conflicting evidence is preserved
+and surfaced; it is not silently reconciled. Missing or failed adapters degrade independently, and
+the snapshot exposes their freshness and error category without leaking sensitive values.
+
+Confidence is field-specific where provenance differs. Project, provider, model, role, status, and
+relationship may independently be `observed`, `correlated`, `inferred`, `assumed`, or `planned`.
+The UI must not promote a host-based assumption to an observed provider claim.
+
+Collection bootstraps stable identity before following new appends. Sources are discovered
+newest-first. Codex state and bounded metadata records hydrate project, provider, model, hierarchy,
+and lifecycle; Claude records hydrate sanitized project and safe runtime metadata. The graph plane
+never receives `cwd`, transcript paths, raw agent paths, prompt-derived titles, branch names, tool
+arguments, results, or message content. The separately selected content plane may receive redacted
+message text and allowlisted tool summaries under §7.
+
+Loopback binding and the dashboard's existing request validation apply to both endpoints. SSE
+listeners and response resources are released when clients disconnect. After the last client, the
+collector and tailers stop following a bounded idle delay (30 seconds by default); a new request
+restarts them safely. Dashboard shutdown cancels the timer and closes all resources.
+
+### 7. Use two isolated planes for topology and transcript content
+
+`/api/live` and `/api/live/events` remain metadata-only. Transcript content uses a separate,
+selected-session endpoint keyed by both host and session ID. Selecting a session is the explicit
+opt-in: the browser does not prefetch other transcripts and closes the previous content stream.
+
+The server resolves the selected session through its internal discovery registry, validates the
+host and identifier, resolves the real file beneath the configured transcript root, rejects
+symlink escapes and non-regular files, and rechecks containment after replacement. It captures a
+bounded history, then tails complete appended records. Every output object is constructed
+field-by-field and every emitted string is secret-masked at the final boundary. Responses are
+`no-store`, same-origin, bounded by event/message/byte/client limits, and ephemeral after the last
+subscriber leaves.
+
+The content DTO distinguishes message, reasoning, tool call, tool result, patch/file change,
+subagent activity, status, and error. It carries all locally available, safely renderable evidence:
+human and assistant text, plaintext thinking/reasoning summaries, tool inputs and commands, tool
+results and errors, patches, MCP/web activity, and subagent messages. Every string is server-masked
+and bounded, with truncation disclosed. Encrypted reasoning is never emitted because plaintext is
+not available. Large thinking, arguments, results, and patches are collapsed by default for
+readability, not withheld.
+
+Content never enters the graph projection, its snapshot, the metadata replay ring, logs,
+telemetry, exports, or persistence. Redaction is best effort rather than a guarantee, which the UI
+states plainly. The rail cannot send messages, steer agents, replay tools, reveal masked values,
+or mutate session state.
+
+### 8. Playback reconstructs evidence; it does not record the screen
+
+Playback is a bounded chronological evidence stream for one `{host, sessionId}`. It combines the
+session's normalized topology events with its masked content entries, retains source and ingest
+timestamps, and exposes a duration plus ordered event markers. Seeking reduces events from the
+session baseline to the selected position, producing the same canvas/transcript state that
+uninterrupted application would have produced.
+
+Review is deterministic for the retained evidence window. It does not infer missing events,
+fabricate intermediate agent states, execute tools, or store video. For an active session, arriving
+events extend the review range without moving the reader's playhead; **Resume Live** applies the
+tail and returns to following. Playback history, queues, and snapshots remain bounded and disclose
+gaps or truncation.
+
+### 9. Amend bounded playback with a durable local evidence archive
+
+The bounded replay ring remains the transport buffer for SSE resume, but it is not the historical
+source of truth. Cradle-to-grave review requires a separate local evidence archive and session
+catalog. This amendment supersedes the earlier implication that all transcript content must remain
+ephemeral.
+
+Supported source artifacts are catalogued by `{host, sessionId, sourceEpoch}` whether or not they
+are actively tailed. The catalog stores only sanitized identity, provider/model metadata,
+first/latest activity, lifecycle, completeness, schema and masking versions, and stable hashes of
+source identity. It never exposes raw transcript paths.
+
+Each session has an append-only, segmented canonical timeline. Events are constructed field by
+field, masked before persistence, and retain source timestamp, source ordinal, ingest sequence,
+actor/call/span identity, provenance, and explicit gap or rotation markers. Raw source records,
+unknown fields, encrypted reasoning, unmasked tool arguments, and raw filesystem paths are never
+copied into the archive. Metadata and selected-session content remain separate public API planes.
+
+Acquisition persists source offsets and identity checkpoints atomically. Replacement or truncation
+opens a new source epoch rather than rewriting history. Projection checkpoints periodically capture
+the graph reducer state without unbounded transcript bodies. Seeking loads the nearest checkpoint
+at or before the requested time and reduces the following canonical events. At an equal archive
+high-water mark, live and replay projections must be identical.
+
+The archive is durable but not unbounded. It enforces owner-only permissions, disk quotas,
+configurable age/size retention, pinning, explicit per-session/project purge, and eviction
+tombstones. Bounds apply to open tailers, file descriptors, memory caches, SSE queues, segment size,
+and concurrent readers—not silently to historical duration. The UI reports `complete`,
+`source-active`, `prefix-missing`, `gap`, `evicted`, or `source-deleted` precisely.
+
+Schema generations are handled through registered upcasters. Unknown records degrade adapter
+health and produce safe quarantine counters; they are not persisted as raw content. Projection
+checkpoints are disposable caches and may be rebuilt from immutable canonical segments.
+
+Migration is incremental: dual-write new canonical events, verify source/archive parity and privacy
+canaries, backfill existing supported artifacts oldest-first with resumable checkpoints, switch
+playback reads to the archive, then retire bounded whole-file playback. Evidence already deleted
+before backfill remains an explicit unrecoverable gap.
+
+## Consequences
+
+### Positive
+
+- Users can understand concurrent cross-host work without reading interleaved transcripts.
+- Project/provider identity and an operational summary make the default view useful before
+  topology inspection.
+- A synchronized canvas and evidence rail preserve structural and verbatim context together.
+- A canonical event boundary prevents host-specific schemas from leaking into the UI.
+- Provenance makes authoritative, correlated, inferred, and planned topology distinguishable.
+- Snapshot plus SSE provides inexpensive live delivery and deterministic recovery.
+- One event grammar powers live following and historical review.
+- Modularization makes adapters, reducers, transport, and rendering independently testable.
+- The implementation remains zero-runtime-dependency, loopback-only, and consistent with ak's
+  theme and existing security boundary.
+
+### Negative
+
+- Host transcript schemas and ruflo/agentic-qe artifacts can drift independently.
+- Some Claude relationships may initially be inferred while Codex ledger edges are authoritative.
+- Reconciliation, replay, and lifecycle expiry introduce more state than historical polling.
+- SVG accessibility and stable dynamic layout require a parallel textual representation and
+  deliberate performance budgets.
+- A synchronized transcript rail and causal tool layout add parsing and rendering complexity.
+- Direct manipulation adds gesture arbitration, viewport persistence, and drag-versus-click
+  behavior that require focused interaction tests.
+- A clean-room implementation cannot reuse Albert's implementation assets or shortcuts.
+
+### Risks and mitigations
+
+| Risk | Mitigation |
+|------|------------|
+| False topology | Preserve confidence and source; never promote correlation to observation |
+| Transcript or hook drift | Versioned adapters, captured fixtures, unknown-field tolerance |
+| Prompt or secret leakage | Allowlisted DTOs and negative privacy tests |
+| Rotation, truncation, partial JSONL | Offset-aware tailer plus periodic reconciliation |
+| Event duplication or reconnect gaps | Stable event IDs, reducer idempotency, bounded replay/reset |
+| Worker threads appear as duplicate sessions | Reconcile late parentage; count roots and nested threads separately |
+| Parent missing or cyclic | Keep an orphan navigable; choose a deterministic cycle root; never loop indefinitely |
+| Playback differs from live state | Use the same ordered events and reducer for both modes |
+| New live events move a reviewer | Extend the range without advancing the review playhead |
+| Clock skew | Keep source time and ingest sequence; avoid invented cross-source ordering |
+| High-cardinality tools | Collapse, filter, expire, and enforce measured renderer budgets |
+| Streaming steals context | Preserve viewport, selection, expansion, and pins; recenter only on request |
+| Generic or misleading labels | Prefer source semantics; expose uncertainty; never invent specialist roles |
+| Project or model remains absent | Newest-first discovery and bounded metadata bootstrap before tailing |
+| Transcript content leaks into topology telemetry | Separate content plane, DTO, replay, and final masking gate |
+| Symlink, rotation, or huge-file attack | Realpath containment, identity recheck, and byte/record limits |
+| Slow transcript client | Bounded queue, gap/reset signal, ephemeral replay and cleanup |
+| Redaction misses sensitive prose | Visible warning, server masking, collapsed detail, local-only transport |
+| Tools overwhelm topology | Bound recent satellites and summarize older operations on their owner |
+| Gesture ambiguity | Pointer capture, a drag threshold, visible controls, and keyboard equivalents |
+| Adapter outage | Independent health state; other adapters continue |
+| Local endpoint abuse | Existing loopback, Host, Origin, and Fetch Metadata protections |
+
+## Delivery and acceptance
+
+The implementation proceeds in six independently testable milestones:
+
+1. **Identity bootstrap:** newest-first discovery, Codex ledger hydration, bounded Claude/Codex
+   metadata reads, and field-level provenance.
+2. **Operational shell:** project/provider session cards, honest missing-data copy, summaries,
+   and filters.
+3. **Execution workspace:** agent/tool canvas, causal animation, direct manipulation, and shared
+   selection.
+4. **Live evidence rail:** isolated selected-session stream, redaction, search, auto-follow,
+   unread state, and cross-highlighting.
+5. **Project catalog and review:** project-first grouping, session history, deterministic
+   play/pause/seek/speed, event markers, and live handoff.
+6. **Ecosystem enrichment:** ruflo, dual-run, agentic-qe, skill, plugin, MCP, and tool adapters.
+7. **Hardening and scale:** privacy, schema drift, reconnect, accessibility, load, aggregation,
+   and stable direct manipulation.
+
+Acceptance requires:
+
+- an appended supported event is represented within two seconds under normal local load;
+- retained transcript history for a selected local session appears within two seconds under
+  normal local load, before a new append is required;
+- authoritative parent-child edges appear when their source provides them;
+- inferred and planned state is visibly distinct from observed state;
+- graph snapshot and SSE payloads contain no prompt, response, tool argument, file content, or
+  secret;
+- the selected transcript stream contains rich masked, bounded DTOs and never encrypted reasoning;
+- reconnect is duplicate-safe and either replays or explicitly resets;
+- partial writes, rotation, child-before-parent, missing completion, and clock skew do not crash;
+- pausing stops visual movement while ingestion continues;
+- pan, pointer-centred zoom, node drag/pin, fit, and reset work without losing live updates;
+- streaming preserves viewport, selection, and manually positioned nodes;
+- visible labels identify the semantic actor/capability and current safe operation when evidence
+  supplies them, and visibly grade weaker identity;
+- no bare `unknown`, raw UUID, raw action token, or generic kind is a primary label when safe
+  semantic evidence exists;
+- graph and transcript selection are synchronized in both directions;
+- auto-follow stops when the reader scrolls away and reports unread entries;
+- default topology contains agent anchors and bounded owned tool satellites;
+- projects contain their sessions without collapsing same-ID sessions from different hosts;
+- project session counts include navigation roots only; nested worker threads remain selectable;
+- rollout-first, ledger-later evidence reparents a thread without duplicating or hiding it;
+- replay at a timestamp is deterministic and does not mutate or execute source activity;
+- an active review extends without stealing the playhead and can explicitly resume live;
+- a 1440×900 reference fixture with one coordinator, three subagents, tools, messages, and
+  completion fits all actors legibly while also showing current work, populated transcript,
+  provider/project/session identity, and the docked timeline without page scrolling;
+- active sessions require observed `running` status and active lifecycle; discovery-only,
+  timestamp-less, unknown, quiescent, and expired sessions never claim to be live;
+- disconnecting clients releases SSE listeners and the bounded idle stop releases collectors;
+- historical usage and dashboard behavior remain compatible;
+- unit, integration, privacy, accessibility, and synthetic load tests pass with `pnpm run check`.
+
+## Implementation limitations
+
+Acceptance does not imply automatic knowledge of every upstream store:
+
+- normal `ak dashboard` runs auto-discover Claude/Codex sources only; ruflo, agentic-qe, and
+  dual-run require explicit, repeatable `--live-source 'surface=path'` registration;
+- plugin, skill, MCP, and gate nodes appear only when a supported transcript or structured record
+  emits them; there is no independent registry adapter for those surfaces;
+- cardinality and UI behavior have regression coverage, but no formal measured frame-time budget
+  has been recorded. The 80-node visible bound is therefore a defensive limit, not a measured
+  rendering-capacity claim.
+
+## Rejected alternatives
+
+- **Poll the historical usage index faster:** wrong workload and no causal event semantics.
+- **WebSockets first:** unnecessary bidirectional complexity for a read-only view.
+- **Put transcript bodies in the graph stream:** creates accidental disclosure through snapshots,
+  replay, logging, and broad subscriptions.
+- **Reuse the historical whole-file reader as a live poller:** repeatedly parses large files and
+  cannot provide bounded reconnect semantics.
+- **A single global force layout:** causes drift and obscures causal hierarchy.
+- **A fitted but non-interactive SVG:** makes dense graphs hard to inspect and prevents users from
+  maintaining their own spatial context.
+- **Label every delegated node “subagent”:** reports a storage kind, not who or what is working.
+- **Copy Albert's console or styling:** incompatible licensing risk and inconsistent ak theme.
+- **Show only authoritative relationships:** safer but hides useful evidence; graded provenance
+  communicates uncertainty without discarding it.
+- **Infer all topology from timestamps:** clock skew and concurrency make the result misleading.
+
+[albert-license]: https://github.com/Sdraugel/albert/blob/96db73d06f64300bb4869fffede4541a9d0eb6e7/LICENSE.md
+[albert-graph]: https://github.com/Sdraugel/albert/blob/96db73d06f64300bb4869fffede4541a9d0eb6e7/console/public/app.js#L1977-L2234
+[agent-flow]: https://github.com/patoles/agent-flow
+[agent-flow-source]: https://github.com/patoles/agent-flow/tree/84cd2fb8c1cf5bbc1bc89cc33621685010ec8d13
+[d3-zoom]: https://d3js.org/d3-zoom
+[dynamic-graphs]: https://doi.org/10.1111/cgf.12791
+[eyes-have-it]: https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
+[graphics-aria]: https://www.w3.org/TR/graphics-aria-1.0/
+[mental-map-review]: https://doi.org/10.1016/j.ijhcs.2013.08.004
+[otel-genai]: https://github.com/open-telemetry/semantic-conventions-genai
+[otel-semconv]: https://opentelemetry.io/docs/specs/semconv/
+[sse]: https://html.spec.whatwg.org/multipage/server-sent-events.html
+[stable-graphs]: https://doi.org/10.1177/1473871620972339
+[wcag]: https://www.w3.org/TR/WCAG22/
+[websocket]: https://datatracker.ietf.org/doc/html/rfc6455
diff --git a/docs/adr/README.md b/docs/adr/README.md
index 0b21861d..a531db73 100644
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -18,6 +18,9 @@ Consequences**, and cites the grounded source it rests on where relevant.
 | [0007](0007-maintainer-admin-local-telemetry.md) | Maintainer admin: a loopback telemetry page with deliberate egress | Accepted |
 | [0008](0008-guidance-target-scope-split.md) | Machine-scoped guidance blocks land in machine files, not a repo's AGENTS.md | Accepted |
 | [0009](0009-usage-scorecard-local-transcript-analytics.md) | Usage scorecard: local transcript analytics with graded evidence | Accepted |
+| [0010](0010-provider-mediated-quota-reads.md) | Provider-mediated quota reads (the only honest denominators) | Accepted |
+| [0011](0011-local-model-provenance-zero-cost-and-transcript-fidelity.md) | Local models: provenance out-of-band, $0 per model, stated transcript fidelity | Proposed |
+| [0012](0012-live-sessions-observability.md) | Live sessions as local, evidence-graded observability | Accepted |
 
 Theme: ADRs **0001–0006** define **dual-host LLM routing and leadership** — how `ak` lets ruflo route
 each development activity (architecture, implementation, testing, review, …) to the right host (Claude
@@ -30,5 +33,20 @@ and folds the two duplicated target lists into one shared `guidanceTargets` help
 usage scorecard — local transcript analytics as a dashboard tab (no egress, so it stays inside 0005's
 offline contract rather than joining 0007's egressing admin), with an incremental index over a
 multi-GB corpus and an explicit evidence grading rule: findings claim a dollar figure only when they
-can compute one, and capability claims carry citations or are not made. See also
-`docs/PROVIDERS.md`.
+can compute one, and capability claims carry citations or are not made. **0010** supplies the one
+thing 0009 refused to invent — plan-utilisation denominators — by reading each vendor's own reported
+percentages through supported channels (Claude Code's statusLine push, Codex's `app-server` RPC),
+with provenance and freshness attached. **0011** extends the same discipline to the other end of the
+price axis: a session served by a **local** model (`ollama launch claude` / `codex`) reports no cache
+accounting, approximate token counts, and a model id the vendor documents how to forge — so
+provenance is established out-of-band via a loopback catalogue read, local models are priced at an
+exact `$0` **per model** rather than in one bucket, unrecognised models become `unpriced` instead of
+silently fallback-priced, and each local session states what its provider could not report. See also
+`docs/PROVIDERS.md`. **0012** adds a read-only Live Sessions workspace: host-specific evidence is
+normalized into a versioned, provenance-bearing event model, reduced into an interactive
+agent/tool canvas, and paired with a rich selected-session transcript rail. Separate SSE planes
+keep content out of broad topology snapshots/replay while preserving masked local evidence and
+keeping chat/control absent. Claude/Codex collection is
+implemented; ruflo, agentic-qe, and dual-run require explicit, repeatable `--live-source`
+registration. Independent plugin/skill/MCP discovery and a measured frame-time budget remain
+documented limitations rather than implied capabilities.
diff --git a/docs/ddd/live-sessions.md b/docs/ddd/live-sessions.md
new file mode 100644
index 00000000..a4732224
--- /dev/null
+++ b/docs/ddd/live-sessions.md
@@ -0,0 +1,675 @@
+# Live Sessions Domain Design
+
+This document specifies the domain model behind
+[ADR-0012](../adr/0012-live-sessions-observability.md). It follows SPARC's specification,
+architecture, refinement, and completion stages; implementation pseudocode appears at the relevant
+boundaries.
+
+## Ubiquitous language
+
+| Term | Meaning |
+|------|---------|
+| Session | One host thread or orchestrated run whose live state is observed |
+| Project | Sanitized repository identity grouping sessions across hosts and time |
+| Session key | Host-qualified identity (`host:sessionId`) preventing cross-host collisions |
+| Root session | Top-level host thread or orchestrated run used as one navigation unit |
+| Child session | Independently addressable agent/worker thread with an observed parent |
+| Orphan session | Thread whose declared parent is not currently retained; temporarily navigable |
+| Navigation root | Session presented in the project session list; normally a root or orphan |
+| Entity | A session, agent, tool, skill, plugin, MCP server, gate, or other observed capability |
+| Actor | An entity that initiates or owns an activity |
+| Activity | A bounded operation performed by an actor |
+| Display identity | Evidence-graded human label and role; never the source ID alone |
+| Current work | The latest open, allowlisted operation summary for an entity |
+| Evidence | A source record supporting a domain fact |
+| Field provenance | Evidence and confidence attached to one fact, not the whole record |
+| Confidence | `observed`, `correlated`, `inferred`, `assumed`, or `planned` |
+| Projection | The current read model derived from canonical events |
+| Topology | Nodes and typed relationships visible for a session |
+| Execution canvas | Spatial view of agents, owned tools, and causal flow for one session |
+| Evidence rail | Selected-session transcript synchronized with canvas selection |
+| Follow Live | Playhead follows the newest retained event and advances on append |
+| Review | Deterministic reconstruction of one session at a selected evidence time |
+| Playhead | Current playback offset within retained session evidence |
+| Cursor | Monotonic ingest position used for delivery and replay |
+| Adapter health | Freshness and failure state of one evidence source |
+| Quiescent | No recent activity, but no authoritative completion was observed |
+| Terminal | Completed, failed, cancelled, or expired according to lifecycle rules |
+
+“Live” describes the freshness of local observation, not distributed consensus. A planned workflow
+step is not an active agent. A correlated edge is not an observed spawn.
+
+## Bounded contexts
+
+### Evidence acquisition
+
+Owns source discovery, append-aware reading, schema-specific parsing, and source checkpoints. Its
+language is transcripts, ledgers, registries, hooks, offsets, rotation, and freshness. It does not
+decide graph layout or emit browser DTOs.
+
+Adapters are anti-corruption layers for:
+
+- Claude session and delegated-agent artifacts;
+- Codex rollouts and state-ledger spawn edges;
+- ak dual-run workflow/routing metadata;
+- ruflo swarm, agent, hook, and daemon state;
+- agentic-qe tasks, workers, evaluations, gates, and court verdicts;
+- explicit skill, plugin, MCP, and tool lifecycle records.
+
+### Live session domain
+
+Owns canonical events, identity correlation, lifecycle transitions, evidence confidence, aggregates,
+and invariants. Host-specific record shapes do not cross this boundary.
+
+### Projection and replay
+
+Owns materialized session graphs, bounded retention, cursor replay, snapshots, and idempotent
+reduction. It is optimized for current state, not historical cost analytics.
+
+### Dashboard delivery
+
+Owns HTTP/SSE representation, connection lifecycle, filters, stable SVG presentation, the
+synchronized evidence rail, and textual equivalents. It cannot manufacture domain facts.
+
+### Historical usage
+
+The existing usage index remains a separate context. It owns transcript detail, token/cost
+aggregation, and historical classification. Its session identifier can link contexts, but its
+aggregate is not the live event store.
+
+## Context relationships
+
+```text
+Claude ─┐
+Codex ──┤
+ruflo ──┤  source adapters / anti-corruption layer
+AQE ────┤
+ak ─────┘
+          ↓
+canonical event normalizer
+          ↓
+LiveSession aggregate → projection/replay → snapshot + SSE → dashboard
+          │
+          └── session-id link ──→ historical usage context
+```
+
+Evidence acquisition is upstream of the live domain. Projection/replay consumes canonical domain
+events. Dashboard delivery consumes projection DTOs. Historical usage shares identifiers only.
+
+Discovery is newest-first. Before following append-only changes, acquisition reads a bounded
+metadata prefix and Codex ledger state so stable identity is available on first paint. Bootstrap
+records establish discovery and identity; they do not fabricate current liveness for an old
+session.
+
+## Aggregates and entities
+
+### `LiveSession` aggregate root
+
+Identity is `(host, sessionId)`, with an optional cross-host `runId`. It owns:
+
+- lifecycle status and last-observed time;
+- actor identities and typed relationships;
+- active and terminal activities;
+- evidence references and confidence;
+- adapter freshness relevant to this session;
+- safe aggregate usage/duration counters when explicitly reported.
+
+The public `sessionKey` is host-qualified. The raw native ID remains available for provider lookup,
+but UI state, project membership, selection, and playback use `sessionKey`.
+
+Only the aggregate may:
+
+- attach or replace evidence for a node or edge;
+- transition lifecycle state;
+- choose the displayed confidence from competing evidence;
+- expire quiescent activities;
+- emit topology-changing domain events.
+
+### `Project` catalog entry
+
+`Project` is the primary navigation projection, not a new source of truth:
+
+```text
+Project {
+  id, label, updatedAt,
+  sessionKeys[],
+  sessionCount, childSessionCount, liveCount, completedCount,
+  providerCounts
+}
+```
+
+It is reduced from sanitized session project labels. `sessionKeys` and `sessionCount` contain
+navigation roots only; `childSessionCount` reports descendant threads without presenting them as
+peer work. Sessions are ordered live first and then by most recent evidence. A project ID is opaque
+and safe for DOM/routing; it never contains the raw working directory.
+
+Project identity means the owning repository, not the current branch or linked-worktree directory.
+For a live local worktree, the `.git` ownership pointer resolves the repository. Known nested
+worktree layouts provide a privacy-safe fallback for retained paths that no longer exist. Only the
+sanitized repository label crosses the event boundary; raw working directories and Git metadata
+paths do not.
+
+### Session hierarchy projection
+
+The full snapshot retains every session aggregate because child threads can own distinct tools,
+transcripts, and playback evidence. Serialization derives:
+
+```text
+SessionHierarchy {
+  parentSessionKey, rootSessionKey,
+  hierarchyState: root | child | orphan | cycle,
+  navigationRoot
+}
+```
+
+Parent and root keys are host-qualified. A later event with authoritative `parentSessionId`
+backfills an aggregate discovered earlier; metadata-only reconciliation does not replace its last
+meaningful activity time with the ledger scan time. A declared parent that is not retained leaves
+the thread as an `orphan` navigation root so evidence stays reachable. Parent cycles resolve to one
+deterministic navigation root and never recurse indefinitely. Selecting a root exposes descendant
+threads as a nested Miller-style tier; selecting a child changes the map/transcript context without
+promoting that child into the project root count.
+
+### `Entity` and `Actor`
+
+An entity has a stable source-scoped ID, kind, display name, role, host/surface, provider/model
+where known, and lifecycle. Display names are labels, never identity keys. `Actor` is the role an
+entity takes when it owns or initiates an activity; tools, skills, plugins, MCP servers, and gates
+remain first-class entities even when they are invocation targets.
+
+Actor kinds are open to additive extension, with an initial vocabulary:
+
+`session`, `agent`, `subagent`, `tool`, `skill`, `plugin`, `mcp`, and `gate`.
+
+Identity resolution prefers, in order:
+
+1. a source-provided role or capability name;
+2. an allowlisted tool, skill, plugin, MCP, or gate name;
+3. a stable host-provided display label;
+4. a kind plus shortened opaque identity, visibly marked generic or inferred.
+
+The reducer never assigns a specialist role from timing, graph position, or a generic `subagent`
+kind. Current work comes from a supported operation/activity field and carries its own evidence
+confidence.
+
+### `Relationship`
+
+A relationship joins two actor/session identities and has a type:
+
+- `contains`;
+- `spawned`;
+- `delegated-to`;
+- `invoked`;
+- `evaluated-by`;
+- `gated-by`;
+- `reported-by`;
+- `planned-before`.
+
+It carries evidence and confidence independently of its endpoints. The same endpoints can have
+multiple relationship types.
+
+Project, provider, model, role, lifecycle, and hierarchy each retain their own provenance. A host
+may suggest a provider, but that assumption cannot be displayed as an observed provider fact.
+
+### `Activity`
+
+An activity represents a bounded invocation or evaluation. It has source-scoped identity, actor,
+action, target, timestamps, status, optional safe counters, and evidence. Repeated updates mutate
+the aggregate state through idempotent events; they do not create duplicate visible activities.
+
+### `Source` value object
+
+Contains adapter name, opaque or hashed artifact reference, source event identity, observation time,
+and confidence. It cannot contain prompt text, response text, tool arguments, raw paths, or secrets.
+
+### `AdapterHealth` aggregate
+
+Kept separate because a source can fail without invalidating every live session. It owns adapter
+state (`starting`, `healthy`, `stale`, `degraded`, `failed`, `stopped`), last success, safe error
+category, checkpoint age, and retry state.
+
+## Canonical domain event
+
+```js
+{
+  schemaVersion: 1,
+  eventId: "ak:1842",
+  ingestSeq: 1842,
+  observedAt: "2026-07-27T18:42:01.125Z",
+  sourceTimestamp: "2026-07-27T18:42:00.991Z",
+  sessionId: "source-session-id",
+  parentSessionId: null,
+  runId: null,
+  traceId: null,
+  spanId: null,
+  parentSpanId: null,
+  host: "codex",
+  surface: "ruflo",
+  project: "agentic-kit",
+  actor: {
+    id: "source-scoped-id",
+    kind: "subagent",
+    label: "test runner",
+    role: "tester",
+    provider: "openai",
+    model: "gpt-5.6-sol"
+  },
+  action: "agent.spawned",
+  target: { id: "child-id", kind: "subagent" },
+  status: "running",
+  source: {
+    adapter: "codex-state",
+    artifact: "opaque-ref",
+    confidence: "observed"
+  },
+  attributes: {
+    durationMs: null,
+    tokenUsage: null,
+    toolCategory: null
+  }
+}
+```
+
+The envelope is inspired by OpenTelemetry's GenAI conventions but versioned by ak
+([GenAI conventions][otel-genai]). `sourceTimestamp` may be null. `ingestSeq` is delivery order,
+not a Lamport clock and not proof of causality.
+
+Initial actions include:
+
+- `session.started`, `session.updated`, `session.quiescent`, `session.completed`;
+- `actor.discovered`, `agent.spawned`, `agent.delegated`, `agent.completed`;
+- `activity.started`, `activity.updated`, `activity.completed`, `activity.failed`;
+- `quality.evaluation.started`, `quality.verdict.recorded`;
+- `topology.planned`;
+- `adapter.health.changed`;
+- `projection.reset`.
+
+Actions are bounded strings rather than a closed enumeration. Actor kinds, host, surface, status,
+confidence, and field lengths are closed or bounded at normalization.
+
+## Lifecycle rules
+
+```text
+queued → running → completed
+             ├──→ failed
+             └──→ cancelled
+
+projection lifecycle: active → quiescent → expired
+```
+
+- Authoritative terminal evidence wins over later inferred liveness.
+- `completed`, `failed`, and `cancelled` are terminal unless a source explicitly establishes a new
+  activity identity.
+- Silence can produce `quiescent` and later `expired`, never an inferred `completed`.
+- Child-before-parent creates a placeholder parent that is hydrated later.
+- A planned actor never becomes running without observed, correlated, or explicitly inferred
+  evidence.
+- Conflicting source status remains inspectable. The projection chooses a display state by evidence
+  strength, then observation time, without deleting the conflict.
+
+## Domain invariants
+
+1. Every event has a supported schema version, stable event ID, and source adapter.
+2. Event application is idempotent by event ID.
+3. Source ordering is preserved; cross-source causality is never inferred from wall-clock time.
+4. Every visible node and edge derives from an event carrying `source`.
+5. Confidence cannot be upgraded without stronger evidence.
+6. Planned topology is visibly distinct and cannot count as active work.
+7. Raw prompt, response, tool arguments, file contents, secrets, and unrestricted paths never cross
+   the graph-plane normalizer.
+8. Unknown source fields are dropped rather than forwarded.
+9. Terminal activities do not return to running under the same identity.
+10. Adapter failure does not stop unrelated adapters or erase their projections.
+11. Replay and snapshot followed by deltas converge on the same projection.
+12. Resource retention is bounded by count, age, and client-idle policy.
+13. Transcript access remains a separate, selected-session, explicit content-plane request.
+14. A display role or current-work summary cannot be stronger than its supporting evidence.
+15. Viewport position, selection, expansion, and node pins are client presentation state, never
+    domain evidence.
+16. Working directories are reduced to sanitized project labels before entering the canonical
+    boundary; raw paths never enter projection DTOs.
+17. Bootstrap discovery cannot mark an old session running without fresh lifecycle evidence.
+18. Transcript bodies are available only through the protected content plane or historical
+    context; they never enter graph snapshots, deltas, or replay.
+19. Content streams are keyed by host and session ID, server-masked, bounded, ephemeral, and
+    destroyed after the last subscriber.
+
+## Ports and adapters
+
+### Inbound ports
+
+```js
+JsonlTailer.reconcile()
+JsonlTailer.close()
+
+createLiveEvent(candidate)
+reduceLiveEvent(projection, event, bounds)
+```
+
+Each adapter owns checkpoint serialization and validates file containment before opening an
+artifact. Filesystem watch notifications trigger reconciliation; they are not treated as complete
+event delivery.
+
+### Outbound ports
+
+```js
+LiveSessionsService.snapshot()
+LiveSessionsService.replay(cursor)
+LiveSessionsService.subscribe(listener)
+LiveSessionsService.close()
+```
+
+Implementations remain in-memory for current state with bounded replay. Durable restart recovery
+comes from source checkpoints and reconciliation, not from treating the browser stream as storage.
+
+### Delivery adapters
+
+```text
+GET /api/live
+  → validate local request
+  → return projection snapshot + cursor + adapter health
+
+GET /api/live/events
+  → validate local request
+  → resume after Last-Event-ID when retained
+  → otherwise emit reset
+  → send named deltas + heartbeat comments
+  → release subscription on disconnect
+
+GET /api/live/transcripts/:host/:id/events
+  → validate local request, host, id, realpath containment, and regular file
+  → capture bounded masked history for only the selected session
+  → tail complete records through the content DTO
+  → resume from the content-plane cursor or emit a bounded gap/reset
+  → release its tailer and replay buffer after disconnect
+
+GET /api/live/playback/:host/:id
+  → validate the same selected-session boundary
+  → reconstruct bounded ordered topology and content evidence
+  → return start/end/duration, event markers, transcript items, gap/truncation, and cursor
+```
+
+SSE supplies standard event IDs and reconnection for this one-way flow
+([WHATWG Server-Sent Events][sse]).
+
+## Reduction pseudocode
+
+```text
+on source candidate:
+  parse with source schema
+  construct allowlisted canonical event
+  reject unsupported version/action/status
+  assign ingest sequence and stable delivery id
+  apply idempotently to LiveSession or AdapterHealth
+  append accepted event to bounded replay log
+  publish projection delta
+
+on topology event:
+  resolve source-scoped endpoint identities
+  create placeholders for missing endpoints
+  attach source confidence to the node and edge
+  select display confidence without deleting conflicts
+  emit node/edge add or update delta
+
+on reconnect(cursor):
+  if cursor retained:
+    replay events strictly after cursor
+  else:
+    instruct client to reset and fetch snapshot
+
+on dashboard close:
+  close every SSE response
+  stop collector timer and tailers
+```
+
+## Presentation model
+
+The UI receives only projection DTOs:
+
+- `sessions`: identity, sanitized project label, host/provider/model, status, freshness, safe
+  counters, and field provenance;
+- `nodes`: identity, session, kind, label, role, host/model, status, last action, confidence, and
+  safe metadata;
+- `edges`: source, target, relationship type, human verb, confidence, and status;
+- `health`: sanitized adapter status and aggregate counters;
+- `cursor` and `schemaVersion`.
+
+The renderer separates domain projection from presentation state. A world transform `{x, y, k}`
+controls the viewport, while a position cache and optional pin offset are keyed by entity identity.
+Status-only updates cannot trigger global layout or reset the world transform. Agents are stable
+anchors; bounded current/recent tool operations occupy deterministic satellite positions around
+their owner. Animated particles distinguish dispatch, invocation, return, and message flow.
+
+The presentation grammar treats an agent as an iconic hex/ring anchor, not a workflow card.
+Observed current work is a nearby transient bubble, and tool activity is a small tethered
+satellite that recedes after completion. The canvas owns the docked timeline and fills the usable
+viewport beside the persistent evidence rail. Project/session navigation and source diagnostics
+remain compact overlays so telemetry chrome cannot displace the work itself.
+
+Direct manipulation follows a slippy-map interaction contract:
+
+- drag empty space to pan;
+- wheel or trackpad scrolling zooms about the pointer within bounded scale;
+- drag a node beyond a click threshold to move and pin it;
+- visible controls zoom, fit, reset the camera, and reset the layout;
+- fit changes only the viewport; reset layout discards manual layout offsets;
+- stream updates preserve viewport, selection, and manually positioned nodes.
+
+The execution canvas and transcript rail share one selection model. Selecting an agent focuses its
+subtree and transcript; selecting a tool shows its safe summary; selecting evidence highlights and
+centers its owner. The initial overview shows project/provider identity, lifecycle, current work,
+and critical failures; metadata and evidence are details on demand
+([Shneiderman][eyes-have-it]).
+
+The right rail is persistent and subscribes only to the selected `{host, sessionId}`. It carries
+the rich masked conversation, plaintext reasoning, tool inputs/results/errors, patches, MCP/web
+activity, and subagent messages available from that host. It supports search, type/actor filtering,
+collapsed large details, auto-follow, and unread state. It renders transcript text as text, never
+markup, and labels masking as best effort.
+
+Project selection precedes session selection. Session selection chooses Follow Live for active
+work and Review for retained work. Both modes use the same event reducer and canvas/transcript
+renderers. Review owns `{playhead, playing, speed}`; appends extend duration without moving a
+reviewer's playhead. Seeking resets presentation state and reapplies ordered evidence through the
+selected offset. Resume Live applies the retained tail and restores automatic following.
+
+The graph has a textual inventory of recent events, nodes, and relationships with action and
+confidence. Pause freezes visual application while the client queues at most 256 deltas; overflow
+triggers snapshot reload. This implements a control for pausing auto-updating information
+([WCAG 2.2][wcag]). SVG nodes are keyboard-selectable buttons with accessible names and distinct
+actor-kind geometry ([Graphics ARIA][graphics-aria]).
+
+## Failure modes
+
+| Failure | Required behavior |
+|---------|-------------------|
+| Partial JSONL record | Retain bytes; parse only after newline terminator |
+| Rotation or truncation | Detect size/inode change; reset offset and reconcile |
+| Duplicate source event | Stable identity plus idempotent reduction |
+| Child arrives first | Create placeholder; hydrate without moving unrelated nodes |
+| Completion missing | Mark quiescent/expired, never completed |
+| Clock skew | Preserve both times and ingest sequence |
+| Adapter schema drift | Degrade that adapter; report safe category; continue others |
+| Replay cursor evicted | Emit reset; client fetches snapshot |
+| Slow/paused browser | Bound queue; coalesce status; reset on overflow |
+| Event storm | Batch projection/client updates; collapse resource nodes |
+| Secret in unknown field | Field never enters allowlisted event |
+| Watch notification lost | Periodic stat/reconciliation discovers change |
+| All clients leave | Release SSE listeners; stop collectors after bounded idle delay |
+| Transcript path escape or replacement | Realpath containment and identity recheck |
+| Transcript client falls behind | Bounded queue; emit gap/reset rather than an unbounded snapshot |
+| Encrypted reasoning | Drop at parser/DTO boundary because plaintext is unavailable |
+
+## TDD strategy
+
+Tests are written against ports and fixtures before each adapter or lifecycle transition:
+
+1. **Contract tests:** event schema, action vocabulary, privacy allowlist, confidence ordering.
+2. **Tailer tests:** append, partial record, duplicate notification, rotation, truncation, checkpoint
+   restart, and symlink/containment rejection.
+3. **Adapter fixtures:** known Claude, Codex, ruflo, agentic-qe, dual-run, skill, plugin, and MCP
+   records; unknown fields and schema generations.
+4. **Aggregate tests:** child-before-parent, conflict, terminal-state monotonicity, expiry, and
+   idempotency.
+5. **Projection tests:** snapshot-plus-replay equivalence, bounded retention, late parent
+   reconciliation, root/child counts, orphan reachability, and cycle termination.
+6. **HTTP/SSE tests:** request protections, heartbeat, named events, reconnect, reset, disconnect
+   cleanup, and multi-client fan-out.
+7. **Privacy tests:** canary secrets and encrypted reasoning must be absent from every serialized
+   plane; transcript bodies and tool details must be absent from graph output and masked in the
+   selected content stream.
+8. **UI tests:** stable coordinates, pointer-centred zoom, pan, drag-versus-click, pin persistence,
+   camera/layout reset, stream-stable viewport and selection, coordinated graph/transcript,
+   pause/resume, search, auto-follow/unread,
+   reduced motion, keyboard navigation, textual equivalence, filters, and dark/light themes.
+9. **Load tests:** synthetic concurrent sessions and high-cardinality tools establish aggregation
+   and frame-time budgets.
+
+Existing dashboard tests remain regression gates. New modules are tested directly instead of only
+through the generated HTML monolith.
+
+## Phased implementation
+
+### Evidence Archive bounded context
+
+Durable playback is owned by a separate local bounded context between acquisition and the live
+projections. Its aggregates are:
+
+- `SessionRecord`: sanitized project/session identity, lifecycle, completeness, and retention;
+- `SourceEpoch`: one stable source identity and monotonic record/byte sequence;
+- `TimelineSegment`: sealed canonical events plus checksum, time range, and schema/mask versions;
+- `ProjectionCheckpoint`: disposable reducer state at a canonical timeline cursor;
+- `RetentionPolicy`: quota, age, pin, purge, and eviction rules.
+
+The context enforces append-only stable event identity, monotonic source ordinals within an epoch,
+explicit gaps, terminal lifecycle monotonicity, selected-session content isolation, and
+replay/live equivalence at the same high-water mark. `LiveReplayStream` remains only the bounded SSE
+resume cache. Historical duration is bounded by an explicit retention policy rather than accidental
+process memory limits.
+
+### Milestone 1: Identity bootstrap
+
+- Discover sources newest-first and read bounded metadata before following appends.
+- Hydrate safe project/model/agent/hierarchy facts from Codex state.
+- Preserve field-level provenance and prevent bootstrap from fabricating liveness.
+
+### Milestone 2: Operational shell
+
+- Lead with project/provider identity, model, lifecycle, freshness, and a safe summary.
+- Replace bare unknowns with evidence-specific missing-data language.
+- Provide a project-first browser with live-first, provider-qualified sessions and a
+  selected-session execution canvas.
+
+### Milestone 3: Execution workspace
+
+- Coordinate agent anchors, owned tool satellites, causal animation, and selection.
+- Bound high-cardinality operations and summarize older work on its owner.
+- Preserve pan, zoom, drag, pins, filters, pause, and streaming state.
+
+### Milestone 4: Live evidence rail
+
+- Add a protected selected-session transcript stream with bounded history and replay.
+- Add search, auto-follow/unread state, collapsed detail, and graph cross-highlighting.
+- Keep all transcript content outside graph snapshots, deltas, and replay.
+
+### Milestone 5: Ecosystem enrichment
+
+- Add dual-run planned topology and execution updates.
+- Add ruflo swarm/agent/hook/daemon adapters.
+- Add agentic-qe task/evaluation/verdict adapters.
+- Add explicit skill, plugin, MCP, and tool activity adapters.
+
+### Milestone 6: Hardening and scale
+
+- Complete adversarial tailer, schema-drift, privacy, HTTP, and reconnect tests.
+- Complete keyboard, reduced-motion, pause, and textual-equivalence audits.
+- Verify idle resource cleanup and independent adapter degradation.
+- Measure layout/frame budgets with synthetic load.
+- Add collapse, filters, history limits, and topology stabilization.
+- Document source coverage, confidence semantics, and unsupported evidence.
+- Pass `pnpm run check`.
+
+### Milestone 7: Durable cradle-to-grave review
+
+- Add the persistent sanitized session catalog and append-only canonical timeline segments.
+- Persist source checkpoints and rotation epochs; backfill supported artifacts oldest-first.
+- Add projection checkpoints and archive-backed range/seek readers.
+- Keep live review pinned while the archive grows, then hand off to live without loss or duplicates.
+- Add quota, pin, purge, completeness, integrity recovery, schema upcasting, and privacy controls.
+- Prove restart/seek equivalence and disclose every prefix gap, eviction, and unsupported record.
+
+## Acceptance criteria
+
+- Supported appended evidence appears within two seconds under normal local load.
+- Snapshot plus retained replay converges with uninterrupted streaming.
+- The same event applied twice causes no duplicate node, edge, or activity.
+- Observed, correlated, inferred, and planned topology are visibly distinguishable.
+- A failed source is visible as degraded while other sources keep streaming.
+- Rotation, truncation, partial writes, missing parents/completions, and clock skew do not crash.
+- No excluded content appears in snapshot, SSE, logs, or adapter error responses.
+- Pause and reduced-motion behavior work; all essential data is keyboard-accessible without SVG.
+- Pan, bounded pointer-centred zoom, node drag/pin, fit, and reset have keyboard-accessible
+  controls and do not interrupt ingestion.
+- Streaming preserves the user's viewport, selection, and manually positioned nodes.
+- The overview uses evidence-backed semantic labels and current-work summaries; a generic or
+  inferred identity is visibly identified as such.
+- Graph and transcript selection remain coordinated; auto-follow yields to manual reading.
+- No client connection remains after disconnect; bounded idle or dashboard close releases
+  collectors.
+- Historical dashboard routes and usage results remain regression-compatible.
+- Clean-room provenance is documented; no Albert or Agent Flow branding/assets are copied.
+
+## Implementation conformance
+
+The implemented vertical slice lives in `src/lib/live/`, `src/lib/dashboard/`, and the thin
+`dashboard-server.mjs` composition root. Defaults are:
+
+- 750 ms reconciliation interval;
+- 256 tailed files; explicit sources take priority and Claude/Codex divide the remainder;
+- 100 projected sessions and 1,000 nodes per session;
+- 2,000 replay events;
+- 30-second quiescence and five-minute expiry;
+- 80 visible graph nodes and 256 paused browser updates;
+- 32 SSE clients and 256 queued frames per slow client, with clamps of 256 clients and 4,096
+  frames.
+- 30-second collector idle-stop after the last client.
+
+The server subscribes before taking the initial snapshot and reconciles buffered/replayed events,
+closing the snapshot-to-subscribe race. A slow-client queue overflow discards queued frames and
+sends a reset snapshot after drain.
+
+The default command discovers Claude/Codex transcripts and reads Codex ledger edges. Ruflo,
+agentic-qe, and dual-run adapters require explicit, repeatable `--live-source 'surface=path'`
+registration, where `surface` is `ruflo`, `aqe`, or `dual-run`. Explicit sources consume tailer
+capacity before Claude/Codex discovery. Paths resolve against the startup working directory and are
+not confined to the project, so registration is an operator authorization to read that file.
+Independent plugin, skill, MCP, and gate registries are not implemented. This is an explicit source
+coverage limitation; ADR-0012 is Accepted because the supported adapter contract does not claim
+automatic upstream discovery.
+
+## References
+
+- [ADR-0012](../adr/0012-live-sessions-observability.md)
+- [Albert license][albert-license]
+- [Reviewed Albert graph source][albert-graph]
+- [OpenTelemetry GenAI semantic conventions][otel-genai]
+- [WHATWG Server-Sent Events][sse]
+- [The Eyes Have It: overview, zoom/filter, details on demand][eyes-have-it]
+- [D3 zoom direct-manipulation conventions][d3-zoom]
+- [Dynamic Graph Drawing: A Survey][dynamic-graphs]
+- [Stable visualization of connected components in dynamic graphs][stable-graphs]
+- [Experimental review of mental-map preservation][mental-map-review]
+- [WCAG 2.2][wcag]
+- [WAI-ARIA Graphics Module][graphics-aria]
+
+[albert-license]: https://github.com/Sdraugel/albert/blob/96db73d06f64300bb4869fffede4541a9d0eb6e7/LICENSE.md
+[albert-graph]: https://github.com/Sdraugel/albert/blob/96db73d06f64300bb4869fffede4541a9d0eb6e7/console/public/app.js#L1977-L2234
+[d3-zoom]: https://d3js.org/d3-zoom
+[dynamic-graphs]: https://doi.org/10.1111/cgf.12791
+[eyes-have-it]: https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
+[graphics-aria]: https://www.w3.org/TR/graphics-aria-1.0/
+[mental-map-review]: https://doi.org/10.1016/j.ijhcs.2013.08.004
+[otel-genai]: https://github.com/open-telemetry/semantic-conventions-genai
+[sse]: https://html.spec.whatwg.org/multipage/server-sent-events.html
+[stable-graphs]: https://doi.org/10.1177/1473871620972339
+[wcag]: https://www.w3.org/TR/WCAG22/
diff --git a/package.json b/package.json
index 90698c89..b7bb363e 100644
--- a/package.json
+++ b/package.json
@@ -56,5 +56,5 @@
     "setup",
     "cross-platform"
   ],
-  "packageManager": "pnpm@11.13.0"
+  "packageManager": "pnpm@11.17.0"
 }
diff --git a/src/commands/x/dashboard.mjs b/src/commands/x/dashboard.mjs
index 8e1b3a74..8d512ae4 100644
--- a/src/commands/x/dashboard.mjs
+++ b/src/commands/x/dashboard.mjs
@@ -1,10 +1,11 @@
 // x dashboard — a read-only local web dashboard for the kit's health.
 //
 // Boots a loopback-only HTTP server (127.0.0.1) that serves a single
-// self-contained page plus a /api/status JSON endpoint mirroring
-// `ak status --json` (plus version drift, improvement.json, and the health
-// ring). Runs FOREGROUND and blocks until Ctrl-C; nothing is detached and
-// nothing mutates state.
+// self-contained page plus read-only status, usage, and live-session endpoints.
+// The live view tails metadata from Claude/Codex and optional explicitly
+// registered ruflo/AQE/dual-run JSONL sources. Runs FOREGROUND and blocks until
+// Ctrl-C; nothing is detached and nothing mutates state.
+import path from 'node:path';
 import { startDashboard } from '../../lib/dashboard-server.mjs';
 import { openInBrowser } from '../../lib/browser.mjs';
 import { ok, info, dim, warn } from '../../lib/output.mjs';
@@ -12,6 +13,7 @@ import { ok, info, dim, warn } from '../../lib/output.mjs';
 export const options = {
   port: { type: 'string' },
   'no-open': { type: 'boolean', default: false },
+  'live-source': { type: 'string', multiple: true },
 };
 
 export const help = `ak dashboard — read-only local health dashboard (localhost only)  [alias: ak x dashboard]
@@ -19,9 +21,10 @@ export const help = `ak dashboard — read-only local health dashboard (localhos
 Serves a self-contained web panel that visualizes the same subsystem rows
 \`ak status\` reports — versions, natives, security, learning, providers, hosts,
 mcp, ruvnet-brain, aqe — plus version drift and a learning-history sparkline.
-Bound to 127.0.0.1; auto-refreshes every 5s. Read-only: it never changes state.
-Nothing leaves your machine — the page is fully self-contained (no external
-fetches, no internet). It opens in your default browser automatically.
+Bound to 127.0.0.1; health polling defaults to 30s and the Live tab streams
+metadata with SSE. Read-only: it never changes state. Nothing leaves your
+machine — the page is fully self-contained (no external fetches, no internet).
+It opens in your default browser automatically.
 
 Runs in the foreground — press Ctrl-C to stop.
 
@@ -30,13 +33,38 @@ Usage: ak x dashboard [options]
 Options:
   --port N    port to bind on 127.0.0.1 (default 7431; 0 = ephemeral)
   --no-open   don't auto-open the browser (just print the URL — for headless use)
+  --live-source 'surface=path'
+              observe an explicit structured JSONL source; repeatable.
+              surface is ruflo, aqe, or dual-run
 
 Examples:
   ak x dashboard              serve + open http://127.0.0.1:7431
   ak x dashboard --port 8080  pick a port
-  ak x dashboard --no-open    print the URL only (SSH / headless)`;
+  ak x dashboard --no-open    print the URL only (SSH / headless)
+  ak x dashboard --live-source 'aqe=.agentic-qe/live-events.jsonl'`;
+
+/** Parse explicit structured telemetry sources without guessing upstream stores. */
+export function parseLiveSources(raw, cwd = process.cwd()) {
+  const values = Array.isArray(raw) ? raw : raw ? [raw] : [];
+  const sources = [];
+  for (const value of values) {
+    const match = /^(ruflo|aqe|dual-run)=(.+)$/.exec(String(value));
+    if (!match || !match[2].trim()) {
+      throw new TypeError(`invalid --live-source ${value}; expected ruflo|aqe|dual-run=path`);
+    }
+    sources.push({ surface: match[1], file: path.resolve(cwd, match[2].trim()) });
+  }
+  return sources;
+}
 
 export async function run({ flags }) {
+  let structuredSources;
+  try {
+    structuredSources = parseLiveSources(flags['live-source'], process.cwd());
+  } catch (e) {
+    warn(e.message);
+    return 2;
+  }
   let port = 7431;
   if (flags.port !== undefined) {
     const p = Number(flags.port);
@@ -49,7 +77,11 @@ export async function run({ flags }) {
 
   let server;
   try {
-    server = await startDashboard({ port, cwd: process.cwd() });
+    server = await startDashboard({
+      port,
+      cwd: process.cwd(),
+      liveOptions: { structuredSources },
+    });
   } catch (e) {
     warn(`could not start dashboard: ${e.message}`);
     if (e.code === 'EADDRINUSE') info(`port ${port} is busy — try: ak x dashboard --port 0`);
diff --git a/src/lib/admin-server.mjs b/src/lib/admin-server.mjs
index b5f43d9d..cf63e0f8 100644
--- a/src/lib/admin-server.mjs
+++ b/src/lib/admin-server.mjs
@@ -20,6 +20,8 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseRepoSlug, defaultCollect } from './admin-collect.mjs';
+import { ADMIN_CSS } from './admin-styles.mjs';
+import { ADMIN_THEME_JS } from './admin-theme.mjs';
 
 const HERE = path.dirname(fileURLToPath(import.meta.url));
 const PKG_ROOT = path.resolve(HERE, '..', '..');
@@ -41,7 +43,7 @@ export function tokenMatches(given, expected) {
 // The page makes ZERO external fetches; the browser enforces it via this header.
 const CSP = [
   "default-src 'none'",           // deny everything not explicitly allowed
-  "script-src 'unsafe-inline'",   // the two inline module scripts (model+view)
+  "script-src 'unsafe-inline'",   // the one inline module (theme+model+view)
   "style-src 'unsafe-inline'",    // the one inline <style>
   "connect-src 'self'",           // the ONLY network call: same-origin fetch()
   "img-src 'none'",               // sparklines are inline SVG, not <img>
@@ -79,7 +81,7 @@ export function startAdmin({ port = 7432, collect, resolveToken, pkg: injectedPk
   const token = crypto.randomBytes(32).toString('base64url');
 
   // Assemble the ONE self-contained document once (NFR-2, AC-5). Only first-party
-  // source (model + view + CSS) is interpolated — no third-party data reaches the
+  // source (theme + model + view + CSS) is interpolated — no third-party data reaches the
   // served HTML, so the document is static and self-contained.
   const modelSrc = fs.readFileSync(path.join(HERE, 'admin-model.mjs'), 'utf8');
   const viewSrc = stripModelImport(fs.readFileSync(path.join(HERE, 'admin-view.mjs'), 'utf8'));
@@ -152,7 +154,7 @@ export function startAdmin({ port = 7432, collect, resolveToken, pkg: injectedPk
 }
 
 // ── the page. One document, everything inline. Only first-party source is
-// interpolated: `${CSS}` (the style), `${modelSrc}` + `${viewSrc}` (the one
+// interpolated: `${ADMIN_CSS}` (the style), theme + model + view (the one
 // module scope). The client fetches /api/admin-stats and renders live.
 //
 // Layout: the dashboard's sticky segmented control (ADR-0005) splits the panel
@@ -162,20 +164,22 @@ export function startAdmin({ port = 7432, collect, resolveToken, pkg: injectedPk
 // Review/Humans/Activity carry count badges when something needs eyes. ─────────
 function renderPage({ modelSrc, viewSrc }) {
   return `<!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
-<meta name="color-scheme" content="dark">
+<meta name="color-scheme" content="dark light">
 <title>agentic-kit · admin</title>
-<style>${CSS}</style>
+<style>${ADMIN_CSS}</style>
 </head>
 <body>
 <main class="wrap">
   <div class="head">
+    <div class="mark" aria-hidden="true"></div>
     <h1>agentic-kit — admin</h1>
     <span class="stamp mono" data-stamp></span>
+    <button class="theme-toggle" data-theme-toggle type="button" aria-label="switch to light theme" title="toggle theme">☾</button>
   </div>
 
   <div class="gate" data-gate>
@@ -273,186 +277,9 @@ function renderPage({ modelSrc, viewSrc }) {
 
   <footer class="foot mono">maintainer-only · 127.0.0.1 · deliberate GitHub/npm egress · the credential never reaches this page</footer>
 </main>
-<script type="module">${modelSrc}
+<script type="module">${ADMIN_THEME_JS}
+${modelSrc}
 ${viewSrc}</script>
 </body>
 </html>`;
 }
-
-// ── Styles ───────────────────────────────────────────────────────────────────
-// Reproduced from scratch in the reference's visual language (RuvNet Brain
-// "amber substrate"): a graphite substrate lit by an amber mind, cyan signal,
-// green "grounded" — editorial serif display, humanist body, technical mono.
-// Self-contained: system font stacks only, NO external fonts (AC-5).
-const CSS = `
-:root{
-  color-scheme:dark;
-  --bg:#0a0c10; --bg-2:#0e1116; --surface:#13171e; --ridge:#2a3140;
-  --ink:#ece8dc; --ink-2:#c3c2b6; --muted:#8b8f9c; --faint:#5a5f6e; --on-accent:#0a0c10;
-  --accent:#f0a830; --accent-2:#5ad6ff; --accent-3:#5fd38a; --bad:#ff6b5e;
-  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
-  --sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif;
-  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,"Cascadia Code",monospace;
-  --spectrum:linear-gradient(96deg,#f0a830 0%,#ffce6a 22%,#5ad6ff 55%,#5fd38a 100%);
-}
-*{box-sizing:border-box}
-html,body{margin:0;padding:0}
-body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100vh;overflow-x:hidden}
-.mono{font-family:var(--mono)}
-.wrap{max-width:1120px;margin:0 auto;padding:26px clamp(16px,4vw,28px) 44px}
-.head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
-.head h1{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:-.012em;color:var(--ink);margin:0}
-.head::after{content:"";flex-basis:100%;height:2px;background:var(--spectrum);opacity:.9;border-radius:2px;margin-top:6px}
-.stamp{font-size:12px;color:var(--faint)}
-
-.gate{max-width:460px;background:var(--surface);border:1px solid var(--ridge);border-radius:12px;padding:26px 28px}
-.gate p{font-size:14px;color:var(--ink-2);margin:0 0 14px}
-.gate code{font-family:var(--mono);color:var(--accent);font-size:12.5px}
-.gate input{width:100%;background:var(--bg-2);border:1px solid var(--ridge);border-radius:10px;color:var(--ink);font-family:var(--mono);font-size:14px;padding:10px 12px;margin-bottom:12px}
-.gate input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
-.err{color:var(--bad);font-size:13.5px;margin:10px 0 0;min-height:1.2em}
-button{cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--ridge);border-radius:8px;font-family:var(--mono);font-size:12.5px;padding:6px 14px}
-button:hover{border-color:var(--accent)}
-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
-button.primary{background:var(--accent);color:var(--on-accent);border:0;border-radius:10px;font-weight:700;font-size:14px;padding:10px 18px;font-family:var(--sans)}
-.controls{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--mono);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
-.controls label{display:flex;align-items:center;gap:6px;cursor:pointer}
-.controls .undo{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent)}
-.controls .right{margin-left:auto}
-
-/* ── sticky segmented control (the dashboard's tab idiom, amber-keyed) ── */
-.tabbar{position:sticky;top:0;z-index:20;display:flex;padding:10px 0 12px;margin-bottom:10px;
-  background:color-mix(in srgb,var(--bg) 80%,transparent);
-  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
-  border-bottom:1px solid var(--ridge)}
-.seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;
-  background:var(--surface);border:1px solid var(--ridge);
-  max-width:100%;overflow-x:auto;scrollbar-width:none}
-.seg::-webkit-scrollbar{display:none}
-.seg-btn{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);
-  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;padding:6px 15px;border-radius:999px;
-  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:color .2s ease}
-.seg-btn[aria-selected="true"]{color:var(--ink)}
-.seg-btn:hover{color:var(--ink-2)}
-.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
-.seg-thumb{position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:0;border-radius:999px;
-  background:var(--bg-2);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--ridge));
-  box-shadow:0 1px 6px rgba(0,0,0,.45);
-  transition:left .25s cubic-bezier(.3,.7,.3,1),width .25s cubic-bezier(.3,.7,.3,1)}
-.tbadge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--bad);color:#fff;
-  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
-.tbadge[data-tone="warn"]{background:var(--accent);color:var(--on-accent)}
-.tbadge[hidden]{display:none}
-
-.panel{animation:fade .25s ease}
-.panel[hidden]{display:none}
-@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
-
-.sec{margin-top:26px}
-.sec.first{margin-top:6px}
-.sec h2{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:0 0 4px}
-.sec h2 .qual{font-size:11px;color:var(--faint);font-weight:400;letter-spacing:.03em}
-.sec .lead{font-size:13px;color:var(--muted);margin:0 0 12px;max-width:80ch}
-.sec .note{font-size:12.5px;color:var(--faint);margin:12px 0 0;max-width:80ch;line-height:1.55}
-.sec .lead em,.gate p em{color:var(--ink-2);font-style:italic}
-
-.reach{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
-.rcell{border:1px solid var(--ridge);border-radius:12px;padding:16px 18px;background:var(--surface);min-width:0}
-.rcell.hero{border-color:color-mix(in srgb,var(--accent-3) 55%,var(--ridge))}
-.rcell b{display:block;font-family:var(--display);font-weight:600;font-size:32px;line-height:1.05;color:var(--ink)}
-.rcell.hero b{color:var(--accent-3)}
-.rcell.unknown b{color:var(--faint);font-size:22px}
-.rcell .lbl{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-2);line-height:1.4}
-.rcell .win{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
-.rcell .caveat{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--ridge);font-size:11.5px;color:var(--muted);line-height:1.5}
-
-.mom{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
-.mcell{border:1px solid var(--ridge);border-radius:12px;padding:15px 17px;background:var(--surface);min-width:0}
-.mcell .top{display:flex;align-items:baseline;gap:8px}
-.mcell .top b{font-family:var(--display);font-weight:600;font-size:25px;color:var(--ink);line-height:1.1}
-.mcell .arrow{font-family:var(--mono);font-size:12px}
-.mcell .arrow.up{color:var(--accent-3)} .mcell .arrow.down{color:var(--bad)} .mcell .arrow.flat{color:var(--faint)}
-.mcell span{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);line-height:1.4}
-.mcell .faint{color:var(--faint)}
-.mcell svg{display:block;width:100%;height:30px;margin-top:9px}
-.mcell.unknown b{color:var(--faint);font-size:20px}
-
-.since{background:var(--surface);border:1px solid var(--ridge);border-radius:14px;padding:22px 24px}
-.since .headline{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:0 0 6px;line-height:1.34}
-.since .headline b{color:var(--accent)}
-.since .headline .flat{color:var(--muted)}
-.since-when{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:0 0 18px}
-.since-foot{font-size:12.5px;color:var(--faint);margin:14px 0 0;max-width:80ch;line-height:1.55}
-.dstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
-.dcell{border:1px solid var(--ridge);border-radius:10px;padding:13px 15px;background:var(--bg-2);min-width:0}
-.dcell b{display:block;font-family:var(--display);font-weight:600;font-size:24px;line-height:1.1;color:var(--muted)}
-.dcell.up b{color:var(--accent-3)} .dcell.down b{color:var(--bad)}
-.dcell.unknown b{color:var(--faint);font-size:20px}
-.dcell span{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted);line-height:1.4}
-.dcell em{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
-
-/* long lists scroll inside their card, never the page (the no-scroll contract) */
-.todo,.tl{border:1px solid var(--ridge);border-radius:12px;background:var(--surface);overflow:hidden;margin-top:12px;max-height:52vh;overflow-y:auto}
-.todo-row{display:flex;gap:14px;align-items:baseline;padding:13px 16px;border-bottom:1px solid var(--ridge)}
-.todo-row:last-child{border-bottom:none}
-.todo-row .age{font-family:var(--mono);font-size:11.5px;color:var(--bad);white-space:nowrap;min-width:74px}
-.todo-row .age.fresh{color:var(--accent)}
-.todo-row .body{min-width:0;flex:1}
-.todo-row .body a{color:var(--accent-2);text-decoration:none;font-size:14px}
-.todo-row .body a:hover{text-decoration:underline}
-.todo-row .body .by{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--faint)}
-.inbox-zero{border:1px solid color-mix(in srgb,var(--accent-3) 40%,var(--ridge));border-radius:12px;background:var(--surface);padding:18px 20px;margin-top:12px;font-size:14px;color:var(--ink-2)}
-.inbox-zero.ridge{border-color:var(--ridge)}
-.inbox-zero b{color:var(--accent-3)}
-
-.ppl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
-.pcard{border:1px solid var(--ridge);border-radius:12px;padding:15px 17px;background:var(--surface)}
-.pcard.active{border-color:color-mix(in srgb,var(--accent-3) 55%,var(--ridge))}
-.pcard .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.pcard .who a{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--accent-2);text-decoration:none}
-.pcard .span{margin:9px 0 0;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.5}
-.badge{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--ridge);color:var(--muted);white-space:nowrap}
-.badge.live{background:color-mix(in srgb,var(--accent-3) 15%,transparent);border-color:var(--accent-3);color:var(--accent-3)}
-.badge.new{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent);color:var(--accent)}
-.badge.open{border-color:var(--accent);color:var(--accent)}
-.note{color:var(--faint);font-size:12px}
-
-.tl-row{display:flex;gap:13px;align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--ridge);font-size:13.5px}
-.tl-row:last-child{border-bottom:none}
-.tl-row.is-new{background:color-mix(in srgb,var(--accent) 7%,transparent)}
-.tl-row .when{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap;min-width:82px}
-.tl-row .kind{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;min-width:34px}
-.tl-row .what{min-width:0;flex:1;color:var(--ink-2);line-height:1.45}
-.tl-row .what a{color:var(--accent-2);text-decoration:none}
-.tl-row .what a:hover{text-decoration:underline}
-.tl-row .what .who{font-family:var(--mono);font-size:11px;color:var(--faint)}
-.more-btn{cursor:pointer;background:none;border:0;color:var(--accent-2);font-family:var(--mono);font-size:12px;padding:11px 16px}
-.more-btn:hover{color:var(--ink)}
-
-.tbl-scroll{overflow-x:auto;border:1px solid var(--ridge);border-radius:12px;background:var(--surface);margin-top:12px}
-table.adm{width:100%;border-collapse:collapse;font-size:13.5px}
-table.adm th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:12px 14px;border-bottom:1px solid var(--ridge)}
-table.adm td{padding:10px 14px;border-bottom:1px solid var(--ridge);color:var(--ink-2);vertical-align:top}
-table.adm tr:last-child td{border-bottom:none}
-table.adm td.num{font-family:var(--mono)}
-
-.gaps{border:1px dashed var(--ridge);border-radius:12px;background:var(--bg-2);padding:6px 20px;margin-top:12px}
-.gaps li{list-style:none;padding:10px 0;border-bottom:1px solid var(--ridge);font-size:13.5px;color:var(--ink-2);line-height:1.55}
-.gaps li:last-child{border-bottom:none}
-.gaps li b{color:var(--ink);font-weight:500}
-.gaps li .fix{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
-.gaps li .tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:4px;margin-right:8px;border:1px solid var(--ridge);color:var(--muted)}
-.gaps li .tag.config{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent)}
-.gaps li .tag.code{border-color:color-mix(in srgb,var(--accent-2) 50%,transparent);color:var(--accent-2)}
-.gaps li .tag.design{border-color:color-mix(in srgb,var(--accent-3) 50%,transparent);color:var(--accent-3)}
-
-.doors{font-size:14px;color:var(--ink-2);background:var(--surface);border:1px solid var(--ridge);border-radius:12px;padding:16px 20px;margin-top:12px}
-.doors a{color:var(--accent-2)}
-.foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--ridge);color:var(--faint);font-size:11.5px}
-
-@media (max-width:880px){
-  .dstrip,.mom,.reach{grid-template-columns:1fr 1fr}
-  .ppl{grid-template-columns:1fr}
-}
-@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
-`;
diff --git a/src/lib/admin-styles.mjs b/src/lib/admin-styles.mjs
new file mode 100644
index 00000000..2fd789fa
--- /dev/null
+++ b/src/lib/admin-styles.mjs
@@ -0,0 +1,189 @@
+// Admin console presentation. Kept separate from the loopback server so the
+// security boundary and the browser-facing theme can evolve independently.
+export const ADMIN_CSS = `
+:root{
+  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",sans-serif;
+  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Code",monospace;
+  --display:var(--sans);
+  --r:16px; --r-sm:11px;
+}
+:root[data-theme="dark"]{
+  color-scheme:dark;
+  --bg:#000; --bg-2:#2c2c2e; --surface:#1c1c1e; --ridge:rgba(255,255,255,.09);
+  --ink:#f5f5f7; --ink-2:rgba(235,235,245,.64); --muted:rgba(235,235,245,.5); --faint:rgba(235,235,245,.38);
+  --on-accent:#fff; --accent:#0a84ff; --accent-2:#64d2ff; --accent-3:#30d158; --bad:#ff453a;
+  --material:rgba(16,16,18,.72);
+  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -20px rgba(0,0,0,.9);
+}
+:root[data-theme="light"]{
+  color-scheme:light;
+  --bg:#f5f5f7; --bg-2:#f2f2f7; --surface:#fff; --ridge:rgba(60,60,67,.12);
+  --ink:#1d1d1f; --ink-2:rgba(60,60,67,.68); --muted:rgba(60,60,67,.56); --faint:rgba(60,60,67,.42);
+  --on-accent:#fff; --accent:#007aff; --accent-2:#0071e3; --accent-3:#248a3d; --bad:#ff3b30;
+  --material:rgba(249,249,251,.78);
+  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px -22px rgba(0,0,0,.22);
+}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100vh;overflow-x:hidden}
+.mono{font-family:var(--mono)}
+.wrap{max-width:1120px;margin:0 auto;padding:24px clamp(16px,4vw,40px) 44px}
+.head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
+.head h1{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,28px);letter-spacing:-.022em;color:var(--ink);margin:0}
+.mark{width:40px;height:40px;flex:none;border-radius:10px;background:linear-gradient(165deg,#5ac8fa,#007aff 55%,#0a5fd6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(0,122,255,.55);position:relative}
+.mark::after{content:"";position:absolute;inset:11px;border-radius:50%;border:2.5px solid rgba(255,255,255,.92);border-top-color:rgba(255,255,255,.35);transform:rotate(-45deg)}
+.stamp{font-size:12px;color:var(--faint)}
+.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin-left:auto;color:var(--ink-2);background:var(--surface);border:1px solid var(--ridge);border-radius:50%;font-family:var(--sans);font-size:16px}
+.theme-toggle:hover{color:var(--accent);background:var(--bg-2)}
+
+.gate{max-width:460px;background:var(--surface);border:1px solid var(--ridge);border-radius:12px;padding:26px 28px}
+.gate p{font-size:14px;color:var(--ink-2);margin:0 0 14px}
+.gate code{font-family:var(--mono);color:var(--accent);font-size:12.5px}
+.gate input{width:100%;background:var(--bg-2);border:1px solid var(--ridge);border-radius:10px;color:var(--ink);font-family:var(--mono);font-size:14px;padding:10px 12px;margin-bottom:12px}
+.gate input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
+.err{color:var(--bad);font-size:13.5px;margin:10px 0 0;min-height:1.2em}
+button{cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--ridge);border-radius:8px;font-family:var(--mono);font-size:12.5px;padding:6px 14px}
+button:hover{border-color:var(--accent)}
+button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+button.primary{background:var(--accent);color:var(--on-accent);border:0;border-radius:10px;font-weight:700;font-size:14px;padding:10px 18px;font-family:var(--sans)}
+.controls{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--mono);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
+.controls label{display:flex;align-items:center;gap:6px;cursor:pointer}
+.controls .undo{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent)}
+.controls .right{margin-left:auto}
+
+/* ── sticky segmented control (the dashboard's tab idiom) ── */
+.tabbar{position:sticky;top:0;z-index:20;display:flex;padding:8px 0 10px;margin-bottom:10px;
+  background:var(--material);
+  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
+  border-bottom:1px solid var(--ridge)}
+.seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;
+  background:var(--bg-2);
+  max-width:100%;overflow-x:auto;scrollbar-width:none}
+.seg::-webkit-scrollbar{display:none}
+.seg-btn{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);
+  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;padding:6px 15px;border-radius:999px;
+  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:color .2s ease}
+.seg-btn[aria-selected="true"]{color:var(--ink)}
+.seg-btn:hover{color:var(--ink-2)}
+.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.seg-thumb{position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:0;border-radius:999px;
+  background:var(--surface);border:1px solid var(--ridge);
+  box-shadow:var(--shadow);
+  transition:left .25s cubic-bezier(.3,.7,.3,1),width .25s cubic-bezier(.3,.7,.3,1)}
+.tbadge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--bad);color:#fff;
+  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
+.tbadge[data-tone="warn"]{background:var(--accent);color:var(--on-accent)}
+.tbadge[hidden]{display:none}
+
+.panel{animation:fade .25s ease}
+.panel[hidden]{display:none}
+@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+
+.sec{margin-top:26px}
+.sec.first{margin-top:6px}
+.sec h2{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:0 0 4px}
+.sec h2 .qual{font-size:11px;color:var(--faint);font-weight:400;letter-spacing:.03em}
+.sec .lead{font-size:13px;color:var(--muted);margin:0 0 12px;max-width:80ch}
+.sec .note{font-size:12.5px;color:var(--faint);margin:12px 0 0;max-width:80ch;line-height:1.55}
+.sec .lead em,.gate p em{color:var(--ink-2);font-style:italic}
+
+.reach{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
+.rcell{border:1px solid var(--ridge);border-radius:12px;padding:16px 18px;background:var(--surface);min-width:0}
+.rcell.hero{border-color:color-mix(in srgb,var(--accent-3) 55%,var(--ridge))}
+.rcell b{display:block;font-family:var(--display);font-weight:600;font-size:32px;line-height:1.05;color:var(--ink)}
+.rcell.hero b{color:var(--accent-3)}
+.rcell.unknown b{color:var(--faint);font-size:22px}
+.rcell .lbl{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-2);line-height:1.4}
+.rcell .win{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
+.rcell .caveat{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--ridge);font-size:11.5px;color:var(--muted);line-height:1.5}
+
+.mom{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
+.mcell{border:1px solid var(--ridge);border-radius:12px;padding:15px 17px;background:var(--surface);min-width:0}
+.mcell .top{display:flex;align-items:baseline;gap:8px}
+.mcell .top b{font-family:var(--display);font-weight:600;font-size:25px;color:var(--ink);line-height:1.1}
+.mcell .arrow{font-family:var(--mono);font-size:12px}
+.mcell .arrow.up{color:var(--accent-3)} .mcell .arrow.down{color:var(--bad)} .mcell .arrow.flat{color:var(--faint)}
+.mcell span{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);line-height:1.4}
+.mcell .faint{color:var(--faint)}
+.mcell svg{display:block;width:100%;height:30px;margin-top:9px}
+.mcell.unknown b{color:var(--faint);font-size:20px}
+
+.since{background:var(--surface);border:1px solid var(--ridge);border-radius:14px;padding:22px 24px}
+.since .headline{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:0 0 6px;line-height:1.34}
+.since .headline b{color:var(--accent)}
+.since .headline .flat{color:var(--muted)}
+.since-when{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:0 0 18px}
+.since-foot{font-size:12.5px;color:var(--faint);margin:14px 0 0;max-width:80ch;line-height:1.55}
+.dstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
+.dcell{border:1px solid var(--ridge);border-radius:10px;padding:13px 15px;background:var(--bg-2);min-width:0}
+.dcell b{display:block;font-family:var(--display);font-weight:600;font-size:24px;line-height:1.1;color:var(--muted)}
+.dcell.up b{color:var(--accent-3)} .dcell.down b{color:var(--bad)}
+.dcell.unknown b{color:var(--faint);font-size:20px}
+.dcell span{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted);line-height:1.4}
+.dcell em{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
+
+/* long lists scroll inside their card, never the page (the no-scroll contract) */
+.todo,.tl{border:1px solid var(--ridge);border-radius:12px;background:var(--surface);overflow:hidden;margin-top:12px;max-height:52vh;overflow-y:auto}
+.todo-row{display:flex;gap:14px;align-items:baseline;padding:13px 16px;border-bottom:1px solid var(--ridge)}
+.todo-row:last-child{border-bottom:none}
+.todo-row .age{font-family:var(--mono);font-size:11.5px;color:var(--bad);white-space:nowrap;min-width:74px}
+.todo-row .age.fresh{color:var(--accent)}
+.todo-row .body{min-width:0;flex:1}
+.todo-row .body a{color:var(--accent-2);text-decoration:none;font-size:14px}
+.todo-row .body a:hover{text-decoration:underline}
+.todo-row .body .by{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--faint)}
+.inbox-zero{border:1px solid color-mix(in srgb,var(--accent-3) 40%,var(--ridge));border-radius:12px;background:var(--surface);padding:18px 20px;margin-top:12px;font-size:14px;color:var(--ink-2)}
+.inbox-zero.ridge{border-color:var(--ridge)}
+.inbox-zero b{color:var(--accent-3)}
+
+.ppl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
+.pcard{border:1px solid var(--ridge);border-radius:12px;padding:15px 17px;background:var(--surface)}
+.pcard.active{border-color:color-mix(in srgb,var(--accent-3) 55%,var(--ridge))}
+.pcard .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.pcard .who a{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--accent-2);text-decoration:none}
+.pcard .span{margin:9px 0 0;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.5}
+.badge{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--ridge);color:var(--muted);white-space:nowrap}
+.badge.live{background:color-mix(in srgb,var(--accent-3) 15%,transparent);border-color:var(--accent-3);color:var(--accent-3)}
+.badge.new{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent);color:var(--accent)}
+.badge.open{border-color:var(--accent);color:var(--accent)}
+.note{color:var(--faint);font-size:12px}
+
+.tl-row{display:flex;gap:13px;align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--ridge);font-size:13.5px}
+.tl-row:last-child{border-bottom:none}
+.tl-row.is-new{background:color-mix(in srgb,var(--accent) 7%,transparent)}
+.tl-row .when{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap;min-width:82px}
+.tl-row .kind{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;min-width:34px}
+.tl-row .what{min-width:0;flex:1;color:var(--ink-2);line-height:1.45}
+.tl-row .what a{color:var(--accent-2);text-decoration:none}
+.tl-row .what a:hover{text-decoration:underline}
+.tl-row .what .who{font-family:var(--mono);font-size:11px;color:var(--faint)}
+.more-btn{cursor:pointer;background:none;border:0;color:var(--accent-2);font-family:var(--mono);font-size:12px;padding:11px 16px}
+.more-btn:hover{color:var(--ink)}
+
+.tbl-scroll{overflow-x:auto;border:1px solid var(--ridge);border-radius:12px;background:var(--surface);margin-top:12px}
+table.adm{width:100%;border-collapse:collapse;font-size:13.5px}
+table.adm th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:12px 14px;border-bottom:1px solid var(--ridge)}
+table.adm td{padding:10px 14px;border-bottom:1px solid var(--ridge);color:var(--ink-2);vertical-align:top}
+table.adm tr:last-child td{border-bottom:none}
+table.adm td.num{font-family:var(--mono)}
+
+.gaps{border:1px dashed var(--ridge);border-radius:12px;background:var(--bg-2);padding:6px 20px;margin-top:12px}
+.gaps li{list-style:none;padding:10px 0;border-bottom:1px solid var(--ridge);font-size:13.5px;color:var(--ink-2);line-height:1.55}
+.gaps li:last-child{border-bottom:none}
+.gaps li b{color:var(--ink);font-weight:500}
+.gaps li .fix{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
+.gaps li .tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:4px;margin-right:8px;border:1px solid var(--ridge);color:var(--muted)}
+.gaps li .tag.config{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent)}
+.gaps li .tag.code{border-color:color-mix(in srgb,var(--accent-2) 50%,transparent);color:var(--accent-2)}
+.gaps li .tag.design{border-color:color-mix(in srgb,var(--accent-3) 50%,transparent);color:var(--accent-3)}
+
+.doors{font-size:14px;color:var(--ink-2);background:var(--surface);border:1px solid var(--ridge);border-radius:12px;padding:16px 20px;margin-top:12px}
+.doors a{color:var(--accent-2)}
+.foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--ridge);color:var(--faint);font-size:11.5px}
+
+@media (max-width:880px){
+  .dstrip,.mom,.reach{grid-template-columns:1fr 1fr}
+  .ppl{grid-template-columns:1fr}
+}
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+`;
diff --git a/src/lib/admin-theme.mjs b/src/lib/admin-theme.mjs
new file mode 100644
index 00000000..01a12b2f
--- /dev/null
+++ b/src/lib/admin-theme.mjs
@@ -0,0 +1,26 @@
+// Browser-side theme controller embedded into the admin's single module.
+// Sharing the dashboard key makes the two local consoles honor one preference.
+export const ADMIN_THEME_JS = `
+const ADMIN_THEME_STORE = 'ak-dash-theme';
+function adminApplyTheme(theme) {
+  const value = theme === 'light' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', value);
+  const button = document.querySelector('[data-theme-toggle]');
+  if (button) {
+    button.textContent = value === 'dark' ? '☾' : '☀';
+    button.setAttribute('aria-label', value === 'dark' ? 'switch to light theme' : 'switch to dark theme');
+  }
+}
+let adminTheme = '';
+try { adminTheme = localStorage.getItem(ADMIN_THEME_STORE) || ''; } catch { /* private mode */ }
+if (adminTheme !== 'dark' && adminTheme !== 'light') {
+  adminTheme = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+adminApplyTheme(adminTheme);
+const adminThemeButton = document.querySelector('[data-theme-toggle]');
+if (adminThemeButton) adminThemeButton.addEventListener('click', () => {
+  const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+  try { localStorage.setItem(ADMIN_THEME_STORE, next); } catch { /* private mode */ }
+  adminApplyTheme(next);
+});
+`;
diff --git a/src/lib/admin-view.mjs b/src/lib/admin-view.mjs
index 69260b19..beff8cf9 100644
--- a/src/lib/admin-view.mjs
+++ b/src/lib/admin-view.mjs
@@ -49,7 +49,7 @@ function readBaseline() {
   try { return JSON.parse(localStorage.getItem(BASE_STORE) || 'null'); } catch { return null; }
 }
 
-// ── tabs: the dashboard's segmented-control idiom (ADR-0005), amber-keyed ─────
+// ── tabs: the dashboard's themed segmented-control idiom (ADR-0005) ───────────
 // Deep-link (#review) wins over the stored tab; the token fragment never
 // collides because bootToken() strips it before this runs.
 function positionThumb() {
@@ -343,7 +343,7 @@ function render(d) {
   renderReferrers(d);
   renderGaps(d);
   renderDoors(d);
-  // Tab badges: open items are red (waiting on YOU); new-since-baseline is amber.
+  // Tab badges: open items are red (waiting on YOU); new-since-baseline uses the accent.
   const newPeople = base ? s.people.filter((p) => base.people.indexOf(p.login) === -1).length : 0;
   setBadge('review', s.openItems.length || (since.newIds.length + newPeople), s.openItems.length ? 'fail' : 'warn');
   setBadge('humans', newPeople, 'warn');
diff --git a/src/lib/codex-state.mjs b/src/lib/codex-state.mjs
index 0d451051..4162a014 100644
--- a/src/lib/codex-state.mjs
+++ b/src/lib/codex-state.mjs
@@ -24,6 +24,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { codexDir } from './paths.mjs';
 import { withDb } from './sqlite.mjs';
+import { resolveProjectLabel } from './live/project-label.mjs';
 
 /** Newest-generation state db file under ~/.codex, or null. Exported for test
  *  via the `dir` override. */
@@ -40,7 +41,9 @@ export function codexStateDb(dir = codexDir()) {
 
 /**
  * Read Codex's thread ledger. Returns
- *   { threads: Map<id, {tokensUsed, threadSource, source, model, gitBranch}>,
+ *   { threads: Map<id, {
+ *       tokensUsed, threadSource, source, model, gitBranch, agentNickname, agentRole
+ *     }>,
  *     parents: Map<childId, parentId> }
  * or null when the db is absent, unreadable, or shaped unexpectedly.
  *
@@ -54,8 +57,13 @@ export function readCodexState(opts = {}) {
     // id + thread_source are what the attribution fix rests on; without them
     // this ledger cannot answer the question and the caller must fall back.
     if (!cols.has('id') || !cols.has('thread_source')) return null;
+    // agent_nickname and agent_role are explicit orchestration metadata. Do not
+    // read `title` or `name`: those may be derived from user task content.
     const pick = ['id', 'thread_source']
-      .concat(['tokens_used', 'source', 'model', 'git_branch'].filter((c) => cols.has(c)));
+      .concat([
+        'tokens_used', 'source', 'model', 'git_branch', 'agent_nickname', 'agent_role',
+        'cwd', 'provider', 'status',
+      ].filter((c) => cols.has(c)));
     const threads = new Map();
     for (const row of db.prepare(`SELECT ${pick.join(', ')} FROM threads`).all()) {
       threads.set(String(row.id), {
@@ -64,6 +72,11 @@ export function readCodexState(opts = {}) {
         source: typeof row.source === 'string' ? row.source : null,
         model: typeof row.model === 'string' ? row.model : null,
         gitBranch: typeof row.git_branch === 'string' ? row.git_branch : null,
+        agentNickname: typeof row.agent_nickname === 'string' ? row.agent_nickname : null,
+        agentRole: typeof row.agent_role === 'string' ? row.agent_role : null,
+        project: typeof row.cwd === 'string' ? resolveProjectLabel(row.cwd) : null,
+        provider: typeof row.provider === 'string' ? row.provider : null,
+        status: typeof row.status === 'string' ? row.status : null,
       });
     }
     const parents = new Map();
diff --git a/src/lib/dashboard-server.mjs b/src/lib/dashboard-server.mjs
index 55844f52..25ff2b8f 100644
--- a/src/lib/dashboard-server.mjs
+++ b/src/lib/dashboard-server.mjs
@@ -6,6 +6,8 @@
 //   GET /api/status  → JSON: the same subsystem rows `ak status --json` emits,
 //                      PLUS version drift, the project's .claude-flow/improvement.json
 //                      (if present), and the health-history ring (if present).
+//   GET /api/live    → bounded, privacy-safe live session projection
+//   GET /api/live/events → resumable Server-Sent Events stream
 //   GET /api/usage    → the usage Aggregate MINUS sessions[] (ADR-0009)
 //   GET /api/sessions → the session list, filtered + paginated
 //   GET /api/session/:id → one transcript, secrets masked SERVER-side
@@ -19,7 +21,6 @@
 // close() on SIGINT.
 import http from 'node:http';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { execFile } from 'node:child_process';
@@ -27,6 +28,17 @@ import { driftReport, selfDrift } from './versions.mjs';
 import { drift as ruvnetBrainDrift } from './ruvnet-brain.mjs';
 import { loadKitConfig } from './config.mjs';
 import { resolveRoutes, routingSummary, ACTIVITIES, HOST_PROVIDER } from './routing.mjs';
+import { renderPage } from './dashboard/page.mjs';
+import { requestRejection } from './dashboard/request-security.mjs';
+import {
+  TRANSCRIPT_ROOTS,
+  maskMeta,
+  maskTurns,
+  parseSessionId,
+  resolvesInsideRoot,
+} from './dashboard/session-security.mjs';
+
+export { maskMeta, maskTurns, parseSessionId, resolvesInsideRoot };
 
 const HERE = path.dirname(fileURLToPath(import.meta.url));
 const PKG_ROOT = path.resolve(HERE, '..', '..');
@@ -156,75 +168,10 @@ export function foldBrainDrift(drift, b) {
 // thin adapter over usage-index.mjs — no parsing, no aggregation, no pricing.
 // ─────────────────────────────────────────────────────────────────────────────
 
-/** The transcript stores. Only used to assert containment — usage-index.mjs owns
- *  the actual reads and may override its own roots for test. */
 /** Session rows per project embedded in /api/usage. Matches what the tree
  *  renders before "load all"; the rest come from /api/sessions on demand. */
 const USAGE_TREE_PREVIEW = 25;
 
-const TRANSCRIPT_ROOTS = [
-  path.join(os.homedir(), '.claude', 'projects'),
-  path.join(os.homedir(), '.codex', 'sessions'),
-];
-
-/** Session ids are an OPAQUE, closed alphabet — no separators, no dot segments.
- *  Decoding happens FIRST, so `%2e%2e%2f` is judged as the `../` it becomes;
- *  validating the raw form and decoding after is the classic way this guard is
- *  defeated. Returns the safe id, or null (→ 400) for anything else. Pure. */
-export function parseSessionId(raw) {
-  let id;
-  try { id = decodeURIComponent(String(raw ?? '')); } catch { return null; }
-  if (id !== String(raw ?? '') && /%[0-9a-f]{2}/i.test(id)) return null; // double-encoded
-  if (!/^[A-Za-z0-9._-]{1,128}$/.test(id)) return null;
-  if (id === '.' || id === '..') return null;   // legal chars, illegal meaning
-  return id;
-}
-
-/** Defence in depth behind parseSessionId: the id, resolved against a transcript
- *  root, must land as a DIRECT child of that root. parseSessionId already bars
- *  every separator, so this cannot currently reject anything it accepted — it is
- *  here so that a future loosening of the alphabet fails this check loudly
- *  instead of quietly opening a traversal. Pure. */
-export function resolvesInsideRoot(root, id) {
-  const base = path.resolve(root);
-  const resolved = path.resolve(base, id);
-  return resolved !== base
-    && resolved.startsWith(base + path.sep)
-    && path.dirname(resolved) === base;
-}
-
-/** Run every turn body through the masker before it reaches the wire (ADR-0009
- *  §8). Copies — never mutates the caller's turns. THROWS when no masker is
- *  supplied: an unmasked transcript must fail the request, not slip out. Pure. */
-export function maskTurns(turns, maskFn) {
-  if (typeof maskFn !== 'function') throw new Error('no secret masker available — refusing to serve an unmasked transcript');
-  return (Array.isArray(turns) ? turns : []).map((t) => {
-    const out = { ...t };
-    for (const k of Object.keys(out)) {
-      if (typeof out[k] === 'string') out[k] = maskFn(out[k]);
-    }
-    return out;
-  });
-}
-
-/**
- * Mask a session's metadata. Sibling of `maskTurns` and deliberately as strict:
- * `title` is the ai-title, or the first 100 chars of the user's opening prompt
- * when there is none, and `project` / `skill` / `plugin` are transcript-derived
- * too. Forwarding `meta` around the gate meant a secret in any of them reached
- * the browser unmasked. Throws on a missing masker for the same reason
- * `maskTurns` does — fail closed, and cover the WHOLE payload, not just part.
- */
-export function maskMeta(meta, maskFn) {
-  if (typeof maskFn !== 'function') throw new Error('no secret masker available — refusing to serve unmasked metadata');
-  if (!meta || typeof meta !== 'object') return null;
-  const out = { ...meta };
-  for (const k of Object.keys(out)) {
-    if (typeof out[k] === 'string') out[k] = maskFn(out[k]);
-  }
-  return out;
-}
-
 /** Lazily bind usage-index.mjs. Deliberately NOT a static import: the module
  *  walks two transcript stores, and the panel must boot (and serve /api/status)
  *  without paying for that until the Usage tab is actually opened. Same named
@@ -260,18 +207,169 @@ function sendJson(res, status, payload) {
   res.end(JSON.stringify(payload));
 }
 
+const PRIVATE_LIVE_FIELDS = new Set([
+  'prompt', 'response', 'arguments', 'args', 'result', 'toolarguments',
+  'toolresult', 'content', 'body', 'text', 'transcript',
+]);
+const PATH_LIVE_FIELDS = new Set([
+  'artifact', 'cwd', 'path', 'filepath', 'projectroot', 'root',
+]);
+
+function publicLivePayload(value) {
+  if (Array.isArray(value)) return value.map(publicLivePayload);
+  if (!value || typeof value !== 'object') return value;
+  const out = {};
+  for (const [key, item] of Object.entries(value)) {
+    const normalized = key.toLowerCase();
+    if (PRIVATE_LIVE_FIELDS.has(normalized)) {
+      // Live is metadata-only. Even an injected/misbehaving adapter cannot
+      // promote transcript text or tool payloads into the snapshot/SSE wire.
+      continue;
+    }
+    if (PATH_LIVE_FIELDS.has(normalized) && typeof item === 'string') {
+      // Adapter artifacts are useful provenance, but their absolute transcript
+      // paths reveal usernames and directory structure. Keep only the leaf;
+      // project identity is supplied separately as a human-safe label.
+      out[key] = item.split(/[\\/]/).pop()?.slice(0, 256) || null;
+    } else {
+      out[key] = publicLivePayload(item);
+    }
+  }
+  return out;
+}
+
+function sseFrame(name, data, id) {
+  const lines = [];
+  if (id != null) lines.push(`id: ${String(id).replaceAll(/[\r\n]/g, '')}`);
+  if (name) lines.push(`event: ${name}`);
+  for (const line of JSON.stringify(publicLivePayload(data)).split('\n')) lines.push(`data: ${line}`);
+  return `${lines.join('\n')}\n\n`;
+}
+
+function transcriptSseFrame(name, data, id) {
+  const lines = [];
+  if (id != null) lines.push(`id: ${String(id).replaceAll(/[\r\n]/g, '')}`);
+  if (name) lines.push(`event: ${name}`);
+  for (const line of JSON.stringify(data).split('\n')) lines.push(`data: ${line}`);
+  return `${lines.join('\n')}\n\n`;
+}
+
+function sendTranscriptJson(res, status, payload) {
+  res.writeHead(status, {
+    'content-type': 'application/json; charset=utf-8',
+    'cache-control': 'no-store',
+    'x-content-type-options': 'nosniff',
+    'cross-origin-resource-policy': 'same-origin',
+    'referrer-policy': 'no-referrer',
+  });
+  res.end(JSON.stringify(payload));
+}
+
+/** Load the collector only when Live is requested. This keeps dashboard startup
+ * cheap and permits tests/embedders to inject a source without touching real
+ * transcript stores. */
+function lazyLive(liveOptions = {}) {
+  let instancePromise;
+  return async () => {
+    instancePromise ||= import('./live/service.mjs').then(({ LiveSessionsService }) => (
+      new LiveSessionsService(liveOptions)
+    ));
+    return instancePromise;
+  };
+}
+
 /**
  * Start the dashboard HTTP server, bound to loopback only.
  * @param {{ port?: number, cwd?: string, fetchStatus?: () => Promise<any>, usage?: any,
- *           limits?: () => Promise<any> }} [opts]
+ *           limits?: () => Promise<any>, live?: any, liveHeartbeatMs?: number,
+ *           liveClientBuffer?: number, liveMaxClients?: number, liveOptions?: any,
+ *           liveIdleMs?: number, transcripts?: any, transcriptOptions?: any,
+ *           transcriptClientBuffer?: number, transcriptMaxClients?: number }} [opts]
  * @returns {Promise<{ url: string, port: number, close: () => Promise<void> }>}
  */
-export function startDashboard({ port = 7431, cwd = process.cwd(), fetchStatus, usage, limits } = {}) {
+export function startDashboard({
+  port = 7431, cwd = process.cwd(), fetchStatus, usage, limits, live,
+  liveHeartbeatMs = 15_000, liveClientBuffer = 256, liveMaxClients = 32,
+  liveOptions = {}, liveIdleMs = 30_000, transcripts, transcriptOptions = {},
+  transcriptClientBuffer = 64, transcriptMaxClients = 16,
+} = {}) {
   const provide = fetchStatus || shellOutStatus(cwd);
   const usageApi = usage || lazyUsage();
   // Injectable like `usage`: tests must never spawn a real codex or read the
   // real ~/.config through this route. Lazy for the same reason lazyUsage is.
   const provideLimits = limits || (async () => (await import('./quota.mjs')).readLimits());
+  const provideLive = typeof live === 'function' ? live : live ? async () => live : lazyLive(liveOptions);
+  let transcriptServicePromise;
+  const provideTranscripts = typeof transcripts === 'function'
+    ? transcripts : transcripts ? async () => transcripts : async () => {
+      const [{ TranscriptStreams }, maskFn] = await Promise.all([
+        import('./live/transcript-streams.mjs'),
+        typeof usageApi.masker === 'function'
+          ? usageApi.masker() : Promise.resolve(usageApi.maskSecrets),
+      ]);
+      return new TranscriptStreams({
+        roots: { claude: TRANSCRIPT_ROOTS[0], codex: TRANSCRIPT_ROOTS[1] },
+        ...transcriptOptions, mask: maskFn,
+      });
+    };
+  const getTranscripts = async () => {
+    const service = await (transcriptServicePromise ||= Promise.resolve().then(provideTranscripts));
+    if (!service || typeof service.open !== 'function') {
+      throw new TypeError('transcript service must implement open');
+    }
+    return service;
+  };
+  let livePromise;
+  let liveStartPromise;
+  let liveStopPromise;
+  let liveIdleTimer;
+  let liveStarted = false;
+  const liveClients = new Set();
+  const transcriptClients = new Set();
+  let shuttingDown = false;
+  const cancelLiveIdle = () => {
+    if (liveIdleTimer != null) clearTimeout(liveIdleTimer);
+    liveIdleTimer = undefined;
+  };
+  const stopLive = async ({ force = false } = {}) => {
+    cancelLiveIdle();
+    if (!force && liveClients.size > 0) return;
+    if (liveStopPromise) return liveStopPromise;
+    liveStopPromise = (async () => {
+      try { await liveStartPromise; } catch {}
+      if ((!force && liveClients.size > 0) || !liveStarted) return;
+      try { await (await livePromise)?.close?.(); } catch {}
+      liveStarted = false;
+      liveStartPromise = undefined;
+    })().finally(() => { liveStopPromise = undefined; });
+    return liveStopPromise;
+  };
+  const scheduleLiveIdle = () => {
+    cancelLiveIdle();
+    if (shuttingDown || liveClients.size > 0 || !liveStarted) return;
+    const delay = Math.max(10, Math.min(3_600_000, Number(liveIdleMs) || 30_000));
+    liveIdleTimer = setTimeout(() => {
+      liveIdleTimer = undefined;
+      void stopLive();
+    }, delay);
+    liveIdleTimer.unref?.();
+  };
+  const getLive = async () => {
+    cancelLiveIdle();
+    if (liveStopPromise) await liveStopPromise;
+    if (shuttingDown) throw new Error('dashboard is closing');
+    const service = await (livePromise ||= Promise.resolve().then(provideLive));
+    if (shuttingDown) throw new Error('dashboard is closing');
+    if (!service || typeof service.snapshot !== 'function'
+      || typeof service.replay !== 'function' || typeof service.subscribe !== 'function') {
+      throw new TypeError('live service must implement snapshot, replay and subscribe');
+    }
+    if (!liveStarted) await (liveStartPromise ||= Promise.resolve()
+      .then(() => service.start?.())
+      .then(() => { liveStarted = true; })
+      .catch((error) => { liveStartPromise = null; throw error; }));
+    return service;
+  };
   const html = renderPage({ name: '@pacphi/agentic-kit', version: kitVersion() });
 
   const server = http.createServer(async (req, res) => {
@@ -280,39 +378,10 @@ export function startDashboard({ port = 7431, cwd = process.cwd(), fetchStatus,
     const url = qi < 0 ? raw : raw.slice(0, qi);
     const query = new URLSearchParams(qi < 0 ? '' : raw.slice(qi + 1));
     if (req.method !== 'GET') { res.writeHead(405).end('method not allowed'); return; }
-    // DNS-rebinding guard: the socket binds loopback-only, but a hostile page
-    // can rebind its own hostname to 127.0.0.1 and read /api/status cross-
-    // origin (the browser's SOP keys on the NAME, not the address). Only
-    // loopback literals are legitimate Hosts for this panel.
-    const host = String(req.headers.host || '').toLowerCase();
-    if (!/^(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/.test(host)) {
-      res.writeHead(403, { 'content-type': 'text/plain; charset=utf-8' });
-      res.end('forbidden (unexpected Host)');
-      return;
-    }
-
-    // Cross-site request guard. The Host check above stops a hostile page from
-    // READING a response, and no ACAO is emitted — but a plain <img>/<script>
-    // GET to 127.0.0.1 still carries a loopback Host, needs no preflight, and
-    // EXECUTES. On /api/usage that means a full-corpus parse plus a cache
-    // rewrite, and since the memo is keyed on `days`, iterating days=1..365
-    // defeats it. Blind, but a real CPU/disk DoS from any page the user visits
-    // while the panel is open.
-    //
-    // Fetch-metadata is the right tool: our own page sends `same-origin`;
-    // a hostile page sends `cross-site`. Absent (curl, older browsers) is
-    // allowed so the panel stays scriptable from the terminal — this raises the
-    // bar for the drive-by case without breaking legitimate non-browser use.
-    const fetchSite = String(req.headers['sec-fetch-site'] || '').toLowerCase();
-    if (fetchSite && fetchSite !== 'same-origin' && fetchSite !== 'none') {
-      res.writeHead(403, { 'content-type': 'text/plain; charset=utf-8' });
-      res.end('forbidden (cross-site request)');
-      return;
-    }
-    const origin = String(req.headers.origin || '').toLowerCase();
-    if (origin && !/^https?:\/\/(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/.test(origin)) {
+    const rejected = requestRejection(req.headers);
+    if (rejected) {
       res.writeHead(403, { 'content-type': 'text/plain; charset=utf-8' });
-      res.end('forbidden (foreign Origin)');
+      res.end(rejected);
       return;
     }
 
@@ -330,6 +399,307 @@ export function startDashboard({ port = 7431, cwd = process.cwd(), fetchStatus,
       return;
     }
 
+    if (url === '/api/live') {
+      try {
+        const service = await getLive();
+        sendJson(res, 200, publicLivePayload(await service.snapshot()));
+      } catch {
+        sendJson(res, 503, { error: 'live telemetry unavailable' });
+      } finally {
+        scheduleLiveIdle();
+      }
+      return;
+    }
+
+    if (url === '/api/live/events') {
+      const maxClients = Math.max(1, Math.min(256, Number(liveMaxClients) || 32));
+      if (liveClients.size >= maxClients) {
+        sendJson(res, 503, { error: 'too many live telemetry clients' });
+        return;
+      }
+      let service;
+      try { service = await getLive(); } catch {
+        sendJson(res, 503, { error: 'live telemetry unavailable' });
+        return;
+      }
+      res.writeHead(200, {
+        'content-type': 'text/event-stream; charset=utf-8',
+        'cache-control': 'no-store',
+        connection: 'keep-alive',
+        'x-accel-buffering': 'no',
+      });
+      res.flushHeaders?.();
+
+      let closed = false;
+      let blocked = false;
+      let overflowed = false;
+      const queue = [];
+      const limit = Math.max(1, Math.min(4096, Number(liveClientBuffer) || 256));
+      const write = (frame) => {
+        if (closed) return;
+        if (blocked) {
+          if (queue.length < limit) queue.push(frame);
+          else overflowed = true;
+          return;
+        }
+        blocked = !res.write(frame);
+      };
+      const flush = async () => {
+        if (closed) return;
+        blocked = false;
+        if (overflowed) {
+          overflowed = false;
+          queue.length = 0;
+          try { write(sseFrame('init', { reset: true, snapshot: await service.snapshot() })); } catch {}
+        }
+        while (!blocked && queue.length) write(queue.shift());
+      };
+      res.on('drain', flush);
+
+      const cursorHeader = req.headers['last-event-id'];
+      const cursor = typeof cursorHeader === 'string' && cursorHeader.length <= 256
+        ? cursorHeader : null;
+      let replay = { reset: false, events: [] };
+      if (cursorHeader != null && cursor == null) replay = { reset: true, events: [] };
+      else if (cursor != null && cursor !== '') {
+        try { replay = await service.replay(String(cursor)); } catch { replay = { reset: true, events: [] }; }
+      }
+      // Subscribe before taking the snapshot. Events published while the
+      // initial state is assembled are buffered and reconciled below, closing
+      // the snapshot→subscribe loss window.
+      let initializing = true;
+      const pending = [];
+      const onEvent = (event) => {
+        if (initializing) pending.push(event);
+        else {
+          try { write(sseFrame('delta', event, event?.eventId)); } catch { cleanup(true); }
+        }
+      };
+      let unsubscribe;
+      try { unsubscribe = service.subscribe(onEvent); } catch {
+        res.end();
+        scheduleLiveIdle();
+        return;
+      }
+      let heartbeat = null;
+      const cleanup = (terminate = false) => {
+        if (closed) return;
+        closed = true;
+        if (heartbeat != null) clearInterval(heartbeat);
+        queue.length = 0;
+        res.off('drain', flush);
+        if (typeof unsubscribe === 'function') unsubscribe();
+        else if (unsubscribe && typeof unsubscribe.unsubscribe === 'function') unsubscribe.unsubscribe();
+        liveClients.delete(cleanup);
+        scheduleLiveIdle();
+        if (terminate && !res.writableEnded) res.end();
+      };
+      liveClients.add(cleanup);
+      req.once('close', cleanup);
+      res.once('close', cleanup);
+      let snapshot;
+      let postSnapshot = { reset: false, events: [] };
+      let snapshotPendingCount;
+      try {
+        snapshot = await service.snapshot();
+        snapshotPendingCount = pending.length;
+        if (snapshot?.cursor) postSnapshot = await service.replay(String(snapshot.cursor));
+      } catch {
+        cleanup(true);
+        return;
+      }
+      if (closed) return;
+      // Inspect replay while callbacks still buffer. A custom/async service may
+      // publish while materializing this result even though replay() itself has
+      // resolved.
+      const after = !postSnapshot?.reset && Array.isArray(postSnapshot?.events)
+        ? postSnapshot.events : [];
+      if (!replay?.reset) {
+        for (const event of Array.isArray(replay?.events) ? replay.events : []) {
+          write(sseFrame('delta', event, event?.eventId));
+        }
+      }
+      write(sseFrame('init', { reset: !!replay?.reset, snapshot }));
+      const afterIds = new Set(after.map((event) => event?.eventId).filter(Boolean));
+      const emitted = new Set();
+      const buffered = [...pending];
+      // Take the final buffer snapshot and flip modes without an await between
+      // them. JavaScript cannot dispatch a subscription callback in that gap:
+      // every later event therefore goes directly to the response.
+      initializing = false;
+      for (const [index, event] of [...after, ...buffered].entries()) {
+        const id = event?.eventId;
+        const pendingIndex = index - after.length;
+        // Events buffered after snapshot() resolved cannot be represented by
+        // that immutable snapshot. Deliver them even if replay() captured its
+        // result before they arrived. Earlier identified events absent from
+        // replay(snapshot.cursor) are already represented by the snapshot.
+        if (id && !afterIds.has(id)
+          && (pendingIndex < 0 || pendingIndex < snapshotPendingCount)) continue;
+        if (id && emitted.has(id)) continue;
+        if (id) emitted.add(id);
+        write(sseFrame('delta', event, id));
+      }
+      heartbeat = setInterval(() => write(': heartbeat\n\n'), Math.max(100, liveHeartbeatMs));
+      heartbeat.unref?.();
+      return;
+    }
+
+    const playbackMatch = /^\/api\/live\/playback\/([^/]+)\/([^/]+)$/.exec(url);
+    if (playbackMatch) {
+      const host = playbackMatch[1];
+      const id = parseSessionId(playbackMatch[2]);
+      const rawAt = query.get('at');
+      const atMs = rawAt == null || rawAt === '' ? null : Number(rawAt);
+      if (!['claude', 'codex'].includes(host) || !id
+        || (atMs != null && (!Number.isFinite(atMs) || atMs < 0
+          || atMs > Number.MAX_SAFE_INTEGER))) {
+        sendTranscriptJson(res, 400, { error: 'invalid playback target or seek' });
+        return;
+      }
+      let service;
+      let opened = false;
+      try {
+        service = await getTranscripts();
+        const stream = service.open(host, id);
+        opened = true;
+        if (typeof stream?.playback !== 'function') {
+          throw new TypeError('transcript playback unavailable');
+        }
+        sendTranscriptJson(res, 200, stream.playback({ atMs }));
+      } catch (error) {
+        const message = String(error?.message ?? '');
+        const status = /invalid|seek/.test(message) ? 400
+          : (/not found|outside/.test(message) ? 404 : 503);
+        sendTranscriptJson(res, status, {
+          error: status === 404 ? 'transcript not found'
+            : (status === 400 ? 'invalid playback target or seek'
+              : 'transcript playback unavailable'),
+        });
+      } finally {
+        if (opened) service?.release?.(host, id);
+      }
+      return;
+    }
+
+    const transcriptMatch = /^\/api\/live\/transcripts\/([^/]+)\/([^/]+)\/events$/.exec(url);
+    if (transcriptMatch) {
+      const host = transcriptMatch[1];
+      const id = parseSessionId(transcriptMatch[2]);
+      if (!['claude', 'codex'].includes(host) || !id) {
+        sendJson(res, 400, { error: 'invalid transcript target' });
+        return;
+      }
+      const maxClients = Math.max(1, Math.min(64, Number(transcriptMaxClients) || 16));
+      if (transcriptClients.size >= maxClients) {
+        sendJson(res, 503, { error: 'too many transcript clients' });
+        return;
+      }
+      let stream;
+      let transcriptService;
+      try {
+        transcriptService = await getTranscripts();
+        stream = transcriptService.open(host, id);
+      } catch (error) {
+        const message = String(error?.message ?? '');
+        const status = /invalid/.test(message) ? 400 : (/not found|outside/.test(message) ? 404 : 503);
+        sendJson(res, status, { error: status === 404 ? 'transcript not found' : 'transcript unavailable' });
+        return;
+      }
+      res.writeHead(200, {
+        'content-type': 'text/event-stream; charset=utf-8',
+        'cache-control': 'no-store',
+        connection: 'keep-alive',
+        'x-accel-buffering': 'no',
+        'x-content-type-options': 'nosniff',
+        'cross-origin-resource-policy': 'same-origin',
+        'referrer-policy': 'no-referrer',
+      });
+      res.flushHeaders?.();
+
+      let closed = false;
+      let blocked = false;
+      let overflowed = false;
+      const queue = [];
+      const limit = Math.max(1, Math.min(512, Number(transcriptClientBuffer) || 64));
+      const write = (frame) => {
+        if (closed) return;
+        if (blocked) {
+          if (queue.length < limit) queue.push(frame);
+          else overflowed = true;
+          return;
+        }
+        blocked = !res.write(frame);
+      };
+      const flush = () => {
+        if (closed) return;
+        blocked = false;
+        if (overflowed) {
+          overflowed = false;
+          queue.length = 0;
+          write(transcriptSseFrame('gap', {
+            sessionKey: `${host}:${id}`, reason: 'client-overflow',
+          }));
+        }
+        while (!blocked && queue.length) write(queue.shift());
+      };
+      res.on('drain', flush);
+      let initializing = true;
+      const pending = [];
+      const onEvent = (event) => {
+        if (initializing) pending.push(event);
+        else write(transcriptSseFrame('delta', event, event?.eventId));
+      };
+      let unsubscribe;
+      try { unsubscribe = stream.subscribe(onEvent); } catch {
+        transcriptService?.release?.(host, id);
+        res.end();
+        return;
+      }
+      let heartbeat = null;
+      const cleanup = (terminate = false) => {
+        if (closed) return;
+        closed = true;
+        if (heartbeat) clearInterval(heartbeat);
+        queue.length = 0;
+        res.off('drain', flush);
+        if (typeof unsubscribe === 'function') unsubscribe();
+        transcriptClients.delete(cleanup);
+        transcriptService?.release?.(host, id);
+        if (terminate && !res.writableEnded) res.end();
+      };
+      transcriptClients.add(cleanup);
+      req.once('close', cleanup);
+      res.once('close', cleanup);
+
+      const header = req.headers['last-event-id'];
+      const cursor = typeof header === 'string' && header.length <= 256 ? header : null;
+      let replay = { reset: header != null && cursor == null, events: [] };
+      try {
+        if (cursor) replay = stream.replay(cursor);
+        const snapshot = stream.snapshot();
+        if (!replay.reset) {
+          for (const event of replay.events ?? []) {
+            write(transcriptSseFrame('delta', event, event?.eventId));
+          }
+        }
+        write(transcriptSseFrame('init', { reset: !!replay.reset, snapshot }));
+      } catch {
+        cleanup(true);
+        return;
+      }
+      const emitted = new Set((replay.events ?? []).map((event) => event?.eventId));
+      for (const event of pending) {
+        if (!event?.eventId || !emitted.has(event.eventId)) {
+          write(transcriptSseFrame('delta', event, event?.eventId));
+        }
+      }
+      initializing = false;
+      heartbeat = setInterval(() => write(': heartbeat\n\n'), Math.max(1_000, liveHeartbeatMs));
+      heartbeat.unref?.();
+      return;
+    }
+
     // ── Usage (ADR-0009). Lazy: nothing below runs until the tab is opened. ──
 
     // Rollups only. Dropping the top-level sessions[] is NOT sufficient on its
@@ -435,2117 +805,16 @@ export function startDashboard({ port = 7431, cwd = process.cwd(), fetchStatus,
       resolve({
         url: `http://127.0.0.1:${actual}/`,
         port: actual,
-        close: () => new Promise((res) => server.close(() => res())),
+        close: async () => {
+          shuttingDown = true;
+          cancelLiveIdle();
+          for (const cleanup of [...liveClients]) cleanup(true);
+          for (const cleanup of [...transcriptClients]) cleanup(true);
+          await new Promise((res) => server.close(() => res(undefined)));
+          await stopLive({ force: true });
+          try { await (await transcriptServicePromise)?.close?.(); } catch {}
+        },
       });
     });
   });
 }
-
-// ─────────────────────────────────────────────────────────────────────────────
-// The page. One document, everything inline. Only `name` and `version` are
-// interpolated server-side; the client fetches /api/status and renders live.
-//
-// Layout: a sticky segmented control (Apple's tab idiom) splits the panel into
-// five views — Overview, Hosts & Routing, Providers, Runtime, Intelligence.
-// Problems never hide behind a tab: Overview aggregates every attention card,
-// and each tab carries a count badge when something in it is failing/warning.
-// ─────────────────────────────────────────────────────────────────────────────
-function renderPage({ name, version }) {
-  return `<!doctype html>
-<html lang="en" data-theme="dark">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="color-scheme" content="dark light">
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a84ff'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E">
-<title>agentic-kit · dashboard</title>
-<style>${CSS}</style>
-</head>
-<body>
-<header class="band">
-  <div class="band-lead">
-    <div class="mark" aria-hidden="true"></div>
-    <div class="band-titles">
-      <h1 class="kit-name">${escapeHtml(name)}</h1>
-      <div class="kit-sub"><span class="mono ver">v${escapeHtml(version)}</span><span class="sep">·</span><span>local diagnostic panel</span></div>
-    </div>
-  </div>
-  <div class="band-verdict">
-    <span class="dot" id="verdict-dot" data-level="unknown"></span>
-    <span class="verdict-text" id="verdict-text">connecting…</span>
-  </div>
-  <div class="band-tools">
-    <span class="pulse" id="pulse"></span>
-    <span class="upd mono" id="updated">—</span>
-    <div class="poll">
-      <button class="play on" id="poll-play" type="button" title="polling on — click to pause" aria-label="pause polling">&#9208;</button>
-      <button class="ivl mono" id="poll-ivl" type="button" title="polling interval" aria-haspopup="true" aria-expanded="false">30s <span class="caret" aria-hidden="true">&#9662;</span></button>
-      <button class="refresh" id="poll-now" type="button" title="refresh now" aria-label="refresh now">&#8635;</button>
-    </div>
-    <button class="toggle" id="theme-toggle" type="button" aria-label="toggle theme" title="toggle theme">
-      <span class="icon" id="theme-icon" aria-hidden="true"></span>
-    </button>
-  </div>
-  <div class="menu" id="poll-menu" hidden>
-    <button type="button" data-ms="15000">15s</button>
-    <button type="button" data-ms="30000">30s</button>
-    <button type="button" data-ms="60000">1m</button>
-    <button type="button" data-ms="300000">5m</button>
-    <button type="button" data-ms="900000">15m</button>
-    <button type="button" data-ms="1800000">30m</button>
-    <div class="sep"></div>
-    <button type="button" data-ms="3600000">1h</button>
-    <button type="button" data-ms="21600000">6h</button>
-    <button type="button" data-ms="43200000">12h</button>
-    <button type="button" data-ms="86400000">24h</button>
-  </div>
-</header>
-
-<nav class="tabbar">
-  <div class="seg" role="tablist" aria-label="dashboard sections" id="seg">
-    <span class="seg-thumb" id="seg-thumb" aria-hidden="true"></span>
-    <button class="seg-btn" role="tab" id="tab-overview" data-tab="overview" aria-selected="true" aria-controls="panel-overview" type="button">Overview<span class="badge" id="badge-overview" hidden></span></button>
-    <button class="seg-btn" role="tab" id="tab-hosts" data-tab="hosts" aria-selected="false" aria-controls="panel-hosts" type="button">Hosts &amp; Routing<span class="badge" id="badge-hosts" hidden></span></button>
-    <button class="seg-btn" role="tab" id="tab-providers" data-tab="providers" aria-selected="false" aria-controls="panel-providers" type="button">Providers<span class="badge" id="badge-providers" hidden></span></button>
-    <button class="seg-btn" role="tab" id="tab-runtime" data-tab="runtime" aria-selected="false" aria-controls="panel-runtime" type="button">Runtime<span class="badge" id="badge-runtime" hidden></span></button>
-    <button class="seg-btn" role="tab" id="tab-intel" data-tab="intel" aria-selected="false" aria-controls="panel-intel" type="button">Intelligence<span class="badge" id="badge-intel" hidden></span></button>
-    <button class="seg-btn" role="tab" id="tab-usage" data-tab="usage" aria-selected="false" aria-controls="panel-usage" type="button">Usage</button>
-  </div>
-</nav>
-
-<main class="wrap">
-  <section class="panel" id="panel-overview" role="tabpanel" aria-labelledby="tab-overview">
-    <div class="summary" id="summary" hidden></div>
-    <div class="notice" id="update-notice" hidden></div>
-    <div id="attention" aria-live="polite"></div>
-    <h2 class="subhead" id="map-head" hidden>all subsystems</h2>
-    <div class="statusmap" id="statusmap"></div>
-  </section>
-
-  <section class="panel" id="panel-hosts" role="tabpanel" aria-labelledby="tab-hosts" hidden>
-    <div id="cards-hosts"></div>
-    <section class="strip" id="routing" hidden>
-      <div class="strip-head">
-        <h2 class="strip-title">per-activity routing</h2>
-        <span class="mono strip-note" id="routing-note"></span>
-      </div>
-      <div class="route-matrix" id="route-matrix"></div>
-    </section>
-  </section>
-
-  <section class="panel" id="panel-providers" role="tabpanel" aria-labelledby="tab-providers" hidden>
-    <div id="cards-providers"></div>
-    <section class="strip" id="models" hidden>
-      <div class="strip-head">
-        <h2 class="strip-title">routed models</h2>
-        <span class="mono strip-note" id="models-note"></span>
-      </div>
-      <div class="note"><span class="i">&#8505;</span><span>This is your <b>per-activity routing policy</b> &mdash;
-        which host and model ak <i>assigns</i> to each kind of work. It is projected into
-        <b>agentic-qe</b> agent overrides and <b>ak dual run</b> pipelines; agentic-qe also has its own
-        model router, so a route here is the assignment, not a guarantee.
-        It does <b>not</b> govern the model an interactive Claude Code or codex CLI session uses &mdash;
-        you choose that per session with <span class="mono">/model</span>.
-        For the models that <b>actually ran</b>, see <b>Usage &rarr; Scorecard</b>.</span></div>
-      <div class="model-list" id="model-list"></div>
-    </section>
-  </section>
-
-  <section class="panel" id="panel-runtime" role="tabpanel" aria-labelledby="tab-runtime" hidden>
-    <div id="cards-runtime"></div>
-  </section>
-
-  <section class="panel" id="panel-intel" role="tabpanel" aria-labelledby="tab-intel" hidden>
-    <div id="cards-intel"></div>
-    <section class="strip" id="history" hidden>
-      <div class="strip-head">
-        <h2 class="strip-title">learning over time</h2>
-        <span class="mono strip-note" id="strip-note"></span>
-      </div>
-      <div class="spark-row">
-        <figure class="spark">
-          <figcaption class="mono">patterns learned</figcaption>
-          <div class="spark-svg" id="spark-patterns"></div>
-        </figure>
-        <figure class="spark">
-          <figcaption class="mono">improvement Δpp</figcaption>
-          <div class="spark-svg" id="spark-delta"></div>
-        </figure>
-      </div>
-    </section>
-  </section>
-
-  <section class="panel" id="panel-usage" role="tabpanel" aria-labelledby="tab-usage" hidden>
-    <div class="usage-bar">
-      <div class="seg subseg" role="tablist" aria-label="usage views" id="usage-seg">
-        <button class="seg-btn" role="tab" data-view="score" aria-selected="true" type="button">Scorecard</button>
-        <button class="seg-btn" role="tab" data-view="limits" aria-selected="false" type="button">Limits</button>
-        <button class="seg-btn" role="tab" data-view="findings" aria-selected="false" type="button">Findings<span class="segbadge" id="u-findings-n" hidden></span></button>
-        <button class="seg-btn" role="tab" data-view="sessions" aria-selected="false" type="button">Sessions<span class="mono seg-n" id="u-sessions-n"></span></button>
-        <button class="seg-btn" role="tab" data-view="transcript" aria-selected="false" type="button">Transcript</button>
-      </div>
-      <div class="filters" id="usage-days" role="group" aria-label="window">
-        <button class="chipf" type="button" data-days="7">7d</button>
-        <button class="chipf on" type="button" data-days="14">14d</button>
-        <button class="chipf" type="button" data-days="30">30d</button>
-      </div>
-    </div>
-
-    <section class="view" id="v-score">
-      <div class="hero" id="u-hero"></div>
-      <div class="note"><span class="i">&#8505;</span><span>Dollar figures are <b>API list-price equivalents</b> &mdash;
-        what these tokens would cost metered. On a Max/Pro subscription you are not billed this.
-        Cache reads bill at 0.1&times; input and cache writes at 1.25&times;; ignoring that would overstate
-        a window by roughly <b>10&times;</b>. <span class="mono" id="u-asof"></span></span></div>
-      <section class="strip">
-        <div class="sh"><h2>cost per day</h2><span class="n mono" id="u-days-note"></span></div>
-        <div class="days" id="u-daybars"></div>
-      </section>
-      <div class="two">
-        <section class="strip">
-          <div class="sh"><h2>by host</h2><span class="n mono">claude vs codex</span></div>
-          <div class="psplit" id="u-hosts"></div>
-          <div class="tokbar" id="u-tokbar"></div>
-          <div class="legend" id="u-toklegend"></div>
-        </section>
-        <section class="strip">
-          <div class="sh"><h2>when you work</h2><span class="n mono">responses &middot; local time</span></div>
-          <div id="u-punch"></div>
-        </section>
-      </div>
-      <div class="two">
-        <section class="strip">
-          <div class="sh"><h2>models in play</h2><span class="n mono">observed in transcripts &middot; by api-equivalent cost<span class="n-sub" id="u-models-note"></span></span></div>
-          <div id="u-models"></div>
-        </section>
-        <section class="strip">
-          <div class="sh"><h2>projects</h2><span class="n mono" id="u-projects-note"></span></div>
-          <div id="u-projects"></div>
-        </section>
-      </div>
-      <section class="strip">
-        <div class="sh"><h2>what you worked on</h2>
-          <span class="n mono">classified from titles, skills &amp; tool mix &middot; click to filter</span></div>
-        <div id="u-cats"></div>
-        <div class="legend" style="margin-top:11px">
-          <span class="lg"><i class="conf"></i>dot opacity = classifier confidence</span>
-          <span class="lg">Unclassified is shown, never force-fit</span>
-        </div>
-      </section>
-    </section>
-
-    <section class="view" id="v-limits" hidden>
-      <div class="note"><span class="i">&#8505;</span><span>Utilization here is <b>vendor-reported</b> &mdash;
-        the plan&rsquo;s own percentages, a denominator local transcripts cannot compute.
-        Claude&rsquo;s numbers arrive via the managed statusLine while a session runs; Codex&rsquo;s come from
-        <b>codex app-server</b> using codex&rsquo;s own login. This panel reads no vendor credential.</span></div>
-      <div class="two">
-        <section class="strip">
-          <div class="sh"><h2>claude plan limits</h2><span class="n mono" id="u-lim-claude-note"></span></div>
-          <div class="lim" id="u-lim-claude"></div>
-        </section>
-        <section class="strip">
-          <div class="sh"><h2>codex plan limits</h2><span class="n mono" id="u-lim-codex-note"></span></div>
-          <div class="lim" id="u-lim-codex"></div>
-        </section>
-      </div>
-      <div class="ins-grid" id="u-lim-insights"></div>
-      <div class="foot">windows are keyed by their duration, never by the vendor&rsquo;s primary/secondary slot &middot;
-        stale data is labelled stale, not hidden</div>
-    </section>
-
-    <section class="view" id="v-findings" hidden>
-      <div class="note"><span class="i">&#8505;</span><span id="u-findings-note"></span></div>
-      <div class="ins-grid" id="u-insights"></div>
-      <div class="foot">grounded in local measurement first; vendor benchmarks are labelled as such &middot;
-        third-party &ldquo;model X vs Y&rdquo; blog comparisons are deliberately not used as evidence</div>
-    </section>
-
-    <section class="view" id="v-sessions" hidden>
-      <div class="note"><span class="i">&#8505;</span><span>Grouped by project, aggregate first.
-        Expand a project to see its sessions; click <b>&#9707;</b> on any session to read its transcript.</span></div>
-      <div class="ptree" id="u-tree"></div>
-      <div class="foot">durations are session span (first&rarr;last event), not exclusive wall-clock</div>
-    </section>
-
-    <section class="view" id="v-transcript" hidden>
-      <div class="tcrumb" id="u-crumb"></div>
-      <section class="strip" id="u-turns"></section>
-      <div class="foot">secret-shaped strings are masked server-side &mdash; the original never reaches this page &middot; no export button by design</div>
-    </section>
-  </section>
-
-  <footer class="foot mono">
-    <span id="foot-note">read-only · 127.0.0.1 · nothing here mutates state</span>
-  </footer>
-</main>
-
-<script>${JS}</script>
-</body>
-</html>`;
-}
-
-function escapeHtml(s) {
-  return String(s).replace(/[&<>"']/g, (c) => (
-    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
-  ));
-}
-
-// ── Styles ───────────────────────────────────────────────────────────────────
-// Design: Apple system motif. SF stack with a tight-tracked large title, a
-// frosted sticky segmented control (the macOS/iOS tab idiom), hairline
-// separators, soft diffuse shadows, and the Apple system palette — systemBlue
-// accent, systemGreen/Orange/Red status semantics. Restraint over ornament;
-// CSS variables drive BOTH themes.
-const CSS = `
-:root{
-  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",sans-serif;
-  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Code",monospace;
-  --r:16px; --r-sm:11px;
-  /* One height for every scrollable list, so the page frame never changes
-     between Findings / Sessions / Transcript. The 420px subtrahend is the fixed
-     chrome above and below: header band + tab bar + sub-tabs + note + footer.
-     Without it the region ran to the viewport edge and the footer sat below the
-     fold, forcing a window scroll to read it — the thing in-place scrolling was
-     supposed to avoid. */
-  --listh:clamp(200px, calc(100vh - 420px), 520px);
-}
-:root[data-theme="dark"]{
-  --bg:#000000; --panel:#1c1c1e; --panel-2:#2c2c2e; --raised:#3a3a3c; --thumb:#48484a;
-  --ink:#f5f5f7; --ink-2:rgba(235,235,245,.64); --ink-dim:rgba(235,235,245,.38);
-  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
-  --accent:#0a84ff; --accent-soft:rgba(10,132,255,.16);
-  --ok:#30d158; --warn:#ff9f0a; --fail:#ff453a; --info:#98989d; --purple:#bf5af2;
-  --material:rgba(16,16,18,.72);
-  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -20px rgba(0,0,0,.9);
-}
-:root[data-theme="light"]{
-  --bg:#f5f5f7; --panel:#ffffff; --panel-2:#f2f2f7; --raised:#ffffff; --thumb:#ffffff;
-  --ink:#1d1d1f; --ink-2:rgba(60,60,67,.68); --ink-dim:rgba(60,60,67,.42);
-  --line:rgba(60,60,67,.12); --line-2:rgba(60,60,67,.22);
-  --accent:#007aff; --accent-soft:rgba(0,122,255,.12);
-  --ok:#34c759; --warn:#ff9500; --fail:#ff3b30; --info:#8e8e93; --purple:#af52de;
-  --material:rgba(249,249,251,.78);
-  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px -22px rgba(0,0,0,.22);
-}
-@media (prefers-color-scheme:light){
-  :root:not([data-theme]){ color-scheme:light; }
-}
-*{box-sizing:border-box}
-html,body{margin:0;padding:0}
-body{
-  background:var(--bg);
-  color:var(--ink);
-  font-family:var(--sans);
-  font-size:14px; line-height:1.5;
-  -webkit-font-smoothing:antialiased;
-  font-variant-numeric:tabular-nums;
-  min-height:100vh;
-  overflow-x:hidden;
-}
-.mono{font-family:var(--mono)}
-
-/* ── header band ── */
-.band{
-  position:relative;
-  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
-  padding:24px clamp(16px,4vw,40px) 14px;
-}
-.band-lead{display:flex; align-items:center; gap:14px; min-width:0}
-.mark{
-  width:40px; height:40px; flex:none; border-radius:10px;
-  background:linear-gradient(165deg,#5ac8fa,#007aff 55%,#0a5fd6);
-  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(0,122,255,.55);
-  position:relative;
-}
-.mark::after{
-  content:""; position:absolute; inset:11px; border-radius:50%;
-  border:2.5px solid rgba(255,255,255,.92);
-  border-top-color:rgba(255,255,255,.35);
-  transform:rotate(-45deg);
-}
-.band-titles{min-width:0}
-.kit-name{
-  font-size:clamp(21px,2.6vw,28px); font-weight:700; letter-spacing:-.022em;
-  line-height:1.1; margin:0;
-}
-.kit-sub{color:var(--ink-dim); font-size:12px; display:flex; gap:8px; align-items:center; margin-top:3px}
-.kit-sub .sep{opacity:.5}
-.ver{color:var(--accent)}
-.band-verdict{
-  display:flex; align-items:center; gap:9px; margin-left:auto;
-  padding:7px 15px; border:1px solid var(--line); border-radius:100px;
-  background:var(--panel);
-}
-.verdict-text{font-size:13px; font-weight:500; letter-spacing:-.006em}
-.band-tools{display:flex; align-items:center; gap:10px}
-.pulse{
-  width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;
-  animation:pulse 2.4s ease-out infinite;
-}
-/* paused reads as paused: the pulse greys and stops, so "live" is never implied
-   by a still-animating dot over stale numbers. */
-.pulse.off{background:var(--ink-dim); animation:none}
-@keyframes pulse{
-  0%{box-shadow:0 0 0 0 var(--accent-soft)}
-  70%{box-shadow:0 0 0 7px transparent}
-  100%{box-shadow:0 0 0 0 transparent}
-}
-.upd{font-size:11.5px; color:var(--ink-dim); min-width:96px}
-
-/* ── poll control (governs EVERY tab, not just Usage) ── */
-.poll{
-  display:flex; align-items:center; gap:2px; padding:3px;
-  border:1px solid var(--line); border-radius:100px; background:var(--panel);
-}
-.poll button{
-  display:inline-flex; align-items:center; justify-content:center; gap:6px;
-  border:0; background:transparent; color:var(--ink-2);
-  font-family:inherit; font-size:12px; height:26px; padding:0 10px;
-  border-radius:100px; cursor:pointer; transition:background .15s ease, color .15s ease;
-}
-.poll button:hover:not(:disabled){background:var(--panel-2); color:var(--ink)}
-.poll button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-.poll button:disabled{opacity:.38; cursor:not-allowed}
-.poll .play{width:28px; padding:0}
-.poll .play.on{color:var(--accent)}
-.poll .ivl{min-width:56px; justify-content:space-between}
-.poll .caret{opacity:.5}
-.poll .refresh{width:28px; padding:0; font-size:14px}
-.poll .refresh.spin{animation:spin .6s linear}
-@keyframes spin{to{transform:rotate(360deg)}}
-.menu{
-  position:absolute; z-index:60; right:clamp(16px,4vw,40px); top:100%; margin-top:-6px;
-  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm);
-  box-shadow:var(--shadow); padding:5px; min-width:118px;
-}
-.menu[hidden]{display:none}
-.menu button{
-  display:flex; width:100%; justify-content:space-between; align-items:center;
-  font-family:var(--mono); font-size:12px; height:26px; padding:0 9px;
-  border-radius:7px; background:transparent; border:0; color:var(--ink-2); cursor:pointer;
-}
-.menu button:hover{background:var(--panel-2); color:var(--ink)}
-.menu button.sel{color:var(--accent)}
-.menu .sep{height:1px; background:var(--line); margin:4px 2px}
-.toggle{
-  display:inline-flex; align-items:center; justify-content:center;
-  width:34px; height:34px; padding:0;
-  color:var(--ink-2); background:var(--panel);
-  border:1px solid var(--line); border-radius:50%; cursor:pointer;
-  transition:border-color .2s ease, color .2s ease, background .2s ease;
-}
-.toggle:hover{border-color:var(--line-2); color:var(--accent); background:var(--panel-2)}
-.toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
-.toggle .icon{display:inline-flex}
-.toggle .icon svg{width:16px; height:16px; display:block}
-
-/* ── sticky frosted segmented control ── */
-.tabbar{
-  position:sticky; top:0; z-index:20;
-  display:flex; padding:8px clamp(16px,4vw,40px) 10px;
-  background:var(--material);
-  -webkit-backdrop-filter:saturate(180%) blur(20px);
-  backdrop-filter:saturate(180%) blur(20px);
-  border-bottom:1px solid var(--line);
-}
-.seg{
-  position:relative; display:inline-flex; gap:2px; padding:3px;
-  border-radius:12px; background:var(--panel-2);
-  max-width:100%; overflow-x:auto; scrollbar-width:none;
-}
-.seg::-webkit-scrollbar{display:none}
-.seg-btn{
-  position:relative; z-index:1; border:0; background:transparent;
-  color:var(--ink-2); font-family:inherit; font-size:13px; font-weight:500;
-  letter-spacing:-.006em; padding:6px 14px; border-radius:9px; cursor:pointer;
-  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
-  transition:color .2s ease;
-}
-.seg-btn[aria-selected="true"]{color:var(--ink); font-weight:600}
-.seg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-.seg-thumb{
-  position:absolute; top:3px; left:3px; height:calc(100% - 6px); width:0;
-  border-radius:9px; background:var(--thumb);
-  box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);
-  transition:left .25s cubic-bezier(.3,.7,.3,1), width .25s cubic-bezier(.3,.7,.3,1);
-}
-.badge{
-  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
-  background:var(--fail); color:#fff; font-size:10.5px; font-weight:600;
-  display:inline-flex; align-items:center; justify-content:center; line-height:1;
-}
-.badge[data-tone="warn"]{background:var(--warn)}
-.badge[hidden]{display:none}
-
-/* ── layout ── */
-.wrap{padding:clamp(16px,4vw,40px); max-width:1180px; margin:0 auto}
-.panel{animation:fade .25s ease}
-.panel[hidden]{display:none}
-@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
-
-/* ── triage summary + update notice (Overview) ── */
-.summary{
-  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
-  margin-bottom:14px; font-size:12.5px;
-}
-.pill{
-  display:inline-flex; align-items:center; gap:7px;
-  padding:5px 12px; border-radius:100px;
-  border:1px solid var(--line); background:var(--panel);
-  color:var(--ink-2); letter-spacing:-.006em;
-}
-.pill .dot{width:8px; height:8px}
-.pill b{color:var(--ink); font-weight:600}
-.pill[data-level="fail"]{border-color:color-mix(in srgb,var(--fail) 50%,transparent)}
-.pill[data-level="warn"]{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
-.pill[data-tone="calm"]{opacity:.72}
-.notice{
-  display:flex; align-items:baseline; gap:9px;
-  padding:10px 14px; margin-bottom:14px;
-  border-radius:var(--r-sm); background:var(--accent-soft);
-  color:var(--ink-2); font-size:13px;
-}
-.notice .up{color:var(--accent); font-weight:700}
-.notice code{font-family:var(--mono); color:var(--ink); font-size:12px}
-.notice b{color:var(--ink); font-weight:600}
-.allclear{
-  display:flex; align-items:center; gap:10px;
-  padding:20px 22px; margin-bottom:6px;
-  border-radius:var(--r); background:var(--panel); border:1px solid var(--line);
-  box-shadow:var(--shadow); color:var(--ink-2); font-size:14px;
-}
-
-/* ── cards ── */
-.grid{
-  display:grid; gap:14px;
-  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
-}
-.card{
-  background:var(--panel); border:1px solid var(--line);
-  border-radius:var(--r); padding:16px 17px 15px;
-  box-shadow:var(--shadow);
-  opacity:0; transform:translateY(6px);
-  animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards;
-  overflow:hidden;
-}
-@keyframes rise{to{opacity:1; transform:none}}
-.card-top{display:flex; align-items:center; gap:10px; margin-bottom:9px}
-.dot{
-  width:10px; height:10px; border-radius:50%; flex:none;
-  background:var(--lvl,var(--info));
-  box-shadow:0 0 0 3px color-mix(in srgb,var(--lvl,var(--info)) 20%, transparent);
-}
-.card[data-level="ok"]{--lvl:var(--ok)}
-.card[data-level="warn"]{--lvl:var(--warn)}
-.card[data-level="fail"]{--lvl:var(--fail)}
-.card[data-level="info"]{--lvl:var(--info)}
-.card[data-level="unknown"]{--lvl:var(--ink-dim)}
-.dot[data-level="ok"]{--lvl:var(--ok)}
-.dot[data-level="warn"]{--lvl:var(--warn)}
-.dot[data-level="fail"]{--lvl:var(--fail)}
-.dot[data-level="info"]{--lvl:var(--info)}
-.dot[data-level="unknown"]{--lvl:var(--ink-dim)}
-.card-name{font-size:15px; font-weight:600; letter-spacing:-.014em; color:var(--ink)}
-.card-level{
-  margin-left:auto; font-size:10.5px; font-weight:600; letter-spacing:.1em;
-  text-transform:uppercase; color:var(--lvl,var(--info));
-}
-.card-count{
-  margin-left:auto; font-size:11px; color:var(--ink-dim);
-  border:1px solid var(--line); border-radius:100px; padding:1px 8px;
-}
-.card-count + .card-level{margin-left:8px}
-.rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
-.rows .row{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.5}
-.row-dot{
-  width:7px; height:7px; border-radius:50%; flex:none; margin-top:6px;
-  background:var(--lvl,var(--info));
-}
-.row[data-level="ok"]{--lvl:var(--ok)}
-.row[data-level="warn"]{--lvl:var(--warn)}
-.row[data-level="fail"]{--lvl:var(--fail)}
-.row[data-level="info"]{--lvl:var(--info)}
-.row[data-level="unknown"]{--lvl:var(--ink-dim)}
-.row-msg{min-width:0; word-break:break-word}
-.row-fix{display:block; margin-top:3px; color:var(--ink-dim); font-size:12px}
-.row-fix .arrow{color:var(--accent); margin-right:5px}
-.row-fix code{font-family:var(--mono); color:var(--ink-2); font-size:11.5px}
-
-/* ── overview status map ── */
-.subhead{
-  margin:24px 0 10px; color:var(--ink-dim); font-size:12px; font-weight:600;
-  letter-spacing:.07em; text-transform:uppercase;
-}
-.statusmap{
-  display:grid; gap:8px;
-  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
-}
-.tile{
-  display:flex; align-items:center; gap:9px; text-align:left;
-  padding:10px 13px; border-radius:var(--r-sm);
-  background:var(--panel); border:1px solid var(--line);
-  color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:500;
-  letter-spacing:-.006em; cursor:pointer;
-  transition:background .15s ease, border-color .15s ease;
-}
-.tile:hover{background:var(--panel-2); border-color:var(--line-2)}
-.tile:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-.tile .dot{width:8px; height:8px}
-.tile .tile-go{margin-left:auto; color:var(--ink-dim); font-weight:400}
-
-/* ── strips (routing / models / learning) ── */
-.strip{
-  margin-top:22px; padding:18px clamp(14px,3vw,24px);
-  background:var(--panel); border:1px solid var(--line);
-  border-radius:var(--r); box-shadow:var(--shadow);
-}
-.strip-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
-.strip-title{font-size:16px; font-weight:600; letter-spacing:-.014em; margin:0}
-.strip-note{color:var(--ink-dim); font-size:12px}
-.route-matrix{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
-.r-row{display:grid; grid-template-columns:minmax(140px,1.4fr) 84px minmax(120px,1.4fr) minmax(90px,1fr); gap:10px; align-items:center; padding:8px 14px; background:var(--panel)}
-.r-row:hover{background:var(--panel-2)}
-.r-act{color:var(--ink); font-size:12.5px; display:flex; align-items:center; gap:6px}
-.r-host{font-size:11px; font-weight:600; text-align:center; padding:2px 0; border-radius:100px; border:1px solid var(--line-2)}
-.r-host-claude{color:#ff9f0a; background:rgba(255,159,10,.12); border-color:rgba(255,159,10,.3)}
-.r-host-codex{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
-.r-host[data-primary]{box-shadow:inset 0 0 0 1.5px var(--accent); font-weight:700}
-.r-model{color:var(--ink-2); font-size:11.5px}
-.r-meta{display:flex; align-items:center; gap:8px; justify-content:flex-end; font-size:10.5px}
-.r-esc{color:var(--ink-dim)}
-.r-src{text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); font-size:9.5px}
-.r-src-user{color:var(--accent)}
-.r-tag{font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); border:1px solid var(--accent-soft); border-radius:3px; padding:0 3px}
-@media(max-width:560px){.r-row{grid-template-columns:1fr 70px} .r-model,.r-meta{grid-column:1/-1; justify-content:flex-start}}
-.model-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
-.m-row{display:grid; grid-template-columns:84px 1fr auto; gap:12px; align-items:center; padding:9px 14px; background:var(--panel)}
-.m-row:hover{background:var(--panel-2)}
-.m-model{color:var(--ink); font-size:12.5px}
-.m-n{color:var(--ink-dim); font-size:11.5px}
-.spark-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
-.spark{margin:0}
-.spark figcaption{color:var(--ink-dim); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
-.spark-svg{width:100%; overflow-x:auto}
-.spark-svg svg{display:block; width:100%; height:auto}
-
-/* ── Usage tab (ADR-0009) ───────────────────────────────────────────────────
-   Same Apple system motif as the rest of the panel: hairline-separated rows,
-   soft-shadowed strips, systemBlue for magnitude and systemPurple as the second
-   series. Nothing here fetches; every figure below is rendered from /api/usage. */
-.usage-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
-.subseg{gap:2px}
-.subseg .seg-btn[aria-selected="true"]{
-  background:var(--thumb); box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);
-}
-.seg-n{opacity:.6; font-size:11px}
-.segbadge{
-  min-width:16px; height:16px; padding:0 5px; border-radius:8px; background:var(--warn);
-  color:#000; font-size:10.5px; font-weight:700; display:inline-flex;
-  align-items:center; justify-content:center;
-}
-.segbadge[hidden]{display:none}
-.filters{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
-.chipf{
-  font-size:12px; padding:4px 11px; border-radius:100px; border:1px solid var(--line);
-  background:var(--panel); color:var(--ink-2); cursor:pointer; font-family:inherit;
-}
-.chipf.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
-.chipf:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-.view[hidden]{display:none}
-
-/* hero KPIs */
-.hero{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); margin-bottom:14px}
-.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--shadow)}
-.kpi .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim)}
-.kpi .v{font-size:27px; font-weight:700; letter-spacing:-.028em; margin-top:5px; line-height:1.05}
-.kpi .d{font-size:11.5px; color:var(--ink-2); margin-top:5px}
-/* A parenthetical qualifier belongs on its own line, not wrapped mid-phrase.
-   "297h summed (sessions" / "overlap)" split the caveat across the break and
-   made the number harder to read than no caveat at all. */
-.kpi .d-note{display:block; color:var(--ink-dim); font-size:11px; margin-top:2px}
-.kpi.accent .v{color:var(--accent)}
-.kpi.warnv .v{color:var(--warn)}
-.note{
-  display:flex; gap:9px; padding:10px 14px; margin-bottom:16px; border-radius:var(--r-sm);
-  background:var(--accent-soft); color:var(--ink-2); font-size:12.5px; align-items:baseline;
-}
-.note b{color:var(--ink)}
-.note .i{color:var(--accent); font-weight:700}
-.sh{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
-.sh h2{font-size:15px; font-weight:600; letter-spacing:-.014em; margin:0}
-.sh .n{color:var(--ink-dim); font-size:11.5px}
-/* A qualifier that must not share a line with the caption it qualifies: as an
-   inline tail it wrapped mid-phrase, leaving "· 4" dangling at the end of one
-   line and "dropped/errored turns excluded" orphaned on the next — the count
-   read as part of the caption rather than as its own fact. */
-.sh .n-sub{display:block}
-.sh .n-sub:empty{display:none}
-.two{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
-#panel-usage .strip{margin-top:0; margin-bottom:16px}
-
-/* day bars */
-.days{display:flex; gap:5px; align-items:flex-end; height:118px}
-.daybar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
-.db-fill{
-  width:100%; border-radius:5px 5px 2px 2px;
-  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent));
-  transition:filter .15s ease;
-}
-.daybar:hover .db-fill{filter:brightness(1.35)}
-.db-lab{font-family:var(--mono); font-size:9.5px; color:var(--ink-dim); margin-top:6px}
-
-/* punchcard */
-.pc-row{display:flex; align-items:center; gap:3px; margin-bottom:3px}
-.pc-day{font-family:var(--mono); font-size:10px; color:var(--ink-dim); width:28px; flex:none}
-.pc{flex:1; height:13px; border-radius:3px; background:color-mix(in srgb,var(--accent) calc(var(--v)*100%),var(--panel-2))}
-.pc-axis{display:flex; gap:3px; margin-left:31px; margin-top:5px}
-.pc-axis span{flex:1; font-family:var(--mono); font-size:8.5px; color:var(--ink-dim); text-align:center}
-
-/* magnitude rows (models / projects / categories) */
-.mrow{
-  display:grid; grid-template-columns:minmax(120px,1.5fr) 2fr 62px minmax(96px,auto);
-  gap:11px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line);
-}
-.mrow:last-child{border-bottom:0}
-.mname{font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-.mbar{height:7px; border-radius:4px; background:var(--panel-2); overflow:hidden}
-.mbar i{display:block; height:100%; border-radius:4px; background:var(--accent)}
-.mbar i.alt{background:var(--purple)}
-.mval{font-size:12.5px; text-align:right; color:var(--ink)}
-.msub{font-size:10.5px; color:var(--ink-dim); text-align:right}
-.crow{
-  display:grid; grid-template-columns:minmax(140px,1.4fr) 2fr 62px minmax(128px,auto);
-  gap:11px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line);
-  cursor:pointer; font-family:inherit; text-align:left; background:transparent; border-left:0; border-right:0; border-top:0; width:100%; color:inherit;
-}
-.crow:last-child{border-bottom:0}
-.crow:hover{background:var(--panel-2)}
-.crow:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
-.crow.uncl{opacity:.6}
-.c-name{font-size:12.5px; display:flex; align-items:center; gap:7px; color:var(--ink)}
-.conf{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; display:inline-block}
-
-/* provider split */
-.psplit{display:flex; gap:10px; flex-wrap:wrap}
-.pcard{flex:1; min-width:190px; border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; background:var(--panel-2)}
-.pcard .ph{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:9px}
-.pdot{width:9px; height:9px; border-radius:50%}
-.pdot.c{background:var(--warn)}
-.pdot.x{background:var(--accent)}
-.pcard .pv{font-size:21px; font-weight:700; letter-spacing:-.02em}
-.pcard .pl{font-size:11.5px; color:var(--ink-dim); margin-top:4px}
-.pcard.idle{opacity:.55}
-.tokbar{display:flex; height:9px; border-radius:5px; overflow:hidden; margin-top:11px}
-.tokbar i{display:block; height:100%}
-.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; font-size:11px; color:var(--ink-dim)}
-.legend b{color:var(--ink); font-weight:600}
-.lg{display:inline-flex; align-items:center; gap:5px}
-.lg i{width:8px; height:8px; border-radius:2px; display:inline-block}
-
-/* findings */
-.ins-grid{display:grid; gap:11px; margin-bottom:11px}
-/* Findings scrolls in place too, so the window keeps a fixed frame across all
-   three list views instead of each one growing the document to a different
-   height. Padding-right keeps the scrollbar off the card border. */
-#u-insights{
-  max-height:var(--listh);
-  min-height:200px;
-  overflow-y:auto;
-  overscroll-behavior:contain;
-  padding-right:4px;
-  scrollbar-width:thin;
-  scrollbar-color:var(--thumb) transparent;
-}
-#u-insights::-webkit-scrollbar{width:10px}
-#u-insights::-webkit-scrollbar-thumb{background:var(--thumb); border-radius:6px; border:3px solid transparent; background-clip:content-box}
-#u-insights::-webkit-scrollbar-track{background:transparent}
-
-.icard{
-  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--sv,var(--accent));
-  border-radius:var(--r-sm); padding:13px 15px; box-shadow:var(--shadow);
-}
-.icard[data-sev="warn"]{--sv:var(--warn)}
-.icard[data-sev="info"]{--sv:var(--accent)}
-.icard[data-sev="ok"]{--sv:var(--ok)}
-.i-top{display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap}
-.i-n{
-  width:19px; height:19px; border-radius:50%; background:var(--sv); color:#000;
-  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none;
-}
-.i-title{font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--ink)}
-.i-kind{font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:1px 7px}
-.i-imp{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--sv); white-space:nowrap}
-.i-imp.soft{color:var(--ink-dim); font-weight:400; font-size:11px}
-.i-find{margin:0 0 5px; font-size:12.5px; color:var(--ink-2); line-height:1.52}
-.i-ev{margin:0 0 9px; font-size:11.5px; color:var(--ink-dim); line-height:1.5}
-.i-act{display:flex; gap:8px; font-size:12.5px; color:var(--ink); align-items:baseline; border-top:1px solid var(--line); padding-top:9px}
-.i-arrow{color:var(--sv); font-weight:700}
-.i-cmd{font-family:var(--mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 6px; white-space:nowrap}
-.i-src{margin-top:9px; border-top:1px solid var(--line); padding-top:8px}
-.i-src summary{font-size:11.5px; color:var(--ink-dim); cursor:pointer; list-style:none}
-.i-src summary::-webkit-details-marker{display:none}
-.i-src summary::before{content:"\\25B8 "; color:var(--accent)}
-.i-src[open] summary::before{content:"\\25BE "}
-.i-src ul{margin:8px 0 0; padding-left:16px}
-.i-src li{font-size:11.5px; color:var(--ink-2); margin-bottom:4px}
-.i-src a{color:var(--accent); text-decoration:none}
-.i-src a:hover{text-decoration:underline}
-
-/* tiered project tree */
-.ptree{display:flex; flex-direction:column; gap:8px}
-.pgroup{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--panel)}
-.phead{
-  display:grid; grid-template-columns:16px minmax(120px,1.1fr) minmax(150px,1.6fr) 64px 44px 58px 66px;
-  gap:10px; align-items:center; width:100%; padding:11px 13px; background:var(--panel-2);
-  border:0; color:var(--ink); font-family:inherit; font-size:13px; cursor:pointer; text-align:left;
-}
-.phead:hover{background:var(--raised)}
-.phead:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
-.chev{color:var(--ink-dim); transition:transform .18s ease; display:inline-block}
-.pgroup[data-open] .chev{transform:rotate(90deg); color:var(--accent)}
-.pname{font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-.pchips{display:flex; gap:5px; flex-wrap:wrap; overflow:hidden}
-.pchip{font-size:10px; color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:1px 7px; white-space:nowrap}
-.pchip b{color:var(--ink-2); font-weight:600}
-.pn{font-size:11.5px; color:var(--ink-dim); text-align:right}
-.pcost{font-size:13px; font-weight:600; text-align:right; color:var(--ink)}
-.pbody{display:none; background:var(--line); gap:1px; flex-direction:column}
-/* Each expanded project scrolls INSIDE its own group. A project with 108
-   sessions otherwise pushes every project below it off-screen and forces the
-   whole window to scroll, so you lose the group headers you were comparing. */
-.pgroup[data-open] .pbody{
-  display:flex;
-  max-height:var(--listh);
-  overflow-y:auto;
-  overscroll-behavior:contain;   /* reaching the end must not scroll the page */
-  scrollbar-width:thin;
-  scrollbar-color:var(--thumb) transparent;
-}
-.smore{background:var(--panel); padding:9px 13px; font-size:11.5px; color:var(--ink-dim)}
-.smore button{background:transparent; border:0; color:var(--accent); cursor:pointer; font-family:inherit; font-size:11.5px; padding:0}
-.cat{
-  font-size:10px; border-radius:100px; padding:1px 8px; white-space:nowrap; overflow:hidden;
-  text-overflow:ellipsis; border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
-  color:var(--ok); background:color-mix(in srgb,var(--ok) 11%,transparent);
-}
-.cat[data-w="0"]{
-  border-color:color-mix(in srgb,var(--warn) 30%,transparent);
-  color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent);
-}
-.cat.uncl{border-color:var(--line); color:var(--ink-dim); background:transparent}
-
-/* session rows */
-/* The LEADING 18px column is the detail expander. It is deliberately first, so
-   the caret sits outside the row's content and reads as an affordance on the
-   row rather than on any one cell. Both grids below must carry it — a column
-   added here and forgotten in the breakpoint shifts every mobile cell by one,
-   which is silent: the row still renders, it just renders the wrong data under
-   each heading. */
-.srow{
-  display:grid; grid-template-columns:18px 58px minmax(150px,2.1fr) minmax(90px,1fr) 106px 46px 60px 62px 68px 20px;
-  gap:10px; align-items:center; padding:9px 13px; background:var(--panel); font-size:12.5px; cursor:pointer;
-}
-.srow:hover{background:var(--panel-2)}
-.s-host{font-size:10px; font-weight:600; text-align:center; padding:2px 0; border-radius:100px; border:1px solid var(--line-2)}
-.s-claude{color:var(--warn); background:color-mix(in srgb,var(--warn) 12%,transparent); border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
-.s-codex{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
-.s-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-.s-proj,.s-when,.s-dur,.s-turns,.s-tok{color:var(--ink-2); font-size:11.5px}
-.s-cost{text-align:right; color:var(--ink); font-size:12px}
-.s-tx{background:transparent; border:0; color:var(--ink-dim); font-size:14px; cursor:pointer; padding:0; border-radius:5px}
-.s-tx:hover{color:var(--accent); background:var(--accent-soft)}
-
-/* row expander — a real <button>, so it is tab-reachable and announced. The
-   chevron rotation reuses the .phead .chev idiom rather than inventing a
-   second vocabulary for "this opens". */
-.s-exp{
-  background:transparent; border:0; color:var(--ink-dim); font-size:13px; line-height:1; cursor:pointer;
-  padding:0; border-radius:4px; transition:transform .18s ease, color .18s ease; display:inline-block;
-}
-.s-exp:hover{color:var(--accent)}
-.s-exp:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
-.s-exp[aria-expanded="true"]{transform:rotate(90deg); color:var(--accent)}
-/* ADR-0009 §4b — the repo answers "which project", this answers "which branch
-   of it". Rendered only when there IS one, so its presence is the signal. */
-.s-wt{
-  margin-left:7px; font-size:9.5px; font-family:var(--mono); color:var(--purple); white-space:nowrap;
-  border:1px solid color-mix(in srgb,var(--purple) 30%,transparent);
-  background:color-mix(in srgb,var(--purple) 10%,transparent); border-radius:100px; padding:1px 6px;
-}
-/* The detail strip is a SIBLING of .srow inside .pbody, not a grid child of
-   it — so it spans the full width instead of joining the column layout. No
-   display is set here: the UA's [hidden] rule must keep working. */
-.sdetail{background:var(--panel-2); padding:9px 13px 11px 41px; border-top:1px solid var(--line); font-size:11.5px}
-.sdetail[hidden]{display:none}
-/* Label and value are INLINE-level, not grid or flex tracks, and that is a
-   readability decision rather than a layout one. This markup is divs and
-   spans, not a real <dl> — so block-level cells would hand a screen reader two
-   unrelated blocks with nothing pairing them, and split the label from its
-   value for copy-paste and for anything else reading the rendered text. The
-   classifier's reasoning is one statement and should survive as one. The
-   fixed-width inline-block keeps the column alignment a grid would have given,
-   so nothing is lost visually. */
-.sd-line{padding:2px 0}
-.sd-k{
-  display:inline-block; width:74px; vertical-align:top; color:var(--ink-dim);
-  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
-}
-.sd-v{display:inline-block; vertical-align:top; max-width:calc(100% - 84px); color:var(--ink-2); word-break:break-word}
-.sd-conf{color:var(--ink-dim)}
-
-/* transcript reader */
-/* The crumb stays put while the turns scroll beneath it — on a 2,216-turn
-   session the header is exactly what you lose first when the page scrolls. */
-.tcrumb{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); margin-bottom:14px; flex-wrap:wrap}
-#u-turns{
-  max-height:var(--listh);
-  min-height:200px;
-  overflow-y:auto;
-  overscroll-behavior:contain;
-  scrollbar-width:thin;
-  scrollbar-color:var(--thumb) transparent;
-}
-/* WebKit needs its own scrollbar rules; keep them quiet and on-motif. */
-#u-turns::-webkit-scrollbar,.pgroup[data-open] .pbody::-webkit-scrollbar{width:10px}
-#u-turns::-webkit-scrollbar-thumb,.pgroup[data-open] .pbody::-webkit-scrollbar-thumb{
-  background:var(--thumb); border-radius:6px; border:3px solid transparent; background-clip:content-box;
-}
-#u-turns::-webkit-scrollbar-track,.pgroup[data-open] .pbody::-webkit-scrollbar-track{background:transparent}
-@media (max-width:700px){ :root{--listh:clamp(180px, calc(100vh - 340px), 460px)} }
-.tcrumb button{
-  background:var(--panel); border:1px solid var(--line); color:var(--ink-2); border-radius:100px;
-  padding:4px 12px; font-family:inherit; font-size:12px; cursor:pointer;
-}
-.tcrumb button:hover{border-color:var(--line-2); color:var(--ink)}
-.turn{display:grid; grid-template-columns:78px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
-.turn:last-child{border-bottom:0}
-.t-who{font-family:var(--mono); font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em}
-.t-user .t-who{color:var(--accent)}
-/* Tool results and harness context ride the user ROLE in the Messages API but
-   are not the person — purple ties them visually to the tool chips, and the
-   accent stays reserved for turns the human actually typed. */
-.t-tool .t-who{color:var(--purple)}
-/* Harness sentinel markup, restyled (fmtHarness): a slash command renders as
-   a chip, and system-reminder / caveat / stdout blocks get a labelled quiet
-   panel — the wrapped content stays verbatim, only the XML wrappers go. */
-.h-cmd{
-  font-family:var(--mono); font-size:12px; color:var(--accent);
-  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
-  background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:5px; padding:1px 7px;
-}
-.h-note{display:block; border-left:2px solid var(--line-2); padding:5px 10px; margin:5px 0; color:var(--ink-dim)}
-.h-tag{
-  display:block; font-style:normal; font-family:var(--mono); font-size:9.5px;
-  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); opacity:.8; margin-bottom:2px;
-}
-.t-meta{display:block; font-size:9.5px; margin-top:3px; text-transform:none; letter-spacing:0}
-.t-body{font-size:13px; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; min-width:0}
-.t-user .t-body{color:var(--ink)}
-.chips{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap}
-.tool{
-  font-family:var(--mono); font-size:10px; color:var(--purple);
-  border:1px solid color-mix(in srgb,var(--purple) 32%,transparent);
-  background:color-mix(in srgb,var(--purple) 11%,transparent); border-radius:5px; padding:2px 7px;
-}
-/* click-to-reveal, never a download: the bytes are already the user's, the risk
-   is amplifying them into a screenshare (ADR-0009 §8). */
-.masked{background:var(--fail); color:transparent; border-radius:3px; cursor:pointer; opacity:.75; padding:0 3px}
-.masked:hover,.masked.shown{color:#fff; opacity:1}
-.masked.shown{background:transparent; box-shadow:inset 0 0 0 1px var(--fail); color:var(--ink)}
-/* Same "content was withheld" family as .masked, deliberately quieter: masking
-   is a security measure, truncation is a designed limit. An alarm colour here
-   would teach the reader to distrust a turn that is merely long. */
-.t-trunc{
-  display:block; margin-top:3px; font-size:9px; line-height:1.35; text-transform:none; letter-spacing:0;
-  color:var(--ink-dim); border:1px solid var(--line-2); border-radius:4px; padding:1px 4px;
-  background:var(--panel-2); cursor:help;
-}
-
-@media(max-width:720px){
-  /* Four data columns → five, because .srow above gained a LEADING one.
-     .cat joins the hidden set at the same time, and that is a FIX, not a
-     side-effect: the shipped rule declared four columns while the row still
-     rendered five visible cells, so .cat sat in the cost column, $-figures sat
-     in the 20px glyph column and were clipped, and the transcript glyph wrapped
-     onto a line of its own. Five columns for five cells is what makes the
-     arithmetic close. The category is still reachable — it is on the project
-     header chips and on the Scorecard's category rows. */
-  .srow{grid-template-columns:18px 58px 1fr 68px 20px}
-  .srow .s-proj,.srow .s-when,.srow .s-dur,.srow .s-turns,.srow .s-tok,.srow .cat{display:none}
-  .phead{grid-template-columns:16px 1fr 58px 66px}
-  .phead .pchips,.phead .p-h,.phead .p-tok{display:none}
-}
-
-/* ── footer ── */
-.foot{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-dim); font-size:12px}
-
-.empty{color:var(--ink-dim); font-size:13px; padding:26px 4px}
-
-@media (max-width:560px){
-  .band{gap:12px}
-  .band-verdict{margin-left:0; order:3; width:100%; justify-content:center}
-}
-@media (prefers-reduced-motion:reduce){
-  *{animation:none !important; transition:none !important}
-  .card{opacity:1; transform:none}
-}
-`;
-
-// ── Client script ────────────────────────────────────────────────────────────
-// No backticks and no ${ } anywhere below — this whole string is embedded inside
-// a server-side template literal, so those tokens would be misparsed. Plain
-// string concatenation only.
-const JS = `
-(function(){
-  "use strict";
-  var root=document.documentElement;
-  var LS="ak-dash-theme", LS_TAB="ak-dash-tab";
-
-  // theme: stored choice wins; otherwise follow the OS.
-  function sysTheme(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";}
-  var MOON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3 6.6 6.6 0 0 0 21 12.8z"/></svg>';
-  var SUN='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
-  function applyTheme(t){
-    root.setAttribute("data-theme",t);
-    var ic=document.getElementById("theme-icon"); if(ic)ic.innerHTML=(t==="dark"?MOON:SUN);
-    var btn=document.getElementById("theme-toggle"); if(btn)btn.setAttribute("aria-label",t==="dark"?"switch to light theme":"switch to dark theme");
-  }
-  var stored=null; try{stored=localStorage.getItem(LS);}catch(e){}
-  applyTheme(stored||sysTheme());
-  var tbtn=document.getElementById("theme-toggle");
-  if(tbtn)tbtn.addEventListener("click",function(){
-    var next=root.getAttribute("data-theme")==="dark"?"light":"dark";
-    applyTheme(next); try{localStorage.setItem(LS,next);}catch(e){}
-    render(LAST); // re-tint the sparklines to the new palette
-  });
-
-  var LEVEL_WORD={ok:"all systems nominal",warn:"attention advised",fail:"action required",unknown:"status unknown"};
-  var LAST=null, lastUpdated=0;
-
-  function esc(s){return String(s==null?"":s).replace(/[&<>"']/g,function(c){return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];});}
-
-  // ── tabs (segmented control) ──
-  // Category map: every subsystem lands in exactly one tab; unknown/future
-  // subsystems fall back to Runtime so nothing is ever dropped. Overview
-  // aggregates all attention cards regardless of category.
-  var TABS=["overview","hosts","providers","runtime","intel","usage"];
-  var VIEWS=["score","limits","findings","sessions","transcript"];
-  var CAT={
-    hosts:"hosts", mcp:"hosts", "codex-mcp":"hosts", routing:"hosts",
-    providers:"providers",
-    learning:"intel", "ruvnet-brain":"intel", "ruvnet-brain-nightly":"intel", aqe:"intel", agentdb:"intel"
-  };
-  function catOf(s){return CAT[s]||"runtime";}
-
-  var activeTab="overview";
-  var usageView="score", usageSession=null, usageDays=14;
-  try{var st=localStorage.getItem(LS_TAB); if(st&&TABS.indexOf(st)>=0)activeTab=st;}catch(e){}
-  // deep-link: #providers etc. wins over the stored tab. Usage carries a second
-  // segment: #usage/findings, #usage/sessions, or #usage/<sessionId> — anything
-  // that is not a known view name is read as a session id.
-  try{
-    var parts=location.hash.slice(1).split("/");
-    if(parts[0]&&TABS.indexOf(parts[0])>=0)activeTab=parts[0];
-    if(parts[0]==="usage"&&parts[1]){
-      if(VIEWS.indexOf(parts[1])>=0){usageView=parts[1];}
-      else{usageView="transcript"; usageSession=decodeURIComponent(parts[1]);}
-    }
-  }catch(e){}
-
-  function usageHash(){
-    if(usageView==="transcript")return "#usage/"+(usageSession?encodeURIComponent(usageSession):"transcript");
-    return usageView==="score"?"#usage":"#usage/"+usageView;
-  }
-  function syncHash(){
-    try{if(history.replaceState)history.replaceState(null,"",activeTab==="usage"?usageHash():"#"+activeTab);}catch(e){}
-  }
-
-  function positionThumb(){
-    var segEl=document.getElementById("seg"), thumb=document.getElementById("seg-thumb");
-    if(!segEl||!thumb)return;
-    var btn=segEl.querySelector('[data-tab="'+activeTab+'"]');
-    if(!btn)return;
-    thumb.style.left=btn.offsetLeft+"px";
-    thumb.style.width=btn.offsetWidth+"px";
-  }
-  function setTab(id,focus){
-    activeTab=id;
-    try{localStorage.setItem(LS_TAB,id);}catch(e){}
-    syncHash();
-    // Usage is LAZY (ADR-0009 §2): the index is only read once the tab is
-    // actually opened, never on the shared status poll.
-    if(id==="usage"&&!usageLoaded)loadUsage();
-    for(var i=0;i<TABS.length;i++){
-      var t=TABS[i], on=(t===id);
-      var btn=document.querySelector('[data-tab="'+t+'"]');
-      var panel=document.getElementById("panel-"+t);
-      if(btn){btn.setAttribute("aria-selected",on?"true":"false"); btn.tabIndex=on?0:-1; if(on&&focus)btn.focus();}
-      if(panel)panel.hidden=!on;
-    }
-    positionThumb();
-  }
-  var seg=document.getElementById("seg");
-  if(seg){
-    seg.addEventListener("click",function(e){
-      var b=e.target.closest?e.target.closest("[data-tab]"):null;
-      if(b)setTab(b.getAttribute("data-tab"));
-    });
-    seg.addEventListener("keydown",function(e){
-      if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;
-      var i=TABS.indexOf(activeTab);
-      i=(i+(e.key==="ArrowRight"?1:TABS.length-1))%TABS.length;
-      setTab(TABS[i],true); e.preventDefault();
-    });
-  }
-  window.addEventListener("resize",positionThumb);
-  var mapEl=document.getElementById("statusmap");
-  if(mapEl)mapEl.addEventListener("click",function(e){
-    var t=e.target.closest?e.target.closest("[data-go]"):null;
-    if(t)setTab(t.getAttribute("data-go"));
-  });
-
-  // severity rank for rollups + triage sort; preferred order breaks ties.
-  var RANK={fail:3,warn:2,ok:1,info:0,unknown:0};
-  var PREF=["versions","self","natives","security","learning","providers","hosts","routing","mcp","codex-mcp","ruvnet-brain","ruvnet-brain-nightly","aqe","daemons","blocks","statusline","npx"];
-
-  // Collapse rows into one group per subsystem (kills repeated labels); the
-  // group's level is the worst of its rows. Sort worst-first, then by PREF.
-  function groupRows(rows){
-    var map={}, seq=[];
-    for(var i=0;i<rows.length;i++){
-      var r=rows[i], k=r.subsystem||"other";
-      if(!map[k]){map[k]={subsystem:k,rows:[],level:"info"};seq.push(k);}
-      map[k].rows.push(r);
-      if((RANK[r.level]||0)>(RANK[map[k].level]||0))map[k].level=r.level;
-    }
-    var groups=seq.map(function(k){return map[k];});
-    groups.sort(function(a,b){
-      var d=(RANK[b.level]||0)-(RANK[a.level]||0); if(d)return d;
-      var ia=PREF.indexOf(a.subsystem), ib=PREF.indexOf(b.subsystem);
-      return (ia<0?99:ia)-(ib<0?99:ib);
-    });
-    return groups;
-  }
-
-  function rowLine(r){
-    var lvl=r.level||"info";
-    var fix=r.fix?('<span class="row-fix"><span class="arrow">&rarr;</span><code>'+esc(r.fix)+"</code></span>"):"";
-    return '<li class="row" data-level="'+esc(lvl)+'">'
-      +'<span class="row-dot"></span>'
-      +'<span class="row-msg">'+esc(r.message)+fix+"</span>"
-    +"</li>";
-  }
-
-  function groupCard(g){
-    var lvl=g.level||"info", calm=(lvl==="ok"||lvl==="info");
-    var count=g.rows.length>1?('<span class="card-count">'+g.rows.length+"</span>"):"";
-    var badge=calm?"":('<span class="card-level">'+esc(lvl)+"</span>");
-    return '<article class="card" data-level="'+esc(lvl)+'">'
-      +'<div class="card-top">'
-        +'<span class="dot" data-level="'+esc(lvl)+'"></span>'
-        +'<span class="card-name">'+esc(g.subsystem)+"</span>"
-        +count+badge
-      +"</div>"
-      +'<ul class="rows">'+g.rows.map(rowLine).join("")+"</ul>"
-    +"</article>";
-  }
-
-  function gridHtml(groups){
-    return '<div class="grid">'+groups.map(groupCard).join("")+"</div>";
-  }
-  function stagger(el){
-    var cards=el.querySelectorAll(".card");
-    for(var i=0;i<cards.length;i++){cards[i].style.animationDelay=(i*40)+"ms";}
-  }
-
-  function renderSummary(groups){
-    var el=document.getElementById("summary");
-    var f=0,w=0,g=0;
-    for(var i=0;i<groups.length;i++){var L=groups[i].level;if(L==="fail")f++;else if(L==="warn")w++;else g++;}
-    if(!groups.length){el.hidden=true;el.innerHTML="";return;}
-    var pills=[];
-    if(f)pills.push('<span class="pill" data-level="fail"><span class="dot" data-level="fail"></span><b>'+f+"</b> failing</span>");
-    if(w)pills.push('<span class="pill" data-level="warn"><span class="dot" data-level="warn"></span><b>'+w+"</b> warning"+(w>1?"s":"")+"</span>");
-    pills.push('<span class="pill" data-tone="calm"><span class="dot" data-level="ok"></span><b>'+g+"</b> nominal</span>");
-    el.innerHTML=pills.join("");
-    el.hidden=false;
-  }
-
-  function renderBadges(cats){
-    for(var c in cats){
-      var el=document.getElementById("badge-"+c);
-      if(!el)continue;
-      var f=0,w=0;
-      for(var i=0;i<cats[c].length;i++){
-        var L=cats[c][i].level;
-        if(L==="fail")f++; else if(L==="warn")w++;
-      }
-      var n=f+w;
-      if(!n){el.hidden=true;el.textContent="";el.removeAttribute("data-tone");}
-      else{el.hidden=false;el.textContent=String(n);el.setAttribute("data-tone",f?"fail":"warn");}
-    }
-  }
-
-  function tile(g){
-    return '<button class="tile" type="button" data-go="'+esc(catOf(g.subsystem))+'" title="open in its tab">'
-      +'<span class="dot" data-level="'+esc(g.level)+'"></span>'
-      +esc(g.subsystem)
-      +'<span class="tile-go">&rsaquo;</span>'
-    +"</button>";
-  }
-
-  function renderPanels(rows){
-    var groups=groupRows(rows||[]);
-    renderSummary(groups);
-
-    // Overview: every attention card, in full, regardless of category.
-    var attn=groups.filter(function(x){return x.level==="fail"||x.level==="warn";});
-    var ael=document.getElementById("attention");
-    if(!groups.length){
-      ael.innerHTML='<div class="empty">no subsystem rows reported.</div>';
-    }else if(attn.length){
-      ael.innerHTML=gridHtml(attn); stagger(ael);
-    }else{
-      ael.innerHTML='<div class="allclear"><span class="dot" data-level="ok"></span>All systems nominal — nothing needs attention.</div>';
-    }
-
-    // Overview: compact status map of every subsystem; tiles jump to the tab.
-    var mh=document.getElementById("map-head");
-    document.getElementById("statusmap").innerHTML=groups.map(tile).join("");
-    mh.hidden=!groups.length;
-
-    // Category panels.
-    var cats={hosts:[],providers:[],runtime:[],intel:[]};
-    for(var i=0;i<groups.length;i++)cats[catOf(groups[i].subsystem)].push(groups[i]);
-    for(var c in cats){
-      var el=document.getElementById("cards-"+c);
-      if(!el)continue;
-      if(cats[c].length){el.innerHTML=gridHtml(cats[c]); stagger(el);}
-      else{el.innerHTML='<div class="empty">nothing reported here.</div>';}
-    }
-    renderBadges(cats);
-  }
-
-  function renderVerdict(overall){
-    var dot=document.getElementById("verdict-dot");
-    var txt=document.getElementById("verdict-text");
-    dot.setAttribute("data-level",overall||"unknown");
-    dot.className="dot";
-    txt.textContent=LEVEL_WORD[overall]||LEVEL_WORD.unknown;
-  }
-
-  // Update drift renders as a quiet notice line in Overview — no banner. The
-  // versions cards still carry the per-tool detail.
-  function renderNotice(drift){
-    var b=document.getElementById("update-notice");
-    var out=(drift||[]).filter(function(d){return d&&d.outdated;});
-    if(!out.length){b.hidden=true;b.innerHTML="";return;}
-    var parts=out.map(function(d){return "<b>"+esc(d.pkg)+"</b> "+esc(d.installed)+" &rarr; "+esc(d.latest);});
-    b.innerHTML='<span class="up">&uarr;</span><span>'+out.length+" update"+(out.length>1?"s":"")
-      +" available: "+parts.join(" &nbsp;·&nbsp; ")+" &mdash; run <code>ak sync</code></span>";
-    b.hidden=false;
-  }
-
-  // ── sparkline (pure SVG) ──
-  function accent(){return getComputedStyle(root).getPropertyValue("--accent").trim()||"#0a84ff";}
-  function sparkline(values){
-    var W=100,H=32,pad=3;
-    if(!values.length)return "";
-    var min=Math.min.apply(null,values),max=Math.max.apply(null,values);
-    var span=max-min||1;
-    var n=values.length;
-    var x=function(i){return pad+(n===1?0:(i/(n-1))*(W-2*pad));};
-    var y=function(v){return H-pad-((v-min)/span)*(H-2*pad);};
-    var d="",area="";
-    for(var i=0;i<n;i++){d+=(i?" L":"M")+x(i).toFixed(1)+" "+y(values[i]).toFixed(1);}
-    area="M"+x(0).toFixed(1)+" "+(H-pad)+" L"+x(0).toFixed(1)+" "+y(values[0]).toFixed(1)
-        +d.replace(/^M[^L]*/,"")+" L"+x(n-1).toFixed(1)+" "+(H-pad)+" Z";
-    var col=accent(),lastX=x(n-1).toFixed(1),lastY=y(values[n-1]).toFixed(1);
-    var gid="g"+Math.random().toString(36).slice(2,8);
-    return '<svg viewBox="0 0 '+W+" "+H+'" preserveAspectRatio="none" role="img">'
-      +'<defs><linearGradient id="'+gid+'" x1="0" x2="0" y1="0" y2="1">'
-        +'<stop offset="0" stop-color="'+col+'" stop-opacity="0.28"/>'
-        +'<stop offset="1" stop-color="'+col+'" stop-opacity="0"/>'
-      +"</linearGradient></defs>"
-      +'<path d="'+area+'" fill="url(#'+gid+')"/>'
-      +'<path d="'+d+'" fill="none" stroke="'+col+'" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/>'
-      +'<circle cx="'+lastX+'" cy="'+lastY+'" r="1.9" fill="'+col+'"/>'
-    +"</svg>";
-  }
-  function flat(msg){return '<div class="empty" style="padding:14px 0">'+esc(msg)+"</div>";}
-
-  function renderHistory(data){
-    var strip=document.getElementById("history");
-    var note=document.getElementById("strip-note");
-    var series=[];
-    if(data.health&&data.health.length){series=data.health;}
-    var pats=[],deltas=[];
-    for(var i=0;i<series.length;i++){
-      var s=series[i];
-      if(typeof s.patternsLearned==="number")pats.push(s.patternsLearned);
-      var dp=(typeof s.deltaPP==="number")?s.deltaPP:(s.improvement&&typeof s.improvement.deltaPP==="number"?s.improvement.deltaPP:null);
-      if(dp!=null)deltas.push(dp);
-    }
-    // fall back to a single improvement snapshot for the Δpp spark
-    if(!deltas.length&&data.improvement&&typeof data.improvement.deltaPP==="number"){deltas=[data.improvement.deltaPP];}
-
-    if(!pats.length&&!deltas.length){strip.hidden=true;return;}
-    strip.hidden=false;
-    note.textContent=(series.length?series.length+" samples":"snapshot");
-    document.getElementById("spark-patterns").innerHTML=pats.length>1?sparkline(pats):flat(pats.length?String(pats[0])+" (one sample)":"no data");
-    document.getElementById("spark-delta").innerHTML=deltas.length>1?sparkline(deltas):flat(deltas.length?(deltas[0]>=0?"+":"")+deltas[0]+"pp (one sample)":"no data");
-  }
-
-  function renderRouting(rt){
-    var strip=document.getElementById("routing");
-    if(!rt||!rt.routes||!rt.routes.length){strip.hidden=true;return;}
-    strip.hidden=false;
-    var s=rt.summary||{}, byHost=s.byHost||{}, primary=rt.primaryHost||"claude";
-    document.getElementById("routing-note").textContent=
-      "primary: "+primary+" · "+(byHost.claude||0)+" claude · "+(byHost.codex||0)+" codex · "+(s.custom||0)+" custom · "+(s.vendors||0)+" vendors";
-    var html="";
-    for(var i=0;i<rt.routes.length;i++){
-      var r=rt.routes[i];
-      var tag=r.akOriginated?' <span class="r-tag">ak</span>':'';
-      var escHtml=(r.escalate&&r.escalate.length)?'<span class="r-esc mono">↑ '+esc(r.escalate.join("→"))+"</span>":"";
-      var primAttr=(r.host===primary)?' data-primary="1"':'';
-      html+='<div class="r-row">'
-        +'<span class="r-act mono">'+esc(r.activity)+tag+"</span>"
-        +'<span class="r-host r-host-'+esc(r.host)+'"'+primAttr+' title="'+(r.host===primary?"primary host":"alternate host")+'">'+esc(r.host)+"</span>"
-        +'<span class="r-model mono">'+esc(r.model)+"</span>"
-        +'<span class="r-meta">'+escHtml+'<span class="r-src r-src-'+esc(r.source)+'">'+esc(r.source)+"</span></span>"
-      +"</div>";
-    }
-    document.getElementById("route-matrix").innerHTML=html;
-  }
-
-  // Providers tab: the distinct host+model pairs the routing policy puts in
-  // play, with how many activities each covers. Hidden without a dual policy.
-  function renderModels(rt){
-    var strip=document.getElementById("models");
-    if(!rt||!rt.routes||!rt.routes.length){strip.hidden=true;return;}
-    var seen={},list=[];
-    for(var i=0;i<rt.routes.length;i++){
-      var r=rt.routes[i];
-      if(!r.model)continue;
-      var k=r.host+"|"+r.model;
-      if(!seen[k]){seen[k]={host:r.host,model:r.model,n:0};list.push(seen[k]);}
-      seen[k].n++;
-    }
-    if(!list.length){strip.hidden=true;return;}
-    strip.hidden=false;
-    document.getElementById("models-note").textContent="primary: "+(rt.primaryHost||"claude");
-    var html="";
-    for(var j=0;j<list.length;j++){
-      var m=list[j];
-      html+='<div class="m-row">'
-        +'<span class="r-host r-host-'+esc(m.host)+'">'+esc(m.host)+"</span>"
-        +'<span class="m-model mono">'+esc(m.model)+"</span>"
-        +'<span class="m-n">'+m.n+" activit"+(m.n>1?"ies":"y")+"</span>"
-      +"</div>";
-    }
-    document.getElementById("model-list").innerHTML=html;
-  }
-
-  function render(data){
-    if(!data)return;
-    LAST=data;
-    renderVerdict(data.overall);
-    renderNotice(data.drift);
-    renderPanels(data.rows);
-    renderHistory(data);
-    renderRouting(data.routing);
-    renderModels(data.routing);
-    positionThumb(); // badges can change segment widths
-  }
-
-  function ago(sec){
-    if(sec<2)return "just now";
-    if(sec<60)return sec+"s ago";
-    var m=Math.floor(sec/60); if(m<60)return m+"m ago";
-    var h=Math.floor(m/60); return h+"h ago";
-  }
-  function tickClock(){
-    var el=document.getElementById("updated");
-    if(el){
-      if(!lastUpdated){el.textContent="—";}
-      else{el.textContent=(pollOn?"updated ":"paused · ")+ago(Math.round((Date.now()-lastUpdated)/1000));}
-    }
-    // Manual refresh is live except while a fetch is in the air or inside the
-    // cooldown — the button's own disabled state IS the visible cooldown.
-    var btn=document.getElementById("poll-now");
-    if(btn)btn.disabled=inflight||(Date.now()-lastAttempt)<POLL_COOLDOWN_MS;
-  }
-
-  // ══ poll control ═══════════════════════════════════════════════════════════
-  // Governs EVERY tab, not just Usage (ADR-0009 §7). The old hardcoded 5 s poll
-  // predated any expensive view; 30 s is the default now, and the whole range is
-  // user-chosen and persisted. Every refresh path — automatic or manual — funnels
-  // through refreshAll(), so the single-flight guard and the cooldown are
-  // impossible to route around.
-  var LS_POLL="ak-dash-poll";
-  var POLL_DEFAULT_MS=30000;
-  var POLL_COOLDOWN_MS=3000;
-  var POLL_LABEL={15000:"15s",30000:"30s",60000:"1m",300000:"5m",900000:"15m",
-    1800000:"30m",3600000:"1h",21600000:"6h",43200000:"12h",86400000:"24h"};
-  var pollOn=true, pollMs=POLL_DEFAULT_MS, pollTimer=null, inflight=false, lastAttempt=0;
-
-  try{
-    var savedPoll=JSON.parse(localStorage.getItem(LS_POLL)||"null");
-    if(savedPoll&&typeof savedPoll==="object"){
-      if(typeof savedPoll.on==="boolean")pollOn=savedPoll.on;
-      if(POLL_LABEL[savedPoll.intervalMs])pollMs=savedPoll.intervalMs;
-    }
-  }catch(e){}
-
-  function savePoll(){
-    try{localStorage.setItem(LS_POLL,JSON.stringify({on:pollOn,intervalMs:pollMs}));}catch(e){}
-  }
-
-  function pollStatus(){
-    return fetch("/api/status",{cache:"no-store"}).then(function(r){return r.json();}).then(function(d){
-      lastUpdated=Date.now(); render(d); tickClock();
-    }).catch(function(){
-      var t=document.getElementById("verdict-text"); if(t)t.textContent="server unreachable";
-    });
-  }
-
-  function refreshAll(){
-    // single-flight: a refresh already in the air is joined, never duplicated.
-    if(inflight)return;
-    // cooldown: a double-click (or a held Enter) cannot stack requests.
-    if(Date.now()-lastAttempt<POLL_COOLDOWN_MS)return;
-    inflight=true; lastAttempt=Date.now();
-    var btn=document.getElementById("poll-now");
-    if(btn)btn.classList.add("spin");
-    var jobs=[pollStatus()];
-    if(activeTab==="usage")jobs.push(loadUsage(true));
-    Promise.all(jobs).catch(function(){}).then(function(){
-      inflight=false;
-      if(btn)btn.classList.remove("spin");
-      tickClock();
-    });
-  }
-
-  function schedulePoll(){
-    if(pollTimer){clearInterval(pollTimer); pollTimer=null;}
-    if(pollOn)pollTimer=setInterval(refreshAll,pollMs);
-    var pulse=document.getElementById("pulse");
-    if(pulse)pulse.classList.toggle("off",!pollOn);
-    var play=document.getElementById("poll-play");
-    if(play){
-      play.classList.toggle("on",pollOn);
-      play.innerHTML=pollOn?"&#9208;":"&#9654;";
-      play.title=pollOn?"polling on — click to pause":"polling paused — click to resume";
-      play.setAttribute("aria-label",pollOn?"pause polling":"resume polling");
-    }
-    var ivl=document.getElementById("poll-ivl");
-    if(ivl){
-      ivl.innerHTML=POLL_LABEL[pollMs]+' <span class="caret" aria-hidden="true">&#9662;</span>';
-      ivl.style.opacity=pollOn?1:.55;
-    }
-    var menu=document.getElementById("poll-menu");
-    if(menu){
-      var opts=menu.querySelectorAll("[data-ms]");
-      for(var i=0;i<opts.length;i++){
-        var on=(Number(opts[i].getAttribute("data-ms"))===pollMs);
-        opts[i].classList.toggle("sel",on);
-        opts[i].innerHTML=POLL_LABEL[opts[i].getAttribute("data-ms")]+(on?" <span>&#10003;</span>":"");
-      }
-    }
-    tickClock();
-  }
-
-  function wirePoll(){
-    var play=document.getElementById("poll-play");
-    var ivl=document.getElementById("poll-ivl");
-    var now=document.getElementById("poll-now");
-    var menu=document.getElementById("poll-menu");
-    if(play)play.addEventListener("click",function(){pollOn=!pollOn; savePoll(); schedulePoll();});
-    // Manual refresh survives the pause — that is the whole point of the off
-    // state: stale on purpose, refreshable on demand.
-    if(now)now.addEventListener("click",refreshAll);
-    if(ivl&&menu)ivl.addEventListener("click",function(e){
-      e.stopPropagation();
-      menu.hidden=!menu.hidden;
-      ivl.setAttribute("aria-expanded",menu.hidden?"false":"true");
-    });
-    document.addEventListener("click",function(){
-      if(menu&&!menu.hidden){menu.hidden=true; if(ivl)ivl.setAttribute("aria-expanded","false");}
-    });
-    if(menu)menu.addEventListener("click",function(e){
-      var b=e.target.closest?e.target.closest("[data-ms]"):null;
-      if(!b)return;
-      pollMs=Number(b.getAttribute("data-ms"))||POLL_DEFAULT_MS;
-      if(!pollOn)pollOn=true;          // picking an interval implies resume
-      savePoll(); schedulePoll();
-      menu.hidden=true; if(ivl)ivl.setAttribute("aria-expanded","false");
-    });
-  }
-
-  // ══ Usage tab ══════════════════════════════════════════════════════════════
-  var USAGE=null, usageLoaded=false, usageBusy=false, TRANSCRIPT=null;
-
-  function fmtUsd(n){
-    n=Number(n)||0;
-    if(n>=1000)return "$"+Math.round(n).toLocaleString();
-    if(n>=10)return "$"+n.toFixed(0);
-    return "$"+n.toFixed(2);
-  }
-  function fmtNum(n){return (Number(n)||0).toLocaleString();}
-  function fmtTok(n){
-    n=Number(n)||0;
-    if(n>=1e9)return (n/1e9).toFixed(1)+"B";
-    if(n>=1e6)return (n/1e6).toFixed(1)+"M";
-    if(n>=1e3)return (n/1e3).toFixed(1)+"K";
-    return String(Math.round(n));
-  }
-  function fmtHours(sec){var h=(Number(sec)||0)/3600; return (h>=10?Math.round(h):h.toFixed(1))+"h";}
-  function fmtMins(m){m=Number(m)||0; return m>=60?Math.round(m/60)+"h":Math.round(m)+"m";}
-  function fld(v,k){
-    if(v==null)return 0;
-    if(typeof v==="number")return k==="cost"?v:0;
-    return Number(v[k])||0;
-  }
-  function pct(a,b){return b?(a/b*100):0;}
-  function entries(map,key){
-    var out=[];
-    for(var k in (map||{}))out.push({name:k,v:map[k],cost:fld(map[k],key||"cost")});
-    out.sort(function(a,b){return b.cost-a.cost;});
-    return out;
-  }
-
-  function loadUsage(force){
-    if(usageBusy)return Promise.resolve();
-    usageBusy=true;
-    var jobs=[fetch("/api/usage?days="+usageDays,{cache:"no-store"}).then(function(r){return r.json();})
-      .then(function(d){USAGE=d; usageLoaded=true;})];
-    if(usageView==="transcript"&&usageSession&&(force||!TRANSCRIPT||TRANSCRIPT.id!==usageSession))
-      jobs.push(loadTranscript(usageSession));
-    return Promise.all(jobs).catch(function(){
-      USAGE={error:"usage index unavailable"};
-    }).then(function(){usageBusy=false; renderUsage();});
-  }
-
-  function loadTranscript(id){
-    return fetch("/api/session/"+encodeURIComponent(id),{cache:"no-store"})
-      .then(function(r){return r.json();})
-      .then(function(d){TRANSCRIPT=d&&!d.error?{id:id,meta:d.meta,turns:d.turns||[]}:{id:id,error:(d&&d.error)||"unreadable"};});
-  }
-
-  function setUsageView(v,session){
-    usageView=v;
-    if(session!==undefined)usageSession=session;
-    var btns=document.querySelectorAll("#usage-seg [data-view]");
-    for(var i=0;i<btns.length;i++)btns[i].setAttribute("aria-selected",btns[i].getAttribute("data-view")===v?"true":"false");
-    for(var j=0;j<VIEWS.length;j++){
-      var el=document.getElementById("v-"+VIEWS[j]);
-      if(el)el.hidden=(VIEWS[j]!==v);
-    }
-    syncHash();
-    if(v==="transcript"&&usageSession&&(!TRANSCRIPT||TRANSCRIPT.id!==usageSession)){
-      loadTranscript(usageSession).then(renderTranscript);
-    }
-    // Limits is LAZY like the tab itself: the Codex side may spawn one vendor
-    // subprocess server-side, so it runs when the view is opened, not on poll.
-    if(v==="limits"&&!LIMITS)loadLimits();
-  }
-
-  // titleTxt is optional and goes on the OUTER .kpi, so the whole card is the
-  // hover target — a tooltip anchored to the number alone would be a 40px
-  // target for a 200px card. Omitted entirely when not passed, so no card
-  // gains an empty title="".
-  function kpi(k,v,d,cls,titleTxt){
-    return '<div class="kpi '+cls+'"'+(titleTxt?' title="'+esc(titleTxt)+'"':"")
-      +'><div class="k">'+esc(k)+'</div><div class="v">'+esc(v)+'</div>'
-      +'<div class="d">'+d+"</div></div>";
-  }
-  function bar(label,valueTxt,subTxt,share,alt,extra){
-    return '<div class="mrow"'+(extra||"")+'><span class="mname'+(alt?"":" mono")+'">'+label+"</span>"
-      +'<span class="mbar"><i class="'+(alt?"alt":"")+'" style="width:'+share.toFixed(1)+'%"></i></span>'
-      +'<span class="mval mono">'+esc(valueTxt)+"</span>"
-      +'<span class="msub mono">'+esc(subTxt)+"</span></div>";
-  }
-
-  // ADR-0009 §4 — all three time tiers, as the asserted ordering
-  // engaged <= open <= summed. The visible KPI still leads with the honest
-  // figure; this is the SUPPORTING EVIDENCE for it, which is why it lives in a
-  // tooltip and not in the hero row. Hover is a weak channel (undiscoverable by
-  // accident, absent on touch) and the ADR records that trade-off: a reader who
-  // never hovers is less informed, not misled. Every figure comes from totals —
-  // nothing here is computed a second way.
-  function ladder(t){
-    return "engaged "+fmtHours(t.engagedSeconds)
-      +" ≤ open "+fmtHours(t.spanUnionSeconds)
-      +" ≤ summed "+fmtHours((Number(t.spanMinutes)||0)*60)+"\\n"
-      +"engaged unions active sub-intervals split at 15-min silences; "
-      +"open unions whole session spans; summed double-counts overlap.";
-  }
-
-  function renderScore(d){
-    var t=d.totals||{};
-    var cacheShare=pct(t.cacheRead,t.tokens);
-    document.getElementById("u-hero").innerHTML=
-      kpi("sessions",fmtNum(t.sessions),esc(fmtNum(t.responses))+" assistant turns","")
-      +kpi("api-equivalent",fmtUsd(t.cost),"list price &middot; not plan billing","accent")
-      +kpi("tokens",fmtTok(t.tokens),esc(fmtTok(t.output))+" out &middot; "+esc(fmtTok(t.cacheRead))+" cached","")
-      +kpi("engaged time",fmtHours(t.engagedSeconds),
-        esc(fmtMins(t.spanMinutes))+" summed"
-        +'<span class="d-note">sessions overlap</span>',"",ladder(t))
-      +kpi("cache read",cacheShare.toFixed(1)+"%","priced at 0.1&times; input","warnv");
-    document.getElementById("u-asof").textContent=d.pricesAsOf?("rates as of "+d.pricesAsOf):"";
-
-    // cost per day
-    var days=[],k;
-    for(k in (d.byDay||{}))days.push({day:k,v:d.byDay[k]});
-    days.sort(function(a,b){return a.day<b.day?-1:1;});
-    var maxDay=0;
-    for(var i=0;i<days.length;i++)maxDay=Math.max(maxDay,fld(days[i].v,"cost"));
-    document.getElementById("u-days-note").textContent="api-equivalent · "+usageDays+"-day window";
-    document.getElementById("u-daybars").innerHTML=days.length?days.map(function(x){
-      var c=fld(x.v,"cost"), h=maxDay?Math.max(2,c/maxDay*100):2;
-      var tip=x.day+" · "+fmtUsd(c)+" · "+fmtTok(fld(x.v,"tokens"))+" tok · "+fmtNum(fld(x.v,"sessions"))+" sessions";
-      return '<div class="daybar" title="'+esc(tip)+'"><div class="db-fill" style="height:'+h.toFixed(1)+'%"></div>'
-        +'<span class="db-lab">'+esc(x.day.slice(8))+"</span></div>";
-    }).join(""):'<div class="empty">no days in window.</div>';
-
-    // by host
-    var prov=d.byProvider||{};
-    var order=["claude","codex"];
-    for(k in prov)if(order.indexOf(k)<0)order.push(k);
-    document.getElementById("u-hosts").innerHTML=order.map(function(name){
-      var v=prov[name], cost=fld(v,"cost"), sess=fld(v,"sessions"), tok=fld(v,"tokens");
-      var idle=!sess&&!cost;
-      return '<div class="pcard'+(idle?" idle":"")+'"><div class="ph"><span class="pdot '
-        +(name==="codex"?"x":"c")+'"></span>'+esc(name)+"</div>"
-        +'<div class="pv mono">'+esc(fmtUsd(cost))+"</div>"
-        +'<div class="pl">'+(idle?"no sessions in window":esc(fmtNum(sess))+" sessions &middot; "+esc(fmtTok(tok))+" tokens")+"</div></div>";
-    }).join("");
-
-    var segs=[["cache read",t.cacheRead,"var(--warn)"],["cache write",t.cacheWrite,"var(--purple)"],
-      ["output",t.output,"var(--accent)"],["input",t.input,"var(--ok)"]];
-    document.getElementById("u-tokbar").innerHTML=segs.map(function(sg){
-      return '<i style="width:'+pct(sg[1],t.tokens).toFixed(2)+"%;background:"+sg[2]+'"></i>';
-    }).join("");
-    document.getElementById("u-toklegend").innerHTML=segs.map(function(sg){
-      return '<span class="lg"><i style="background:'+sg[2]+'"></i>'+esc(sg[0])+" <b>"+esc(fmtTok(sg[1]))+"</b></span>";
-    }).join("");
-
-    // punchcard — dow 0 = Mon
-    var DOW=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], pcMax=0, key;
-    for(key in (d.punchcard||{}))pcMax=Math.max(pcMax,Number(d.punchcard[key])||0);
-    var pcHtml="";
-    for(var dw=0;dw<7;dw++){
-      pcHtml+='<div class="pc-row"><span class="pc-day">'+DOW[dw]+"</span>";
-      for(var hr=0;hr<24;hr++){
-        var n=Number((d.punchcard||{})[dw+"-"+hr])||0;
-        var v=pcMax?(n/pcMax):0;
-        pcHtml+='<i class="pc" style="--v:'+v.toFixed(3)+'" title="'+DOW[dw]+" "+(hr<10?"0":"")+hr
-          +':00 — '+n+' responses"></i>';
-      }
-      pcHtml+="</div>";
-    }
-    pcHtml+='<div class="pc-axis">';
-    for(var ax=0;ax<24;ax++)pcHtml+="<span>"+(ax%3===0?ax:"")+"</span>";
-    pcHtml+="</div>";
-    document.getElementById("u-punch").innerHTML=pcMax?pcHtml:'<div class="empty">no responses in window.</div>';
-
-    // models + projects
-    var models=entries(d.byModel), mMax=models.length?models[0].cost:0;
-    document.getElementById("u-models").innerHTML=models.length?models.map(function(m){
-      return bar(esc(m.name),fmtUsd(m.cost),fmtTok(fld(m.v,"tokens"))+" · "+fmtNum(fld(m.v,"responses"))+" resp",
-        pct(m.cost,mMax),false);
-    }).join(""):'<div class="empty">no models in window.</div>';
-    // Dropped-connection / rate-limit / auth-failure turns never resolve to a
-    // model — excluded from this list entirely rather than shown as a $0 row
-    // (see docs/USAGE-SCORECARD-METRICS.md §10). Surfaced here instead, only
-    // when nonzero, so they stay visible rather than silently vanishing.
-    // On its own line (.n-sub), so no leading separator — a "·" would read as a
-    // continuation of the caption above rather than the start of a new fact.
-    var exc=fld(t,"exceptions");
-    document.getElementById("u-models-note").textContent=exc?(fmtNum(exc)+" dropped/errored turn"+(exc===1?"":"s")+" excluded"):"";
-
-    var projects=entries(d.byProject), pMax=projects.length?projects[0].cost:0;
-    var shown=projects.slice(0,8);
-    document.getElementById("u-projects-note").textContent=
-      projects.length>8?("top 8 of "+projects.length):(projects.length+" project"+(projects.length===1?"":"s"));
-    document.getElementById("u-projects").innerHTML=shown.length?shown.map(function(pr){
-      return bar(esc(pr.name),fmtUsd(pr.cost),fmtNum(fld(pr.v,"sessions"))+" sess · "+fmtMins(fld(pr.v,"minutes")),
-        pct(pr.cost,pMax),true);
-    }).join(""):'<div class="empty">no projects in window.</div>';
-
-    // categories — confidence is DISPLAYED, and Unclassified is never hidden.
-    var cats=entries(d.byCategory), cMax=cats.length?cats[0].cost:0;
-    document.getElementById("u-cats").innerHTML=cats.length?cats.map(function(c){
-      var sess=fld(c.v,"sessions")||1, conf=fld(c.v,"confidence");
-      var uncl=(c.name==="Unclassified");
-      var dot=uncl?"":'<i class="conf" style="opacity:'+(0.5+conf*0.5).toFixed(2)
-        +'" title="mean classifier confidence '+conf.toFixed(2)+'"></i>';
-      return '<button type="button" class="crow'+(uncl?" uncl":"")+'" data-cat="'+esc(c.name)+'" title="click to filter sessions">'
-        +'<span class="c-name">'+esc(c.name)+dot+"</span>"
-        +'<span class="mbar"><i style="width:'+pct(c.cost,cMax).toFixed(1)+"%;background:"+(uncl?"var(--ink-dim)":"var(--accent)")+'"></i></span>'
-        +'<span class="mval mono">'+esc(fmtUsd(c.cost))+"</span>"
-        +'<span class="msub mono">'+esc(fmtNum(fld(c.v,"sessions"))+" sess · "+fmtUsd(c.cost/sess)+"/sess")+"</span></button>";
-    }).join(""):'<div class="empty">nothing classified in window.</div>';
-  }
-
-  // ══ Limits view (ADR-0010) ═════════════════════════════════════════════════
-  var LIMITS=null, limitsBusy=false;
-
-  function loadLimits(){
-    if(limitsBusy)return;
-    limitsBusy=true;
-    fetch("/api/limits?days="+usageDays,{cache:"no-store"})
-      .then(function(r){return r.json();})
-      .then(function(d){LIMITS=d&&!d.error?d:{error:(d&&d.error)||"limits unavailable"};})
-      .catch(function(){LIMITS={error:"limits unavailable"};})
-      .then(function(){limitsBusy=false; renderLimits();});
-  }
-
-  // "as of 3m ago" — an epoch-ms fetchedAt against the browser clock. Stale is
-  // LABELLED, never hidden: a yesterday's-number bar with no timestamp is a lie
-  // of omission.
-  function limAge(ms){
-    if(!ms||!isFinite(ms))return "";
-    var m=Math.max(0,Math.round((Date.now()-ms)/60000));
-    if(m<1)return "just now";
-    if(m<60)return m+"m ago";
-    var h=Math.round(m/60);
-    return h<48?h+"h ago":Math.round(h/24)+"d ago";
-  }
-  function limStale(ms,freshMs){return !ms||!isFinite(ms)||(Date.now()-ms)>freshMs;}
-  function resetTxt(sec){
-    if(!sec||!isFinite(sec))return "";
-    var d=new Date(sec*1000);
-    if(isNaN(d))return "";
-    return "resets "+d.toLocaleString(undefined,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"});
-  }
-  // One utilization row on the shared .mrow grid; fill color says how close to
-  // the cap this window is (ok <70, warn ≥70, fail ≥90).
-  function limRow(label,usedPercent,resetSec,sub){
-    var p=Math.max(0,Math.min(100,Number(usedPercent)||0));
-    var col=p>=90?"var(--fail)":(p>=70?"var(--warn)":"var(--ok)");
-    return '<div class="mrow"><span class="mname">'+esc(label)+"</span>"
-      +'<span class="mbar"><i style="width:'+p.toFixed(1)+"%;background:"+col+'"></i></span>'
-      +'<span class="mval mono">'+p.toFixed(0)+"%</span>"
-      +'<span class="msub mono">'+esc(sub||resetTxt(resetSec))+"</span></div>";
-  }
-
-  function renderLimits(){
-    var claudeEl=document.getElementById("u-lim-claude");
-    var codexEl=document.getElementById("u-lim-codex");
-    if(!claudeEl||!codexEl)return;
-    if(!LIMITS){claudeEl.innerHTML='<div class="empty">loading&hellip;</div>'; codexEl.innerHTML='<div class="empty">loading&hellip;</div>'; return;}
-    if(LIMITS.error){claudeEl.innerHTML='<div class="empty">'+esc(LIMITS.error)+"</div>"; codexEl.innerHTML=""; return;}
-
-    var c=LIMITS.claude;
-    var cn=document.getElementById("u-lim-claude-note");
-    if(c&&c.windows&&c.windows.length){
-      // Claude's tee is push-only: FRESH means a session wrote it in the last
-      // 10 minutes; anything older gets the stale badge rather than silence.
-      if(cn)cn.textContent="statusline tee · "+limAge(c.fetchedAt)+(limStale(c.fetchedAt,600000)?" · stale":"");
-      claudeEl.innerHTML=c.windows.map(function(w){
-        return limRow("claude · "+(w.label||w.id),w.usedPercent,w.resetsAt);
-      }).join("");
-    }else{
-      if(cn)cn.textContent="no data";
-      claudeEl.innerHTML='<div class="empty">no Claude limit data yet &mdash; it arrives while a Claude Code session runs '
-        +"with the kit's managed statusline (Pro/Max plans only). Run one session, then revisit.</div>";
-    }
-
-    var x=LIMITS.codex;
-    var xn=document.getElementById("u-lim-codex-note");
-    if(x&&x.lanes&&x.lanes.length){
-      if(xn)xn.textContent=(x.planType?("plan "+x.planType+" · "):"")+"app-server · "+limAge(x.fetchedAt);
-      var html="";
-      for(var i=0;i<x.lanes.length;i++){
-        var lane=x.lanes[i];
-        for(var j=0;j<(lane.windows||[]).length;j++){
-          var w=lane.windows[j];
-          html+=limRow(lane.name+" · "+(w.label||""),w.usedPercent,w.resetsAt);
-        }
-        if(!(lane.windows||[]).length)html+=limRow(lane.name,0,null,"no window reported");
-      }
-      var rc=x.resetCredits;
-      if(rc&&rc.availableCount>0){
-        html+='<div class="legend" style="margin-top:11px"><span class="lg"><i style="background:var(--ok)"></i>'
-          +esc(fmtNum(rc.availableCount))+" rate-limit reset credit"+(rc.availableCount===1?"":"s")
-          +" available &middot; redeem via codex /usage</span></div>";
-      }
-      codexEl.innerHTML=html;
-    }else{
-      if(xn)xn.textContent="no data";
-      codexEl.innerHTML='<div class="empty">no Codex limit data &mdash; codex is not installed, not logged in, '
-        +"or app-server did not answer.</div>";
-    }
-
-    var ins=Array.isArray(LIMITS.insights)?LIMITS.insights:[];
-    document.getElementById("u-lim-insights").innerHTML=ins.length
-      ?ins.map(insightCard).join("")
-      :'<div class="empty">no limit findings &mdash; nothing is ahead of pace and no arbitrage is open.</div>';
-  }
-
-  function renderFindings(d){
-    var ins=Array.isArray(d.insights)?d.insights:[];
-    var badge=document.getElementById("u-findings-n");
-    var warns=ins.filter(function(x){return x.severity==="warn";}).length;
-    if(badge){if(warns){badge.hidden=false; badge.textContent=String(warns);}else{badge.hidden=true;}}
-    document.getElementById("u-findings-note").innerHTML=
-      ins.length+" finding"+(ins.length===1?"":"s")+", ranked by estimated impact. A finding only claims a "
-      +"dollar figure when it can compute one from your data &mdash; the rest say <b>no $ claimed</b> rather "
-      +"than inventing a number. Recommendations that depend on model-capability claims carry their sources.";
-    document.getElementById("u-insights").innerHTML=ins.length
-      ?ins.map(insightCard).join("")
-      :'<div class="empty">no findings — nothing in this window crossed a detector threshold.</div>';
-  }
-
-  // One finding card. Shared by the Findings view and the Limits view — both
-  // render the same Insight contract, so they must render it the same way.
-  function insightCard(f,i){
-    var imp=(typeof f.impact==="number")
-      ? '<span class="i-imp mono">~'+esc(fmtUsd(f.impact))+"/window</span>"
-      : '<span class="i-imp mono soft">no $ claimed</span>';
-    var cmd=f.command?' <code class="i-cmd">'+esc(f.command)+"</code>":"";
-    var src="";
-    if(f.sources&&f.sources.length){
-      src='<details class="i-src"><summary>grounding &mdash; '+f.sources.length+" source"
-        +(f.sources.length===1?"":"s")+"</summary><ul>"
-        +f.sources.map(function(sc){
-          return "<li><a href=\\""+esc(sc.url)+"\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">"+esc(sc.label)+"</a></li>";
-        }).join("")+"</ul></details>";
-    }
-    return '<article class="icard" data-sev="'+esc(f.severity||"info")+'">'
-      +'<div class="i-top"><span class="i-n">'+(i+1)+"</span>"
-      +'<span class="i-title">'+esc(f.title)+"</span>"
-      +'<span class="i-kind">'+esc(f.kind==="trend"?"trend":"coaching")+"</span>"+imp+"</div>"
-      +'<p class="i-find">'+esc(f.finding)+"</p>"
-      +(f.evidence?'<p class="i-ev">'+esc(f.evidence)+"</p>":"")
-      +'<div class="i-act"><span class="i-arrow">&rarr;</span><span>'+esc(f.action)+cmd+"</span></div>"
-      +src+"</article>";
-  }
-
-  // A missing signal renders as an em dash and is NEVER omitted: a line that
-  // disappears when the value is null teaches the reader that the field does
-  // not exist, when in fact it was measured and found absent (ADR-0009 §5).
-  function dash(v){return (v==null||v==="")?"—":String(v);}
-
-  /* The ten fields that shipped on the wire and rendered nowhere. Everything
-     here comes from the row the browser already holds — no route, no fetch. */
-  function sdetail(sx){
-    // basis is a STRING contract. Only null/empty falls back, so a non-string
-    // still renders as itself and trips the harness's [object Object] net —
-    // coercing it here would hide exactly the bug the net exists to catch.
-    var basis=(sx.basis==null||sx.basis==="")?"no signal":sx.basis;
-    var conf=(typeof sx.confidence==="number")
-      ? ' <span class="sd-conf">(conf '+esc(sx.confidence.toFixed(2))+")</span>" : "";
-    var models=(Array.isArray(sx.models)&&sx.models.length)?sx.models.join(", "):"—";
-    var toks="in "+fmtTok(sx.input)+" · out "+fmtTok(sx.output)
-      +" · cache r "+fmtTok(sx.cacheRead)+" / w "+fmtTok(sx.cacheWrite)
-      // Codex-only detail: reasoning tokens are a SUBSET of output (they bill
-      // as output), so this annotates the split without changing any sum.
-      +((Number(sx.reasoningOutput)||0)>0?" · reasoning "+fmtTok(sx.reasoningOutput)+" (in out)":"");
-    var tmap=(sx.tools&&typeof sx.tools==="object"&&!Array.isArray(sx.tools))?sx.tools:{};
-    var tl=[],tk;
-    for(tk in tmap)tl.push({n:tk,c:Number(tmap[tk])||0});
-    tl.sort(function(a,b){return b.c-a.c;});
-    var tools=tl.length?tl.slice(0,6).map(function(x){return x.n+" "+x.c;}).join(" · "):"—";
-    var flags="skill "+dash(sx.skill)+" · plugin "+dash(sx.plugin)
-      +" · sidechain "+(sx.sidechain==null?"—":(sx.sidechain?"yes":"no"))
-      +" · worktree "+dash(sx.worktree);
-    var rows=[["basis",esc(basis)+conf],["models",esc(models)],["tokens",esc(toks)],
-      ["tools",esc(tools)],["flags",esc(flags)]];
-    return '<div class="sdetail" id="sd-'+esc(sx.id)+'" hidden>'
-      +rows.map(function(r){
-        // The literal space is load-bearing, not formatting: adjacent
-        // inline-blocks with no whitespace between them collapse into one
-        // unbroken word in the rendered text ("FLAGSskill"), destroying the
-        // word boundary that anything reading it depends on.
-        return '<div class="sd-line"><span class="sd-k">'+r[0]+'</span> <span class="sd-v">'+r[1]+"</span></div>";
-      }).join("")+"</div>";
-  }
-
-  // Returns TWO siblings: the grid row, then its detail strip. The strip is a
-  // block-level sibling inside .pbody, not a grid child of .srow, so it spans
-  // the full width without joining the column layout.
-  function sessionRow(sx){
-    var host=(sx.provider==="codex")?"codex":"claude";
-    var cat=sx.category||"Unclassified";
-    var uncl=(cat==="Unclassified");
-    var weak=(typeof sx.confidence==="number"&&sx.confidence<0.6)?"0":"1";
-    var when=sx.start?new Date(sx.start):null;
-    var whenTxt=when&&!isNaN(when)?when.toLocaleString(undefined,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}):"—";
-    // Session ids are validated against [A-Za-z0-9._-]{1,128} by parseSessionId
-    // before they are ever indexed, so they are safe AND unique as DOM ids.
-    var sid=esc(sx.id);
-    var wt=sx.worktree!=null?'<span class="s-wt" title="git worktree — the repo is the project">⑂'+esc(sx.worktree)+"</span>":"";
-    return '<div class="srow" data-id="'+sid+'" title="open transcript">'
-      +'<button class="s-exp" type="button" aria-expanded="false" aria-controls="sd-'+sid+'"'
-        +' title="show session detail" aria-label="show session detail">&rsaquo;</button>'
-      +'<span class="s-host s-'+host+'">'+esc(host)+"</span>"
-      +'<span class="s-title">'+esc(sx.title||"(untitled)")+wt+"</span>"
-      +'<span class="cat'+(uncl?" uncl":"")+'" data-w="'+weak+'">'+esc(cat)+"</span>"
-      +'<span class="s-when mono">'+esc(whenTxt)+"</span>"
-      +'<span class="s-dur mono">'+esc(fmtMins(sx.minutes))+"</span>"
-      +'<span class="s-turns mono">'+esc((sx.prompts||0)+"/"+(sx.responses||0))+"</span>"
-      +'<span class="s-tok mono">'+esc(fmtTok(sx.tokens))+"</span>"
-      +'<span class="s-cost mono">'+esc(fmtUsd(sx.cost))+"</span>"
-      +'<button class="s-tx" type="button" data-tx="'+sid+'" title="open transcript" aria-label="open transcript">&#9707;</button>'
-    +"</div>"+sdetail(sx);
-  }
-
-  function renderSessions(d){
-    var tree=Array.isArray(d.projectTree)?d.projectTree:[];
-    var n=document.getElementById("u-sessions-n");
-    if(n)n.textContent=tree.length?" "+fmtNum((d.totals||{}).sessions):"";
-    document.getElementById("u-tree").innerHTML=tree.length?tree.map(function(g){
-      var chips="";
-      // usage-index emits categories as a COST-RANKED ARRAY of
-      // {category, sessions, cost} — already ordered, so no re-sort here. The
-      // keyed-map fallback below is for older cached payloads only; treating an
-      // array as a map yields Object.keys() === ["0","1"...] and renders
-      // "0 [object Object]", so the shape check is load-bearing, not defensive noise.
-      var cs=g.categories;
-      if(Array.isArray(cs)){
-        for(var i=0;i<cs.length&&i<3;i++){
-          var c=cs[i]||{};
-          chips+='<span class="pchip">'+esc(c.category)+" <b>"+esc(String(c.sessions))+"</b></span>";
-        }
-      }else if(cs&&typeof cs==="object"){
-        var ck=Object.keys(cs).sort(function(a,b){return (cs[b]||0)-(cs[a]||0);}).slice(0,3);
-        for(var j=0;j<ck.length;j++)chips+='<span class="pchip">'+esc(ck[j])+" <b>"+esc(String(cs[ck[j]]))+"</b></span>";
-      }
-      var rows=Array.isArray(g.rows)?g.rows:[];
-      var body=rows.length?rows.slice(0,25).map(sessionRow).join(""):'<div class="smore">no sessions loaded for this project.</div>';
-      if(rows.length>25||g.sessions>rows.length){
-        body+='<div class="smore">showing '+Math.min(25,rows.length)+" of "+fmtNum(g.sessions)
-          +' · <button type="button" data-more="'+esc(g.project)+'">load all</button></div>';
-      }
-      // Every project starts COLLAPSED. Auto-opening the first one pushed the
-      // remaining projects below the fold, which defeats the point of the
-      // aggregate view — the comparison across projects IS the top-level answer.
-      return '<div class="pgroup">'
-        +'<button class="phead" type="button"><span class="chev">&rsaquo;</span>'
-        +'<span class="pname">'+esc(g.project)+"</span>"
-        +'<span class="pchips">'+chips+"</span>"
-        +'<span class="pn mono">'+esc(fmtNum(g.sessions))+" sess</span>"
-        +'<span class="pn mono p-h">'+esc(fmtMins(g.minutes))+"</span>"
-        +'<span class="pn mono p-tok">'+esc(fmtTok(g.tokens))+"</span>"
-        +'<span class="pcost mono">'+esc(fmtUsd(g.cost))+"</span></button>"
-        +'<div class="pbody" data-body="'+esc(g.project)+'">'+body+"</div></div>";
-    }).join(""):'<div class="empty">no sessions in window.</div>';
-  }
-
-  // Secrets are masked SERVER-side (ADR-0009 §8) — nothing here can un-redact
-  // what never left the process. This only makes the redactions visible as
-  // redactions, so a reader can see that something was withheld.
-  // The masker emits "<prefix>\u2026redacted" (sk-\u2026redacted, Bearer \u2026redacted).
-  // This used to hunt for ***, \u2022\u2022\u2022 or [REDACTED] \u2014 sentinels nothing ever
-  // produced \u2014 so no .masked span was ever created and the styling below was
-  // dead code. There is deliberately NO click-to-reveal: masking happens
-  // server-side and the original never reaches the browser, so there is nothing
-  // here to reveal. Marking it is the whole feature.
-  function markRedactions(text){
-    return esc(text).replace(/([A-Za-z_.-]*\u2026redacted)/g,function(m){
-      return '<span class="masked" title="masked server-side \u2014 the original was never sent to this page">'+m+"</span>";
-    });
-  }
-
-  // Harness sentinel markup \u2014 the XML wrappers Claude Code writes into
-  // transcript text (<command-name>, <system-reminder>, <local-command-*>) \u2014
-  // rendered as styled structure instead of literal angle-bracket soup.
-  // PRESENTATION ONLY: the wrapped content is kept verbatim (ADR-0009 \u00a78's
-  // no-silent-alteration rule); only the wrapper tags become styling. Runs on
-  // ESCAPED html (after markRedactions), so patterns match &lt;tag&gt;. An
-  // unmatched tag (e.g. cut mid-sentinel by turn truncation) is left raw.
-  var H_TAGS={"system-reminder":"system reminder","local-command-caveat":"caveat",
-    "local-command-stdout":"command output","local-command-stderr":"command stderr",
-    "bash-stdout":"bash output","bash-stderr":"bash stderr","task-notification":"task notification"};
-  function fmtHarness(html){
-    return html
-      .replace(/&lt;command-name&gt;([\\s\\S]*?)&lt;\\/command-name&gt;\\s*(?:&lt;command-message&gt;([\\s\\S]*?)&lt;\\/command-message&gt;\\s*)?(?:&lt;command-args&gt;([\\s\\S]*?)&lt;\\/command-args&gt;)?/g,
-        function(_,name,msg,args){
-          var n=name.trim(), a=(args||"").trim(), m=(msg||"").trim();
-          return '<span class="h-cmd"'+(m&&m!==n.replace(/^\\//,"")?' title="'+m+'"':"")
-            +'>'+n+(a?" "+a:"")+"</span>";
-        })
-      // bash-input is the person's own "! command" — a chip, prefixed so it
-      // reads as the shell invocation it was, not as prose.
-      .replace(/&lt;bash-input&gt;([\\s\\S]*?)&lt;\\/bash-input&gt;/g,
-        function(_,cmd){return '<span class="h-cmd" title="shell command run with the ! prefix">! '+cmd.trim()+"</span>";})
-      .replace(/&lt;(system-reminder|local-command-caveat|local-command-stdout|local-command-stderr|bash-stdout|bash-stderr|task-notification)&gt;\\s*([\\s\\S]*?)\\s*&lt;\\/\\1&gt;/g,
-        function(_,tag,body){
-          return '<span class="h-note"><i class="h-tag">'+H_TAGS[tag]+"</i>"+body+"</span>";
-        });
-  }
-
-  // ADR-0009 §8 — an abridged turn must not be readable as a complete one, and
-  // "truncated" alone is not enough: a reader who cannot tell 1% loss from 90%
-  // loss knows something is missing and nothing about whether it matters.
-  //
-  // The SHOWN figure is DERIVED, never hardcoded. MAX_TURN_CHARS lives in
-  // usage-index.mjs and the browser never sees it, so a literal 40000 here
-  // would silently desync the day someone changes the constant — which is the
-  // failure mode this whole ADR exists to prevent. We subtract the marker the
-  // producer appends from the text we actually received.
-  var TRUNC_MARK="\\n…[truncated]";
-  function truncBadge(tn){
-    if(!tn||tn.truncated!==true)return "";
-    var shown=String(tn.text==null?"":tn.text);
-    var n=shown.length-(shown.slice(-TRUNC_MARK.length)===TRUNC_MARK?TRUNC_MARK.length:0);
-    // A cached payload can carry truncated:true with no originalChars. Say so,
-    // rather than inventing a denominator or dropping the badge — §6's rule
-    // about claiming a figure only when you can compute one.
-    if(typeof tn.originalChars!=="number"||!isFinite(tn.originalChars)||tn.originalChars<=0)
-      return '<span class="t-trunc" title="this turn was abridged before it was sent to this page; '
-        +'the original length was not recorded">truncated</span>';
-    return '<span class="t-trunc" title="'
-      +esc(fmtNum(n)+" of "+fmtNum(tn.originalChars)
-        +" characters shown; the rest was not sent to this page")+'">truncated · '
-      +esc(fmtTok(n))+" of "+esc(fmtTok(tn.originalChars))+"</span>";
-  }
-
-  function renderTranscript(){
-    var crumb=document.getElementById("u-crumb"), body=document.getElementById("u-turns");
-    if(!usageSession){
-      crumb.innerHTML='<button type="button" data-back="1">&lsaquo; sessions</button><span>no session selected</span>';
-      body.innerHTML='<div class="empty">pick a session in the Sessions view to read it here.</div>';
-      return;
-    }
-    var t=TRANSCRIPT&&TRANSCRIPT.id===usageSession?TRANSCRIPT:null;
-    var m=(t&&t.meta)||{};
-    crumb.innerHTML='<button type="button" data-back="1">&lsaquo; sessions</button>'
-      +'<b style="color:var(--ink)">'+esc(m.title||usageSession)+"</b>"
-      +'<span class="mono">'+esc([m.project,fmtMins(m.minutes),
-        (m.prompts||0)+" prompts / "+(m.responses||0)+" responses",fmtTok(m.tokens),fmtUsd(m.cost)]
-        .filter(Boolean).join(" · "))+"</span>";
-    if(!t){body.innerHTML='<div class="empty">loading transcript…</div>'; return;}
-    if(t.error){body.innerHTML='<div class="empty">'+esc(t.error)+"</div>"; return;}
-    body.innerHTML=t.turns.length?t.turns.map(function(tn){
-      var user=(tn.role==="user");
-      var text=tn.text!=null?tn.text:(tn.body!=null?tn.body:(tn.content!=null?tn.content:""));
-      var tools=(tn.tools&&tn.tools.length)
-        ?'<div class="chips">'+tn.tools.map(function(x){return '<span class="tool">'+esc(x)+"</span>";}).join("")+"</div>":"";
-      var meta=truncBadge(tn)
-        +(tn.output?'<span class="t-meta mono">'+esc(fmtNum(tn.output))+" out</span>":"");
-      // role "user" ≠ "the human typed this": the Messages API records tool
-      // results and harness context injections under the user role, and the
-      // parser marks WHICH via tn.kind. Only kind "prompt" earns "you" — a
-      // tool result labeled "you" attributes the harness's work to the person.
-      // Fallback for a turn without kind: the prompt flag (false ⇒ tool
-      // feedback was the overwhelmingly dominant non-prompt case).
-      var kind=tn.kind||(user?(tn.prompt===false?"tool-result":"prompt"):"");
-      var who,cls,title="";
-      if(!user){who=tn.model||tn.role||"assistant"; cls="t-asst";}
-      else if(kind==="tool-result"){who="tool result"; cls="t-tool"; title="output returned to the model by the tooling — not typed by you";}
-      else if(kind==="context"){who="context"; cls="t-tool"; title="context injected by the harness — not typed by you";}
-      else{who="you"; cls="t-user";}
-      return '<div class="turn '+cls+'"><div class="t-who"'+(title?' title="'+esc(title)+'"':"")+'>'
-        +esc(who)+meta+"</div>"
-        +'<div class="t-body">'+fmtHarness(markRedactions(String(text)))+tools+"</div></div>";
-    }).join(""):'<div class="empty">this session has no readable turns.</div>';
-  }
-
-  function renderUsage(){
-    if(!USAGE)return;
-    if(USAGE.error){
-      document.getElementById("u-hero").innerHTML='<div class="empty">'+esc(USAGE.error)+"</div>";
-      return;
-    }
-    renderScore(USAGE);
-    renderFindings(USAGE);
-    renderSessions(USAGE);
-    if(usageView==="transcript")renderTranscript();
-  }
-
-  function wireUsage(){
-    var seg=document.getElementById("usage-seg");
-    if(seg)seg.addEventListener("click",function(e){
-      var b=e.target.closest?e.target.closest("[data-view]"):null;
-      if(b)setUsageView(b.getAttribute("data-view"));
-    });
-    var chips=document.getElementById("usage-days");
-    if(chips)chips.addEventListener("click",function(e){
-      var b=e.target.closest?e.target.closest("[data-days]"):null;
-      if(!b)return;
-      usageDays=Number(b.getAttribute("data-days"))||14;
-      var all=chips.querySelectorAll("[data-days]");
-      for(var i=0;i<all.length;i++)all[i].classList.toggle("on",all[i]===b);
-      usageLoaded=false; loadUsage(true);
-      // limit findings are computed against the same window; refetch on change.
-      LIMITS=null; if(usageView==="limits")loadLimits();
-    });
-    var panel=document.getElementById("panel-usage");
-    if(panel)panel.addEventListener("click",function(e){
-      var tgt=e.target;
-      var head=tgt.closest?tgt.closest(".phead"):null;
-      if(head){
-        var g=head.parentElement;
-        if(g.hasAttribute("data-open"))g.removeAttribute("data-open"); else g.setAttribute("data-open","1");
-        return;
-      }
-      var more=tgt.closest?tgt.closest("[data-more]"):null;
-      if(more){loadProjectSessions(more.getAttribute("data-more")); return;}
-      // MUST come before the [data-id] branch below: the caret lives INSIDE the
-      // row, so closest("[data-id]") matches it too. stopPropagation() first,
-      // then toggle — the row's click-to-open-transcript path is shipped
-      // behaviour and this must not disturb it. State is ephemeral by design:
-      // not persisted, not in the hash (a poll refresh re-renders collapsed).
-      var exp=tgt.closest?tgt.closest(".s-exp"):null;
-      if(exp){
-        e.stopPropagation();
-        var wasOpen=exp.getAttribute("aria-expanded")==="true";
-        exp.setAttribute("aria-expanded",wasOpen?"false":"true");
-        var det=document.getElementById(exp.getAttribute("aria-controls"));
-        if(det)det.hidden=wasOpen;
-        return;
-      }
-      // the glyph is the explicit affordance, but the whole row is a target too —
-      // a 14px icon is a cruel click target for a row you can already see.
-      var row=tgt.closest?tgt.closest("[data-id]"):null;
-      if(row){setUsageView("transcript",row.getAttribute("data-id")); return;}
-      var cat=tgt.closest?tgt.closest("[data-cat]"):null;
-      if(cat){filterByCategory(cat.getAttribute("data-cat")); return;}
-      var back=tgt.closest?tgt.closest("[data-back]"):null;
-      if(back){setUsageView("sessions",null); return;}
-      var mask=tgt.closest?tgt.closest(".masked"):null;
-      if(mask)mask.classList.toggle("shown");
-    });
-  }
-
-  function loadProjectSessions(project){
-    fetch("/api/sessions?days="+usageDays+"&project="+encodeURIComponent(project)+"&limit=1000",{cache:"no-store"})
-      .then(function(r){return r.json();}).then(function(d){
-        var el=document.querySelector('[data-body="'+project.replace(/"/g,"")+'"]');
-        if(!el)return;
-        el.innerHTML=(d.sessions||[]).map(sessionRow).join("")
-          ||'<div class="smore">no sessions.</div>';
-      }).catch(function(){});
-  }
-
-  function filterByCategory(cat){
-    setUsageView("sessions");
-    fetch("/api/sessions?days="+usageDays+"&category="+encodeURIComponent(cat)+"&limit=1000",{cache:"no-store"})
-      .then(function(r){return r.json();}).then(function(d){
-        document.getElementById("u-tree").innerHTML=
-          '<div class="pgroup" data-open="1"><button class="phead" type="button">'
-          +'<span class="chev">&rsaquo;</span><span class="pname">'+esc(cat)+"</span>"
-          +'<span class="pchips"><span class="pchip">filtered <b>'+fmtNum(d.total||0)+"</b></span></span>"
-          +'<span class="pn mono"></span><span class="pn mono"></span><span class="pn mono"></span>'
-          +'<span class="pcost mono"></span></button>'
-          +'<div class="pbody">'+((d.sessions||[]).map(sessionRow).join("")
-            ||'<div class="smore">no sessions in this category.</div>')+"</div></div>";
-      }).catch(function(){});
-  }
-
-  setTab(activeTab);
-  setUsageView(usageView);
-  wirePoll();
-  wireUsage();
-  schedulePoll();
-  lastAttempt=Date.now(); inflight=true;
-  Promise.all([pollStatus()].concat(activeTab==="usage"?[loadUsage()]:[]))
-    .catch(function(){}).then(function(){inflight=false; tickClock();});
-  setInterval(tickClock,1000);
-})();
-`;
diff --git a/src/lib/dashboard/client.mjs b/src/lib/dashboard/client.mjs
new file mode 100644
index 00000000..8da20986
--- /dev/null
+++ b/src/lib/dashboard/client.mjs
@@ -0,0 +1,1166 @@
+export const JS = `
+(function(){
+  "use strict";
+  var root=document.documentElement;
+  var LS="ak-dash-theme", LS_TAB="ak-dash-tab";
+
+  // theme: stored choice wins; otherwise follow the OS.
+  function sysTheme(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";}
+  var MOON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3 6.6 6.6 0 0 0 21 12.8z"/></svg>';
+  var SUN='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
+  function applyTheme(t){
+    root.setAttribute("data-theme",t);
+    var ic=document.getElementById("theme-icon"); if(ic)ic.innerHTML=(t==="dark"?MOON:SUN);
+    var btn=document.getElementById("theme-toggle"); if(btn)btn.setAttribute("aria-label",t==="dark"?"switch to light theme":"switch to dark theme");
+  }
+  var stored=null; try{stored=localStorage.getItem(LS);}catch(e){}
+  applyTheme(stored||sysTheme());
+  var tbtn=document.getElementById("theme-toggle");
+  if(tbtn)tbtn.addEventListener("click",function(){
+    var next=root.getAttribute("data-theme")==="dark"?"light":"dark";
+    applyTheme(next); try{localStorage.setItem(LS,next);}catch(e){}
+    render(LAST); // re-tint the sparklines to the new palette
+  });
+
+  var LEVEL_WORD={ok:"all systems nominal",warn:"attention advised",fail:"action required",unknown:"status unknown"};
+  var LAST=null, lastUpdated=0;
+
+  function esc(s){return String(s==null?"":s).replace(/[&<>"']/g,function(c){return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];});}
+
+  // ── tabs (segmented control) ──
+  // Category map: every subsystem lands in exactly one tab; unknown/future
+  // subsystems fall back to Runtime so nothing is ever dropped. Overview
+  // aggregates all attention cards regardless of category.
+  var TABS=["overview","hosts","providers","runtime","intel","usage","live"];
+  var VIEWS=["score","limits","findings","sessions","transcript"];
+  var CAT={
+    hosts:"hosts", mcp:"hosts", "codex-mcp":"hosts", routing:"hosts",
+    providers:"providers",
+    learning:"intel", "ruvnet-brain":"intel", "ruvnet-brain-nightly":"intel", aqe:"intel", agentdb:"intel"
+  };
+  function catOf(s){return CAT[s]||"runtime";}
+
+  var activeTab="overview";
+  var usageView="score", usageSession=null, usageDays=14;
+  try{var st=localStorage.getItem(LS_TAB); if(st&&TABS.indexOf(st)>=0)activeTab=st;}catch(e){}
+  // deep-link: #providers etc. wins over the stored tab. Usage carries a second
+  // segment: #usage/findings, #usage/sessions, or #usage/<sessionId> — anything
+  // that is not a known view name is read as a session id.
+  try{
+    var parts=location.hash.slice(1).split("/");
+    if(parts[0]&&TABS.indexOf(parts[0])>=0)activeTab=parts[0];
+    if(parts[0]==="usage"&&parts[1]){
+      if(VIEWS.indexOf(parts[1])>=0){usageView=parts[1];}
+      else{usageView="transcript"; usageSession=decodeURIComponent(parts[1]);}
+    }
+  }catch(e){}
+
+  function usageHash(){
+    if(usageView==="transcript")return "#usage/"+(usageSession?encodeURIComponent(usageSession):"transcript");
+    return usageView==="score"?"#usage":"#usage/"+usageView;
+  }
+  function syncHash(){
+    try{if(history.replaceState)history.replaceState(null,"",activeTab==="usage"?usageHash():"#"+activeTab);}catch(e){}
+  }
+
+  function positionThumb(){
+    var segEl=document.getElementById("seg"), thumb=document.getElementById("seg-thumb");
+    if(!segEl||!thumb)return;
+    var btn=segEl.querySelector('[data-tab="'+activeTab+'"]');
+    if(!btn)return;
+    thumb.style.left=btn.offsetLeft+"px";
+    thumb.style.width=btn.offsetWidth+"px";
+  }
+  function setTab(id,focus){
+    if(activeTab==="live"&&id!=="live"&&window.AKLive)window.AKLive.deactivate();
+    activeTab=id;
+    try{localStorage.setItem(LS_TAB,id);}catch(e){}
+    syncHash();
+    // Usage is LAZY (ADR-0009 §2): the index is only read once the tab is
+    // actually opened, never on the shared status poll.
+    if(id==="usage"&&!usageLoaded)loadUsage();
+    if(id==="live"&&window.AKLive)window.AKLive.activate();
+    for(var i=0;i<TABS.length;i++){
+      var t=TABS[i], on=(t===id);
+      var btn=document.querySelector('[data-tab="'+t+'"]');
+      var panel=document.getElementById("panel-"+t);
+      if(btn){btn.setAttribute("aria-selected",on?"true":"false"); btn.tabIndex=on?0:-1; if(on&&focus)btn.focus();}
+      if(panel)panel.hidden=!on;
+    }
+    positionThumb();
+  }
+  var seg=document.getElementById("seg");
+  if(seg){
+    seg.addEventListener("click",function(e){
+      var b=e.target.closest?e.target.closest("[data-tab]"):null;
+      if(b)setTab(b.getAttribute("data-tab"));
+    });
+    seg.addEventListener("keydown",function(e){
+      if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;
+      var i=TABS.indexOf(activeTab);
+      i=(i+(e.key==="ArrowRight"?1:TABS.length-1))%TABS.length;
+      setTab(TABS[i],true); e.preventDefault();
+    });
+  }
+  window.addEventListener("resize",positionThumb);
+  var mapEl=document.getElementById("statusmap");
+  if(mapEl)mapEl.addEventListener("click",function(e){
+    var t=e.target.closest?e.target.closest("[data-go]"):null;
+    if(t)setTab(t.getAttribute("data-go"));
+  });
+
+  // severity rank for rollups + triage sort; preferred order breaks ties.
+  var RANK={fail:3,warn:2,ok:1,info:0,unknown:0};
+  var PREF=["versions","self","natives","security","learning","providers","hosts","routing","mcp","codex-mcp","ruvnet-brain","ruvnet-brain-nightly","aqe","daemons","blocks","statusline","npx"];
+
+  // Collapse rows into one group per subsystem (kills repeated labels); the
+  // group's level is the worst of its rows. Sort worst-first, then by PREF.
+  function groupRows(rows){
+    var map={}, seq=[];
+    for(var i=0;i<rows.length;i++){
+      var r=rows[i], k=r.subsystem||"other";
+      if(!map[k]){map[k]={subsystem:k,rows:[],level:"info"};seq.push(k);}
+      map[k].rows.push(r);
+      if((RANK[r.level]||0)>(RANK[map[k].level]||0))map[k].level=r.level;
+    }
+    var groups=seq.map(function(k){return map[k];});
+    groups.sort(function(a,b){
+      var d=(RANK[b.level]||0)-(RANK[a.level]||0); if(d)return d;
+      var ia=PREF.indexOf(a.subsystem), ib=PREF.indexOf(b.subsystem);
+      return (ia<0?99:ia)-(ib<0?99:ib);
+    });
+    return groups;
+  }
+
+  function rowLine(r){
+    var lvl=r.level||"info";
+    var fix=r.fix?('<span class="row-fix"><span class="arrow">&rarr;</span><code>'+esc(r.fix)+"</code></span>"):"";
+    return '<li class="row" data-level="'+esc(lvl)+'">'
+      +'<span class="row-dot"></span>'
+      +'<span class="row-msg">'+esc(r.message)+fix+"</span>"
+    +"</li>";
+  }
+
+  function groupCard(g){
+    var lvl=g.level||"info", calm=(lvl==="ok"||lvl==="info");
+    var count=g.rows.length>1?('<span class="card-count">'+g.rows.length+"</span>"):"";
+    var badge=calm?"":('<span class="card-level">'+esc(lvl)+"</span>");
+    return '<article class="card" data-level="'+esc(lvl)+'">'
+      +'<div class="card-top">'
+        +'<span class="dot" data-level="'+esc(lvl)+'"></span>'
+        +'<span class="card-name">'+esc(g.subsystem)+"</span>"
+        +count+badge
+      +"</div>"
+      +'<ul class="rows">'+g.rows.map(rowLine).join("")+"</ul>"
+    +"</article>";
+  }
+
+  function gridHtml(groups){
+    return '<div class="grid">'+groups.map(groupCard).join("")+"</div>";
+  }
+  function stagger(el){
+    var cards=el.querySelectorAll(".card");
+    for(var i=0;i<cards.length;i++){cards[i].style.animationDelay=(i*40)+"ms";}
+  }
+
+  function renderSummary(groups){
+    var el=document.getElementById("summary");
+    var f=0,w=0,g=0;
+    for(var i=0;i<groups.length;i++){var L=groups[i].level;if(L==="fail")f++;else if(L==="warn")w++;else g++;}
+    if(!groups.length){el.hidden=true;el.innerHTML="";return;}
+    var pills=[];
+    if(f)pills.push('<span class="pill" data-level="fail"><span class="dot" data-level="fail"></span><b>'+f+"</b> failing</span>");
+    if(w)pills.push('<span class="pill" data-level="warn"><span class="dot" data-level="warn"></span><b>'+w+"</b> warning"+(w>1?"s":"")+"</span>");
+    pills.push('<span class="pill" data-tone="calm"><span class="dot" data-level="ok"></span><b>'+g+"</b> nominal</span>");
+    el.innerHTML=pills.join("");
+    el.hidden=false;
+  }
+
+  function renderBadges(cats){
+    for(var c in cats){
+      var el=document.getElementById("badge-"+c);
+      if(!el)continue;
+      var f=0,w=0;
+      for(var i=0;i<cats[c].length;i++){
+        var L=cats[c][i].level;
+        if(L==="fail")f++; else if(L==="warn")w++;
+      }
+      var n=f+w;
+      if(!n){el.hidden=true;el.textContent="";el.removeAttribute("data-tone");}
+      else{el.hidden=false;el.textContent=String(n);el.setAttribute("data-tone",f?"fail":"warn");}
+    }
+  }
+
+  function tile(g){
+    return '<button class="tile" type="button" data-go="'+esc(catOf(g.subsystem))+'" title="open in its tab">'
+      +'<span class="dot" data-level="'+esc(g.level)+'"></span>'
+      +esc(g.subsystem)
+      +'<span class="tile-go">&rsaquo;</span>'
+    +"</button>";
+  }
+
+  function renderPanels(rows){
+    var groups=groupRows(rows||[]);
+    renderSummary(groups);
+
+    // Overview: every attention card, in full, regardless of category.
+    var attn=groups.filter(function(x){return x.level==="fail"||x.level==="warn";});
+    var ael=document.getElementById("attention");
+    if(!groups.length){
+      ael.innerHTML='<div class="empty">no subsystem rows reported.</div>';
+    }else if(attn.length){
+      ael.innerHTML=gridHtml(attn); stagger(ael);
+    }else{
+      ael.innerHTML='<div class="allclear"><span class="dot" data-level="ok"></span>All systems nominal — nothing needs attention.</div>';
+    }
+
+    // Overview: compact status map of every subsystem; tiles jump to the tab.
+    var mh=document.getElementById("map-head");
+    document.getElementById("statusmap").innerHTML=groups.map(tile).join("");
+    mh.hidden=!groups.length;
+
+    // Category panels.
+    var cats={hosts:[],providers:[],runtime:[],intel:[]};
+    for(var i=0;i<groups.length;i++)cats[catOf(groups[i].subsystem)].push(groups[i]);
+    for(var c in cats){
+      var el=document.getElementById("cards-"+c);
+      if(!el)continue;
+      if(cats[c].length){el.innerHTML=gridHtml(cats[c]); stagger(el);}
+      else{el.innerHTML='<div class="empty">nothing reported here.</div>';}
+    }
+    renderBadges(cats);
+  }
+
+  function renderVerdict(overall){
+    var dot=document.getElementById("verdict-dot");
+    var txt=document.getElementById("verdict-text");
+    dot.setAttribute("data-level",overall||"unknown");
+    dot.className="dot";
+    txt.textContent=LEVEL_WORD[overall]||LEVEL_WORD.unknown;
+  }
+
+  // Update drift renders as a quiet notice line in Overview — no banner. The
+  // versions cards still carry the per-tool detail.
+  function renderNotice(drift){
+    var b=document.getElementById("update-notice");
+    var out=(drift||[]).filter(function(d){return d&&d.outdated;});
+    if(!out.length){b.hidden=true;b.innerHTML="";return;}
+    var parts=out.map(function(d){return "<b>"+esc(d.pkg)+"</b> "+esc(d.installed)+" &rarr; "+esc(d.latest);});
+    b.innerHTML='<span class="up">&uarr;</span><span>'+out.length+" update"+(out.length>1?"s":"")
+      +" available: "+parts.join(" &nbsp;·&nbsp; ")+" &mdash; run <code>ak sync</code></span>";
+    b.hidden=false;
+  }
+
+  // ── sparkline (pure SVG) ──
+  function accent(){return getComputedStyle(root).getPropertyValue("--accent").trim()||"#0a84ff";}
+  function sparkline(values){
+    var W=100,H=32,pad=3;
+    if(!values.length)return "";
+    var min=Math.min.apply(null,values),max=Math.max.apply(null,values);
+    var span=max-min||1;
+    var n=values.length;
+    var x=function(i){return pad+(n===1?0:(i/(n-1))*(W-2*pad));};
+    var y=function(v){return H-pad-((v-min)/span)*(H-2*pad);};
+    var d="",area="";
+    for(var i=0;i<n;i++){d+=(i?" L":"M")+x(i).toFixed(1)+" "+y(values[i]).toFixed(1);}
+    area="M"+x(0).toFixed(1)+" "+(H-pad)+" L"+x(0).toFixed(1)+" "+y(values[0]).toFixed(1)
+        +d.replace(/^M[^L]*/,"")+" L"+x(n-1).toFixed(1)+" "+(H-pad)+" Z";
+    var col=accent(),lastX=x(n-1).toFixed(1),lastY=y(values[n-1]).toFixed(1);
+    var gid="g"+Math.random().toString(36).slice(2,8);
+    return '<svg viewBox="0 0 '+W+" "+H+'" preserveAspectRatio="none" role="img">'
+      +'<defs><linearGradient id="'+gid+'" x1="0" x2="0" y1="0" y2="1">'
+        +'<stop offset="0" stop-color="'+col+'" stop-opacity="0.28"/>'
+        +'<stop offset="1" stop-color="'+col+'" stop-opacity="0"/>'
+      +"</linearGradient></defs>"
+      +'<path d="'+area+'" fill="url(#'+gid+')"/>'
+      +'<path d="'+d+'" fill="none" stroke="'+col+'" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/>'
+      +'<circle cx="'+lastX+'" cy="'+lastY+'" r="1.9" fill="'+col+'"/>'
+    +"</svg>";
+  }
+  function flat(msg){return '<div class="empty" style="padding:14px 0">'+esc(msg)+"</div>";}
+
+  function renderHistory(data){
+    var strip=document.getElementById("history");
+    var note=document.getElementById("strip-note");
+    var series=[];
+    if(data.health&&data.health.length){series=data.health;}
+    var pats=[],deltas=[];
+    for(var i=0;i<series.length;i++){
+      var s=series[i];
+      if(typeof s.patternsLearned==="number")pats.push(s.patternsLearned);
+      var dp=(typeof s.deltaPP==="number")?s.deltaPP:(s.improvement&&typeof s.improvement.deltaPP==="number"?s.improvement.deltaPP:null);
+      if(dp!=null)deltas.push(dp);
+    }
+    // fall back to a single improvement snapshot for the Δpp spark
+    if(!deltas.length&&data.improvement&&typeof data.improvement.deltaPP==="number"){deltas=[data.improvement.deltaPP];}
+
+    if(!pats.length&&!deltas.length){strip.hidden=true;return;}
+    strip.hidden=false;
+    note.textContent=(series.length?series.length+" samples":"snapshot");
+    document.getElementById("spark-patterns").innerHTML=pats.length>1?sparkline(pats):flat(pats.length?String(pats[0])+" (one sample)":"no data");
+    document.getElementById("spark-delta").innerHTML=deltas.length>1?sparkline(deltas):flat(deltas.length?(deltas[0]>=0?"+":"")+deltas[0]+"pp (one sample)":"no data");
+  }
+
+  function renderRouting(rt){
+    var strip=document.getElementById("routing");
+    if(!rt||!rt.routes||!rt.routes.length){strip.hidden=true;return;}
+    strip.hidden=false;
+    var s=rt.summary||{}, byHost=s.byHost||{}, primary=rt.primaryHost||"claude";
+    document.getElementById("routing-note").textContent=
+      "primary: "+primary+" · "+(byHost.claude||0)+" claude · "+(byHost.codex||0)+" codex · "+(s.custom||0)+" custom · "+(s.vendors||0)+" vendors";
+    var html="";
+    for(var i=0;i<rt.routes.length;i++){
+      var r=rt.routes[i];
+      var tag=r.akOriginated?' <span class="r-tag">ak</span>':'';
+      var escHtml=(r.escalate&&r.escalate.length)?'<span class="r-esc mono">↑ '+esc(r.escalate.join("→"))+"</span>":"";
+      var primAttr=(r.host===primary)?' data-primary="1"':'';
+      html+='<div class="r-row">'
+        +'<span class="r-act mono">'+esc(r.activity)+tag+"</span>"
+        +'<span class="r-host r-host-'+esc(r.host)+'"'+primAttr+' title="'+(r.host===primary?"primary host":"alternate host")+'">'+esc(r.host)+"</span>"
+        +'<span class="r-model mono">'+esc(r.model)+"</span>"
+        +'<span class="r-meta">'+escHtml+'<span class="r-src r-src-'+esc(r.source)+'">'+esc(r.source)+"</span></span>"
+      +"</div>";
+    }
+    document.getElementById("route-matrix").innerHTML=html;
+  }
+
+  // Providers tab: the distinct host+model pairs the routing policy puts in
+  // play, with how many activities each covers. Hidden without a dual policy.
+  function renderModels(rt){
+    var strip=document.getElementById("models");
+    if(!rt||!rt.routes||!rt.routes.length){strip.hidden=true;return;}
+    var seen={},list=[];
+    for(var i=0;i<rt.routes.length;i++){
+      var r=rt.routes[i];
+      if(!r.model)continue;
+      var k=r.host+"|"+r.model;
+      if(!seen[k]){seen[k]={host:r.host,model:r.model,n:0};list.push(seen[k]);}
+      seen[k].n++;
+    }
+    if(!list.length){strip.hidden=true;return;}
+    strip.hidden=false;
+    document.getElementById("models-note").textContent="primary: "+(rt.primaryHost||"claude");
+    var html="";
+    for(var j=0;j<list.length;j++){
+      var m=list[j];
+      html+='<div class="m-row">'
+        +'<span class="r-host r-host-'+esc(m.host)+'">'+esc(m.host)+"</span>"
+        +'<span class="m-model mono">'+esc(m.model)+"</span>"
+        +'<span class="m-n">'+m.n+" activit"+(m.n>1?"ies":"y")+"</span>"
+      +"</div>";
+    }
+    document.getElementById("model-list").innerHTML=html;
+  }
+
+  function render(data){
+    if(!data)return;
+    LAST=data;
+    renderVerdict(data.overall);
+    renderNotice(data.drift);
+    renderPanels(data.rows);
+    renderHistory(data);
+    renderRouting(data.routing);
+    renderModels(data.routing);
+    positionThumb(); // badges can change segment widths
+  }
+
+  function ago(sec){
+    if(sec<2)return "just now";
+    if(sec<60)return sec+"s ago";
+    var m=Math.floor(sec/60); if(m<60)return m+"m ago";
+    var h=Math.floor(m/60); return h+"h ago";
+  }
+  function tickClock(){
+    var el=document.getElementById("updated");
+    if(el){
+      if(!lastUpdated){el.textContent="—";}
+      else{el.textContent=(pollOn?"updated ":"paused · ")+ago(Math.round((Date.now()-lastUpdated)/1000));}
+    }
+    // Manual refresh is live except while a fetch is in the air or inside the
+    // cooldown — the button's own disabled state IS the visible cooldown.
+    var btn=document.getElementById("poll-now");
+    if(btn)btn.disabled=inflight||(Date.now()-lastAttempt)<POLL_COOLDOWN_MS;
+  }
+
+  // ══ poll control ═══════════════════════════════════════════════════════════
+  // Governs EVERY tab, not just Usage (ADR-0009 §7). The old hardcoded 5 s poll
+  // predated any expensive view; 30 s is the default now, and the whole range is
+  // user-chosen and persisted. Every refresh path — automatic or manual — funnels
+  // through refreshAll(), so the single-flight guard and the cooldown are
+  // impossible to route around.
+  var LS_POLL="ak-dash-poll";
+  var POLL_DEFAULT_MS=30000;
+  var POLL_COOLDOWN_MS=3000;
+  var POLL_LABEL={15000:"15s",30000:"30s",60000:"1m",300000:"5m",900000:"15m",
+    1800000:"30m",3600000:"1h",21600000:"6h",43200000:"12h",86400000:"24h"};
+  var pollOn=true, pollMs=POLL_DEFAULT_MS, pollTimer=null, inflight=false, lastAttempt=0;
+
+  try{
+    var savedPoll=JSON.parse(localStorage.getItem(LS_POLL)||"null");
+    if(savedPoll&&typeof savedPoll==="object"){
+      if(typeof savedPoll.on==="boolean")pollOn=savedPoll.on;
+      if(POLL_LABEL[savedPoll.intervalMs])pollMs=savedPoll.intervalMs;
+    }
+  }catch(e){}
+
+  function savePoll(){
+    try{localStorage.setItem(LS_POLL,JSON.stringify({on:pollOn,intervalMs:pollMs}));}catch(e){}
+  }
+
+  function pollStatus(){
+    return fetch("/api/status",{cache:"no-store"}).then(function(r){return r.json();}).then(function(d){
+      lastUpdated=Date.now(); render(d); tickClock();
+    }).catch(function(){
+      var t=document.getElementById("verdict-text"); if(t)t.textContent="server unreachable";
+    });
+  }
+
+  function refreshAll(){
+    // single-flight: a refresh already in the air is joined, never duplicated.
+    if(inflight)return;
+    // cooldown: a double-click (or a held Enter) cannot stack requests.
+    if(Date.now()-lastAttempt<POLL_COOLDOWN_MS)return;
+    inflight=true; lastAttempt=Date.now();
+    var btn=document.getElementById("poll-now");
+    if(btn)btn.classList.add("spin");
+    var jobs=[pollStatus()];
+    if(activeTab==="usage")jobs.push(loadUsage(true));
+    Promise.all(jobs).catch(function(){}).then(function(){
+      inflight=false;
+      if(btn)btn.classList.remove("spin");
+      tickClock();
+    });
+  }
+
+  function schedulePoll(){
+    if(pollTimer){clearInterval(pollTimer); pollTimer=null;}
+    if(pollOn)pollTimer=setInterval(refreshAll,pollMs);
+    var pulse=document.getElementById("pulse");
+    if(pulse)pulse.classList.toggle("off",!pollOn);
+    var play=document.getElementById("poll-play");
+    if(play){
+      play.classList.toggle("on",pollOn);
+      play.innerHTML=pollOn?"&#9208;":"&#9654;";
+      play.title=pollOn?"polling on — click to pause":"polling paused — click to resume";
+      play.setAttribute("aria-label",pollOn?"pause polling":"resume polling");
+    }
+    var ivl=document.getElementById("poll-ivl");
+    if(ivl){
+      ivl.innerHTML=POLL_LABEL[pollMs]+' <span class="caret" aria-hidden="true">&#9662;</span>';
+      ivl.style.opacity=pollOn?1:.55;
+    }
+    var menu=document.getElementById("poll-menu");
+    if(menu){
+      var opts=menu.querySelectorAll("[data-ms]");
+      for(var i=0;i<opts.length;i++){
+        var on=(Number(opts[i].getAttribute("data-ms"))===pollMs);
+        opts[i].classList.toggle("sel",on);
+        opts[i].innerHTML=POLL_LABEL[opts[i].getAttribute("data-ms")]+(on?" <span>&#10003;</span>":"");
+      }
+    }
+    tickClock();
+  }
+
+  function wirePoll(){
+    var play=document.getElementById("poll-play");
+    var ivl=document.getElementById("poll-ivl");
+    var now=document.getElementById("poll-now");
+    var menu=document.getElementById("poll-menu");
+    if(play)play.addEventListener("click",function(){pollOn=!pollOn; savePoll(); schedulePoll();});
+    // Manual refresh survives the pause — that is the whole point of the off
+    // state: stale on purpose, refreshable on demand.
+    if(now)now.addEventListener("click",refreshAll);
+    if(ivl&&menu)ivl.addEventListener("click",function(e){
+      e.stopPropagation();
+      menu.hidden=!menu.hidden;
+      ivl.setAttribute("aria-expanded",menu.hidden?"false":"true");
+    });
+    document.addEventListener("click",function(){
+      if(menu&&!menu.hidden){menu.hidden=true; if(ivl)ivl.setAttribute("aria-expanded","false");}
+    });
+    if(menu)menu.addEventListener("click",function(e){
+      var b=e.target.closest?e.target.closest("[data-ms]"):null;
+      if(!b)return;
+      pollMs=Number(b.getAttribute("data-ms"))||POLL_DEFAULT_MS;
+      if(!pollOn)pollOn=true;          // picking an interval implies resume
+      savePoll(); schedulePoll();
+      menu.hidden=true; if(ivl)ivl.setAttribute("aria-expanded","false");
+    });
+  }
+
+  // ══ Usage tab ══════════════════════════════════════════════════════════════
+  var USAGE=null, usageLoaded=false, usageBusy=false, TRANSCRIPT=null;
+
+  function fmtUsd(n){
+    n=Number(n)||0;
+    if(n>=1000)return "$"+Math.round(n).toLocaleString();
+    if(n>=10)return "$"+n.toFixed(0);
+    return "$"+n.toFixed(2);
+  }
+  function fmtNum(n){return (Number(n)||0).toLocaleString();}
+  function fmtTok(n){
+    n=Number(n)||0;
+    if(n>=1e9)return (n/1e9).toFixed(1)+"B";
+    if(n>=1e6)return (n/1e6).toFixed(1)+"M";
+    if(n>=1e3)return (n/1e3).toFixed(1)+"K";
+    return String(Math.round(n));
+  }
+  function fmtHours(sec){var h=(Number(sec)||0)/3600; return (h>=10?Math.round(h):h.toFixed(1))+"h";}
+  function fmtMins(m){m=Number(m)||0; return m>=60?Math.round(m/60)+"h":Math.round(m)+"m";}
+  function fld(v,k){
+    if(v==null)return 0;
+    if(typeof v==="number")return k==="cost"?v:0;
+    return Number(v[k])||0;
+  }
+  function pct(a,b){return b?(a/b*100):0;}
+  function entries(map,key){
+    var out=[];
+    for(var k in (map||{}))out.push({name:k,v:map[k],cost:fld(map[k],key||"cost")});
+    out.sort(function(a,b){return b.cost-a.cost;});
+    return out;
+  }
+
+  function loadUsage(force){
+    if(usageBusy)return Promise.resolve();
+    usageBusy=true;
+    var jobs=[fetch("/api/usage?days="+usageDays,{cache:"no-store"}).then(function(r){return r.json();})
+      .then(function(d){USAGE=d; usageLoaded=true;})];
+    if(usageView==="transcript"&&usageSession&&(force||!TRANSCRIPT||TRANSCRIPT.id!==usageSession))
+      jobs.push(loadTranscript(usageSession));
+    return Promise.all(jobs).catch(function(){
+      USAGE={error:"usage index unavailable"};
+    }).then(function(){usageBusy=false; renderUsage();});
+  }
+
+  function loadTranscript(id){
+    return fetch("/api/session/"+encodeURIComponent(id),{cache:"no-store"})
+      .then(function(r){return r.json();})
+      .then(function(d){TRANSCRIPT=d&&!d.error?{id:id,meta:d.meta,turns:d.turns||[]}:{id:id,error:(d&&d.error)||"unreadable"};});
+  }
+
+  function setUsageView(v,session){
+    usageView=v;
+    if(session!==undefined)usageSession=session;
+    var btns=document.querySelectorAll("#usage-seg [data-view]");
+    for(var i=0;i<btns.length;i++)btns[i].setAttribute("aria-selected",btns[i].getAttribute("data-view")===v?"true":"false");
+    for(var j=0;j<VIEWS.length;j++){
+      var el=document.getElementById("v-"+VIEWS[j]);
+      if(el)el.hidden=(VIEWS[j]!==v);
+    }
+    syncHash();
+    if(v==="transcript"&&usageSession&&(!TRANSCRIPT||TRANSCRIPT.id!==usageSession)){
+      loadTranscript(usageSession).then(renderTranscript);
+    }
+    // Limits is LAZY like the tab itself: the Codex side may spawn one vendor
+    // subprocess server-side, so it runs when the view is opened, not on poll.
+    if(v==="limits"&&!LIMITS)loadLimits();
+  }
+
+  // Explicit bridge from metadata-only Live Sessions to the separately fetched,
+  // server-masked historical transcript. Returning false lets a caller keep its
+  // current selection when an untrusted/malformed identifier is supplied.
+  window.AKDashboardOpenTranscript=function(id){
+    id=String(id==null?"":id);
+    if(!/^[A-Za-z0-9._-]{1,128}$/.test(id)||id==="."||id==="..")return false;
+    setTab("usage");
+    setUsageView("transcript",id);
+    return true;
+  };
+
+  // titleTxt is optional and goes on the OUTER .kpi, so the whole card is the
+  // hover target — a tooltip anchored to the number alone would be a 40px
+  // target for a 200px card. Omitted entirely when not passed, so no card
+  // gains an empty title="".
+  function kpi(k,v,d,cls,titleTxt){
+    return '<div class="kpi '+cls+'"'+(titleTxt?' title="'+esc(titleTxt)+'"':"")
+      +'><div class="k">'+esc(k)+'</div><div class="v">'+esc(v)+'</div>'
+      +'<div class="d">'+d+"</div></div>";
+  }
+  function bar(label,valueTxt,subTxt,share,alt,extra){
+    return '<div class="mrow"'+(extra||"")+'><span class="mname'+(alt?"":" mono")+'">'+label+"</span>"
+      +'<span class="mbar"><i class="'+(alt?"alt":"")+'" style="width:'+share.toFixed(1)+'%"></i></span>'
+      +'<span class="mval mono">'+esc(valueTxt)+"</span>"
+      +'<span class="msub mono">'+esc(subTxt)+"</span></div>";
+  }
+
+  // ADR-0009 §4 — all three time tiers, as the asserted ordering
+  // engaged <= open <= summed. The visible KPI still leads with the honest
+  // figure; this is the SUPPORTING EVIDENCE for it, which is why it lives in a
+  // tooltip and not in the hero row. Hover is a weak channel (undiscoverable by
+  // accident, absent on touch) and the ADR records that trade-off: a reader who
+  // never hovers is less informed, not misled. Every figure comes from totals —
+  // nothing here is computed a second way.
+  function ladder(t){
+    return "engaged "+fmtHours(t.engagedSeconds)
+      +" ≤ open "+fmtHours(t.spanUnionSeconds)
+      +" ≤ summed "+fmtHours((Number(t.spanMinutes)||0)*60)+"\\n"
+      +"engaged unions active sub-intervals split at 15-min silences; "
+      +"open unions whole session spans; summed double-counts overlap.";
+  }
+
+  function renderScore(d){
+    var t=d.totals||{};
+    var cacheShare=pct(t.cacheRead,t.tokens);
+    document.getElementById("u-hero").innerHTML=
+      kpi("sessions",fmtNum(t.sessions),esc(fmtNum(t.responses))+" assistant turns","")
+      +kpi("api-equivalent",fmtUsd(t.cost),"list price &middot; not plan billing","accent")
+      +kpi("tokens",fmtTok(t.tokens),esc(fmtTok(t.output))+" out &middot; "+esc(fmtTok(t.cacheRead))+" cached","")
+      +kpi("engaged time",fmtHours(t.engagedSeconds),
+        esc(fmtMins(t.spanMinutes))+" summed"
+        +'<span class="d-note">sessions overlap</span>',"",ladder(t))
+      +kpi("cache read",cacheShare.toFixed(1)+"%","priced at 0.1&times; input","warnv");
+    document.getElementById("u-asof").textContent=d.pricesAsOf?("rates as of "+d.pricesAsOf):"";
+
+    // cost per day
+    var days=[],k;
+    for(k in (d.byDay||{}))days.push({day:k,v:d.byDay[k]});
+    days.sort(function(a,b){return a.day<b.day?-1:1;});
+    var maxDay=0;
+    for(var i=0;i<days.length;i++)maxDay=Math.max(maxDay,fld(days[i].v,"cost"));
+    document.getElementById("u-days-note").textContent="api-equivalent · "+usageDays+"-day window";
+    document.getElementById("u-daybars").innerHTML=days.length?days.map(function(x){
+      var c=fld(x.v,"cost"), h=maxDay?Math.max(2,c/maxDay*100):2;
+      var tip=x.day+" · "+fmtUsd(c)+" · "+fmtTok(fld(x.v,"tokens"))+" tok · "+fmtNum(fld(x.v,"sessions"))+" sessions";
+      return '<div class="daybar" title="'+esc(tip)+'"><div class="db-fill" style="height:'+h.toFixed(1)+'%"></div>'
+        +'<span class="db-lab">'+esc(x.day.slice(8))+"</span></div>";
+    }).join(""):'<div class="empty">no days in window.</div>';
+
+    // by host
+    var prov=d.byProvider||{};
+    var order=["claude","codex"];
+    for(k in prov)if(order.indexOf(k)<0)order.push(k);
+    document.getElementById("u-hosts").innerHTML=order.map(function(name){
+      var v=prov[name], cost=fld(v,"cost"), sess=fld(v,"sessions"), tok=fld(v,"tokens");
+      var idle=!sess&&!cost;
+      return '<div class="pcard'+(idle?" idle":"")+'"><div class="ph"><span class="pdot '
+        +(name==="codex"?"x":"c")+'"></span>'+esc(name)+"</div>"
+        +'<div class="pv mono">'+esc(fmtUsd(cost))+"</div>"
+        +'<div class="pl">'+(idle?"no sessions in window":esc(fmtNum(sess))+" sessions &middot; "+esc(fmtTok(tok))+" tokens")+"</div></div>";
+    }).join("");
+
+    var segs=[["cache read",t.cacheRead,"var(--warn)"],["cache write",t.cacheWrite,"var(--purple)"],
+      ["output",t.output,"var(--accent)"],["input",t.input,"var(--ok)"]];
+    document.getElementById("u-tokbar").innerHTML=segs.map(function(sg){
+      return '<i style="width:'+pct(sg[1],t.tokens).toFixed(2)+"%;background:"+sg[2]+'"></i>';
+    }).join("");
+    document.getElementById("u-toklegend").innerHTML=segs.map(function(sg){
+      return '<span class="lg"><i style="background:'+sg[2]+'"></i>'+esc(sg[0])+" <b>"+esc(fmtTok(sg[1]))+"</b></span>";
+    }).join("");
+
+    // punchcard — dow 0 = Mon
+    var DOW=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], pcMax=0, key;
+    for(key in (d.punchcard||{}))pcMax=Math.max(pcMax,Number(d.punchcard[key])||0);
+    var pcHtml="";
+    for(var dw=0;dw<7;dw++){
+      pcHtml+='<div class="pc-row"><span class="pc-day">'+DOW[dw]+"</span>";
+      for(var hr=0;hr<24;hr++){
+        var n=Number((d.punchcard||{})[dw+"-"+hr])||0;
+        var v=pcMax?(n/pcMax):0;
+        pcHtml+='<i class="pc" style="--v:'+v.toFixed(3)+'" title="'+DOW[dw]+" "+(hr<10?"0":"")+hr
+          +':00 — '+n+' responses"></i>';
+      }
+      pcHtml+="</div>";
+    }
+    pcHtml+='<div class="pc-axis">';
+    for(var ax=0;ax<24;ax++)pcHtml+="<span>"+(ax%3===0?ax:"")+"</span>";
+    pcHtml+="</div>";
+    document.getElementById("u-punch").innerHTML=pcMax?pcHtml:'<div class="empty">no responses in window.</div>';
+
+    // models + projects
+    var models=entries(d.byModel), mMax=models.length?models[0].cost:0;
+    document.getElementById("u-models").innerHTML=models.length?models.map(function(m){
+      return bar(esc(m.name),fmtUsd(m.cost),fmtTok(fld(m.v,"tokens"))+" · "+fmtNum(fld(m.v,"responses"))+" resp",
+        pct(m.cost,mMax),false);
+    }).join(""):'<div class="empty">no models in window.</div>';
+    // Dropped-connection / rate-limit / auth-failure turns never resolve to a
+    // model — excluded from this list entirely rather than shown as a $0 row
+    // (see docs/USAGE-SCORECARD-METRICS.md §10). Surfaced here instead, only
+    // when nonzero, so they stay visible rather than silently vanishing.
+    // On its own line (.n-sub), so no leading separator — a "·" would read as a
+    // continuation of the caption above rather than the start of a new fact.
+    var exc=fld(t,"exceptions");
+    document.getElementById("u-models-note").textContent=exc?(fmtNum(exc)+" dropped/errored turn"+(exc===1?"":"s")+" excluded"):"";
+
+    var projects=entries(d.byProject), pMax=projects.length?projects[0].cost:0;
+    var shown=projects.slice(0,8);
+    document.getElementById("u-projects-note").textContent=
+      projects.length>8?("top 8 of "+projects.length):(projects.length+" project"+(projects.length===1?"":"s"));
+    document.getElementById("u-projects").innerHTML=shown.length?shown.map(function(pr){
+      return bar(esc(pr.name),fmtUsd(pr.cost),fmtNum(fld(pr.v,"sessions"))+" sess · "+fmtMins(fld(pr.v,"minutes")),
+        pct(pr.cost,pMax),true);
+    }).join(""):'<div class="empty">no projects in window.</div>';
+
+    // categories — confidence is DISPLAYED, and Unclassified is never hidden.
+    var cats=entries(d.byCategory), cMax=cats.length?cats[0].cost:0;
+    document.getElementById("u-cats").innerHTML=cats.length?cats.map(function(c){
+      var sess=fld(c.v,"sessions")||1, conf=fld(c.v,"confidence");
+      var uncl=(c.name==="Unclassified");
+      var dot=uncl?"":'<i class="conf" style="opacity:'+(0.5+conf*0.5).toFixed(2)
+        +'" title="mean classifier confidence '+conf.toFixed(2)+'"></i>';
+      return '<button type="button" class="crow'+(uncl?" uncl":"")+'" data-cat="'+esc(c.name)+'" title="click to filter sessions">'
+        +'<span class="c-name">'+esc(c.name)+dot+"</span>"
+        +'<span class="mbar"><i style="width:'+pct(c.cost,cMax).toFixed(1)+"%;background:"+(uncl?"var(--ink-dim)":"var(--accent)")+'"></i></span>'
+        +'<span class="mval mono">'+esc(fmtUsd(c.cost))+"</span>"
+        +'<span class="msub mono">'+esc(fmtNum(fld(c.v,"sessions"))+" sess · "+fmtUsd(c.cost/sess)+"/sess")+"</span></button>";
+    }).join(""):'<div class="empty">nothing classified in window.</div>';
+  }
+
+  // ══ Limits view (ADR-0010) ═════════════════════════════════════════════════
+  var LIMITS=null, limitsBusy=false;
+
+  function loadLimits(){
+    if(limitsBusy)return;
+    limitsBusy=true;
+    fetch("/api/limits?days="+usageDays,{cache:"no-store"})
+      .then(function(r){return r.json();})
+      .then(function(d){LIMITS=d&&!d.error?d:{error:(d&&d.error)||"limits unavailable"};})
+      .catch(function(){LIMITS={error:"limits unavailable"};})
+      .then(function(){limitsBusy=false; renderLimits();});
+  }
+
+  // "as of 3m ago" — an epoch-ms fetchedAt against the browser clock. Stale is
+  // LABELLED, never hidden: a yesterday's-number bar with no timestamp is a lie
+  // of omission.
+  function limAge(ms){
+    if(!ms||!isFinite(ms))return "";
+    var m=Math.max(0,Math.round((Date.now()-ms)/60000));
+    if(m<1)return "just now";
+    if(m<60)return m+"m ago";
+    var h=Math.round(m/60);
+    return h<48?h+"h ago":Math.round(h/24)+"d ago";
+  }
+  function limStale(ms,freshMs){return !ms||!isFinite(ms)||(Date.now()-ms)>freshMs;}
+  function resetTxt(sec){
+    if(!sec||!isFinite(sec))return "";
+    var d=new Date(sec*1000);
+    if(isNaN(d))return "";
+    return "resets "+d.toLocaleString(undefined,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"});
+  }
+  // One utilization row on the shared .mrow grid; fill color says how close to
+  // the cap this window is (ok <70, warn ≥70, fail ≥90).
+  function limRow(label,usedPercent,resetSec,sub){
+    var p=Math.max(0,Math.min(100,Number(usedPercent)||0));
+    var col=p>=90?"var(--fail)":(p>=70?"var(--warn)":"var(--ok)");
+    return '<div class="mrow"><span class="mname">'+esc(label)+"</span>"
+      +'<span class="mbar"><i style="width:'+p.toFixed(1)+"%;background:"+col+'"></i></span>'
+      +'<span class="mval mono">'+p.toFixed(0)+"%</span>"
+      +'<span class="msub mono">'+esc(sub||resetTxt(resetSec))+"</span></div>";
+  }
+
+  function renderLimits(){
+    var claudeEl=document.getElementById("u-lim-claude");
+    var codexEl=document.getElementById("u-lim-codex");
+    if(!claudeEl||!codexEl)return;
+    if(!LIMITS){claudeEl.innerHTML='<div class="empty">loading&hellip;</div>'; codexEl.innerHTML='<div class="empty">loading&hellip;</div>'; return;}
+    if(LIMITS.error){claudeEl.innerHTML='<div class="empty">'+esc(LIMITS.error)+"</div>"; codexEl.innerHTML=""; return;}
+
+    var c=LIMITS.claude;
+    var cn=document.getElementById("u-lim-claude-note");
+    if(c&&c.windows&&c.windows.length){
+      // Claude's tee is push-only: FRESH means a session wrote it in the last
+      // 10 minutes; anything older gets the stale badge rather than silence.
+      if(cn)cn.textContent="statusline tee · "+limAge(c.fetchedAt)+(limStale(c.fetchedAt,600000)?" · stale":"");
+      claudeEl.innerHTML=c.windows.map(function(w){
+        return limRow("claude · "+(w.label||w.id),w.usedPercent,w.resetsAt);
+      }).join("");
+    }else{
+      if(cn)cn.textContent="no data";
+      claudeEl.innerHTML='<div class="empty">no Claude limit data yet &mdash; it arrives while a Claude Code session runs '
+        +"with the kit's managed statusline (Pro/Max plans only). Run one session, then revisit.</div>";
+    }
+
+    var x=LIMITS.codex;
+    var xn=document.getElementById("u-lim-codex-note");
+    if(x&&x.lanes&&x.lanes.length){
+      if(xn)xn.textContent=(x.planType?("plan "+x.planType+" · "):"")+"app-server · "+limAge(x.fetchedAt);
+      var html="";
+      for(var i=0;i<x.lanes.length;i++){
+        var lane=x.lanes[i];
+        for(var j=0;j<(lane.windows||[]).length;j++){
+          var w=lane.windows[j];
+          html+=limRow(lane.name+" · "+(w.label||""),w.usedPercent,w.resetsAt);
+        }
+        if(!(lane.windows||[]).length)html+=limRow(lane.name,0,null,"no window reported");
+      }
+      var rc=x.resetCredits;
+      if(rc&&rc.availableCount>0){
+        html+='<div class="legend" style="margin-top:11px"><span class="lg"><i style="background:var(--ok)"></i>'
+          +esc(fmtNum(rc.availableCount))+" rate-limit reset credit"+(rc.availableCount===1?"":"s")
+          +" available &middot; redeem via codex /usage</span></div>";
+      }
+      codexEl.innerHTML=html;
+    }else{
+      if(xn)xn.textContent="no data";
+      codexEl.innerHTML='<div class="empty">no Codex limit data &mdash; codex is not installed, not logged in, '
+        +"or app-server did not answer.</div>";
+    }
+
+    var ins=Array.isArray(LIMITS.insights)?LIMITS.insights:[];
+    document.getElementById("u-lim-insights").innerHTML=ins.length
+      ?ins.map(insightCard).join("")
+      :'<div class="empty">no limit findings &mdash; nothing is ahead of pace and no arbitrage is open.</div>';
+  }
+
+  function renderFindings(d){
+    var ins=Array.isArray(d.insights)?d.insights:[];
+    var badge=document.getElementById("u-findings-n");
+    var warns=ins.filter(function(x){return x.severity==="warn";}).length;
+    if(badge){if(warns){badge.hidden=false; badge.textContent=String(warns);}else{badge.hidden=true;}}
+    document.getElementById("u-findings-note").innerHTML=
+      ins.length+" finding"+(ins.length===1?"":"s")+", ranked by estimated impact. A finding only claims a "
+      +"dollar figure when it can compute one from your data &mdash; the rest say <b>no $ claimed</b> rather "
+      +"than inventing a number. Recommendations that depend on model-capability claims carry their sources.";
+    document.getElementById("u-insights").innerHTML=ins.length
+      ?ins.map(insightCard).join("")
+      :'<div class="empty">no findings — nothing in this window crossed a detector threshold.</div>';
+  }
+
+  // One finding card. Shared by the Findings view and the Limits view — both
+  // render the same Insight contract, so they must render it the same way.
+  function insightCard(f,i){
+    var imp=(typeof f.impact==="number")
+      ? '<span class="i-imp mono">~'+esc(fmtUsd(f.impact))+"/window</span>"
+      : '<span class="i-imp mono soft">no $ claimed</span>';
+    var cmd=f.command?' <code class="i-cmd">'+esc(f.command)+"</code>":"";
+    var src="";
+    if(f.sources&&f.sources.length){
+      src='<details class="i-src"><summary>grounding &mdash; '+f.sources.length+" source"
+        +(f.sources.length===1?"":"s")+"</summary><ul>"
+        +f.sources.map(function(sc){
+          return "<li><a href=\\""+esc(sc.url)+"\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">"+esc(sc.label)+"</a></li>";
+        }).join("")+"</ul></details>";
+    }
+    return '<article class="icard" data-sev="'+esc(f.severity||"info")+'">'
+      +'<div class="i-top"><span class="i-n">'+(i+1)+"</span>"
+      +'<span class="i-title">'+esc(f.title)+"</span>"
+      +'<span class="i-kind">'+esc(f.kind==="trend"?"trend":"coaching")+"</span>"+imp+"</div>"
+      +'<p class="i-find">'+esc(f.finding)+"</p>"
+      +(f.evidence?'<p class="i-ev">'+esc(f.evidence)+"</p>":"")
+      +'<div class="i-act"><span class="i-arrow">&rarr;</span><span>'+esc(f.action)+cmd+"</span></div>"
+      +src+"</article>";
+  }
+
+  // A missing signal renders as an em dash and is NEVER omitted: a line that
+  // disappears when the value is null teaches the reader that the field does
+  // not exist, when in fact it was measured and found absent (ADR-0009 §5).
+  function dash(v){return (v==null||v==="")?"—":String(v);}
+
+  /* The ten fields that shipped on the wire and rendered nowhere. Everything
+     here comes from the row the browser already holds — no route, no fetch. */
+  function sdetail(sx){
+    // basis is a STRING contract. Only null/empty falls back, so a non-string
+    // still renders as itself and trips the harness's [object Object] net —
+    // coercing it here would hide exactly the bug the net exists to catch.
+    var basis=(sx.basis==null||sx.basis==="")?"no signal":sx.basis;
+    var conf=(typeof sx.confidence==="number")
+      ? ' <span class="sd-conf">(conf '+esc(sx.confidence.toFixed(2))+")</span>" : "";
+    var models=(Array.isArray(sx.models)&&sx.models.length)?sx.models.join(", "):"—";
+    var toks="in "+fmtTok(sx.input)+" · out "+fmtTok(sx.output)
+      +" · cache r "+fmtTok(sx.cacheRead)+" / w "+fmtTok(sx.cacheWrite)
+      // Codex-only detail: reasoning tokens are a SUBSET of output (they bill
+      // as output), so this annotates the split without changing any sum.
+      +((Number(sx.reasoningOutput)||0)>0?" · reasoning "+fmtTok(sx.reasoningOutput)+" (in out)":"");
+    var tmap=(sx.tools&&typeof sx.tools==="object"&&!Array.isArray(sx.tools))?sx.tools:{};
+    var tl=[],tk;
+    for(tk in tmap)tl.push({n:tk,c:Number(tmap[tk])||0});
+    tl.sort(function(a,b){return b.c-a.c;});
+    var tools=tl.length?tl.slice(0,6).map(function(x){return x.n+" "+x.c;}).join(" · "):"—";
+    var flags="skill "+dash(sx.skill)+" · plugin "+dash(sx.plugin)
+      +" · sidechain "+(sx.sidechain==null?"—":(sx.sidechain?"yes":"no"))
+      +" · worktree "+dash(sx.worktree);
+    var rows=[["basis",esc(basis)+conf],["models",esc(models)],["tokens",esc(toks)],
+      ["tools",esc(tools)],["flags",esc(flags)]];
+    return '<div class="sdetail" id="sd-'+esc(sx.id)+'" hidden>'
+      +rows.map(function(r){
+        // The literal space is load-bearing, not formatting: adjacent
+        // inline-blocks with no whitespace between them collapse into one
+        // unbroken word in the rendered text ("FLAGSskill"), destroying the
+        // word boundary that anything reading it depends on.
+        return '<div class="sd-line"><span class="sd-k">'+r[0]+'</span> <span class="sd-v">'+r[1]+"</span></div>";
+      }).join("")+"</div>";
+  }
+
+  // Returns TWO siblings: the grid row, then its detail strip. The strip is a
+  // block-level sibling inside .pbody, not a grid child of .srow, so it spans
+  // the full width without joining the column layout.
+  function sessionRow(sx){
+    var host=(sx.provider==="codex")?"codex":"claude";
+    var cat=sx.category||"Unclassified";
+    var uncl=(cat==="Unclassified");
+    var weak=(typeof sx.confidence==="number"&&sx.confidence<0.6)?"0":"1";
+    var when=sx.start?new Date(sx.start):null;
+    var whenTxt=when&&!isNaN(when)?when.toLocaleString(undefined,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}):"—";
+    // Session ids are validated against [A-Za-z0-9._-]{1,128} by parseSessionId
+    // before they are ever indexed, so they are safe AND unique as DOM ids.
+    var sid=esc(sx.id);
+    var wt=sx.worktree!=null?'<span class="s-wt" title="git worktree — the repo is the project">⑂'+esc(sx.worktree)+"</span>":"";
+    return '<div class="srow" data-id="'+sid+'" title="open transcript">'
+      +'<button class="s-exp" type="button" aria-expanded="false" aria-controls="sd-'+sid+'"'
+        +' title="show session detail" aria-label="show session detail">&rsaquo;</button>'
+      +'<span class="s-host s-'+host+'">'+esc(host)+"</span>"
+      +'<span class="s-title">'+esc(sx.title||"(untitled)")+wt+"</span>"
+      +'<span class="cat'+(uncl?" uncl":"")+'" data-w="'+weak+'">'+esc(cat)+"</span>"
+      +'<span class="s-when mono">'+esc(whenTxt)+"</span>"
+      +'<span class="s-dur mono">'+esc(fmtMins(sx.minutes))+"</span>"
+      +'<span class="s-turns mono">'+esc((sx.prompts||0)+"/"+(sx.responses||0))+"</span>"
+      +'<span class="s-tok mono">'+esc(fmtTok(sx.tokens))+"</span>"
+      +'<span class="s-cost mono">'+esc(fmtUsd(sx.cost))+"</span>"
+      +'<button class="s-tx" type="button" data-tx="'+sid+'" title="open transcript" aria-label="open transcript">&#9707;</button>'
+    +"</div>"+sdetail(sx);
+  }
+
+  function renderSessions(d){
+    var tree=Array.isArray(d.projectTree)?d.projectTree:[];
+    var n=document.getElementById("u-sessions-n");
+    if(n)n.textContent=tree.length?" "+fmtNum((d.totals||{}).sessions):"";
+    document.getElementById("u-tree").innerHTML=tree.length?tree.map(function(g){
+      var chips="";
+      // usage-index emits categories as a COST-RANKED ARRAY of
+      // {category, sessions, cost} — already ordered, so no re-sort here. The
+      // keyed-map fallback below is for older cached payloads only; treating an
+      // array as a map yields Object.keys() === ["0","1"...] and renders
+      // "0 [object Object]", so the shape check is load-bearing, not defensive noise.
+      var cs=g.categories;
+      if(Array.isArray(cs)){
+        for(var i=0;i<cs.length&&i<3;i++){
+          var c=cs[i]||{};
+          chips+='<span class="pchip">'+esc(c.category)+" <b>"+esc(String(c.sessions))+"</b></span>";
+        }
+      }else if(cs&&typeof cs==="object"){
+        var ck=Object.keys(cs).sort(function(a,b){return (cs[b]||0)-(cs[a]||0);}).slice(0,3);
+        for(var j=0;j<ck.length;j++)chips+='<span class="pchip">'+esc(ck[j])+" <b>"+esc(String(cs[ck[j]]))+"</b></span>";
+      }
+      var rows=Array.isArray(g.rows)?g.rows:[];
+      var body=rows.length?rows.slice(0,25).map(sessionRow).join(""):'<div class="smore">no sessions loaded for this project.</div>';
+      if(rows.length>25||g.sessions>rows.length){
+        body+='<div class="smore">showing '+Math.min(25,rows.length)+" of "+fmtNum(g.sessions)
+          +' · <button type="button" data-more="'+esc(g.project)+'">load all</button></div>';
+      }
+      // Every project starts COLLAPSED. Auto-opening the first one pushed the
+      // remaining projects below the fold, which defeats the point of the
+      // aggregate view — the comparison across projects IS the top-level answer.
+      return '<div class="pgroup">'
+        +'<button class="phead" type="button"><span class="chev">&rsaquo;</span>'
+        +'<span class="pname">'+esc(g.project)+"</span>"
+        +'<span class="pchips">'+chips+"</span>"
+        +'<span class="pn mono">'+esc(fmtNum(g.sessions))+" sess</span>"
+        +'<span class="pn mono p-h">'+esc(fmtMins(g.minutes))+"</span>"
+        +'<span class="pn mono p-tok">'+esc(fmtTok(g.tokens))+"</span>"
+        +'<span class="pcost mono">'+esc(fmtUsd(g.cost))+"</span></button>"
+        +'<div class="pbody" data-body="'+esc(g.project)+'">'+body+"</div></div>";
+    }).join(""):'<div class="empty">no sessions in window.</div>';
+  }
+
+  // Secrets are masked SERVER-side (ADR-0009 §8) — nothing here can un-redact
+  // what never left the process. This only makes the redactions visible as
+  // redactions, so a reader can see that something was withheld.
+  // The masker emits "<prefix>\u2026redacted" (sk-\u2026redacted, Bearer \u2026redacted).
+  // This used to hunt for ***, \u2022\u2022\u2022 or [REDACTED] \u2014 sentinels nothing ever
+  // produced \u2014 so no .masked span was ever created and the styling below was
+  // dead code. There is deliberately NO click-to-reveal: masking happens
+  // server-side and the original never reaches the browser, so there is nothing
+  // here to reveal. Marking it is the whole feature.
+  function markRedactions(text){
+    return esc(text).replace(/([A-Za-z_.-]*\u2026redacted)/g,function(m){
+      return '<span class="masked" title="masked server-side \u2014 the original was never sent to this page">'+m+"</span>";
+    });
+  }
+
+  // Harness sentinel markup \u2014 the XML wrappers Claude Code writes into
+  // transcript text (<command-name>, <system-reminder>, <local-command-*>) \u2014
+  // rendered as styled structure instead of literal angle-bracket soup.
+  // PRESENTATION ONLY: the wrapped content is kept verbatim (ADR-0009 \u00a78's
+  // no-silent-alteration rule); only the wrapper tags become styling. Runs on
+  // ESCAPED html (after markRedactions), so patterns match &lt;tag&gt;. An
+  // unmatched tag (e.g. cut mid-sentinel by turn truncation) is left raw.
+  var H_TAGS={"system-reminder":"system reminder","local-command-caveat":"caveat",
+    "local-command-stdout":"command output","local-command-stderr":"command stderr",
+    "bash-stdout":"bash output","bash-stderr":"bash stderr","task-notification":"task notification"};
+  function fmtHarness(html){
+    return html
+      .replace(/&lt;command-name&gt;([\\s\\S]*?)&lt;\\/command-name&gt;\\s*(?:&lt;command-message&gt;([\\s\\S]*?)&lt;\\/command-message&gt;\\s*)?(?:&lt;command-args&gt;([\\s\\S]*?)&lt;\\/command-args&gt;)?/g,
+        function(_,name,msg,args){
+          var n=name.trim(), a=(args||"").trim(), m=(msg||"").trim();
+          return '<span class="h-cmd"'+(m&&m!==n.replace(/^\\//,"")?' title="'+m+'"':"")
+            +'>'+n+(a?" "+a:"")+"</span>";
+        })
+      // bash-input is the person's own "! command" — a chip, prefixed so it
+      // reads as the shell invocation it was, not as prose.
+      .replace(/&lt;bash-input&gt;([\\s\\S]*?)&lt;\\/bash-input&gt;/g,
+        function(_,cmd){return '<span class="h-cmd" title="shell command run with the ! prefix">! '+cmd.trim()+"</span>";})
+      .replace(/&lt;(system-reminder|local-command-caveat|local-command-stdout|local-command-stderr|bash-stdout|bash-stderr|task-notification)&gt;\\s*([\\s\\S]*?)\\s*&lt;\\/\\1&gt;/g,
+        function(_,tag,body){
+          return '<span class="h-note"><i class="h-tag">'+H_TAGS[tag]+"</i>"+body+"</span>";
+        });
+  }
+
+  // ADR-0009 §8 — an abridged turn must not be readable as a complete one, and
+  // "truncated" alone is not enough: a reader who cannot tell 1% loss from 90%
+  // loss knows something is missing and nothing about whether it matters.
+  //
+  // The SHOWN figure is DERIVED, never hardcoded. MAX_TURN_CHARS lives in
+  // usage-index.mjs and the browser never sees it, so a literal 40000 here
+  // would silently desync the day someone changes the constant — which is the
+  // failure mode this whole ADR exists to prevent. We subtract the marker the
+  // producer appends from the text we actually received.
+  var TRUNC_MARK="\\n…[truncated]";
+  function truncBadge(tn){
+    if(!tn||tn.truncated!==true)return "";
+    var shown=String(tn.text==null?"":tn.text);
+    var n=shown.length-(shown.slice(-TRUNC_MARK.length)===TRUNC_MARK?TRUNC_MARK.length:0);
+    // A cached payload can carry truncated:true with no originalChars. Say so,
+    // rather than inventing a denominator or dropping the badge — §6's rule
+    // about claiming a figure only when you can compute one.
+    if(typeof tn.originalChars!=="number"||!isFinite(tn.originalChars)||tn.originalChars<=0)
+      return '<span class="t-trunc" title="this turn was abridged before it was sent to this page; '
+        +'the original length was not recorded">truncated</span>';
+    return '<span class="t-trunc" title="'
+      +esc(fmtNum(n)+" of "+fmtNum(tn.originalChars)
+        +" characters shown; the rest was not sent to this page")+'">truncated · '
+      +esc(fmtTok(n))+" of "+esc(fmtTok(tn.originalChars))+"</span>";
+  }
+
+  function renderTranscript(){
+    var crumb=document.getElementById("u-crumb"), body=document.getElementById("u-turns");
+    if(!usageSession){
+      crumb.innerHTML='<button type="button" data-back="1">&lsaquo; sessions</button><span>no session selected</span>';
+      body.innerHTML='<div class="empty">pick a session in the Sessions view to read it here.</div>';
+      return;
+    }
+    var t=TRANSCRIPT&&TRANSCRIPT.id===usageSession?TRANSCRIPT:null;
+    var m=(t&&t.meta)||{};
+    crumb.innerHTML='<button type="button" data-back="1">&lsaquo; sessions</button>'
+      +'<b style="color:var(--ink)">'+esc(m.title||usageSession)+"</b>"
+      +'<span class="mono">'+esc([m.project,fmtMins(m.minutes),
+        (m.prompts||0)+" prompts / "+(m.responses||0)+" responses",fmtTok(m.tokens),fmtUsd(m.cost)]
+        .filter(Boolean).join(" · "))+"</span>";
+    if(!t){body.innerHTML='<div class="empty">loading transcript…</div>'; return;}
+    if(t.error){body.innerHTML='<div class="empty">'+esc(t.error)+"</div>"; return;}
+    body.innerHTML=t.turns.length?t.turns.map(function(tn){
+      var user=(tn.role==="user");
+      var text=tn.text!=null?tn.text:(tn.body!=null?tn.body:(tn.content!=null?tn.content:""));
+      var tools=(tn.tools&&tn.tools.length)
+        ?'<div class="chips">'+tn.tools.map(function(x){return '<span class="tool">'+esc(x)+"</span>";}).join("")+"</div>":"";
+      var meta=truncBadge(tn)
+        +(tn.output?'<span class="t-meta mono">'+esc(fmtNum(tn.output))+" out</span>":"");
+      // role "user" ≠ "the human typed this": the Messages API records tool
+      // results and harness context injections under the user role, and the
+      // parser marks WHICH via tn.kind. Only kind "prompt" earns "you" — a
+      // tool result labeled "you" attributes the harness's work to the person.
+      // Fallback for a turn without kind: the prompt flag (false ⇒ tool
+      // feedback was the overwhelmingly dominant non-prompt case).
+      var kind=tn.kind||(user?(tn.prompt===false?"tool-result":"prompt"):"");
+      var who,cls,title="";
+      if(!user){who=tn.model||tn.role||"assistant"; cls="t-asst";}
+      else if(kind==="tool-result"){who="tool result"; cls="t-tool"; title="output returned to the model by the tooling — not typed by you";}
+      else if(kind==="context"){who="context"; cls="t-tool"; title="context injected by the harness — not typed by you";}
+      else{who="you"; cls="t-user";}
+      return '<div class="turn '+cls+'"><div class="t-who"'+(title?' title="'+esc(title)+'"':"")+'>'
+        +esc(who)+meta+"</div>"
+        +'<div class="t-body">'+fmtHarness(markRedactions(String(text)))+tools+"</div></div>";
+    }).join(""):'<div class="empty">this session has no readable turns.</div>';
+  }
+
+  function renderUsage(){
+    if(!USAGE)return;
+    if(USAGE.error){
+      document.getElementById("u-hero").innerHTML='<div class="empty">'+esc(USAGE.error)+"</div>";
+      return;
+    }
+    renderScore(USAGE);
+    renderFindings(USAGE);
+    renderSessions(USAGE);
+    if(usageView==="transcript")renderTranscript();
+  }
+
+  function wireUsage(){
+    var seg=document.getElementById("usage-seg");
+    if(seg)seg.addEventListener("click",function(e){
+      var b=e.target.closest?e.target.closest("[data-view]"):null;
+      if(b)setUsageView(b.getAttribute("data-view"));
+    });
+    var chips=document.getElementById("usage-days");
+    if(chips)chips.addEventListener("click",function(e){
+      var b=e.target.closest?e.target.closest("[data-days]"):null;
+      if(!b)return;
+      usageDays=Number(b.getAttribute("data-days"))||14;
+      var all=chips.querySelectorAll("[data-days]");
+      for(var i=0;i<all.length;i++)all[i].classList.toggle("on",all[i]===b);
+      usageLoaded=false; loadUsage(true);
+      // limit findings are computed against the same window; refetch on change.
+      LIMITS=null; if(usageView==="limits")loadLimits();
+    });
+    var panel=document.getElementById("panel-usage");
+    if(panel)panel.addEventListener("click",function(e){
+      var tgt=e.target;
+      var head=tgt.closest?tgt.closest(".phead"):null;
+      if(head){
+        var g=head.parentElement;
+        if(g.hasAttribute("data-open"))g.removeAttribute("data-open"); else g.setAttribute("data-open","1");
+        return;
+      }
+      var more=tgt.closest?tgt.closest("[data-more]"):null;
+      if(more){loadProjectSessions(more.getAttribute("data-more")); return;}
+      // MUST come before the [data-id] branch below: the caret lives INSIDE the
+      // row, so closest("[data-id]") matches it too. stopPropagation() first,
+      // then toggle — the row's click-to-open-transcript path is shipped
+      // behaviour and this must not disturb it. State is ephemeral by design:
+      // not persisted, not in the hash (a poll refresh re-renders collapsed).
+      var exp=tgt.closest?tgt.closest(".s-exp"):null;
+      if(exp){
+        e.stopPropagation();
+        var wasOpen=exp.getAttribute("aria-expanded")==="true";
+        exp.setAttribute("aria-expanded",wasOpen?"false":"true");
+        var det=document.getElementById(exp.getAttribute("aria-controls"));
+        if(det)det.hidden=wasOpen;
+        return;
+      }
+      // the glyph is the explicit affordance, but the whole row is a target too —
+      // a 14px icon is a cruel click target for a row you can already see.
+      var row=tgt.closest?tgt.closest("[data-id]"):null;
+      if(row){setUsageView("transcript",row.getAttribute("data-id")); return;}
+      var cat=tgt.closest?tgt.closest("[data-cat]"):null;
+      if(cat){filterByCategory(cat.getAttribute("data-cat")); return;}
+      var back=tgt.closest?tgt.closest("[data-back]"):null;
+      if(back){setUsageView("sessions",null); return;}
+      var mask=tgt.closest?tgt.closest(".masked"):null;
+      if(mask)mask.classList.toggle("shown");
+    });
+  }
+
+  function loadProjectSessions(project){
+    fetch("/api/sessions?days="+usageDays+"&project="+encodeURIComponent(project)+"&limit=1000",{cache:"no-store"})
+      .then(function(r){return r.json();}).then(function(d){
+        var el=document.querySelector('[data-body="'+project.replace(/"/g,"")+'"]');
+        if(!el)return;
+        el.innerHTML=(d.sessions||[]).map(sessionRow).join("")
+          ||'<div class="smore">no sessions.</div>';
+      }).catch(function(){});
+  }
+
+  function filterByCategory(cat){
+    setUsageView("sessions");
+    fetch("/api/sessions?days="+usageDays+"&category="+encodeURIComponent(cat)+"&limit=1000",{cache:"no-store"})
+      .then(function(r){return r.json();}).then(function(d){
+        document.getElementById("u-tree").innerHTML=
+          '<div class="pgroup" data-open="1"><button class="phead" type="button">'
+          +'<span class="chev">&rsaquo;</span><span class="pname">'+esc(cat)+"</span>"
+          +'<span class="pchips"><span class="pchip">filtered <b>'+fmtNum(d.total||0)+"</b></span></span>"
+          +'<span class="pn mono"></span><span class="pn mono"></span><span class="pn mono"></span>'
+          +'<span class="pcost mono"></span></button>'
+          +'<div class="pbody">'+((d.sessions||[]).map(sessionRow).join("")
+            ||'<div class="smore">no sessions in this category.</div>')+"</div></div>";
+      }).catch(function(){});
+  }
+
+  setTab(activeTab);
+  setUsageView(usageView);
+  wirePoll();
+  wireUsage();
+  schedulePoll();
+  lastAttempt=Date.now(); inflight=true;
+  Promise.all([pollStatus()].concat(activeTab==="usage"?[loadUsage()]:[]))
+    .catch(function(){}).then(function(){inflight=false; tickClock();});
+  setInterval(tickClock,1000);
+})();
+`;
diff --git a/src/lib/dashboard/live-view.mjs b/src/lib/dashboard/live-view.mjs
new file mode 100644
index 00000000..79b6bc10
--- /dev/null
+++ b/src/lib/dashboard/live-view.mjs
@@ -0,0 +1,3 @@
+export { LIVE_HTML } from './live/template.mjs';
+export { LIVE_CSS } from './live/styles.mjs';
+export { LIVE_JS } from './live/client.mjs';
diff --git a/src/lib/dashboard/live/client.mjs b/src/lib/dashboard/live/client.mjs
new file mode 100644
index 00000000..aaefcf9d
--- /dev/null
+++ b/src/lib/dashboard/live/client.mjs
@@ -0,0 +1,119 @@
+export const LIVE_JS = `
+(function(){
+  "use strict";
+  var PAUSE_LIMIT=256,MAX_TURNS=500,TERMINAL={completed:1,failed:1,cancelled:1};
+  var state={snapshot:{schemaVersion:1,cursor:null,projects:[],sessions:[]},events:[],project:null,selected:null,node:null,browserLevel:"projects",paused:false,pending:[],overflow:false,source:null,lastAt:0,active:false,positions:{},pinned:{},seen:{},camera:{x:24,y:24,k:1},cameraEpoch:0,fitFor:null,pointer:null,playback:{mode:"live",events:[],items:[],index:0,playing:false,speed:1,timer:null,startAt:null,endAt:null,truncated:false,gap:false},transcript:{source:null,turns:[],seen:{},query:"",follow:true,unread:0,status:"idle",session:null}};
+  function el(id){return document.getElementById(id);}
+  function esc(s){return String(s==null?"":s).replace(/[&<>"']/g,function(c){return{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];});}
+  function short(s,n){s=String(s||"");return s.length>n?s.slice(0,n-1)+"…":s;}
+  function title(s){return String(s||"activity").replace(/[._-]+/g," ").replace(/\\b\\w/g,function(c){return c.toUpperCase();});}
+  function ago(v){var at=Date.parse(v||""),ms=Date.now()-at;if(!Number.isFinite(ms))return"";var s=Math.max(0,Math.round(ms/1000));if(s<5)return"just now";if(s<60)return s+"s ago";var m=Math.round(s/60);return m<60?m+"m ago":Math.round(m/60)+"h ago";}
+  function providerOf(v){var p=String(v&&v.provider||v&&v.host||"").toLowerCase();if(p.includes("claude")||p.includes("anthropic"))return"claude";if(p.includes("codex")||p.includes("openai"))return"codex";if(p.includes("ruflo"))return"ruflo";if(p.includes("aqe"))return"aqe";return"local";}
+  function providerName(v){return{claude:"Claude",codex:"Codex",ruflo:"ruflo",aqe:"Agentic QE",local:"Local"}[providerOf(v)];}
+  function providerGlyph(v){return{claude:"✳",codex:"◉",ruflo:"R",aqe:"Q",local:"⌁"}[providerOf(v)];}
+  function kindName(k){return{session:"Coordinator",agent:"Agent",subagent:"Worker",tool:"Tool",skill:"Skill",plugin:"Plugin",mcp:"MCP tool",gate:"Quality gate"}[k]||title(k||"agent");}
+  function statusText(v){return{running:"Working",queued:"Queued",quiescent:"Waiting",expired:"No recent activity",blocked:"Blocked",completed:"Completed",failed:"Failed",cancelled:"Cancelled",idle:"Waiting"}[v]||"Outcome unavailable";}
+  function label(n){return n&&(n.toolName||n.label||n.toolCategory||n.role&&title(n.role)||kindName(n.kind))||"Activity";}
+  function actionText(a,n,s){if(a==="tool.started")return label(n)+" started";if(a==="tool.completed")return label(n)+(s==="failed"?" failed":" completed");return{"session.started":"Session started","session.input":"New input","agent.output":"Response produced","agent.spawned":"Worker dispatched","agent.planned":"Agent scheduled","session.completed":"Session completed","session.failed":"Session failed"}[a]||title(a);}
+  function sessionsOf(v){var x=v&&v.snapshot?v.snapshot:v;return x&&Array.isArray(x.sessions)?x:{schemaVersion:1,cursor:null,projects:[],sessions:[]};}
+  function setConnection(k,t){el("live-state-dot").dataset.state=k;el("live-state-text").textContent=t;el("live-browser-state-dot").dataset.state=k;el("live-browser-state").textContent=t;}
+  function sessionKey(s){return String(s&&s.key||((s&&s.host||providerOf(s))+":"+(s&&s.id||"")));}
+  function isLiveSession(s){return!!s&&s.status==="running"&&s.lifecycle==="active";}
+  function sessionState(s){var key=s&&s.status||"unknown",life=s&&s.lifecycle||"historical";if(key==="failed"||key==="cancelled"||key==="completed"||key==="blocked"||key==="queued")return{key:key,label:statusText(key)};if(life==="active"&&key==="running")return{key:"working",label:"Working now"};if(life==="quiescent")return{key:"waiting",label:"Waiting for activity"};if(life==="expired")return{key:"stale",label:"No recent activity"};if(life==="historical"&&key==="running")return{key:"stale",label:"Last seen working"};return{key:"historical",label:"Last active"};}
+  function entityState(n,s){var key=n&&n.status||"unknown";if(key==="failed"||key==="cancelled"||key==="completed"||key==="blocked"||key==="queued")return{key:key,label:statusText(key)};if(key==="running"&&isLiveSession(s))return{key:"working",label:n&&({tool:1,skill:1,plugin:1,mcp:1})[n.kind]?"Running":"Working"};if(key==="running")return{key:"stale",label:"Last seen working"};if(key==="quiescent")return{key:"waiting",label:"Waiting"};if(key==="expired")return{key:"stale",label:"No recent activity"};return{key:"historical",label:"Activity recorded"};}
+  function sessionById(id){return state.snapshot.sessions.find(function(s){return sessionKey(s)===id||s.id===id;});}
+  function projectName(s){return s&&s.project&&s.project!=="unknown"?s.project:"Project not reported";}
+  function rootSession(s){var seen={};while(s&&s.parentSessionId&&!seen[sessionKey(s)]){seen[sessionKey(s)]=1;var parent=state.snapshot.sessions.find(function(candidate){return candidate.host===s.host&&candidate.id===s.parentSessionId;});if(!parent)break;s=parent;}return s;}
+  function childSessions(root){if(!root)return[];var descendants=[],frontier=[root.id],seen={};seen[sessionKey(root)]=1;while(frontier.length){var parent=frontier.shift();state.snapshot.sessions.forEach(function(s){if(s.host===root.host&&s.parentSessionId===parent&&!seen[sessionKey(s)]){seen[sessionKey(s)]=1;descendants.push(s);frontier.push(s.id);}});}return descendants.sort(function(a,b){var ar=isLiveSession(a)?0:1,br=isLiveSession(b)?0:1;return ar-br||Date.parse(b.updatedAt||0)-Date.parse(a.updatedAt||0);});}
+  function isNavigationRoot(s){return!!s&&(s.navigationRoot===true||(s.navigationRoot!==false&&rootSession(s)===s));}
+  function visibleSessions(){return state.snapshot.sessions.filter(function(s){return isNavigationRoot(s)&&String(s.projectKey||projectName(s))===state.project;}).sort(function(a,b){var ar=isLiveSession(a)?0:1,br=isLiveSession(b)?0:1;return ar-br||Date.parse(b.updatedAt||0)-Date.parse(a.updatedAt||0);});}
+  function receiveSnapshot(v,reset){state.snapshot=sessionsOf(v);state.lastAt=Date.now();if(reset){state.events=[];state.positions={};state.seen={};state.node=null;state.fitFor=null;}var projects=projectCatalog();if(!projects.some(function(p){return p.id===state.project;}))state.project=projects[0]&&projects[0].id||null;if(!sessionById(state.selected)||String(sessionById(state.selected).projectKey||projectName(sessionById(state.selected)))!==state.project){var list=visibleSessions();selectSession(list[0]&&sessionKey(list[0]),true);}render();}
+  function applyEvent(ev){
+    if(!ev||!ev.sessionId||!ev.actor||!ev.actor.id)return;if(ev.eventId&&state.seen[ev.eventId])return;
+    var sessions=state.snapshot.sessions.slice(),evKey=String(ev.sessionKey||ev.host+":"+ev.sessionId),i=sessions.findIndex(function(s){return sessionKey(s)===evKey;}),s=i>=0?Object.assign({},sessions[i]):{id:ev.sessionId,key:evKey,project:ev.project,projectKey:ev.projectKey,host:ev.host,status:"unknown",nodes:[],edges:[]};if(ev.parentSessionId)s.parentSessionId=ev.parentSessionId;
+    s.nodes=(s.nodes||[]).slice();s.edges=(s.edges||[]).slice();var targetTerminal=!!ev.target&&/\\.(completed|failed|cancelled)$/.test(ev.action||""),priorActor=s.nodes.find(function(n){return n.id===ev.actor.id;});
+    function upsert(a,status){var at=s.nodes.findIndex(function(n){return n.id===a.id;}),old=at>=0?s.nodes[at]:{},next=Object.assign({},old,{id:a.id,kind:a.kind||old.kind,role:a.role||old.role,provider:a.provider||old.provider,model:a.model||old.model,label:a.label||old.label,toolName:a.toolName||old.toolName,host:ev.host||old.host,surface:ev.surface||old.surface,status:status||old.status,observedAt:ev.observedAt,confidence:ev.source&&ev.source.confidence||old.confidence,lastAction:ev.action,durationMs:ev.attributes&&ev.attributes.durationMs||old.durationMs});if(TERMINAL[old.status]&&!TERMINAL[next.status])next.status=old.status;if(at>=0)s.nodes[at]=next;else s.nodes.push(next);}
+    upsert(ev.actor,targetTerminal?priorActor&&priorActor.status||"running":ev.status);if(ev.target&&ev.target.id){upsert(Object.assign({},ev.target,{label:ev.attributes&&(ev.attributes.toolName||ev.attributes.toolCategory)||ev.target.label,toolName:ev.attributes&&ev.attributes.toolName}),targetTerminal?ev.status:"running");var eid=ev.actor.id+"|"+ev.action+"|"+ev.target.id,edge={id:eid,source:ev.actor.id,target:ev.target.id,action:ev.action,confidence:ev.source&&ev.source.confidence},ei=s.edges.findIndex(function(x){return x.id===eid;});if(ei>=0)s.edges[ei]=edge;else s.edges.push(edge);}
+    if(ev.actor.kind==="session"&&/^session\\./.test(ev.action||""))s.status=ev.status;if(ev.status==="running"&&(!ev.source||ev.source.adapter!=="codex-state"))s.lifecycle="active";else if(!s.lifecycle)s.lifecycle="historical";s.updatedAt=ev.observedAt;if(i>=0)sessions[i]=s;else sessions.push(s);
+    state.snapshot={schemaVersion:state.snapshot.schemaVersion||1,cursor:ev.eventId||state.snapshot.cursor,projects:state.snapshot.projects,sessions:sessions,health:state.snapshot.health};if(ev.eventId)state.seen[ev.eventId]=1;state.events.unshift(ev);state.events=state.events.slice(0,100);state.lastAt=Date.now();if(!state.selected)selectSession(sessionKey(s),false);if(state.playback.mode==="live")render();
+  }
+  function receive(k,d){if(state.paused){if(state.pending.length<PAUSE_LIMIT)state.pending.push({kind:k,data:d});else{state.pending=[];state.overflow=true;}return;}if(k==="delta"&&!d.snapshot)applyEvent(d&&d.event?d.event:d);else receiveSnapshot(d,k==="reset"||!!(d&&d.reset));}
+  function connect(){setConnection("connecting","Loading current work…");fetch("/api/live",{cache:"no-store"}).then(function(r){if(!r.ok)throw Error();return r.json();}).then(function(d){receiveSnapshot(d);openStream();}).catch(function(){setConnection("offline","Live telemetry unavailable.");});}
+  function openStream(){if(state.source)state.source.close();if(!window.EventSource)return;var src=new EventSource("/api/live/events");state.source=src;src.onopen=function(){setConnection(state.paused?"paused":"live",state.paused?"Updates paused":"Live · following agent activity");};["init","reset","delta"].forEach(function(k){src.addEventListener(k,function(e){try{receive(k,JSON.parse(e.data));}catch(_){}});});src.onerror=function(){setConnection("offline","Connection interrupted · reconnecting…");};}
+  function graphData(s){
+    var all=s&&s.nodes||[],edges=s&&s.edges||[],isTool={tool:1,skill:1,plugin:1,mcp:1},allTools=all.filter(function(n){return isTool[n.kind];}),nodes=all.filter(function(n){return!isTool[n.kind];}),owner={},history={};
+    edges.forEach(function(e){var t=allTools.find(function(n){return n.id===e.target;}),src=allTools.find(function(n){return n.id===e.source;});if(t)owner[t.id]=e.source;if(src)owner[src.id]=e.target;});
+    allTools.forEach(function(t){if(!owner[t.id])owner[t.id]=(nodes.find(function(n){return n.kind==="agent"||n.kind==="subagent"||n.kind==="session";})||{}).id;});
+    var byOwner={};allTools.forEach(function(t){var o=owner[t.id]||"unowned";(byOwner[o]||(byOwner[o]=[])).push(t);});var tools=[];Object.keys(byOwner).forEach(function(o){var group=byOwner[o].sort(function(a,b){var ar=a.status==="running"?0:1,br=b.status==="running"?0:1;return ar-br||Date.parse(b.observedAt||0)-Date.parse(a.observedAt||0);}),active=group.filter(function(t){return t.status==="running";}),recent=group.filter(function(t){return t.status!=="running";}).slice(0,6);tools=tools.concat(active,recent);history[o]=Math.max(0,group.length-active.length-recent.length);});
+    var visible={};nodes.slice(0,80).forEach(function(n){visible[n.id]=1;});return{nodes:nodes.slice(0,80),tools:tools.slice(0,80),owner:owner,history:history,totalTools:allTools.length,edges:edges.filter(function(e){return visible[e.source]&&visible[e.target];})};
+  }
+  function layout(s,nodes,force){var key=s?s.id:"none",out=force?{}:state.positions[key]||{},edges=s&&s.edges||[],parents={};edges.forEach(function(e){parents[e.target]=e.source;});var levels={};function depth(id,seen){if(levels[id]!=null)return levels[id];if(seen[id])return 0;seen[id]=1;var p=parents[id],d=p?1+depth(p,seen):0;return levels[id]=Math.min(d,5);}var groups={};nodes.forEach(function(n){var d=depth(n.id,{});(groups[d]||(groups[d]=[])).push(n);});Object.keys(groups).forEach(function(k){var group=groups[k],column=Number(k),step=Math.max(150,Math.min(230,720/Math.max(1,group.length)));group.forEach(function(n,i){if(!out[n.id])out[n.id]={x:125+column*270,y:100+(i-(group.length-1)/2)*step+300};});});state.positions[key]=out;return out;}
+  function edgePath(a,b){var dx=b.x-a.x,dy=b.y-a.y,bend=Math.min(110,Math.max(45,Math.abs(dx)*.35));return"M"+a.x+" "+a.y+" C"+(a.x+(dx>=0?bend:-bend))+" "+a.y+" "+(b.x-(dx>=0?bend:-bend))+" "+b.y+" "+b.x+" "+b.y;}
+  function toolPosition(owner,index,count){var row=index-(count-1)/2;return{x:owner.x+150,y:owner.y+row*48};}
+  function kindShape(k){if(k==="session")return'<circle class="node-core node-core-ring" r="18"></circle><circle class="node-core-dot" r="5"></circle>';if(k==="gate")return'<path class="node-core" d="M0-21L19-10V10L0 21-19 10V-10Z"></path><path class="node-core-mark" d="M-7 0l5 5L8-7"></path>';return'<path class="node-core" d="M0-22L19-11V11L0 22-19 11V-11Z"></path><circle class="node-core-dot" r="5"></circle>';}
+  function renderGraph(s,force){
+    var d=graphData(s),pos=layout(s,d.nodes,force),selected=state.node,related={};if(selected){related[selected]=1;(s&&s.edges||[]).forEach(function(e){if(e.source===selected)related[e.target]=1;if(e.target===selected)related[e.source]=1;});}
+    var toolGroups={};d.tools.forEach(function(t){var o=d.owner[t.id];if(o)(toolGroups[o]||(toolGroups[o]=[])).push(t);});var tp={};
+    Object.keys(toolGroups).forEach(function(o){var at=pos[o];if(at)toolGroups[o].forEach(function(t,i){tp[t.id]=toolPosition(at,i,toolGroups[o].length);});});
+    var edges=d.edges.map(function(e){var a=pos[e.source],b=pos[e.target];if(!a||!b)return"";var active=isLiveSession(s)&&(s.nodes||[]).some(function(n){return(n.id===e.source||n.id===e.target)&&entityState(n,s).key==="working";}),rel=!selected||e.source===selected||e.target===selected,path=edgePath(a,b);return'<path id="edge-'+esc(e.id)+'" class="live-edge" data-source="'+esc(e.source)+'" data-target="'+esc(e.target)+'" data-active="'+active+'" data-related="'+rel+'" d="'+path+'"></path>'+(active?'<circle class="live-flow-dot" r="2.5"><animateMotion dur="1.5s" repeatCount="indefinite" path="'+path+'"></animateMotion></circle>':"");}).join("");
+    Object.keys(toolGroups).forEach(function(o){var a=pos[o];toolGroups[o].forEach(function(t){var b=tp[t.id];if(!a||!b)return;var path="M"+(a.x+28)+" "+a.y+" C"+(a.x+70)+" "+a.y+" "+(b.x-96)+" "+b.y+" "+(b.x-78)+" "+b.y,active=entityState(t,s).key==="working",rel=!selected||selected===o||selected===t.id;edges+='<path class="live-edge live-tool-edge" data-source="'+esc(o)+'" data-target="'+esc(t.id)+'" data-active="'+active+'" data-related="'+rel+'" d="'+path+'"></path>'+(active?'<circle class="live-flow-dot" r="2"><animateMotion dur="1.1s" repeatCount="indefinite" path="'+path+'"></animateMotion></circle>':"");});});
+    var nodes=d.nodes.map(function(n){var p=pos[n.id],sel=selected===n.id,rel=!selected||!!related[n.id],pin=!!state.pinned[(s?s.id:"")+"|"+n.id],view=entityState(n,s),meta=n.model&&n.model!=="unknown"?n.model:view.label,work=view.key==="working"?actionText(n.lastAction,n,n.status):view.label,past=d.history[n.id]||0;return'<g class="live-node" tabindex="0" role="button" data-node="'+esc(n.id)+'" data-kind="'+esc(n.kind||"agent")+'" data-status="'+esc(view.key)+'" data-selected="'+sel+'" data-related="'+rel+'" data-pinned="'+pin+'" aria-label="'+esc(label(n)+", "+kindName(n.kind)+", "+view.label)+'" transform="translate('+p.x+" "+p.y+')"><circle class="node-aura" r="42"></circle>'+kindShape(n.kind)+'<circle class="node-status" cx="25" cy="-22" r="4"></circle><text class="node-name" text-anchor="middle" y="48">'+esc(short(label(n),20))+'</text><text class="node-eyebrow" text-anchor="middle" y="63">'+esc(short((kindName(n.kind)+" · "+providerName(n)).toUpperCase(),26))+'</text><g class="node-work" transform="translate(34 -55)"><rect width="154" height="37" rx="18"></rect><circle cx="14" cy="18.5" r="3"></circle><text x="25" y="16">'+esc(short(work,24))+'</text><text class="node-meta" x="25" y="28">'+esc(short(meta,27))+'</text></g>'+(past?'<g class="node-history" transform="translate(34 76)"><rect width="116" height="24" rx="12"></rect><text x="12" y="16">'+past+' earlier operations</text></g>':"")+"</g>";}).join("");
+    var tools=d.tools.map(function(t){var p=tp[t.id];if(!p)return"";var rel=!selected||selected===t.id||selected===d.owner[t.id],view=entityState(t,s),elapsed=Number.isFinite(t.durationMs)?(t.durationMs<1000?t.durationMs+" ms":(t.durationMs/1000).toFixed(1)+" s"):"";return'<g class="live-tool" tabindex="0" role="button" data-node="'+esc(t.id)+'" data-owner="'+esc(d.owner[t.id]||"")+'" data-kind="'+esc(t.kind||"tool")+'" data-status="'+esc(view.key)+'" data-related="'+rel+'" aria-label="'+esc(label(t)+", "+kindName(t.kind)+", "+view.label)+'" transform="translate('+p.x+" "+p.y+')"><rect class="live-tool-halo" x="-86" y="-21" width="172" height="42" rx="21"></rect><rect class="live-tool-card" x="-80" y="-17" width="160" height="34" rx="17"></rect><path class="live-tool-icon" d="M-66-1L-61-6-56-1-61 4Z"></path><text class="tool-name" x="-48" y="-2">'+esc(short(label(t),20))+'</text><text class="tool-state" x="-48" y="10">'+esc(short(view.label+(elapsed?" · "+elapsed:""),24))+"</text></g>";}).join("");
+    el("live-edges").innerHTML=edges;el("live-nodes").innerHTML=nodes;el("live-tools").innerHTML=tools;el("live-empty").hidden=d.nodes.length>0;el("live-graph-summary").textContent=d.nodes.length+" agents · "+d.totalTools+" operations · "+d.edges.length+" handoffs";applyCamera();renderSelection(s,d);
+  }
+  function applyCamera(){el("live-viewport").setAttribute("transform","translate("+state.camera.x+" "+state.camera.y+") scale("+state.camera.k+")");el("live-zoom").textContent=Math.round(state.camera.k*100)+"%";}
+  function setZoom(next,cx,cy){state.cameraEpoch++;var c=el("live-canvas"),r=c.getBoundingClientRect(),x=cx==null?r.width/2:cx-r.left,y=cy==null?r.height/2:cy-r.top,k=Math.max(.25,Math.min(2.8,next)),wx=(x-state.camera.x)/state.camera.k,wy=(y-state.camera.y)/state.camera.k;state.camera={x:x-wx*k,y:y-wy*k,k:k};applyCamera();}
+  function fit(selector){var root=el(selector||"live-viewport"),box;try{box=root.getBBox();}catch(_){return;}if(!box.width&&!box.height)return;var c=el("live-canvas"),p=42,k=Math.max(.25,Math.min(2.5,Math.min((c.clientWidth-p*2)/Math.max(1,box.width),(c.clientHeight-p*2)/Math.max(1,box.height))));state.camera={k:k,x:(c.clientWidth-box.width*k)/2-box.x*k,y:(c.clientHeight-box.height*k)/2-box.y*k};applyCamera();}
+  function fitSelection(){if(!state.node){fit();return;}var n=el("live-graph").querySelector('[data-node="'+CSS.escape(state.node)+'"]');if(!n)return;var b=n.getBBox(),c=el("live-canvas"),k=Math.min(2.2,Math.max(1,state.camera.k));state.camera={k:k,x:c.clientWidth/2-(b.x+b.width/2)*k,y:c.clientHeight/2-(b.y+b.height/2)*k};applyCamera();}
+  function updateGeometry(id){var s=sessionById(state.selected),p=state.positions[s?s.id:"none"]||{},g=el("live-graph").querySelector('[data-node="'+CSS.escape(id)+'"]');if(g&&p[id])g.setAttribute("transform","translate("+p[id].x+" "+p[id].y+")");renderGraph(s);}
+  function renderSelection(s,d){var value=(d.nodes.concat(d.tools)).find(function(n){return n.id===state.node;}),box=el("live-selection-body");if(!value){box.textContent="Select an agent or tool in the map.";return;}var view=entityState(value,s),elapsed=Number.isFinite(value.durationMs)?(value.durationMs<1000?value.durationMs+" ms":(value.durationMs/1000).toFixed(1)+" s"):"Not available",owner=d.owner[value.id],ownerNode=d.nodes.find(function(n){return n.id===owner;}),fields=[["Type",kindName(value.kind)],["State",view.label],["Provider",providerName(value)],["Owner",ownerNode?label(ownerNode):"Not applicable"],["Elapsed",elapsed],["Current work",view.key==="working"?actionText(value.lastAction,value,value.status):view.label],["Evidence",value.confidence||"not reported"]];box.innerHTML="<strong>"+esc(label(value))+"</strong><dl>"+fields.map(function(x){return"<dt>"+esc(x[0])+"</dt><dd>"+esc(x[1])+"</dd>";}).join("")+"</dl>";}
+  function projectCatalog(){var given=Array.isArray(state.snapshot.projects)?state.snapshot.projects:[],by={};state.snapshot.sessions.forEach(function(s){var id=String(s.projectKey||projectName(s)),p=by[id]||(by[id]={id:id,name:projectName(s),sessionCount:0,childSessionCount:0,liveCount:0,updatedAt:s.updatedAt});if(isNavigationRoot(s)){p.sessionCount++;if(isLiveSession(s))p.liveCount++;}else p.childSessionCount++;if(Date.parse(s.updatedAt||0)>Date.parse(p.updatedAt||0))p.updatedAt=s.updatedAt;});given.forEach(function(p){var id=String(p.id||p.key||p.projectKey||p.label||p.name),derived=by[id]||{},name=p.label||p.name||p.project||derived.name||"Project not reported";by[id]=Object.assign({},p,derived,{id:id,name:name});});return Object.keys(by).map(function(k){return by[k];}).sort(function(a,b){return Number(b.liveCount||0)-Number(a.liveCount||0)||Date.parse(b.updatedAt||0)-Date.parse(a.updatedAt||0)||a.name.localeCompare(b.name);});}
+  function duration(s){var start=s.startedAt||s.createdAt,end=s.endedAt||s.completedAt||((s.status==="completed"||s.status==="failed"||s.status==="cancelled")&&s.updatedAt),a=Date.parse(start||""),b=Date.parse(end||""),ms=b-a;if(!Number.isFinite(a)||!Number.isFinite(b)||ms<=0)return ago(s.updatedAt)||"activity time unavailable";var m=Math.max(1,Math.round(ms/60000));return m<60?m+"m":Math.floor(m/60)+"h "+m%60+"m";}
+  function sessionMarkup(s,child){var live=isLiveSession(s),key=sessionKey(s),view=sessionState(s);return'<button class="live-session'+(child?" live-session-child":"")+'" type="button" role="listitem" data-session="'+esc(s.id)+'" data-key="'+esc(key)+'" data-live="'+live+'" data-state="'+esc(view.key)+'" aria-current="'+(key===state.selected)+'"><span class="live-provider" data-provider="'+esc(providerOf(s))+'" aria-hidden="true">'+esc(child?"↳":providerGlyph(s))+'</span><span class="live-session-main">'+esc(short(s.title||s.summary||(child?"Worker thread":providerName(s)+" session"),31))+'</span><span class="live-session-provider"><i data-status="'+esc(view.key)+'"></i>'+esc(child?"Sub-agent · "+providerName(s):providerName(s))+" · "+esc(view.label)+" · "+esc(duration(s))+"</span></button>";}
+  function renderSessions(){var projects=projectCatalog(),list=visibleSessions(),current=projects.find(function(p){return p.id===state.project;}),selected=sessionById(state.selected),browser=el("live-browser"),liveSessions=state.snapshot.sessions.filter(isLiveSession),liveProjects=projects.filter(function(p){return Number(p.liveCount)>0;});browser.dataset.level=state.browserLevel;el("live-sub").textContent=liveSessions.length?liveSessions.length+" active session"+(liveSessions.length===1?"":"s")+" across "+liveProjects.length+" project"+(liveProjects.length===1?"":"s"):"No active sessions · browse retained local evidence";el("live-browser-kicker").textContent=state.browserLevel==="sessions"?"PROJECT":"WORKSPACES";el("live-browser-title").textContent=state.browserLevel==="sessions"&&current?short(current.name,26):"Projects";el("live-project-count").textContent=String(projects.length);el("live-project-list").innerHTML=projects.map(function(p){var live=Number(p.liveCount||0),workers=Number(p.childSessionCount||0);return'<button class="live-project" type="button" role="listitem" data-project="'+esc(p.id)+'" data-live="'+(live>0)+'" aria-current="'+(p.id===state.project)+'"><span>'+esc(short(p.name,34))+'</span><small>'+(live?'<b>'+live+' WORKING</b> · ':"")+Number(p.sessionCount||0)+" sessions"+(workers?" · "+workers+" workers":"")+" · "+esc(ago(p.updatedAt)||"activity time unavailable")+"</small></button>";}).join("")||'<div class="live-browser-empty">No local projects found yet.</div>';var selectedRoot=rootSession(selected);if(!selectedRoot||!list.some(function(s){return sessionKey(s)===sessionKey(selectedRoot);})){selectSession(list[0]&&sessionKey(list[0]),true);list=visibleSessions();selected=sessionById(state.selected);selectedRoot=rootSession(selected);}el("live-session-heading").textContent=current?short(current.name,36):"Sessions";el("live-count").textContent=String(list.length);el("live-session-list").innerHTML=list.map(function(s){var children=sessionKey(s)===sessionKey(selectedRoot)?childSessions(s):[];return'<div class="live-session-family">'+sessionMarkup(s,false)+(children.length?'<div class="live-session-children" role="group" aria-label="Sub-agent threads">'+children.map(function(child){return sessionMarkup(child,true);}).join("")+"</div>":"")+"</div>";}).join("")||'<div class="live-browser-empty">No retained sessions for this project.</div>';el("live-session-context-provider").textContent=selected?providerName(selected):"—";el("live-session-context-project").textContent=selected?projectName(selected):"Choose a session";var selectedState=sessionState(selected);el("live-session-context-status").textContent=selected?selectedState.label+" · "+duration(selected):"Waiting for local evidence";}
+  function renderHealth(){var h=state.snapshot.health||{},bad=0;el("live-health").innerHTML=Object.keys(h).sort().map(function(n){var v=h[n]||{};if(v.status==="error")bad++;return'<span class="live-health-item" data-status="'+esc(v.status||"unknown")+'"><b>'+esc(n)+'</b> · '+esc(v.status||"unknown")+" · "+Number(v.files||0)+" files · "+Number(v.events||0)+" events · "+Number(v.errors||0)+" errors</span>";}).join("");el("live-health-toggle").textContent=bad?bad+" source issue"+(bad===1?"":"s"):"Sources";}
+  function render(){renderSessions();renderHealth();el("live-cursor").textContent=state.snapshot.cursor||"";var source=sessionById(state.selected),s=state.playback.mode==="review"&&state.playback.session||source;renderGraph(s);renderPlayback();if(s&&state.fitFor!==sessionKey(s)){state.fitFor=sessionKey(s);(window.requestAnimationFrame||setTimeout)(function(){fit();});}}
+  function closeTranscript(){if(state.transcript.source)state.transcript.source.close();state.transcript.source=null;state.transcript.status="idle";}
+  function transcriptStatus(k,t){state.transcript.status=k;var e=el("live-transcript-state");e.dataset.state=k;e.textContent=t;}
+  function transcriptItems(v){if(Array.isArray(v))return v;if(v&&v.snapshot&&Array.isArray(v.snapshot.events))return v.snapshot.events;if(v&&Array.isArray(v.events))return v.events;if(v&&Array.isArray(v.items))return v.items;if(v&&Array.isArray(v.turns))return v.turns;if(v&&v.item)return[v.item];if(v&&v.turn)return[v.turn];return v&&typeof v==="object"?[v]:[];}
+  function normalizeTurn(v){var type=String(v.role||v.type||v.kind||"event").toLowerCase(),role=type.includes("thinking")||type.includes("reason")?"thinking":type.includes("error")?"error":type.includes("tool_result")||type.includes("tool-result")||type.includes("result")?"tool_result":type.includes("tool")||v.tool||v.command||v.patch||v.arguments||v.args?"tool":type.includes("user")?"user":type.includes("assistant")||type.includes("agent")?"assistant":"event",agent=String(v.agentId||v.agent&&v.agent.id||v.actorId||v.actor&&v.actor.id||""),parts=[];
+    function part(name,value){if(value==null||value==="")return;var text=value;if(typeof value==="object"){try{text=JSON.stringify(value,null,2);}catch(_){text="[structured content]";}}text=String(text);if(parts.some(function(p){return p.text===text;}))return;parts.push({name:name,text:text});}
+    part("",v.content??v.text??v.message??v.body??v.summary);part("Details",v.details);part("Reasoning",v.reasoning);part("Command",v.command);part("Arguments",v.arguments??v.args??v.input);part("Patch",v.patch??v.diff);part("Result",v.result??v.output);part("Error",v.error??v.errorMessage);
+    var tool=v.tool||{},toolLabel=tool.name||tool.category,content=parts.map(function(p){return(p.name?p.name+"\\n":"")+p.text;}).join("\\n\\n");if(!content&&toolLabel)content=statusText(tool.status);return{id:String(v.id||v.eventId||tool.callId||[v.timestamp||v.observedAt||"",role,agent,content.slice(0,80)].join("|")),role:role,content:content,agent:agent,label:String(v.label||v.toolName||v.name||toolLabel||role),at:v.timestamp||v.observedAt||v.at||"",tool:tool};}
+  function addTranscript(v,reset){if(reset){state.transcript.turns=[];state.transcript.seen={};}transcriptItems(v).forEach(function(raw){var t=normalizeTurn(raw);if(!t.content||state.transcript.seen[t.id])return;state.transcript.seen[t.id]=1;state.transcript.turns.push(t);});if(state.transcript.turns.length>MAX_TURNS)state.transcript.turns=state.transcript.turns.slice(-MAX_TURNS);renderTranscript(true);}
+  function openTranscript(s){closeTranscript();state.transcript.session=s&&sessionKey(s);state.transcript.turns=[];state.transcript.seen={};state.transcript.unread=0;renderTranscript();if(!s||!window.EventSource)return;var url="/api/live/transcripts/"+encodeURIComponent(s.host||providerOf(s))+"/"+encodeURIComponent(s.id)+"/events",src=new EventSource(url);state.transcript.source=src;transcriptStatus("connecting","Connecting");src.onopen=function(){transcriptStatus("live","Live");};src.onmessage=function(e){try{addTranscript(JSON.parse(e.data));}catch(_){}};["init","reset","turn","message","delta"].forEach(function(k){src.addEventListener(k,function(e){try{var d=JSON.parse(e.data);addTranscript(d,k==="reset"||!!d.reset);}catch(_){}});});src.onerror=function(){transcriptStatus("error","Unavailable");};}
+  function renderTranscript(arrived){var s=sessionById(state.selected),q=state.transcript.query.toLowerCase(),agent=state.node,items=state.transcript.turns.filter(function(t){return(!q||(t.content+" "+t.label).toLowerCase().includes(q))&&(!agent||!t.agent||t.agent===agent);}).slice().reverse(),list=el("live-transcript-list"),oldHeight=list.scrollHeight,oldTop=list.scrollTop,nearTop=oldTop<56;el("live-transcript-context").textContent=s?(s.project&&s.project!=="unknown"?s.project:"Project not reported")+" · "+providerName(s):"Select a session to follow";el("live-transcript-clear-filter").hidden=!agent;if(agent)el("live-transcript-clear-filter").textContent="All agents";if(!items.length)list.innerHTML='<div class="live-transcript-empty">'+esc(q?"No matching transcript activity":agent?"No transcript activity attributed to this selection yet.":"Transcript content stays local and appears here as the selected session runs.")+"</div>";else list.innerHTML=items.map(function(t){var fold=t.role==="thinking"||t.role==="tool"||t.role==="tool_result"||t.role==="error",body='<div class="live-turn-body">'+esc(t.content)+"</div>";return'<article class="live-turn" data-turn="'+esc(t.id)+'" data-role="'+esc(t.role)+'" data-agent="'+esc(t.agent)+'"><div class="live-turn-head"><span>'+esc(t.label||t.role)+'</span><time>'+esc(ago(t.at)||"now")+"</time></div>"+(fold?"<details><summary>Show "+esc(t.role.replace("_"," "))+"</summary>"+body+"</details>":body)+"</article>";}).join("");if(arrived){if(state.transcript.follow||nearTop){list.scrollTop=0;state.transcript.unread=0;}else{list.scrollTop=oldTop+Math.max(0,list.scrollHeight-oldHeight);state.transcript.unread++;}}el("live-transcript-new").hidden=!state.transcript.unread;el("live-transcript-new").textContent=state.transcript.unread+" new activit"+(state.transcript.unread===1?"y":"ies")+" ↑";}
+  function stopPlayback(){if(state.playback.timer)clearInterval(state.playback.timer);state.playback.timer=null;state.playback.playing=false;}
+  function playbackRecords(){return state.playback.events.length?state.playback.events:state.playback.items;}
+  function reviewSession(index){var source=sessionById(state.selected),events=state.playback.events.slice(0,index+1),nodes={},edges={};if(source)nodes[source.id]={id:source.id,kind:"session",host:source.host,status:"running",label:source.title};events.forEach(function(ev){var a=ev.actor||{},t=ev.target||{},tool=ev.tool||{},aid=a.id||source&&source.id,tid=t.id||tool.callId;if(aid){var priorActor=nodes[aid]||{};nodes[aid]=Object.assign({},priorActor,{id:aid,kind:a.kind||(a.role==="tool"?"tool":aid===source.id?"session":"agent"),role:a.role||priorActor.role,label:a.label||priorActor.label,host:source&&source.host,status:ev.status||priorActor.status||"running",observedAt:ev.at});}if(tid){var prior=nodes[tid]||{},nextLabel=t.label||tool.name||tool.category||prior.label;nodes[tid]=Object.assign({},prior,{id:tid,kind:tool.callId?"tool":t.kind||prior.kind||"agent",role:t.role||prior.role,label:nextLabel,toolName:tool.name||prior.toolName,status:tool.status||ev.status||prior.status||"running",durationMs:tool.durationMs||prior.durationMs,observedAt:ev.at});var eid=String(aid+"|"+(tool.callId||tid));edges[eid]={id:eid,source:aid,target:tid,action:ev.relation||ev.kind||"activity"};}});return Object.assign({},source||{},{nodes:Object.keys(nodes).map(function(k){return nodes[k];}),edges:Object.keys(edges).map(function(k){return edges[k];})});}
+  function setReviewIndex(index){var p=state.playback,records=playbackRecords(),max=Math.max(0,records.length-1);p.index=Math.max(0,Math.min(max,Number(index)||0));p.session=reviewSession(p.index);var cutoff=records[p.index]&&(records[p.index].at||records[p.index].observedAt||records[p.index].timestamp),items=p.items.filter(function(item,i){var at=item.at||item.observedAt||item.timestamp;return cutoff&&at?Date.parse(at)<=Date.parse(cutoff):i<=Math.round(p.index/Math.max(1,records.length-1)*Math.max(0,p.items.length-1));});addTranscript(items.length?items:records.slice(0,p.index+1),true);renderGraph(p.session);renderPlayback();}
+  function renderPlayback(){var p=state.playback,review=p.mode==="review",selected=sessionById(state.selected),active=isLiveSession(selected),records=playbackRecords(),range=el("live-playback-range"),mode=el("live-mode");mode.dataset.mode=review?"review":"live";mode.textContent=review?"REVIEW":"LIVE";el("live-playback").dataset.mode=review?"review":"live";range.disabled=!review||!records.length;range.max=String(Math.max(0,records.length-1));range.value=String(review?p.index:Math.max(0,records.length-1));el("live-playback-toggle").disabled=!review||!records.length;el("live-playback-toggle").innerHTML=p.playing?"&#9208;":"&#9654;";el("live-playback-toggle").setAttribute("aria-label",p.playing?"Pause session review":"Play session review");el("live-enter-review").hidden=review||!active;el("live-resume-live").hidden=!review||!active;var at=records[p.index]&&(records[p.index].observedAt||records[p.index].timestamp||records[p.index].at),stamp=at?new Date(at).toLocaleTimeString([], {hour:"2-digit",minute:"2-digit",second:"2-digit"}):"";el("live-playback-time").textContent=review?(stamp||String(Math.min(p.index+1,records.length))+" / "+String(records.length)):"Live now";}
+  function loadPlayback(s){closeTranscript();stopPlayback();state.playback={mode:"review",events:[],items:[],index:0,playing:false,speed:state.playback.speed||1,timer:null,startAt:null,endAt:null,session:null,truncated:false,gap:false};transcriptStatus("connecting","Loading review");renderPlayback();fetch("/api/live/playback/"+encodeURIComponent(s.host||providerOf(s))+"/"+encodeURIComponent(s.id),{cache:"no-store"}).then(function(r){if(!r.ok)throw Error();return r.json();}).then(function(v){state.playback.events=Array.isArray(v.events)?v.events:[];state.playback.items=transcriptItems(v.transcript||v.items||[]);state.playback.startAt=v.startAt||null;state.playback.endAt=v.endAt||null;state.playback.truncated=!!v.truncated;state.playback.gap=!!v.gap;var notice=el("live-replay-notice");notice.hidden=!state.playback.truncated&&!state.playback.gap;notice.textContent=state.playback.gap?"Some source events are unavailable; this replay contains an evidence gap.":state.playback.truncated?"Replay begins at the earliest retained local evidence.":"";var records=playbackRecords();setReviewIndex(Math.max(0,records.length-1));transcriptStatus("review","Review");}).catch(function(){state.playback.items=[];state.playback.events=[];state.transcript.turns=[];renderTranscript();transcriptStatus("error","Review unavailable");renderPlayback();});}
+  function resumeLive(){var s=sessionById(state.selected);stopPlayback();state.playback.mode="live";state.playback.events=[];state.playback.items=[];state.playback.session=null;if(isLiveSession(s))openTranscript(s);else if(s)loadPlayback(s);render();}
+  function selectSession(id,open){var s=sessionById(id),key=s?sessionKey(s):id;if(state.selected===key&&state.transcript.session===key)return;stopPlayback();state.selected=key||null;state.node=null;state.fitFor=null;state.camera={x:24,y:24,k:1};if(open!==false){if(isLiveSession(s)){state.playback.mode="live";openTranscript(s);}else if(s)loadPlayback(s);}}
+  function selectNode(id){state.node=id||null;render();renderTranscript();}
+  function bind(){
+    el("live-pause").addEventListener("click",function(){state.paused=!state.paused;this.setAttribute("aria-pressed",String(state.paused));this.innerHTML=state.paused?"&#9654; Resume":"&#9208; Pause";if(!state.paused){var q=state.pending.slice();state.pending=[];if(state.overflow){state.overflow=false;connect();}else q.forEach(function(p){receive(p.kind,p.data);});}});
+    el("live-health-toggle").addEventListener("click",function(){var h=el("live-health"),open=h.hidden;h.hidden=!open;this.setAttribute("aria-expanded",String(open));if(open){var r=this.getBoundingClientRect(),w=Math.min(360,window.innerWidth-24);h.style.width=w+"px";h.style.left=Math.max(12,Math.min(window.innerWidth-w-12,r.right-w))+"px";h.style.top=Math.min(window.innerHeight-h.offsetHeight-12,r.bottom+8)+"px";}});
+    el("live-project-list").addEventListener("click",function(e){var b=e.target.closest("[data-project]");if(!b)return;state.project=b.dataset.project;state.browserLevel="sessions";var list=visibleSessions();selectSession(list[0]&&sessionKey(list[0]));render();(el("live-session-list").querySelector("[data-session]")||el("live-browser-back")).focus();});
+    el("live-browser-back").addEventListener("click",function(){state.browserLevel="projects";renderSessions();var selectedProject=el("live-project-list").querySelector('[data-project="'+CSS.escape(state.project||"")+'"]');if(selectedProject)selectedProject.focus();});
+    el("live-session-list").addEventListener("click",function(e){var b=e.target.closest("[data-session]");if(b){selectSession(b.dataset.key||b.dataset.session);render();}});
+    el("live-playback-range").addEventListener("input",function(){stopPlayback();setReviewIndex(this.value);});
+    el("live-playback-speed").addEventListener("change",function(){state.playback.speed=Number(this.value)||1;if(state.playback.playing){stopPlayback();el("live-playback-toggle").click();}});
+    el("live-playback-toggle").addEventListener("click",function(){var p=state.playback,records=playbackRecords();if(p.mode!=="review"||!records.length)return;if(p.playing){stopPlayback();renderPlayback();return;}if(p.index>=records.length-1)setReviewIndex(0);p.playing=true;function advance(){if(!p.playing)return;if(p.index>=records.length-1){stopPlayback();renderPlayback();return;}var here=Date.parse(records[p.index]&&(records[p.index].at||records[p.index].observedAt||records[p.index].timestamp)||0),next=Date.parse(records[p.index+1]&&(records[p.index+1].at||records[p.index+1].observedAt||records[p.index+1].timestamp)||0),delay=Number.isFinite(here)&&Number.isFinite(next)?Math.max(90,Math.min(1800,(next-here)/p.speed)):Math.max(120,700/p.speed);p.timer=setTimeout(function(){setReviewIndex(p.index+1);advance();},delay);}advance();renderPlayback();});
+    el("live-enter-review").addEventListener("click",function(){var s=sessionById(state.selected);if(s)loadPlayback(s);});
+    el("live-resume-live").addEventListener("click",resumeLive);
+    el("live-zoom-in").onclick=function(){setZoom(state.camera.k*1.2);};el("live-zoom-out").onclick=function(){setZoom(state.camera.k/1.2);};el("live-fit").onclick=function(){state.cameraEpoch++;fit();};el("live-fit-selection").onclick=fitSelection;el("live-reset-layout").onclick=function(){var s=sessionById(state.selected);delete state.positions[s?s.id:"none"];state.pinned={};renderGraph(s,true);fit();};
+    el("live-transcript-search").addEventListener("input",function(){state.transcript.query=this.value;renderTranscript();});el("live-transcript-list").addEventListener("scroll",function(){var near=this.scrollTop<56;if(!near&&state.transcript.follow){state.transcript.follow=false;el("live-transcript-follow").setAttribute("aria-pressed","false");el("live-transcript-follow").textContent="Follow";}});el("live-transcript-follow").onclick=function(){state.transcript.follow=!state.transcript.follow;this.setAttribute("aria-pressed",String(state.transcript.follow));this.textContent=state.transcript.follow?"Following":"Follow";if(state.transcript.follow){var l=el("live-transcript-list");l.scrollTop=0;state.transcript.unread=0;renderTranscript();}};el("live-transcript-clear-filter").onclick=function(){selectNode(null);};el("live-transcript-new").onclick=function(){state.transcript.follow=true;el("live-transcript-follow").setAttribute("aria-pressed","true");el("live-transcript-follow").textContent="Following";var l=el("live-transcript-list");l.scrollTop=0;state.transcript.unread=0;renderTranscript();};
+    var canvas=el("live-canvas"),graph=el("live-graph");canvas.addEventListener("wheel",function(e){e.preventDefault();setZoom(state.camera.k*Math.exp(-e.deltaY*.0015),e.clientX,e.clientY);},{passive:false});
+    canvas.addEventListener("pointerdown",function(e){var n=e.target.closest&&e.target.closest("[data-node]");state.cameraEpoch++;state.pointer={id:e.pointerId,x:e.clientX,y:e.clientY,sx:e.clientX,sy:e.clientY,moved:false,node:n&&n.dataset.node};canvas.setPointerCapture(e.pointerId);canvas.dataset.panning=String(!n);});
+    canvas.addEventListener("pointermove",function(e){var p=state.pointer;if(!p||p.id!==e.pointerId)return;var dx=e.clientX-p.x,dy=e.clientY-p.y;if(Math.abs(e.clientX-p.sx)+Math.abs(e.clientY-p.sy)>4)p.moved=true;if(p.node){var s=sessionById(state.selected),positions=state.positions[s?s.id:"none"],at=positions&&positions[p.node];if(at){at.x+=dx/state.camera.k;at.y+=dy/state.camera.k;state.pinned[(s?s.id:"")+"|"+p.node]=true;updateGeometry(p.node);}}else{state.camera.x+=dx;state.camera.y+=dy;applyCamera();}p.x=e.clientX;p.y=e.clientY;});
+    function up(e){var p=state.pointer;if(!p||p.id!==e.pointerId)return;state.pointer=null;canvas.removeAttribute("data-panning");if(p.node&&!p.moved)selectNode(p.node);}canvas.addEventListener("pointerup",up);canvas.addEventListener("pointercancel",up);
+    graph.addEventListener("dblclick",function(e){var n=e.target.closest&&e.target.closest(".live-node");if(!n)return;var s=sessionById(state.selected);delete state.pinned[(s?s.id:"")+"|"+n.dataset.node];n.dataset.pinned="false";});
+    graph.addEventListener("keydown",function(e){var n=e.target.closest&&e.target.closest("[data-node]");if(!n)return;if(e.key==="Enter"||e.key===" "){selectNode(n.dataset.node);e.preventDefault();}});
+    canvas.addEventListener("keydown",function(e){if(e.target.closest&&e.target.closest("[data-node]"))return;var ok=true;if(e.key==="+"||e.key==="=")setZoom(state.camera.k*1.2);else if(e.key==="-"||e.key==="_")setZoom(state.camera.k/1.2);else if(e.key.toLowerCase()==="f")fit();else if(e.key==="0"){state.camera={x:24,y:24,k:1};applyCamera();}else ok=false;if(ok)e.preventDefault();});document.addEventListener("keydown",function(e){if(e.key==="Escape"&&!el("live-health").hidden){el("live-health").hidden=true;el("live-health-toggle").setAttribute("aria-expanded","false");el("live-health-toggle").focus();}});document.addEventListener("pointerdown",function(e){var h=el("live-health"),b=el("live-health-toggle");if(!h.hidden&&!h.contains(e.target)&&!b.contains(e.target)){h.hidden=true;b.setAttribute("aria-expanded","false");}});
+  }
+  function activate(){state.active=true;if(!state.source)connect();render();}function deactivate(){state.active=false;if(state.source){state.source.close();state.source=null;}stopPlayback();closeTranscript();setConnection("offline","Live view inactive");}
+  bind();setInterval(function(){if(state.active&&!state.paused&&state.lastAt&&Date.now()-state.lastAt>30000)setConnection("stale","Connected · no new activity for 30 seconds");},5000);
+  window.AKLive={activate:activate,deactivate:deactivate,render:render,receive:receive,state:state,fit:fit,fitSelection:fitSelection,selectNode:selectNode,addTranscript:addTranscript};
+})();`;
diff --git a/src/lib/dashboard/live/styles.mjs b/src/lib/dashboard/live/styles.mjs
new file mode 100644
index 00000000..3f6960d4
--- /dev/null
+++ b/src/lib/dashboard/live/styles.mjs
@@ -0,0 +1,23 @@
+export const LIVE_CSS = `
+.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
+.live-panel{--live-glass:color-mix(in srgb,var(--panel) 88%,transparent);position:relative;max-width:none;margin:-18px -12px 0;height:calc(100vh - 58px);min-height:640px;padding:13px 15px 67px;overflow:hidden;background:radial-gradient(ellipse at 42% 43%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 44%)}
+.live-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:5px}.live-title{font-size:19px;letter-spacing:-.02em;margin:0}.live-sub{display:block;margin:3px 0 0;color:var(--ink-dim);font-size:8px}.live-controls{display:flex;align-items:center;gap:8px}.live-pause,.live-health-summary,.live-view-tools button,.live-transcript-tools button{color:var(--ink);background:var(--live-glass);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font:inherit;cursor:pointer;backdrop-filter:blur(16px)}.live-pause{font-size:10px}
+.live-pause:focus-visible,.live-health-summary:focus-visible,.live-view-tools button:focus-visible,.live-transcript-tools button:focus-visible,.live-search input:focus-visible,.live-node:focus-visible,.live-tool:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.live-pause[aria-pressed=true]{color:var(--warn)}
+.live-mode{border:1px solid color-mix(in srgb,var(--ok) 55%,var(--line));border-radius:999px;padding:5px 9px;color:var(--ok);font:800 9px/1 ui-monospace,monospace;letter-spacing:.14em}.live-mode[data-mode=review]{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
+.live-state{min-height:20px;display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:10px;margin:0 1px 6px}.live-state-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-2)}.live-state-dot[data-state=live]{background:var(--ok);box-shadow:0 0 12px var(--ok)}.live-state-dot[data-state=paused],.live-state-dot[data-state=stale]{background:var(--warn)}.live-state-dot[data-state=offline]{background:var(--fail)}.live-health-summary{padding:3px 8px;font-size:9px;margin-left:auto}.live-cursor{font-size:8px;color:var(--ink-dim)}.live-health{position:fixed;z-index:100;display:flex;max-height:min(420px,calc(100vh - 24px));overflow:auto;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 97%,transparent);box-shadow:0 18px 55px #0009;backdrop-filter:blur(22px)}.live-health[hidden],.live-health:empty{display:none}.live-health-item{display:grid;grid-template-columns:minmax(76px,1fr) auto;padding:7px 8px;border-radius:8px;color:var(--ink-2);font-size:8px}.live-health-item b{color:var(--ink)}.live-health-item[data-status=error]{color:var(--fail);background:color-mix(in srgb,var(--fail) 7%,transparent)}
+.live-workspace{height:calc(100vh - 164px);min-height:540px;display:grid;grid-template-columns:minmax(245px,19vw) minmax(440px,1fr) minmax(310px,26vw);gap:8px}.live-browser,.live-canvas-card,.live-transcript{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:14px;min-width:0;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.live-browser{display:flex;flex-direction:column}.live-browser-top{height:64px;flex:0 0 64px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--line)}.live-browser-top h3{margin:2px 0 0;font-size:14px;letter-spacing:-.02em}.live-browser-top output{grid-column:3;grid-row:1/3;color:var(--ink-dim);font:9px ui-monospace,monospace}.live-browser-top #live-count{display:none}.live-browser[data-level=sessions] .live-browser-top #live-project-count{display:none}.live-browser[data-level=sessions] .live-browser-top #live-count{display:block}.live-browser-back{display:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink);font:24px/1 sans-serif;cursor:pointer}.live-browser-back:hover{background:var(--bg)}.live-browser[data-level=sessions] .live-browser-back{display:grid;place-items:center}.live-browser-stack{position:relative;flex:1;min-height:0;overflow:hidden}.live-projects,.live-project-sessions{position:absolute;inset:0;display:flex;flex-direction:column;padding:8px;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .22s ease}.live-projects{transform:translateX(0)}.live-project-sessions{transform:translateX(102%);opacity:.35}.live-browser[data-level=sessions] .live-projects{transform:translateX(-24%);opacity:0;pointer-events:none}.live-browser[data-level=sessions] .live-project-sessions{transform:translateX(0);opacity:1}.live-browser-caption{padding:2px 6px 9px;color:var(--ink-dim);font-size:8px}.live-project-list,.live-session-list{display:flex;flex-direction:column;gap:3px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0}.live-project,.live-session{width:100%;min-height:62px;text-align:left;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--ink);padding:9px 10px;cursor:pointer}.live-project{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;padding-right:27px}.live-project::after{content:"›";position:absolute;right:10px;top:19px;color:var(--ink-dim);font-size:18px}.live-project:hover,.live-session:hover{background:color-mix(in srgb,var(--bg) 75%,transparent)}.live-project[aria-current=true],.live-session[aria-current=true]{border-color:color-mix(in srgb,var(--accent) 52%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}.live-project span{font-size:11px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-project small{font-size:8px;color:var(--ink-dim)}.live-project small b{color:var(--ok)}.live-browser-empty{padding:20px 8px;text-align:center;color:var(--ink-dim);font-size:9px}.live-session{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px}.live-provider{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1px solid var(--line);font-weight:800}.live-provider[data-provider=claude]{color:#e28b6c}.live-provider[data-provider=codex]{color:#69a8ff}.live-provider[data-provider=ruflo]{color:#ae8dff}.live-session-main{align-self:end;font-size:10px;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-session-provider{align-self:start;margin-top:4px;font-size:7px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-session-provider i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-dim);margin-right:5px}.live-session-provider i[data-status=running]{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:live-pulse 1.4s ease-in-out infinite}.live-browser-foot{height:36px;flex:0 0 36px;display:flex;align-items:center;gap:7px;padding:0 12px;border-top:1px solid var(--line);color:var(--ink-dim);font-size:8px}.live-canvas-card{display:flex;flex-direction:column}.live-pane-head{min-height:57px;padding:8px 11px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);display:flex;align-items:center;justify-content:space-between;gap:10px}.live-pane-head h3{font-size:12px;margin:2px 0}.live-kicker{font:700 7px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--accent)}.live-graph-summary,.live-transcript-head span:last-child{font-size:8px;color:var(--ink-2)}.live-view-tools{display:flex;align-items:center;gap:3px}.live-view-tools button{padding:4px 7px;font-size:8px}.live-view-tools output{font:8px ui-monospace,monospace;color:var(--ink-2);min-width:31px;text-align:center}.live-session-context{min-height:32px;display:flex;align-items:center;gap:7px;padding:5px 11px;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);color:var(--ink-2);font-size:8px}.live-session-context-provider{padding:3px 6px;border-radius:999px;background:var(--bg);color:var(--accent);font-weight:750}.live-session-context-status{margin-left:auto;color:var(--ink-dim)}
+.live-project[data-live=true],.live-session[data-live=true]{box-shadow:inset 2px 0 var(--ok)}.live-project[data-live=true]::before{content:"";position:absolute;right:29px;top:27px;width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:live-pulse 1.5s ease-in-out infinite}
+.live-session-provider i[data-status=working]{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:live-pulse 1.4s ease-in-out infinite}.live-session-provider i[data-status=waiting],.live-session-provider i[data-status=stale],.live-session-provider i[data-status=queued]{background:var(--warn)}.live-session-provider i[data-status=blocked],.live-session-provider i[data-status=failed]{background:var(--fail)}.live-session[data-state=blocked],.live-session[data-state=failed]{box-shadow:inset 2px 0 var(--fail)}.live-session[data-state=waiting],.live-session[data-state=stale]{box-shadow:inset 2px 0 color-mix(in srgb,var(--warn) 55%,transparent)}
+.live-canvas{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(circle at 47% 48%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 38%),radial-gradient(circle at 47% 48%,transparent 0 46%,color-mix(in srgb,var(--bg) 60%,transparent) 75%),linear-gradient(color-mix(in srgb,var(--line) 15%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 15%,transparent) 1px,transparent 1px);background-size:auto,auto,48px 48px,48px 48px}.live-canvas[data-panning=true]{cursor:grabbing}.live-canvas svg{display:block;width:100%;height:100%}.live-map-help{position:absolute;left:12px;bottom:11px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--live-glass);font-size:8px;color:var(--ink-dim);pointer-events:none}.live-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-dim);font-size:11px;pointer-events:none}.live-empty[hidden]{display:none}
+.live-edge{fill:none;stroke:color-mix(in srgb,var(--ink-2) 27%,transparent);stroke-width:1.15;marker-end:url(#live-arrow)}.live-edge[data-active=true]{stroke:var(--accent);stroke-width:1.7;stroke-dasharray:7 7;animation:live-flow 1.15s linear infinite;filter:url(#live-glow)}.live-node,.live-tool{cursor:pointer}.live-node{pointer-events:bounding-box}.live-node[data-related=false],.live-tool[data-related=false],.live-edge[data-related=false]{opacity:.16}.node-aura{fill:color-mix(in srgb,var(--accent) 4%,transparent);stroke:color-mix(in srgb,var(--accent) 13%,transparent);stroke-width:1}.node-core{fill:color-mix(in srgb,var(--panel) 75%,var(--bg));stroke:var(--ink-2);stroke-width:1.5}.node-core-ring{fill:none;stroke-width:2}.node-core-dot{fill:var(--accent);filter:url(#live-glow)}.node-core-mark{fill:none;stroke:var(--ink);stroke-width:2}.live-node[data-selected=true] .node-aura,.live-node:hover .node-aura{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-width:1.5}.live-node[data-selected=true] .node-core{stroke:var(--accent);stroke-width:2}.live-node[data-pinned=true] .node-aura{stroke-dasharray:4 3}.node-status{fill:var(--ink-dim)}.live-node[data-status=running] .node-status{fill:var(--ok);filter:url(#live-glow);animation:live-pulse 1.4s ease-in-out infinite}.live-node[data-status=failed] .node-status{fill:var(--fail)}.live-node text{fill:var(--ink);font:600 10px ui-sans-serif,sans-serif}.live-node .node-name{font-size:11px;font-weight:750}.live-node .node-eyebrow{fill:var(--ink-dim);font:700 6px ui-monospace,monospace;letter-spacing:.1em}.node-work{opacity:.18;transition:opacity .18s}.live-node[data-status=running] .node-work,.live-node[data-selected=true] .node-work,.live-node:hover .node-work{opacity:1}.node-work rect{fill:color-mix(in srgb,var(--panel) 91%,transparent);stroke:var(--line)}.node-work circle{fill:var(--ok)}.node-work text{fill:var(--ink);font:7px ui-monospace,monospace}.node-work .node-meta{fill:var(--ink-dim);font-size:6px}.live-tool-halo{fill:color-mix(in srgb,var(--accent) 5%,transparent);stroke:color-mix(in srgb,var(--accent) 16%,transparent)}.live-tool-card{fill:color-mix(in srgb,var(--bg) 76%,var(--panel));stroke:var(--line)}.live-tool[data-status=running] .live-tool-halo{filter:url(#live-glow);animation:live-pulse 1.4s ease-in-out infinite}.live-tool[data-status=running] .live-tool-card{stroke:var(--accent)}.live-tool text{fill:var(--ink-2);font:6px ui-monospace,monospace}.live-tool .tool-name{fill:var(--ink);font-size:7px;font-weight:700}.live-tool-icon{fill:var(--accent)}.node-history rect{fill:color-mix(in srgb,var(--panel) 86%,transparent);stroke:var(--line)}.node-history text{fill:var(--ink-dim);font:6px ui-monospace,monospace}.live-flow-dot{fill:var(--accent);filter:url(#live-glow);pointer-events:none}
+.live-node[data-status=blocked] .node-status,.live-node[data-status=failed] .node-status{fill:var(--fail)}.live-node[data-status=queued] .node-status,.live-node[data-status=quiescent] .node-status,.live-node[data-status=expired] .node-status{fill:var(--warn)}.live-tool[data-status=blocked] .live-tool-card,.live-tool[data-status=failed] .live-tool-card{stroke:var(--fail)}.live-tool[data-status=queued] .live-tool-card,.live-tool[data-status=quiescent] .live-tool-card,.live-tool[data-status=expired] .live-tool-card{stroke:var(--warn)}
+.live-node[data-status=working] .node-status{fill:var(--ok);filter:url(#live-glow);animation:live-pulse 1.4s ease-in-out infinite}.live-node[data-status=working] .node-work{opacity:1}.live-tool[data-status=working] .live-tool-halo{filter:url(#live-glow);animation:live-pulse 1.4s ease-in-out infinite}.live-tool[data-status=working] .live-tool-card{stroke:var(--accent)}
+.live-transcript{display:flex;flex-direction:column;position:relative}.live-transcript-head{flex:0 0 auto}.live-transcript-state{border:1px solid var(--line);border-radius:999px;padding:4px 7px;font:7px ui-monospace,monospace;text-transform:uppercase}.live-transcript-state[data-state=live]{color:var(--ok)}.live-transcript-state[data-state=error]{color:var(--fail)}.live-transcript-tools{display:flex;gap:5px;padding:6px;border-bottom:1px solid var(--line)}.live-search{flex:1}.live-search input{width:100%;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font:8px ui-monospace,monospace}.live-transcript-tools button{padding:5px 8px;font-size:8px}.live-transcript-tools button[aria-pressed=true]{color:var(--ok)}.live-transcript-list{flex:1;overflow:auto;padding:9px;scrollbar-width:thin;overscroll-behavior:contain}.live-transcript-empty{display:grid;min-height:180px;place-items:center;text-align:center;color:var(--ink-dim);font-size:9px;padding:24px}.live-turn{margin:0 0 8px;border-left:2px solid var(--line);padding:7px 9px;background:color-mix(in srgb,var(--bg) 52%,transparent);border-radius:0 8px 8px 0}.live-turn[data-role=user]{border-left-color:var(--accent)}.live-turn[data-role=assistant]{border-left-color:var(--ok)}.live-turn[data-role=thinking]{border-left-color:var(--warn)}.live-turn[data-role=error]{border-left-color:var(--fail)}.live-turn[data-selected=false]{display:none}.live-turn-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;color:var(--ink-dim);font:700 7px ui-monospace,monospace;text-transform:uppercase}.live-turn-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2);font:9px/1.55 ui-monospace,monospace}.live-turn details summary{cursor:pointer;color:var(--ink-2);font:8px ui-monospace,monospace}.live-transcript-new{position:absolute;right:16px;bottom:64px;border:1px solid var(--accent);border-radius:999px;background:var(--panel);color:var(--accent);padding:5px 9px;font-size:8px}.live-selection{flex:0 0 auto;border-top:1px solid var(--line);padding:7px 10px;color:var(--ink-2);font-size:8px}.live-selection summary{cursor:pointer;color:var(--ink)}.live-selection dl{display:grid;grid-template-columns:65px 1fr;gap:3px;margin:7px 0 0}.live-selection dd{margin:0}
+.live-replay-notice{flex:0 0 auto;padding:6px 10px;border-top:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 7%,transparent);color:var(--warn);font-size:8px}.live-playback{position:absolute;z-index:20;left:calc(19vw + 32px);right:calc(26vw + 32px);bottom:10px;height:47px;display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto auto auto;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:16px;padding:5px 9px;background:color-mix(in srgb,var(--panel) 91%,transparent);box-shadow:0 12px 40px #0008;backdrop-filter:blur(20px)}.live-playback[data-mode=review]{border-color:color-mix(in srgb,var(--warn) 42%,var(--line))}.live-playback button,.live-playback select{color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 9px;font:8px ui-monospace,monospace;cursor:pointer}.live-playback input{width:100%;accent-color:var(--accent)}.live-playback output{min-width:62px;color:var(--ink-2);font:8px ui-monospace,monospace}.live-playback #live-resume-live{color:var(--ok)}.live-playback #live-enter-review{color:var(--warn)}.live-panel>.foot{display:none}
+.live-session-family{display:flex;flex-direction:column}.live-session-children{position:relative;margin:0 0 4px 17px;padding-left:9px;border-left:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}.live-session-child{min-height:51px;border-radius:8px}.live-session-child .live-provider{width:25px;height:25px;font-size:11px;color:var(--accent)}.live-session-child .live-session-main{font-size:9px}.live-session-child .live-session-provider{font-size:7px}
+@keyframes live-flow{to{stroke-dashoffset:-28}}@keyframes live-pulse{50%{opacity:.35}}
+@media(max-width:1180px){.live-workspace{grid-template-columns:230px minmax(390px,1fr) minmax(285px,31vw)}.live-playback{left:252px;right:calc(31vw + 30px)}}
+@media(max-width:900px){.live-panel{height:auto;min-height:calc(100vh - 58px);margin:0;padding:12px 8px 72px;overflow:visible}.live-workspace{height:auto;grid-template-columns:230px minmax(0,1fr)}.live-browser{height:570px}.live-canvas-card{height:570px}.live-transcript{grid-column:1/3;height:520px}.live-playback{position:fixed;left:10px;right:10px;bottom:8px}.live-toolbar{position:sticky;top:0;z-index:30}}
+@media(max-width:760px){.live-workspace{grid-template-columns:minmax(0,1fr)}.live-browser,.live-canvas-card{height:520px}.live-transcript{grid-column:1;height:500px}.live-view-tools button:nth-last-child(-n+2){display:none}.live-playback{grid-template-columns:auto 1fr auto}.live-playback select,.live-playback #live-resume-live{grid-row:2}}
+@media(prefers-reduced-motion:reduce){.live-edge,.live-node .node-status,.live-tool-card,.live-tool-halo,.live-session-provider i,.live-project::before{animation:none!important}.live-flow-dot{display:none}}
+`;
diff --git a/src/lib/dashboard/live/template.mjs b/src/lib/dashboard/live/template.mjs
new file mode 100644
index 00000000..a969dc12
--- /dev/null
+++ b/src/lib/dashboard/live/template.mjs
@@ -0,0 +1,125 @@
+export const LIVE_HTML = `
+  <section class="panel live-panel" id="panel-live" role="tabpanel" aria-labelledby="tab-live" hidden>
+    <header class="live-toolbar">
+      <div>
+        <h2 class="live-title">Live sessions</h2>
+        <p class="live-sub" id="live-sub">Follow the agents, tools, and conversation behind work happening now.</p>
+      </div>
+      <div class="live-controls">
+        <span class="live-mode" id="live-mode" data-mode="live">LIVE</span>
+        <button class="live-pause" id="live-pause" type="button" aria-pressed="false">&#9208; Pause stream</button>
+      </div>
+    </header>
+    <div class="live-state" role="status" aria-live="polite">
+      <span class="live-state-dot" id="live-state-dot" data-state="connecting"></span>
+      <span id="live-state-text">Connecting to local session telemetry…</span>
+      <button class="live-health-summary" id="live-health-toggle" type="button" aria-expanded="false">Sources</button>
+      <span class="mono live-cursor" id="live-cursor"></span>
+    </div>
+    <div class="live-health" id="live-health" aria-label="Adapter health" hidden></div>
+
+    <div class="live-workspace">
+      <nav class="live-browser" id="live-browser" aria-label="Projects and sessions" data-level="projects">
+        <div class="live-browser-top">
+          <button class="live-browser-back" id="live-browser-back" type="button" aria-label="Back to projects">
+            <span aria-hidden="true">‹</span>
+          </button>
+          <div>
+            <span class="live-kicker" id="live-browser-kicker">WORKSPACES</span>
+            <h3 id="live-browser-title">Projects</h3>
+          </div>
+          <output id="live-project-count">0</output>
+          <output id="live-count">0</output>
+        </div>
+        <div class="live-browser-stack">
+          <section class="live-projects" aria-labelledby="live-browser-title">
+            <div class="live-browser-caption">Choose a repository to see its recorded sessions.</div>
+            <div id="live-project-list" class="live-project-list" role="list"></div>
+          </section>
+          <section class="live-project-sessions" aria-labelledby="live-session-heading">
+            <h4 class="sr-only" id="live-session-heading">Sessions</h4>
+            <div class="live-browser-caption">Most recent activity first</div>
+            <div id="live-session-list" class="live-session-list" role="list"></div>
+          </section>
+        </div>
+        <footer class="live-browser-foot">
+          <span class="live-state-dot" id="live-browser-state-dot" data-state="connecting"></span>
+          <span id="live-browser-state">Local evidence</span>
+        </footer>
+      </nav>
+
+      <section class="live-canvas-card" aria-labelledby="live-graph-title">
+        <div class="live-pane-head live-graph-head">
+          <div>
+            <span class="live-kicker">EXECUTION MAP</span>
+            <h3 id="live-graph-title">Agent activity</h3>
+            <span id="live-graph-summary" class="live-graph-summary"></span>
+          </div>
+          <div class="live-view-tools" role="toolbar" aria-label="Map controls">
+            <button type="button" id="live-zoom-out" aria-label="Zoom out" title="Zoom out (−)">−</button>
+            <output id="live-zoom" aria-live="polite">100%</output>
+            <button type="button" id="live-zoom-in" aria-label="Zoom in" title="Zoom in (+)">+</button>
+            <button type="button" id="live-fit" title="Fit all (F)">Fit all</button>
+            <button type="button" id="live-fit-selection" title="Fit selected agent">Focus</button>
+            <button type="button" id="live-reset-layout" title="Restore automatic layout">Reset layout</button>
+          </div>
+        </div>
+        <div class="live-session-context" id="live-session-context">
+          <span class="live-session-context-provider" id="live-session-context-provider">—</span>
+          <span id="live-session-context-project">Choose a session</span>
+          <span id="live-session-context-status">Waiting for local evidence</span>
+        </div>
+        <div class="live-canvas" id="live-canvas" tabindex="0" aria-label="Interactive execution map. Drag to pan, scroll to zoom, and drag agents to pin them.">
+          <svg id="live-graph" role="img" aria-labelledby="live-graph-title live-graph-desc">
+            <desc id="live-graph-desc">Agents are connected to their workers and owned tool calls. Select an item to focus its transcript.</desc>
+            <defs>
+              <marker id="live-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="5" markerHeight="5" orient="auto"><path d="M0 0L8 4L0 8z"></path></marker>
+              <filter id="live-glow"><feGaussianBlur stdDeviation="2.2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+            </defs>
+            <g id="live-viewport"><g id="live-edges"></g><g id="live-tools"></g><g id="live-nodes"></g></g>
+          </svg>
+          <div class="live-empty" id="live-empty">Waiting for agent activity…</div>
+          <div class="live-map-help">Drag canvas · scroll to zoom · drag an agent to pin · double-click to unpin</div>
+        </div>
+      </section>
+
+      <aside class="live-transcript" aria-labelledby="live-transcript-title">
+        <div class="live-pane-head live-transcript-head">
+          <div>
+            <span class="live-kicker">LIVE TRANSCRIPT</span>
+            <h3 id="live-transcript-title">Session stream</h3>
+            <span id="live-transcript-context">Select a session to follow</span>
+          </div>
+          <span class="live-transcript-state" id="live-transcript-state" data-state="idle">Idle</span>
+        </div>
+        <div class="live-transcript-tools">
+          <label class="live-search"><span class="sr-only">Search transcript</span><input id="live-transcript-search" type="search" placeholder="Search this stream…" autocomplete="off"></label>
+          <button type="button" id="live-transcript-follow" aria-pressed="true">Following</button>
+          <button type="button" id="live-transcript-clear-filter" hidden>All agents</button>
+        </div>
+        <div id="live-transcript-list" class="live-transcript-list" role="log" aria-live="polite" aria-relevant="additions text" tabindex="0">
+          <div class="live-transcript-empty">Transcript content stays local and appears here as the selected session runs.</div>
+        </div>
+        <button type="button" id="live-transcript-new" class="live-transcript-new" hidden>New activity ↓</button>
+        <details class="live-selection" id="live-selection">
+          <summary>Selection details</summary>
+          <div id="live-selection-body">Select an agent or tool in the map.</div>
+        </details>
+        <div class="live-replay-notice" id="live-replay-notice" hidden role="status"></div>
+      </aside>
+    </div>
+    <section class="live-playback" id="live-playback" aria-label="Session playback controls">
+      <button type="button" id="live-playback-toggle" aria-label="Play session review">&#9654;</button>
+      <label class="sr-only" for="live-playback-range">Playback position</label>
+      <input id="live-playback-range" type="range" min="0" max="0" value="0" step="1" disabled>
+      <output id="live-playback-time" for="live-playback-range">Live now</output>
+      <label class="sr-only" for="live-playback-speed">Playback speed</label>
+      <select id="live-playback-speed" aria-label="Playback speed">
+        <option value=".5">0.5×</option><option value="1" selected>1×</option>
+        <option value="1.5">1.5×</option><option value="2">2×</option>
+      </select>
+      <button type="button" id="live-enter-review">Review session</button>
+      <button type="button" id="live-resume-live" hidden>Resume live</button>
+    </section>
+    <div class="foot">Read-only local view · transcript secrets are masked server-side · nothing here mutates agent state</div>
+  </section>`;
diff --git a/src/lib/dashboard/page.mjs b/src/lib/dashboard/page.mjs
new file mode 100644
index 00000000..735212ba
--- /dev/null
+++ b/src/lib/dashboard/page.mjs
@@ -0,0 +1,264 @@
+import { CSS } from './styles.mjs';
+import { JS } from './client.mjs';
+import { LIVE_CSS, LIVE_HTML, LIVE_JS } from './live-view.mjs';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// The page. One document, everything inline. Only `name` and `version` are
+// interpolated server-side; the client fetches /api/status and renders live.
+//
+// Layout: a sticky segmented control (Apple's tab idiom) splits the panel into
+// five views — Overview, Hosts & Routing, Providers, Runtime, Intelligence.
+// Problems never hide behind a tab: Overview aggregates every attention card,
+// and each tab carries a count badge when something in it is failing/warning.
+// ─────────────────────────────────────────────────────────────────────────────
+export function renderPage({ name, version }) {
+  return `<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a84ff'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E">
+<title>agentic-kit · dashboard</title>
+<style>${CSS}${LIVE_CSS}</style>
+</head>
+<body>
+<header class="band">
+  <div class="band-lead">
+    <div class="mark" aria-hidden="true"></div>
+    <div class="band-titles">
+      <h1 class="kit-name">${escapeHtml(name)}</h1>
+      <div class="kit-sub"><span class="mono ver">v${escapeHtml(version)}</span><span class="sep">·</span><span>local diagnostic panel</span></div>
+    </div>
+  </div>
+  <div class="band-verdict">
+    <span class="dot" id="verdict-dot" data-level="unknown"></span>
+    <span class="verdict-text" id="verdict-text">connecting…</span>
+  </div>
+  <div class="band-tools">
+    <span class="pulse" id="pulse"></span>
+    <span class="upd mono" id="updated">—</span>
+    <div class="poll">
+      <button class="play on" id="poll-play" type="button" title="polling on — click to pause" aria-label="pause polling">&#9208;</button>
+      <button class="ivl mono" id="poll-ivl" type="button" title="polling interval" aria-haspopup="true" aria-expanded="false">30s <span class="caret" aria-hidden="true">&#9662;</span></button>
+      <button class="refresh" id="poll-now" type="button" title="refresh now" aria-label="refresh now">&#8635;</button>
+    </div>
+    <button class="toggle" id="theme-toggle" type="button" aria-label="toggle theme" title="toggle theme">
+      <span class="icon" id="theme-icon" aria-hidden="true"></span>
+    </button>
+  </div>
+  <div class="menu" id="poll-menu" hidden>
+    <button type="button" data-ms="15000">15s</button>
+    <button type="button" data-ms="30000">30s</button>
+    <button type="button" data-ms="60000">1m</button>
+    <button type="button" data-ms="300000">5m</button>
+    <button type="button" data-ms="900000">15m</button>
+    <button type="button" data-ms="1800000">30m</button>
+    <div class="sep"></div>
+    <button type="button" data-ms="3600000">1h</button>
+    <button type="button" data-ms="21600000">6h</button>
+    <button type="button" data-ms="43200000">12h</button>
+    <button type="button" data-ms="86400000">24h</button>
+  </div>
+</header>
+
+<nav class="tabbar">
+  <div class="seg" role="tablist" aria-label="dashboard sections" id="seg">
+    <span class="seg-thumb" id="seg-thumb" aria-hidden="true"></span>
+    <button class="seg-btn" role="tab" id="tab-overview" data-tab="overview" aria-selected="true" aria-controls="panel-overview" type="button">Overview<span class="badge" id="badge-overview" hidden></span></button>
+    <button class="seg-btn" role="tab" id="tab-hosts" data-tab="hosts" aria-selected="false" aria-controls="panel-hosts" type="button">Hosts &amp; Routing<span class="badge" id="badge-hosts" hidden></span></button>
+    <button class="seg-btn" role="tab" id="tab-providers" data-tab="providers" aria-selected="false" aria-controls="panel-providers" type="button">Providers<span class="badge" id="badge-providers" hidden></span></button>
+    <button class="seg-btn" role="tab" id="tab-runtime" data-tab="runtime" aria-selected="false" aria-controls="panel-runtime" type="button">Runtime<span class="badge" id="badge-runtime" hidden></span></button>
+    <button class="seg-btn" role="tab" id="tab-intel" data-tab="intel" aria-selected="false" aria-controls="panel-intel" type="button">Intelligence<span class="badge" id="badge-intel" hidden></span></button>
+    <button class="seg-btn" role="tab" id="tab-usage" data-tab="usage" aria-selected="false" aria-controls="panel-usage" type="button">Usage</button>
+    <button class="seg-btn" role="tab" id="tab-live" data-tab="live" aria-selected="false" aria-controls="panel-live" type="button">Live</button>
+  </div>
+</nav>
+
+<main class="wrap">
+  <section class="panel" id="panel-overview" role="tabpanel" aria-labelledby="tab-overview">
+    <div class="summary" id="summary" hidden></div>
+    <div class="notice" id="update-notice" hidden></div>
+    <div id="attention" aria-live="polite"></div>
+    <h2 class="subhead" id="map-head" hidden>all subsystems</h2>
+    <div class="statusmap" id="statusmap"></div>
+  </section>
+
+  <section class="panel" id="panel-hosts" role="tabpanel" aria-labelledby="tab-hosts" hidden>
+    <div id="cards-hosts"></div>
+    <section class="strip" id="routing" hidden>
+      <div class="strip-head">
+        <h2 class="strip-title">per-activity routing</h2>
+        <span class="mono strip-note" id="routing-note"></span>
+      </div>
+      <div class="route-matrix" id="route-matrix"></div>
+    </section>
+  </section>
+
+  <section class="panel" id="panel-providers" role="tabpanel" aria-labelledby="tab-providers" hidden>
+    <div id="cards-providers"></div>
+    <section class="strip" id="models" hidden>
+      <div class="strip-head">
+        <h2 class="strip-title">routed models</h2>
+        <span class="mono strip-note" id="models-note"></span>
+      </div>
+      <div class="note"><span class="i">&#8505;</span><span>This is your <b>per-activity routing policy</b> &mdash;
+        which host and model ak <i>assigns</i> to each kind of work. It is projected into
+        <b>agentic-qe</b> agent overrides and <b>ak dual run</b> pipelines; agentic-qe also has its own
+        model router, so a route here is the assignment, not a guarantee.
+        It does <b>not</b> govern the model an interactive Claude Code or codex CLI session uses &mdash;
+        you choose that per session with <span class="mono">/model</span>.
+        For the models that <b>actually ran</b>, see <b>Usage &rarr; Scorecard</b>.</span></div>
+      <div class="model-list" id="model-list"></div>
+    </section>
+  </section>
+
+  <section class="panel" id="panel-runtime" role="tabpanel" aria-labelledby="tab-runtime" hidden>
+    <div id="cards-runtime"></div>
+  </section>
+
+  <section class="panel" id="panel-intel" role="tabpanel" aria-labelledby="tab-intel" hidden>
+    <div id="cards-intel"></div>
+    <section class="strip" id="history" hidden>
+      <div class="strip-head">
+        <h2 class="strip-title">learning over time</h2>
+        <span class="mono strip-note" id="strip-note"></span>
+      </div>
+      <div class="spark-row">
+        <figure class="spark">
+          <figcaption class="mono">patterns learned</figcaption>
+          <div class="spark-svg" id="spark-patterns"></div>
+        </figure>
+        <figure class="spark">
+          <figcaption class="mono">improvement Δpp</figcaption>
+          <div class="spark-svg" id="spark-delta"></div>
+        </figure>
+      </div>
+    </section>
+  </section>
+
+  <section class="panel" id="panel-usage" role="tabpanel" aria-labelledby="tab-usage" hidden>
+    <div class="usage-bar">
+      <div class="seg subseg" role="tablist" aria-label="usage views" id="usage-seg">
+        <button class="seg-btn" role="tab" data-view="score" aria-selected="true" type="button">Scorecard</button>
+        <button class="seg-btn" role="tab" data-view="limits" aria-selected="false" type="button">Limits</button>
+        <button class="seg-btn" role="tab" data-view="findings" aria-selected="false" type="button">Findings<span class="segbadge" id="u-findings-n" hidden></span></button>
+        <button class="seg-btn" role="tab" data-view="sessions" aria-selected="false" type="button">Sessions<span class="mono seg-n" id="u-sessions-n"></span></button>
+        <button class="seg-btn" role="tab" data-view="transcript" aria-selected="false" type="button">Transcript</button>
+      </div>
+      <div class="filters" id="usage-days" role="group" aria-label="window">
+        <button class="chipf" type="button" data-days="7">7d</button>
+        <button class="chipf on" type="button" data-days="14">14d</button>
+        <button class="chipf" type="button" data-days="30">30d</button>
+      </div>
+    </div>
+
+    <section class="view" id="v-score">
+      <div class="hero" id="u-hero"></div>
+      <div class="note"><span class="i">&#8505;</span><span>Dollar figures are <b>API list-price equivalents</b> &mdash;
+        what these tokens would cost metered. On a Max/Pro subscription you are not billed this.
+        Cache reads bill at 0.1&times; input and cache writes at 1.25&times;; ignoring that would overstate
+        a window by roughly <b>10&times;</b>. <span class="mono" id="u-asof"></span></span></div>
+      <section class="strip">
+        <div class="sh"><h2>cost per day</h2><span class="n mono" id="u-days-note"></span></div>
+        <div class="days" id="u-daybars"></div>
+      </section>
+      <div class="two">
+        <section class="strip">
+          <div class="sh"><h2>by host</h2><span class="n mono">claude vs codex</span></div>
+          <div class="psplit" id="u-hosts"></div>
+          <div class="tokbar" id="u-tokbar"></div>
+          <div class="legend" id="u-toklegend"></div>
+        </section>
+        <section class="strip">
+          <div class="sh"><h2>when you work</h2><span class="n mono">responses &middot; local time</span></div>
+          <div id="u-punch"></div>
+        </section>
+      </div>
+      <div class="two">
+        <section class="strip">
+          <div class="sh"><h2>models in play</h2><span class="n mono">observed in transcripts &middot; by api-equivalent cost<span class="n-sub" id="u-models-note"></span></span></div>
+          <div id="u-models"></div>
+        </section>
+        <section class="strip">
+          <div class="sh"><h2>projects</h2><span class="n mono" id="u-projects-note"></span></div>
+          <div id="u-projects"></div>
+        </section>
+      </div>
+      <section class="strip">
+        <div class="sh"><h2>what you worked on</h2>
+          <span class="n mono">classified from titles, skills &amp; tool mix &middot; click to filter</span></div>
+        <div id="u-cats"></div>
+        <div class="legend" style="margin-top:11px">
+          <span class="lg"><i class="conf"></i>dot opacity = classifier confidence</span>
+          <span class="lg">Unclassified is shown, never force-fit</span>
+        </div>
+      </section>
+    </section>
+
+    <section class="view" id="v-limits" hidden>
+      <div class="note"><span class="i">&#8505;</span><span>Utilization here is <b>vendor-reported</b> &mdash;
+        the plan&rsquo;s own percentages, a denominator local transcripts cannot compute.
+        Claude&rsquo;s numbers arrive via the managed statusLine while a session runs; Codex&rsquo;s come from
+        <b>codex app-server</b> using codex&rsquo;s own login. This panel reads no vendor credential.</span></div>
+      <div class="two">
+        <section class="strip">
+          <div class="sh"><h2>claude plan limits</h2><span class="n mono" id="u-lim-claude-note"></span></div>
+          <div class="lim" id="u-lim-claude"></div>
+        </section>
+        <section class="strip">
+          <div class="sh"><h2>codex plan limits</h2><span class="n mono" id="u-lim-codex-note"></span></div>
+          <div class="lim" id="u-lim-codex"></div>
+        </section>
+      </div>
+      <div class="ins-grid" id="u-lim-insights"></div>
+      <div class="foot">windows are keyed by their duration, never by the vendor&rsquo;s primary/secondary slot &middot;
+        stale data is labelled stale, not hidden</div>
+    </section>
+
+    <section class="view" id="v-findings" hidden>
+      <div class="note"><span class="i">&#8505;</span><span id="u-findings-note"></span></div>
+      <div class="ins-grid" id="u-insights"></div>
+      <div class="foot">grounded in local measurement first; vendor benchmarks are labelled as such &middot;
+        third-party &ldquo;model X vs Y&rdquo; blog comparisons are deliberately not used as evidence</div>
+    </section>
+
+    <section class="view" id="v-sessions" hidden>
+      <div class="note"><span class="i">&#8505;</span><span>Grouped by project, aggregate first.
+        Expand a project to see its sessions; click <b>&#9707;</b> on any session to read its transcript.</span></div>
+      <div class="ptree" id="u-tree"></div>
+      <div class="foot">durations are session span (first&rarr;last event), not exclusive wall-clock</div>
+    </section>
+
+    <section class="view" id="v-transcript" hidden>
+      <div class="tcrumb" id="u-crumb"></div>
+      <section class="strip" id="u-turns"></section>
+      <div class="foot">secret-shaped strings are masked server-side &mdash; the original never reaches this page &middot; no export button by design</div>
+    </section>
+  </section>
+
+${LIVE_HTML}
+
+  <footer class="foot mono">
+    <span id="foot-note">read-only · 127.0.0.1 · nothing here mutates state</span>
+  </footer>
+</main>
+
+<script>${LIVE_JS}</script>
+<script>${JS}</script>
+</body>
+</html>`;
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+  ));
+}
+
+// ── Styles ───────────────────────────────────────────────────────────────────
+// Design: Apple system motif. SF stack with a tight-tracked large title, a
+// frosted sticky segmented control (the macOS/iOS tab idiom), hairline
+// separators, soft diffuse shadows, and the Apple system palette — systemBlue
+// accent, systemGreen/Orange/Red status semantics. Restraint over ornament;
+// CSS variables drive BOTH themes.
diff --git a/src/lib/dashboard/request-security.mjs b/src/lib/dashboard/request-security.mjs
new file mode 100644
index 00000000..2c2bdd3f
--- /dev/null
+++ b/src/lib/dashboard/request-security.mjs
@@ -0,0 +1,37 @@
+/**
+ * Validate the browser-facing HTTP boundary for the loopback dashboard.
+ * Returns the response body for a rejected request, or null when allowed.
+ *
+ * The socket binding alone does not prevent DNS rebinding, and a cross-site
+ * browser GET can still trigger expensive local work even when SOP prevents
+ * the attacker from reading the response.
+ */
+export function requestRejection(headers = {}) {
+  const host = String(headers.host || '').toLowerCase();
+  if (!/^(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/.test(host)) {
+    return 'forbidden (unexpected Host)';
+  }
+
+  const fetchSite = String(headers['sec-fetch-site'] || '').toLowerCase();
+  if (fetchSite && fetchSite !== 'same-origin' && fetchSite !== 'none') {
+    return 'forbidden (cross-site request)';
+  }
+
+  const origin = String(headers.origin || '').toLowerCase();
+  if (origin) {
+    let parsed;
+    try {
+      parsed = new URL(origin);
+    } catch {
+      return 'forbidden (foreign Origin)';
+    }
+    // This server is plain HTTP and same-origin browser traffic necessarily
+    // carries the exact Host (including the ephemeral port). Merely accepting
+    // any loopback origin would allow another local web app to trigger work.
+    if (parsed.protocol !== 'http:' || parsed.host !== host) {
+      return 'forbidden (foreign Origin)';
+    }
+  }
+
+  return null;
+}
diff --git a/src/lib/dashboard/session-security.mjs b/src/lib/dashboard/session-security.mjs
new file mode 100644
index 00000000..d54c44b0
--- /dev/null
+++ b/src/lib/dashboard/session-security.mjs
@@ -0,0 +1,52 @@
+import os from 'node:os';
+import path from 'node:path';
+
+/** Transcript roots are used only for containment checks. */
+export const TRANSCRIPT_ROOTS = [
+  path.join(os.homedir(), '.claude', 'projects'),
+  path.join(os.homedir(), '.codex', 'sessions'),
+];
+
+/** Decode and validate an opaque session identifier. */
+export function parseSessionId(raw) {
+  let id;
+  try { id = decodeURIComponent(String(raw ?? '')); } catch { return null; }
+  if (id !== String(raw ?? '') && /%[0-9a-f]{2}/i.test(id)) return null;
+  if (!/^[A-Za-z0-9._-]{1,128}$/.test(id)) return null;
+  if (id === '.' || id === '..') return null;
+  return id;
+}
+
+/** Require the identifier to resolve to a direct child of a transcript root. */
+export function resolvesInsideRoot(root, id) {
+  const base = path.resolve(root);
+  const resolved = path.resolve(base, id);
+  return resolved !== base
+    && resolved.startsWith(base + path.sep)
+    && path.dirname(resolved) === base;
+}
+
+/** Copy and mask every string field in each transcript turn. */
+export function maskTurns(turns, maskFn) {
+  if (typeof maskFn !== 'function') {
+    throw new Error('no secret masker available — refusing to serve an unmasked transcript');
+  }
+  return (Array.isArray(turns) ? turns : []).map((turn) => maskObject(turn, maskFn));
+}
+
+/** Copy and mask every string field in transcript metadata. */
+export function maskMeta(meta, maskFn) {
+  if (typeof maskFn !== 'function') {
+    throw new Error('no secret masker available — refusing to serve unmasked metadata');
+  }
+  return meta && typeof meta === 'object' ? maskObject(meta, maskFn) : null;
+}
+
+function maskObject(value, maskFn) {
+  if (typeof value === 'string') return maskFn(value);
+  if (Array.isArray(value)) return value.map((item) => maskObject(item, maskFn));
+  if (!value || typeof value !== 'object') return value;
+  const out = {};
+  for (const [key, item] of Object.entries(value)) out[key] = maskObject(item, maskFn);
+  return out;
+}
diff --git a/src/lib/dashboard/styles.mjs b/src/lib/dashboard/styles.mjs
new file mode 100644
index 00000000..877eda98
--- /dev/null
+++ b/src/lib/dashboard/styles.mjs
@@ -0,0 +1,699 @@
+export const CSS = `
+:root{
+  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",sans-serif;
+  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Code",monospace;
+  --r:16px; --r-sm:11px;
+  /* One height for every scrollable list, so the page frame never changes
+     between Findings / Sessions / Transcript. The 420px subtrahend is the fixed
+     chrome above and below: header band + tab bar + sub-tabs + note + footer.
+     Without it the region ran to the viewport edge and the footer sat below the
+     fold, forcing a window scroll to read it — the thing in-place scrolling was
+     supposed to avoid. */
+  --listh:clamp(200px, calc(100vh - 420px), 520px);
+}
+:root[data-theme="dark"]{
+  --bg:#000000; --panel:#1c1c1e; --panel-2:#2c2c2e; --raised:#3a3a3c; --thumb:#48484a;
+  --ink:#f5f5f7; --ink-2:rgba(235,235,245,.64); --ink-dim:rgba(235,235,245,.38);
+  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
+  --accent:#0a84ff; --accent-soft:rgba(10,132,255,.16);
+  --ok:#30d158; --warn:#ff9f0a; --fail:#ff453a; --info:#98989d; --purple:#bf5af2;
+  --material:rgba(16,16,18,.72);
+  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -20px rgba(0,0,0,.9);
+}
+:root[data-theme="light"]{
+  --bg:#f5f5f7; --panel:#ffffff; --panel-2:#f2f2f7; --raised:#ffffff; --thumb:#ffffff;
+  --ink:#1d1d1f; --ink-2:rgba(60,60,67,.68); --ink-dim:rgba(60,60,67,.42);
+  --line:rgba(60,60,67,.12); --line-2:rgba(60,60,67,.22);
+  --accent:#007aff; --accent-soft:rgba(0,122,255,.12);
+  --ok:#34c759; --warn:#ff9500; --fail:#ff3b30; --info:#8e8e93; --purple:#af52de;
+  --material:rgba(249,249,251,.78);
+  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px -22px rgba(0,0,0,.22);
+}
+@media (prefers-color-scheme:light){
+  :root:not([data-theme]){ color-scheme:light; }
+}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{
+  background:var(--bg);
+  color:var(--ink);
+  font-family:var(--sans);
+  font-size:14px; line-height:1.5;
+  -webkit-font-smoothing:antialiased;
+  font-variant-numeric:tabular-nums;
+  min-height:100vh;
+  overflow-x:hidden;
+}
+.mono{font-family:var(--mono)}
+
+/* ── header band ── */
+.band{
+  position:relative;
+  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
+  padding:24px clamp(16px,4vw,40px) 14px;
+}
+.band-lead{display:flex; align-items:center; gap:14px; min-width:0}
+.mark{
+  width:40px; height:40px; flex:none; border-radius:10px;
+  background:linear-gradient(165deg,#5ac8fa,#007aff 55%,#0a5fd6);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(0,122,255,.55);
+  position:relative;
+}
+.mark::after{
+  content:""; position:absolute; inset:11px; border-radius:50%;
+  border:2.5px solid rgba(255,255,255,.92);
+  border-top-color:rgba(255,255,255,.35);
+  transform:rotate(-45deg);
+}
+.band-titles{min-width:0}
+.kit-name{
+  font-size:clamp(21px,2.6vw,28px); font-weight:700; letter-spacing:-.022em;
+  line-height:1.1; margin:0;
+}
+.kit-sub{color:var(--ink-dim); font-size:12px; display:flex; gap:8px; align-items:center; margin-top:3px}
+.kit-sub .sep{opacity:.5}
+.ver{color:var(--accent)}
+.band-verdict{
+  display:flex; align-items:center; gap:9px; margin-left:auto;
+  padding:7px 15px; border:1px solid var(--line); border-radius:100px;
+  background:var(--panel);
+}
+.verdict-text{font-size:13px; font-weight:500; letter-spacing:-.006em}
+.band-tools{display:flex; align-items:center; gap:10px}
+.pulse{
+  width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;
+  animation:pulse 2.4s ease-out infinite;
+}
+/* paused reads as paused: the pulse greys and stops, so "live" is never implied
+   by a still-animating dot over stale numbers. */
+.pulse.off{background:var(--ink-dim); animation:none}
+@keyframes pulse{
+  0%{box-shadow:0 0 0 0 var(--accent-soft)}
+  70%{box-shadow:0 0 0 7px transparent}
+  100%{box-shadow:0 0 0 0 transparent}
+}
+.upd{font-size:11.5px; color:var(--ink-dim); min-width:96px}
+
+/* ── poll control (governs EVERY tab, not just Usage) ── */
+.poll{
+  display:flex; align-items:center; gap:2px; padding:3px;
+  border:1px solid var(--line); border-radius:100px; background:var(--panel);
+}
+.poll button{
+  display:inline-flex; align-items:center; justify-content:center; gap:6px;
+  border:0; background:transparent; color:var(--ink-2);
+  font-family:inherit; font-size:12px; height:26px; padding:0 10px;
+  border-radius:100px; cursor:pointer; transition:background .15s ease, color .15s ease;
+}
+.poll button:hover:not(:disabled){background:var(--panel-2); color:var(--ink)}
+.poll button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+.poll button:disabled{opacity:.38; cursor:not-allowed}
+.poll .play{width:28px; padding:0}
+.poll .play.on{color:var(--accent)}
+.poll .ivl{min-width:56px; justify-content:space-between}
+.poll .caret{opacity:.5}
+.poll .refresh{width:28px; padding:0; font-size:14px}
+.poll .refresh.spin{animation:spin .6s linear}
+@keyframes spin{to{transform:rotate(360deg)}}
+.menu{
+  position:absolute; z-index:60; right:clamp(16px,4vw,40px); top:100%; margin-top:-6px;
+  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm);
+  box-shadow:var(--shadow); padding:5px; min-width:118px;
+}
+.menu[hidden]{display:none}
+.menu button{
+  display:flex; width:100%; justify-content:space-between; align-items:center;
+  font-family:var(--mono); font-size:12px; height:26px; padding:0 9px;
+  border-radius:7px; background:transparent; border:0; color:var(--ink-2); cursor:pointer;
+}
+.menu button:hover{background:var(--panel-2); color:var(--ink)}
+.menu button.sel{color:var(--accent)}
+.menu .sep{height:1px; background:var(--line); margin:4px 2px}
+.toggle{
+  display:inline-flex; align-items:center; justify-content:center;
+  width:34px; height:34px; padding:0;
+  color:var(--ink-2); background:var(--panel);
+  border:1px solid var(--line); border-radius:50%; cursor:pointer;
+  transition:border-color .2s ease, color .2s ease, background .2s ease;
+}
+.toggle:hover{border-color:var(--line-2); color:var(--accent); background:var(--panel-2)}
+.toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+.toggle .icon{display:inline-flex}
+.toggle .icon svg{width:16px; height:16px; display:block}
+
+/* ── sticky frosted segmented control ── */
+.tabbar{
+  position:sticky; top:0; z-index:20;
+  display:flex; padding:8px clamp(16px,4vw,40px) 10px;
+  background:var(--material);
+  -webkit-backdrop-filter:saturate(180%) blur(20px);
+  backdrop-filter:saturate(180%) blur(20px);
+  border-bottom:1px solid var(--line);
+}
+.seg{
+  position:relative; display:inline-flex; gap:2px; padding:3px;
+  border-radius:12px; background:var(--panel-2);
+  max-width:100%; overflow-x:auto; scrollbar-width:none;
+}
+.seg::-webkit-scrollbar{display:none}
+.seg-btn{
+  position:relative; z-index:1; border:0; background:transparent;
+  color:var(--ink-2); font-family:inherit; font-size:13px; font-weight:500;
+  letter-spacing:-.006em; padding:6px 14px; border-radius:9px; cursor:pointer;
+  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
+  transition:color .2s ease;
+}
+.seg-btn[aria-selected="true"]{color:var(--ink); font-weight:600}
+.seg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+.seg-thumb{
+  position:absolute; top:3px; left:3px; height:calc(100% - 6px); width:0;
+  border-radius:9px; background:var(--thumb);
+  box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);
+  transition:left .25s cubic-bezier(.3,.7,.3,1), width .25s cubic-bezier(.3,.7,.3,1);
+}
+.badge{
+  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
+  background:var(--fail); color:#fff; font-size:10.5px; font-weight:600;
+  display:inline-flex; align-items:center; justify-content:center; line-height:1;
+}
+.badge[data-tone="warn"]{background:var(--warn)}
+.badge[hidden]{display:none}
+
+/* ── layout ── */
+.wrap{padding:clamp(16px,4vw,40px); max-width:1180px; margin:0 auto}
+.panel{animation:fade .25s ease}
+.panel[hidden]{display:none}
+@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
+
+/* ── triage summary + update notice (Overview) ── */
+.summary{
+  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
+  margin-bottom:14px; font-size:12.5px;
+}
+.pill{
+  display:inline-flex; align-items:center; gap:7px;
+  padding:5px 12px; border-radius:100px;
+  border:1px solid var(--line); background:var(--panel);
+  color:var(--ink-2); letter-spacing:-.006em;
+}
+.pill .dot{width:8px; height:8px}
+.pill b{color:var(--ink); font-weight:600}
+.pill[data-level="fail"]{border-color:color-mix(in srgb,var(--fail) 50%,transparent)}
+.pill[data-level="warn"]{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
+.pill[data-tone="calm"]{opacity:.72}
+.notice{
+  display:flex; align-items:baseline; gap:9px;
+  padding:10px 14px; margin-bottom:14px;
+  border-radius:var(--r-sm); background:var(--accent-soft);
+  color:var(--ink-2); font-size:13px;
+}
+.notice .up{color:var(--accent); font-weight:700}
+.notice code{font-family:var(--mono); color:var(--ink); font-size:12px}
+.notice b{color:var(--ink); font-weight:600}
+.allclear{
+  display:flex; align-items:center; gap:10px;
+  padding:20px 22px; margin-bottom:6px;
+  border-radius:var(--r); background:var(--panel); border:1px solid var(--line);
+  box-shadow:var(--shadow); color:var(--ink-2); font-size:14px;
+}
+
+/* ── cards ── */
+.grid{
+  display:grid; gap:14px;
+  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
+}
+.card{
+  background:var(--panel); border:1px solid var(--line);
+  border-radius:var(--r); padding:16px 17px 15px;
+  box-shadow:var(--shadow);
+  opacity:0; transform:translateY(6px);
+  animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards;
+  overflow:hidden;
+}
+@keyframes rise{to{opacity:1; transform:none}}
+.card-top{display:flex; align-items:center; gap:10px; margin-bottom:9px}
+.dot{
+  width:10px; height:10px; border-radius:50%; flex:none;
+  background:var(--lvl,var(--info));
+  box-shadow:0 0 0 3px color-mix(in srgb,var(--lvl,var(--info)) 20%, transparent);
+}
+.card[data-level="ok"]{--lvl:var(--ok)}
+.card[data-level="warn"]{--lvl:var(--warn)}
+.card[data-level="fail"]{--lvl:var(--fail)}
+.card[data-level="info"]{--lvl:var(--info)}
+.card[data-level="unknown"]{--lvl:var(--ink-dim)}
+.dot[data-level="ok"]{--lvl:var(--ok)}
+.dot[data-level="warn"]{--lvl:var(--warn)}
+.dot[data-level="fail"]{--lvl:var(--fail)}
+.dot[data-level="info"]{--lvl:var(--info)}
+.dot[data-level="unknown"]{--lvl:var(--ink-dim)}
+.card-name{font-size:15px; font-weight:600; letter-spacing:-.014em; color:var(--ink)}
+.card-level{
+  margin-left:auto; font-size:10.5px; font-weight:600; letter-spacing:.1em;
+  text-transform:uppercase; color:var(--lvl,var(--info));
+}
+.card-count{
+  margin-left:auto; font-size:11px; color:var(--ink-dim);
+  border:1px solid var(--line); border-radius:100px; padding:1px 8px;
+}
+.card-count + .card-level{margin-left:8px}
+.rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
+.rows .row{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.5}
+.row-dot{
+  width:7px; height:7px; border-radius:50%; flex:none; margin-top:6px;
+  background:var(--lvl,var(--info));
+}
+.row[data-level="ok"]{--lvl:var(--ok)}
+.row[data-level="warn"]{--lvl:var(--warn)}
+.row[data-level="fail"]{--lvl:var(--fail)}
+.row[data-level="info"]{--lvl:var(--info)}
+.row[data-level="unknown"]{--lvl:var(--ink-dim)}
+.row-msg{min-width:0; word-break:break-word}
+.row-fix{display:block; margin-top:3px; color:var(--ink-dim); font-size:12px}
+.row-fix .arrow{color:var(--accent); margin-right:5px}
+.row-fix code{font-family:var(--mono); color:var(--ink-2); font-size:11.5px}
+
+/* ── overview status map ── */
+.subhead{
+  margin:24px 0 10px; color:var(--ink-dim); font-size:12px; font-weight:600;
+  letter-spacing:.07em; text-transform:uppercase;
+}
+.statusmap{
+  display:grid; gap:8px;
+  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
+}
+.tile{
+  display:flex; align-items:center; gap:9px; text-align:left;
+  padding:10px 13px; border-radius:var(--r-sm);
+  background:var(--panel); border:1px solid var(--line);
+  color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:500;
+  letter-spacing:-.006em; cursor:pointer;
+  transition:background .15s ease, border-color .15s ease;
+}
+.tile:hover{background:var(--panel-2); border-color:var(--line-2)}
+.tile:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+.tile .dot{width:8px; height:8px}
+.tile .tile-go{margin-left:auto; color:var(--ink-dim); font-weight:400}
+
+/* ── strips (routing / models / learning) ── */
+.strip{
+  margin-top:22px; padding:18px clamp(14px,3vw,24px);
+  background:var(--panel); border:1px solid var(--line);
+  border-radius:var(--r); box-shadow:var(--shadow);
+}
+.strip-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
+.strip-title{font-size:16px; font-weight:600; letter-spacing:-.014em; margin:0}
+.strip-note{color:var(--ink-dim); font-size:12px}
+.route-matrix{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
+.r-row{display:grid; grid-template-columns:minmax(140px,1.4fr) 84px minmax(120px,1.4fr) minmax(90px,1fr); gap:10px; align-items:center; padding:8px 14px; background:var(--panel)}
+.r-row:hover{background:var(--panel-2)}
+.r-act{color:var(--ink); font-size:12.5px; display:flex; align-items:center; gap:6px}
+.r-host{font-size:11px; font-weight:600; text-align:center; padding:2px 0; border-radius:100px; border:1px solid var(--line-2)}
+.r-host-claude{color:#ff9f0a; background:rgba(255,159,10,.12); border-color:rgba(255,159,10,.3)}
+.r-host-codex{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
+.r-host[data-primary]{box-shadow:inset 0 0 0 1.5px var(--accent); font-weight:700}
+.r-model{color:var(--ink-2); font-size:11.5px}
+.r-meta{display:flex; align-items:center; gap:8px; justify-content:flex-end; font-size:10.5px}
+.r-esc{color:var(--ink-dim)}
+.r-src{text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); font-size:9.5px}
+.r-src-user{color:var(--accent)}
+.r-tag{font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); border:1px solid var(--accent-soft); border-radius:3px; padding:0 3px}
+@media(max-width:560px){.r-row{grid-template-columns:1fr 70px} .r-model,.r-meta{grid-column:1/-1; justify-content:flex-start}}
+.model-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
+.m-row{display:grid; grid-template-columns:84px 1fr auto; gap:12px; align-items:center; padding:9px 14px; background:var(--panel)}
+.m-row:hover{background:var(--panel-2)}
+.m-model{color:var(--ink); font-size:12.5px}
+.m-n{color:var(--ink-dim); font-size:11.5px}
+.spark-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
+.spark{margin:0}
+.spark figcaption{color:var(--ink-dim); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
+.spark-svg{width:100%; overflow-x:auto}
+.spark-svg svg{display:block; width:100%; height:auto}
+
+/* ── Usage tab (ADR-0009) ───────────────────────────────────────────────────
+   Same Apple system motif as the rest of the panel: hairline-separated rows,
+   soft-shadowed strips, systemBlue for magnitude and systemPurple as the second
+   series. Nothing here fetches; every figure below is rendered from /api/usage. */
+.usage-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
+.subseg{gap:2px}
+.subseg .seg-btn[aria-selected="true"]{
+  background:var(--thumb); box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);
+}
+.seg-n{opacity:.6; font-size:11px}
+.segbadge{
+  min-width:16px; height:16px; padding:0 5px; border-radius:8px; background:var(--warn);
+  color:#000; font-size:10.5px; font-weight:700; display:inline-flex;
+  align-items:center; justify-content:center;
+}
+.segbadge[hidden]{display:none}
+.filters{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
+.chipf{
+  font-size:12px; padding:4px 11px; border-radius:100px; border:1px solid var(--line);
+  background:var(--panel); color:var(--ink-2); cursor:pointer; font-family:inherit;
+}
+.chipf.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
+.chipf:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+.view[hidden]{display:none}
+
+/* hero KPIs */
+.hero{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); margin-bottom:14px}
+.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--shadow)}
+.kpi .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim)}
+.kpi .v{font-size:27px; font-weight:700; letter-spacing:-.028em; margin-top:5px; line-height:1.05}
+.kpi .d{font-size:11.5px; color:var(--ink-2); margin-top:5px}
+/* A parenthetical qualifier belongs on its own line, not wrapped mid-phrase.
+   "297h summed (sessions" / "overlap)" split the caveat across the break and
+   made the number harder to read than no caveat at all. */
+.kpi .d-note{display:block; color:var(--ink-dim); font-size:11px; margin-top:2px}
+.kpi.accent .v{color:var(--accent)}
+.kpi.warnv .v{color:var(--warn)}
+.note{
+  display:flex; gap:9px; padding:10px 14px; margin-bottom:16px; border-radius:var(--r-sm);
+  background:var(--accent-soft); color:var(--ink-2); font-size:12.5px; align-items:baseline;
+}
+.note b{color:var(--ink)}
+.note .i{color:var(--accent); font-weight:700}
+.sh{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
+.sh h2{font-size:15px; font-weight:600; letter-spacing:-.014em; margin:0}
+.sh .n{color:var(--ink-dim); font-size:11.5px}
+/* A qualifier that must not share a line with the caption it qualifies: as an
+   inline tail it wrapped mid-phrase, leaving "· 4" dangling at the end of one
+   line and "dropped/errored turns excluded" orphaned on the next — the count
+   read as part of the caption rather than as its own fact. */
+.sh .n-sub{display:block}
+.sh .n-sub:empty{display:none}
+.two{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
+#panel-usage .strip{margin-top:0; margin-bottom:16px}
+
+/* day bars */
+.days{display:flex; gap:5px; align-items:flex-end; height:118px}
+.daybar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
+.db-fill{
+  width:100%; border-radius:5px 5px 2px 2px;
+  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent));
+  transition:filter .15s ease;
+}
+.daybar:hover .db-fill{filter:brightness(1.35)}
+.db-lab{font-family:var(--mono); font-size:9.5px; color:var(--ink-dim); margin-top:6px}
+
+/* punchcard */
+.pc-row{display:flex; align-items:center; gap:3px; margin-bottom:3px}
+.pc-day{font-family:var(--mono); font-size:10px; color:var(--ink-dim); width:28px; flex:none}
+.pc{flex:1; height:13px; border-radius:3px; background:color-mix(in srgb,var(--accent) calc(var(--v)*100%),var(--panel-2))}
+.pc-axis{display:flex; gap:3px; margin-left:31px; margin-top:5px}
+.pc-axis span{flex:1; font-family:var(--mono); font-size:8.5px; color:var(--ink-dim); text-align:center}
+
+/* magnitude rows (models / projects / categories) */
+.mrow{
+  display:grid; grid-template-columns:minmax(120px,1.5fr) 2fr 62px minmax(96px,auto);
+  gap:11px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line);
+}
+.mrow:last-child{border-bottom:0}
+.mname{font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+.mbar{height:7px; border-radius:4px; background:var(--panel-2); overflow:hidden}
+.mbar i{display:block; height:100%; border-radius:4px; background:var(--accent)}
+.mbar i.alt{background:var(--purple)}
+.mval{font-size:12.5px; text-align:right; color:var(--ink)}
+.msub{font-size:10.5px; color:var(--ink-dim); text-align:right}
+.crow{
+  display:grid; grid-template-columns:minmax(140px,1.4fr) 2fr 62px minmax(128px,auto);
+  gap:11px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line);
+  cursor:pointer; font-family:inherit; text-align:left; background:transparent; border-left:0; border-right:0; border-top:0; width:100%; color:inherit;
+}
+.crow:last-child{border-bottom:0}
+.crow:hover{background:var(--panel-2)}
+.crow:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
+.crow.uncl{opacity:.6}
+.c-name{font-size:12.5px; display:flex; align-items:center; gap:7px; color:var(--ink)}
+.conf{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; display:inline-block}
+
+/* provider split */
+.psplit{display:flex; gap:10px; flex-wrap:wrap}
+.pcard{flex:1; min-width:190px; border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; background:var(--panel-2)}
+.pcard .ph{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:9px}
+.pdot{width:9px; height:9px; border-radius:50%}
+.pdot.c{background:var(--warn)}
+.pdot.x{background:var(--accent)}
+.pcard .pv{font-size:21px; font-weight:700; letter-spacing:-.02em}
+.pcard .pl{font-size:11.5px; color:var(--ink-dim); margin-top:4px}
+.pcard.idle{opacity:.55}
+.tokbar{display:flex; height:9px; border-radius:5px; overflow:hidden; margin-top:11px}
+.tokbar i{display:block; height:100%}
+.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; font-size:11px; color:var(--ink-dim)}
+.legend b{color:var(--ink); font-weight:600}
+.lg{display:inline-flex; align-items:center; gap:5px}
+.lg i{width:8px; height:8px; border-radius:2px; display:inline-block}
+
+/* findings */
+.ins-grid{display:grid; gap:11px; margin-bottom:11px}
+/* Findings scrolls in place too, so the window keeps a fixed frame across all
+   three list views instead of each one growing the document to a different
+   height. Padding-right keeps the scrollbar off the card border. */
+#u-insights{
+  max-height:var(--listh);
+  min-height:200px;
+  overflow-y:auto;
+  overscroll-behavior:contain;
+  padding-right:4px;
+  scrollbar-width:thin;
+  scrollbar-color:var(--thumb) transparent;
+}
+#u-insights::-webkit-scrollbar{width:10px}
+#u-insights::-webkit-scrollbar-thumb{background:var(--thumb); border-radius:6px; border:3px solid transparent; background-clip:content-box}
+#u-insights::-webkit-scrollbar-track{background:transparent}
+
+.icard{
+  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--sv,var(--accent));
+  border-radius:var(--r-sm); padding:13px 15px; box-shadow:var(--shadow);
+}
+.icard[data-sev="warn"]{--sv:var(--warn)}
+.icard[data-sev="info"]{--sv:var(--accent)}
+.icard[data-sev="ok"]{--sv:var(--ok)}
+.i-top{display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap}
+.i-n{
+  width:19px; height:19px; border-radius:50%; background:var(--sv); color:#000;
+  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none;
+}
+.i-title{font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--ink)}
+.i-kind{font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:1px 7px}
+.i-imp{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--sv); white-space:nowrap}
+.i-imp.soft{color:var(--ink-dim); font-weight:400; font-size:11px}
+.i-find{margin:0 0 5px; font-size:12.5px; color:var(--ink-2); line-height:1.52}
+.i-ev{margin:0 0 9px; font-size:11.5px; color:var(--ink-dim); line-height:1.5}
+.i-act{display:flex; gap:8px; font-size:12.5px; color:var(--ink); align-items:baseline; border-top:1px solid var(--line); padding-top:9px}
+.i-arrow{color:var(--sv); font-weight:700}
+.i-cmd{font-family:var(--mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 6px; white-space:nowrap}
+.i-src{margin-top:9px; border-top:1px solid var(--line); padding-top:8px}
+.i-src summary{font-size:11.5px; color:var(--ink-dim); cursor:pointer; list-style:none}
+.i-src summary::-webkit-details-marker{display:none}
+.i-src summary::before{content:"\\25B8 "; color:var(--accent)}
+.i-src[open] summary::before{content:"\\25BE "}
+.i-src ul{margin:8px 0 0; padding-left:16px}
+.i-src li{font-size:11.5px; color:var(--ink-2); margin-bottom:4px}
+.i-src a{color:var(--accent); text-decoration:none}
+.i-src a:hover{text-decoration:underline}
+
+/* tiered project tree */
+.ptree{display:flex; flex-direction:column; gap:8px}
+.pgroup{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--panel)}
+.phead{
+  display:grid; grid-template-columns:16px minmax(120px,1.1fr) minmax(150px,1.6fr) 64px 44px 58px 66px;
+  gap:10px; align-items:center; width:100%; padding:11px 13px; background:var(--panel-2);
+  border:0; color:var(--ink); font-family:inherit; font-size:13px; cursor:pointer; text-align:left;
+}
+.phead:hover{background:var(--raised)}
+.phead:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
+.chev{color:var(--ink-dim); transition:transform .18s ease; display:inline-block}
+.pgroup[data-open] .chev{transform:rotate(90deg); color:var(--accent)}
+.pname{font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+.pchips{display:flex; gap:5px; flex-wrap:wrap; overflow:hidden}
+.pchip{font-size:10px; color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:1px 7px; white-space:nowrap}
+.pchip b{color:var(--ink-2); font-weight:600}
+.pn{font-size:11.5px; color:var(--ink-dim); text-align:right}
+.pcost{font-size:13px; font-weight:600; text-align:right; color:var(--ink)}
+.pbody{display:none; background:var(--line); gap:1px; flex-direction:column}
+/* Each expanded project scrolls INSIDE its own group. A project with 108
+   sessions otherwise pushes every project below it off-screen and forces the
+   whole window to scroll, so you lose the group headers you were comparing. */
+.pgroup[data-open] .pbody{
+  display:flex;
+  max-height:var(--listh);
+  overflow-y:auto;
+  overscroll-behavior:contain;   /* reaching the end must not scroll the page */
+  scrollbar-width:thin;
+  scrollbar-color:var(--thumb) transparent;
+}
+.smore{background:var(--panel); padding:9px 13px; font-size:11.5px; color:var(--ink-dim)}
+.smore button{background:transparent; border:0; color:var(--accent); cursor:pointer; font-family:inherit; font-size:11.5px; padding:0}
+.cat{
+  font-size:10px; border-radius:100px; padding:1px 8px; white-space:nowrap; overflow:hidden;
+  text-overflow:ellipsis; border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
+  color:var(--ok); background:color-mix(in srgb,var(--ok) 11%,transparent);
+}
+.cat[data-w="0"]{
+  border-color:color-mix(in srgb,var(--warn) 30%,transparent);
+  color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent);
+}
+.cat.uncl{border-color:var(--line); color:var(--ink-dim); background:transparent}
+
+/* session rows */
+/* The LEADING 18px column is the detail expander. It is deliberately first, so
+   the caret sits outside the row's content and reads as an affordance on the
+   row rather than on any one cell. Both grids below must carry it — a column
+   added here and forgotten in the breakpoint shifts every mobile cell by one,
+   which is silent: the row still renders, it just renders the wrong data under
+   each heading. */
+.srow{
+  display:grid; grid-template-columns:18px 58px minmax(150px,2.1fr) minmax(90px,1fr) 106px 46px 60px 62px 68px 20px;
+  gap:10px; align-items:center; padding:9px 13px; background:var(--panel); font-size:12.5px; cursor:pointer;
+}
+.srow:hover{background:var(--panel-2)}
+.s-host{font-size:10px; font-weight:600; text-align:center; padding:2px 0; border-radius:100px; border:1px solid var(--line-2)}
+.s-claude{color:var(--warn); background:color-mix(in srgb,var(--warn) 12%,transparent); border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
+.s-codex{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
+.s-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+.s-proj,.s-when,.s-dur,.s-turns,.s-tok{color:var(--ink-2); font-size:11.5px}
+.s-cost{text-align:right; color:var(--ink); font-size:12px}
+.s-tx{background:transparent; border:0; color:var(--ink-dim); font-size:14px; cursor:pointer; padding:0; border-radius:5px}
+.s-tx:hover{color:var(--accent); background:var(--accent-soft)}
+
+/* row expander — a real <button>, so it is tab-reachable and announced. The
+   chevron rotation reuses the .phead .chev idiom rather than inventing a
+   second vocabulary for "this opens". */
+.s-exp{
+  background:transparent; border:0; color:var(--ink-dim); font-size:13px; line-height:1; cursor:pointer;
+  padding:0; border-radius:4px; transition:transform .18s ease, color .18s ease; display:inline-block;
+}
+.s-exp:hover{color:var(--accent)}
+.s-exp:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+.s-exp[aria-expanded="true"]{transform:rotate(90deg); color:var(--accent)}
+/* ADR-0009 §4b — the repo answers "which project", this answers "which branch
+   of it". Rendered only when there IS one, so its presence is the signal. */
+.s-wt{
+  margin-left:7px; font-size:9.5px; font-family:var(--mono); color:var(--purple); white-space:nowrap;
+  border:1px solid color-mix(in srgb,var(--purple) 30%,transparent);
+  background:color-mix(in srgb,var(--purple) 10%,transparent); border-radius:100px; padding:1px 6px;
+}
+/* The detail strip is a SIBLING of .srow inside .pbody, not a grid child of
+   it — so it spans the full width instead of joining the column layout. No
+   display is set here: the UA's [hidden] rule must keep working. */
+.sdetail{background:var(--panel-2); padding:9px 13px 11px 41px; border-top:1px solid var(--line); font-size:11.5px}
+.sdetail[hidden]{display:none}
+/* Label and value are INLINE-level, not grid or flex tracks, and that is a
+   readability decision rather than a layout one. This markup is divs and
+   spans, not a real <dl> — so block-level cells would hand a screen reader two
+   unrelated blocks with nothing pairing them, and split the label from its
+   value for copy-paste and for anything else reading the rendered text. The
+   classifier's reasoning is one statement and should survive as one. The
+   fixed-width inline-block keeps the column alignment a grid would have given,
+   so nothing is lost visually. */
+.sd-line{padding:2px 0}
+.sd-k{
+  display:inline-block; width:74px; vertical-align:top; color:var(--ink-dim);
+  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
+}
+.sd-v{display:inline-block; vertical-align:top; max-width:calc(100% - 84px); color:var(--ink-2); word-break:break-word}
+.sd-conf{color:var(--ink-dim)}
+
+/* transcript reader */
+/* The crumb stays put while the turns scroll beneath it — on a 2,216-turn
+   session the header is exactly what you lose first when the page scrolls. */
+.tcrumb{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); margin-bottom:14px; flex-wrap:wrap}
+#u-turns{
+  max-height:var(--listh);
+  min-height:200px;
+  overflow-y:auto;
+  overscroll-behavior:contain;
+  scrollbar-width:thin;
+  scrollbar-color:var(--thumb) transparent;
+}
+/* WebKit needs its own scrollbar rules; keep them quiet and on-motif. */
+#u-turns::-webkit-scrollbar,.pgroup[data-open] .pbody::-webkit-scrollbar{width:10px}
+#u-turns::-webkit-scrollbar-thumb,.pgroup[data-open] .pbody::-webkit-scrollbar-thumb{
+  background:var(--thumb); border-radius:6px; border:3px solid transparent; background-clip:content-box;
+}
+#u-turns::-webkit-scrollbar-track,.pgroup[data-open] .pbody::-webkit-scrollbar-track{background:transparent}
+@media (max-width:700px){ :root{--listh:clamp(180px, calc(100vh - 340px), 460px)} }
+.tcrumb button{
+  background:var(--panel); border:1px solid var(--line); color:var(--ink-2); border-radius:100px;
+  padding:4px 12px; font-family:inherit; font-size:12px; cursor:pointer;
+}
+.tcrumb button:hover{border-color:var(--line-2); color:var(--ink)}
+.turn{display:grid; grid-template-columns:78px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
+.turn:last-child{border-bottom:0}
+.t-who{font-family:var(--mono); font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em}
+.t-user .t-who{color:var(--accent)}
+/* Tool results and harness context ride the user ROLE in the Messages API but
+   are not the person — purple ties them visually to the tool chips, and the
+   accent stays reserved for turns the human actually typed. */
+.t-tool .t-who{color:var(--purple)}
+/* Harness sentinel markup, restyled (fmtHarness): a slash command renders as
+   a chip, and system-reminder / caveat / stdout blocks get a labelled quiet
+   panel — the wrapped content stays verbatim, only the XML wrappers go. */
+.h-cmd{
+  font-family:var(--mono); font-size:12px; color:var(--accent);
+  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
+  background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:5px; padding:1px 7px;
+}
+.h-note{display:block; border-left:2px solid var(--line-2); padding:5px 10px; margin:5px 0; color:var(--ink-dim)}
+.h-tag{
+  display:block; font-style:normal; font-family:var(--mono); font-size:9.5px;
+  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); opacity:.8; margin-bottom:2px;
+}
+.t-meta{display:block; font-size:9.5px; margin-top:3px; text-transform:none; letter-spacing:0}
+.t-body{font-size:13px; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; min-width:0}
+.t-user .t-body{color:var(--ink)}
+.chips{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap}
+.tool{
+  font-family:var(--mono); font-size:10px; color:var(--purple);
+  border:1px solid color-mix(in srgb,var(--purple) 32%,transparent);
+  background:color-mix(in srgb,var(--purple) 11%,transparent); border-radius:5px; padding:2px 7px;
+}
+/* click-to-reveal, never a download: the bytes are already the user's, the risk
+   is amplifying them into a screenshare (ADR-0009 §8). */
+.masked{background:var(--fail); color:transparent; border-radius:3px; cursor:pointer; opacity:.75; padding:0 3px}
+.masked:hover,.masked.shown{color:#fff; opacity:1}
+.masked.shown{background:transparent; box-shadow:inset 0 0 0 1px var(--fail); color:var(--ink)}
+/* Same "content was withheld" family as .masked, deliberately quieter: masking
+   is a security measure, truncation is a designed limit. An alarm colour here
+   would teach the reader to distrust a turn that is merely long. */
+.t-trunc{
+  display:block; margin-top:3px; font-size:9px; line-height:1.35; text-transform:none; letter-spacing:0;
+  color:var(--ink-dim); border:1px solid var(--line-2); border-radius:4px; padding:1px 4px;
+  background:var(--panel-2); cursor:help;
+}
+
+@media(max-width:720px){
+  /* Four data columns → five, because .srow above gained a LEADING one.
+     .cat joins the hidden set at the same time, and that is a FIX, not a
+     side-effect: the shipped rule declared four columns while the row still
+     rendered five visible cells, so .cat sat in the cost column, $-figures sat
+     in the 20px glyph column and were clipped, and the transcript glyph wrapped
+     onto a line of its own. Five columns for five cells is what makes the
+     arithmetic close. The category is still reachable — it is on the project
+     header chips and on the Scorecard's category rows. */
+  .srow{grid-template-columns:18px 58px 1fr 68px 20px}
+  .srow .s-proj,.srow .s-when,.srow .s-dur,.srow .s-turns,.srow .s-tok,.srow .cat{display:none}
+  .phead{grid-template-columns:16px 1fr 58px 66px}
+  .phead .pchips,.phead .p-h,.phead .p-tok{display:none}
+}
+
+/* ── footer ── */
+.foot{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-dim); font-size:12px}
+
+.empty{color:var(--ink-dim); font-size:13px; padding:26px 4px}
+
+@media (max-width:560px){
+  .band{gap:12px}
+  .band-verdict{margin-left:0; order:3; width:100%; justify-content:center}
+}
+@media (prefers-reduced-motion:reduce){
+  *{animation:none !important; transition:none !important}
+  .card{opacity:1; transform:none}
+}
+`;
+
+// ── Client script ────────────────────────────────────────────────────────────
+// No backticks and no ${ } anywhere below — this whole string is embedded inside
+// a server-side template literal, so those tokens would be misparsed. Plain
+// string concatenation only.
diff --git a/src/lib/heal.mjs b/src/lib/heal.mjs
index b632b289..929aac2b 100644
--- a/src/lib/heal.mjs
+++ b/src/lib/heal.mjs
@@ -7,7 +7,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { run } from './exec.mjs';
 import { rufloRoot, aqeRoot } from './paths.mjs';
-import { agentdbLocations, bsq3IsNative, bsq3Root, deriveBsq3Spec, rufloMemoryContexts, aidefencePresent } from './natives.mjs';
+import { agentdbLocations, bsq3IsNative, bsq3Root, deriveBsq3Spec, selfSpecConflicts, rufloMemoryContexts, aidefencePresent } from './natives.mjs';
 import { KIT_PKG } from './versions.mjs';
 import { scanRvf, quarantine } from './rvf.mjs';
 import { INSTALL_SPEC, INSTALL_ARGS, NIGHTLY_LABEL as RB_NIGHTLY_LABEL, nightlyAgentPlist as rbNightlyPlist, present as rbPresent, latestVersion as rbLatest, recordInstalledRelease as rbRecord } from './ruvnet-brain.mjs';
@@ -62,7 +62,21 @@ export async function ensureNativeBsq3(dir, { runner = run } = {}) {
     // EOVERRIDE-rejected in a tree that pins better-sqlite3 (ruflo root pins
     // 12.9.0, @claude-flow/cli pins ^12.9.0) — verified live. The derived spec
     // also raises stale 12.x pins to Node 26's first supported release.
-    const installed = await npmInstallInto(dir, `better-sqlite3@${deriveBsq3Spec(dir)}`, runner);
+    const spec = deriveBsq3Spec(dir);
+    // The bump above only rewrites the value ak passes to `npm install` — it
+    // doesn't touch package.json. When `dir` declares better-sqlite3 itself
+    // (overrides/optionalDependencies/dependencies), npm requires those
+    // self-declared fields to agree with each other AND with the explicit
+    // install spec, or it's EOVERRIDE — verified live: bumping only the
+    // install spec (leaving `overrides: ^12.9.0` in place) failed with
+    // "conflicts with direct dependency"; bumping `overrides` alone then
+    // failed with "Override ... conflicts with direct dependency" against
+    // the still-stale `optionalDependencies`. All conflicting fields have to
+    // move together before the install runs.
+    for (const field of selfSpecConflicts(dir, spec)) {
+      await runner('npm', ['pkg', 'set', `${field}.better-sqlite3=${spec}`], { cwd: dir, timeout: 30_000 });
+    }
+    const installed = await npmInstallInto(dir, `better-sqlite3@${spec}`, runner);
     if (bsq3IsNative(dir)) return { ok: true, how: 'native installed' };
     pkgRoot = bsq3Root(dir);
     if (!pkgRoot) {
diff --git a/src/lib/live/claude-adapter.mjs b/src/lib/live/claude-adapter.mjs
new file mode 100644
index 00000000..bb0a13a2
--- /dev/null
+++ b/src/lib/live/claude-adapter.mjs
@@ -0,0 +1,65 @@
+import { createLiveEvent } from './event-schema.mjs';
+import { classifyToolName } from './tool-classify.mjs';
+
+const artifact = (value) => typeof value === 'string'
+  ? value.replaceAll('\\', '/').split('/').pop()?.slice(0, 256) ?? null : null;
+
+/** Translate one Claude transcript record into privacy-safe metadata events. */
+export function adaptClaudeRecord(record, context = {}) {
+  if (!record || typeof record !== 'object') return [];
+  const sessionId = record.sessionId ?? context.sessionId;
+  if (typeof sessionId !== 'string' || !sessionId) return [];
+  const actorId = record.agentId ?? context.agentId ?? sessionId;
+  const isSidechain = record.isSidechain === true || actorId !== sessionId;
+  const base = {
+    sessionId, host: 'claude', surface: 'native',
+    project: context.project, observedAt: context.observedAt,
+    sourceTimestamp: record.timestamp,
+    actor: {
+      id: actorId, kind: isSidechain ? 'subagent' : 'session',
+      role: isSidechain ? 'worker' : 'primary',
+      provider: record.provider ?? context.provider,
+      model: record.message?.model ?? context.model,
+    },
+    source: {
+      adapter: 'claude-transcript', artifact: artifact(context.artifact),
+      confidence: isSidechain && !record.agentId ? 'inferred' : 'observed',
+      fields: {
+        project: context.project ? 'observed' : null,
+        provider: record.provider || context.provider ? 'observed' : null,
+        model: record.message?.model || context.model ? 'observed' : null,
+        status: 'observed',
+        hierarchy: isSidechain ? (record.agentId ? 'observed' : 'inferred') : 'observed',
+      },
+    },
+  };
+  const out = [];
+  if (context.bootstrap && (record.type === 'user' || record.type === 'assistant')) {
+    out.push(createLiveEvent({ ...base, action: 'session.discovered', status: 'unknown' }));
+    return out;
+  } else if (record.type === 'user' || record.type === 'assistant') {
+    out.push(createLiveEvent({
+      ...base, action: record.type === 'user' ? 'session.input' : 'agent.output',
+      status: 'running',
+    }));
+  }
+  const blocks = Array.isArray(record.message?.content) ? record.message.content : [];
+  for (const block of blocks) {
+    if (block?.type !== 'tool_use' || typeof block.id !== 'string') continue;
+    const typed = classifyToolName(block.name);
+    out.push(createLiveEvent({
+      ...base, action: 'tool.started', status: 'running',
+      target: { id: block.id, kind: typed.kind, label: typed.category },
+      attributes: { toolCategory: typed.category, toolName: block.name },
+    }));
+  }
+  for (const block of blocks) {
+    if (block?.type !== 'tool_result' || typeof block.tool_use_id !== 'string') continue;
+    out.push(createLiveEvent({
+      ...base, action: 'tool.completed',
+      status: block.is_error === true ? 'failed' : 'completed',
+      target: { id: block.tool_use_id, kind: 'tool' },
+    }));
+  }
+  return out;
+}
diff --git a/src/lib/live/codex-adapter.mjs b/src/lib/live/codex-adapter.mjs
new file mode 100644
index 00000000..dd4fcf7f
--- /dev/null
+++ b/src/lib/live/codex-adapter.mjs
@@ -0,0 +1,151 @@
+import { createLiveEvent } from './event-schema.mjs';
+import { classifyToolName } from './tool-classify.mjs';
+
+const artifact = (value) => typeof value === 'string'
+  ? value.replaceAll('\\', '/').split('/').pop()?.slice(0, 256) ?? null : null;
+
+export function adaptCodexRecord(record, context = {}) {
+  if (!record || typeof record !== 'object') return [];
+  const payload = record.payload && typeof record.payload === 'object' ? record.payload : {};
+  const meta = record.type === 'session_meta' ? payload : context.meta ?? {};
+  const sessionId = meta.id ?? context.sessionId;
+  if (typeof sessionId !== 'string' || !sessionId) return [];
+  const subagent = meta.thread_source === 'subagent' || context.threadSource === 'subagent';
+  const base = {
+    sessionId, parentSessionId: context.parentSessionId,
+    host: 'codex', surface: 'native', project: context.project,
+    observedAt: context.observedAt, sourceTimestamp: record.timestamp,
+      actor: {
+        id: sessionId, kind: subagent ? 'subagent' : 'session',
+      label: meta.agent_nickname ?? context.agentNickname,
+      role: meta.agent_role ?? context.agentRole ?? (subagent ? 'worker' : 'primary'),
+      provider: meta.provider ?? context.provider,
+      model: record.type === 'turn_context'
+        ? payload.model ?? context.model : meta.model ?? context.model,
+    },
+    source: {
+      adapter: 'codex-rollout', artifact: artifact(context.artifact),
+      confidence: subagent && meta.thread_source !== 'subagent' ? 'correlated' : 'observed',
+      fields: {
+        project: context.project ? 'observed' : null,
+        provider: meta.provider || context.provider ? 'observed' : null,
+        model: (record.type === 'turn_context' ? payload.model : meta.model) || context.model
+          ? 'observed' : null,
+        status: 'observed',
+        hierarchy: subagent ? (meta.thread_source === 'subagent' ? 'observed' : 'correlated') : 'observed',
+      },
+    },
+  };
+  if (record.type === 'session_meta') {
+    return [createLiveEvent({
+      ...base,
+      action: context.bootstrap ? 'session.discovered' : 'session.started',
+      status: context.bootstrap ? 'unknown' : 'running',
+    })];
+  }
+  if (record.type === 'turn_context' && (payload.model || payload.cwd)) {
+    return [createLiveEvent({
+      ...base, action: 'session.metadata',
+      status: context.bootstrap ? 'unknown' : 'running',
+    })];
+  }
+  if (record.type === 'event_msg' && ['user_message', 'agent_message'].includes(payload.type)) {
+    return [createLiveEvent({
+      ...base, action: payload.type === 'user_message' ? 'session.input' : 'agent.output',
+      status: 'running',
+    })];
+  }
+  if (record.type === 'response_item' && ['function_call', 'custom_tool_call'].includes(payload.type)) {
+    const callId = payload.call_id ?? payload.id;
+    if (typeof callId !== 'string') return [];
+    const typed = classifyToolName(payload.name);
+    return [createLiveEvent({
+      ...base, action: 'tool.started', status: 'running',
+      target: { id: callId, kind: typed.kind, label: typed.category },
+      attributes: { toolCategory: typed.category, toolName: payload.name },
+    })];
+  }
+  if (record.type === 'response_item'
+    && ['function_call_output', 'custom_tool_call_output'].includes(payload.type)) {
+    const callId = payload.call_id ?? payload.id;
+    if (typeof callId !== 'string') return [];
+    return [createLiveEvent({
+      ...base, action: 'tool.completed', status: 'completed',
+      target: { id: callId, kind: 'tool' },
+    })];
+  }
+  if (record.type === 'event_msg' && ['task_complete', 'turn_aborted'].includes(payload.type)) {
+    return [createLiveEvent({
+      ...base, action: 'session.completed',
+      status: payload.type === 'turn_aborted' ? 'cancelled' : 'completed',
+    })];
+  }
+  return [];
+}
+
+/** Authoritative parent/child edges from readCodexState(). */
+export function adaptCodexLedger(ledger, context = {}) {
+  if (!(ledger?.threads instanceof Map)) return [];
+  const out = [];
+  for (const [id, thread] of ledger.threads) {
+    const subagent = thread?.threadSource === 'subagent' || ledger.parents?.has(id);
+    out.push(createLiveEvent({
+      sessionId: id, parentSessionId: ledger.parents?.get(id),
+      host: 'codex', surface: 'native', project: thread?.project,
+      observedAt: context.observedAt,
+      actor: {
+        id, kind: subagent ? 'subagent' : 'session',
+        label: thread?.agentNickname,
+        role: thread?.agentRole ?? (subagent ? 'worker' : 'primary'),
+        provider: thread?.provider, model: thread?.model,
+      },
+      action: 'session.discovered',
+      status: ['queued', 'running', 'completed', 'failed', 'cancelled'].includes(thread?.status)
+        ? thread.status : 'unknown',
+      source: {
+        adapter: 'codex-state', confidence: 'observed',
+        fields: {
+          project: thread?.project ? 'observed' : null,
+          provider: thread?.provider ? 'observed' : null,
+          model: thread?.model ? 'observed' : null,
+          status: thread?.status ? 'observed' : null,
+          hierarchy: subagent ? 'observed' : null,
+        },
+      },
+      attributes: { tokenUsage: thread?.tokensUsed },
+    }));
+  }
+  if (!(ledger.parents instanceof Map)) return out;
+  for (const [childId, parentId] of ledger.parents) {
+    const child = ledger.threads instanceof Map ? ledger.threads.get(childId) : null;
+    const parent = ledger.threads instanceof Map ? ledger.threads.get(parentId) : null;
+    out.push(createLiveEvent({
+      sessionId: parentId, host: 'codex', surface: 'native',
+      project: context.project, observedAt: context.observedAt,
+      actor: {
+        id: parentId, kind: 'session', label: parent?.agentNickname,
+        role: parent?.agentRole ?? 'primary',
+        provider: parent?.provider, model: parent?.model,
+      },
+      // The ledger proves hierarchy, not that either thread is currently
+      // running. Fresh rollout evidence owns lifecycle.
+      action: 'agent.spawned', status: 'unknown',
+      target: {
+        id: childId, kind: 'subagent',
+        label: child?.agentNickname, role: child?.agentRole,
+      },
+      source: {
+        adapter: 'codex-state', artifact: artifact(context.artifact),
+        confidence: 'observed',
+        fields: {
+          project: parent?.project ? 'observed' : null,
+          provider: parent?.provider ? 'observed' : null,
+          model: parent?.model ? 'observed' : null,
+          status: 'observed', hierarchy: 'observed',
+        },
+      },
+      attributes: { tokenUsage: child?.tokensUsed },
+    }));
+  }
+  return out;
+}
diff --git a/src/lib/live/event-schema.mjs b/src/lib/live/event-schema.mjs
new file mode 100644
index 00000000..96ddef76
--- /dev/null
+++ b/src/lib/live/event-schema.mjs
@@ -0,0 +1,97 @@
+export const LIVE_SCHEMA_VERSION = 1;
+
+const HOSTS = new Set(['claude', 'codex', 'internal']);
+const SURFACES = new Set(['native', 'ruflo', 'aqe', 'plugin', 'skill', 'dual-run']);
+const CONFIDENCE = new Set(['observed', 'correlated', 'inferred', 'assumed', 'planned']);
+const EVIDENCE_FIELDS = ['project', 'provider', 'model', 'status', 'hierarchy'];
+const STATUS = new Set([
+  'queued', 'running', 'quiescent', 'expired', 'blocked',
+  'completed', 'failed', 'cancelled', 'unknown',
+]);
+const ACTOR_KINDS = new Set([
+  'session', 'agent', 'subagent', 'tool', 'skill', 'plugin', 'mcp', 'gate',
+]);
+
+function text(value, max = 256) {
+  return typeof value === 'string' && value.length > 0 ? value.slice(0, max) : null;
+}
+
+function timestamp(value) {
+  const ms = Date.parse(value);
+  return Number.isFinite(ms) ? new Date(ms).toISOString() : null;
+}
+
+/**
+ * Construct the public telemetry DTO field-by-field. Raw transcript objects are
+ * intentionally never spread into the result: prompts, arguments and output
+ * therefore cannot escape merely because an upstream schema adds a field.
+ */
+export function createLiveEvent(input, { now = () => new Date().toISOString() } = {}) {
+  if (!input || typeof input !== 'object') throw new TypeError('live event must be an object');
+  const sessionId = text(input.sessionId);
+  const action = text(input.action, 96);
+  const actorId = text(input.actor?.id);
+  if (!sessionId || !action || !actorId) {
+    throw new TypeError('live event requires sessionId, action and actor.id');
+  }
+  const host = HOSTS.has(input.host) ? input.host : 'internal';
+  const project = safeProjectLabel(input.project);
+  const surface = SURFACES.has(input.surface) ? input.surface : 'native';
+  const actorKind = ACTOR_KINDS.has(input.actor?.kind) ? input.actor.kind : 'agent';
+  const observedAt = timestamp(input.observedAt) ?? timestamp(now());
+  if (!observedAt) throw new TypeError('live event requires a valid observedAt');
+
+  const out = {
+    schemaVersion: LIVE_SCHEMA_VERSION,
+    observedAt,
+    sourceTimestamp: timestamp(input.sourceTimestamp),
+    sessionId,
+    sessionKey: canonicalSessionKey(host, sessionId),
+    parentSessionId: text(input.parentSessionId),
+    traceId: text(input.traceId, 128),
+    spanId: text(input.spanId, 128),
+    parentSpanId: text(input.parentSpanId, 128),
+    host,
+    surface,
+    project,
+    projectKey: stableProjectKey(project),
+    actor: {
+      id: actorId,
+      kind: actorKind,
+      label: text(input.actor?.label, 96),
+      role: text(input.actor?.role, 96),
+      provider: text(input.actor?.provider, 96),
+      model: text(input.actor?.model, 128),
+    },
+    action,
+    target: input.target?.id ? {
+      id: text(input.target.id),
+      kind: ACTOR_KINDS.has(input.target.kind) ? input.target.kind : 'agent',
+      label: text(input.target.label, 96),
+      role: text(input.target.role, 96),
+    } : null,
+    status: STATUS.has(input.status) ? input.status : 'unknown',
+    source: {
+      adapter: text(input.source?.adapter, 96) ?? 'unknown',
+      artifact: text(input.source?.artifact),
+      confidence: CONFIDENCE.has(input.source?.confidence)
+        ? input.source.confidence : 'observed',
+      fields: Object.fromEntries(EVIDENCE_FIELDS.map((field) => [
+        field,
+        CONFIDENCE.has(input.source?.fields?.[field]) ? input.source.fields[field] : null,
+      ])),
+    },
+    attributes: {
+      durationMs: Number.isFinite(input.attributes?.durationMs)
+        ? Math.max(0, input.attributes.durationMs) : null,
+      tokenUsage: Number.isFinite(input.attributes?.tokenUsage)
+        ? Math.max(0, input.attributes.tokenUsage) : null,
+      toolCategory: text(input.attributes?.toolCategory, 96),
+      toolName: text(input.attributes?.toolName, 96),
+    },
+  };
+  return out;
+}
+import {
+  canonicalSessionKey, safeProjectLabel, stableProjectKey,
+} from './project-label.mjs';
diff --git a/src/lib/live/index.mjs b/src/lib/live/index.mjs
new file mode 100644
index 00000000..672ff7eb
--- /dev/null
+++ b/src/lib/live/index.mjs
@@ -0,0 +1,18 @@
+export { LIVE_SCHEMA_VERSION, createLiveEvent } from './event-schema.mjs';
+export { LiveReplayStream } from './replay-stream.mjs';
+export {
+  emptyLiveProjection, reduceLiveEvent, serializeLiveProjection, sweepLiveProjection,
+} from './projection.mjs';
+export { JsonlTailer } from './jsonl-tailer.mjs';
+export {
+  adaptClaudeTranscriptRecord, adaptCodexTranscriptRecord,
+} from './transcript-adapter.mjs';
+export { TranscriptStreams } from './transcript-streams.mjs';
+export { adaptClaudeRecord } from './claude-adapter.mjs';
+export { adaptCodexRecord, adaptCodexLedger } from './codex-adapter.mjs';
+export { adaptStructuredEvent, adaptDualRunRecord } from './structured-adapter.mjs';
+export { classifyToolName } from './tool-classify.mjs';
+export {
+  canonicalSessionKey, resolveProjectLabel, safeProjectLabel, stableProjectKey,
+} from './project-label.mjs';
+export { LiveSessionsService } from './live-sessions-service.mjs';
diff --git a/src/lib/live/jsonl-tailer.mjs b/src/lib/live/jsonl-tailer.mjs
new file mode 100644
index 00000000..88c4f23a
--- /dev/null
+++ b/src/lib/live/jsonl-tailer.mjs
@@ -0,0 +1,96 @@
+import fs from 'node:fs';
+import { StringDecoder } from 'node:string_decoder';
+
+/**
+ * Append-aware JSONL reader. Polling is deliberate: fs.watch is only a hint on
+ * several supported filesystems, while stat reconciliation catches missed
+ * notifications, replacement, truncation and late partial-line completion.
+ */
+export class JsonlTailer {
+  #file;
+  #onRecord;
+  #onError;
+  #offset = 0;
+  #carry = '';
+  #decoder = new StringDecoder('utf8');
+  #identity = null;
+  #timer = null;
+
+  /**
+   * @param {string} file
+   * @param {{
+   *   onRecord: (record: object) => void,
+   *   onError?: (error: unknown, line?: string) => void,
+   *   intervalMs?: number,
+   *   startAtEnd?: boolean,
+   *   startOffset?: number,
+   *   canRead?: (file: string) => boolean
+   * }} options
+   */
+  constructor(file, {
+    onRecord, onError = () => {}, intervalMs = 500, startAtEnd = false,
+    startOffset, canRead = () => true,
+  }) {
+    if (typeof onRecord !== 'function') throw new TypeError('onRecord is required');
+    this.#file = file;
+    this.#onRecord = onRecord;
+    this.#onError = onError;
+    this.intervalMs = intervalMs;
+    this.startAtEnd = startAtEnd;
+    this.startOffset = Number.isSafeInteger(startOffset) && startOffset >= 0 ? startOffset : null;
+    this.canRead = typeof canRead === 'function' ? canRead : () => false;
+  }
+
+  reconcile() {
+    if (!this.canRead(this.#file)) return;
+    let stat;
+    try { stat = fs.statSync(this.#file); } catch (error) {
+      if (error.code !== 'ENOENT') this.#onError(error);
+      return;
+    }
+    const identity = `${stat.dev}:${stat.ino}`;
+    if (this.#identity == null) {
+      this.#identity = identity;
+      if (this.startOffset != null) this.#offset = Math.min(this.startOffset, stat.size);
+      else if (this.startAtEnd) this.#offset = stat.size;
+    } else if (this.#identity !== identity || stat.size < this.#offset) {
+      this.#identity = identity;
+      this.#offset = 0;
+      this.#carry = '';
+      this.#decoder = new StringDecoder('utf8');
+    }
+    if (stat.size <= this.#offset) return;
+    let bytes;
+    try {
+      const flags = fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW ?? 0);
+      const fd = fs.openSync(this.#file, flags);
+      try {
+        bytes = Buffer.alloc(stat.size - this.#offset);
+        fs.readSync(fd, bytes, 0, bytes.length, this.#offset);
+      } finally { fs.closeSync(fd); }
+    } catch (error) {
+      this.#onError(error);
+      return;
+    }
+    this.#offset += bytes.length;
+    const parts = (this.#carry + this.#decoder.write(bytes)).split('\n');
+    this.#carry = parts.pop() ?? '';
+    for (const line of parts) {
+      if (!line.trim()) continue;
+      try { this.#onRecord(JSON.parse(line)); } catch (error) { this.#onError(error, line); }
+    }
+  }
+
+  start() {
+    if (this.#timer) return this;
+    this.reconcile();
+    this.#timer = setInterval(() => this.reconcile(), this.intervalMs);
+    this.#timer.unref?.();
+    return this;
+  }
+
+  close() {
+    if (this.#timer) clearInterval(this.#timer);
+    this.#timer = null;
+  }
+}
diff --git a/src/lib/live/live-sessions-service.mjs b/src/lib/live/live-sessions-service.mjs
new file mode 100644
index 00000000..8937501a
--- /dev/null
+++ b/src/lib/live/live-sessions-service.mjs
@@ -0,0 +1,288 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { claudeDir, codexDir } from '../paths.mjs';
+import { readCodexState as defaultReadCodexState } from '../codex-state.mjs';
+import { adaptClaudeRecord } from './claude-adapter.mjs';
+import { adaptCodexLedger, adaptCodexRecord } from './codex-adapter.mjs';
+import { JsonlTailer } from './jsonl-tailer.mjs';
+import {
+  emptyLiveProjection, reduceLiveEvent, serializeLiveProjection, sweepLiveProjection,
+} from './projection.mjs';
+import { LiveReplayStream } from './replay-stream.mjs';
+import { adaptDualRunRecord, adaptStructuredEvent } from './structured-adapter.mjs';
+import { resolveProjectLabel } from './project-label.mjs';
+
+const safeEntries = (dir) => {
+  try { return fs.readdirSync(dir, { withFileTypes: true }); } catch { return []; }
+};
+
+function discoverJsonl(root, { maxDepth, maxFiles, accept }) {
+  const found = [];
+  const visit = (dir, depth) => {
+    if (depth > maxDepth || found.length >= 4096) return;
+    for (const entry of safeEntries(dir)) {
+      if (found.length >= 4096) break;
+      const file = path.join(dir, entry.name);
+      if (entry.isDirectory()) visit(file, depth + 1);
+      else if (entry.isFile() && entry.name.endsWith('.jsonl') && accept(entry.name)) {
+        let mtimeMs = 0;
+        try { mtimeMs = fs.statSync(file).mtimeMs; } catch { /* skip ordering evidence */ }
+        found.push({ file, mtimeMs });
+      }
+    }
+  };
+  visit(root, 0);
+  return found.sort((a, b) => b.mtimeMs - a.mtimeMs)
+    .slice(0, maxFiles).map((entry) => entry.file);
+}
+
+/** Read only a small prefix and retain only records with safe runtime metadata. */
+function bootstrapRecords(file, adapter) {
+  let text;
+  try {
+    const fd = fs.openSync(file, 'r');
+    try {
+      const size = Math.min(fs.fstatSync(fd).size, 128 * 1024);
+      const bytes = Buffer.alloc(size);
+      fs.readSync(fd, bytes, 0, size, 0);
+      text = bytes.toString('utf8');
+    } finally { fs.closeSync(fd); }
+  } catch { return []; }
+  const records = [];
+  for (const line of text.split('\n').slice(0, 256)) {
+    if (!line.trim()) continue;
+    let record;
+    try { record = JSON.parse(line); } catch { continue; }
+    if (adapter === 'codex' && ['session_meta', 'turn_context'].includes(record?.type)) {
+      records.push(record);
+    } else if (adapter === 'claude'
+      && ['user', 'assistant'].includes(record?.type)
+      && (record.sessionId || record.cwd || record.message?.model)) {
+      records.push(record);
+      if (record.cwd && record.message?.model) break;
+    }
+  }
+  return records;
+}
+
+function codexId(file) {
+  return path.basename(file, '.jsonl')
+    .replace(/^rollout-\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}-/, '');
+}
+
+/**
+ * Coordinates bounded transcript tailers into one privacy-safe live projection.
+ * Transcript contents exist only for the duration of adapter calls.
+ */
+export class LiveSessionsService {
+  #options;
+  #stream;
+  #projection = emptyLiveProjection();
+  #tailers = new Map();
+  #contexts = new Map();
+  #timer = null;
+  #started = false;
+  #edgeKeys = new Set();
+  #health = new Map();
+
+  constructor(options = {}) {
+    const roots = options.roots ?? {};
+    this.#options = {
+      roots: {
+        claude: roots.claude ?? path.join(claudeDir(), 'projects'),
+        codex: roots.codex ?? path.join(codexDir(), 'sessions'),
+      },
+      structuredSources: Array.isArray(options.structuredSources) ? options.structuredSources : [],
+      intervalMs: options.intervalMs ?? 750,
+      maxFiles: options.maxFiles ?? 256,
+      replayCapacity: options.replayCapacity ?? 2000,
+      readCodexState: options.readCodexState ?? defaultReadCodexState,
+      setInterval: options.setInterval ?? globalThis.setInterval,
+      clearInterval: options.clearInterval ?? globalThis.clearInterval,
+      now: options.now ?? (() => new Date().toISOString()),
+      quiescentMs: options.quiescentMs ?? 30_000,
+      expiryMs: options.expiryMs ?? 300_000,
+      maxSessions: options.maxSessions ?? 100,
+      maxNodesPerSession: options.maxNodesPerSession ?? 1000,
+    };
+    this.#stream = new LiveReplayStream({ capacity: this.#options.replayCapacity });
+    for (const name of ['claude', 'codex', 'ruflo', 'aqe', 'codex-state']) {
+      this.#health.set(name, { status: 'idle', files: 0, events: 0, errors: 0, lastError: null });
+    }
+  }
+
+  start() {
+    if (this.#started) return this;
+    this.#started = true;
+    this.#reconcile(true);
+    this.#timer = this.#options.setInterval(() => this.#reconcile(false), this.#options.intervalMs);
+    this.#timer?.unref?.();
+    return this;
+  }
+
+  close() {
+    if (this.#timer != null) this.#options.clearInterval(this.#timer);
+    this.#timer = null;
+    for (const tailer of this.#tailers.values()) tailer.close();
+    this.#tailers.clear();
+    this.#contexts.clear();
+    this.#started = false;
+  }
+
+  snapshot() {
+    return {
+      ...serializeLiveProjection(this.#projection),
+      health: Object.fromEntries(this.#health),
+    };
+  }
+
+  replay(cursor = null) {
+    return this.#stream.replay(cursor);
+  }
+
+  subscribe(listener) {
+    if (typeof listener !== 'function') throw new TypeError('listener is required');
+    this.#stream.on('event', listener);
+    return () => this.#stream.off('event', listener);
+  }
+
+  #reconcile(initial) {
+    this.#discover(initial);
+    for (const [file, tailer] of this.#tailers) {
+      try {
+        tailer.reconcile();
+        const context = this.#contexts.get(file);
+        this.#mark(context.adapter, { status: 'ok' });
+      } catch (error) {
+        this.#error(this.#contexts.get(file)?.adapter ?? 'internal', error);
+      }
+    }
+    this.#ingestLedger();
+    this.#projection = sweepLiveProjection(this.#projection, {
+      now: this.#options.now(),
+      quiescentMs: this.#options.quiescentMs,
+      expiryMs: this.#options.expiryMs,
+    });
+  }
+
+  #discover(initial) {
+    // Explicit operator-selected sources have priority over automatic native
+    // discovery. Otherwise saturated Claude + Codex stores can consume every
+    // tailer slot before a --live-source file is considered.
+    for (const source of this.#options.structuredSources.slice(0, this.#options.maxFiles)) {
+      if (!source?.file || !['ruflo', 'aqe', 'dual-run'].includes(source.surface)) continue;
+      this.#add(source.file, {
+        adapter: source.surface, surface: source.surface,
+        sessionId: source.sessionId,
+      }, initial);
+    }
+    const remaining = Math.max(0, this.#options.maxFiles - this.#tailers.size);
+    const claudeLimit = Math.ceil(remaining / 2);
+    const codexLimit = remaining - claudeLimit;
+    const claude = discoverJsonl(this.#options.roots.claude, {
+      maxDepth: 2, maxFiles: claudeLimit, accept: () => true,
+    });
+    const codex = discoverJsonl(this.#options.roots.codex, {
+      maxDepth: 4, maxFiles: codexLimit, accept: (name) => name.startsWith('rollout-'),
+    });
+    for (const file of claude) {
+      this.#add(file, {
+        adapter: 'claude', sessionId: path.basename(file, '.jsonl'),
+        project: 'unknown',
+      }, initial);
+    }
+    for (const file of codex) {
+      this.#add(file, { adapter: 'codex', sessionId: codexId(file), meta: {} }, initial);
+    }
+  }
+
+  #add(file, context, initial) {
+    if (this.#tailers.has(file) || this.#tailers.size >= this.#options.maxFiles) return;
+    if (initial && ['claude', 'codex'].includes(context.adapter)) {
+      for (const record of bootstrapRecords(file, context.adapter)) {
+        this.#record(record, { ...context, bootstrap: true }, file);
+      }
+    }
+    const onRecord = (record) => this.#record(record, context, file);
+    const onError = (error) => this.#error(context.adapter, error);
+    const tailer = new JsonlTailer(file, { onRecord, onError, startAtEnd: initial });
+    this.#tailers.set(file, tailer);
+    this.#contexts.set(file, context);
+    this.#mark(context.adapter, { files: (this.#health.get(context.adapter)?.files ?? 0) + 1 });
+  }
+
+  #record(record, context, file) {
+    const explicitCwd = record?.cwd
+      ?? (['session_meta', 'turn_context'].includes(record?.type) ? record.payload?.cwd : null);
+    if (explicitCwd) context.project = resolveProjectLabel(explicitCwd);
+    const explicitModel = record?.message?.model
+      ?? (['session_meta', 'turn_context'].includes(record?.type) ? record.payload?.model : null);
+    if (typeof explicitModel === 'string') context.model = explicitModel;
+    const common = {
+      ...context, artifact: file, observedAt: this.#options.now(),
+    };
+    let events;
+    if (context.adapter === 'claude') {
+      events = adaptClaudeRecord(record, common);
+    } else if (context.adapter === 'codex') {
+      if (record?.type === 'session_meta' && record.payload?.id) {
+        context.sessionId = record.payload.id;
+        context.meta = record.payload;
+      }
+      events = adaptCodexRecord(record, common);
+    } else if (context.surface === 'dual-run') {
+      events = adaptDualRunRecord(record, {
+        observedAt: common.observedAt, artifact: path.basename(file),
+      });
+    } else {
+      events = adaptStructuredEvent(record, {
+        ...common, artifact: path.basename(file),
+        surface: context.surface, adapter: `${context.surface}-jsonl`,
+      });
+    }
+    for (const event of events) this.#publish(event, context.adapter);
+  }
+
+  #publish(event, adapter) {
+    const published = this.#stream.publish(event);
+    this.#projection = reduceLiveEvent(this.#projection, published, {
+      maxSessions: this.#options.maxSessions,
+      maxNodesPerSession: this.#options.maxNodesPerSession,
+    });
+    const current = this.#health.get(adapter);
+    this.#mark(adapter, { status: 'ok', events: (current?.events ?? 0) + 1 });
+  }
+
+  #ingestLedger() {
+    let ledger;
+    try { ledger = this.#options.readCodexState(); } catch (error) {
+      this.#error('codex-state', error);
+      return;
+    }
+    for (const event of adaptCodexLedger(ledger, { observedAt: this.#options.now() })) {
+      const key = `${event.action}|${event.actor.id}|${event.target?.id ?? ''}`;
+      if (this.#edgeKeys.has(key)) continue;
+      this.#edgeKeys.add(key);
+      this.#publish(event, 'codex-state');
+    }
+    this.#mark('codex-state', { status: ledger ? 'ok' : 'unavailable' });
+  }
+
+  #mark(adapter, update) {
+    const prior = this.#health.get(adapter) ?? {
+      status: 'idle', files: 0, events: 0, errors: 0, lastError: null,
+    };
+    this.#health.set(adapter, { ...prior, ...update });
+  }
+
+  #error(adapter, error) {
+    const prior = this.#health.get(adapter);
+    const code = error && typeof error === 'object' && 'code' in error
+      ? String(error.code).slice(0, 32) : null;
+    this.#mark(adapter, {
+      status: 'degraded', errors: (prior?.errors ?? 0) + 1,
+      // Error messages from fs commonly contain absolute transcript paths.
+      lastError: code ?? (error instanceof SyntaxError ? 'invalid-json' : 'unknown-error'),
+    });
+  }
+}
diff --git a/src/lib/live/project-label.mjs b/src/lib/live/project-label.mjs
new file mode 100644
index 00000000..e80f8d0a
--- /dev/null
+++ b/src/lib/live/project-label.mjs
@@ -0,0 +1,50 @@
+import { createHash } from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const WORKTREE_MARKERS = new Set(['.autopilot', '.claude', '.git', '.worktrees', 'worktrees']);
+
+/** Derive a display label from an explicit cwd without retaining path segments. */
+export function safeProjectLabel(cwd) {
+  if (typeof cwd !== 'string' || !cwd) return 'unknown';
+  const normalized = cwd.replaceAll('\\', '/').replace(/\/+$/, '');
+  const label = normalized.split('/').pop();
+  if (!label || label === '.' || label === '..') return 'unknown';
+  return label.replace(/[^\p{L}\p{N}._ -]/gu, '').slice(0, 96) || 'unknown';
+}
+
+/**
+ * Resolve a cwd to its owning repository without exposing the path. Linked Git
+ * worktrees carry a `.git` file pointing into `<repo>/.git/worktrees/<name>`;
+ * retained paths may no longer exist, so known nested layouts are a fallback.
+ */
+export function resolveProjectLabel(cwd) {
+  if (typeof cwd !== 'string' || !cwd) return 'unknown';
+  const normalized = cwd.replaceAll('\\', '/').replace(/\/+$/, '');
+  const segments = normalized.split('/').filter(Boolean);
+  for (let index = 1; index < segments.length - 1; index++) {
+    if (WORKTREE_MARKERS.has(segments[index])
+      && (['.worktrees', 'worktrees'].includes(segments[index])
+        || segments[index + 1] === 'worktrees')) {
+      return safeProjectLabel(segments[index - 1]);
+    }
+  }
+  try {
+    const pointer = fs.readFileSync(path.join(cwd, '.git'), 'utf8').trim();
+    const match = /^gitdir:\s*(.+?)[\\/]\.git[\\/]worktrees[\\/][^\\/]+$/i.exec(pointer);
+    if (match) return safeProjectLabel(match[1]);
+  } catch { /* normal repositories use a .git directory; retained paths may be gone */ }
+  return safeProjectLabel(cwd);
+}
+
+/** Opaque, deterministic identity derived only from the already-safe display label. */
+export function stableProjectKey(project) {
+  const label = safeProjectLabel(project);
+  const canonical = label.normalize('NFKC').toLocaleLowerCase('en-US');
+  return `project:${createHash('sha256').update(canonical).digest('hex').slice(0, 16)}`;
+}
+
+/** Host qualification prevents Claude and Codex sessions with the same native id colliding. */
+export function canonicalSessionKey(host, sessionId) {
+  return `${host}:${sessionId}`;
+}
diff --git a/src/lib/live/projection.mjs b/src/lib/live/projection.mjs
new file mode 100644
index 00000000..2ae027cc
--- /dev/null
+++ b/src/lib/live/projection.mjs
@@ -0,0 +1,271 @@
+function nodeFrom(actor, event) {
+  return {
+    id: actor.id, kind: actor.kind, label: actor.label, role: actor.role, provider: actor.provider,
+    model: actor.model, host: event.host, surface: event.surface,
+    status: event.status, lastEventId: event.eventId ?? null,
+    observedAt: event.observedAt, confidence: event.source.confidence,
+    sourceAdapter: event.source.adapter, lastAction: event.action,
+    durationMs: event.attributes.durationMs, toolName: event.attributes.toolName,
+    evidence: event.source.fields,
+  };
+}
+
+const TERMINAL = new Set(['completed', 'failed', 'cancelled']);
+const MAX_SEEN_EVENT_IDS = 10_000;
+const RESOURCE_KINDS = new Set(['tool', 'skill', 'plugin', 'mcp']);
+
+export function emptyLiveProjection() {
+  return { schemaVersion: 1, cursor: null, sessions: new Map(), seenEventIds: new Set() };
+}
+
+/** Immutable reducer so snapshot readers never observe a half-applied event. */
+export function reduceLiveEvent(projection, event, {
+  maxSessions = 100, maxNodesPerSession = 1000,
+} = {}) {
+  if (event.eventId && projection.seenEventIds?.has(event.eventId)) return projection;
+  const sessions = new Map(projection.sessions);
+  const sessionKey = event.sessionKey ?? canonicalSessionKey(event.host, event.sessionId);
+  const prior = sessions.get(sessionKey);
+  const session = prior
+    ? { ...prior, nodes: new Map(prior.nodes), edges: new Map(prior.edges) }
+    : {
+        id: event.sessionId, key: sessionKey, parentSessionId: event.parentSessionId,
+        project: event.project, projectKey: event.projectKey ?? stableProjectKey(event.project),
+        host: event.host, status: 'unknown',
+        nodes: new Map(), edges: new Map(), updatedAt: event.observedAt,
+      };
+  // Discovery sources can observe a thread before the authoritative state
+  // ledger exposes its parent. Reconcile that later evidence instead of
+  // leaving the thread permanently presented as a top-level session.
+  if (event.parentSessionId) session.parentSessionId = event.parentSessionId;
+  const priorNode = session.nodes.get(event.actor.id);
+  const actorNode = nodeFrom(event.actor, event);
+  if (priorNode) {
+    actorNode.label ??= priorNode.label;
+    if (!actorNode.role || (actorNode.role === 'worker' && priorNode.role !== 'worker')) {
+      actorNode.role = priorNode.role;
+    }
+  }
+  if (event.target && event.action.endsWith('.completed')) {
+    actorNode.status = priorNode?.status ?? 'running';
+  }
+  if (priorNode && event.status === 'unknown') actorNode.status = priorNode.status;
+  if (priorNode && TERMINAL.has(priorNode.status) && !TERMINAL.has(actorNode.status)) {
+    actorNode.status = priorNode.status;
+  }
+  session.nodes.set(event.actor.id, actorNode);
+  if (event.project && event.project !== 'unknown') {
+    session.project = event.project;
+    session.projectKey = event.projectKey ?? stableProjectKey(event.project);
+  }
+  session.evidence = {
+    ...(session.evidence ?? {}),
+    ...Object.fromEntries(Object.entries(event.source.fields ?? {}).filter(([, value]) => value)),
+  };
+  if (event.actor.kind === 'session' && event.action.startsWith('session.')
+    && !(TERMINAL.has(session.status) && !TERMINAL.has(event.status))) {
+    session.status = event.status;
+  }
+  if (event.target) {
+    const targetPrior = session.nodes.get(event.target.id);
+    if (!targetPrior) {
+      session.nodes.set(event.target.id, nodeFrom({
+        id: event.target.id, kind: event.target.kind,
+        label: event.target.label ?? event.attributes.toolCategory,
+        role: event.target.role, provider: null, model: null,
+      }, { ...event, status: event.action.endsWith('.completed') ? event.status : 'unknown' }));
+    } else if (event.action.endsWith('.completed')) {
+      session.nodes.set(event.target.id, {
+        ...targetPrior,
+        label: event.target.label ?? event.attributes.toolCategory ?? targetPrior.label,
+        role: event.target.role ?? targetPrior.role,
+        status: event.status,
+        observedAt: event.observedAt,
+        lastEventId: event.eventId ?? targetPrior.lastEventId,
+        lastAction: event.action,
+        sourceAdapter: event.source.adapter,
+        confidence: event.source.confidence,
+        durationMs: event.attributes.durationMs ?? targetPrior.durationMs,
+        toolName: event.attributes.toolName ?? targetPrior.toolName,
+      });
+    }
+    const edgeId = `${event.actor.id}|${event.action}|${event.target.id}`;
+    session.edges.set(edgeId, {
+      id: edgeId, source: event.actor.id, target: event.target.id,
+      action: event.action, confidence: event.source.confidence,
+      lastEventId: event.eventId ?? null,
+    });
+  }
+  session.updatedAt = ['session.discovered', 'session.metadata'].includes(event.action)
+    ? event.sourceTimestamp ?? prior?.updatedAt ?? event.observedAt
+    : event.observedAt;
+  // A state ledger proves identity/topology, but not that a process is live
+  // now. Only fresh execution evidence with an explicit running status may
+  // activate a session. Unknown/bootstrap evidence remains reviewable history.
+  if (event.status === 'running' && event.source.adapter !== 'codex-state') {
+    session.lifecycle = 'active';
+  } else {
+    session.lifecycle ??= 'historical';
+  }
+  boundNodes(session, Math.max(1, maxNodesPerSession));
+  sessions.set(sessionKey, session);
+  boundSessions(sessions, Math.max(1, maxSessions), sessionKey);
+  const seenEventIds = new Set(projection.seenEventIds);
+  if (event.eventId) seenEventIds.add(event.eventId);
+  while (seenEventIds.size > MAX_SEEN_EVENT_IDS) {
+    seenEventIds.delete(seenEventIds.values().next().value);
+  }
+  return {
+    schemaVersion: projection.schemaVersion,
+    cursor: event.eventId ?? projection.cursor,
+    sessions,
+    seenEventIds,
+  };
+}
+
+function boundNodes(session, limit) {
+  while (session.nodes.size > limit) {
+    const entries = [...session.nodes.entries()];
+    const removable = entries.find(([, node]) => (
+      RESOURCE_KINDS.has(node.kind) && TERMINAL.has(node.status)
+    )) ?? entries.find(([, node]) => RESOURCE_KINDS.has(node.kind))
+      ?? entries.find(([id, node]) => id !== session.id && node.kind !== 'gate');
+    if (!removable) break;
+    const [id] = removable;
+    session.nodes.delete(id);
+    for (const [edgeId, edge] of session.edges) {
+      if (edge.source === id || edge.target === id) session.edges.delete(edgeId);
+    }
+  }
+}
+
+function boundSessions(sessions, limit, currentId) {
+  while (sessions.size > limit) {
+    const entries = [...sessions.entries()].filter(([id]) => id !== currentId);
+    const removable = entries.find(([, session]) => TERMINAL.has(session.status))
+      ?? entries.find(([, session]) => session.lifecycle === 'expired')
+      ?? entries[0];
+    if (!removable) break;
+    sessions.delete(removable[0]);
+  }
+}
+
+/** Mark inactivity without claiming that work completed. */
+export function sweepLiveProjection(projection, {
+  now = Date.now(), quiescentMs = 30_000, expiryMs = 300_000,
+} = {}) {
+  const current = typeof now === 'number' ? now : Date.parse(now);
+  if (!Number.isFinite(current)) return projection;
+  let changed = false;
+  const sessions = new Map(projection.sessions);
+  for (const [id, prior] of sessions) {
+    if (TERMINAL.has(prior.status) || prior.lifecycle === 'historical') continue;
+    const age = Math.max(0, current - Date.parse(prior.updatedAt));
+    const lifecycle = age >= expiryMs ? 'expired'
+      : (age >= quiescentMs ? 'quiescent' : 'active');
+    if (prior.lifecycle !== lifecycle) {
+      sessions.set(id, { ...prior, lifecycle });
+      changed = true;
+    }
+  }
+  return changed ? { ...projection, sessions } : projection;
+}
+
+export function serializeLiveProjection(projection) {
+  const sessions = withSessionHierarchy([...projection.sessions.values()].map((session) => ({
+    ...session, nodes: [...session.nodes.values()], edges: [...session.edges.values()],
+  })));
+  return {
+    schemaVersion: projection.schemaVersion,
+    cursor: projection.cursor,
+    sessions,
+    projects: projectCatalog(sessions),
+  };
+}
+
+function withSessionHierarchy(sessions) {
+  const byKey = new Map(sessions.map((session) => [session.key, session]));
+  return sessions.map((session) => {
+    const path = [];
+    const seen = new Map();
+    let current = session;
+    let rootSessionKey = session.key;
+    let hierarchyState = 'root';
+    while (current.parentSessionId) {
+      if (seen.has(current.key)) {
+        const cycle = path.slice(seen.get(current.key)).sort();
+        rootSessionKey = cycle[0] ?? session.key;
+        hierarchyState = cycle.includes(session.key) ? 'cycle' : 'child';
+        break;
+      }
+      seen.set(current.key, path.length);
+      path.push(current.key);
+      const parentKey = canonicalSessionKey(current.host, current.parentSessionId);
+      const parent = byKey.get(parentKey);
+      if (!parent) {
+        rootSessionKey = current.key;
+        hierarchyState = current.key === session.key ? 'orphan' : 'child';
+        break;
+      }
+      current = parent;
+      rootSessionKey = current.key;
+      hierarchyState = 'child';
+    }
+    return {
+      ...session,
+      parentSessionKey: session.parentSessionId
+        ? canonicalSessionKey(session.host, session.parentSessionId) : null,
+      rootSessionKey,
+      hierarchyState,
+      navigationRoot: session.key === rootSessionKey,
+    };
+  });
+}
+
+function projectCatalog(sessions) {
+  const projects = new Map();
+  const sessionByKey = new Map(sessions.map((session) => [session.key, session]));
+  const rootSessions = sessions.filter((session) => session.navigationRoot);
+  for (const session of rootSessions) {
+    const key = session.projectKey ?? stableProjectKey(session.project);
+    const project = projects.get(key) ?? {
+      id: key, label: session.project, sessions: [], sessionCount: 0,
+      childSessionCount: 0, liveCount: 0, completedCount: 0,
+      providers: {}, updatedAt: session.updatedAt,
+    };
+    project.sessions.push(session.key);
+    project.sessionCount++;
+    if (TERMINAL.has(session.status)) project.completedCount++;
+    else if (session.status === 'running' && session.lifecycle === 'active') project.liveCount++;
+    const providers = new Set(session.nodes.map((node) => node.provider).filter(Boolean));
+    if (providers.size === 0) providers.add(session.host);
+    for (const provider of providers) {
+      project.providers[provider] = (project.providers[provider] ?? 0) + 1;
+    }
+    if (Date.parse(session.updatedAt) > Date.parse(project.updatedAt)) {
+      project.updatedAt = session.updatedAt;
+    }
+    projects.set(key, project);
+  }
+  for (const child of sessions.filter((session) => !session.navigationRoot)) {
+    const key = child.projectKey ?? stableProjectKey(child.project);
+    const project = projects.get(key);
+    if (project) project.childSessionCount++;
+  }
+  for (const project of projects.values()) {
+    project.sessions.sort((a, b) => {
+      const left = sessionByKey.get(a);
+      const right = sessionByKey.get(b);
+      const leftLive = left.status === 'running' && left.lifecycle === 'active';
+      const rightLive = right.status === 'running' && right.lifecycle === 'active';
+      return Number(rightLive) - Number(leftLive)
+        || Date.parse(right.updatedAt) - Date.parse(left.updatedAt)
+        || a.localeCompare(b);
+    });
+    project.providers = Object.fromEntries(Object.entries(project.providers).sort());
+  }
+  return [...projects.values()].sort((a, b) => (
+    Date.parse(b.updatedAt) - Date.parse(a.updatedAt) || a.id.localeCompare(b.id)
+  ));
+}
+import { canonicalSessionKey, stableProjectKey } from './project-label.mjs';
diff --git a/src/lib/live/replay-stream.mjs b/src/lib/live/replay-stream.mjs
new file mode 100644
index 00000000..d3729e23
--- /dev/null
+++ b/src/lib/live/replay-stream.mjs
@@ -0,0 +1,47 @@
+import { EventEmitter } from 'node:events';
+
+/** Bounded in-process event log used by the SSE layer. */
+export class LiveReplayStream extends EventEmitter {
+  #capacity;
+  #prefix;
+  #sequence = 0;
+  #events = [];
+
+  constructor({ capacity = 1000, prefix = 'ak' } = {}) {
+    super();
+    if (!Number.isInteger(capacity) || capacity < 1) throw new RangeError('capacity must be positive');
+    this.#capacity = capacity;
+    this.#prefix = String(prefix).replace(/[^a-zA-Z0-9_-]/g, '') || 'ak';
+  }
+
+  publish(event) {
+    const ingestSeq = ++this.#sequence;
+    const item = { ...event, eventId: `${this.#prefix}:${ingestSeq}`, ingestSeq };
+    this.#events.push(item);
+    if (this.#events.length > this.#capacity) this.#events.shift();
+    this.emit('event', item);
+    return item;
+  }
+
+  replay(afterId = null) {
+    if (afterId == null || afterId === '') {
+      return { reset: false, events: [...this.#events] };
+    }
+    const seq = this.#parseId(afterId);
+    if (seq == null) return { reset: true, events: [...this.#events] };
+    const oldest = this.#events[0]?.ingestSeq ?? this.#sequence + 1;
+    if (seq < oldest - 1 || seq > this.#sequence) {
+      return { reset: true, events: [...this.#events] };
+    }
+    return { reset: false, events: this.#events.filter((event) => event.ingestSeq > seq) };
+  }
+
+  snapshot() {
+    return { cursor: `${this.#prefix}:${this.#sequence}`, events: [...this.#events] };
+  }
+
+  #parseId(id) {
+    const match = new RegExp(`^${this.#prefix}:(\\d+)$`).exec(String(id));
+    return match ? Number(match[1]) : null;
+  }
+}
diff --git a/src/lib/live/service.mjs b/src/lib/live/service.mjs
new file mode 100644
index 00000000..fab108d5
--- /dev/null
+++ b/src/lib/live/service.mjs
@@ -0,0 +1,3 @@
+// Stable integration entry point kept separate from the implementation name so
+// dashboard consumers do not depend on internal file organization.
+export { LiveSessionsService } from './live-sessions-service.mjs';
diff --git a/src/lib/live/structured-adapter.mjs b/src/lib/live/structured-adapter.mjs
new file mode 100644
index 00000000..7429f22f
--- /dev/null
+++ b/src/lib/live/structured-adapter.mjs
@@ -0,0 +1,63 @@
+import { createLiveEvent } from './event-schema.mjs';
+
+/** Conservative adapter for structured ruflo/AQE hook events. */
+/**
+ * @param {Record<string, any>} record
+ * @param {{
+ *   surface?: string, adapter?: string, sessionId?: string,
+ *   observedAt?: string, artifact?: string
+ * }} [options]
+ */
+export function adaptStructuredEvent(record, {
+  surface, adapter, sessionId, observedAt, artifact,
+} = {}) {
+  if (!['ruflo', 'aqe'].includes(surface) || !record || typeof record !== 'object') return [];
+  const sid = record.sessionId ?? record.session_id ?? sessionId;
+  const actorId = record.agentId ?? record.agent_id ?? record.workerId ?? record.worker_id;
+  const action = record.action ?? record.event ?? record.type;
+  if (![sid, actorId, action].every((value) => typeof value === 'string' && value)) return [];
+  return [createLiveEvent({
+    sessionId: sid, host: record.host === 'claude' || record.host === 'codex'
+      ? record.host : 'internal',
+    surface, project: record.project, observedAt,
+    sourceTimestamp: record.timestamp ?? record.at,
+    actor: {
+      id: actorId,
+      kind: record.kind === 'gate' ? 'gate' : (record.kind === 'subagent' ? 'subagent' : 'agent'),
+      role: record.role, provider: record.provider, model: record.model,
+    },
+    action, target: record.targetId
+      ? { id: record.targetId, kind: record.targetKind } : null,
+    status: record.status,
+    source: { adapter, artifact, confidence: 'observed' },
+    attributes: { durationMs: record.durationMs },
+  })];
+}
+
+/** Planned nodes exist only when emitted by an explicit materialized dual run. */
+/**
+ * @param {Record<string, any>} record
+ * @param {{ observedAt?: string, artifact?: string }} [options]
+ */
+export function adaptDualRunRecord(record, { observedAt, artifact } = {}) {
+  if (record?.type !== 'dual-run.plan' || typeof record.runId !== 'string'
+    || !Array.isArray(record.steps)) return [];
+  const out = [];
+  for (const step of record.steps) {
+    if (typeof step?.id !== 'string') continue;
+    out.push(createLiveEvent({
+      sessionId: record.runId, host: ['claude', 'codex'].includes(step.host)
+        ? step.host : 'internal',
+      surface: 'dual-run', project: record.project, observedAt,
+      sourceTimestamp: record.timestamp,
+      actor: {
+        id: record.runId, kind: 'session', role: 'orchestrator',
+        provider: null, model: null,
+      },
+      action: 'agent.planned', target: { id: step.id, kind: 'agent' },
+      status: 'queued',
+      source: { adapter: 'dual-run-plan', artifact, confidence: 'planned' },
+    }));
+  }
+  return out;
+}
diff --git a/src/lib/live/tool-classify.mjs b/src/lib/live/tool-classify.mjs
new file mode 100644
index 00000000..06155cff
--- /dev/null
+++ b/src/lib/live/tool-classify.mjs
@@ -0,0 +1,13 @@
+/** Classify only explicit public tool names; arguments are never inspected. */
+export function classifyToolName(name) {
+  if (typeof name !== 'string' || !name) return { kind: 'tool', category: null };
+  const lower = name.toLowerCase();
+  if (lower.startsWith('mcp__')) return { kind: 'mcp', category: name.slice(0, 96) };
+  if (lower === 'skill' || lower.startsWith('skill:') || lower.startsWith('skill__')) {
+    return { kind: 'skill', category: name.slice(0, 96) };
+  }
+  if (lower.startsWith('plugin:') || lower.startsWith('plugin__')) {
+    return { kind: 'plugin', category: name.slice(0, 96) };
+  }
+  return { kind: 'tool', category: name.slice(0, 96) };
+}
diff --git a/src/lib/live/transcript-adapter.mjs b/src/lib/live/transcript-adapter.mjs
new file mode 100644
index 00000000..960ea98b
--- /dev/null
+++ b/src/lib/live/transcript-adapter.mjs
@@ -0,0 +1,198 @@
+import { classifyToolName } from './tool-classify.mjs';
+
+const iso = (value) => {
+  const ms = Date.parse(value);
+  return Number.isFinite(ms) ? new Date(ms).toISOString() : null;
+};
+const valueText = (value) => typeof value === 'string' && value ? value : null;
+const details = (value) => {
+  if (value === null || value === undefined) return null;
+  if (typeof value === 'string') return value;
+  try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+};
+
+function textBlocks(content) {
+  if (typeof content === 'string') return content ? [content] : [];
+  if (!Array.isArray(content)) return [];
+  return content.flatMap((block) => {
+    if (!block || typeof block !== 'object') return [];
+    if (['text', 'input_text', 'output_text', 'summary_text'].includes(block.type)) {
+      return valueText(block.text) ? [block.text] : [];
+    }
+    return [];
+  });
+}
+
+function base(context, record, role) {
+  return {
+    sessionId: context.sessionId,
+    at: iso(record?.timestamp) ?? context.observedAt ?? new Date().toISOString(),
+    actor: {
+      id: valueText(context.actorId) ?? context.sessionId,
+      role,
+      label: valueText(context.actorLabel),
+      parentId: valueText(context.parentActorId),
+    },
+  };
+}
+
+/**
+ * Convert one Claude transcript record into content-plane candidates. No raw
+ * record or tool payload is spread into the result.
+ */
+export function adaptClaudeTranscriptRecord(record, context = {}) {
+  if (!record || typeof record !== 'object' || !valueText(context.sessionId)) return [];
+  const out = [];
+  if (record.type === 'user') {
+    const blocks = record.message?.content;
+    const toolResults = Array.isArray(blocks)
+      ? blocks.filter((block) => block?.type === 'tool_result') : [];
+    for (const block of toolResults) {
+      out.push({
+        ...base(context, record, 'tool'), kind: 'tool-result',
+        key: valueText(block.tool_use_id) ? `claude:tool-result:${block.tool_use_id}` : null,
+        tool: {
+          callId: valueText(block.tool_use_id),
+          name: null, category: 'tool', status: block.is_error ? 'failed' : 'completed',
+        },
+        details: details(block.content),
+      });
+    }
+    if (toolResults.length) {
+      for (const text of textBlocks(blocks)) {
+        out.push({
+          ...base(context, record, 'tool'), kind: 'status', text,
+          key: valueText(record.uuid) ? `claude:tool-context:${record.uuid}:${out.length}` : null,
+        });
+      }
+      return out;
+    }
+    if (record.isMeta === true) return [];
+    for (const text of textBlocks(blocks)) {
+      out.push({
+        ...base(context, record, 'user'), kind: 'message', text,
+        key: valueText(record.uuid) ? `claude:message:${record.uuid}` : null,
+      });
+    }
+    return out;
+  }
+  if (record.type === 'system') {
+    const label = valueText(record.subtype) ?? valueText(record.level);
+    return label ? [{
+      ...base(context, record, 'system'), kind: 'status', text: label,
+      key: valueText(record.uuid) ? `claude:system:${record.uuid}` : null,
+    }] : [];
+  }
+  if (record.type !== 'assistant') return [];
+  const blocks = Array.isArray(record.message?.content) ? record.message.content : [];
+  for (const block of blocks) {
+    if (block?.type === 'text' && valueText(block.text)) {
+      out.push({
+        ...base(context, record, 'assistant'), kind: 'message', text: block.text,
+        key: valueText(record.uuid) ? `claude:message:${record.uuid}:${out.length}` : null,
+      });
+    } else if (block?.type === 'thinking' && valueText(block.thinking)) {
+      out.push({
+        ...base(context, record, 'assistant'), kind: 'reasoning', text: block.thinking,
+        key: valueText(record.uuid) ? `claude:reasoning:${record.uuid}:${out.length}` : null,
+      });
+    } else if (block?.type === 'tool_use' && valueText(block.id)) {
+      const typed = classifyToolName(block.name);
+      out.push({
+        ...base(context, record, 'assistant'), kind: 'tool-call',
+        key: `claude:tool-call:${block.id}`,
+        tool: {
+          callId: block.id, name: valueText(block.name),
+          category: typed.category, status: 'running',
+        },
+        details: details(block.input),
+      });
+    }
+  }
+  return out;
+}
+
+function codexMessageText(payload) {
+  if (typeof payload?.message === 'string') return [payload.message];
+  return textBlocks(payload?.content);
+}
+
+/** Convert one Codex rollout record without encrypted reasoning or tool bodies. */
+export function adaptCodexTranscriptRecord(record, context = {}) {
+  if (!record || typeof record !== 'object' || !valueText(context.sessionId)) return [];
+  const payload = record.payload && typeof record.payload === 'object' ? record.payload : {};
+  const common = (role) => base(context, record, role);
+  if (record.type === 'event_msg') {
+    if (['user_message', 'agent_message'].includes(payload.type)) {
+      const role = payload.type === 'user_message' ? 'user' : 'assistant';
+      return codexMessageText(payload).map((text, index) => ({
+        ...common(role), kind: 'message', text,
+        key: valueText(payload.id) ? `codex:message:${payload.id}:${index}` : null,
+      }));
+    }
+    if (['task_started', 'task_complete', 'turn_aborted', 'context_compacted',
+      'sub_agent_activity', 'patch_apply_end', 'mcp_tool_call_end',
+      'web_search_end'].includes(payload.type)) {
+      const evidence = {};
+      for (const field of [
+        'message', 'status', 'error', 'result', 'output', 'stdout', 'stderr',
+        'changes', 'patch', 'query', 'url', 'call_id', 'name', 'duration_ms',
+        'exit_code', 'agent_id', 'agent_name', 'activity', 'activities', 'details',
+      ]) {
+        if (payload[field] !== undefined) evidence[field] = payload[field];
+      }
+      const target = payload.type === 'sub_agent_activity' && valueText(payload.agent_id)
+        ? {
+            id: payload.agent_id,
+            role: 'subagent',
+            label: valueText(payload.agent_name),
+          }
+        : null;
+      return [{
+        ...common('system'), kind: 'status', text: payload.type.replaceAll('_', ' '),
+        details: Object.keys(evidence).length ? details(evidence) : null,
+        target,
+        relation: target ? 'delegates' : null,
+        key: valueText(payload.id) ? `codex:status:${payload.id}` : null,
+      }];
+    }
+    return [];
+  }
+  if (record.type !== 'response_item') return [];
+  if (payload.type === 'message' || payload.type === 'agent_message') {
+    const role = payload.role === 'user' ? 'user' : 'assistant';
+    return codexMessageText(payload).map((text, index) => ({
+      ...common(role), kind: 'message', text,
+      key: valueText(payload.id) ? `codex:message:${payload.id}:${index}` : null,
+    }));
+  }
+  if (payload.type === 'reasoning') {
+    return textBlocks(payload.summary).map((text, index) => ({
+      ...common('assistant'), kind: 'reasoning', text,
+      key: valueText(payload.id) ? `codex:reasoning:${payload.id}:${index}` : null,
+    }));
+  }
+  if (['function_call', 'custom_tool_call'].includes(payload.type)) {
+    const callId = valueText(payload.call_id) ?? valueText(payload.id);
+    if (!callId) return [];
+    const typed = classifyToolName(payload.name);
+    return [{
+      ...common('assistant'), kind: 'tool-call', key: `codex:tool-call:${callId}`,
+      tool: {
+        callId, name: valueText(payload.name), category: typed.category,
+        status: valueText(payload.status) ?? 'running',
+      },
+      details: details(payload.arguments ?? payload.input),
+    }];
+  }
+  if (['function_call_output', 'custom_tool_call_output'].includes(payload.type)) {
+    const callId = valueText(payload.call_id) ?? valueText(payload.id);
+    if (!callId) return [];
+    return [{
+      ...common('tool'), kind: 'tool-result', key: `codex:tool-result:${callId}`,
+      tool: { callId, name: null, category: 'tool', status: 'completed' },
+      details: details(payload.output ?? payload.result ?? payload.error),
+    }];
+  }
+  return [];
+}
diff --git a/src/lib/live/transcript-streams.mjs b/src/lib/live/transcript-streams.mjs
new file mode 100644
index 00000000..4b078722
--- /dev/null
+++ b/src/lib/live/transcript-streams.mjs
@@ -0,0 +1,384 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { JsonlTailer } from './jsonl-tailer.mjs';
+import { LiveReplayStream } from './replay-stream.mjs';
+import {
+  adaptClaudeTranscriptRecord, adaptCodexTranscriptRecord,
+} from './transcript-adapter.mjs';
+import { canonicalSessionKey } from './project-label.mjs';
+
+const HOSTS = new Set(['claude', 'codex']);
+const VALID_ID = /^[A-Za-z0-9._-]{1,128}$/;
+const MAX_SCAN_FILES = 4096;
+
+function entries(dir) {
+  try { return fs.readdirSync(dir, { withFileTypes: true }); } catch { return []; }
+}
+
+function codexId(file) {
+  return path.basename(file, '.jsonl')
+    .replace(/^rollout-\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}-/, '');
+}
+
+function locate(root, host, id) {
+  const found = [];
+  const maxDepth = host === 'claude' ? 2 : 4;
+  let visited = 0;
+  const visit = (dir, depth) => {
+    if (depth > maxDepth || visited >= MAX_SCAN_FILES) return;
+    for (const entry of entries(dir)) {
+      if (visited++ >= MAX_SCAN_FILES) break;
+      const file = path.join(dir, entry.name);
+      if (entry.isDirectory()) visit(file, depth + 1);
+      else if (entry.isFile() || entry.isSymbolicLink()) {
+        const matches = host === 'claude'
+          ? entry.name === `${id}.jsonl`
+          : entry.name.startsWith('rollout-') && entry.name.endsWith('.jsonl')
+            && codexId(entry.name) === id;
+        if (matches) found.push(file);
+      }
+    }
+  };
+  visit(root, 0);
+  if (!found.length) return null;
+  return found.sort((a, b) => {
+    try { return fs.statSync(b).mtimeMs - fs.statSync(a).mtimeMs; } catch { return 0; }
+  })[0];
+}
+
+function containedRealFile(root, file) {
+  let realRoot;
+  let realFile;
+  try {
+    realRoot = fs.realpathSync(root);
+    realFile = fs.realpathSync(file);
+  } catch {
+    return null;
+  }
+  if (realFile !== realRoot && !realFile.startsWith(`${realRoot}${path.sep}`)) return null;
+  try { if (!fs.statSync(realFile).isFile()) return null; } catch { return null; }
+  return realFile;
+}
+
+function tailLines(file, end, maxBytes, maxRecords) {
+  const start = Math.max(0, end - maxBytes);
+  let bytes;
+  try {
+    const fd = fs.openSync(file, 'r');
+    try {
+      bytes = Buffer.alloc(end - start);
+      fs.readSync(fd, bytes, 0, bytes.length, start);
+    } finally { fs.closeSync(fd); }
+  } catch { return { lines: [], tailOffset: end }; }
+  let text = bytes.toString('utf8');
+  if (start > 0) {
+    const newline = text.indexOf('\n');
+    text = newline < 0 ? '' : text.slice(newline + 1);
+  }
+  const complete = text.endsWith('\n');
+  const lines = text.split('\n');
+  if (complete) lines.pop();
+  else lines.pop();
+  const lastNewline = bytes.lastIndexOf(0x0a);
+  const tailOffset = complete ? end
+    : (lastNewline >= 0 ? start + lastNewline + 1 : start);
+  return {
+    lines: lines.slice(-maxRecords),
+    tailOffset,
+    truncated: start > 0 || lines.length > maxRecords,
+  };
+}
+
+function maskedText(value, mask, maxChars) {
+  if (typeof value !== 'string') return null;
+  const safe = String(mask(value));
+  return safe.length <= maxChars ? { text: safe, truncated: false }
+    : { text: `${safe.slice(0, maxChars)}\n…[truncated]`, truncated: true };
+}
+
+function publicEvent(candidate, {
+  host, sessionId, mask, maxTextChars, now,
+}) {
+  if (!candidate || typeof candidate !== 'object') return null;
+  const content = maskedText(candidate.text, mask, maxTextChars);
+  const detail = maskedText(candidate.details, mask, maxTextChars);
+  const safe = (value, max = 256) => {
+    if (typeof value !== 'string' || !value) return null;
+    return String(mask(value)).slice(0, max);
+  };
+  return {
+    schemaVersion: 1,
+    sessionKey: canonicalSessionKey(host, sessionId),
+    sessionId,
+    host,
+    at: safe(candidate.at, 64) ?? now(),
+    kind: ['message', 'reasoning', 'tool-call', 'tool-result', 'status'].includes(candidate.kind)
+      ? candidate.kind : 'status',
+    actor: {
+      id: safe(candidate.actor?.id) ?? sessionId,
+      role: safe(candidate.actor?.role, 32) ?? 'system',
+      label: safe(candidate.actor?.label, 96),
+      parentId: safe(candidate.actor?.parentId),
+    },
+    target: candidate.target?.id ? {
+      id: safe(candidate.target.id),
+      role: safe(candidate.target.role, 32),
+      label: safe(candidate.target.label, 96),
+    } : null,
+    relation: safe(candidate.relation, 32),
+    text: content?.text ?? null,
+    truncated: content?.truncated ?? false,
+    details: detail?.text ?? null,
+    detailsTruncated: detail?.truncated ?? false,
+    tool: candidate.tool ? {
+      callId: safe(candidate.tool.callId),
+      name: safe(candidate.tool.name, 96),
+      category: safe(candidate.tool.category, 96),
+      status: safe(candidate.tool.status, 32),
+    } : null,
+  };
+}
+
+class TranscriptStream {
+  #host;
+  #sessionId;
+  #options;
+  #stream;
+  #tailer;
+  #seen = new Set();
+  #lastMessage = null;
+  #historyTruncated = false;
+  #published = 0;
+
+  constructor(host, sessionId, file, options) {
+    this.#host = host;
+    this.#sessionId = sessionId;
+    this.#options = options;
+    const epoch = fs.statSync(file).ino;
+    this.#stream = new LiveReplayStream({
+      capacity: options.replayCapacity,
+      prefix: `tx-${host}-${sessionId}-${epoch}`,
+    });
+    const offset = fs.statSync(file).size;
+    const history = tailLines(file, offset, options.maxHistoryBytes, options.maxHistoryRecords);
+    const candidates = [];
+    for (const raw of history.lines) {
+      try { candidates.push(...this.#adapt(JSON.parse(raw))); } catch { /* malformed line */ }
+    }
+    this.#historyTruncated = history.truncated
+      || candidates.length > options.maxHistoryEntries;
+    for (const candidate of candidates.slice(-options.maxHistoryEntries)) this.#publish(candidate);
+    this.#tailer = new JsonlTailer(file, {
+      startOffset: history.tailOffset, intervalMs: options.intervalMs,
+      canRead: () => containedRealFile(options.roots[host], file) === file,
+      onRecord: (record) => {
+        for (const candidate of this.#adapt(record)) this.#publish(candidate);
+      },
+      onError: () => {},
+    }).start();
+  }
+
+  #adapt(record) {
+    const context = {
+      sessionId: this.#sessionId,
+      observedAt: this.#options.now(),
+      actorId: record?.agentId ?? record?.session_id ?? this.#sessionId,
+      parentActorId: record?.parentSessionId ?? record?.parent_session_id,
+    };
+    return this.#host === 'claude'
+      ? adaptClaudeTranscriptRecord(record, context)
+      : adaptCodexTranscriptRecord(record, context);
+  }
+
+  #publish(candidate) {
+    const key = candidate.key;
+    if (key && this.#seen.has(key)) return;
+    if (key) {
+      this.#seen.add(key);
+      while (this.#seen.size > this.#options.replayCapacity * 2) {
+        this.#seen.delete(this.#seen.values().next().value);
+      }
+    }
+    const event = publicEvent(candidate, {
+      host: this.#host, sessionId: this.#sessionId,
+      mask: this.#options.mask, maxTextChars: this.#options.maxTextChars,
+      now: this.#options.now,
+    });
+    if (event) {
+      if (event.kind === 'message') {
+        const at = Date.parse(event.at);
+        const prior = this.#lastMessage;
+        const duplicatePair = prior
+          && prior.role === event.actor.role
+          && prior.text === event.text
+          && Number.isFinite(at) && Number.isFinite(prior.at)
+          && Math.abs(at - prior.at) <= 2_000;
+        this.#lastMessage = { role: event.actor.role, text: event.text, at };
+        if (duplicatePair) return;
+      } else {
+        this.#lastMessage = null;
+      }
+      this.#published++;
+      if (this.#published > this.#options.replayCapacity) this.#historyTruncated = true;
+      this.#stream.publish(event);
+    }
+  }
+
+  snapshot() {
+    const snapshot = this.#stream.snapshot();
+    return {
+      schemaVersion: 1, sessionKey: canonicalSessionKey(this.#host, this.#sessionId),
+      cursor: snapshot.cursor, events: snapshot.events,
+    };
+  }
+  replay(cursor) { return this.#stream.replay(cursor); }
+  /**
+   * Reconstruct retained evidence at an elapsed-time seek point. Source
+   * timestamps define chronology and ingest sequence breaks ties, making the
+   * same retained history deterministic across repeated seeks.
+   */
+  playback({ atMs = null } = {}) {
+    const snapshot = this.#stream.snapshot();
+    const ordered = [...snapshot.events].sort((a, b) => {
+      const time = Date.parse(a.at) - Date.parse(b.at);
+      return time || (a.ingestSeq - b.ingestSeq);
+    });
+    const startedMs = ordered.length ? Date.parse(ordered[0].at) : null;
+    const endedMs = ordered.length ? Date.parse(ordered.at(-1).at) : null;
+    const durationMs = startedMs == null ? 0 : Math.max(0, endedMs - startedMs);
+    const requested = atMs == null ? durationMs : Number(atMs);
+    if (!Number.isFinite(requested) || requested < 0) {
+      throw new RangeError('playback seek must be a non-negative number');
+    }
+    const seekAt = Math.min(durationMs, requested);
+    const timeline = ordered.map((event) => ({
+      ...event,
+      elapsedMs: startedMs == null ? 0 : Math.max(0, Date.parse(event.at) - startedMs),
+    }));
+    const items = timeline.filter((event) => event.elapsedMs <= seekAt);
+    // The canvas needs causal coordinates, not a second copy of potentially
+    // large transcript bodies. Keep execution events lean and leave rich,
+    // masked evidence in transcript.items.
+    const events = items.map((event) => ({
+      schemaVersion: event.schemaVersion,
+      eventId: event.eventId,
+      ingestSeq: event.ingestSeq,
+      sessionKey: event.sessionKey,
+      at: event.at,
+      elapsedMs: event.elapsedMs,
+      kind: event.kind,
+      actor: event.actor,
+      target: event.target,
+      relation: event.relation,
+      tool: event.tool,
+      truncated: event.truncated || event.detailsTruncated || false,
+    }));
+    const startAt = startedMs == null ? null : new Date(startedMs).toISOString();
+    const endAt = endedMs == null ? null : new Date(endedMs).toISOString();
+    return {
+      schemaVersion: 1,
+      sessionKey: canonicalSessionKey(this.#host, this.#sessionId),
+      host: this.#host,
+      sessionId: this.#sessionId,
+      startAt,
+      endAt,
+      durationMs,
+      truncated: this.#historyTruncated,
+      gap: this.#historyTruncated,
+      events,
+      transcript: { items },
+      range: {
+        startedAt: startAt,
+        endedAt: endAt,
+        durationMs,
+        eventCount: timeline.length,
+        truncated: this.#historyTruncated,
+      },
+      seek: {
+        requestedMs: requested,
+        atMs: seekAt,
+        eventIndex: items.length - 1,
+      },
+      live: {
+        cursor: snapshot.cursor,
+        eventsEndpoint: `/api/live/transcripts/${this.#host}/${this.#sessionId}/events`,
+      },
+    };
+  }
+  subscribe(listener) {
+    this.#stream.on('event', listener);
+    return () => this.#stream.off('event', listener);
+  }
+  close() { this.#tailer.close(); }
+}
+
+/** Registry of bounded, selected-session transcript streams. */
+export class TranscriptStreams {
+  #options;
+  #streams = new Map();
+
+  constructor(options = {}) {
+    if (typeof options.mask !== 'function') {
+      throw new Error('no secret masker available — refusing transcript streaming');
+    }
+    this.#options = {
+      roots: options.roots ?? {},
+      mask: options.mask,
+      intervalMs: Math.max(10, Math.min(60_000, Number(options.intervalMs) || 500)),
+      maxHistoryBytes: Math.max(1024, Math.min(16 * 1024 * 1024,
+        Number(options.maxHistoryBytes) || 4 * 1024 * 1024)),
+      maxHistoryRecords: Math.max(1, Math.min(10_000,
+        Number(options.maxHistoryRecords) || 1000)),
+      maxHistoryEntries: Math.max(1, Math.min(1000,
+        Number(options.maxHistoryEntries) || 100)),
+      replayCapacity: Math.max(1, Math.min(4096, Number(options.replayCapacity) || 256)),
+      maxTextChars: Math.max(256, Math.min(100_000, Number(options.maxTextChars) || 40_000)),
+      idleMs: Math.max(10, Math.min(300_000, Number(options.idleMs) || 15_000)),
+      now: options.now ?? (() => new Date().toISOString()),
+    };
+  }
+
+  open(host, id) {
+    if (!HOSTS.has(host)) throw new Error('invalid transcript host');
+    if (typeof id !== 'string' || !VALID_ID.test(id)) throw new Error('invalid session id');
+    const key = canonicalSessionKey(host, id);
+    const prior = this.#streams.get(key);
+    if (prior) {
+      if (prior.timer) clearTimeout(prior.timer);
+      prior.timer = null;
+      prior.references++;
+      return prior.stream;
+    }
+    const root = this.#options.roots[host];
+    if (typeof root !== 'string') throw new Error('transcript root unavailable');
+    const candidate = locate(root, host, id);
+    if (!candidate) throw new Error('transcript not found');
+    const real = containedRealFile(root, candidate);
+    if (!real) throw new Error('transcript outside transcript root');
+    const stream = new TranscriptStream(host, id, real, this.#options);
+    this.#streams.set(key, { stream, references: 1, timer: null });
+    return stream;
+  }
+
+  release(host, id) {
+    const key = canonicalSessionKey(host, id);
+    const entry = this.#streams.get(key);
+    if (!entry) return;
+    entry.references = Math.max(0, entry.references - 1);
+    if (entry.references || entry.timer) return;
+    entry.timer = setTimeout(() => {
+      if (entry.references) return;
+      entry.stream.close();
+      this.#streams.delete(key);
+    }, this.#options.idleMs);
+    entry.timer.unref?.();
+  }
+
+  close() {
+    for (const entry of this.#streams.values()) {
+      if (entry.timer) clearTimeout(entry.timer);
+      entry.stream.close();
+    }
+    this.#streams.clear();
+  }
+}
diff --git a/src/lib/natives.mjs b/src/lib/natives.mjs
index 4ae0cf01..06fbda0e 100644
--- a/src/lib/natives.mjs
+++ b/src/lib/natives.mjs
@@ -106,6 +106,29 @@ export function deriveBsq3Spec(dir, fallback = '^12', nodeMajor = Number(process
   return nodeCompatibleBsq3Spec(fallback, nodeMajor);
 }
 
+// package.json fields that pin better-sqlite3 to a specific spec WITHIN `dir`
+// itself (as opposed to an ancestor's override). npm's arborist requires a
+// root package's own `overrides`, `optionalDependencies`, and `dependencies`
+// entries for the same package to agree with each other AND with whatever
+// version an explicit `npm install pkg@spec` in that directory requests
+// (EOVERRIDE otherwise) — verified live: bumping only `overrides` to Node
+// 26's ^12.10.0 while `optionalDependencies` still said ^12.9.0 traded an
+// "explicit install conflicts with override" error for an "override conflicts
+// with direct dependency" one. All self-declared fields must move together.
+const SELF_SPEC_FIELDS = ['overrides', 'optionalDependencies', 'dependencies'];
+
+/** Fields in `dir`'s OWN package.json that declare a plain-semver spec for
+ *  better-sqlite3 different from `spec` — installing `spec` there would trip
+ *  npm's EOVERRIDE. Empty array when nothing conflicts (including when the
+ *  package declares no such fields at all). */
+export function selfSpecConflicts(dir, spec) {
+  const pkg = readJson(path.join(path.resolve(dir), 'package.json'), {}) ?? {};
+  return SELF_SPEC_FIELDS.filter((field) => {
+    const declared = pkg[field]?.['better-sqlite3'];
+    return isPlainSemver(declared) && declared !== spec;
+  });
+}
+
 // A truthful load-test of the binding as node resolution finds it FROM `dir`: an
 // ABI-mismatched or absent binding throws on `require` (exactly `ruflo doctor`'s
 // "Could not locate the bindings file"), so requiring it, opening :memory:, and
diff --git a/tests/admin.test.cjs b/tests/admin.test.cjs
index 2f5a01ac..523cabc4 100644
--- a/tests/admin.test.cjs
+++ b/tests/admin.test.cjs
@@ -252,6 +252,30 @@ async function main() {
       assert(!/from ['"]\.\/admin-model\.mjs['"]/.test(r.body), 'model import must be stripped at serve');
     });
 
+    await test('admin uses the dashboard theme contract without adding browser dependencies', async () => {
+      const r = await req(admin.url);
+      eq(r.status, 200);
+      assert(/<html[^>]+data-theme=["']dark["']/.test(r.body), 'page has a deterministic theme before client startup');
+      assert(r.body.includes(':root[data-theme="dark"]'), 'dark theme variables are embedded');
+      assert(r.body.includes(':root[data-theme="light"]'), 'light theme variables are embedded');
+      assert(r.body.includes("'ak-dash-theme'"), 'admin and dashboard share the persisted theme preference');
+      assert(/data-theme-toggle[^>]+aria-label=["']switch to light theme["']/.test(r.body),
+        'theme toggle announces its initial action');
+      assert(r.body.includes('prefers-color-scheme: light'), 'system theme is used when no preference is stored');
+    });
+
+    await test('admin navigation exposes an accessible tab relationship', async () => {
+      const r = await req(admin.url);
+      const tabs = [...r.body.matchAll(/<button class="seg-btn"[^>]+>/g)].map((m) => m[0]);
+      const panels = [...r.body.matchAll(/<section class="panel"[^>]+>/g)].map((m) => m[0]);
+      eq(tabs.length, 5, 'all five admin sections are tabs');
+      eq(panels.length, 5, 'all five admin sections have panels');
+      assert(tabs.every((tag) => /role="tab"/.test(tag) && /aria-controls="panel-[^"]+"/.test(tag)),
+        'each tab identifies its controlled panel');
+      assert(panels.every((tag) => /role="tabpanel"/.test(tag) && /aria-labelledby="tab-[^"]+"/.test(tag)),
+        'each panel identifies its tab');
+    });
+
     await test('AC-1: /api/admin-stats with the RIGHT token → 200 full payload', async () => {
       const r = await req(admin.url + 'api/admin-stats', { headers: { 'x-admin-token': admin.token } });
       eq(r.status, 200);
diff --git a/tests/dashboard.test.cjs b/tests/dashboard.test.cjs
index 65f8cdad..8f202360 100644
--- a/tests/dashboard.test.cjs
+++ b/tests/dashboard.test.cjs
@@ -70,6 +70,35 @@ function getRaw(port, rawPath) {
   });
 }
 
+function openSse(port, { headers = {}, onChunk = () => {}, path: route = '/api/live/events' } = {}) {
+  let req;
+  const opened = new Promise((resolve, reject) => {
+    req = http.request({
+      host: '127.0.0.1', port, path: route, method: 'GET',
+      headers: { accept: 'text/event-stream', ...headers },
+    }, (res) => {
+      res.setEncoding('utf8');
+      res.on('data', onChunk);
+      resolve(res);
+    });
+    req.on('error', reject);
+    req.end();
+  });
+  return { opened, close: () => req.destroy() };
+}
+
+function eventually(predicate, message, timeout = 1500) {
+  const started = Date.now();
+  return new Promise((resolve, reject) => {
+    const check = () => {
+      if (predicate()) return resolve();
+      if (Date.now() - started >= timeout) return reject(new Error(message));
+      setTimeout(check, 10);
+    };
+    check();
+  });
+}
+
 async function main() {
   const { startDashboard } = await import('file://' + MOD);
 
@@ -244,6 +273,20 @@ async function main() {
     assert(threw, 'no masker → throw (fail closed); silently skipping masking is the bug this guards');
   });
 
+  await test('maskTurns recursively masks nested tool arguments and results', async () => {
+    const secret = 'sk-live-NESTED012345';
+    const turns = [{
+      role: 'assistant',
+      tools: [{ name: 'shell', arguments: { command: `deploy --token ${secret}` } }],
+      result: { chunks: [{ text: `result ${secret}` }] },
+    }];
+    const out = maskTurns(turns, (s) => s.replaceAll(secret, '[MASKED]'));
+    const wire = JSON.stringify(out);
+    assert(!wire.includes(secret), 'nested tool data must pass through the server masker');
+    assert(wire.includes('[MASKED]'), 'nested strings should remain present only in masked form');
+    assert(JSON.stringify(turns).includes(secret), 'recursive masking must not mutate the source transcript');
+  });
+
   await test('maskTurns preserves the non-string attribution fields (kind, prompt)', async () => {
     // The transcript renderer labels turns from tn.kind / tn.prompt, so the
     // masking gate must pass those through untouched — it rewrites strings
@@ -443,6 +486,29 @@ async function main() {
       }
     });
 
+    await test('served HTML carries the read-only Live Sessions surface', async () => {
+      const r = await get(uiSrv.url);
+      for (const marker of [
+        'data-tab="live"', 'id="panel-live"', 'id="live-graph"',
+        'id="live-session-list"', 'id="live-transcript-list"', 'id="live-selection"',
+        'id="live-pause"', 'id="live-viewport"', 'id="live-canvas"',
+        'id="live-zoom-in"', 'id="live-zoom-out"', 'id="live-fit"',
+        'id="live-fit-selection"', 'id="live-reset-layout"',
+        'aria-label="Map controls"', 'new EventSource("/api/live/events")',
+        '"/api/live/transcripts/"',
+      ]) contains(r.body, marker);
+      for (const behavior of [
+        'addEventListener("wheel"', 'addEventListener("pointerdown"',
+        'addEventListener("pointermove"', 'setPointerCapture',
+        'Math.max(.25,Math.min(2.8', 'renderTranscript',
+      ]) contains(r.body, behavior);
+      assert(!/live-[^"]*"[^>]*>(?:send|cancel|chat|prompt)</i.test(r.body),
+        'the live surface must expose no write or chat control');
+      contains(r.body, 'window.AKDashboardOpenTranscript=function(id)');
+      contains(r.body, 'setTab("usage")');
+      contains(r.body, 'setUsageView("transcript",id)');
+    });
+
     await test('transcript labels attribute by kind — a tool result never renders as "you"', async () => {
       // The Messages API records tool results under role "user"; the renderer
       // must label from tn.kind, and the page must carry the pieces that do it:
@@ -557,8 +623,14 @@ async function main() {
       assert((await hdr({ 'sec-fetch-site': 'cross-site' })).status === 403, 'cross-site must be 403');
       assert((await hdr({ 'sec-fetch-site': 'same-site' })).status === 403, 'same-site is still another origin');
       assert((await hdr({ origin: 'https://evil.example' })).status === 403, 'a foreign Origin must be 403');
+      assert((await hdr({ origin: 'http://127.0.0.1:1' })).status === 403,
+        'a different loopback port is still a foreign origin');
+      assert((await hdr({ origin: `https://127.0.0.1:${uiSrv.port}` })).status === 403,
+        'the HTTPS origin cannot be the origin of this plain-HTTP server');
       // Our own page and non-browser clients must keep working.
       assert((await hdr({ 'sec-fetch-site': 'same-origin' })).status === 200, 'our own page must pass');
+      assert((await hdr({ origin: `http://127.0.0.1:${uiSrv.port}` })).status === 200,
+        'the exact dashboard origin must pass');
       assert((await hdr({ 'sec-fetch-site': 'none' })).status === 200, 'direct navigation must pass');
       assert((await hdr({})).status === 200, 'curl sends no fetch-metadata and must keep working');
     });
@@ -614,6 +686,390 @@ async function main() {
     await uiSrv.close();
   }
 
+  // ── Live Sessions: read-only snapshot + resumable, bounded SSE transport ──
+  const listeners = new Set();
+  const liveCalls = { start: 0, close: 0, subscribe: 0, unsubscribe: 0, replay: [] };
+  const liveEvents = [
+    { eventId: 'test:1', ingestSeq: 1, action: 'session.started', sessionId: 's1' },
+    {
+      eventId: 'test:2', ingestSeq: 2, action: 'agent.output', sessionId: 's1',
+      source: { artifact: '/Users/private/.codex/sessions/rollout-secret.jsonl' },
+      prompt: 'PRIVATE PROMPT', arguments: { token: 'PRIVATE ARGUMENT' },
+      result: 'PRIVATE RESULT', cwd: '/Users/private/Development/secret-project',
+    },
+  ];
+  const liveSnapshot = {
+    schemaVersion: 1,
+    cursor: 'test:2',
+    sessions: [{
+      id: 's1',
+      nodes: [{
+        id: 'n1',
+        source: { artifact: '/Users/private/.claude/projects/session.jsonl' },
+        response: 'PRIVATE RESPONSE',
+        toolResult: { text: 'PRIVATE TOOL RESULT' },
+        projectRoot: '/Users/private/Development/secret-project',
+      }],
+      edges: [],
+    }],
+  };
+  const live = {
+    start() { liveCalls.start++; },
+    snapshot() { return liveSnapshot; },
+    replay(cursor) {
+      liveCalls.replay.push(cursor);
+      if (cursor === 'test:1') return { reset: false, events: liveEvents.slice(1) };
+      return { reset: true, events: liveEvents };
+    },
+    subscribe(fn) {
+      liveCalls.subscribe++;
+      listeners.add(fn);
+      return () => { liveCalls.unsubscribe++; listeners.delete(fn); };
+    },
+    close() { liveCalls.close++; },
+  };
+  const liveSrv = await startDashboard({
+    port: 0, cwd: fixture, fetchStatus: async () => STUB_STATUS, usage: spyUsage().api,
+    live, liveHeartbeatMs: 100, liveMaxClients: 1,
+  });
+  let activeAtShutdown;
+  try {
+    await test('GET /api/live returns a no-store materialized snapshot and starts lazily once', async () => {
+      assert(liveCalls.start === 0, 'live collector must remain lazy until requested');
+      const r = await get(liveSrv.url + 'api/live');
+      assert(r.status === 200, 'expected 200, got ' + r.status);
+      contains(r.headers['content-type'] || '', 'application/json');
+      assert(r.headers['cache-control'] === 'no-store', 'live snapshots must never be cached');
+      assert(JSON.parse(r.body).cursor === 'test:2', 'snapshot cursor must survive');
+      assert(!r.body.includes('/Users/private'), 'snapshot provenance must not expose absolute paths');
+      for (const secret of ['PRIVATE RESPONSE', 'PRIVATE TOOL RESULT']) {
+        assert(!r.body.includes(secret), `snapshot must not expose ${secret}`);
+      }
+      await get(liveSrv.url + 'api/live');
+      assert(liveCalls.start === 1, 'live collector must start exactly once');
+    });
+
+    await test('GET /api/live/events sends init, named/id delta events and heartbeats', async () => {
+      let body = '';
+      const stream = openSse(liveSrv.port, { onChunk: (chunk) => { body += chunk; } });
+      const response = await stream.opened;
+      try {
+        assert(response.statusCode === 200, 'expected SSE 200');
+        contains(response.headers['content-type'] || '', 'text/event-stream');
+        assert(response.headers['cache-control'] === 'no-store', 'SSE must be no-store');
+        assert(response.headers.connection === 'keep-alive', 'SSE must keep the connection alive');
+        await eventually(() => body.includes('event: init'), 'initial snapshot event was not sent');
+        for (const secret of [
+          '/Users/private', 'PRIVATE PROMPT', 'PRIVATE ARGUMENT', 'PRIVATE RESULT',
+          'PRIVATE RESPONSE', 'PRIVATE TOOL RESULT',
+        ]) assert(!body.includes(secret), `SSE init/replay must not expose ${secret}`);
+        const emitted = {
+          eventId: 'test:3', ingestSeq: 3, action: 'tool.started', sessionId: 's1',
+          prompt: 'PRIVATE DELTA PROMPT',
+          args: { command: 'PRIVATE DELTA ARGUMENT' },
+          result: { text: 'PRIVATE DELTA RESULT' },
+          path: '/Users/private/Development/secret-project/private.txt',
+        };
+        for (const fn of listeners) fn(emitted);
+        await eventually(() => body.includes('id: test:3') && body.includes('event: delta'),
+          'named delta with event id was not sent');
+        for (const secret of [
+          '/Users/private', 'PRIVATE DELTA PROMPT', 'PRIVATE DELTA ARGUMENT', 'PRIVATE DELTA RESULT',
+        ]) assert(!body.includes(secret), `SSE delta must not expose ${secret}`);
+        await eventually(() => body.includes(': heartbeat'), 'heartbeat was not sent');
+        assert(!body.includes('/Users/private'), 'SSE provenance must not expose absolute paths');
+      } finally { stream.close(); }
+      await eventually(() => listeners.size === 0, 'disconnect did not remove SSE listener');
+    });
+
+    await test('Last-Event-ID resumes retained deltas and stale cursors force reset init', async () => {
+      let resumed = '';
+      const one = openSse(liveSrv.port, {
+        headers: { 'last-event-id': 'test:1' }, onChunk: (chunk) => { resumed += chunk; },
+      });
+      await one.opened;
+      try {
+        await eventually(() => resumed.includes('id: test:2'), 'retained delta was not replayed');
+        contains(resumed, '"reset":false');
+      } finally { one.close(); }
+
+      let reset = '';
+      const stale = openSse(liveSrv.port, {
+        headers: { 'last-event-id': 'test:0' }, onChunk: (chunk) => { reset += chunk; },
+      });
+      await stale.opened;
+      try {
+        await eventually(() => reset.includes('"reset":true'), 'stale cursor did not reset');
+        assert(!reset.includes('id: test:1'), 'reset must use its snapshot, not replay stale deltas');
+      } finally { stale.close(); }
+      assert(liveCalls.replay.includes('test:1') && liveCalls.replay.includes('test:0'),
+        'both Last-Event-ID values must reach replay()');
+    });
+
+    await test('cross-site live stream is rejected before subscribe/start work', async () => {
+      const before = liveCalls.subscribe;
+      const r = await new Promise((resolve, reject) => {
+        http.request({
+          host: '127.0.0.1', port: liveSrv.port, path: '/api/live/events', method: 'GET',
+          headers: { 'sec-fetch-site': 'cross-site' },
+        }, (res) => {
+          let body = '';
+          res.on('data', (chunk) => { body += chunk; });
+          res.on('end', () => resolve({ status: res.statusCode, body }));
+        }).on('error', reject).end();
+      });
+      assert(r.status === 403, 'cross-site SSE must be 403');
+      assert(liveCalls.subscribe === before, 'rejected SSE must not subscribe');
+    });
+
+    await test('an active SSE client is registered for dashboard shutdown cleanup', async () => {
+      activeAtShutdown = openSse(liveSrv.port);
+      await activeAtShutdown.opened;
+      await eventually(() => listeners.size === 1, 'active stream did not subscribe');
+      const excess = await getRaw(liveSrv.port, '/api/live/events');
+      assert(excess.status === 503, `excess SSE client must be rejected, got ${excess.status}`);
+      assert(listeners.size === 1, 'rejected client must not create a subscription');
+    });
+  } finally {
+    await liveSrv.close();
+    activeAtShutdown?.close();
+  }
+  await test('dashboard close releases SSE clients and closes the live service once', async () => {
+    assert(listeners.size === 0, 'all live listeners must be released');
+    assert(liveCalls.unsubscribe === liveCalls.subscribe, 'every subscription must be unsubscribed');
+    assert(liveCalls.close === 1, 'live service must close exactly once');
+  });
+
+  await test('SSE initialization loses neither snapshot-time nor post-replay events', async () => {
+    const raceListeners = new Set();
+    const during = {
+      eventId: 'race:1', ingestSeq: 1, sessionId: 'race-session',
+      action: 'agent.started', actor: { id: 'during', kind: 'agent' },
+    };
+    const afterReplay = {
+      eventId: 'race:2', ingestSeq: 2, sessionId: 'race-session',
+      action: 'tool.started', actor: { id: 'after-replay', kind: 'tool' },
+    };
+    let snapshotCalls = 0;
+    const raceLive = {
+      start() {},
+      async snapshot() {
+        snapshotCalls++;
+        // The event occurs while an async snapshot is being assembled and is
+        // represented in the returned materialization.
+        for (const fn of raceListeners) fn(during);
+        await Promise.resolve();
+        return {
+          schemaVersion: 1,
+          cursor: 'race:1',
+          sessions: [{
+            id: 'race-session', nodes: [{ id: 'during', kind: 'agent' }], edges: [],
+          }],
+        };
+      },
+      replay(cursor) {
+        assert(cursor === 'race:1', `unexpected race cursor ${cursor}`);
+        return {
+          reset: false,
+          // Access happens after replay() returns. Publishing from the getter
+          // deterministically exercises the replay-resolution/init handoff.
+          get events() {
+            for (const fn of raceListeners) fn(afterReplay);
+            return [];
+          },
+        };
+      },
+      subscribe(fn) {
+        raceListeners.add(fn);
+        return () => raceListeners.delete(fn);
+      },
+      close() {},
+    };
+    const raceSrv = await startDashboard({
+      port: 0, fetchStatus: async () => STUB_STATUS, usage: spyUsage().api,
+      live: raceLive, liveHeartbeatMs: 10_000,
+    });
+    let body = '';
+    const stream = openSse(raceSrv.port, { onChunk: (chunk) => { body += chunk; } });
+    try {
+      await stream.opened;
+      await eventually(() => body.includes('id: race:2'), 'post-replay event was lost');
+      assert(body.includes('"id":"during"'), 'snapshot-time event must remain in the init snapshot');
+      assert(!body.includes('id: race:1'), 'snapshot-time event must not be duplicated as a delta');
+      assert((body.match(/id: race:2/g) || []).length === 1,
+        'post-replay event must be delivered exactly once');
+      assert(snapshotCalls === 1, 'stream initialization must take one snapshot');
+    } finally {
+      stream.close();
+      await raceSrv.close();
+    }
+    assert(raceListeners.size === 0, 'race-test subscription must be cleaned up');
+  });
+
+  await test('live collector idles, restarts, cancels idle while connected, and closes once', async () => {
+    const idleCalls = { start: 0, close: 0 };
+    const idleListeners = new Set();
+    const idleLive = {
+      start() { idleCalls.start++; },
+      snapshot() { return { schemaVersion: 1, cursor: 'idle:0', sessions: [] }; },
+      replay() { return { reset: false, events: [] }; },
+      subscribe(fn) {
+        idleListeners.add(fn);
+        return () => idleListeners.delete(fn);
+      },
+      close() { idleCalls.close++; },
+    };
+    const idleSrv = await startDashboard({
+      port: 0, fetchStatus: async () => STUB_STATUS, usage: spyUsage().api,
+      live: idleLive, liveIdleMs: 40, liveHeartbeatMs: 10_000,
+    });
+    let stream;
+    try {
+      assert((await get(idleSrv.url + 'api/live')).status === 200, 'snapshot request failed');
+      assert(idleCalls.start === 1, 'snapshot must start collector once');
+      await eventually(() => idleCalls.close === 1, 'snapshot-only collector did not idle-close');
+
+      assert((await get(idleSrv.url + 'api/live')).status === 200, 'restart snapshot failed');
+      assert(idleCalls.start === 2, 'request after idle close must restart collector');
+      stream = openSse(idleSrv.port);
+      await stream.opened;
+      await new Promise((resolve) => setTimeout(resolve, 80));
+      assert(idleCalls.close === 1, 'active SSE client must cancel idle close');
+
+      stream.close();
+      stream = null;
+      await eventually(() => idleCalls.close === 2, 'last SSE disconnect did not idle-close');
+      assert(idleListeners.size === 0, 'idle close must release the SSE subscription');
+    } finally {
+      stream?.close();
+      await idleSrv.close();
+    }
+    assert(idleCalls.close === 2, 'shutdown must not double-close an already-idle collector');
+  });
+
+  await test('selected transcript SSE is separate, resumable and security hardened', async () => {
+    const listeners = new Set();
+    let closed = 0;
+    const event = {
+      schemaVersion: 1, eventId: 'tx-claude-s1:1', sessionKey: 'claude:s1',
+      sessionId: 's1', host: 'claude', kind: 'message',
+      actor: { id: 's1', role: 'assistant', label: null },
+      text: 'masked transcript text', tool: null,
+    };
+    const transcriptStream = {
+      snapshot() {
+        return { schemaVersion: 1, cursor: event.eventId,
+          sessionKey: 'claude:s1', events: [event] };
+      },
+      replay(cursor) {
+        return cursor === event.eventId
+          ? { reset: false, events: [] } : { reset: true, events: [event] };
+      },
+      subscribe(fn) {
+        listeners.add(fn);
+        return () => listeners.delete(fn);
+      },
+    };
+    const transcriptService = {
+      open(host, id) {
+        assert(host === 'claude' && id === 's1', 'route target did not reach service');
+        return transcriptStream;
+      },
+      close() { closed++; },
+    };
+    const srv = await startDashboard({
+      port: 0, fetchStatus: async () => STUB_STATUS, usage: spyUsage().api,
+      transcripts: transcriptService, liveHeartbeatMs: 10_000,
+    });
+    let body = '';
+    const stream = openSse(srv.port, {
+      path: '/api/live/transcripts/claude/s1/events',
+      headers: { 'Last-Event-ID': event.eventId },
+      onChunk: (chunk) => { body += chunk; },
+    });
+    try {
+      const response = await stream.opened;
+      assert(response.statusCode === 200, 'transcript stream must answer 200');
+      assert((response.headers['cache-control'] || '') === 'no-store', 'content must not cache');
+      assert(response.headers['x-content-type-options'] === 'nosniff', 'nosniff missing');
+      assert(response.headers['cross-origin-resource-policy'] === 'same-origin', 'CORP missing');
+      assert(response.headers['referrer-policy'] === 'no-referrer', 'referrer policy missing');
+      await eventually(() => body.includes('event: init'), 'transcript init missing');
+      assert(body.includes('masked transcript text'), 'transcript body was wrongly stripped');
+      assert(!body.includes('event: delta'), 'cursor replay duplicated the current event');
+    } finally {
+      stream.close();
+      await srv.close();
+    }
+    assert(listeners.size === 0, 'transcript subscription leaked');
+    assert(closed === 1, 'transcript service must close once');
+  });
+
+  await test('transcript route rejects malformed targets before opening a stream', async () => {
+    let opens = 0;
+    const srv = await startDashboard({
+      port: 0, fetchStatus: async () => STUB_STATUS, usage: spyUsage().api,
+      transcripts: { open() { opens++; throw new Error('should not open'); }, close() {} },
+    });
+    try {
+      assert((await getRaw(srv.port, '/api/live/transcripts/other/s1/events')).status === 400,
+        'unknown host must be 400');
+      assert((await getRaw(srv.port, '/api/live/transcripts/claude/..%2Fx/events')).status === 400,
+        'traversal id must be 400');
+      assert(opens === 0, 'invalid target reached transcript service');
+    } finally {
+      await srv.close();
+    }
+  });
+
+  await test('session playback route returns a deterministic seek manifest and releases its reader', async () => {
+    let releases = 0;
+    const playback = {
+      schemaVersion: 1, sessionKey: 'codex:s1', host: 'codex', sessionId: 's1',
+      range: { startedAt: '2026-07-27T12:00:00.000Z',
+        endedAt: '2026-07-27T12:00:03.000Z', durationMs: 3000,
+        eventCount: 1, truncated: false },
+      seek: { requestedMs: 1500, atMs: 1500, eventIndex: 0 },
+      live: { cursor: 'tx-codex-s1:1',
+        eventsEndpoint: '/api/live/transcripts/codex/s1/events' },
+      events: [{ eventId: 'tx-codex-s1:1', at: '2026-07-27T12:00:00.000Z',
+        elapsedMs: 0, text: 'masked evidence' }],
+    };
+    const srv = await startDashboard({
+      port: 0, fetchStatus: async () => STUB_STATUS, usage: spyUsage().api,
+      transcripts: {
+        open(host, id) {
+          assert(host === 'codex' && id === 's1', 'wrong playback target');
+          return {
+            playback({ atMs }) {
+              assert(atMs === 1500, 'seek offset was not parsed');
+              return playback;
+            },
+          };
+        },
+        release(host, id) {
+          assert(host === 'codex' && id === 's1', 'wrong release target');
+          releases++;
+        },
+        close() {},
+      },
+    });
+    try {
+      const r = await get(srv.url + 'api/live/playback/codex/s1?at=1500');
+      assert(r.status === 200, 'playback request failed');
+      assert(r.headers['cache-control'] === 'no-store', 'playback content must not cache');
+      assert(JSON.parse(r.body).live.cursor === 'tx-codex-s1:1', 'live handoff cursor missing');
+      assert((await get(srv.url + 'api/live/playback/codex/s1?at=NaN')).status === 400,
+        'invalid seek must be rejected');
+      assert((await getRaw(srv.port,
+        '/api/live/playback/codex/..%2Fx')).status === 400,
+      'playback traversal target must be rejected');
+    } finally {
+      await srv.close();
+    }
+    assert(releases === 1, 'playback reader was not released');
+  });
+
   console.log(`\n${failed === 0 ? '\x1b[32m' : '\x1b[31m'}${passed} passed, ${failed} failed\x1b[0m`);
   process.exit(failed === 0 ? 0 : 1);
 }
diff --git a/tests/kit/codex-state.test.mjs b/tests/kit/codex-state.test.mjs
index 12f5343b..7e539387 100644
--- a/tests/kit/codex-state.test.mjs
+++ b/tests/kit/codex-state.test.mjs
@@ -20,11 +20,17 @@ function fixtureDb(dir, name = 'state_5.sqlite') {
   const db = new DatabaseSync(file);
   db.exec(`CREATE TABLE threads (
     id TEXT PRIMARY KEY, thread_source TEXT, source TEXT, model TEXT,
-    git_branch TEXT, tokens_used INTEGER);`);
+    git_branch TEXT, tokens_used INTEGER, agent_nickname TEXT, agent_role TEXT,
+    title TEXT, name TEXT, cwd TEXT, provider TEXT, status TEXT);`);
   db.exec(`CREATE TABLE thread_spawn_edges (
     parent_thread_id TEXT, child_thread_id TEXT, status TEXT);`);
-  db.prepare('INSERT INTO threads VALUES (?,?,?,?,?,?)').run('parent-1', 'user', 'cli', 'gpt-5.6', 'main', 21_500_000);
-  db.prepare('INSERT INTO threads VALUES (?,?,?,?,?,?)').run('child-1', 'subagent', 'subagent', 'gpt-5.6', 'main', 1_000_000);
+  db.prepare('INSERT INTO threads VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)')
+    .run('parent-1', 'user', 'cli', 'gpt-5.6', 'main', 21_500_000, null, null,
+      'private parent task', 'private parent name', '/Users/private/agentic-kit', 'openai', 'running');
+  db.prepare('INSERT INTO threads VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)')
+    .run('child-1', 'subagent', 'subagent', 'gpt-5.6', 'main', 1_000_000,
+      'Bohr', 'tester', 'private child task', 'private child name',
+      '/Users/private/agentic-kit', 'openai', 'running');
   db.prepare('INSERT INTO thread_spawn_edges VALUES (?,?,?)').run('parent-1', 'child-1', 'open');
   db.close();
   return file;
@@ -50,6 +56,11 @@ test('readCodexState reads threads and spawn edges', () => {
   assert.equal(ledger.threads.get('parent-1').threadSource, 'user');
   assert.equal(ledger.threads.get('parent-1').tokensUsed, 21_500_000);
   assert.equal(ledger.threads.get('child-1').threadSource, 'subagent');
+  assert.equal(ledger.threads.get('child-1').agentNickname, 'Bohr');
+  assert.equal(ledger.threads.get('child-1').agentRole, 'tester');
+  assert.equal(ledger.threads.get('child-1').project, 'agentic-kit');
+  assert.equal(ledger.threads.get('child-1').provider, 'openai');
+  assert.equal(JSON.stringify([...ledger.threads.values()]).includes('private'), false);
   assert.equal(ledger.parents.get('child-1'), 'parent-1');
 });
 
diff --git a/tests/kit/dashboard-live-source.test.mjs b/tests/kit/dashboard-live-source.test.mjs
new file mode 100644
index 00000000..e291b292
--- /dev/null
+++ b/tests/kit/dashboard-live-source.test.mjs
@@ -0,0 +1,23 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import path from 'node:path';
+import { parseLiveSources } from '../../src/commands/x/dashboard.mjs';
+
+test('dashboard parses repeatable explicit structured live sources', () => {
+  const cwd = path.resolve('/tmp/ak-live-source-fixture');
+  assert.deepEqual(parseLiveSources([
+    'ruflo=.claude-flow/live.jsonl',
+    'aqe=/tmp/aqe.jsonl',
+    'dual-run=plans/run.jsonl',
+  ], cwd), [
+    { surface: 'ruflo', file: path.resolve(cwd, '.claude-flow/live.jsonl') },
+    { surface: 'aqe', file: path.resolve('/tmp/aqe.jsonl') },
+    { surface: 'dual-run', file: path.resolve(cwd, 'plans/run.jsonl') },
+  ]);
+});
+
+test('dashboard rejects ambiguous or unsupported live-source specifications', () => {
+  for (const value of ['ruflo', 'plugin=events.jsonl', 'aqe=', '=events.jsonl']) {
+    assert.throws(() => parseLiveSources(value, '/tmp'), /invalid --live-source/);
+  }
+});
diff --git a/tests/kit/heal-natives.test.mjs b/tests/kit/heal-natives.test.mjs
index d6f8cb3f..62b15ced 100644
--- a/tests/kit/heal-natives.test.mjs
+++ b/tests/kit/heal-natives.test.mjs
@@ -189,6 +189,48 @@ test('ensureNativeBsq3 installs the tree-derived override spec, never the hardco
   fs.rmSync(dir, { recursive: true, force: true });
 });
 
+test('ensureNativeBsq3 reconciles a self-declared optionalDependencies pin before installing (EOVERRIDE fix)', async () => {
+  // Live regression: @claude-flow/cli's OWN package.json pinned better-sqlite3
+  // via both `overrides` (already bumped to Node 26's ^12.10.0) and
+  // `optionalDependencies` (still the stale ^12.9.0). npm requires a root
+  // package's self-declared fields for the same dependency to agree, so the
+  // stale optionalDependencies entry alone triggered EOVERRIDE even though the
+  // derived install spec matched `overrides`.
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-heal-selfconflict-'));
+  fs.writeFileSync(path.join(dir, 'package.json'), JSON.stringify({
+    name: '@claude-flow/cli',
+    overrides: { 'better-sqlite3': '^12.10.0' },
+    optionalDependencies: { 'better-sqlite3': '^12.9.0' },
+  }));
+  const calls = [];
+  const runner = async (cmd, args, opts) => {
+    calls.push({ cmd, args, cwd: opts?.cwd });
+    if (cmd === 'npm' && args[0] === 'pkg') return { code: 0, stdout: '', stderr: '' };
+    if (args[0] === 'install' && String(args[1]).startsWith('better-sqlite3')) {
+      const pkg = path.join(opts.cwd, 'node_modules', 'better-sqlite3');
+      fs.mkdirSync(path.join(pkg, 'build', 'Release'), { recursive: true });
+      fs.writeFileSync(path.join(pkg, 'package.json'), JSON.stringify({ name: 'better-sqlite3', version: '12.10.0' }));
+      fs.writeFileSync(path.join(pkg, BINDING), '');
+      return { code: 0, stdout: '', stderr: '' };
+    }
+    return { code: 0, stdout: '', stderr: '' };
+  };
+
+  const r = await ensureNativeBsq3(dir, { runner });
+
+  assert.equal(r.ok, true, 'heal succeeds once the self-declared fields are reconciled');
+  const pkgSetCalls = calls.filter((c) => c.args[0] === 'pkg' && c.args[1] === 'set');
+  assert.ok(pkgSetCalls.some((c) => c.args[2] === 'optionalDependencies.better-sqlite3=^12.10.0'),
+    `optionalDependencies reconciled to the derived spec before install (saw ${JSON.stringify(calls.map((c) => c.args))})`);
+  assert.ok(!pkgSetCalls.some((c) => c.args[2].startsWith('overrides.')),
+    'overrides already agreed with the derived spec — left untouched');
+  const pkgSetIdx = calls.findIndex((c) => c.args[0] === 'pkg');
+  const installIdx = calls.findIndex((c) => c.args[0] === 'install');
+  assert.ok(pkgSetIdx >= 0 && pkgSetIdx < installIdx, 'reconciliation runs before the install');
+  assert.equal(bsq3IsNative(dir), true);
+  fs.rmSync(dir, { recursive: true, force: true });
+});
+
 // ── FR-1: healNatives also heals the ruflo memory runtime contexts ──────────
 
 test('healNatives heals @claude-flow/memory + /cli with each tree\'s derived spec (AC-1)', async () => {
diff --git a/tests/kit/live-adapters.test.mjs b/tests/kit/live-adapters.test.mjs
new file mode 100644
index 00000000..d2819006
--- /dev/null
+++ b/tests/kit/live-adapters.test.mjs
@@ -0,0 +1,139 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  adaptClaudeRecord, adaptCodexRecord, adaptCodexLedger, adaptStructuredEvent,
+  adaptDualRunRecord,
+} from '../../src/lib/live/index.mjs';
+
+const now = '2026-07-27T12:00:00Z';
+
+test('Claude adapter emits tool metadata but never prompt, input or artifact path', () => {
+  const events = adaptClaudeRecord({
+    type: 'assistant', sessionId: 'c1', timestamp: now,
+    message: {
+      model: 'claude-x', content: [{
+        type: 'tool_use', id: 'tool-1', name: 'Read',
+        input: { file_path: '/secret/file', token: 'credential' },
+      }],
+    },
+  }, { observedAt: now, artifact: '/Users/private/c1.jsonl' });
+  assert.equal(events.length, 2);
+  assert.equal(events[1].action, 'tool.started');
+  assert.equal(events[1].target.id, 'tool-1');
+  assert.equal(events[1].target.label, 'Read');
+  const json = JSON.stringify(events);
+  assert.ok(!json.includes('/secret/file'));
+  assert.ok(!json.includes('/Users/private'));
+});
+
+test('Claude sidechain without agent id is explicitly inferred', () => {
+  const [event] = adaptClaudeRecord({
+    type: 'assistant', sessionId: 'c1', isSidechain: true, timestamp: now,
+    message: { content: [] },
+  }, { observedAt: now });
+  assert.equal(event.actor.kind, 'subagent');
+  assert.equal(event.source.confidence, 'inferred');
+});
+
+test('Codex adapter handles session, tool call and tool result fixture shapes', () => {
+  const meta = { type: 'session_meta', timestamp: now, payload: {
+    id: 'x1', model: 'gpt-x', thread_source: 'subagent', cwd: '/secret/project',
+  } };
+  const [started] = adaptCodexRecord(meta, { observedAt: now });
+  assert.equal(started.actor.kind, 'subagent');
+  assert.equal(started.actor.provider, null);
+  assert.equal(started.source.fields.model, 'observed');
+  const [tool] = adaptCodexRecord({
+    type: 'response_item', timestamp: now,
+    payload: { type: 'function_call', call_id: 'call-1', name: 'exec', arguments: 'secret' },
+  }, { sessionId: 'x1', observedAt: now });
+  assert.equal(tool.target.id, 'call-1');
+  assert.equal(tool.target.label, 'exec');
+  assert.ok(!JSON.stringify(tool).includes('secret'));
+  const [done] = adaptCodexRecord({
+    type: 'response_item', timestamp: now,
+    payload: { type: 'function_call_output', call_id: 'call-1', output: 'private' },
+  }, { sessionId: 'x1', observedAt: now });
+  assert.equal(done.status, 'completed');
+  assert.ok(!JSON.stringify(done).includes('private'));
+});
+
+test('Codex ledger creates authoritative spawn edges', () => {
+  const ledger = {
+    parents: new Map([['child', 'parent']]),
+    threads: new Map([
+      ['parent', { model: 'gpt-x', project: 'agentic-kit', provider: 'openai' }],
+      ['child', { tokensUsed: 42, agentNickname: 'Bohr', agentRole: 'tester' }],
+    ]),
+  };
+  const events = adaptCodexLedger(ledger, { observedAt: now });
+  const event = events.find((candidate) => candidate.action === 'agent.spawned');
+  assert.equal(event.action, 'agent.spawned');
+  assert.equal(event.target.id, 'child');
+  assert.equal(event.target.label, 'Bohr');
+  assert.equal(event.target.role, 'tester');
+  assert.equal(event.source.confidence, 'observed');
+  assert.equal(event.source.fields.hierarchy, 'observed');
+  assert.ok(!JSON.stringify(events).includes('/Users/'));
+});
+
+test('turn_context contributes safe model metadata without content or cwd', () => {
+  const [event] = adaptCodexRecord({
+    type: 'turn_context', timestamp: now,
+    payload: { model: 'gpt-safe', cwd: '/Users/private/agentic-kit', content: 'private' },
+  }, { sessionId: 'x1', project: 'agentic-kit', observedAt: now });
+  assert.equal(event.action, 'session.metadata');
+  assert.equal(event.actor.model, 'gpt-safe');
+  assert.equal(event.project, 'agentic-kit');
+  const json = JSON.stringify(event);
+  assert.ok(!json.includes('/Users/private'));
+  assert.ok(!json.includes('private'));
+});
+
+test('structured adapter accepts bounded ruflo and AQE events only', () => {
+  const [event] = adaptStructuredEvent({
+    sessionId: 's', agentId: 'a', event: 'gate.completed', status: 'completed',
+    output: 'must not leak',
+  }, { surface: 'aqe', adapter: 'aqe-hook', observedAt: now });
+  assert.equal(event.surface, 'aqe');
+  assert.ok(!JSON.stringify(event).includes('must not leak'));
+  assert.deepEqual(adaptStructuredEvent({}, { surface: 'aqe' }), []);
+});
+
+test('explicit tool names classify skill, plugin and MCP nodes without inspecting input', () => {
+  for (const [name, kind] of [
+    ['Skill', 'skill'], ['plugin:review', 'plugin'], ['mcp__ruflo__swarm_status', 'mcp'],
+  ]) {
+    const events = adaptClaudeRecord({
+      type: 'assistant', sessionId: 'c1', timestamp: now,
+      message: { content: [{ type: 'tool_use', id: name, name, input: { secret: 'private' } }] },
+    }, { observedAt: now });
+    assert.equal(events[1].target.kind, kind);
+    assert.ok(!JSON.stringify(events).includes('private'));
+  }
+});
+
+test('tool identity has a dedicated allowlisted field without carrying arguments', () => {
+  const events = adaptCodexRecord({
+    type: 'response_item', timestamp: '2026-07-27T10:00:00.000Z',
+    payload: {
+      type: 'function_call', call_id: 'call-safe-name', name: 'exec_command',
+      arguments: '{"command":"token sk-private-never-serialize"}',
+    },
+  }, {
+    sessionId: 's-tool-name', project: 'agentic-kit',
+    observedAt: '2026-07-27T10:00:00.000Z',
+  });
+  assert.equal(events[0].attributes.toolName, 'exec_command');
+  assert.equal(JSON.stringify(events).includes('sk-private-never-serialize'), false);
+});
+
+test('dual-run planned topology requires an explicit plan record', () => {
+  const events = adaptDualRunRecord({
+    type: 'dual-run.plan', runId: 'run-1',
+    steps: [{ id: 'architect', host: 'claude' }, { id: 'coder', host: 'codex' }],
+  }, { observedAt: now, artifact: 'run.jsonl' });
+  assert.equal(events.length, 2);
+  assert.ok(events.every((event) => event.source.confidence === 'planned'));
+  assert.deepEqual(adaptDualRunRecord({ type: 'routing.config', runId: 'x', steps: [] }), []);
+});
diff --git a/tests/kit/live-core.test.mjs b/tests/kit/live-core.test.mjs
new file mode 100644
index 00000000..c8686803
--- /dev/null
+++ b/tests/kit/live-core.test.mjs
@@ -0,0 +1,426 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+  createLiveEvent, LiveReplayStream, emptyLiveProjection,
+  reduceLiveEvent, resolveProjectLabel, serializeLiveProjection,
+  sweepLiveProjection, stableProjectKey,
+} from '../../src/lib/live/index.mjs';
+
+const base = (over = {}) => ({
+  sessionId: 's1', observedAt: '2026-07-27T12:00:00Z',
+  host: 'claude', surface: 'native',
+  actor: { id: 's1', kind: 'session', provider: 'anthropic' },
+  action: 'session.started', status: 'running',
+  source: { adapter: 'fixture', confidence: 'observed' },
+  ...over,
+});
+
+test('event schema constructs an allowlisted DTO and cannot leak transcript content', () => {
+  const event = createLiveEvent({
+    ...base(), prompt: 'secret prompt', message: { content: 'secret response' },
+    source: { adapter: 'fixture', confidence: 'observed', raw: 'secret' },
+    attributes: { durationMs: -5, toolCategory: 'Read', arguments: '/private/file' },
+  });
+  assert.equal(event.schemaVersion, 1);
+  assert.equal(event.attributes.durationMs, 0);
+  assert.equal(event.attributes.toolCategory, 'Read');
+  const json = JSON.stringify(event);
+  for (const secret of ['secret prompt', 'secret response', '/private/file']) {
+    assert.ok(!json.includes(secret));
+  }
+});
+
+test('event schema rejects records without stable correlation keys', () => {
+  assert.throws(() => createLiveEvent({ action: 'x', actor: { id: 'a' } }), /sessionId/);
+});
+
+test('event schema preserves explicit blocked evidence', () => {
+  assert.equal(createLiveEvent(base({ status: 'blocked' })).status, 'blocked');
+});
+
+test('event schema assigns privacy-safe project and host-qualified session identities', () => {
+  const event = createLiveEvent(base({
+    sessionId: 'shared:id',
+    project: '/Users/private/work/Visible Project',
+  }));
+  assert.equal(event.project, 'Visible Project');
+  assert.equal(event.projectKey, stableProjectKey('Visible Project'));
+  assert.equal(event.sessionKey, 'claude:shared:id');
+  assert.ok(!JSON.stringify(event).includes('/Users/private'));
+});
+
+test('project identity resolves linked and retained worktrees to their owning repository', () => {
+  const root = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-live-project-'));
+  const repository = path.join(root, 'agentic-kit');
+  const worktree = path.join(root, 'm3-multi-provider-persona-grounding');
+  fs.mkdirSync(worktree, { recursive: true });
+  fs.writeFileSync(path.join(worktree, '.git'),
+    `gitdir: ${path.join(repository, '.git', 'worktrees', 'm3')}\n`);
+
+  assert.equal(resolveProjectLabel(worktree), 'agentic-kit');
+  assert.equal(resolveProjectLabel(
+    '/Development/agentic-kit/.claude/worktrees/m3-multi-provider-persona-grounding',
+  ), 'agentic-kit');
+  assert.equal(resolveProjectLabel('/Development/agentic-kit'), 'agentic-kit');
+});
+
+test('replay stream assigns monotonic ids, bounds history and detects stale cursors', () => {
+  const stream = new LiveReplayStream({ capacity: 2, prefix: 'live' });
+  const one = stream.publish(createLiveEvent(base()));
+  const two = stream.publish(createLiveEvent(base({ action: 'agent.output' })));
+  const three = stream.publish(createLiveEvent(base({ action: 'session.completed' })));
+  assert.deepEqual([one.eventId, two.eventId, three.eventId], ['live:1', 'live:2', 'live:3']);
+  assert.deepEqual(stream.replay().events.map((e) => e.eventId), ['live:2', 'live:3']);
+  assert.deepEqual(stream.replay('live:2').events.map((e) => e.eventId), ['live:3']);
+  assert.equal(stream.replay('live:1').reset, false);
+  assert.equal(stream.replay('live:0').reset, true);
+  assert.equal(stream.replay('wrong:2').reset, true);
+});
+
+test('projection adds typed nodes and stable relationship edges immutably', () => {
+  const event = {
+    ...createLiveEvent(base({
+      action: 'agent.spawned', target: { id: 'child', kind: 'subagent' },
+    })),
+    eventId: 'ak:1', ingestSeq: 1,
+  };
+  const empty = emptyLiveProjection();
+  const projection = reduceLiveEvent(empty, event);
+  assert.equal(empty.sessions.size, 0);
+  const json = serializeLiveProjection(projection);
+  assert.equal(json.cursor, 'ak:1');
+  assert.deepEqual(json.sessions[0].nodes.map((n) => n.id), ['s1', 'child']);
+  assert.equal(json.sessions[0].edges[0].confidence, 'observed');
+});
+
+test('projection preserves safe display metadata and event provenance on resource nodes', () => {
+  const started = {
+    ...createLiveEvent(base({
+      action: 'tool.started',
+      target: { id: 'call-1', kind: 'tool', label: 'Read' },
+      attributes: { toolCategory: 'Read' },
+    })), eventId: 'ak:1',
+  };
+  const completed = {
+    ...createLiveEvent(base({
+      action: 'tool.completed', status: 'completed',
+      target: { id: 'call-1', kind: 'tool' },
+      attributes: { durationMs: 125 },
+    })), eventId: 'ak:2',
+  };
+  const projection = reduceLiveEvent(reduceLiveEvent(emptyLiveProjection(), started), completed);
+  const node = projection.sessions.get('claude:s1').nodes.get('call-1');
+  assert.equal(node.label, 'Read');
+  assert.equal(node.status, 'completed');
+  assert.equal(node.lastAction, 'tool.completed');
+  assert.equal(node.sourceAdapter, 'fixture');
+  assert.equal(node.durationMs, 125);
+});
+
+test('projection is idempotent by eventId and preserves terminal state', () => {
+  const started = {
+    ...createLiveEvent(base()), eventId: 'ak:1', ingestSeq: 1,
+  };
+  const completed = {
+    ...createLiveEvent(base({ action: 'session.completed', status: 'completed' })),
+    eventId: 'ak:2', ingestSeq: 2,
+  };
+  const lateRunning = {
+    ...createLiveEvent(base({ action: 'agent.output', status: 'running' })),
+    eventId: 'ak:3', ingestSeq: 3,
+  };
+  const one = reduceLiveEvent(emptyLiveProjection(), started);
+  assert.equal(reduceLiveEvent(one, started), one);
+  const final = reduceLiveEvent(reduceLiveEvent(one, completed), lateRunning);
+  assert.equal(final.sessions.get('claude:s1').status, 'completed');
+  assert.equal(final.sessions.get('claude:s1').nodes.get('s1').status, 'completed');
+});
+
+test('child-before-parent updates placeholder and clock skew does not regress cursor', () => {
+  const childFirst = {
+    ...createLiveEvent(base({
+      action: 'agent.spawned', target: { id: 'child', kind: 'subagent' },
+      observedAt: '2026-07-27T12:00:10Z',
+    })), eventId: 'ak:1', ingestSeq: 1,
+  };
+  const childObserved = {
+    ...createLiveEvent(base({
+      actor: { id: 'child', kind: 'subagent', role: 'reviewer' },
+      action: 'agent.output', observedAt: '2026-07-27T12:00:05Z',
+    })), eventId: 'ak:2', ingestSeq: 2,
+  };
+  const projection = reduceLiveEvent(
+    reduceLiveEvent(emptyLiveProjection(), childFirst), childObserved,
+  );
+  assert.equal(projection.cursor, 'ak:2');
+  assert.equal(projection.sessions.get('claude:s1').nodes.get('child').role, 'reviewer');
+});
+
+test('later generic worker activity does not erase an authoritative ledger identity', () => {
+  const spawned = {
+    ...createLiveEvent(base({
+      action: 'agent.spawned',
+      target: { id: 'child', kind: 'subagent', label: 'Bohr', role: 'tester' },
+    })), eventId: 'ak:1',
+  };
+  const active = {
+    ...createLiveEvent(base({
+      actor: { id: 'child', kind: 'subagent', role: 'worker' },
+      action: 'agent.output',
+    })), eventId: 'ak:2',
+  };
+  const projection = reduceLiveEvent(
+    reduceLiveEvent(emptyLiveProjection(), spawned), active,
+  );
+  const child = projection.sessions.get('claude:s1').nodes.get('child');
+  assert.equal(child.label, 'Bohr');
+  assert.equal(child.role, 'tester');
+});
+
+test('metadata-only hierarchy evidence does not regress a running actor lifecycle', () => {
+  const running = {
+    ...createLiveEvent(base()), eventId: 'ak:1',
+  };
+  const hierarchy = {
+    ...createLiveEvent(base({
+      action: 'agent.spawned', status: 'unknown',
+      target: { id: 'child', kind: 'subagent' },
+    })), eventId: 'ak:2',
+  };
+  const projection = reduceLiveEvent(
+    reduceLiveEvent(emptyLiveProjection(), running), hierarchy,
+  );
+  assert.equal(projection.sessions.get('claude:s1').nodes.get('s1').status, 'running');
+});
+
+test('field provenance can explicitly record an assumption without upgrading source confidence', () => {
+  const event = createLiveEvent(base({
+    source: {
+      adapter: 'fixture', confidence: 'observed',
+      fields: { provider: 'assumed' },
+    },
+  }));
+  assert.equal(event.source.confidence, 'observed');
+  assert.equal(event.source.fields.provider, 'assumed');
+});
+
+test('lifecycle sweep marks quiescent and expired but never completed', () => {
+  const event = {
+    ...createLiveEvent(base()), eventId: 'ak:1', ingestSeq: 1,
+  };
+  const active = reduceLiveEvent(emptyLiveProjection(), event);
+  const quiet = sweepLiveProjection(active, {
+    now: '2026-07-27T12:01:00Z', quiescentMs: 10_000, expiryMs: 120_000,
+  });
+  assert.equal(quiet.sessions.get('claude:s1').lifecycle, 'quiescent');
+  assert.equal(quiet.sessions.get('claude:s1').status, 'running');
+  const expired = sweepLiveProjection(quiet, {
+    now: '2026-07-27T12:03:00Z', quiescentMs: 10_000, expiryMs: 120_000,
+  });
+  assert.equal(expired.sessions.get('claude:s1').lifecycle, 'expired');
+  assert.equal(expired.sessions.get('claude:s1').status, 'running');
+});
+
+test('only fresh running execution evidence is active; ledger and unknown evidence are historical', () => {
+  const unknown = {
+    ...createLiveEvent(base({
+      action: 'session.discovered', status: 'unknown',
+      source: { adapter: 'codex-state', confidence: 'observed' },
+    })), eventId: 'ak:1',
+  };
+  const ledgerRunning = {
+    ...createLiveEvent(base({
+      action: 'session.discovered', status: 'running',
+      source: { adapter: 'codex-state', confidence: 'observed' },
+    })), eventId: 'ak:2',
+  };
+  const freshRunning = {
+    ...createLiveEvent(base({
+      action: 'agent.output', status: 'running',
+      source: { adapter: 'codex-rollout', confidence: 'observed' },
+    })), eventId: 'ak:3',
+  };
+  const first = reduceLiveEvent(emptyLiveProjection(), unknown);
+  assert.equal(first.sessions.get('claude:s1').lifecycle, 'historical');
+  const second = reduceLiveEvent(first, ledgerRunning);
+  assert.equal(second.sessions.get('claude:s1').lifecycle, 'historical');
+  const active = reduceLiveEvent(second, freshRunning);
+  assert.equal(active.sessions.get('claude:s1').lifecycle, 'active');
+});
+
+test('project live counts require both running status and active lifecycle', () => {
+  let projection = emptyLiveProjection();
+  for (const [id, status, adapter] of [
+    ['unknown', 'unknown', 'codex-state'],
+    ['ledger-running', 'running', 'codex-state'],
+    ['fresh-running', 'running', 'codex-rollout'],
+  ]) {
+    projection = reduceLiveEvent(projection, {
+      ...createLiveEvent(base({
+        sessionId: id, project: 'demo', status,
+        actor: { id, kind: 'session' },
+        action: adapter === 'codex-state' ? 'session.discovered' : 'session.started',
+        source: { adapter, confidence: 'observed' },
+      })), eventId: `ak:${id}`,
+    });
+  }
+  assert.equal(serializeLiveProjection(projection).projects[0].liveCount, 1);
+});
+
+test('synthetic load remains bounded in replay and projection', () => {
+  const stream = new LiveReplayStream({ capacity: 100 });
+  let projection = emptyLiveProjection();
+  for (let i = 0; i < 2_000; i++) {
+    const event = stream.publish(createLiveEvent(base({
+      actor: { id: `agent-${i}`, kind: 'agent' }, action: 'agent.output',
+    })));
+    projection = reduceLiveEvent(projection, event);
+  }
+  assert.equal(stream.snapshot().events.length, 100);
+  assert.equal(projection.sessions.get('claude:s1').nodes.size, 1_000);
+});
+
+test('projection bounds resource nodes while preferentially retaining semantic topology', () => {
+  let projection = emptyLiveProjection();
+  const semantic = [
+    { id: 'session', kind: 'session' },
+    { id: 'agent', kind: 'agent' },
+    { id: 'child', kind: 'subagent' },
+    { id: 'gate', kind: 'gate' },
+  ];
+  let seq = 0;
+  for (const actor of semantic) {
+    seq++;
+    projection = reduceLiveEvent(projection, {
+      ...createLiveEvent(base({
+        sessionId: 'session', actor, action: 'agent.output',
+      })), eventId: `ak:${seq}`,
+    }, { maxNodesPerSession: 8 });
+  }
+  for (let i = 0; i < 50; i++) {
+    seq++;
+    projection = reduceLiveEvent(projection, {
+      ...createLiveEvent(base({
+        sessionId: 'session', actor: semantic[0], action: 'tool.completed',
+        status: 'completed', target: { id: `tool-${i}`, kind: 'tool' },
+      })), eventId: `ak:${seq}`,
+    }, { maxNodesPerSession: 8 });
+  }
+  const nodes = projection.sessions.get('claude:session').nodes;
+  assert.equal(nodes.size, 8);
+  for (const id of semantic.map((node) => node.id)) assert.ok(nodes.has(id), id);
+});
+
+test('projection bounds total sessions and evicts terminal sessions first', () => {
+  let projection = emptyLiveProjection();
+  for (const [i, status] of ['completed', 'running', 'running'].entries()) {
+    projection = reduceLiveEvent(projection, {
+      ...createLiveEvent(base({
+        sessionId: `s${i}`, actor: { id: `s${i}`, kind: 'session' }, status,
+      })), eventId: `ak:${i}`,
+    }, { maxSessions: 2 });
+  }
+  assert.deepEqual([...projection.sessions.keys()], ['claude:s1', 'claude:s2']);
+});
+
+test('projection keeps identical provider session IDs distinct and catalogs them by project', () => {
+  const claude = {
+    ...createLiveEvent(base({
+      sessionId: 'same', project: '/private/one/Project Alpha',
+      host: 'claude', actor: { id: 'same', kind: 'session', provider: 'anthropic' },
+    })), eventId: 'ak:1',
+  };
+  const codex = {
+    ...createLiveEvent(base({
+      sessionId: 'same', project: 'Project Alpha', host: 'codex',
+      actor: { id: 'same', kind: 'session', provider: 'openai' },
+      action: 'session.completed', status: 'completed',
+      observedAt: '2026-07-27T12:01:00Z',
+    })), eventId: 'ak:2',
+  };
+  const snapshot = serializeLiveProjection(
+    reduceLiveEvent(reduceLiveEvent(emptyLiveProjection(), claude), codex),
+  );
+  assert.equal(snapshot.sessions.length, 2);
+  assert.deepEqual(snapshot.sessions.map((session) => session.key).sort(), [
+    'claude:same', 'codex:same',
+  ]);
+  assert.equal(snapshot.projects.length, 1);
+  assert.deepEqual(snapshot.projects[0], {
+    id: stableProjectKey('Project Alpha'),
+    label: 'Project Alpha',
+    sessions: ['claude:same', 'codex:same'],
+    sessionCount: 2,
+    childSessionCount: 0,
+    liveCount: 1,
+    completedCount: 1,
+    providers: { anthropic: 1, openai: 1 },
+    updatedAt: '2026-07-27T12:01:00.000Z',
+  });
+});
+
+test('projection reconciles late parentage and catalogs only root sessions', () => {
+  const childDiscovered = {
+    ...createLiveEvent(base({
+      sessionId: 'child', host: 'codex',
+      actor: { id: 'child', kind: 'session', provider: 'openai' },
+      action: 'session.discovered', status: 'unknown',
+      observedAt: '2026-07-27T12:05:00Z',
+    })), eventId: 'ak:1',
+  };
+  const authoritativeParentage = {
+    ...createLiveEvent(base({
+      sessionId: 'child', parentSessionId: 'root', host: 'codex',
+      actor: { id: 'child', kind: 'session', provider: 'openai' },
+      action: 'session.metadata', status: 'unknown',
+      source: { adapter: 'codex-state', confidence: 'observed' },
+      observedAt: '2026-07-27T12:10:00Z',
+    })), eventId: 'ak:2',
+  };
+  const root = {
+    ...createLiveEvent(base({
+      sessionId: 'root', host: 'codex',
+      actor: { id: 'root', kind: 'session', provider: 'openai' },
+      observedAt: '2026-07-27T12:06:00Z',
+    })), eventId: 'ak:3',
+  };
+  const projection = [childDiscovered, authoritativeParentage, root]
+    .reduce((state, event) => reduceLiveEvent(state, event), emptyLiveProjection());
+  const snapshot = serializeLiveProjection(projection);
+
+  assert.equal(snapshot.sessions.find((session) => session.id === 'child').parentSessionId, 'root');
+  assert.equal(snapshot.sessions.find((session) => session.id === 'child').updatedAt,
+    '2026-07-27T12:05:00.000Z');
+  assert.deepEqual(snapshot.projects[0].sessions, ['codex:root']);
+  assert.equal(snapshot.projects[0].sessionCount, 1);
+  assert.equal(snapshot.projects[0].childSessionCount, 1);
+});
+
+test('hierarchy serialization keeps orphans reachable and bounds parent cycles', () => {
+  const events = [
+    { sessionId: 'orphan', parentSessionId: 'missing' },
+    { sessionId: 'cycle-a', parentSessionId: 'cycle-b' },
+    { sessionId: 'cycle-b', parentSessionId: 'cycle-a' },
+  ].map((shape, index) => ({
+    ...createLiveEvent(base({
+      ...shape, host: 'codex',
+      actor: { id: shape.sessionId, kind: 'session', provider: 'openai' },
+      action: 'session.discovered', status: 'unknown',
+    })),
+    eventId: `ak:${index + 1}`,
+  }));
+  const snapshot = serializeLiveProjection(events.reduce(
+    (state, event) => reduceLiveEvent(state, event), emptyLiveProjection(),
+  ));
+  const byId = Object.fromEntries(snapshot.sessions.map((session) => [session.id, session]));
+
+  assert.equal(byId.orphan.hierarchyState, 'orphan');
+  assert.equal(byId.orphan.navigationRoot, true);
+  assert.equal(byId['cycle-a'].hierarchyState, 'cycle');
+  assert.equal(byId['cycle-a'].navigationRoot, true);
+  assert.equal(byId['cycle-b'].navigationRoot, false);
+  assert.deepEqual(snapshot.projects[0].sessions, ['codex:cycle-a', 'codex:orphan']);
+});
diff --git a/tests/kit/live-qe-contract.test.mjs b/tests/kit/live-qe-contract.test.mjs
new file mode 100644
index 00000000..0f429eda
--- /dev/null
+++ b/tests/kit/live-qe-contract.test.mjs
@@ -0,0 +1,89 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+  createLiveEvent, JsonlTailer, emptyLiveProjection, reduceLiveEvent,
+} from '../../src/lib/live/index.mjs';
+import { LIVE_JS } from '../../src/lib/dashboard/live-view.mjs';
+
+const observedAt = '2026-07-27T12:00:00Z';
+
+test('canonical event serialization is a closed allowlist under arbitrary extra fields', () => {
+  const allowedTop = new Set([
+    'schemaVersion', 'observedAt', 'sourceTimestamp', 'sessionId', 'sessionKey',
+    'parentSessionId', 'traceId', 'spanId', 'parentSpanId', 'host', 'surface',
+    'project', 'projectKey', 'actor',
+    'action', 'target', 'status', 'source', 'attributes',
+  ]);
+  for (let i = 0; i < 100; i++) {
+    const secret = `never-on-wire-${i}`;
+    const event = createLiveEvent({
+      sessionId: `session-${i}`,
+      observedAt,
+      actor: { id: `actor-${i}`, kind: 'agent', unexpected: secret },
+      action: 'agent.output',
+      source: { adapter: 'fixture', unexpected: secret },
+      attributes: { unexpected: secret },
+      [`untrusted_${i}`]: secret,
+    });
+    assert.deepEqual(new Set(Object.keys(event)), allowedTop);
+    assert.equal(JSON.stringify(event).includes(secret), false);
+  }
+});
+
+test('JSONL tailing preserves a UTF-8 record split across byte-level appends', () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-live-utf8-'));
+  const file = path.join(dir, 'events.jsonl');
+  const bytes = Buffer.from(`${JSON.stringify({ label: 'agent 🐝' })}\n`);
+  const split = bytes.indexOf(Buffer.from('🐝')) + 2;
+  fs.writeFileSync(file, bytes.subarray(0, split));
+  const rows = [];
+  const errors = [];
+  const tailer = new JsonlTailer(file, {
+    onRecord: (row) => rows.push(row),
+    onError: (error) => errors.push(error),
+  });
+  tailer.reconcile();
+  fs.appendFileSync(file, bytes.subarray(split));
+  tailer.reconcile();
+  assert.deepEqual(errors, []);
+  assert.deepEqual(rows, [{ label: 'agent 🐝' }]);
+});
+
+test('projection completion updates the target resource without completing its session', () => {
+  const make = (action, status, target, id) => ({
+    ...createLiveEvent({
+      sessionId: 'session',
+      observedAt,
+      host: 'claude',
+      actor: { id: 'session', kind: 'session' },
+      action,
+      status,
+      target,
+      source: { adapter: 'fixture', confidence: 'observed' },
+    }),
+    eventId: id,
+  });
+  const started = reduceLiveEvent(
+    emptyLiveProjection(),
+    make('tool.started', 'running', { id: 'tool-1', kind: 'tool' }, 'ak:1'),
+  );
+  const completed = reduceLiveEvent(
+    started,
+    make('tool.completed', 'completed', { id: 'tool-1', kind: 'tool' }, 'ak:2'),
+  );
+  const session = completed.sessions.get('claude:session');
+  assert.equal(session.status, 'unknown');
+  assert.equal(session.nodes.get('session').status, 'running');
+  assert.equal(session.nodes.get('tool-1').status, 'completed');
+});
+
+test('browser delta reducer carries the server resource-completion invariants', () => {
+  assert.match(LIVE_JS, /targetTerminal/);
+  assert.match(LIVE_JS, /ev\.actor\.kind===["']session["']&&\/\^session/);
+  assert.match(LIVE_JS, /upsert\(ev\.actor,targetTerminal\?priorActor/);
+  assert.match(LIVE_JS, /targetTerminal\?ev\.status:["']running["']/);
+  assert.match(LIVE_JS, /TERMINAL/);
+});
diff --git a/tests/kit/live-service.test.mjs b/tests/kit/live-service.test.mjs
new file mode 100644
index 00000000..84477b6f
--- /dev/null
+++ b/tests/kit/live-service.test.mjs
@@ -0,0 +1,214 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { LiveSessionsService } from '../../src/lib/live/index.mjs';
+
+const wait = (ms = 35) => new Promise((resolve) => setTimeout(resolve, ms));
+const sandbox = () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-live-service-'));
+  const claude = path.join(dir, 'claude', 'project');
+  const codex = path.join(dir, 'codex', '2026', '07', '27');
+  fs.mkdirSync(claude, { recursive: true });
+  fs.mkdirSync(codex, { recursive: true });
+  return { dir, claude, codex, roots: {
+    claude: path.join(dir, 'claude'), codex: path.join(dir, 'codex'),
+  } };
+};
+const line = (value) => `${JSON.stringify(value)}\n`;
+
+test('service bootstraps safe metadata then tails existing files from end', async (t) => {
+  const sb = sandbox();
+  const file = path.join(sb.claude, 'c1.jsonl');
+  fs.writeFileSync(file, line({
+    type: 'user', sessionId: 'c1', timestamp: '2026-07-27T10:00:00Z',
+    cwd: '/Users/private-user/work/visible-project',
+    message: { model: 'claude-x', content: 'historical private prompt' },
+  }));
+  const service = new LiveSessionsService({
+    roots: sb.roots, intervalMs: 10, readCodexState: () => null,
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  t.after(() => service.close());
+  const received = [];
+  service.subscribe((event) => received.push(event));
+  service.start();
+  assert.equal(service.snapshot().sessions.length, 1);
+  assert.equal(service.snapshot().sessions[0].project, 'visible-project');
+  assert.equal(service.snapshot().sessions[0].nodes[0].model, 'claude-x');
+  assert.deepEqual(service.snapshot().projects[0].sessions, ['claude:c1']);
+  assert.equal(service.snapshot().projects[0].liveCount, 0);
+  assert.equal(service.snapshot().projects[0].completedCount, 0);
+  fs.appendFileSync(file, line({
+    type: 'assistant', sessionId: 'c1', timestamp: '2026-07-27T12:00:01Z',
+    cwd: '/Users/private-user/work/visible-project',
+    message: { model: 'claude-x', content: [{ type: 'tool_use', id: 't1', name: 'Read',
+      input: { file: '/private/path' } }] },
+  }));
+  await wait();
+  assert.equal(received.length, 3);
+  assert.equal(received.filter((event) => event.action === 'session.discovered').length, 1);
+  const json = JSON.stringify(service.snapshot());
+  assert.ok(!json.includes('historical private prompt'));
+  assert.ok(!json.includes('/private/path'));
+  assert.ok(!json.includes('private-user'));
+  assert.equal(service.snapshot().sessions[0].project, 'visible-project');
+  assert.equal(service.snapshot().health.claude.status, 'ok');
+});
+
+test('native discovery chooses newest files when the tailer budget is bounded', () => {
+  const sb = sandbox();
+  const old = path.join(sb.claude, 'old.jsonl');
+  const recent = path.join(sb.claude, 'recent.jsonl');
+  fs.writeFileSync(old, line({ type: 'user', sessionId: 'old', cwd: '/work/old-project' }));
+  fs.writeFileSync(recent, line({ type: 'user', sessionId: 'recent', cwd: '/work/recent-project' }));
+  fs.utimesSync(old, new Date(1_000), new Date(1_000));
+  fs.utimesSync(recent, new Date(2_000), new Date(2_000));
+  const service = new LiveSessionsService({
+    roots: sb.roots, maxFiles: 1, readCodexState: () => null,
+    setInterval: () => ({ unref() {} }), clearInterval: () => {},
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  service.start();
+  assert.deepEqual(service.snapshot().sessions.map((session) => session.id), ['recent']);
+  service.close();
+});
+
+test('metadata bootstrap is adversarially privacy bounded', () => {
+  const sb = sandbox();
+  fs.writeFileSync(path.join(sb.codex, 'rollout-2026-07-27T12-00-00-x1.jsonl'), [
+    line({ type: 'session_meta', payload: {
+      id: 'x1', cwd: '/Users/alice/secret/agentic-kit', title: 'PRIVATE TITLE',
+      summary: 'PRIVATE SUMMARY', preview: 'PRIVATE PREVIEW',
+    } }),
+    line({ type: 'turn_context', payload: {
+      model: 'gpt-safe', cwd: '/Users/alice/secret/agentic-kit',
+      prompt: 'PRIVATE PROMPT', arguments: { token: 'PRIVATE TOKEN' },
+      output: 'PRIVATE OUTPUT', content: 'PRIVATE CONTENT',
+    } }),
+  ].join(''));
+  const service = new LiveSessionsService({
+    roots: sb.roots, readCodexState: () => null,
+    setInterval: () => ({ unref() {} }), clearInterval: () => {},
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  service.start();
+  const json = JSON.stringify(service.snapshot());
+  assert.ok(json.includes('agentic-kit'));
+  assert.ok(json.includes('gpt-safe'));
+  for (const secret of ['alice', '/Users/', 'PRIVATE', 'secret']) assert.ok(!json.includes(secret));
+  service.close();
+});
+
+test('service reconciles new Codex files from their beginning', async (t) => {
+  const sb = sandbox();
+  const service = new LiveSessionsService({
+    roots: sb.roots, intervalMs: 10, readCodexState: () => null,
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  t.after(() => service.close());
+  service.start();
+  const file = path.join(sb.codex, 'rollout-2026-07-27T12-00-00-x1.jsonl');
+  fs.writeFileSync(file, line({
+    type: 'session_meta', timestamp: '2026-07-27T12:00:00Z',
+    payload: { id: 'x1', model: 'gpt-x', cwd: '/private/project' },
+  }));
+  await wait();
+  const snapshot = service.snapshot();
+  assert.equal(snapshot.sessions[0].id, 'x1');
+  assert.equal(snapshot.sessions[0].project, 'project');
+  assert.ok(!JSON.stringify(snapshot).includes('/private/project'));
+});
+
+test('service publishes ledger identity and edges once, supports replay and cleans timers', () => {
+  const sb = sandbox();
+  let timerCallback;
+  let cleared = false;
+  const ledger = {
+    parents: new Map([['child', 'parent']]),
+    threads: new Map([['parent', { model: 'gpt-x' }], ['child', { tokensUsed: 1 }]]),
+  };
+  const service = new LiveSessionsService({
+    roots: sb.roots, readCodexState: () => ledger,
+    setInterval: (fn) => { timerCallback = fn; return { unref() {} }; },
+    clearInterval: () => { cleared = true; },
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  const seen = [];
+  const unsubscribe = service.subscribe((event) => seen.push(event));
+  service.start();
+  timerCallback();
+  assert.equal(seen.length, 3);
+  assert.equal(seen.filter((event) => event.action === 'agent.spawned').length, 1);
+  assert.equal(service.replay(null).events.length, 3);
+  assert.equal(service.snapshot().sessions[0].edges.length, 1);
+  unsubscribe();
+  service.close();
+  assert.equal(cleared, true);
+});
+
+test('service optionally ingests explicit AQE sources with bounded metadata', async (t) => {
+  const sb = sandbox();
+  const file = path.join(sb.dir, 'aqe.jsonl');
+  fs.writeFileSync(file, '');
+  const service = new LiveSessionsService({
+    roots: sb.roots, intervalMs: 10, readCodexState: () => null,
+    structuredSources: [{ file, surface: 'aqe' }],
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  t.after(() => service.close());
+  service.start();
+  fs.appendFileSync(file, line({
+    sessionId: 's1', agentId: 'gate1', kind: 'gate',
+    event: 'gate.completed', status: 'completed', output: 'private verdict body',
+  }));
+  await wait();
+  const json = JSON.stringify(service.replay(null));
+  assert.ok(json.includes('gate.completed'));
+  assert.ok(!json.includes('private verdict body'));
+  assert.ok(!json.includes(sb.dir));
+});
+
+test('explicit structured sources keep priority when native discovery is saturated', async (t) => {
+  const sb = sandbox();
+  for (let i = 0; i < 8; i++) {
+    fs.writeFileSync(path.join(sb.claude, `session-${i}.jsonl`), '');
+    fs.writeFileSync(path.join(sb.codex, `rollout-2026-07-27T00-00-00-codex-${i}.jsonl`), '');
+  }
+  const file = path.join(sb.dir, 'aqe-priority.jsonl');
+  fs.writeFileSync(file, '');
+  const service = new LiveSessionsService({
+    roots: sb.roots,
+    structuredSources: [{ file, surface: 'aqe' }],
+    maxFiles: 4,
+    intervalMs: 10,
+    readCodexState: () => null,
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  t.after(() => service.close());
+  service.start();
+  fs.appendFileSync(file, line({
+    sessionId: 'explicit-session', agentId: 'qe-worker',
+    event: 'quality.verdict.recorded', status: 'completed',
+  }));
+  await wait();
+  assert.equal(service.snapshot().sessions.some((session) => session.id === 'explicit-session'), true);
+});
+
+test('adapter health never exposes filesystem paths from errors', async (t) => {
+  const sb = sandbox();
+  const file = path.join(sb.claude, 'broken.jsonl');
+  fs.writeFileSync(file, '');
+  const service = new LiveSessionsService({
+    roots: sb.roots, intervalMs: 10, readCodexState: () => null,
+    now: () => '2026-07-27T12:00:00Z',
+  });
+  t.after(() => service.close());
+  service.start();
+  fs.appendFileSync(file, 'invalid-json\n');
+  await wait();
+  const health = JSON.stringify(service.snapshot().health);
+  assert.ok(!health.includes(sb.dir));
+  assert.ok(health.includes('invalid-json'));
+});
diff --git a/tests/kit/live-tailer.test.mjs b/tests/kit/live-tailer.test.mjs
new file mode 100644
index 00000000..d55f1c66
--- /dev/null
+++ b/tests/kit/live-tailer.test.mjs
@@ -0,0 +1,53 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { JsonlTailer } from '../../src/lib/live/index.mjs';
+
+const tempFile = () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-live-'));
+  return path.join(dir, 'events.jsonl');
+};
+
+test('tailer waits for newline before parsing a partial record', () => {
+  const file = tempFile();
+  fs.writeFileSync(file, '{"n":1');
+  const rows = [];
+  const tailer = new JsonlTailer(file, { onRecord: (row) => rows.push(row) });
+  tailer.reconcile();
+  assert.deepEqual(rows, []);
+  fs.appendFileSync(file, '}\n{"n":2}\n');
+  tailer.reconcile();
+  assert.deepEqual(rows, [{ n: 1 }, { n: 2 }]);
+});
+
+test('tailer recovers from truncation and inode replacement', () => {
+  const file = tempFile();
+  fs.writeFileSync(file, '{"n":1}\n');
+  const rows = [];
+  const tailer = new JsonlTailer(file, { onRecord: (row) => rows.push(row) });
+  tailer.reconcile();
+  fs.truncateSync(file, 0);
+  tailer.reconcile();
+  fs.appendFileSync(file, '{"n":2}\n');
+  tailer.reconcile();
+  const replacement = `${file}.new`;
+  fs.writeFileSync(replacement, '{"n":3}\n');
+  fs.renameSync(replacement, file);
+  tailer.reconcile();
+  assert.deepEqual(rows, [{ n: 1 }, { n: 2 }, { n: 3 }]);
+});
+
+test('tailer isolates malformed lines and continues', () => {
+  const file = tempFile();
+  fs.writeFileSync(file, '{"n":1}\nnot-json\n{"n":2}\n');
+  const rows = [];
+  const errors = [];
+  new JsonlTailer(file, {
+    onRecord: (row) => rows.push(row), onError: (error, line) => errors.push([error, line]),
+  }).reconcile();
+  assert.deepEqual(rows, [{ n: 1 }, { n: 2 }]);
+  assert.equal(errors.length, 1);
+  assert.equal(errors[0][1], 'not-json');
+});
diff --git a/tests/kit/live-transcript.test.mjs b/tests/kit/live-transcript.test.mjs
new file mode 100644
index 00000000..391f5715
--- /dev/null
+++ b/tests/kit/live-transcript.test.mjs
@@ -0,0 +1,286 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import {
+  adaptClaudeTranscriptRecord,
+  adaptCodexTranscriptRecord,
+  TranscriptStreams,
+} from '../../src/lib/live/index.mjs';
+
+const line = (value) => `${JSON.stringify(value)}\n`;
+const sandbox = () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-transcript-'));
+  const claude = path.join(dir, 'claude', 'project');
+  const codex = path.join(dir, 'codex', '2026', '07', '27');
+  fs.mkdirSync(claude, { recursive: true });
+  fs.mkdirSync(codex, { recursive: true });
+  return {
+    dir, claude, codex,
+    roots: { claude: path.join(dir, 'claude'), codex: path.join(dir, 'codex') },
+  };
+};
+
+test('Claude transcript adapter distinguishes people, harness output, tools and reasoning', () => {
+  const user = adaptClaudeTranscriptRecord({
+    type: 'user', sessionId: 's1', timestamp: '2026-07-27T12:00:00Z',
+    message: { content: [{ type: 'text', text: 'Please inspect auth' }] },
+  }, { sessionId: 's1' });
+  assert.deepEqual(user.map((event) => [event.kind, event.actor.role, event.text]), [
+    ['message', 'user', 'Please inspect auth'],
+  ]);
+
+  const assistant = adaptClaudeTranscriptRecord({
+    type: 'assistant', sessionId: 's1', timestamp: '2026-07-27T12:00:01Z',
+    message: { model: 'claude-x', content: [
+      { type: 'thinking', thinking: 'Check boundaries' },
+      { type: 'text', text: 'I found the route.' },
+      { type: 'tool_use', id: 'call-1', name: 'Read', input: { file_path: '/secret' } },
+    ] },
+  }, { sessionId: 's1' });
+  assert.deepEqual(assistant.map((event) => event.kind), ['reasoning', 'message', 'tool-call']);
+  assert.equal(assistant[2].details.includes('/secret'), true);
+
+  const result = adaptClaudeTranscriptRecord({
+    type: 'user', sessionId: 's1',
+    message: { content: [{ type: 'tool_result', tool_use_id: 'call-1',
+      content: 'PRIVATE TOOL OUTPUT' }] },
+  }, { sessionId: 's1' });
+  assert.equal(result[0].actor.role, 'tool');
+  assert.equal(result[0].kind, 'tool-result');
+  assert.equal(result[0].details, 'PRIVATE TOOL OUTPUT');
+});
+
+test('Codex transcript adapter excludes encrypted reasoning and preserves local tool evidence', () => {
+  const reasoning = adaptCodexTranscriptRecord({
+    type: 'response_item', timestamp: '2026-07-27T12:00:00Z',
+    payload: {
+      id: 'r1', type: 'reasoning', encrypted_content: 'PRIVATE CIPHERTEXT',
+      summary: [{ type: 'summary_text', text: 'Inspect the parser' }],
+    },
+  }, { sessionId: 's1' });
+  assert.equal(reasoning[0].kind, 'reasoning');
+  assert.equal(reasoning[0].text, 'Inspect the parser');
+  assert.equal(JSON.stringify(reasoning).includes('PRIVATE CIPHERTEXT'), false);
+
+  const call = adaptCodexTranscriptRecord({
+    type: 'response_item', payload: {
+      type: 'custom_tool_call', call_id: 'c1', name: 'shell',
+      input: 'TOKEN=PRIVATE command',
+    },
+  }, { sessionId: 's1' });
+  assert.equal(call[0].kind, 'tool-call');
+  assert.equal(call[0].details, 'TOKEN=PRIVATE command');
+
+  const output = adaptCodexTranscriptRecord({
+    type: 'response_item', payload: {
+      type: 'custom_tool_call_output', call_id: 'c1', output: 'command output',
+    },
+  }, { sessionId: 's1' });
+  assert.equal(output[0].details, 'command output');
+
+  const patch = adaptCodexTranscriptRecord({
+    type: 'event_msg', payload: {
+      type: 'patch_apply_end', status: 'completed',
+      changes: [{ path: 'src/app.mjs', additions: 4, deletions: 1 }],
+    },
+  }, { sessionId: 's1' });
+  assert.equal(patch[0].kind, 'status');
+  assert.equal(patch[0].details.includes('src/app.mjs'), true);
+
+  const delegated = adaptCodexTranscriptRecord({
+    type: 'event_msg', payload: {
+      id: 'sub-activity-1', type: 'sub_agent_activity',
+      agent_id: 'agent-42', agent_name: 'Tester', activity: 'running tests',
+    },
+  }, { sessionId: 's1', actorId: 'primary' });
+  assert.deepEqual(delegated[0].target,
+    { id: 'agent-42', role: 'subagent', label: 'Tester' });
+  assert.equal(delegated[0].relation, 'delegates');
+});
+
+test('Codex transcript stream suppresses the duplicated event/response message pair', () => {
+  const sb = sandbox();
+  fs.writeFileSync(path.join(sb.codex, 'rollout-2026-07-27T12-00-00-s1.jsonl'), [
+    line({ type: 'event_msg', timestamp: '2026-07-27T12:00:01.000Z',
+      payload: { type: 'agent_message', id: 'event-1', message: 'same answer' } }),
+    line({ type: 'response_item', timestamp: '2026-07-27T12:00:01.100Z',
+      payload: { type: 'message', id: 'response-1', role: 'assistant',
+        content: [{ type: 'output_text', text: 'same answer' }] } }),
+  ].join(''));
+  const streams = new TranscriptStreams({ roots: sb.roots, mask: String });
+  assert.deepEqual(
+    streams.open('codex', 's1').snapshot().events.map((event) => event.text),
+    ['same answer'],
+  );
+  streams.close();
+});
+
+test('selected transcript stream masks strings, bounds history and tails appends', async (t) => {
+  const sb = sandbox();
+  const file = path.join(sb.claude, 's1.jsonl');
+  fs.writeFileSync(file, [
+    line({ type: 'user', sessionId: 's1', timestamp: '2026-07-27T12:00:00Z',
+      message: { content: 'old first' } }),
+    line({ type: 'assistant', sessionId: 's1', timestamp: '2026-07-27T12:00:01Z',
+      message: { content: [{ type: 'text', text: 'Bearer abcdefghijklmnop' }] } }),
+  ].join(''));
+  const streams = new TranscriptStreams({
+    roots: sb.roots, intervalMs: 10, maxHistoryEntries: 1,
+    mask: (text) => String(text).replace(/Bearer \S+/g, 'Bearer …redacted'),
+  });
+  t.after(() => streams.close());
+  const stream = streams.open('claude', 's1');
+  assert.equal(stream.snapshot().events.length, 1);
+  assert.equal(stream.snapshot().events[0].text, 'Bearer …redacted');
+  const received = [];
+  stream.subscribe((event) => received.push(event));
+  fs.appendFileSync(file, line({
+    type: 'assistant', sessionId: 's1', timestamp: '2026-07-27T12:00:02Z',
+    message: { content: [{ type: 'text', text: 'live update' }] },
+  }));
+  await new Promise((resolve) => setTimeout(resolve, 35));
+  assert.equal(received.at(-1)?.text, 'live update');
+  assert.equal(stream.replay(stream.snapshot().cursor).events.length, 0);
+});
+
+test('selected stream exposes rich tool evidence only after final masking and visible truncation', () => {
+  const sb = sandbox();
+  fs.writeFileSync(path.join(sb.claude, 's1.jsonl'), line({
+    type: 'assistant', sessionId: 's1',
+    message: { content: [{ type: 'tool_use', id: 't1', name: 'Bash',
+      input: { command: `TOKEN=PRIVATE ${'x'.repeat(400)}` } }] },
+  }));
+  const streams = new TranscriptStreams({
+    roots: sb.roots, maxTextChars: 256,
+    mask: (text) => String(text).replace('TOKEN=PRIVATE', 'TOKEN=…redacted'),
+  });
+  const event = streams.open('claude', 's1').snapshot().events[0];
+  assert.equal(event.details.includes('TOKEN=PRIVATE'), false);
+  assert.equal(event.details.includes('TOKEN=…redacted'), true);
+  assert.equal(event.detailsTruncated, true);
+  assert.equal(event.details.endsWith('…[truncated]'), true);
+  streams.close();
+});
+
+test('selected transcript lookup rejects invalid ids, missing files and symlink escapes', () => {
+  const sb = sandbox();
+  const outside = path.join(sb.dir, 'outside.jsonl');
+  fs.writeFileSync(outside, line({ type: 'user', sessionId: 'escape', message: { content: 'x' } }));
+  fs.symlinkSync(outside, path.join(sb.claude, 'escape.jsonl'));
+  const streams = new TranscriptStreams({ roots: sb.roots, mask: String });
+  assert.throws(() => streams.open('other', 'x'), /invalid transcript host/);
+  assert.throws(() => streams.open('claude', '../x'), /invalid session id/);
+  assert.throws(() => streams.open('claude', 'missing'), /not found/);
+  assert.throws(() => streams.open('claude', 'escape'), /outside transcript root/);
+  streams.close();
+});
+
+test('selected stream resets stale and cross-stream cursors', () => {
+  const sb = sandbox();
+  fs.writeFileSync(path.join(sb.claude, 's1.jsonl'),
+    line({ type: 'user', sessionId: 's1', message: { content: 'one' } }));
+  fs.writeFileSync(path.join(sb.claude, 's2.jsonl'),
+    line({ type: 'user', sessionId: 's2', message: { content: 'two' } }));
+  const streams = new TranscriptStreams({ roots: sb.roots, mask: String, replayCapacity: 1 });
+  const one = streams.open('claude', 's1');
+  const two = streams.open('claude', 's2');
+  assert.equal(two.replay(one.snapshot().cursor).reset, true);
+  streams.close();
+});
+
+test('selected stream stops reading when its path becomes an escaping symlink', async (t) => {
+  const sb = sandbox();
+  const file = path.join(sb.claude, 's1.jsonl');
+  const outside = path.join(sb.dir, 'outside.jsonl');
+  fs.writeFileSync(file, line({ type: 'user', sessionId: 's1', message: { content: 'safe' } }));
+  fs.writeFileSync(outside, line({
+    type: 'assistant', sessionId: 's1',
+    message: { content: [{ type: 'text', text: 'PRIVATE OUTSIDE' }] },
+  }));
+  const streams = new TranscriptStreams({ roots: sb.roots, mask: String, intervalMs: 10 });
+  t.after(() => streams.close());
+  const stream = streams.open('claude', 's1');
+  const seen = [];
+  stream.subscribe((event) => seen.push(event));
+  fs.unlinkSync(file);
+  fs.symlinkSync(outside, file);
+  await new Promise((resolve) => setTimeout(resolve, 35));
+  assert.equal(JSON.stringify(seen).includes('PRIVATE OUTSIDE'), false);
+});
+
+test('selected stream content is destroyed shortly after its last client releases it', async (t) => {
+  const sb = sandbox();
+  fs.writeFileSync(path.join(sb.claude, 's1.jsonl'),
+    line({ type: 'user', sessionId: 's1', message: { content: 'one' } }));
+  const streams = new TranscriptStreams({ roots: sb.roots, mask: String, idleMs: 10 });
+  t.after(() => streams.close());
+  const first = streams.open('claude', 's1');
+  streams.release('claude', 's1');
+  await new Promise((resolve) => setTimeout(resolve, 25));
+  const second = streams.open('claude', 's1');
+  assert.notEqual(second, first);
+});
+
+test('selected stream carries an existing partial JSONL record into the live tail', async (t) => {
+  const sb = sandbox();
+  const file = path.join(sb.claude, 's1.jsonl');
+  const record = JSON.stringify({
+    type: 'assistant', sessionId: 's1',
+    message: { content: [{ type: 'text', text: 'completed later' }] },
+  });
+  fs.writeFileSync(file, record.slice(0, -2));
+  const streams = new TranscriptStreams({ roots: sb.roots, mask: String, intervalMs: 10 });
+  t.after(() => streams.close());
+  const stream = streams.open('claude', 's1');
+  const seen = [];
+  stream.subscribe((event) => seen.push(event));
+  fs.appendFileSync(file, `${record.slice(-2)}\n`);
+  await new Promise((resolve) => setTimeout(resolve, 35));
+  assert.equal(seen[0]?.text, 'completed later');
+});
+
+test('selected stream builds a deterministic bounded playback timeline with live handoff', () => {
+  const sb = sandbox();
+  fs.writeFileSync(path.join(sb.claude, 's1.jsonl'), [
+    line({ type: 'assistant', sessionId: 's1', timestamp: '2026-07-27T12:00:10Z',
+      message: { content: [{ type: 'text', text: 'second' }] } }),
+    line({ type: 'user', sessionId: 's1', timestamp: '2026-07-27T12:00:00Z',
+      message: { content: 'first' } }),
+    line({ type: 'assistant', sessionId: 's1', timestamp: '2026-07-27T12:00:20Z',
+      message: { content: [{ type: 'text', text: 'third' }] } }),
+  ].join(''));
+  const streams = new TranscriptStreams({
+    roots: sb.roots, mask: String, maxHistoryEntries: 2, replayCapacity: 2,
+  });
+  const stream = streams.open('claude', 's1');
+  const full = stream.playback();
+  assert.equal(full.sessionKey, 'claude:s1');
+  assert.equal(full.range.startedAt, '2026-07-27T12:00:00.000Z');
+  assert.equal(full.range.endedAt, '2026-07-27T12:00:20.000Z');
+  assert.equal(full.range.durationMs, 20_000);
+  assert.equal(full.range.eventCount, 2);
+  assert.equal(full.range.truncated, true);
+  assert.equal(full.startAt, '2026-07-27T12:00:00.000Z');
+  assert.equal(full.endAt, '2026-07-27T12:00:20.000Z');
+  assert.equal(full.durationMs, 20_000);
+  assert.equal(full.truncated, true);
+  assert.equal(full.gap, true);
+  assert.deepEqual(full.transcript.items.map((event) => [event.text, event.elapsedMs]), [
+    ['first', 0], ['third', 20_000],
+  ]);
+  assert.equal(Object.hasOwn(full.events[0], 'text'), false,
+    'canvas events must not duplicate rich transcript bodies');
+  assert.equal(full.live.cursor, stream.snapshot().cursor);
+  assert.equal(full.live.eventsEndpoint, '/api/live/transcripts/claude/s1/events');
+
+  const seek = stream.playback({ atMs: 5_000 });
+  assert.equal(seek.seek.requestedMs, 5_000);
+  assert.equal(seek.seek.atMs, 5_000);
+  assert.equal(seek.seek.eventIndex, 0);
+  assert.deepEqual(seek.transcript.items.map((event) => event.text), ['first']);
+  assert.deepEqual(stream.playback({ atMs: 5_000 }), seek,
+    'the same retained history and seek point must reconstruct identically');
+  streams.close();
+});
diff --git a/tests/kit/natives.test.mjs b/tests/kit/natives.test.mjs
index 1538fffe..6b0440c6 100644
--- a/tests/kit/natives.test.mjs
+++ b/tests/kit/natives.test.mjs
@@ -6,7 +6,7 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { bsq3Root, bsq3IsNative } from '../../src/lib/natives.mjs';
+import { bsq3Root, bsq3IsNative, selfSpecConflicts } from '../../src/lib/natives.mjs';
 
 function makeFixture({ withBinding }) {
   const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-natives-'));
@@ -77,3 +77,37 @@ test('bsq3Root follows a nested→hoisted move in-process (sync convergence bug)
   assert.equal(bsq3Root(fromDir), hoisted, 'resolves to the hoisted copy after the move');
   fs.rmSync(root, { recursive: true, force: true });
 });
+
+function writePkgJson(dir, data) {
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(path.join(dir, 'package.json'), JSON.stringify(data));
+}
+
+test('selfSpecConflicts finds a stale optionalDependencies pin against a bumped spec', () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-natives-selfconflict-'));
+  writePkgJson(dir, {
+    name: '@claude-flow/cli',
+    overrides: { 'better-sqlite3': '^12.10.0' },
+    optionalDependencies: { 'better-sqlite3': '^12.9.0' },
+  });
+  assert.deepEqual(selfSpecConflicts(dir, '^12.10.0'), ['optionalDependencies']);
+  fs.rmSync(dir, { recursive: true, force: true });
+});
+
+test('selfSpecConflicts is empty when every self-declared field already agrees', () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-natives-noconflict-'));
+  writePkgJson(dir, {
+    name: '@claude-flow/cli',
+    overrides: { 'better-sqlite3': '^12.10.0' },
+    optionalDependencies: { 'better-sqlite3': '^12.10.0' },
+  });
+  assert.deepEqual(selfSpecConflicts(dir, '^12.10.0'), []);
+  fs.rmSync(dir, { recursive: true, force: true });
+});
+
+test('selfSpecConflicts ignores non-plain-semver declarations (workspace:/link:/etc.)', () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'ak-natives-nonsemver-'));
+  writePkgJson(dir, { name: 'x', dependencies: { 'better-sqlite3': 'link:../better-sqlite3' } });
+  assert.deepEqual(selfSpecConflicts(dir, '^12.10.0'), []);
+  fs.rmSync(dir, { recursive: true, force: true });
+});
diff --git a/tests/ui/dashboard-ui.mjs b/tests/ui/dashboard-ui.mjs
index c4f570ab..75665288 100644
--- a/tests/ui/dashboard-ui.mjs
+++ b/tests/ui/dashboard-ui.mjs
@@ -205,6 +205,7 @@ const TABS = [
   ['runtime', '#panel-runtime'],
   ['intel', '#panel-intel'],
   ['usage', '#panel-usage'],
+  ['live', '#panel-live'],
 ];
 const USAGE_VIEWS = [
   ['score', '#v-score'],
@@ -238,6 +239,75 @@ const LIMITS_STUB = async () => ({
   },
 });
 
+const LIVE_SNAPSHOT = {
+  schemaVersion: 1,
+  cursor: 'live:3',
+  projects: [{
+    id: 'project:agentic-kit', label: 'agentic-kit',
+    sessions: ['codex:ui-live-session', 'claude:ui-review-session'],
+    sessionCount: 2, childSessionCount: 1, liveCount: 1, completedCount: 1,
+    providers: { codex: 1, claude: 1 }, updatedAt: new Date().toISOString(),
+  }],
+  health: {
+    claude: { status: 'ok', files: 2, events: 8, errors: 0, lastError: null },
+    codex: { status: 'error', files: 1, events: 3, errors: 1, lastError: '/Users/private/.codex/secret.jsonl invalid-json' },
+  },
+  sessions: [{
+    id: 'ui-live-session', key: 'codex:ui-live-session', project: 'agentic-kit',
+    projectKey: 'project:agentic-kit', host: 'codex', status: 'running', lifecycle: 'active',
+    updatedAt: new Date().toISOString(),
+    nodes: [
+      { id: 'ui-live-session', kind: 'session', role: 'primary', host: 'codex', surface: 'native', status: 'running', confidence: 'observed' },
+      { id: 'ui-live-agent', kind: 'subagent', label: 'Bohr', role: 'tester', host: 'codex', surface: 'ruflo', status: 'running', confidence: 'observed', lastAction: 'agent.output', observedAt: new Date().toISOString(), sourceAdapter: 'codex-state' },
+      { id: 'ui-live-tool', kind: 'tool', label: 'Read', host: 'codex', surface: 'native', status: 'running', confidence: 'observed', lastAction: 'tool.started', observedAt: new Date().toISOString(), sourceAdapter: 'codex-rollout' },
+      { id: 'ui-live-gate', kind: 'gate', role: 'qe-court', host: 'internal', surface: 'aqe', status: 'queued', confidence: 'planned' },
+    ],
+    edges: [
+      { id: 'spawn', source: 'ui-live-session', target: 'ui-live-agent', action: 'agent.spawned', confidence: 'observed' },
+      { id: 'read', source: 'ui-live-agent', target: 'ui-live-tool', action: 'tool.started', confidence: 'observed' },
+      { id: 'gate', source: 'ui-live-agent', target: 'ui-live-gate', action: 'evaluation.requested', confidence: 'planned' },
+    ],
+  }, {
+    id: 'ui-live-agent', key: 'codex:ui-live-agent', parentSessionId: 'ui-live-session',
+    parentSessionKey: 'codex:ui-live-session', rootSessionKey: 'codex:ui-live-session',
+    hierarchyState: 'child', navigationRoot: false,
+    project: 'agentic-kit', projectKey: 'project:agentic-kit', host: 'codex',
+    status: 'running', lifecycle: 'active', updatedAt: new Date().toISOString(),
+    nodes: [{ id: 'ui-live-agent', kind: 'session', role: 'tester', host: 'codex', status: 'running' }],
+    edges: [],
+  }, {
+    id: 'ui-review-session', key: 'claude:ui-review-session', project: 'agentic-kit',
+    projectKey: 'project:agentic-kit', host: 'claude', status: 'completed',
+    startedAt: new Date(Date.now() - 180_000).toISOString(),
+    updatedAt: new Date(Date.now() - 60_000).toISOString(),
+    nodes: [{ id: 'ui-review-session', kind: 'session', host: 'claude', status: 'completed' }],
+    edges: [],
+  }],
+};
+
+const LIVE_STUB = {
+  start: async () => {},
+  snapshot: async () => LIVE_SNAPSHOT,
+  replay: async () => ({ reset: false, events: [] }),
+  subscribe: () => () => {},
+  close: async () => {},
+};
+const TRANSCRIPT_STUB = {
+  open(host, id) {
+    const event = {
+      eventId: `tx-${host}-${id}:1`, sessionId: id, host, kind: 'message',
+      actor: { id: 'ui-live-session', role: 'assistant', label: 'Codex' },
+      text: 'Connected to the local transcript stream.',
+    };
+    return {
+      snapshot: () => ({ schemaVersion: 1, cursor: event.eventId, events: [event] }),
+      replay: () => ({ reset: false, events: [] }),
+      subscribe: () => () => {},
+    };
+  },
+  close() {},
+};
+
 async function main() {
   // The usage API is injected rather than reaching for the real stores, so the
   // default run is deterministic AND cannot touch the user's live index cache.
@@ -266,6 +336,8 @@ async function main() {
     }),
     usage,
     limits: LIMITS_STUB,
+    live: LIVE_STUB,
+    transcripts: TRANSCRIPT_STUB,
   });
 
   const browser = await chromium.launch({ channel: 'chrome', headless: !HEADED });
@@ -285,7 +357,36 @@ async function main() {
     consoleErrors.push(`${m.text()}${where}`);
   });
   page.on('pageerror', (e) => consoleErrors.push(String(e.message)));
-  page.on('requestfailed', (r) => failedRequests.push(`${r.url()} — ${r.failure()?.errorText}`));
+  page.on('requestfailed', (r) => {
+    // Leaving Live deliberately closes EventSource. Chromium reports that
+    // client-side teardown as ERR_ABORTED even though it is the expected,
+    // leak-preventing lifecycle behavior.
+    if (/\/api\/live\/(?:events|transcripts\/[^/]+\/[^/]+\/events)$/.test(r.url())
+      && r.failure()?.errorText === 'net::ERR_ABORTED') return;
+    failedRequests.push(`${r.url()} — ${r.failure()?.errorText}`);
+  });
+  await page.route(/\/api\/live\/playback\/(?:claude\/ui-review-session|codex\/ui-live-session)/, (route) => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({
+      schemaVersion: 1, sessionKey: 'claude:ui-review-session',
+      startAt: new Date(Date.now() - 180_000).toISOString(),
+      endAt: new Date(Date.now() - 60_000).toISOString(), durationMs: 120_000,
+      events: [
+        { eventId: 'review:1', at: new Date(Date.now() - 170_000).toISOString(),
+          kind: 'message', actor: { id: 'ui-review-session', role: 'assistant' } },
+        { eventId: 'review:2', at: new Date(Date.now() - 90_000).toISOString(),
+          kind: 'tool', actor: { id: 'ui-review-session', role: 'assistant' },
+          target: { id: 'review-tool', role: 'tool', label: 'Read' },
+          relation: 'tool.started', tool: { callId: 'review-tool', name: 'Read', status: 'completed' } },
+      ],
+      transcript: { items: [
+        { id: 'review-turn-1', role: 'user', text: 'Review this implementation' },
+        { id: 'review-turn-2', role: 'assistant', text: 'Playback evidence loaded' },
+      ] },
+      seek: { requestedMs: null, atMs: 120_000, eventIndex: 0 },
+      live: { cursor: 'review:1', eventsEndpoint: '/api/live/transcripts/claude/ui-review-session/events' },
+    }),
+  }));
 
   try {
     await page.goto(srv.url, { waitUntil: 'networkidle' });
@@ -295,6 +396,7 @@ async function main() {
       await page.click(`[data-tab="${tab}"]`).catch(() => {});
       await page.waitForSelector(`${sel}:not([hidden])`, { timeout: 8000 }).catch(() => {});
       if (tab === 'usage') await page.waitForTimeout(1200); // lazy fetch
+      if (tab === 'live') await page.waitForTimeout(350); // segmented-thumb transition
       const text = await visibleText(page, sel);
       await shoot(page, `tab-${tab}`);
 
@@ -305,6 +407,384 @@ async function main() {
         `found ${arts.join(', ')} in visible text`);
     }
 
+    // ── Live Sessions: execution workspace + synchronized transcript ──
+    await page.click('[data-tab="live"]');
+    await page.waitForSelector('#live-nodes .live-node', { timeout: 8000 });
+    await page.waitForTimeout(80);
+    const liveShape = await page.evaluate(() => ({
+      sessions: document.querySelectorAll('#live-session-list > .live-session-family').length,
+      childSessions: document.querySelectorAll('#live-session-list .live-session-child').length,
+      nodes: document.querySelectorAll('#live-nodes .live-node').length,
+      edges: document.querySelectorAll('#live-edges .live-edge').length,
+      tools: document.querySelectorAll('#live-tools .live-tool').length,
+      anchorCores: document.querySelectorAll('#live-nodes .node-core').length,
+      workBubbles: document.querySelectorAll('#live-nodes .node-work').length,
+      cardNodes: document.querySelectorAll('#live-nodes .node-card').length,
+      graphRole: document.getElementById('live-graph')?.getAttribute('role'),
+      transcriptRole: document.getElementById('live-transcript-list')?.getAttribute('role'),
+      columns: getComputedStyle(document.querySelector('.live-workspace')).gridTemplateColumns,
+      transport: getComputedStyle(document.getElementById('live-playback')).position,
+    }));
+    check('live workspace renders agent anchors and owned tool satellites',
+      liveShape.sessions === 2 && liveShape.childSessions === 1
+        && liveShape.nodes === 3 && liveShape.tools >= 1
+        && liveShape.edges >= 2,
+      `shape was ${JSON.stringify(liveShape)}`);
+    check('execution graph and transcript expose accessible live-region semantics',
+      liveShape.graphRole === 'img' && liveShape.transcriptRole === 'log',
+      `roles were ${JSON.stringify(liveShape)}`);
+    check('cinematic map uses agent anchors and observed-work bubbles instead of card nodes',
+      liveShape.anchorCores === liveShape.nodes && liveShape.workBubbles === liveShape.nodes
+        && liveShape.cardNodes === 0,
+      `cinematic primitives were ${JSON.stringify(liveShape)}`);
+    check('desktop Live view is a persistent three-column workspace',
+      liveShape.columns.split(' ').length === 3,
+      `columns were ${JSON.stringify(liveShape.columns)}`);
+    check('session transport remains docked over the center stage',
+      liveShape.transport === 'absolute',
+      `transport positioning was ${JSON.stringify(liveShape.transport)}`);
+    const healthText = await visibleText(page, '#live-health');
+    check('live adapter health renders only status and aggregate counters',
+      /claude · ok · 2 files · 8 events · 0 errors/.test(healthText)
+        && /codex · error · 1 files · 3 events · 1 errors/.test(healthText)
+        && !/Users|secret|invalid-json/.test(healthText),
+      `health text was ${JSON.stringify(healthText)}`);
+    await page.click('#live-health-toggle');
+    const healthPlacement = await page.locator('#live-health').boundingBox();
+    const sourceTrigger = await page.locator('#live-health-toggle').boundingBox();
+    check('source inspector stays within the viewport and does not cover its trigger',
+      healthPlacement.x >= 0 && healthPlacement.y >= sourceTrigger.y + sourceTrigger.height
+        && healthPlacement.x + healthPlacement.width <= 1440,
+      `inspector ${JSON.stringify(healthPlacement)} trigger ${JSON.stringify(sourceTrigger)}`);
+    await page.keyboard.press('Escape');
+    check('Escape closes the source inspector and returns focus to its trigger',
+      await page.locator('#live-health').isHidden()
+        && await page.evaluate(() => document.activeElement?.id) === 'live-health-toggle',
+      'source inspector did not close accessibly');
+    const sessionIdentity = await visibleText(page, '[data-session="ui-live-session"]');
+    check('session row leads with provider and status instead of an opaque id',
+      /Codex/i.test(sessionIdentity) && /Working now/.test(sessionIdentity)
+        && !/ui-live-session/.test(sessionIdentity),
+      `session identity was ${JSON.stringify(sessionIdentity)}`);
+    check('session state uses human evidence language instead of adapter absence',
+      !/Status not reported/.test(await visibleText(page, '#panel-live')),
+      'Live view exposed the missing telemetry field instead of a human session state');
+    const workerFreshness = await visibleText(page, '.live-session-child');
+    check('sessions without a start boundary show freshness instead of epoch-sized duration',
+      /Working now · (just now|\d+s ago)/.test(workerFreshness)
+        && !/\d{4,}h/.test(workerFreshness),
+      `worker freshness was ${JSON.stringify(workerFreshness)}`);
+    check('Live navigation is project-first and keeps sessions within the selected project',
+      await page.locator('#live-project-list [data-project]').count() === 1
+        && /2 sessions/.test(await visibleText(page, '#live-project-list')),
+      'project catalog did not summarize its sessions');
+    check('Live navigator enters at projects and drills into a project session history',
+      await page.getAttribute('#live-browser', 'data-level') === 'projects',
+      'navigator did not enter at the project level');
+    await page.click('#live-project-list [data-project]');
+    check('project drill-in uses the same navigator with an explicit Back affordance',
+      await page.getAttribute('#live-browser', 'data-level') === 'sessions'
+        && await page.locator('#live-browser-back').isVisible(),
+      'project selection did not reveal the session level');
+    check('running sessions sort before completed review sessions',
+      await page.locator('#live-session-list [data-session]').first().getAttribute('data-session')
+        === 'ui-live-session',
+      'the live session was not first');
+    const boundedTools = await page.evaluate(() => {
+      const session = globalThis.AKLive.state.snapshot.sessions
+        .find((item) => item.key === 'codex:ui-live-session');
+      for (let index = 0; index < 12; index++) {
+        const id = `historical-tool-${index}`;
+        session.nodes.push({
+          id, kind: 'tool', toolName: index % 2 ? 'Read' : 'exec_command',
+          status: 'completed', observedAt: new Date(Date.now() - index * 1000).toISOString(),
+        });
+        session.edges.push({
+          id: `history-edge-${index}`, source: 'ui-live-session', target: id,
+          action: 'tool.completed',
+        });
+      }
+      globalThis.AKLive.render();
+      return {
+        visible: document.querySelectorAll('#live-tools .live-tool').length,
+        history: document.querySelector('.node-history')?.textContent,
+      };
+    });
+    check('completed tool history collapses into an owner-associated recent lane',
+      boundedTools.visible === 7 && /earlier operations/.test(boundedTools.history),
+      `bounded tool rendering was ${JSON.stringify(boundedTools)}`);
+    await page.click('[data-session="ui-review-session"]');
+    await page.waitForSelector('#live-mode[data-mode="review"]');
+    await page.waitForFunction(() => !document.getElementById('live-playback-range').disabled);
+    check('completed sessions enter a clearly distinguished review mode',
+      /REVIEW/.test(await visibleText(page, '#live-mode'))
+        && !(await page.locator('#live-playback-range').isDisabled())
+        && !(await page.locator('#live-resume-live').isVisible()),
+      'review badge or playback controls were unavailable');
+    const reviewToolsAtEnd = await page.locator('#live-tools .live-tool').count();
+    await page.fill('#live-playback-range', '0');
+    const reviewToolsAtStart = await page.locator('#live-tools .live-tool').count();
+    check('seeking deterministically rebuilds the cinematic canvas at the playhead',
+      reviewToolsAtEnd === 1 && reviewToolsAtStart === 0,
+      `review tools changed ${reviewToolsAtEnd} -> ${reviewToolsAtStart}`);
+    await page.click('#live-playback-toggle');
+    check('review controls expose play state, speed, seek, and resume-live',
+      await page.getAttribute('#live-playback-toggle', 'aria-label') === 'Pause session review'
+        && await page.locator('#live-playback-speed').isVisible(),
+      'playback controls did not enter playing state');
+    await page.click('#live-playback-toggle');
+    await page.click('[data-session="ui-live-session"]');
+    await page.waitForSelector('#live-mode[data-mode="live"]');
+    check('an active session offers explicit review while it continues live',
+      await page.locator('#live-enter-review').isVisible()
+        && !(await page.locator('#live-resume-live').isVisible()),
+      'active session did not offer Review session');
+    await page.click('#live-enter-review');
+    await page.waitForSelector('#live-mode[data-mode="review"]');
+    check('active-session review exposes an explicit return to the livestream',
+      await page.locator('#live-resume-live').isVisible(),
+      'Resume live was missing from active review');
+    await page.click('#live-resume-live');
+    await page.waitForSelector('#live-mode[data-mode="live"]');
+    check('Resume live deterministically restores live mode',
+      await page.locator('#live-enter-review').isVisible()
+        && !(await page.locator('#live-resume-live').isVisible()),
+      'mode controls did not return to live');
+    await page.waitForTimeout(120); // let the transcript SSE init/reset settle before local render assertions
+
+    // Transcript rendering uses text-only escaping, folds sensitive high-volume
+    // record kinds, searches locally, and synchronizes selection with the map.
+    const transcriptInit = await page.evaluate(() => {
+      globalThis.AKLive.addTranscript({
+        reset: true,
+        snapshot: { events: [{ eventId: 'nested-init', kind: 'message',
+          text: 'nested snapshot event', actor: { id: 'ui-live-session', role: 'assistant' } }] },
+      }, true);
+      return {
+        content: globalThis.AKLive.state.transcript.turns[0]?.content,
+        session: globalThis.AKLive.state.transcript.session,
+      };
+    });
+    check('transcript init consumes nested snapshot.events and keeps a canonical session key',
+      transcriptInit.content === 'nested snapshot event'
+        && transcriptInit.session === 'codex:ui-live-session',
+      `transcript init state was ${JSON.stringify(transcriptInit)}`);
+    await page.evaluate(() => globalThis.AKLive.addTranscript([
+      { id: 't-user', role: 'user', content: 'Please inspect the parser', agentId: 'ui-live-session' },
+      { id: 't-agent', role: 'assistant', content: 'Bohr is checking the parser', agentId: 'ui-live-agent' },
+      { id: 't-think', role: 'thinking', content: 'private reasoning', agentId: 'ui-live-agent' },
+      { id: 't-tool', role: 'tool', toolName: 'Read', content: '<img src=x onerror="globalThis.__liveXss=1">', agentId: 'ui-live-agent' },
+      { id: 't-rich-tool', type: 'tool', toolName: 'exec_command', command: 'pnpm test',
+        args: { cwd: '/masked/project' }, result: '136 passed', error: 'masked warning',
+        agentId: 'ui-live-agent' },
+    ], true));
+    const transcript = await visibleText(page, '#live-transcript-list');
+    check('persistent transcript distinguishes conversation, thinking, and tools',
+      /Please inspect/.test(transcript) && /Bohr is checking/.test(transcript)
+        && /Show thinking/.test(transcript) && /Show tool/.test(transcript),
+      `transcript was ${JSON.stringify(transcript)}`);
+    const transcriptOrder = await page.locator('#live-transcript-list .live-turn')
+      .evaluateAll((turns) => turns.map((turn) => turn.dataset.turn));
+    check('live transcript flows upward with newest evidence first',
+      transcriptOrder[0] === 't-rich-tool'
+        && transcriptOrder[transcriptOrder.length - 1] === 't-user',
+      `transcript order was ${JSON.stringify(transcriptOrder)}`);
+    check('transcript content is rendered defensively rather than interpreted as markup',
+      await page.locator('#live-transcript-list img').count() === 0
+        && await page.evaluate(() => globalThis.__liveXss) !== 1,
+      'untrusted transcript markup reached the DOM');
+    await page.locator('#live-transcript-list [data-turn="t-rich-tool"] details').click();
+    const richTool = await page.locator(
+      '#live-transcript-list [data-turn="t-rich-tool"] details',
+    ).innerText();
+    check('tool transcript preserves masked command, arguments, result, and error data',
+      /pnpm test/.test(richTool) && richTool.includes('/masked/project')
+        && /136 passed/.test(richTool) && /masked warning/.test(richTool),
+      `rich tool record was ${JSON.stringify(richTool)}`);
+    await page.fill('#live-transcript-search', 'Bohr');
+    check('transcript search filters the current local stream',
+      /Bohr is checking/.test(await visibleText(page, '#live-transcript-list'))
+        && !/Please inspect/.test(await visibleText(page, '#live-transcript-list')),
+      'search did not narrow transcript messages');
+    await page.fill('#live-transcript-search', '');
+    await page.locator('[data-node="ui-live-agent"]').focus();
+    await page.keyboard.press('Enter');
+    check('keyboard graph selection focuses the matching agent transcript',
+      !/Please inspect/.test(await visibleText(page, '#live-transcript-list'))
+        && /Bohr is checking/.test(await visibleText(page, '#live-transcript-list'))
+        && await page.locator('#live-transcript-clear-filter').isVisible(),
+      'agent selection and transcript filter diverged');
+    await page.click('#live-transcript-clear-filter');
+
+    // Camera controls preserve the point under the pointer and stay bounded.
+    const camera0 = await page.evaluate(() => ({ ...globalThis.AKLive.state.camera }));
+    await page.click('#live-zoom-in');
+    const cameraIn = await page.evaluate(() => ({ ...globalThis.AKLive.state.camera }));
+    check('Zoom in changes the map scale and readable percentage',
+      cameraIn.k > camera0.k && /%/.test(await visibleText(page, '#live-zoom')),
+      `camera ${JSON.stringify(camera0)} -> ${JSON.stringify(cameraIn)}`);
+    await page.click('#live-zoom-out');
+    check('Zoom out reverses the scale change',
+      (await page.evaluate(() => globalThis.AKLive.state.camera.k)) < cameraIn.k,
+      'zoom-out did not reduce scale');
+    const canvasBox = await page.locator('#live-canvas').boundingBox();
+    const cursor = { x: canvasBox.x + canvasBox.width * .72, y: canvasBox.y + canvasBox.height * .38 };
+    const wheelInvariant = await page.evaluate(({ x, y }) => {
+      const c = document.getElementById('live-canvas').getBoundingClientRect();
+      const before = { ...globalThis.AKLive.state.camera };
+      const local = { x: x - c.left, y: y - c.top };
+      const world = { x: (local.x - before.x) / before.k, y: (local.y - before.y) / before.k };
+      document.getElementById('live-canvas').dispatchEvent(new globalThis.WheelEvent('wheel', {
+        bubbles: true, cancelable: true, deltaY: -220, clientX: x, clientY: y,
+      }));
+      const after = { ...globalThis.AKLive.state.camera };
+      return {
+        before, after,
+        projected: { x: after.x + world.x * after.k, y: after.y + world.y * after.k },
+        local,
+      };
+    }, cursor);
+    check('wheel zoom is centered on the pointer',
+      wheelInvariant.after.k > wheelInvariant.before.k
+        && Math.abs(wheelInvariant.projected.x - wheelInvariant.local.x) < .5
+        && Math.abs(wheelInvariant.projected.y - wheelInvariant.local.y) < .5,
+      `wheel invariant was ${JSON.stringify(wheelInvariant)}`);
+    const clamps = await page.evaluate(() => {
+      const c = document.getElementById('live-canvas'), r = c.getBoundingClientRect();
+      for (let i = 0; i < 80; i++) c.dispatchEvent(new globalThis.WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: -1000, clientX: r.left + 10, clientY: r.top + 10 }));
+      const max = globalThis.AKLive.state.camera.k;
+      for (let i = 0; i < 160; i++) c.dispatchEvent(new globalThis.WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 1000, clientX: r.left + 10, clientY: r.top + 10 }));
+      return { max, min: globalThis.AKLive.state.camera.k };
+    });
+    check('wheel zoom clamps to safe minimum and maximum scales',
+      clamps.max === 2.8 && clamps.min === .25, `clamps were ${JSON.stringify(clamps)}`);
+
+    const panBefore = await page.evaluate(() => ({ ...globalThis.AKLive.state.camera }));
+    await page.mouse.move(canvasBox.x + 18, canvasBox.y + 18);
+    await page.mouse.down();
+    await page.mouse.move(canvasBox.x + 83, canvasBox.y + 61, { steps: 4 });
+    await page.mouse.up();
+    const panAfter = await page.evaluate(() => ({ ...globalThis.AKLive.state.camera }));
+    check('dragging anywhere on empty canvas pans the execution map',
+      Math.abs(panAfter.x - panBefore.x - 65) < 1
+        && Math.abs(panAfter.y - panBefore.y - 43) < 1,
+      `pan ${JSON.stringify(panBefore)} -> ${JSON.stringify(panAfter)}`);
+    check('canvas overlays do not intercept pan gestures',
+      await page.evaluate(() => getComputedStyle(document.getElementById('live-empty')).pointerEvents)
+        === 'none',
+      'empty-state overlay intercepted the draggable canvas');
+
+    const nodeBox = await page.locator('[data-node="ui-live-agent"]').boundingBox();
+    const dragBefore = await page.evaluate(() => ({
+      transform: document.querySelector('[data-node="ui-live-agent"]').getAttribute('transform'),
+      edge: document.querySelector('[data-target="ui-live-agent"]').getAttribute('d'),
+    }));
+    await page.mouse.move(nodeBox.x + nodeBox.width / 2, nodeBox.y + nodeBox.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(nodeBox.x + nodeBox.width / 2 + 70, nodeBox.y + nodeBox.height / 2 + 45, { steps: 5 });
+    await page.mouse.up();
+    const dragAfter = await page.evaluate(() => ({
+      transform: document.querySelector('[data-node="ui-live-agent"]').getAttribute('transform'),
+      edge: document.querySelector('[data-target="ui-live-agent"]').getAttribute('d'),
+    }));
+    check('dragging a node updates both its position and connected edge',
+      dragAfter.transform !== dragBefore.transform && dragAfter.edge !== dragBefore.edge,
+      `drag ${JSON.stringify(dragBefore)} -> ${JSON.stringify(dragAfter)}`);
+    check('dragging an agent pins it in the visual model',
+      await page.getAttribute('[data-node="ui-live-agent"]', 'data-pinned') === 'true',
+      'dragged node was not pinned');
+    const cameraBeforeDelta = await page.evaluate(() => ({ ...globalThis.AKLive.state.camera }));
+    await page.evaluate(() => globalThis.AKLive.receive('delta', {
+      eventId: 'live:position-persist', sessionId: 'ui-live-session',
+      observedAt: new Date().toISOString(), host: 'codex', surface: 'native',
+      action: 'agent.output', status: 'running',
+      actor: { id: 'ui-live-agent', kind: 'subagent', label: 'Bohr', role: 'tester' },
+      source: { confidence: 'observed' },
+    }));
+    check('manual node position persists across live updates',
+      await page.getAttribute('[data-node="ui-live-agent"]', 'transform') === dragAfter.transform,
+      'node snapped back after a delta');
+    check('live deltas preserve the user camera',
+      await page.evaluate((before) => {
+        const after = globalThis.AKLive.state.camera;
+        return after.x === before.x && after.y === before.y && after.k === before.k;
+      }, cameraBeforeDelta),
+      `camera changed from ${JSON.stringify(cameraBeforeDelta)} to ${
+        JSON.stringify(await page.evaluate(() => globalThis.AKLive.state.camera))}`);
+    await page.evaluate(() => globalThis.AKLive.receive('delta', {
+      eventId: 'claude:same-native-id', sessionId: 'ui-live-session',
+      sessionKey: 'claude:ui-live-session', project: 'agentic-kit',
+      projectKey: 'project:agentic-kit', observedAt: new Date().toISOString(),
+      host: 'claude', action: 'session.started', status: 'running',
+      actor: { id: 'claude-session-node', kind: 'session' },
+      source: { confidence: 'observed' },
+    }));
+    check('provider-qualified keys keep identical native session IDs isolated',
+      await page.evaluate(() => {
+        const sessions = globalThis.AKLive.state.snapshot.sessions;
+        const codex = sessions.find((s) => s.key === 'codex:ui-live-session');
+        const claude = sessions.find((s) => s.key === 'claude:ui-live-session');
+        return !!codex && !!claude
+          && !codex.nodes.some((node) => node.id === 'claude-session-node')
+          && claude.nodes.some((node) => node.id === 'claude-session-node');
+      }),
+      'a Claude delta mutated the Codex session with the same native ID');
+    await page.click('#live-reset-layout');
+    check('Reset layout clears manual pins and restores automatic coordinates',
+      await page.getAttribute('[data-node="ui-live-agent"]', 'data-pinned') === 'false'
+        && await page.getAttribute('[data-node="ui-live-agent"]', 'transform') !== dragAfter.transform,
+      'manual layout survived reset');
+    await page.click('#live-fit');
+    const fitted = await page.evaluate(() => ({ ...globalThis.AKLive.state.camera }));
+    check('Fit computes a finite bounded camera for the current graph',
+      Number.isFinite(fitted.x) && Number.isFinite(fitted.y)
+        && fitted.k >= .25 && fitted.k <= 2.5 && fitted.k !== 1,
+      `fit camera was ${JSON.stringify(fitted)}`);
+
+    await page.setViewportSize({ width: 680, height: 820 });
+    const responsive = await page.evaluate(() => {
+      const workspace = getComputedStyle(document.querySelector('.live-workspace'));
+      return { columns: workspace.gridTemplateColumns, canvasHeight: document.getElementById('live-canvas').clientHeight };
+    });
+    check('mobile layout stacks map and transcript with a usable canvas',
+      responsive.columns.split(' ').length === 1 && responsive.canvasHeight > 300,
+      `responsive styles were ${JSON.stringify(responsive)}`);
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.click('#live-pause');
+    check('Pause Live exposes its pressed state',
+      await page.getAttribute('#live-pause', 'aria-pressed') === 'true',
+      'aria-pressed did not become true');
+    const stableBefore = await page.getAttribute('[data-node="ui-live-session"]', 'transform');
+    await page.evaluate(() => globalThis.AKLive.receive('delta', {
+      schemaVersion: 1, eventId: 'live:4', sessionId: 'ui-live-session',
+      observedAt: new Date().toISOString(), host: 'codex', surface: 'ruflo',
+      action: 'agent.spawned', status: 'running',
+      actor: { id: 'ui-live-new', kind: 'subagent', role: 'reviewer' },
+      target: null, source: { confidence: 'correlated' },
+    }));
+    check('Pause Live freezes queued topology changes',
+      await page.locator('[data-node="ui-live-new"]').count() === 0,
+      'queued node rendered while paused');
+    await page.click('#live-pause');
+    await page.waitForSelector('[data-node="ui-live-new"]');
+    check('resume applies every queued topology change',
+      await page.locator('[data-node="ui-live-new"]').count() === 1,
+      'queued node did not render on resume');
+    check('existing nodes retain stable coordinates when topology grows',
+      await page.getAttribute('[data-node="ui-live-session"]', 'transform') === stableBefore,
+      'existing node position changed');
+
+    await page.click('[data-tab="usage"]');
+    check('leaving Live tears down graph and transcript EventSources',
+      await page.evaluate(() => globalThis.AKLive.state.source === null
+        && globalThis.AKLive.state.transcript.source === null
+        && globalThis.AKLive.state.active === false),
+      'a live source remained active');
+    await page.click('[data-tab="live"]');
+    await page.waitForTimeout(250);
+    check('returning to Live creates exactly one active stream',
+      await page.evaluate(() => !!globalThis.AKLive.state.source && globalThis.AKLive.state.active === true),
+      'live source did not reconnect');
     // ── every Usage sub-view ──
     await page.click('[data-tab="usage"]');
     await page.waitForTimeout(800);