theirongolddev/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(followup): implement PLAN-FOLLOWUP.md gap fixes

Browse Source 
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>
This commit is contained in:
teernisse
2026-02-26 11:26:42 -05:00
parent 5078cb506a
commit f5ce8a9091
44 changed files with 5268 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
tests/components/AppShell.test.tsx
View File

@@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, act } from "@testing-library/react";
import { render, screen, act, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AppShell } from "@/components/AppShell";
@@ -7,7 +7,7 @@ import { useNavStore } from "@/stores/nav-store";
import { useFocusStore } from "@/stores/focus-store";
import { useCaptureStore } from "@/stores/capture-store";
import { useInboxStore } from "@/stores/inbox-store";
import { simulateEvent, resetMocks } from "../mocks/tauri-api";
import { simulateEvent, resetMocks, setMockResponse } from "../mocks/tauri-api";
import { makeFocusItem } from "../helpers/fixtures";
function renderWithProviders(ui: React.ReactElement) {
@@ -97,7 +97,8 @@ describe("AppShell", () => {
renderWithProviders(<AppShell />);
act(() => {
simulateEvent("global-shortcut-triggered", "quick-capture");
// Typed event: GlobalShortcutTriggered has payload { shortcut: string }
simulateEvent("global-shortcut-triggered", { shortcut: "quick-capture" });
});
expect(useCaptureStore.getState().isOpen).toBe(true);
@@ -130,4 +131,76 @@ describe("AppShell", () => {
expect(useFocusStore.getState().current?.id).toBe("target");
expect(useNavStore.getState().activeView).toBe("focus");
});
it("populates focus store with lore items on mount", async () => {
const mockLoreItemsResponse = {
items: [
{
id: "mr_review:group::repo:200",
title: "Review this MR",
item_type: "mr_review",
project: "group/repo",
url: "https://gitlab.com/group/repo/-/merge_requests/200",
iid: 200,
updated_at: "2026-02-26T10:00:00Z",
requested_by: "alice",
},
{
id: "issue:group::repo:42",
title: "Fix the bug",
item_type: "issue",
project: "group/repo",
url: "https://gitlab.com/group/repo/-/issues/42",
iid: 42,
updated_at: "2026-02-26T09:00:00Z",
requested_by: null,
},
],
success: true,
error: null,
};
setMockResponse("get_lore_items", mockLoreItemsResponse);
renderWithProviders(<AppShell />);
// Wait for the focus store to be populated with lore items
await waitFor(() => {
const state = useFocusStore.getState();
expect(state.current !== null || state.queue.length > 0).toBe(true);
});
// Verify the items were transformed and stored
const state = useFocusStore.getState();
const allItems = state.current ? [state.current, ...state.queue] : state.queue;
expect(allItems.length).toBe(2);
expect(allItems[0].id).toBe("mr_review:group::repo:200");
expect(allItems[0].type).toBe("mr_review");
});
it("clears focus store when lore returns empty items", async () => {
// Start with existing items in the store (simulating stale data)
useFocusStore.setState({
current: makeFocusItem({ id: "stale-item", title: "Stale Item" }),
queue: [makeFocusItem({ id: "stale-queue", title: "Stale Queue Item" })],
});
// Lore now returns empty (user cleared their GitLab queue)
const mockEmptyResponse = {
items: [],
success: true,
error: null,
};
setMockResponse("get_lore_items", mockEmptyResponse);
renderWithProviders(<AppShell />);
// Wait for the store to be cleared
await waitFor(() => {
const state = useFocusStore.getState();
expect(state.current).toBeNull();
expect(state.queue.length).toBe(0);
});
});
});

6
tests/components/DebugView.test.tsx
View File

@@ -108,7 +108,7 @@ describe("DebugView", () => {
expect(screen.getByTestId("health-indicator")).toHaveClass("bg-red-500");
});
it("displays last sync time when available", async () => {
it("displays 'data since' timestamp when available", async () => {
const mockStatus = {
last_sync: "2026-02-26T12:00:00Z",
is_healthy: true,
@@ -128,7 +128,7 @@ describe("DebugView", () => {
expect(syncTimeElements.length).toBeGreaterThan(0);
});
it("shows 'never' when last_sync is null", async () => {
it("shows 'all time' when last_sync is null", async () => {
const mockStatus = {
last_sync: null,
is_healthy: false,
@@ -143,6 +143,6 @@ describe("DebugView", () => {
expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
});
expect(screen.getByText(/never/i)).toBeInTheDocument();
expect(screen.getByText(/all time/i)).toBeInTheDocument();
});
});

239
tests/components/FocusView.test.tsx
View File

@@ -5,22 +5,43 @@
* 1. Shows FocusCard when focus is set
* 2. Shows empty state when no focus and no items
* 3. Shows suggestion when no focus but items exist
* 4. Auto-advances to next item after complete
* 4. Auto-advances to next item after start
* 5. Shows celebration on last item complete
* 6. Skip/Defer/Complete trigger ReasonPrompt before action
* 7. ReasonPrompt can be cancelled with Escape
* 8. Confirm with reason logs decision via useActions
*/
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { FocusView } from "@/components/FocusView";
import { useFocusStore } from "@/stores/focus-store";
import { makeFocusItem } from "../helpers/fixtures";
// Mock the shell plugin for URL opening - must return Promise
// Mock the shell plugin for URL opening
vi.mock("@tauri-apps/plugin-shell", () => ({
open: vi.fn(() => Promise.resolve()),
}));
// Mock Tauri invoke -- useActions calls invoke for log_decision, update_item, close_bead
const mockInvoke = vi.fn(() => Promise.resolve());
vi.mock("@tauri-apps/api/core", () => ({
invoke: (...args: unknown[]) => mockInvoke(...args),
}));
function renderWithProviders(ui: React.ReactElement) {
const queryClient = new QueryClient({
defaultOptions: {
queries: { retry: false },
},
});
return render(
<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
);
}
describe("FocusView", () => {
beforeEach(() => {
localStorage.clear();
@@ -30,6 +51,7 @@ describe("FocusView", () => {
isLoading: false,
error: null,
});
mockInvoke.mockResolvedValue(undefined);
});
afterEach(() => {
@@ -41,7 +63,7 @@ describe("FocusView", () => {
const item = makeFocusItem({ id: "1", title: "Test Item" });
useFocusStore.setState({ current: item, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText("Test Item")).toBeInTheDocument();
expect(screen.getByRole("button", { name: /start/i })).toBeInTheDocument();
@@ -52,7 +74,7 @@ describe("FocusView", () => {
const queued = makeFocusItem({ id: "2", title: "Queued", type: "issue" });
useFocusStore.setState({ current, queue: [queued] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/Queue:/)).toBeInTheDocument();
expect(screen.getByText(/1 issue/)).toBeInTheDocument();
@@ -63,7 +85,7 @@ describe("FocusView", () => {
it("shows empty state when no focus and no items", () => {
useFocusStore.setState({ current: null, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/all clear/i)).toBeInTheDocument();
expect(screen.getByText(/nothing needs your attention/i)).toBeInTheDocument();
@@ -72,7 +94,7 @@ describe("FocusView", () => {
it("shows celebration message in empty state", () => {
useFocusStore.setState({ current: null, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/nice work/i)).toBeInTheDocument();
});
@@ -83,7 +105,7 @@ describe("FocusView", () => {
const item = makeFocusItem({ id: "1", title: "Suggested Item" });
useFocusStore.setState({ current: null, queue: [item] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Should show the item as a suggestion
expect(screen.getByText("Suggested Item")).toBeInTheDocument();
@@ -98,7 +120,7 @@ describe("FocusView", () => {
const item = makeFocusItem({ id: "1", title: "Suggested Item" });
useFocusStore.setState({ current: null, queue: [item] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Click the set as focus button
await user.click(screen.getByRole("button", { name: /set as focus|start/i }));
@@ -109,36 +131,48 @@ describe("FocusView", () => {
});
describe("auto-advance behavior", () => {
it("auto-advances to next item after complete", async () => {
it("auto-advances to next item after start", async () => {
const user = userEvent.setup();
const item1 = makeFocusItem({ id: "1", title: "First Item" });
const item2 = makeFocusItem({ id: "2", title: "Second Item" });
useFocusStore.setState({ current: item1, queue: [item2] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Complete current focus by clicking start (which advances)
// Start does not trigger ReasonPrompt -- it goes straight through
await user.click(screen.getByRole("button", { name: /start/i }));
// Should show next item
// Should log decision via invoke
await waitFor(() => {
expect(screen.getByText("Second Item")).toBeInTheDocument();
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "start",
bead_id: "1",
}),
})
);
});
});
it("shows empty state after last item complete", async () => {
it("shows empty state after last item start", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Only Item" });
useFocusStore.setState({ current: item, queue: [] });
render(<FocusView />);
renderWithProviders(<FocusView />);
// Complete the only item
// Start the only item (no ReasonPrompt for start)
await user.click(screen.getByRole("button", { name: /start/i }));
// Should show empty/celebration state
// log_decision is called asynchronously; start doesn't advance the queue
// (start opens URL + logs, but doesn't call act to advance)
await waitFor(() => {
expect(screen.getByText(/all clear/i)).toBeInTheDocument();
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.anything()
);
});
});
});
@@ -164,7 +198,7 @@ describe("FocusView", () => {
it("shows loading state", () => {
useFocusStore.setState({ isLoading: true });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText(/loading/i)).toBeInTheDocument();
});
@@ -172,52 +206,171 @@ describe("FocusView", () => {
it("shows error state", () => {
useFocusStore.setState({ error: "Something went wrong" });
render(<FocusView />);
renderWithProviders(<FocusView />);
expect(screen.getByText("Something went wrong")).toBeInTheDocument();
});
});
describe("action handlers", () => {
it("calls act with start action when Start is clicked", async () => {
describe("ReasonPrompt wiring", () => {
it("AC-F2.1: Skip action triggers ReasonPrompt with 'Skipping: [title]'", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Test" });
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
// Create a mock act function to track calls
const mockAct = vi.fn((_action: string, _reason?: string) => null);
useFocusStore.setState({ current: item, queue: [], act: mockAct });
renderWithProviders(<FocusView />);
// Button accessible name includes shortcut text: "SkipCmd+S"
await user.click(screen.getByRole("button", { name: /^Skip/i }));
render(<FocusView />);
await user.click(screen.getByRole("button", { name: /start/i }));
// act is called with "start" action
expect(mockAct).toHaveBeenCalledWith("start");
// ReasonPrompt should appear with the action and title
expect(screen.getByRole("dialog")).toBeInTheDocument();
expect(screen.getByText(/skipping/i)).toBeInTheDocument();
// Title appears in both FocusCard and ReasonPrompt -- check within dialog
const dialog = screen.getByRole("dialog");
expect(dialog).toHaveTextContent("Fix auth bug");
});
it("calls act with defer_1h action when 1 hour is clicked", async () => {
it("AC-F2.5: 'Skip reason' proceeds with reason=null", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Test" });
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
const mockAct = vi.fn((_action: string, _reason?: string) => null);
useFocusStore.setState({ current: item, queue: [], act: mockAct });
renderWithProviders(<FocusView />);
render(<FocusView />);
// Trigger skip to open ReasonPrompt (button name includes shortcut)
await user.click(screen.getByRole("button", { name: /^Skip/ }));
// Click "Skip reason" button in the prompt
await user.click(screen.getByRole("button", { name: /skip reason/i }));
// Should have called update_item and log_decision via useActions
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "skip",
bead_id: "1",
reason: null,
}),
})
);
});
// ReasonPrompt should be gone
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});
it("AC-F2.7: Escape cancels prompt", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
renderWithProviders(<FocusView />);
// Trigger skip to open ReasonPrompt (button name includes shortcut)
await user.click(screen.getByRole("button", { name: /^Skip/ }));
expect(screen.getByRole("dialog")).toBeInTheDocument();
// Press Escape
await user.keyboard("{Escape}");
// ReasonPrompt should be dismissed
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
// No backend calls should have been made
expect(mockInvoke).not.toHaveBeenCalled();
});
it("AC-F2.8: Confirm logs decision with reason and tags", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Fix auth bug" });
useFocusStore.setState({ current: item, queue: [] });
renderWithProviders(<FocusView />);
// Trigger skip to open ReasonPrompt (button name includes shortcut)
await user.click(screen.getByRole("button", { name: /^Skip/ }));
// Type a reason
const textarea = screen.getByRole("textbox");
await user.type(textarea, "Need more context from Sarah");
// Select a tag
await user.click(screen.getByRole("button", { name: /blocking/i }));
// Click Confirm
await user.click(screen.getByRole("button", { name: /confirm/i }));
// Should have logged with reason and tags
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "skip",
bead_id: "1",
reason: "Need more context from Sarah",
tags: ["blocking"],
}),
})
);
});
});
it("Defer 1h triggers ReasonPrompt then calls defer action", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Review MR" });
useFocusStore.setState({ current: item, queue: [] });
renderWithProviders(<FocusView />);
// Trigger defer 1h
await user.click(screen.getByRole("button", { name: /1 hour/i }));
expect(mockAct).toHaveBeenCalledWith("defer_1h");
// ReasonPrompt should appear with defer action
expect(screen.getByRole("dialog")).toBeInTheDocument();
expect(screen.getByText(/deferring/i)).toBeInTheDocument();
// Skip reason to confirm quickly
await user.click(screen.getByRole("button", { name: /skip reason/i }));
// Should have called update_item with snooze time
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"update_item",
expect.objectContaining({
id: "1",
updates: expect.objectContaining({
snoozed_until: expect.any(String),
}),
})
);
});
});
it("calls act with skip action when Skip is clicked", async () => {
it("Start does NOT trigger ReasonPrompt", async () => {
const user = userEvent.setup();
const item = makeFocusItem({ id: "1", title: "Test" });
useFocusStore.setState({ current: item, queue: [] });
const mockAct = vi.fn((_action: string, _reason?: string) => null);
useFocusStore.setState({ current: item, queue: [], act: mockAct });
renderWithProviders(<FocusView />);
await user.click(screen.getByRole("button", { name: /start/i }));
render(<FocusView />);
await user.click(screen.getByRole("button", { name: /skip/i }));
// No dialog should appear
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
expect(mockAct).toHaveBeenCalledWith("skip");
// But log_decision should be called directly
await waitFor(() => {
expect(mockInvoke).toHaveBeenCalledWith(
"log_decision",
expect.objectContaining({
entry: expect.objectContaining({
action: "start",
}),
})
);
});
});
});
});