Skip to content

mp3wizard/cc-lens

 
 

Repository files navigation

demo

Claude Code Lens (cc-lens)

A real-time monitoring dashboard for Claude Code analytics. Reads directly from ~/.claude/, no cloud, no telemetry, just your local data.

Quick Start

cc-board CLI

Run with a single command — no install needed:

npx cc-lens

That's it. The CLI finds a free port, starts the server, and opens the dashboard in your browser automatically.

Features

  • Overview: Token usage over time, project activity distribution, peak hours heatmap, model breakdown donut, recent conversations

  • Projects: Card grid with sessions, cost per session, most-used tools, languages, git branches; per-project detail page with cost chart

  • Sessions: Sortable table with search and filters (compacted ⚡, agent 🤖, MCP 🔌, web 🔍, thinking 🧠); full session replay with per-turn token display, compaction events, token timeline chart

  • Costs: Stacked area chart by model, cost by project bar chart, per-model breakdown table, cache efficiency panel, static pricing reference

  • Tools: Tool ranking by category (file-io, shell, agent, web, planning, todo, skill, mcp), MCP server details, feature adoption table, CC version history, git branch chart

  • Activity: GitHub-style heatmap, streaks, day-of-week patterns, 24h peak hours bar

  • History: Searchable, paginated view of ~/.claude/history.jsonl command history with timestamps and project context

  • Memory: Browse and edit Claude Code memory files across all projects, filterable by type (user, feedback, project, reference, index), stale detection

  • Todos: View todo lists from ~/.claude/todos/ with status filters (pending, in_progress, completed) and priority badges

  • Plans: Read saved plan files from ~/.claude/plans/ with inline markdown rendering

  • Settings: Inspect ~/.claude/settings.json including installed skills and plugins

  • Export: Download .ccboard.json or .zip with full JSONL; import with additive merge preview

  • Global Search (⌘K / Ctrl+K or /): Command palette to search across pages, sessions, projects, plans, and memory entries instantly

  • Keyboard Navigation: j/k to move through the sessions list, Enter to open, Esc to clear; g+letter shortcuts to jump to any page:

    Shortcut Page Shortcut Page
    g h Overview g t Tools
    g s Sessions g a Activity
    g p Projects g m Memory
    g c Costs g e Export
    g l Plans g y History
    g o Todos

Manual Setup

If you prefer to run it locally from source:

Prerequisites

  • Node.js 18+
  • Claude Code with local data in ~/.claude/

Run

npm install
npm run dev

Open http://localhost:3000 (or the port shown in the terminal).

Build

npm run build
npm start

Data Source

  • ~/.claude/projects/<slug>/*.jsonl: Session JSONL (primary)
  • ~/.claude/stats-cache.json: Aggregated stats
  • ~/.claude/usage-data/session-meta/: Session metadata (fallback)
  • ~/.claude/history.jsonl: Command history
  • ~/.claude/todos/: Todo files
  • ~/.claude/plans/: Plan files
  • ~/.claude/memory/: Memory files (per-project)
  • ~/.claude/settings.json: Settings, skills, plugins

Data refreshes every 5 seconds while the dashboard is open.

Star History

Star History Chart

About

A real-time monitoring dashboard for Claude Code

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 96.0%
  • CSS 2.1%
  • JavaScript 1.9%