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

groove-dev 0.27.139 → 0.27.141

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 (75) 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-B4uYLR57.js"></script>
+    <script type="module" crossorigin src="/assets/index-P1hsM27-.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/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-AkOtskHS.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-A4e1gIDh.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.139",
+  "version": "0.27.141",
   "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

@@ -25,11 +25,13 @@ import ModelLabView from './views/model-lab';
 import NetworkView from './views/network';
 import ChatView from './views/chat';
 import PreviewView from './views/preview';
+import MemoryView from './views/memory';
 // Agent components
 import { AgentPanel } from './components/agents/agent-panel';
 import { SpawnWizard } from './components/agents/spawn-wizard';
 import { JournalistPanel } from './components/agents/journalist-panel';
+import { KeeperGlobalModals } from './components/keeper/global-modals';
 // Terminal
 import { TerminalManager } from './components/editor/terminal';
@@ -79,6 +81,7 @@ function ViewRouter() {
     case 'settings':    content = <SettingsView />;    break;
     case 'chat':        content = <ChatView />;        break;
     case 'preview':     content = <PreviewView />;     break;
+    case 'memory':      content = <MemoryView />;      break;
     case 'network':     content = networkUnlocked ? <NetworkView /> : <AgentsView />; break;
     default:            content = <AgentsView />;
   }
@@ -186,6 +189,7 @@ export default function App() {
       <ViewRouter />
       <UpgradeModal />
       <DataSharingModal />
+      <KeeperGlobalModals />
     </ErrorBoundary>
   );
 }

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

@@ -38,6 +38,19 @@ function parseSegments(text) {
   return segments;
 }
+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);
+  return parts.map((part, i) => {
+    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)) {
+      return <span key={i} className="text-accent font-medium">{part}</span>;
+    }
+    return part;
+  });
+}
 function FormattedText({ text }) {
   if (!text) return null;
   const segments = parseSegments(text);
@@ -61,7 +74,7 @@ function FormattedText({ text }) {
               return <span key={i}>{part.split(/(\*\*[^*]+\*\*)/g).map((s, j) =>
                 s.startsWith('**') && s.endsWith('**')
                   ? <strong key={j} className="font-semibold text-text-0">{s.slice(2, -2)}</strong>
-                  : s
+                  : <span key={j}>{highlightKeeper(s)}</span>
               )}</span>;
             })}
           </span>
