groove-dev 0.27.143 → 0.27.145

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

@@ -1,10 +1,11 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import {
-  Send, Loader2, MessageSquare, ArrowRight, Square,
+  Loader2, MessageSquare, SendHorizontal, Pause,
   FileEdit, Search, Terminal, CheckCircle2, AlertCircle,
   RotateCw, Zap, Wrench, Eye, Code2, Bug,
-  ChevronDown, HelpCircle, Pencil, Paperclip, GripHorizontal,
+  ChevronDown, Paperclip, GripHorizontal,
+  FileCode, X,
 } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useGrooveStore } from '../../stores/groove';
@@ -15,6 +16,18 @@ import { ThinkingIndicator } from '../ui/thinking-indicator';
 import { TableTree } from '../ui/table-tree';
 
 const EMPTY = [];
+const KEEPER_RE = /(\[(?:save|append|update|delete|view|doc|link|read|instruct)\]|#[\w/.-]+)/gi;
+const KEEPER_CMD_RE = /^\[(?:save|append|update|delete|view|doc|link|read|instruct)\]$/i;
+const KEEPER_TAG_RE = /^#[\w/.-]+$/;
+const KEEPER_DETECT_RE = /\[(?:save|append|update|delete|view|doc|link|read|instruct)\]/i;
+
+function highlightKeeperInput(text) {
+  return text.split(KEEPER_RE).map((part, i) => {
+    if (KEEPER_CMD_RE.test(part)) return <span key={i} className="text-accent">{part}</span>;
+    if (KEEPER_TAG_RE.test(part)) return <span key={i} className="text-accent">{part}</span>;
+    return <span key={i} className="text-text-0">{part}</span>;
+  });
+}
 
 // ── Activity metadata ────────────────────────────────────────
 function activityMeta(text) {
@@ -221,22 +234,10 @@ function FormattedText({ text }) {
 // ── Message components ───────────────────────────────────────
 
 function UserMessage({ msg }) {
-  const isQuery = msg.isQuery;
   return (
     <div className="flex justify-end pl-8">
       <div className="max-w-[90%]">
-        {isQuery && (
-          <div className="flex items-center justify-end gap-1 mb-1">
-            <HelpCircle size={9} className="text-info" />
-            <span className="text-2xs text-info font-sans font-medium">Query</span>
-          </div>
-        )}
-        <div className={cn(
-          'px-3.5 py-2.5 rounded-lg border',
-          isQuery
-            ? 'bg-info/10 border-info/25'
-            : 'bg-info/10 border-info/25',
-        )}>
+        <div className="px-3.5 py-2.5 rounded-lg border bg-info/10 border-info/25">
           <div className="text-[12px] font-sans whitespace-pre-wrap break-words leading-relaxed text-text-0">
             <FormattedText text={msg.text} />
           </div>
@@ -369,7 +370,7 @@ function StreamingBar({ agent }) {
     <div className="flex items-center gap-3 px-4 h-8 border-b border-border-subtle bg-surface-1/80 flex-shrink-0">
       <div className="flex items-center gap-2 flex-1 min-w-0">
         <div className="relative flex items-center justify-center w-4 h-4">
-          <span className="absolute inset-0 rounded-full bg-accent/15 animate-ping" style={{ animationDuration: '2s' }} />
+          <span className="absolute inset-0 rounded-full bg-accent/15 animate-ping [animation-duration:2s]" />
           <span className="relative w-1.5 h-1.5 rounded-full bg-accent" />
         </div>
         {isRecent ? (
@@ -432,8 +433,8 @@ function BootSequence({ agent }) {
       {/* Agent identity */}
       <div className="flex items-center gap-3 mb-5">
         <div className="relative w-9 h-9">
-          <span className="absolute inset-0 rounded-full border-2 border-accent/20 animate-ping" style={{ animationDuration: '2s' }} />
-          <span className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent animate-spin" style={{ animationDuration: '1s' }} />
+          <span className="absolute inset-0 rounded-full border-2 border-accent/20 animate-ping [animation-duration:2s]" />
+          <span className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent animate-spin [animation-duration:1s]" />
           <span className="absolute inset-[5px] rounded-full bg-accent/8" />
         </div>
         <div>
@@ -467,9 +468,9 @@ function BootSequence({ agent }) {
               </span>
               {isLast && visible && (
                 <span className="flex gap-0.5 ml-1">
-                  <span className="w-1 h-1 rounded-full bg-accent animate-pulse" style={{ animationDelay: '0ms' }} />
-                  <span className="w-1 h-1 rounded-full bg-accent animate-pulse" style={{ animationDelay: '200ms' }} />
-                  <span className="w-1 h-1 rounded-full bg-accent animate-pulse" style={{ animationDelay: '400ms' }} />
+                  <span className="w-1 h-1 rounded-full bg-accent animate-pulse [animation-delay:0ms]" />
+                  <span className="w-1 h-1 rounded-full bg-accent animate-pulse [animation-delay:200ms]" />
+                  <span className="w-1 h-1 rounded-full bg-accent animate-pulse [animation-delay:400ms]" />
                 </span>
               )}
             </div>
@@ -480,13 +481,39 @@ function BootSequence({ agent }) {
   );
 }
 
+// ── Snippet Tag ─────────────────────────────────────────────
+
+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 {
+    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>
+  );
+}
+
 // ── Main Feed ────────────────────────────────────────────────
 
 export function AgentFeed({ agent }) {
   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);
@@ -495,19 +522,39 @@ export function AgentFeed({ agent }) {
   const chatHistory = rawChatHistory.length > 0 ? rawChatHistory : cachedChatRef.current;
   const activityLog = rawActivityLog.length > 0 ? rawActivityLog : cachedActivityRef.current;
 
+  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 setStoreInput = (val) => useGrooveStore.setState((s) => {
+    const current = s.chatInputs[agent.id] || '';
+    const next = typeof val === 'function' ? val(current) : val;
+    return { chatInputs: { ...s.chatInputs, [agent.id]: next } };
+  });
   const input = storeInput;
   const setInput = setStoreInput;
-  const [mode, setMode] = useState('instruct'); // instruct | query
   const [sending, setSending] = useState(false);
-  const [inputHeight, setInputHeight] = useState(36);
+  const [inputHeight, setInputHeight] = useState(88);
+  const [providerModels, setProviderModels] = useState([]);
   const dragRef = useRef(null);
   const scrollRef = useRef(null);
   const inputRef = useRef(null);
   const fileInputRef = useRef(null);
+  const highlightRef = useRef(null);
   const isAtBottomRef = useRef(true);
 
+  useEffect(() => {
+    if (pendingSnippet) inputRef.current?.focus();
+  }, [pendingSnippet]);
+
+  useEffect(() => {
+    if (!agent.provider) return;
+    api.get('/providers').then((data) => {
+      const p = (Array.isArray(data) ? data : []).find((pr) => pr.id === agent.provider);
+      setProviderModels((p?.models || []).filter((m) => !m.disabled));
+    }).catch(() => {});
+  }, [agent.provider]);
+
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -522,7 +569,7 @@ export function AgentFeed({ agent }) {
     e.preventDefault();
     const startY = e.clientY;
     const startH = inputHeight;
-    const onMove = (ev) => setInputHeight(Math.min(Math.max(36, startH - (ev.clientY - startY)), 280));
+    const onMove = (ev) => setInputHeight(Math.min(Math.max(56, startH - (ev.clientY - startY)), 280));
     const onUp = () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
     window.addEventListener('mousemove', onMove);
     window.addEventListener('mouseup', onUp);
@@ -616,7 +663,7 @@ export function AgentFeed({ agent }) {
 
   async function handleSend() {
     const text = input.trim();
-    if (!text || sending) return;
+    if ((!text && !pendingSnippet) || sending) return;
 
     if (text === '/rotate') {
       const rotateAgent = useGrooveStore.getState().rotateAgent;
@@ -625,18 +672,29 @@ export function AgentFeed({ agent }) {
       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('');
+    clearSnippet();
     setSending(true);
     isAtBottomRef.current = true;
     requestAnimationFrame(() => {
       if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     });
     try {
-      if (mode === 'query') {
-        await queryAgent(agent.id, text);
-      } else {
-        await instructAgent(agent.id, text);
-      }
+      await instructAgent(agent.id, message);
     } catch { /* toast handles */ }
     setSending(false);
     inputRef.current?.focus();
@@ -707,41 +765,27 @@ export function AgentFeed({ agent }) {
         </div>
 
         <div className="px-4 pb-3">
-        {/* Mode pills */}
-        <div className="flex items-center gap-1 mb-2">
-          <button
-            onClick={() => setMode('instruct')}
-            className={cn(
-              'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-sans font-medium transition-colors cursor-pointer',
-              mode === 'instruct'
-                ? 'bg-accent/12 text-accent border border-accent/20'
-                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-            )}
-          >
-            <Pencil size={10} />
-            Instruct
-          </button>
-          <button
-            onClick={() => setMode('query')}
-            className={cn(
-              'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-sans font-medium transition-colors cursor-pointer',
-              mode === 'query'
-                ? 'bg-info/12 text-info border border-info/20'
-                : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-            )}
-          >
-            <HelpCircle size={10} />
-            Query
-          </button>
-          <span className="text-[10px] text-text-4 font-sans ml-auto">
-            {mode === 'query' ? 'Read-only — agent keeps working' : isAlive ? 'Directs the agent' : 'Continues the session'}
-          </span>
-        </div>
+        {/* Snippet tag */}
+        {pendingSnippet && (
+          <div className="mb-2">
+            <SnippetTag snippet={pendingSnippet} onRemove={clearSnippet} />
+          </div>
+        )}
 
-        <div className={cn(
-          'flex items-end gap-1 rounded-xl border bg-surface-0 p-1 transition-colors',
-          mode === 'query' ? 'border-info/20 focus-within:border-info/40' : 'border-border-subtle focus-within:border-accent/30',
-        )}>
+        {/* Keeper command indicator */}
+        {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-2 rounded-lg 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-[10px]">{cmdMatch[0]}</span>
+              {tags.map((tag, i) => <span key={i} className="text-accent font-medium text-[10px]">{tag}</span>)}
+              <span className="text-[10px] text-text-4 ml-auto">memory command</span>
+            </div>
+          );
+        })()}
+
+        <div className="flex flex-col rounded-lg border border-border-subtle bg-surface-0 transition-colors overflow-hidden focus-within:border-text-4/40">
           <input
             ref={fileInputRef}
             type="file"
@@ -750,57 +794,111 @@ export function AgentFeed({ agent }) {
             onChange={handleFileSelect}
             className="hidden"
           />
-          <button
-            onClick={() => fileInputRef.current?.click()}
-            className="w-9 h-9 flex items-center justify-center rounded-lg text-text-4 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer flex-shrink-0 mb-px"
-            title="Attach file"
-          >
-            <Paperclip size={14} />
-          </button>
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={onKeyDown}
-            placeholder={mode === 'query'
-              ? 'Ask about this agent\'s work...'
-              : isAlive ? 'Send an instruction...' : 'Continue this session...'}
-            rows={1}
-            className={cn(
-              'flex-1 resize-none px-3 py-2 text-[13px]',
-              'bg-transparent text-text-0 font-sans',
-              'placeholder:text-text-4',
-              'focus:outline-none',
+          {/* Textarea — full width */}
+          <div className="relative px-1">
+            {input && KEEPER_DETECT_RE.test(input) && (
+              <div
+                ref={highlightRef}
+                aria-hidden
+                className="absolute inset-0 px-3 py-2.5 text-[13px] leading-[20px] font-sans pointer-events-none whitespace-pre-wrap break-words overflow-y-hidden"
+                style={{ height: inputHeight }}
+              >
+                {highlightKeeperInput(input)}
+              </div>
             )}
-            style={{ height: inputHeight }}
-          />
-          {isAlive && (
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={onKeyDown}
+              onScroll={(e) => { if (highlightRef.current) highlightRef.current.scrollTop = e.target.scrollTop; }}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => {
+                e.preventDefault();
+                if (e.dataTransfer?.files?.length) {
+                  const dt = new DataTransfer();
+                  for (const f of e.dataTransfer.files) dt.items.add(f);
+                  fileInputRef.current.files = dt.files;
+                  fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+              }}
+              placeholder={pendingSnippet ? 'Add a message (optional)...'
+                : isAlive ? 'Send an instruction...' : 'Continue this session...'}
+              rows={1}
+              className={cn(
+                'w-full resize-none px-3 py-2.5 text-[13px] leading-[20px]',
+                'bg-transparent font-sans relative z-10',
+                'placeholder:text-text-4',
+                'focus:outline-none',
+                input && KEEPER_DETECT_RE.test(input)
+                  ? 'text-transparent caret-text-0'
+                  : 'text-text-0',
+              )}
+              style={{ height: inputHeight }}
+            />
+          </div>
+          {/* Bottom toolbar */}
+          <div className="flex items-center gap-1 px-1.5 pb-1.5 pt-0.5">
+            {/* Left: attach */}
             <button
-              onClick={() => useGrooveStore.getState().stopAgent(agent.id)}
-              title="Stop agent"
-              className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-danger/10 transition-colors cursor-pointer flex-shrink-0 mb-px"
+              onClick={() => fileInputRef.current?.click()}
+              className="w-7 h-7 flex items-center justify-center rounded-md text-text-4 hover:text-text-1 transition-colors cursor-pointer"
+              title="Attach file"
             >
-              <span className="relative flex items-center justify-center w-3.5 h-3.5">
-                <span className="absolute inset-0 rounded-full bg-danger/30 animate-ping" style={{ animationDuration: '2s' }} />
-                <span className="relative w-2.5 h-2.5 rounded-full bg-danger" />
-              </span>
+              <Paperclip size={14} />
             </button>
-          )}
-          <button
-            onClick={handleSend}
-            disabled={!input.trim() || sending}
-            className={cn(
-              'w-9 h-9 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0 mb-px',
-              'disabled:opacity-15 disabled:cursor-not-allowed',
-              input.trim()
-                ? mode === 'query'
-                  ? 'bg-info/15 text-info hover:bg-info/25 border border-info/25'
-                  : 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
-                : 'bg-transparent text-text-4',
+            {/* Model selector */}
+            {providerModels.length > 1 && (
+              <div className="relative flex items-center">
+                <select
+                  value={agent.model || ''}
+                  onChange={(e) => {
+                    if (!e.target.value) return;
+                    api.patch(`/agents/${agent.id}`, { model: e.target.value }).catch(() => {});
+                  }}
+                  className="h-7 pl-2 pr-5 text-[11px] font-mono bg-transparent text-text-3 hover:text-text-1 rounded-md cursor-pointer focus:outline-none appearance-none border-none"
+                  title="Switch model"
+                >
+                  {providerModels.map((m) => (
+                    <option key={m.id} value={m.id}>{m.name || m.id}</option>
+                  ))}
+                </select>
+                <ChevronDown size={10} className="absolute right-1.5 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+              </div>
+            )}
+            {/* Pulsating activity indicator */}
+            {isAlive && (
+              <span className="relative flex items-center justify-center w-3 h-3 mr-auto">
+                <span className="absolute inset-0 rounded-full bg-accent/30 animate-ping [animation-duration:2s]" />
+                <span className="relative w-2 h-2 rounded-full bg-accent" />
+              </span>
             )}
-          >
-            {sending ? <Loader2 size={15} className="animate-spin" /> : <Send size={15} />}
-          </button>
+            <div className="flex-1" />
+            {/* Right: pause (when alive) or send (when idle) */}
+            {isAlive ? (
+              <button
+                onClick={() => useGrooveStore.getState().stopAgent(agent.id)}
+                className="flex items-center gap-1.5 h-7 px-2 rounded-md text-text-0 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer"
+              >
+                <Pause size={13} />
+                <span className="text-[11px] font-sans font-medium">Pause</span>
+              </button>
+            ) : (
+              <button
+                onClick={handleSend}
+                disabled={(!input.trim() && !pendingSnippet) || sending}
+                className={cn(
+                  'w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                  'disabled:opacity-15 disabled:cursor-not-allowed',
+                  (input.trim() || pendingSnippet)
+                    ? 'text-text-0 hover:text-text-1'
+                    : 'text-text-4',
+                )}
+              >
+                {sending ? <Loader2 size={15} className="animate-spin" /> : <SendHorizontal size={15} />}
+              </button>
+            )}
+          </div>
         </div>
         </div>
       </div>

package/packages/gui/src/components/agents/agent-node.jsx

@@ -8,7 +8,6 @@ import { fmtNum, fmtDollar, fmtUptime } from '../../lib/format';
 
 const EMPTY = [];
 const ERROR_RE = /error|crash|fail/i;
-const BAR_BG = 'rgba(51, 175, 188, 0.15)';
 const BAR_H = 'h-[2px]';
 
 function shortModel(id) {
@@ -98,13 +97,9 @@ const AgentNode = memo(({ data, selected }) => {
 
         {/* Scan line — running only */}
         {isAlive && (
-          <div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ borderRadius: 3 }}>
+          <div className="absolute inset-0 overflow-hidden pointer-events-none rounded-[3px]">
             <div
-              className="absolute left-0 right-0 h-px"
-              style={{
-                background: 'linear-gradient(90deg, transparent 0%, rgba(97,175,239,0.25) 50%, transparent 100%)',
-                animation: 'node-scan 3s ease-in-out infinite',
-              }}
+              className="absolute left-0 right-0 h-px [background:linear-gradient(90deg,transparent_0%,rgba(97,175,239,0.25)_50%,transparent_100%)] [animation:node-scan_3s_ease-in-out_infinite]"
             />
           </div>
         )}
@@ -116,8 +111,8 @@ const AgentNode = memo(({ data, selected }) => {
               <span className="absolute inset-0 rounded-sm" style={{ background: sColor }} />
               {isAlive && (
                 <span
-                  className="absolute inset-[-2px] rounded-sm"
-                  style={{ background: sColor, opacity: 0.15, animation: 'node-pulse-bar 2s ease-in-out infinite' }}
+                  className="absolute inset-[-2px] rounded-sm opacity-[0.15] [animation:node-pulse-bar_2s_ease-in-out_infinite]"
+                  style={{ background: sColor }}
                 />
               )}
             </span>
@@ -155,7 +150,7 @@ const AgentNode = memo(({ data, selected }) => {
           </div>
 
           {/* Context bar */}
-          <div className={`mt-1.5 ${BAR_H} rounded-sm overflow-hidden`} style={{ background: BAR_BG }}>
+          <div className={`mt-1.5 ${BAR_H} rounded-sm overflow-hidden bg-[rgba(51,175,188,0.15)]`}>
             <div
               className="h-full rounded-sm transition-all duration-700"
               style={{
@@ -185,7 +180,7 @@ const AgentNode = memo(({ data, selected }) => {
                 )}
               </div>
               <div className="flex items-center gap-2">
-                <div className={`flex-1 ${BAR_H} rounded-sm overflow-hidden`} style={{ background: BAR_BG }}>
+                <div className={`flex-1 ${BAR_H} rounded-sm overflow-hidden bg-[rgba(51,175,188,0.15)]`}>
                   <div className="h-full rounded-sm transition-all duration-500" style={{ width: `${Math.max(contextPct, 1)}%`, background: ctxColor }} />
                 </div>
                 <span className="text-[9px] font-mono font-medium" style={{ color: ctxColor }}>{contextPct}%</span>
@@ -196,7 +191,7 @@ const AgentNode = memo(({ data, selected }) => {
             <div className="px-3 pt-1 pb-1">
               <span className="text-[9px] font-mono text-[#505862] uppercase tracking-wider">Quality</span>
               <div className="flex items-center gap-2 mt-1">
-                <div className={`flex-1 ${BAR_H} rounded-sm overflow-hidden`} style={{ background: BAR_BG }}>
+                <div className={`flex-1 ${BAR_H} rounded-sm overflow-hidden bg-[rgba(51,175,188,0.15)]`}>
                   <div className="h-full rounded-sm transition-all duration-500" style={{ width: `${qScore != null ? Math.max(qScore, 1) : 0}%`, background: qColor || '#505862' }} />
                 </div>
                 <span className="text-[9px] font-mono font-medium" style={{ color: qColor || '#505862' }}>{qScore != null ? qScore : '—'}</span>
@@ -207,7 +202,7 @@ const AgentNode = memo(({ data, selected }) => {
             <div className="px-3 pt-1 pb-1">
               <span className="text-[9px] font-mono text-[#505862] uppercase tracking-wider">Efficiency</span>
               <div className="flex items-center gap-2 mt-1">
-                <div className={`flex-1 ${BAR_H} rounded-sm overflow-hidden`} style={{ background: BAR_BG }}>
+                <div className={`flex-1 ${BAR_H} rounded-sm overflow-hidden bg-[rgba(51,175,188,0.15)]`}>
                   <div className="h-full rounded-sm transition-all duration-500" style={{ width: `${effPct != null ? Math.max(effPct, 1) : 0}%`, background: effColor || '#505862' }} />
                 </div>
                 <span className="text-[9px] font-mono font-medium" style={{ color: effColor || '#505862' }}>{effPct != null ? `${effPct}%` : '—'}</span>

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

@@ -1,12 +1,12 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef } 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, TrendingDown } from 'lucide-react';
+import { MessageSquare, Settings, Activity, FileText, Pencil, Check, X } from 'lucide-react';
 import { fmtNum, fmtUptime } from '../../lib/format';
 import { cn } from '../../lib/cn';
 import { roleColor } from '../../lib/status';
@@ -77,56 +77,6 @@ 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);
@@ -141,7 +91,6 @@ export function AgentPanel() {
   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 (!agent) return null;
   if (activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
@@ -151,17 +100,6 @@ export function AgentPanel() {
   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 ─────────────────────────────────────────── */}
@@ -194,12 +132,6 @@ 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>