Miguel Palhas
b11784e8e3
Three more fixes from acceptance review: - structured.ts's header omitted the .sessions-btn attach.ts's terminal header carries. The sidebar is off-canvas on mobile, so a structured session had no way to reach it — add the same button and requestToggleDrawer wiring. - ConnectionPool.reconcileViews always remounted a repaired connection with focus:false. If the mistyped pane was the one actually focused, disposing it dropped DOM focus while `focusedId` still named it. Pass `focus: this.focusedId === id` instead — `focusedId` only ever names a real focus (multiview.ts skips setFocus while previewing), so a preview or a merely-visible split neighbour still comes back unfocused. - onMount's deferred requestAnimationFrame focus had no way to tell it had been superseded by an unmount (or a remount elsewhere) before it fired, so a parked pane could steal focus a frame later. A token bumped on every mount/unmount lets the callback recognize it's stale and no-op. Regression tests: 7 new (structured.test.ts, connections.test.ts). 495 tests total.
Maestro web UI
Browser UI for Maestro. The daemon embeds this bundle and serves it off its own
listener, so the page talks back to the same origin over /api/* — session
catalog, spawn/kill, and 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 daemon if needed.
Layout
src/
main.ts # entry point, hash-route dispatch
api.ts # daemon HTTP API client
events.ts # `/api/events` WebSocket subscriber
catalog.ts # session tree view (groups by working directory)
attach.ts # xterm.js + attach WS view
multiview.ts # tabs + split panes
spawnForm.ts # shared spawn form (preset tiles, project picker, worktree)
spawnModal.ts # dialog chrome around the spawn form
theme.ts # dark/light theme toggle + persistence
types.ts # mirror of `maestro-protocol` JSON shapes
styles.css # design-system tokens + component styles
mock.ts # DEV-only review fixture (see Design)
Design
The visual system (OKLCH token palette, monospace-first typography, dark+light
theming, motion, components) is documented in ../DESIGN.md;
the tokens live in the :root block of src/styles.css. Strategic intent
(register, brand, principles) is in ../PRODUCT.md. Theme
follows the OS by default and can be pinned via the header toggle (persisted in
localStorage).
mock.ts is a DEV-only fixture (stripped from production builds): visit the dev
server with ?mock to seed a representative catalog without a running daemon,
?mock&spawn to open the spawn modal, and ?theme=light|dark to pin a theme.
Routing is hash-based:
#/→ catalog#/attach/<session-id>→ terminal
This keeps the 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:7070
pnpm build # → dist/, embedded into the maestro binary at cargo build time
The Vite dev server proxies /api and the WebSockets to a local daemon.
Default is http://127.0.0.1:7070; point it elsewhere by exporting
MAESTRO_DAEMON_URL before pnpm dev:
MAESTRO_DAEMON_URL=http://laptop.lan:7070 pnpm dev
Production
pnpm build writes the bundle to web/dist/. Under its default web feature
the daemon embeds that directory at compile time and serves it from /,
alongside the /api/* routes. See
crates/maestro-daemon/src/static_bundle.rs.