Claude Code Dashboard

August 19, 2025 · View on GitHub

A cyberpunk-themed real-time monitoring dashboard for Claude Code CLI with automatic session tracking and local data storage.

Features

Real-time Monitoring

Live Process Tracking: Detects and monitors active Claude Code sessions
Performance Metrics: CPU usage, memory consumption, response times
Token Analytics: Track input/output tokens and estimated costs
Command History: View recent commands with success rates

Data Management

Local Storage: All data saved to .claude-dashboard/ directory
Automatic Validation: Built-in data validation and cleanup
Export Options: Export sessions as JSON or human-readable TXT
Historical Analysis: 30-day metric retention with trend analysis

User Interface

Cyberpunk Theme: Dark mode interface with orange accents
Real-time Updates: Server-sent events for live data streaming
Responsive Design: Works on desktop and mobile devices
Intuitive Navigation: Clean layout matching Claude Code aesthetics

Prerequisites

Node.js 18+ and npm
Claude Code CLI (optional - dashboard works without it)
Windows, macOS, or Linux operating system

Installation

Clone the repository

git clone https://github.com/yourusername/claude-code-dashboard.git
cd claude-code-dashboard

Install dependencies

npm install

Configure settings (optional) Edit claude.config.json to customize paths and intervals

Quick Start

Start the dashboard

npm run dev

Open in browser

http://localhost:3000

Start monitoring The dashboard automatically detects running Claude Code sessions

Data Storage

All session data is stored locally in .claude-dashboard/:

.claude-dashboard/
├── sessions.json        # Historical sessions (max 1000)
├── metrics.json         # Performance metrics (30 days)
└── current-session.json # Active session tracking

API Endpoints

Endpoint	Description
`/api/claude-status`	Get current Claude Code status and processes
`/api/claude-metrics`	Fetch usage metrics and performance data
`/api/socket`	Server-sent events for real-time updates

Dashboard Pages

Dashboard: Main overview with key metrics
Sessions: Active and historical Claude Code sessions
Metrics: Detailed performance and usage analytics
Analytics: Charts and trends visualization
Settings: Configuration and export options

Configuration

Configure via claude.config.json:

{
  "claude": {
    "paths": {
      "executable": "claude",
      "configDir": ".claude"
    },
    "monitoring": {
      "updateInterval": 2000,
      "retentionDays": 30
    }
  }
}