groove-dev 0.27.139 → 0.27.141

package/node_modules/@groove-dev/gui/src/components/editor/file-tree.jsx

@@ -5,8 +5,8 @@ import { cn } from '../../lib/cn';
 import { api } from '../../lib/api';
 import {
   ChevronRight, ChevronDown, File, Folder, FolderOpen,
-  Plus, FolderPlus, Search, RefreshCw, Trash2, Pencil, FilePlus,
-  ChevronsDownUp, PanelLeftClose, GitBranch, Activity,
+  FolderPlus, Search, RefreshCw, Trash2, Pencil, FilePlus,
+  ChevronsDownUp, PanelLeftClose,
 } from 'lucide-react';
 import { ScrollArea } from '../ui/scroll-area';
 
@@ -240,41 +240,18 @@ function TreeDir({ dirPath, depth, activePath, onFileClick, expanded, onDirToggl
 
 // ── Main FileTree ────────────────────────────────────────────
 
-// ── Collapsible Section ──────────────────────────────────────
-function CollapsibleSection({ title, icon: Icon, count, defaultOpen = true, children }) {
-  const [open, setOpen] = useState(defaultOpen);
-  return (
-    <div className="border-b border-border-subtle">
-      <button
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-2xs font-sans font-medium text-text-2 uppercase tracking-wide hover:bg-surface-4 transition-colors cursor-pointer"
-      >
-        {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-        <Icon size={11} className="text-text-3" />
-        <span className="flex-1 text-left">{title}</span>
-        {count > 0 && <span className="text-text-4">{count}</span>}
-      </button>
-      {open && children}
-    </div>
-  );
-}
-
 export function FileTree({ rootDir, onCollapse }) {
   const treeCache = useGrooveStore((s) => s.editorTreeCache);
   const activeFile = useGrooveStore((s) => s.editorActiveFile);
   const openFile = useGrooveStore((s) => s.openFile);
   const fetchTreeDir = useGrooveStore((s) => s.fetchTreeDir);
   const addToast = useGrooveStore((s) => s.addToast);
-  const agents = useGrooveStore((s) => s.agents);
-  const editorSelectedAgent = useGrooveStore((s) => s.editorSelectedAgent);
-
   const [expanded, setExpanded] = useState(new Set(['']));
   const [filter, setFilter] = useState('');
   const [contextMenu, setContextMenu] = useState(null);
   const [inlineInput, setInlineInput] = useState(null);
   const [dragState, setDragState] = useState({ draggingPath: null, dragOverPath: null });
   const [gitChanges, setGitChanges] = useState([]);
-  const [agentFiles, setAgentFiles] = useState([]);
 
   useEffect(() => {
     fetchTreeDir('');
@@ -286,13 +263,6 @@ export function FileTree({ rootDir, onCollapse }) {
     }).catch(() => setGitChanges([]));
   }, [rootDir]);
 
-  useEffect(() => {
-    if (!editorSelectedAgent) { setAgentFiles([]); return; }
-    api.get(`/agents/${editorSelectedAgent}/files-touched`).then((data) => {
-      setAgentFiles((data.files || []).filter((f) => f.exists !== false));
-    }).catch(() => setAgentFiles([]));
-  }, [editorSelectedAgent]);
-
   const gitStatusMap = {};
   for (const entry of gitChanges) {
     gitStatusMap[entry.path] = entry.status;
@@ -519,60 +489,6 @@ export function FileTree({ rootDir, onCollapse }) {
 
       {/* Tree */}
       <ScrollArea className="flex-1">
-        {/* Git Changes section */}
-        {gitChanges.length > 0 && (
-          <CollapsibleSection title="Git Changes" icon={GitBranch} count={gitChanges.length} defaultOpen={true}>
-            <div className="py-0.5">
-              {gitChanges.map((entry) => {
-                const name = entry.path.split('/').pop();
-                const statusColor = entry.status === 'A' || entry.status === '?' ? 'text-success' : entry.status === 'D' ? 'text-danger' : 'text-warning';
-                return (
-                  <button
-                    key={entry.path}
-                    onClick={() => openFile(entry.path)}
-                    className={cn(
-                      'w-full flex items-center gap-1.5 px-3 py-[3px] text-xs font-sans cursor-pointer',
-                      'hover:bg-surface-5 transition-colors text-left',
-                      activeFile === entry.path ? 'bg-accent/10 text-text-0' : 'text-text-1',
-                    )}
-                  >
-                    <File size={12} className={cn('flex-shrink-0', getFileColor(name))} />
-                    <span className="truncate flex-1">{name}</span>
-                    <span className={cn('text-2xs font-mono flex-shrink-0', statusColor)}>{entry.status}</span>
-                  </button>
-                );
-              })}
-            </div>
-          </CollapsibleSection>
-        )}
-
-        {/* Agent Activity section */}
-        {agentFiles.length > 0 && (
-          <CollapsibleSection title="Agent Activity" icon={Activity} count={agentFiles.length} defaultOpen={true}>
-            <div className="py-0.5">
-              {agentFiles.slice(0, 20).map((f) => {
-                const name = f.path.split('/').pop();
-                return (
-                  <button
-                    key={f.path}
-                    onClick={() => openFile(f.path)}
-                    className={cn(
-                      'w-full flex items-center gap-1.5 px-3 py-[3px] text-xs font-sans cursor-pointer',
-                      'hover:bg-surface-5 transition-colors text-left',
-                      activeFile === f.path ? 'bg-accent/10 text-text-0' : 'text-text-1',
-                    )}
-                  >
-                    <File size={12} className={cn('flex-shrink-0', getFileColor(name))} />
-                    <span className="truncate flex-1">{name}</span>
-                    <span className="text-2xs text-text-4">{f.writes || 0}w</span>
-                  </button>
-                );
-              })}
-            </div>
-          </CollapsibleSection>
-        )}
-
-        {/* File Explorer */}
         <div
           className="py-1"
           onDragOver={(e) => { if (!dragState.draggingPath) return; e.preventDefault(); setDragOverDir(null); }}

package/node_modules/@groove-dev/gui/src/components/editor/terminal.jsx

@@ -22,7 +22,7 @@ const THEME = {
 let tabCounter = 0;
 let spawnSeq = 0;
 
-function TerminalInstance({ tabId, visible, registerKill }) {
+function TerminalInstance({ tabId, visible, registerKill, onSelectionChange }) {
   const containerRef = useRef(null);
   const termRef = useRef(null);
   const fitRef = useRef(null);
@@ -70,6 +70,11 @@ function TerminalInstance({ tabId, visible, registerKill }) {
     termRef.current = term;
     fitRef.current = fitAddon;
 
+    term.onSelectionChange(() => {
+      const text = term.getSelection();
+      onSelectionChange?.(text || '');
+    });
+
     let spawnAttempts = 0;
     function trySpawn() {
       spawnAttempts++;
@@ -117,7 +122,6 @@ function TerminalInstance({ tabId, visible, registerKill }) {
       });
     }
 
-    // Fit first, then spawn — ensures PTY gets correct column count
     requestAnimationFrame(() => {
       try { fitAddon.fit(); } catch {}
       trySpawn();
@@ -169,6 +173,7 @@ export function TerminalManager() {
 
   const [tabs, setTabs] = useState([{ id: 'term-0', label: 'Terminal' }]);
   const [activeTab, setActiveTab] = useState('term-0');
+  const [selectedText, setSelectedText] = useState('');
   const killFns = useRef({});
 
   const registerKill = useCallback((tabId, fn) => { killFns.current[tabId] = fn; }, []);
@@ -217,13 +222,19 @@ export function TerminalManager() {
       onToggleFullHeight={() => setFullHeight(true)}
       onMinimize={() => setFullHeight(false)}
       onClose={() => setTerminalVisible(false)}
+      selectedText={selectedText}
     >
       {tabs.map((tab) => (
-        <TerminalInstance key={tab.id} tabId={tab.id} visible={tab.id === activeTab} registerKill={registerKill} />
+        <TerminalInstance
+          key={tab.id}
+          tabId={tab.id}
+          visible={tab.id === activeTab}
+          registerKill={registerKill}
+          onSelectionChange={tab.id === activeTab ? setSelectedText : undefined}
+        />
       ))}
     </TerminalPanel>
   );
 }
 
-// Keep backward-compat export for existing imports
 export { TerminalManager as TerminalEmulator };

package/node_modules/@groove-dev/gui/src/components/keeper/global-modals.jsx

@@ -0,0 +1,177 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+// Global Keeper modals — rendered at App level so they work from any view (chat commands, etc.)
+import { useState, useEffect, useRef } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+import { Save } from 'lucide-react';
+
+const COMMANDS = [
+  { cmd: 'save',     args: '#tag',                desc: 'Save the message and send it to the agent' },
+  { cmd: 'append',   args: '#tag',                desc: 'Add to an existing memory and send to agent' },
+  { cmd: 'update',   args: '#tag',                desc: 'Open the editor to modify a memory in place' },
+  { cmd: 'delete',   args: '#tag',                desc: 'Remove a memory permanently' },
+  { cmd: 'view',     args: '#tag',                desc: 'Read a memory in the viewer' },
+  { cmd: 'read',     args: '#tag1 #tag2 ...',     desc: 'Send memory content to the agent — chat stays clean' },
+  { cmd: 'doc',      args: '#tag',                desc: 'AI synthesizes the full conversation into a document' },
+  { cmd: 'link',     args: '#tag path/to/doc',    desc: 'Link a memory to a NORTHSTAR or external document' },
+  { cmd: '[instruct]', args: '',                  desc: 'Show this command reference' },
+];
+
+function KeeperEditorModal() {
+  const keeperEditing = useGrooveStore((s) => s.keeperEditing);
+  const setKeeperEditing = useGrooveStore((s) => s.setKeeperEditing);
+  const saveKeeperItem = useGrooveStore((s) => s.saveKeeperItem);
+  const updateKeeperItem = useGrooveStore((s) => s.updateKeeperItem);
+  const activeView = useGrooveStore((s) => s.activeView);
+
+  const [tag, setTag] = useState('');
+  const [content, setContent] = useState('');
+  const textareaRef = useRef(null);
+
+  // Only render this global modal when NOT on the memory view (memory view has its own)
+  const open = !!keeperEditing && activeView !== 'memory';
+
+  useEffect(() => {
+    if (keeperEditing) {
+      setTag(keeperEditing.tag || '');
+      setContent(keeperEditing.content || '');
+    }
+  }, [keeperEditing]);
+
+  useEffect(() => {
+    if (open && textareaRef.current) {
+      setTimeout(() => textareaRef.current?.focus(), 100);
+    }
+  }, [open]);
+
+  const handleClose = (isOpen) => {
+    if (!isOpen) setKeeperEditing(null);
+  };
+
+  const handleSave = async () => {
+    if (!tag.trim() || keeperEditing?.readOnly) return;
+    if (keeperEditing?.isNew) {
+      await saveKeeperItem(tag.trim(), content);
+    } else {
+      await updateKeeperItem(tag.trim(), content);
+    }
+    setKeeperEditing(null);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+
+  if (!keeperEditing) return null;
+
+  const readOnly = keeperEditing.readOnly;
+  const isNew = keeperEditing.isNew;
+  const title = readOnly ? `#${keeperEditing.tag}` : isNew ? 'New Memory' : `Edit #${keeperEditing.tag}`;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent title={title} description="Memory content" className="max-w-2xl">
+        <div className="p-5 space-y-4" onKeyDown={handleKeyDown}>
+          {isNew && (
+            <div>
+              <label className="block text-xs font-medium text-text-2 mb-1.5">Tag</label>
+              <div className="flex items-center gap-1">
+                <span className="text-sm text-text-3">#</span>
+                <input
+                  type="text"
+                  value={tag}
+                  onChange={(e) => setTag(e.target.value.replace(/[^a-zA-Z0-9/_-]/g, '').toLowerCase())}
+                  placeholder="project/feature-name"
+                  className="flex-1 px-2 py-1.5 text-sm font-mono rounded-md bg-surface-0 border border-border text-text-0 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+                />
+              </div>
+            </div>
+          )}
+          <textarea
+            ref={textareaRef}
+            value={content}
+            onChange={(e) => !readOnly && setContent(e.target.value)}
+            readOnly={readOnly}
+            rows={16}
+            className="w-full px-3 py-2 text-sm font-mono leading-relaxed rounded-md bg-surface-0 border border-border text-text-0 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-y"
+            placeholder="Write your thoughts, ideas, context..."
+          />
+          <div className="flex items-center justify-between pt-1">
+            {readOnly ? (
+              <p className="text-2xs text-text-4">Read-only view</p>
+            ) : (
+              <p className="text-2xs text-text-4">{navigator.platform?.includes('Mac') ? 'Cmd' : 'Ctrl'}+S to save</p>
+            )}
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" size="sm" onClick={() => setKeeperEditing(null)}>
+                {readOnly ? 'Close' : 'Cancel'}
+              </Button>
+              {!readOnly && (
+                <Button variant="primary" size="sm" onClick={handleSave} disabled={!tag.trim()}>
+                  <Save size={14} /> Save
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function KeeperInstructModal() {
+  const open = useGrooveStore((s) => s.keeperInstructOpen);
+  const activeView = useGrooveStore((s) => s.activeView);
+
+  // Only render globally when NOT on memory view
+  if (activeView === 'memory') return null;
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => useGrooveStore.setState({ keeperInstructOpen: o })}>
+      <DialogContent title="Keeper Commands" description="Memory system command reference" className="max-w-lg">
+        <div className="p-5 space-y-4">
+          <p className="text-xs text-text-2 leading-relaxed">
+            Type these commands in any agent chat to manage your tagged memories. Commands are intercepted by Keeper — the agent never sees them.
+          </p>
+          <div className="space-y-1.5">
+            {COMMANDS.map((c) => (
+              <div key={c.cmd} className="flex items-start gap-3 py-1.5 border-b border-border-subtle last:border-0">
+                <div className="flex-shrink-0 flex items-center gap-1">
+                  <span className="px-1.5 py-0.5 rounded bg-accent/15 text-accent font-mono text-xs font-semibold">{c.cmd}</span>
+                  {c.args && <span className="text-xs text-text-3 font-mono">{c.args}</span>}
+                </div>
+                <span className="text-xs text-text-3 pt-0.5">{c.desc}</span>
+              </div>
+            ))}
+          </div>
+          <div className="pt-2 space-y-2">
+            <h3 className="text-xs font-semibold text-text-1">Tag Hierarchy</h3>
+            <p className="text-xs text-text-3 leading-relaxed">
+              Use <span className="font-mono text-accent">/</span> for nesting: <span className="font-mono text-accent">#groove/memory-system</span>. Pull a parent to get all children.
+            </p>
+            <h3 className="text-xs font-semibold text-text-1">Memory Types</h3>
+            <p className="text-xs text-text-3 leading-relaxed">
+              <span className="font-semibold">Manual</span> — you write via [save]/[append]/[update]. <span className="font-semibold">Doc</span> — AI writes via [doc]. Both editable.
+            </p>
+          </div>
+          <div className="flex justify-end pt-1">
+            <Button variant="ghost" size="sm" onClick={() => useGrooveStore.setState({ keeperInstructOpen: false })}>Close</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function KeeperGlobalModals() {
+  return (
+    <>
+      <KeeperEditorModal />
+      <KeeperInstructModal />
+    </>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/layout/activity-bar.jsx

@@ -1,16 +1,21 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, ChartSpline, Puzzle, Users, Newspaper, Settings, Globe, Eye } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Gamepad2, Users, Box, FlaskConical, Newspaper, Settings, Globe, MessageCircle, Eye, BookOpen } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
 import { useGrooveStore } from '../../stores/groove';
 import { isElectron, getPlatform } from '../../lib/electron';
 
 const BASE_NAV_ITEMS = [
-  { id: 'agents',      icon: Network,     label: 'Agents' },
-  { id: 'editor',      icon: Code2,       label: 'Editor' },
-  { id: 'dashboard',   icon: ChartSpline, label: 'Dashboard' },
-  { id: 'teams',       icon: Users,       label: 'Teams' },
-  { id: 'marketplace', icon: Puzzle,      label: 'Marketplace' },
+  { id: 'agents',      icon: Network,       label: 'Agents' },
+  { id: 'chat',        icon: MessageCircle, label: 'Chat' },
+  { id: 'editor',      icon: Code2,         label: 'Editor' },
+  { id: 'dashboard',   icon: ChartSpline,   label: 'Dashboard' },
+  { id: 'memory',      icon: BookOpen,      label: 'Memory' },
+  { id: 'teams',       icon: Users,         label: 'Teams' },
+  { id: 'marketplace', icon: Puzzle,        label: 'Marketplace' },
+  { id: 'toys',        icon: Gamepad2,      label: 'Toys' },
+  { id: 'models',      icon: Box,           label: 'Models' },
+  { id: 'model-lab',   icon: FlaskConical,  label: 'Model Lab' },
 ];
 
 const NETWORK_NAV_ITEM = { id: 'network', icon: Globe, label: 'Network' };

package/node_modules/@groove-dev/gui/src/components/layout/terminal-panel.jsx

@@ -1,7 +1,87 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useCallback, useState } from 'react';
-import { Maximize2, Minimize2, Plus, X, Terminal } from 'lucide-react';
+import { useRef, useCallback, useState, useEffect } from 'react';
+import { Maximize2, Minimize2, Plus, X, Terminal, Send, ChevronDown, Sparkles } from 'lucide-react';
 import { cn } from '../../lib/cn';
+import { useGrooveStore } from '../../stores/groove';
+import { Tooltip } from '../ui/tooltip';
+
+function AgentPicker({ onSelect, onClose }) {
+  const ref = useRef(null);
+  const agents = useGrooveStore((s) => s.agents);
+  const teams = useGrooveStore((s) => s.teams);
+
+  useEffect(() => {
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    }
+    function handleKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [onClose]);
+
+  const running = agents.filter((a) => a.status === 'running' || a.status === 'starting');
+  const stopped = agents.filter((a) => a.status !== 'running' && a.status !== 'starting');
+
+  function teamName(teamId) {
+    const team = teams.find((t) => t.id === teamId);
+    return team?.name || 'Default';
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="absolute bottom-full right-0 mb-1 z-50 min-w-[220px] max-h-[300px] overflow-y-auto py-1 bg-surface-2 border border-border rounded-lg shadow-xl"
+    >
+      {running.length > 0 && (
+        <>
+          <div className="px-3 py-1 text-2xs text-text-4 font-sans font-medium uppercase tracking-wider">Active</div>
+          {running.map((agent) => (
+            <button
+              key={agent.id}
+              onClick={() => onSelect(agent.id)}
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-xs font-sans text-text-1 hover:bg-surface-5 cursor-pointer transition-colors text-left"
+            >
+              <span className="w-1.5 h-1.5 rounded-full bg-success flex-shrink-0" />
+              <span className="truncate flex-1">{agent.name}</span>
+              <span className="text-2xs text-text-4">{teamName(agent.teamId)}</span>
+            </button>
+          ))}
+        </>
+      )}
+      {stopped.length > 0 && (
+        <>
+          <div className="px-3 py-1 text-2xs text-text-4 font-sans font-medium uppercase tracking-wider">
+            {running.length > 0 ? 'Other' : 'Agents'}
+          </div>
+          {stopped.slice(0, 10).map((agent) => (
+            <button
+              key={agent.id}
+              onClick={() => onSelect(agent.id)}
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-xs font-sans text-text-2 hover:bg-surface-5 cursor-pointer transition-colors text-left"
+            >
+              <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0',
+                agent.status === 'completed' ? 'bg-accent' : agent.status === 'crashed' ? 'bg-danger' : 'bg-text-4',
+              )} />
+              <span className="truncate flex-1">{agent.name}</span>
+              <span className="text-2xs text-text-4">{teamName(agent.teamId)}</span>
+            </button>
+          ))}
+        </>
+      )}
+      {agents.length === 0 && (
+        <div className="px-3 py-3 text-xs text-text-4 font-sans text-center">
+          No agents available
+        </div>
+      )}
+    </div>
+  );
+}
 
 export function TerminalPanel({
   children,
@@ -18,13 +98,22 @@ export function TerminalPanel({
   onMinimize,
   onClose,
   onRenameTab,
+  selectedText,
 }) {
   const dragging = useRef(false);
   const [renamingId, setRenamingId] = useState(null);
   const [renameValue, setRenameValue] = useState('');
+  const [showPicker, setShowPicker] = useState(false);
   const startY = useRef(0);
   const startH = useRef(0);
 
+  const activeAgent = useGrooveStore((s) => s.editorSelectedAgent);
+  const agents = useGrooveStore((s) => s.agents);
+  const attachSnippet = useGrooveStore((s) => s.attachSnippet);
+
+  const agent = agents.find((a) => a.id === activeAgent);
+  const hasSelection = selectedText && selectedText.trim().length > 0;
+
   const onMouseDown = useCallback((e) => {
     if (fullHeight) return;
     e.preventDefault();
@@ -49,6 +138,21 @@ export function TerminalPanel({
     document.addEventListener('mouseup', onMouseUp);
   }, [height, onHeightChange, fullHeight]);
 
+  function sendToAgent(agentId) {
+    if (!agentId || !selectedText?.trim()) return;
+    setShowPicker(false);
+    useGrooveStore.setState({ editorSelectedAgent: agentId });
+    attachSnippet({ type: 'terminal', code: selectedText.trim() });
+  }
+
+  function handleSendClick() {
+    if (activeAgent) {
+      sendToAgent(activeAgent);
+    } else {
+      setShowPicker(true);
+    }
+  }
+
   const tabList = tabs || [{ id: 'default', label: 'Terminal' }];
 
   return (
@@ -116,8 +220,53 @@ export function TerminalPanel({
           </button>
         </div>
 
-        {/* Window controls */}
+        {/* Send to Agent + Window controls */}
         <div className="flex items-center gap-0.5 flex-shrink-0 ml-2">
+          {/* Send to Agent */}
+          {hasSelection && (
+            <div className="relative flex items-center">
+              <Tooltip content={activeAgent ? `Send to ${agent?.name || 'agent'}` : 'Send to agent'} side="top">
+                <button
+                  onClick={handleSendClick}
+                  disabled={sending}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2 py-1 rounded text-xs font-sans cursor-pointer transition-colors mr-1',
+                    'bg-accent/15 text-accent hover:bg-accent/25 disabled:opacity-50',
+                  )}
+                >
+                  {activeAgent ? (
+                    <>
+                      <Send size={11} />
+                      <span className="text-2xs max-w-[80px] truncate">{agent?.name || 'Agent'}</span>
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles size={11} />
+                      <span className="text-2xs">Agent</span>
+                      <ChevronDown size={9} />
+                    </>
+                  )}
+                </button>
+              </Tooltip>
+              {!activeAgent && hasSelection && (
+                <Tooltip content="Pick agent" side="top">
+                  <button
+                    onClick={() => setShowPicker(!showPicker)}
+                    className="p-1 rounded text-text-3 hover:text-accent hover:bg-accent/10 cursor-pointer transition-colors mr-1"
+                  >
+                    <ChevronDown size={10} />
+                  </button>
+                </Tooltip>
+              )}
+              {showPicker && (
+                <AgentPicker
+                  onSelect={(id) => sendToAgent(id)}
+                  onClose={() => setShowPicker(false)}
+                />
+              )}
+            </div>
+          )}
+
           {fullHeight ? (
             <button
               onClick={onMinimize}