groove-dev 0.27.89 → 0.27.92

package/packages/gui/src/components/chat/chat-input.jsx

@@ -1,6 +1,6 @@
 // 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 } from 'lucide-react';
+import { Send, Loader2, Square, Paperclip, Image as ImageIcon, Zap, Bot, GripHorizontal } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { formatModelName } from './model-picker';
 
@@ -19,20 +19,10 @@ const VERBOSITY_OPTIONS = [
 
 export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImageModel, currentModel, replyContext, onClearReply, role, isCodex, reasoningEffort, onReasoningEffortChange, verbosity, onVerbosityChange, mode, onModeChange }) {
   const [input, setInput] = useState('');
+  const [inputHeight, setInputHeight] = useState(40);
   const textareaRef = useRef(null);
   const fileInputRef = useRef(null);
 
-  const adjustHeight = useCallback(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = Math.min(el.scrollHeight, 400) + 'px';
-  }, []);
-
-  useEffect(() => {
-    adjustHeight();
-  }, [input, adjustHeight]);
-
   useEffect(() => {
     if (!disabled && textareaRef.current) textareaRef.current.focus();
   }, [disabled]);
@@ -42,9 +32,7 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
     if (!text || sending || disabled) return;
     onSend(text);
     setInput('');
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-    }
+    setInputHeight(40);
   }
 
   function onKeyDown(e) {
@@ -62,6 +50,19 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
     e.target.value = '';
   }
 
+  const onDragStart = useCallback((e) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = inputHeight;
+    const onMove = (ev) => setInputHeight(Math.min(Math.max(40, startH - (ev.clientY - startY)), 400));
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, [inputHeight]);
+
   const isActive = streaming || sending;
   const canSend = input.trim() && !sending && !disabled;
   const currentMode = mode || 'api';
@@ -75,154 +76,163 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
         : 'Send a message...';
 
   return (
-    <div className="border-t border-border-subtle px-4 py-3 bg-surface-1">
-      {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}
-        className={cn(
-          'w-full resize-y 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',
-          'min-h-[40px]',
-          'border-border focus:ring-accent/40',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
+    <div className="border-t border-border-subtle bg-surface-1">
+      <div
+        onMouseDown={onDragStart}
+        className="flex items-center justify-center h-3 cursor-row-resize hover:bg-surface-3/50 transition-colors group"
+      >
+        <GripHorizontal size={10} 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>
         )}
-      />
-
-      <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"
-        />
-        <button
-          onClick={() => fileInputRef.current?.click()}
+
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
           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"
-          title="Attach file"
-        >
-          <Paperclip size={14} />
-        </button>
+          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',
+          )}
+        />
 
-        <div className="flex items-center h-7 rounded-lg bg-surface-3 border border-border-subtle p-0.5">
-          <button
-            onClick={() => onModeChange?.('api')}
-            className={cn(
-              'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-              currentMode === 'api' ? 'bg-accent/15 text-accent border border-accent/25' : 'text-text-3 hover:text-text-1',
-            )}
-            title="Lightweight — fast and cheap, no tools"
-          >
-            <Zap size={11} /> Chat
-          </button>
+        <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"
+          />
           <button
-            onClick={() => onModeChange?.('agent')}
-            className={cn(
-              'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-              currentMode === 'agent' ? 'bg-purple/15 text-purple border border-purple/25' : 'text-text-3 hover:text-text-1',
-            )}
-            title="Full agent — tools, files, session resume"
+            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"
+            title="Attach file"
           >
-            <Bot size={11} /> Agent
+            <Paperclip size={14} />
           </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',
-          )}>
-            {isImageModel && <ImageIcon size={9} />}
-            <span className="max-w-[80px] truncate">{formatModelName(currentModel)}</span>
+          <div className="flex items-center h-7 rounded-lg bg-surface-3 border border-border-subtle p-0.5">
+            <button
+              onClick={() => onModeChange?.('api')}
+              className={cn(
+                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                currentMode === 'api' ? 'bg-accent/15 text-accent border border-accent/25' : 'text-text-3 hover:text-text-1',
+              )}
+              title="Lightweight — fast and cheap, no tools"
+            >
+              <Zap size={11} /> Chat
+            </button>
+            <button
+              onClick={() => onModeChange?.('agent')}
+              className={cn(
+                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                currentMode === 'agent' ? 'bg-purple/15 text-purple border border-purple/25' : 'text-text-3 hover:text-text-1',
+              )}
+              title="Full agent — tools, files, session resume"
+            >
+              <Bot size={11} /> Agent
+            </button>
           </div>
