@chorus/ui
The SvelteKit front-end for Chorus -- a real-time dashboard for monitoring Claude Code sessions. Connects to the Fastify server via Socket.IO and REST to display live session activity, streaming prompt output, git diffs, swarm agents, and worktree reviews.
Development
# Start the dev server (SvelteKit on :5173)
bun run dev
# Run tests
bun test src/lib/
# Production build (outputs to build/)
bun run build
# Preview the production build
bun run preview
The dev server expects the Fastify API server running on :3001. Start both together from the repo root with bun run dev.
Architecture
SPA mode -- SSR is disabled. @sveltejs/adapter-static builds to build/ with a 200.html fallback for client-side routing. In production, the Fastify server serves the built files at the same origin.
Five routes:
/-- Home page with session cards, event feed, and sparklines/session/[id]-- Session detail with tabbed diff, events, agents, reviews, architecture views, and a prompt panel/architecture-- Source tree and import graph visualization/settings-- Runtime settings (API keys, models, preferences)/craft-- Embedded crafting workbench (Minecraft-style agent composition UI)
WebSocket client (src/lib/ws.ts) maintains a live Socket.IO connection to the server. Auto-reconnects with exponential backoff (2s -> 30s) and batches incoming stream chunks per animation frame. All real-time state lives in decomposed stores (ws-stores.ts).
Component library -- 91 components in src/lib/components/, including 24 specialized SDK message renderers in sdk/ that render Agent SDK streaming output chunks.
Theming
14 built-in themes persisted to localStorage. Toggle via the theme picker in the header. Themes apply data-color-mode and data-theme attributes to <html>.
Available themes: GitHub Dark/Light, Gruvbox, Nord, Catppuccin Mocha, Dracula, Tokyo Night, Solarized, One Dark Pro, Rose Pine, and Auto (follows system preference).
Key Dependencies
| Package | Purpose |
|---|---|
@chorus/design-system |
Reusable UI primitives and design tokens |
@chorus/diff-panel |
Git diff viewing components |
@chorus/crafting |
Agent crafting workbench (embedded at /craft) |
@git-diff-view/svelte |
Syntax-highlighted diff viewer |
marked + DOMPurify |
Markdown rendering in chat/event views |
ansi_up |
ANSI escape code rendering for terminal output |
