groove-dev 0.23.0 → 0.24.1

package/packages/gui/src/components/dashboard/kpi-card.jsx

@@ -1,8 +1,9 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
 import { cn } from '../../lib/cn';
 import { HEX } from '../../lib/theme-hex';
 
-function MiniSparkline({ data, color = HEX.accent, width = 80, height = 24 }) {
+function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
   if (!data || data.length < 2) return <div style={{ width, height }} />;
   const vals = data.map((d) => d.v);
   const min = Math.min(...vals);
@@ -15,31 +16,56 @@ function MiniSparkline({ data, color = HEX.accent, width = 80, height = 24 }) {
     return `${x},${y}`;
   }).join(' ');
 
+  const gradId = `kpi-${color.replace('#', '')}`;
+
   return (
     <svg width={width} height={height} className="flex-shrink-0">
       <defs>
-        <linearGradient id={`kpi-${color}`} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor={color} stopOpacity="0.3" />
+        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.2" />
           <stop offset="100%" stopColor={color} stopOpacity="0" />
         </linearGradient>
       </defs>
-      <polygon points={`0,${height} ${points} ${width},${height}`} fill={`url(#kpi-${color})`} />
-      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+      <polygon points={`0,${height} ${points} ${width},${height}`} fill={`url(#${gradId})`} />
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeOpacity="0.8" />
     </svg>
   );
 }
 
-export function KpiCard({ label, value, sparkData, color = HEX.accent, className }) {
+const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.accent, className }) {
   return (
     <div className={cn(
-      'flex items-center gap-3 px-4 py-3 bg-surface-1 border-b border-border-subtle min-w-0',
+      'flex items-center gap-2.5 px-3 py-2.5 min-w-0',
+      'bg-surface-1',
       className,
     )}>
       <div className="flex-1 min-w-0">
-        <div className="text-2xs text-text-3 font-sans uppercase tracking-wider mb-0.5 truncate">{label}</div>
-        <div className="text-lg font-semibold font-mono text-text-0 tabular-nums">{value}</div>
+        <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5 truncate">{label}</div>
+        <div className="text-base font-semibold font-mono text-text-0 tabular-nums leading-none">{value}</div>
       </div>
       <MiniSparkline data={sparkData} color={color} />
     </div>
   );
+});
+
+export function KpiStrip({ kpis }) {
+  return (
+    <div className="flex flex-wrap border-b border-border" style={{ background: 'var(--color-surface-0)' }}>
+      {kpis.map((kpi) => (
+        <KpiCard
+          key={kpi.label}
+          label={kpi.label}
+          value={kpi.value}
+          sparkData={kpi.sparkData}
+          color={kpi.color}
+          className={cn(
+            'flex-1 basis-[12.5%] min-w-[140px]',
+            'border-b border-r border-border',
+          )}
+        />
+      ))}
+    </div>
+  );
 }
+
+export { KpiCard };

package/packages/gui/src/components/dashboard/routing-chart.jsx

