Launch Dashboard
Start the analytics dashboard server:http://localhost:3333.
Options
Verbose Mode
Enable detailed logging:Open Specific View
Open directly to the agents view:Remote Access via Cloudflare Tunnel
For secure remote access to your analytics dashboard:cloudflaredmust be installed- macOS:
brew install cloudflared - Windows:
winget install --id Cloudflare.cloudflared - Linux:
apt-get install cloudflared
Cloudflare Tunnel creates a secure, private connection. Only you have access to the generated URL. The connection is end-to-end encrypted and automatically closes when you stop the server.
Features
Conversation Analytics
- Real-time tracking of all Claude Code conversations
- State detection: Active, Idle, Recently active, Inactive
- Process monitoring: Detects running Claude Code processes
- File watching: Automatically refreshes when conversations change
Token Usage
Detailed token statistics:- Input tokens: User prompts and context
- Output tokens: Claude responses
- Cache creation tokens: Prompt caching overhead
- Cache read tokens: Tokens read from cache
- Total usage: Aggregate token consumption
Agent Usage Analysis
Track subagent invocations:- Agent types and frequency
- Task tool usage patterns
- Agent performance metrics
- Date range filtering
Session Data
Claude Max plan usage tracking:- 5-hour session windows
- Current session progress
- Session timer and countdown
- Monthly and weekly session counts
Performance Monitoring
- Memory usage tracking
- Request statistics
- Cache hit rates
- Error monitoring
- System health status
API Endpoints
The dashboard exposes several REST API endpoints:Get All Data
Paginated Conversations
Conversation States
Agent Analytics
Session Data
System Health
Refresh Data
Clear Cache
WebSocket Support
Real-time updates via WebSocket:new_message: New conversation messagedata_refresh: Data reloadedstate_change: Conversation state changed
Data Sources
The dashboard reads from:~/.claude/: Conversation JSONL files~/Library/Application Support/Claude/: Claude Desktop data (macOS)~/.claude/statsig/: Usage statistics
Performance Considerations
Memory Management
The dashboard implements several optimizations:- Conversation limiting: Keeps only 150 most recent conversations in memory
- Data caching: Parsed conversations cached to reduce disk I/O
- Garbage collection: Manual GC hints when available
File Watching
Automatic refresh when:- New conversation files created
- Existing conversations modified
- Settings files updated
Architecture
Core Components
StateCalculator (analytics/core/StateCalculator.js):lines/analytics.js:31
- Determines conversation states
- Quick state calculation for active processes
- Idle time detection
analytics/core/ProcessDetector.js):lines/analytics.js:32
- Detects running Claude Code processes
- Enriches conversations with process info
- Finds orphan processes
analytics/core/ConversationAnalyzer.js):lines/analytics.js:98
- Loads and parses conversation files
- Extracts project information
- Calculates token usage
analytics/core/SessionAnalyzer.js):lines/analytics.js:34
- Tracks Max plan sessions
- Calculates 5-hour windows
- Provides session timer data
analytics/core/AgentAnalyzer.js):lines/analytics.js:35
- Analyzes agent usage patterns
- Tracks subagent invocations
- Generates usage summaries
analytics/core/YearInReview2025.js):lines/analytics.js:36
- Generates annual statistics
- Activity heatmaps
- Top projects and patterns
Data Flow
-
Initialization:lines/analytics.js:86
- Check Claude directories exist
- Load initial conversation data
- Setup file watchers
- Start Express server
-
Data Loading:lines/analytics.js:105
- Parse conversation JSONL files
- Calculate token usage
- Extract model information
- Generate status squares
-
Real-time Updates:lines/analytics.js:592
- File watcher detects changes
- Debounced data refresh
- WebSocket broadcast to clients
-
Fast State Updates:lines/analytics.js:999
- Only updates conversation states
- Doesn’t reload entire dataset
- Used for frequent polling
Example: Monitoring Token Usage
Troubleshooting
Dashboard Won’t Start
Error:Claude Code directory not found
Run Claude Code at least once to create ~/.claude/ directory.
No Conversations Showing
Check conversation files exist:Port Already in Use
The dashboard uses port 3333. If occupied:WebSocket Connection Failed
Verify WebSocket server initialized:🌐 WebSocket server initialized
Advanced Usage
Custom Port
Editanalytics.js:line/analytics.js:30
Disable File Watching
Comment out file watcher setup ininitialize():line/analytics.js:102
Extend with Custom Analytics
Add custom endpoint:See Also
- Conversation Monitor - Mobile-optimized chat interface
- Stats Tools - Command, hook, and MCP analyzers
- Health Check - System validation tool