Hand off with the release path settled and the UI as a truth detector

F57 to F60 close the release-transaction family, F18 closes the single
last_error slot, the debt ledger exists as a read-only projection, and
the operator console is rebuilt on ethos.

The part worth acting on is what the UI could not do honestly: no
web-facing human-decision write path, no keystroke forwarding, context
occupancy trapped in herdr, project configuration unserved, and no
federated handoff request. F61 and F62 are recorded and unbuilt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVbaKucEYBjMqVeUgJUsc1

.gitignore

@@ -16,3 +16,4 @@ node_modules/
 .node_modules/
 web/dist/
 web/tsconfig.tsbuildinfo
+build/

AGENTS.md

@@ -76,6 +76,11 @@ the live herdr instance and check.
   There is no container entrypoint script — `Dockerfile.api` execs
   `/app/orchestra` directly. Neither deployed file is the repo's
   `deploy/config.example.jsonc`.
+- Browser operator accounts live in `$ORCHESTRA_DATA/auth.db`. Create or reset
+  one with `orchestra-user set -data /data -username NAME` while the API is
+  stopped, or use the authenticated Settings screen. The old
+  `ORCHESTRA_WEB_USERNAME`/`ORCHESTRA_WEB_PASSWORD_HASH` pair is accepted only
+  for a one-time import into an empty database and should then be removed.
 - Two machines in the registry: `homesrv` (192.168.1.104) and `workpc`
   (192.168.1.105), each nominally running 3 herdrs (claude/codex/opencode).
   In practice **homesrv has no local herdr running** (connection refused on

AUDIT.md

@@ -391,3 +391,37 @@ work.
 
 Sudo is not available in this sandbox, so the worker install, the restart, and
 the `worker.env` scrub remain operator steps.
+
+## Browser operator database and UI refresh (2026-08-26)
+
+The browser login no longer depends on an operator copying a bcrypt hash into
+deployment configuration. The live startup path in `cmd/orchestra/main.go`
+opens `$ORCHESTRA_DATA/auth.db` through `internal/authn`, refuses to serve with
+an empty operator database, and registers the database-backed session and
+account handlers before wrapping the mux with `authz.HTTPWithSessions`.
+
+- `auth.db` is an embedded bbolt database created mode 0600. Passwords are
+  bcrypt-hashed before the record is written; login also performs bcrypt for an
+  unknown username to avoid an account-existence timing shortcut.
+- `orchestra-user set -data DIR -username NAME` reads and confirms a password
+  from the terminal, creates the first operator, and resets an existing one.
+  The Docker API image includes this helper. The authenticated Settings screen
+  changes the current username/password and revokes every session for that
+  identity.
+- An existing `ORCHESTRA_WEB_USERNAME`/`ORCHESTRA_WEB_PASSWORD_HASH` pair is
+  imported once if and only if the database has no users. Once a user exists,
+  those variables are ignored with an explicit startup log, so an old `.env`
+  cannot overwrite a database credential.
+- The browser now gets its actual username from `GET /v1/ui/session`, renders
+  it in the shell, and has a dedicated account page. The login view was rebuilt
+  as a responsive desktop/mobile entry experience.
+- Frontend state drift was fixed at the same time: `needs_attention` and
+  `in_review`, plus the three newer block reasons, are in the TypeScript model,
+  board lanes, status colors, diagnosis copy, and filtering. The seven-state
+  "All" board now has an explicit layout instead of falling back to one column.
+
+Verified from the working tree after rebuilding the embedded assets:
+`go build ./...`, `go vet ./...`, and `go test ./...` all pass (21 test
+packages). The frontend TypeScript build passes, all five API-client tests
+pass, and Vite's production build emits the assets embedded by
+`internal/webui`.

BURNIN.md

@@ -2527,3 +2527,63 @@ transaction and no session behind, on either worker.
 
 Both workers hold no sessions and no release transactions. Deployed pair is
 still `3c7cf95` on both halves.
+
+## Run 16, 2026-08-29: the rotation rung, half proven
+
+Task `06G4SWEVP71FYYKAV5FV0ZK5ZG` on `34f3c28`, a three-phase plan
+(`78d25730140c`) with automated checks inside policy.
+
+### Proven: a successor inherits the whole sealed plan
+
+The launch context of the session that picked the task up after its rotation
+carries the complete plan: overview, current state, desired end state,
+non-goals, approach, all three phases with their files, changes and
+verification, testing strategy, risks, migration, and ten research citations.
+
+### Not a defect: that successor was not given phase progress
+
+`renderPlanProgress` runs only for `WorkPhaseImplement`
+(`internal/agentctx/agentctx.go:321`). This successor picked up in review, and
+the code says why: an independent review must reconstruct the change from the
+diff rather than inherit the implementer's account. Progress is withheld there
+deliberately.
+
+So the rung still needs an **implement-phase** successor. The records exist and
+are durable, projected by `Task.PlanPhases()`.
+
+### Why the mid-implement rotation missed
+
+A trivial task spends about four minutes in implement, and all three phases
+verified inside two and a half of them, every one against the same tree
+`3da86dbf8ad5`. The implementer does the whole change first, then verifies each
+phase. The suspend, edit and restart that sets `handoff_requested` takes about
+a minute, and it landed after the implementer had already asked for review.
+
+Two mechanics worth keeping:
+
+- **The web handoff action cannot drive this.** `RequestHandoff` needs a local
+  coordinator and every session here is worker-owned, so it answers 503. That
+  is the Design A guardrail working, and a fourth UI-exposed gap.
+- **A state-file edit does not survive a running worker.** It holds sessions in
+  memory and writes them back. Suspend, edit, then restart; resuming lets the
+  old copy win. This cost one attempt to learn.
+
+### F62: a requested handoff that is never answered is invisible
+
+The rotation is agent-driven: the worker asks, and the agent must write
+`HANDOFF.md` at a turn boundary. The review agent never did. Renewals stopped,
+the lease expired at 10:12:05, and the task requeued having lost an attempt.
+
+Worker health recorded exactly one thing, 34 times:
+
+```text
+x34  lease 06G4SWEVP71FYYKAV5FV0ZK5ZG not renewed: agent status idle and pane unchanged
+```
+
+Nothing says a handoff was requested and left unanswered. There is no timeout,
+no retry, and no observation. The only visible consequence is an expiry that
+looks identical to an ordinary idle one. Diagnosing it needed the worker state
+file.
+
+The ring earned its keep again: one distinct message with a count of 34, rather
+than 34 overwrites of one slot.

HANDOFF-2026-08-29-truth-detector.md

@@ -0,0 +1,314 @@
+# Handoff: the release path is settled, and the UI became a truth detector
+
+Written 2026-08-29, 14:20 local (10:20 UTC). Read with `BURNIN.md` (the run
+ledger, current through run 16), `DEBT-DESIGN.md`, `PLAN-SPEC-DESIGN.md`,
+`AUDIT.md` and `CLAUDE.md`. The previous handoff is
+`HANDOFF-2026-08-28-plan-v1.md`.
+
+Everything below was observed live unless it says otherwise.
+
+## The headline
+
+**The expired-release defect is fixed and proven both ways.** The whole family
+around it is closed. F57 through F60 settle what happens to a release
+transaction in every case. That includes the ones that used to need an operator
+with a text editor.
+
+**Three new things exist that did not before.** A bounded observation ring on
+worker health, closing F18. A read-only debt ledger projected from the event
+log. An operator console rebuilt on the ethos design system.
+
+**The UI turned out to be a truth detector.** Nine screens were built against
+real endpoints. They found four places where Orchestra has no capability to
+support the intended interface. That list is the most valuable output of the
+session.
+
+```text
+orchestra-plan-v1        plan machinery proven
+        ↓
+orchestra-f18-baseline   d6ee10f, the bounded observation ring
+        ↓ 6 commits
+34f3c28                  deployed now: release path settled, debt ledger, new UI
+```
+
+## Deployed state
+
+| Half | Revision |
+|---|---|
+| Coordinator, homesrv container | `34f3c28` |
+| Worker, workpc systemd | `34f3c28` |
+
+```text
+commit              34f3c2888fc7d45d190d93e1ea42501b6cd3e474
+coordinator sha256  1d32d83ec859b36e12473fab01bbfc3c769b97b4f6ae4db2841db5161e0eda19
+worker sha256       0e3877321dea8a1eeda51ccc6f3ead1a14aa5f5cae4d95b704f61c364248ec65
+```
+
+`cbd6b11` is one commit above and is documentation only. Three commits are
+unpushed.
+
+**Worker installs no longer need a human.** The operator installed the
+`/etc/sudoers.d` line, so `sudo -n install …` and
+`sudo -n systemctl restart orchestra-worker` both work unattended. Verify the
+running revision from the journal, never the installed file.
+
+## The defects fixed, and how each was found
+
+Not one came from reading code. Every one came from a live run failing.
+
+| Id | Commit | What |
+|---|---|---|
+| F57 | `6565b9f` | An expired lease could never commit the anchor it had already pushed. The worker sent an epoch the expiry replay had deleted, and the coordinator refused any handoff without a live lease. The epoch now belongs to the transaction, `TaskReleased` retains the ending epoch, and `lateHandoffAccepted` lets exactly that owner commit while the task is queued and unleased. |
+| F58 | `03663f4` | A superseded transaction retried a permanent 409 forever, holding the pane and pinning `ActiveTask`. Run 10's task did it for seven hours. `TaskLeased` now abandons a transaction whose id the lease does not carry. |
+| F59 | `8e37989` | F58 fires on `TaskLeased`, and a failed task is never leased again. `TaskFailed` now drops the transaction too. |
+| F60 | `3c7cf95` | The general rule the other two were reaching for. Terminal is failed or completed. Blocked keeps the transaction, because a reopen can still commit it, so `TaskBlocked` now retains the ending epoch as well. A refusal parks the commit for 30s backing off to 5 minutes, and any event about the task un-parks it. A transport failure is not an answer and retries at once. |
+| F18 | `d6ee10f` | The single `last_error` slot. Worker health now carries up to sixteen distinct observations with repeat counts and first/last times, collapsing by message rather than by position. |
+
+### The rig that proved F57, and the guard
+
+```text
+19:00:10.742  transaction opens at prepared, anchor pushing
+19:00:10.727  TaskReleased v15  reason=lease_expired  surface=tui
+19:00:11.662  TaskReleased v16  the late commit, accepted 935ms after the lease died
+19:00:11.665  TaskLeased  v17   successor picks up the handoff
+19:00:15.524  TaskPickupValidated v18
+```
+
+Race guard, next boundary: force the expiry, then lease the task to a probe
+harness before the push finishes. The late commit is refused, no handoff is
+written, and the successor's lease stands.
+
+**The rig technique matters more than the rig.** Suspending the worker cannot
+produce this ordering. The event replay runs at the top of every tick and
+discards the transaction. The ordering exists only inside one call:
+transaction opened, anchor pushing, commit not yet sent. So poll the worker
+state file at 2ms and fire `POST /v1/tasks/<id>/release` the instant a
+transaction appears at `prepared`.
+
+**A named probe harness owns a lease without starting an agent.**
+`race-guard-probe` never picks anything up and expires on the normal TTL.
+
+## Corrections to the previous handoff
+
+**The operator lifecycle actions do not lose a version race.** On a leased
+task, `block`, `release` and `attention` are refused by
+`internal/store/store.go:885-901` when the payload omits `harness_id` and
+`lease_epoch`. Ten attempts in 550ms all failed that way. Send both fencing
+fields and they succeed on the first try.
+
+**The OpenCode Zen free tier is not blocked.** The selected model was.
+
+## The debt ledger
+
+`DEBT-DESIGN.md` answers nine design questions and carries four amendments the
+operator made. Slice one is built, deployed and run.
+
+**Slice one writes nothing.** A read-only projection over the existing log,
+plus a pure eligibility function and `GET /v1/debt`. It folded 881 events and
+produced 15 candidates and 3 gaps.
+
+```text
+v1:operational:lease_expired:workpc-opencode:lease      r=41  tasks=4
+v1:operational:lease_expired:workpc-claude:lease        r=29  tasks=13
+v1:operational:lease_failure:-:lease                    r=20  tasks=16
+v1:correctness:handoff_validation:-:lease               r=5   tasks=5
+```
+
+The opencode failure shape is the top item, found mechanically. Run 14 reached
+the same conclusion by hand from a pane capture.
+
+**It reported what it cannot see, which was the point.** The 409 release loop
+does not appear. That evidence lived in the F18 worker ring, and no event
+carries it. Manual interventions are a non-durable gap for the same reason.
+
+**The first run exposed four defects in the model**, all recorded at the end of
+`DEBT-DESIGN.md`:
+
+- the component part is too coarse for lease evidence
+- `harness` is often empty on block reasons
+- path normalization mangled a mismatch reference
+- recurrence alone is the wrong sort order
+
+Layout, so the read model does not end up in the command layer:
+
+```text
+internal/domain/debt.go            types, signature, classification
+internal/store/debt_projection.go  the fold, and the gap report
+internal/operations/debt.go        CheckDebtEligibility
+```
+
+## The operator console
+
+Nine screens on the ethos system, signal violet `#8F7AE5`, routing fork motif.
+Each screen was built by its own agent against a foundation with one author.
+The shell, tokens and primitives could not drift into nine dialects.
+
+**Render before signing off.** Three bugs existed that no computed value would
+have caught. All three came from looking at a screenshot:
+
+- The previous stylesheet fought every shared class name and leaked properties
+  the new rules never mention, which is how `position: fixed` survived on
+  `.topbar`. It is now scoped under `.legacy` and reaches only the login route.
+  That also stops its green accent and its `backdrop-filter` from reaching the
+  console.
+- Go marshals a zero `time.Time` as `0001-01-01T00:00:00Z` and `omitempty` does
+  not omit a struct, so absent timestamps arrived populated-looking and
+  rendered as `739855d ago`. Stripped once in `client.ts`, with a test.
+- Long machine ids overflowed their cards and painted under the next one.
+
+Chromium is installed at `/usr/bin/chromium`. To see a screen without a live
+session, write a throwaway harness that stubs `window.fetch` and renders
+`<Console>` inside a `MemoryRouter`, served by vite on a spare port. Note that
+`npx` and `./node_modules/.bin/*` do not work on this filesystem: call
+`node ./node_modules/vite/bin/vite.js` directly.
+
+## What the UI proved Orchestra cannot do
+
+This is the part worth acting on. Each screen refused to fake something, and
+the refusals name real capability gaps.
+
+| Gap | Evidence |
+|---|---|
+| **No web-facing human-decision write path** | `Steer / Correct` is disabled. `internal/ui/ui.go`'s action switch has grant/deny approval, resubmit, handoff, release, block and complete, and nothing writes `HumanDecisionRecorded`. The spec makes steering the primary action of the task detail screen. |
+| **No keystroke forwarding** | `Take control` is disabled. Only resubmit and approval grant/deny reach a live pane. |
+| **Context occupancy is trapped in herdr** | Three screens independently hit it. No projection carries it. |
+| **Project configuration is not served** | Repo, remote, quality gate and verification policy live only in `config.jsonc`. The projects screen can show none of it. |
+| **The web cannot request a handoff for a federated task** | `RequestHandoff` needs a local coordinator and answers 503. That is the Design A guardrail working. |
+
+The operator's direction on these. Treat first-class direct human input as the
+highest-value backend feature. Build it as `POST /v1/tasks/<id>/decisions`,
+using the same durable decision semantics as Gitea comments, so Gitea, CLI and
+web converge on one `HumanDecisionRecorded`. Keep take-control disabled,
+because arbitrary pane input bypasses the durable authority model. Expose
+occupancy through a session health projection rather than teaching the web
+server about herdr. Add a read-only effective project configuration endpoint,
+which F61 will also need.
+
+## Where the plan-machinery ladder stands
+
+Proven in run 14: the worker executes the **sealed plan's** commands rather
+than the request's, and every `PlanPhaseVerified` binds `plan_ref`, `phase_id`,
+`at_sha`, `evidence_ref`, `lease_epoch` and `harness_id`.
+
+Proven in run 16: a successor inherits the **whole sealed plan**, all phases
+with their files, changes, verification, and the research citations.
+
+**Still unproven, and the next runtime item:**
+
+```text
+mid-implement rotation
+→ successor picks up in implement
+→ launch context states which phases are already verified
+
+manual verification
+→ SHA goes stale
+→ re-verification
+
+plan mismatch
+→ human decision
+→ real replan, old plan retained, replacement launched
+```
+
+Two things make the first one hard, and both are now known:
+
+- **A trivial task spends about four minutes in implement**, and verifies every
+  phase against one tree near the end. The implementer writes the whole change
+  first, then verifies each phase in turn. Use a task whose implement phase
+  genuinely runs long.
+- **A state-file edit does not survive a running worker.** It holds sessions in
+  memory and writes them back. Suspend, edit, then `sudo systemctl restart`.
+  Resuming lets the old copy win. Setting `handoff_requested` on the session is
+  the production rotation lever.
+
+Progress is withheld from a **review** successor on purpose
+(`internal/agentctx/agentctx.go:321`), because an independent review must
+reconstruct the change from the diff. That absence is not the defect.
+
+## F61 and F62, recorded and not built
+
+**F61: the planner learns the verification policy by refusal.** The brief says
+a policy exists, not what is in it. Every plan therefore pays one refused round
+trip. The recovery loop works: run 14's planner consumed the refusal and
+resealed 31 seconds later. It is not a one-liner, because `agentctx.Input.Policy` is filled
+from the worker's `SafeOperations` while the verification policy is
+coordinator-side. The reason to promote it later is local models, which may
+propose forbidden commands repeatedly because they cannot infer the allowed
+substitute.
+
+**F62: a requested handoff nobody answers is invisible.** The rotation is
+agent-driven. In run 16 the agent never wrote `HANDOFF.md`, renewals stopped,
+the lease expired, and the task lost an attempt. Worker health recorded only
+`agent status idle and pane unchanged`, 34 times. There is no timeout, no
+retry, and no observation saying a handoff was requested and left unanswered.
+The expiry is indistinguishable from an ordinary idle one.
+
+## Live state
+
+Three pull requests are open and unreviewed:
+
+```text
+06G4M6HF1Z3EREX1X3NEKSHP24  pulls/18
+06G4M8WHGQ4P3GQMPEEH0RJRHM  pulls/19
+06G4SWEVP71FYYKAV5FV0ZK5ZG  pulls/20
+```
+
+Both workers are online on `34f3c28` with no release transactions and no
+sessions. 29 blocked `test-e2e` tasks are burn-in debris. Three `correx` tasks
+are queued and unschedulable, because `correx` has no entry in the
+coordinator's `config.jsonc`.
+
+**opencode now runs.** The model was the problem, and `hy3-free` works. It then
+stops on a permission prompt, because `~/.config/opencode/opencode.jsonc` sets
+`"bash": "ask"`. Orchestra can answer that exact dialog, but only when an
+operator queues `grant_approval`, so unattended work stalls on the first
+command. Set `"bash": "allow"` for unattended runs. That file also has no
+top-level `model` key, so OpenCode picks whatever sits at the top of
+`~/.local/state/opencode/model.json`, which any manual pick silently changes.
+
+**The opencode adapter is now a debt item, not a curiosity.** It cannot resolve
+a session file. Activity therefore reads `unknown`, and the worker cannot tell
+finished from never-started. The debt projection surfaced it independently as
+the top recurring operational item.
+
+## Things that will bite
+
+- **Background python tasks get killed here.** Three watchers died before doing
+  anything. Foreground polling and the `Monitor` tool both work.
+- **`/v1/events` is one line of JSON.** A `grep` for two substrings matches
+  across unrelated tasks. Parse it.
+- **`npx` and `./node_modules/.bin/*` fail on this filesystem.** Call node
+  directly.
+- **`rm` and `cp` are interactive.** Use `/bin/rm -f` and `install`.
+- **Secrets are guarded.** Expand a token inside the container in one remote
+  command:
+  `T=$(docker exec orchestra-api printenv ORCHESTRA_TUI_TOKEN); curl -s -H "X-Orchestra-Surface: tui" -H "Authorization: Bearer $T" ...`
+- **Rebuild the coordinator from a detached worktree**, and split the worktree
+  add, the docker build and the compose up into separate commands.
+- **`deploy/build.sh` builds both halves from one commit with one stamp.** Use
+  it.
+- **Geist is not on disk.** Both stacks fall back to system faces, and the
+  ethos threat model rules out the font CDN.
+
+## The roadmap the operator set
+
+```text
+A. runtime correctness   finish the plan-machinery live proof
+B. evidence and debt     durable worker observations, manual-intervention
+                         events, then rerun the projection
+C. operator surface      first-class HumanDecision write API,
+                         effective project-config read API,
+                         session and context health projection
+D. adapter               fix opencode activity and session resolution
+E. UI                    wire capabilities as backend support becomes real
+```
+
+The framing that ties them together is the thing to keep. The UI says what
+Orchestra cannot expose or control. The debt ledger says which of those
+shortcomings repeatedly costs something. The burn-in says which runtime
+semantics are reliable. Those three decide what gets built next.
+
+One design question to settle before B's slice two writes any code. The worker
+ring is bounded and lossy by construction. Ingesting it durably means deciding
+whether the coordinator stores every observation as an event, or only
+transitions. Storing every heartbeat's ring would write the same 41-count
+observation hundreds of times.

deploy/DEPLOYMENT.md

@@ -8,17 +8,40 @@ coordinator deployment" below for the build that carries provenance. (The old
 
 ## Browser operator login
 
-The browser UI requires `ORCHESTRA_WEB_USERNAME` and
-`ORCHESTRA_WEB_PASSWORD_HASH`. Generate a bcrypt hash without putting the
-password in shell history:
+Browser operators now live in the embedded `${ORCHESTRA_DATA}/auth.db`
+database. Passwords are bcrypt-hashed inside that database; no password hash
+belongs in `.env`.
+
+For a new local data directory, create the first account while Orchestra is
+stopped. The command reads and confirms the password from the terminal:
 
 ```sh
-go run ./cmd/orchestra-password
+go run ./cmd/orchestra-user set -data ./data -username kami
 ```
 
-Set the emitted hash in the service environment along with the chosen
-username, then restart the coordinator. `ORCHESTRA_WEB_TOKEN` is not used by
-the browser UI anymore.
+For the Docker Compose deployment, the API image includes the same helper.
+Keep the API stopped while it opens the database, then use the existing data
+volume through Compose:
+
+```sh
+docker compose stop orchestra-api
+docker compose run --rm --entrypoint /app/orchestra-user \
+  orchestra-api set -data /data -username kami
+docker compose up -d orchestra-api
+```
+
+After signing in, the Settings screen can change the username or password.
+Every browser session for that account is revoked after a credential change.
+To recover a forgotten password, stop the API and run `orchestra-user set`
+again for the same username. `orchestra-user list -data /data` lists usernames
+without exposing password hashes.
+
+On the first start after upgrading, an empty auth database automatically
+imports the existing `ORCHESTRA_WEB_USERNAME` and
+`ORCHESTRA_WEB_PASSWORD_HASH` pair. Once the startup log confirms the import,
+remove both legacy values from `.env`; they are ignored whenever the database
+already contains an account. `ORCHESTRA_WEB_TOKEN` remains unused by the
+browser UI.
 
 Build a worker for staging on workpc with:
 
@@ -44,7 +67,7 @@ credential: its `build` object is the coordinator provenance. `GET
 /v1/federation/workers` shows every worker's `build`, supported projects, and
 worker-local health without SSH.
 
-Build both binaries with `deploy/build.sh`, which stamps them from one commit
+Build the coordinator and worker with `deploy/build.sh`, which stamps them from one commit
 and refuses a dirty tree. A burn-in run must never pair a new coordinator with
 an old worker, and matching revisions are how that is checked rather than
 assumed.

deploy/build.sh

@@ -1,5 +1,6 @@
 #!/bin/sh
-# Build the coordinator and the worker from one commit, with one stamp, so a
+# Build the coordinator, worker, and operator-account helper from one commit,
+# with one stamp, so a
 # burn-in run can never pair a new coordinator with an old worker. Both
 # binaries then report the same revision at /v1/admin/diagnostics and in the
 # worker's registration, which is what makes deployed identity evidence rather
@@ -23,4 +24,5 @@ flags="-s -w -X orchestra/internal/buildinfo.Revision=$rev -X orchestra/internal
 mkdir -p "$out"
 (cd "$tree" && go build -trimpath -ldflags="$flags" -o "$out/orchestra" ./cmd/orchestra)
 (cd "$tree" && go build -trimpath -ldflags="$flags" -o "$out/orchestra-worker" ./cmd/orchestra-worker)
+(cd "$tree" && go build -trimpath -ldflags="-s -w" -o "$out/orchestra-user" ./cmd/orchestra-user)
 echo "$rev"

deploy/orchestra.env.example

@@ -139,12 +139,11 @@ ORCHESTRA_CONTEXT_WINDOW=200000
 # --- Bus authorization tokens (bearer auth per surface; a surface with no
 # token set has no auth requirement — set these once you have real clients) ---
 #ORCHESTRA_TUI_TOKEN=
-# Required: the service refuses to start without both. The browser UI's
-# task, lifecycle and approval controls are session-gated; it no longer
-# accepts a shared Web bearer token. Generate the bcrypt hash with:
-#   go run ./cmd/orchestra-password
-ORCHESTRA_WEB_USERNAME=operator
-ORCHESTRA_WEB_PASSWORD_HASH=
+# Browser operators are stored in $ORCHESTRA_DATA/auth.db, not in this file.
+# With Orchestra stopped, create or reset one interactively with:
+#   orchestra-user set -data /data -username kami
+# Existing ORCHESTRA_WEB_USERNAME + ORCHESTRA_WEB_PASSWORD_HASH values are
+# imported once only when auth.db contains no users, then should be removed.
 # Set when the UI is served over plain HTTP, so the session cookie can be
 # sent without Secure. Leave unset behind TLS.
 #ORCHESTRA_UI_INSECURE_COOKIE=1

internal/webui/assets/ethos-icons.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ETHOS — icon set
+  One hand, one grid. Every icon: viewBox 0 0 24 24, stroke="currentColor",
+  stroke-width 1.7, round caps/joins, fill="none". Transport glyphs (play,
+  pause, prev, next, more) are the only filled exceptions.
+
+  USE:   <svg class="icon" width="22" height="22"><use href="/ethos-icons.svg#i-search"/>  <symbol id="i-fork" viewBox="0 0 24 24"><path d="M4 12h4M8 12l4-5h8M8 12l4 5h8"/><circle cx="4" cy="12" r="1.6"/><circle cx="20" cy="7" r="1.6"/><circle cx="20" cy="17" r="1.6"/></symbol>
+  <symbol id="i-task" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8.5 12l2.5 2.5 4.5-5"/></symbol>
+  <symbol id="i-decision" viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9z"/><path d="M12 8v4M12 15.5v.5"/></symbol>
+  <symbol id="i-worker" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></symbol>
+  <symbol id="i-project" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
+  <symbol id="i-review" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></symbol>
+  <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7.5 9.5l3 2.5-3 2.5M13 15h4"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 4l9 15H3z"/><path d="M12 10v4M12 16.5v.5"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></symbol>
+</svg>
+         color + width/height come from the consumer; the icon inherits them.
+
+  EXTEND: add a new <symbol id="i-NAME"> on the same 24px grid, same stroke,
+          same corner feel. Match the existing hand — do not import lucide or
+          any other pack. Keep ids prefixed i- and kebab-cased.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
+
+  <!-- ── app mark / motif seeds ── -->
+  <symbol id="i-wave" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
+    <path d="M2 12h1M6 8v8M10 4v16M14 7v10M18 5v14M21 11v2"/>
+  </symbol>
+  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/>
+    <rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>
+  </symbol>
+
+  <!-- ── navigation ── -->
+  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 11l8-6 8 6M6 10v9h12v-9"/>
+  </symbol>
+  <symbol id="i-listen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 18V9l14-3v9"/><circle cx="6" cy="18" r="2.4"/><circle cx="18" cy="15" r="2.4"/>
+  </symbol>
+  <symbol id="i-library" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <rect x="4" y="4" width="6" height="16" rx="1.5"/><rect x="14" y="4" width="6" height="16" rx="1.5"/>
+  </symbol>
+  <symbol id="i-album" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+    <circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="2"/>
+  </symbol>
+  <symbol id="i-artist" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6"/>
+  </symbol>
+  <symbol id="i-queue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 7h11M4 12h11M4 17h7M18 9v8"/><circle cx="18" cy="18.5" r="1.6"/>
+  </symbol>
+  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <path d="M4 7a1 1 0 011-1h4.5l2 2H19a1 1 0 011 1v8a1 1 0 01-1 1H5a1 1 0 01-1-1z"/>
+  </symbol>
+  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <path d="M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V8z"/><path d="M14 3v5h5"/>
+  </symbol>
+  <symbol id="i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/>
+  </symbol>
+
+  <!-- ── transport (filled) ── -->
+  <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol>
+  <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5h3v14H8zM13 5h3v14h-3z"/></symbol>
+  <symbol id="i-prev" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6z"/><path d="M20 6v12l-9-6z"/></symbol>
+  <symbol id="i-next" viewBox="0 0 24 24" fill="currentColor"><path d="M16 6h2v12h-2z"/><path d="M6 6v12l9-6z"/></symbol>
+  <symbol id="i-shuffle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 4h4v4M20 4l-6 6M4 20l16-16M16 20h4v-4M14 14l6 6M4 4l4 4"/>
+  </symbol>
+  <symbol id="i-repeat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M17 2l3 3-3 3M20 5H8a4 4 0 00-4 4v1M7 22l-3-3 3-3M4 19h12a4 4 0 004-4v-1"/>
+  </symbol>
+
+  <!-- ── actions / status ── -->
+  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+    <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
+  </symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4.5 4.5L20 7"/></symbol>
+  <symbol id="i-chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></symbol>
+  <symbol id="i-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></symbol>
+  <symbol id="i-more" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></symbol>
+  <symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6M10 21h4"/>
+  </symbol>
+  <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 4v11M8 11l4 4 4-4M5 20h14"/>
+  </symbol>
+  <symbol id="i-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 15V4M8 8l4-4 4 4M5 20h14"/>
+  </symbol>
+
+  <symbol id="i-fork" viewBox="0 0 24 24"><path d="M4 12h4M8 12l4-5h8M8 12l4 5h8"/><circle cx="4" cy="12" r="1.6"/><circle cx="20" cy="7" r="1.6"/><circle cx="20" cy="17" r="1.6"/></symbol>
+  <symbol id="i-task" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8.5 12l2.5 2.5 4.5-5"/></symbol>
+  <symbol id="i-decision" viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9z"/><path d="M12 8v4M12 15.5v.5"/></symbol>
+  <symbol id="i-worker" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></symbol>
+  <symbol id="i-project" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
+  <symbol id="i-review" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></symbol>
+  <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7.5 9.5l3 2.5-3 2.5M13 15h4"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 4l9 15H3z"/><path d="M12 10v4M12 16.5v.5"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></symbol>
+</svg>

internal/webui/assets/index.html

@@ -1,3 +1,13 @@
-<script type="module" crossorigin src="/assets/index-C0H-zYgt.js"></script>
-<link rel="stylesheet" crossorigin href="/assets/index-B0BkAbwp.css">
-<div id="root"></div>
+<!doctype html>
+<html lang="en" data-app="orchestra">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>orchestra</title>
+    <script type="module" crossorigin src="/assets/index-BAiY1a7C.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BUuDvtvX.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

web/index.html

@@ -1 +1,12 @@
-<div id="root"></div><script type="module" src="/src/main.tsx"></script>
+<!doctype html>
+<html lang="en" data-app="orchestra">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>orchestra</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

web/public/ethos-icons.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ETHOS — icon set
+  One hand, one grid. Every icon: viewBox 0 0 24 24, stroke="currentColor",
+  stroke-width 1.7, round caps/joins, fill="none". Transport glyphs (play,
+  pause, prev, next, more) are the only filled exceptions.
+
+  USE:   <svg class="icon" width="22" height="22"><use href="/ethos-icons.svg#i-search"/>  <symbol id="i-fork" viewBox="0 0 24 24"><path d="M4 12h4M8 12l4-5h8M8 12l4 5h8"/><circle cx="4" cy="12" r="1.6"/><circle cx="20" cy="7" r="1.6"/><circle cx="20" cy="17" r="1.6"/></symbol>
+  <symbol id="i-task" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8.5 12l2.5 2.5 4.5-5"/></symbol>
+  <symbol id="i-decision" viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9z"/><path d="M12 8v4M12 15.5v.5"/></symbol>
+  <symbol id="i-worker" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></symbol>
+  <symbol id="i-project" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
+  <symbol id="i-review" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></symbol>
+  <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7.5 9.5l3 2.5-3 2.5M13 15h4"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 4l9 15H3z"/><path d="M12 10v4M12 16.5v.5"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></symbol>
+</svg>
+         color + width/height come from the consumer; the icon inherits them.
+
+  EXTEND: add a new <symbol id="i-NAME"> on the same 24px grid, same stroke,
+          same corner feel. Match the existing hand — do not import lucide or
+          any other pack. Keep ids prefixed i- and kebab-cased.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
+
+  <!-- ── app mark / motif seeds ── -->
+  <symbol id="i-wave" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
+    <path d="M2 12h1M6 8v8M10 4v16M14 7v10M18 5v14M21 11v2"/>
+  </symbol>
+  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/>
+    <rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>
+  </symbol>
+
+  <!-- ── navigation ── -->
+  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 11l8-6 8 6M6 10v9h12v-9"/>
+  </symbol>
+  <symbol id="i-listen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 18V9l14-3v9"/><circle cx="6" cy="18" r="2.4"/><circle cx="18" cy="15" r="2.4"/>
+  </symbol>
+  <symbol id="i-library" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <rect x="4" y="4" width="6" height="16" rx="1.5"/><rect x="14" y="4" width="6" height="16" rx="1.5"/>
+  </symbol>
+  <symbol id="i-album" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+    <circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="2"/>
+  </symbol>
+  <symbol id="i-artist" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6"/>
+  </symbol>
+  <symbol id="i-queue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 7h11M4 12h11M4 17h7M18 9v8"/><circle cx="18" cy="18.5" r="1.6"/>
+  </symbol>
+  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <path d="M4 7a1 1 0 011-1h4.5l2 2H19a1 1 0 011 1v8a1 1 0 01-1 1H5a1 1 0 01-1-1z"/>
+  </symbol>
+  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">
+    <path d="M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V8z"/><path d="M14 3v5h5"/>
+  </symbol>
+  <symbol id="i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/>
+  </symbol>
+
+  <!-- ── transport (filled) ── -->
+  <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol>
+  <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5h3v14H8zM13 5h3v14h-3z"/></symbol>
+  <symbol id="i-prev" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6z"/><path d="M20 6v12l-9-6z"/></symbol>
+  <symbol id="i-next" viewBox="0 0 24 24" fill="currentColor"><path d="M16 6h2v12h-2z"/><path d="M6 6v12l9-6z"/></symbol>
+  <symbol id="i-shuffle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 4h4v4M20 4l-6 6M4 20l16-16M16 20h4v-4M14 14l6 6M4 4l4 4"/>
+  </symbol>
+  <symbol id="i-repeat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M17 2l3 3-3 3M20 5H8a4 4 0 00-4 4v1M7 22l-3-3 3-3M4 19h12a4 4 0 004-4v-1"/>
+  </symbol>
+
+  <!-- ── actions / status ── -->
+  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+    <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
+  </symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4.5 4.5L20 7"/></symbol>
+  <symbol id="i-chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></symbol>
+  <symbol id="i-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></symbol>
+  <symbol id="i-more" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></symbol>
+  <symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6M10 21h4"/>
+  </symbol>
+  <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 4v11M8 11l4 4 4-4M5 20h14"/>
+  </symbol>
+  <symbol id="i-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 15V4M8 8l4-4 4 4M5 20h14"/>
+  </symbol>
+
+  <symbol id="i-fork" viewBox="0 0 24 24"><path d="M4 12h4M8 12l4-5h8M8 12l4 5h8"/><circle cx="4" cy="12" r="1.6"/><circle cx="20" cy="7" r="1.6"/><circle cx="20" cy="17" r="1.6"/></symbol>
+  <symbol id="i-task" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8.5 12l2.5 2.5 4.5-5"/></symbol>
+  <symbol id="i-decision" viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9z"/><path d="M12 8v4M12 15.5v.5"/></symbol>
+  <symbol id="i-worker" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></symbol>
+  <symbol id="i-project" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
+  <symbol id="i-review" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></symbol>
+  <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7.5 9.5l3 2.5-3 2.5M13 15h4"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 4l9 15H3z"/><path d="M12 10v4M12 16.5v.5"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4"/></symbol>
+</svg>

web/src/Console.tsx

@@ -0,0 +1,60 @@
+import { Route, Routes } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { Shell } from './shell/Shell'
+import { Dashboard } from './screens/Dashboard'
+import { Tasks } from './screens/Tasks'
+import { TaskDetail } from './screens/TaskDetail'
+import { Terminal } from './screens/Terminal'
+import { Decisions } from './screens/Decisions'
+import { Workers } from './screens/Workers'
+import { Projects } from './screens/Projects'
+import { Review } from './screens/Review'
+import { Settings } from './screens/Settings'
+import { api } from './api/client'
+import type { Account } from './api/types'
+
+/** The operator console. Auth stays in main.tsx; this is only what an
+ *  authenticated operator sees. */
+export function Console({
+  account,
+  onLogout,
+  onCredentialsChanged,
+}: {
+  account: Account
+  onLogout: () => void
+  onCredentialsChanged: (username: string) => void
+}) {
+  const overview = useQuery({
+    queryKey: ['overview'],
+    queryFn: api.overview,
+    refetchInterval: 5000,
+  })
+
+  return (
+    <Routes>
+      {/* No revision in the top bar yet. The overview carries worker builds,
+          not the coordinator's, and labelling a worker build as the
+          coordinator's would be a lie in the one place an operator trusts. */}
+      <Route element={<Shell live={!overview.isError} />}>
+        <Route index element={<Dashboard />} />
+        <Route path="tasks" element={<Tasks />} />
+        <Route path="tasks/:id" element={<TaskDetail />} />
+        <Route path="tasks/:id/terminal" element={<Terminal />} />
+        <Route path="decisions" element={<Decisions />} />
+        <Route path="workers" element={<Workers />} />
+        <Route path="projects" element={<Projects />} />
+        <Route path="review" element={<Review />} />
+        <Route
+          path="settings"
+          element={
+            <Settings
+              account={account}
+              onLogout={onLogout}
+              onCredentialsChanged={onCredentialsChanged}
+            />
+          }
+        />
+      </Route>
+    </Routes>
+  )
+}

web/src/api/client.test.ts

@@ -17,20 +17,40 @@ describe('UI API client',()=>{
     expect(fetch).toHaveBeenCalledWith('/v1/artifacts',expect.objectContaining({method:'POST',body:'report'}))
   })
   it('submits username and password to the browser login endpoint',async()=>{
-		const fetch=vi.fn().mockResolvedValue(new Response(JSON.stringify({username:'operator'}),{status:200}))
+    const fetch=vi.fn().mockResolvedValue(new Response(JSON.stringify({username:'operator'}),{status:200}))
     vi.stubGlobal('fetch',fetch)
-		await expect(api.login('operator','not stored in the browser')).resolves.toEqual({username:'operator'})
+    await expect(api.login('operator','not stored in the browser')).resolves.toEqual({username:'operator'})
     expect(fetch).toHaveBeenCalledWith('/v1/ui/session',expect.objectContaining({method:'POST',body:JSON.stringify({username:'operator',password:'not stored in the browser'})}))
   })
-	it('treats a missing browser session as a normal signed-out state',async()=>{
-		const fetch=vi.fn().mockResolvedValue(new Response('unauthorized',{status:401}))
-		vi.stubGlobal('fetch',fetch)
-		await expect(api.session()).resolves.toBeUndefined()
-	})
-	it('updates account credentials through the session-gated account endpoint',async()=>{
-		const fetch=vi.fn().mockResolvedValue(new Response(JSON.stringify({username:'kami'}),{status:200}))
-		vi.stubGlobal('fetch',fetch)
-		await api.updateAccount({current_password:'old password',username:'kami',new_password:'new password'})
-		expect(fetch).toHaveBeenCalledWith('/v1/ui/account',expect.objectContaining({method:'PUT'}))
-	})
+  it('treats a missing browser session as a normal signed-out state',async()=>{
+    const fetch=vi.fn().mockResolvedValue(new Response('unauthorized',{status:401}))
+    vi.stubGlobal('fetch',fetch)
+    await expect(api.session()).resolves.toBeUndefined()
+  })
+  it('updates account credentials through the session-gated account endpoint',async()=>{
+    const fetch=vi.fn().mockResolvedValue(new Response(JSON.stringify({username:'kami'}),{status:200}))
+    vi.stubGlobal('fetch',fetch)
+    await api.updateAccount({current_password:'old password',username:'kami',new_password:'new password'})
+    expect(fetch).toHaveBeenCalledWith('/v1/ui/account',expect.objectContaining({method:'PUT'}))
+  })
+
+it('a zero Go timestamp is stripped rather than rendered as a date', async () => {
+  const fetchMock = vi.fn(async () =>
+    new Response(
+      JSON.stringify({
+        tasks: [{ id: 't', blocked_at: '0001-01-01T00:00:00Z', at: '2026-08-29T00:00:00Z' }],
+        workers: [],
+        sessions: [],
+        updated_at: '2026-08-29T00:00:00Z',
+      }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } },
+    ),
+  )
+  vi.stubGlobal('fetch', fetchMock)
+  const overview = await api.overview()
+  const task = overview.tasks[0] as unknown as Record<string, unknown>
+  expect(task.blocked_at).toBeUndefined()
+  expect(task.at).toBe('2026-08-29T00:00:00Z')
+  expect(overview.updated_at).toBe('2026-08-29T00:00:00Z')
+})
 })