@@ -0,0 +1,117 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useEffect, memo } from 'react';
+import { HEX } from '../../lib/theme-hex';
+import { fmtNum, fmtDollar } from '../../lib/format';
+
+const TIER_COLORS = {
+  heavy: HEX.danger,
+  medium: HEX.warning,
+  light: HEX.success,
+};
+
+const TIER_LABELS = {
+  heavy: 'Heavy',
+  medium: 'Medium',
+  light: 'Light',
+};
+
+const RoutingChart = memo(function RoutingChart({ routing, size = 120 }) {
+  const canvasRef = useRef(null);
+  if (!routing) return null;
+
+  const { byTier = {}, costByTier = {}, totalDecisions = 0, autoRoutedCount = 0 } = routing;
+  const tiers = ['heavy', 'medium', 'light'];
+  const total = tiers.reduce((s, t) => s + (byTier[t] || 0), 0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = size * dpr;
+    canvas.height = size * dpr;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, size, size);
+
+    const cx = size / 2;
+    const cy = size / 2;
+    const radius = (size - 12) / 2;
+    const strokeWidth = 5;
+
+    if (total === 0) {
+      ctx.beginPath();
+      ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+      ctx.strokeStyle = HEX.surface4;
+      ctx.lineWidth = strokeWidth;
+      ctx.stroke();
+    } else {
+      let angle = -Math.PI / 2;
+      for (const tier of tiers) {
+        const count = byTier[tier] || 0;
+        if (count === 0) continue;
+        const sweep = (count / total) * Math.PI * 2;
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius, angle, angle + sweep);
+        ctx.strokeStyle = TIER_COLORS[tier];
+        ctx.lineWidth = strokeWidth;
+        ctx.lineCap = 'butt';
+        ctx.stroke();
+        angle += sweep;
+      }
+    }
+
+    // Center text
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.font = `600 ${size * 0.19}px 'JetBrains Mono Variable', monospace`;
+    ctx.fillStyle = HEX.text0;
+    ctx.fillText(fmtNum(totalDecisions), cx, cy - 3);
+
+    ctx.font = `500 ${size * 0.09}px 'JetBrains Mono Variable', monospace`;
+    ctx.fillStyle = HEX.text3;
+    ctx.fillText('ROUTES', cx, cy + size * 0.13);
+  }, [routing, size, total, totalDecisions]);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full px-3 py-3">
+      <canvas
+        ref={canvasRef}
+        className="flex-shrink-0"
+        style={{ width: size, height: size }}
+      />
+
+      <div className="w-full mt-3 space-y-2 max-w-[180px]">
+        {tiers.map((tier) => {
+          const count = byTier[tier] || 0;
+          const cost = costByTier[tier] || 0;
+          const pct = total > 0 ? (count / total) * 100 : 0;
+          return (
+            <div key={tier} className="space-y-0.5">
+              <div className="flex items-center gap-2 text-xs font-mono">
+                <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: TIER_COLORS[tier] }} />
+                <span className="text-text-3 uppercase tracking-wider flex-1">{TIER_LABELS[tier]}</span>
+                <span className="text-text-1 tabular-nums">{count}</span>
+                <span className="text-text-4">/</span>
+                <span className="text-text-2 tabular-nums">{fmtDollar(cost)}</span>
+              </div>
+              <div className="h-[2px] bg-surface-0 rounded-full overflow-hidden ml-3.5">
+                <div
+                  className="h-full rounded-full transition-all duration-500"
+                  style={{ width: `${Math.min(pct, 100)}%`, background: TIER_COLORS[tier] }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {autoRoutedCount > 0 && (
+        <div className="mt-2.5 text-2xs font-mono text-text-3 uppercase tracking-wider">
+          {autoRoutedCount} auto-routed
+        </div>
+      )}
+    </div>
+  );
+});
+
+export { RoutingChart };

package/packages/gui/src/components/dashboard/token-chart.jsx

@@ -1,10 +1,27 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useEffect } from 'react';
-import { HEX } from '../../lib/theme-hex';
-import { fmtNum, fmtDollar } from '../../lib/format';
+import { useRef, useEffect, useState, useCallback, memo } from 'react';
+import { HEX, hexAlpha } from '../../lib/theme-hex';
+import { fmtNum, fmtDollar, fmtPct } from '../../lib/format';
 
