Set up comprehensive testing infrastructure for both unit and E2E tests:
Unit Testing (Vitest):
- vitest.config.ts: jsdom environment, globals enabled
- Path alias @tauri-apps/api -> tests/mocks/tauri-api.ts
- Excludes tests/e2e/** to prevent Playwright collision
- V8 coverage configured for src/**/*.{ts,tsx}
- tests/setup.ts: @testing-library/jest-dom matchers
Tauri API Mocking:
- tests/mocks/tauri-api.ts: Mock implementation of @tauri-apps/api
- invoke(): Returns configurable mock responses
- listen()/emit(): Event system stubs
- setMockResponse()/resetMocks(): Test helpers
- Enables testing React components without Tauri runtime
Component Tests:
- tests/components/App.test.tsx: Verifies App shell renders
- "Mission Control" heading
- "What should you be doing right now?" tagline
- "THE ONE THING will appear here" placeholder
E2E Testing (Playwright):
- playwright.config.ts: Chromium + WebKit (Tauri uses WebKit on macOS)
- Runs Vite dev server before tests
- HTML reporter, trace on retry
- tests/e2e/app.spec.ts: Smoke tests for deployed app
- Heading visible, tagline visible, dark mode applied
This dual-layer testing strategy (Vitest for speed, Playwright for
integration) follows the testing trophy: many unit, fewer E2E.
Implement the data layer with mockable CLI wrappers for testability:
CLI Traits (data/*.rs):
- LoreCli: Trait for lore --robot commands (get_me, health_check)
- BeadsCli: Trait for br commands (create, close, list)
- Both use #[automock] for unit testing without real CLI
Real Implementations:
- RealLoreCli: Shells to 'lore --robot me', parses JSON response
- RealBeadsCli: Shells to 'br create/close/list --json'
Type Definitions:
- LoreMeResponse: Full response from 'lore --robot me'
- open_issues, open_mrs_authored, reviewing_mrs, activity
- since_last_check with EventGroup for inbox functionality
- All fields use #[serde(default)] for forward compatibility
- Bead: Task from br list (id, title, status, priority, issue_type)
Local State Management (data/state.rs):
- GitLabBeadMap: Deduplication mapping (GitLab event -> bead ID)
- MappedBead: Tracks miss_count for two-strike orphan detection
- DecisionLog: Append-only JSONL for learning from user choices
- Atomic writes via .tmp files + rename pattern
Tauri Commands (commands/mod.rs):
- greet: Placeholder for IPC testing
- get_lore_status: Exposes lore health to frontend
This establishes the CLI-over-library pattern from PLAN.md:
clean boundaries, no schema coupling, full testability via mocks.
Create the minimal React application structure for Mission Control:
Entry Points:
- index.html: Dark mode root (class="dark", bg-surface body)
- src/main.tsx: React 19 createRoot with StrictMode
Application Shell:
- src/App.tsx: Initial landing with "THE ONE THING" placeholder
- Uses Framer Motion for subtle fade-in animation
- Centered layout with Mission Control branding
- Surfaces the core UX principle: "What should you be doing right now?"
Styling:
- src/styles.css: Tailwind directives + custom scrollbar styling
- Dark scrollbars (zinc-700 thumb, transparent track)
- .no-select utility for draggable elements
The shell is deliberately minimal - it will evolve as beads integration
(bd-28q) and dashboard components (bd-30f) are implemented.
- PLAN.md: Complete implementation plan with architecture, ACs, phases
- CLAUDE.md: Project context for AI agents
Architecture: Tauri + React, beads as universal work graph,
manual-first priority with rich decision logging.
