{"id":49874104,"url":"https://github.com/jonathan-pap/claude-usage-demo","last_synced_at":"2026-05-15T11:40:07.002Z","repository":{"id":356244515,"uuid":"1231664125","full_name":"jonathan-pap/claude-usage-demo","owner":"jonathan-pap","description":"Interactive Claude Code usage dashboard — track API costs, cache efficiency, and project insights across machines. Live demo with synthetic data.","archived":false,"fork":false,"pushed_at":"2026-05-07T08:21:31.000Z","size":505,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-07T09:13:03.987Z","etag":null,"topics":["ai-tools","claude","claude-code","dashboard","github-pages","usage-analytics"],"latest_commit_sha":null,"homepage":"https://jonathan-pap.github.io/claude-usage-demo/","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonathan-pap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-07T07:06:06.000Z","updated_at":"2026-05-07T08:21:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jonathan-pap/claude-usage-demo","commit_stats":null,"previous_names":["jonathan-pap/claude-usage-demo"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/jonathan-pap/claude-usage-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathan-pap%2Fclaude-usage-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathan-pap%2Fclaude-usage-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathan-pap%2Fclaude-usage-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathan-pap%2Fclaude-usage-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonathan-pap","download_url":"https://codeload.github.com/jonathan-pap/claude-usage-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathan-pap%2Fclaude-usage-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33065901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T11:35:32.926Z","status":"ssl_error","status_checked_at":"2026-05-15T11:35:31.362Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-tools","claude","claude-code","dashboard","github-pages","usage-analytics"],"created_at":"2026-05-15T11:40:06.268Z","updated_at":"2026-05-15T11:40:06.940Z","avatar_url":"https://github.com/jonathan-pap.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# claude-usage — live demo\n\n**[▶ Open live demo](https://jonathan-pap.github.io/claude-usage-demo/)**\n\nA 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.\n\n\u003e **This repo contains synthetic demo data** generated by [`generate_demo_data.py`](generate_demo_data.py). No real usage data is stored here.\n\n---\n\n## Concept\n\nEvery 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.\n\nThe 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.\n\n## How it works\n\n```\nClaude Code session\n       │\n       ▼\n~/.claude/projects/**/*.jsonl   (written automatically by Claude Code)\n       │\n       ▼\n  update_usage.sh               (runs on each machine, e.g. via cron)\n       │  • parses JSONL logs with ccusage\n       │  • computes daily totals, token breakdown, cache ROI\n       │  • runs build_insights.py → project/tool/subagent attribution\n       │  • writes machines/\u003chostname\u003e.json\n       │\n       ▼\n  git commit + push             (machine snapshot committed to private repo)\n       │\n       ▼\n  static HTML pages             (read window.ALL_MACHINES from JS shims,\n                                 render charts with Chart.js, no server needed)\n```\n\nMultiple 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.\n\n## Data files\n\n| File | Variable | Contents |\n|---|---|---|\n| `usage_data.js` | `window.USAGE_DATA` | Daily token and cost totals |\n| `insights_data.js` | `window.INSIGHTS` | Project, tool, model, subagent attribution |\n| `machines/\u003chost\u003e.json` | — | Full per-machine snapshot |\n| `machines/all_machines.js` | `window.ALL_MACHINES` | All machine snapshots merged into one JS file |\n| `machines/manifest.js` | `window.MACHINES_MANIFEST` | Machine list for the multi-machine banner |\n| `machines/daily_merged.js` | `window.DAILY_MERGED` | Per-day cost split by machine |\n| `machines/hourly_merged.js` | `window.HOURLY_MERGED` | Per-hour activity for the timeline heatmap |\n\n## Pages\n\n| Page | What it shows |\n|---|---|\n| [Home](https://jonathan-pap.github.io/claude-usage-demo/) | Summary verdict, week-over-week delta tiles, top improvement cards |\n| [Explore](https://jonathan-pap.github.io/claude-usage-demo/explore.html) | Tabbed charts: daily cost, token composition, model mix, cache ROI, per-project detail |\n| [Timeline](https://jonathan-pap.github.io/claude-usage-demo/timeline.html) | Day-of-week × hour heatmap, hourly cost trend, activity feed |\n| [Projects](https://jonathan-pap.github.io/claude-usage-demo/projects.html) | Sortable/filterable table of every project — cost, turns, cache hit ratio |\n| [Improvements](https://jonathan-pap.github.io/claude-usage-demo/improvements.html) | Generated recommendations, filterable by severity and category |\n| [Plan](https://jonathan-pap.github.io/claude-usage-demo/plan.html) | What-If cost optimizer and subscription tier comparison |\n| [Tour](https://jonathan-pap.github.io/claude-usage-demo/tour.html) | Five-chapter narrative tour through the usage history |\n| [Glossary](https://jonathan-pap.github.io/claude-usage-demo/glossary.html) | Term definitions and cost formulas |\n\n## Demo data\n\nTen months of synthetic data (Jul 2025 – Apr 2026):\n\n- **$2,050** API-equivalent cost across 240 active days\n- **9 projects** — web-dashboard, api-service, data-pipeline, ml-experiments, mobile-app, and more\n- **2 machines** — demo-laptop (75%) and demo-desktop (25%)\n- **3 models** — claude-opus-4-7, claude-sonnet-4-6, claude-haiku-4-5\n- **91.7% cache hit ratio** improving over time\n- MCP servers: github-mcp, filesystem-local, browser-tools\n- Plugins: design_figma, design_linear\n- 7 subagent types tracked\n\nRegenerate with:\n```bash\npython generate_demo_data.py\n```\n\n## Real deployment\n\nThe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathan-pap%2Fclaude-usage-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonathan-pap%2Fclaude-usage-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathan-pap%2Fclaude-usage-demo/lists"}