## 1. Nav Button

- [ ] 1.1 Add "Token Analytics" button in `apps/web/src/components/ProjectSidebar.tsx` above the Settings button, using `BarChart3` icon from lucide-react, linking to `/analytics`
- [ ] 1.2 Add active route background styling matching the Settings button pattern
- [ ] 1.2 On mobile, close the sidebar drawer after navigation (same as Settings button behavior)

## 2. API Layer

- [ ] 2.1 Verify existing `GET /api/tools/cost_stats` endpoint returns adequate data for the per-tool breakdown section
- [ ] 2.2 Verify `GET /api/coder/sessions/:id/agent-sessions` returns `input_tokens`/`output_tokens`/`cost` fields
- [ ] 2.3 Add `GET /api/coder/analytics/summary` endpoint returning aggregate totals (total_input, total_output, total_cost, session_count) OR plan to aggregate on the client side from session list data
- [ ] 2.4 Add new API client methods in `apps/web/src/api/client.ts` for any new endpoints

## 3. Token Analytics Page

- [ ] 3.1 Create `apps/web/src/pages/Analytics.tsx` with summary cards section (total input/output tokens, total cost, sessions tracked) fetching from API
- [ ] 3.2 Add per-session token breakdown table reusing `AgentSessionInfo` type, with columns: session, agent, input tokens, output tokens, cost
- [ ] 3.3 Add per-tool cost breakdown table section reusing `ToolCostStat` type from `/api/tools/cost_stats`
- [ ] 3.4 Add token category breakdown section using CSS stacked bar for `token_breakdown` data where available
- [ ] 3.5 Add loading skeleton states and error handling with retry for each section independently
- [ ] 3.6 Add empty states for each section when data is not available

## 4. Routing

- [ ] 4.1 Register the `/analytics` route in `apps/web/src/App.tsx`
- [ ] 4.2 Verify navigation works from sidebar button and direct URL access

## 5. Verify

- [ ] 5.1 `pnpm typecheck` passes
- [ ] 5.2 `pnpm -F web build` passes
- [ ] 5.3 Visual: nav button renders correctly above Settings, analytics page loads with data, all sections handle loading/empty states