groove-dev 0.27.140 → 0.27.142

package/packages/gui/src/components/agents/workspace-mode.jsx

@@ -6,12 +6,15 @@ import { AgentFileTree } from './agent-file-tree';
 import { DiffViewer } from './diff-viewer';
 import { CodeReview } from './code-review';
 import { CodeEditor } from '../editor/code-editor';
+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, Search,
 } from 'lucide-react';
 
 const TREE_DEFAULT = 220;
@@ -57,11 +60,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, 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 +77,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 +97,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
@@ -136,7 +147,6 @@ function TabBar({ tabs, activeFile, files, onSelect, onClose, diffMode, onToggle
             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 +163,7 @@ export function WorkspaceMode() {
   const toggleReviewMode = useGrooveStore((s) => s.toggleReviewMode);
   const workspaceSnapshots = useGrooveStore((s) => s.workspaceSnapshots);
   const setWorkspaceMode = useGrooveStore((s) => s.setWorkspaceMode);
+  const setQuickSearchOpen = useGrooveStore((s) => s.setEditorQuickSearchOpen);
 
   const editorFiles = useGrooveStore((s) => s.editorFiles);
   const editorActiveFile = useGrooveStore((s) => s.editorActiveFile);
@@ -168,7 +179,11 @@ 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);
@@ -177,6 +192,13 @@ export function WorkspaceMode() {
     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 +217,47 @@ export function WorkspaceMode() {
     document.addEventListener('mouseup', onUp);
   }, [treeWidth]);
 
+
+  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 +303,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 +318,7 @@ export function WorkspaceMode() {
                 onBackToTeam={() => setWorkspaceMode(false)}
                 onToggleReview={toggleReviewMode}
                 reviewMode={workspaceReviewMode}
+                onCmdP={() => setQuickSearchOpen(true)}
               />
 
               <div className="flex-1 relative min-h-0">
@@ -277,18 +341,51 @@ 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>
+
       </div>
+
+      {/* Quick Search modal */}
+      <QuickSearch />
     </div>
   );
 }

package/packages/gui/src/components/dashboard/context-gauges.jsx

@@ -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 };

package/packages/gui/src/components/dashboard/routing-chart.jsx

@@ -6,6 +6,65 @@ import { fmtNum, fmtPct } from '../../lib/format';
 const TIER_COLORS = { heavy: HEX.danger, medium: HEX.warning, light: HEX.success };
 const TIER_LABELS = { heavy: 'Heavy', medium: 'Medium', light: 'Light' };
 
+const DONUT_SIZE = 80;
+const DONUT_STROKE = 6;
+const DONUT_RADIUS = (DONUT_SIZE - DONUT_STROKE) / 2;
+const DONUT_CIRCUMFERENCE = 2 * Math.PI * DONUT_RADIUS;
+
+function TierDonut({ byTier, total, tiers }) {
+  let offset = 0;
+  const segments = [];
+  for (const tier of tiers) {
+    const count = byTier[tier] || 0;
+    if (count === 0) continue;
+    const pct = count / total;
+    const dashLen = pct * DONUT_CIRCUMFERENCE;
+    segments.push({ tier, dashLen, offset });
+    offset += dashLen;
+  }
+
+  const heavyPct = total > 0 ? Math.round(((byTier.heavy || 0) / total) * 100) : 0;
+
+  return (
+    <svg width={DONUT_SIZE} height={DONUT_SIZE} viewBox={`0 0 ${DONUT_SIZE} ${DONUT_SIZE}`} className="flex-shrink-0">
+      <circle
+        cx={DONUT_SIZE / 2} cy={DONUT_SIZE / 2} r={DONUT_RADIUS}
+        fill="none" strokeWidth={DONUT_STROKE}
+        className="stroke-surface-4"
+      />
+      {segments.map((seg) => (
+        <circle
+          key={seg.tier}
+          cx={DONUT_SIZE / 2} cy={DONUT_SIZE / 2} r={DONUT_RADIUS}
+          fill="none" strokeWidth={DONUT_STROKE}
+          strokeLinecap="butt"
+          style={{
+            stroke: TIER_COLORS[seg.tier],
+            strokeDasharray: `${seg.dashLen} ${DONUT_CIRCUMFERENCE - seg.dashLen}`,
+            strokeDashoffset: -seg.offset,
+          }}
+          transform={`rotate(-90 ${DONUT_SIZE / 2} ${DONUT_SIZE / 2})`}
+        />
+      ))}
+      <text
+        x={DONUT_SIZE / 2} y={DONUT_SIZE / 2 - 2}
+        textAnchor="middle" dominantBaseline="central"
+        className="fill-text-0 text-sm font-mono font-semibold"
+      >
+        {fmtNum(total)}
+      </text>
+      <text
+        x={DONUT_SIZE / 2} y={DONUT_SIZE / 2 + 11}
+        textAnchor="middle" dominantBaseline="central"
+        className="fill-text-3 font-mono"
+        style={{ fontSize: 7 }}
+      >
+        decisions
+      </text>
+    </svg>
+  );
+}
+
 const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
   if (!routing) return null;
 
