groove-dev 0.27.168 → 0.27.171

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

@@ -75,7 +75,10 @@ function TerminalInstance({ tabId, visible, registerKill, onSelectionChange }) {
       onSelectionChange?.(text || '');
     });
 
+    // ── Spawn logic ──────────────────────────────────────────────
     let spawnAttempts = 0;
+    let outputReady = false;
+
     function trySpawn() {
       spawnAttempts++;
       const ws = useGrooveStore.getState().ws;
@@ -85,7 +88,6 @@ function TerminalInstance({ tabId, visible, registerKill, onSelectionChange }) {
       }
 
       const requestId = `spawn-${++spawnSeq}`;
-      const initialCols = term.cols;
       ws.send(JSON.stringify({ type: 'terminal:spawn', cols: term.cols, rows: term.rows, requestId }));
 
       function onMessage(event) {
@@ -94,28 +96,31 @@ function TerminalInstance({ tabId, visible, registerKill, onSelectionChange }) {
 
         if (msg.type === 'terminal:spawned' && msg.requestId === requestId && !termIdRef.current) {
           termIdRef.current = msg.id;
+          // Give the shell time to start and the layout to fully settle,
+          // then correct dimensions, wipe any garbled output, and redraw.
           setTimeout(() => {
-            try { fitRef.current?.fit(); } catch {}
+            try { fitAddon.fit(); } catch {}
             const c = term.cols, r = term.rows;
             if (c > 1 && r > 1 && termIdRef.current) {
               const w = useGrooveStore.getState().ws;
               if (w?.readyState === WebSocket.OPEN) {
                 w.send(JSON.stringify({ type: 'terminal:resize', id: termIdRef.current, rows: r, cols: c }));
                 lastSizeRef.current = { cols: c, rows: r };
-                if (c !== initialCols) {
-                  setTimeout(() => {
-                    term.clear();
-                    if (w.readyState === WebSocket.OPEN && termIdRef.current) {
-                      w.send(JSON.stringify({ type: 'terminal:input', id: termIdRef.current, data: '\x0c' }));
-                    }
-                  }, 80);
-                }
               }
             }
-          }, 50);
+            // Wipe xterm so garbled output from wrong-sized PTY is never visible
+            term.reset();
+            outputReady = true;
+            // Ask the shell to clear screen and redraw its prompt
+            const w2 = useGrooveStore.getState().ws;
+            if (w2?.readyState === WebSocket.OPEN && termIdRef.current) {
+              w2.send(JSON.stringify({ type: 'terminal:input', id: termIdRef.current, data: '\x0c' }));
+            }
+          }, 300);
         } else if (msg.type === 'terminal:output' && msg.id === termIdRef.current) {
-          term.write(msg.data);
+          if (outputReady) term.write(msg.data);
         } else if (msg.type === 'terminal:exit' && msg.id === termIdRef.current) {
+          outputReady = true;
           term.write('\r\n\x1b[90m[session ended]\x1b[0m\r\n');
           termIdRef.current = null;
         }
@@ -131,59 +136,86 @@ function TerminalInstance({ tabId, visible, registerKill, onSelectionChange }) {
         }
       });
 
+      // Debounce resize messages so rapid drag doesn't flood
+      // the PTY with SIGWINCHs that cause staircase redraws
+      let resizeTimer = null;
       term.onResize(({ cols, rows }) => {
         if (cols === lastSizeRef.current.cols && rows === lastSizeRef.current.rows) return;
         if (cols < 2 || rows < 2) return;
-        const ws = useGrooveStore.getState().ws;
-        if (ws?.readyState === WebSocket.OPEN && termIdRef.current) {
-          lastSizeRef.current = { cols, rows };
-          ws.send(JSON.stringify({ type: 'terminal:resize', id: termIdRef.current, rows, cols }));
-        }
+        lastSizeRef.current = { cols, rows };
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+          const { cols: c, rows: r } = lastSizeRef.current;
+          const ws = useGrooveStore.getState().ws;
+          if (ws?.readyState === WebSocket.OPEN && termIdRef.current) {
+            ws.send(JSON.stringify({ type: 'terminal:resize', id: termIdRef.current, rows: r, cols: c }));
+          }
+        }, 150);
       });
     }
 
