Complete implementation of 7 slices addressing E2E testing gaps:
Slice 0+1: Wire Actions + ReasonPrompt
- FocusView now uses useActions hook instead of direct act() calls
- Added pendingAction state pattern for skip/defer/complete actions
- ReasonPrompt integration with proper confirm/cancel flow
- Tags support in DecisionEntry interface
Slice 2: Drag Reorder UI
- Installed @dnd-kit (core, sortable, utilities)
- QueueView with DndContext, SortableContext, verticalListSortingStrategy
- SortableQueueItem wrapper component using useSortable hook
- pendingReorder state with ReasonPrompt for reorder reasons
- Cmd+Up/Down keyboard shortcuts for accessibility
- Fixed: Store item ID in PendingReorder to avoid stale queue reference
Slice 3: System Tray Integration
- tray.rs with TrayState, setup_tray, toggle_window_visibility
- Menu with Show/Quit items
- Left-click toggles window visibility
- update_tray_badge command updates tooltip with item count
- Frontend wiring in AppShell
Slice 4: E2E Test Updates
- Fixed test selectors for InboxView, Queue badge
- Exposed inbox store for test seeding
Slice 5: Staleness Visualization
- Already implemented in computeStaleness() with tests
Slice 6: Quick Wiring
- onStartBatch callback wired to QueueView
- SyncStatus rendered in nav area
- SettingsView renders Settings component
Slice 7: State Persistence
- settings-store with hydrate/update methods
- Tauri backend integration via read_settings/write_settings
- AppShell hydrates settings on mount
Bug fixes from code review:
- close_bead now has error isolation (try/catch) so decision logging
and queue advancement continue even if bead close fails
- PendingReorder stores item ID to avoid stale queue reference
E2E tests for all ACs (tests/e2e/followup-acs.spec.ts):
- AC-F1: Drag reorder (4 tests)
- AC-F2: ReasonPrompt integration (7 tests)
- AC-F5: Staleness visualization (3 tests)
- AC-F6: Batch mode (2 tests)
- AC-F7: SyncStatus (2 tests)
- ReasonPrompt behavior (3 tests)
Tests: 388 frontend + 119 Rust + 32 E2E all passing
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Complete frontend implementation for Mission Control's core workflow:
surface THE ONE THING and let the user act on it.
Layout (AppShell.tsx):
- Tab navigation: Focus | Queue | Inbox
- View switching with AnimatePresence transitions
- Global shortcut event listener for quick capture
- Batch mode overlay when active
Focus View (FocusView.tsx, FocusCard.tsx):
- Prominent display of THE ONE THING
- Type badge with staleness coloring (fresh/normal/amber/urgent)
- Context quote and requestedBy for reviews
- Action buttons: Start (Enter), 1h (Cmd+1), Tomorrow (Cmd+2), Skip (Cmd+S)
- Empty state: "All Clear" when queue is empty
Queue View (QueueView.tsx, QueueItem.tsx, QueueSummary.tsx):
- List view of all items with reordering capability
- Click to set as focus (promotes to THE ONE THING)
- Summary shows counts by type
- Links back to Focus view
Quick Capture (QuickCapture.tsx):
- Modal overlay triggered by Cmd+Shift+C
- Creates new bead via quick_capture command
- Shows success/error feedback
Batch Mode (BatchMode.tsx):
- Full-screen overlay for rapid item processing
- Progress indicator: 3/10 DONE
- Same action buttons as FocusCard
- Exit returns to regular Focus view
App entry updates:
- App.tsx now renders AppShell
- main.tsx unchanged (React 19 + StrictMode)
- Tailwind config adds MC-specific colors
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
