npm - groove-dev - Versions diffs - 0.27.187 → 0.27.189 - Mend

groove-dev 0.27.187 → 0.27.189

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-DyI84i9Y.js"></script>
+    <script type="module" crossorigin src="/assets/index-DTY0KsH9.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.187",
+  "version": "0.27.189",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/App.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // GROOVE GUI v2 — App Root
 // FSL-1.1-Apache-2.0 — see LICENSE
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { useGrooveStore } from './stores/groove';
 import { AppShell } from './components/layout/app-shell';
 import { SetupWizard } from './components/onboarding/setup-wizard';
@@ -133,10 +133,59 @@ function TunneledFolderPicker() {
 }
 function LoadingScreen() {
+  const connected = useGrooveStore((s) => s.connected);
+  const [slow, setSlow] = useState(false);
+  const [reconnecting, setReconnecting] = useState(false);
+  const triedRef = useRef(false);
+  // If we haven't come up within a few seconds, the connection (or the SSH
+  // tunnel behind it) is likely stalled — surface a reload rather than an
+  // endless pulse the user can't act on.
+  useEffect(() => {
+    const t = setTimeout(() => setSlow(true), 6000);
+    return () => clearTimeout(t);
+  }, []);
+  // If the socket can't even open (not just un-hydrated), the tunnel behind it
+  // is probably dead — ask the desktop shell to re-establish it. Once only, and
+  // only when disconnected, so a merely-slow load isn't disturbed.
+  useEffect(() => {
+    if (!slow || connected || triedRef.current) return;
+    if (!window.groove?.reconnect) return;
+    triedRef.current = true;
+    setReconnecting(true);
+    window.groove.reconnect().catch(() => {}).finally(() => setReconnecting(false));
+  }, [slow, connected]);
+  async function manualReconnect() {
+    if (window.groove?.reconnect) {
+      setReconnecting(true);
+      try { await window.groove.reconnect(); } catch { /* falls through to reload */ }
+      setReconnecting(false);
+    }
+    window.location.reload();
+  }
   return (
     <div className="h-screen bg-surface-0 flex flex-col items-center justify-center gap-4">
       <img src="/favicon.png" alt="" className="w-10 h-10 opacity-60 animate-pulse" />
-      <p className="text-sm text-text-3 font-sans">Connecting...</p>
+      <p className="text-sm text-text-3 font-sans">
+        {reconnecting ? 'Re-establishing connection…' : connected ? 'Loading…' : 'Connecting to daemon…'}
+      </p>
+      {slow && (
+        <div className="flex flex-col items-center gap-2 mt-1">
+          <p className="text-xs text-text-4 font-sans max-w-xs text-center">
+            Still trying to reach the daemon. If you just woke your machine, the connection is re-establishing.
+          </p>
+          <button
+            onClick={manualReconnect}
+            disabled={reconnecting}
+            className="px-3 py-1.5 rounded-md text-xs font-medium font-sans border border-accent/40 bg-accent/10 text-accent hover:bg-accent/20 disabled:opacity-50 transition-colors cursor-pointer"
+          >
+            {reconnecting ? 'Reconnecting…' : 'Reconnect'}
+          </button>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -390,6 +390,15 @@ 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`
@@ -397,9 +406,9 @@ function shq(s) {
 // 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 ${shq(path)}`;
+  if (/^[/~]/.test(path) || !workdir) return `tail -f ${shqPath(path)}`;
   const base = path.split('/').pop();
-  return `cd ${shq(workdir)} 2>/dev/null; `
+  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`;
 }

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') {
@@ -1146,3 +1146,16 @@ export const useGrooveStore = create((set, get) => ({
     ws.onerror = () => ws.close();
   },
 }));
+// Reconnect promptly when connectivity returns — laptop wake, network back, or
+// the window regaining focus — instead of waiting out the periodic 2s retry.
+// connect() no-ops if a socket already exists, so these are safe to fire often.
+if (typeof window !== 'undefined') {
+  const kick = () => {
+    const s = useGrooveStore.getState();
+    if (!s.ws) s.connect();
+  };
+  window.addEventListener('online', kick);
+  window.addEventListener('focus', kick);
+  document.addEventListener('visibilitychange', () => { if (!document.hidden) kick(); });
+}

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);