I thought token consumption grew exponentially based on conversation size.
I was wrong. Growth is linear.
After 10 days away from my laptop, I decided to build something new on the last day of the year: an open-source dashboard with usage metrics for Claude Code.
It works completely offline, based on files it saves to your computer.
Demo video:
What does it measure?
It doesn't analyze content, only quantity, volume, and time, across these domains: projects, sessions, messages, and tokens (input, output, and cache).
- Token usage per session/folder (input and output)
- Sorted by: token count, recency, or messages
- Peak activity hours
- Based on messages, tokens, or sessions
- Estimated cost (if I used API Key billing instead of subscription)
Why is it useful?
Maybe it isn't, but I like pretty graphs and real-time updates.
Since the data was already there, I decided to build it out of curiosity. I used my favorite stack: Bun, TypeScript, and React.
I'll keep using Claude Code, so the numbers should go up. Big numbers = pretty graphs = happy person.
It also serves as a personal usage analysis of the tool, and fits my motto for new projects in 2026:
Build something useful for myself, then distribute it. If it's not useful to me, don't build it.
How does it work?
Bun is all you need
Bun -> Chokidar -> Watch -> Disk
When running the src/server/index.ts file, we register a new watcher (file observer) with Chokidar on Claude Code's global folder ($HOME/.claude), watching these files:
stats-cache.jsonprojects/**/**.jsonlhistory.jsonl
The library allows registering a callback function that runs when any of these files change. Under the hood, it uses the fsevents SYSCALL on macOS and inotify on Linux (I don't know how it works on Windows, but the library is cross-platform).
Besides the watcher, we also start a web server with Bun.serve on port 3190 with some endpoints:
/ws-> Bun's native WebSocket server (for real-time FE <-> BE communication)/-> Static route serving../client/index.html(React app)/api/{utils}and/health-> Useful API endpoints
Bun -> WebSocket -> React
As soon as the notification reaches Bun, it reads all files and builds a massive object with the information needed for the dashboard (yes, extremely inefficient, but there's an explanation). This object is sent to the React app, which updates the graphs.
How was it built?
A mix of Vibe Coding and Vibe Engineering.
I didn't write a single line of code by hand, which explains the inefficient data transmission architecture and likely quality issues (like the React app living inside a single index.html file). But the project's focus wasn't quality—it was building something functional as fast as possible.
Since I'm on vacation this holiday season, I spent ~10 days without turning on my computer and took 3.5 hours today to finish the app and write this post.
The first commit was made on 12/20/2025, but it sat idle since then.
I noticed that on 12/21, someone released a Claude Code Wrapped following a similar approach, but I decided to finish my version anyway.
Conclusions
If I wasn't paying the Claude Code monthly plan ($20 or $100), I would have spent almost $2000 on my personal projects (since this is my personal computer).
Good thing the CLI uses a solid caching strategy, otherwise costs would be much higher.
If you know someone using API Token billing with Claude Code, urgently warn them they're burning money.
It's MUCH more worth it to pay for 2 plans on different accounts and switch between them (using /login) when one hits its limit.
Never opt for per-token billing—it's just way too expensive.
With that, I'll wrap up here. Cheers and happy new year!
Oh, if you want to learn more about using Claude Code, I wrote a complete guide: Claude Code Setup