npm - groove-dev - Versions diffs - 0.27.181 → 0.27.183 - Mend

groove-dev 0.27.181 → 0.27.183

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

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

@@ -6,12 +6,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-CTer01Vg.js"></script>
+    <script type="module" crossorigin src="/assets/index-DPjGBQ5X.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-26L3JoZv.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-DoBZjiHE.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BYKpdS2W.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-DTFtRtkx.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-CiOy7wVS.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.181",
+  "version": "0.27.183",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

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

@@ -6,7 +6,8 @@ import { AgentFeed } from './agent-feed';
 import { AgentConfig } from './agent-config';
 import { AgentTelemetry } from './agent-telemetry';
 import { AgentMdFiles } from './agent-mdfiles';
-import { MessageSquare, Settings, Activity, FileText, Pencil, Check, X, SendHorizontal, ChevronDown } from 'lucide-react';
+import { InnerChatRelay } from './innerchat-relay';
+import { MessageSquare, Settings, Activity, FileText, Pencil, Check, X } from 'lucide-react';
 import { fmtNum, fmtUptime } from '../../lib/format';
 import { cn } from '../../lib/cn';
 import { roleColor } from '../../lib/status';
@@ -77,72 +78,6 @@ function InlineName({ agent }) {
   );
 }
-function InnerChatCompose({ fromAgent, onClose }) {
-  const agents = useGrooveStore((s) => s.agents);
-  const sendInnerChat = useGrooveStore((s) => s.sendInnerChat);
-  const addToast = useGrooveStore((s) => s.addToast);
-  const [toId, setToId] = useState('');
-  const [message, setMessage] = useState('');
-  const [sending, setSending] = useState(false);
-  const others = agents.filter((a) => a.id !== fromAgent.id && (a.status === 'running' || a.status === 'starting' || a.status === 'completed'));
-  async function handleSend() {
-    if (!toId || !message.trim() || sending) return;
-    setSending(true);
-    try {
-      await sendInnerChat(fromAgent.id, toId, message.trim());
-      const target = agents.find((a) => a.id === toId);
-      addToast('success', `Sent to ${target?.name || toId}`, 'InnerChat message delivered');
-      setMessage('');
-      onClose();
-    } catch (err) {
-      addToast('error', 'InnerChat failed', err.message);
-    } finally {
-      setSending(false);
-    }
-  }
-  return (
-    <div className="flex-shrink-0 border-t border-border-subtle bg-surface-0 px-3 py-2.5 space-y-2">
-      <div className="flex items-center justify-between">
-        <span className="text-2xs font-semibold text-warning font-sans">InnerChat — relay to agent</span>
-        <button onClick={onClose} className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"><X size={12} /></button>
-      </div>
-      <div className="relative">
-        <select
-          value={toId}
-          onChange={(e) => setToId(e.target.value)}
-          className="w-full h-7 pl-2 pr-6 text-xs bg-surface-3 border border-border-subtle rounded text-text-0 font-sans focus:outline-none focus:border-accent/40 appearance-none cursor-pointer"
-        >
-          <option value="">Select target agent…</option>
-          {others.map((a) => (
-            <option key={a.id} value={a.id}>{a.name} ({a.role})</option>
-          ))}
-        </select>
-        <ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
-      </div>
-      <div className="flex gap-1.5">
-        <textarea
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleSend(); }}
-          placeholder="Message to relay… (⌘↵ to send)"
-          rows={3}
-          className="flex-1 px-2 py-1.5 text-xs bg-surface-3 border border-border-subtle rounded text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:border-accent/40 resize-none"
-        />
-        <button
-          onClick={handleSend}
-          disabled={!toId || !message.trim() || sending}
-          className="w-8 flex-shrink-0 flex items-center justify-center rounded bg-accent/15 text-accent hover:bg-accent/25 disabled:opacity-30 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
-          <SendHorizontal size={14} />
-        </button>
-      </div>
-    </div>
-  );
-}
 export function AgentPanel() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const agents = useGrooveStore((s) => s.agents);
