Claude Code Dashboard

Local-first analytics dashboard for Claude Code usage. Understand your AI coding patterns, costs, and performance — all without leaving your machine.

Zero telemetry. Zero outbound connections. Your data never leaves localhost.

---

Features

• Overview Dashboard — KPIs, daily activity charts, cost trends, model distribution, and weekly activity heatmap
• Sessions Browser — Virtual-scrolled table with multi-column sorting, filters (date, model, project, cost range), and column toggles
• Session Detail — Message-by-message timeline, tool breakdown, and cost waterfall
• Advanced Timeline — Gantt-style visualization with swim lanes, zoom controls, minimap, and click-to-inspect
• Live Monitor — Real-time per-session tracking via SSE with session switching, message feed, KPIs, and task progress
• Interactive Agent — Run Claude Code sessions directly from the dashboard (requires ANTHROPIC_API_KEY)
• Cost Analytics — Per-model and per-day breakdowns with 30-day linear forecast
• Cache Efficiency — Hit rate trends, per-model cache performance, savings breakdown (actual vs. hypothetical cost), token flow visualization, and personalized caching recommendations
• Tool & Skill Usage — Invocation counts, error rates, frequency tables, skill tracking, and time-range filtering
• AI Insights — 10 automated detection rules (cost spikes, tool loops, context bloat, error cascades, long sessions, etc.)
• Info Tooltips — Every metric includes an explanatory tooltip so users understand what each number means
• Themes — Dark, light, and high-contrast modes with system preference detection
• Privacy First — Network guard, PII detection, privacy mode, localhost-only, zero telemetry

Quick Start

Using npx (no install)

npx claude-code-insights

Global install

npm install -g claude-code-insights
claude-code-insights

From source

git clone https://github.com/yahav10/claude-code-insights.git
cd claude-code-insights
pnpm install
bash scripts/build.sh
node packages/cli/dist/index.js

Opens a dashboard at http://localhost:3838 analyzing your Claude Code sessions from ~/.claude/.

CLI Options

Option	Default	Description
--dir <path>	~/.claude	Directory to scan for Claude sessions
--port <number>	3838	Server port
--no-open	—	Don't auto-open browser
--privacy-mode	true	Enable PII redaction on API responses

Security & Privacy

Claude Code Dashboard is built with a zero-trust architecture. Security is not optional — it is enforced at every layer.

Network Isolation

A network guard monkey-patches net.Socket.prototype.connect at startup to block all non-localhost outbound connections at the socket level. This runs before any other code executes. If any dependency attempts to phone home, the connection is destroyed and logged.

Allowed hosts: 127.0.0.1, localhost, ::1, 0.0.0.0

PII Detection & Redaction

A regex-based scanner detects sensitive data before it reaches the browser:

• API keys — Anthropic (sk-ant-*), OpenAI (sk-*), generic (pk-*, rk-*, ak-*)
• Cloud credentials — AWS access keys (AKIA*, ABIA*, ACCA*, ASIA*)
• Tokens — GitHub (ghp_*, gho_*, ghu_*, ghs_*, ghr_*), JWTs
• Secrets — Private key headers (RSA, EC, DSA)
• Personal data — Email addresses, IPv4 addresses

PII redaction is applied at three pipeline points:

1. Indexing — Content previews are redacted before SQLite storage
2. WebSocket — Agent tool inputs are redacted before reaching the browser
3. SSE — Live monitor message previews are redacted before broadcast

Privacy Mode

Enabled by default. Processes all API response bodies through the PII redaction engine. Can be disabled with --no-privacy-mode for local-only debugging.

Additional Guarantees

• Read-only — Never writes to or modifies your ~/.claude/ directory
• No telemetry — Zero analytics, tracking, or phone-home behavior
• Localhost-only — Server binds exclusively to 127.0.0.1
• CSP headers — default-src 'self', X-Frame-Options: DENY, X-Content-Type-Options: nosniff
• Prepared statements — All SQLite queries use parameterized statements (no string interpolation)

Architecture

┌──────────────────────────────────────────┐
│  CLI (packages/cli)                      │
│  Commander.js → starts server            │
└────────────────┬─────────────────────────┘
                 │
┌────────────────▼─────────────────────────┐
│  Server (apps/server)                    │
│  Fastify 5 + better-sqlite3 + SSE + WS  │
│                                          │
│  ┌─────────┐ ┌─────────┐ ┌───────────┐  │
│  │ Indexer  │ │  Live   │ │   Agent   │  │
│  │ (JSONL→  │ │ (SSE    │ │ (WS +     │  │
│  │  SQLite) │ │  poll)  │ │  SDK)     │  │
│  └─────────┘ └─────────┘ └───────────┘  │
└────────────────┬─────────────────────────┘
                 │
┌────────────────▼─────────────────────────┐
│  Web (apps/web)                          │
│  Vue 3 + Pinia + ECharts + TanStack     │
└──────────────────────────────────────────┘

