Files
boocode/openspec/changes/token-analyzer-ui/tasks.md
indifferentketchup c935687725 chore(openspec): drop 9 superseded proposals + 11 stub archive files
Drop 9 batch proposals that are superseded by the boocode-lift-analysis
(boocontext-audit, conductor upgrades, self-healing/verify-gate skills):
add-3tier-memory, import-llm-evaluator, import-pregel-engine, plugin-platform,
conductor-evolution, code-intelligence-upgrade, dev-workflow, ui-overhaul,
agent-reliability.

Delete 11 stub archive files (49-66B each, 'Status: Shipped. Archived.' only)
that provide zero documentation value over the existing CHANGELOG.md + git tags.
2026-06-07 22:15:38 +00:00

33 lines
2.0 KiB
Markdown

## 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