@@ -13,7 +72,6 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
   const tiers = ['heavy', 'medium', 'light'];
   const total = tiers.reduce((s, t) => s + (byTier[t] || 0), 0);
 
-  // Build model usage from agent breakdown
   const modelUsage = {};
   for (const a of (agentBreakdown || [])) {
     const model = a.model || 'default';
@@ -26,43 +84,27 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
 
   return (
     <div className="flex flex-col h-full px-3 py-3 overflow-y-auto">
-      {/* Tier distribution bar */}
+      {/* Tier donut + legend */}
       {total > 0 && (
-        <div className="space-y-1.5 mb-3">
-          <div className="flex items-center gap-2">
-            <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Tier Distribution</span>
-            <span className="text-2xs font-mono text-text-4 ml-auto tabular-nums">{fmtNum(total)} decisions</span>
-          </div>
-          {/* Stacked horizontal bar */}
-          <div className="h-0.5 bg-surface-2 rounded-sm overflow-hidden flex">
+        <div className="flex items-center gap-3 mb-3">
+          <TierDonut byTier={byTier} total={total} tiers={tiers} />
+          <div className="flex flex-col gap-1.5 flex-1 min-w-0">
             {tiers.map((tier) => {
               const count = byTier[tier] || 0;
               if (count === 0) return null;
               const pct = (count / total) * 100;
-              return (
-                <div
-                  key={tier}
-                  className="h-full transition-all duration-500"
-                  style={{ width: `${pct}%`, background: TIER_COLORS[tier] }}
-                  title={`${TIER_LABELS[tier]}: ${count} (${Math.round(pct)}%)`}
-                />
-              );
-            })}
-          </div>
-          {/* Tier legend */}
-          <div className="flex items-center gap-3">
-            {tiers.map((tier) => {
-              const count = byTier[tier] || 0;
-              if (count === 0) return null;
-              const pct = total > 0 ? (count / total) * 100 : 0;
               return (
                 <div key={tier} className="flex items-center gap-1.5">
                   <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: TIER_COLORS[tier] }} />
-                  <span className="text-2xs font-mono text-text-2">{TIER_LABELS[tier]}</span>
-                  <span className="text-2xs font-mono text-text-4 tabular-nums">{fmtPct(pct)}</span>
+                  <span className="text-2xs font-mono text-text-2 flex-1">{TIER_LABELS[tier]}</span>
+                  <span className="text-2xs font-mono text-text-4 tabular-nums">{count}</span>
+                  <span className="text-2xs font-mono text-text-4 tabular-nums w-8 text-right">{fmtPct(pct)}</span>
                 </div>
               );
             })}
+            {autoRoutedCount > 0 && (
+              <div className="text-2xs font-mono text-text-4 mt-0.5">{autoRoutedCount} auto-routed</div>
+            )}
           </div>
         </div>
       )}
@@ -70,12 +112,7 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
       {/* Model usage breakdown */}
       {modelEntries.length > 0 && (
         <div className="space-y-1.5 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Models in Use</span>
-            {autoRoutedCount > 0 && (
-              <span className="text-2xs font-mono text-text-4 ml-auto">{autoRoutedCount} auto</span>
-            )}
-          </div>
+          <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Models in Use</span>
           <div className="space-y-1.5">
             {modelEntries.map(([model, usage]) => {
               const barPct = maxModelTokens > 0 ? (usage.tokens / maxModelTokens) * 100 : 0;

package/packages/gui/src/components/editor/ai-panel.jsx

@@ -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',
                 )}