Token-usage dashboard for Claude Code
Personal project
Problem
I had no visibility into how many tokens I consumed in Claude Code, nor how usage was distributed across projects and over time.
Impact
Clear visibility into consumption, parsing the local JSONL files with no dependency on any external service.
- Next.js
- React
- TypeScript
- Recharts
- Tailwind CSS
The problem
Claude Code leaves its usage records in local JSONL files, but with no view that summarizes them. I wanted to understand how many tokens I consume, across which projects, and how it trends over time — without uploading anything to an external service.
The architecture
- Next.js (App Router) with Server Components by default.
- A JSONL parser that walks the local logs (
~/.claude/projects/**/*.jsonl) and aggregates them by project, day and session. - Recharts visualization: time series and per-project breakdowns.
- Tailwind CSS for a clean, fast UI.
Key decisions
- Pure TypeScript parser, no Python: the environment had no Python installed, so parsing was solved entirely in TS — one dependency fewer.
- Server Components for parsing: the heavy file reading happens on the server; only what the charts need reaches the client.
Impact
A tool of my own that turns raw logs into actionable insight about my usage — and a clean example of solving a real problem end to end with the stack I know best.