Open-source web dashboard tracks Claude token usage for remote workflows

A developer has open-sourced react-ai-token-monitor, a web-based dashboard for tracking Claude token usage in remote and headless environments. The tool was created because existing desktop monitoring tools don't work well for server, dev container, CI, or SSH workflows.

Key Details

The dashboard parses local ~/.claude/projects/**/*.jsonl files in real-time using a chokidar watcher with Server-Sent Events (SSE) for live updates. It calculates costs based on current API pricing for Opus, Sonnet, and Haiku models plus cache read/write operations.

Features include:

• Model breakdowns
• Cache efficiency donut charts
• GitHub-style activity heatmap
• Weekly and monthly trends
• 3D overview graph (pure SVG)
• Dark theme
• No external API calls - all data stays local

The developer's own usage data from March 2026 showed:

• 6.6 million tokens consumed
• $4,808 equivalent value at API pricing
• 129 sessions
• Cache reads dominated usage with 100% efficiency on some days (2.14M+ cached tokens)
• High-token days (997K peak) weren't always the most productive
• Haiku appeared more via cache than expected

Setup and Usage

To run the tool:

npm install && npm run dev

The server binds to 0.0.0.0 for network access from phones or browsers. The tool is MIT-licensed and was built using Claude Code.

The developer is seeking community feedback on additional features like CSV export, limit alerts, and multi-project support.