https://github.com/jonathan-pap/claude-usage-demo
Interactive Claude Code usage dashboard — track API costs, cache efficiency, and project insights across machines. Live demo with synthetic data.
https://github.com/jonathan-pap/claude-usage-demo
ai-tools claude claude-code dashboard github-pages usage-analytics
Last synced: 28 days ago
JSON representation
Interactive Claude Code usage dashboard — track API costs, cache efficiency, and project insights across machines. Live demo with synthetic data.
- Host: GitHub
- URL: https://github.com/jonathan-pap/claude-usage-demo
- Owner: jonathan-pap
- Created: 2026-05-07T07:06:06.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-07T08:21:31.000Z (about 1 month ago)
- Last Synced: 2026-05-07T09:13:03.987Z (about 1 month ago)
- Topics: ai-tools, claude, claude-code, dashboard, github-pages, usage-analytics
- Language: HTML
- Homepage: https://jonathan-pap.github.io/claude-usage-demo/
- Size: 493 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# claude-usage — live demo
**[▶ Open live demo](https://jonathan-pap.github.io/claude-usage-demo/)**
A personal multi-machine Claude API usage dashboard. It reads the JSONL session logs that Claude Code writes locally, aggregates token consumption across machines and projects, and produces a set of static HTML pages — no server, no build step, no framework.
> **This repo contains synthetic demo data** generated by [`generate_demo_data.py`](generate_demo_data.py). No real usage data is stored here.
---
## Concept
Every Claude Code session writes a JSONL log to disk. Each line records one API call: model, token counts, cache hits, project path, timestamp. Over time these logs accumulate into a detailed picture of how you actually use Claude — which projects burn the most cost, which hours you work, whether prompt caching is saving you money, and whether subagents and MCP tools are earning their overhead.
The dashboard turns that raw log data into something readable without requiring a database, a backend, or any cloud infrastructure. Everything is computed once on your local machine and committed to a private git repo as static `.js` data files. Any device can then open the HTML pages directly from a `file://` path or serve them via GitHub Pages.
## How it works
```
Claude Code session
│
▼
~/.claude/projects/**/*.jsonl (written automatically by Claude Code)
│
▼
update_usage.sh (runs on each machine, e.g. via cron)
│ • parses JSONL logs with ccusage
│ • computes daily totals, token breakdown, cache ROI
│ • runs build_insights.py → project/tool/subagent attribution
│ • writes machines/.json
│
▼
git commit + push (machine snapshot committed to private repo)
│
▼
static HTML pages (read window.ALL_MACHINES from JS shims,
render charts with Chart.js, no server needed)
```
Multiple machines each commit their own snapshot file. The dashboard merges them client-side, so you see a unified view of all your activity regardless of which machine did the work.
## Data files
| File | Variable | Contents |
|---|---|---|
| `usage_data.js` | `window.USAGE_DATA` | Daily token and cost totals |
| `insights_data.js` | `window.INSIGHTS` | Project, tool, model, subagent attribution |
| `machines/.json` | — | Full per-machine snapshot |
| `machines/all_machines.js` | `window.ALL_MACHINES` | All machine snapshots merged into one JS file |
| `machines/manifest.js` | `window.MACHINES_MANIFEST` | Machine list for the multi-machine banner |
| `machines/daily_merged.js` | `window.DAILY_MERGED` | Per-day cost split by machine |
| `machines/hourly_merged.js` | `window.HOURLY_MERGED` | Per-hour activity for the timeline heatmap |
## Pages
| Page | What it shows |
|---|---|
| [Home](https://jonathan-pap.github.io/claude-usage-demo/) | Summary verdict, week-over-week delta tiles, top improvement cards |
| [Explore](https://jonathan-pap.github.io/claude-usage-demo/explore.html) | Tabbed charts: daily cost, token composition, model mix, cache ROI, per-project detail |
| [Timeline](https://jonathan-pap.github.io/claude-usage-demo/timeline.html) | Day-of-week × hour heatmap, hourly cost trend, activity feed |
| [Projects](https://jonathan-pap.github.io/claude-usage-demo/projects.html) | Sortable/filterable table of every project — cost, turns, cache hit ratio |
| [Improvements](https://jonathan-pap.github.io/claude-usage-demo/improvements.html) | Generated recommendations, filterable by severity and category |
| [Plan](https://jonathan-pap.github.io/claude-usage-demo/plan.html) | What-If cost optimizer and subscription tier comparison |
| [Tour](https://jonathan-pap.github.io/claude-usage-demo/tour.html) | Five-chapter narrative tour through the usage history |
| [Glossary](https://jonathan-pap.github.io/claude-usage-demo/glossary.html) | Term definitions and cost formulas |
## Demo data
Ten months of synthetic data (Jul 2025 – Apr 2026):
- **$2,050** API-equivalent cost across 240 active days
- **9 projects** — web-dashboard, api-service, data-pipeline, ml-experiments, mobile-app, and more
- **2 machines** — demo-laptop (75%) and demo-desktop (25%)
- **3 models** — claude-opus-4-7, claude-sonnet-4-6, claude-haiku-4-5
- **91.7% cache hit ratio** improving over time
- MCP servers: github-mcp, filesystem-local, browser-tools
- Plugins: design_figma, design_linear
- 7 subagent types tracked
Regenerate with:
```bash
python generate_demo_data.py
```
## Real deployment
The actual dashboard (private repo) pulls live data from Claude Code JSONL session logs via `update_usage.sh` and commits machine snapshots to git. See [jonathan-pap/claude-usage](https://github.com/jonathan-pap/claude-usage) for the full source.