Web UI

Two web surfaces share the same skeleton: the dashboard (port 7000) and the per-agent UIs (every container — including the manager — 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:

• Shape (shared by both) — shared SPA skeleton, SSE multiplexing, terminal pane, listener bind, per-agent relative paths, data-async form pattern, side panel, atomic repaint.
• Dashboard layout — tab contents (SW4RM, Y3R C4LL, SYST3M, P3RM1SS10NS, SCH3DUL3S, P33RS, S3TT1NGS), container row, topology tree, selection bar, approval card, browser notifications, dashboard endpoints + event channel.
• Per-agent page — header, main terminal, composer, side panel + inbox, live view, slash commands, per-agent endpoints, stats page.
• CSS theme variables — 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 (SSE multiplexing, Worker-death self-heal, atomic repaint).
• "What does a container row contain?" → web-ui/dashboard.md (Container row, Topology tree, Selection bar).
• "What endpoints does the dashboard expose?" → web-ui/dashboard.md (Dashboard endpoints, Dashboard event channel).
• "How does the per-agent terminal render tool calls?" → web-ui/agent.md (Live view).
• "What slash commands does the agent accept?" → web-ui/agent.md (Terminal-embedded prompt).
• "What are the per-agent HTTP endpoints?" → web-ui/agent.md (Per-agent endpoints).
• "Which CSS variable do I use / where are colours defined?" → web-ui/css-vars.md (Palette, single-source base.css rule).