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

2.0 KiB

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