joshsymonds Working on the Web UI
Read docs/web.md for the dashboard architecture, onboarding state machine, and component specs.
Verification
cd web && npm run check # TypeScript + Svelte checks
cd web && npm run lint # ESLint
cd web && npm run test # Component tests
Conventions
- SvelteKit conventions throughout. TypeScript strict mode.
- Component tests use mock WebSocket and mock API responses.
- Reactive stores (
$sources, MCP status) drive the UI — no explicit state machines.
Storybook
Storybook runs on port 6006. Start it before taking screenshots.
just storybook # Start Storybook (port 6006)
Story IDs follow the pattern category-component--story-name (lowercase, hyphens).
Screenshots
Custom Playwright-based tool at web/scripts/screenshot.ts. Output goes to web/screenshots/<story-id>.png.
cd web && npm run screenshot components-gamecard--watching # Single story
cd web && npm run screenshot:all # All stories
NixOS requirement: Uses system chromium via findChromium(). Do NOT use Playwright's bundled chromium — it won't work on NixOS due to dynamic linking. The findChromium() function auto-detects the system binary.
Key Paths
web/src/routes/ # SvelteKit pages
web/src/lib/ # Shared components, stores, utilities
web/scripts/screenshot.ts # Playwright screenshot tool
web/screenshots/ # Screenshot output directory
web/.storybook/ # Storybook config