groove-dev 0.9.1 → 0.9.2

package/node_modules/@groove-dev/gui/src/views/CommandCenter.jsx

@@ -10,7 +10,7 @@ const AMBER = '#e5c07b';
 const RED = '#e06c75';
 const PURPLE = '#c678dd';
 const BLUE = '#61afef';
-const COLORS = [ACCENT, AMBER, GREEN, PURPLE, RED, BLUE, '#d19a66', '#56b6c2'];
+const COLORS = [ACCENT, AMBER, GREEN, PURPLE, RED, BLUE, '#d19a66'];
 const COST_PER_1K = { heavy: 0.045, medium: 0.009, light: 0.0024 };
 
 export default function CommandCenter() {
@@ -29,8 +29,6 @@ export default function CommandCenter() {
       const res = await fetch('/api/dashboard');
       const d = await res.json();
       setData(d);
-
-      // Build telemetry in the Zustand store so it persists across tab switches
       useGrooveStore.setState((s) => {
         const telem = { ...s.dashTelemetry };
         const now = Date.now();
@@ -60,107 +58,112 @@ export default function CommandCenter() {
   const { tokens, routing, rotation, adaptive, journalist, uptime } = data;
   const agentBreakdown = data.agents.breakdown;
   const estDollarSaved = (tokens.savings.total / 1000) * COST_PER_1K.medium;
-  // Show max context reached across ALL agents (historical peak, not just running)
-  const maxCtx = agentBreakdown.length > 0
-    ? Math.round(Math.max(...agentBreakdown.map((a) => a.contextUsage || 0)) * 100)
-    : 0;
 
   return (
     <div style={s.root}>
 
-      {/* ── HERO ROW — Gauges + Money Shot ── */}
-      <div style={s.heroRow}>
-        <div style={s.heroGaugeGroup}>
-          <GaugeChart value={tokens.savings.percentage || 0} max={100} label="EFFICIENCY" unit="%" color={GREEN} />
-          <GaugeChart value={maxCtx} max={100} label="PEAK CONTEXT" unit="%" color={maxCtx > 80 ? RED : maxCtx > 60 ? AMBER : ACCENT} />
-        </div>
-        <div style={s.heroCenter}>
-          <div style={s.heroDollar}>{estDollarSaved > 0 ? `$${estDollarSaved.toFixed(2)}` : '$0.00'}</div>
-          <div style={s.heroCenterLabel}>ESTIMATED SAVINGS</div>
-          <div style={s.heroSubStats}>
-            <span>{fmtNum(tokens.totalTokens)} used</span>
-            <span>{fmtNum(tokens.savings.total)} saved</span>
-          </div>
-        </div>
-        <div style={s.heroGaugeGroup}>
-          <GaugeChart value={data.agents.running} max={Math.max(data.agents.total, 1)} label="AGENTS" unit={`/${data.agents.total}`} color={ACCENT} />
-          <GaugeChart value={rotation.totalRotations} max={Math.max(rotation.totalRotations, 10)} label="ROTATIONS" unit="" color={PURPLE} />
-        </div>
+      {/* ROW 1 — Stat Cards */}
+      <div style={s.statRow}>
+        <StatCard
+          label="Total Tokens"
+          value={fmtNum(tokens.totalTokens)}
+          sub={`${data.agents.total} agent${data.agents.total !== 1 ? 's' : ''}`}
+        />
+        <StatCard
+          label="Estimated Savings"
+          value={estDollarSaved > 0 ? `$${estDollarSaved.toFixed(2)}` : '$0.00'}
+          sub={`${fmtNum(tokens.savings.total)} tokens saved`}
+          color={GREEN}
+        />
+        <StatCard
+          label="Efficiency"
+          value={`${tokens.savings.percentage || 0}%`}
+          sub="vs uncoordinated"
+          color={tokens.savings.percentage > 0 ? GREEN : undefined}
+        />
+        <StatCard
+          label="Rotations"
+          value={rotation.totalRotations}
+          sub={fmtUptime(uptime)}
+        />
       </div>
 
-      {/* ── MAIN CHART — Full-width live telemetry ── */}
-      <div style={s.chartPanel}>
-        <div style={s.chartHead}>
-          <span>LIVE TELEMETRY</span>
-          <span style={s.chartHeadRight}>
-            {data.agents.breakdown.filter((a) => a.tokens > 0).map((a, i) => (
-              <span key={a.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, marginLeft: 10 }}>
-                <span style={{ width: 6, height: 6, borderRadius: '50%', background: COLORS[i % COLORS.length], display: 'inline-block' }} />
-                <span style={{ fontSize: 9 }}>{a.name} {fmtNum(a.tokens)}</span>
-              </span>
-            ))}
-          </span>
+      {/* ROW 2 — Area Chart + Donut */}
+      <div style={s.midRow}>
+        <div style={s.chartPanel}>
+          <div style={s.panelHead}>
+            <span>Token Usage</span>
+            <span style={s.panelHeadRight}>
+              {agentBreakdown.filter((a) => a.tokens > 0).map((a, i) => (
+                <span key={a.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginLeft: 12 }}>
+                  <span style={{ width: 6, height: 2, background: COLORS[i % COLORS.length], display: 'inline-block', borderRadius: 1 }} />
+                  <span style={{ fontSize: 9 }}>{a.name}</span>
+                </span>
+              ))}
+            </span>
+          </div>
+          <TelemetryChart tokenTimeline={dashTelemetry} agents={agents} />
+        </div>
+        <div style={s.donutPanel}>
+          <div style={s.panelHead}>Model Routing</div>
+          <DonutChart routing={routing} />
         </div>
-        <TelemetryChart tokenTimeline={dashTelemetry} agents={agents} />
       </div>
 
-      {/* ── BOTTOM ROW — Three panels ── */}
+      {/* ROW 3 — Savings Bars + Agent Fleet */}
       <div style={s.bottomRow}>
-
-        {/* AGENT FLEET */}
         <div style={s.panel}>
-          <div style={s.panelHead}>AGENT FLEET</div>
+          <div style={s.panelHead}>Savings Breakdown</div>
           <div style={s.scrollInner}>
-            {agentBreakdown.length === 0 ? (
-              <div style={s.empty}>No agents spawned</div>
-            ) : agentBreakdown.map((a, i) => (
-              <AgentCard key={a.id} agent={a} total={tokens.totalTokens} color={COLORS[i % COLORS.length]} />
-            ))}
-          </div>
-        </div>
-
-        {/* SAVINGS + ROUTING + ADAPTIVE */}
-        <div style={s.panel}>
-          <div style={s.panelHead}>SAVINGS & ROUTING</div>
-          <div style={s.scrollInner}>
-            <SavingsBlock savings={tokens.savings} />
-            <div style={s.divider} />
-            <RoutingBlock routing={routing} />
+            <HorizBar label="Rotation" value={tokens.savings.fromRotation} max={tokens.savings.total || 1} color={ACCENT} />
+            <HorizBar label="Conflict Prevention" value={tokens.savings.fromConflictPrevention} max={tokens.savings.total || 1} color={AMBER} />
+            <HorizBar label="Cold-Start Skip" value={tokens.savings.fromColdStartSkip} max={tokens.savings.total || 1} color={GREEN} />
             <div style={s.divider} />
-            <AdaptiveBlock adaptive={adaptive} />
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#5c6370', padding: '4px 0' }}>
+              <span>Without Groove</span>
+              <span style={{ color: RED }}>{fmtNum(tokens.savings.estimatedWithoutGroove)}</span>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#5c6370', padding: '4px 0' }}>
+              <span>With Groove</span>
+              <span style={{ color: GREEN }}>{fmtNum(tokens.totalTokens)}</span>
+            </div>
+            {journalist.lastSummary && (
+              <>
+                <div style={s.divider} />
+                <div style={s.panelHead}>Journalist</div>
+                <div style={s.journSummary}>{journalist.lastSummary}</div>
+              </>
+            )}
           </div>
         </div>
-
-        {/* JOURNALIST + ROTATION */}
         <div style={s.panel}>
-          <div style={s.panelHead}>
-            JOURNALIST
-            <span style={{ ...s.liveBadge, background: journalist.running ? GREEN : 'var(--text-dim)' }}>
-              {journalist.running ? 'LIVE' : 'IDLE'}
-            </span>
-          </div>
+          <div style={s.panelHead}>Agent Fleet</div>
           <div style={s.scrollInner}>
-            <div style={s.journStats}>
-              <span>{journalist.cycleCount || 0} cycles</span>
-              <span>{journalist.intervalMs ? `${journalist.intervalMs / 1000}s interval` : '120s interval'}</span>
-            </div>
-            {journalist.lastSummary ? (
-              <div style={s.journSummary}>{journalist.lastSummary}</div>
-            ) : (
-              <div style={s.journSummary}>Waiting for first synthesis cycle...</div>
-            )}
-            <div style={{ ...s.divider, margin: '8px 0' }} />
-            <div style={s.miniHead}>ROTATION HISTORY</div>
-            {rotation.history.length === 0 ? (
-              <div style={s.empty}>No rotations yet</div>
-            ) : rotation.history.slice().reverse().slice(0, 10).map((r, i) => (
-              <div key={i} style={s.rotEntry}>
-                <span style={s.rotDot} />
-                <span style={s.rotName}>{r.agentName}</span>
-                <span style={s.rotSaved}>{fmtNum(r.oldTokens)} saved</span>
-                <span style={s.rotTime}>{timeAgo(r.timestamp)}</span>
-              </div>
+            {agentBreakdown.length === 0 ? (
+              <div style={s.empty}>No agents spawned</div>
+            ) : agentBreakdown.map((a, i) => (
+              <HorizBar
+                key={a.id}
+                label={a.name}
+                value={a.tokens}
+                max={Math.max(...agentBreakdown.map((x) => x.tokens), 1)}
+                color={COLORS[i % COLORS.length]}
+                sub={`${a.role} · ${a.model || 'auto'}`}
+              />
             ))}
+            {rotation.history.length > 0 && (
+              <>
+                <div style={s.divider} />
+                <div style={s.panelHead}>Rotation History</div>
+                {rotation.history.slice().reverse().slice(0, 8).map((r, i) => (
+                  <div key={i} style={s.rotEntry}>
+                    <span style={s.rotName}>{r.agentName}</span>
+                    <span style={{ color: GREEN, fontSize: 9 }}>{fmtNum(r.oldTokens)} saved</span>
+                    <span style={s.rotTime}>{timeAgo(r.timestamp)}</span>
+                  </div>
+                ))}
+              </>
+            )}
           </div>
         </div>
       </div>
@@ -168,163 +171,101 @@ export default function CommandCenter() {
   );
 }
 
-// ── GAUGE CHART — Semicircle arc gauge ──
-function GaugeChart({ value, max, label, unit, color }) {
-  const pct = max > 0 ? Math.min(value / max, 1) : 0;
-  const r = 32;
-  const cx = 40;
-  const cy = 38;
-  const circumHalf = Math.PI * r;
-  const dashLen = pct * circumHalf;
+// ── STAT CARD ──
 
+function StatCard({ label, value, sub, color }) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1 }}>
-      <svg width="80" height="48" viewBox="0 0 80 48">
-        {/* Track */}
-        <path d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`}
-          fill="none" stroke="#2c313a" strokeWidth="4" strokeLinecap="round" />
-        {/* Value arc */}
-        <path d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`}
-          fill="none" stroke={color} strokeWidth="4" strokeLinecap="round"
-          strokeDasharray={`${dashLen} ${circumHalf}`}
-          style={{ transition: 'stroke-dasharray 0.5s ease' }} />
-        {/* Value text */}
-        <text x={cx} y={cy - 6} textAnchor="middle" fill="#e6e6e6"
-          fontSize="14" fontWeight="700" fontFamily="JetBrains Mono, monospace">
-          {typeof value === 'number' ? Math.round(value) : value}
-        </text>
-        <text x={cx} y={cy + 4} textAnchor="middle" fill="#5c6370"
-          fontSize="7" fontFamily="JetBrains Mono, monospace">
-          {unit}
-        </text>
-      </svg>
-      <span style={{ fontSize: 7, fontWeight: 700, color: '#5c6370', textTransform: 'uppercase', letterSpacing: 1, marginTop: -2 }}>{label}</span>
+    <div style={s.statCard}>
+      <div style={{ fontSize: 22, fontWeight: 700, color: color || '#e6e6e6', lineHeight: 1 }}>{value}</div>
+      <div style={{ fontSize: 9, color: '#5c6370', marginTop: 6, textTransform: 'uppercase', letterSpacing: 1 }}>{label}</div>
+      {sub && <div style={{ fontSize: 9, color: '#3e4451', marginTop: 3 }}>{sub}</div>}
     </div>
   );
 }
 
-// ── AGENT CARD ──
-function AgentCard({ agent, total, color }) {
-  const pct = total > 0 ? (agent.tokens / total) * 100 : 0;
-  const alive = agent.status === 'running';
-  const statusColor = alive ? GREEN : agent.status === 'completed' ? ACCENT : agent.status === 'crashed' ? RED : 'var(--text-dim)';
+// ── HORIZONTAL BAR ──
 
+function HorizBar({ label, value, max, color, sub }) {
+  const pct = max > 0 ? (value / max) * 100 : 0;
   return (
-    <div style={s.agentCard}>
-      <div style={s.agentCardRow}>
-        <span style={{ ...s.dot, background: statusColor, ...(alive ? { animation: 'pulse 2s infinite' } : {}) }} />
-        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-bright)' }}>{agent.name}</span>
-        <span style={{ fontSize: 9, color: 'var(--text-dim)' }}>{agent.role}</span>
-        {agent.routingMode === 'auto' && <span style={s.tagAuto}>AUTO</span>}
-        <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-primary)', marginLeft: 'auto' }}>{fmtNum(agent.tokens)}</span>
+    <div style={{ padding: '6px 0' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+        <span style={{ fontSize: 11, color: '#abb2bf' }}>{label}</span>
+        <span style={{ fontSize: 11, color: '#e6e6e6', fontWeight: 600 }}>{fmtNum(value)}</span>
       </div>
-      <div style={s.agentBarRow}>
-        <div style={s.agentBarTrack}>
-          <div style={{ width: `${Math.max(pct, 0.5)}%`, height: '100%', background: color, borderRadius: 1 }} />
-        </div>
-        <span style={{ fontSize: 8, color: 'var(--text-dim)' }}>{agent.model || 'default'}</span>
-        <CtxGauge value={agent.contextUsage} />
+      <div style={{ height: 4, background: '#1e222a', borderRadius: 2 }}>
+        <div style={{ width: `${Math.max(pct, value > 0 ? 1 : 0)}%`, height: '100%', background: color, borderRadius: 2, transition: 'width 0.3s' }} />
       </div>
+      {sub && <div style={{ fontSize: 8, color: '#3e4451', marginTop: 2 }}>{sub}</div>}
     </div>
   );
 }
 
-function CtxGauge({ value }) {
-  const pct = Math.round((value || 0) * 100);
-  const color = pct > 80 ? RED : pct > 60 ? AMBER : GREEN;
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
-      <div style={{ width: 24, height: 3, background: '#2c313a', borderRadius: 1, overflow: 'hidden' }}>
-        <div style={{ width: `${pct}%`, height: '100%', background: color, borderRadius: 1 }} />
-      </div>
-      <span style={{ fontSize: 8, color: 'var(--text-dim)', minWidth: 18, textAlign: 'right' }}>{pct}%</span>
-    </div>
-  );
-}
-
-// ── SAVINGS BLOCK ──
-function SavingsBlock({ savings }) {
-  const items = [
-    { label: 'Rotation', value: savings.fromRotation, color: ACCENT },
-    { label: 'Conflicts', value: savings.fromConflictPrevention, color: AMBER },
-    { label: 'Cold-start', value: savings.fromColdStartSkip, color: GREEN },
-  ];
-  const total = savings.total || 1;
-
-  return (
-    <div>
-      <div style={s.miniHead}>TOKEN SAVINGS</div>
-      <div style={s.stackedBar}>
-        {items.map((it, i) => it.value > 0 && (
-          <div key={i} style={{ width: `${(it.value / total) * 100}%`, height: '100%', background: it.color }} />
-        ))}
-      </div>
-      {items.map((it, i) => (
-        <div key={i} style={s.savRow}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <div style={{ width: 6, height: 6, background: it.color, borderRadius: 1, flexShrink: 0 }} />
-            <span>{it.label}</span>
-          </div>
-          <span style={{ fontWeight: 600 }}>{fmtNum(it.value)}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
+// ── DONUT CHART ──
 
-// ── ROUTING BLOCK ──
-function RoutingBlock({ routing }) {
+function DonutChart({ routing }) {
   const tiers = [
-    { label: 'HEAVY', cost: '$0.045', color: RED, count: routing.byTier.heavy },
-    { label: 'MEDIUM', cost: '$0.009', color: AMBER, count: routing.byTier.medium },
-    { label: 'LIGHT', cost: '$0.002', color: GREEN, count: routing.byTier.light },
+    { label: 'Heavy', color: RED, count: routing.byTier.heavy, cost: '$0.045/1k' },
+    { label: 'Medium', color: AMBER, count: routing.byTier.medium, cost: '$0.009/1k' },
+    { label: 'Light', color: GREEN, count: routing.byTier.light, cost: '$0.002/1k' },
   ];
-  const max = Math.max(...tiers.map((t) => t.count), 1);
+  const total = tiers.reduce((s, t) => s + t.count, 0) || 1;
+
+  const r = 50;
+  const cx = 60;
+  const cy = 60;
+  const circumference = 2 * Math.PI * r;
+  let offset = 0;
 
   return (
-    <div>
-      <div style={s.miniHead}>MODEL ROUTING</div>
-      {tiers.map((t) => (
-        <div key={t.label} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '3px 0' }}>
-          <span style={{ fontSize: 8, fontWeight: 700, color: t.color, minWidth: 42 }}>{t.label}</span>
-          <div style={{ flex: 1, height: 4, background: '#2c313a', borderRadius: 1, overflow: 'hidden' }}>
-            <div style={{ width: `${Math.max((t.count / max) * 100, t.count > 0 ? 3 : 0)}%`, height: '100%', background: t.color, borderRadius: 1 }} />
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12, minHeight: 0 }}>
+      <svg width="120" height="120" viewBox="0 0 120 120">
+        <circle cx={cx} cy={cy} r={r} fill="none" stroke="#1e222a" strokeWidth="10" />
+        {tiers.map((t) => {
+          if (t.count === 0) return null;
+          const pct = t.count / total;
+          const dashLen = pct * circumference;
+          const el = (
+            <circle
+              key={t.label}
+              cx={cx} cy={cy} r={r}
+              fill="none" stroke={t.color} strokeWidth="10"
+              strokeDasharray={`${dashLen} ${circumference - dashLen}`}
+              strokeDashoffset={-offset}
+              strokeLinecap="butt"
+              transform={`rotate(-90 ${cx} ${cy})`}
+              style={{ transition: 'stroke-dasharray 0.5s' }}
+            />
+          );
+          offset += dashLen;
+          return el;
+        })}
+        <text x={cx} y={cy - 4} textAnchor="middle" fill="#e6e6e6" fontSize="16" fontWeight="700" fontFamily="JetBrains Mono, monospace">
+          {total > 1 ? total : routing.totalDecisions}
+        </text>
+        <text x={cx} y={cy + 10} textAnchor="middle" fill="#5c6370" fontSize="8" fontFamily="JetBrains Mono, monospace">
+          decisions
+        </text>
+      </svg>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: '100%', padding: '0 8px' }}>
+        {tiers.map((t) => (
+          <div key={t.label} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 10 }}>
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: t.color, flexShrink: 0 }} />
+            <span style={{ color: '#abb2bf', flex: 1 }}>{t.label}</span>
+            <span style={{ color: '#5c6370', fontSize: 9 }}>{t.cost}</span>
+            <span style={{ color: '#e6e6e6', fontWeight: 600, minWidth: 20, textAlign: 'right' }}>{t.count}</span>
           </div>
-          <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-bright)', minWidth: 16, textAlign: 'right' }}>{t.count}</span>
-        </div>
-      ))}
-      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 8, color: 'var(--text-dim)', marginTop: 4 }}>
-        <span>{routing.autoRoutedCount} auto</span>
-        <span>{routing.totalDecisions} total</span>
+        ))}
+      </div>
+      <div style={{ fontSize: 9, color: '#3e4451' }}>
+        {routing.autoRoutedCount} auto-routed
       </div>
     </div>
   );
 }
 
