ClaudeLens

A visual analytics tool for AI coding CLI conversations. Supports Claude Code, Codex, Gemini CLI, and OpenCode.

Features

• Multi-tool support — Browse and analyze sessions from Claude Code, Codex, Gemini CLI, and OpenCode
• Timeline view — Step-by-step conversation flow with expandable tool calls and sub-agents
• Flow view — DAG-based visualization of conversation structure using React Flow
• Token analytics — Context window charts, cumulative token usage, and top consumers
• Cost estimation — Per-session and per-project cost breakdown by model
• Search — Filter projects and sessions by keyword
• Dark / Light theme — Warm Claude Orange design system

Quick Start

# Clone
git clone https://github.com/wangzhaode/claudelens.git
cd claudelens

# Install
npm install

# Run
npm run dev

Open http://localhost:5173 in your browser. ClaudeLens automatically detects installed CLI tools and reads their session data.

Supported Tools

Tool	Data Location	Format
Claude Code	~/.claude/projects/	JSONL
Codex	~/.codex/sessions/	JSONL
Gemini CLI	~/.gemini/tmp/	JSON
OpenCode	~/.local/share/opencode/opencode.db	SQLite

Tech Stack

• React 19 + TypeScript
• Vite (dev server + API middleware)
• Tailwind CSS v4
• React Flow (@xyflow/react) for flow visualization
• Recharts for token analytics charts
• Clawd Icons — pixel-art icon set

Scripts

npm run dev      # Start dev server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

License

MIT