-        )}
-
-        {isCodex && (
-          <>
-            <div className="flex items-center h-6 rounded-md 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',
-                    reasoningEffort === opt.value
-                      ? 'bg-accent/15 text-accent'
-                      : 'text-text-4 hover:text-text-1',
-                  )}
-                  title={`Reasoning: ${opt.label}`}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
 
-            <div className="flex items-center h-6 rounded-md 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',
-                    verbosity === opt.value
-                      ? 'bg-accent/15 text-accent'
-                      : 'text-text-4 hover:text-text-1',
-                  )}
-                  title={`Verbosity: ${opt.label}`}
-                >
-                  {opt.label}
-                </button>
-              ))}
+          {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',
+            )}>
+              {isImageModel && <ImageIcon size={9} />}
+              <span className="max-w-[80px] truncate">{formatModelName(currentModel)}</span>
             </div>
-          </>
-        )}
-
-        <div className="flex-1" />
-
-        {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"
-          >
-            <Square size={14} fill="currentColor" />
-          </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',
-            )}
-          >
-            {sending ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
-          </button>
-        )}
+          )}
+
+          {isCodex && (
+            <>
+              <div className="flex items-center h-6 rounded-md 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',
+                      reasoningEffort === opt.value
+                        ? 'bg-accent/15 text-accent'
+                        : 'text-text-4 hover:text-text-1',
+                    )}
+                    title={`Reasoning: ${opt.label}`}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+
+              <div className="flex items-center h-6 rounded-md 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',
+                      verbosity === opt.value
+                        ? 'bg-accent/15 text-accent'
+                        : 'text-text-4 hover:text-text-1',
+                    )}
+                    title={`Verbosity: ${opt.label}`}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+
+          <div className="flex-1" />
+
+          {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"
+            >
+              <Square size={14} fill="currentColor" />
+            </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',
+              )}
+            >
+              {sending ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );

