# Web UI

Two web surfaces share the same skeleton: the dashboard (port 7000)
and the per-agent UIs (every container hashes into :8100-8999 via
`lifecycle::agent_web_port`'s FNV-1a).
Both are SPAs — `GET /` returns a static shell, `/api/state`
returns JSON, JS renders. No full-page reloads.

This doc has been split for readability. Pick the section you need —
or, if you're the operator looking for how to actually *use* the
dashboard rather than how it's built, start at
**[web-ui/README.md](web-ui/README.md)** instead.

- **[Shape (shared by both)](web-ui/shape.md)** — shared SPA
  skeleton, SSE multiplexing, terminal pane, listener bind,
  per-agent relative paths, `data-async` form pattern, side panel,
  atomic repaint.
- **[Dashboard layout](web-ui/dashboard.md)** — tab contents
  (SW4RM, Y3R C4LL, P3RM1SS10NS, SCH3DUL3S) + standalone pages
  (C0R3 `/core.html`, BU1LDS `/builds.html`, L0GS `/logs.html`,
  CR3D3NTIALS `/credentials.html`), container row,
  topology tree, selection bar, approval card, browser
  notifications, dashboard endpoints + event channel.
- **[Per-agent page](web-ui/agent.md)** — header, main terminal,
  composer, side panel + inbox, live view, slash commands,
  per-agent endpoints, stats page.
- **[CSS theme variables](web-ui/css-vars.md)** — the Catppuccin
  Mocha custom properties declared once in `base.css` and the rule
  that per-page stylesheets reference (never redeclare) them.

## Reading paths

- **"How does the dashboard SPA stay live without polling?"** →
  [`web-ui/shape.md`](web-ui/shape.md) (SSE multiplexing,
  Worker-death self-heal, atomic repaint).
- **"What does a container row contain?"** →
  [`web-ui/dashboard.md`](web-ui/dashboard.md) (Container row,
  Topology tree, Selection bar).
- **"What endpoints does the dashboard expose?"** →
  [`web-ui/dashboard.md`](web-ui/dashboard.md) (Dashboard
  endpoints, Dashboard event channel).
- **"How does the per-agent terminal render tool calls?"** →
  [`terminal-rendering.md`](terminal-rendering.md) (full row
  taxonomy + dispatch walkthrough); for a high-level summary see
  [`web-ui/agent.md`](web-ui/agent.md) (Per-stream rendering).
- **"What slash commands does the agent accept?"** →
  [`web-ui/agent.md`](web-ui/agent.md) (Terminal-embedded prompt).
- **"What are the per-agent HTTP endpoints?"** →
  [`web-ui/agent.md`](web-ui/agent.md) (Per-agent endpoints).
- **"Which CSS variable do I use / where are colours defined?"** →
  [`web-ui/css-vars.md`](web-ui/css-vars.md) (Palette, single-source
  `base.css` rule).