Shared packages:
  shared-types/     Zod schemas, TypeScript types
  cost-engine/      Token pricing tables, cost calculator
  session-parser/   JSONL reader, session & timeline builders
  insights-engine/  10 detection rules for session analysis

Tech Stack

Layer	Technology
Frontend	Vue 3, TypeScript, Vite, Pinia, SCSS (BEM)
Charts	ECharts (tree-shaken)
Tables	TanStack Vue Table + Vue Virtual
Backend	Fastify 5, better-sqlite3 (WAL mode)
Real-time	Server-Sent Events (live), WebSocket (agent)
Agent	Claude Agent SDK (@anthropic-ai/claude-agent-sdk)
Validation	Zod schemas as single source of truth
CLI	Commander.js
Testing	Vitest

Project Structure

claude-code-insights/
├── apps/
│   ├── server/           # Fastify API server
│   │   ├── src/
│   │   │   ├── db/       # SQLite schema, queries, connection
│   │   │   ├── middleware/# Network guard, privacy, PII detector
│   │   │   ├── routes/   # REST API, SSE, WebSocket endpoints
│   │   │   ├── services/ # Indexer, scanner
│   │   │   └── workers/  # Session parse worker
│   │   └── package.json
│   └── web/              # Vue 3 SPA
│       ├── src/
│       │   ├── components/# 60+ Vue components
│       │   ├── composables/# Vue composables (API, charts, etc.)
│       │   ├── pages/    # Route-level page components
│       │   ├── stores/   # Pinia state management
│       │   └── styles/   # SCSS design tokens, mixins, themes
│       └── package.json
├── packages/
│   ├── shared-types/     # Zod schemas + TypeScript types
│   ├── cost-engine/      # Token pricing & cost calculation
│   ├── session-parser/   # JSONL parsing & session building
│   ├── insights-engine/  # Automated analysis rules
│   └── cli/              # CLI entry point (npx target)
├── scripts/              # Build scripts
└── docs/                 # Design & implementation plans

Development

Prerequisites

• Node.js >= 20
• pnpm >= 9

Setup

git clone https://github.com/yahav10/claude-code-insights.git
cd claude-code-insights
pnpm install

Commands

# Start dev servers (API on :3838, web on :5173)
pnpm dev

# Run all tests
pnpm test

# Type check
pnpm typecheck

# Production build
bash scripts/build.sh

Agent Feature

The interactive Agent page lets you run Claude Code sessions directly from the dashboard. This is an optional feature that requires an ANTHROPIC_API_KEY environment variable.

export ANTHROPIC_API_KEY=sk-ant-...
npx claude-code-insights

Security notes:

• The API key is read from process.env by the Claude Agent SDK — CSI never reads, stores, or logs it
• Agent communication uses WebSocket over localhost only
• Tool inputs are PII-redacted before reaching the browser
• The network guard ensures no data leaves localhost even during agent execution

Configuration

Environment Variable	Default	Description
CSI_SCAN_DIR	~/.claude	Directory to scan for sessions
CSI_PORT	3838	Server port
CSI_PRIVACY_MODE	true	Enable PII redaction on responses
ANTHROPIC_API_KEY	—	Optional. Required only for the Agent feature

FAQ

Where is my data stored? Session data is indexed into a local SQLite database at ~/.cache/claude-code-insights/index.db. No data is transmitted anywhere.

Does this modify my Claude Code sessions? No. CSI is strictly read-only — it never writes to ~/.claude/.

How do I reset the index? Delete the database file: rm ~/.cache/claude-code-insights/index.db. It will be rebuilt on next start.

Does the Agent feature cost money? Yes — the Agent feature calls the Anthropic API using your API key. Costs depend on the model you select and tokens consumed. This is the same as using Claude Code directly.

Can I run this on a remote server? The server binds to 127.0.0.1 only and the network guard blocks all non-localhost connections. It is designed exclusively for local use.

Troubleshooting

No sessions found Make sure you have used Claude Code at least once. Sessions are stored in ~/.claude/projects/. Use --dir to point to a custom location.

Port already in use Use --port <number> to specify a different port: npx claude-code-insights --port 4000

Agent not working Ensure ANTHROPIC_API_KEY is set in your environment. The Agent feature is optional and requires a valid Anthropic API key.

pnpm install fails with "Could not locate the bindings file" This package uses better-sqlite3, a native C++ addon. pnpm blocks native builds by default. Add this to your project's package.json:

"pnpm": {
  "onlyBuiltDependencies": ["better-sqlite3"]
}

Then re-run pnpm install. Alternatively, use npx claude-code-insights which uses npm and handles native builds automatically.

Contributing

See CONTRIBUTING.md.

Security

See SECURITY.md for our security policy and how to report vulnerabilities.

Code of Conduct

See CODE_OF_CONDUCT.md.

License

MIT — see LICENSE.