claude-code-dashboard

A local dashboard for visualising your Claude Code token usage, costs, and efficiency. One command, zero setup — reads directly from ~/.claude/projects/ on your machine.

npx claude-code-dashboard

Opens at http://localhost:3456.

What it shows

Usage & cost

• Token breakdown by type: input, cache writes, cache reads, output
• API-equivalent cost estimates per model (Opus, Sonnet, Haiku)
• Monthly and daily summaries with avg daily cost and cache hit %
• Statistical spread of daily cost: median, P95, max, and spike ratio

Efficiency insights

• Cache efficiency trend over time (cache reads cost 10× less than fresh input)
• Token composition per model — how much of each model's usage is input vs cache vs output
• Session length distribution — spot conversations that are running too long
• 5-hour rolling usage windows, matching Claude Code's own reset cycle

Patterns

• Activity heatmap (GitHub-style)
• Hour-of-day and day-of-week punchcard
• This week vs last week comparison
• Top projects over time (stacked by week)

Insights panel

• Automatically flagged issues: vague prompts, context bloat, model mismatches
• Week-over-week trend alert
• Rate limit event detection

Usage vs Allowance

• Session (5-hour) and weekly budget gauges
• Calibrate to match Claude's own usage-limits panel
• Plan presets: Pro, Team, Max 5×, Max 20×

Options

| Flag | Default | Description | |------|---------|-------------| | --port <n> | 3456 | Port to listen on | | --no-open | — | Don't auto-open browser |

Data privacy

All data is processed locally. Nothing is sent to any server — the dashboard reads your ~/.claude/ directory and serves it only to your browser.

Requirements

• Node.js 18+
• Claude Code installed and used at least once (generates ~/.claude/projects/)

Credits

Forked from claude-spend by Aniket Parihar, extended with additional analytics inspired by claude-code-usage-analyzer and Claude-Code-Usage-Monitor.

License

MIT