web/src/api/client.ts

@@ -1,4 +1,4 @@
-import type { Account, CreatedEvent, Detail, Overview } from './types'
+import type { Account, CreatedEvent, DebtLedger, Detail, Event, Overview, Worker } from './types'
 
 function sessionExpired(response: Response) {
   if (response.status === 401) {
@@ -11,6 +11,27 @@ async function responseError(response: Response) {
   return new Error(message || `${response.status} ${response.statusText}`)
 }
 
+/** Go marshals a zero time.Time as "0001-01-01T00:00:00Z", and omitempty does
+ *  not omit a struct, so an absent timestamp arrives populated-looking. Every
+ *  screen that formatted one rendered "739855d ago", which reads as data.
+ *  Stripping it here is one guard on the boundary every screen reads through,
+ *  rather than one guard per screen per field. */
+function stripZeroTimes(value: unknown): unknown {
+  if (typeof value === 'string') {
+    return value.startsWith('0001-01-01') ? undefined : value
+  }
+  if (Array.isArray(value)) return value.map(stripZeroTimes)
+  if (value && typeof value === 'object') {
+    const out: Record<string, unknown> = {}
+    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+      const cleaned = stripZeroTimes(v)
+      if (cleaned !== undefined) out[k] = cleaned
+    }
+    return out
+  }
+  return value
+}
+
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
   const response = await fetch(path, {
     credentials: 'same-origin',
@@ -23,7 +44,7 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
     sessionExpired(response)
     throw await responseError(response)
   }
-  return response.json() as Promise<T>
+  return stripZeroTimes(await response.json()) as T
 }
 
 async function text(path: string) {
@@ -50,10 +71,10 @@ async function upload(body: string) {
 }
 
 async function session(): Promise<Account | undefined> {
-	const response = await fetch('/v1/ui/session', { credentials: 'same-origin' })
-	if (response.status === 401) return undefined
-	if (!response.ok) throw await responseError(response)
-	return response.json() as Promise<Account>
+  const response = await fetch('/v1/ui/session', { credentials: 'same-origin' })
+  if (response.status === 401) return undefined
+  if (!response.ok) throw await responseError(response)
+  return response.json() as Promise<Account>
 }
 
 async function login(username: string, password: string) {
@@ -64,7 +85,7 @@ async function login(username: string, password: string) {
     body: JSON.stringify({ username, password }),
   })
   if (!response.ok) throw await responseError(response)
-	return response.json() as Promise<Account>
+  return response.json() as Promise<Account>
 }
 
 async function logout() {
@@ -76,15 +97,14 @@ async function logout() {
 }
 
 export const api = {
-	session,
+  session,
   login,
   logout,
-	account: () => request<Account>('/v1/ui/account'),
-	updateAccount: (body: { current_password: string; username: string; new_password?: string }) =>
-		request<Account>('/v1/ui/account', {
-			method: 'PUT',
-			body: JSON.stringify(body),
-		}),
+  updateAccount: (body: { current_password: string; username: string; new_password?: string }) =>
+    request<Account>('/v1/ui/account', {
+      method: 'PUT',
+      body: JSON.stringify(body),
+    }),
   overview: () => request<Overview>('/v1/ui/overview'),
   detail: (id: string) => request<Detail>(`/v1/ui/tasks/${id}`),
   artifact: (ref: string) => text(`/v1/ui/artifacts/${ref}`),
@@ -94,6 +114,11 @@ export const api = {
       method: 'POST',
       body: JSON.stringify(body),
     }),
+  // Endpoints outside /v1/ui that the console reads directly. Adding a UI
+  // wrapper for each would be a second copy of the same projection.
+  workers: () => request<Worker[]>('/v1/federation/workers'),
+  events: (since = 0) => request<Event[]>(`/v1/events?since=${since}`),
+  debt: () => request<DebtLedger>('/v1/debt'),
   action: (id: string, action: string, body: object = {}) =>
     request<Detail>(`/v1/ui/tasks/${id}/actions/${action}`, {
       method: 'POST',

web/src/api/types.ts

@@ -35,7 +35,27 @@ export interface SessionEvidence {
   checked_at?: string
 }
 
+/** Mirrors domain.DecisionRequest. Fields are optional here because a
+ *  projection may omit them, and a screen must never assume a question. */
+export interface DecisionOption {
+  id?: string
+  description?: string
+  tradeoff?: string
+}
+
+export interface DecisionRequest {
+  question?: string
+  why?: string
+  options?: DecisionOption[]
+  evidence?: string[]
+}
+
 export interface Task {
+  /** On the wire from domain.Task. Three screens widened these locally
+   *  before they lived here. */
+  work_phase?: string
+  last_lease_epoch?: string
+  decision_request?: DecisionRequest
   id: string
   source: string
   external_id: string
@@ -122,7 +142,17 @@ export interface Detail {
   actions: Action[]
 }
 
+/** One distinct worker failure with its repeat count. The count is the
+ *  signal: a repeat means something looped rather than merely broke. */
+export interface Observation {
+  message: string
+  count: number
+  first: string
+  last: string
+}
+
 export interface WorkerHealth {
+  observations?: Observation[]
   backend?: 'herdr' | 'tmux'
   herdr_status: 'reachable' | 'unreachable' | 'unknown'
   checked_at?: string
@@ -154,3 +184,41 @@ export interface CreatedEvent {
   task_id: string
   id: string
 }
+
+/** The read-only debt projection. Items are candidates derived from history,
+ *  and gaps name the evidence the log cannot carry at all. */
+export interface DebtObservation {
+  event_id?: string
+  legacy_ref?: string
+  task_id?: string
+  kind: string
+  signature: string
+  detail?: string
+  paths?: string[]
+  at: string
+}
+
+export interface DebtItem {
+  id: string
+  class: 'correctness' | 'operational' | 'structural' | 'polish'
+  status: string
+  symptom: string
+  consequence?: string
+  severity?: string
+  signatures: string[]
+  paths?: string[]
+  observations: DebtObservation[]
+}
+
+export interface EvidenceGap {
+  kind: string
+  reason: string
+  durable: boolean
+}
+
+export interface DebtLedger {
+  items: DebtItem[]
+  gaps: EvidenceGap[]
+  events: number
+  eligible?: { item: DebtItem; check: { eligible: boolean; reasons?: string[] } }[]
+}

web/src/components/Icon.tsx

@@ -0,0 +1,19 @@
+/** One sprite, one hand. Never import a generic icon pack: that breaks the
+ *  single-hand rule the ethos set exists to hold. */
+export function Icon({ name, size = 20 }: { name: string; size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      aria-hidden="true"
+      focusable="false"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <use href={`/ethos-icons.svg#i-${name}`} />
+    </svg>
+  )
+}

web/src/components/Primitives.tsx

@@ -0,0 +1,133 @@
+import type { ReactNode } from 'react'
+import { Icon } from './Icon'
+
+/** Machine values are mono, always. A label is human, its value is not. */
+export function M({ children }: { children: ReactNode }) {
+  return <span className="mono">{children}</span>
+}
+
+export function Panel({
+  title,
+  count,
+  trailing,
+  children,
+  bodied = false,
+}: {
+  title?: string
+  count?: number
+  trailing?: ReactNode
+  children: ReactNode
+  bodied?: boolean
+}) {
+  return (
+    <section className="panel">
+      {title && (
+        <header className="panel-head">
+          <h2>{title}</h2>
+          {count !== undefined && <span className="count">{count}</span>}
+          {trailing && <span className="trailing">{trailing}</span>}
+        </header>
+      )}
+      {bodied ? <div className="panel-body">{children}</div> : children}
+    </section>
+  )
+}
+
+export type Health = 'healthy' | 'degraded' | 'error' | 'unknown'
+
+export function Dot({ health }: { health: Health }) {
+  return <span className="dot" data-health={health} />
+}
+
+export function Chip({
+  tone,
+  children,
+}: {
+  tone?: 'accent' | 'warn' | 'fault' | 'done'
+  children: ReactNode
+}) {
+  return (
+    <span className="chip" data-tone={tone}>
+      {children}
+    </span>
+  )
+}
+
+export function Meter({ value }: { value: number }) {
+  const pct = Math.max(0, Math.min(100, Math.round(value)))
+  return (
+    <span className="meter" role="img" aria-label={`${pct} percent`}>
+      <span style={{ width: `${pct}%` }} />
+    </span>
+  )
+}
+
+/** The ace-fca path, drawn as the routing fork. Completed phases read quiet
+ *  green, the current phase carries the accent, the future stays neutral. */
+export const PHASES = ['frame', 'research', 'plan', 'implement', 'review', 'pr', 'merged'] as const
+export type Phase = (typeof PHASES)[number]
+
+export function PhasePath({ current, labels = true }: { current?: string; labels?: boolean }) {
+  const at = PHASES.indexOf((current || 'frame') as Phase)
+  return (
+    <div className="phases">
+      {PHASES.map((phase, i) => {
+        const state = i < at ? 'done' : i === at ? 'current' : 'todo'
+        return (
+          <span key={phase} style={{ display: 'flex', alignItems: 'center' }}>
+            {i > 0 && <span className="phase-link" data-state={i <= at ? 'done' : 'todo'} />}
+            <span className="phase-step" data-state={state}>
+              <span className="phase-node" />
+              {labels && <span className="phase-name">{phase}</span>}
+            </span>
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+export function Empty({ title, children }: { title: string; children?: ReactNode }) {
+  return (
+    <div className="empty">
+      <span className="motif">
+        <Icon name="fork" size={28} />
+      </span>
+      <h3>{title}</h3>
+      {children}
+    </div>
+  )
+}
+
+/** A screen with no endpoint says which one it needs. The interface never
+ *  implies data it does not have. */
+export function EndpointGap({ path, what }: { path: string; what: string }) {
+  return (
+    <div className="panel-body">
+      <p className="gap-note">
+        no endpoint yet: {path}
+      </p>
+      <p style={{ color: 'var(--text-mid)', marginBottom: 0 }}>{what}</p>
+    </div>
+  )
+}
+
+/** Go marshals a zero time.Time as "0001-01-01T00:00:00Z", and omitempty does
+ *  not omit a struct. Every timestamp off the wire can therefore arrive
+ *  populated-looking and mean absent. Without this guard a screen prints
+ *  "739000d ago" and reads as data. */
+export function absent(at?: string) {
+  return !at || at.startsWith('0001-01-01')
+}
+
+/** A relative age, or null when the timestamp is absent. Never a fabricated
+ *  duration. */
+export function ago(at?: string): string | null {
+  if (absent(at)) return null
+  const seconds = Math.round((Date.now() - new Date(at as string).getTime()) / 1000)
+  if (!Number.isFinite(seconds)) return null
+  if (seconds < 60) return `${Math.max(0, seconds)}s ago`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`
+  return `${Math.floor(seconds / 86400)}d ago`
+}

web/src/main.tsx

@@ -19,7 +19,7 @@ import {
 } from '@tanstack/react-query'
 import { api } from './api/client'
 import type {
-	Account,
+  Account,
   Action,
   BlockReason,
   Capture,
@@ -32,6 +32,8 @@ import type {
   Worker,
 } from './api/types'
 import './style.css'
+import './styles/orchestra.css'
+import { Console } from './Console'
 
 const client = new QueryClient({
   defaultOptions: {
@@ -46,9 +48,9 @@ const historyStates: TaskState[] = ['completed', 'failed']
 const stateLabel: Record<TaskState, string> = {
   queued: 'Queued',
   leased: 'In session',
-	needs_attention: 'Needs attention',
+  needs_attention: 'Needs attention',
   blocked: 'Blocked',
-	in_review: 'In review',
+  in_review: 'In review',
   completed: 'Complete',
   failed: 'Failed',
 }
@@ -61,9 +63,9 @@ const blockLabel: Record<BlockReason, string> = {
   handoff_validation: 'Handoff validation',
   operator_block: 'Operator block',
   system_error: 'System error',
-	trajectory_gate: 'Plan approval',
-	human_decision: 'Decision needed',
-	operator_required: 'Operator required',
+  trajectory_gate: 'Plan approval',
+  human_decision: 'Decision needed',
+  operator_required: 'Operator required',
   unknown: 'Unknown',
 }
 
@@ -100,8 +102,8 @@ type IconName =
   | 'refresh'
   | 'search'
   | 'server'
-	| 'settings'
-	| 'shield'
+  | 'settings'
+  | 'shield'
   | 'terminal'
   | 'users'
   | 'x'
@@ -169,13 +171,13 @@ function Icon({ name, size = 18 }: { name: IconName; size?: number }) {
         <path d="M7 7h.01M7 17h.01" />
       </>
     ),
-		settings: (
-			<>
-				<circle cx="12" cy="12" r="3" />
-				<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" />
-			</>
-		),
-		shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Zm-3-10 2 2 4-5" />,
+    settings: (
+      <>
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" />
+      </>
+    ),
+    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Zm-3-10 2 2 4-5" />,
     terminal: (
       <>
         <path d="m4 6 5 5-5 5M11 18h9" />
@@ -256,8 +258,8 @@ function humanize(value: string) {
 }
 
 function initials(username: string) {
-	const parts = username.trim().split(/[\s._-]+/).filter(Boolean)
-	return (parts.length > 1 ? `${parts[0][0]}${parts[1][0]}` : username.slice(0, 2)).toUpperCase()
+  const parts = username.trim().split(/[\s._-]+/).filter(Boolean)
+  return (parts.length > 1 ? `${parts[0][0]}${parts[1][0]}` : username.slice(0, 2)).toUpperCase()
 }
 
 function sessionFor(task: Task, overview: Overview) {
@@ -284,13 +286,13 @@ function taskExplanation(task: Task, overview: Overview) {
     if (session?.blocker) return session.blocker
     return session?.capture ? 'Harness is publishing live output' : 'Leased · capture unavailable'
   }
-	if (task.state === 'needs_attention') {
-		return task.blocker || 'The current lease is retained while an operator investigates'
-	}
+  if (task.state === 'needs_attention') {
+    return task.blocker || 'The current lease is retained while an operator investigates'
+  }
   if (task.state === 'blocked') {
     return task.blocker || 'No blocker detail was retained for this task'
   }
-	if (task.state === 'in_review') return 'Submitted change is waiting for human review'
+  if (task.state === 'in_review') return 'Submitted change is waiting for human review'
   if (task.state === 'failed') return task.last_error || 'Review the failure before retrying'
   return 'Work and completion evidence retained'
 }
@@ -344,7 +346,7 @@ function CommandPalette({ close }: { close: () => void }) {
         ['board', 'Open dispatch board', '', 'grid'],
         ['new', 'Create a new task', 'N', 'plus'],
         ['workers', 'Open worker pool', '', 'server'],
-				['settings', 'Open account settings', '', 'settings'],
+        ['settings', 'Open account settings', '', 'settings'],
         ['refresh', 'Refresh live data', 'R', 'refresh'],
       ] as const,
     [],
@@ -364,7 +366,7 @@ function CommandPalette({ close }: { close: () => void }) {
   const choose = (id: string) => {
     if (id === 'board') navigate('/')
     if (id === 'workers') navigate('/workers')
-		if (id === 'settings') navigate('/settings')
+    if (id === 'settings') navigate('/settings')
     if (id === 'new') {
       navigate('/')
       window.setTimeout(() => window.dispatchEvent(new Event('orchestra:new-task')), 0)
@@ -451,8 +453,8 @@ function Shell({ children, account, onLogout }: { children: React.ReactNode; acc
     ? 'Dispatch board'
     : location.pathname === '/workers'
       ? 'Worker pool'
-			: location.pathname === '/settings'
-				? 'Account settings'
+      : location.pathname === '/settings'
+        ? 'Account settings'
       : location.pathname.startsWith('/artifacts/')
         ? 'Evidence artifact'
         : 'Task record'
@@ -501,10 +503,10 @@ function Shell({ children, account, onLogout }: { children: React.ReactNode; acc
             <span>Workers</span>
             <b className="nav-count">{onlineWorkers}/{workers.length}</b>
           </NavLink>
-					<NavLink to="/settings">
-						<Icon name="settings" />
-						<span>Settings</span>
-					</NavLink>
+          <NavLink to="/settings">
+            <Icon name="settings" />
+            <span>Settings</span>
+          </NavLink>
         </nav>
         <div className="sidebar-status">
           <span className={onlineWorkers ? 'signal online' : 'signal'} />
@@ -538,17 +540,17 @@ function Shell({ children, account, onLogout }: { children: React.ReactNode; acc
             aria-expanded={accountOpen}
             onClick={() => setAccountOpen((open) => !open)}
           >
-						<span className="avatar">{initials(account.username)}</span>
-						<span className="account-label">{account.username}</span>
+            <span className="avatar">{initials(account.username)}</span>
+            <span className="account-label">{account.username}</span>
           </button>
           {accountOpen && (
             <div className="account-menu">
-							<div className="account-menu-user">
-								<span className="avatar">{initials(account.username)}</span>
-								<span><b>{account.username}</b><small>Operator account</small></span>
-							</div>
-							<Link to="/settings" onClick={() => setAccountOpen(false)}><Icon name="settings" size={15} /> Account settings</Link>
-							<button type="button" onClick={onLogout}><Icon name="arrow-left" size={15} /> Sign out</button>
+              <div className="account-menu-user">
+                <span className="avatar">{initials(account.username)}</span>
+                <span><b>{account.username}</b><small>Operator account</small></span>
+              </div>
+              <Link to="/settings" onClick={() => setAccountOpen(false)}><Icon name="settings" size={15} /> Account settings</Link>
+              <button type="button" onClick={onLogout}><Icon name="arrow-left" size={15} /> Sign out</button>
             </div>
           )}
         </div>
@@ -941,9 +943,9 @@ function OverviewPage() {
   const projects = [...new Set(data.tasks.map((task) => task.project).filter(Boolean))].sort()
   const pendingApprovals = sessions.filter((session) => session.pending_approval)
   const approvalTask = pendingApprovals.find((session) => session.capture?.task_id)?.capture?.task_id
-	const inSession = data.tasks.filter((task) => task.state === 'leased' || task.state === 'needs_attention').length
+  const inSession = data.tasks.filter((task) => task.state === 'leased' || task.state === 'needs_attention').length
   const queued = data.tasks.filter((task) => task.state === 'queued').length
-	const attention = data.tasks.filter((task) => task.state === 'needs_attention' || task.state === 'blocked' || task.state === 'failed').length
+  const attention = data.tasks.filter((task) => task.state === 'needs_attention' || task.state === 'blocked' || task.state === 'failed').length
   const history = data.tasks.filter((task) => historyStates.includes(task.state)).length
   const onlineWorkers = data.workers.filter((worker) => worker.online).length
   const term = search.trim().toLowerCase()
@@ -1267,14 +1269,14 @@ function TaskDiagnosis({ detail }: { detail: Detail }) {
   const observed = evidence?.captured_at || evidence?.checked_at || detail.session?.capture?.at
   const title = approval
     ? 'Waiting for operator approval'
-		: detail.task.state === 'blocked' || detail.task.state === 'needs_attention'
+    : detail.task.state === 'blocked' || detail.task.state === 'needs_attention'
       ? blockLabel[detail.task.block_reason || 'unknown']
       : detail.task.state === 'leased'
         ? detail.session?.capture ? 'Agent session is active' : 'Session capture is unavailable'
         : stateLabel[detail.task.state]
   const explanation = approval
     ? 'The harness is paused at a permission boundary. Review the exact request below.'
-		: detail.task.state === 'blocked' || detail.task.state === 'needs_attention'
+    : detail.task.state === 'blocked' || detail.task.state === 'needs_attention'
       ? detail.task.blocker || 'No blocker detail was retained.'
       : detail.task.state === 'leased'
         ? detail.session?.capture
@@ -1282,8 +1284,8 @@ function TaskDiagnosis({ detail }: { detail: Detail }) {
           : detail.session?.blocker || 'The lease exists, but Orchestra cannot read current pane output.'
         : detail.task.state === 'queued'
           ? 'This task is eligible for routing when a compatible worker has capacity.'
-					: detail.task.state === 'in_review'
-						? 'The implementation was submitted and is waiting for the bound human review.'
+          : detail.task.state === 'in_review'
+            ? 'The implementation was submitted and is waiting for the bound human review.'
           : 'This is a terminal task record with retained evidence.'
 
   return (
@@ -1581,114 +1583,116 @@ function Workers() {
 }
 
 function Settings({ account, onCredentialsChanged }: { account: Account; onCredentialsChanged: (username: string) => void }) {
-	const [username, setUsername] = useState(account.username)
-	const [currentPassword, setCurrentPassword] = useState('')
-	const [newPassword, setNewPassword] = useState('')
-	const [confirmation, setConfirmation] = useState('')
-	const [visible, setVisible] = useState(false)
-	const [formError, setFormError] = useState('')
-	const mutation = useMutation({
-		mutationFn: () => api.updateAccount({
-			current_password: currentPassword,
-			username: username.trim(),
-			...(newPassword ? { new_password: newPassword } : {}),
-		}),
-		onSuccess: (updated) => onCredentialsChanged(updated.username),
-	})
-	const usernameChanged = username.trim() !== account.username
-	const changed = usernameChanged || !!newPassword
-	const passwordLongEnough = newPassword.length >= 10
-	const passwordWithinLimit = new TextEncoder().encode(newPassword).length <= 72
-	const passwordsMatch = newPassword === confirmation
+  const [username, setUsername] = useState(account.username)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [visible, setVisible] = useState(false)
+  const [formError, setFormError] = useState('')
+  const mutation = useMutation({
+    mutationFn: () => api.updateAccount({
+      current_password: currentPassword,
+      username: username.trim(),
+      ...(newPassword ? { new_password: newPassword } : {}),
+    }),
+    onSuccess: (updated) => onCredentialsChanged(updated.username),
+  })
+  const usernameChanged = username.trim() !== account.username
+  const changed = usernameChanged || !!newPassword
+  const passwordLongEnough = Array.from(newPassword).length >= 10
+  const passwordWithinLimit = new TextEncoder().encode(newPassword).length <= 72
+  const passwordsMatch = newPassword === confirmation
 
-	const submit = (event: React.FormEvent) => {
-		event.preventDefault()
-		setFormError('')
-		if (!username.trim()) {
-			setFormError('Username cannot be empty.')
-			return
-		}
-		if (!changed) {
-			setFormError('Change the username or enter a new password first.')
-			return
-		}
-		if (!currentPassword) {
-			setFormError('Enter your current password to authorize this change.')
-			return
-		}
-		if (newPassword && (!passwordLongEnough || !passwordWithinLimit || !passwordsMatch)) {
-			setFormError(!passwordsMatch ? 'The new passwords do not match.' : 'Use a password between 10 and 72 bytes.')
-			return
-		}
-		mutation.mutate()
-	}
+  const submit = (event: React.FormEvent) => {
+    event.preventDefault()
+    setFormError('')
+    if (!username.trim()) {
+      setFormError('Username cannot be empty.')
+      return
+    }
+    if (!changed) {
+      setFormError('Change the username or enter a new password first.')
+      return
+    }
+    if (!currentPassword) {
+      setFormError('Enter your current password to authorize this change.')
+      return
+    }
+    if (newPassword && (!passwordLongEnough || !passwordWithinLimit || !passwordsMatch)) {
+      setFormError(!passwordsMatch ? 'The new passwords do not match.' : 'Use a password between 10 and 72 bytes.')
+      return
+    }
+    mutation.mutate()
+  }
 
-	return (
-		<main className="page settings-page">
-			<header className="page-header">
-				<div>
-					<span className="eyebrow">Operator identity</span>
-					<h1>Your account.</h1>
-					<p>Change the credentials you use for this control plane. No environment hash is involved.</p>
-				</div>
-			</header>
+  return (
+    <main className="page settings-page">
+      <header className="page-header">
+        <div>
+          <span className="eyebrow">Operator identity</span>
+          <h1>Your account.</h1>
+          <p>Change the credentials you use for this control plane. No environment hash is involved.</p>
+        </div>
+      </header>
 
-			<div className="settings-layout">
-				<aside className="profile-card">
-					<span className="profile-avatar">{initials(account.username)}</span>
-					<h2>{account.username}</h2>
-					<p>Full-control operator</p>
-					<dl>
-						<div><dt>Account created</dt><dd>{date(account.created_at)}</dd></div>
-						<div><dt>Credentials updated</dt><dd>{date(account.updated_at)}</dd></div>
-					</dl>
-					<div className="database-badge"><Icon name="shield" size={17} /><span><b>Local credential database</b><small>Password hashes stay inside Orchestra’s data volume.</small></span></div>
-				</aside>
+      <div className="settings-layout">
+        <aside className="profile-card">
+          <span className="profile-avatar">{initials(account.username)}</span>
+          <h2>{account.username}</h2>
+          <p>Full-control operator</p>
+          <dl>
+            <div><dt>Account created</dt><dd>{date(account.created_at)}</dd></div>
+            <div><dt>Credentials updated</dt><dd>{date(account.updated_at)}</dd></div>
+          </dl>
+          <div className="database-badge"><Icon name="shield" size={17} /><span><b>Local credential database</b><small>Password hashes stay inside Orchestra’s data volume.</small></span></div>
+        </aside>
 
-				<section className="settings-card">
-					<header>
-						<span className="settings-icon"><Icon name="settings" /></span>
-						<div><h2>Sign-in credentials</h2><p>Changing either field signs out every browser using this account.</p></div>
-					</header>
-					<form onSubmit={submit} noValidate>
-						<label htmlFor="account-username">Username</label>
-						<input id="account-username" autoComplete="username" value={username} onChange={(event) => { setUsername(event.target.value); setFormError('') }} />
+        <section className="settings-card">
+          <header>
+            <span className="settings-icon"><Icon name="settings" /></span>
+            <div><h2>Sign-in credentials</h2><p>Changing either field signs out every browser using this account.</p></div>
+          </header>
+          <form onSubmit={submit} noValidate>
+            <label htmlFor="account-username">Username</label>
+            <input id="account-username" autoComplete="username" value={username} onChange={(event) => { setUsername(event.target.value); setFormError('') }} />
 
-						<div className="settings-divider"><span>Optional password change</span></div>
-						<div className="form-row">
-							<label htmlFor="account-new-password">New password
-								<div className="password-field">
-									<input id="account-new-password" type={visible ? 'text' : 'password'} autoComplete="new-password" value={newPassword} onChange={(event) => { setNewPassword(event.target.value); setFormError('') }} placeholder="Leave blank to keep it" />
-									<button type="button" onClick={() => setVisible((value) => !value)}>{visible ? 'Hide' : 'Show'}</button>
-								</div>
-							</label>
-							<label htmlFor="account-confirm-password">Confirm new password
-								<input id="account-confirm-password" type={visible ? 'text' : 'password'} autoComplete="new-password" value={confirmation} onChange={(event) => { setConfirmation(event.target.value); setFormError('') }} placeholder="Repeat new password" />
-							</label>
-						</div>
-						{newPassword && (
-							<div className="password-rules" aria-live="polite">
-								<span className={passwordLongEnough ? 'met' : ''}><Icon name="check" size={13} /> 10+ characters</span>
-								<span className={passwordWithinLimit ? 'met' : ''}><Icon name="check" size={13} /> 72 bytes or fewer</span>
-								<span className={passwordsMatch && !!confirmation ? 'met' : ''}><Icon name="check" size={13} /> Passwords match</span>
-							</div>
-						)}
+            <div className="settings-divider"><span>Optional password change</span></div>
+            <div className="form-row">
+              <div className="settings-field">
+                <label htmlFor="account-new-password">New password</label>
+                <div className="password-field">
+                  <input id="account-new-password" type={visible ? 'text' : 'password'} autoComplete="new-password" value={newPassword} onChange={(event) => { setNewPassword(event.target.value); setFormError('') }} placeholder="Leave blank to keep it" />
+                  <button type="button" onClick={() => setVisible((value) => !value)}>{visible ? 'Hide' : 'Show'}</button>
+                </div>
+              </div>
+              <div className="settings-field">
+                <label htmlFor="account-confirm-password">Confirm new password</label>
+                <input id="account-confirm-password" type={visible ? 'text' : 'password'} autoComplete="new-password" value={confirmation} onChange={(event) => { setConfirmation(event.target.value); setFormError('') }} placeholder="Repeat new password" />
+              </div>
+            </div>
+            {newPassword && (
+              <div className="password-rules" aria-live="polite">
+                <span className={passwordLongEnough ? 'met' : ''}><Icon name="check" size={13} /> 10+ characters</span>
+                <span className={passwordWithinLimit ? 'met' : ''}><Icon name="check" size={13} /> 72 bytes or fewer</span>
+                <span className={passwordsMatch && !!confirmation ? 'met' : ''}><Icon name="check" size={13} /> Passwords match</span>
+              </div>
+            )}
 
-						<div className="current-password-block">
-							<label htmlFor="account-current-password">Current password</label>
-							<p>Required to save account changes.</p>
-							<input id="account-current-password" type="password" autoComplete="current-password" value={currentPassword} onChange={(event) => { setCurrentPassword(event.target.value); setFormError('') }} />
-						</div>
-						{(formError || mutation.error) && <p className="form-error" role="alert"><Icon name="alert" size={15} /> {formError || errorMessage(mutation.error)}</p>}
-						<footer className="settings-actions">
-							<span>You’ll sign in again after saving.</span>
-							<button type="submit" disabled={mutation.isPending || !changed}>{mutation.isPending ? 'Saving…' : 'Save credentials'}</button>
-						</footer>
-					</form>
-				</section>
-			</div>
-		</main>
-	)
+            <div className="current-password-block">
+              <label htmlFor="account-current-password">Current password</label>
+              <p>Required to save account changes.</p>
+              <input id="account-current-password" type="password" autoComplete="current-password" value={currentPassword} onChange={(event) => { setCurrentPassword(event.target.value); setFormError('') }} />
+            </div>
+            {(formError || mutation.error) && <p className="form-error" role="alert"><Icon name="alert" size={15} /> {formError || errorMessage(mutation.error)}</p>}
+            <footer className="settings-actions">
+              <span>You’ll sign in again after saving.</span>
+              <button type="submit" disabled={mutation.isPending || !changed}>{mutation.isPending ? 'Saving…' : 'Save credentials'}</button>
+            </footer>
+          </form>
+        </section>
+      </div>
+    </main>
+  )
 }
 
 function Artifact() {
@@ -1721,7 +1725,7 @@ function Artifact() {
   )
 }
 
-function Login({ onAuthenticated, message }: { onAuthenticated: () => void; message?: string }) {
+function Login({ onAuthenticated, message }: { onAuthenticated: (account: Account) => void; message?: string }) {
   const usernameInput = useRef<HTMLInputElement>(null)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -1742,9 +1746,9 @@ function Login({ onAuthenticated, message }: { onAuthenticated: () => void; mess
     setError('')
     setPending(true)
     try {
-      await api.login(username, password)
+      const account = await api.login(username, password)
       setPassword('')
-      onAuthenticated()
+      onAuthenticated(account)
     } catch {
       setError('That username or password was not accepted. Check both and try again.')
     } finally {
@@ -1753,9 +1757,26 @@ function Login({ onAuthenticated, message }: { onAuthenticated: () => void; mess
   }
 
   return (
-    <main className="login-page">
+    <main className="legacy login-page">
       <div className="login-grid" aria-hidden="true" />
-      <section className="login-card" aria-labelledby="login-title">
+      <div className="login-layout">
+        <section className="login-showcase" aria-label="Orchestra overview">
+          <div className="showcase-brand"><Logo /><span><b>Orchestra</b><small>Unattended work, under control</small></span></div>
+          <div className="showcase-copy">
+            <span className="eyebrow">Operator console</span>
+            <h2>Keep every agent<br />on the same score.</h2>
+            <p>Dispatch work, inspect live sessions, resolve decisions, and retain the evidence that brought each task home.</p>
+          </div>
+          <div className="showcase-flow" aria-hidden="true">
+            <span><i className="flow-dot queued" /> Queue</span><b />
+            <span><i className="flow-dot active" /> Agent</span><b />
+            <span><i className="flow-dot review" /> Review</span><b />
+            <span><i className="flow-dot done" /> Done</span>
+          </div>
+          <footer><span className="signal online" /> Control plane ready</footer>
+        </section>
+
+        <section className="login-card" aria-labelledby="login-title">
         <header className="login-brand"><Logo /><span><b>Orchestra</b><small>Control plane</small></span></header>
         <div className="login-heading">
           <span className="eyebrow">Operator access</span>
@@ -1799,10 +1820,11 @@ function Login({ onAuthenticated, message }: { onAuthenticated: () => void; mess
           </button>
         </form>
         <footer className="login-security">
-          <span><Icon name="check" size={15} /></span>
-          <p>Credentials are verified server-side. This browser receives an HttpOnly session cookie that expires after 12 hours.</p>
+            <span><Icon name="shield" size={15} /></span>
+            <p>Your password is verified against Orchestra’s local operator database. The browser receives only a 12-hour HttpOnly session cookie.</p>
         </footer>
-      </section>
+        </section>
+      </div>
     </main>
   )
 }
@@ -1820,13 +1842,14 @@ function NotFound() {
   )
 }
 
-function RoutesApp({ onLogout }: { onLogout: () => void }) {
+function RoutesApp({ account, onLogout, onCredentialsChanged }: { account: Account; onLogout: () => void; onCredentialsChanged: (username: string) => void }) {
   return (
-    <Shell onLogout={onLogout}>
+    <Shell account={account} onLogout={onLogout}>
       <Routes>
         <Route path="/" element={<OverviewPage />} />
         <Route path="/tasks/:taskID" element={<TaskDetail />} />
         <Route path="/workers" element={<Workers />} />
+        <Route path="/settings" element={<Settings account={account} onCredentialsChanged={onCredentialsChanged} />} />
         <Route path="/artifacts/:ref" element={<Artifact />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
@@ -1835,7 +1858,7 @@ function RoutesApp({ onLogout }: { onLogout: () => void }) {
 }
 
 function App() {
-  const [ready, setReady] = useState(false)
+  const [account, setAccount] = useState<Account>()
   const [checking, setChecking] = useState(true)
   const [message, setMessage] = useState('')
 
@@ -1843,13 +1866,13 @@ function App() {
     const unauthorized = () => {
       client.clear()
       setMessage('Your browser session expired. Sign in again to continue.')
-      setReady(false)
+      setAccount(undefined)
       setChecking(false)
     }
     window.addEventListener('orchestra:unauthorized', unauthorized)
-    api.overview()
-      .then(() => setReady(true))
-      .catch(() => setReady(false))
+    api.session()
+      .then((session) => setAccount(session))
+      .catch(() => setAccount(undefined))
       .finally(() => setChecking(false))
     return () => window.removeEventListener('orchestra:unauthorized', unauthorized)
   }, [])
@@ -1858,12 +1881,17 @@ function App() {
     await api.logout()
     client.clear()
     setMessage('You have signed out.')
-    setReady(false)
+    setAccount(undefined)
+  }
+  const credentialsChanged = (username: string) => {
+    client.clear()
+    setMessage(`Credentials for ${username} were saved. Sign in again to continue.`)
+    setAccount(undefined)
   }
 
   if (checking) {
     return (
-      <main className="login-page">
+      <main className="legacy login-page">
         <section className="session-check" aria-live="polite">
           <Logo /><span className="spinner" /><span>Checking your operator session…</span>
         </section>
@@ -1871,9 +1899,9 @@ function App() {
     )
   }
 
-  return ready
-    ? <RoutesApp onLogout={logout} />
-    : <Login message={message} onAuthenticated={() => { client.clear(); setMessage(''); setReady(true) }} />
+  return account
+    ? <Console account={account} onLogout={logout} onCredentialsChanged={credentialsChanged} />
+    : <Login message={message} onAuthenticated={(authenticated) => { client.clear(); setMessage(''); setAccount(authenticated) }} />
 }
 
 createRoot(document.getElementById('root')!).render(

web/src/screens/Dashboard.css

@@ -0,0 +1,126 @@
+/* Dashboard-only geometry. Everything structural (panel, row, table, stat,
+   chip, meter) comes from orchestra.css and is not restated here. */
+
+.head-stamp {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--text-lo);
+}
+
+.stamp-fault {
+  color: #e06c60;
+}
+
+/* The attention mark is a square of the row's own tone — a signal, never a
+   wash across the row. */
+.att-mark {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  color: var(--text-mid);
+}
+
+.att-mark[data-kind='fault'] {
+  border-color: rgba(216, 166, 87, 0.3);
+  background: rgba(216, 166, 87, 0.1);
+  color: #d8a657;
+}
+
+.att-mark[data-kind='review'] {
+  border-color: var(--accent-line);
+  background: var(--accent-dim);
+  color: var(--accent-hi);
+}
+
+.att-task {
+  min-width: 0;
+  flex: 1;
+}
+
+.att-when {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.row-main,
+.att-task,
+.cell-link {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-title,
+.row-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cell-link {
+  color: inherit;
+}
+
+.phase-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table td .mono[data-expired] {
+  color: #e06c60;
+}
+
+.worker-lines {
+  display: flex;
+  flex-direction: column;
+  margin-top: 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+}
+
+.worker-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+  transition: background var(--fast) var(--ease);
+}
+
+.worker-line:last-child {
+  border-bottom: 0;
+}
+
+.worker-line:hover {
+  background: var(--bg-2);
+}
+
+.worker-seen {
+  margin-left: auto;
+}
+
+.worker-errors {
+  margin-top: 10px;
+}
+
+.worker-errors p {
+  margin: 0 0 4px;
+  font-size: 12px;
+}
+
+@media (max-width: 640px) {
+  .att-task,
+  .att-when {
+    display: none;
+  }
+
+  .worker-line {
+    flex-wrap: wrap;
+  }
+}

web/src/screens/Dashboard.tsx

@@ -0,0 +1,361 @@
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { BlockReason, Overview, Session, Task, Worker } from '../api/types'
+import { Chip, Dot, Empty, EndpointGap, M, Panel, PhasePath } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './Dashboard.css'
+
+/* The ace-fca phase lives on the task as work_phase; the shared Task type has
+   not caught up with the Go domain yet, so it is read through a narrow cast
+   rather than invented or renamed. */
+const phaseOf = (t: Task) => (t as Task & { work_phase?: string }).work_phase
+
+const now = () => Date.now()
+
+/** "18s ago" / "2m ago" / "1h ago" — a machine value, so it renders mono. */
+function ago(at?: string) {
+  // Go marshals a zero time.Time as "0001-01-01T00:00:00Z" and omitempty does
+  // not omit a struct, so an absent timestamp arrives populated-looking. Left
+  // unguarded this rendered "739855d ago", which reads as data.
+  if (!at || at.startsWith('0001-01-01')) return undefined
+  const s = Math.max(0, Math.round((now() - Date.parse(at)) / 1000))
+  if (!Number.isFinite(s)) return undefined
+  if (s < 60) return `${s}s ago`
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`
+  return `${Math.floor(s / 86400)}d ago`
+}
+
+/** Time remaining on a lease as mm:ss, or "expired" when it already ran out. */
+function until(at?: string) {
+  if (!at) return undefined
+  const s = Math.round((Date.parse(at) - now()) / 1000)
+  if (!Number.isFinite(s)) return undefined
+  if (s <= 0) return 'expired'
+  const m = Math.floor(s / 60)
+  return `${String(m).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
+}
+
+const shortId = (id: string) => (id.length > 14 ? `${id.slice(0, 6)}…${id.slice(-4)}` : id)
+
+/* Why an item is on the operator's desk. Every line is derived from a real
+   block_reason or state — none of it is decorative copy. */
+const attentionReason: Record<BlockReason, string> = {
+  trajectory_gate: 'A trajectory gate is waiting for your steering.',
+  human_decision: 'The agent asked for a decision it may not make itself.',
+  operator_required: 'Orchestra cannot proceed without an operator action.',
+  approval: 'A tool or edit approval is pending.',
+  handoff_validation: 'The handoff failed validation and was not accepted.',
+  lease_failure: 'The lease could not be established.',
+  lease_expired: 'The lease expired before the agent finished.',
+  worker_offline: 'The worker holding this task went offline.',
+  system_error: 'Orchestra hit an error it could not retry past.',
+  operator_block: 'You blocked this task.',
+  unknown: 'Blocked for a reason orchestra could not classify.',
+}
+
+const stateReason: Partial<Record<Task['state'], string>> = {
+  in_review: 'A pull request is waiting on review.',
+  failed: 'The task failed and will not retry on its own.',
+  needs_attention: 'Orchestra flagged this task for you.',
+  blocked: 'The task is blocked.',
+}
+
+function reasonFor(t: Task) {
+  if (t.block_reason && attentionReason[t.block_reason]) return attentionReason[t.block_reason]
+  return stateReason[t.state] ?? 'Waiting on you.'
+}
+
+const needsOperator = (t: Task) =>
+  t.state === 'needs_attention' || t.state === 'blocked' || t.state === 'failed' || t.state === 'in_review'
+
+/** Sessions carry no task id of their own unless a capture is attached, so
+ *  they are matched on the pane the task last held. */
+function sessionFor(t: Task, sessions: Session[]) {
+  return sessions.find(
+    (s) =>
+      s.capture?.task_id === t.id ||
+      (t.last_pane_id !== undefined && s.pane_id === t.last_pane_id) ||
+      (t.lease !== undefined && s.harness_id === t.lease.harness_id),
+  )
+}
+
+function attentionIcon(t: Task) {
+  if (t.state === 'in_review') return 'review'
+  if (t.block_reason === 'trajectory_gate') return 'fork'
+  if (t.block_reason === 'human_decision' || t.block_reason === 'approval') return 'decision'
+  return 'alert'
+}
+
+function Attention({ tasks }: { tasks: Task[] }) {
+  return (
+    <Panel
+      title="Needs your attention"
+      count={tasks.length}
+      trailing={<Link to="/tasks">View all</Link>}
+    >
+      {tasks.length === 0 ? (
+        <Empty title="Nothing is waiting on you">
+          <p>Blocked tasks, trajectory gates and open reviews land here.</p>
+        </Empty>
+      ) : (
+        <div className="rows">
+          {tasks.map((t) => (
+            <Link className="row" key={t.id} to={`/tasks/${t.id}`}>
+              <span className="att-mark" data-kind={t.state === 'in_review' ? 'review' : 'fault'}>
+                <Icon name={attentionIcon(t)} size={18} />
+              </span>
+              <span className="row-main">
+                <span className="row-title">{t.title || 'Untitled task'}</span>
+                <span className="row-sub">{reasonFor(t)}</span>
+              </span>
+              <span className="att-task">
+                <span className="row-title">{t.title ? t.project : t.id}</span>
+                <span className="row-sub">
+                  <M>{shortId(t.id)}</M>
+                  {phaseOf(t) && (
+                    <>
+                      {' · '}
+                      <M>{phaseOf(t)}</M>
+                    </>
+                  )}
+                </span>
+              </span>
+              {t.blocked_at && (
+                <span className="mono att-when">{ago(t.blocked_at)}</span>
+              )}
+              <Chip tone={t.state === 'in_review' ? 'accent' : 'warn'}>
+                {t.block_reason ?? t.state}
+              </Chip>
+              <Icon name="chevron-right" size={16} />
+            </Link>
+          ))}
+        </div>
+      )}
+    </Panel>
+  )
+}
+
+function Running({ tasks, sessions }: { tasks: Task[]; sessions: Session[] }) {
+  return (
+    <Panel
+      title="Running tasks"
+      count={tasks.length}
+      trailing={<Link to="/tasks">View all tasks</Link>}
+    >
+      {tasks.length === 0 ? (
+        <Empty title="No task holds a lease">
+          <p>Leased sessions appear here with their phase, worker and lease clock.</p>
+        </Empty>
+      ) : (
+        <div className="table-scroll">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Task</th>
+                <th>Phase</th>
+                <th>Worker / harness</th>
+                <th>Last progress</th>
+                <th>Lease ends in</th>
+                <th>Attempt</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {tasks.map((t) => {
+                const s = sessionFor(t, sessions)
+                const left = until(t.lease?.until)
+                return (
+                  <tr key={t.id}>
+                    <td>
+                      <Link className="cell-link" to={`/tasks/${t.id}`}>
+                        <span className="row-title">{t.title || 'Untitled task'}</span>
+                        <span className="row-sub">
+                          <M>{shortId(t.id)}</M>
+                        </span>
+                      </Link>
+                    </td>
+                    <td>
+                      <div className="phase-cell">
+                        <Chip tone="accent">{phaseOf(t) ?? 'unknown'}</Chip>
+                        <PhasePath current={phaseOf(t)} />
+                      </div>
+                    </td>
+                    <td>
+                      <span className="row-title mono">{t.lease?.harness_id ?? '—'}</span>
+                      <span className="row-sub">
+                        <M>{s?.pane_id ?? t.last_pane_id ?? 'pane unknown'}</M>
+                      </span>
+                    </td>
+                    <td>
+                      {s?.capture?.at ? (
+                        <>
+                          <span className="mono">{ago(s.capture.at)}</span>
+                          <span className="row-sub">
+                            capture <M>r{s.capture.revision}</M>
+                          </span>
+                        </>
+                      ) : (
+                        <span className="row-sub">no capture yet</span>
+                      )}
+                    </td>
+                    <td>
+                      <span className="mono" data-expired={left === 'expired' ? '' : undefined}>
+                        {left ?? '—'}
+                      </span>
+                      {s?.agent_status && <span className="row-sub">{s.agent_status}</span>}
+                    </td>
+                    <td>
+                      <M>{t.attempt ?? 1}</M>
+                    </td>
+                    <td>
+                      <Link className="cell-link" to={`/tasks/${t.id}`} aria-label="Open task">
+                        <Icon name="chevron-right" size={16} />
+                      </Link>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+      <EndpointGap
+        path="GET /v1/ui/overview → session.context"
+        what="Context occupancy per session is measured by the herdr adapter but is not carried on the overview projection, so this table shows lease time instead of a context meter."
+      />
+    </Panel>
+  )
+}
+
+function Capacity({ workers, tasks }: { workers: Worker[]; tasks: Task[] }) {
+  const online = workers.filter((w) => w.online).length
+  const reachable = workers.filter((w) => w.health.herdr_status === 'reachable').length
+  const unreachable = workers.filter((w) => w.health.herdr_status === 'unreachable').length
+  const leased = tasks.filter((t) => t.lease)
+  const expired = leased.filter((t) => until(t.lease?.until) === 'expired').length
+  const erroring = workers.filter((w) => w.health.last_error)
+
+  return (
+    <Panel title="System state and capacity" trailing={<Link to="/workers">View workers</Link>}>
+      <div className="panel-body">
+        <div className="grid stats">
+          <div className="stat">
+            <span className="label">Workers online</span>
+            <span className="stat-value">
+              {online} / {workers.length}
+            </span>
+            <span className="row-sub">
+              <M>{workers.reduce((n, w) => n + w.capacity, 0)}</M> total capacity
+            </span>
+          </div>
+          <div className="stat">
+            <span className="label">Active leases</span>
+            <span className="stat-value">{leased.length}</span>
+            <span className="row-sub">
+              <M>{expired}</M> past their lease end
+            </span>
+          </div>
+          <div className="stat">
+            <span className="label">Herdr backends</span>
+            <span className="stat-value">
+              {reachable} / {workers.length}
+            </span>
+            <span className="row-sub">
+              <M>{unreachable}</M> unreachable, from worker health
+            </span>
+          </div>
+        </div>
+
+        <div className="worker-lines">
+          {workers.length === 0 ? (
+            <p className="row-sub">No worker has ever registered.</p>
+          ) : (
+            workers.map((w) => (
+              <Link className="worker-line" key={w.id} to="/workers">
+                <Dot
+                  health={
+                    !w.online
+                      ? 'error'
+                      : w.health.herdr_status === 'reachable'
+                        ? 'healthy'
+                        : w.health.herdr_status === 'unreachable'
+                          ? 'degraded'
+                          : 'unknown'
+                  }
+                />
+                <span className="mono">{w.id}</span>
+                <span className="row-sub">{w.health.backend ?? 'backend unknown'}</span>
+                <span className="mono worker-seen">seen {ago(w.last_seen) ?? '—'}</span>
+                {w.health.active_task_id && (
+                  <span className="mono">{shortId(w.health.active_task_id)}</span>
+                )}
+                {w.build?.revision && <span className="mono">{w.build.revision.slice(0, 7)}</span>}
+              </Link>
+            ))
+          )}
+        </div>
+
+        {erroring.length > 0 && (
+          <div className="worker-errors">
+            {erroring.map((w) => (
+              <p key={w.id}>
+                <span className="mono">{w.id}</span>{' '}
+                <span className="row-sub">{w.health.last_error}</span>{' '}
+                <span className="mono">{ago(w.health.error_at) ?? ''}</span>
+              </p>
+            ))}
+          </div>
+        )}
+      </div>
+      <EndpointGap
+        path="GET /v1/quota, GET /v1/router, GET /v1/sources"
+        what="Quota headroom, router queue depth and rejections, and source reconciliation state have no endpoint. Nothing here stands in for them."
+      />
+    </Panel>
+  )
+}
+
+export function Dashboard() {
+  const overview = useQuery<Overview>({
+    queryKey: ['overview'],
+    queryFn: api.overview,
+    refetchInterval: 5000,
+  })
+  const workers = useQuery<Worker[]>({
+    queryKey: ['workers'],
+    queryFn: api.workers,
+    refetchInterval: 5000,
+  })
+
+  const tasks = overview.data?.tasks ?? []
+  const sessions = overview.data?.sessions ?? []
+  // Workers come from the federation registry; the overview snapshot is the
+  // fallback when that call has not landed or is failing.
+  const workerList = workers.data ?? overview.data?.workers ?? []
+
+  return (
+    <main className="page">
+      <div className="page-head">
+        <h1>Dashboard</h1>
+        <p>What needs you, what is running, and whether the system is healthy.</p>
+        <span className="head-stamp">
+          {overview.data ? (
+            <>
+              read <M>{new Date(overview.data.updated_at).toISOString().slice(11, 19)} UTC</M>
+            </>
+          ) : overview.isError ? (
+            <span className="stamp-fault">overview unreachable — {String(overview.error)}</span>
+          ) : (
+            'reading the first snapshot'
+          )}
+        </span>
+      </div>
+
+      <Attention tasks={tasks.filter(needsOperator)} />
+      <Running tasks={tasks.filter((t) => t.state === 'leased')} sessions={sessions} />
+      <Capacity workers={workerList} tasks={tasks} />
+    </main>
+  )
+}

web/src/screens/Decisions.css

@@ -0,0 +1,206 @@
+/* Decisions — durable human authority.
+   Only what the shared sheet does not already carry: the filter bar, the
+   standing/superseded split, and the expanded detail row. */
+
+.dec-filters {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dec-search {
+  flex: 1;
+  min-width: 200px;
+  height: 32px;
+  padding: 0 11px;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  color: var(--text-hi);
+  font: inherit;
+  outline: none;
+  transition: border-color var(--fast) var(--ease);
+}
+
+.dec-search:hover,
+.dec-search:focus {
+  border-color: var(--line-hi);
+}
+
+.dec-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.dec-filter select {
+  height: 32px;
+  padding: 0 8px;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  color: var(--text-hi);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Operator authority is the prominent class; history is muted and never
+   dominant. The accent marks the standing decision, it does not wash the row. */
+.dec-table tbody tr[data-status] {
+  cursor: pointer;
+}
+
+.dec-table tbody tr[data-status='active'] td:first-child {
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.dec-table tbody tr[data-status='waiting'] td:first-child {
+  box-shadow: inset 2px 0 0 #d8a657;
+}
+
+.dec-table tbody tr[data-status='superseded'] .row-title,
+.dec-table tbody tr[data-status='superseded'] .row-sub,
+.dec-table tbody tr[data-status='superseded'] .mono {
+  color: var(--text-lo);
+}
+
+.dec-table tbody tr[data-status='superseded'] .row-title {
+  text-decoration: line-through;
+  text-decoration-color: var(--line-hi);
+}
+
+.dec-table tbody tr[data-open='true'] {
+  background: var(--bg-2);
+}
+
+.dec-table .row-title {
+  max-width: 42ch;
+}
+
+.dec-task {
+  display: flex;
+  flex-direction: column;
+}
+
+.dec-task:hover .mono {
+  color: var(--accent-hi);
+}
+
+.dec-task .row-sub {
+  max-width: 22ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── detail ──────────────────────────────────────────────────────────── */
+
+.dec-detail-row td {
+  background: var(--bg-2);
+  border-top: 1px solid var(--line-hi);
+}
+
+.dec-detail {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
+  gap: 24px;
+  padding: 6px 4px 10px;
+}
+
+.dec-detail .label {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.dec-detail p {
+  margin: 0 0 14px;
+}
+
+/* The human decision text stays sans, and reads as the loudest thing here. */
+.dec-value {
+  font-size: 15px;
+  color: var(--text-hi);
+}
+
+.dec-subject {
+  color: var(--text-mid);
+}
+
+.dec-impact {
+  color: var(--accent-hi);
+}
+
+.dec-impact[data-retired='true'] {
+  color: var(--text-lo);
+}
+
+.dec-facts {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 4px 14px;
+  font-size: 12px;
+}
+
+.dec-facts .label {
+  margin: 0;
+}
+
+.dec-facts > div {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dec-link {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  color: var(--accent-hi);
+  font-size: 12px;
+  display: block;
+  text-align: left;
+}
+
+.dec-trail {
+  min-width: 0;
+}
+
+.dec-event {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  font-size: 11px;
+  padding: 3px 0;
+  border-bottom: 1px solid var(--line);
+  overflow: hidden;
+}
+
+.dec-event:last-child {
+  border-bottom: 0;
+}
+
+.dec-event-type {
+  color: var(--text-mid);
+  white-space: nowrap;
+}
+
+.dec-event .mono:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stat-value[data-accent='true'] {
+  color: var(--accent-hi);
+}
+
+@media (max-width: 900px) {
+  .dec-detail {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 14px;
+  }
+}

web/src/screens/Decisions.tsx

@@ -0,0 +1,458 @@
+import { Fragment, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Event, Task } from '../api/types'
+import { Chip, Empty, EndpointGap, M, Panel } from '../components/Primitives'
+import './Decisions.css'
+
+/** The payload of a HumanDecisionRecorded event. There is no decisions
+ *  endpoint, so this screen reduces the log the way domain.ReduceIntent does:
+ *  a decision stands until something names it. */
+interface DecisionPayload {
+  decision_id?: string
+  kind?: string
+  subject?: string
+  value?: string
+  supersedes?: string[]
+  source?: { provider?: string; external_id?: string }
+}
+
+/** The coordinator serves these on the task; api/types.ts does not model them
+ *  yet, so the shapes this screen needs are narrowed here rather than assumed. */
+interface BlockedTask extends Task {
+  work_phase?: string
+  decision_request?: { question?: string; why?: string }
+}
+
+interface Decision {
+  id: string
+  taskId: string
+  kind: string
+  subject: string
+  value: string
+  supersedes: string[]
+  provider: string
+  externalId: string
+  at: string
+  eventId: string
+  seq?: number
+}
+
+/** A question the operator has not answered yet. It is not a decision — it
+ *  has no id and no value — but it is the same authority, pending. */
+interface Waiting {
+  taskId: string
+  question: string
+  why: string
+  at: string
+}
+
+function payload(event: Event): DecisionPayload {
+  return (event.payload ?? {}) as DecisionPayload
+}
+
+function stamp(at: string) {
+  return at.replace('T', ' ').slice(0, 19) + ' UTC'
+}
+
+function shortId(id: string) {
+  return id.length > 8 ? id.slice(-6) : id
+}
+
+interface Reduced {
+  decisions: Decision[]
+  /** decision id -> the decision that retired it, or '' for a standalone
+   *  HumanDecisionSuperseded event with no successor. */
+  retiredBy: Map<string, string>
+  events: Map<string, Event[]>
+}
+
+function reduce(events: Event[]): Reduced {
+  const decisions: Decision[] = []
+  const retiredBy = new Map<string, string>()
+  const byDecision = new Map<string, Event[]>()
+
+  const touch = (id: string, event: Event) => {
+    const list = byDecision.get(id)
+    if (list) list.push(event)
+    else byDecision.set(id, [event])
+  }
+
+  for (const event of events) {
+    const p = payload(event)
+    if (!p.decision_id) continue
+    if (event.type === 'HumanDecisionRecorded') {
+      const supersedes = p.supersedes ?? []
+      decisions.push({
+        id: p.decision_id,
+        taskId: event.task_id ?? '',
+        kind: p.kind ?? '',
+        subject: p.subject ?? '',
+        value: p.value ?? '',
+        supersedes,
+        provider: p.source?.provider ?? '',
+        externalId: p.source?.external_id ?? '',
+        at: event.at,
+        eventId: event.id,
+        seq: event.seq,
+      })
+      touch(p.decision_id, event)
+      for (const target of supersedes) {
+        retiredBy.set(target, p.decision_id)
+        touch(target, event)
+      }
+    } else if (event.type === 'HumanDecisionSuperseded') {
+      if (!retiredBy.has(p.decision_id)) retiredBy.set(p.decision_id, '')
+      touch(p.decision_id, event)
+    }
+  }
+
+  decisions.sort((a, b) => b.at.localeCompare(a.at) || b.id.localeCompare(a.id))
+  return { decisions, retiredBy, events: byDecision }
+}
+
+function Select({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string
+  value: string
+  options: string[]
+  onChange: (next: string) => void
+}) {
+  return (
+    <label className="dec-filter">
+      <span className="label">{label}</span>
+      <select value={value} onChange={(e) => onChange(e.target.value)}>
+        <option value="">all</option>
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
+export function Decisions() {
+  const events = useQuery({ queryKey: ['events'], queryFn: () => api.events(), refetchInterval: 5000 })
+  const overview = useQuery({ queryKey: ['overview'], queryFn: api.overview, refetchInterval: 5000 })
+
+  const [status, setStatus] = useState('')
+  const [kind, setKind] = useState('')
+  const [project, setProject] = useState('')
+  const [source, setSource] = useState('')
+  const [query, setQuery] = useState('')
+  const [open, setOpen] = useState<string>()
+
+  const tasks = useMemo(() => {
+    const map = new Map<string, BlockedTask>()
+    for (const task of (overview.data?.tasks ?? []) as BlockedTask[]) map.set(task.id, task)
+    return map
+  }, [overview.data])
+
+  const { decisions, retiredBy, events: trail } = useMemo(
+    () => reduce(events.data ?? []),
+    [events.data],
+  )
+
+  const waiting = useMemo<Waiting[]>(
+    () =>
+      [...tasks.values()]
+        .filter((t) => t.block_reason === 'human_decision' && t.decision_request)
+        .map((t) => ({
+          taskId: t.id,
+          question: t.decision_request?.question ?? '',
+          why: t.decision_request?.why ?? '',
+          at: t.blocked_at ?? '',
+        })),
+    [tasks],
+  )
+
+  const kinds = useMemo(
+    () => [...new Set(decisions.map((d) => d.kind).filter(Boolean))].sort(),
+    [decisions],
+  )
+  const sources = useMemo(
+    () => [...new Set(decisions.map((d) => d.provider).filter(Boolean))].sort(),
+    [decisions],
+  )
+  const projects = useMemo(
+    () => [...new Set([...tasks.values()].map((t) => t.project).filter(Boolean))].sort(),
+    [tasks],
+  )
+
+  const needle = query.trim().toLowerCase()
+  const matches = (d: Decision) => {
+    const task = tasks.get(d.taskId)
+    const retired = retiredBy.has(d.id)
+    if (status === 'active' && retired) return false
+    if (status === 'superseded' && !retired) return false
+    if (status === 'waiting') return false
+    if (kind && d.kind !== kind) return false
+    if (source && d.provider !== source) return false
+    if (project && task?.project !== project) return false
+    if (needle) {
+      const hay = [d.id, d.taskId, d.subject, d.value, task?.title ?? ''].join(' ').toLowerCase()
+      if (!hay.includes(needle)) return false
+    }
+    return true
+  }
+
+  const visible = decisions.filter(matches)
+  const visibleWaiting = waiting.filter((w) => {
+    if (status && status !== 'waiting') return false
+    if (kind || source) return false
+    if (project && tasks.get(w.taskId)?.project !== project) return false
+    if (needle) return [w.taskId, w.question, w.why].join(' ').toLowerCase().includes(needle)
+    return true
+  })
+
+  const active = decisions.length - retiredBy.size
+  const loading = events.isLoading || overview.isLoading
+
+  return (
+    <main className="page">
+      <div className="page-head">
+        <h1>Decisions</h1>
+        <p>Durable human authority: what the operator decided, and what still stands.</p>
+      </div>
+
+      <div className="grid stats">
+        <div className="stat">
+          <span className="label">Recorded</span>
+          <span className="stat-value">{decisions.length}</span>
+        </div>
+        <div className="stat">
+          <span className="label">Standing</span>
+          <span className="stat-value" data-accent="true">
+            {active}
+          </span>
+        </div>
+        <div className="stat">
+          <span className="label">Superseded</span>
+          <span className="stat-value">{retiredBy.size}</span>
+        </div>
+        <div className="stat">
+          <span className="label">Waiting on you</span>
+          <span className="stat-value">{waiting.length}</span>
+        </div>
+      </div>
+
+      <Panel
+        title="Decision log"
+        count={visible.length + visibleWaiting.length}
+        trailing={
+          events.isError || overview.isError ? 'read failed' : `reduced from ${(events.data ?? []).length} events`
+        }
+      >
+        <div className="dec-filters">
+          <input
+            className="dec-search"
+            placeholder="Search decisions…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+          <Select
+            label="Status"
+            value={status}
+            options={['active', 'superseded', 'waiting']}
+            onChange={setStatus}
+          />
+          <Select label="Kind" value={kind} options={kinds} onChange={setKind} />
+          <Select label="Project" value={project} options={projects} onChange={setProject} />
+          <Select label="Source" value={source} options={sources} onChange={setSource} />
+        </div>
+
+        {loading ? (
+          <div className="panel-body">
+            <p className="gap-note">reading /v1/events…</p>
+          </div>
+        ) : visible.length + visibleWaiting.length === 0 ? (
+          <Empty title="No decisions match">
+            <p>
+              The log holds <M>{decisions.length}</M> recorded decisions. Clear the filters to see
+              them.
+            </p>
+          </Empty>
+        ) : (
+          <div className="table-scroll">
+            <table className="table dec-table">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Decision</th>
+                  <th>Task</th>
+                  <th>Phase</th>
+                  <th>Provenance</th>
+                  <th>Recorded</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {visibleWaiting.map((w) => (
+                  <tr key={`w-${w.taskId}`} data-status="waiting">
+                    <td className="mono">—</td>
+                    <td>
+                      <div className="row-title">{w.question}</div>
+                      <div className="row-sub">{w.why}</div>
+                    </td>
+                    <td>
+                      <Link className="dec-task" to={`/tasks/${w.taskId}`}>
+                        <M>{shortId(w.taskId)}</M>
+                        <span className="row-sub">{tasks.get(w.taskId)?.title ?? ''}</span>
+                      </Link>
+                    </td>
+                    <td className="mono">{tasks.get(w.taskId)?.work_phase ?? '—'}</td>
+                    <td className="mono">—</td>
+                    <td className="mono">{w.at ? stamp(w.at) : '—'}</td>
+                    <td>
+                      <Chip tone="warn">waiting</Chip>
+                    </td>
+                  </tr>
+                ))}
+                {visible.map((d) => {
+                  const retired = retiredBy.has(d.id)
+                  const successor = retiredBy.get(d.id)
+                  const task = tasks.get(d.taskId)
+                  const isOpen = open === d.id
+                  return (
+                    <Fragment key={d.id}>
+                      <tr
+                        data-status={retired ? 'superseded' : 'active'}
+                        data-open={isOpen ? 'true' : undefined}
+                        onClick={() => setOpen(isOpen ? undefined : d.id)}
+                      >
+                        <td className="mono" title={d.id}>
+                          {shortId(d.id)}
+                        </td>
+                        <td>
+                          <div className="row-title">{d.value}</div>
+                          <div className="row-sub">{d.subject}</div>
+                        </td>
+                        <td>
+                          <Link
+                            className="dec-task"
+                            to={`/tasks/${d.taskId}`}
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <M>{shortId(d.taskId)}</M>
+                            <span className="row-sub">{task?.title ?? ''}</span>
+                          </Link>
+                        </td>
+                        <td className="mono">{task?.work_phase ?? '—'}</td>
+                        <td className="mono" title={d.externalId}>
+                          {d.provider || '—'}
+                        </td>
+                        <td className="mono">{stamp(d.at)}</td>
+                        <td>
+                          {retired ? (
+                            <Chip>superseded</Chip>
+                          ) : (
+                            <Chip tone="accent">{d.kind || 'active'}</Chip>
+                          )}
+                        </td>
+                      </tr>
+                      {isOpen && (
+                        <tr className="dec-detail-row">
+                          <td colSpan={7}>
+                            <div className="dec-detail">
+                              <div>
+                                <span className="label">Value</span>
+                                <p className="dec-value">{d.value}</p>
+                                <span className="label">Subject</span>
+                                <p className="dec-subject">{d.subject || '—'}</p>
+                                <span className="label">Effective authority</span>
+                                <p className="dec-impact" data-retired={retired ? 'true' : undefined}>
+                                  {retired
+                                    ? successor
+                                      ? 'Retired. It is out of the effective intent for this task.'
+                                      : 'Retired by an explicit supersede. It no longer binds the agent.'
+                                    : 'Standing. It is in the effective intent handed to every session of this task.'}
+                                </p>
+                              </div>
+                              <div className="dec-facts">
+                                <span className="label">Decision id</span>
+                                <div>
+                                  <M>{d.id}</M>
+                                </div>
+                                <span className="label">Kind</span>
+                                <div>
+                                  <M>{d.kind}</M>
+                                </div>
+                                <span className="label">Task</span>
+                                <div>
+                                  <Link to={`/tasks/${d.taskId}`}>
+                                    <M>{d.taskId}</M>
+                                  </Link>
+                                </div>
+                                <span className="label">Provenance</span>
+                                <div>
+                                  <M>{d.provider || 'unknown'}</M>{' '}
+                                  {d.externalId && <M>· {d.externalId}</M>}
+                                </div>
+                                <span className="label">Supersedes</span>
+                                <div>
+                                  {d.supersedes.length === 0 ? (
+                                    <M>none</M>
+                                  ) : (
+                                    d.supersedes.map((s) => (
+                                      <button
+                                        key={s}
+                                        className="dec-link mono"
+                                        onClick={() => setOpen(s)}
+                                      >
+                                        {s}
+                                      </button>
+                                    ))
+                                  )}
+                                </div>
+                                <span className="label">Superseded by</span>
+                                <div>
+                                  {!retired ? (
+                                    <M>none</M>
+                                  ) : successor ? (
+                                    <button className="dec-link mono" onClick={() => setOpen(successor)}>
+                                      {successor}
+                                    </button>
+                                  ) : (
+                                    <M>explicit supersede event</M>
+                                  )}
+                                </div>
+                              </div>
+                              <div className="dec-trail">
+                                <span className="label">Event sequence</span>
+                                {(trail.get(d.id) ?? []).map((e) => (
+                                  <div key={e.id} className="dec-event">
+                                    <M>{e.seq !== undefined ? `#${e.seq}` : '—'}</M>
+                                    <span className="dec-event-type">{e.type}</span>
+                                    <M>{stamp(e.at)}</M>
+                                    <M>{e.id}</M>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </Fragment>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {/* Law 5: the mockup's approval columns have no source in the log. */}
+        <EndpointGap
+          path="/v1/ui/decisions"
+          what="Recorded, superseded and waiting are reduced from the event log. Approved, rejected and auto are not: the domain has no approval state on a decision, so those statuses are omitted rather than guessed. The acting human is not recorded either — source.provider is the channel the decision arrived on, not the person. Phase is the task's current work phase, not the phase the decision was made in."
+        />
+      </Panel>
+    </main>
+  )
+}

web/src/screens/Projects.css

@@ -0,0 +1,16 @@
+/* Projects: two columns on desktop, stacked on mobile. Everything else comes
+   from orchestra.css — this file exists only for the reflow. */
+.projects-split {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
+}
+
+/* .row is a flex container; its title/subtitle stack. */
+.projects-split .row-main > span {
+  display: block;
+}
+
+@media (max-width: 900px) {
+  .projects-split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

web/src/screens/Projects.tsx

@@ -0,0 +1,296 @@
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Task, TaskState, Worker } from '../api/types'
+import { Chip, Dot, Empty, EndpointGap, M, Panel } from '../components/Primitives'
+import './Projects.css'
+
+/** Orchestra has no projects endpoint. The registry that defines a project —
+ *  repo, remote, quality gate, verification policy, machine affinity — lives in
+ *  the coordinator's config.jsonc and is never served over HTTP. What this
+ *  screen shows is derived from work that actually exists: the tasks in
+ *  /v1/ui/overview carry a project, and the workers in the federation registry
+ *  declare which projects they will accept. Everything else is a stated gap,
+ *  not a plausible-looking guess. */
+
+const ATTENTION: TaskState[] = ['needs_attention', 'blocked', 'failed']
+
+interface ProjectRow {
+  id: string
+  tasks: Task[]
+  counts: Record<TaskState, number>
+  attention: number
+  active: number
+  /** Newest capture/check the coordinator has for this project's sessions.
+   *  A task carries no updated_at, so this is the only honest recency signal
+   *  the overview projection actually contains. */
+  lastSeen?: string
+  workers: Worker[]
+}
+
+function fmt(at?: string) {
+  if (!at) return undefined
+  const d = new Date(at)
+  return Number.isNaN(d.getTime()) ? at : `${d.toISOString().slice(0, 16).replace('T', ' ')} UTC`
+}
+
+function newest(a?: string, b?: string) {
+  if (!a) return b
+  if (!b) return a
+  return a > b ? a : b
+}
+
+function derive(tasks: Task[], workers: Worker[]): ProjectRow[] {
+  const rows = new Map<string, ProjectRow>()
+  for (const task of tasks) {
+    const id = task.project || '(unset)'
+    let row = rows.get(id)
+    if (!row) {
+      row = {
+        id,
+        tasks: [],
+        counts: {} as Record<TaskState, number>,
+        attention: 0,
+        active: 0,
+        workers: workers.filter((w) => (w.supported_projects || []).includes(id)),
+      }
+      rows.set(id, row)
+    }
+    row.tasks.push(task)
+    row.counts[task.state] = (row.counts[task.state] || 0) + 1
+    if (ATTENTION.includes(task.state)) row.attention++
+    if (task.state === 'leased') row.active++
+    row.lastSeen = newest(
+      row.lastSeen,
+      newest(task.last_session?.captured_at, task.last_session?.checked_at),
+    )
+  }
+  return [...rows.values()].sort(
+    (a, b) => b.attention - a.attention || b.active - a.active || a.id.localeCompare(b.id),
+  )
+}
+
+function stateChips(counts: Record<TaskState, number>) {
+  const order: TaskState[] = [
+    'leased',
+    'queued',
+    'in_review',
+    'needs_attention',
+    'blocked',
+    'failed',
+    'completed',
+  ]
+  return order
+    .filter((state) => counts[state])
+    .map((state) => (
+      <Chip
+        key={state}
+        tone={
+          state === 'leased'
+            ? 'accent'
+            : state === 'completed'
+              ? 'done'
+              : state === 'needs_attention'
+                ? 'warn'
+                : ATTENTION.includes(state)
+                  ? 'fault'
+                  : undefined
+        }
+      >
+        {state.replace('_', ' ')} <M>{counts[state]}</M>
+      </Chip>
+    ))
+}
+
+export function Projects() {
+  const overview = useQuery({ queryKey: ['overview'], queryFn: api.overview, refetchInterval: 5000 })
+  const [selected, setSelected] = useState<string>()
+
+  const rows = useMemo(
+    () => derive(overview.data?.tasks || [], overview.data?.workers || []),
+    [overview.data],
+  )
+  const current = rows.find((r) => r.id === selected) || rows[0]
+
+  return (
+    <main className="page">
+      <div className="page-head">
+        <h1>Projects</h1>
+        <p>
+          Projects orchestra is holding work for, derived from the tasks it knows about. The
+          coordinator does not serve its project registry.
+        </p>
+      </div>
+
+      {overview.isError && (
+        <Panel>
+          <div className="panel-body">
+            <p className="gap-note">/v1/ui/overview failed: {String(overview.error)}</p>
+          </div>
+        </Panel>
+      )}
+
+      {!overview.data && !overview.isError && (
+        <Panel>
+          <div className="panel-body">
+            <p className="gap-note">reading /v1/ui/overview</p>
+          </div>
+        </Panel>
+      )}
+
+      {overview.data && rows.length === 0 && (
+        <Panel>
+          <Empty title="No project has work">
+            <p>
+              Every project here comes from a task. Orchestra holds{' '}
+              <M>{overview.data.tasks.length}</M> tasks, so nothing groups yet.
+            </p>
+          </Empty>
+        </Panel>
+      )}
+
+      {current && (
+        <div className="grid projects-split">
+          <Panel title="With work" count={rows.length}>
+            <div className="table-scroll">
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Project</th>
+                    <th>Tasks</th>
+                    <th>Leased</th>
+                    <th>Attention</th>
+                    <th>Last session evidence</th>
+                    <th>Workers</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((row) => (
+                    <tr
+                      key={row.id}
+                      onClick={() => setSelected(row.id)}
+                      style={{
+                        cursor: 'pointer',
+                        background: row.id === current.id ? 'var(--bg-2)' : undefined,
+                        boxShadow:
+                          row.id === current.id ? 'inset 3px 0 0 0 var(--accent)' : undefined,
+                      }}
+                    >
+                      <td>
+                        <M>{row.id}</M>
+                      </td>
+                      <td>
+                        <M>{row.tasks.length}</M>
+                      </td>
+                      <td>
+                        <M>{row.active}</M>
+                      </td>
+                      <td>
+                        {row.attention ? (
+                          <Chip tone="fault">
+                            <M>{row.attention}</M>
+                          </Chip>
+                        ) : (
+                          <M>0</M>
+                        )}
+                      </td>
+                      <td>
+                        <M>{fmt(row.lastSeen) || '—'}</M>
+                      </td>
+                      <td>
+                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                          {row.workers.length === 0 ? (
+                            <M>none</M>
+                          ) : (
+                            row.workers.map((w) => (
+                              <Chip key={w.id}>
+                                <Dot health={w.online ? 'healthy' : 'error'} />
+                                <M>{w.id}</M>
+                              </Chip>
+                            ))
+                          )}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </Panel>
+
+          <div className="grid" style={{ alignContent: 'start' }}>
+            <Panel
+              title={current.id}
+              trailing={<Link to={`/tasks?project=${encodeURIComponent(current.id)}`}>Tasks →</Link>}
+            >
+              <div className="panel-body" style={{ display: 'grid', gap: 12 }}>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                  {stateChips(current.counts)}
+                </div>
+                <div>
+                  <div className="label">Workers declaring this project</div>
+                  <p style={{ margin: '4px 0 0', color: 'var(--text-mid)' }}>
+                    {current.workers.length === 0
+                      ? 'No registered worker accepts it. Orchestra does not treat an omitted declaration as a wildcard, so nothing can lease this work.'
+                      : 'Worker-declared, from the federation registry — not the coordinator’s project affinity.'}
+                  </p>
+                  {current.workers.map((w) => (
+                    <div key={w.id} style={{ marginTop: 6 }}>
+                      <Dot health={w.online ? 'healthy' : 'error'} /> <M>{w.id}</M>{' '}
+                      <M>{w.address || ''}</M>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </Panel>
+
+            <Panel title="Tasks" count={current.tasks.length}>
+              <div className="rows">
+                {current.tasks.slice(0, 8).map((task) => (
+                  <Link key={task.id} className="row" to={`/tasks/${task.id}`}>
+                    <span className="row-main">
+                      <span className="row-title">{task.title || task.external_id || 'untitled'}</span>
+                      <span className="row-sub">
+                        <M>{task.id}</M>
+                      </span>
+                    </span>
+                    <Chip
+                      tone={
+                        task.state === 'leased'
+                          ? 'accent'
+                          : task.state === 'completed'
+                            ? 'done'
+                            : task.state === 'needs_attention'
+                              ? 'warn'
+                              : ATTENTION.includes(task.state)
+                                ? 'fault'
+                                : undefined
+                      }
+                    >
+                      {task.state.replace('_', ' ')}
+                    </Chip>
+                  </Link>
+                ))}
+              </div>
+              {current.tasks.length > 8 && (
+                <div className="panel-body">
+                  <Link to={`/tasks?project=${encodeURIComponent(current.id)}`}>
+                    All <M>{current.tasks.length}</M> tasks →
+                  </Link>
+                </div>
+              )}
+            </Panel>
+
+            <Panel title="Project configuration">
+              <EndpointGap
+                path="/v1/ui/projects"
+                what="repo, remote, quality gate and verification policy live in the coordinator's config.jsonc and are not served over HTTP"
+              />
+            </Panel>
+          </div>
+        </div>
+      )}
+    </main>
+  )
+}

web/src/screens/Review.css

@@ -0,0 +1,195 @@
+/* Review-only geometry. Panel, row, table, stat, chip and btn come from
+   orchestra.css and are not restated here. */
+
+.rev-stamp {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--text-lo);
+}
+
+.rev-fault {
+  color: #e06c60;
+}
+
+.rev-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.rev-tabs .btn[data-active='true'] {
+  border-color: var(--accent-line);
+  background: var(--accent-dim);
+  color: var(--accent-hi);
+}
+
+/* One desk item: the row itself, plus whatever evidence it carries under it. */
+.rev-item {
+  border-bottom: 1px solid var(--line);
+}
+
+.rev-item:last-child {
+  border-bottom: 0;
+}
+
+.rev-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-right: 16px;
+}
+
+.rev-line .row.rev-link {
+  flex: 1;
+  min-width: 0;
+  border-bottom: 0;
+}
+
+.rev-out {
+  flex: none;
+  gap: 6px;
+  font-size: 12px;
+}
+
+/* The kind mark is a square of the item's own tone — a signal, never a wash
+   across the row. */
+.rev-mark {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  color: var(--text-mid);
+}
+
+.rev-mark[data-kind='trajectory'],
+.rev-mark[data-kind='pr'] {
+  border-color: var(--accent-line);
+  background: var(--accent-dim);
+  color: var(--accent-hi);
+}
+
+.rev-mark[data-kind='decision'],
+.rev-mark[data-kind='operator'] {
+  border-color: rgba(216, 166, 87, 0.3);
+  background: rgba(216, 166, 87, 0.1);
+  color: #d8a657;
+}
+
+.rev-mark[data-kind='findings'] {
+  border-color: rgba(224, 108, 96, 0.3);
+  background: rgba(224, 108, 96, 0.1);
+  color: #e06c60;
+}
+
+.rev-kind {
+  flex: none;
+  width: 88px;
+  font-size: 13px;
+  color: var(--text-mid);
+}
+
+.rev-task {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 0 0 168px;
+}
+
+.rev-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: none;
+  min-width: 72px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.row-main,
+.rev-task {
+  display: flex;
+  flex-direction: column;
+}
+
+.rev-link .row-title,
+.rev-link .row-sub,
+.rev-task .row-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Refs sit under the row as verified orchestra state: neutral, mono values. */
+.rev-refs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 20px;
+  padding: 0 16px 12px 60px;
+  font-size: 12px;
+  color: var(--text-machine);
+}
+
+/* An agent claim is labelled as one. It is never given orchestra's voice. */
+.claim-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: #d8a657;
+}
+
+.rev-findings,
+.rev-options {
+  margin: 0 16px 14px 60px;
+  padding: 12px 14px;
+  border: 1px solid var(--line-hi);
+  border-left: 2px solid rgba(216, 166, 87, 0.45);
+  border-radius: var(--r-sm);
+  background: var(--bg-2);
+}
+
+.rev-options p {
+  margin: 0 0 6px;
+  font-size: 13px;
+  color: var(--text-hi);
+}
+
+.rev-findings pre {
+  margin: 0;
+  max-height: 340px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text-mid);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (max-width: 640px) {
+  .rev-line {
+    flex-wrap: wrap;
+    padding: 0 16px 12px;
+  }
+
+  .rev-kind,
+  .rev-task {
+    width: auto;
+    flex: none;
+  }
+
+  .rev-refs,
+  .rev-findings,
+  .rev-options {
+    margin-left: 16px;
+    padding-left: 14px;
+  }
+}

web/src/screens/Review.tsx

@@ -0,0 +1,426 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Overview, Task } from '../api/types'
+import { Chip, Empty, EndpointGap, M, Panel } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './Review.css'
+
+/* The Go domain carries review, submission, decision_request and work_phase on
+   the task; the shared TS Task type has not caught up. They are read through a
+   narrow cast rather than invented, renamed, or added to a file this screen
+   does not own. Shapes are internal/domain/domain.go and submission.go. */
+type ReviewRef = { artifact_ref: string; result_sha: string; blocking: number }
+type ExternalRef = { provider: string; id: string; url?: string }
+type SubmissionRef = {
+  result_sha: string
+  remote_ref?: string
+  pr: ExternalRef
+  gate_ref?: string
+  review_ref?: string
+}
+type DecisionOption = { id: string; description: string; tradeoff?: string }
+type DecisionRequest = {
+  question: string
+  why: string
+  options?: DecisionOption[]
+  evidence?: string[]
+}
+type FullTask = Task & {
+  review?: ReviewRef
+  submission?: SubmissionRef
+  decision_request?: DecisionRequest
+  review_target_sha?: string
+  work_phase?: string
+}
+
+const full = (t: Task) => t as FullTask
+
+/** "2m ago" — a machine value, so it renders mono at the call site. */
+function ago(at?: string) {
+  if (!at) return undefined
+  const s = Math.round((Date.now() - Date.parse(at)) / 1000)
+  if (!Number.isFinite(s) || s < 0) return undefined
+  if (s < 60) return `${s}s ago`
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`
+  return `${Math.floor(s / 86400)}d ago`
+}
+
+const shortId = (id: string) => (id.length > 14 ? `${id.slice(0, 6)}…${id.slice(-4)}` : id)
+const shortSha = (sha?: string) => (sha ? sha.slice(0, 7) : undefined)
+
+type Kind = 'trajectory' | 'decision' | 'operator' | 'findings' | 'pr'
+
+const KINDS: { kind: Kind; label: string; icon: string }[] = [
+  { kind: 'trajectory', label: 'Trajectory', icon: 'fork' },
+  { kind: 'decision', label: 'Blocker', icon: 'decision' },
+  { kind: 'operator', label: 'Operator', icon: 'alert' },
+  { kind: 'findings', label: 'AI review', icon: 'review' },
+  { kind: 'pr', label: 'Code review', icon: 'task' },
+]
+const meta = (k: Kind) => KINDS.find((x) => x.kind === k)!
+
+type Item = {
+  key: string
+  kind: Kind
+  task: FullTask
+  /** Why this is on the desk, in the operator's language. Always derived. */
+  why: string
+  headline: string
+  at?: string
+}
+
+/* Reasons an operator-required block can carry. Each line names the real
+   block_reason it came from — none of it is decorative copy. */
+const operatorReason: Record<string, string> = {
+  operator_required: 'Orchestra cannot proceed without an operator action.',
+  approval: 'A tool or edit approval is pending in the pane.',
+  handoff_validation: 'The handoff failed validation and was not accepted.',
+  lease_failure: 'The lease could not be established.',
+  lease_expired: 'The lease expired before the agent finished.',
+  worker_offline: 'The worker holding this task went offline.',
+  system_error: 'Orchestra hit an error it could not retry past.',
+  operator_block: 'You blocked this task.',
+  unknown: 'Blocked for a reason orchestra could not classify.',
+}
+
+/** One task can be on the desk for more than one reason, and each reason is
+ *  its own item: answering the blocker does not clear the review findings. */
+function itemsFor(task: Task): Item[] {
+  const t = full(task)
+  const out: Item[] = []
+  const at = t.blocked_at
+
+  if (t.block_reason === 'trajectory_gate') {
+    out.push({
+      key: `${t.id}:trajectory`,
+      kind: 'trajectory',
+      task: t,
+      headline: t.decision_request?.question ?? 'Trajectory gate is held',
+      why:
+        t.decision_request?.why ??
+        t.blocker ??
+        'A trajectory gate is waiting for your steering before work continues.',
+      at,
+    })
+  }
+
+  if (t.block_reason === 'human_decision' || (t.decision_request && !out.length)) {
+    out.push({
+      key: `${t.id}:decision`,
+      kind: 'decision',
+      task: t,
+      headline: t.decision_request?.question ?? t.blocker ?? 'A decision is required',
+      why:
+        t.decision_request?.why ??
+        t.blocker ??
+        'The agent asked for a decision it may not make on its own.',
+      at,
+    })
+  }
+
+  if (t.state === 'blocked' && !out.length) {
+    const reason = t.block_reason ?? 'unknown'
+    out.push({
+      key: `${t.id}:operator`,
+      kind: 'operator',
+      task: t,
+      headline: t.blocker || `Blocked: ${reason}`,
+      why: operatorReason[reason] ?? operatorReason.unknown,
+      at,
+    })
+  }
+
+  if (t.state === 'needs_attention' && !out.length) {
+    out.push({
+      key: `${t.id}:operator`,
+      kind: 'operator',
+      task: t,
+      headline: t.blocker || t.last_error || 'Flagged for you',
+      why: 'Orchestra flagged this task and will not move it without you.',
+      at,
+    })
+  }
+
+  if (t.review && t.review.blocking > 0) {
+    const stale = t.review.result_sha !== (t.submission?.result_sha ?? t.review.result_sha)
+    out.push({
+      key: `${t.id}:findings`,
+      kind: 'findings',
+      task: t,
+      headline: `${t.review.blocking} blocking finding${t.review.blocking === 1 ? '' : 's'}`,
+      why: stale
+        ? 'A sealed review claims blocking findings against a commit the submission has moved past. Accept or override them.'
+        : 'A sealed review claims blocking findings. They stand until you accept or override them.',
+      at,
+    })
+  }
+
+  if (t.submission?.pr) {
+    out.push({
+      key: `${t.id}:pr`,
+      kind: 'pr',
+      task: t,
+      headline: t.title || 'Change submitted for review',
+      why: 'A pull request is open and waiting on human review.',
+      at,
+    })
+  } else if (t.state === 'in_review' && !out.some((i) => i.kind === 'findings')) {
+    out.push({
+      key: `${t.id}:pr`,
+      kind: 'pr',
+      task: t,
+      headline: t.title || 'Awaiting review',
+      why: 'The task is in review with no submission recorded yet.',
+      at,
+    })
+  }
+
+  return out
+}
+
+/** The sealed review artifact. It is an agent claim until a human accepts it,
+ *  so it is labelled as one and never rendered as orchestra's own verdict. */
+function Findings({ artifactRef }: { artifactRef: string }) {
+  const q = useQuery({
+    queryKey: ['artifact', artifactRef],
+    queryFn: () => api.artifact(artifactRef),
+    staleTime: Infinity, // a sealed artifact never changes
+  })
+  return (
+    <div className="rev-findings">
+      <p className="claim-label">
+        <Icon name="alert" size={14} />
+        agent-supplied · sealed review artifact <M>{artifactRef}</M>
+      </p>
+      {q.isError ? (
+        <p className="rev-fault">could not read artifact: {String(q.error)}</p>
+      ) : q.data === undefined ? (
+        <p className="row-sub">
+          reading <M>{artifactRef}</M>
+        </p>
+      ) : (
+        <pre>{q.data}</pre>
+      )}
+    </div>
+  )
+}
+
+function ItemRow({ item }: { item: Item }) {
+  const [open, setOpen] = useState(false)
+  const t = item.task
+  const m = meta(item.kind)
+  const age = ago(item.at)
+
+  return (
+    <div className="rev-item">
+      <div className="rev-line">
+        <Link className="row rev-link" to={`/tasks/${t.id}`}>
+          <span className="rev-mark" data-kind={item.kind}>
+            <Icon name={m.icon} size={18} />
+          </span>
+          <span className="rev-kind">{m.label}</span>
+          <span className="row-main">
+            <span className="row-title">{item.headline}</span>
+            <span className="row-sub">{item.why}</span>
+          </span>
+          <span className="rev-task">
+            <span className="row-title">{t.project}</span>
+            <span className="row-sub">
+              <M>{shortId(t.id)}</M>
+              {t.work_phase && (
+                <>
+                  {' · '}
+                  <M>{t.work_phase}</M>
+                </>
+              )}
+            </span>
+          </span>
+          <span className="rev-meta">
+            <span className="label">priority</span>
+            <M>{t.inherent_priority ?? 0}</M>
+          </span>
+          <span className="rev-meta">
+            <span className="label">age</span>
+            {age ? <M>{age}</M> : <span className="row-sub">not timestamped</span>}
+          </span>
+          {item.kind === 'findings' && t.review && (
+            <Chip tone="fault">
+              <M>{t.review.blocking}</M> blocking
+            </Chip>
+          )}
+          {item.kind === 'pr' && t.submission?.pr?.id && (
+            <Chip tone="accent">
+              <M>{t.submission.pr.id}</M>
+            </Chip>
+          )}
+          <Icon name="chevron-right" size={16} />
+        </Link>
+
+        {item.kind === 'pr' && t.submission?.pr?.url && (
+          <a
+            className="btn rev-out"
+            href={t.submission.pr.url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Icon name="upload" size={14} />
+            {t.submission.pr.provider}
+          </a>
+        )}
+        {item.kind === 'findings' && t.review && (
+          <button className="btn rev-out" onClick={() => setOpen(!open)}>
+            {open ? 'Hide findings' : 'Read findings'}
+          </button>
+        )}
+      </div>
+
+      {(item.kind === 'pr' || item.kind === 'findings') && (
+        <div className="rev-refs">
+          {t.review && (
+            <span>
+              <span className="label">reviewed sha</span> <M>{shortSha(t.review.result_sha)}</M>
+            </span>
+          )}
+          {t.submission && (
+            <span>
+              <span className="label">submitted sha</span>{' '}
+              <M>{shortSha(t.submission.result_sha)}</M>
+            </span>
+          )}
+          {t.submission?.gate_ref && (
+            <span>
+              <span className="label">gate</span> <M>{t.submission.gate_ref}</M>
+            </span>
+          )}
+          {t.submission?.review_ref && (
+            <span>
+              <span className="label">review</span> <M>{t.submission.review_ref}</M>
+            </span>
+          )}
+        </div>
+      )}
+
+      {item.kind === 'trajectory' && t.decision_request?.options?.length ? (
+        <div className="rev-options">
+          <p className="claim-label">
+            <Icon name="alert" size={14} />
+            agent-supplied · proposed options
+          </p>
+          {t.decision_request.options.map((o) => (
+            <p key={o.id}>
+              <M>{o.id}</M> {o.description}
+              {o.tradeoff && <span className="row-sub"> — {o.tradeoff}</span>}
+            </p>
+          ))}
+        </div>
+      ) : null}
+
+      {open && item.kind === 'findings' && t.review && (
+        <Findings artifactRef={t.review.artifact_ref} />
+      )}
+    </div>
+  )
+}
+
+export function Review() {
+  const overview = useQuery<Overview>({
+    queryKey: ['overview'],
+    queryFn: api.overview,
+    refetchInterval: 5000,
+  })
+  const [kind, setKind] = useState<Kind | 'all'>('all')
+
+  const items = (overview.data?.tasks ?? []).flatMap(itemsFor)
+  // Most urgent first: high inherent priority, then oldest wait.
+  const order = KINDS.map((k) => k.kind)
+  items.sort(
+    (a, b) =>
+      (b.task.inherent_priority ?? 0) - (a.task.inherent_priority ?? 0) ||
+      Date.parse(a.at ?? '') - Date.parse(b.at ?? '') ||
+      order.indexOf(a.kind) - order.indexOf(b.kind),
+  )
+  const shown = kind === 'all' ? items : items.filter((i) => i.kind === kind)
+  const count = (k: Kind) => items.filter((i) => i.kind === k).length
+  const blocking = items.reduce((n, i) => n + (i.kind === 'findings' ? (i.task.review?.blocking ?? 0) : 0), 0)
+
+  return (
+    <main className="page">
+      <div className="page-head">
+        <h1>Review</h1>
+        <p>Items that need your attention and judgement.</p>
+        <span className="rev-stamp">
+          {overview.data ? (
+            <>
+              read <M>{new Date(overview.data.updated_at).toISOString().slice(11, 19)} UTC</M>
+            </>
+          ) : overview.isError ? (
+            <span className="rev-fault">overview unreachable — {String(overview.error)}</span>
+          ) : (
+            'reading the first snapshot'
+          )}
+        </span>
+      </div>
+
+      <div className="grid stats">
+        <div className="stat">
+          <span className="label">Needs you</span>
+          <span className="stat-value">{items.length}</span>
+          <span className="row-sub">
+            across <M>{new Set(items.map((i) => i.task.id)).size}</M> tasks
+          </span>
+        </div>
+        <div className="stat">
+          <span className="label">Blocking findings</span>
+          <span className="stat-value">{blocking}</span>
+          <span className="row-sub">claimed by sealed reviews, not yet accepted</span>
+        </div>
+        <div className="stat">
+          <span className="label">Pull requests open</span>
+          <span className="stat-value">{count('pr')}</span>
+          <span className="row-sub">recorded on a submission</span>
+        </div>
+      </div>
+
+      <Panel title="Attention queue" count={shown.length}>
+        <div className="rev-tabs">
+          <button className="btn" data-active={kind === 'all'} onClick={() => setKind('all')}>
+            All <M>{items.length}</M>
+          </button>
+          {KINDS.map((k) => (
+            <button
+              key={k.kind}
+              className="btn"
+              data-active={kind === k.kind}
+              onClick={() => setKind(k.kind)}
+            >
+              {k.label} <M>{count(k.kind)}</M>
+            </button>
+          ))}
+        </div>
+
+        {shown.length === 0 ? (
+          <Empty title={items.length === 0 ? 'Nothing is waiting on you' : 'Nothing of this type'}>
+            <p>
+              Trajectory gates, human decisions, operator-required blocks, blocking review findings
+              and open pull requests land here.
+            </p>
+          </Empty>
+        ) : (
+          <div className="rows">
+            {shown.map((i) => (
+              <ItemRow key={i.key} item={i} />
+            ))}
+          </div>
+        )}
+      </Panel>
+
+      <EndpointGap
+        path="GET /v1/ui/submissions → pr.state, GET /v1/ui/review/snoozes"
+        what="Two item types the spec lists have no source. A closed-but-unmerged pull request cannot be derived: submission.pr carries provider, id and url but no forge state, and orchestra never polls the forge. Informational/FYI items and snooze or defer state have no endpoint and no event either, so no tab stands in for them."
+      />
+    </main>
+  )
+}

web/src/screens/Settings.css

@@ -0,0 +1,164 @@
+/* Settings. Only what the shared shell does not carry: the tab strip, the
+   credential form geometry, and the fact list. */
+
+.set-tabs {
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--line);
+}
+
+.set-tab {
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 8px 12px;
+  color: var(--text-mid);
+  cursor: pointer;
+  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
+}
+
+.set-tab:hover {
+  color: var(--text-hi);
+}
+
+/* Accent marks the section you are in, and the save button. Nothing else. */
+.set-tab[aria-selected='true'] {
+  color: var(--accent-hi);
+  border-bottom-color: var(--accent);
+}
+
+.set-account {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.set-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.set-note {
+  margin: 0;
+  color: var(--text-mid);
+  font-size: 13px;
+}
+
+.set-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.set-split {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 14px;
+}
+
+.set-input {
+  height: 34px;
+  padding: 0 11px;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  color: var(--text-hi);
+  font: inherit;
+  outline: none;
+  width: 100%;
+  transition: border-color var(--fast) var(--ease);
+}
+
+.set-input::placeholder {
+  color: var(--text-lo);
+}
+
+.set-input:focus {
+  border-color: var(--accent-line);
+}
+
+.set-reveal {
+  position: relative;
+  display: flex;
+}
+
+.set-reveal-btn {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  height: 26px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--bg-3);
+  color: var(--text-mid);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.set-rules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--text-lo);
+}
+
+.set-rules span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.set-rules span[data-met='true'] {
+  color: #5fbf82;
+}
+
+.set-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 13px;
+  color: #e06c60;
+}
+
+.set-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--line);
+  padding-top: 14px;
+}
+
+.set-facts {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.set-facts > div {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.set-signout {
+  align-self: flex-start;
+  margin-top: 4px;
+}
+
+@media (max-width: 900px) {
+  .set-account {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

web/src/screens/Settings.tsx

@@ -0,0 +1,256 @@
+import { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Account } from '../api/types'
+import { Chip, EndpointGap, M, Panel } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './Settings.css'
+
+/** The spec asks for eight tabs. The coordinator has exactly one settings
+ *  mutation — PUT /v1/ui/account — so exactly one tab holds controls. Every
+ *  other tab names the endpoint that would supply it rather than showing a
+ *  form that cannot save. Law 5. */
+type TabKey =
+  | 'account'
+  | 'general'
+  | 'appearance'
+  | 'notifications'
+  | 'access'
+  | 'integrations'
+  | 'agents'
+  | 'policies'
+  | 'advanced'
+
+const TABS: { key: TabKey; label: string }[] = [
+  { key: 'account', label: 'Account' },
+  { key: 'general', label: 'General' },
+  { key: 'appearance', label: 'Appearance' },
+  { key: 'notifications', label: 'Notifications' },
+  { key: 'access', label: 'Access & security' },
+  { key: 'integrations', label: 'Integrations' },
+  { key: 'agents', label: 'Agents & tools' },
+  { key: 'policies', label: 'Policies' },
+  { key: 'advanced', label: 'Advanced' },
+]
+
+const GAPS: Record<Exclude<TabKey, 'account'>, { path: string; what: string }> = {
+  general: {
+    path: 'GET/PUT /v1/ui/settings/general',
+    what: 'Instance name and environment, time display, default task preferences, default workflow policy and event/artifact retention. The coordinator keeps these in config.jsonc and the container environment; nothing reads or writes them over the API.',
+  },
+  appearance: {
+    path: 'GET/PUT /v1/ui/settings/appearance',
+    what: 'Theme and reduced motion are the only appearance choices ethos permits, and neither is stored server-side today. The console follows the operating system.',
+  },
+  notifications: {
+    path: 'GET/PUT /v1/ui/settings/notifications',
+    what: 'Notification sinks and per-event routing. ntfy credentials live in the compose .env file and are never returned by the API.',
+  },
+  access: {
+    path: 'GET /v1/ui/settings/access',
+    what: 'Web tokens and their status, trusted and ignored review actors, live operator sessions, agent-surface auth and the source each secret is loaded from. Only the operator credential below is exposed today.',
+  },
+  integrations: {
+    path: 'GET /v1/ui/settings/integrations',
+    what: 'Gitea and Vikunja endpoints, notification sinks and source reconciliation state, each with its identity and last successful interaction. No endpoint reports integration health.',
+  },
+  agents: {
+    path: 'GET /v1/ui/settings/harnesses',
+    what: 'Harness definitions, adapter runtime configuration, herdr and tmux ownership, default launch behaviour and context occupancy thresholds. The registry is read from config.jsonc at start-up and is not served.',
+  },
+  policies: {
+    path: 'GET/PUT /v1/ui/settings/policies',
+    what: 'Work phase defaults, the trajectory gate, the bounded decision request budget, retry policy, reconcile failure handoff threshold and review/submission policy. These are compiled-in defaults, not stored settings.',
+  },
+  advanced: {
+    path: 'GET /v1/ui/settings/diagnostics',
+    what: 'Event-store diagnostics, snapshots and replay, raw configuration, migration status and destructive operator actions. Destructive actions must not be built before the coordinator can report what they would touch.',
+  },
+}
+
+function stamp(at?: string) {
+  if (!at) return '—'
+  const ms = Date.parse(at)
+  return Number.isFinite(ms) ? new Date(ms).toISOString().replace('T', ' ').slice(0, 19) + ' UTC' : at
+}
+
+function message(error: unknown) {
+  return error instanceof Error ? error.message : String(error)
+}
+
+export function Settings({ account, onLogout, onCredentialsChanged }: {
+  account: Account
+  onLogout: () => void
+  onCredentialsChanged: (username: string) => void
+}) {
+  const [tab, setTab] = useState<TabKey>('account')
+  return (
+    <main className="page">
+      <div className="page-head">
+        <h1>Settings</h1>
+        <p>One operator credential is stored here. Everything else Orchestra runs on comes from config and environment.</p>
+      </div>
+
+      <div className="set-tabs" role="tablist" aria-label="Settings sections">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            role="tab"
+            type="button"
+            className="set-tab"
+            aria-selected={tab === t.key}
+            onClick={() => setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'account' ? (
+        <AccountTab account={account} onLogout={onLogout} onCredentialsChanged={onCredentialsChanged} />
+      ) : (
+        <Panel title={TABS.find((t) => t.key === tab)?.label}>
+          <EndpointGap path={GAPS[tab].path} what={GAPS[tab].what} />
+        </Panel>
+      )}
+    </main>
+  )
+}
+
+function AccountTab({ account, onLogout, onCredentialsChanged }: {
+  account: Account
+  onLogout: () => void
+  onCredentialsChanged: (username: string) => void
+}) {
+  const [username, setUsername] = useState(account.username)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [visible, setVisible] = useState(false)
+  const [formError, setFormError] = useState('')
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      api.updateAccount({
+        current_password: currentPassword,
+        username: username.trim(),
+        ...(newPassword ? { new_password: newPassword } : {}),
+      }),
+    onSuccess: (updated) => onCredentialsChanged(updated.username),
+  })
+
+  const changed = username.trim() !== account.username || !!newPassword
+  const longEnough = newPassword.length >= 10
+  const withinLimit = new TextEncoder().encode(newPassword).length <= 72
+  const matches = newPassword === confirmation
+
+  const submit = (event: React.FormEvent) => {
+    event.preventDefault()
+    setFormError('')
+    if (!username.trim()) return setFormError('Username cannot be empty.')
+    if (!changed) return setFormError('Change the username or enter a new password first.')
+    if (!currentPassword) return setFormError('Enter your current password to authorize this change.')
+    if (newPassword && (!longEnough || !withinLimit || !matches)) {
+      return setFormError(matches ? 'Use a password between 10 and 72 bytes.' : 'The new passwords do not match.')
+    }
+    mutation.mutate()
+  }
+
+  return (
+    <div className="set-account">
+      <Panel title="Sign-in credentials">
+        <form className="panel-body set-form" onSubmit={submit} noValidate>
+          <p className="set-note">
+            Changing either field signs out every browser using this account. Your current password authorizes the change and is never stored by the console.
+          </p>
+
+          <div className="set-field">
+            <label className="label" htmlFor="set-username">Username</label>
+            <input
+              id="set-username"
+              className="set-input"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => { setUsername(e.target.value); setFormError('') }}
+            />
+          </div>
+
+          <div className="set-split">
+            <div className="set-field">
+              <label className="label" htmlFor="set-new">New password</label>
+              <div className="set-reveal">
+                <input
+                  id="set-new"
+                  className="set-input"
+                  type={visible ? 'text' : 'password'}
+                  autoComplete="new-password"
+                  placeholder="Leave blank to keep it"
+                  value={newPassword}
+                  onChange={(e) => { setNewPassword(e.target.value); setFormError('') }}
+                />
+                <button type="button" className="set-reveal-btn" onClick={() => setVisible((v) => !v)}>
+                  {visible ? 'Hide' : 'Show'}
+                </button>
+              </div>
+            </div>
+            <div className="set-field">
+              <label className="label" htmlFor="set-confirm">Confirm new password</label>
+              <input
+                id="set-confirm"
+                className="set-input"
+                type={visible ? 'text' : 'password'}
+                autoComplete="new-password"
+                placeholder="Repeat new password"
+                value={confirmation}
+                onChange={(e) => { setConfirmation(e.target.value); setFormError('') }}
+              />
+            </div>
+          </div>
+
+          {newPassword && (
+            <div className="set-rules" aria-live="polite">
+              <span data-met={longEnough}><Icon name="check" size={13} /> 10 characters or more</span>
+              <span data-met={withinLimit}><Icon name="check" size={13} /> 72 bytes or fewer</span>
+              <span data-met={matches && !!confirmation}><Icon name="check" size={13} /> Passwords match</span>
+            </div>
+          )}
+
+          <div className="set-field">
+            <label className="label" htmlFor="set-current">Current password</label>
+            <input
+              id="set-current"
+              className="set-input"
+              type="password"
+              autoComplete="current-password"
+              value={currentPassword}
+              onChange={(e) => { setCurrentPassword(e.target.value); setFormError('') }}
+            />
+          </div>
+
+          {(formError || mutation.error) && (
+            <p className="set-error" role="alert">
+              <Icon name="alert" size={15} /> {formError || message(mutation.error)}
+            </p>
+          )}
+
+          <div className="set-actions">
+            <span className="set-note">You sign in again after saving.</span>
+            <button className="btn" data-variant="primary" type="submit" disabled={mutation.isPending || !changed}>
+              {mutation.isPending ? 'Saving' : 'Save credentials'}
+            </button>
+          </div>
+        </form>
+      </Panel>
+
+      <Panel title="This account" trailing={<Chip tone="accent">operator</Chip>}>
+        <div className="panel-body set-facts">
+          <div><span className="label">Username</span><span>{account.username}</span></div>
+          <div><span className="label">Created</span><M>{stamp(account.created_at)}</M></div>
+          <div><span className="label">Credentials updated</span><M>{stamp(account.updated_at)}</M></div>
+          <div><span className="label">Credential store</span><M>bcrypt · orchestra data volume</M></div>
+          <button className="btn set-signout" type="button" onClick={onLogout}>Sign out</button>
+        </div>
+      </Panel>
+    </div>
+  )
+}

web/src/screens/TaskDetail.css

@@ -0,0 +1,293 @@
+/* Task detail. Only what orchestra.css does not already carry: the two-column
+   split, the agent-claim treatment, and the muted superseded register. */
+
+.td-top {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.td-top .page-head {
+  flex: 1;
+  min-width: 0;
+}
+
+.td-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.td-ids {
+  display: flex;
+  align-items: baseline;
+  gap: 8px 18px;
+  flex-wrap: wrap;
+  margin-top: -12px;
+}
+
+.td-columns {
+  display: grid;
+  grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.td-doing > .label {
+  display: block;
+  margin: 18px 0 6px;
+}
+
+.td-doing > .label:first-child {
+  margin-top: 0;
+}
+
+.td-prose {
+  margin: 0;
+  color: var(--text-hi);
+}
+
+.td-muted {
+  color: var(--text-lo);
+  font-size: 13px;
+  margin: 6px 0 0;
+}
+
+.td-list {
+  margin: 0;
+  padding-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  color: var(--text-mid);
+}
+
+.td-more > summary {
+  cursor: pointer;
+  color: var(--text-lo);
+  font-size: 13px;
+  margin-top: 8px;
+  list-style: none;
+}
+
+.td-more > summary::before {
+  content: '▸ ';
+  color: var(--text-lo);
+}
+
+.td-more[open] > summary::before {
+  content: '▾ ';
+}
+
+.td-more[open] > summary {
+  margin-bottom: 8px;
+}
+
+/* Operator authority: the one class of content that carries the accent. */
+.td-decisions {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.td-decisions li {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 8px 10px;
+  border-radius: var(--r-sm);
+  background: var(--accent-dim);
+  border-left: 2px solid var(--accent);
+}
+
+.td-kind {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent-hi);
+}
+
+.td-subject {
+  color: var(--text-mid);
+}
+
+.td-value {
+  color: var(--text-hi);
+  flex: 1;
+  min-width: 0;
+}
+
+/* Superseded: still readable, never dominant, and stripped of the accent. */
+.td-superseded .td-decisions li {
+  background: var(--bg-2);
+  border-left-color: var(--line-hi);
+  opacity: 0.7;
+}
+
+.td-superseded .td-kind {
+  color: var(--text-lo);
+}
+
+.td-superseded .td-value {
+  color: var(--text-mid);
+  text-decoration: line-through;
+}
+
+.td-exec {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.td-exec .stat {
+  gap: 5px;
+}
+
+.td-exec .stat-value {
+  font-size: 20px;
+}
+
+/* Agent claims read as quotation, not as state: dashed rule, machine text,
+   and a tag that names the source. */
+.td-claim-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin: 18px 0 6px;
+}
+
+.td-claim-tag {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-lo);
+}
+
+.td-claim {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--bg-2);
+  border: 1px dashed var(--line-hi);
+  border-radius: var(--r-sm);
+}
+
+.td-claim > .mono:first-child {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.td-claim-at {
+  flex: none;
+}
+
+.td-approval {
+  margin-top: 16px;
+  padding: 12px;
+  border: 1px solid var(--accent-line);
+  background: var(--accent-dim);
+  border-radius: var(--r-sm);
+}
+
+.td-approval .td-prose {
+  margin: 4px 0 8px;
+}
+
+.td-approval-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.td-approval-row .mono {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+}
+
+.td-links {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 16px 0 4px;
+}
+
+.td-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.td-flow .phases {
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.td-entries {
+  display: flex;
+  gap: 8px 20px;
+  flex-wrap: wrap;
+  color: var(--text-lo);
+  font-size: 13px;
+}
+
+.td-entry-phase {
+  color: var(--text-mid);
+}
+
+/* Actions menu: a native disclosure, not a popover library. */
+.td-menu {
+  position: relative;
+}
+
+.td-menu > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.td-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.td-menu-body {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: 10;
+  min-width: 250px;
+  background: var(--bg-2);
+  border: 1px solid var(--line-hi);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.td-menu-body .row {
+  gap: 8px;
+}
+
+.td-menu-body .row:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.td-menu-body .row:disabled:hover {
+  background: none;
+}
+
+@media (max-width: 900px) {
+  .td-columns {
+    grid-template-columns: 1fr;
+  }
+}

web/src/screens/TaskDetail.tsx

@@ -0,0 +1,454 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link, useParams } from 'react-router-dom'
+import { api } from '../api/client'
+import type { Action, Detail, Event, Task } from '../api/types'
+import { Chip, EndpointGap, M, Panel, PhasePath } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './TaskDetail.css'
+
+/** work_phase is on the wire (domain.Task) but not yet in api/types.ts, which
+ *  another screen owns. Read it through a local widening rather than editing a
+ *  shared file out from under someone. */
+type Phased = Task & { work_phase?: string; last_lease_epoch?: string }
+
+const time = (iso?: string) => (iso ? new Date(iso).toISOString().slice(11, 19) : '—')
+
+function ago(iso?: string) {
+  if (!iso) return '—'
+  const s = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 1000))
+  if (s < 60) return `${s}s ago`
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`
+  return `${Math.floor(s / 3600)}h ago`
+}
+
+/** ponytail: recomputed on each 5s poll rather than ticking per second. The
+ *  operator reads a lease in minutes; a second-accurate countdown would need a
+ *  timer for no decision it changes. */
+function remaining(iso?: string) {
+  if (!iso) return undefined
+  const s = Math.round((Date.parse(iso) - Date.now()) / 1000)
+  if (s <= 0) return 'expired'
+  return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
+}
+
+type Decision = {
+  id: string
+  kind: string
+  subject: string
+  value: string
+  at: string
+  standing: boolean
+}
+
+/** The standing authority for this task, reduced from its own log. Mirrors
+ *  domain.ReduceIntent: a decision is retired only by being named, never by a
+ *  newer decision on the same subject. Superseded records are kept so the
+ *  screen can show them muted instead of pretending they never existed. */
+function decisionsOf(events: Event[]): Decision[] {
+  const out: Decision[] = []
+  const retired = new Set<string>()
+  for (const e of events) {
+    const p = (e.payload ?? {}) as {
+      decision_id?: string
+      kind?: string
+      subject?: string
+      value?: string
+      supersedes?: string[]
+    }
+    if (!p.decision_id) continue
+    if (e.type === 'HumanDecisionRecorded') {
+      out.push({
+        id: p.decision_id,
+        kind: p.kind ?? 'decision',
+        subject: p.subject ?? '',
+        value: p.value ?? '',
+        at: e.at,
+        standing: true,
+      })
+      p.supersedes?.forEach((id) => retired.add(id))
+    } else if (e.type === 'HumanDecisionSuperseded') {
+      retired.add(p.decision_id)
+    }
+  }
+  return out.map((d) => ({ ...d, standing: !retired.has(d.id) }))
+}
+
+/** When each phase was entered, from the events Orchestra itself appended.
+ *  Verified state, not a claim. */
+function phaseEntries(events: Event[]) {
+  return events
+    .filter((e) => e.type === 'WorkPhaseChanged')
+    .map((e) => ({ phase: (e.payload as { phase?: string })?.phase ?? '', at: e.at }))
+    .filter((p) => p.phase)
+}
+
+/** The last thing the pane actually showed. Agent-authored text: it is
+ *  rendered as a claim, never as orchestra state. */
+function lastLine(text?: string) {
+  const lines = (text ?? '').split('\n').map((l) => l.trimEnd()).filter((l) => l.trim())
+  return lines[lines.length - 1]
+}
+
+function stateTone(task: Task) {
+  if (task.state === 'blocked' || task.state === 'failed' || task.state === 'needs_attention') {
+    return 'fault' as const
+  }
+  if (task.state === 'completed') return 'done' as const
+  if (task.state === 'leased') return 'accent' as const
+  return undefined
+}
+
+export function TaskDetail() {
+  const { id = '' } = useParams()
+  const client = useQueryClient()
+  const query = useQuery({
+    queryKey: ['task', id],
+    queryFn: () => api.detail(id),
+    refetchInterval: 5000,
+  })
+  const act = useMutation({
+    mutationFn: (action: string) => api.action(id, action),
+    onSuccess: () => client.invalidateQueries({ queryKey: ['task', id] }),
+  })
+
+  if (query.isError) {
+    return (
+      <main className="page">
+        <div className="page-head">
+          <h1>Task</h1>
+        </div>
+        <Panel>
+          <div className="panel-body">
+            <p className="gap-note">{String((query.error as Error).message)}</p>
+          </div>
+        </Panel>
+      </main>
+    )
+  }
+  if (!query.data) {
+    return (
+      <main className="page">
+        <p className="mono">reading /v1/ui/tasks/{id}…</p>
+      </main>
+    )
+  }
+
+  const detail: Detail = query.data
+  const task = detail.task as Phased
+  const session = detail.session
+  const capture = session?.capture
+  const approval = session?.pending_approval
+  const decisions = decisionsOf(detail.events)
+  const standing = decisions.filter((d) => d.standing)
+  const constraints = standing.filter((d) => d.kind === 'constraint')
+  const effective = standing.filter((d) => d.kind !== 'constraint')
+  const superseded = decisions.filter((d) => !d.standing)
+  const acceptance = task.acceptance ?? []
+  const shown = acceptance.slice(0, 4)
+  const lease = session?.lease_until ?? task.lease?.until
+  const activity = lastLine(capture?.text)
+  const entries = phaseEntries(detail.events)
+
+  return (
+    <main className="page">
+      {/* ── top area ──────────────────────────────────────────────────── */}
+      <header className="td-top">
+        <div className="page-head">
+          <h1>{task.title || task.external_id || 'untitled task'}</h1>
+          <Chip tone="accent">{task.work_phase || 'frame'} phase</Chip>
+          <Chip tone={stateTone(task)}>{task.state}</Chip>
+        </div>
+        <div className="td-actions">
+          <ActionsMenu actions={detail.actions} pending={act.isPending} run={act.mutate} />
+          <button className="btn" data-variant="primary" disabled title="no endpoint yet">
+            <Icon name="decision" size={16} />
+            Steer / Correct
+          </button>
+        </div>
+      </header>
+
+      <div className="td-ids">
+        <span className="label">task id</span>
+        <M>{task.id}</M>
+        <span className="label">epoch</span>
+        <M>{task.lease?.epoch || task.last_lease_epoch || '—'}</M>
+        <span className="label">project</span>
+        <M>{task.project}</M>
+        <span className="label">version</span>
+        <M>{task.version}</M>
+      </div>
+
+      {act.isError && <p className="gap-note">{String((act.error as Error).message)}</p>}
+
+      <div className="td-columns">
+        {/* ── what we're doing ────────────────────────────────────────── */}
+        <Panel title="What we're doing">
+          <div className="panel-body td-doing">
+            <h3 className="label">goal</h3>
+            <p className="td-prose">{task.description || task.title || 'No goal recorded.'}</p>
+
+            <h3 className="label">
+              acceptance <M>{acceptance.length}</M>
+            </h3>
+            {acceptance.length === 0 ? (
+              <p className="td-muted">No acceptance criteria on the contract.</p>
+            ) : (
+              <>
+                <ul className="td-list">
+                  {shown.map((c) => (
+                    <li key={c}>{c}</li>
+                  ))}
+                </ul>
+                {acceptance.length > shown.length && (
+                  <details className="td-more">
+                    <summary>
+                      <M>+{acceptance.length - shown.length}</M> more criteria
+                    </summary>
+                    <ul className="td-list">
+                      {acceptance.slice(shown.length).map((c) => (
+                        <li key={c}>{c}</li>
+                      ))}
+                    </ul>
+                  </details>
+                )}
+              </>
+            )}
+            {task.quality_gate && (
+              <p className="td-muted">
+                <span className="label">quality gate</span> <M>{task.quality_gate}</M>
+              </p>
+            )}
+
+            {effective.length > 0 && (
+              <>
+                <h3 className="label">effective human decisions</h3>
+                <ul className="td-decisions">
+                  {effective.map((d) => (
+                    <li key={d.id}>
+                      <span className="td-kind">{d.kind}</span>
+                      <span className="td-subject">{d.subject}</span>
+                      <span className="td-value">{d.value}</span>
+                      <M>{time(d.at)}</M>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {constraints.length > 0 && (
+              <>
+                <h3 className="label">active constraints</h3>
+                <ul className="td-decisions">
+                  {constraints.map((d) => (
+                    <li key={d.id}>
+                      <span className="td-kind">constraint</span>
+                      <span className="td-subject">{d.subject}</span>
+                      <span className="td-value">{d.value}</span>
+                      <M>{time(d.at)}</M>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {superseded.length > 0 && (
+              <details className="td-more td-superseded">
+                <summary>
+                  <M>{superseded.length}</M> superseded {superseded.length === 1 ? 'decision' : 'decisions'}
+                </summary>
+                <ul className="td-decisions">
+                  {superseded.map((d) => (
+                    <li key={d.id}>
+                      <span className="td-kind">{d.kind}</span>
+                      <span className="td-subject">{d.subject}</span>
+                      <span className="td-value">{d.value}</span>
+                      <M>{time(d.at)}</M>
+                    </li>
+                  ))}
+                </ul>
+              </details>
+            )}
+          </div>
+        </Panel>
+
+        {/* ── live execution ──────────────────────────────────────────── */}
+        <Panel
+          title="Live execution"
+          trailing={
+            session?.agent_status ? (
+              <Chip tone={session.agent_status === 'blocked' ? 'fault' : 'accent'}>
+                {session.agent_status}
+              </Chip>
+            ) : (
+              <span className="mono">no session</span>
+            )
+          }
+        >
+          <div className="panel-body">
+            <div className="td-exec">
+              <div className="stat">
+                <span className="label">worker / harness</span>
+                <M>{session?.harness_id || task.lease?.harness_id || task.last_harness_id || '—'}</M>
+              </div>
+              <div className="stat">
+                <span className="label">pane</span>
+                <M>{session?.pane_id || task.last_pane_id || '—'}</M>
+                <span className="td-muted">
+                  <M>{task.pane_state || 'unknown'}</M>
+                </span>
+              </div>
+              <div className="stat">
+                <span className="label">lease remaining</span>
+                <span className="stat-value">{remaining(lease) ?? '—'}</span>
+                <span className="td-muted">
+                  until <M>{time(lease)}</M>
+                </span>
+              </div>
+              <div className="stat">
+                <span className="label">last progress</span>
+                <span className="stat-value">{ago(capture?.at)}</span>
+                <span className="td-muted">
+                  capture rev <M>{capture?.revision ?? '—'}</M>
+                </span>
+              </div>
+            </div>
+
+            {/* Context occupancy is the one number this panel is supposed to
+                carry and the read model does not produce it. Say so rather
+                than compute a plausible-looking figure. */}
+            <EndpointGap
+              path="/v1/ui/tasks/:id (no context accounting on session)"
+              what="Context occupancy — tokens used against the harness window — has no field in the read model, so no meter is drawn."
+            />
+
+            <h3 className="label td-claim-head">
+              current activity
+              <span className="td-claim-tag">
+                agent-supplied · pane capture{capture?.source ? ` · ${capture.source}` : ''}
+              </span>
+            </h3>
+            {activity ? (
+              <p className="td-claim">
+                <M>{activity}</M>
+                <span className="td-claim-at">
+                  <M>{time(capture?.at)}</M>
+                </span>
+              </p>
+            ) : (
+              <p className="td-muted">No capture from the owning worker.</p>
+            )}
+
+            {approval && (
+              <div className="td-approval">
+                <span className="label">pending approval</span>
+                <p className="td-prose">{approval.summary}</p>
+                {approval.command && <M>{approval.command}</M>}
+                <div className="td-approval-row">
+                  <span className="mono">
+                    {approval.pane_id} · rev {approval.capture_revision}
+                  </span>
+                  <button
+                    className="btn"
+                    data-variant="primary"
+                    disabled={act.isPending}
+                    onClick={() => act.mutate('grant_approval')}
+                  >
+                    Grant
+                  </button>
+                  <button className="btn" disabled={act.isPending} onClick={() => act.mutate('deny_approval')}>
+                    Deny
+                  </button>
+                </div>
+              </div>
+            )}
+
+            <div className="td-links">
+              <Link className="btn" to={`/tasks/${task.id}/terminal`}>
+                <Icon name="terminal" size={16} />
+                Open live pane
+              </Link>
+              {task.handoff_ref && (
+                <a className="btn" href={`/v1/ui/artifacts/${task.handoff_ref}`}>
+                  <Icon name="file" size={16} />
+                  Handoff
+                </a>
+              )}
+              {detail.report_ref && (
+                <a className="btn" href={`/v1/ui/artifacts/${detail.report_ref}`}>
+                  <Icon name="file" size={16} />
+                  Report
+                </a>
+              )}
+            </div>
+            <EndpointGap
+              path="/v1/ui/tasks/:id/{logs,launch_context,diff}"
+              what="Worker logs, launch context and git diff have no endpoint, so those links are not offered."
+            />
+          </div>
+        </Panel>
+      </div>
+
+      {/* ── workflow ──────────────────────────────────────────────────── */}
+      <Panel title="Workflow" trailing={<span className="mono">ace-fca</span>}>
+        <div className="panel-body td-flow">
+          <PhasePath current={task.work_phase} />
+          {entries.length > 0 ? (
+            <div className="td-entries">
+              {entries.map((e) => (
+                <span key={`${e.phase}-${e.at}`}>
+                  <span className="td-entry-phase">{e.phase}</span> entered <M>{time(e.at)}</M>
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="td-muted">
+              No WorkPhaseChanged event in this task's log — the path shows the current phase only.
+            </p>
+          )}
+        </div>
+      </Panel>
+    </main>
+  )
+}
+
+/** Operator actions, exactly as the server declares them. An action that
+ *  needs input the console cannot collect stays disabled and says what it
+ *  wants — offering a button that will 409 is the dishonest option. */
+function ActionsMenu({
+  actions,
+  pending,
+  run,
+}: {
+  actions: Action[]
+  pending: boolean
+  run: (action: string) => void
+}) {
+  return (
+    <details className="td-menu">
+      <summary className="btn">
+        Actions <Icon name="chevron-right" size={16} />
+      </summary>
+      <div className="td-menu-body">
+        {actions.map((a) => {
+          const blocked = !a.enabled || (a.needs?.length ?? 0) > 0
+          return (
+            <button
+              key={a.id}
+              className="row"
+              disabled={blocked || pending}
+              onClick={() => run(a.id)}
+              title={a.needs?.length ? `needs ${a.needs.join(', ')}` : a.reason}
+            >
+              <span className="row-main">
+                <span className="row-title">{a.id}</span>
+                <span className="row-sub">
+                  {a.needs?.length ? `needs ${a.needs.join(', ')}` : a.enabled ? a.reason || '' : a.reason || 'unavailable'}
+                </span>
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </details>
+  )
+}

web/src/screens/Tasks.css

@@ -0,0 +1,202 @@
+/* Tasks list. Only what the shared shell does not already carry: the row
+   column geometry, the group disclosure, and the filter bar. */
+
+.tasks-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.tasks-tabs {
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+}
+
+.tasks-tab {
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 7px 11px;
+  color: var(--text-mid);
+  cursor: pointer;
+  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
+}
+
+.tasks-tab span {
+  font-size: 12px;
+  margin-left: 5px;
+}
+
+.tasks-tab:hover {
+  color: var(--text-hi);
+}
+
+.tasks-tab[aria-selected='true'] {
+  color: var(--text-hi);
+  border-bottom-color: var(--accent);
+}
+
+.tasks-filters {
+  display: flex;
+  gap: 10px;
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+
+.tasks-filter {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.tasks-filter select {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-machine);
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  padding: 5px 8px;
+  cursor: pointer;
+}
+
+.tasks-filter select:hover {
+  border-color: var(--line-hi);
+}
+
+.page-head .count {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+}
+
+/* ── group disclosure ────────────────────────────────────────────────── */
+
+.tasks-group > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.tasks-group > summary::-webkit-details-marker {
+  display: none;
+}
+
+.tasks-group:not([open]) > summary {
+  border-bottom: 0;
+}
+
+.tasks-group > summary > svg:first-child {
+  color: var(--text-lo);
+}
+
+.tasks-group > summary > svg:last-child {
+  margin-left: auto;
+  color: var(--text-lo);
+  transform: rotate(90deg);
+  transition: transform var(--fast) var(--ease);
+}
+
+.tasks-group[open] > summary > svg:last-child {
+  transform: rotate(-90deg);
+}
+
+/* ── row geometry ────────────────────────────────────────────────────── */
+
+.task-row {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  color: inherit;
+}
+
+.task-row > svg:last-child {
+  color: var(--text-lo);
+  flex: none;
+}
+
+.task-row-main {
+  flex: 1 1 220px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.task-row-main .row-title,
+.task-row-main .row-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-row-phase {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.task-row-phase-name {
+  font-size: 10px;
+  letter-spacing: 0.04em;
+}
+
+/* The compact path carries no labels, so the connector no longer needs to
+   sit above a name. */
+.tasks-phases .phase-step {
+  min-width: 0;
+}
+
+.tasks-phases .phase-link {
+  width: 14px;
+  margin-bottom: 0;
+}
+
+.task-row-worker {
+  flex: none;
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+}
+
+.task-row-when {
+  flex: none;
+  width: 118px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+}
+
+.task-row-status {
+  flex: none;
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+  min-width: 130px;
+}
+
+@media (max-width: 900px) {
+  .task-row-phase,
+  .task-row-when {
+    display: none;
+  }
+
+  .task-row-worker {
+    width: 110px;
+  }
+}
+
+@media (max-width: 640px) {
+  .task-row-worker {
+    display: none;
+  }
+
+  .tasks-filters {
+    margin-left: 0;
+  }
+}

web/src/screens/Tasks.tsx

@@ -0,0 +1,329 @@
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Overview, Task } from '../api/types'
+import { Chip, Empty, EndpointGap, M, PHASES, PhasePath } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './Tasks.css'
+
+type GroupKey = 'attention' | 'running' | 'waiting' | 'completed' | 'failed'
+
+const GROUPS: { key: GroupKey; title: string; icon: string; open: boolean }[] = [
+  { key: 'attention', title: 'Needs attention', icon: 'alert', open: true },
+  { key: 'running', title: 'Running', icon: 'play', open: true },
+  { key: 'waiting', title: 'Waiting / queued', icon: 'queue', open: true },
+  { key: 'completed', title: 'Completed', icon: 'check', open: false },
+  { key: 'failed', title: 'Failed', icon: 'x', open: false },
+]
+
+function groupOf(task: Task): GroupKey {
+  switch (task.state) {
+    case 'needs_attention':
+    case 'blocked':
+      return 'attention'
+    case 'leased':
+      return 'running'
+    case 'completed':
+      return 'completed'
+    case 'failed':
+      return 'failed'
+    default:
+      return 'waiting'
+  }
+}
+
+/** The harness holding the lease, or the last one that did. Nothing is
+ *  invented: a task that never ran reports no worker. */
+function harnessOf(task: Task) {
+  return task.lease?.harness_id || task.last_harness_id || ''
+}
+
+function stateTone(task: Task) {
+  if (task.state === 'failed' || task.state === 'blocked') return 'fault' as const
+  if (task.state === 'needs_attention') return 'warn' as const
+  if (task.state === 'completed') return 'done' as const
+  if (task.state === 'leased') return 'accent' as const
+  return undefined
+}
+
+function ago(at?: string) {
+  if (!at) return ''
+  const ms = Date.now() - Date.parse(at)
+  if (!Number.isFinite(ms)) return ''
+  return `${span(ms)} ago`
+}
+
+function span(ms: number) {
+  const s = Math.max(0, Math.round(ms / 1000))
+  if (s < 60) return `${s}s`
+  if (s < 3600) return `${Math.round(s / 60)}m`
+  if (s < 86400) return `${Math.round(s / 3600)}h`
+  return `${Math.round(s / 86400)}d`
+}
+
+/** The one time value a task actually carries per state. There is no
+ *  per-task updated_at on the overview, so this never claims one. */
+function timing(task: Task): { label: string; value: string } | undefined {
+  if (task.lease?.until) {
+    const left = Date.parse(task.lease.until) - Date.now()
+    return left > 0
+      ? { label: 'lease', value: `${span(left)} left` }
+      : { label: 'lease', value: `expired ${span(-left)} ago` }
+  }
+  if (task.blocked_at) return { label: 'blocked', value: ago(task.blocked_at) }
+  if (task.next_retry_at) {
+    const left = Date.parse(task.next_retry_at) - Date.now()
+    return { label: 'retry', value: left > 0 ? `in ${span(left)}` : 'due' }
+  }
+  if (task.due) return { label: 'due', value: task.due.slice(0, 10) }
+  return undefined
+}
+
+function unique(values: (string | undefined)[]) {
+  return [...new Set(values.filter((value): value is string => !!value))].sort()
+}
+
+function Select({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string
+  value: string
+  options: string[]
+  onChange: (next: string) => void
+}) {
+  return (
+    <label className="tasks-filter">
+      <span className="label">{label}</span>
+      <select value={value} onChange={(event) => onChange(event.target.value)}>
+        <option value="">any</option>
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
+function Row({ task, agentStatus }: { task: Task; agentStatus?: string }) {
+  const harness = harnessOf(task)
+  const when = timing(task)
+  return (
+    <Link className="row task-row" to={`/tasks/${task.id}`}>
+      <span className="task-row-main">
+        <span className="row-title">{task.title || task.external_id || 'untitled task'}</span>
+        <span className="row-sub">
+          {task.project} · <M>{task.external_id || task.id}</M>
+        </span>
+      </span>
+
+      <span className="task-row-phase tasks-phases">
+        <PhasePath current={task.lifecycle_phase} labels={false} />
+        <span className="task-row-phase-name mono">{task.lifecycle_phase || '—'}</span>
+      </span>
+
+      <span className="task-row-worker">
+        {harness ? (
+          <>
+            <M>{harness}</M>
+            {task.last_pane_id && <span className="row-sub mono">{task.last_pane_id}</span>}
+          </>
+        ) : (
+          <span className="row-sub">unassigned</span>
+        )}
+      </span>
+
+      <span className="task-row-when">
+        {when && (
+          <>
+            <span className="label">{when.label}</span>
+            <M>{when.value}</M>
+          </>
+        )}
+      </span>
+
+      <span className="task-row-status">
+        {agentStatus && <Chip>{agentStatus}</Chip>}
+        <Chip tone={stateTone(task)}>{task.block_reason || task.state}</Chip>
+      </span>
+
+      <Icon name="chevron-right" size={16} />
+    </Link>
+  )
+}
+
+function Group({
+  title,
+  icon,
+  open,
+  tasks,
+  statusFor,
+}: {
+  title: string
+  icon: string
+  open: boolean
+  tasks: Task[]
+  statusFor: (task: Task) => string | undefined
+}) {
+  return (
+    <details className="panel tasks-group" open={open && tasks.length > 0}>
+      <summary className="panel-head">
+        <Icon name={icon} size={17} />
+        <h2>{title}</h2>
+        <span className="count">{tasks.length}</span>
+        <Icon name="chevron-right" size={16} />
+      </summary>
+      {tasks.length ? (
+        <div className="rows">
+          {tasks.map((task) => (
+            <Row key={task.id} task={task} agentStatus={statusFor(task)} />
+          ))}
+        </div>
+      ) : (
+        <Empty title="Nothing here" />
+      )}
+    </details>
+  )
+}
+
+export function Tasks() {
+  const { data, isLoading, error } = useQuery<Overview>({
+    queryKey: ['overview'],
+    queryFn: api.overview,
+    refetchInterval: 5000,
+  })
+
+  const [project, setProject] = useState('')
+  const [phase, setPhase] = useState('')
+  const [worker, setWorker] = useState('')
+  const [attention, setAttention] = useState('')
+  const [group, setGroup] = useState<GroupKey | ''>('')
+
+  const tasks = useMemo(() => data?.tasks ?? [], [data])
+
+  /** Agent status comes from the live session, matched by pane. It is an
+   *  agent claim, so it stays a separate chip from orchestra's own state. */
+  const statusFor = useMemo(() => {
+    const byPane = new Map((data?.sessions ?? []).map((s) => [s.pane_id, s]))
+    return (task: Task) =>
+      task.state === 'leased' ? byPane.get(task.last_pane_id)?.agent_status : undefined
+  }, [data])
+
+  const filtered = tasks.filter((task) => {
+    if (project && task.project !== project) return false
+    if (phase && task.lifecycle_phase !== phase) return false
+    if (worker && harnessOf(task) !== worker) return false
+    if (attention === 'needs' && groupOf(task) !== 'attention') return false
+    if (attention === 'clear' && groupOf(task) === 'attention') return false
+    if (attention && attention !== 'needs' && attention !== 'clear' && task.block_reason !== attention)
+      return false
+    return true
+  })
+
+  const counts = (key: GroupKey) => filtered.filter((task) => groupOf(task) === key).length
+  const shown = GROUPS.filter((g) => !group || g.key === group)
+
+  return (
+    <main className="page">
+      <div className="page-head">
+        <h1>Tasks</h1>
+        <p>All work under orchestration.</p>
+        <span className="count mono">{tasks.length}</span>
+      </div>
+
+      <div className="tasks-controls">
+        <div className="tasks-tabs" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={group === ''}
+            className="tasks-tab"
+            onClick={() => setGroup('')}
+          >
+            All <span className="mono">{filtered.length}</span>
+          </button>
+          {GROUPS.map((g) => (
+            <button
+              key={g.key}
+              type="button"
+              role="tab"
+              aria-selected={group === g.key}
+              className="tasks-tab"
+              onClick={() => setGroup(group === g.key ? '' : g.key)}
+            >
+              {g.title} <span className="mono">{counts(g.key)}</span>
+            </button>
+          ))}
+        </div>
+        <div className="tasks-filters">
+          <Select
+            label="Project"
+            value={project}
+            options={unique(tasks.map((task) => task.project))}
+            onChange={setProject}
+          />
+          <Select label="Phase" value={phase} options={[...PHASES]} onChange={setPhase} />
+          <Select
+            label="Worker"
+            value={worker}
+            options={unique(tasks.map(harnessOf))}
+            onChange={setWorker}
+          />
+          <Select
+            label="Attention"
+            value={attention}
+            options={['needs', 'clear', ...unique(tasks.map((task) => task.block_reason))]}
+            onChange={setAttention}
+          />
+        </div>
+      </div>
+
+      {error && (
+        <div className="panel panel-body">
+          <p className="gap-note">/v1/ui/overview failed: {(error as Error).message}</p>
+        </div>
+      )}
+
+      {isLoading && !data && (
+        <div className="panel panel-body">
+          <p className="gap-note">loading /v1/ui/overview…</p>
+        </div>
+      )}
+
+      {data && !tasks.length && (
+        <div className="panel">
+          <Empty title="No tasks yet">
+            <p>Orchestra has no work on record. Ingest a task to start.</p>
+          </Empty>
+        </div>
+      )}
+
+      {data &&
+        tasks.length > 0 &&
+        shown.map((g) => (
+          <Group
+            key={g.key}
+            title={g.title}
+            icon={g.icon}
+            open={g.open || !!group}
+            tasks={filtered.filter((task) => groupOf(task) === g.key)}
+            statusFor={statusFor}
+          />
+        ))}
+
+      {data && tasks.length > 0 && (
+        <div className="panel">
+          <EndpointGap
+            path="/v1/ui/overview carries no per-task progress, ETA or context occupancy"
+            what="Rows show lease, block and retry times because those are the only per-task clocks orchestra records. Progress bars and context meters are left out rather than estimated."
+          />
+        </div>
+      )}
+    </main>
+  )
+}

web/src/screens/Terminal.css

@@ -0,0 +1,192 @@
+/* The live pane. Tokens only — nothing here redefines the ethos ramp. */
+
+.term {
+  min-height: 0;
+}
+
+.term-head {
+  align-items: center;
+}
+
+.term-identity {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.term-sep {
+  color: var(--text-lo);
+}
+
+.term-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.term-mode {
+  gap: 6px;
+}
+
+.term-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 16px;
+  align-items: start;
+}
+
+/* The frame. Depth from a hairline and a surface step, never from glass. */
+.term-frame {
+  background: var(--bg-0);
+  border: 1px solid var(--line-hi);
+  border-radius: var(--r-md);
+  overflow: hidden;
+  min-width: 0;
+}
+
+.term-frame[data-lost='true'] {
+  border-color: rgba(224, 108, 96, 0.42);
+}
+
+.term-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--bg-2);
+  border-bottom: 1px solid var(--line);
+  font-size: 11px;
+}
+
+.term-bar-right {
+  margin-left: auto;
+  display: flex;
+  gap: 14px;
+}
+
+/* Exact pane characters: no wrapping, no reflow, no prettifying. */
+.term-text {
+  margin: 0;
+  padding: 14px 16px;
+  height: min(62vh, 720px);
+  overflow: auto;
+  white-space: pre;
+  tab-size: 8;
+  font-size: 13px;
+  line-height: 1.35;
+  color: #cfc6b4;
+  background: var(--bg-0);
+}
+
+.term-text:focus-visible {
+  outline-offset: -2px;
+}
+
+.term-foot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 0;
+  padding: 0 12px;
+}
+
+.term-foot:not(:empty) {
+  padding: 8px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--bg-1);
+}
+
+.term-jump {
+  height: 28px;
+  font-size: 12px;
+}
+
+.term-warn {
+  font-size: 12px;
+  color: #e06c60;
+}
+
+.term-side {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+
+.term-fields,
+.term-lost {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.term-lost p {
+  margin: 0 0 2px;
+  color: var(--text-mid);
+}
+
+.term-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.term-field-value {
+  font-size: 12px;
+  color: var(--text-mid);
+  overflow-wrap: anywhere;
+}
+
+.term-health {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.term-link:hover {
+  color: var(--accent-hi);
+}
+
+.term-resubmit p {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--text-mid);
+}
+
+.term-events {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.term-event {
+  display: flex;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--text-mid);
+}
+
+.term-muted {
+  margin: 0;
+  color: var(--text-lo);
+}
+
+@media (max-width: 1040px) {
+  .term-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .term-controls {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .term-text {
+    height: 54vh;
+    font-size: 12px;
+  }
+}

web/src/screens/Terminal.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Capture, Detail } from '../api/types'
+import { Chip, Dot, Empty, EndpointGap, M, Panel } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './Terminal.css'
+
+/** This is the screen that must not lie. Everything inside the frame is the
+ *  pane's own bytes; everything outside it is state Orchestra can prove. */
+
+function ago(at?: string) {
+  if (!at) return '—'
+  const seconds = Math.max(0, Math.round((Date.now() - new Date(at).getTime()) / 1000))
+  if (seconds < 60) return `${seconds}s ago`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`
+  return `${Math.floor(seconds / 3600)}h ago`
+}
+
+function clock(at?: string) {
+  return at ? new Date(at).toISOString().slice(11, 19) : '—'
+}
+
+function until(at?: string) {
+  if (!at) return '—'
+  const seconds = Math.round((new Date(at).getTime() - Date.now()) / 1000)
+  if (seconds <= 0) return 'expired'
+  const m = Math.floor(seconds / 60)
+  return `${String(m).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`
+}
+
+function Field({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="term-field">
+      <span className="label">{label}</span>
+      <span className="term-field-value">{value}</span>
+    </div>
+  )
+}
+
+export function Terminal() {
+  const { id = '' } = useParams()
+  const queries = useQueryClient()
+  const detail = useQuery<Detail>({
+    queryKey: ['detail', id],
+    queryFn: () => api.detail(id),
+    refetchInterval: 3000,
+  })
+
+  // The last frame we actually received, kept across refreshes so a lost pane
+  // still shows what was true when it was lost instead of an empty box.
+  const [frame, setFrame] = useState<Capture | undefined>()
+  const [lostAt, setLostAt] = useState<string | undefined>()
+  const [copied, setCopied] = useState(false)
+  const [pinned, setPinned] = useState(true)
+  const view = useRef<HTMLPreElement>(null)
+
+  const task = detail.data?.task
+  const session = detail.data?.session
+  const capture = session?.capture
+
+  useEffect(() => {
+    if (capture) {
+      setFrame(capture)
+      setLostAt(undefined)
+      return
+    }
+    // A leased task with no capture is a lost pane, not an empty one.
+    if (detail.isSuccess && task?.state === 'leased') {
+      setLostAt((was) => was ?? new Date().toISOString())
+    }
+  }, [capture, detail.isSuccess, task?.state])
+
+  // Scrollback inspection must not disturb the live view: we only follow the
+  // tail while the operator is already sitting at the tail.
+  useEffect(() => {
+    const el = view.current
+    if (el && pinned) el.scrollTop = el.scrollHeight
+  }, [frame?.revision, pinned])
+
+  const resubmit = useMutation({
+    mutationFn: () => api.action(id, 'resubmit'),
+    onSuccess: (next) => queries.setQueryData(['detail', id], next),
+  })
+
+  const canResubmit = detail.data?.actions.find((a) => a.id === 'resubmit')?.enabled ?? false
+  const lost = Boolean(lostAt) && Boolean(frame)
+  const status = session?.agent_status || task?.pane_state || 'unknown'
+  const health = lost ? 'error' : status === 'blocked' ? 'degraded' : status ? 'healthy' : 'unknown'
+
+  if (detail.isLoading) {
+    return (
+      <main className="page">
+        <div className="page-head">
+          <h1>Terminal</h1>
+        </div>
+        <Panel>
+          <div className="panel-body">Reading the pane…</div>
+        </Panel>
+      </main>
+    )
+  }
+
+  if (detail.isError || !task) {
+    return (
+      <main className="page">
+        <div className="page-head">
+          <h1>Terminal</h1>
+        </div>
+        <Panel>
+          <Empty title="No such task">
+            <p>
+              <M>{id}</M> is not in the store, so there is no pane to show.
+            </p>
+          </Empty>
+        </Panel>
+      </main>
+    )
+  }
+
+  return (
+    <main className="page term">
+      <div className="page-head term-head">
+        <h1>Terminal — live pane</h1>
+        {lost ? <Chip tone="fault">Pane lost</Chip> : capture ? <Chip tone="accent">Live</Chip> : <Chip>No session</Chip>}
+        <span className="term-identity">
+          <M>{session?.harness_id || task.last_harness_id || 'no worker'}</M>
+          <span className="term-sep">/</span>
+          <M>{session?.pane_id || task.last_pane_id || 'no pane'}</M>
+        </span>
+        <div className="term-controls">
+          <span className="chip term-mode" data-mode="read-only">
+            <Icon name="terminal" size={14} /> Read-only
+          </span>
+          <button
+            type="button"
+            className="btn"
+            disabled
+            title="Orchestra has no keystroke-forwarding endpoint"
+          >
+            Take control
+          </button>
+          <button
+            type="button"
+            className="btn"
+            disabled={!frame}
+            onClick={() => {
+              if (!frame) return
+              void navigator.clipboard.writeText(frame.text).then(() => {
+                setCopied(true)
+                setTimeout(() => setCopied(false), 1500)
+              })
+            }}
+          >
+            {copied ? 'Copied' : 'Copy frame'}
+          </button>
+        </div>
+      </div>
+
+      <div className="term-layout">
+        <div className="term-frame" data-lost={lost}>
+          <div className="term-bar">
+            <M>{session?.pane_id || task.last_pane_id || '—'}</M>
+            <span className="term-bar-right">
+              <M>rev {frame ? frame.revision : '—'}</M>
+              <M>{frame?.source || '—'}</M>
+              <M>{clock(frame?.at)}</M>
+            </span>
+          </div>
+          {frame ? (
+            <pre
+              ref={view}
+              className="term-text"
+              tabIndex={0}
+              aria-label="Pane capture, read-only"
+              onScroll={(event) => {
+                const el = event.currentTarget
+                setPinned(el.scrollHeight - el.scrollTop - el.clientHeight < 24)
+              }}
+            >
+              {frame.text}
+            </pre>
+          ) : (
+            <Empty title="No capture">
+              <p>
+                This task holds no leased session, so no worker is publishing pane text for{' '}
+                <M>{task.id}</M>.
+              </p>
+            </Empty>
+          )}
+          <div className="term-foot">
+            {frame?.truncated && <span className="term-warn">frame truncated by the worker</span>}
+            {!pinned && (
+              <button
+                type="button"
+                className="btn term-jump"
+                onClick={() => {
+                  setPinned(true)
+                  const el = view.current
+                  if (el) el.scrollTop = el.scrollHeight
+                }}
+              >
+                <Icon name="chevron-right" size={14} /> Scrollback held — jump to live
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="term-side">
+          {lost && (
+            <Panel title="Pane lost">
+              <div className="panel-body term-lost">
+                <p>
+                  The frame above is the last one Orchestra received. It is history, not the
+                  present.
+                </p>
+                <Field label="Frame captured" value={<M>{clock(frame?.at)} UTC</M>} />
+                <Field label="Capture stopped" value={<M>{clock(lostAt)} UTC</M>} />
+                <Field
+                  label="Lease consequence"
+                  value={
+                    task.lease?.until ? (
+                      <span>
+                        the lease still runs until <M>{clock(task.lease.until)} UTC</M>; nothing is
+                        rerouted before it expires
+                      </span>
+                    ) : (
+                      <span>no lease is held, so this task can be routed again immediately</span>
+                    )
+                  }
+                />
+              </div>
+            </Panel>
+          )}
+
+          <Panel title="Session">
+            <div className="panel-body term-fields">
+              <Field label="Task" value={<Link to={`/tasks/${task.id}`} className="term-link"><M>{task.id}</M></Link>} />
+              <Field label="Worker" value={<M>{session?.harness_id || task.last_harness_id || '—'}</M>} />
+              <Field label="Pane" value={<M>{session?.pane_id || task.last_pane_id || '—'}</M>} />
+              <Field label="Lease epoch" value={<M>{task.lease?.epoch || '—'}</M>} />
+              <Field
+                label="Lease"
+                value={
+                  task.lease?.until ? (
+                    <span>
+                      <M>{until(task.lease.until)}</M> left · until <M>{clock(task.lease.until)} UTC</M>
+                    </span>
+                  ) : (
+                    <M>none</M>
+                  )
+                }
+              />
+              <Field label="Capture source" value={<M>{frame?.source || '—'}</M>} />
+              <Field label="Capture revision" value={<M>{frame ? frame.revision : '—'}</M>} />
+              <Field label="Last verified progress" value={<M>{ago(frame?.at)}</M>} />
+              <Field label="Mode" value={<M>read-only</M>} />
+            </div>
+          </Panel>
+
+          <Panel title="Health">
+            <div className="panel-body term-fields">
+              <Field
+                label="Agent"
+                value={
+                  <span className="term-health">
+                    <Dot health={health} />
+                    <M>{status}</M>
+                  </span>
+                }
+              />
+              <Field label="Checked" value={<M>{ago(task.last_session?.checked_at || frame?.at)}</M>} />
+              {(session?.blocker || task.blocker) && (
+                <Field label="Blocker" value={<span>{session?.blocker || task.blocker}</span>} />
+              )}
+            </div>
+          </Panel>
+
+          <Panel title="Keyboard forwarding">
+            <EndpointGap
+              path="POST /v1/ui/tasks/:id/actions/send_keys"
+              what="Orchestra exposes no endpoint that forwards arbitrary keystrokes to a pane. The only operator input that reaches a live pane today is resubmit (a single Enter on text Orchestra itself submitted) and approval grant/deny. Take control stays disabled rather than opening a text box that goes nowhere."
+            />
+            <div className="panel-body term-resubmit">
+              <button
+                type="button"
+                className="btn"
+                data-variant="primary"
+                disabled={!canResubmit || resubmit.isPending}
+                onClick={() => resubmit.mutate()}
+              >
+                {resubmit.isPending ? 'Sending…' : 'Resubmit (send Enter)'}
+              </button>
+              <p>
+                Presses Enter once on input Orchestra placed in this pane. It sends no other key and
+                changes no lifecycle state.
+              </p>
+              {resubmit.isError && (
+                <p className="term-warn">{(resubmit.error as Error).message}</p>
+              )}
+            </div>
+          </Panel>
+
+          <Panel title="Recent events" count={detail.data?.events.length}>
+            <div className="panel-body term-events">
+              {(detail.data?.events ?? []).slice(-5).reverse().map((event) => (
+                <div key={event.id} className="term-event">
+                  <M>{clock(event.at)}</M>
+                  <span>{event.type}</span>
+                </div>
+              ))}
+              {!detail.data?.events.length && <p className="term-muted">No events recorded yet.</p>}
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </main>
+  )
+}

web/src/screens/Workers.css

@@ -0,0 +1,198 @@
+/* Workers screen. Only what the shared sheet does not already carry:
+   the two-column split, the label/value field row, and the observations ring. */
+
+.workers-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.workers-detail {
+  min-width: 0;
+}
+
+.workers .worker-row {
+  cursor: pointer;
+}
+
+.workers .worker-row[aria-selected='true'] {
+  background: var(--bg-2);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.workers .status-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.workers .worker-id {
+  font-size: 15px;
+  color: var(--accent-hi);
+}
+
+.workers .dim {
+  color: var(--text-lo);
+}
+
+.workers .task-link {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.workers .task-link .mono {
+  color: var(--accent-hi);
+}
+
+.workers .task-link:hover .mono {
+  text-decoration: underline;
+}
+
+.workers .task-title {
+  color: var(--text-mid);
+  font-size: 13px;
+}
+
+/* A human label, a machine value, on one line. Law 1 drawn as geometry. */
+.workers .field {
+  display: flex;
+  gap: 16px;
+  align-items: baseline;
+  padding: 5px 0;
+}
+
+.workers .field-name {
+  flex: none;
+  width: 150px;
+  color: var(--text-mid);
+  font-size: 13px;
+}
+
+.workers .field-value {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.workers .chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.workers .steps {
+  margin: 0 0 12px;
+  padding-left: 20px;
+  color: var(--text-mid);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workers .reg-lead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  color: var(--text-hi);
+}
+
+.workers .reg-lead svg {
+  color: var(--accent);
+}
+
+/* ── the observations ring ───────────────────────────────────────────
+   One distinct failure per row, with its repeat count kept whole. A count
+   of 41 means something looped 41 times; that number is the finding, so it
+   gets weight instead of a parenthesis. */
+
+.workers .obs-latest {
+  margin: 0 0 12px;
+  border-style: solid;
+  border-color: var(--line-hi);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.workers .obs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.workers .obs-item {
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  padding: 10px 12px;
+}
+
+.workers .obs-head {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.workers .obs-count {
+  flex: none;
+  font-size: 15px;
+  color: var(--text-hi);
+  min-width: 42px;
+  text-align: right;
+}
+
+/* Repeats are the signal that something is stuck rather than merely broken. */
+.workers .obs-count[data-repeat='true'] {
+  color: var(--accent-hi);
+}
+
+.workers .obs-msg {
+  min-width: 0;
+  color: var(--text-machine);
+  font-size: 12.5px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.workers .obs-when {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  margin-top: 8px;
+  padding-left: 52px;
+  font-size: 12px;
+}
+
+.workers .obs-when .mono {
+  color: var(--text-lo);
+}
+
+@media (max-width: 1100px) {
+  .workers-split {
+    grid-template-columns: 1fr;
+  }
+
+  .workers .obs-when {
+    padding-left: 0;
+  }
+
+  .workers .field {
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .workers .field-name {
+    width: auto;
+  }
+}

web/src/screens/Workers.tsx

@@ -0,0 +1,362 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api/client'
+import type { Task, Worker, WorkerHealth } from '../api/types'
+import { Chip, Dot, Empty, EndpointGap, M, Panel } from '../components/Primitives'
+import type { Health } from '../components/Primitives'
+import { Icon } from '../components/Icon'
+import './Workers.css'
+
+/** The coordinator's Go structs carry `observations` on WorkerHealth; the
+ *  shared type file has not caught up and is owned elsewhere, so the shape is
+ *  narrowed here rather than guessed at the call site. */
+interface Observation {
+  message: string
+  count: number
+  first: string
+  last: string
+}
+type Health2 = WorkerHealth & { observations?: Observation[] }
+
+/** Go marshals a zero time.Time as year 1 — `omitempty` does not omit a
+ *  struct. Treating that as a real timestamp would print "2025y ago". */
+function absent(iso?: string) {
+  return !iso || iso.startsWith('0001-')
+}
+
+function ago(iso?: string) {
+  if (absent(iso)) return '—'
+  const s = Math.max(0, (Date.now() - new Date(iso as string).getTime()) / 1000)
+  if (s < 60) return `${Math.floor(s)}s ago`
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`
+  return `${Math.floor(s / 86400)}d ago`
+}
+
+function clock(iso?: string) {
+  if (absent(iso)) return '—'
+  return new Date(iso as string).toISOString().slice(11, 19) + ' UTC'
+}
+
+function health(w: Worker): Health {
+  if (!w.online) return 'unknown'
+  if (w.health.herdr_status === 'unreachable') return 'error'
+  if (w.health.herdr_status === 'unknown') return 'unknown'
+  return w.health.last_error ? 'degraded' : 'healthy'
+}
+
+function statusLabel(w: Worker) {
+  if (!w.online) return 'Offline'
+  if (w.health.herdr_status === 'unreachable') return 'Backend unreachable'
+  if (w.health.active_task_id) return 'Busy'
+  return w.health.last_error ? 'Degraded' : 'Idle'
+}
+
+/** The ring is the evidence. A message with a count of 41 means a loop ran 41
+ *  times, and that number is the whole point — it is never collapsed away. */
+function Observations({ items }: { items: Observation[] }) {
+  return (
+    <ul className="obs">
+      {items.map((o) => (
+        <li className="obs-item" key={o.message + o.first}>
+          <div className="obs-head">
+            <span className="obs-count mono" data-repeat={o.count > 1} title={`${o.count} occurrences`}>
+              ×{o.count}
+            </span>
+            <span className="obs-msg mono">{o.message}</span>
+          </div>
+          <div className="obs-when">
+            <span className="label">first</span>
+            <M>{clock(o.first)}</M>
+            <span className="label">last</span>
+            <M>{clock(o.last)}</M>
+            <M>({ago(o.last)})</M>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function Field({ name, children }: { name: string; children: React.ReactNode }) {
+  return (
+    <div className="field">
+      <span className="field-name">{name}</span>
+      <span className="field-value">{children}</span>
+    </div>
+  )
+}
+
+function Detail({ worker, tasks }: { worker: Worker; tasks: Task[] }) {
+  const h = worker.health as Health2
+  const obs = h.observations ?? []
+  const task = tasks.find((t) => t.id === h.active_task_id)
+
+  return (
+    <div className="grid">
+      <Panel>
+        <header className="panel-head">
+          <h2 className="mono worker-id">{worker.id}</h2>
+          <span className="trailing">
+            <Dot health={health(worker)} /> {statusLabel(worker)}
+          </span>
+        </header>
+        <div className="panel-body">
+          <Field name="Backend">
+            <M>{h.backend || 'unknown'}</M>
+          </Field>
+          <Field name="Pane backend status">
+            <Dot health={health(worker)} /> <M>{h.herdr_status}</M>
+          </Field>
+          <Field name="Checked">
+            <M>{clock(h.checked_at)}</M> <span className="dim mono">({ago(h.checked_at)})</span>
+          </Field>
+          <Field name="Last seen">
+            <M>{clock(worker.last_seen)}</M>{' '}
+            <span className="dim mono">({ago(worker.last_seen)})</span>
+          </Field>
+          <Field name="Capacity">
+            <M>{worker.capacity}</M>
+          </Field>
+          {worker.address && (
+            <Field name="Address">
+              <M>{worker.address}</M>
+            </Field>
+          )}
+        </div>
+      </Panel>
+
+      <Panel title="Current session">
+        <div className="panel-body">
+          {h.active_task_id ? (
+            <>
+              <Field name="Task">
+                <Link className="task-link" to={`/tasks/${h.active_task_id}`}>
+                  <M>{h.active_task_id}</M>
+                  {task?.title && <span className="task-title">{task.title}</span>}
+                </Link>
+              </Field>
+              {task?.lifecycle_phase && (
+                <Field name="Phase">
+                  <Chip tone="accent">{task.lifecycle_phase}</Chip>
+                </Field>
+              )}
+              <Field name="Pane">
+                <M>{h.active_pane_id || '—'}</M>
+              </Field>
+            </>
+          ) : (
+            <p className="dim">No task leased to this worker.</p>
+          )}
+        </div>
+      </Panel>
+
+      <Panel title="Build">
+        <div className="panel-body">
+          <Field name="Revision">
+            <M>{worker.build?.revision || 'unknown'}</M>
+          </Field>
+          <Field name="Built">
+            <M>{worker.build?.time || 'unknown'}</M>
+          </Field>
+          {worker.build?.dirty === 'true' && (
+            <Field name="Tree">
+              <Chip tone="warn">dirty — built from uncommitted changes</Chip>
+            </Field>
+          )}
+        </div>
+      </Panel>
+
+      <Panel title="Declared projects" trailing={<span className="dim">reported by worker</span>}>
+        <div className="panel-body">
+          {worker.supported_projects?.length ? (
+            <div className="chips">
+              {worker.supported_projects.map((p) => (
+                <Chip key={p}>
+                  <span className="mono">{p}</span>
+                </Chip>
+              ))}
+            </div>
+          ) : (
+            <p className="dim">The worker declared no projects, so nothing routes to it.</p>
+          )}
+          <EndpointGap
+            path="PATCH /v1/federation/workers/:id"
+            what="Projects and capabilities are set by the worker at registration. There is no endpoint to edit them from here, and a form that only looked like it worked would lie about who owns the value."
+          />
+        </div>
+      </Panel>
+
+      <Panel
+        title="Observations"
+        count={obs.length}
+        trailing={<span className="dim">bounded ring of distinct failures</span>}
+      >
+        {obs.length ? (
+          <div className="panel-body">
+            {h.last_error && (
+              <p className="gap-note obs-latest">
+                latest: {h.last_error}
+                {!absent(h.error_at) && ` — ${clock(h.error_at)}`}
+              </p>
+            )}
+            <Observations items={obs} />
+          </div>
+        ) : (
+          <Empty title="No failures recorded">
+            <p>The worker has reported nothing to explain. Repeats would collapse here with a count.</p>
+          </Empty>
+        )}
+      </Panel>
+    </div>
+  )
+}
+
+export function Workers() {
+  const workers = useQuery({ queryKey: ['workers'], queryFn: api.workers, refetchInterval: 5000 })
+  const overview = useQuery({ queryKey: ['overview'], queryFn: api.overview, refetchInterval: 5000 })
+  const [picked, setPicked] = useState<string>()
+
+  const list = workers.data ?? []
+  const selected = list.find((w) => w.id === picked) ?? list[0]
+  const online = list.filter((w) => w.online)
+  const busy = online.filter((w) => w.health.active_task_id)
+  const faulted = list.filter((w) => health(w) === 'error' || health(w) === 'degraded')
+  const capacity = online.reduce((n, w) => n + (w.capacity || 0), 0)
+
+  return (
+    <main className="page workers">
+      <div className="page-head">
+        <div>
+          <h1>Workers</h1>
+          <p>Where work can run, and whether that machinery is usable.</p>
+        </div>
+      </div>
+
+      {workers.isError ? (
+        <Panel>
+          <Empty title="Worker list unavailable">
+            <p className="mono">GET /v1/federation/workers failed. Nothing can be leased until it answers.</p>
+          </Empty>
+        </Panel>
+      ) : (
+        <>
+          <div className="grid stats">
+            <div className="stat">
+              <span className="label">Online</span>
+              <span className="stat-value">{online.length}</span>
+            </div>
+            <div className="stat">
+              <span className="label">Busy</span>
+              <span className="stat-value">{busy.length}</span>
+            </div>
+            <div className="stat">
+              <span className="label">Offline</span>
+              <span className="stat-value">{list.length - online.length}</span>
+            </div>
+            <div className="stat">
+              <span className="label">Faulted</span>
+              <span className="stat-value">{faulted.length}</span>
+            </div>
+            <div className="stat">
+              <span className="label">Free capacity</span>
+              <span className="stat-value">{capacity - busy.length}</span>
+            </div>
+          </div>
+
+          <div className="workers-split">
+            <Panel title="Fleet" count={list.length}>
+              {list.length === 0 ? (
+                <Empty title="No workers registered">
+                  <p>
+                    A worker registers itself: it starts with coordinator credentials, announces its
+                    id, revision, harnesses, projects and capacity, then keeps liveness with a
+                    heartbeat. Nothing here can create one.
+                  </p>
+                </Empty>
+              ) : (
+                <div className="table-scroll">
+                  <table className="table">
+                    <thead>
+                      <tr>
+                        <th>Worker</th>
+                        <th>Status</th>
+                        <th>Backend</th>
+                        <th>Current task</th>
+                        <th>Pane</th>
+                        <th>Last seen</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {list.map((w) => {
+                        const h = w.health as Health2
+                        return (
+                          <tr
+                            key={w.id}
+                            className="worker-row"
+                            aria-selected={w.id === selected?.id}
+                            onClick={() => setPicked(w.id)}
+                          >
+                            <td className="mono">{w.id}</td>
+                            <td>
+                              <span className="status-cell">
+                                <Dot health={health(w)} /> {statusLabel(w)}
+                              </span>
+                            </td>
+                            <td>
+                              <Chip>
+                                <span className="mono">{h.backend || 'unknown'}</span>
+                              </Chip>
+                            </td>
+                            <td>
+                              {h.active_task_id ? (
+                                <Link
+                                  className="task-link"
+                                  to={`/tasks/${h.active_task_id}`}
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <M>{h.active_task_id}</M>
+                                </Link>
+                              ) : (
+                                <span className="dim mono">—</span>
+                              )}
+                            </td>
+                            <td className="mono">{h.active_pane_id || '—'}</td>
+                            <td className="mono">{ago(w.last_seen)}</td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </Panel>
+
+            <div className="workers-detail">
+              {selected && <Detail worker={selected} tasks={overview.data?.tasks ?? []} />}
+            </div>
+          </div>
+
+          <Panel title="Registration">
+            <div className="panel-body registration">
+              <p className="reg-lead">
+                <Icon name="worker" size={16} /> Workers register themselves; the console only reads
+                what they announce.
+              </p>
+              <ol className="steps">
+                <li>The worker starts with coordinator credentials.</li>
+                <li>It announces id, revision, harnesses, projects and capacity.</li>
+                <li>The coordinator records it; heartbeats keep liveness.</li>
+              </ol>
+              <EndpointGap
+                path="POST /v1/federation/workers"
+                what="There is no browser-side worker creation and no drain or unregister endpoint. Buttons for them would be decoration over machinery that does not exist."
+              />
+            </div>
+          </Panel>
+        </>
+      )}
+    </main>
+  )
+}

web/src/shell/CommandPalette.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { NAV } from './Shell'
+
+/** The shared command surface. It navigates and nothing else: an operator
+ *  console should not hide state changes behind a search box. */
+export function CommandPalette({
+  onClose,
+  onNavigate,
+}: {
+  onClose: () => void
+  onNavigate: (to: string) => void
+}) {
+  const [query, setQuery] = useState('')
+  const [active, setActive] = useState(0)
+  const input = useRef<HTMLInputElement>(null)
+
+  useEffect(() => input.current?.focus(), [])
+
+  const matches = useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    return NAV.filter((item) => !needle || item.label.toLowerCase().includes(needle))
+  }, [query])
+
+  useEffect(() => setActive(0), [query])
+
+  return (
+    <div className="cmdk-scrim" onClick={onClose} role="presentation">
+      <div className="cmdk-panel" onClick={(event) => event.stopPropagation()}>
+        <input
+          ref={input}
+          className="cmdk-input"
+          placeholder="Search tasks, decisions, workers…"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'ArrowDown') setActive((i) => Math.min(i + 1, matches.length - 1))
+            if (event.key === 'ArrowUp') setActive((i) => Math.max(i - 1, 0))
+            if (event.key === 'Enter' && matches[active]) onNavigate(matches[active].to)
+          }}
+        />
+        <div className="cmdk-list">
+          {matches.map((item, i) => (
+            <button
+              key={item.to}
+              className="cmdk-row"
+              data-active={i === active}
+              onMouseEnter={() => setActive(i)}
+              onClick={() => onNavigate(item.to)}
+            >
+              {item.label}
+            </button>
+          ))}
+          {matches.length === 0 && (
+            <p style={{ padding: '14px 10px', color: 'var(--text-mid)', margin: 0 }}>
+              Nothing matches that.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

web/src/shell/Shell.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { NavLink, Outlet, useNavigate } from 'react-router-dom'
+import { Icon } from '../components/Icon'
+import { CommandPalette } from './CommandPalette'
+
+export const NAV = [
+  { to: '/', icon: 'home', label: 'Dashboard', end: true },
+  { to: '/tasks', icon: 'task', label: 'Tasks' },
+  { to: '/decisions', icon: 'decision', label: 'Decisions' },
+  { to: '/workers', icon: 'worker', label: 'Workers' },
+  { to: '/projects', icon: 'project', label: 'Projects' },
+  { to: '/review', icon: 'review', label: 'Review' },
+  { to: '/settings', icon: 'settings', label: 'Settings', secondary: true },
+]
+
+/** Machine readouts belong in the top bar on desktop. On mobile they relocate
+ *  into the detail screens rather than disappearing: honesty moves, it is
+ *  never deleted. */
+function Clock() {
+  const [now, setNow] = useState(() => new Date())
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 1000)
+    return () => clearInterval(id)
+  }, [])
+  return <span>{now.toISOString().slice(11, 19)} UTC</span>
+}
+
+export function Shell({ revision, live }: { revision?: string; live?: boolean }) {
+  const [palette, setPalette] = useState(false)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const onShortcut = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault()
+        setPalette((open) => !open)
+      }
+      if (event.key === 'Escape') setPalette(false)
+    }
+    window.addEventListener('keydown', onShortcut)
+    return () => window.removeEventListener('keydown', onShortcut)
+  }, [])
+
+  return (
+    <div className="console shell">
+      <nav className="rail" aria-label="Primary">
+        <span className="rail-mark">
+          <Icon name="fork" size={26} />
+        </span>
+        {NAV.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.end}
+            className="rail-item"
+            data-secondary={item.secondary ? 'true' : undefined}
+            title={item.label}
+            aria-label={item.label}
+          >
+            <Icon name={item.icon} />
+          </NavLink>
+        ))}
+        <span className="rail-spacer" />
+      </nav>
+      <div className="main">
+        <header className="topbar">
+          <span className="topbar-title">orchestra</span>
+          <button className="cmdk-trigger" onClick={() => setPalette(true)}>
+            <kbd>⌘K</kbd>
+            <span>Search tasks, decisions, workers…</span>
+          </button>
+          <div className="topbar-readouts">
+            {revision && <span title={revision}>{revision.slice(0, 7)}</span>}
+            <span>
+              <span className="dot" data-health={live ? 'healthy' : 'unknown'} />{' '}
+              {live ? 'Live' : 'Unknown'}
+            </span>
+            <Clock />
+          </div>
+        </header>
+        <Outlet />
+      </div>
+      {palette && (
+        <CommandPalette
+          onClose={() => setPalette(false)}
+          onNavigate={(to) => {
+            setPalette(false)
+            navigate(to)
+          }}
+        />
+      )}
+    </div>
+  )
+}

web/src/styles/ethos.tokens.css

@@ -0,0 +1,136 @@
+/* ═══════════════════════════════════════════════════════════════
+   ETHOS — tokens
+   Shared design language for the kvmx.ru apps.
+
+   The neutral system (ramp, type, motion, radii, shadow) is shared by
+   every app and does not change. The only per-app difference is the
+   accent (one hue) and the motif (one geometric signature).
+
+   NEW APP: do not invent the accent silently. Ask the operator for the
+   accent name + hex and the motif, then add one [data-app] block at the
+   bottom using the TEMPLATE. Fonts are self-hosted (subset + woff2,
+   immutable caching) — no font CDN.
+   ═══════════════════════════════════════════════════════════════ */
+
+@font-face {
+  font-family: 'Geist';
+  src: url('/fonts/Geist-Variable.woff2') format('woff2');
+  font-weight: 100 900; font-display: swap;
+}
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900; font-display: swap;
+}
+
+:root {
+  /* ── neutral ramp — warm, brown-tinted (dark, default) ── */
+  --bg-0: #14110D;   /* deepest room */
+  --bg-1: #1B1712;   /* surface */
+  --bg-2: #221D17;   /* raised */
+  --bg-3: #2C261D;   /* hover / raised */
+  --bg-4: #372F24;   /* pressed / high */
+
+  --line:    rgba(244, 234, 220, 0.09);   /* hairline */
+  --line-hi: rgba(244, 234, 220, 0.16);   /* hairline emphasized */
+
+  --text-hi:      #F4EEE4;   /* human primary   (sans) */
+  --text-mid:     #B4AA98;   /* human secondary (sans) */
+  --text-lo:      #756C5C;   /* human tertiary / idle   */
+  --text-machine: #9C917D;   /* machine default (mono)  */
+
+  /* ── type ── */
+  --sans: 'Geist', -apple-system, system-ui, sans-serif;
+  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* mono numerics: apply on any element using --mono */
+  /* font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; */
+
+  /* ── motion — mechanical, no bounce ── */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --fast: 130ms;
+  --med:  170ms;
+
+  /* ── radii ── */
+  --r-sm: 8px;
+  --r-md: 12px;
+  --r-lg: 18px;
+  --r-xl: 24px;
+
+  /* ── elevation: depth from light, never blur ── */
+  --shadow-soft: 0 2px 8px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.28);
+  --shadow-lift: 0 4px 14px rgba(0,0,0,0.40), 0 20px 48px rgba(0,0,0,0.34);
+
+  /* ── accent slot ──
+     Neutral fallback so an app with no [data-app] is never unstyled.
+     Real values come from the per-app block below. Accent is a SIGNAL
+     (active state, focus ring, primary action, one lit detail) — never a
+     fill-everything wash. */
+  --accent:       var(--text-mid);
+  --accent-hi:    var(--text-hi);
+  --accent-dim:   rgba(244, 234, 220, 0.10);
+  --accent-line:  rgba(244, 234, 220, 0.24);
+  --accent-glow:  rgba(244, 234, 220, 0.14);
+}
+
+/* ── light theme — warm, off-white (kept off cream to dodge the AI-cream tell) ── */
+[data-theme="light"] {
+  --bg-0: #F1ECE3;
+  --bg-1: #EAE4D8;
+  --bg-2: #E2DACB;
+  --bg-3: #D7CDBB;
+  --bg-4: #C9BDA7;
+
+  --line:    rgba(28, 22, 14, 0.10);
+  --line-hi: rgba(28, 22, 14, 0.18);
+
+  --text-hi:      #1B1712;
+  --text-mid:     #544C3E;
+  --text-lo:      #877E6C;
+  --text-machine: #6B6252;
+
+  --shadow-soft: 0 2px 8px rgba(60,45,25,0.10), 0 12px 32px rgba(60,45,25,0.08);
+  --shadow-lift: 0 4px 14px rgba(60,45,25,0.12), 0 20px 48px rgba(60,45,25,0.10);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PER-APP OVERRIDES — one small block each. Accent + optional motif
+   hooks only; never touch the neutral ramp.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* muzick — reference app · honey amber · waveform */
+[data-app="muzick"] {
+  --accent:      #EDA24E;
+  --accent-hi:   #F5B667;
+  --accent-dim:  rgba(237, 162, 78, 0.14);
+  --accent-line: rgba(237, 162, 78, 0.32);
+  --accent-glow: rgba(237, 162, 78, 0.22);
+
+  /* motif hook: cool content-art gradient so art carries color, amber stays signal */
+  --np-art: radial-gradient(120% 120% at 22% 14%, #7FB3BC 0%, #2F6E7A 42%, #1C4552 78%, #14262E 100%);
+}
+
+/* ── TEMPLATE — copy for a new app AFTER intake with the operator ──
+[data-app="APPNAME"] {
+  --accent:      #RRGGBB;                     // the operator's chosen hue
+  --accent-hi:   #RRGGBB;                     // ~ +10–14% lightness
+  --accent-dim:  rgba(R, G, B, 0.14);         // active-state backgrounds
+  --accent-line: rgba(R, G, B, 0.32);         // accent hairlines
+  --accent-glow: rgba(R, G, B, 0.22);         // restrained ambient pool
+  // optional motif hooks (gradients / seeds) go here, app-specific
+}
+*/
+
+/* orchestra — signal violet · routing fork
+   Accent and motif come from orchestra-ui-spec.md, chosen by the operator. */
+[data-app="orchestra"] {
+  --accent:      #8F7AE5;
+  --accent-hi:   #A291EC;
+  --accent-dim:  rgba(143, 122, 229, 0.14);
+  --accent-line: rgba(143, 122, 229, 0.32);
+  --accent-glow: rgba(143, 122, 229, 0.22);
+
+  /* motif hook: the routing fork, one path splitting and rejoining. Used by
+     the app mark, phase transitions and empty states. */
+  --fork-line: rgba(143, 122, 229, 0.55);
+}

web/src/styles/orchestra.css

@@ -0,0 +1,679 @@
+/* Orchestra operator console — the ethos shell, applied.
+   Tokens come from ethos.tokens.css and are never redefined here. This file
+   holds the shared shell geometry and the primitives every screen reuses, so
+   nine screens cannot drift into nine dialects. */
+
+@import './ethos.tokens.css';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg-0);
+  color: var(--text-hi);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Law 1. Anything the machine owns is mono, with tabular figures so columns
+   of ids, durations and percentages line up instead of shimmering. */
+.mono,
+code,
+kbd,
+pre {
+  font-family: var(--mono);
+  font-feature-settings: 'tnum' 1, 'zero' 1;
+  letter-spacing: -0.01em;
+  color: var(--text-machine);
+}
+
+/* Machine ids are long and unbreakable by default, so a pane id ran out of
+   its card and under the next one. Ids wrap; tables keep their own scroll. */
+.console .mono {
+  overflow-wrap: anywhere;
+}
+
+.console .table .mono,
+.console .topbar-readouts .mono {
+  overflow-wrap: normal;
+}
+
+.console .label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-lo);
+  font-weight: 500;
+}
+
+.console h1 {
+  font-size: 28px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  margin: 0;
+  font-weight: 600;
+}
+
+.console h2 {
+  font-size: 17px;
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.console a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.console button {
+  font: inherit;
+  color: inherit;
+}
+
+/* ── shell ───────────────────────────────────────────────────────────── */
+
+.console.shell {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  height: 100%;
+}
+
+.console .rail {
+  background: var(--bg-1);
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 14px 0 10px;
+  gap: 4px;
+}
+
+.console .rail-mark {
+  color: var(--accent);
+  margin-bottom: 14px;
+}
+
+.console .rail-item {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--r-sm);
+  color: var(--text-lo);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
+}
+
+.console .rail-item:hover {
+  color: var(--text-mid);
+  background: var(--bg-2);
+}
+
+/* Accent marks the one active thing. It never fills the rail. */
+.console .rail-item[aria-current='page'] {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.console .rail-item[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  left: -10px;
+  top: 10px;
+  bottom: 10px;
+  width: 3px;
+  border-radius: 0 2px 2px 0;
+  background: var(--accent);
+}
+
+.console .rail-spacer {
+  flex: 1;
+}
+
+.console .topbar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg-1);
+}
+
+.console .topbar-title {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.console .topbar-readouts {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-machine);
+}
+
+.console .main {
+  display: grid;
+  grid-template-rows: 56px 1fr;
+  min-width: 0;
+  height: 100%;
+}
+
+.console .page {
+  overflow-y: auto;
+  padding: 22px 24px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.console .page-head {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.console .page-head p {
+  margin: 0;
+  color: var(--text-mid);
+}
+
+/* ── command surface ─────────────────────────────────────────────────── */
+
+.console .cmdk-trigger {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 34px;
+  min-width: 260px;
+  max-width: 520px;
+  flex: 1;
+  padding: 0 12px;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  color: var(--text-lo);
+  cursor: pointer;
+  transition: border-color var(--fast) var(--ease);
+}
+
+.console .cmdk-trigger:hover {
+  border-color: var(--line-hi);
+}
+
+kbd {
+  font-size: 11px;
+  padding: 2px 6px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--bg-1);
+}
+
+.console .cmdk-scrim {
+  position: fixed;
+  inset: 0;
+  background: rgba(10, 8, 6, 0.62);
+  display: grid;
+  place-items: start center;
+  padding-top: 12vh;
+  z-index: 40;
+}
+
+.console .cmdk-panel {
+  width: min(620px, 92vw);
+  background: var(--bg-1);
+  border: 1px solid var(--line-hi);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.console .cmdk-input {
+  width: 100%;
+  height: 50px;
+  padding: 0 16px;
+  background: none;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  color: var(--text-hi);
+  font: inherit;
+  outline: none;
+}
+
+.console .cmdk-list {
+  max-height: 46vh;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.console .cmdk-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: var(--r-sm);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.console .cmdk-row[data-active='true'] {
+  background: var(--bg-3);
+}
+
+/* ── panels and tables ───────────────────────────────────────────────── */
+
+.console .panel {
+  background: var(--bg-1);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+}
+
+.console .panel-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.console .panel-head .count {
+  font-family: var(--mono);
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--bg-3);
+  color: var(--text-machine);
+}
+
+.console .panel-head .trailing {
+  margin-left: auto;
+  color: var(--text-lo);
+  font-size: 13px;
+}
+
+.console .panel-body {
+  padding: 14px 18px;
+}
+
+.console .rows {
+  display: flex;
+  flex-direction: column;
+}
+
+.console .row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  background: none;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  width: 100%;
+  cursor: pointer;
+  transition: background var(--fast) var(--ease);
+}
+
+.console .row:last-child {
+  border-bottom: 0;
+}
+
+.console .row:hover {
+  background: var(--bg-2);
+}
+
+.console .row-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.console .row-title {
+  font-weight: 500;
+}
+
+.console .row-sub {
+  color: var(--text-mid);
+  font-size: 13px;
+}
+
+.console .table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.console .table th {
+  text-align: left;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-lo);
+  font-weight: 500;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+
+.console .table td {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: middle;
+}
+
+.console .table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.console .table tbody tr:hover {
+  background: var(--bg-2);
+}
+
+.console .table-scroll {
+  overflow-x: auto;
+}
+
+/* ── status, phases, values ──────────────────────────────────────────── */
+
+.console .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+  flex: none;
+}
+
+.console .dot[data-health='healthy'] {
+  background: #5fbf82;
+}
+
+.console .dot[data-health='degraded'] {
+  background: #d8a657;
+}
+
+.console .dot[data-health='error'] {
+  background: #e06c60;
+}
+
+.console .dot[data-health='unknown'] {
+  background: var(--text-lo);
+}
+
+.console .chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  color: var(--text-mid);
+  white-space: nowrap;
+}
+
+.console .chip[data-tone='accent'] {
+  border-color: var(--accent-line);
+  background: var(--accent-dim);
+  color: var(--accent-hi);
+}
+
+.console .chip[data-tone='warn'] {
+  border-color: rgba(216, 166, 87, 0.32);
+  background: rgba(216, 166, 87, 0.12);
+  color: #d8a657;
+}
+
+.console .chip[data-tone='fault'] {
+  border-color: rgba(224, 108, 96, 0.32);
+  background: rgba(224, 108, 96, 0.12);
+  color: #e06c60;
+}
+
+.console .chip[data-tone='done'] {
+  border-color: rgba(95, 191, 130, 0.28);
+  background: rgba(95, 191, 130, 0.1);
+  color: #5fbf82;
+}
+
+/* The routing fork, rendered as the phase path. Completed is quiet green,
+   the current phase carries the accent, the future stays neutral. */
+.console .phases {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.console .phase-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  min-width: 46px;
+}
+
+.console .phase-node {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1.6px solid var(--text-lo);
+}
+
+.console .phase-step[data-state='done'] .phase-node {
+  border-color: #5fbf82;
+  background: rgba(95, 191, 130, 0.35);
+}
+
+.console .phase-step[data-state='current'] .phase-node {
+  border-color: var(--accent);
+  background: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
+}
+
+.console .phase-step .phase-name {
+  font-size: 9px;
+  color: var(--text-lo);
+  letter-spacing: 0.04em;
+}
+
+.console .phase-step[data-state='current'] .phase-name {
+  color: var(--accent-hi);
+}
+
+.console .phase-link {
+  height: 1.6px;
+  width: 18px;
+  background: var(--line-hi);
+  margin-bottom: 12px;
+}
+
+.console .phase-link[data-state='done'] {
+  background: rgba(95, 191, 130, 0.4);
+}
+
+.console .meter {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--bg-3);
+  overflow: hidden;
+  min-width: 64px;
+}
+
+.console .meter > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+}
+
+/* ── actions ─────────────────────────────────────────────────────────── */
+
+.console .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 13px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  color: var(--text-hi);
+  cursor: pointer;
+  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
+}
+
+.console .btn:hover {
+  background: var(--bg-3);
+  border-color: var(--line-hi);
+}
+
+.console .btn[data-variant='primary'] {
+  background: var(--accent-dim);
+  border-color: var(--accent-line);
+  color: var(--accent-hi);
+}
+
+.console .btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* ── empty, error, gap ───────────────────────────────────────────────── */
+
+.console .empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 44px 20px;
+  text-align: center;
+  color: var(--text-mid);
+}
+
+.console .empty .motif {
+  color: var(--accent);
+  opacity: 0.55;
+}
+
+.console .empty h3 {
+  margin: 0;
+  font-size: 15px;
+  color: var(--text-hi);
+  font-weight: 600;
+}
+
+/* A screen with no endpoint says so, with the path it would call. Law 5: an
+   interface never implies data it does not have. */
+.console .gap-note {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-machine);
+  background: var(--bg-2);
+  border: 1px dashed var(--line-hi);
+  border-radius: var(--r-sm);
+  padding: 8px 12px;
+}
+
+.console .grid {
+  display: grid;
+  gap: 14px;
+}
+
+.console .stats {
+  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
+}
+
+.console .stat {
+  background: var(--bg-1);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.console .stat-value {
+  font-family: var(--mono);
+  font-size: 26px;
+  color: var(--text-hi);
+  letter-spacing: -0.02em;
+}
+
+/* ── mobile: rail becomes a bottom tab bar, readouts relocate ────────── */
+
+@media (max-width: 640px) {
+  .console.shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+  }
+
+  .console .rail {
+    order: 2;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+    padding: 4px 0;
+    border-right: 0;
+    border-top: 1px solid var(--line);
+  }
+
+  .rail-mark,
+  .rail-spacer,
+  .console .rail-item[data-secondary='true'] {
+    display: none;
+  }
+
+  .console .rail-item[aria-current='page']::before {
+    left: 10px;
+    right: 10px;
+    top: -4px;
+    bottom: auto;
+    width: auto;
+    height: 3px;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .console .topbar-readouts {
+    display: none;
+  }
+
+  .console .page {
+    padding: 16px 14px 28px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}