+    // ── Deferred spawn — wait for container to be visible & stable ──
     let hasSpawned = false;
+    let settleTimer = null;
+
     function tryInitSpawn() {
       if (hasSpawned) return;
-      if (term.cols >= 10 && term.rows >= 2) {
+      const el = containerRef.current;
+      // Container must have meaningful pixel dimensions (not hidden/mid-layout)
+      if (!el || el.offsetWidth < 200 || el.offsetHeight < 50) {
+        clearTimeout(settleTimer);
+        settleTimer = null;
+        return;
+      }
+      // Already waiting for settle
+      if (settleTimer) return;
+      // Wait 200ms for layout to fully stabilize before spawning
+      settleTimer = setTimeout(() => {
+        if (hasSpawned) return;
+        const el2 = containerRef.current;
+        if (!el2 || el2.offsetWidth < 200 || el2.offsetHeight < 50) {
+          settleTimer = null;
+          return;
+        }
         hasSpawned = true;
+        try { fitAddon.fit(); } catch {}
         trySpawn();
-      }
+      }, 200);
     }
 
-    requestAnimationFrame(() => {
-      try { fitAddon.fit(); } catch {}
-      requestAnimationFrame(() => {
-        try { fitAddon.fit(); } catch {}
-        tryInitSpawn();
-      });
-    });
+    requestAnimationFrame(tryInitSpawn);
 
-    const spawnFallback = setTimeout(() => {
+    // Absolute fallback — if observer never fires, spawn after 5s
+    const fallback = setTimeout(() => {
       if (!hasSpawned) {
-        try { fitAddon.fit(); } catch {}
         hasSpawned = true;
+        try { fitAddon.fit(); } catch {}
         trySpawn();
       }
-    }, 3000);
+    }, 5000);
 
     const observer = new ResizeObserver(() => {
       if (!visibleRef.current) return;
       requestAnimationFrame(() => {
-        try { fitAddon.fit(); } catch {}
-        tryInitSpawn();
+        if (!hasSpawned) {
+          tryInitSpawn();
+        } else {
+          try { fitAddon.fit(); } catch {}
+        }
       });
     });
     observer.observe(containerRef.current);
 
     return () => {
-      clearTimeout(spawnFallback);
+      clearTimeout(settleTimer);
+      clearTimeout(fallback);
       observer.disconnect();
       if (handlerRef.current) {
         handlerRef.current.ws.removeEventListener('message', handlerRef.current.handler);
       }
       term.dispose();
       fitRef.current = null;
+      termRef.current = null;
       mountedRef.current = false;
     };
   }, []);
@@ -193,16 +225,6 @@ function TerminalInstance({ tabId, visible, registerKill, onSelectionChange }) {
     if (visible && fitRef.current) {
       requestAnimationFrame(() => {
         try { fitRef.current.fit(); } catch {}
-        if (termRef.current && termIdRef.current) {
-          const c = termRef.current.cols, r = termRef.current.rows;
-          if (c > 1 && r > 1) {
-            const ws = useGrooveStore.getState().ws;
-            if (ws?.readyState === WebSocket.OPEN) {
-              ws.send(JSON.stringify({ type: 'terminal:resize', id: termIdRef.current, rows: r, cols: c }));
-              lastSizeRef.current = { cols: c, rows: r };
-            }
-          }
-        }
       });
     }
   }, [visible]);

package/node_modules/@groove-dev/gui/src/components/fleet/fleet-content.jsx

@@ -1,10 +1,21 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useCallback, useState } from 'react';
+import { useRef, useCallback, useState, useEffect } from 'react';
 import { LayoutList } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { FleetPane } from './fleet-pane';