package/packages/gui/src/components/chat/chat-view.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useCallback } from 'react';
-import { Plus } from 'lucide-react';
+import { Plus, PanelLeftOpen } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { ConversationList } from './conversation-list';
@@ -64,10 +64,8 @@ export function ChatView() {
   const currentModelIsImage = activeConversation ? isImageModel(activeConversation.model) : false;
 
   const handleNewChat = useCallback(async (provider, model) => {
-    const p = provider || 'claude-code';
-    const m = model || 'claude-sonnet-4-6';
     try {
-      await createConversation(p, m, 'api');
+      await createConversation(provider || null, model || null, 'api');
     } catch { /* toast handles */ }
   }, [createConversation]);
 
@@ -134,17 +132,27 @@ export function ChatView() {
     <div className="flex h-full bg-surface-0">
       {/* Conversation sidebar */}
       <div className={cn(
-        'flex-shrink-0 border-r border-accent/12 bg-surface-1 transition-all duration-200 overflow-hidden',
-        sidebarCollapsed ? 'w-0' : 'w-64',
+        'relative flex-shrink-0 border-r border-accent/12 bg-surface-1 transition-all duration-200 overflow-hidden',
+        sidebarCollapsed ? 'w-0 border-r-0' : 'w-64',
       )}>
-        <ConversationList onNewChat={() => handleNewChat()} />
+        <ConversationList onNewChat={() => handleNewChat()} onCollapse={() => setSidebarCollapsed(true)} />
       </div>
 
       {/* Main chat area */}
       <div className="flex-1 flex flex-col min-w-0">
+        {sidebarCollapsed && (
+          <button
+            onClick={() => setSidebarCollapsed(false)}
+            className="absolute top-3 left-2 z-10 w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
+            title="Show sidebar"
+          >
+            <PanelLeftOpen size={15} />
+          </button>
+        )}
+
         {activeConversation ? (
           <>
-            <ChatHeader conversation={activeConversation} model={currentModel} onModelChange={handleModelChange} onModeChange={handleModeChange} role={activeRole} onRoleChange={handleRoleChange} />
+            <ChatHeader conversation={activeConversation} model={currentModel} onModelChange={handleModelChange} role={activeRole} onRoleChange={handleRoleChange} sidebarCollapsed={sidebarCollapsed} />
             <ChatMessages
               messages={messages}
               isStreaming={isStreaming}

package/packages/gui/src/components/chat/conversation-list.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useMemo } from 'react';
-import { Plus, MessageCircle, Pin, Pencil, PinOff, Trash2, Zap, Bot } from 'lucide-react';
+import { SquarePen, MessageCircle, Pin, Pencil, PinOff, Trash2, Zap, Bot, PanelLeftClose } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { Badge } from '../ui/badge';
@@ -43,13 +43,12 @@ function ConversationItem({ conv, isActive, onSelect, onRename, onPin, onDelete
         <button
           onClick={() => onSelect(conv.id)}
           className={cn(
-            'w-full flex items-center gap-2 px-3 py-2 text-left rounded-md transition-colors cursor-pointer group',
+            'w-full flex items-center gap-2 px-3 py-2.5 text-left transition-colors cursor-pointer group border-b border-border-subtle/50',
             isActive
-              ? 'bg-accent/10 text-text-0'
-              : 'text-text-2 hover:bg-surface-4 hover:text-text-1',
+              ? 'text-text-0'
+              : 'text-text-2 hover:bg-surface-3/40 hover:text-text-1',
           )}
         >
-          <MessageCircle size={13} className={cn('flex-shrink-0', isActive ? 'text-accent' : 'text-text-4 group-hover:text-text-3')} />
           <div className="flex-1 min-w-0">
             <div className="text-xs font-medium font-sans truncate">{conv.title || 'New Chat'}</div>
             <div className="flex items-center gap-1.5 mt-0.5">
@@ -81,7 +80,7 @@ function ConversationItem({ conv, isActive, onSelect, onRename, onPin, onDelete
   );
 }
 
-export function ConversationList({ onNewChat }) {
+export function ConversationList({ onNewChat, onCollapse }) {
   const conversations = useGrooveStore((s) => s.conversations);
   const activeConversationId = useGrooveStore((s) => s.activeConversationId);
   const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
@@ -122,7 +121,27 @@ export function ConversationList({ onNewChat }) {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex-1 overflow-y-auto px-1.5 pt-3 pb-3 space-y-0.5">
+      <div className="flex items-center justify-between px-3 pt-3 pb-2">
+        <span className="text-xs font-semibold text-text-2 font-sans">Chats</span>
+        <div className="flex items-center gap-0.5">
+          <button
+            onClick={onNewChat}
+            className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
+            title="New chat"
+          >
+            <SquarePen size={15} />
+          </button>
+          <button
+            onClick={onCollapse}
+            className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
+            title="Collapse sidebar"
+          >
+            <PanelLeftClose size={15} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto pt-1 pb-3">
         {conversations.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 text-center px-4">
             <MessageCircle size={24} className="text-text-4 mb-3" />
@@ -139,16 +158,6 @@ export function ConversationList({ onNewChat }) {
           </>
         )}
       </div>
-
-      <div className="p-3 border-t border-border-subtle">
-        <button
-          onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
-        >
-          <Plus size={14} />
-          New Chat
-        </button>
-      </div>
     </div>
   );
 }

package/packages/gui/src/components/editor/code-editor.jsx

@@ -26,37 +26,43 @@ const LANGS = {
 
 // Custom theme overrides to match our design tokens
 const grooveTheme = EditorView.theme({
-  '&': { backgroundColor: '#1a1e25', color: '#bcc2cd', fontFamily: 'var(--font-mono)', fontSize: '13px', height: '100%' },
-  '.cm-scroller': { overflow: 'auto' },
-  '.cm-content': { caretColor: '#33afbc' },
-  '.cm-cursor': { borderLeftColor: '#33afbc' },
-  '.cm-gutters': { backgroundColor: '#1a1e25', borderRight: '1px solid #22272e', color: '#505862' },
-  '.cm-activeLineGutter': { backgroundColor: '#22272e' },
-  '.cm-activeLine': { backgroundColor: 'rgba(34, 39, 46, 0.5)' },
+  '&': { backgroundColor: '#13161b', color: '#d4d8e0', fontFamily: 'var(--font-mono)', fontSize: '12px', height: '100%', lineHeight: '1.6' },
+  '.cm-scroller': { overflow: 'auto', padding: '4px 0' },
+  '.cm-content': { caretColor: '#33afbc', fontWeight: '400' },
+  '.cm-cursor': { borderLeftColor: '#33afbc', borderLeftWidth: '1.5px' },
+  '.cm-gutters': { backgroundColor: '#13161b', borderRight: '1px solid #1e2229', color: '#404852', minWidth: '40px' },
+  '.cm-activeLineGutter': { backgroundColor: '#1a1e25' },
+  '.cm-activeLine': { backgroundColor: 'rgba(255, 255, 255, 0.03)' },
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: 'rgba(51, 175, 188, 0.15)' },
+  '.cm-line': { fontWeight: '400' },
+  // Markdown heading overrides — prevent bold/large rendering
+  '.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6': { fontWeight: '400', fontSize: '12px' },
+  '.ͼ1 .cm-line .tok-heading': { fontWeight: '400', fontSize: '12px' },
+  '.tok-heading': { fontWeight: '400' },
+  '.tok-heading1, .tok-heading2, .tok-heading3': { fontWeight: '400', fontSize: '12px' },
   // Search panel styling
-  '.cm-panels': { backgroundColor: '#1a1e25', borderBottom: '1px solid #3e4451' },
-  '.cm-panels.cm-panels-top': { borderBottom: '1px solid #3e4451' },
-  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid #3e4451' },
-  '.cm-search': { padding: '6px 8px', gap: '4px', fontFamily: 'var(--font-sans)', fontSize: '12px', display: 'flex', flexWrap: 'wrap', alignItems: 'center' },
-  '.cm-search label': { display: 'flex', alignItems: 'center', gap: '4px', color: '#8b929e', fontSize: '11px' },
+  '.cm-panels': { backgroundColor: '#13161b', borderBottom: '1px solid #1e2229' },
+  '.cm-panels.cm-panels-top': { borderBottom: '1px solid #1e2229' },
+  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid #1e2229' },
+  '.cm-search': { padding: '6px 8px', gap: '4px', fontFamily: 'var(--font-sans)', fontSize: '11px', display: 'flex', flexWrap: 'wrap', alignItems: 'center' },
+  '.cm-search label': { display: 'flex', alignItems: 'center', gap: '4px', color: '#6e7681', fontSize: '10px' },
   '.cm-search input, .cm-search .cm-textfield': {
-    backgroundColor: '#1a1e25', border: '1px solid #2c313a', borderRadius: '4px', color: '#e6e6e6',
-    padding: '2px 6px', fontSize: '12px', fontFamily: 'var(--font-mono)', outline: 'none',
+    backgroundColor: '#1a1e25', border: '1px solid #2c313a', borderRadius: '4px', color: '#d4d8e0',
+    padding: '2px 6px', fontSize: '11px', fontFamily: 'var(--font-mono)', outline: 'none',
   },
   '.cm-search input:focus, .cm-search .cm-textfield:focus': { borderColor: '#33afbc' },
   '.cm-search .cm-button, .cm-button': {
-    backgroundColor: '#2c313a', border: '1px solid #3e4451', borderRadius: '4px', color: '#bcc2cd',
-    padding: '2px 8px', fontSize: '11px', fontFamily: 'var(--font-sans)', cursor: 'pointer',
+    backgroundColor: '#1e2229', border: '1px solid #2c313a', borderRadius: '4px', color: '#a0a8b4',
+    padding: '2px 8px', fontSize: '10px', fontFamily: 'var(--font-sans)', cursor: 'pointer',
     backgroundImage: 'none',
   },
-  '.cm-search .cm-button:hover, .cm-button:hover': { backgroundColor: '#333842', color: '#e6e6e6' },
-  '.cm-search .cm-button:active': { backgroundColor: '#3a3f4b' },
+  '.cm-search .cm-button:hover, .cm-button:hover': { backgroundColor: '#2c313a', color: '#d4d8e0' },
+  '.cm-search .cm-button:active': { backgroundColor: '#333842' },
   '.cm-search br': { display: 'none' },
-  '.cm-panel.cm-search [name=close]': { color: '#6e7681', cursor: 'pointer', padding: '0 4px' },
-  '.cm-panel.cm-search [name=close]:hover': { color: '#e6e6e6' },
-  '.cm-searchMatch': { backgroundColor: 'rgba(51, 175, 188, 0.2)', outline: '1px solid rgba(51, 175, 188, 0.4)' },
-  '.cm-searchMatch-selected': { backgroundColor: 'rgba(51, 175, 188, 0.35)' },
+  '.cm-panel.cm-search [name=close]': { color: '#505862', cursor: 'pointer', padding: '0 4px' },
+  '.cm-panel.cm-search [name=close]:hover': { color: '#d4d8e0' },
+  '.cm-searchMatch': { backgroundColor: 'rgba(51, 175, 188, 0.15)', outline: '1px solid rgba(51, 175, 188, 0.3)' },
+  '.cm-searchMatch-selected': { backgroundColor: 'rgba(51, 175, 188, 0.3)' },
 }, { dark: true });
 
 export function CodeEditor({ content, language, onChange, onSave, onCursorChange, viewRef: externalViewRef }) {
@@ -135,5 +141,5 @@ export function CodeEditor({ content, language, onChange, onSave, onCursorChange
     view.dispatch({ effects: langCompartment.current.reconfigure(langExt()) });
   }, [language]);
 
-  return <div ref={containerRef} className="w-full h-full overflow-hidden" />;
+  return <div ref={containerRef} className="w-full h-full overflow-hidden bg-[#13161b]" />;
 }

package/packages/gui/src/components/settings/quick-connect.jsx

@@ -27,7 +27,11 @@ export function QuickConnect() {
       await useGrooveStore.getState().connectTunnel(id);
       toggle();
     } catch (err) {
-      addToast('error', 'Connection failed', err?.message || 'Unknown error');
+      let detail = err?.message || 'Unknown error';
+      if (detail.toLowerCase().includes('port forward')) {
+        detail += ' — Try testing the connection first, or check your SSH key configuration.';
+      }
+      addToast('error', 'Connection failed', detail);
     }
     setConnectingId(null);
   }

package/packages/gui/src/components/settings/remote-server-card.jsx

@@ -79,11 +79,15 @@ export function RemoteServerCard({ server, onEdit, onDelete, onConnect, onDiscon
 
   const connectLabel = connectStep === 'installing'
     ? 'Installing Groove...'
-    : connectStep === 'starting'
-      ? 'Starting daemon...'
-      : connecting
-        ? 'Connecting...'
-        : 'Connect';
+    : connectStep === 'upgrading'
+      ? 'Updating Groove...'
+      : connectStep === 'starting'
+        ? 'Starting daemon...'
+        : connectStep === 'forwarding'
+          ? 'Establishing tunnel...'
+          : connecting
+            ? 'Connecting...'
+            : 'Connect';
 
   const uptimeSeconds = server.active && server.startedAt
     ? Math.floor((Date.now() - new Date(server.startedAt).getTime()) / 1000)

package/packages/gui/src/components/settings/ssh-wizard.jsx

@@ -207,7 +207,11 @@ export function SSHWizard({ server, onSave, onTest, onConnect, onCancel }) {
       setCompletedSteps((prev) => [...new Set([...prev, 2])]);
       setStep(3);
     } catch (err) {
-      setTestResult({ error: err?.body?.error || err?.message || 'Connection failed' });
+      let msg = err?.body?.error || err?.message || 'Connection failed';
+      if (msg.toLowerCase().includes('port forward')) {
+        msg += ' — Check that the remote server is reachable and SSH port forwarding is allowed.';
+      }
+      setTestResult({ error: msg });
     }
     setConnecting(false);
   }