# Tasks

## Task 1 — Page component (`pages/Results.tsx`) (600–800 lines)

1.1 `useFetch` hook (reuse pattern from `Analytics.tsx`) to load runs and battles independently.
1.2 Tab bar: "Analysis Runs" | "Arena Battles" — styled as pill tabs below the page header.
1.3 **Analysis Runs tab**: calls `api.runs.list(projectId)`, renders a table with columns: Status (dot), Flow Name, Band, Model, Created, Duration, Actions (View Report when completed). Clicking "View Report" opens a detail panel at the bottom showing the report text.
1.4 **Arena Battles tab**: calls `api.battles.list(projectId)`, renders a table with columns: Status (dot), Battle Type, Prompt (truncated), Contestants (count), Winner (if decided), Created, Actions (View Analysis when completed). Clicking "View Analysis" opens the analysis text.
1.5 Project selector: if no project context, show a simple dropdown to pick from available projects.
1.6 Skeleton loading states, error states with retry, and empty states per tab.
1.7 Summary strip above the tabs showing: Total Runs, Completed Runs, Total Battles, Completed Battles.

## Task 2 — Sidebar nav button (`ProjectSidebar.tsx`)

2.1 Add a "Results" nav button above the existing "Token Analytics" button.
2.2 Use `ScrollText` icon from `lucide-react`.
2.3 Follow the same `NavLink` pattern as the Token Analytics button.

## Task 3 — Route registration (`App.tsx`)

3.1 Import `Results` from `@/pages/Results`.
3.2 Add `<Route path="/results" element={<Results />} />` next to the `/analytics` route.

## Task 4 — Verify

4.1 `lsp_diagnostics` clean on all changed files.
4.2 Build passes: `pnpm -C apps/web build` (type-check + vite build).