naps62-yoloandClaude Opus 4.7
e68c9b6d73
NAP-218. Browser UI for the prototype: catalog tree derived from `metadata.label`, live updates over `WS /api/events`, search across session name+label, spawn modal (with optional git worktree), and an attach view that opens the daemon's per-session WS for xterm.js. Framework choice: vanilla TypeScript. The interactivity surface is small enough that pulling in a framework wouldn't pay back; xterm.js does the heavy lifting. Easy to swap later without protocol impact. Hash-based routing (`#/`, `#/attach/<id>`) keeps the registry's static surface dumb — no SPA fallback needed; concurrent attaches work by opening the same hash URL in another tab. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1.8 KiB
maestro-web
Browser UI for Maestro. Connects to the registry HTTP/WS API for the catalog and to individual daemons (via direct WebSocket) for terminal I/O.
Framework choice: vanilla TypeScript
No frontend framework. The UI is small enough that the cost of pulling in Preact / Solid / Leptos doesn't pay back. xterm.js does all the heavy rendering; everything else is a session tree and a spawn form, both trivial in plain DOM.
This decision is non-architectural — swap in a framework later without touching the registry or daemon if needed.
Layout
src/
main.ts # entry point, hash-route dispatch
api.ts # registry HTTP API client
events.ts # `/api/events` WebSocket subscriber
catalog.ts # session tree view (groups by metadata.label)
attach.ts # xterm.js + daemon WS attach view
spawn.ts # spawn-session modal
types.ts # mirror of `maestro-protocol` JSON shapes
styles.css # mobile-first base styles
Routing is hash-based:
#/→ catalog#/attach/<session-id>→ terminal
This keeps the registry's static handler dumb (no SPA fallback needed).
Concurrent attaches: open the same #/attach/<id> URL in another tab.
Dev
pnpm install
pnpm dev # http://localhost:5173, proxies /api → http://127.0.0.1:8080
pnpm build # → dist/, embedded into the registry binary at cargo build time
The Vite dev server proxies /api and the events WebSocket to a locally
running maestro-registry (default 127.0.0.1:8080). Direct daemon WS
connections (for attach) bypass the proxy and use the URL returned by
GET /api/sessions/:id/connect-info.
Production
pnpm build writes the bundle to web/dist/. The Rust registry crate
embeds that directory via rust-embed at compile time and serves it from
/. See crates/maestro-registry/src/web_assets.rs.