025cc4f18d
docs/web-ui/ had four pages, all written as deep implementation reference (dashboard.md alone is 1466 lines of wire shapes and DOM mechanics) - there was nothing here written for an operator actually using the dashboard day to day. Add docs/web-ui/README.md: genuinely task-oriented content (what the dashboard is, where the tabs are, the things you'd actually do - checking an agent, answering a pending question, approving a config change, granting a permission, reading logs) with pointers into the existing pages for implementation depth. Point docs/web-ui.md at it as the operator starting point. Deliberately not touching dashboard.md/agent.md/shape.md/css-vars.md - reflowing 1466 lines of dense, working reference content in place turned out to be a much bigger and more error-prone task than "lead with the user fact" suggested at a glance (see hyperhive#1898). The subdir's landing page carries the user-facing content; the existing pages stay exactly as they are, as the depth layer underneath it. Verified the new page actually renders as the subdir's index via the website repo's new subdir-landing-page support (hyperhive/website PR #46): a real build of the prose-docs derivation confirms web-ui/index.html now exists, the root index links straight to it, and every internal link resolves correctly.
52 lines
2.5 KiB
Markdown
52 lines
2.5 KiB
Markdown
# 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).
|