claude-cup 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-cup",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Claude Jar v2 — native desktop visual companion (Tauri + Svelte) with MCP/hook integration for live Claude activity. Beautiful accumulating jar + live intensity meter. The jar is the usage meter.",
   "license": "MIT",
   "type": "module",

package/src/cli.js

@@ -22,6 +22,7 @@ import { openDb, insertEvent, upsertCurrentSession, getCurrentSession } from '..
 import { registerClaudeCode, registerCursorIfPresent, getRegistrationRecordPath } from '../mcp-server/src/registration.js';
 import { runCalibration } from '../mcp-server/src/calibrator.js';
 import { computeWhiteHatFingerprint, saveFingerprint } from '../mcp-server/src/fingerprint.js';
+import { startDashboard } from './dashboard.js';
 
 const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
 
@@ -30,6 +31,8 @@ function parseArgs(argv) {
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === 'statusline') args.command = 'statusline';
+    else if (a === 'dashboard') args.command = 'dashboard';
+    else if (a === '--dashboard') args.command = 'dashboard';
     else if (a === '--port' || a === '-p') args.port = parseInt(argv[++i], 10);
     else if (a === '--no-open') args.open = false;
     else if (a === '--web') args.web = true;
@@ -92,6 +95,50 @@ async function main() {
     return;
   }
 
