Show all new runs in a clickable list

[williamthorsen]

Problem

The Factory sidebar uses cascading <select> dropdowns (Project → Ticket → Run) to navigate runs. This requires 3 clicks to reach a run and provides no at-a-glance view of all available runs or their statuses.

Proposed solution

Add a RunList component to the sidebar that shows all runs in a flat, scrollable list sorted by most recent. Each item displays a color-coded status indicator (CGA-16 palette), is clickable to select the run for viewing, and has a dismiss (×) button. A "Clear all" button dismisses all visible runs at once.

The fetchProjects call is lifted from RunSelector to App.tsx so both components share the same ProjectIndex data. RunSelector is refactored to accept the index as a prop.

Key considerations

• Dismiss state scope: Uses React useState (session-scoped). Dismissed runs reset on page refresh, matching "keep until manually removed" without cross-session persistence.
• Run key uniqueness: Runs are identified by projectSlug/runId composite key.
• RunSelector preserved: The existing cascading dropdowns remain alongside the new list. Their removal is deferred to a follow-up ticket.
• Status indicators: Unicode symbols with CGA-16 colors — ▶ cyan (in_progress), ✔ green (completed), ✘ red (failed), ⚠ yellow (needs_manual_review).

Acceptance criteria

• Sidebar displays a flat list of all runs below the RunSelector, sorted by startedAt descending
• Each run item shows: status indicator (color-coded), run ID, project slug / ticket ID
• Clicking a run item selects it (loads in StatusBar + GameCanvas)
• The currently selected run is visually highlighted (blue left border)
• Each run item has an × button that dismisses it from the list
• A "Clear all" button dismisses all visible runs
• Dismissed runs do not reappear until page refresh
• Long run IDs truncate with ellipsis
• Empty state shows "No runs" when all runs are dismissed
• All new code has tests; existing tests updated for refactored RunSelector
• Typecheck, lint, and tests pass

Files

New:

• packages/factory/src/shared/types/api.ts — FlatRunInfo type
• packages/factory/src/client/helpers/flatten-project-index.ts + tests
• packages/factory/src/client/hooks/useDismissedRuns.ts + tests
• packages/factory/src/client/components/RunList.tsx + CSS + tests

Modified:

• packages/factory/src/client/App.tsx — lift fetch, wire RunList
• packages/factory/src/client/components/RunSelector.tsx — accept index prop
• Test files for App and RunSelector

[williamthorsen]

Implementation plan

Approach

Add a RunList component to the sidebar below the existing RunSelector. The list shows all runs flattened from the ProjectIndex, sorted most-recent-first. Each item shows a color-coded status indicator, is clickable to select the run, and has an X button to dismiss. A "Clear all" button dismisses all visible runs. The RunSelector dropdowns remain for now (their removal is a future consideration per the issue).

To share the ProjectIndex between RunSelector and RunList, the fetchProjects call is lifted from RunSelector to App.tsx.

Implementation steps

Step 1: Add FlatRunInfo type

File: packages/factory/src/shared/types/api.ts

Add a denormalized run type that carries project/ticket context:

export interface FlatRunInfo {
  projectSlug: string;
  ticketId: string;
  runId: string;
  status: RunStatus;
  startedAt: string;
}

Step 2: Create flattenProjectIndex helper + tests

New: packages/factory/src/client/helpers/flatten-project-index.ts
New: packages/factory/src/client/helpers/__tests__/flatten-project-index.test.ts

Pure function: ProjectIndex → FlatRunInfo[], sorted by startedAt descending.

Tests: empty input, multiple projects/tickets, sort order.

Step 3: Create useDismissedRuns hook + tests

New: packages/factory/src/client/hooks/useDismissedRuns.ts
New: packages/factory/src/client/hooks/__tests__/useDismissedRuns.test.ts

Manages a Set<string> of dismissed run keys (projectSlug/runId). Returns { isDismissed, dismiss, dismissAll }. Uses useState (resets on page refresh, which matches the requirement "keep until manually removed").

Tests: initial state, dismiss one, dismiss all, idempotency.