-export function TokenChart({ data, width, height }) {
+const TokenChart = memo(function TokenChart({ data, width, height }) {
   const canvasRef = useRef(null);
+  const [hover, setHover] = useState(null); // { x, index }
+
+  const pad = { top: 16, right: 62, bottom: 30, left: 62 };
+  const w = width - pad.left - pad.right;
+  const h = height - pad.top - pad.bottom;
+
+  const onMouseMove = useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas || !data?.length) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left - pad.left;
+    if (x < 0 || x > w) { setHover(null); return; }
+    const index = Math.round((x / w) * (data.length - 1));
+    setHover({ x: pad.left + (index / (data.length - 1)) * w, index });
+  }, [data, w, pad.left]);
+
+  const onMouseLeave = useCallback(() => setHover(null), []);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -17,17 +34,15 @@ export function TokenChart({ data, width, height }) {
     ctx.scale(dpr, dpr);
     ctx.clearRect(0, 0, width, height);
 
-    const pad = { top: 12, right: 60, bottom: 28, left: 60 };
-    const w = width - pad.left - pad.right;
-    const h = height - pad.top - pad.bottom;
-
     const tokens = data.map((d) => d.tokens || 0);
     const costs = data.map((d) => d.costUsd || 0);
+    const caches = data.map((d) => d.cacheHitRate ?? null);
     const maxT = Math.max(...tokens, 1);
     const maxC = Math.max(...costs, 0.01);
+    const hasCacheData = caches.some((c) => c !== null && c > 0);
 
     // Grid lines
-    ctx.strokeStyle = HEX.surface4;
+    ctx.strokeStyle = HEX.surface5;
     ctx.lineWidth = 0.5;
     for (let i = 0; i <= 4; i++) {
       const y = pad.top + (h / 4) * i;
@@ -37,19 +52,23 @@ export function TokenChart({ data, width, height }) {
       ctx.stroke();
     }
 
-    // Token area
+    // Helper: map data index to x
+    const xAt = (i) => pad.left + (i / (data.length - 1)) * w;
+    const yToken = (v) => pad.top + h - (v / maxT) * h;
+    const yCost = (v) => pad.top + h - (v / maxC) * h;
+    const yCache = (v) => pad.top + h - (v * h);
+
+    // Token area fill
     ctx.beginPath();
     ctx.moveTo(pad.left, pad.top + h);
-    data.forEach((d, i) => {
-      const x = pad.left + (i / (data.length - 1)) * w;
-      const y = pad.top + h - ((d.tokens || 0) / maxT) * h;
-      ctx.lineTo(x, y);
-    });
-    ctx.lineTo(pad.left + w, pad.top + h);
+    for (let i = 0; i < data.length; i++) {
+      ctx.lineTo(xAt(i), yToken(tokens[i]));
+    }
+    ctx.lineTo(xAt(data.length - 1), pad.top + h);
     ctx.closePath();
     const grad = ctx.createLinearGradient(0, pad.top, 0, pad.top + h);
-    grad.addColorStop(0, 'rgba(51, 175, 188, 0.2)');
-    grad.addColorStop(1, 'rgba(51, 175, 188, 0.01)');
+    grad.addColorStop(0, hexAlpha(HEX.accent, 0.12));
+    grad.addColorStop(1, hexAlpha(HEX.accent, 0.01));
     ctx.fillStyle = grad;
     ctx.fill();
 
@@ -57,29 +76,48 @@ export function TokenChart({ data, width, height }) {
     ctx.beginPath();
     ctx.strokeStyle = HEX.accent;
     ctx.lineWidth = 1.5;
-    data.forEach((d, i) => {
-      const x = pad.left + (i / (data.length - 1)) * w;
-      const y = pad.top + h - ((d.tokens || 0) / maxT) * h;
+    for (let i = 0; i < data.length; i++) {
+      const x = xAt(i);
+      const y = yToken(tokens[i]);
       i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
-    });
+    }
     ctx.stroke();
 
-    // Cost line
+    // Cost line (dashed)
     ctx.beginPath();
     ctx.strokeStyle = HEX.warning;
     ctx.lineWidth = 1;
     ctx.setLineDash([4, 3]);
-    data.forEach((d, i) => {
-      const x = pad.left + (i / (data.length - 1)) * w;
-      const y = pad.top + h - ((d.costUsd || 0) / maxC) * h;
+    for (let i = 0; i < data.length; i++) {
+      const x = xAt(i);
+      const y = yCost(costs[i]);
       i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
-    });
+    }
     ctx.stroke();
     ctx.setLineDash([]);
 
+    // Cache hit rate line (dotted, if data available)
+    if (hasCacheData) {
+      ctx.beginPath();
+      ctx.strokeStyle = hexAlpha(HEX.info, 0.5);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([2, 3]);
+      let started = false;
+      for (let i = 0; i < data.length; i++) {
+        const c = caches[i];
+        if (c === null || c === undefined) continue;
+        const x = xAt(i);
+        const y = yCache(c);
+        if (!started) { ctx.moveTo(x, y); started = true; }
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+
     // Left axis labels (tokens)
-    ctx.fillStyle = HEX.text3;
-    ctx.font = '10px var(--font-mono)';
+    ctx.fillStyle = HEX.text2;
+    ctx.font = "10px 'JetBrains Mono Variable', monospace";
     ctx.textAlign = 'right';
     for (let i = 0; i <= 4; i++) {
       const val = (maxT / 4) * (4 - i);
@@ -88,25 +126,105 @@ export function TokenChart({ data, width, height }) {
 
     // Right axis labels (cost)
     ctx.textAlign = 'left';
-    ctx.fillStyle = HEX.text4;
+    ctx.fillStyle = HEX.text3;
     for (let i = 0; i <= 4; i++) {
       const val = (maxC / 4) * (4 - i);
       ctx.fillText(fmtDollar(val), pad.left + w + 6, pad.top + (h / 4) * i + 4);
     }
 
     // Legend
-    ctx.font = '10px sans-serif';
+    ctx.font = "10px 'Inter Variable', sans-serif";
+    ctx.textAlign = 'left';
+    const legendY = height - 8;
+    let lx = pad.left;
+
     ctx.fillStyle = HEX.accent;
-    ctx.fillText('● Tokens', pad.left, height - 6);
+    ctx.fillRect(lx, legendY - 3, 8, 1.5);
+    lx += 11;
+    ctx.fillStyle = HEX.text2;
+    ctx.fillText('Tokens', lx, legendY);
+    lx += 44;
+
     ctx.fillStyle = HEX.warning;
-    ctx.fillText('● Cost', pad.left + 70, height - 6);
-  }, [data, width, height]);
+    ctx.setLineDash([3, 2]);
+    ctx.beginPath();
+    ctx.moveTo(lx, legendY - 2);
+    ctx.lineTo(lx + 8, legendY - 2);
+    ctx.strokeStyle = HEX.warning;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    ctx.setLineDash([]);
+    lx += 11;
+    ctx.fillStyle = HEX.text2;
+    ctx.fillText('Cost', lx, legendY);
+
+    if (hasCacheData) {
+      lx += 36;
+      ctx.fillStyle = hexAlpha(HEX.info, 0.5);
+      ctx.setLineDash([2, 2]);
+      ctx.beginPath();
+      ctx.moveTo(lx, legendY - 2);
+      ctx.lineTo(lx + 8, legendY - 2);
+      ctx.strokeStyle = hexAlpha(HEX.info, 0.5);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      ctx.setLineDash([]);
+      lx += 11;
+      ctx.fillStyle = HEX.text2;
+      ctx.fillText('Cache', lx, legendY);
+    }
+
+    // Hover crosshair
+    if (hover && hover.index >= 0 && hover.index < data.length) {
+      const hx = hover.x;
+      ctx.beginPath();
+      ctx.moveTo(hx, pad.top);
+      ctx.lineTo(hx, pad.top + h);
+      ctx.strokeStyle = hexAlpha(HEX.text2, 0.3);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([]);
+      ctx.stroke();
+
+      // Tooltip background
+      const d = data[hover.index];
+      const lines = [
+        `${fmtNum(d.tokens || 0)} tok`,
+        `${fmtDollar(d.costUsd || 0)}`,
+      ];
+      if (d.cacheHitRate != null) lines.push(`${fmtPct(d.cacheHitRate * 100)} cache`);
+
+      const tooltipW = 80;
+      const tooltipH = lines.length * 14 + 8;
+      let tx = hx + 8;
+      if (tx + tooltipW > width - 4) tx = hx - tooltipW - 8;
+      const ty = pad.top + 8;
+
+      ctx.fillStyle = hexAlpha(HEX.surface1, 0.95);
+      ctx.strokeStyle = HEX.surface4;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.roundRect(tx, ty, tooltipW, tooltipH, 3);
+      ctx.fill();
+      ctx.stroke();
+
+      ctx.font = "9px 'JetBrains Mono Variable', monospace";
+      ctx.fillStyle = HEX.text1;
+      ctx.textAlign = 'left';
+      lines.forEach((line, i) => {
+        ctx.fillText(line, tx + 6, ty + 14 + i * 14);
+      });
+    }
+  }, [data, width, height, hover, w, h, pad.left, pad.top, pad.right, pad.bottom]);
 
   return (
     <canvas
       ref={canvasRef}
       style={{ width, height }}
-      className="block"
+      className="block cursor-crosshair"
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
     />
   );
-}
+});
+
+export { TokenChart };