@@ -254,22 +267,33 @@ export function AgentChat({ agent }) {
           >
             <Paperclip size={14} />
           </button>
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={onKeyDown}
-            placeholder={isAlive ? 'Instruct this agent...' : 'Continue conversation...'}
-            rows={1}
-            className={cn(
-              'flex-1 resize-none rounded-lg px-3 py-1.5 text-xs',
-              'bg-surface-0 border text-text-0 font-sans',
-              'placeholder:text-text-4',
-              'focus:outline-none focus:ring-1',
-              'min-h-[32px] max-h-[120px]',
-              'border-border focus:ring-accent/40',
-            )}
-          />
+          <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>
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder={isAlive ? 'Instruct this agent...' : 'Continue conversation...'}
+              rows={1}
+              className={cn(
+                'w-full resize-none rounded-lg px-3 py-1.5 text-xs',
+                'bg-surface-0 border font-sans',
+                'placeholder:text-text-4',
+                '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'
+                  : 'text-text-0',
+              )}
+            />
+          </div>
           {isAlive && (
             <button
               onClick={() => useGrooveStore.getState().stopAgent(agent.id)}

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

@@ -182,10 +182,11 @@ export function AgentFileTree({ agentId, onCollapse }) {
   const createFile = useGrooveStore((s) => s.createFile);
   const addToast = useGrooveStore((s) => s.addToast);
   const fetchTreeDir = useGrooveStore((s) => s.fetchTreeDir);
+  const projectDir = useGrooveStore((s) => s.projectDir);
   const agent = agents.find((a) => a.id === agentId);
   const scope = agent?.scope || [];
-  const workingDir = agent?.workingDir || '';
+  const workingDir = agent?.workingDir || projectDir || '';
   const isRunning = agent?.status === 'running' || agent?.status === 'starting';
   const [treeData, setTreeData] = useState([]);
@@ -202,7 +203,9 @@ export function AgentFileTree({ agentId, onCollapse }) {
     async function poll() {
       try {
         const data = await api.get(`/agents/${encodeURIComponent(agentId)}/files-touched`);
-        if (!cancelled && data.files) setTouchedFiles(data.files);
+        if (!cancelled && data.files) {
+          setTouchedFiles(data.files.filter((f) => f.exists !== false && f.writes > 0));
+        }
       } catch { /* agent may not exist yet */ }
     }
     poll();
@@ -364,7 +367,11 @@ export function AgentFileTree({ agentId, onCollapse }) {
     if (workingDir && absPath.startsWith(workingDir + '/')) {
       return absPath.slice(workingDir.length + 1);
     }
-    return absPath;
+    if (projectDir && absPath.startsWith(projectDir + '/')) {
+      return absPath.slice(projectDir.length + 1);
+    }
+    const lastSlash = absPath.lastIndexOf('/');
+    return lastSlash >= 0 ? absPath.slice(lastSlash + 1) : absPath;
   }
   function parentDir(path) {

package/node_modules/@groove-dev/gui/src/components/agents/code-review.jsx CHANGED Viewed

@@ -11,8 +11,9 @@ import {
   XCircle, Send, FilePlus, FileMinus, FileEdit,
 } from 'lucide-react';
-export function CodeReview() {
-  const agentId = useGrooveStore((s) => s.editorSelectedAgent);
+export function CodeReview({ agentId: agentIdProp, onBack }) {
+  const storeAgentId = useGrooveStore((s) => s.editorSelectedAgent);
+  const agentId = agentIdProp || storeAgentId;
   const instructAgent = useGrooveStore((s) => s.instructAgent);
   const openFile = useGrooveStore((s) => s.openFile);
   const setViewMode = useGrooveStore((s) => s.setEditorViewMode);
@@ -84,7 +85,7 @@ export function CodeReview() {
     if (reviewComments.length > 0) {
       await instructAgent(agentId, `Code review feedback:\n${reviewComments.join('\n')}`);
     }
-    setViewMode('code');
+    if (onBack) onBack(); else setViewMode('code');
   }
   const approved = Object.values(statuses).filter((s) => s === 'approved').length;
@@ -112,7 +113,7 @@ export function CodeReview() {
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-3 px-4 py-3 bg-surface-1 border-b border-border flex-shrink-0">
-        <button onClick={() => setViewMode('code')} className="p-1 rounded hover:bg-surface-4 text-text-3 hover:text-text-1 cursor-pointer" title="Back to Editor">
+        <button onClick={() => onBack ? onBack() : setViewMode('code')} className="p-1 rounded hover:bg-surface-4 text-text-3 hover:text-text-1 cursor-pointer" title="Back to Editor">
           <ChevronLeft size={16} />
         </button>
         <span className="text-sm font-semibold text-text-0 font-sans flex-1">Review Changes</span>

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

@@ -6,12 +6,16 @@ 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';
 import { Tooltip } from '../ui/tooltip';
 import { roleColor } from '../../lib/status';
 import { MediaViewer, isMediaFile } from '../editor/media-viewer';
 import {
   X, Code2, FileCode, GitCompareArrows,
-  ClipboardCheck, Users, PanelLeftOpen,
+  ClipboardCheck, Users, PanelLeftOpen, Sparkles, Search,
 } from 'lucide-react';
 const TREE_DEFAULT = 220;
@@ -57,11 +61,11 @@ function AgentRail({ agents, activeId, onSelect }) {
   );
 }
-function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots, onBackToTeam, onToggleReview, reviewMode }) {
+function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggleDiff, workspaceSnapshots, onBackToTeam, onToggleReview, reviewMode, onToggleAi, aiOpen, onCmdP }) {
   const hasSnapshot = activeFile && workspaceSnapshots[activeFile];
   return (
-    <div className="flex items-stretch h-8 bg-[#1a1e25] border-b border-[#1e2229] flex-shrink-0">
+    <div className="flex items-stretch h-8 bg-surface-2 border-b border-border flex-shrink-0">
       <div className="flex items-stretch flex-1 min-w-0 overflow-x-auto scrollbar-none">
         {tabs.map((path) => {
           const isActive = path === activeFile;
@@ -74,9 +78,9 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
               key={path}
               className={cn(
                 'flex items-center gap-1.5 px-3 text-2xs font-sans cursor-pointer select-none',
-                'border-r border-white/5 transition-colors duration-75 flex-shrink-0',
+                'border-r border-border-subtle transition-colors duration-75 flex-shrink-0',
                 isActive
-                  ? 'bg-surface-0 text-text-1 border-b border-b-accent'
+                  ? 'bg-surface-1 text-text-1 border-b border-b-accent'
                   : 'text-text-4 hover:text-text-2 hover:bg-surface-3 border-b border-b-transparent',
               )}
               onClick={() => onSelect(path)}
@@ -94,6 +98,14 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
         })}
       </div>
       <div className="flex items-center gap-0.5 px-2 border-l border-border-subtle flex-shrink-0">
+        <Tooltip content="Quick Search (Cmd+P)" side="bottom">
+          <button
+            onClick={onCmdP}
+            className="p-1.5 text-text-3 hover:text-text-1 hover:bg-surface-3 rounded cursor-pointer transition-colors"
+          >
+            <Search size={12} />
+          </button>
+        </Tooltip>
         {hasSnapshot && (
           <>
             <button
@@ -130,13 +142,25 @@ 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}
             className="flex items-center gap-1 px-2 py-1 text-xs font-sans rounded cursor-pointer transition-colors text-text-3 hover:text-text-1 hover:bg-surface-3"
           >
             <Users size={12} />
-            <span className="text-2xs">Team</span>
           </button>
         </Tooltip>
       </div>
@@ -153,6 +177,11 @@ 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);
   const editorActiveFile = useGrooveStore((s) => s.editorActiveFile);
@@ -168,15 +197,29 @@ export function WorkspaceMode() {
   const [treeWidth, setTreeWidth] = useState(TREE_DEFAULT);
   const [diffMode, setDiffMode] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [selection, setSelection] = useState(null);
+  const [inlinePrompt, setInlinePrompt] = useState(null);
+  const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
+  const editorViewRef = useRef(null);
   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);
   }, [editorActiveFile]);
+  // Set the selected agent in the store so AI features use it
+  useEffect(() => {
+    if (agent?.id) {
+      useGrooveStore.setState({ editorSelectedAgent: agent.id });
+    }
+  }, [agent?.id]);
   const onTreeMouseDown = useCallback((e) => {
     e.preventDefault();
     treeDragging.current = true;
@@ -195,6 +238,65 @@ 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;
+    if (!view) return;
+    const sel = view.state.selection.main;
+    if (sel.empty) { setSelection(null); return; }
+    const text = view.state.sliceDoc(sel.from, sel.to);
+    if (!text.trim()) { setSelection(null); return; }
+    const fromLine = view.state.doc.lineAt(sel.from);
+    const toLine = view.state.doc.lineAt(sel.to);
+    const coords = view.coordsAtPos(sel.to);
+    if (coords) {
+      setSelection({
+        x: Math.min(coords.left + 10, window.innerWidth - 220),
+        y: coords.bottom + 4,
+        lineStart: fromLine.number,
+        lineEnd: toLine.number,
+        selectedCode: text,
+      });
+    }
+  }, []);
+  const handleEditorContextMenu = useCallback((e) => {
+    const view = editorViewRef.current;
+    if (!view) return;
+    const sel = view.state.selection.main;
+    if (sel.empty) return;
+    const text = view.state.sliceDoc(sel.from, sel.to);
+    if (!text.trim()) return;
+    e.preventDefault();
+    const fromLine = view.state.doc.lineAt(sel.from);
+    const toLine = view.state.doc.lineAt(sel.to);
+    setSelection({
+      x: Math.min(e.clientX, window.innerWidth - 220),
+      y: e.clientY + 4,
+      lineStart: fromLine.number,
+      lineEnd: toLine.number,
+      selectedCode: text,
+    });
+  }, []);
   if (!agent) {
     return (
       <div className="flex items-center justify-center h-full text-text-4 text-xs font-sans">
@@ -240,7 +342,7 @@ export function WorkspaceMode() {
         {/* Editor Area */}
         <div className="flex-1 flex flex-col min-w-0 bg-surface-1">
           {workspaceReviewMode ? (
-            <CodeReview agentId={agent.id} />
+            <CodeReview agentId={agent.id} onBack={toggleReviewMode} />
           ) : (
             <>
               <TabBar
@@ -255,6 +357,9 @@ export function WorkspaceMode() {
                 onBackToTeam={() => setWorkspaceMode(false)}
                 onToggleReview={toggleReviewMode}
                 reviewMode={workspaceReviewMode}
+                onToggleAi={toggleAiPanel}
+                aiOpen={aiPanelOpen}
+                onCmdP={() => setQuickSearchOpen(true)}
               />
               <div className="flex-1 relative min-h-0">
@@ -277,18 +382,61 @@ export function WorkspaceMode() {
                 )}
                 {editorActiveFile && !diffMode && !isMedia && file && (
-                  <CodeEditor
-                    content={file.content}
-                    language={file.language}
-                    onChange={(content) => updateFileContent(editorActiveFile, content)}
-                    onSave={() => saveFile(editorActiveFile)}
+                  <div className="w-full h-full" onMouseUp={handleEditorMouseUp} onContextMenu={handleEditorContextMenu}>
+                    <CodeEditor
+                      content={file.content}
+                      language={file.language}
+                      filePath={editorActiveFile}
+                      onChange={(content) => updateFileContent(editorActiveFile, content)}
+                      onSave={() => saveFile(editorActiveFile)}
+                      onCursorChange={setCursorPos}
+                      onCmdK={({ line, coords }) => setInlinePrompt({ line, coords })}
+                      viewRef={editorViewRef}
+                    />
+                  </div>
+                )}
+                {/* Selection menu */}
+                {selection && !diffMode && (
+                  <SelectionMenu
+                    x={selection.x}
+                    y={selection.y}
+                    filePath={editorActiveFile}
+                    lineStart={selection.lineStart}
+                    lineEnd={selection.lineEnd}
+                    selectedCode={selection.selectedCode}
+                    onClose={() => setSelection(null)}
+                  />
+                )}
+                {/* Inline prompt (Cmd+K) */}
+                {inlinePrompt && !diffMode && (
+                  <InlinePrompt
+                    line={inlinePrompt.line}
+                    coords={inlinePrompt.coords}
+                    filePath={editorActiveFile}
+                    onClose={() => setInlinePrompt(null)}
                   />
                 )}
               </div>
             </>
           )}
         </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 */}
+      <QuickSearch />
     </div>
   );
 }

package/node_modules/@groove-dev/gui/src/components/editor/ai-panel.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { ScrollArea } from '../ui/scroll-area';
-import { Send, Bot, MessageSquare, X, ArrowRight } from 'lucide-react';
+import { Send, Bot, MessageSquare, X, ArrowRight, FileCode, Terminal } from 'lucide-react';
 import { timeAgo } from '../../lib/format';
 function FormattedText({ text }) {
@@ -29,6 +29,38 @@ function FormattedText({ text }) {
   );
 }
+function SnippetTag({ snippet, onRemove }) {
+  const isCode = snippet.type === 'code';
+  const Icon = isCode ? FileCode : Terminal;
+  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 if (isCode) {
+    label = `${lines} line${lines !== 1 ? 's' : ''}`;
+  } else {
+    label = `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 AiPanel() {
   const agentId = useGrooveStore((s) => s.editorSelectedAgent);
   const agents = useGrooveStore((s) => s.agents);
@@ -37,6 +69,8 @@ export function AiPanel() {
   const instructAgent = useGrooveStore((s) => s.instructAgent);
   const isThinking = useGrooveStore((s) => agentId ? s.thinkingAgents?.has(agentId) : false);
   const toggleAiPanel = useGrooveStore((s) => s.toggleAiPanel);
+  const pendingSnippet = useGrooveStore((s) => s.editorPendingSnippet);
+  const clearSnippet = useGrooveStore((s) => s.clearSnippet);
   const agent = agents.find((a) => a.id === agentId);
   const [input, setInput] = useState('');
@@ -45,6 +79,12 @@ export function AiPanel() {
   const inputRef = useRef(null);
   const isAtBottomRef = useRef(true);
+  useEffect(() => {
+    if (pendingSnippet) {
+      inputRef.current?.focus();
+    }
+  }, [pendingSnippet]);
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -61,14 +101,38 @@ export function AiPanel() {
     }
   }, [chatHistory.length, activityLog.length, sending, isThinking]);
+  function buildMessage(userText) {
+    const parts = [];
+    if (userText) parts.push(userText);
+    if (pendingSnippet) {
+      const s = pendingSnippet;
+      if (s.type === 'code' && s.filePath) {
+        if (s.instruction && !userText) parts.push(s.instruction);
+        parts.push(`File: ${s.filePath} (lines ${s.lineStart}-${s.lineEnd})`);
+        parts.push('```\n' + s.code + '\n```');
+      } else if (s.type === 'terminal') {
+        if (!userText) parts.push('Terminal output:');
+        parts.push('```\n' + s.code + '\n```');
+      } else {
+        parts.push('```\n' + s.code + '\n```');
+      }
+    }
+    return parts.join('\n');
+  }
   async function handleSend() {
     const text = input.trim();
-    if (!text || sending || !agentId) return;
+    if ((!text && !pendingSnippet) || sending || !agentId) return;
+    const message = buildMessage(text);
     setInput('');
+    clearSnippet();
     setSending(true);
     isAtBottomRef.current = true;
     try {
-      await instructAgent(agentId, text);
+      await instructAgent(agentId, message);
     } catch { /* toast handles */ }
     setSending(false);
     inputRef.current?.focus();
@@ -85,6 +149,7 @@ export function AiPanel() {
     from: 'agent', text: a.text, timestamp: a.timestamp, key: `act-${i}`,
   }));
   const messages = chatHistory.length > 0 ? chatHistory : recentActivity;
+  const canSend = (input.trim() || pendingSnippet) && !sending;
   return (
     <div className="flex flex-col h-full bg-surface-1 border-l border-border">
@@ -168,22 +233,28 @@ export function AiPanel() {
           {/* Input */}
           <div className="border-t border-border-subtle px-3 py-2 flex-shrink-0">
+            {/* Snippet tag */}
+            {pendingSnippet && (
+              <div className="mb-1.5">
+                <SnippetTag snippet={pendingSnippet} onRemove={clearSnippet} />
+              </div>
+            )}
             <div className="flex items-end gap-1.5">
               <textarea
                 ref={inputRef}
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={onKeyDown}
-                placeholder="Message agent..."
+                placeholder={pendingSnippet ? 'Add a message (optional)...' : 'Message agent...'}
                 rows={1}
                 className="flex-1 resize-none rounded-lg px-3 py-1.5 text-xs bg-surface-0 border border-border text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent/40 min-h-[32px] max-h-[100px]"
               />
               <button
                 onClick={handleSend}
-                disabled={!input.trim() || sending}
+                disabled={!canSend}
                 className={cn(
                   'w-8 h-8 flex items-center justify-center rounded-lg transition-colors cursor-pointer flex-shrink-0',
-                  input.trim() && !sending
+                  canSend
                     ? 'bg-accent text-surface-0 hover:bg-accent/80'
                     : 'bg-surface-3 text-text-4',
                 )}