ccusage Dashboard

A visual analytics dashboard that combines:

• ccusage cost/token data (daily, monthly, per-model pricing)
• /stats-style metrics (heatmap, streaks, favorite model, session stats)

Just open it and see. No JSON exports, no drag-and-drop.

Quick Start

npm install
npm run dev
# Opens http://localhost:5174 — loads automatically

That's it. The app:

1. Starts a tiny Express server that reads ~/.claude/projects/ JSONL files directly
2. Runs npx ccusage@latest in the background for accurate cost data
3. Launches Vite for the frontend
4. Auto-loads everything when you open the page

First load takes ~15s while ccusage computes costs. After that, hit ↻ to refresh.

What You Get

Overview Tab

• GitHub-style activity heatmap (last 52 weeks)
• Sessions, active days, current streak, longest streak
• Favorite model, longest session, most active day
• Daily cost chart
• Model distribution with progress bars
• Token composition donut (input/output/cache)
• Hourly activity distribution

Tokens Tab

• Input / Output / Cache Create / Cache Read totals
• Stacked bar chart showing all 4 token types per day
• Full daily table matching ccusage's output format

Cost Tab

• Total spend, daily average, peak day, 7-day projection
• Cost over time area chart
• Cumulative cost curve
• Monthly table (if data available)

Architecture

npm run dev
  → starts Express on :5175 (API + ccusage runner + JSONL parser)
  → starts Vite on :5174 (React frontend, proxies /api to Express)

The Express server:

• Parses all .jsonl session files for stats (streaks, heatmap, models)
• Shells out to npx ccusage@latest --json for accurate cost/token data
• Serves everything via /api/all in one call

Requirements

• Node.js 18+
• ~/.claude/projects/ with Claude Code session files
• npx (for ccusage — auto-installed on first run)