claude-usage-dashboard 1.0.0

package/README.md

@@ -0,0 +1,52 @@
+# Claude Usage Dashboard
+
+A self-hosted dashboard that visualizes your [Claude Code](https://claude.ai/code) usage by parsing local JSONL session logs from `~/.claude/projects/`.
+
+![Dashboard Screenshot](docs/screenshots/dashboard.png)
+
+## Features
+
+- **Token tracking** — Total tokens with breakdown by input, output, cache read, and cache write
+- **Cost estimation** — API cost equivalent at standard pricing, compared against your subscription plan (Pro / Max 5x / Max 20x)
+- **Token consumption trend** — Stacked bar chart with hourly, daily, weekly, or monthly granularity
+- **Model distribution** — Donut chart showing usage across Claude models
+- **Cache efficiency** — Visual breakdown of cache read, cache creation, and uncached requests
+- **Project distribution** — Horizontal bar chart comparing token usage across projects
+- **Session details** — Sortable, paginated table of every session with cost and duration
+
+## Quick Start
+
+Run directly without installing:
+
+```bash
+npx claude-usage-dashboard
+```
+
+Open http://localhost:3000 in your browser.
+
+### From Source
+
+```bash
+git clone https://github.com/ludengz/claudeUsageDashboard.git
+cd claudeUsageDashboard
+npm install
+npm start
+```
+
+The dashboard reads logs from `~/.claude/projects/` — if you use Claude Code, these already exist on your machine. Logs are parsed once at startup; restart the server to pick up new session data.
+
+## Tech Stack
+
+- **Backend:** Node.js, Express 5
+- **Frontend:** Vanilla JS (ES modules), D3.js v7
+- **Tests:** Mocha + Chai
+
+## Running Tests
+
+```bash
+npm test
+```
+
+## License
+
+ISC

package/bin/cli.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../server/index.js';

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "claude-usage-dashboard",
+  "version": "1.0.0",
+  "description": "Dashboard that visualizes Claude Code usage from local session logs",
+  "main": "server/index.js",
+  "bin": {
+    "claude-usage-dashboard": "bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "server/",
+    "public/"
+  ],
+  "scripts": {
+    "start": "node server/index.js",
+    "test": "mocha test/**/*.test.js --timeout 5000"
+  },
+  "keywords": ["claude", "usage", "dashboard", "token", "cost"],
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ludengz/claudeUsageDashboard.git"
+  },
+  "type": "module",
+  "dependencies": {
+    "d3": "^7.9.0",
+    "express": "^5.2.1"
+  },
+  "devDependencies": {
+    "chai": "^6.2.2",
+    "mocha": "^11.7.5"
+  }
+}

package/public/css/style.css

