npm - groove-dev - Versions diffs - 0.22.2 → 0.22.3 - Mend

groove-dev 0.22.2 → 0.22.3

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 (24) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-cKOfI2iD.js"></script>
+    <script type="module" crossorigin src="/assets/index-BHDZqhzW.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-DtZ-1z8T.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BDyGhxDd.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/src/components/agents/agent-feed.jsx CHANGED Viewed

@@ -1,10 +1,10 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useEffect, useMemo } from 'react';
 import {
-  Send, Loader2, MessageSquare, HelpCircle, ArrowRight,
+  Send, Loader2, MessageSquare, ArrowRight,
   FileEdit, Search, Terminal, CheckCircle2, AlertCircle,
-  RotateCw, Zap, Wrench, Eye, FileText, Code2, Bug,
-  ChevronDown,
+  RotateCw, Zap, Wrench, Eye, Code2, Bug,
+  ChevronDown, HelpCircle, Pencil,
 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
@@ -47,10 +47,14 @@ function FormattedText({ text }) {
       {parts.map((part, i) => {
         if (part.startsWith('```') && part.endsWith('```')) {
           const code = part.slice(3, -3).replace(/^\w+\n/, '');
-          return <pre key={i} className="my-2 p-3 rounded-lg bg-black/30 text-[12px] font-mono text-text-1 overflow-x-auto whitespace-pre-wrap border border-white/[0.04] leading-relaxed">{code}</pre>;
+          return (
+            <pre key={i} className="my-2.5 p-3.5 rounded-lg bg-[#0d1117] text-[12px] font-mono text-[#c9d1d9] overflow-x-auto whitespace-pre-wrap border border-white/[0.06] leading-relaxed">
+              {code}
+            </pre>
+          );
         }
         if (part.startsWith('`') && part.endsWith('`')) {
-          return <code key={i} className="px-1 py-px rounded bg-white/[0.06] text-[12px] font-mono text-accent">{part.slice(1, -1)}</code>;
+          return <code key={i} className="px-1.5 py-0.5 rounded bg-accent/8 text-[12px] font-mono text-accent border border-accent/10">{part.slice(1, -1)}</code>;
         }
         return <span key={i}>{part.split(/(\*\*[^*]+\*\*)/g).map((s, j) =>
           s.startsWith('**') && s.endsWith('**')
@@ -65,43 +69,57 @@ function FormattedText({ text }) {
 // ── Message components ───────────────────────────────────────
 function UserMessage({ msg }) {
+  const isQuery = msg.isQuery;
   return (
     <div className="flex justify-end pl-12">
       <div className="max-w-[85%]">
+        {isQuery && (
+          <div className="flex items-center justify-end gap-1 mb-1">
+            <HelpCircle size={9} className="text-info" />
+            <span className="text-2xs text-info font-sans font-medium">Query</span>
+          </div>
+        )}
         <div className={cn(
-          'px-3.5 py-2.5 rounded-lg rounded-br-sm',
-          msg.isQuery
-            ? 'bg-info/12 text-text-0'
-            : 'bg-accent/12 text-text-0',
+          'px-4 py-3 rounded-2xl rounded-br-md',
+          isQuery
+            ? 'bg-info/10 border border-info/15'
+            : 'bg-accent/10 border border-accent/15',
         )}>
-          <div className="text-[13px] font-sans whitespace-pre-wrap break-words leading-relaxed">
+          <div className="text-[13px] font-sans whitespace-pre-wrap break-words leading-relaxed text-text-0">
             <FormattedText text={msg.text} />
           </div>
         </div>
-        <div className="text-2xs text-text-4 font-sans mt-1 text-right">{timeAgo(msg.timestamp)}</div>
+        <div className="text-[10px] text-text-4 font-sans mt-1.5 text-right">{timeAgo(msg.timestamp)}</div>
       </div>
     </div>
   );
 }
-function AgentMessage({ msg }) {
+function AgentMessage({ msg, agent }) {
   return (
-    <div className="pr-8">
-      <div className="border-l-2 border-accent/30 pl-3.5 py-0.5">
+    <div className="pr-6">
+      <div className="flex items-center gap-2 mb-1.5">
+        <div className="w-5 h-5 rounded-md bg-accent/12 flex items-center justify-center flex-shrink-0">
+          <Code2 size={10} className="text-accent" />
+        </div>
+        <span className="text-2xs font-semibold text-text-1 font-sans">{agent?.name || 'Agent'}</span>
+        <span className="text-2xs text-text-4 font-sans">{agent?.role}</span>
+      </div>
+      <div className="ml-7 px-4 py-3 rounded-2xl rounded-tl-md bg-surface-2/60 border border-border-subtle">
         <div className="text-[13px] text-text-1 font-sans whitespace-pre-wrap break-words leading-relaxed">
           <FormattedText text={msg.text} />
         </div>
       </div>
-      <div className="text-2xs text-text-4 font-sans mt-1 pl-4">{timeAgo(msg.timestamp)}</div>
+      <div className="text-[10px] text-text-4 font-sans mt-1.5 ml-7">{timeAgo(msg.timestamp)}</div>
     </div>
   );
 }
 function SystemMessage({ msg }) {
   return (
-    <div className="flex items-center gap-3 py-1">
+    <div className="flex items-center gap-3 py-2">
       <div className="flex-1 h-px bg-border-subtle" />
-      <span className="text-2xs text-text-4 font-sans flex-shrink-0">{msg.text}</span>
+      <span className="text-[10px] text-text-4 font-sans flex-shrink-0 uppercase tracking-wide">{msg.text}</span>
       <div className="flex-1 h-px bg-border-subtle" />
     </div>
   );
@@ -112,13 +130,15 @@ function SystemMessage({ msg }) {
 function ActivityLine({ entry }) {
   const meta = activityMeta(entry.text);
   const Icon = meta.icon;
-  const display = entry.text?.length > 100 ? entry.text.slice(0, 100) + '...' : entry.text;
+  const display = entry.text?.length > 120 ? entry.text.slice(0, 120) + '...' : entry.text;
   return (
-    <div className="flex items-center gap-2 py-px group">
-      <Icon size={9} className={cn(meta.color, 'flex-shrink-0 opacity-60')} />
-      <p className="text-2xs text-text-3 font-sans truncate flex-1 min-w-0">{display}</p>
-      <span className="text-2xs text-text-4 font-mono opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+    <div className="flex items-center gap-2 py-0.5 group">
+      <div className="w-4 h-4 rounded flex items-center justify-center flex-shrink-0">
+        <Icon size={10} className={cn(meta.color, 'opacity-70')} />
+      </div>
+      <p className="text-[11px] text-text-3 font-sans truncate flex-1 min-w-0">{display}</p>
+      <span className="text-[10px] text-text-4 font-mono opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
         {timeAgo(entry.timestamp)}
       </span>
     </div>
@@ -129,23 +149,23 @@ function ActivityGroup({ entries }) {
   const [expanded, setExpanded] = useState(false);
   if (entries.length === 1) {
-    return <ActivityLine entry={entries[0]} />;
+    return <div className="ml-7"><ActivityLine entry={entries[0]} /></div>;
   }
-  const visible = expanded ? entries : [entries[0]];
-  const hiddenCount = entries.length - 1;
+  const visible = expanded ? entries : entries.slice(0, 2);
+  const hiddenCount = entries.length - 2;
   return (
-    <div className="space-y-px py-0.5 border-l border-border-subtle pl-3 ml-1">
+    <div className="ml-7 py-1 pl-3 border-l border-border-subtle/50 space-y-px">
       {visible.map((entry, i) => (
         <ActivityLine key={i} entry={entry} />
       ))}
       {!expanded && hiddenCount > 0 && (
         <button
           onClick={() => setExpanded(true)}
-          className="flex items-center gap-1 text-2xs text-text-4 hover:text-text-2 font-sans cursor-pointer py-0.5"
+          className="flex items-center gap-1.5 text-[11px] text-text-4 hover:text-text-2 font-sans cursor-pointer py-0.5 ml-6"
         >
-          <ChevronDown size={8} />
+          <ChevronDown size={9} />
           <span>{hiddenCount} more</span>
         </button>
       )}
@@ -163,28 +183,42 @@ function StreamingBar({ agent }) {
   const isRecent = lastActivity && (Date.now() - lastActivity.timestamp) < 10000;
   const display = isRecent && lastActivity.text
-    ? (lastActivity.text.length > 50 ? lastActivity.text.slice(0, 50) + '...' : lastActivity.text)
+    ? (lastActivity.text.length > 60 ? lastActivity.text.slice(0, 60) + '...' : lastActivity.text)
     : null;
+  const ctxPct = Math.round((agent.contextUsage || 0) * 100);
   return (
-    <div className="flex items-center gap-2 px-4 h-7 border-b border-border-subtle bg-surface-0/50 flex-shrink-0">
-      <div className="flex items-center gap-1.5 flex-1 min-w-0">
-        <div className="relative flex items-center justify-center w-3.5 h-3.5">
-          <span className="absolute inset-0 rounded-full bg-accent/20 animate-ping" style={{ animationDuration: '2s' }} />
+    <div className="flex items-center gap-3 px-4 h-8 border-b border-border-subtle bg-surface-1/80 flex-shrink-0">
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <div className="relative flex items-center justify-center w-4 h-4">
+          <span className="absolute inset-0 rounded-full bg-accent/15 animate-ping" style={{ animationDuration: '2s' }} />
           <span className="relative w-1.5 h-1.5 rounded-full bg-accent" />
         </div>
         {isRecent ? (
           <>
-            <Icon size={9} className={cn(meta.color, 'flex-shrink-0')} />
-            <span className="text-2xs text-text-2 font-sans truncate">{display}</span>
+            <Icon size={10} className={cn(meta.color, 'flex-shrink-0')} />
+            <span className="text-[11px] text-text-2 font-sans truncate">{display}</span>
           </>
         ) : (
-          <span className="text-2xs text-text-3 font-sans">Processing...</span>
+          <span className="text-[11px] text-text-3 font-sans">Working...</span>
         )}
       </div>
-      <span className="text-2xs text-text-4 font-mono flex-shrink-0">
-        {fmtTokens(agent.tokensUsed)} tok
-      </span>
+      <div className="flex items-center gap-3 flex-shrink-0">
+        <span className="text-[10px] text-text-4 font-mono">{fmtTokens(agent.tokensUsed)}</span>
+        <div className="flex items-center gap-1.5">
+          <div className="w-14 h-1 rounded-full bg-surface-4 overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-500"
+              style={{
+                width: `${ctxPct}%`,
+                background: ctxPct >= 75 ? 'var(--color-danger)' : ctxPct >= 50 ? 'var(--color-warning)' : 'var(--color-accent)',
+              }}
+            />
+          </div>
+          <span className="text-[10px] text-text-4 font-mono w-7 text-right">{ctxPct}%</span>
+        </div>
+      </div>
     </div>
   );
 }
@@ -205,6 +239,7 @@ export function AgentFeed({ agent }) {
   const queryAgent = useGrooveStore((s) => s.queryAgent);
   const [input, setInput] = useState('');
+  const [mode, setMode] = useState('instruct'); // instruct | query
   const [sending, setSending] = useState(false);
   const scrollRef = useRef(null);
   const inputRef = useRef(null);
@@ -271,8 +306,8 @@ export function AgentFeed({ agent }) {
     setInput('');
     setSending(true);
     try {
-      if (text.startsWith('?')) {
-        await queryAgent(agent.id, text.slice(1).trim());
+      if (mode === 'query') {
+        await queryAgent(agent.id, text);
       } else {
         await instructAgent(agent.id, text);
       }
@@ -288,7 +323,6 @@ export function AgentFeed({ agent }) {
     }
   }
-  const isQuery = input.startsWith('?');
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   return (
@@ -296,25 +330,27 @@ export function AgentFeed({ agent }) {
       {isAlive && <StreamingBar agent={agent} />}
       {/* Messages area */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
         {timeline.length === 0 && (
           <div className="flex flex-col items-center justify-center h-full text-center py-8">
             {isAlive ? (
               <>
-                <div className="relative w-10 h-10 mb-4">
-                  <span className="absolute inset-0 rounded-full border border-accent/25 animate-ping" style={{ animationDuration: '2.5s' }} />
+                <div className="relative w-12 h-12 mb-4">
+                  <span className="absolute inset-0 rounded-full border border-accent/20 animate-ping" style={{ animationDuration: '2.5s' }} />
                   <span className="absolute inset-0 rounded-full bg-accent/6 flex items-center justify-center">
                     <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
                   </span>
                 </div>
-                <p className="text-sm font-medium text-text-1 font-sans">{agent.name} initializing</p>
-                <p className="text-xs text-text-3 font-sans mt-1.5">Scanning workspace and loading context</p>
+                <p className="text-sm font-semibold text-text-0 font-sans">{agent.name}</p>
+                <p className="text-xs text-text-3 font-sans mt-1">Initializing session...</p>
               </>
             ) : (
               <>
-                <MessageSquare size={18} className="text-text-4 mb-3" />
-                <p className="text-sm font-medium text-text-1 font-sans">Session complete</p>
-                <p className="text-xs text-text-3 font-sans mt-1.5">Reply to continue with full context</p>
+                <div className="w-10 h-10 rounded-xl bg-surface-3 flex items-center justify-center mb-3">
+                  <MessageSquare size={18} className="text-text-4" />
+                </div>
+                <p className="text-sm font-semibold text-text-0 font-sans">{agent.name}</p>
+                <p className="text-xs text-text-3 font-sans mt-1">Session complete — send a message to continue</p>
               </>
             )}
           </div>
@@ -328,53 +364,90 @@ export function AgentFeed({ agent }) {
           return <AgentMessage key={`msg-${i}`} msg={item} agent={agent} />;
         })}
         {sending && (
-          <div className="border-l-2 border-accent/20 pl-3.5 py-2">
-            <div className="flex items-center gap-1.5">
-              <span className="w-1 h-1 rounded-full bg-accent/60 animate-pulse" style={{ animationDelay: '0ms' }} />
-              <span className="w-1 h-1 rounded-full bg-accent/60 animate-pulse" style={{ animationDelay: '150ms' }} />
-              <span className="w-1 h-1 rounded-full bg-accent/60 animate-pulse" style={{ animationDelay: '300ms' }} />
+          <div className="flex items-center gap-2 ml-7 py-2">
+            <div className="w-5 h-5 rounded-md bg-accent/12 flex items-center justify-center">
+              <Code2 size={10} className="text-accent" />
+            </div>
+            <div className="flex items-center gap-1.5 px-3 py-2 rounded-2xl bg-surface-2/60 border border-border-subtle">
+              <span className="w-1.5 h-1.5 rounded-full bg-accent/60 animate-pulse" style={{ animationDelay: '0ms' }} />
+              <span className="w-1.5 h-1.5 rounded-full bg-accent/60 animate-pulse" style={{ animationDelay: '200ms' }} />
+              <span className="w-1.5 h-1.5 rounded-full bg-accent/60 animate-pulse" style={{ animationDelay: '400ms' }} />
             </div>
           </div>
         )}
       </div>
-      {/* Input */}
-      <div className="border-t border-border-subtle px-3 py-2.5 bg-surface-0/30 flex-shrink-0">
-        <div className="flex items-end gap-2">
+      {/* Input area */}
+      <div className="border-t border-border px-4 py-3 bg-surface-1/50 flex-shrink-0">
+        {/* Mode pills */}
+        <div className="flex items-center gap-1 mb-2">
+          <button
+            onClick={() => setMode('instruct')}
+            className={cn(
+              'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-sans font-medium transition-colors cursor-pointer',
+              mode === 'instruct'
+                ? 'bg-accent/12 text-accent border border-accent/20'
+                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
+            )}
+          >
+            <Pencil size={10} />
+            Instruct
+          </button>
+          <button
+            onClick={() => setMode('query')}
+            className={cn(
+              'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-sans font-medium transition-colors cursor-pointer',
+              mode === 'query'
+                ? 'bg-info/12 text-info border border-info/20'
+                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
+            )}
+          >
+            <HelpCircle size={10} />
+            Query
+          </button>
+          <span className="text-[10px] text-text-4 font-sans ml-auto">
+            {mode === 'query' ? 'Read-only — agent keeps working' : isAlive ? 'Directs the agent' : 'Continues the session'}
+          </span>
+        </div>
+        <div className={cn(
+          'flex items-end gap-2 rounded-xl border bg-surface-0 p-1 transition-colors',
+          mode === 'query' ? 'border-info/20 focus-within:border-info/40' : 'border-border-subtle focus-within:border-accent/30',
+        )}>
           <textarea
             ref={inputRef}
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={onKeyDown}
-            placeholder={isAlive ? (isQuery ? 'Query (read-only)...' : 'Instruct agent...') : 'Continue conversation...'}
+            placeholder={mode === 'query'
+              ? 'Ask about this agent\'s work...'
+              : isAlive ? 'Send an instruction...' : 'Continue this session...'}
             rows={1}
             className={cn(
-              'flex-1 resize-none rounded-lg px-3 py-2 text-[13px]',
-              'bg-surface-0 border text-text-0 font-sans',
+              'flex-1 resize-none px-3 py-2 text-[13px]',
+              'bg-transparent text-text-0 font-sans',
               'placeholder:text-text-4',
-              'focus:outline-none focus:ring-1',
-              'max-h-[100px] min-h-[36px]',
-              isQuery ? 'border-info/25 focus:ring-info/30' : 'border-border-subtle focus:ring-accent/30',
+              'focus:outline-none',
+              'max-h-[120px] min-h-[36px]',
             )}
-            style={{ height: Math.min(Math.max(36, input.split('\n').length * 20), 100) }}
+            style={{ height: Math.min(Math.max(36, input.split('\n').length * 20), 120) }}
           />
           <button
             onClick={handleSend}
             disabled={!input.trim() || sending}
             className={cn(
-              'w-8 h-8 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0',
+              'w-9 h-9 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0 mb-px',
               'disabled:opacity-15 disabled:cursor-not-allowed',
               input.trim()
-                ? 'bg-accent text-surface-0 hover:bg-accent/85'
+                ? mode === 'query'
+                  ? 'bg-info text-white hover:bg-info/85'
+                  : 'bg-accent text-white hover:bg-accent/85'
                 : 'bg-transparent text-text-4',
             )}
           >
-            {sending ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
+            {sending ? <Loader2 size={15} className="animate-spin" /> : <Send size={15} />}
           </button>
         </div>
-        {isQuery && (
-          <div className="text-2xs text-info/70 font-sans mt-1 pl-1">Read-only query — agent keeps running</div>
-        )}
       </div>
     </div>
   );

package/packages/gui/src/components/agents/agent-node.jsx CHANGED Viewed

@@ -117,7 +117,7 @@ const STATUS_SHORT = {
 const AgentNode = memo(({ data, selected }) => {
   const { agent } = data;
   const isAlive = agent.status === 'running' || agent.status === 'starting';
-  const contextPct = Math.round((agent.contextUsed || 0) * 100);
+  const contextPct = Math.round((agent.contextUsage || 0) * 100);
   const sColor = statusColor(agent.status);
   const tokens = agent.tokensUsed || 0;
   const [hovered, setHovered] = useState(false);

package/packages/gui/src/components/agents/agent-panel.jsx CHANGED Viewed

@@ -85,7 +85,7 @@ export function AgentPanel() {
   if (!agent) return null;
   const isAlive = agent.status === 'running' || agent.status === 'starting';
-  const ctxPct = Math.round((agent.contextUsed || 0) * 100);
+  const ctxPct = Math.round((agent.contextUsage || 0) * 100);
   const spawned = agent.spawnedAt || agent.createdAt;
   const uptime = spawned ? Math.floor((Date.now() - new Date(spawned).getTime()) / 1000) : 0;
   const colors = roleColor(agent.role);

package/packages/gui/src/components/agents/agent-telemetry.jsx CHANGED Viewed

@@ -153,7 +153,7 @@ export function AgentTelemetry({ agent }) {
   // Rough health score based on context usage and burn rate
   const healthScore = useMemo(() => {
-    const ctx = agent.contextUsed || 0;
+    const ctx = agent.contextUsage || 0;
     let score = 100;
     if (ctx > 90) score -= 50;
     else if (ctx > 70) score -= 25;
@@ -163,7 +163,7 @@ export function AgentTelemetry({ agent }) {
     if (agent.status === 'crashed') score = 10;
     if (agent.status === 'completed') score = 95;
     return Math.max(0, Math.min(100, score));
-  }, [agent.contextUsed, agent.status, burnRate]);
+  }, [agent.contextUsage, agent.status, burnRate]);
   return (
     <div className="px-5 py-5 space-y-5 overflow-y-auto h-full">

package/packages/gui/src/components/dashboard/fleet-panel.jsx CHANGED Viewed

@@ -48,8 +48,8 @@ export function FleetPanel({ agents }) {
                     <div
                       className="h-full rounded-full"
                       style={{
-                        width: `${Math.min(a.contextUsed || 0, 100)}%`,
-                        background: (a.contextUsed || 0) >= 80 ? 'var(--color-danger)' : (a.contextUsed || 0) >= 60 ? 'var(--color-warning)' : 'var(--color-success)',
+                        width: `${Math.min(a.contextUsage || 0, 100)}%`,
+                        background: (a.contextUsage || 0) >= 80 ? 'var(--color-danger)' : (a.contextUsage || 0) >= 60 ? 'var(--color-warning)' : 'var(--color-success)',
                       }}
                     />
                   </div>

package/packages/gui/src/stores/groove.js CHANGED Viewed

@@ -118,7 +118,19 @@ export const useGrooveStore = create((set, get) => ({
         case 'agent:output': {
           const { agentId, data } = msg;
-          const text = typeof data.data === 'string' ? data.data : (Array.isArray(data.data) ? data.data.filter((b) => b.type === 'text').map((b) => b.text).join('\n') : JSON.stringify(data.data));
+          const text = typeof data.data === 'string' ? data.data : (Array.isArray(data.data) ? data.data.filter((b) => b.type === 'text').map((b) => b.text).join('\n') : '');
+          // Update agent metrics in real-time (contextUsage, tokensUsed)
+          if (data.contextUsage !== undefined || data.tokensUsed !== undefined) {
+            const agents = get().agents.map((a) => {
+              if (a.id !== agentId) return a;
+              const updates = {};
+              if (data.contextUsage !== undefined) updates.contextUsage = data.contextUsage;
+              if (data.tokensUsed !== undefined) updates.tokensUsed = data.tokensUsed;
+              return { ...a, ...updates };
+            });
+            set({ agents });
+          }
           // Promote assistant text and result responses to chat bubbles
           if ((data.subtype === 'assistant' || data.type === 'result') && text && text.trim()) {
@@ -127,14 +139,15 @@ export const useGrooveStore = create((set, get) => ({
             history[agentId] = [...history[agentId].slice(-100), { from: 'agent', text: text.trim(), timestamp: Date.now() }];
             set({ chatHistory: history });
             persistJSON('groove:chatHistory', history);
-          } else {
-            // Everything else goes to activity log
+          } else if (text && text.trim()) {
+            // Non-empty activity goes to activity log
             const log = { ...get().activityLog };
             if (!log[agentId]) log[agentId] = [];
             log[agentId] = [...log[agentId].slice(-200), {
               timestamp: Date.now(),
-              text: text || '',
+              text: text.trim(),
               type: data.type,
+              subtype: data.subtype || null,
             }];
             set({ activityLog: log });
             persistJSON('groove:activityLog', log);