-// ── ADAPTIVE BLOCK ──
-function AdaptiveBlock({ adaptive }) {
-  if (!adaptive || adaptive.length === 0) return null;
-  return (
-    <div>
-      <div style={s.miniHead}>ADAPTIVE THRESHOLDS</div>
-      {adaptive.map((p) => (
-        <div key={p.key} style={{ padding: '4px 0' }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, marginBottom: 2 }}>
-            <span style={{ color: 'var(--text-bright)', fontWeight: 600 }}>{p.key}</span>
-            <span style={{ color: p.converged ? GREEN : AMBER, fontSize: 8 }}>
-              {p.converged ? 'CONVERGED' : `${p.adjustments} adj`}
-            </span>
-          </div>
-          <div style={{ height: 5, background: '#2c313a', borderRadius: 2, overflow: 'hidden' }}>
-            <div style={{ width: `${Math.round(p.threshold * 100)}%`, height: '100%', background: p.converged ? GREEN : ACCENT, borderRadius: 2 }} />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
+// ── TELEMETRY CHART ──
 
-// ── TELEMETRY CHART — Full-width area chart with per-agent lines ──
 function TelemetryChart({ tokenTimeline, agents }) {
   const containerRef = useRef();
   const canvasRef = useRef();
@@ -352,85 +293,75 @@ function TelemetryChart({ tokenTimeline, agents }) {
     const chartH = h - padT - padB;
 
     // Grid
-    ctx.strokeStyle = '#2c313a';
+    ctx.strokeStyle = '#1e222a';
     ctx.lineWidth = 0.5;
     for (let i = 0; i <= 4; i++) {
       const y = padT + (i / 4) * chartH;
       ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(w - padR, y); ctx.stroke();
     }
 
-    // Gather ALL agent timelines — including completed agents (historical data)
     const agentIds = Object.keys(tokenTimeline);
-
     if (agentIds.length === 0) {
       ctx.fillStyle = '#3e4451';
-      ctx.font = '11px monospace';
+      ctx.font = '10px monospace';
       ctx.textAlign = 'center';
       ctx.fillText('Waiting for agent telemetry...', w / 2, h / 2);
       return;
     }
 
-    // Find global time range and max value
     let minT = Infinity, maxT = 0, maxV = 0;
     for (const id of agentIds) {
-      const pts = tokenTimeline[id] || [];
-      for (const p of pts) {
+      for (const p of tokenTimeline[id] || []) {
         if (p.t < minT) minT = p.t;
         if (p.t > maxT) maxT = p.t;
         if (p.v > maxV) maxV = p.v;
       }
     }
-
     if (maxT === minT) maxT = minT + 60000;
     if (maxV === 0) maxV = 100;
     const timeRange = maxT - minT;
 
-    // Y-axis labels
+    // Y labels
     ctx.fillStyle = '#3e4451';
     ctx.font = '8px monospace';
     ctx.textAlign = 'right';
     for (let i = 0; i <= 4; i++) {
       const val = maxV * (1 - i / 4);
-      const y = padT + (i / 4) * chartH;
-      ctx.fillText(fmtNum(Math.round(val)), padL - 4, y + 3);
+      ctx.fillText(fmtNum(Math.round(val)), padL - 4, padT + (i / 4) * chartH + 3);
     }
 
-    // X-axis time labels
+    // X labels
     ctx.textAlign = 'center';
-    const timeLabels = 5;
-    for (let i = 0; i <= timeLabels; i++) {
-      const t = minT + (i / timeLabels) * timeRange;
-      const x = padL + (i / timeLabels) * chartW;
+    for (let i = 0; i <= 4; i++) {
+      const t = minT + (i / 4) * timeRange;
       const d = new Date(t);
-      ctx.fillText(`${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`, x, h - 4);
+      ctx.fillText(`${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`, padL + (i / 4) * chartW, h - 4);
     }
 
-    // Draw each agent — thin flat lines, subtle fill, no neon/glow
+    // Draw agent areas + lines
     agentIds.forEach((id, idx) => {
       const pts = tokenTimeline[id] || [];
       if (pts.length < 2) return;
 
       const color = COLORS[idx % COLORS.length];
-
-      // Map points to canvas coords
       const coords = pts.map((p) => ({
         x: padL + ((p.t - minT) / timeRange) * chartW,
         y: padT + (1 - p.v / maxV) * chartH,
       }));
 
-      // Subtle fill area
+      // Gradient fill
       ctx.beginPath();
       ctx.moveTo(coords[0].x, padT + chartH);
       for (const c of coords) ctx.lineTo(c.x, c.y);
       ctx.lineTo(coords[coords.length - 1].x, padT + chartH);
       ctx.closePath();
       const grad = ctx.createLinearGradient(0, padT, 0, padT + chartH);
-      grad.addColorStop(0, color + '18');
+      grad.addColorStop(0, color + '20');
       grad.addColorStop(1, color + '03');
       ctx.fillStyle = grad;
       ctx.fill();
 
-      // Thin flat line — 1px, no shadow/glow
+      // Line
       ctx.beginPath();
       for (let i = 0; i < coords.length; i++) {
         i === 0 ? ctx.moveTo(coords[i].x, coords[i].y) : ctx.lineTo(coords[i].x, coords[i].y);
@@ -439,7 +370,7 @@ function TelemetryChart({ tokenTimeline, agents }) {
       ctx.lineWidth = 1;
       ctx.stroke();
 
-      // Small end marker — flat, no glow
+      // End dot
       const last = coords[coords.length - 1];
       ctx.beginPath();
       ctx.arc(last.x, last.y, 2, 0, Math.PI * 2);
@@ -463,6 +394,7 @@ function TelemetryChart({ tokenTimeline, agents }) {
 }
 
 // ── HELPERS ──
+
 function fmtNum(n) {
   if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
   if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
@@ -484,13 +416,14 @@ function timeAgo(ts) {
 }
 
 // ── STYLES ──
+
 const s = {
   root: {
     width: '100%', height: '100%',
     display: 'flex', flexDirection: 'column',
     overflow: 'hidden',
-    padding: 12,
-    gap: 10,
+    padding: 14,
+    gap: 12,
     background: 'var(--bg-base)',
   },
   loadingRoot: {
@@ -501,120 +434,66 @@ const s = {
     fontSize: 11, fontWeight: 700, color: 'var(--text-dim)',
     letterSpacing: 3, textTransform: 'uppercase',
   },
-  loadingBar: { width: 120, height: 2, background: 'var(--bg-surface)', borderRadius: 1, overflow: 'hidden' },
+  loadingBar: { width: 120, height: 2, background: '#282c34', borderRadius: 1, overflow: 'hidden' },
   loadingFill: { width: '40%', height: '100%', background: ACCENT, animation: 'pulse 1.5s infinite' },
 
-  // Hero row
-  heroRow: {
-    display: 'flex', alignItems: 'stretch', gap: 10,
-    flexShrink: 0, height: 90,
-  },
-  heroGaugeGroup: {
-    flex: 1, display: 'flex', gap: 4,
-    background: 'var(--bg-surface)', border: '1px solid var(--border)',
-    borderRadius: 8, padding: '6px 4px', alignItems: 'center',
-  },
-  heroCenter: {
-    flex: 1.2, background: 'var(--bg-surface)', border: '1px solid var(--border)',
-    borderRadius: 8,
-    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-    padding: '8px 16px',
-  },
-  heroDollar: {
-    fontSize: 28, fontWeight: 800, color: GREEN, lineHeight: 1,
-  },
-  heroCenterLabel: {
-    fontSize: 7, fontWeight: 700, color: 'var(--text-dim)',
-    textTransform: 'uppercase', letterSpacing: 1.2, marginTop: 4,
+  // Stat cards row
+  statRow: {
+    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12,
+    flexShrink: 0,
   },
-  heroSubStats: {
-    display: 'flex', gap: 12, marginTop: 4,
-    fontSize: 9, color: '#5c6370',
+  statCard: {
+    background: '#282c34', borderRadius: 12, padding: '16px 18px',
+    display: 'flex', flexDirection: 'column',
   },
 
-  // Main chart
-  chartPanel: {
+  // Mid row — chart + donut
+  midRow: {
+    display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12,
     flex: 2, minHeight: 0,
-    background: 'var(--bg-surface)', border: '1px solid var(--border)',
-    borderRadius: 8,
-    padding: '8px 12px', display: 'flex', flexDirection: 'column',
   },
-  chartHead: {
-    fontSize: 9, fontWeight: 700, color: 'var(--text-dim)',
-    textTransform: 'uppercase', letterSpacing: 1.5,
-    paddingBottom: 6, flexShrink: 0,
-    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+  chartPanel: {
+    background: '#282c34', borderRadius: 12, padding: '12px 14px',
+    display: 'flex', flexDirection: 'column', minHeight: 0,
+  },
+  donutPanel: {
+    background: '#282c34', borderRadius: 12, padding: '12px 14px',
+    display: 'flex', flexDirection: 'column', minHeight: 0,
   },
-  chartHeadRight: { display: 'flex', alignItems: 'center', color: 'var(--text-dim)' },
 
-  // Bottom row — three panels
+  // Bottom row
   bottomRow: {
+    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
     flex: 3, minHeight: 0,
-    display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10,
   },
   panel: {
-    minHeight: 0, overflow: 'hidden',
-    background: 'var(--bg-surface)', border: '1px solid var(--border)',
-    borderRadius: 8,
-    padding: '8px 10px', display: 'flex', flexDirection: 'column',
+    background: '#282c34', borderRadius: 12, padding: '12px 14px',
+    display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden',
   },
-  panelHead: {
-    fontSize: 9, fontWeight: 700, color: 'var(--text-dim)',
-    textTransform: 'uppercase', letterSpacing: 1.5,
-    paddingBottom: 6, marginBottom: 6, flexShrink: 0,
-    borderBottom: '1px solid var(--border)',
-    display: 'flex', alignItems: 'center', gap: 8,
-  },
-  scrollInner: { flex: 1, minHeight: 0, overflowY: 'auto' },
-  empty: { color: 'var(--text-dim)', fontSize: 10, textAlign: 'center', padding: 16, opacity: 0.6 },
 
   // Shared
-  divider: { height: 1, background: 'var(--border)', margin: '6px 0', flexShrink: 0 },
-  miniHead: {
-    fontSize: 8, fontWeight: 700, color: 'var(--text-dim)',
-    textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4,
-  },
-  dot: { width: 6, height: 6, borderRadius: '50%', flexShrink: 0 },
-  liveBadge: {
-    fontSize: 7, fontWeight: 700, color: '#1a1d23',
-    padding: '1px 5px', borderRadius: 2, letterSpacing: 0.5, marginLeft: 'auto',
-  },
-
-  // Agent cards
-  agentCard: { padding: '5px 0', borderBottom: '1px solid var(--bg-base)' },
-  agentCardRow: { display: 'flex', alignItems: 'center', gap: 6 },
-  agentBarRow: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 3 },
-  agentBarTrack: { flex: 1, height: 2, background: '#2c313a', borderRadius: 1, overflow: 'hidden' },
-  tagAuto: {
-    fontSize: 7, fontWeight: 700, color: ACCENT,
-    border: `1px solid ${ACCENT}`, padding: '0 3px', lineHeight: '11px', letterSpacing: 0.5,
-  },
-
-  // Savings
-  stackedBar: { height: 8, background: '#2c313a', borderRadius: 2, overflow: 'hidden', display: 'flex', marginBottom: 4 },
-  savRow: {
+  panelHead: {
+    fontSize: 10, fontWeight: 600, color: '#5c6370',
+    textTransform: 'uppercase', letterSpacing: 1,
+    marginBottom: 8, flexShrink: 0,
     display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-    padding: '2px 0', fontSize: 10, color: 'var(--text-primary)',
   },
+  panelHeadRight: { display: 'flex', alignItems: 'center', color: '#3e4451' },
+  scrollInner: { flex: 1, minHeight: 0, overflowY: 'auto' },
+  empty: { color: '#3e4451', fontSize: 10, textAlign: 'center', padding: 20 },
+  divider: { height: 1, background: '#1e222a', margin: '8px 0', flexShrink: 0 },
 
   // Journalist
-  journStats: {
-    display: 'flex', justifyContent: 'space-between',
-    fontSize: 9, color: 'var(--text-dim)', marginBottom: 6,
-  },
   journSummary: {
-    fontSize: 10, color: 'var(--text-primary)', lineHeight: 1.6,
-    padding: '6px 8px', background: 'var(--bg-base)', border: '1px solid var(--border)',
-    overflowY: 'auto', whiteSpace: 'pre-wrap', minHeight: 60, maxHeight: 200, flex: 1,
+    fontSize: 10, color: '#8b929e', lineHeight: 1.5,
+    padding: '4px 0', whiteSpace: 'pre-wrap', maxHeight: 80, overflowY: 'auto',
   },
 
   // Rotation
   rotEntry: {
-    display: 'flex', alignItems: 'center', gap: 6,
-    padding: '3px 0', fontSize: 10,
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '4px 0', fontSize: 10,
   },
-  rotDot: { width: 5, height: 5, borderRadius: '50%', background: ACCENT, flexShrink: 0 },
-  rotName: { color: 'var(--text-bright)', fontWeight: 600, flex: 1 },
-  rotSaved: { color: GREEN, fontSize: 9, fontWeight: 600 },
-  rotTime: { color: 'var(--text-dim)', fontSize: 9, flexShrink: 0 },
+  rotName: { color: '#abb2bf', flex: 1 },
+  rotTime: { color: '#3e4451', fontSize: 9 },
 };