@@ -0,0 +1,221 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --bg-primary: #0f172a;
+  --bg-card: #1e293b;
+  --bg-input: #334155;
+  --border: #475569;
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --blue: #3b82f6;
+  --blue-light: #60a5fa;
+  --purple: #8b5cf6;
+  --orange: #f97316;
+  --amber: #f59e0b;
+  --green: #4ade80;
+  --red: #ef4444;
+}
+
+body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: system-ui, -apple-system, sans-serif;
+  padding: 0 24px 40px;
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--bg-card);
+  margin-bottom: 20px;
+}
+.logo { font-size: 18px; font-weight: 700; }
+.controls { display: flex; gap: 12px; align-items: center; }
+
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.card {
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 16px;
+}
+.card-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.card-value {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 4px;
+}
+.card-sub {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+#val-api-cost { color: var(--amber); }
+#val-savings { color: var(--green); }
+#val-cache-rate { color: var(--blue-light); }
+
+.chart-section {
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+.chart-section h2 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.chart-header h2 { margin-bottom: 0; }
+.chart-container { min-height: 200px; }
+
+.chart-row-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.granularity-toggle { display: flex; gap: 4px; }
+.granularity-toggle button {
+  padding: 4px 12px;
+  background: var(--bg-input);
+  border: none;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+.granularity-toggle button.active {
+  background: var(--blue);
+  color: white;
+}
+
+.table-controls { display: flex; gap: 8px; }
+.filter-input, .sort-select {
+  padding: 6px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+}
+.filter-input { width: 180px; }
+
+.table-container { overflow-x: auto; }
+.table-container table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.table-container th {
+  text-align: left;
+  padding: 10px 8px;
+  border-bottom: 2px solid var(--bg-input);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+.table-container th.align-right,
+.table-container td.align-right { text-align: right; }
+.table-container td {
+  padding: 10px 8px;
+  border-bottom: 1px solid var(--bg-primary);
+  color: var(--text-secondary);
+}
+.table-container tfoot td {
+  border-top: 2px solid var(--bg-input);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+}
+.tag-project { background: #1e3a5f; color: var(--blue-light); }
+.tag-model-sonnet { background: #1e3a5f; color: var(--blue-light); }
+.tag-model-opus { background: #3b1764; color: #c084fc; }
+.tag-model-haiku { background: #1a2e1a; color: var(--green); }
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 12px;
+}
+.pagination button {
+  padding: 4px 10px;
+  background: var(--bg-input);
+  border: none;
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+.pagination button.active {
+  background: var(--blue);
+  color: white;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.date-picker input {
+  padding: 6px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+}
+.date-picker span { color: var(--text-secondary); font-size: 12px; }
+
+.plan-selector select, .plan-selector input {
+  padding: 6px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+}
+
+.d3-tooltip {
+  position: absolute;
+  padding: 8px 12px;
+  background: rgba(15, 23, 42, 0.95);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--text-primary);
+  pointer-events: none;
+  z-index: 100;
+}
+
+@media (max-width: 768px) {
+  .summary-cards { grid-template-columns: repeat(2, 1fr); }
+  .chart-row-3 { grid-template-columns: 1fr; }
+}

package/public/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Claude Usage Dashboard</title>
+  <link rel="stylesheet" href="/css/style.css">
+  <script src="/lib/d3/d3.min.js"></script>
+</head>
+<body>
+  <header class="top-bar">
+    <h1 class="logo">⚡ Claude Usage Dashboard</h1>
+    <div class="controls">
+      <div id="date-picker" class="date-picker"></div>
+      <div id="plan-selector" class="plan-selector"></div>
+    </div>
+  </header>
+
+  <section class="summary-cards" id="summary-cards">
+    <div class="card" id="card-total-tokens">
+      <div class="card-label">Total Tokens</div>
+      <div class="card-value" id="val-total-tokens">—</div>
+      <div class="card-sub" id="sub-total-tokens"></div>
+    </div>
+    <div class="card" id="card-api-cost">
+      <div class="card-label">API Cost Equivalent</div>
+      <div class="card-value" id="val-api-cost">—</div>
+      <div class="card-sub" id="sub-api-cost">at standard API pricing</div>
+    </div>
+    <div class="card" id="card-savings">
+      <div class="card-label">You Saved</div>
+      <div class="card-value" id="val-savings">—</div>
+      <div class="card-sub" id="sub-savings"></div>
+    </div>
+    <div class="card" id="card-cache">
+      <div class="card-label">Cache Hit Rate</div>
+      <div class="card-value" id="val-cache-rate">—</div>
+      <div class="card-sub" id="sub-cache-rate">cache_read / total input</div>
+    </div>
+  </section>
+
+  <section class="chart-section">
+    <div class="chart-header">
+      <h2>Token Consumption Trend</h2>
+      <div class="granularity-toggle" id="granularity-toggle">
+        <button data-granularity="hourly">Hourly</button>
+        <button data-granularity="daily" class="active">Daily</button>
+        <button data-granularity="weekly">Weekly</button>
+        <button data-granularity="monthly">Monthly</button>
+      </div>
+    </div>
+    <div id="chart-token-trend" class="chart-container"></div>
+  </section>
+
+  <section class="chart-row-3">
+    <div class="chart-section">
+      <h2>Cost: Subscription vs API</h2>
+      <div id="chart-cost-comparison" class="chart-container"></div>
+    </div>
+    <div class="chart-section">
+      <h2>Model Distribution</h2>
+      <div id="chart-model-distribution" class="chart-container"></div>
+    </div>
+    <div class="chart-section">
+      <h2>Cache Efficiency</h2>
+      <div id="chart-cache-efficiency" class="chart-container"></div>
+    </div>
+  </section>
+
+  <section class="chart-section">
+    <h2>Project Distribution</h2>
+    <div id="chart-project-distribution" class="chart-container"></div>
+  </section>
+
+  <section class="chart-section">
+    <div class="chart-header">
+      <h2>Session Details</h2>
+      <div class="table-controls">
+        <input type="text" id="session-filter" placeholder="Filter by project..." class="filter-input">
+        <select id="session-sort" class="sort-select">
+          <option value="date">Sort by: Date</option>
+          <option value="cost">Sort by: Cost</option>
+          <option value="tokens">Sort by: Tokens</option>
+        </select>
+      </div>
+    </div>
+    <div id="session-table" class="table-container"></div>
+    <div id="session-pagination" class="pagination"></div>
+  </section>
+
+  <script type="module" src="/js/app.js"></script>
+</body>
+</html>

package/public/js/api.js

@@ -0,0 +1,13 @@
+const BASE = '/api';
+
+function qs(params) {
+  const entries = Object.entries(params).filter(([, v]) => v != null && v !== '');
+  return entries.length ? '?' + new URLSearchParams(entries).toString() : '';
+}
+
+export async function fetchUsage(params = {}) { return (await fetch(`${BASE}/usage${qs(params)}`)).json(); }
+export async function fetchModels(params = {}) { return (await fetch(`${BASE}/models${qs(params)}`)).json(); }
+export async function fetchProjects(params = {}) { return (await fetch(`${BASE}/projects${qs(params)}`)).json(); }
+export async function fetchSessions(params = {}) { return (await fetch(`${BASE}/sessions${qs(params)}`)).json(); }
+export async function fetchCost(params = {}) { return (await fetch(`${BASE}/cost${qs(params)}`)).json(); }
+export async function fetchCache(params = {}) { return (await fetch(`${BASE}/cache${qs(params)}`)).json(); }

package/public/js/app.js

@@ -0,0 +1,140 @@
+import { fetchUsage, fetchModels, fetchProjects, fetchSessions, fetchCost, fetchCache } from './api.js';
+import { initDatePicker } from './components/date-picker.js';
+import { initPlanSelector } from './components/plan-selector.js';
+import { renderTokenTrend } from './charts/token-trend.js';
+import { renderCostComparison } from './charts/cost-comparison.js';
+import { renderModelDistribution } from './charts/model-distribution.js';
+import { renderCacheEfficiency } from './charts/cache-efficiency.js';
+import { renderProjectDistribution } from './charts/project-distribution.js';
+import { renderSessionTable } from './charts/session-stats.js';
+
+const state = {
+  dateRange: { from: null, to: null },
+  plan: { plan: 'max20x', customPrice: null },
+  granularity: localStorage.getItem('selectedGranularity') || 'hourly',
+  sessionSort: 'date',
+  sessionOrder: 'desc',
+  sessionPage: 1,
+  sessionProject: '',
+};
+
+let datePicker, planSelector;
+
+function formatNumber(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(0) + 'K';
+  return n.toString();
+}
+
+async function loadAll() {
+  const params = { ...state.dateRange };
+  const planParams = { ...state.dateRange, plan: state.plan.plan };
+  if (state.plan.customPrice) planParams.customPrice = state.plan.customPrice;
+
+  const [usage, models, projects, sessions, cost, cache] = await Promise.all([
+    fetchUsage({ ...params, granularity: state.granularity }),
+    fetchModels(params),
+    fetchProjects(params),
+    fetchSessions({
+      ...params,
+      project: state.sessionProject,
+      sort: state.sessionSort,
+      order: state.sessionOrder,
+      page: state.sessionPage,
+    }),
+    fetchCost(planParams),
+    fetchCache(params),
+  ]);
+
+  // Summary cards
+  const t = usage.total;
+  const totalAll = t.input_tokens + t.output_tokens + t.cache_read_tokens + t.cache_creation_tokens;
+  document.getElementById('val-total-tokens').textContent = formatNumber(totalAll);
+  document.getElementById('sub-total-tokens').innerHTML =
+    `<span style="color:#4ade80">cache read:${formatNumber(t.cache_read_tokens)}</span> · ` +
+    `<span style="color:#f59e0b">cache write:${formatNumber(t.cache_creation_tokens)}</span> · ` +
+    `<span style="color:#60a5fa">in:${formatNumber(t.input_tokens)}</span> · ` +
+    `<span style="color:#f97316">out:${formatNumber(t.output_tokens)}</span>`;
+  document.getElementById('val-api-cost').textContent = `$${cost.api_equivalent_cost_usd.toFixed(2)}`;
+
+  const savings = cost.savings_usd;
+  const savingsEl = document.getElementById('val-savings');
+  savingsEl.textContent = `$${Math.abs(savings).toFixed(2)}`;
+  savingsEl.style.color = savings >= 0 ? '#4ade80' : '#ef4444';
+  document.getElementById('sub-savings').textContent = savings >= 0 ? 'subscription saved you this much!' : 'API would have been cheaper';
+
+  document.getElementById('val-cache-rate').textContent = `${(cache.cache_read_rate * 100).toFixed(1)}%`;
+
+  // Set active granularity button
+  const activeGran = usage.granularity;
+  document.querySelectorAll('.granularity-toggle button').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.granularity === activeGran);
+  });
+
+  // Charts
+  renderTokenTrend(document.getElementById('chart-token-trend'), usage);
+  renderCostComparison(document.getElementById('chart-cost-comparison'), cost);
+  renderModelDistribution(document.getElementById('chart-model-distribution'), models);
+  renderCacheEfficiency(document.getElementById('chart-cache-efficiency'), cache);
+  renderProjectDistribution(document.getElementById('chart-project-distribution'), projects);
+  renderSessionTable(document.getElementById('session-table'), sessions, {
+    onSort: (key) => {
+      if (state.sessionSort === key) {
+        state.sessionOrder = state.sessionOrder === 'desc' ? 'asc' : 'desc';
+      } else {
+        state.sessionSort = key;
+        state.sessionOrder = 'desc';
+      }
+      state.sessionPage = 1;
+      loadAll();
+    },
+    onPageChange: (page) => {
+      state.sessionPage = page;
+      loadAll();
+    },
+  });
+}
+
+function init() {
+  datePicker = initDatePicker(document.getElementById('date-picker'), (range) => {
+    state.dateRange = range;
+    state.sessionPage = 1;
+    loadAll();
+  });
+  state.dateRange = datePicker.getRange();
+
+  planSelector = initPlanSelector(document.getElementById('plan-selector'), (plan) => {
+    state.plan = plan;
+    loadAll();
+  });
+
+  document.getElementById('granularity-toggle').addEventListener('click', (e) => {
+    if (e.target.tagName === 'BUTTON') {
+      state.granularity = e.target.dataset.granularity;
+      localStorage.setItem('selectedGranularity', state.granularity);
+      loadAll();
+    }
+  });
+
+  const filterInput = document.getElementById('session-filter');
+  let filterTimeout;
+  filterInput.addEventListener('input', () => {
+    clearTimeout(filterTimeout);
+    filterTimeout = setTimeout(() => {
+      state.sessionProject = filterInput.value.trim();
+      state.sessionPage = 1;
+      loadAll();
+    }, 300);
+  });
+
+  document.getElementById('session-sort').addEventListener('change', (e) => {
+    state.sessionSort = e.target.value;
+    state.sessionOrder = 'desc';
+    state.sessionPage = 1;
+    loadAll();
+  });
+
+  loadAll();
+}
+
+document.addEventListener('DOMContentLoaded', init);

package/public/js/charts/cache-efficiency.js

@@ -0,0 +1,29 @@
+export function renderCacheEfficiency(container, data) {
+  container.innerHTML = '';
+
+  const items = [
+    { label: 'Cache Read', value: data.cache_read_rate, color: '#4ade80', tokens: data.cache_read_tokens },
+    { label: 'Cache Creation', value: data.cache_creation_rate, color: '#f59e0b', tokens: data.cache_creation_tokens },
+    { label: 'No Cache', value: data.no_cache_rate, color: '#ef4444', tokens: data.non_cached_input_tokens },
+  ];
+
+  for (const item of items) {
+    const row = document.createElement('div');
+    row.style.marginBottom = '12px';
+
+    const header = document.createElement('div');
+    header.style.cssText = 'display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:4px';
+    header.innerHTML = `<span>${item.label}</span><span>${(item.value * 100).toFixed(1)}%</span>`;
+
+    const barBg = document.createElement('div');
+    barBg.style.cssText = 'height:8px;background:#334155;border-radius:4px;overflow:hidden';
+
+    const barFill = document.createElement('div');
+    barFill.style.cssText = `width:${item.value * 100}%;height:100%;background:${item.color};border-radius:4px;transition:width 0.5s`;
+
+    barBg.appendChild(barFill);
+    row.appendChild(header);
+    row.appendChild(barBg);
+    container.appendChild(row);
+  }
+}

package/public/js/charts/cost-comparison.js

@@ -0,0 +1,39 @@
+export function renderCostComparison(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  const margin = { top: 10, right: 20, bottom: 40, left: 50 };
+  const width = container.clientWidth - margin.left - margin.right;
+  const height = 180 - margin.top - margin.bottom;
+
+  const svg = el.append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const bars = [
+    { label: 'Subscription', value: data.subscription_cost_usd, color: '#3b82f6' },
+    { label: 'API Cost', value: data.api_equivalent_cost_usd, color: '#f59e0b' },
+  ];
+
+  const x = d3.scaleBand().domain(bars.map(d => d.label)).range([0, width]).padding(0.4);
+  const y = d3.scaleLinear().domain([0, d3.max(bars, d => d.value) * 1.2]).range([height, 0]);
+
+  svg.append('g').attr('transform', `translate(0,${height})`)
+    .call(d3.axisBottom(x))
+    .selectAll('text').style('fill', '#94a3b8').style('font-size', '11px');
+  svg.append('g').call(d3.axisLeft(y).ticks(4).tickFormat(d => `$${d}`))
+    .selectAll('text').style('fill', '#64748b').style('font-size', '10px');
+
+  svg.selectAll('.bar').data(bars).enter().append('rect')
+    .attr('x', d => x(d.label)).attr('y', d => y(d.value))
+    .attr('width', x.bandwidth()).attr('height', d => height - y(d.value))
+    .attr('fill', d => d.color).attr('rx', 4);
+
+  svg.selectAll('.label').data(bars).enter().append('text')
+    .attr('x', d => x(d.label) + x.bandwidth() / 2).attr('y', d => y(d.value) - 5)
+    .attr('text-anchor', 'middle')
+    .style('fill', '#f8fafc').style('font-size', '12px').style('font-weight', '600')
+    .text(d => `$${d.value.toFixed(2)}`);
+}

package/public/js/charts/model-distribution.js

@@ -0,0 +1,48 @@
+const MODEL_COLORS = {
+  'claude-sonnet-4-6': '#3b82f6',
+  'claude-opus-4-6': '#8b5cf6',
+  'claude-haiku-4-5': '#f59e0b',
+};
+
+const MODEL_DISPLAY = {
+  'claude-opus-4-6': 'opus 4.6',
+  'claude-sonnet-4-6': 'sonnet 4.6',
+  'claude-haiku-4-5': 'haiku 4.5',
+  'claude-haiku-4-5-20251001': 'haiku 4.5',
+};
+
+export function renderModelDistribution(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  if (!data.models || data.models.length === 0) {
+    el.append('p').style('color', '#64748b').text('No data');
+    return;
+  }
+
+  const size = Math.min(container.clientWidth, 200);
+  const radius = size / 2;
+  const innerRadius = radius * 0.55;
+
+  const wrapper = el.append('div').style('display', 'flex').style('align-items', 'center').style('gap', '20px');
+
+  const svg = wrapper.append('svg').attr('width', size).attr('height', size)
+    .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
+
+  const total = d3.sum(data.models, d => d.total_tokens);
+  const pie = d3.pie().value(d => d.total_tokens).sort(null);
+  const arc = d3.arc().innerRadius(innerRadius).outerRadius(radius);
+
+  svg.selectAll('path').data(pie(data.models)).enter().append('path')
+    .attr('d', arc).attr('fill', d => MODEL_COLORS[d.data.id] || '#64748b')
+    .attr('stroke', '#1e293b').attr('stroke-width', 2);
+
+  const legend = wrapper.append('div');
+  data.models.forEach(m => {
+    const pct = ((m.total_tokens / total) * 100).toFixed(1);
+    const color = MODEL_COLORS[m.id] || '#64748b';
+    const shortName = MODEL_DISPLAY[m.id] || m.id.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
+    legend.append('div').style('font-size', '11px').style('color', '#94a3b8').style('margin-bottom', '4px')
+      .html(`<span style="color:${color}">●</span> ${shortName} — ${pct}%`);
+  });
+}