package/packages/gui/src/lib/hooks/use-dashboard.js

@@ -9,7 +9,10 @@ export function useDashboard() {
 
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [kpiHistory, setKpiHistory] = useState({ tokens: [], cost: [], saved: [], efficiency: [], cache: [] });
+  const [kpiHistory, setKpiHistory] = useState({
+    tokens: [], cost: [], saved: [], efficiency: [],
+    cache: [], inputOutput: [], agents: [], turns: [],
+  });
   const lastFetch = useRef(0);
 
   useEffect(() => {
@@ -28,15 +31,20 @@ export function useDashboard() {
         setKpiHistory((prev) => {
           const now = Date.now();
           const add = (arr, val) => [...arr.slice(-59), { t: now, v: val || 0 }];
+          const totalUsed = d.tokens?.totalTokens || 0;
+          const totalSaved = d.tokens?.savings?.total || 0;
+          const hypothetical = totalUsed + totalSaved;
+          const input = d.tokens?.totalInputTokens || 0;
+          const output = d.tokens?.totalOutputTokens || 0;
           return {
-            tokens: add(prev.tokens, d.tokens?.totalUsed),
+            tokens: add(prev.tokens, totalUsed),
             cost: add(prev.cost, d.tokens?.totalCostUsd),
-            saved: add(prev.saved, d.tokens?.totalSaved),
-            efficiency: add(prev.efficiency, (() => {
-              const h = (d.tokens?.totalUsed || 0) + (d.tokens?.totalSaved || 0);
-              return h > 0 ? ((d.tokens?.totalSaved || 0) / h) * 100 : 0;
-            })()),
+            saved: add(prev.saved, totalSaved),
+            efficiency: add(prev.efficiency, hypothetical > 0 ? (totalSaved / hypothetical) * 100 : 0),
             cache: add(prev.cache, d.tokens?.cacheHitRate),
+            inputOutput: add(prev.inputOutput, output > 0 ? input / output : 0),
+            agents: add(prev.agents, d.agents?.running || 0),
+            turns: add(prev.turns, d.tokens?.totalTurns),
           };
         });
       } catch {
@@ -49,5 +57,17 @@ export function useDashboard() {
     return () => { alive = false; clearInterval(interval); };
   }, [connected]);
 
-  return { data, loading, agents, connected, kpiHistory, lastFetch: lastFetch.current };
+  // Derive enriched sub-objects from data
+  const agentBreakdown = data?.agents?.breakdown || [];
+  const routing = data?.routing || null;
+  const rotation = data?.rotation || null;
+  const adaptive = data?.adaptive || [];
+  const journalist = data?.journalist || null;
+  const rotating = rotation?.rotating || [];
+
+  return {
+    data, loading, agents, connected, kpiHistory,
+    lastFetch: lastFetch.current,
+    agentBreakdown, routing, rotation, adaptive, journalist, rotating,
+  };
 }

package/packages/gui/src/lib/theme-hex.js

@@ -1,6 +1,13 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 // Raw hex values for Canvas 2D rendering (CSS vars don't work in canvas)
 
+export function hexAlpha(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
 export const HEX = {
   // Surfaces
   surface0: '#1a1e25',