npm - code-dash - Versions diffs - 1.0.0 - Mend

code-dash 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/src/dashboard.html ADDED Viewed

@@ -0,0 +1,846 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>ClaudeView — Session Analytics</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg: #0a0a0f;
+    --bg2: #111118;
+    --card: rgba(255,255,255,0.04);
+    --card-border: rgba(255,255,255,0.08);
+    --card-hover: rgba(255,255,255,0.07);
+    --purple: #7c3aed;
+    --purple-light: #a78bfa;
+    --cyan: #06b6d4;
+    --cyan-light: #67e8f9;
+    --green: #10b981;
+    --amber: #f59e0b;
+    --red: #ef4444;
+    --text: #e2e8f0;
+    --text-muted: #94a3b8;
+    --text-dim: #475569;
+    --border: rgba(255,255,255,0.08);
+    --radius: 12px;
+    --radius-sm: 8px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html { font-size: 14px; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  /* ── Header ── */
+  header {
+    position: sticky; top: 0; z-index: 100;
+    background: rgba(10,10,15,0.85);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+    padding: 0 24px;
+    height: 56px;
+    display: flex; align-items: center; gap: 16px;
+  }
+  .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
+  .logo-icon {
+    width: 28px; height: 28px; border-radius: 8px;
+    background: linear-gradient(135deg, var(--purple), var(--cyan));
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px; font-weight: 800; color: white;
+  }
+  .logo-text { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
+  .header-sep { color: var(--text-dim); }
+  .header-account { font-size: 12px; color: var(--text-muted); }
+  .header-spacer { flex: 1; }
+  .header-updated { font-size: 11px; color: var(--text-dim); }
+  .refresh-btn {
+    padding: 6px 12px; border-radius: var(--radius-sm);
+    background: var(--card); border: 1px solid var(--border);
+    color: var(--text-muted); font-size: 12px; cursor: pointer;
+    transition: all .15s;
+  }
+  .refresh-btn:hover { background: var(--card-hover); color: var(--text); }
+  /* ── Layout ── */
+  main { max-width: 1400px; margin: 0 auto; padding: 24px; }
+  /* ── Loading ── */
+  #loading {
+    position: fixed; inset: 0; background: var(--bg);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 16px; z-index: 200;
+  }
+  .spinner {
+    width: 36px; height: 36px; border-radius: 50%;
+    border: 3px solid var(--border);
+    border-top-color: var(--purple);
+    animation: spin .8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .loading-text { color: var(--text-muted); font-size: 13px; }
+  /* ── Section ── */
+  .section { margin-bottom: 32px; }
+  .section-title {
+    font-size: 12px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .8px; color: var(--text-muted); margin-bottom: 14px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .section-title::after {
+    content: ''; flex: 1; height: 1px; background: var(--border);
+  }
+  /* ── Cards ── */
+  .cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+  }
+  .card {
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 18px;
+    transition: border-color .15s, background .15s;
+  }
+  .card:hover { background: var(--card-hover); border-color: rgba(255,255,255,0.12); }
+  .card-label { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
+  .card-value { font-size: 26px; font-weight: 700; letter-spacing: -1px; line-height: 1; margin-bottom: 4px; }
+  .card-sub { font-size: 11px; color: var(--text-muted); }
+  .card-icon { font-size: 20px; margin-bottom: 10px; }
+  .c-purple { color: var(--purple-light); }
+  .c-cyan   { color: var(--cyan); }
+  .c-green  { color: var(--green); }
+  .c-amber  { color: var(--amber); }
+  .c-red    { color: var(--red); }
+  /* ── Charts grid ── */
+  .charts-row { display: grid; gap: 12px; margin-bottom: 12px; }
+  .charts-row-2 { grid-template-columns: 1fr 1fr; }
+  .charts-row-3 { grid-template-columns: 2fr 1fr; }
+  .chart-card {
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 20px;
+  }
+  .chart-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
+  .chart-subtitle { font-size: 11px; color: var(--text-muted); font-weight: 400; }
+  .chart-wrap { position: relative; }
+  .chart-wrap canvas { max-height: 240px; }
+  .chart-wrap-tall canvas { max-height: 300px; }
+  /* ── Heatmap ── */
+  .heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
+  .heatmap {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(7, 12px);
+    gap: 3px;
+    width: max-content;
+    min-width: 100%;
+  }
+  .hm-cell {
+    width: 12px; height: 12px; border-radius: 2px;
+    background: rgba(255,255,255,0.05);
+    transition: transform .1s;
+  }
+  .hm-cell:hover { transform: scale(1.4); z-index: 1; }
+  .hm-0 { background: rgba(255,255,255,0.04); }
+  .hm-1 { background: rgba(124,58,237,0.3); }
+  .hm-2 { background: rgba(124,58,237,0.55); }
+  .hm-3 { background: rgba(124,58,237,0.75); }
+  .hm-4 { background: rgba(124,58,237,1); }
+  .hm-labels { display: flex; gap: 4px; margin-top: 6px; }
+  .hm-month-labels {
+    display: grid; grid-auto-flow: column;
+    grid-template-rows: 1fr;
+    gap: 3px; width: max-content; min-width: 100%;
+    font-size: 10px; color: var(--text-dim); margin-bottom: 4px;
+  }
+  /* ── Tables ── */
+  .table-card {
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+  .table-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .table-title { font-size: 13px; font-weight: 600; }
+  .table-count { font-size: 11px; color: var(--text-muted); }
+  .table-wrap { overflow-x: auto; }
+  table { width: 100%; border-collapse: collapse; }
+  th {
+    padding: 10px 20px;
+    text-align: left; font-size: 11px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: .5px;
+    color: var(--text-dim);
+    border-bottom: 1px solid var(--border);
+    cursor: pointer; user-select: none; white-space: nowrap;
+  }
+  th:hover { color: var(--text-muted); }
+  td { padding: 12px 20px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
+  tr:last-child td { border-bottom: none; }
+  tr:hover td { background: rgba(255,255,255,0.02); }
+  .td-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; color: var(--text-muted); }
+  .td-path { color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+  .badge {
+    display: inline-block; padding: 2px 7px; border-radius: 99px;
+    font-size: 10px; font-weight: 600; letter-spacing: .3px;
+  }
+  .badge-purple { background: rgba(124,58,237,0.2); color: var(--purple-light); }
+  .badge-cyan   { background: rgba(6,182,212,0.15); color: var(--cyan); }
+  .badge-green  { background: rgba(16,185,129,0.15); color: var(--green); }
+  /* ── Model tag ── */
+  .model-tag {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 2px 8px; border-radius: 99px; font-size: 10px;
+    background: rgba(124,58,237,0.15); color: var(--purple-light); border: 1px solid rgba(124,58,237,0.25);
+  }
+  .model-haiku { background: rgba(6,182,212,0.1); color: var(--cyan); border-color: rgba(6,182,212,0.2); }
+  .model-opus  { background: rgba(245,158,11,0.1); color: var(--amber); border-color: rgba(245,158,11,0.2); }
+  /* ── Token bar ── */
+  .token-bar { display: flex; align-items: center; gap: 8px; }
+  .token-bar-track {
+    flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden;
+  }
+  .token-bar-fill { height: 100%; border-radius: 99px; }
+  /* ── Empty state ── */
+  .empty {
+    padding: 60px 20px; text-align: center;
+    color: var(--text-dim); font-size: 13px; line-height: 1.8;
+  }
+  .empty-icon { font-size: 36px; margin-bottom: 12px; }
+  /* ── Tab bar ── */
+  .tabs { display: flex; gap: 2px; margin-bottom: 16px; }
+  .tab {
+    padding: 7px 14px; border-radius: var(--radius-sm);
+    font-size: 12px; font-weight: 500; cursor: pointer;
+    color: var(--text-muted); border: none; background: transparent;
+    transition: all .15s;
+  }
+  .tab.active { background: var(--card); color: var(--text); }
+  .tab:hover:not(.active) { color: var(--text); }
+  /* ── Summary pills ── */
+  .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
+  .pill {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 5px 10px; border-radius: 99px;
+    font-size: 11px; font-weight: 500;
+    background: var(--card); border: 1px solid var(--border); color: var(--text-muted);
+  }
+  .pill-dot { width: 6px; height: 6px; border-radius: 50%; }
+  @media (max-width: 900px) {
+    .charts-row-2, .charts-row-3 { grid-template-columns: 1fr; }
+    .cards-grid { grid-template-columns: repeat(2, 1fr); }
+    main { padding: 16px; }
+  }
+  @media (max-width: 600px) {
+    .cards-grid { grid-template-columns: 1fr 1fr; }
+  }
+</style>
+</head>
+<body>
+<div id="loading">
+  <div class="spinner"></div>
+  <div class="loading-text">Reading your Claude sessions…</div>
+</div>
+<header>
+  <div class="logo">
+    <div class="logo-icon">CV</div>
+    <span class="logo-text">ClaudeView</span>
+  </div>
+  <span class="header-sep">/</span>
+  <span class="header-account" id="hdr-account">Loading…</span>
+  <div class="header-spacer"></div>
+  <span class="header-updated" id="hdr-updated"></span>
+  <button class="refresh-btn" onclick="loadData()">↻ Refresh</button>
+</header>
+<main id="app" style="display:none">
+  <!-- Overview cards -->
+  <div class="section">
+    <div class="section-title">Overview</div>
+    <div class="cards-grid" id="overview-cards"></div>
+  </div>
+  <!-- Token timeline + Model usage -->
+  <div class="section">
+    <div class="section-title">Token Usage</div>
+    <div class="charts-row charts-row-3">
+      <div class="chart-card">
+        <div class="chart-title">Daily Token Usage <span class="chart-subtitle" id="token-range"></span></div>
+        <div class="chart-wrap chart-wrap-tall"><canvas id="chart-tokens"></canvas></div>
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Model Distribution</div>
+        <div class="chart-wrap"><canvas id="chart-models"></canvas></div>
+        <div id="model-legend" style="margin-top:12px"></div>
+      </div>
+    </div>
+  </div>
+  <!-- Activity heatmap -->
+  <div class="section">
+    <div class="section-title">Activity Heatmap — last 12 months</div>
+    <div class="chart-card">
+      <div id="heatmap-months" class="hm-month-labels"></div>
+      <div class="heatmap-wrap">
+        <div class="heatmap" id="heatmap"></div>
+      </div>
+      <div style="margin-top:10px; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim)">
+        Less
+        <span class="hm-cell hm-0"></span>
+        <span class="hm-cell hm-1"></span>
+        <span class="hm-cell hm-2"></span>
+        <span class="hm-cell hm-3"></span>
+        <span class="hm-cell hm-4"></span>
+        More
+      </div>
+    </div>
+  </div>
+  <!-- Tool usage + Hourly distribution -->
+  <div class="section">
+    <div class="section-title">Activity Breakdown</div>
+    <div class="charts-row charts-row-2">
+      <div class="chart-card">
+        <div class="chart-title">Tool Usage</div>
+        <div class="chart-wrap chart-wrap-tall"><canvas id="chart-tools"></canvas></div>
+      </div>
+      <div class="chart-card">
+        <div class="chart-title">Hourly Activity Distribution</div>
+        <div class="chart-wrap chart-wrap-tall"><canvas id="chart-hours"></canvas></div>
+      </div>
+    </div>
+  </div>
+  <!-- Cache efficiency -->
+  <div class="section">
+    <div class="section-title">Token Breakdown</div>
+    <div class="chart-card">
+      <div class="chart-title">Input vs Output vs Cache <span class="chart-subtitle" id="cache-subtitle"></span></div>
+      <div class="charts-row" style="grid-template-columns:1fr 1fr; gap:24px; margin:0">
+        <div class="chart-wrap"><canvas id="chart-token-breakdown"></canvas></div>
+        <div id="token-breakdown-detail" style="display:flex;flex-direction:column;justify-content:center;gap:10px"></div>
+      </div>
+    </div>
+  </div>
+  <!-- Sessions table -->
+  <div class="section">
+    <div class="section-title">Sessions</div>
+    <div class="table-card">
+      <div class="table-header">
+        <span class="table-title">All Sessions</span>
+        <span class="table-count" id="sessions-count"></span>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Project</th>
+              <th>Date</th>
+              <th>Duration</th>
+              <th>Messages</th>
+              <th>Tokens</th>
+              <th>Cost</th>
+              <th>Model</th>
+              <th>Tools</th>
+            </tr>
+          </thead>
+          <tbody id="sessions-tbody"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <!-- Projects table -->
+  <div class="section">
+    <div class="section-title">Projects</div>
+    <div class="table-card">
+      <div class="table-header">
+        <span class="table-title">All Projects</span>
+        <span class="table-count" id="projects-count"></span>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Project</th>
+              <th>Sessions</th>
+              <th>Messages</th>
+              <th>Total Tokens</th>
+              <th>Cost</th>
+              <th>Top Tool</th>
+              <th>Last Active</th>
+            </tr>
+          </thead>
+          <tbody id="projects-tbody"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</main>
+<script>
+// ── Helpers ──────────────────────────────────────────────────────────────────
+const fmt = {
+  num: n => n == null ? '—' : n >= 1e6 ? (n/1e6).toFixed(2)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'K' : String(n),
+  tokens: n => n == null ? '—' : n >= 1e6 ? (n/1e6).toFixed(2)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'K' : n.toFixed(0),
+  cost: n => n == null ? '—' : n < 0.001 ? '<$0.001' : '$'+n.toFixed(n < 0.01 ? 4 : n < 1 ? 3 : 2),
+  dur: m => m === 0 ? '<1 min' : m < 60 ? m+'m' : (m/60).toFixed(1)+'h',
+  date: s => { if (!s) return '—'; const d = new Date(s); return d.toLocaleDateString('en-US', {month:'short',day:'numeric',year:'numeric'}); },
+  time: s => { if (!s) return '—'; const d = new Date(s); return d.toLocaleTimeString('en-US', {hour:'2-digit',minute:'2-digit'})+' '+d.toLocaleDateString('en-US', {month:'short',day:'numeric'}); },
+  pct: n => (n||0).toFixed(1)+'%',
+  shortId: s => s ? s.slice(0,8)+'…' : '—',
+};
+const COLORS = {
+  purple: '#7c3aed', purpleLight: '#a78bfa',
+  cyan: '#06b6d4', cyanLight: '#67e8f9',
+  green: '#10b981', amber: '#f59e0b', red: '#ef4444',
+  palette: ['#7c3aed','#06b6d4','#10b981','#f59e0b','#ef4444','#ec4899','#3b82f6','#8b5cf6'],
+};
+Chart.defaults.color = '#94a3b8';
+Chart.defaults.borderColor = 'rgba(255,255,255,0.06)';
+Chart.defaults.font.family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
+const charts = {};
+function destroyChart(id) { if (charts[id]) { charts[id].destroy(); delete charts[id]; } }
+function modelClass(m) {
+  if (!m) return '';
+  if (m.includes('haiku')) return 'model-haiku';
+  if (m.includes('opus'))  return 'model-opus';
+  return '';
+}
+function modelShort(m) {
+  if (!m) return '—';
+  return m.replace('claude-','').replace(/-20\d{6}$/,'');
+}
+// ── Load Data ────────────────────────────────────────────────────────────────
+let _data = null;
+async function loadData() {
+  document.getElementById('loading').style.display = 'flex';
+  document.getElementById('app').style.display = 'none';
+  try {
+    const res = await fetch('/api/data');
+    _data = await res.json();
+    render(_data);
+  } catch(e) {
+    document.getElementById('loading').innerHTML = `
+      <div style="color:#ef4444;font-size:13px">Failed to load data: ${e.message}</div>
+    `;
+  }
+}
+// ── Render ───────────────────────────────────────────────────────────────────
+function render(d) {
+  renderHeader(d);
+  renderOverviewCards(d);
+  renderTokenChart(d);
+  renderModelChart(d);
+  renderHeatmap(d);
+  renderToolChart(d);
+  renderHourlyChart(d);
+  renderTokenBreakdown(d);
+  renderSessionsTable(d);
+  renderProjectsTable(d);
+  document.getElementById('loading').style.display = 'none';
+  document.getElementById('app').style.display = 'block';
+}
+function renderHeader(d) {
+  const acc = d.account;
+  document.getElementById('hdr-account') .textContent =
+    acc.email ? `${acc.email}${acc.organization ? ' · '+acc.organization : ''}` : 'Local sessions';
+  document.getElementById('hdr-updated').textContent =
+    'Updated ' + new Date(d.meta.analyzedAt).toLocaleTimeString();
+}
+function renderOverviewCards(d) {
+  const ov = d.overview;
+  const totalT = ov.tokens.input + ov.tokens.output + ov.tokens.cacheCreation + ov.tokens.cacheRead;
+  const avgSessionMsgs = ov.totalSessions > 0
+    ? (ov.totalMessages.total / ov.totalSessions).toFixed(1)
+    : 0;
+  const cards = [
+    { icon: '◈', label: 'Total Tokens', value: fmt.tokens(totalT), sub: `${fmt.tokens(ov.tokens.input)} in · ${fmt.tokens(ov.tokens.output)} out`, cls: 'c-purple' },
+    { icon: '$', label: 'Estimated Cost', value: fmt.cost(ov.costUSD), sub: `across ${ov.totalSessions} sessions`, cls: 'c-green' },
+    { icon: '⌂', label: 'Sessions', value: fmt.num(ov.totalSessions), sub: `${ov.dateRange.activeDays} active days`, cls: 'c-cyan' },
+    { icon: '⬡', label: 'Projects', value: fmt.num(ov.totalProjects), sub: `${fmt.num(ov.totalMessages.total)} total messages`, cls: 'c-amber' },
+    { icon: '⚙', label: 'Tool Calls', value: fmt.num(ov.toolCalls), sub: `${avgSessionMsgs} msgs/session avg`, cls: 'c-purple' },
+    { icon: '⚡', label: 'Cache Hit Rate', value: `${ov.tokens.cacheHitRate}%`, sub: `${fmt.tokens(ov.tokens.cacheRead)} tokens saved`, cls: 'c-cyan' },
+  ];
+  document.getElementById('overview-cards').innerHTML = cards.map(c => `
+    <div class="card">
+      <div class="card-label">${c.label}</div>
+      <div class="card-value ${c.cls}">${c.value}</div>
+      <div class="card-sub">${c.sub}</div>
+    </div>
+  `).join('');
+}
+function renderTokenChart(d) {
+  destroyChart('tokens');
+  const daily = d.dailyActivity;
+  if (!daily.length) return;
+  const labels = daily.map(x => {
+    const dt = new Date(x.date);
+    return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  });
+  const inputData  = daily.map(x => x.tokens);
+  const first = daily[0]?.date, last = daily[daily.length-1]?.date;
+  document.getElementById('token-range').textContent =
+    first ? `${fmt.date(first)} – ${fmt.date(last)}` : '';
+  const ctx = document.getElementById('chart-tokens').getContext('2d');
+  const gradient = ctx.createLinearGradient(0, 0, 0, 280);
+  gradient.addColorStop(0, 'rgba(124,58,237,0.35)');
+  gradient.addColorStop(1, 'rgba(124,58,237,0)');
+  charts['tokens'] = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [{
+        label: 'Tokens',
+        data: inputData,
+        borderColor: COLORS.purple,
+        backgroundColor: gradient,
+        borderWidth: 2,
+        fill: true,
+        tension: 0.4,
+        pointRadius: daily.length > 30 ? 0 : 3,
+        pointHoverRadius: 5,
+        pointBackgroundColor: COLORS.purple,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => ` ${fmt.tokens(ctx.raw)} tokens`
+          }
+        }
+      },
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 8, font: { size: 10 } } },
+        y: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { callback: v => fmt.tokens(v), font: { size: 10 } } }
+      }
+    }
+  });
+}
+function renderModelChart(d) {
+  destroyChart('models');
+  const models = Object.entries(d.models || {});
+  if (!models.length) return;
+  const labels = models.map(([m]) => modelShort(m));
+  const data   = models.map(([,v]) => v.inputTokens + v.outputTokens);
+  const colors = models.map((_, i) => COLORS.palette[i % COLORS.palette.length]);
+  const ctx = document.getElementById('chart-models').getContext('2d');
+  charts['models'] = new Chart(ctx, {
+    type: 'doughnut',
+    data: { labels, datasets: [{ data, backgroundColor: colors, borderWidth: 0, hoverOffset: 6 }] },
+    options: {
+      responsive: true, maintainAspectRatio: true,
+      cutout: '65%',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: { label: ctx => ` ${modelShort(ctx.label)}: ${fmt.tokens(ctx.raw)} tokens` }
+        }
+      }
+    }
+  });
+  // Custom legend
+  document.getElementById('model-legend').innerHTML = models.map(([m, v], i) => `
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11px">
+      <span style="width:8px;height:8px;border-radius:50%;background:${colors[i]};flex-shrink:0"></span>
+      <span style="color:var(--text-muted);flex:1">${modelShort(m)}</span>
+      <span style="color:var(--text)">${fmt.tokens(v.inputTokens + v.outputTokens)}</span>
+    </div>
+  `).join('');
+}
+function renderHeatmap(d) {
+  const daily = d.dailyActivity || [];
+  const dayMap = {};
+  for (const x of daily) dayMap[x.date] = x.tokens;
+  const maxTokens = Math.max(...Object.values(dayMap), 1);
+  const today = new Date();
+  const weeks = 52;
+  const totalDays = weeks * 7;
+  // Start from (today - totalDays) aligned to Sunday
+  const start = new Date(today);
+  start.setDate(start.getDate() - totalDays + 1);
+  // Align to Sunday
+  const dow = start.getDay();
+  start.setDate(start.getDate() - dow);
+  let cells = '';
+  let monthLabels = new Array(weeks * 7).fill('');
+  for (let w = 0; w < weeks; w++) {
+    for (let day = 0; day < 7; day++) {
+      const d2 = new Date(start);
+      d2.setDate(start.getDate() + w * 7 + day);
+      const dateKey = d2.toISOString().slice(0, 10);
+      const tokens = dayMap[dateKey] || 0;
+      const level = tokens === 0 ? 0
+        : tokens < maxTokens * 0.25 ? 1
+        : tokens < maxTokens * 0.5  ? 2
+        : tokens < maxTokens * 0.75 ? 3
+        : 4;
+      const title = tokens > 0
+        ? `${dateKey}: ${fmt.tokens(tokens)} tokens`
+        : dateKey;
+      cells += `<div class="hm-cell hm-${level}" title="${title}"></div>`;
+    }
+  }
+  // Month labels
+  const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  let monthHTML = '';
+  let lastMonth = -1;
+  for (let w = 0; w < weeks; w++) {
+    const d2 = new Date(start);
+    d2.setDate(start.getDate() + w * 7);
+    const m = d2.getMonth();
+    if (m !== lastMonth) {
+      monthHTML += `<span style="grid-column:span 1">${monthNames[m]}</span>`;
+      lastMonth = m;
+    } else {
+      monthHTML += `<span></span>`;
+    }
+  }
+  document.getElementById('heatmap').innerHTML = cells;
+  document.getElementById('heatmap-months').innerHTML = monthHTML;
+}
+function renderToolChart(d) {
+  destroyChart('tools');
+  const tools = Object.entries(d.tools || {}).sort((a,b) => b[1]-a[1]).slice(0, 12);
+  if (!tools.length) return;
+  const labels = tools.map(([t]) => t);
+  const data   = tools.map(([,c]) => c);
+  charts['tools'] = new Chart(document.getElementById('chart-tools').getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [{
+        data,
+        backgroundColor: labels.map((_, i) => `rgba(124,58,237,${0.9 - i*0.06})`),
+        borderRadius: 5,
+        borderSkipped: false,
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      responsive: true, maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: { callbacks: { label: ctx => ` ${fmt.num(ctx.raw)} calls` } }
+      },
+      scales: {
+        x: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { font: { size: 10 } } },
+        y: { grid: { display: false }, ticks: { font: { size: 11 } } }
+      }
+    }
+  });
+}
+function renderHourlyChart(d) {
+  destroyChart('hours');
+  const hourly = d.hourlyDistribution || new Array(24).fill(0);
+  const labels = Array.from({length:24}, (_,i) => {
+    const h = i % 12 || 12;
+    return `${h}${i < 12 ? 'am' : 'pm'}`;
+  });
+  const maxH = Math.max(...hourly, 1);
+  const colors = hourly.map(v => {
+    const intensity = v / maxH;
+    return `rgba(6,182,212,${0.2 + intensity * 0.8})`;
+  });
+  charts['hours'] = new Chart(document.getElementById('chart-hours').getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [{
+        data: hourly,
+        backgroundColor: colors,
+        borderRadius: 4,
+        borderSkipped: false,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: { callbacks: { label: ctx => ` ${fmt.num(ctx.raw)} messages` } }
+      },
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 12, font: { size: 10 } } },
+        y: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { font: { size: 10 } } }
+      }
+    }
+  });
+}
+function renderTokenBreakdown(d) {
+  destroyChart('token-breakdown');
+  const t = d.overview.tokens;
+  const total = t.input + t.output + t.cacheCreation + t.cacheRead || 1;
+  const breakdown = [
+    { label: 'Input',          value: t.input,        color: COLORS.purple, pct: t.input/total*100 },
+    { label: 'Output',         value: t.output,       color: COLORS.cyan,   pct: t.output/total*100 },
+    { label: 'Cache Creation', value: t.cacheCreation, color: COLORS.amber, pct: t.cacheCreation/total*100 },
+    { label: 'Cache Read',     value: t.cacheRead,    color: COLORS.green,  pct: t.cacheRead/total*100 },
+  ].filter(x => x.value > 0);
+  document.getElementById('cache-subtitle').textContent =
+    `Cache efficiency: ${t.cacheHitRate}% hit rate`;
+  charts['token-breakdown'] = new Chart(
+    document.getElementById('chart-token-breakdown').getContext('2d'), {
+    type: 'doughnut',
+    data: {
+      labels: breakdown.map(x => x.label),
+      datasets: [{ data: breakdown.map(x => x.value), backgroundColor: breakdown.map(x => x.color), borderWidth: 0, hoverOffset: 4 }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: true,
+      cutout: '60%',
+      plugins: {
+        legend: { display: false },
+        tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${fmt.tokens(ctx.raw)}` } }
+      }
+    }
+  });
+  document.getElementById('token-breakdown-detail').innerHTML = breakdown.map(x => `
+    <div>
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
+        <span style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)">
+          <span style="width:8px;height:8px;border-radius:50%;background:${x.color};flex-shrink:0"></span>
+          ${x.label}
+        </span>
+        <span style="font-size:12px;font-weight:600;color:var(--text)">${fmt.tokens(x.value)}</span>
+      </div>
+      <div class="token-bar-track">
+        <div class="token-bar-fill" style="width:${x.pct.toFixed(1)}%;background:${x.color}"></div>
+      </div>
+    </div>
+  `).join('');
+}
+function renderSessionsTable(d) {
+  const sessions = d.sessions || [];
+  document.getElementById('sessions-count').textContent = `${sessions.length} sessions`;
+  if (!sessions.length) {
+    document.getElementById('sessions-tbody').innerHTML =
+      '<tr><td colspan="8"><div class="empty"><div class="empty-icon">📭</div>No sessions found</div></td></tr>';
+    return;
+  }
+  document.getElementById('sessions-tbody').innerHTML = sessions.map(s => `
+    <tr>
+      <td>
+        <div style="font-weight:500">${s.projectName || '—'}</div>
+        <div class="td-path" style="font-size:10px;color:var(--text-dim)">${s.project}</div>
+      </td>
+      <td style="color:var(--text-muted)">${fmt.time(s.startTime)}</td>
+      <td>${fmt.dur(s.durationMinutes)}</td>
+      <td>
+        <span class="badge badge-purple">${s.userMessages}↑</span>
+        <span class="badge badge-cyan" style="margin-left:3px">${s.assistantMessages}↓</span>
+      </td>
+      <td style="font-variant-numeric:tabular-nums">${fmt.tokens(s.tokens.total)}</td>
+      <td style="color:var(--green)">${fmt.cost(s.costUSD)}</td>
+      <td><span class="model-tag ${modelClass(s.model)}">${modelShort(s.model)}</span></td>
+      <td style="color:var(--text-muted)">${fmt.num(s.toolCalls)}</td>
+    </tr>
+  `).join('');
+}
+function renderProjectsTable(d) {
+  const projects = d.projects || [];
+  document.getElementById('projects-count').textContent = `${projects.length} projects`;
+  if (!projects.length) {
+    document.getElementById('projects-tbody').innerHTML =
+      '<tr><td colspan="7"><div class="empty"><div class="empty-icon">📂</div>No projects found</div></td></tr>';
+    return;
+  }
+  document.getElementById('projects-tbody').innerHTML = projects.map(p => {
+    const topTool = Object.entries(p.tools || {}).sort((a,b)=>b[1]-a[1])[0];
+    return `
+    <tr>
+      <td>
+        <div style="font-weight:500">${p.name}</div>
+        <div class="td-path" style="font-size:10px;color:var(--text-dim)">${p.path}</div>
+      </td>
+      <td>${p.sessions}</td>
+      <td>${fmt.num(p.messages)}</td>
+      <td style="font-variant-numeric:tabular-nums">${fmt.tokens(p.tokens.total)}</td>
+      <td style="color:var(--green)">${fmt.cost(p.costUSD)}</td>
+      <td>${topTool ? `<span class="badge badge-purple">${topTool[0]}</span>` : '—'}</td>
+      <td style="color:var(--text-muted)">${fmt.date(p.lastActive)}</td>
+    </tr>
+  `}).join('');
+}
+// ── Init ─────────────────────────────────────────────────────────────────────
+loadData();
+</script>
+</body>
+</html>