+import { RecommendedTeamCard } from '../agents/recommended-team-card';
 
 export function FleetContent() {
+  const allAgents = useGrooveStore((s) => s.agents);
+  const checkRecommendedTeam = useGrooveStore((s) => s.checkRecommendedTeam);
+  const recommendedTeam = useGrooveStore((s) => s.recommendedTeam);
+
+  useEffect(() => {
+    const hasPlanner = allAgents.some((a) => a.role === 'planner' && (a.status === 'running' || a.status === 'starting'));
+    if (!hasPlanner) return;
+    const interval = setInterval(() => checkRecommendedTeam(), 5000);
+    return () => clearInterval(interval);
+  }, [allAgents, checkRecommendedTeam]);
   const rawSelected = useGrooveStore((s) => s.fleetSelectedAgents);
   const lastSelectedRef = useRef(rawSelected);
   if (rawSelected[0] || rawSelected[1]) lastSelectedRef.current = rawSelected;
@@ -67,7 +78,7 @@ export function FleetContent() {
   if (!selected[0] && !selected[1]) {
     return (
       <div
-        className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3"
+        className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 relative"
         onDragOver={(e) => handleDragOver(e, 'left')}
         onDragLeave={handleDragLeave}
         onDrop={(e) => handleDrop(e, 0)}
@@ -75,13 +86,15 @@ export function FleetContent() {
         <LayoutList size={32} strokeWidth={1} className="text-text-4" />
         <p className="text-sm font-sans">Select an agent or drag one here</p>
         <p className="text-xs font-sans text-text-4">Cmd+Click or drag to open side-by-side</p>
+        <RecommendedTeamCard />
       </div>
     );
   }
 
   if (!splitMode || !selected[1]) {
     return (
-      <div className="flex-1 flex min-w-0 min-h-0">
+      <div className="flex-1 flex min-w-0 min-h-0 relative">
+        <RecommendedTeamCard />
         <div className="flex-1 min-w-0 min-h-0">
           <FleetPane agentId={selected[0]} paneIndex={0} />
         </div>
@@ -107,7 +120,8 @@ export function FleetContent() {
   }
 
   return (
-    <div className="flex-1 flex min-w-0 min-h-0">
+    <div className="flex-1 flex min-w-0 min-h-0 relative">
+      <RecommendedTeamCard />
       <div
         ref={leftRef}
         className={`min-w-0 min-h-0 ${dropTarget === 'left' ? 'ring-2 ring-inset ring-accent/30' : ''}`}

package/node_modules/@groove-dev/gui/src/components/fleet/fleet-sidebar.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useRef, useCallback, useMemo, useState } from 'react';
-import { Search, X, ChevronRight, Plus, Trash2 } from 'lucide-react';
+import { Search, X, ChevronRight, Plus, Trash2, Pencil, Users, Check } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { FleetAgentRow } from './fleet-agent-row';
@@ -21,9 +21,16 @@ export function FleetSidebar({ width }) {
   const toggleCollapsed = useGrooveStore((s) => s.fleetToggleTeamCollapsed);
   const setSidebarWidth = useGrooveStore((s) => s.fleetSetSidebarWidth);
   const deleteTeam = useGrooveStore((s) => s.deleteTeam);
+  const createTeam = useGrooveStore((s) => s.createTeam);
+  const renameTeam = useGrooveStore((s) => s.renameTeam);
   const openDetail = useGrooveStore((s) => s.openDetail);
+  const addToast = useGrooveStore((s) => s.addToast);
 
   const [confirmDeleteTeam, setConfirmDeleteTeam] = useState(null);
+  const [renamingTeamId, setRenamingTeamId] = useState(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [creatingTeam, setCreatingTeam] = useState(false);
+  const [newTeamName, setNewTeamName] = useState('');
 
   const dragging = useRef(false);
   const startX = useRef(0);
@@ -99,6 +106,31 @@ export function FleetSidebar({ width }) {
     openDetail({ type: 'spawn', presetTeamId: teamId });
   }
 
+  async function handleCreateTeam() {
+    const name = newTeamName.trim();
+    if (!name) return;
+    try {
+      await createTeam(name);
+      setNewTeamName('');
+      setCreatingTeam(false);
+    } catch { /* toast handles */ }
+  }
+
+  async function handleRename(teamId) {
+    const name = renameValue.trim();
+    if (!name) { setRenamingTeamId(null); return; }
+    try {
+      await renameTeam(teamId, name);
+    } catch { /* toast handles */ }
+    setRenamingTeamId(null);
+  }
+
+  function startRename(e, team) {
+    e.stopPropagation();
+    setRenamingTeamId(team.id);
+    setRenameValue(team.name);
+  }
+
   return (
     <div
       className="flex-shrink-0 flex flex-col bg-surface-1 border-r border-border relative h-full"
@@ -141,49 +173,73 @@ export function FleetSidebar({ width }) {
                 'w-full flex items-center gap-1 px-2 py-1.5 rounded-md hover:bg-surface-2 transition-colors group',
                 isConfirming && 'bg-danger/10 hover:bg-danger/20',
               )}>
-                <button
-                  onClick={() => toggleCollapsed(team.id)}
-                  className="flex items-center gap-1.5 flex-1 min-w-0 cursor-pointer"
-                >
-                  <ChevronRight
-                    size={14}
-                    className={cn(
-                      'text-text-4 transition-transform flex-shrink-0',
-                      !isCollapsed && 'rotate-90',
-                    )}
-                  />
-                  <span className={cn(
-                    'text-xs font-medium font-sans truncate text-left',
-                    isConfirming ? 'text-danger' : 'text-text-1',
-                  )}>
-                    {isConfirming ? 'Click again to delete' : team.name}
-                  </span>
-                </button>
-
-                {/* Hover actions + meta — stacked in same space */}
-                <div className="flex items-center gap-0.5 flex-shrink-0">
-                  <button
-                    onClick={(e) => handleSpawnToTeam(e, team.id)}
-                    className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-text-4 hover:text-accent transition-opacity cursor-pointer"
-                    title="Spawn agent to team"
-                  >
-                    <Plus size={14} />
-                  </button>
-                  <button
-                    onClick={(e) => handleDeleteTeam(e, team.id)}
-                    className={cn(
-                      'opacity-0 group-hover:opacity-100 p-0.5 rounded transition-opacity cursor-pointer',
-                      isConfirming ? 'text-danger' : 'text-text-4 hover:text-danger',
-                    )}
-                    title="Delete team"
-                  >
-                    <Trash2 size={12} />
-                  </button>
-                  <span className="group-hover:opacity-0 text-2xs text-text-4 font-mono transition-opacity">
-                    {allTeamAgents.length}
-                  </span>
-                  <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0', teamStatusDot(allTeamAgents))} />
-                </div>
+                {renamingTeamId === team.id ? (
+                  <div className="flex items-center gap-1.5 flex-1 min-w-0 pl-1">
+                    <input
+                      value={renameValue}
+                      onChange={(e) => setRenameValue(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === 'Enter') handleRename(team.id); if (e.key === 'Escape') setRenamingTeamId(null); }}
+                      autoFocus
+                      className="flex-1 min-w-0 h-6 px-1.5 text-xs bg-surface-3 border border-accent/40 rounded text-text-0 font-sans focus:outline-none"
+                    />
+                    <button onClick={() => handleRename(team.id)} className="p-0.5 text-accent cursor-pointer"><Check size={12} /></button>
+                    <button onClick={() => setRenamingTeamId(null)} className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"><X size={12} /></button>
+                  </div>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => toggleCollapsed(team.id)}
+                      onDoubleClick={(e) => startRename(e, team)}
+                      className="flex items-center gap-1.5 flex-1 min-w-0 cursor-pointer"
+                    >
+                      <ChevronRight
+                        size={14}
+                        className={cn(
+                          'text-text-4 transition-transform flex-shrink-0',
+                          !isCollapsed && 'rotate-90',
+                        )}
+                      />
+                      <span className={cn(
+                        'text-xs font-medium font-sans truncate text-left',
+                        isConfirming ? 'text-danger' : 'text-text-1',
+                      )}>
+                        {isConfirming ? 'Click again to delete' : team.name}
+                      </span>
+                    </button>
+
+                    {/* Hover actions + meta — stacked in same space */}
+                    <div className="flex items-center gap-0.5 flex-shrink-0">
+                      <button
+                        onClick={(e) => startRename(e, team)}
+                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-text-4 hover:text-accent transition-opacity cursor-pointer"
+                        title="Rename team"
+                      >
+                        <Pencil size={11} />
+                      </button>
+                      <button
+                        onClick={(e) => handleSpawnToTeam(e, team.id)}
+                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-text-4 hover:text-accent transition-opacity cursor-pointer"
+                        title="Spawn agent to team"
+                      >
+                        <Plus size={14} />
+                      </button>
+                      <button
+                        onClick={(e) => handleDeleteTeam(e, team.id)}
+                        className={cn(
+                          'opacity-0 group-hover:opacity-100 p-0.5 rounded transition-opacity cursor-pointer',
+                          isConfirming ? 'text-danger' : 'text-text-4 hover:text-danger',
+                        )}
+                        title="Delete team"
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                      <span className="group-hover:opacity-0 text-2xs text-text-4 font-mono transition-opacity">
+                        {allTeamAgents.length}
+                      </span>
+                      <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0', teamStatusDot(allTeamAgents))} />
+                    </div>
+                  </>
+                )}
               </div>
 
               {/* Agent rows */}
@@ -206,6 +262,31 @@ export function FleetSidebar({ width }) {
         )}
       </div>
 
+      {/* Create team */}
+      <div className="px-2.5 py-2 border-t border-border-subtle flex-shrink-0">
+        {creatingTeam ? (
+          <div className="flex items-center gap-1.5">
+            <input
+              value={newTeamName}
+              onChange={(e) => setNewTeamName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleCreateTeam(); if (e.key === 'Escape') { setCreatingTeam(false); setNewTeamName(''); } }}
+              placeholder="Team name..."
+              autoFocus
+              className="flex-1 min-w-0 h-7 px-2 text-xs bg-surface-3 border border-accent/40 rounded text-text-0 font-sans placeholder:text-text-4 focus:outline-none"
+            />
+            <button onClick={handleCreateTeam} disabled={!newTeamName.trim()} className="p-1 text-accent cursor-pointer disabled:opacity-30"><Check size={13} /></button>
+            <button onClick={() => { setCreatingTeam(false); setNewTeamName(''); }} className="p-1 text-text-4 hover:text-text-1 cursor-pointer"><X size={13} /></button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setCreatingTeam(true)}
+            className="flex items-center gap-1.5 text-xs text-text-3 hover:text-accent font-sans font-medium cursor-pointer transition-colors"
+          >
+            <Users size={12} /> New Team
+          </button>
+        )}
+      </div>
+
       {/* Resize handle */}
       <div
         className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-accent/30 transition-colors z-10"

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

@@ -140,13 +140,13 @@ export function BreadcrumbBar({
   const [instanceName, setInstanceName] = useState(null);
 
   useEffect(() => {
-    if (window.groove?.getInstanceInfo) {
+    const urlParam = new URLSearchParams(window.location.search).get('instance');
+    if (urlParam) {
+      setInstanceName(urlParam);
+    } else if (window.groove?.getInstanceInfo) {
       window.groove.getInstanceInfo().then(info => {
         if (info?.name) setInstanceName(info.name);
       });
-    } else {
-      const param = new URLSearchParams(window.location.search).get('instance');
-      if (param) setInstanceName(param);
     }
   }, []);
 

package/node_modules/@groove-dev/gui/src/components/settings/quick-connect.jsx

@@ -17,12 +17,14 @@ export function QuickConnect() {
   const addToast = useGrooveStore((s) => s.addToast);
   const tunnelStep = useGrooveStore((s) => s.tunnelConnectStep);
   const [connectingId, setConnectingId] = useState(null);
+  const [openingServer, setOpeningServer] = useState(null);
   const [showWizard, setShowWizard] = useState(false);
   const wizardTunnelId = useRef(null);
 
   useEffect(() => {
     if (open) {
       setShowWizard(false);
+      setOpeningServer(null);
       useGrooveStore.getState().fetchTunnels();
     }
   }, [open]);
@@ -34,14 +36,15 @@ export function QuickConnect() {
     try {
       await useGrooveStore.getState().connectTunnel(id);
       const tunnel = savedTunnels.find((t) => t.id === id);
+      setConnectingId(null);
+      setOpeningServer({ name: tunnel?.name || 'Remote' });
       if (tunnel?.host) {
         addToast('info', `Add ${tunnel.host} to Federation Whitelist?`, '', {
           label: 'Add',
           onClick: () => useGrooveStore.getState().addToWhitelist(tunnel.host),
         });
       }
-      setConnectingId(null);
-      toggle();
+      setTimeout(() => { setOpeningServer(null); toggle(); }, 4000);
       return;
     } catch (err) {
       const detail = err?.message || 'Unknown error';
@@ -90,32 +93,55 @@ export function QuickConnect() {
           exit={{ opacity: 0, y: -10, scale: 0.98 }}
           transition={{ duration: 0.15 }}
           className={cn(
-            'fixed top-[15%] left-1/2 -translate-x-1/2 z-50 bg-surface-1 border border-border rounded-lg shadow-2xl overflow-hidden',
-            showWizard ? 'w-[520px]' : 'w-[400px]',
+            'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-[#24282f] border border-[#2c313a] rounded-lg shadow-2xl overflow-hidden',
+            showWizard ? 'w-[680px]' : 'w-[480px]',
           )}
         >
           {/* Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
-            <div className="flex items-center gap-2">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-[#2c313a]">
+            <div className="flex items-center gap-3">
               {showWizard && (
                 <button
                   onClick={() => setShowWizard(false)}
-                  className="p-1 -ml-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors"
+                  className="p-1.5 -ml-1 text-[#6e7681] hover:text-[#e6e8ed] cursor-pointer transition-colors"
                 >
-                  <ArrowLeft size={14} />
+                  <ArrowLeft size={16} />
                 </button>
               )}
-              <Radio size={15} className="text-accent" />
-              <span className="text-sm font-semibold text-text-0 font-sans">
+              <Radio size={17} className="text-[#33afbc]" />
+              <span className="text-base font-semibold text-[#e6e8ed]" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif", letterSpacing: '-0.2px' }}>
                 {showWizard ? (wizardTunnelId.current ? 'Connection Setup' : 'Add Connection') : 'Quick Connect'}
               </span>
             </div>
-            <button onClick={handleClose} className="p-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors">
-              <X size={14} />
+            <button onClick={handleClose} className="p-1.5 text-[#6e7681] hover:text-[#e6e8ed] cursor-pointer transition-colors">
+              <X size={16} />
             </button>
           </div>
 
-          {showWizard ? (
+          {openingServer ? (
+            <div className="px-6 py-12 text-center">
+              <div className="relative w-14 h-14 mx-auto mb-5">
+                <span className="absolute inset-0 rounded-full border-2 border-[#33afbc]/20 animate-ping" style={{ animationDuration: '2s' }} />
+                <span className="absolute inset-0 rounded-full border-2 border-transparent border-t-[#33afbc] animate-spin" style={{ animationDuration: '1s' }} />
+                <span className="absolute inset-[6px] rounded-full bg-[#33afbc]/8 flex items-center justify-center">
+                  <Server size={18} className="text-[#33afbc]" />
+                </span>
+              </div>
+              <p className="text-base font-semibold text-[#e6e8ed] mb-1.5" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>
+                Opening {openingServer.name}
+              </p>
+              <p className="text-sm text-[#6e7681]" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>
+                Loading remote dashboard...
+              </p>
+              <button
+                onClick={() => { setOpeningServer(null); toggle(); }}
+                className="mt-6 text-xs text-[#6e7681] hover:text-[#e6e8ed] cursor-pointer transition-colors"
+                style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}
+              >
+                Dismiss
+              </button>
+            </div>
+          ) : showWizard ? (
             <SSHWizard
               server={wizardTunnelId.current ? savedTunnels.find((t) => t.id === wizardTunnelId.current) || null : null}
               onSave={async (data) => {
@@ -145,45 +171,49 @@ export function QuickConnect() {
           ) : (
             <>
               {/* Server list */}
-              <div className="overflow-y-auto max-h-[320px] py-1">
+              <div className="overflow-y-auto max-h-[400px] py-2">
                 {savedTunnels.length === 0 ? (
-                  <div className="px-4 py-8 text-center">
-                    <Server size={24} className="text-text-4 mx-auto mb-2" />
-                    <p className="text-sm text-text-3 font-sans">No saved servers</p>
-                    <p className="text-2xs text-text-4 font-sans mt-1">Add a connection to get started.</p>
-                    <Button
-                      variant="primary"
-                      size="sm"
+                  <div className="px-6 py-10 text-center">
+                    <Server size={32} className="text-[#6e7681] mx-auto mb-3" />
+                    <p className="text-base font-semibold text-[#e6e8ed]" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>No saved servers</p>
+                    <p className="text-xs text-[#6e7681] mt-1.5" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>Add a connection to get started.</p>
+                    <button
                       onClick={() => { wizardTunnelId.current = null; setShowWizard(true); }}
-                      className="h-8 text-xs gap-1.5 mt-3"
+                      className="inline-flex items-center gap-1.5 h-9 px-5 mt-4 rounded bg-[#33afbc] text-[#0a0c10] text-sm font-semibold cursor-pointer transition-opacity hover:opacity-90"
+                      style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}
                     >
-                      <Plus size={12} /> Add Connection
-                    </Button>
+                      <Plus size={14} /> Add Connection
+                    </button>
                   </div>
                 ) : (
                   savedTunnels.map((server) => (
                     <div
                       key={server.id}
                       className={cn(
-                        'w-full flex items-center gap-3 px-4 py-2.5 transition-colors',
-                        'hover:bg-surface-5',
+                        'w-full flex items-center gap-4 px-5 py-3.5 transition-colors',
+                        'hover:bg-[#2c313a]',
                         connectingId === server.id && 'opacity-60 pointer-events-none',
                       )}
                     >
-                      <Server size={15} className={server.active ? 'text-success' : 'text-text-4'} />
+                      <div className={cn(
+                        'w-10 h-10 rounded flex items-center justify-center flex-shrink-0',
+                        server.active ? 'bg-[#33afbc]/10' : 'bg-[rgba(255,255,255,0.04)]',
+                      )}>
+                        <Server size={18} className={server.active ? 'text-[#33afbc]' : 'text-[#8b95a5]'} />
+                      </div>
                       <button
                         onClick={() => server.active ? handleOpenRemote(server) : handleConnect(server.id)}
                         disabled={connectingId === server.id}
                         className="flex-1 min-w-0 text-left cursor-pointer"
                       >
                         <div className="flex items-center gap-2">
-                          <span className="text-sm font-medium text-text-0 font-sans truncate">{server.name}</span>
+                          <span className="text-sm font-semibold text-[#e6e8ed] truncate" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif", letterSpacing: '-0.2px' }}>{server.name}</span>
                           {server.active && <StatusDot status="running" size="sm" />}
                           {server.remoteVersion && (
-                            <span className="text-2xs font-mono text-text-4 ml-1">v{server.remoteVersion}</span>
+                            <span className="text-xs text-[#6e7681] ml-1" style={{ fontFamily: "ui-monospace, 'SF Mono', Monaco, monospace" }}>v{server.remoteVersion}</span>
                           )}
                         </div>
-                        <span className="text-2xs text-text-4 font-mono">{server.user}@{server.host}</span>
+                        <span className="text-xs text-[#6e7681]" style={{ fontFamily: "ui-monospace, 'SF Mono', Monaco, monospace" }}>{server.user}@{server.host}</span>
                       </button>
                       <div className="flex items-center gap-1.5 flex-shrink-0">
                         {connectingId === server.id ? (
@@ -267,12 +297,13 @@ export function QuickConnect() {
               </div>
 
               {/* Footer with Add button */}
-              <div className="px-4 py-2.5 border-t border-border-subtle">
+              <div className="px-5 py-3.5 border-t border-[#2c313a]">
                 <button
                   onClick={() => { wizardTunnelId.current = null; setShowWizard(true); }}
-                  className="flex items-center gap-1.5 text-2xs text-accent hover:text-accent/80 font-sans font-medium cursor-pointer transition-colors"
+                  className="flex items-center gap-2 text-sm text-[#33afbc] hover:opacity-80 font-semibold cursor-pointer transition-opacity"
+                  style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}
                 >
-                  <Plus size={10} /> Add new connection
+                  <Plus size={14} /> Add new connection
                 </button>
               </div>
             </>