Phase 3-C: Frontend Cost History Chart #48

New Issue

Open

opened 2026-05-24 16:55:18 -05:00 by null · 0 comments

null commented

2026-05-24 16:55:18 -05:00

Owner

Source plan: /home/kaspa/.claude/plans/with-our-backend-created-precious-owl.md

Feature context: Feature 3: Daily Cost Snapshot (Historical Trending)

Scope

Phase 3-C — Frontend

Summary

Add a line chart on the dashboard (or Claude sessions page) showing daily cost over the selected time range using Phase 3-B data.

Affected area

UI page: dashboard or /claude-code page
UI component: cost history chart

Affected files

frontend/src/components/claude/CostHistoryChart.tsx — new component (line chart)
frontend/src/lib/api/claude-code.ts — add getUsageHistory() API function
frontend/src/app/dashboard/page.tsx or frontend/src/app/claude-code/page.tsx — embed the chart

Affected routes or endpoints

Calls: GET /api/v1/claude-code/usage/history?range=...

Expected behavior

Line chart: x-axis = date, y-axis = USD cost
Range selector: 7d / 30d / 90d buttons
Tooltip on hover: date, cost, tokens, session count
If fewer than 2 data points, show an "Not enough data yet — check back tomorrow" empty state
Chart uses the same charting library already in the project (check existing dashboard charts)

Steps to reproduce (acceptance criteria)

After at least one snapshot exists, the chart renders on the page
Range selector changes the date range shown
Hover tooltip shows correct values
Empty state shown when no history exists yet

Source plan: `/home/kaspa/.claude/plans/with-our-backend-created-precious-owl.md` Feature context: **Feature 3: Daily Cost Snapshot (Historical Trending)** ## Scope ### Phase 3-C — Frontend #### Summary Add a line chart on the dashboard (or Claude sessions page) showing daily cost over the selected time range using Phase 3-B data. #### Affected area - UI page: dashboard or `/claude-code` page - UI component: cost history chart #### Affected files - `frontend/src/components/claude/CostHistoryChart.tsx` — new component (line chart) - `frontend/src/lib/api/claude-code.ts` — add `getUsageHistory()` API function - `frontend/src/app/dashboard/page.tsx` or `frontend/src/app/claude-code/page.tsx` — embed the chart #### Affected routes or endpoints - Calls: `GET /api/v1/claude-code/usage/history?range=...` #### Expected behavior - Line chart: x-axis = date, y-axis = USD cost - Range selector: 7d / 30d / 90d buttons - Tooltip on hover: date, cost, tokens, session count - If fewer than 2 data points, show an "Not enough data yet — check back tomorrow" empty state - Chart uses the same charting library already in the project (check existing dashboard charts) #### Steps to reproduce (acceptance criteria) 1. After at least one snapshot exists, the chart renders on the page 2. Range selector changes the date range shown 3. Hover tooltip shows correct values 4. Empty state shown when no history exists yet ---