npm - groove-dev - Versions diffs - 0.27.186 → 0.27.188 - Mend

groove-dev 0.27.186 → 0.27.188

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 (42) 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-DOOaCFRS.js"></script>
+    <script type="module" crossorigin src="/assets/index-fyGUwOq4.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-CU8L_r5f.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Cat5pJUx.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.186",
+  "version": "0.27.188",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

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

@@ -385,9 +385,37 @@ function InnerChatMessage({ msg, agent }) {
   );
 }
+// Single-quote a value for safe use inside the shell command we inject.
+function shq(s) {
+  return `'${String(s).replace(/'/g, `'\\''`)}'`;
+}
+// Quote a path but keep a leading ~/ OUTSIDE the quotes so the shell still
+// expands it — a single-quoted ~ is a literal directory that doesn't exist,
+// which is why `tail -f '~/x.log'` fails.
+function shqPath(p) {
+  if (p === '~') return '~';
+  if (p.startsWith('~/')) return `~/${shq(p.slice(2))}`;
+  return shq(p);
+}
+// Build a `tail -f` that actually resolves. Agents usually write a log path
+// relative to wherever they ran it — often a bare filename several directories
+// deep — but the terminal opens in a different cwd, so a naive `tail -f name`
+// fails. Absolute paths are used as-is; anything else is resolved against the
+// agent's working directory, falling back to a `find` by basename when the file
+// sits below that directory.
+function tailCommand(path, workdir) {
+  if (/^[/~]/.test(path) || !workdir) return `tail -f ${shqPath(path)}`;
+  const base = path.split('/').pop();
+  return `cd ${shqPath(workdir)} 2>/dev/null; `
+    + `if [ -f ${shq(path)} ]; then tail -f ${shq(path)}; `
+    + `else tail -f "$(find . -name ${shq(base)} -type f 2>/dev/null | head -1)"; fi`;
+}
 // One-click "tail" chips for any log paths the agent mentioned — saves asking
 // "what's the log file?" and hand-copying it into a terminal.
-function LogChips({ text }) {
+function LogChips({ text, workdir }) {
   const runInTerminal = useGrooveStore((s) => s.runInTerminal);
   const paths = useMemo(() => extractLogPaths(text), [text]);
   if (paths.length === 0) return null;
@@ -397,7 +425,7 @@ function LogChips({ text }) {
       {paths.map((path) => (
         <button
           key={path}
-          onClick={() => runInTerminal(`tail -f ${path}`)}
+          onClick={() => runInTerminal(tailCommand(path, workdir))}
           title={`tail -f ${path}`}
           className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-accent/10 hover:bg-accent/20 text-accent text-[11px] font-medium font-sans cursor-pointer transition-colors max-w-full"
         >
@@ -430,7 +458,7 @@ function AgentMessage({ msg, agent, answeredTo }) {
       <div className={cn('pl-3.5 py-1 border-l', answeredTo ? 'border-indigo/50' : 'border-accent')}>
         <StructuredMessage text={collapsed ? msg.text.slice(0, 600) + '...' : msg.text} />
       </div>
-      <LogChips text={msg.text} />
+      <LogChips text={msg.text} workdir={agent?.workingDir} />
       {collapsed && (
         <button
           onClick={() => setCollapsed(false)}

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

@@ -1,17 +1,22 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { Badge } from '../ui/badge';
 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 } from 'lucide-react';
+import { MessageSquare, Settings, Activity, FileText, Pencil, Check, X, ChevronDown, Search } from 'lucide-react';
 import { fmtNum, fmtUptime } from '../../lib/format';
 import { cn } from '../../lib/cn';
 import { roleColor } from '../../lib/status';
 import { api } from '../../lib/api';
+const SWITCH_STATUS_DOT = {
+  running: 'bg-accent', starting: 'bg-warning', completed: 'bg-info',
+  crashed: 'bg-danger', stopped: 'bg-text-4', killed: 'bg-text-4', rotating: 'bg-accent',
+};
 const STATUS_VARIANT = {
   running: 'success', starting: 'warning', stopped: 'default',
   crashed: 'danger', completed: 'accent', killed: 'default', rotating: 'purple',
@@ -28,11 +33,46 @@ const TABS = [
   { id: 'mdfiles',   label: 'Files',     icon: FileText },
 ];
-function InlineName({ agent }) {
+// The agent name doubles as a switcher — click it to jump the panel to any
+// other agent without closing the terminal or hunting through the tree. The
+// hover pencil still renames in place.
+function AgentSwitcher({ agent }) {
   const addToast = useGrooveStore((s) => s.addToast);
+  const agents = useGrooveStore((s) => s.agents);
+  const teams = useGrooveStore((s) => s.teams);
+  const switchAgentPanel = useGrooveStore((s) => s.switchAgentPanel);
   const [editing, setEditing] = useState(false);
   const [name, setName] = useState(agent.name);
-  const inputRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const wrapRef = useRef(null);
+  // Close the dropdown on outside click or Escape.
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); };
+  }, [open]);
+  const grouped = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const byTeam = new Map();
+    for (const a of agents) {
+      if (q && !a.name.toLowerCase().includes(q) && !a.role.toLowerCase().includes(q)) continue;
+      const key = a.teamId || '_none';
+      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, query]);
   async function save() {
     const trimmed = name.trim();
@@ -47,11 +87,16 @@ function InlineName({ agent }) {
     setEditing(false);
   }
+  function pick(id) {
+    setOpen(false);
+    setQuery('');
+    if (id !== agent.id) switchAgentPanel(id);
+  }
   if (editing) {
     return (
       <div className="flex items-center gap-1 flex-1 min-w-0">
         <input
-          ref={inputRef}
           value={name}
           onChange={(e) => setName(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setName(agent.name); setEditing(false); } }}
@@ -65,14 +110,61 @@ function InlineName({ agent }) {
   }
   return (
-    <div className="flex items-center gap-1.5 flex-1 min-w-0 group">
-      <h2 className="text-sm font-bold text-text-0 font-sans truncate">{agent.name}</h2>
+    <div ref={wrapRef} className="relative flex items-center gap-1.5 flex-1 min-w-0 group">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-1 min-w-0 cursor-pointer rounded px-1 -mx-1 py-0.5 hover:bg-surface-3 transition-colors"
+        title="Switch agent"
+      >
+        <h2 className="text-sm font-bold text-text-0 font-sans truncate">{agent.name}</h2>
+        <ChevronDown size={13} className={cn('text-text-4 flex-shrink-0 transition-transform', open && 'rotate-180')} />
+      </button>
       <button
         onClick={() => { setName(agent.name); setEditing(true); }}
-        className="p-0.5 text-text-4 opacity-0 group-hover:opacity-100 hover:text-text-1 cursor-pointer transition-opacity"
+        className="p-0.5 text-text-4 opacity-0 group-hover:opacity-100 hover:text-text-1 cursor-pointer transition-opacity flex-shrink-0"
+        title="Rename agent"
       >
         <Pencil size={10} />
       </button>
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 w-72 max-h-[70vh] flex flex-col bg-surface-1 border border-border rounded-lg shadow-xl z-50 overflow-hidden">
+          <div className="flex items-center gap-1.5 px-2.5 py-2 border-b border-border-subtle">
+            <Search size={12} className="text-text-4 flex-shrink-0" />
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Switch to agent…"
+              autoFocus
+              className="flex-1 min-w-0 bg-transparent text-xs text-text-0 font-sans placeholder:text-text-4 focus:outline-none"
+            />
+          </div>
+          <div className="overflow-y-auto py-1">
+            {grouped.length === 0 && (
+              <div className="px-3 py-3 text-xs text-text-4 font-sans text-center">No agents match</div>
+            )}
+            {grouped.map((g) => (
+              <div key={g.teamId}>
+                <div className="px-2.5 pt-1.5 pb-0.5 text-2xs font-semibold text-text-4 font-sans uppercase tracking-wide">{g.name}</div>
+                {g.agents.map((a) => (
+                  <button
+                    key={a.id}
+                    onClick={() => pick(a.id)}
+                    className={cn(
+                      'w-full flex items-center gap-2 px-2.5 py-1.5 text-left cursor-pointer transition-colors',
+                      a.id === agent.id ? 'bg-accent/10' : 'hover:bg-surface-3',
+                    )}
+                  >
+                    <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0', SWITCH_STATUS_DOT[a.status] || 'bg-text-4')} />
+                    <span className={cn('text-xs font-sans truncate', a.id === agent.id ? 'text-accent font-medium' : 'text-text-1')}>{a.name}</span>
+                    <span className="text-2xs text-text-4 font-sans ml-auto flex-shrink-0 capitalize">{a.role}</span>
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -81,6 +173,7 @@ export function AgentPanel() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const agents = useGrooveStore((s) => s.agents);
   const activeTeamId = useGrooveStore((s) => s.activeTeamId);
+  const activeView = useGrooveStore((s) => s.activeView);
   const addToast = useGrooveStore((s) => s.addToast);
   const [activeTab, setActiveTab] = useState('command');
   const cachedAgentRef = useRef(null);
@@ -93,7 +186,10 @@ export function AgentPanel() {
   const isAlive = liveAgent?.status === 'running' || liveAgent?.status === 'starting';
   if (!agent) return null;
-  if (activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
+  // The team guard hides a stale panel when switching teams in the Agents view.
+  // Fleet is cross-team by design — an agent selected there legitimately belongs
+  // to another team, so applying the guard would blank a valid panel.
+  if (activeView !== 'fleet' && activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
   const ctxPct = Math.round((agent.contextUsage || 0) * 100);
   const spawned = agent.spawnedAt || agent.createdAt;
@@ -109,7 +205,7 @@ export function AgentPanel() {
         <div className="pl-4 pr-10 pt-3 pb-2">
           {/* Name + status row — pr-10 gives room for the detail panel X button */}
           <div className="flex items-center gap-2">
-            <InlineName agent={agent} />
+            <AgentSwitcher agent={agent} />
             <Badge variant={STATUS_VARIANT[agent.status] || 'default'} dot={isAlive ? 'pulse' : undefined} className="text-2xs flex-shrink-0">
               {STATUS_LABEL[agent.status] || agent.status}
             </Badge>

package/packages/gui/src/lib/logpaths.js CHANGED Viewed

@@ -10,7 +10,7 @@
 // match, and results are de-duped by full path.
 const TAIL_RE = /tail\s+(?:-[a-zA-Z]+\s+)*([~/]?[\w./-]+)/g;
-const DOTLOG_RE = /(?:^|[\s'"`(=])([~/]?(?:[\w.-]+\/)*[\w.-]+\.log)\b/g;
+const DOTLOG_RE = /(?:^|[\s'"`(=])((?:~\/|\/)?(?:[\w.-]+\/)*[\w.-]+\.log)\b/g;
 function clean(p) {
   return p.replace(/^['"`]+/, '').replace(/['"`.,;:)]+$/, '');

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

@@ -3,7 +3,7 @@
 import { create } from 'zustand';
 import { api } from '../lib/api';
-import { persistJSON } from './helpers.js';
+import { persistJSON, persistChatHistory } from './helpers.js';
 import { createUiSlice } from './slices/ui-slice.js';
 import { createAgentsSlice } from './slices/agents-slice.js';
 import { createTeamsSlice } from './slices/teams-slice.js';
@@ -20,11 +20,11 @@ const WS_URL = `ws://${window.location.hostname}:${window.location.port || 31415
 let plannerPollInterval = null;
-// Clear stale persisted data on version change
+// Record the store version for potential future migrations. Chat history and
+// activity log are USER DATA and must survive version changes — never wipe them
+// here. If a schema ever needs migrating, transform in place, don't delete.
 const STORE_VERSION = '0.22.28';
 if (localStorage.getItem('groove:storeVersion') !== JSON.stringify(STORE_VERSION)) {
-  localStorage.removeItem('groove:chatHistory');
-  localStorage.removeItem('groove:activityLog');
   persistJSON('groove:storeVersion', STORE_VERSION);
 }
@@ -264,7 +264,7 @@ export const useGrooveStore = create((set, get) => ({
               history[agentId] = arr.slice(-100);
               set({ chatHistory: history });
-              persistJSON('groove:chatHistory', history);
+              persistChatHistory(history);
             }
             const conv = get().conversations.find((c) => c.agentId === agentId);
@@ -402,7 +402,7 @@ export const useGrooveStore = create((set, get) => ({
               push(turn.to.id, entry(turn.from, 'in'));
             }
-            persistJSON('groove:chatHistory', history);
+            persistChatHistory(history);
             const answers = { ...s.innerchatAnswers };
             if (turn.kind === 'answer') {

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

@@ -8,3 +8,31 @@ export function loadJSON(key, fallback = {}) {
 export function persistJSON(key, value) {
   try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* quota */ }
 }
+// Base64 image data must never reach localStorage — it blows the ~5MB quota,
+// after which every write silently fails and history stops persisting. Keep the
+// attachment metadata, drop the payload.
+export function stripAttachments(history) {
+  const out = {};
+  for (const [id, msgs] of Object.entries(history || {})) {
+    out[id] = (msgs || []).map((m) =>
+      m.attachments?.length
+        ? { ...m, attachments: m.attachments.map(({ dataUrl, ...rest }) => rest) }
+        : m);
+  }
+  return out;
+}
+// The single writer for chat history. Strips attachments and refuses to
+// overwrite a populated store with an empty object — a blank write is almost
+// always a startup race or partial state, and losing chat is never acceptable.
+export function persistChatHistory(history) {
+  const clean = stripAttachments(history);
+  try {
+    if (Object.keys(clean).length === 0) {
+      const existing = localStorage.getItem('groove:chatHistory');
+      if (existing && existing !== '{}' && existing !== 'null') return;
+    }
+    localStorage.setItem('groove:chatHistory', JSON.stringify(clean));
+  } catch { /* quota — keep the last good value rather than clobbering it */ }
+}

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

@@ -1,7 +1,7 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { api } from '../../lib/api';
-import { loadJSON, persistJSON } from '../helpers.js';
+import { loadJSON, persistJSON, persistChatHistory } from '../helpers.js';
 export const createAgentsSlice = (set, get) => ({
   // ── Agent data ────────────────────────────────────────────
@@ -85,7 +85,7 @@ export const createAgentsSlice = (set, get) => ({
           delete chatHistory[id];
           delete activityLog[id];
           delete tokenTimeline[id];
-          persistJSON('groove:chatHistory', chatHistory);
+          persistChatHistory(chatHistory);
           persistJSON('groove:activityLog', activityLog);
           return { chatHistory, activityLog, tokenTimeline };
         });
@@ -95,6 +95,22 @@ export const createAgentsSlice = (set, get) => ({
     }
   },
+  // Switch the detail panel to another agent without disturbing the rest of
+  // the layout (terminal stays open). Aligns activeTeamId to the target so the
+  // panel's team guard passes even when switching across teams.
+  switchAgentPanel(agentId) {
+    const agent = get().agents.find((a) => a.id === agentId);
+    if (!agent) return;
+    const tid = agent.teamId || get().activeTeamId;
+    const panel = { type: 'agent', agentId };
+    set((s) => ({
+      activeTeamId: tid,
+      detailPanel: panel,
+      teamDetailPanels: { ...s.teamDetailPanels, [tid]: panel },
+    }));
+    if (tid) localStorage.setItem('groove:activeTeamId', tid);
+  },
   async rotateAgent(id) {
     try {
       return await api.post(`/agents/${encodeURIComponent(id)}/rotate`);
@@ -156,12 +172,7 @@ export const createAgentsSlice = (set, get) => ({
       const msg = { from, text, timestamp: Date.now(), isQuery };
       if (attachments?.length) msg.attachments = attachments;
       history[agentId] = [...history[agentId].slice(-100), msg];
-      const forStorage = { ...history };
-      forStorage[agentId] = forStorage[agentId].map((m) => {
-        if (!m.attachments?.length) return m;
-        return { ...m, attachments: m.attachments.map(({ dataUrl, ...rest }) => rest) };
-      });
-      persistJSON('groove:chatHistory', forStorage);
+      persistChatHistory(history);
       return { chatHistory: history };
     });
   },
@@ -237,7 +248,7 @@ export const createAgentsSlice = (set, get) => ({
         next.add(newAgent.id);
         return { thinkingAgents: next };
       });
-      if (get().chatHistory[newAgent.id]?.length) persistJSON('groove:chatHistory', get().chatHistory);
+      if (get().chatHistory[newAgent.id]?.length) persistChatHistory(get().chatHistory);
       if (get().activityLog[newAgent.id]?.length) persistJSON('groove:activityLog', get().activityLog);
       if (get().labAssistantAgentId === id) {
         localStorage.setItem('groove:labAssistantAgentId', newAgent.id);