{"id":50508982,"url":"https://github.com/aaronlab/claude-context-visualizer","last_synced_at":"2026-06-02T18:32:51.436Z","repository":{"id":348158329,"uuid":"1196751038","full_name":"aaronlab/claude-context-visualizer","owner":"aaronlab","description":"Interactive visualization of Claude context window token usage — animated SVG gauge, analytics, i18n, PWA, dark glassmorphism UI","archived":false,"fork":false,"pushed_at":"2026-03-31T08:55:22.000Z","size":354,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-09T15:53:22.171Z","etag":null,"topics":["ai-tools","anthropic","claude","context-window","glassmorphism","llm","no-dependencies","pwa","svg","token-visualizer"],"latest_commit_sha":null,"homepage":"https://zey413.github.io/claude-context-visualizer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronlab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-03-31T02:17:57.000Z","updated_at":"2026-04-11T12:16:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/aaronlab/claude-context-visualizer","commit_stats":null,"previous_names":["zey413/claude-context-visualizer","aaronagent/claude-context-visualizer","aaronlab/claude-context-visualizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/aaronlab/claude-context-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronlab%2Fclaude-context-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronlab%2Fclaude-context-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronlab%2Fclaude-context-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronlab%2Fclaude-context-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronlab","download_url":"https://codeload.github.com/aaronlab/claude-context-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronlab%2Fclaude-context-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33833277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-02T02:00:07.132Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","anthropic","claude","context-window","glassmorphism","llm","no-dependencies","pwa","svg","token-visualizer"],"created_at":"2026-06-02T18:32:50.758Z","updated_at":"2026-06-02T18:32:51.424Z","avatar_url":"https://github.com/aaronlab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Claude Context Window Visualizer\n\n![Version](https://img.shields.io/badge/version-3.4.0-8B5CF6)\n![HTML](https://img.shields.io/badge/HTML5-E34F26?style=flat\u0026logo=html5\u0026logoColor=white)\n![CSS](https://img.shields.io/badge/CSS3-1572B6?style=flat\u0026logo=css3\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat\u0026logo=javascript\u0026logoColor=black)\n![No Dependencies](https://img.shields.io/badge/dependencies-none-brightgreen)\n![PWA](https://img.shields.io/badge/PWA-installable-5A0FC8?style=flat\u0026logo=pwa\u0026logoColor=white)\n![License](https://img.shields.io/badge/license-MIT-green)\n\nInteractive visualization of Claude's context window token usage. Features an animated SVG donut gauge, **realtime context monitor**, **alert timeline with replay**, **token waterfall analysis**, **context compaction simulator**, **model cost heatmap**, **all-model comparison dashboard**, **advanced charts (Pie/Radar/Trend)**, **Claude Code memory tracker**, **token flow stream animation**, model comparison mode, token estimator, API response parser, analytics panel, conversation simulator, usage timeline, and full internationalization -- all in a zero-dependency PWA with dark glassmorphism UI.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Claude-Context_Visualizer_v3.4-8B5CF6?style=for-the-badge\" alt=\"Claude Context Visualizer v3.4\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://zey413.github.io/claude-context-visualizer/\"\u003e\u003cstrong\u003eLive Demo\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## What's New in v3.4\n\n- **Token Calculator** -- Enhanced text-to-token estimator with CJK/code-aware heuristics, real-time stats, cost estimation, and quick-apply buttons.\n- **Keyboard Help** -- Press `?` to view all keyboard shortcuts in a searchable modal panel.\n- **Service Worker Fix** -- Network-first caching strategy ensures returning visitors always get the latest version.\n\n## What's New in v3.3\n\n- **Conversation Log Analyzer** -- Batch analysis of Claude API responses with drag-drop support. Statistics dashboard, trend charts, and integration with Waterfall/Timeline modules.\n- **Custom Template Builder** -- Create, save, and share reusable token allocation templates with visual SVG preview. Supports up to 10 templates with localStorage persistence.\n- **First-load fix** -- Dashboard now always shows data on first visit (detects zero-state and applies \"Long Conversation\" preset).\n\n## What's New in v3.2\n\n- **Guided Tour** -- 7-step interactive onboarding highlights key features with overlay, auto-scroll, and progress indicators.\n- **Optimization Advisor** -- Smart rule engine analyzes your token allocation and recommends improvements (system prompt size, caching, model selection, tool overhead).\n- **Config Exporter** -- Export current configuration as JSON, YAML, Markdown report, or Claude API snippet with one click.\n- **Better Default Experience** -- First-time visitors now see \"Long Conversation\" preset (65% usage) instead of empty dashboard.\n\n## What's New in v3.1\n\n- **Context Compaction Simulator** -- Simulate `/compact` command with 4 strategies (Balanced, Keep System, Keep Recent, Minimize Tools). Animated before/after comparison with configurable compression ratio.\n- **Model Cost Heatmap** -- Interactive matrix comparing request costs across all 8 Claude models × 5 usage scenarios. Color-coded with \"Best Value\" badges.\n- **Demo Data Seeding** -- New visitors see pre-filled sample data in Token Waterfall and Alert Timeline.\n- **Emoji Fix** -- Fixed Unicode surrogate pair display issues across all modules.\n- **Mobile Optimization** -- 250+ lines of responsive CSS, touch targets, landscape mode support.\n\n## What's New in v3.0\n\n- **Realtime Context Monitor** -- Live dashboard with Canvas ring gauge, consumption rate tracking, capacity prediction, and danger alerts. Parse Claude Code `/context` output directly or run live simulations.\n- **Alert Timeline \u0026 Replay** -- SVG stacked area timeline with 3-tier smart alerts (80%/90%/95%), toast notifications, replay controls with 4 speed settings, and draggable progress bar.\n- **Token Waterfall Analysis** -- Per-turn waterfall chart with cumulative overlay, click-to-expand detail panels, bulk JSON import, and staggered animation rendering.\n- **MIT License** -- Added proper LICENSE file to the repository.\n\n## What's New in v2.2\n\n- **3 critical bug fixes** from comprehensive audit\n- **Scroll entrance animations** — cards fade in as you scroll\n- **Micro-interaction polish** — button press feedback, card hover lift, chevron rotation\n- **Focus-visible accessibility** — purple outline rings on all interactive elements\n- **prefers-reduced-motion** — all animations respect accessibility preferences\n\n## What's New in v2.1\n\n- **Claude Opus 4.6** \u0026 **Sonnet 4.6** — 1M context, latest flagship models\n- **Health Monitor HUD** — always-visible bar with usage ring, cost ticker, danger alerts\n- **Sankey Flow Diagram** — beautiful SVG token lifecycle visualization\n- **Prompt Cache Savings** — see how caching cuts costs by up to 90%\n- **Cost Forecast** — project daily/monthly/yearly costs with budget tracking\n- **Prompt caching pricing** on all models\n\n## What's New in v2.0\n\n- **8 Claude models** with current pricing (including Claude 4.5 Sonnet 1M)\n- **All-Model Dashboard** (D key) -- fullscreen comparison of every model\n- **Advanced Charts** -- Pie, Radar (5-axis analysis), Trend Line\n- **Claude Code Memory Tracker** -- visualize the 5,280-token startup overhead\n- **Session Simulator** -- 3 scenarios with step-by-step animated replay\n- **Token Flow Stream** -- mesmerizing canvas particle animation\n- **Automatic migration** from v1 saved state\n\n---\n\n## Features\n\n### Core\n\n- **Animated SVG donut gauge** -- smooth arc transitions with color-coded segments (System / User / Assistant / Tools)\n- **Horizontal stacked bar** -- secondary visualization below the gauge with percentage labels\n- **8 Claude models** -- Opus 4, Sonnet 4, Opus 4.5, Sonnet 4.5, Sonnet 4.5 (1M), 3.5 Sonnet, 3.5 Haiku, 3 Opus\n- **Interactive sliders** -- per-category token allocation with linked number inputs\n- **4 quick presets** -- Light Chat, Long Conversation, Tool-Heavy Agent, Near Limit\n- **Dark glassmorphism UI** -- frosted-glass cards, gradient glows, smooth CSS transitions\n\n### Dashboard \u0026 Charts\n\n- **All-Model Comparison Dashboard** -- fullscreen overlay with proportional context bars, tier badges, cost comparison\n- **Pie Chart** -- donut-style token distribution with interactive segments\n- **Radar Chart** -- 5-axis analysis (Utilization, Diversity, Efficiency, Headroom, Balance)\n- **Trend Line Chart** -- stacked area showing token usage across timeline snapshots\n\n### Claude Code Integration\n\n- **Memory Tracker** -- visualize Claude Code's internal context allocation:\n  - System Prompt: ~4,200 tokens\n  - MEMORY.md: ~680 tokens\n  - Environment Info: ~280 tokens\n  - MCP Tools (deferred): ~120 tokens\n  - Total fixed overhead: **5,280 tokens**\n- **Session Simulator** -- 3 interactive scenarios (Quick Fix, Feature Build, Codebase Exploration)\n- **Token Flow Stream** -- canvas-based particle animation showing tokens flowing to context window\n\n### Analytics \u0026 Insights\n\n- **Efficiency score** -- 0-100 score based on token diversity and context headroom\n- **API cost estimate** -- per-request cost using real model pricing\n- **Optimization tips** -- dynamic suggestions based on current token allocation\n- **Token-per-dollar indicator** -- shows tokens per $0.001 for cost awareness\n- **Mini sparkline charts** -- inline trend graphs in each category card\n\n### Tools \u0026 Integration\n\n- **API response parser** -- paste Claude API response JSON to auto-extract token usage\n- **Conversation simulator** -- animate context filling over 5 seconds\n- **Remaining turns counter** -- estimates conversation turns left\n- **Token estimator** -- paste text to estimate token count (CJK-aware)\n- **Model comparison mode** -- side-by-side gauges for two models\n- **Context budget planner** -- quiz-based model \u0026 allocation recommendations\n- **Prompt templates** -- 6 real-world presets (Coding, Support, Data, Writer, RAG, Claude Code)\n- **Conversation replay** -- 3 selectable scenarios with play/pause/reset\n\n### Export \u0026 Share\n\n- **Export PNG** -- high-quality 800x600 image with gauge and breakdown\n- **Share URL** -- encode current state in URL query params\n- **Copy stats** -- formatted text summary to clipboard\n\n### Platform \u0026 Experience\n\n- **Light / dark theme toggle** -- persisted preference\n- **Internationalization (i18n)** -- English, Chinese, Japanese\n- **PWA support** -- installable standalone app with offline cache\n- **Accessibility** -- ARIA labels, roles, live regions, WCAG AA\n- **Keyboard shortcuts** -- full keyboard navigation\n- **localStorage persistence** -- all state survives reloads\n- **Category color cycling** -- click dots to customize colors\n- **Canvas particle background** -- reacts to usage percentage\n- **Confetti celebration** -- triggers on \"Excellent\" efficiency score\n- **Print stylesheet** -- clean printable layout\n- **SEO optimized** -- Open Graph, Twitter Card, sitemap\n\n---\n\n## Getting Started\n\nNo build tools, no dependencies. Just open:\n\n```bash\nopen index.html\n```\n\nOr serve locally:\n\n```bash\npython3 -m http.server 8000\n# visit http://localhost:8000\n```\n\nOr visit: **https://zey413.github.io/claude-context-visualizer/**\n\n---\n\n## Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| `R` | Reset all token values to zero |\n| `1` | Apply **Light Chat** preset |\n| `2` | Apply **Long Conversation** preset |\n| `3` | Apply **Tool-Heavy Agent** preset |\n| `4` | Apply **Near Limit** preset |\n| `C` | Toggle **model comparison** mode |\n| `D` | Toggle **all-model dashboard** |\n| `T` | Toggle **light / dark theme** |\n\n\u003e Shortcuts are disabled while typing in input fields.\n\n---\n\n## Models Supported\n\n| Model | Context Window | Output Limit | Tier |\n|-------|---------------|-------------|------|\n| Claude Opus 4.6 | 1,000,000 | 128,000 | Flagship |\n| Claude Sonnet 4.6 | 1,000,000 | 64,000 | Balanced |\n| Claude Sonnet 4.5 | 200,000 | 64,000 | Balanced |\n| Claude Opus 4 | 200,000 | 32,000 | Flagship |\n| Claude Sonnet 4 | 200,000 | 64,000 | Balanced |\n| Claude 3.5 Sonnet | 200,000 | 8,192 | Legacy |\n| Claude 3.5 Haiku | 200,000 | 8,192 | Speed |\n| Claude 3 Opus | 200,000 | 4,096 | Legacy |\n\n---\n\n## Tech Stack\n\nPure client-side -- zero dependencies.\n\n| Layer | Technology |\n|-------|-----------|\n| Structure | HTML5 |\n| Styling | CSS3 (custom properties, glassmorphism, grid) |\n| Logic | Vanilla JavaScript (ES6+) |\n| Graphics | SVG (gauge, charts) + Canvas (particles, stream) |\n| Storage | localStorage |\n| PWA | Service Worker + Web App Manifest |\n| i18n | Custom JS translation module (EN / ZH / JA) |\n\n---\n\n## Project Structure\n\n```\nclaude-context-visualizer/\n├── index.html              # Main entry point\n├── manifest.json           # PWA manifest\n├── sw.js                   # Service worker (offline cache, v10)\n├── robots.txt              # Search engine directives\n├── sitemap.xml             # Sitemap for SEO\n├── CHANGELOG.md            # Release notes\n├── css/\n│   └── style.css           # Glassmorphism theme, all component styles\n├── js/\n│   ├── models.js           # 8 Claude models, pricing, presets, migration\n│   ├── i18n.js             # Internationalization (EN/ZH/JA)\n│   ├── gauge.js            # SVG donut gauge renderer\n│   ├── particles.js        # Canvas particle background\n│   ├── share.js            # Export PNG, share URL, copy stats\n│   ├── dashboard.js        # All-model comparison dashboard\n│   ├── charts.js           # SVG charts (Pie, Radar, Trend)\n│   ├── memory-tracker.js   # Claude Code memory visualization\n│   ├── stream.js           # Token flow stream animation\n│   ├── health-monitor.js   # Real-time context health HUD\n│   ├── sankey.js           # SVG Sankey flow diagram\n│   ├── cache-viz.js        # Prompt cache savings visualizer\n│   ├── cost-forecast.js    # Cost forecast \u0026 budget tracker\n│   ├── scroll-fx.js        # Scroll animations \u0026 micro-interactions\n│   └── app.js              # State, sliders, analytics, simulator\n└── assets/\n    └── favicon.svg         # App icon\n```\n\n---\n\n## License\n\nMIT\n\n---\n\nBuilt by [@Zey413](https://github.com/Zey413)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronlab%2Fclaude-context-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronlab%2Fclaude-context-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronlab%2Fclaude-context-visualizer/lists"}