groove-dev 0.27.144 → 0.27.146

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 { Send, 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,22 +19,42 @@ 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(40);
+  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;
     onSend(text);
     setInput('');
-    setInputHeight(40);
   }
 
   function onKeyDown(e) {
@@ -54,7 +76,7 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
     e.preventDefault();
     const startY = e.clientY;
     const startH = inputHeight;
-    const onMove = (ev) => setInputHeight(Math.min(Math.max(40, startH - (ev.clientY - startY)), 400));
+    const onMove = (ev) => setInputHeight(Math.min(Math.max(56, startH - (ev.clientY - startY)), 400));
     const onUp = () => {
       window.removeEventListener('mousemove', onMove);
       window.removeEventListener('mouseup', onUp);
@@ -76,110 +98,211 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
         : 'Send a message...';
 
   return (
-    <div className="border-t border-border-subtle bg-surface-1">
+    <div className="px-4 pb-3">
       <div
         onMouseDown={onDragStart}
-        className="flex items-center justify-center h-3 cursor-row-resize hover:bg-surface-3/50 transition-colors group"
+        className="flex items-center justify-center h-5 cursor-row-resize group"
       >
-        <GripHorizontal size={10} className="text-text-4 group-hover:text-text-2 transition-colors" />
+        <GripHorizontal size={12} className="text-text-4 group-hover:text-text-2 transition-colors" />
       </div>
 
-      <div className="px-4 pb-3">
-        {replyContext && (
-          <div className="flex items-center gap-2 mb-2 px-3 py-2 rounded-lg bg-accent/5 border border-accent/15">
-            <ImageIcon size={12} className="text-accent flex-shrink-0" />
-            <span className="flex-1 text-2xs text-text-2 font-sans truncate">Iterating: &quot;{replyContext.prompt}&quot;</span>
-            <button onClick={onClearReply} className="text-text-4 hover:text-text-1 cursor-pointer flex-shrink-0">
-              <Square size={10} />
-            </button>
-          </div>
-        )}
-
-        <textarea
-          ref={textareaRef}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={onKeyDown}
-          placeholder={placeholder}
-          disabled={disabled}
-          rows={1}
-          style={{ height: inputHeight }}
-          className={cn(
-            'w-full resize-none rounded-xl px-4 py-2.5 text-sm',
-            'bg-surface-0 border text-text-0 font-sans',
-            'placeholder:text-text-4',
-            'focus:outline-none focus:ring-1',
-            'border-border focus:ring-accent/40',
-            'disabled:opacity-50 disabled:cursor-not-allowed',
-          )}
+      {replyContext && (
+        <div className="flex items-center gap-2 mb-2 px-3 py-2 rounded-lg bg-accent/5 border border-accent/15">
+          <ImageIcon size={12} className="text-accent flex-shrink-0" />
+          <span className="flex-1 text-2xs text-text-2 font-sans truncate">Iterating: &quot;{replyContext.prompt}&quot;</span>
+          <button onClick={onClearReply} className="text-text-4 hover:text-text-1 cursor-pointer flex-shrink-0">
+            <Square size={10} />
+          </button>
+        </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"
+          multiple
+          accept=".pdf,.png,.jpg,.jpeg,.gif,.svg,.csv,.txt,.md,.json,.yaml,.yml,.docx,.pptx,.xlsx"
+          onChange={handleFileSelect}
+          className="hidden"
         />
 
-        <div className="flex items-center gap-2 mt-2">
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            accept=".pdf,.png,.jpg,.jpeg,.gif,.svg,.csv,.txt,.md,.json,.yaml,.yml,.docx,.pptx,.xlsx"
-            onChange={handleFileSelect}
-            className="hidden"
+        <div className="px-1">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            rows={1}
+            className={cn(
+              'w-full resize-none px-3 py-2.5 text-[13px]',
+              'bg-transparent font-sans text-text-0',
+              'placeholder:text-text-4',
+              'focus:outline-none',
+              'disabled:opacity-40 disabled:cursor-not-allowed',
+            )}
+            style={{ height: inputHeight }}
           />
+        </div>
+
+        <div className="flex items-center gap-1.5 px-1.5 pb-1.5 pt-0.5">
           <button
             onClick={() => fileInputRef.current?.click()}
             disabled={disabled}
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-text-4 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed flex-shrink-0"
+            className="w-7 h-7 flex items-center justify-center rounded-md text-text-4 hover:text-text-1 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
             title="Attach file"
           >
             <Paperclip size={14} />
           </button>
 
-          <div className="flex items-center h-7 rounded-lg bg-surface-3 border border-border-subtle p-0.5">
+          <div className="flex items-center h-6 rounded-md bg-surface-3 border border-border-subtle p-0.5">
             <button
               onClick={() => onModeChange?.('api')}
               disabled={modeChanging}
               className={cn(
-                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                'flex items-center gap-1 h-5 px-2 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                 'disabled:opacity-50 disabled:cursor-not-allowed',
-                currentMode === 'api' ? 'bg-accent/15 text-accent border border-accent/25' : 'text-text-3 hover:text-text-1',
+                currentMode === 'api' ? 'bg-accent/15 text-accent' : 'text-text-3 hover:text-text-1',
               )}
               title="Lightweight — fast and cheap, no tools"
             >
-              <Zap size={11} /> Chat
+              <Zap size={10} /> Chat
             </button>
             <button
               onClick={() => onModeChange?.('agent')}
               disabled={modeChanging}
               className={cn(
-                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                'flex items-center gap-1 h-5 px-2 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                 'disabled:opacity-50 disabled:cursor-not-allowed',
-                currentMode === 'agent' ? 'bg-purple/15 text-purple border border-purple/25' : 'text-text-3 hover:text-text-1',
+                currentMode === 'agent' ? 'bg-purple/15 text-purple' : 'text-text-3 hover:text-text-1',
               )}
               title="Full agent — tools, files, session resume"
             >
-              <Bot size={11} /> Agent
+              <Bot size={10} /> Agent
             </button>
           </div>
 
-          {currentModel && (
-            <div className={cn(
-              'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-mono border',
-              isImageModel
-                ? 'bg-purple/8 border-purple/20 text-purple'
-                : 'bg-surface-3 border-border-subtle 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 && (
             <>
-              <div className="flex items-center h-6 rounded-md bg-surface-3 border border-border-subtle p-0.5">
+              <div className="flex items-center h-5 rounded bg-surface-3 border border-border-subtle p-0.5">
                 {EFFORT_OPTIONS.map((opt) => (
                   <button
                     key={opt.value}
                     onClick={() => onReasoningEffortChange?.(opt.value)}
                     className={cn(
-                      'h-5 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                      'h-4 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                       reasoningEffort === opt.value
                         ? 'bg-accent/15 text-accent'
                         : 'text-text-4 hover:text-text-1',
@@ -191,13 +314,13 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
                 ))}
               </div>
 
-              <div className="flex items-center h-6 rounded-md bg-surface-3 border border-border-subtle p-0.5">
+              <div className="flex items-center h-5 rounded bg-surface-3 border border-border-subtle p-0.5">
                 {VERBOSITY_OPTIONS.map((opt) => (
                   <button
                     key={opt.value}
                     onClick={() => onVerbosityChange?.(opt.value)}
                     className={cn(
-                      'h-5 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                      'h-4 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                       verbosity === opt.value
                         ? 'bg-accent/15 text-accent'
                         : 'text-text-4 hover:text-text-1',
@@ -216,24 +339,25 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
           {isActive ? (
             <button
               onClick={onStop}
-              className="w-8 h-8 flex items-center justify-center rounded-lg bg-danger/80 text-white hover:bg-danger transition-all cursor-pointer shadow-lg shadow-danger/20 flex-shrink-0"
               title="Stop generation"
+              className="group w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer"
             >
-              <Square size={14} fill="currentColor" />
+              <span className="relative flex items-center justify-center w-3.5 h-3.5">
+                <span className="absolute inset-0 rounded-full bg-accent/30 group-hover:bg-red-500/30 animate-ping [animation-duration:2s] transition-colors" />
+                <span className="relative w-2.5 h-2.5 rounded-full bg-accent group-hover:bg-red-500 transition-colors" />
+              </span>
             </button>
           ) : (
             <button
               onClick={handleSend}
               disabled={!canSend}
               className={cn(
-                'w-8 h-8 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0',
-                'disabled:opacity-20 disabled:cursor-not-allowed',
-                canSend
-                  ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
-                  : 'bg-surface-4 text-text-4',
+                'w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                'disabled:opacity-15 disabled:cursor-not-allowed',
+                canSend ? 'text-text-0 hover:text-text-1' : 'text-text-4',
               )}
             >
-              {sending ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
+              {sending ? <Loader2 size={15} className="animate-spin" /> : <SendHorizontal size={15} />}
             </button>
           )}
         </div>

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,11 +33,12 @@ 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);
   const sendImageMessage = useGrooveStore((s) => s.sendImageMessage);
-  const stopAgent = useGrooveStore((s) => s.stopAgent);
+
   const stopChatStreaming = useGrooveStore((s) => s.stopChatStreaming);
   const setConversationMode = useGrooveStore((s) => s.setConversationMode);
   const setConversationModel = useGrooveStore((s) => s.setConversationModel);
@@ -54,7 +55,7 @@ export function ChatView() {
   const [replyContext, setReplyContext] = useState(null);
   const [modeChanging, setModeChanging] = useState(false);
 
-  const activeRole = activeConversationId ? (conversationRoles?.[activeConversationId] || null) : null;
+  const activeRole = activeConversationId ? (conversationRoles?.[activeConversationId] || 'chat') : 'chat';
   const activeReasoningEffort = activeConversationId ? (conversationReasoningEffort?.[activeConversationId] || 'medium') : 'medium';
   const activeVerbosity = activeConversationId ? (conversationVerbosity?.[activeConversationId] || 'medium') : 'medium';
 
@@ -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) => {
@@ -101,12 +103,8 @@ export function ChatView() {
 
   const handleStop = useCallback(() => {
     if (!activeConversation) return;
-    if (activeConversation.mode === 'agent' && activeConversation.agentId) {
-      stopAgent(activeConversation.agentId);
-    } else {
-      stopChatStreaming(activeConversationId);
-    }
-  }, [activeConversation, activeConversationId, stopAgent, stopChatStreaming]);
+    stopChatStreaming(activeConversationId);
+  }, [activeConversation, activeConversationId, stopChatStreaming]);
 
   const handleModelChange = useCallback(async (selection) => {
     if (activeConversationId) {
@@ -130,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 */}
@@ -158,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}
@@ -166,6 +160,7 @@ export function ChatView() {
               mode={activeConversation.mode || 'api'}
               onImageReply={handleImageReply}
               role={activeRole}
+              activeTool={activeTool}
             />
             <ChatInput
               onSend={handleSend}
@@ -175,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';