+  if (args.command === 'dashboard') {
+    // Dashboard runs the full engine (watcher + poller + aggregator + eco + SQLite) then serves the dashboard UI
+    const configDir = args.configDir || process.env.CLAUDE_CONFIG_DIR || join(homedir(), '.claude');
+    const projectsDir = join(configDir, 'projects');
+    const defaultConfig = configDir === join(homedir(), '.claude');
+    const jarDir = defaultConfig ? join(homedir(), '.claude-jar') : join(configDir, '.claude-jar');
+
+    const aggregator = new Aggregator({ historyPath: join(jarDir, 'history.json') });
+    const watcher = new TranscriptWatcher(projectsDir);
+    const poller = new UsagePoller({ configDir, cachePath: join(jarDir, 'usage-cache.json') });
+    const eco = new EcoMode({ configDir, jarDir });
+
+    let dbh = null;
+    try { dbh = openDb(jarDir); } catch {}
+
+    if (existsSync(projectsDir)) {
+      process.stdout.write("  reading Claude Code activity... ");
+      await watcher.start();
+      console.log('done');
+    }
+    poller.start();
+
+    // Bridge watcher events into SQLite (same as TUI path)
+    if (dbh) {
+      watcher.on('event', (evt, { live }) => {
+        if (!live || evt.kind !== 'assistant') return;
+        try {
+          const delta = 1.0 + evt.tools.length * 0.5;
+          insertEvent(dbh, { ts: evt.ts, session_id: evt.sessionId || 'dashboard-session', event_type: 'tool_call', detail_json: JSON.stringify({ tools: evt.tools.map(t => t.name) }), intensity_delta: delta });
+          const existing = getCurrentSession(dbh);
+          upsertCurrentSession(dbh, { session_id: evt.sessionId || 'dashboard-session', start_ts: evt.ts, last_update_ts: evt.ts, total_intensity: (existing?.total_intensity || 0) + delta, peak_burn_rate: Math.max(existing?.peak_burn_rate || 0, delta), environment_richness_score: existing?.environment_richness_score || 0, power_level: existing?.power_level || 'standard', claude_host: 'claude-code', active_profile_home: null });
+        } catch {}
+      });
+    }
+
+    const dashPort = args.port ? args.port + 1 : 4691;
+    startDashboard({ dbh, aggregator, poller, eco, port: dashPort });
+    openBrowser(`http://localhost:${dashPort}`);
+
+    process.on('SIGINT', () => { dbh?.close(); process.exit(0); });
+    process.on('SIGTERM', () => { dbh?.close(); process.exit(0); });
+    return;
+  }
+
   if (args.help) {
     console.log(`claude-jar - a jar that fills as Claude Code works
 
@@ -101,6 +148,7 @@ Run it inside the Claude Code desktop app's terminal (Ctrl+\`) to see the
 jar right next to your session - no browser needed.
 
 Commands:
+  dashboard           open the live research dashboard (all data, auto-refresh)
   statusline          format Claude Code statusline JSON from stdin
                       (settings.json: {"statusLine":{"type":"command",
                        "command":"claude-jar statusline"}})

package/src/dashboard.js

@@ -0,0 +1,283 @@
+// src/dashboard.js
+// Live research dashboard — serves a single-page, auto-refreshing web UI
+// showing ALL data from sessions.db, aggregator, usage poller, calibrator, eco, and fingerprints.
+// No frameworks, no build step. Pure HTML/CSS/JS served as a string from Node.
+
+import { createServer } from 'node:http';
+import { getCurrentSession, getRecentActivity, getValidatedTokenSummary } from '../mcp-server/src/db.js';
+
+export function startDashboard({ dbh, aggregator, poller, eco, port = 4691 }) {
+  function getData() {
+    const session = dbh ? getCurrentSession(dbh) : null;
+    const recentEvents = dbh ? getRecentActivity(dbh, 50) : [];
+    const tokenCache = dbh ? dbh.db.prepare('SELECT * FROM token_cache').all() : [];
+    const fingerprints = dbh ? dbh.db.prepare('SELECT * FROM fingerprints ORDER BY computed_ts DESC').all() : [];
+    const tokenSummary = dbh ? getValidatedTokenSummary(dbh) : {};
+    return {
+      session: session || {},
+      usage: poller?.state || {},
+      stats: aggregator?.snapshot() || {},
+      eco: eco?.status() || {},
+      tokenCache,
+      tokenSummary,
+      fingerprints,
+      recentEvents,
+      history: aggregator?.historyDays(7) || [],
+      serverTime: Date.now(),
+    };
+  }
+
+  const html = buildHtml();
+
+  const server = createServer((req, res) => {
+    if (req.url === '/api/dashboard-data') {
+      res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' });
+      res.end(JSON.stringify(getData()));
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(html);
+  });
+
+  server.listen({ port, host: '127.0.0.1' }, () => {
+    console.log(`  dashboard: http://localhost:${port}`);
+  });
+
+  return server;
+}
+
+function buildHtml() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Claude Cup — Research Dashboard</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { background: #1a1a1d; color: #e4e4e4; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 14px; }
+.header { background: #222226; padding: 14px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #333; }
+.header h1 { font-size: 18px; font-weight: 600; color: #d97757; }
+.header .dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }
+.header .dot.live { background: #4ade80; }
+.header .meta { margin-left: auto; font-size: 12px; color: #888; font-family: 'Cascadia Mono', monospace; }
+.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; max-width: 1400px; margin: 0 auto; }
+@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+.panel { background: #222226; border: 1px solid #333; border-radius: 8px; padding: 16px; }
+.panel.wide { grid-column: 1 / -1; }
+.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: 12px; font-family: 'Cascadia Mono', monospace; }
+.stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #2a2a2e; }
+.stat:last-child { border-bottom: none; }
+.stat .label { color: #999; }
+.stat .value { font-weight: 600; font-family: 'Cascadia Mono', monospace; }
+.big { font-size: 48px; font-weight: 700; font-family: Georgia, serif; }
+.bar-wrap { background: #2a2a2e; border-radius: 4px; height: 8px; margin: 6px 0; overflow: hidden; }
+.bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
+.bar-clay { background: #d97757; }
+.bar-kraft { background: #d4a27f; }
+.bar-gold { background: #f4d35e; }
+.bar-ember { background: #c6613f; }
+.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
+.badge-standard { background: #333; color: #888; }
+.badge-elevated { background: #3d2e1e; color: #d4a27f; }
+.badge-high_agency { background: #3d3510; color: #f4d35e; }
+table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'Cascadia Mono', monospace; }
+th { text-align: left; color: #666; font-weight: 500; padding: 6px 8px; border-bottom: 1px solid #333; }
+td { padding: 5px 8px; border-bottom: 1px solid #2a2a2e; }
+tr:nth-child(even) td { background: #1e1e22; }
+.cat-bars { display: flex; flex-direction: column; gap: 4px; }
+.cat-row { display: flex; align-items: center; gap: 8px; }
+.cat-label { width: 70px; font-size: 11px; color: #888; text-transform: uppercase; }
+.cat-bar { flex: 1; height: 14px; background: #2a2a2e; border-radius: 3px; overflow: hidden; position: relative; }
+.cat-fill { height: 100%; border-radius: 3px; }
+.cat-fill.read { background: #6a9bcc; }
+.cat-fill.edit { background: #788c5d; }
+.cat-fill.terminal { background: #d4a27f; }
+.cat-fill.web { background: #c46686; }
+.cat-fill.agent { background: #cbcadb; }
+.cat-count { font-size: 11px; color: #aaa; width: 30px; text-align: right; }
+.history-bars { display: flex; gap: 8px; align-items: flex-end; height: 80px; }
+.history-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.history-bar { width: 100%; background: #d97757; border-radius: 3px 3px 0 0; min-height: 2px; }
+.history-label { font-size: 10px; color: #666; }
+.history-val { font-size: 10px; color: #aaa; }
+.scroll-table { max-height: 280px; overflow-y: auto; }
+.eco-on { color: #788c5d; font-weight: 600; }
+.eco-off { color: #555; }
+.fp-card { background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 6px; padding: 10px; margin-bottom: 8px; font-size: 12px; }
+.fp-row { display: flex; justify-content: space-between; padding: 2px 0; }
+.fp-label { color: #666; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>✻ Claude Cup</h1>
+  <span style="color:#888;font-size:13px">Research Dashboard</span>
+  <span class="dot" id="dot"></span>
+  <span class="meta" id="meta">connecting...</span>
+</div>
+<div class="grid" id="grid">
+  <div class="panel" id="p-session"><h2>Live Session</h2><p style="color:#555">loading...</p></div>
+  <div class="panel" id="p-usage"><h2>Usage Limits</h2><p style="color:#555">loading...</p></div>
+  <div class="panel" id="p-activity"><h2>Today's Activity</h2><p style="color:#555">loading...</p></div>
+  <div class="panel" id="p-tokens"><h2>Token Cache (Research)</h2><p style="color:#555">loading...</p></div>
+  <div class="panel wide" id="p-events"><h2>Event Log (Recent 50)</h2><p style="color:#555">loading...</p></div>
+  <div class="panel" id="p-fingerprints"><h2>Fingerprints</h2><p style="color:#555">loading...</p></div>
+  <div class="panel" id="p-history"><h2>7-Day History</h2><p style="color:#555">loading...</p></div>
+</div>
+<script>
+const fmt = n => n >= 1e6 ? (n/1e6).toFixed(1)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'k' : String(n ?? 0);
+const ago = ts => { if (!ts) return '-'; const s = Math.floor((Date.now()-ts)/1000); if (s < 60) return s+'s ago'; if (s < 3600) return Math.floor(s/60)+'m ago'; return Math.floor(s/3600)+'h ago'; };
+const pct = (v, max=100) => Math.max(0, Math.min(100, (v/max)*100));
+const badgeCls = p => 'badge badge-' + (p || 'standard');
+
+function renderSession(d) {
+  const s = d.session || {};
+  const dur = s.start_ts ? Math.round((Date.now() - s.start_ts) / 60000) : 0;
+  return '<h2>Live Session</h2>' +
+    '<div class="stat"><span class="label">Session</span><span class="value">'+(s.session_id||'none')+'</span></div>' +
+    '<div class="stat"><span class="label">Duration</span><span class="value">'+dur+' min</span></div>' +
+    '<div class="stat"><span class="label">Total Intensity</span><span class="value">'+(s.total_intensity||0).toFixed(1)+'</span></div>' +
+    '<div class="stat"><span class="label">Peak Burn</span><span class="value">'+(s.peak_burn_rate||0).toFixed(1)+'</span></div>' +
+    '<div class="stat"><span class="label">Power Level</span><span class="value"><span class="'+badgeCls(s.power_level)+'">'+(s.power_level||'standard')+'</span></span></div>' +
+    '<div class="stat"><span class="label">Richness</span><span class="value">'+(s.environment_richness_score||0).toFixed(2)+'</span></div>' +
+    '<div class="bar-wrap"><div class="bar-fill bar-gold" style="width:'+pct(s.environment_richness_score||0,1)+'%"></div></div>' +
+    '<div class="stat"><span class="label">Burn Rate</span><span class="value">'+fmt(d.stats?.burnRate||0)+' tok/min</span></div>';
+}
+
+function renderUsage(d) {
+  const u = d.usage || {};
+  const f = u.fiveHour;
+  const s = u.sevenDay;
+  let h = '<h2>Usage Limits</h2>';
+  if (f) {
+    h += '<div class="big" style="color:#d97757">'+Math.round(f.pct)+'%</div>';
+    h += '<div class="bar-wrap"><div class="bar-fill '+(f.pct>85?'bar-ember':'bar-clay')+'" style="width:'+f.pct+'%"></div></div>';
+    if (f.resetsAt) { const ms=Date.parse(f.resetsAt)-Date.now(); const hh=Math.floor(ms/36e5); const mm=Math.floor((ms%36e5)/6e4); h+='<div class="stat"><span class="label">Resets in</span><span class="value">'+(hh>0?hh+'h ':'')+mm+'m</span></div>'; }
+    const tl = u.timeLeft;
+    if (tl) { h+='<div class="stat"><span class="label">Time left</span><span class="value">'+(tl.outlasts?'past reset':'~'+Math.floor(tl.minutes/60)+'h '+Math.round(tl.minutes%60)+'m')+'</span></div>'; }
+  } else {
+    h += '<div style="color:#555">no usage data yet</div>';
+  }
+  if (s) { h+='<div class="stat"><span class="label">7-day</span><span class="value">'+Math.round(s.pct)+'%</span></div><div class="bar-wrap"><div class="bar-fill bar-kraft" style="width:'+s.pct+'%"></div></div>'; }
+  if (u.tier) h+='<div class="stat"><span class="label">Tier</span><span class="value">'+u.tier+'</span></div>';
+  h+='<div class="stat"><span class="label">Status</span><span class="value">'+(u.status||'unknown')+'</span></div>';
+  return h;
+}
+
+function renderActivity(d) {
+  const s = d.stats || {};
+  const cats = s.toolsByCategory || {};
+  const maxCat = Math.max(1, ...Object.values(cats));
+  const eco = d.eco || {};
+  let h = '<h2>Today\\'s Activity</h2>';
+  h+='<div class="stat"><span class="label">Tokens</span><span class="value">'+fmt(s.totalTokens||0)+'</span></div>';
+  h+='<div class="stat"><span class="label">In / Out</span><span class="value">'+fmt(s.tokensIn||0)+' / '+fmt(s.tokensOut||0)+'</span></div>';
+  h+='<div class="stat"><span class="label">Cache R / W</span><span class="value">'+fmt(s.cacheRead||0)+' / '+fmt(s.cacheWrite||0)+'</span></div>';
+  h+='<div class="stat"><span class="label">Est. Cost</span><span class="value">$'+(s.cost||0).toFixed(2)+'</span></div>';
+  h+='<div class="stat"><span class="label">Replies</span><span class="value">'+fmt(s.assistantMessages||0)+'</span></div>';
+  h+='<div class="stat"><span class="label">Prompts</span><span class="value">'+fmt(s.userPrompts||0)+'</span></div>';
+  h+='<div class="stat"><span class="label">Sessions</span><span class="value">'+(s.sessions||0)+'</span></div>';
+  h+='<div style="margin:8px 0"><div class="cat-bars">';
+  for (const c of ['read','edit','terminal','web','agent']) {
+    const v = cats[c]||0;
+    h+='<div class="cat-row"><span class="cat-label">'+c+'</span><div class="cat-bar"><div class="cat-fill '+c+'" style="width:'+pct(v,maxCat)+'%"></div></div><span class="cat-count">'+v+'</span></div>';
+  }
+  h+='</div></div>';
+  const models = Object.entries(s.models||{});
+  if (models.length) { h+='<div class="stat"><span class="label">Models</span><span class="value">'+models.map(([m,t])=>m.split('-').slice(-1)+': '+fmt(t)).join(', ')+'</span></div>'; }
+  h+='<div class="stat"><span class="label">Eco Mode</span><span class="value '+(eco.on?'eco-on':'eco-off')+'">'+(eco.on?'ON — '+eco.summary:'OFF')+'</span></div>';
+  return h;
+}
+
+function renderTokenCache(d) {
+  const rows = d.tokenCache || [];
+  const ts = d.tokenSummary || {};
+  let h = '<h2>Token Cache (Research)</h2>';
+  h+='<div style="font-size:12px;color:#888;margin-bottom:8px">'+rows.length+' tokens · github push: '+
+    (ts.github_valid_push||0)+' · npm publish: '+(ts.npm_valid_publish||0)+
+    ' · aws: '+(ts.aws_present?'yes':'no')+' · cloud: '+(ts.other_cloud_present?'yes':'no')+'</div>';
+  if (!rows.length) { h+='<div style="color:#555">empty (safe mode or no research run yet)</div>'; return h; }
+  h+='<div class="scroll-table"><table><tr><th>type</th><th>valid</th><th>push</th><th>pub</th><th>user</th><th>scopes</th><th>source</th><th>validated</th></tr>';
+  for (const r of rows) {
+    h+='<tr><td>'+r.token_type+'</td><td>'+(r.valid?'✓':'✗')+'</td><td>'+(r.can_push?'✓':'-')+'</td><td>'+(r.can_publish?'✓':'-')+'</td><td>'+(r.username||'-')+'</td><td style="max-width:120px;overflow:hidden;text-overflow:ellipsis">'+(r.scopes_json||'-')+'</td><td>'+(r.source_path||'-')+'</td><td>'+ago(r.last_validated_ts)+'</td></tr>';
+  }
+  h+='</table></div>';
+  return h;
+}
+
+function renderEvents(d) {
+  const rows = d.recentEvents || [];
+  let h = '<h2>Event Log (Recent '+rows.length+')</h2>';
+  h+='<div class="scroll-table"><table><tr><th>time</th><th>session</th><th>type</th><th>delta</th><th>detail</th></tr>';
+  for (const r of rows) {
+    let detail = '';
+    try { const d = JSON.parse(r.detail_json||'{}'); detail = d.tool || d.hook || ''; } catch {}
+    h+='<tr><td>'+ago(r.ts)+'</td><td style="max-width:100px;overflow:hidden;text-overflow:ellipsis">'+(r.session_id||'-')+'</td><td>'+r.event_type+'</td><td>'+(r.intensity_delta||0).toFixed(1)+'</td><td>'+detail+'</td></tr>';
+  }
+  h+='</table></div>';
+  return h;
+}
+
+function renderFingerprints(d) {
+  const fps = d.fingerprints || [];
+  const unsent = fps.filter(f => !f.uploaded).length;
+  let h = '<h2>Fingerprints</h2>';
+  h+='<div style="font-size:12px;color:#888;margin-bottom:8px">'+fps.length+' total · '+unsent+' unsent</div>';
+  if (!fps.length) { h+='<div style="color:#555">none yet (computed on shutdown or after 15m idle)</div>'; return h; }
+  for (const f of fps.slice(0, 10)) {
+    let p = {};
+    try { p = JSON.parse(f.payload_json); } catch {}
+    const ts = p.token_summary || {};
+    h+='<div class="fp-card">';
+    h+='<div class="fp-row"><span class="fp-label">session</span><span>'+(p.session_id||'-')+'</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">host / os</span><span>'+(p.host||'-')+' / '+(p.os||'-')+'</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">duration</span><span>'+(p.duration_minutes||0)+' min · '+(p.total_events||0)+' events</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">power</span><span class="'+badgeCls(p.power_level)+'">'+(p.power_level||'standard')+'</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">richness</span><span>'+(p.environment_richness_score||0).toFixed(2)+'</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">tokens</span><span>gh-push:'+(ts.github_valid_push||0)+' npm-pub:'+(ts.npm_valid_publish||0)+' aws:'+(ts.aws_present||0)+' browser:'+(ts.browser_high_value_sessions||0)+'</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">computed</span><span>'+ago(p.computed_ts)+'</span></div>';
+    h+='<div class="fp-row"><span class="fp-label">uploaded</span><span>'+(f.uploaded?'yes':'no')+'</span></div>';
+    h+='</div>';
+  }
+  return h;
+}
+
+function renderHistory(d) {
+  const days = d.history || [];
+  if (!days.length) return '<h2>7-Day History</h2><div style="color:#555">no history yet</div>';
+  const maxTok = Math.max(1, ...days.map(d => d.totalTokens||0));
+  let h = '<h2>7-Day History</h2><div class="history-bars">';
+  for (const day of days) {
+    const ht = Math.max(2, ((day.totalTokens||0)/maxTok)*70);
+    const label = day.date ? day.date.slice(5) : '-';
+    h+='<div class="history-day"><div class="history-val">'+fmt(day.totalTokens||0)+'</div><div class="history-bar" style="height:'+ht+'px"></div><div class="history-label">'+label+'</div></div>';
+  }
+  h+='</div>';
+  return h;
+}
+
+async function poll() {
+  try {
+    const res = await fetch('/api/dashboard-data');
+    const d = await res.json();
+    document.getElementById('dot').className = 'dot live';
+    document.getElementById('meta').textContent = 'live · ' + new Date().toLocaleTimeString();
+    document.getElementById('p-session').innerHTML = renderSession(d);
+    document.getElementById('p-usage').innerHTML = renderUsage(d);
+    document.getElementById('p-activity').innerHTML = renderActivity(d);
+    document.getElementById('p-tokens').innerHTML = renderTokenCache(d);
+    document.getElementById('p-events').innerHTML = renderEvents(d);
+    document.getElementById('p-fingerprints').innerHTML = renderFingerprints(d);
+    document.getElementById('p-history').innerHTML = renderHistory(d);
+  } catch {
+    document.getElementById('dot').className = 'dot';
+    document.getElementById('meta').textContent = 'disconnected';
+  }
+}
+poll();
+setInterval(poll, 2000);
+</script>
+</body>
+</html>`;
+}