groove-dev 0.27.145 → 0.27.147

package/node_modules/@groove-dev/gui/src/components/chat/chat-input.jsx

@@ -1,8 +1,10 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { SendHorizontal, Loader2, Square, Paperclip, Image as ImageIcon, Zap, Bot, GripHorizontal } from 'lucide-react';
+import { SendHorizontal, Loader2, Square, Paperclip, Image as ImageIcon, Zap, Bot, GripHorizontal, ChevronUp } from 'lucide-react';
 import { cn } from '../../lib/cn';
-import { formatModelName } from './model-picker';
+import { formatModelName, isImageModel as checkImageModel, getTier, getContextSize, TIER_CONFIG } from './model-picker';
+import { useGrooveStore } from '../../stores/groove';
+import { Badge } from '../ui/badge';
 
 const EFFORT_OPTIONS = [
   { value: 'none', label: 'None' },
@@ -17,16 +19,37 @@ const VERBOSITY_OPTIONS = [
   { value: 'medium', label: 'Normal' },
 ];
 
-export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImageModel, currentModel, replyContext, onClearReply, role, isCodex, reasoningEffort, onReasoningEffortChange, verbosity, onVerbosityChange, mode, onModeChange, modeChanging }) {
+export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImageModel, currentModel, currentProvider, onModelChange, replyContext, onClearReply, role, isCodex, reasoningEffort, onReasoningEffortChange, verbosity, onVerbosityChange, mode, onModeChange, modeChanging }) {
   const [input, setInput] = useState('');
   const [inputHeight, setInputHeight] = useState(88);
+  const [modelPickerOpen, setModelPickerOpen] = useState(false);
   const textareaRef = useRef(null);
   const fileInputRef = useRef(null);
+  const modelPickerRef = useRef(null);
+
+  const [providers, setProviders] = useState([]);
+  const fetchProviders = useGrooveStore((s) => s.fetchProviders);
+
+  useEffect(() => {
+    fetchProviders().then((data) => {
+      if (Array.isArray(data)) setProviders(data);
+      else if (data?.providers) setProviders(data.providers);
+    }).catch(() => {});
+  }, [fetchProviders]);
 
   useEffect(() => {
     if (!disabled && textareaRef.current) textareaRef.current.focus();
   }, [disabled]);
 
+  useEffect(() => {
+    if (!modelPickerOpen) return;
+    function handleClick(e) {
+      if (modelPickerRef.current && !modelPickerRef.current.contains(e.target)) setModelPickerOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [modelPickerOpen]);
+
   function handleSend() {
     const text = input.trim();
     if (!text || sending || disabled) return;
@@ -160,17 +183,116 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
             </button>
           </div>
 
-          {currentModel && (
-            <div className={cn(
-              'flex items-center gap-1 h-5 px-2 rounded text-2xs font-mono',
-              isImageModel
-                ? 'bg-purple/8 text-purple'
-                : 'text-text-3',
-            )}>
+          <div ref={modelPickerRef} className="relative">
+            <button
+              onClick={() => setModelPickerOpen(!modelPickerOpen)}
+              className={cn(
+                'flex items-center gap-1 h-5 px-2 rounded text-2xs font-mono transition-colors cursor-pointer',
+                isImageModel
+                  ? 'bg-purple/8 text-purple hover:bg-purple/15'
+                  : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
+              )}
+            >
               {isImageModel && <ImageIcon size={9} />}
-              <span className="max-w-[80px] truncate">{formatModelName(currentModel)}</span>
-            </div>
-          )}
+              <span className="max-w-[120px] truncate">{currentModel ? formatModelName(currentModel) : 'Select model'}</span>
+              <ChevronUp size={10} className="text-text-4 flex-shrink-0" />
+            </button>
+
+            {modelPickerOpen && (() => {
+              const chatProviders = [];
+              const imageProviders = [];
+              for (const provider of providers) {
+                const models = provider.models || [];
+                const chat = [];
+                const img = [];
+                for (const m of models) {
+                  const mid = typeof m === 'string' ? m : m.id || m.name;
+                  const mtype = typeof m === 'object' ? m.type : undefined;
+                  if (mtype === 'image' || checkImageModel(mid)) img.push(m);
+                  else chat.push(m);
+                }
+                if (chat.length) chatProviders.push({ ...provider, models: chat });
+                if (img.length) imageProviders.push({ ...provider, models: img });
+              }
+
+              const renderModel = (provider, model) => {
+                const modelId = typeof model === 'string' ? model : model.id || model.name;
+                const modelName = typeof model === 'string' ? model : model.name || model.id;
+                const mtype = typeof model === 'object' ? model.type : undefined;
+                const isImg = mtype === 'image' || checkImageModel(modelId);
+                const tier = isImg ? null : getTier(modelId);
+                const tierCfg = tier ? TIER_CONFIG[tier] : null;
+                const TierIcon = tierCfg?.icon;
+                const isActive = currentModel === modelId && currentProvider === provider.id;
+                return (
+                  <button
+                    key={modelId}
+                    onClick={() => {
+                      onModelChange?.({ provider: provider.id, model: modelId });
+                      setModelPickerOpen(false);
+                    }}
+                    className={cn(
+                      'w-full flex items-center gap-3 px-3.5 py-2.5 text-left transition-colors cursor-pointer',
+                      isActive ? 'bg-accent/10' : 'hover:bg-surface-3',
+                    )}
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-1.5">
+                        {isImg && <ImageIcon size={11} className="text-purple flex-shrink-0" />}
+                        <span className={cn('text-xs font-medium font-sans truncate', isActive ? 'text-accent' : 'text-text-0')}>{modelName}</span>
+                      </div>
+                      {!isImg && (
+                        <div className="text-2xs text-text-4 font-sans mt-0.5">{getContextSize(modelId)} context</div>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      {isImg ? (
+                        <Badge variant="purple" className="text-[9px]">
+                          <ImageIcon size={8} /> Image
+                        </Badge>
+                      ) : tierCfg && (
+                        <Badge variant={tierCfg.variant} className="text-[9px]">
+                          <TierIcon size={8} /> {tierCfg.label}
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                );
+              };
+
+              return (
+                <div className="absolute bottom-full left-0 mb-1.5 w-80 max-h-[60vh] overflow-y-auto rounded-xl border border-border bg-surface-1 shadow-2xl z-50">
+                  {providers.length === 0 && (
+                    <div className="px-4 py-8 text-center text-xs text-text-3 font-sans">No providers available</div>
+                  )}
+                  {chatProviders.map((provider) => (
+                    <div key={provider.id}>
+                      <div className="px-3.5 py-2 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2/80 border-b border-border-subtle sticky top-0 backdrop-blur-sm">
+                        {provider.name || provider.id}
+                      </div>
+                      {provider.models.map((m) => renderModel(provider, m))}
+                    </div>
+                  ))}
+                  {imageProviders.length > 0 && (
+                    <>
+                      <div className="px-3.5 py-2 text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans bg-surface-0 border-y border-border-subtle flex items-center gap-1.5 sticky top-0 backdrop-blur-sm">
+                        <ImageIcon size={10} className="text-purple" />
+                        Image Generation
+                      </div>
+                      {imageProviders.map((provider) => (
+                        <div key={`img-${provider.id}`}>
+                          <div className="px-3.5 py-2 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2/80 border-b border-border-subtle">
+                            {provider.name || provider.id}
+                          </div>
+                          {provider.models.map((m) => renderModel(provider, m))}
+                        </div>
+                      ))}
+                    </>
+                  )}
+                </div>
+              );
+            })()}
+          </div>
 
           {isCodex && (
             <>

package/node_modules/@groove-dev/gui/src/components/chat/chat-messages.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useRef, useEffect, useState, useCallback } from 'react';
-import { Copy, Check, ArrowRight, Download, Maximize2, X, Image as ImageIcon, RefreshCw } from 'lucide-react';
+import { Copy, Check, ArrowRight, Download, Maximize2, X, Image as ImageIcon, RefreshCw, Loader2 } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { timeAgo } from '../../lib/format';
 import { ThinkingIndicator } from '../ui/thinking-indicator';
@@ -435,7 +435,23 @@ function ApiTypingIndicator() {
   );
 }
 
-export function ChatMessages({ messages, isStreaming, model, mode, onImageReply, role }) {
+function ToolCallIndicator({ tool }) {
+  return (
+    <div className="max-w-[85%] py-1">
+      <div className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg bg-surface-3/50 border border-border-subtle/30">
+        <Loader2 size={13} className="text-accent animate-spin flex-shrink-0" />
+        <div className="flex-1 min-w-0">
+          <span className="text-xs font-semibold font-sans text-text-2">{tool.name}</span>
+          {tool.summary && (
+            <span className="text-xs font-mono text-text-4 ml-1.5 truncate">{tool.summary}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ChatMessages({ messages, isStreaming, model, mode, onImageReply, role, activeTool }) {
   const scrollRef = useRef(null);
   const isAtBottomRef = useRef(true);
 
@@ -453,7 +469,7 @@ export function ChatMessages({ messages, isStreaming, model, mode, onImageReply,
     if (isAtBottomRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages?.length, isStreaming]);
+  }, [messages?.length, isStreaming, activeTool]);
 
   if (!messages || messages.length === 0) {
     return (
@@ -472,7 +488,8 @@ export function ChatMessages({ messages, isStreaming, model, mode, onImageReply,
         if (msg.from === 'system') return <SystemMessage key={i} msg={msg} />;
         return <AssistantMessage key={i} msg={msg} model={model} role={role} />;
       })}
-      {isStreaming && (
+      {activeTool && <ToolCallIndicator tool={activeTool} />}
+      {isStreaming && !activeTool && (
         mode === 'agent' ? (
           <ThinkingIndicator className="py-1" />
         ) : (

package/node_modules/@groove-dev/gui/src/components/chat/chat-view.jsx

@@ -33,6 +33,7 @@ export function ChatView() {
   const conversationMessages = useGrooveStore((s) => s.conversationMessages);
   const sendingMessage = useGrooveStore((s) => s.sendingMessage);
   const streamingConversationId = useGrooveStore((s) => s.streamingConversationId);
+  const conversationActiveTools = useGrooveStore((s) => s.conversationActiveTools);
   const createConversation = useGrooveStore((s) => s.createConversation);
   const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
   const sendChatMessage = useGrooveStore((s) => s.sendChatMessage);
@@ -62,6 +63,7 @@ export function ChatView() {
   const isCodexProvider = activeConversation?.provider === 'codex';
   const messages = activeConversationId ? (conversationMessages[activeConversationId] || []) : [];
   const isStreaming = streamingConversationId === activeConversationId && sendingMessage;
+  const activeTool = activeConversationId ? (conversationActiveTools?.[activeConversationId] || null) : null;
   const currentModelIsImage = activeConversation ? isImageModel(activeConversation.model) : false;
 
   const handleNewChat = useCallback(async (provider, model) => {
@@ -126,10 +128,6 @@ export function ChatView() {
     setConversationVerbosity(activeConversationId, verbosity);
   }, [activeConversationId, setConversationVerbosity]);
 
-  const currentModel = activeConversation
-    ? { provider: activeConversation.provider, model: activeConversation.model }
-    : null;
-
   return (
     <div className="flex h-full bg-surface-0">
       {/* Conversation sidebar */}
@@ -154,7 +152,7 @@ export function ChatView() {
 
         {activeConversation ? (
           <>
-            <ChatHeader conversation={activeConversation} model={currentModel} onModelChange={handleModelChange} role={activeRole} onRoleChange={handleRoleChange} sidebarCollapsed={sidebarCollapsed} />
+            <ChatHeader conversation={activeConversation} role={activeRole} onRoleChange={handleRoleChange} sidebarCollapsed={sidebarCollapsed} />
             <ChatMessages
               messages={messages}
               isStreaming={isStreaming}
@@ -162,6 +160,7 @@ export function ChatView() {
               mode={activeConversation.mode || 'api'}
               onImageReply={handleImageReply}
               role={activeRole}
+              activeTool={activeTool}
             />
             <ChatInput
               onSend={handleSend}
@@ -171,6 +170,8 @@ export function ChatView() {
               disabled={false}
               isImageModel={currentModelIsImage}
               currentModel={activeConversation.model}
+              currentProvider={activeConversation.provider}
+              onModelChange={handleModelChange}
               replyContext={replyContext}
               onClearReply={() => setReplyContext(null)}
               role={activeRole}

package/node_modules/@groove-dev/gui/src/components/chat/model-picker.jsx

@@ -15,13 +15,13 @@ export function formatModelName(id) {
     .join(' ');
 }
 
-const TIER_CONFIG = {
+export const TIER_CONFIG = {
   frontier: { label: 'Frontier', variant: 'purple', icon: Sparkles },
   mid: { label: 'Mid', variant: 'accent', icon: Zap },
   fast: { label: 'Fast', variant: 'success', icon: Zap },
 };
 
-function getTier(model) {
+export function getTier(model) {
   const name = (model || '').toLowerCase();
   if (name.includes('gpt-5.5') || name.includes('gpt-5.4-pro')) return 'frontier';
   if (name.includes('gpt-5.4-mini') || name.includes('gpt-5-mini')) return 'mid';
@@ -32,7 +32,7 @@ function getTier(model) {
   return 'fast';
 }
 
-function getContextSize(model) {
+export function getContextSize(model) {
   const name = (model || '').toLowerCase();
   if (name.startsWith('gpt-5')) return '200k';
   if (name.includes('opus') || name.includes('sonnet')) return '200k';

package/node_modules/@groove-dev/gui/src/components/lab/chat-playground.jsx

@@ -40,7 +40,7 @@ function UserMessage({ msg }) {
     <div className="flex justify-end animate-chat-fade-in">
       <div className="max-w-[80%]">
         <div className="px-3.5 py-2 bg-accent/8 rounded rounded-br-none">
-          <p className="text-xs text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.content}</p>
+          <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.content}</p>
         </div>
       </div>
     </div>
@@ -60,7 +60,7 @@ function AssistantMessage({ msg, streaming }) {
       </div>
       {msg.reasoning && (
         <div className="ml-5 mb-1.5 pl-3 border-l border-text-4/20 py-1">
-          <div className="text-2xs font-sans text-text-4 italic whitespace-pre-wrap break-words leading-relaxed">
+          <div className="text-xs font-sans text-text-4 italic whitespace-pre-wrap break-words leading-relaxed">
             {msg.reasoning}
             {isReasoning && <span className="inline-block w-1 h-3 bg-text-4/40 ml-0.5 animate-pulse" />}
           </div>
@@ -69,7 +69,7 @@ function AssistantMessage({ msg, streaming }) {
       <div className="ml-5">
         {msg.content ? (
           <div className={cn(
-            'text-xs font-sans whitespace-pre-wrap break-words leading-relaxed',
+            'text-sm font-sans whitespace-pre-wrap break-words leading-relaxed',
             msg.error ? 'text-danger' : 'text-text-1',
           )}>
             {msg.content}

package/node_modules/@groove-dev/gui/src/components/lab/lab-assistant.jsx

@@ -307,7 +307,7 @@ export function LabAssistant() {
             <span className="relative w-1.5 h-1.5 rounded-full bg-accent" />
           </div>
           <span className="text-2xs font-sans text-text-2">
-            Lab Assistant is setting up <span className="font-medium text-text-1">{backend?.toUpperCase()}</span>
+            Lab Assistant {backend === 'lab-general' ? 'is active' : <>is setting up <span className="font-medium text-text-1">{backend?.toUpperCase()}</span></>}
           </span>
           <div className="flex-1" />
           <Badge variant="success" className="text-2xs">running</Badge>
@@ -322,8 +322,14 @@ export function LabAssistant() {
               <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-3">
                 <FlaskConical size={22} className="text-accent" />
               </div>
-              <p className="text-sm text-text-1 font-sans font-medium">Setting up {backend?.toUpperCase()}</p>
-              <p className="text-[13px] text-text-3 font-sans mt-1.5">The assistant is starting up and will begin configuring your runtime...</p>
+              <p className="text-sm text-text-1 font-sans font-medium">
+                {backend === 'lab-general' ? 'Lab Assistant' : `Setting up ${backend?.toUpperCase()}`}
+              </p>
+              <p className="text-[13px] text-text-3 font-sans mt-1.5">
+                {backend === 'lab-general'
+                  ? 'Ask about runtime setup, model configs, context windows, prompts, or anything else...'
+                  : 'The assistant is starting up and will begin configuring your runtime...'}
+              </p>
             </div>
           ) : (
             messages.map((msg, i) =>

package/node_modules/@groove-dev/gui/src/components/lab/metrics-panel.jsx

@@ -115,6 +115,7 @@ function SparklineSection({ icon: Icon, label, value, unit, data, color = HEX.ac
 export function MetricsPanel() {
   const metrics = useGrooveStore((s) => s.labMetrics);
   const activeRuntime = useGrooveStore((s) => s.labActiveRuntime);
+  const activeModel = useGrooveStore((s) => s.labActiveModel);
   const activeSession = useGrooveStore((s) => s.labActiveSession);
   const sessions = useGrooveStore((s) => s.labSessions);
 
@@ -276,11 +277,20 @@ export function MetricsPanel() {
       </div>
 
       {/* Attach to agent */}
-      {activeRuntime && (
+      {activeRuntime && activeModel && (
         <>
           <div className="h-px bg-border-subtle" />
-          <Tooltip content="Use current preset when spawning a new agent">
-            <button className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-2xs font-sans text-text-3 hover:text-text-1 border border-border-subtle rounded-sm hover:border-border transition-colors cursor-pointer">
+          <Tooltip content="Spawn a new agent using this runtime and model">
+            <button
+              onClick={() => {
+                useGrooveStore.getState().openDetail({
+                  type: 'spawn',
+                  presetProvider: 'local',
+                  presetModel: `runtime:${activeRuntime}:${activeModel}`,
+                });
+              }}
+              className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-2xs font-sans text-text-3 hover:text-text-1 border border-border-subtle rounded-sm hover:border-border transition-colors cursor-pointer"
+            >
               <Link size={11} /> Attach to Agent
             </button>
           </Tooltip>

package/node_modules/@groove-dev/gui/src/components/lab/parameter-panel.jsx

@@ -72,8 +72,8 @@ function SeedInput({ value, onChange }) {
     onChange(Math.floor(Math.random() * 2147483647));
   }
   return (
-    <div className="space-y-2 pt-1.5">
-      <span className="text-[11px] text-text-2 font-sans">Seed</span>
+    <div className="pt-2">
+      <span className="text-[11px] text-text-2 font-sans block mb-2.5">Seed</span>
       <div className="flex items-center gap-1.5">
         <input
           type="number"
@@ -118,8 +118,8 @@ function StopSequenceInput({ sequences, onChange }) {
   }
 
   return (
-    <div className="space-y-2 pt-1.5">
-      <span className="text-[11px] text-text-2 font-sans">Stop Sequences</span>
+    <div className="pt-2">
+      <span className="text-[11px] text-text-2 font-sans block mb-2.5">Stop Sequences</span>
       <div className="flex items-center gap-1.5">
         <input
           value={input}
@@ -138,7 +138,7 @@ function StopSequenceInput({ sequences, onChange }) {
         </button>
       </div>
       {sequences.length > 0 && (
-        <div className="flex flex-wrap gap-1">
+        <div className="flex flex-wrap gap-1.5 mt-2.5">
           {sequences.map((s, i) => (
             <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-surface-2 border border-border-subtle rounded text-[10px] font-mono text-text-2">
               {s.length > 12 ? s.slice(0, 12) + '...' : s}

package/node_modules/@groove-dev/gui/src/components/lab/runtime-config.jsx

@@ -297,7 +297,7 @@ export function LaunchModel() {
   }
 
   return (
-    <SidebarSection label="Launch Model" collapsible defaultOpen={false}>
+    <SidebarSection label="Launch Model">
       {localModels.length === 0 ? (
         <div className="py-6 text-center rounded-md bg-surface-1/50 border border-border-subtle">
           <HardDrive size={16} className="mx-auto text-text-4 mb-2" />
@@ -494,8 +494,6 @@ export function RuntimeConfig() {
   return (
     <SidebarSection
       label="Runtimes"
-      collapsible
-      defaultOpen={false}
       action={
         <Tooltip content="Add runtime">
           <button

package/node_modules/@groove-dev/gui/src/components/layout/app-shell.jsx

@@ -12,6 +12,7 @@ import { StatusBar } from './status-bar';
 import { DetailPanel } from './detail-panel';
 import { CommandPalette } from './command-palette';
 import { ApprovalModal } from '../ui/approval-modal';
+import { QuestionModal } from '../ui/question-modal';
 import { QuickConnect } from '../settings/quick-connect';
 
 import { TeamTabBar } from '../../views/agents';
@@ -119,6 +120,7 @@ export function AppShell({ children, detailContent, terminalContent }) {
         <CommandPalette />
         <QuickConnect />
         <ApprovalModal />
+        <QuestionModal />
         <ToastContainer />
       </div>
     </TooltipProvider>

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

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Terminal, BookOpen, Radio, Plug, Globe, ArrowUpCircle, X, Unplug } from 'lucide-react';
+import { Terminal, BookOpen, Radio, Plug, Globe, ArrowUpCircle, X, Unplug, Cpu, Square } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { StatusDot } from '../ui/status-dot';
 import { Badge } from '../ui/badge';
@@ -23,7 +23,10 @@ export function StatusBar({
   const updateProgress = useGrooveStore((s) => s.updateProgress);
   const setUpdateModalOpen = useGrooveStore((s) => s.setUpdateModalOpen);
   const navigate = useGrooveStore((s) => s.setActiveView);
+  const labRuntimes = useGrooveStore((s) => s.labRuntimes);
+  const stopLabRuntime = useGrooveStore((s) => s.stopLabRuntime);
   const activeTunnels = savedTunnels.filter((t) => t.active);
+  const runningRuntimes = (labRuntimes || []).filter((rt) => rt.status === 'connected');
   const electron = isElectron();
 
   return (
@@ -110,6 +113,26 @@ export function StatusBar({
             <span>Federation</span>
           </button>
         )}
+        {runningRuntimes.map((rt) => (
+          <div key={rt.id} className="flex items-center gap-1">
+            <button
+              onClick={() => navigate('model-lab')}
+              className="flex items-center gap-1.5 text-text-3 hover:text-text-1 cursor-pointer transition-colors"
+              title={`${rt.name} — running`}
+            >
+              <Cpu size={10} className="text-success" />
+              <span>{rt.name}</span>
+              <span className="w-1.5 h-1.5 rounded-full bg-success" />
+            </button>
+            <button
+              onClick={() => stopLabRuntime(rt.id)}
+              className="p-0.5 text-text-4 hover:text-danger cursor-pointer transition-colors rounded"
+              title={`Stop ${rt.name}`}
+            >
+              <Square size={8} />
+            </button>
+          </div>
+        ))}
       </div>
 
       <div className="flex-1" />

package/node_modules/@groove-dev/gui/src/components/ui/question-modal.jsx

@@ -0,0 +1,107 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { MessageCircleQuestion, Send } from 'lucide-react';
+import { Button } from '../ui/button';
+import { useGrooveStore } from '../../stores/groove';
+
+export function QuestionModal() {
+  const pendingQuestions = useGrooveStore((s) => s.pendingQuestions);
+  const answerQuestion = useGrooveStore((s) => s.answerQuestion);
+  const [answers, setAnswers] = useState({});
+
+  if (!pendingQuestions?.length) return null;
+
+  function handleSubmit(q) {
+    const questionAnswers = {};
+    for (const qItem of q.questions) {
+      const key = qItem.question || qItem.header || `q${q.questions.indexOf(qItem)}`;
+      questionAnswers[key] = answers[`${q.agentId}:${key}`] || '';
+    }
+    answerQuestion(q.agentId, questionAnswers);
+    setAnswers((prev) => {
+      const next = { ...prev };
+      for (const key of Object.keys(next)) {
+        if (key.startsWith(q.agentId + ':')) delete next[key];
+      }
+      return next;
+    });
+  }
+
+  return (
+    <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-lg flex flex-col gap-2 px-4">
+      <AnimatePresence>
+        {pendingQuestions.map((q) => (
+          <motion.div
+            key={q.id}
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 20, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="rounded-lg border border-accent/30 bg-surface-2/95 backdrop-blur-md shadow-xl shadow-accent/5 overflow-hidden"
+          >
+            <div className="px-4 py-3 flex items-start gap-3">
+              <MessageCircleQuestion size={16} className="text-accent shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold text-text-0 font-sans">
+                  {q.agentName || 'Agent'} has a question
+                </p>
+              </div>
+            </div>
+            <div className="px-4 pb-3 flex flex-col gap-2">
+              {q.questions.map((qItem, i) => {
+                const key = qItem.question || qItem.header || `q${i}`;
+                const inputKey = `${q.agentId}:${key}`;
+                return (
+                  <div key={i}>
+                    <p className="text-2xs text-text-2 font-sans mb-1">{qItem.question || key}</p>
+                    {qItem.options?.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {qItem.options.map((opt) => {
+                          const label = typeof opt === 'string' ? opt : opt.label;
+                          const selected = answers[inputKey] === label;
+                          return (
+                            <button
+                              key={label}
+                              onClick={() => setAnswers((p) => ({ ...p, [inputKey]: label }))}
+                              className={`px-2 py-1 text-2xs rounded border font-sans transition-colors ${
+                                selected
+                                  ? 'border-accent bg-accent/20 text-text-0'
+                                  : 'border-border-subtle bg-surface-1 text-text-2 hover:border-accent/50'
+                              }`}
+                            >
+                              {label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <input
+                        type="text"
+                        className="w-full px-2 py-1.5 text-xs rounded border border-border-subtle bg-surface-1 text-text-0 font-sans placeholder:text-text-3 focus:outline-none focus:border-accent"
+                        placeholder="Type your answer..."
+                        value={answers[inputKey] || ''}
+                        onChange={(e) => setAnswers((p) => ({ ...p, [inputKey]: e.target.value }))}
+                        onKeyDown={(e) => e.key === 'Enter' && handleSubmit(q)}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+            <div className="px-4 py-2.5 border-t border-border-subtle flex items-center justify-end">
+              <Button
+                size="sm"
+                variant="accent"
+                onClick={() => handleSubmit(q)}
+              >
+                <Send size={14} className="mr-1" />
+                Answer
+              </Button>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/ui/sheet.jsx

@@ -30,12 +30,12 @@ export function SheetContent({ children, className, title, side = 'right', width
             <DialogPrimitive.Title className="text-base font-semibold text-text-0 font-sans">
               {title}
             </DialogPrimitive.Title>
-            <DialogPrimitive.Close
+            <button
               onClick={onClose}
               className="p-1 rounded-md text-text-3 hover:text-text-0 hover:bg-surface-5 transition-colors cursor-pointer"
             >
               <X size={16} />
-            </DialogPrimitive.Close>
+            </button>
           </div>
         )}
         <DialogPrimitive.Description className="sr-only">Panel</DialogPrimitive.Description>