(CODUX-228) Create Cost allocation breakdowns

[numnx]

🧩 Task: Create Cost allocation breakdowns

Automated task PR opened by Code UX for T05.

📋 Summary

Sprint: Sprint 228 · Stats Cost analytics · Task: T05

Add a trustworthy, accessible Cost analysis mode to Stats that exposes provenance-aware spend, averages, token and spend allocation, canonical per-sprint and per-task detail, model and execution-purpose breakdowns, and resilient navigation and refresh states across every existing Stats time range.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.6-sol

⏱️ Timing

Started	2026-07-14 01:54:24 UTC
Finished	2026-07-14 02:14:51 UTC
Duration	20m 26s

📊 Token Usage

Metric	Value
Input tokens	516,171
Cached input tokens	17,406,976
Output tokens	49,004
Total tokens	17,972,151
Invocations	3
Tool calls	193
Active time	38m 52s

Included usage estimate (subscription/local login): $11.60

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

📝 Full Task Prompt

## Objective
Build accessible Cost allocation graphics that explain what consumed tokens, where spend landed, and which models and execution purposes drove it.

## Scope
- Create `dashboard/src/v2/pages/stats/components/cost/CostAllocationPanels.tsx`
- Create `dashboard/src/v2/pages/stats/components/cost/CostAllocationPanels.module.css`
- Create `dashboard/src/v2/pages/stats/__tests__/CostAllocationPanels.test.tsx`
- Reuse Stats surface, token-flow, focus, and color primitives from `dashboard/src/v2/pages/stats/components/stats-ui-primitives.tsx`
- Consume allocation, model, and purpose types from `dashboard/src/v2/pages/stats/cost-insights.ts`

## Implementation Requirements
1. Render separate token and spend allocation graphics: token input/cached/output/reasoning lanes and spend input/output/cached/provider-reported lanes, each with exact values, percentages, visible legends, and textual summaries.
2. Render ranked model and execution-purpose breakdowns showing total cost, spend share, tokens, token share, calls, and cost per call while preserving distinct provider/model identities and human-readable purpose labels.
3. Bound dense breakdowns with a deterministic top-N plus `Other` aggregation or a progressive presentation so large model and purpose collections remain responsive without losing total reconciliation.
4. Use accessible chart semantics and redundant labels or patterns so meaning does not depend on hue; support keyboard scanning, narrow layouts, long labels, light/dark themes, and reduced motion.
5. Distinguish provider-reported spend from token-priced category spend and show explicit empty, unpriced, partial-coverage, and zero-total states.
6. Add focused tests for segment reconciliation, ranking and tie order, provider-reported remainder, top-N grouping, long labels, accessibility names, and all reduced-data states.

## Constraints
- Use the T03 view model as the calculation boundary; presentation code must not reinterpret missing coverage as zero cost.
- Do not introduce provider credentials, pricing settings controls, or links that expose internal model-pricing keys.
- Do not add third-party dependencies or modify existing Composition, Models, or Providers studios.
- Do not edit Stats shell or navigation files in this task.

## Verification
- Run `pnpm exec vitest run dashboard/src/v2/pages/stats/__tests__/CostAllocationPanels.test.tsx`.
- Run `pnpm run typecheck:dashboard`.
- Confirm every allocation has an exact textual equivalent, model and purpose totals reconcile to the snapshot, and unpriced usage remains visibly distinct from configured free usage.

🌿 Branch Info

Base: feature/CODUX-228-stats-cost-analytics
Head: task/feature-codux-22-t05-codex-e26951a1-mrjyeruv

---

🤖 Generated by Code UX