Step 4: Create RunList component + CSS + tests

New: packages/factory/src/client/components/RunList.tsx
New: packages/factory/src/client/components/RunList.css
New: packages/factory/src/client/components/__tests__/RunList.test.tsx

Props:

• runs: FlatRunInfo[] — visible (non-dismissed) runs
• selectedRunKey: string | null — "projectSlug/runId" for highlight
• onSelectRun: (projectSlug: string, runId: string) => void
• onDismissRun: (key: string) => void
• onDismissAll: () => void

Each item shows:

• Status indicator (Unicode symbol, CGA-16 color): ▶ cyan (in_progress), ✔ green (completed), ✘ red (failed), ⚠ yellow (needs_manual_review)
• Run ID (white, truncated with ellipsis)
• projectSlug / ticketId as secondary meta (dark gray, smaller)
• Dismiss × button (gray, red on hover)
• Selected item: blue left border (#5555FF), dark blue-tinted background

Header: "Runs" label + "Clear all" button (shown when list is non-empty).
Empty state: "No runs" italic text.

Tests: renders items, click selects, X dismisses, Clear all calls callback, empty state, selected highlight, status indicators.

Step 5: Refactor RunSelector to accept index prop

Modify: packages/factory/src/client/components/RunSelector.tsx
Modify: packages/factory/src/client/components/__tests__/RunSelector.test.tsx

Changes to RunSelector:

• Add index: ProjectIndex | null to props
• Remove internal fetchProjects call and fetchError state
• Use the index prop directly

Changes to tests:

• Remove fetchProjects mock
• Pass index as a prop in all renders
• All behavioral tests remain the same

Step 6: Wire everything in App.tsx

Modify: packages/factory/src/client/App.tsx
Modify: packages/factory/src/client/__tests__/App.test.tsx

Changes to App.tsx:

• Add fetchProjects effect → useState<ProjectIndex | null>
• Add useDismissedRuns() hook
• Derive visibleRuns via flattenProjectIndex(index).filter(!isDismissed)
• Derive selectedRunKey from selectedProject/selectedRun
• Pass index to RunSelector
• Render <RunList> below <RunSelector> in the sidebar

Changes to App.test.tsx:

• Mock fetchProjects, useDismissedRuns, RunList
• Update RunSelector mock to accept index prop
• Add tests for RunList receiving correct props

Key files

File	Role
packages/factory/src/client/App.tsx	Central orchestration: lifts fetch, wires RunList
packages/factory/src/client/components/RunSelector.tsx	Refactored to accept index prop
packages/factory/src/client/components/RunList.tsx	New: flat run list component
packages/factory/src/shared/types/api.ts	New: FlatRunInfo type
packages/factory/src/client/helpers/flatten-project-index.ts	New: index-to-flat-list utility
packages/factory/src/client/hooks/useDismissedRuns.ts	New: dismissed-run state management
packages/factory/src/shared/constants/palette.ts	Reference: CGA-16 colors for status indicators
packages/factory/src/__test-helpers__/fixtures.ts	Reference: existing test fixture patterns

Reuse

• PALETTE from palette.ts — CSS colors for status indicators match the CGA-16 constants
• createMockRunStatus from fixtures.ts — pattern for test fixtures
• useSelectionParams — continues to be used by RunSelector for URL persistence
• Test patterns — vi.hoisted, vi.mock, within(container), CSS stub pattern from existing tests

Verification

1. pnpm run ws test — all new and modified tests pass
2. pnpm run ws typecheck — no type errors
3. pnpm run ws lint — no lint violations
4. pnpm run dev — visual verification:
   • Sidebar shows RunSelector dropdowns + RunList below
   • RunList displays all runs sorted by most recent
   • Clicking a run item loads it in StatusBar + GameCanvas
   • Status indicators show correct colors per run status
   • X button dismisses individual runs
   • "Clear all" dismisses all visible runs
   • Selected run is highlighted with blue left border
   • Long run IDs truncate with ellipsis
   • Sidebar scrolls when content overflows