npm - groove-dev - Versions diffs - 0.27.141 → 0.27.143 - Mend

groove-dev 0.27.141 → 0.27.143

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

package/node_modules/@groove-dev/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-P1hsM27-.js"></script>
+    <script type="module" crossorigin src="/assets/index-DGIv_TRm.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-BQqYnZfL.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-A4e1gIDh.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-CCVvAoQn.css">
   </head>
   <body>
     <div id="root"></div>

package/node_modules/@groove-dev/gui/package.json CHANGED Viewed

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

package/node_modules/@groove-dev/gui/src/app.jsx CHANGED Viewed

@@ -20,7 +20,6 @@ import TeamsView from './views/teams';
 import SettingsView from './views/settings';
 import ModelsView from './views/models';
 import FederationView from './views/federation';
-import ToysView from './views/toys';
 import ModelLabView from './views/model-lab';
 import NetworkView from './views/network';
 import ChatView from './views/chat';
@@ -73,7 +72,6 @@ function ViewRouter() {
     case 'editor':      content = <EditorView />;      break;
     case 'dashboard':   content = <DashboardView />;   break;
     case 'marketplace': content = <MarketplaceView />; break;
-    case 'toys':        content = <ToysView />;        break;
     case 'teams':       content = <TeamsView />;       break;
     case 'models':      content = <ModelsView />;      break;
     case 'model-lab':   content = <ModelLabView />;    break;

package/node_modules/@groove-dev/gui/src/components/agents/agent-chat.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useEffect } from 'react';
-import { Send, Loader2, MessageSquare, HelpCircle, ArrowRight, Paperclip, Square } from 'lucide-react';
+import { Send, Loader2, MessageSquare, HelpCircle, ArrowRight, Paperclip, Square, FileCode, Terminal as TerminalIcon, X } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { ThinkingIndicator } from '../ui/thinking-indicator';
@@ -39,9 +39,9 @@ function parseSegments(text) {
 }
 function highlightKeeper(text) {
-  const parts = text.split(/(\[(?:save|append|update|delete|view|doc|link|read|instruct)\]|\b(?:save|append|update|delete|view|doc|link|read|instruct)\b(?=\s+#)|#[\w/.-]+)/gi);
+  const parts = text.split(/(\[(?:save|append|update|delete|view|doc|link|read|instruct)\]|#[\w/.-]+)/gi);
   return parts.map((part, i) => {
-    if (/^\[?(?:save|append|update|delete|view|doc|link|read|instruct)\]?$/i.test(part)) {
+    if (/^\[(?:save|append|update|delete|view|doc|link|read|instruct)\]$/i.test(part)) {
       return <span key={i} className="px-1 py-0.5 rounded bg-accent/15 text-accent font-semibold font-mono text-2xs">{part}</span>;
     }
     if (/^#[\w/.-]+$/.test(part)) {
@@ -145,12 +145,40 @@ function TypingIndicator() {
   );
 }
+function SnippetTag({ snippet, onRemove }) {
+  const isCode = snippet.type === 'code';
+  const Icon = isCode ? FileCode : TerminalIcon;
+  const lines = snippet.code.split('\n').length;
+  let label;
+  if (isCode && snippet.filePath) {
+    const fileName = snippet.filePath.split('/').pop();
+    label = `${fileName}:${snippet.lineStart}-${snippet.lineEnd}`;
+  } else {
+    label = `${isCode ? '' : 'Terminal · '}${lines} line${lines !== 1 ? 's' : ''}`;
+  }
+  return (
+    <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-accent/10 border border-accent/20 text-accent">
+      <Icon size={11} className="flex-shrink-0" />
+      <span className="text-2xs font-sans font-medium truncate max-w-[160px]">{label}</span>
+      {snippet.instruction && (
+        <span className="text-2xs text-accent/60 truncate max-w-[100px]">· {snippet.instruction}</span>
+      )}
+      <button onClick={onRemove} className="p-0.5 rounded hover:bg-accent/20 cursor-pointer flex-shrink-0">
+        <X size={9} />
+      </button>
+    </div>
+  );
+}
 export function AgentChat({ agent }) {
   const chatHistory = useGrooveStore((s) => s.chatHistory[agent.id]) || EMPTY;
   const activityLog = useGrooveStore((s) => s.activityLog[agent.id]) || EMPTY;
   const instructAgent = useGrooveStore((s) => s.instructAgent);
   const isThinking = useGrooveStore((s) => s.thinkingAgents?.has(agent.id));
+  const pendingSnippet = useGrooveStore((s) => s.editorPendingSnippet);
+  const clearSnippet = useGrooveStore((s) => s.clearSnippet);
   const storeInput = useGrooveStore((s) => s.chatInputs[agent.id] || '');
   const setStoreInput = (val) => useGrooveStore.setState((s) => ({ chatInputs: { ...s.chatInputs, [agent.id]: val } }));
   const input = storeInput;
@@ -162,6 +190,10 @@ export function AgentChat({ agent }) {
   const fileInputRef = useRef(null);
   const isAtBottomRef = useRef(true);
+  useEffect(() => {
+    if (pendingSnippet) inputRef.current?.focus();
+  }, [pendingSnippet]);
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -192,16 +224,30 @@ export function AgentChat({ agent }) {
   async function handleSend() {
     const text = input.trim();
-    if (!text || sending) return;
+    if ((!text && !pendingSnippet) || sending) return;
+    const parts = [];
+    if (text) parts.push(text);
+    if (pendingSnippet) {
+      const s = pendingSnippet;
+      if (s.type === 'code' && s.filePath) {
+        if (s.instruction && !text) parts.push(s.instruction);
+        parts.push(`File: ${s.filePath} (lines ${s.lineStart}-${s.lineEnd})`);
+        parts.push('```\n' + s.code + '\n```');
+      } else if (s.code) {
+        parts.push('```\n' + s.code + '\n```');
+      }
+    }
+    const message = parts.join('\n\n');
     setInput('');
     setAttachedFiles([]);
+    clearSnippet();
     setSending(true);
     isAtBottomRef.current = true;
     requestAnimationFrame(() => {
       if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     });
     try {
-      await instructAgent(agent.id, text);
+      await instructAgent(agent.id, message);
     } catch { /* toast handles */ }
     setSending(false);
     inputRef.current?.focus();
@@ -251,6 +297,22 @@ export function AgentChat({ agent }) {
       {/* ── Input area ──────────────────────────────────── */}
       <div className="border-t border-border-subtle px-3 py-2 bg-surface-1">
+        {pendingSnippet && (
+          <div className="mb-1.5">
+            <SnippetTag snippet={pendingSnippet} onRemove={clearSnippet} />
+          </div>
+        )}
+        {input && /\[(?:save|append|update|delete|view|doc|link|read|instruct)\]/i.test(input) && (() => {
+          const cmdMatch = input.match(/\[(save|append|update|delete|view|doc|link|read|instruct)\]/i);
+          const tags = (input.match(/#[\w/.-]+/g) || []);
+          return (
+            <div className="flex items-center gap-1.5 px-3 py-1 mb-1.5 rounded-md bg-accent/5 border border-accent/10">
+              <span className="px-1.5 py-0.5 rounded bg-accent/15 text-accent font-semibold font-mono text-2xs">{cmdMatch[0]}</span>
+              {tags.map((tag, i) => <span key={i} className="text-accent font-medium text-2xs">{tag}</span>)}
+              <span className="text-2xs text-text-4 ml-auto">memory command</span>
+            </div>
+          );
+        })()}
         <div className="flex items-end gap-1.5">
           <input
             ref={fileInputRef}
@@ -267,19 +329,13 @@ export function AgentChat({ agent }) {
           >
             <Paperclip size={14} />
           </button>
-          <div className="flex-1 relative">
-            <div
-              aria-hidden
-              className="absolute inset-0 px-3 py-1.5 text-xs font-sans pointer-events-none whitespace-pre-wrap break-words overflow-hidden min-h-[32px] max-h-[120px] leading-[1.625]"
-            >
-              {input ? highlightKeeper(input) : null}
-            </div>
+          <div className="flex-1">
             <textarea
               ref={inputRef}
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={onKeyDown}
-              placeholder={isAlive ? 'Instruct this agent...' : 'Continue conversation...'}
+              placeholder={pendingSnippet ? 'Add a message (optional)...' : isAlive ? 'Instruct this agent...' : 'Continue conversation...'}
               rows={1}
               className={cn(
                 'w-full resize-none rounded-lg px-3 py-1.5 text-xs',
@@ -288,8 +344,8 @@ export function AgentChat({ agent }) {
                 'focus:outline-none focus:ring-1',
                 'min-h-[32px] max-h-[120px]',
                 'border-border focus:ring-accent/40',
-                input && /(\[(?:save|append|update|delete|view|doc|link|read|instruct)\]|\b(?:save|append|update|delete|view|doc|link|read|instruct)\b\s+#|#[\w/.-]+)/i.test(input)
-                  ? 'text-transparent caret-text-0'
+                input && /\[(?:save|append|update|delete|view|doc|link|read|instruct)\]/i.test(input)
+                  ? 'text-accent'
                   : 'text-text-0',
               )}
             />
@@ -305,11 +361,11 @@ export function AgentChat({ agent }) {
           )}
           <button
             onClick={handleSend}
-            disabled={!input.trim() || sending}
+            disabled={(!input.trim() && !pendingSnippet) || sending}
             className={cn(
               'w-8 h-8 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0',
               'disabled:opacity-20 disabled:cursor-not-allowed',
-              input.trim()
+              (input.trim() || pendingSnippet)
                 ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
                 : 'bg-surface-4 text-text-4',
             )}

package/node_modules/@groove-dev/gui/src/components/agents/agent-feed.jsx CHANGED Viewed

@@ -483,11 +483,17 @@ function BootSequence({ agent }) {
 // ── Main Feed ────────────────────────────────────────────────
 export function AgentFeed({ agent }) {
-  const chatHistory = useGrooveStore((s) => s.chatHistory[agent.id]) || EMPTY;
-  const activityLog = useGrooveStore((s) => s.activityLog[agent.id]) || EMPTY;
+  const rawChatHistory = useGrooveStore((s) => s.chatHistory[agent.id]) || EMPTY;
+  const rawActivityLog = useGrooveStore((s) => s.activityLog[agent.id]) || EMPTY;
   const instructAgent = useGrooveStore((s) => s.instructAgent);
   const queryAgent = useGrooveStore((s) => s.queryAgent);
   const isThinking = useGrooveStore((s) => s.thinkingAgents?.has(agent.id));
+  const cachedChatRef = useRef(EMPTY);
+  const cachedActivityRef = useRef(EMPTY);
+  if (rawChatHistory.length > 0) cachedChatRef.current = rawChatHistory;
+  if (rawActivityLog.length > 0) cachedActivityRef.current = rawActivityLog;
+  const chatHistory = rawChatHistory.length > 0 ? rawChatHistory : cachedChatRef.current;
+  const activityLog = rawActivityLog.length > 0 ? rawActivityLog : cachedActivityRef.current;
   const storeInput = useGrooveStore((s) => s.chatInputs[agent.id] || '');
   const setStoreInput = (val) => useGrooveStore.setState((s) => ({ chatInputs: { ...s.chatInputs, [agent.id]: val } }));

package/node_modules/@groove-dev/gui/src/components/agents/agent-file-tree.jsx CHANGED Viewed

@@ -511,19 +511,18 @@ export function AgentFileTree({ agentId, onCollapse }) {
               Agent Files
             </div>
             {touchedFiles.slice(0, 15).map((f) => {
-              const relPath = toRelativePath(f.path);
-              const name = relPath.split('/').pop();
+              const name = f.path.split('/').pop();
               const hasWrites = f.writes > 0;
               return (
                 <button
                   key={f.path}
-                  onClick={() => openFile(relPath)}
-                  onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); handleContextMenu(e, { path: relPath, name, type: 'file' }); }}
-                  onDoubleClick={(e) => { e.preventDefault(); e.stopPropagation(); handleContextMenu(e, { path: relPath, name, type: 'file' }); }}
+                  onClick={() => openFile(f.path)}
+                  onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); handleContextMenu(e, { path: f.path, name, type: 'file' }); }}
+                  onDoubleClick={(e) => { e.preventDefault(); e.stopPropagation(); handleContextMenu(e, { path: f.path, name, type: 'file' }); }}
                   className={cn(
                     'w-full flex items-center gap-1.5 px-3 py-1 text-xs font-sans cursor-pointer',
                     'hover:bg-surface-4/50 transition-colors text-left',
-                    (editorActiveFile === f.path || editorActiveFile === relPath) && 'bg-accent/8 text-accent',
+                    editorActiveFile === f.path && 'bg-accent/8 text-accent',
                   )}
                 >
                   {hasWrites

package/node_modules/@groove-dev/gui/src/components/agents/agent-panel.jsx CHANGED Viewed

@@ -1,12 +1,12 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect, useCallback } 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, TrendingDown } from 'lucide-react';
 import { fmtNum, fmtUptime } from '../../lib/format';
 import { cn } from '../../lib/cn';
 import { roleColor } from '../../lib/status';
@@ -77,23 +77,91 @@ function InlineName({ agent }) {
   );
 }
+function useRoutingSuggestion(agentId, isAlive) {
+  const [suggestion, setSuggestion] = useState(null);
+  const [dismissed, setDismissed] = useState(false);
+  useEffect(() => {
+    if (!agentId || !isAlive || dismissed) { setSuggestion(null); return; }
+    let cancelled = false;
+    async function poll() {
+      try {
+        const res = await fetch(`/api/agents/${agentId}/routing/suggestion`);
+        if (cancelled) return;
+        if (res.status === 204 || !res.ok) { setSuggestion(null); return; }
+        const data = await res.json();
+        setSuggestion(data);
+      } catch { setSuggestion(null); }
+    }
+    poll();
+    const id = setInterval(poll, 30000);
+    return () => { cancelled = true; clearInterval(id); };
+  }, [agentId, isAlive, dismissed]);
+  const dismiss = useCallback(() => setDismissed(true), []);
+  const reset = useCallback(() => setDismissed(false), []);
+  return { suggestion: dismissed ? null : suggestion, dismiss, reset };
+}
+function DownshiftPill({ suggestion, onAccept, onDismiss }) {
+  if (!suggestion) return null;
+  const { suggestedModel } = suggestion;
+  return (
+    <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-success/10 border border-success/20 text-2xs font-mono animate-in fade-in slide-in-from-left-1 duration-200">
+      <TrendingDown size={10} className="text-success flex-shrink-0" />
+      <span className="text-success/90 truncate max-w-[80px]">{suggestedModel.name}</span>
+      <button
+        onClick={onAccept}
+        className="px-1 py-px rounded bg-success/20 text-success font-semibold hover:bg-success/30 transition-colors cursor-pointer"
+      >
+        Switch
+      </button>
+      <button
+        onClick={onDismiss}
+        className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"
+      >
+        <X size={8} />
+      </button>
+    </div>
+  );
+}
 export function AgentPanel() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const agents = useGrooveStore((s) => s.agents);
   const activeTeamId = useGrooveStore((s) => s.activeTeamId);
+  const addToast = useGrooveStore((s) => s.addToast);
   const [activeTab, setActiveTab] = useState('command');
+  const cachedAgentRef = useRef(null);
+  const agentId = detailPanel?.type === 'agent' ? detailPanel.agentId : null;
+  const liveAgent = agentId ? agents.find((a) => a.id === agentId) : null;
+  if (liveAgent) cachedAgentRef.current = liveAgent;
+  else if (cachedAgentRef.current && cachedAgentRef.current.id !== agentId) cachedAgentRef.current = null;
+  const agent = liveAgent || cachedAgentRef.current;
+  const isAlive = liveAgent?.status === 'running' || liveAgent?.status === 'starting';
+  const { suggestion, dismiss: dismissSuggestion } = useRoutingSuggestion(agentId, isAlive);
-  if (detailPanel?.type !== 'agent') return null;
-  const agent = agents.find((a) => a.id === detailPanel.agentId);
   if (!agent) return null;
   if (activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
-  const isAlive = agent.status === 'running' || agent.status === 'starting';
   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);
+  async function acceptSuggestion() {
+    if (!suggestion) return;
+    try {
+      await api.patch(`/agents/${agent.id}`, { model: suggestion.suggestedModel.id });
+      addToast('success', `Model → ${suggestion.suggestedModel.name}`);
+      dismissSuggestion();
+    } catch (err) {
+      addToast('error', 'Model switch failed', err.message);
+    }
+  }
   return (
     <div className="flex flex-col h-full">
       {/* ── Header ─────────────────────────────────────────── */}
@@ -126,6 +194,12 @@ export function AgentPanel() {
             )}
             <span className="text-text-4">·</span>
             <span>{fmtUptime(uptime)}</span>
+            {suggestion && (
+              <>
+                <span className="text-text-4">·</span>
+                <DownshiftPill suggestion={suggestion} onAccept={acceptSuggestion} onDismiss={dismissSuggestion} />
+              </>
+            )}
           </div>
         </div>

package/node_modules/@groove-dev/gui/src/components/agents/workspace-mode.jsx CHANGED Viewed

@@ -6,7 +6,6 @@ import { AgentFileTree } from './agent-file-tree';
 import { DiffViewer } from './diff-viewer';
 import { CodeReview } from './code-review';
 import { CodeEditor } from '../editor/code-editor';
-import { AiPanel } from '../editor/ai-panel';
 import { SelectionMenu } from '../editor/selection-menu';
 import { InlinePrompt } from '../editor/inline-prompt';
 import { QuickSearch } from '../editor/quick-search';
@@ -15,7 +14,7 @@ import { roleColor } from '../../lib/status';
 import { MediaViewer, isMediaFile } from '../editor/media-viewer';
 import {
   X, Code2, FileCode, GitCompareArrows,
-  ClipboardCheck, Users, PanelLeftOpen, Sparkles, Search,
+  ClipboardCheck, Users, PanelLeftOpen, Search,
 } from 'lucide-react';
 const TREE_DEFAULT = 220;
@@ -61,7 +60,7 @@ function AgentRail({ agents, activeId, onSelect }) {
   );
 }
-function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots, onBackToTeam, onToggleReview, reviewMode, onToggleAi, aiOpen, onCmdP }) {
+function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots, onBackToTeam, onToggleReview, reviewMode, onCmdP }) {
   const hasSnapshot = activeFile && workspaceSnapshots[activeFile];
   return (
@@ -142,19 +141,6 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
             <ClipboardCheck size={12} />
           </button>
         </Tooltip>
-        <Tooltip content="AI Panel" side="bottom">
-          <button
-            onClick={onToggleAi}
-            className={cn(
-              'flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
-              aiOpen
-                ? 'bg-accent/15 text-accent'
-                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-            )}
-          >
-            <Sparkles size={12} />
-          </button>
-        </Tooltip>
         <Tooltip content="Back to Team View" side="bottom">
           <button
             onClick={onBackToTeam}
@@ -177,10 +163,6 @@ export function WorkspaceMode() {
   const toggleReviewMode = useGrooveStore((s) => s.toggleReviewMode);
   const workspaceSnapshots = useGrooveStore((s) => s.workspaceSnapshots);
   const setWorkspaceMode = useGrooveStore((s) => s.setWorkspaceMode);
-  const aiPanelOpen = useGrooveStore((s) => s.editorAiPanelOpen);
-  const toggleAiPanel = useGrooveStore((s) => s.toggleAiPanel);
-  const aiPanelWidth = useGrooveStore((s) => s.editorAiPanelWidth);
-  const setAiPanelWidth = useGrooveStore((s) => s.setEditorAiPanelWidth);
   const setQuickSearchOpen = useGrooveStore((s) => s.setEditorQuickSearchOpen);
   const editorFiles = useGrooveStore((s) => s.editorFiles);
@@ -205,9 +187,6 @@ export function WorkspaceMode() {
   const treeDragging = useRef(false);
   const startX = useRef(0);
   const startW = useRef(0);
-  const aiDragging = useRef(false);
-  const aiStartX = useRef(0);
-  const aiStartW = useRef(0);
   useEffect(() => {
     setDiffMode(false);
@@ -238,24 +217,6 @@ export function WorkspaceMode() {
     document.addEventListener('mouseup', onUp);
   }, [treeWidth]);
-  const onAiPanelMouseDown = useCallback((e) => {
-    e.preventDefault();
-    aiDragging.current = true;
-    aiStartX.current = e.clientX;
-    aiStartW.current = aiPanelWidth;
-    function onMove(e) {
-      if (!aiDragging.current) return;
-      const delta = aiStartX.current - e.clientX;
-      setAiPanelWidth(Math.min(Math.max(aiStartW.current + delta, 280), 600));
-    }
-    function onUp() {
-      aiDragging.current = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    }
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }, [aiPanelWidth, setAiPanelWidth]);
   const handleEditorMouseUp = useCallback(() => {
     const view = editorViewRef.current;
@@ -357,8 +318,6 @@ export function WorkspaceMode() {
                 onBackToTeam={() => setWorkspaceMode(false)}
                 onToggleReview={toggleReviewMode}
                 reviewMode={workspaceReviewMode}
-                onToggleAi={toggleAiPanel}
-                aiOpen={aiPanelOpen}
                 onCmdP={() => setQuickSearchOpen(true)}
               />
@@ -423,16 +382,6 @@ export function WorkspaceMode() {
           )}
         </div>
-        {/* AI Panel */}
-        {aiPanelOpen && !workspaceReviewMode && (
-          <div className="relative flex-shrink-0" style={{ width: aiPanelWidth }}>
-            <div
-              className="absolute top-0 left-0 bottom-0 w-1 cursor-col-resize hover:bg-accent/30 transition-colors z-10"
-              onMouseDown={onAiPanelMouseDown}
-            />
-            <AiPanel />
-          </div>
-        )}
       </div>
       {/* Quick Search modal */}

package/node_modules/@groove-dev/gui/src/components/dashboard/context-gauges.jsx ADDED Viewed

@@ -0,0 +1,111 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { HEX } from '../../lib/theme-hex';
+const SIZE = 36;
+const STROKE = 3;
+const RADIUS = (SIZE - STROKE) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const START_ANGLE = -90;
+function gaugeColor(pct) {
+  if (pct > 80) return HEX.danger;
+  if (pct > 60) return HEX.warning;
+  return HEX.success;
+}
+function MiniGauge({ name, pct, threshold }) {
+  const color = gaugeColor(pct);
+  const dashLen = (pct / 100) * CIRCUMFERENCE;
+  return (
+    <div className="flex flex-col items-center gap-0.5" title={`${name}: ${pct}% context used`}>
+      <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>
+        <circle
+          cx={SIZE / 2} cy={SIZE / 2} r={RADIUS}
+          fill="none" strokeWidth={STROKE}
+          className="stroke-surface-4"
+        />
+        <circle
+          cx={SIZE / 2} cy={SIZE / 2} r={RADIUS}
+          fill="none" strokeWidth={STROKE}
+          strokeLinecap="round"
+          style={{
+            stroke: color,
+            strokeDasharray: `${dashLen} ${CIRCUMFERENCE - dashLen}`,
+            strokeDashoffset: 0,
+            transition: 'stroke-dasharray 0.5s ease',
+          }}
+          transform={`rotate(${START_ANGLE} ${SIZE / 2} ${SIZE / 2})`}
+        />
+        {threshold && (
+          <circle
+            cx={SIZE / 2} cy={SIZE / 2} r={RADIUS}
+            fill="none" strokeWidth={1}
+            strokeLinecap="butt"
+            style={{
+              stroke: HEX.purple,
+              strokeDasharray: `1 ${CIRCUMFERENCE - 1}`,
+              strokeDashoffset: -(threshold / 100) * CIRCUMFERENCE,
+            }}
+            transform={`rotate(${START_ANGLE} ${SIZE / 2} ${SIZE / 2})`}
+          />
+        )}
+        <text
+          x={SIZE / 2} y={SIZE / 2 + 1}
+          textAnchor="middle" dominantBaseline="central"
+          className="fill-text-1 font-mono font-semibold"
+          style={{ fontSize: 9 }}
+        >
+          {pct}
+        </text>
+      </svg>
+      <span className="text-2xs font-mono text-text-3 truncate max-w-[40px] leading-none">{name}</span>
+    </div>
+  );
+}
+function FleetSummary({ zones }) {
+  return (
+    <div className="flex items-center gap-2 text-2xs font-mono">
+      <span className="text-success">{zones.healthy}</span>
+      <span className="text-text-4">/</span>
+      <span className="text-warning">{zones.warning}</span>
+      <span className="text-text-4">/</span>
+      <span className="text-danger">{zones.critical}</span>
+    </div>
+  );
+}
+const ContextGauges = memo(function ContextGauges({ agentBreakdown }) {
+  const alive = (agentBreakdown || []).filter(
+    (a) => a.status === 'running' || a.status === 'starting',
+  );
+  if (alive.length === 0) return null;
+  const zones = { healthy: 0, warning: 0, critical: 0 };
+  for (const a of alive) {
+    const pct = Math.round((a.contextUsage || 0) * 100);
+    if (pct > 80) zones.critical++;
+    else if (pct > 60) zones.warning++;
+    else zones.healthy++;
+  }
+  return (
+    <div className="px-3 py-2 flex-shrink-0 border-b border-border">
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Context Health</span>
+        <FleetSummary zones={zones} />
+      </div>
+      <div className="flex items-start gap-2 overflow-x-auto">
+        {alive.map((a) => {
+          const pct = Math.round((a.contextUsage || 0) * 100);
+          const threshold = a.rotationThreshold ? Math.round(a.rotationThreshold * 100) : null;
+          return <MiniGauge key={a.id} name={a.name} pct={pct} threshold={threshold} />;
+        })}
+      </div>
+    </div>
+  );
+});
+export { ContextGauges };