CC-Lens: The Open-Source Dashboard That Shows You Exactly How You Use Claude Code

Run npx cc-lens to get a real-time, local analytics dashboard for your Claude Code usage, revealing token costs, project activity, and tool efficiency.

The Technique — A Local Analytics Dashboard for Claude Code

CC-Lens is an open-source, real-time monitoring dashboard that reads directly from your ~/.claude/ directory. It requires no installation, cloud services, or telemetry. You run it with a single command:

npx cc-lens

The CLI automatically finds a free port, starts a local server, and opens the dashboard in your browser. Data refreshes every 5 seconds while the dashboard is open.

Why It Works — Unlocking Your Local Data

Claude Code stores a wealth of local data in JSONL files, but it's not easily human-readable. CC-Lens parses this data to provide actionable insights. It primarily reads from:

• ~/.claude/projects/<slug>/*.jsonl: Session data.
• ~/.claude/stats-cache.json: Aggregated statistics.
• ~/.claude/usage-data/session-meta/: Session metadata.
• ~/.claude/history.jsonl: Your command history.
• ~/.claude/todos/, ~/.claude/plans/, ~/.claude/memory/: Your project artifacts.

Because it runs locally, your data never leaves your machine. This follows a broader trend in the Claude Code ecosystem, as seen with tools for running Claude Code locally with Ollama and debugging MCP servers, prioritizing developer control and privacy.

How To Apply It — Key Dashboards for Better Workflows

Once running, CC-Lens provides several views that can immediately improve how you use Claude Code.

1. The Cost Dashboard (/costs)
This is the most actionable panel. The Stacked Area Chart by Model shows which model (Opus, Sonnet, Haiku) you're spending the most on. The Cache Efficiency Panel reveals how often Claude Code is reusing cached responses instead of generating new ones—a direct lever for reducing token usage. Use this data to adjust your claude code model flags or project settings.

2. The Projects Dashboard (/projects)
This card grid shows session count, cost per session, most-used tools, and even git branches per project. Click into any project for a detail page with a cost trend chart. This helps you identify which codebases are the most expensive to work on with Claude Code, prompting you to invest in better CLAUDE.md files or memory for those projects.

3. The Tools Dashboard (/tools)
This view ranks every tool Claude Code uses by category: file-io, shell, agent, web, planning, MCP, etc. You can see exactly which MCP servers are being invoked and how often. If you see a high usage of the web tool, for instance, you might want to implement the strategies from our article on stopping web fetches from burning tokens. The Feature Adoption Table and CC Version History chart also help you track your own rollout of new Claude Code features.

4. Session Replay (/sessions)
Search and filter all sessions (compacted, agent, MCP, web, thinking). Click into any session for a full replay with a per-turn token display and a token timeline chart. This is invaluable for debugging why a particular task consumed so many tokens. You can see exactly where a compaction event happened or where a web search spiraled.

5. Memory & Artifacts Browser
Browse and edit Claude Code memory files across all projects, filterable by type (user, feedback, project). View your ~/.claude/todos/ with status filters and priority badges. Read saved plan files from ~/.claude/plans/ with inline markdown rendering. This turns your ~/.claude directory from a black box into a manageable knowledge base.

Advanced: Running from Source

If you want to contribute or customize, run from source:

git clone https://github.com/Arindam200/cc-lens
cd cc-lens
npm install
npm run dev
# Open http://localhost:3000

The stack is Next.js 15, React 19, TypeScript, Tailwind CSS, Recharts, and SWR.

---

Originally published on gentic.news