vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
hyperhive/docs/web-ui.md
atlas 39b95c2ede treefmt: apply prettier 
Pure `nix fmt` output from the commit before this one — no hand edits.
203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs.

Reproduce with `nix develop -c nix fmt` on the parent commit; the result
should be byte-identical to this tree.

None of the 13 `.prettierignore` entries appears here — verified by
intersecting the changed-file list against the ignore file, with a
control proving the intersection finds a match when one exists.
2026-09-02 15:25:07 +02:00

3 KiB
Raw Blame History

Web UI

Two web surfaces share the same skeleton: the dashboard (port 7000) and the per-agent UIs (each container's port is a deterministic hash in :8100-8999 — see gotchas.md#web-ui-ports-collide-on-hash for the mechanics and the collision caveat). 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 instead.

  • 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, 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 — 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.
  • swarm-ui design guide — visual language, motion, theming, error-UX, and component-first principles for the swarm-level Preact app specifically (not this doc's dashboard/agent UIs). /components on a running swarm-ui is the companion living demo of every primitive it references.

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?" → terminal-rendering.md (full row taxonomy + dispatch walkthrough); for a high-level summary see web-ui/agent.md (Per-stream rendering).
  • "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).