DEV Community

Cover image for I had no idea how many tokens I was burning in Claude Code — so I built a dashboard
notenki
notenki

Posted on • Edited on

I had no idea how many tokens I was burning in Claude Code — so I built a dashboard

The problem

I've been using Claude Code heavily for the past few months.
But I had absolutely no idea how many tokens I was actually burning — or where.

No visibility. No breakdown. Just vibes.

What I found

Turns out, all the data is sitting right there on your machine:

~/.claude/projects/

Every session is logged as a JSONL file with full token counts —
input, output, cache reads, cache creation.

Nobody told me this existed.

What I built

A simple Next.js dashboard that reads those files locally and shows:

  • Token usage per project
  • Daily usage chart
  • Cache read ratio

When I ran it on my own data, I discovered my cache read ratio was 95.8%.
I had no idea that was happening on every single turn.

My heaviest day: 340,000 tokens in a single day on one project.
I had no memory of it being that intense.

The insight

This isn't just about cost.

It's about visibility.

When you can't see what's happening, you can't improve it.
The data was always there — I just couldn't see it.

Try it yourself

Install and run:

npm install -g @notenkidev/claude-token-dashboard
claude-token-dashboard
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 — your Claude Code token data loads automatically.

Or clone it: https://github.com/notenkitoclient-cpu/claude-token-dashboard

Updates

v2 — Cost in dollars

Added estimated cost per project in USD (claude-sonnet-4-6 pricing).

My own numbers:

  • Total: $265 since March
  • Top project: $92.63 (35% of all spend)
  • Cache read ratio: 95.9%

A percentage is interesting. A dollar figure makes you act.

v3 — CLAUDE.md size visibility

Each CLAUDE.md is re-sent every turn.
Added a column showing file size per project.
Projects over 5KB get a warning.

Now you can see exactly which configs are silently taxing every prompt.


Install the latest version:

npm install -g @notenkidev/claude-token-dashboard
claude-token-dashboard
Enter fullscreen mode Exit fullscreen mode

Updates — v0.1.16 / v0.1.17

Activity Log

Claude Code now streams every action into the dashboard in real-time.
File reads, commands, API calls. Risk-labeled. Timestamped. Live.

Set up via Claude Code hooks — one config change, then open
http://localhost:3000/activity.

Security Score

Scores your Claude Code environment out of 100.
Checks permissions, denied paths, strictMode, hooks.

Open http://localhost:3000/security to see yours.


Install the latest:

npm install -g @notenkidev/claude-token-dashboard
claude-token-dashboard
Enter fullscreen mode Exit fullscreen mode

Top comments (0)