groove-dev 0.24.5 → 0.24.6

package/node_modules/@groove-dev/gui/src/components/dashboard/token-chart.jsx

@@ -1,11 +1,11 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useEffect, useState, useCallback, memo } from 'react';
+import { useRef, useEffect, useState, useCallback, useMemo, memo } from 'react';
 import { HEX, hexAlpha } from '../../lib/theme-hex';
-import { fmtNum, fmtDollar, fmtPct } from '../../lib/format';
+import { fmtNum, fmtPct } from '../../lib/format';
 
 /**
- * Modern token flow chart — edge-to-edge gradient fill, floating labels,
- * hover tooltip for detail. Self-sizing via internal ResizeObserver.
+ * Modern burn-rate chart — shows tokens/interval (velocity) + running agent count
+ * instead of monotonically climbing cumulative values. Self-sizing.
  */
 const TokenChart = memo(function TokenChart({ data }) {
   const containerRef = useRef(null);
@@ -14,11 +14,27 @@ const TokenChart = memo(function TokenChart({ data }) {
   const [hover, setHover] = useState(null);
 
   const { width, height } = size;
-  // Minimal padding — just enough for floating labels to breathe
   const pad = { top: 28, right: 12, bottom: 8, left: 12 };
   const w = Math.max(width - pad.left - pad.right, 0);
   const h = Math.max(height - pad.top - pad.bottom, 0);
 
+  // Derive burn rate + cache rate from consecutive snapshots
+  const chartData = useMemo(() => {
+    if (!data || data.length < 2) return [];
+    return data.slice(1).map((d, i) => {
+      const prev = data[i];
+      const dt = (d.t - prev.t) / 60000; // minutes
+      const dTokens = Math.max((d.tokens || 0) - (prev.tokens || 0), 0);
+      return {
+        burnRate: dt > 0 ? Math.round(dTokens / dt) : 0, // tokens/min
+        cacheHitRate: d.cacheHitRate || 0,
+        running: d.running || 0,
+        agents: d.agents || 0,
+        t: d.t,
+      };
+    });
+  }, [data]);
+
   // Self-size
   useEffect(() => {
     const el = containerRef.current;
@@ -33,20 +49,20 @@ const TokenChart = memo(function TokenChart({ data }) {
 
   const onMouseMove = useCallback((e) => {
     const canvas = canvasRef.current;
-    if (!canvas || !data?.length || w <= 0) return;
+    if (!canvas || !chartData.length || w <= 0) 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 index = Math.round((x / w) * (chartData.length - 1));
+    setHover({ x: pad.left + (index / Math.max(chartData.length - 1, 1)) * w, index });
+  }, [chartData, w, pad.left]);
 
   const onMouseLeave = useCallback(() => setHover(null), []);
 
   // Draw
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas || !data?.length || width <= 0 || height <= 0 || w <= 0 || h <= 0) return;
+    if (!canvas || !chartData.length || width <= 0 || height <= 0 || w <= 0 || h <= 0) return;
     const ctx = canvas.getContext('2d');
     const dpr = window.devicePixelRatio || 1;
 
@@ -55,21 +71,31 @@ const TokenChart = memo(function TokenChart({ data }) {
     ctx.scale(dpr, dpr);
     ctx.clearRect(0, 0, width, height);
 
-    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);
+    const burns = chartData.map((d) => d.burnRate);
+    const caches = chartData.map((d) => d.cacheHitRate);
+    const running = chartData.map((d) => d.running);
+    const maxBurn = Math.max(...burns, 100);
+    const maxRunning = Math.max(...running, 1);
 
-    const xAt = (i) => pad.left + (i / Math.max(data.length - 1, 1)) * w;
-    const yToken = (v) => pad.top + h - (v / maxT) * h;
-    const yCost = (v) => pad.top + h - (v / maxC) * h;
+    const xAt = (i) => pad.left + (i / Math.max(chartData.length - 1, 1)) * w;
+    const yBurn = (v) => pad.top + h - (v / maxBurn) * h;
     const yCache = (v) => pad.top + h - (v * h);
 
-    // ── Subtle horizontal guidelines (3 lines, dotted) ──────
+    // ── Running agents bars (background, subtle) ────────────
+    const barW = Math.max(w / chartData.length - 1, 2);
+    for (let i = 0; i < chartData.length; i++) {
+      const r = running[i];
+      if (r <= 0) continue;
+      const barH = (r / maxRunning) * h * 0.3; // max 30% height
+      const x = xAt(i) - barW / 2;
+      const y = pad.top + h - barH;
+      ctx.fillStyle = hexAlpha(HEX.surface5, 0.5);
+      ctx.fillRect(x, y, barW, barH);
+    }
+
+    // ── Subtle horizontal guidelines ────────────────────────
     ctx.setLineDash([2, 4]);
-    ctx.strokeStyle = hexAlpha(HEX.text4, 0.25);
+    ctx.strokeStyle = hexAlpha(HEX.text4, 0.2);
     ctx.lineWidth = 1;
     for (let i = 1; i <= 3; i++) {
       const y = pad.top + (h / 4) * i;
@@ -80,77 +106,58 @@ const TokenChart = memo(function TokenChart({ data }) {
     }
     ctx.setLineDash([]);
 
-    // ── Floating Y-axis labels (inside chart, top-left) ─────
+    // ── Floating Y labels ───────────────────────────────────
     ctx.font = "9px 'JetBrains Mono Variable', monospace";
     ctx.textAlign = 'left';
-    ctx.fillStyle = hexAlpha(HEX.text3, 0.6);
-    // Top label (max)
-    ctx.fillText(fmtNum(maxT), pad.left + 4, pad.top + 10);
-    // Mid label
-    ctx.fillText(fmtNum(maxT / 2), pad.left + 4, pad.top + h / 2 + 4);
+    ctx.fillStyle = hexAlpha(HEX.text3, 0.5);
+    ctx.fillText(`${fmtNum(maxBurn)}/m`, pad.left + 4, pad.top + 10);
+    ctx.fillText(`${fmtNum(Math.round(maxBurn / 2))}/m`, pad.left + 4, pad.top + h / 2 + 4);
 
-    // ── Token area fill (edge-to-edge gradient) ─────────────
+    // ── Burn rate area fill ─────────────────────────────────
     ctx.beginPath();
     ctx.moveTo(pad.left, pad.top + h);
-    for (let i = 0; i < data.length; i++) {
-      ctx.lineTo(xAt(i), yToken(tokens[i]));
+    for (let i = 0; i < chartData.length; i++) {
+      ctx.lineTo(xAt(i), yBurn(burns[i]));
     }
-    ctx.lineTo(xAt(data.length - 1), pad.top + h);
+    ctx.lineTo(xAt(chartData.length - 1), pad.top + h);
     ctx.closePath();
     const grad = ctx.createLinearGradient(0, pad.top, 0, pad.top + h);
-    grad.addColorStop(0, hexAlpha(HEX.accent, 0.18));
+    grad.addColorStop(0, hexAlpha(HEX.accent, 0.2));
     grad.addColorStop(0.7, hexAlpha(HEX.accent, 0.04));
     grad.addColorStop(1, hexAlpha(HEX.accent, 0));
     ctx.fillStyle = grad;
     ctx.fill();
 
-    // ── Token line ──────────────────────────────────────────
+    // ── Burn rate line ──────────────────────────────────────
     ctx.beginPath();
     ctx.strokeStyle = HEX.accent;
     ctx.lineWidth = 1.5;
     ctx.lineJoin = 'round';
-    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 (dashed, subtle) ──────────────────────────
-    ctx.beginPath();
-    ctx.strokeStyle = hexAlpha(HEX.warning, 0.6);
-    ctx.lineWidth = 1;
-    ctx.lineJoin = 'round';
-    ctx.setLineDash([5, 4]);
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < chartData.length; i++) {
       const x = xAt(i);
-      const y = yCost(costs[i]);
+      const y = yBurn(burns[i]);
       i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
     }
     ctx.stroke();
-    ctx.setLineDash([]);
 
-    // ── Cache hit rate line (dotted, subtle) ────────────────
+    // ── Cache hit rate line ─────────────────────────────────
+    const hasCacheData = caches.some((c) => c > 0);
     if (hasCacheData) {
       ctx.beginPath();
       ctx.strokeStyle = hexAlpha(HEX.info, 0.45);
       ctx.lineWidth = 1;
       ctx.lineJoin = 'round';
       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;
+      for (let i = 0; i < chartData.length; i++) {
         const x = xAt(i);
-        const y = yCache(c);
-        if (!started) { ctx.moveTo(x, y); started = true; }
-        else ctx.lineTo(x, y);
+        const y = yCache(caches[i]);
+        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
       }
       ctx.stroke();
       ctx.setLineDash([]);
     }
 
-    // ── Inline legend (top-right, pill-style) ───────────────
+    // ── Inline legend (top-right) ───────────────────────────
     ctx.font = "9px 'Inter Variable', sans-serif";
     ctx.textAlign = 'right';
     let rx = width - pad.right - 4;
@@ -158,99 +165,72 @@ const TokenChart = memo(function TokenChart({ data }) {
 
     if (hasCacheData) {
       ctx.fillStyle = hexAlpha(HEX.info, 0.5);
-      ctx.fillText('Cache', rx, ly);
-      rx -= ctx.measureText('Cache').width + 4;
-      ctx.beginPath();
-      ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2);
-      ctx.fillStyle = hexAlpha(HEX.info, 0.5);
-      ctx.fill();
-      rx -= 12;
+      ctx.fillText('Cache %', rx, ly);
+      rx -= ctx.measureText('Cache %').width + 4;
+      ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
+      rx -= 14;
     }
 
-    ctx.fillStyle = hexAlpha(HEX.warning, 0.7);
-    ctx.fillText('Cost', rx, ly);
-    rx -= ctx.measureText('Cost').width + 4;
-    ctx.beginPath();
-    ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2);
-    ctx.fillStyle = hexAlpha(HEX.warning, 0.7);
-    ctx.fill();
-    rx -= 12;
+    ctx.fillStyle = hexAlpha(HEX.surface5, 0.7);
+    ctx.fillText('Agents', rx, ly);
+    rx -= ctx.measureText('Agents').width + 4;
+    ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
+    rx -= 14;
 
     ctx.fillStyle = HEX.accent;
-    ctx.fillText('Tokens', rx, ly);
-    rx -= ctx.measureText('Tokens').width + 4;
-    ctx.beginPath();
-    ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2);
-    ctx.fillStyle = HEX.accent;
-    ctx.fill();
+    ctx.fillText('Burn Rate', rx, ly);
+    rx -= ctx.measureText('Burn Rate').width + 4;
+    ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
 
-    // ── Hover crosshair + tooltip ───────────────────────────
-    if (hover && hover.index >= 0 && hover.index < data.length) {
+    // ── Hover ───────────────────────────────────────────────
+    if (hover && hover.index >= 0 && hover.index < chartData.length) {
       const hx = hover.x;
+      const d = chartData[hover.index];
 
-      // Vertical line
+      // Crosshair
       ctx.beginPath();
       ctx.moveTo(hx, pad.top);
       ctx.lineTo(hx, pad.top + h);
       ctx.strokeStyle = hexAlpha(HEX.text1, 0.15);
       ctx.lineWidth = 1;
-      ctx.setLineDash([]);
       ctx.stroke();
 
-      // Dot on token line
-      const d = data[hover.index];
-      const dotY = yToken(d.tokens || 0);
-      ctx.beginPath();
-      ctx.arc(hx, dotY, 3, 0, Math.PI * 2);
-      ctx.fillStyle = HEX.accent;
-      ctx.fill();
+      // Dot
+      const dotY = yBurn(d.burnRate);
+      ctx.beginPath(); ctx.arc(hx, dotY, 3, 0, Math.PI * 2);
+      ctx.fillStyle = HEX.accent; ctx.fill();
 
       // Tooltip
       const lines = [
-        { label: 'Tokens', value: fmtNum(d.tokens || 0), color: HEX.accent },
-        { label: 'Cost', value: fmtDollar(d.costUsd || 0), color: HEX.warning },
+        { label: 'Burn', value: `${fmtNum(d.burnRate)}/m`, color: HEX.accent },
+        { label: 'Cache', value: fmtPct(d.cacheHitRate * 100), color: HEX.info },
+        { label: 'Agents', value: `${d.running}/${d.agents}`, color: HEX.text2 },
       ];
-      if (d.cacheHitRate != null) {
-        lines.push({ label: 'Cache', value: fmtPct(d.cacheHitRate * 100), color: HEX.info });
-      }
-
-      const tooltipW = 100;
+      const tooltipW = 104;
       const tooltipH = lines.length * 16 + 12;
       let tx = hx + 12;
       if (tx + tooltipW > width - 8) tx = hx - tooltipW - 12;
       const ty = Math.max(pad.top, dotY - tooltipH / 2);
 
-      // Background
       ctx.fillStyle = hexAlpha(HEX.surface0, 0.92);
-      ctx.beginPath();
-      ctx.roundRect(tx, ty, tooltipW, tooltipH, 4);
-      ctx.fill();
+      ctx.beginPath(); ctx.roundRect(tx, ty, tooltipW, tooltipH, 4); ctx.fill();
       ctx.strokeStyle = hexAlpha(HEX.text4, 0.2);
-      ctx.lineWidth = 1;
-      ctx.stroke();
+      ctx.lineWidth = 1; ctx.stroke();
 
-      // Rows
       ctx.textAlign = 'left';
       lines.forEach((line, i) => {
         const rowY = ty + 14 + i * 16;
-        // Dot
-        ctx.beginPath();
-        ctx.arc(tx + 8, rowY - 3, 2, 0, Math.PI * 2);
-        ctx.fillStyle = line.color;
-        ctx.fill();
-        // Label
+        ctx.beginPath(); ctx.arc(tx + 8, rowY - 3, 2, 0, Math.PI * 2);
+        ctx.fillStyle = line.color; ctx.fill();
         ctx.font = "8px 'Inter Variable', sans-serif";
-        ctx.fillStyle = HEX.text3;
-        ctx.fillText(line.label, tx + 14, rowY);
-        // Value
+        ctx.fillStyle = HEX.text3; ctx.fillText(line.label, tx + 14, rowY);
         ctx.font = "9px 'JetBrains Mono Variable', monospace";
-        ctx.fillStyle = HEX.text0;
-        ctx.textAlign = 'right';
+        ctx.fillStyle = HEX.text0; ctx.textAlign = 'right';
         ctx.fillText(line.value, tx + tooltipW - 8, rowY);
         ctx.textAlign = 'left';
       });
     }
-  }, [data, width, height, hover, w, h, pad]);
+  }, [chartData, width, height, hover, w, h, pad]);
 
   return (
     <div ref={containerRef} className="absolute inset-0">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "groove-dev",
-  "version": "0.24.5",
+  "version": "0.24.6",
   "description": "Open-source agent orchestration layer — the AI company OS. MCP integrations (Slack, Gmail, Stripe, 15+), agent scheduling (cron), business roles (CMO, CFO, EA). GUI dashboard, multi-agent coordination, zero cold-start, infinite sessions. Works with Claude Code, Codex, Gemini CLI, Ollama.",
   "license": "FSL-1.1-Apache-2.0",
   "author": "Groove Dev <hello@groovedev.ai> (https://groovedev.ai)",

package/packages/daemon/src/api.js

@@ -1718,6 +1718,7 @@ Keep responses concise. Help them think, don't lecture them about the system the
         outputTokens: tokenData.outputTokens || 0,
         cacheHitRate: agentCacheTotal > 0 ? Math.round(((tokenData.cacheReadTokens || 0) / agentCacheTotal) * 1000) / 1000 : 0,
         contextUsage: a.contextUsage || 0,
+        rotationThreshold: daemon.adaptive.getThreshold(a.provider, a.role),
         durationMs: a.durationMs || tokenData.totalDurationMs || 0,
         turns: a.turns || tokenData.totalTurns || 0,
         modelDistribution: tokenData.modelDistribution || {},
@@ -1773,6 +1774,8 @@ Keep responses concise. Help them think, don't lecture them about the system the
       journalist: {
         ...journalistStatus,
         lastSummary: lastSynthesis?.summary || '',
+        projectMap: lastSynthesis?.projectMap || '',
+        decisions: lastSynthesis?.decisions || '',
         recentHistory: journalistHistory,
       },
       timeline: timelineData,

package/packages/daemon/src/process.js

@@ -317,6 +317,9 @@ For normal file edits within your scope, proceed without review.
               model: output.model,
               estimatedCostUsd: output.estimatedCostUsd,
             });
+            // Feed router cost log for tier tracking
+            const tier = this.daemon.classifier.classify(agent.id);
+            this.daemon.router.recordUsage(agent.id, output.model || current.model, output.tokensUsed, tier);
           }
         }
         // Record session result data (cost, duration, turns)