The latest articles on DEV Community by notenki (@notenkitoclientcpu). https://dev.to/notenkitoclientcpu https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3965417%2Fdc46452f-0b6f-457d-8a20-f32f61f6d7ab.png https://dev.to/notenkitoclientcpu en notenki Tue, 02 Jun 2026 22:45:17 +0000 https://dev.to/notenkitoclientcpu/i-had-no-idea-how-many-tokens-i-was-burning-in-claude-code-so-i-built-a-dashboard-1hak https://dev.to/notenkitoclientcpu/i-had-no-idea-how-many-tokens-i-was-burning-in-claude-code-so-i-built-a-dashboard-1hak <h2> The problem </h2> <p>I've been using Claude Code heavily for the past few months.<br> But I had absolutely no idea how many tokens I was actually burning — or where.</p> <p>No visibility. No breakdown. Just vibes.</p> <h2> What I found </h2> <p>Turns out, all the data is sitting right there on your machine:</p> <p>~/.claude/projects/</p> <p>Every session is logged as a JSONL file with full token counts — <br> input, output, cache reads, cache creation.</p> <p>Nobody told me this existed.</p> <h2> What I built </h2> <p>A simple Next.js dashboard that reads those files locally and shows:</p> <ul> <li>Token usage per project</li> <li>Daily usage chart</li> <li>Cache read ratio</li> </ul> <p>When I ran it on my own data, I discovered my cache read ratio was <strong>95.8%</strong>.<br> I had no idea that was happening on every single turn.</p> <p>My heaviest day: <strong>340,000 tokens in a single day</strong> on one project.<br> I had no memory of it being that intense.</p> <h2> The insight </h2> <p>This isn't just about cost.</p> <p>It's about visibility.</p> <p>When you can't see what's happening, you can't improve it.<br> The data was always there — I just couldn't see it.</p> <h2> Try it yourself </h2> <p><strong>Install and run:</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> <span class="nt">-g</span> @notenkidev/claude-token-dashboard claude-token-dashboard </code></pre> </div> <p>Open <a href="http://localhost:3000" rel="noopener noreferrer">http://localhost:3000</a> — your Claude Code token data loads automatically.</p> <p>Or clone it: <a href="https://github.com/notenkitoclient-cpu/claude-token-dashboard" rel="noopener noreferrer">https://github.com/notenkitoclient-cpu/claude-token-dashboard</a></p> claude ai opensource webdev