@@ -251,7 +186,7 @@ export function AgentPanel() {
               <AgentFeed agent={agent} />
             </div>
             {innerChatOpen && (
-              <InnerChatCompose fromAgent={agent} onClose={() => setInnerChatOpen(false)} />
+              <InnerChatRelay fromAgent={agent} onClose={() => setInnerChatOpen(false)} />
             )}
           </>
         )}

package/packages/gui/src/components/agents/innerchat-relay.jsx ADDED Viewed

@@ -0,0 +1,145 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useMemo } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { SendHorizontal, ChevronDown, X } from 'lucide-react';
+import { cn } from '../../lib/cn';
+// Relay compose panel — pick any agent on any team and send a message on this
+// agent's behalf. The reply is forwarded back automatically, so the user only
+// drives the outbound hop.
+export function InnerChatRelay({ fromAgent, onClose }) {
+  const agents = useGrooveStore((s) => s.agents);
+  const teams = useGrooveStore((s) => s.teams);
+  const threadsMap = useGrooveStore((s) => s.innerchatThreads);
+  const sendInnerChat = useGrooveStore((s) => s.sendInnerChat);
+  const addToast = useGrooveStore((s) => s.addToast);
+  const [toId, setToId] = useState('');
+  const [threadId, setThreadId] = useState('');
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  // Every agent except this one, grouped by team. Stopped agents are included:
+  // delivery resumes them the same way a user chat message would.
+  const grouped = useMemo(() => {
+    const byTeam = new Map();
+    for (const a of agents) {
+      if (a.id === fromAgent.id) continue;
+      const key = a.teamId || 'untimed';
+      if (!byTeam.has(key)) byTeam.set(key, []);
+      byTeam.get(key).push(a);
+    }
+    return Array.from(byTeam.entries()).map(([teamId, list]) => ({
+      teamId,
+      name: teams.find((t) => t.id === teamId)?.name || 'No team',
+      agents: list.sort((a, b) => a.name.localeCompare(b.name)),
+    })).sort((a, b) => a.name.localeCompare(b.name));
+  }, [agents, teams, fromAgent.id]);
+  // Existing exchanges between this agent and the selected target.
+  const threads = useMemo(() => {
+    if (!toId) return [];
+    return Object.values(threadsMap)
+      .filter((t) => t.participants.some((p) => p.id === fromAgent.id)
+        && t.participants.some((p) => p.id === toId))
+      .sort((a, b) => b.updatedAt - a.updatedAt);
+  }, [threadsMap, toId, fromAgent.id]);
+  const target = agents.find((a) => a.id === toId);
+  const willResume = target && target.status !== 'running' && target.status !== 'starting';
+  async function handleSend() {
+    if (!toId || !message.trim() || sending) return;
+    setSending(true);
+    try {
+      await sendInnerChat(fromAgent.id, toId, message.trim(), threadId || null);
+      addToast('success', `Relayed to ${target?.name || toId}`,
+        willResume ? 'Target is being resumed to receive it' : undefined);
+      setMessage('');
+      onClose();
+    } catch {
+      // sendInnerChat already surfaced the error
+    } finally {
+      setSending(false);
+    }
+  }
+  return (
+    <div className="flex-shrink-0 border-t border-border-subtle bg-surface-0 px-3 py-2.5 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-2xs font-semibold text-warning font-sans">
+          Relay from {fromAgent.name}
+        </span>
+        <button onClick={onClose} className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer">
+          <X size={12} />
+        </button>
+      </div>
+      <div className="relative">
+        <select
+          value={toId}
+          onChange={(e) => { setToId(e.target.value); setThreadId(''); }}
+          className="w-full h-7 pl-2 pr-6 text-xs bg-surface-3 border border-border-subtle rounded text-text-0 font-sans focus:outline-none focus:border-accent/40 appearance-none cursor-pointer"
+        >
+          <option value="">Select target agent…</option>
+          {grouped.map((g) => (
+            <optgroup key={g.teamId} label={g.name}>
+              {g.agents.map((a) => (
+                <option key={a.id} value={a.id}>
+                  {a.name} ({a.role}){a.status === 'running' ? '' : ` — ${a.status}`}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+        </select>
+        <ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+      </div>
+      {threads.length > 0 && (
+        <div className="relative">
+          <select
+            value={threadId}
+            onChange={(e) => setThreadId(e.target.value)}
+            className="w-full h-7 pl-2 pr-6 text-xs bg-surface-3 border border-border-subtle rounded text-text-2 font-sans focus:outline-none focus:border-accent/40 appearance-none cursor-pointer"
+          >
+            <option value="">Start a new thread</option>
+            {threads.map((t) => (
+              <option key={t.id} value={t.id}>
+                Continue thread ({t.turns.length} turn{t.turns.length === 1 ? '' : 's'})
+              </option>
+            ))}
+          </select>
+          <ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+        </div>
+      )}
+      <div className="flex gap-1.5">
+        <textarea
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleSend(); }}
+          placeholder={`What should ${fromAgent.name} say? (⌘↵ to send)`}
+          rows={3}
+          className="flex-1 px-2 py-1.5 text-xs bg-surface-3 border border-border-subtle rounded text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:border-accent/40 resize-none"
+        />
+        <button
+          onClick={handleSend}
+          disabled={!toId || !message.trim() || sending}
+          className={cn(
+            'w-8 flex-shrink-0 flex items-center justify-center rounded transition-colors cursor-pointer',
+            'bg-accent/15 text-accent hover:bg-accent/25',
+            'disabled:opacity-30 disabled:cursor-not-allowed',
+          )}
+        >
+          <SendHorizontal size={14} />
+        </button>
+      </div>
+      {willResume && (
+        <p className="text-2xs text-text-4 font-sans">
+          {target.name} is {target.status} — it will be resumed to receive this.
+        </p>
+      )}
+    </div>
+  );
+}

package/packages/gui/src/components/chat/chat-messages.jsx CHANGED Viewed

@@ -399,7 +399,9 @@ function InnerChatMessage({ msg }) {
     <div className="max-w-[85%]">
       <div className="flex items-center gap-1.5 mb-1">
         <MessageSquare size={11} className="text-warning" />
-        <span className="text-2xs font-sans font-medium text-warning">InnerChat</span>
+        <span className="text-2xs font-sans font-medium text-warning">
+          {msg.innerchat?.kind === 'reply' ? 'InnerChat reply' : 'InnerChat'}
+        </span>
         <span className="text-2xs font-sans text-text-3">from</span>
         <span className="text-2xs font-sans font-medium text-text-1">{senderName}</span>
         {senderRole && <span className="text-2xs font-sans text-text-3">{senderRole}</span>}

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

@@ -1,10 +1,11 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useEffect, useRef, useState } from 'react';
-import { X, PanelRight } from 'lucide-react';
+import { X, PanelRight, MessageSquare } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { Badge } from '../ui/badge';
 import { AgentFeed } from '../agents/agent-feed';
+import { InnerChatRelay } from '../agents/innerchat-relay';
 import { fmtNum } from '../../lib/format';
 const STATUS_VARIANT = {
@@ -39,6 +40,7 @@ export function FleetPane({ agentId, paneIndex, readOnly = false }) {
   const openDetail = useGrooveStore((s) => s.openDetail);
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const isPanelOpen = detailPanel?.type === 'agent' && detailPanel?.agentId === resolvedId;
+  const [relayOpen, setRelayOpen] = useState(false);
   const lastAgentRef = useRef(liveAgent);
   const [gone, setGone] = useState(false);
@@ -95,6 +97,16 @@ export function FleetPane({ agentId, paneIndex, readOnly = false }) {
         )}>
           {ctxPct}%
         </span>
+        <button
+          onClick={() => setRelayOpen((v) => !v)}
+          className={cn(
+            'p-1 rounded-md transition-colors cursor-pointer',
+            relayOpen ? 'text-warning' : 'text-text-3 hover:text-warning hover:bg-surface-3',
+          )}
+          title="Relay a message to another agent"
+        >
+          <MessageSquare size={14} />
+        </button>
         <button
           onClick={() => openDetail({ type: 'agent', agentId: resolvedId })}
           className={cn(
@@ -118,6 +130,8 @@ export function FleetPane({ agentId, paneIndex, readOnly = false }) {
       <div className="flex-1 min-h-0">
         <AgentFeed agent={agent} readOnly={readOnly} />
       </div>
+      {relayOpen && <InnerChatRelay fromAgent={agent} onClose={() => setRelayOpen(false)} />}
     </div>
   );
 }

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

@@ -26,6 +26,9 @@ export function FleetSidebar({ width }) {
   const openDetail = useGrooveStore((s) => s.openDetail);
   const addToast = useGrooveStore((s) => s.addToast);
+  const moveAgentToTeam = useGrooveStore((s) => s.moveAgentToTeam);
+  const [dropTeamId, setDropTeamId] = useState(null);
   const [confirmDeleteTeam, setConfirmDeleteTeam] = useState(null);
   const [renamingTeamId, setRenamingTeamId] = useState(null);
   const [renameValue, setRenameValue] = useState('');
@@ -125,6 +128,22 @@ export function FleetSidebar({ width }) {
     setRenamingTeamId(null);
   }
+  // Team headers accept agent rows dragged from any other team.
+  function handleDragOver(e, teamId) {
+    if (!e.dataTransfer.types.includes('application/x-fleet-agent')) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'link';
+    if (dropTeamId !== teamId) setDropTeamId(teamId);
+  }
+  function handleDrop(e, teamId) {
+    const agentId = e.dataTransfer.getData('application/x-fleet-agent');
+    setDropTeamId(null);
+    if (!agentId) return;
+    e.preventDefault();
+    moveAgentToTeam(agentId, teamId);
+  }
   function startRename(e, team) {
     e.stopPropagation();
     setRenamingTeamId(team.id);
@@ -167,7 +186,20 @@ export function FleetSidebar({ width }) {
           const isConfirming = confirmDeleteTeam === team.id;
           return (
-            <div key={team.id} className="mb-0.5">
+            <div
+              key={team.id}
+              className={cn(
+                'mb-0.5 rounded-md transition-colors',
+                dropTeamId === team.id && 'bg-accent/10 ring-1 ring-accent/40',
+              )}
+              onDragOver={(e) => handleDragOver(e, team.id)}
+              onDragLeave={(e) => {
+                // Ignore moves onto descendants — they still count as "inside".
+                if (e.currentTarget.contains(e.relatedTarget)) return;
+                setDropTeamId((id) => (id === team.id ? null : id));
+              }}
+              onDrop={(e) => handleDrop(e, team.id)}
+            >
               {/* Team header */}
               <div className={cn(
                 'w-full flex items-center gap-1 px-2 py-1.5 rounded-md hover:bg-surface-2 transition-colors group',

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

@@ -369,54 +369,39 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
-        case 'innerchat:sent': {
-          const ic = msg.data;
-          get().addChatMessage(ic.to.id, 'innerchat', ic.message, false);
-          set((s) => {
-            const icMsgs = { ...s.innerchatMessages };
-            icMsgs[ic.id] = ic;
-            persistJSON('groove:innerchatMessages', icMsgs);
-            return { innerchatMessages: icMsgs };
-          });
-          // Tag the chat message with innerchat metadata
-          set((s) => {
-            const history = { ...s.chatHistory };
-            const arr = history[ic.to.id] || [];
-            if (arr.length > 0) {
-              const last = arr[arr.length - 1];
-              if (last.from === 'innerchat' && last.text === ic.message) {
-                arr[arr.length - 1] = { ...last, innerchat: { messageId: ic.id, fromAgent: ic.from } };
-                history[ic.to.id] = arr;
-                persistJSON('groove:chatHistory', history);
-                return { chatHistory: history };
-              }
-            }
-            return {};
-          });
-          break;
-        }
+        case 'innerchat:turn': {
+          const { thread, turn } = msg.data;
+          if (turn.status === 'failed') {
+            get().addToast('error', `Relay to ${turn.to.name} failed`, turn.error);
+          }
-        case 'innerchat:response': {
-          const ic = msg.data;
-          get().addChatMessage(ic.from.id, 'innerchat', ic.response, false);
+          // The turn lands in the recipient's chat, badged with who sent it.
           set((s) => {
-            const icMsgs = { ...s.innerchatMessages };
-            icMsgs[ic.id] = ic;
-            persistJSON('groove:innerchatMessages', icMsgs);
-            // Tag the response chat message with innerchat metadata
             const history = { ...s.chatHistory };
-            const arr = history[ic.from.id] || [];
-            if (arr.length > 0) {
-              const last = arr[arr.length - 1];
-              if (last.from === 'innerchat' && last.text === ic.response) {
-                arr[arr.length - 1] = { ...last, innerchat: { messageId: ic.id, fromAgent: ic.to } };
-                history[ic.from.id] = arr;
-                persistJSON('groove:chatHistory', history);
-              }
-            }
-            return { innerchatMessages: icMsgs, chatHistory: history };
+            const arr = [...(history[turn.to.id] || [])];
+            arr.push({
+              from: 'innerchat',
+              text: turn.text,
+              timestamp: turn.timestamp,
+              isQuery: false,
+              innerchat: {
+                turnId: turn.id,
+                threadId: thread.id,
+                kind: turn.kind,
+                fromAgent: turn.from,
+              },
+            });
+            history[turn.to.id] = arr.slice(-100);
+            persistJSON('groove:chatHistory', history);
+            const threads = { ...s.innerchatThreads, [thread.id]: thread };
+            persistJSON('groove:innerchatThreads', threads);
+            return { chatHistory: history, innerchatThreads: threads };
           });
-          get().addToast('info', `${ic.to.name} replied to ${ic.from.name}`, 'InnerChat response received');
+          if (turn.kind === 'reply' && turn.status !== 'failed') {
+            get().addToast('info', `${turn.from.name} replied`, `Forwarded to ${turn.to.name}`);
+          }
           break;
         }

package/packages/gui/src/stores/slices/agents-slice.js CHANGED Viewed

@@ -104,20 +104,43 @@ export const createAgentsSlice = (set, get) => ({
     }
   },
+  // Move an agent to another team. Teams are an organizational grouping —
+  // this re-labels the agent and does NOT relocate its working directory, so a
+  // running process keeps working where it is.
+  async moveAgentToTeam(agentId, teamId) {
+    const agent = get().agents.find((a) => a.id === agentId);
+    if (!agent || agent.teamId === teamId) return;
+    const team = get().teams.find((t) => t.id === teamId);
+    try {
+      await api.patch(`/agents/${encodeURIComponent(agentId)}`, { teamId });
+      get().addToast('success', `Moved ${agent.name} → ${team?.name || 'team'}`);
+    } catch (err) {
+      get().addToast('error', 'Move failed', err.message);
+    }
+  },
   // ── InnerChat ─────────────────────────────────────────────
-  innerchatMessages: loadJSON('groove:innerchatMessages') || {},
+  innerchatThreads: loadJSON('groove:innerchatThreads') || {},
-  async sendInnerChat(fromId, toId, message) {
+  // Relay a message from one agent to another. Pass threadId to continue an
+  // existing exchange rather than opening a new one.
+  async sendInnerChat(fromId, toId, message, threadId = null) {
     try {
-      const msg = await api.post('/innerchat/send', { from: fromId, to: toId, message });
-      return msg;
+      return await api.post('/innerchat/send', { from: fromId, to: toId, message, threadId });
     } catch (err) {
       get().addToast('error', 'InnerChat failed', err.message);
       throw err;
     }
   },
+  // Threads this agent is a participant in, most recent first.
+  innerchatThreadsFor(agentId) {
+    return Object.values(get().innerchatThreads)
+      .filter((t) => t.participants.some((p) => p.id === agentId))
+      .sort((a, b) => b.updatedAt - a.updatedAt);
+  },
   // ── Chat ──────────────────────────────────────────────────
   addChatMessage(agentId, from, text, isQuery = false, attachments = undefined) {