groove-dev 0.27.140 → 0.27.142

package/node_modules/@groove-dev/gui/src/views/models.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
@@ -9,12 +9,11 @@ import { useGrooveStore } from '../stores/groove';
 import {
   Search, Download, Trash2, HardDrive, Cpu, MemoryStick,
   Check, Loader2, Box, ChevronDown, ChevronRight,
-  RefreshCw, Play, Square, Zap, AlertCircle, Monitor, Rocket,
+  RefreshCw, Play, Square, Rocket, MoreHorizontal,
+  Sparkles, FlaskConical, ExternalLink,
 } from 'lucide-react';
 import { cn } from '../lib/cn';
 
-const TIER_COLORS = { light: 'text-green-400', medium: 'text-blue-400', heavy: 'text-orange-400' };
-
 function formatBytes(bytes) {
   if (!bytes) return '—';
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
@@ -28,338 +27,211 @@ function formatSpeed(bytesPerSec) {
   return `${(bytesPerSec / (1024 * 1024)).toFixed(1)} MB/s`;
 }
 
-// ---- Server Status Bar ----
-function ServerStatusBar({ serverRunning, installed, onStart, onStop, onRestart, actionInProgress }) {
-  if (!installed) {
-    return (
-      <div className="flex items-center gap-2 bg-surface-1 border border-border-subtle rounded-lg px-3 py-2">
-        <span className="w-[6px] h-[6px] rounded-full bg-text-4 flex-shrink-0" />
-        <span className="text-xs font-sans text-text-3 font-medium">Ollama Not Installed</span>
-        <div className="flex-1" />
-        <a
-          href="https://ollama.ai/download"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-2xs font-sans text-accent hover:underline"
-        >
-          Install Ollama
-        </a>
-      </div>
-    );
-  }
+const FILTERS = [
+  { id: 'all', label: 'All' },
+  { id: 'running', label: 'Running' },
+  { id: 'ready', label: 'Ready' },
+  { id: 'downloaded', label: 'Downloaded' },
+];
+
+const STATUS_CONFIG = {
+  running:     { label: 'Running',     variant: 'success', dot: 'pulse' },
+  ready:       { label: 'Ready',       variant: 'info',    dot: true },
+  downloaded:  { label: 'Downloaded',  variant: 'purple',  dot: true },
+  downloading: { label: 'Downloading', variant: 'accent',  dot: 'pulse' },
+};
+
+// ── Unified Model Card ──────────────────────────────────────────
+
+function UnifiedModelCard({
+  model, serverRunning,
+  onStart, onStop, onSpawn, onDelete, onImport,
+  isLoading, isUnloading, isDeleting, isImporting,
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
 
-  if (serverRunning) {
-    return (
-      <div className="flex items-center gap-2 bg-success/8 border border-success/20 rounded-lg px-3 py-2">
-        <span className="relative flex-shrink-0 w-[6px] h-[6px]">
-          <span className="absolute inset-0 rounded-full bg-success" />
-          <span className="absolute inset-[-2px] rounded-full bg-success opacity-20 animate-pulse" />
-        </span>
-        <span className="text-xs font-sans text-success font-semibold">Server Running</span>
-        <span className="text-2xs font-mono text-text-4">:11434</span>
-        <div className="flex-1" />
-        <button
-          onClick={onRestart}
-          disabled={!!actionInProgress}
-          className="flex items-center gap-1 text-2xs font-sans text-text-3 hover:text-accent cursor-pointer transition-colors disabled:opacity-40"
-        >
-          <RefreshCw size={10} className={actionInProgress === 'restarting' ? 'animate-spin' : ''} />
-          {actionInProgress === 'restarting' ? 'Restarting...' : 'Restart'}
-        </button>
-        <button
-          onClick={onStop}
-          disabled={!!actionInProgress}
-          className="flex items-center gap-1 text-2xs font-sans text-text-3 hover:text-danger cursor-pointer transition-colors disabled:opacity-40"
-        >
-          <Square size={10} />
-          {actionInProgress === 'stopping' ? 'Stopping...' : 'Stop'}
-        </button>
-      </div>
-    );
-  }
+  useEffect(() => {
+    if (!menuOpen) return;
+    const close = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [menuOpen]);
 
-  return (
-    <div className="flex items-center gap-2 bg-danger/8 border border-danger/20 rounded-lg px-3 py-2">
-      <span className="w-[6px] h-[6px] rounded-full bg-danger flex-shrink-0" />
-      <span className="text-xs font-sans text-danger font-semibold">Server Stopped</span>
-      <span className="text-2xs font-mono text-text-4">:11434</span>
-      <div className="flex-1" />
-      <Button
-        variant="primary"
-        size="sm"
-        onClick={onStart}
-        disabled={!!actionInProgress}
-        className="h-6 px-2.5 text-2xs gap-1"
-      >
-        <Play size={10} />
-        {actionInProgress === 'starting' ? 'Starting...' : 'Start Server'}
-      </Button>
-    </div>
-  );
-}
+  const status = STATUS_CONFIG[model.status] || STATUS_CONFIG.ready;
 
-// ---- Hardware Info ----
-function HardwareBar({ hardware }) {
-  if (!hardware) return null;
   return (
-    <div className="flex items-center gap-4 px-3 py-2 bg-surface-1 border border-border-subtle rounded-lg text-xs font-sans text-text-2">
-      <div className="flex items-center gap-1.5">
-        <MemoryStick size={14} className="text-text-3" />
-        <span>{hardware.totalRamGb} GB RAM</span>
-      </div>
-      <div className="flex items-center gap-1.5">
-        <Cpu size={14} className="text-text-3" />
-        <span>{hardware.cores} cores</span>
-      </div>
-      {hardware.gpu && (
-        <div className="flex items-center gap-1.5">
-          <HardDrive size={14} className="text-text-3" />
-          <span>{hardware.gpu.name}{hardware.gpu.vram ? ` (${hardware.gpu.vram} GB)` : ''}</span>
+    <div className={cn(
+      'group rounded-xl border p-4 transition-all',
+      model.status === 'running'
+        ? 'bg-success/5 border-success/20 hover:border-success/40'
+        : 'bg-surface-1 border-border-subtle hover:border-accent/30',
+    )}>
+      {/* Header: name + badges + menu */}
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="min-w-0 flex-1">
+          <span className="text-sm font-mono font-bold text-text-0 truncate block">{model.name}</span>
+          <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+            <Badge variant={model.source === 'ollama' ? 'info' : 'purple'} className="text-2xs">
+              {model.source === 'ollama' ? 'Ollama' : 'GGUF'}
+            </Badge>
+            <Badge variant={status.variant} dot={status.dot} className="text-2xs">
+              {status.label}
+            </Badge>
+            {model.isInLab && (
+              <Badge variant="accent" className="text-2xs gap-0.5">
+                <FlaskConical size={8} /> Lab
+              </Badge>
+            )}
+          </div>
         </div>
-      )}
-      {hardware.isAppleSilicon && (
-        <Badge variant="accent" className="text-2xs ml-auto">Unified Memory</Badge>
-      )}
-    </div>
-  );
-}
 
-// ---- Running Model Card ----
-function RunningModelCard({ model, onUnload, onSpawn, unloading }) {
-  const sizeGb = model.size ? (model.size / (1024 ** 3)).toFixed(1) : '?';
-  const vramGb = model.vram ? (model.vram / (1024 ** 3)).toFixed(1) : sizeGb;
+        {model.status !== 'downloading' && (
+          <div ref={menuRef} className="relative flex-shrink-0">
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="p-1.5 rounded-md text-text-4 hover:text-text-2 hover:bg-surface-3 transition-colors cursor-pointer"
+            >
+              <MoreHorizontal size={14} />
+            </button>
+            {menuOpen && (
+              <div className="absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-surface-3 border border-border rounded-lg shadow-lg py-1">
+                {model.source === 'gguf' && (
+                  <button
+                    onClick={() => { onImport(model.id); setMenuOpen(false); }}
+                    disabled={isImporting}
+                    className="w-full text-left px-3 py-1.5 text-xs font-sans text-text-1 hover:bg-surface-4 transition-colors cursor-pointer flex items-center gap-2 disabled:opacity-40"
+                  >
+                    <Rocket size={12} /> Import to Ollama
+                  </button>
+                )}
+                <button
+                  onClick={() => { onDelete(model); setMenuOpen(false); }}
+                  disabled={isDeleting}
+                  className="w-full text-left px-3 py-1.5 text-xs font-sans text-danger hover:bg-danger/10 transition-colors cursor-pointer flex items-center gap-2 disabled:opacity-40"
+                >
+                  <Trash2 size={12} /> Delete
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
 
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 bg-success/5 border border-success/20 rounded-lg">
-      <span className="relative flex-shrink-0 w-2 h-2">
-        <span className="absolute inset-0 rounded-full bg-success" />
-        <span className="absolute inset-[-2px] rounded-full bg-success opacity-20 animate-pulse" />
-      </span>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-mono font-bold text-text-0 truncate">{model.name}</span>
-          <Badge variant="success" className="text-2xs">Running</Badge>
-        </div>
-        <div className="text-2xs text-text-3 font-sans mt-0.5">
-          {vramGb} GB VRAM &middot; loaded in memory
-        </div>
+      {/* Specs */}
+      <div className="text-2xs text-text-3 font-sans mb-3 flex items-center gap-1.5 flex-wrap">
+        {model.parameters && <span>{model.parameters}</span>}
+        {model.parameters && model.quantization && <span className="text-text-4">&middot;</span>}
+        {model.quantization && <span>{model.quantization}</span>}
+        {(model.parameters || model.quantization) && model.size && model.size !== '—' && (
+          <span className="text-text-4">&middot;</span>
+        )}
+        {model.size && model.size !== '—' && <span>{model.size}</span>}
+        {model.vramGb && (
+          <>
+            <span className="text-text-4">&middot;</span>
+            <span className="text-green-400">{model.vramGb} GB VRAM</span>
+          </>
+        )}
+        {model.repoId && (
+          <>
+            <span className="text-text-4">&middot;</span>
+            <span className="truncate max-w-[140px]">{model.repoId}</span>
+          </>
+        )}
       </div>
-      <button
-        onClick={() => onSpawn(model.name)}
-        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer"
-      >
-        <Rocket size={11} />
-        Spawn Agent
-      </button>
-      <button
-        onClick={() => onUnload(model.name)}
-        disabled={unloading === model.name}
-        className="p-1.5 rounded-md text-text-4 hover:text-warning hover:bg-warning/10 transition-colors cursor-pointer disabled:opacity-40"
-        title="Unload from memory"
-      >
-        {unloading === model.name ? <Loader2 size={14} className="animate-spin" /> : <Square size={14} />}
-      </button>
-    </div>
-  );
-}
 
-// ---- Installed Model Card ----
-function InstalledModelCard({ model, catalogEntry, isRunning, onStart, onSpawn, onDelete, loading, deleting, serverRunning }) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 bg-surface-1 border border-border-subtle rounded-lg">
-      <Box size={18} className={cn('flex-shrink-0', isRunning ? 'text-success' : 'text-accent')} />
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-mono font-bold text-text-0 truncate">{model.id}</span>
-          {model.tier && (
-            <span className={cn('text-2xs font-semibold capitalize', TIER_COLORS[model.tier] || 'text-text-3')}>
-              {model.tier}
-            </span>
-          )}
-          {model.category && model.category !== 'other' && (
-            <Badge variant="subtle" className="text-2xs">{model.category}</Badge>
-          )}
-          {isRunning && <Badge variant="success" className="text-2xs">Running</Badge>}
+      {/* Download progress inline */}
+      {model.status === 'downloading' && model.download && (
+        <div className="mb-3 space-y-1">
+          <div className="flex items-center justify-between text-2xs font-sans text-text-3">
+            <span className="truncate">{model.download.filename}</span>
+            <span>{Math.round((model.download.percent || 0) * 100)}% {formatSpeed(model.download.speed)}</span>
+          </div>
+          <div className="h-1.5 bg-surface-3 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-accent rounded-full transition-all"
+              style={{ width: `${Math.round((model.download.percent || 0) * 100)}%` }}
+            />
+          </div>
+          <div className="text-2xs text-text-4">
+            {formatBytes(model.download.downloaded)} / {formatBytes(model.download.totalBytes)}
+          </div>
         </div>
-        <div className="text-2xs text-text-3 font-sans mt-0.5">
-          {model.size || '—'}
-          {catalogEntry?.ramGb && <> &middot; ~{catalogEntry.ramGb} GB RAM needed</>}
-          {catalogEntry?.description && <> &middot; {catalogEntry.description}</>}
+      )}
+      {model.status === 'downloading' && model.pullProgress && (
+        <div className="mb-3">
+          <div className="flex items-center gap-2">
+            <Loader2 size={12} className="animate-spin text-accent flex-shrink-0" />
+            <span className="text-2xs text-text-3 font-sans truncate">
+              {model.pullProgress.progress || 'Pulling...'}
+            </span>
+          </div>
+          <div className="mt-1.5 h-1.5 bg-surface-3 rounded-full overflow-hidden">
+            <div className="h-full bg-accent rounded-full animate-pulse w-full" />
+          </div>
         </div>
-      </div>
-      <div className="flex items-center gap-1">
-        {!isRunning && serverRunning && (
+      )}
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-2 mt-auto">
+        {model.status === 'running' && (
+          <>
+            <button
+              onClick={() => onStop(model.name)}
+              disabled={isUnloading}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium text-text-2 hover:text-warning hover:bg-warning/10 transition-colors cursor-pointer disabled:opacity-40"
+            >
+              {isUnloading ? <Loader2 size={11} className="animate-spin" /> : <Square size={11} />}
+              Stop
+            </button>
+            <button
+              onClick={() => onSpawn(model.name)}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer"
+            >
+              <Rocket size={11} /> Spawn Agent
+            </button>
+          </>
+        )}
+        {model.status === 'ready' && (
+          <>
+            {serverRunning && (
+              <button
+                onClick={() => onStart(model.id)}
+                disabled={isLoading}
+                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium text-text-2 hover:text-success hover:bg-success/10 transition-colors cursor-pointer disabled:opacity-40"
+              >
+                {isLoading ? <Loader2 size={11} className="animate-spin" /> : <Play size={11} />}
+                Run
+              </button>
+            )}
+            <button
+              onClick={() => onSpawn(model.id)}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer"
+            >
+              <Rocket size={11} /> Spawn Agent
+            </button>
+          </>
+        )}
+        {model.status === 'downloaded' && (
           <button
-            onClick={() => onStart(model.id)}
-            disabled={!!loading}
-            className="flex items-center gap-1 px-2 py-1.5 rounded-md text-2xs font-sans font-medium text-text-2 hover:text-success hover:bg-success/10 transition-colors cursor-pointer disabled:opacity-40"
-            title="Load into memory"
+            onClick={() => onImport(model.id)}
+            disabled={isImporting}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer disabled:opacity-40"
           >
-            {loading === model.id ? <Loader2 size={11} className="animate-spin" /> : <Play size={11} />}
-            Start
+            {isImporting ? <Loader2 size={11} className="animate-spin" /> : <Rocket size={11} />}
+            {isImporting ? 'Importing...' : 'Launch'}
           </button>
         )}
-        <button
-          onClick={() => onSpawn(model.id)}
-          className="flex items-center gap-1 px-2 py-1.5 rounded-md text-2xs font-sans font-medium text-accent hover:bg-accent/10 transition-colors cursor-pointer"
-          title="Spawn an agent with this model"
-        >
-          <Rocket size={11} />
-          Spawn
-        </button>
-        <button
-          onClick={() => onDelete(model.id)}
-          disabled={deleting === model.id}
-          className="p-1.5 rounded-md text-text-4 hover:text-red-400 hover:bg-red-400/10 transition-colors cursor-pointer disabled:opacity-40"
-          title="Delete model"
-        >
-          {deleting === model.id ? <Loader2 size={13} className="animate-spin" /> : <Trash2 size={13} />}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ---- Downloaded GGUF Model Card ----
-function GgufModelCard({ model, onImport, onDelete, importing, deleting }) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 bg-surface-1 border border-border-subtle rounded-lg">
-      <Box size={18} className="flex-shrink-0 text-purple-400" />
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-mono font-bold text-text-0 truncate">{model.id}</span>
-          {model.quantization && (
-            <Badge variant="subtle" className="text-2xs">{model.quantization}</Badge>
-          )}
-          {model.parameters && (
-            <span className="text-2xs font-semibold text-blue-400">{model.parameters}</span>
-          )}
-          <Badge variant="accent" className="text-2xs">GGUF</Badge>
-        </div>
-        <div className="text-2xs text-text-3 font-sans mt-0.5">
-          {model.sizeBytes ? formatBytes(model.sizeBytes) : '—'}
-          {model.repoId && <> &middot; {model.repoId}</>}
-          {model.contextWindow && <> &middot; {(model.contextWindow / 1024).toFixed(0)}K context</>}
-        </div>
-      </div>
-      <div className="flex items-center gap-1">
-        <button
-          onClick={() => onImport(model.id)}
-          disabled={importing === model.id || deleting === model.id}
-          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-2xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer disabled:opacity-40"
-          title="Import into Ollama so you can use it to spawn agents"
-        >
-          {importing === model.id ? <Loader2 size={11} className="animate-spin" /> : <Rocket size={11} />}
-          {importing === model.id ? 'Importing...' : 'Import to Ollama'}
-        </button>
-        <button
-          onClick={() => onDelete(model.id)}
-          disabled={deleting === model.id || importing === model.id}
-          className="p-1.5 rounded-md text-text-4 hover:text-red-400 hover:bg-red-400/10 transition-colors cursor-pointer disabled:opacity-40"
-          title="Delete model file"
-        >
-          {deleting === model.id ? <Loader2 size={13} className="animate-spin" /> : <Trash2 size={13} />}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ---- Download Progress Bar ----
-function DownloadProgress({ download }) {
-  const pct = Math.round((download.percent || 0) * 100);
-  return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between text-2xs font-sans text-text-3">
-        <span>{download.filename}</span>
-        <span>{pct}% {formatSpeed(download.speed)}</span>
-      </div>
-      <div className="h-1.5 bg-surface-3 rounded-full overflow-hidden">
-        <div className="h-full bg-accent rounded-full transition-all" style={{ width: `${pct}%` }} />
-      </div>
-      <div className="text-2xs text-text-4">
-        {formatBytes(download.downloaded)} / {formatBytes(download.totalBytes)}
-      </div>
-    </div>
-  );
-}
-
-// ---- Pull Progress (Ollama) ----
-function PullProgress({ modelId, progress }) {
-  return (
-    <div className="flex items-center gap-2 px-4 py-2 bg-accent/5 border border-accent/20 rounded-lg">
-      <Loader2 size={14} className="animate-spin text-accent flex-shrink-0" />
-      <div className="flex-1 min-w-0">
-        <span className="text-xs font-mono text-text-0">{modelId}</span>
-        <div className="text-2xs text-text-3 font-sans truncate">{progress.progress || 'Pulling...'}</div>
       </div>
     </div>
   );
 }
 
-// ---- Recommended Model Card ----
-function RecommendedModel({ model, systemRamGb, onPull, pulling, isInstalled }) {
-  const categoryIcons = { code: '{}', general: 'AI' };
-  const headroom = systemRamGb ? Math.round((1 - model.ramGb / systemRamGb) * 100) : null;
+// ── File Picker (quantization variants for HuggingFace results) ──
 
-  return (
-    <div className={cn(
-      'flex items-center gap-3 px-4 py-3 border rounded-lg transition-colors',
-      isInstalled ? 'bg-success/5 border-success/20' : 'bg-surface-1 border-border-subtle hover:border-accent/20',
-    )}>
-      <div className="w-9 h-9 rounded-lg bg-surface-3 flex items-center justify-center text-xs font-mono text-text-2 flex-shrink-0">
-        {categoryIcons[model.category] || 'AI'}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-mono font-bold text-text-0 truncate">{model.name}</span>
-          <span className={cn('text-2xs font-semibold capitalize', TIER_COLORS[model.tier])}>{model.tier}</span>
-          {isInstalled && <Badge variant="success" className="text-2xs gap-1"><Check size={8} /> Installed</Badge>}
-        </div>
-        <div className="text-2xs text-text-3 font-sans mt-0.5">{model.description}</div>
-        <div className="flex items-center gap-3 mt-1 text-2xs font-sans">
-          <span className="text-text-2">{model.sizeGb} GB download</span>
-          <span className="text-green-400 font-medium">{model.ramGb} GB RAM</span>
-          {headroom !== null && <span className="text-text-4">{headroom}% headroom</span>}
-        </div>
-      </div>
-      {isInstalled ? (
-        <span className="text-xs text-success font-sans font-medium px-3 py-1.5">Ready</span>
-      ) : (
-        <button
-          onClick={() => onPull(model.id)}
-          disabled={pulling === model.id}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer disabled:opacity-40"
-        >
-          {pulling === model.id ? <Loader2 size={12} className="animate-spin" /> : <Download size={12} />}
-          Pull
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ---- Search Result Card (HuggingFace) ----
-function SearchResult({ result, onExpand, expanded }) {
-  return (
-    <button
-      onClick={() => onExpand(expanded ? null : result.id)}
-      className="w-full text-left px-4 py-3 bg-surface-1 border border-border-subtle rounded-lg hover:border-accent/30 transition-colors cursor-pointer"
-    >
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-mono font-bold text-text-0 truncate flex-1">{result.name}</span>
-        <span className="text-2xs text-text-4 font-sans">{result.author}</span>
-        {expanded ? <ChevronDown size={14} className="text-text-3" /> : <ChevronRight size={14} className="text-text-3" />}
-      </div>
-      <div className="text-2xs text-text-3 font-sans mt-0.5 flex gap-3">
-        <span>{result.downloads?.toLocaleString()} downloads</span>
-        <span>{result.likes} likes</span>
-      </div>
-    </button>
-  );
-}
-
-// ---- File Picker (quantization variants) ----
 function FilePicker({ repoId, onDownload, systemRamGb }) {
   const [files, setFiles] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -389,7 +261,6 @@ function FilePicker({ repoId, onDownload, systemRamGb }) {
   if (loading) {
     return <div className="py-3 px-4 text-2xs text-text-4 font-sans">Loading quantization variants...</div>;
   }
-
   if (!files?.length) {
     return <div className="py-3 px-4 text-2xs text-text-4 font-sans">No GGUF files found in this repo.</div>;
   }
@@ -405,7 +276,7 @@ function FilePicker({ repoId, onDownload, systemRamGb }) {
             canRun ? 'bg-surface-2' : 'bg-red-500/5 border border-red-500/15',
           )}>
             <span className="font-mono text-text-1 truncate flex-1">{f.filename}</span>
-            {f.quantization && <Badge variant="subtle" className="text-2xs">{f.quantization}</Badge>}
+            {f.quantization && <Badge variant="default" className="text-2xs">{f.quantization}</Badge>}
             <span className="text-text-2 text-2xs w-16 text-right">{formatBytes(f.size)}</span>
             {f.estimatedRamGb && (
               <span className={cn(
@@ -420,7 +291,7 @@ function FilePicker({ repoId, onDownload, systemRamGb }) {
               onClick={() => handleDownload(f)}
               disabled={downloading === f.filename || !canRun}
               className={cn(
-                'p-1 rounded transition-colors',
+                'p-1 rounded transition-colors cursor-pointer',
                 canRun ? 'text-accent hover:bg-accent/10' : 'text-text-4 cursor-not-allowed',
                 'disabled:opacity-40',
               )}
@@ -434,22 +305,9 @@ function FilePicker({ repoId, onDownload, systemRamGb }) {
   );
 }
 
-// ---- Section Header ----
-function SectionHeader({ title, count, icon: Icon }) {
-  return (
-    <div className="flex items-center gap-2 mb-2">
-      {Icon && <Icon size={14} className="text-text-3" />}
-      <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">{title}</span>
-      {count !== undefined && (
-        <Badge variant="subtle" className="text-2xs">{count}</Badge>
-      )}
-    </div>
-  );
-}
+// ── Main View ────────────────────────────────────────────────────
 
-// ---- Main View ----
 export default function ModelsView() {
-  const [discoveryTab, setDiscoveryTab] = useState('recommended');
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState([]);
   const [searching, setSearching] = useState(false);
@@ -463,13 +321,19 @@ export default function ModelsView() {
   const [ggufModels, setGgufModels] = useState([]);
   const [deletingGguf, setDeletingGguf] = useState(null);
   const [importingGguf, setImportingGguf] = useState(null);
+  const [filter, setFilter] = useState('all');
+  const [discoveryOpen, setDiscoveryOpen] = useState(true);
+  const [discoveryTab, setDiscoveryTab] = useState('recommended');
   const toast = useToast();
+  const searchInputRef = useRef(null);
+  const discoveryRef = useRef(null);
 
   const ollamaStatus = useGrooveStore((s) => s.ollamaStatus);
   const installedModels = useGrooveStore((s) => s.ollamaInstalledModels);
   const runningModels = useGrooveStore((s) => s.ollamaRunningModels);
   const catalog = useGrooveStore((s) => s.ollamaCatalog);
   const pullProgress = useGrooveStore((s) => s.ollamaPullProgress);
+  const labActiveModel = useGrooveStore((s) => s.labActiveModel);
   const fetchOllamaStatus = useGrooveStore((s) => s.fetchOllamaStatus);
   const startServer = useGrooveStore((s) => s.startOllamaServer);
   const stopServer = useGrooveStore((s) => s.stopOllamaServer);
@@ -482,14 +346,14 @@ export default function ModelsView() {
 
   const pollingRef = useRef(null);
 
-  // Fetch status on mount and poll every 10s
+  // Poll Ollama status
   useEffect(() => {
     fetchOllamaStatus();
     pollingRef.current = setInterval(fetchOllamaStatus, 10000);
     return () => clearInterval(pollingRef.current);
   }, [fetchOllamaStatus]);
 
-  // Fetch recommended models and GGUF downloads
+  // Fetch recommended + GGUF on mount
   useEffect(() => {
     api.get('/models/recommended').then((data) => {
       setRecommended(data.models || []);
@@ -499,7 +363,7 @@ export default function ModelsView() {
     }).catch(() => {});
   }, []);
 
-  // Poll active GGUF downloads
+  // Poll active downloads
   useEffect(() => {
     const poll = setInterval(() => {
       api.get('/models/downloads').then(setDownloads).catch(() => {});
@@ -507,7 +371,7 @@ export default function ModelsView() {
     return () => clearInterval(poll);
   }, []);
 
-  // WebSocket events for GGUF download progress
+  // WebSocket events for GGUF downloads
   useEffect(() => {
     function handleWs(event) {
       try {
@@ -541,6 +405,8 @@ export default function ModelsView() {
     return () => { if (ws) ws.removeEventListener('message', handleWs); };
   }, [toast]);
 
+  // ── Handlers ──────────────────────────────────────────────────
+
   async function handleServerStart() {
     setServerAction('starting');
     try { await startServer(); } catch {}
@@ -602,13 +468,15 @@ export default function ModelsView() {
     setDeletingGguf(null);
   }
 
-  async function handlePull(modelId) {
-    pullModel(modelId);
+  function handleDeleteUnified(model) {
+    if (model.source === 'gguf') handleDeleteGguf(model.id);
+    else handleDeleteModel(model.id);
   }
 
   async function handleSearch() {
     if (!searchQuery.trim()) return;
     setSearching(true);
+    setDiscoveryOpen(true);
     setDiscoveryTab('search');
     try {
       const results = await api.get(`/models/search?q=${encodeURIComponent(searchQuery.trim())}`);
@@ -619,257 +487,482 @@ export default function ModelsView() {
     setSearching(false);
   }
 
-  const installedIds = new Set(installedModels.map((m) => m.id));
-  const runningIds = new Set(runningModels.map((m) => m.name));
-  const catalogByBase = {};
-  for (const c of catalog) {
-    const base = c.id.split(':')[0];
-    catalogByBase[base] = c;
-    catalogByBase[c.id] = c;
-  }
+  // ── Computed: catalog lookup ───────────────────────────────────
+
+  const catalogByBase = useMemo(() => {
+    const map = {};
+    for (const c of catalog) {
+      const base = c.id.split(':')[0];
+      map[base] = c;
+      map[c.id] = c;
+    }
+    return map;
+  }, [catalog]);
 
   function getCatalogEntry(modelId) {
     if (catalogByBase[modelId]) return catalogByBase[modelId];
-    const base = modelId.split(':')[0];
-    return catalogByBase[base] || null;
+    return catalogByBase[modelId.split(':')[0]] || null;
   }
 
-  return (
-    <div className="h-full flex flex-col bg-surface-0">
-      {/* Header */}
-      <div className="flex-shrink-0 px-5 pt-4 pb-3 border-b border-border space-y-3">
-        <div className="flex items-center justify-between">
-          <h1 className="text-base font-bold font-sans text-text-0">Local Models</h1>
-          <div className="flex items-center gap-2">
-            <Badge variant="subtle" className="text-2xs">{installedModels.length + ggufModels.length} installed</Badge>
-            {runningModels.length > 0 && (
-              <Badge variant="success" className="text-2xs">{runningModels.length} running</Badge>
-            )}
-          </div>
-        </div>
+  // ── Computed: lab model check ──────────────────────────────────
 
-        {/* Server Status Bar */}
-        <ServerStatusBar
-          serverRunning={ollamaStatus.serverRunning}
-          installed={ollamaStatus.installed}
-          onStart={handleServerStart}
-          onStop={handleServerStop}
-          onRestart={handleServerRestart}
-          actionInProgress={serverAction}
-        />
-
-        {/* Hardware Bar */}
-        <HardwareBar hardware={ollamaStatus.hardware} />
-      </div>
+  function isModelInLab(modelId) {
+    if (!labActiveModel) return false;
+    if (typeof labActiveModel === 'string') return labActiveModel === modelId;
+    return labActiveModel.name === modelId || labActiveModel.id === modelId;
+  }
 
-      {/* Active Downloads (GGUF) */}
-      {downloads.length > 0 && (
-        <div className="px-5 py-3 border-b border-border space-y-2">
-          <div className="text-xs font-sans font-semibold text-text-2">Downloading</div>
-          {downloads.map((d) => <DownloadProgress key={d.filename} download={d} />)}
-        </div>
-      )}
+  // ── Computed: unified model list ──────────────────────────────
+
+  const unifiedModels = useMemo(() => {
+    const models = [];
+    const seen = new Set();
+
+    for (const m of runningModels) {
+      seen.add(m.name);
+      const installed = installedModels.find((im) => im.id === m.name);
+      const cat = getCatalogEntry(m.name);
+      models.push({
+        id: m.name,
+        name: m.name,
+        source: 'ollama',
+        status: 'running',
+        size: installed?.size || (m.size ? formatBytes(m.size) : '—'),
+        parameters: cat?.parameters || installed?.parameters,
+        quantization: installed?.quantization,
+        tier: installed?.tier,
+        vramGb: m.vram ? (m.vram / (1024 ** 3)).toFixed(1) : m.size ? (m.size / (1024 ** 3)).toFixed(1) : null,
+        isInLab: isModelInLab(m.name),
+      });
+    }
 
-      {/* Ollama Pull Progress */}
-      {Object.keys(pullProgress).length > 0 && (
-        <div className="px-5 py-3 border-b border-border space-y-2">
-          <div className="text-xs font-sans font-semibold text-text-2">Pulling Models</div>
-          {Object.entries(pullProgress).map(([id, prog]) => (
-            <PullProgress key={id} modelId={id} progress={prog} />
-          ))}
-        </div>
-      )}
+    for (const m of installedModels) {
+      if (seen.has(m.id)) continue;
+      seen.add(m.id);
+      const cat = getCatalogEntry(m.id);
+      models.push({
+        id: m.id,
+        name: m.id,
+        source: 'ollama',
+        status: 'ready',
+        size: m.size || '—',
+        parameters: cat?.parameters || m.parameters,
+        quantization: m.quantization,
+        tier: m.tier,
+        category: m.category,
+        isInLab: isModelInLab(m.id),
+        catalogEntry: cat,
+      });
+    }
 
-      {/* Content */}
-      <ScrollArea className="flex-1">
-        <div className="px-5 py-4 space-y-6">
-          {/* Running Models Section */}
-          <div>
-            <SectionHeader title="Running Models" count={runningModels.length} icon={Zap} />
-            {runningModels.length === 0 ? (
-              <div className="px-4 py-4 bg-surface-1 border border-border-subtle rounded-lg text-center">
-                <p className="text-xs text-text-3 font-sans">
-                  {ollamaStatus.serverRunning
-                    ? 'No models loaded — start one below'
-                    : 'Start the server to load models'}
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {runningModels.map((m) => (
-                  <RunningModelCard
-                    key={m.name}
-                    model={m}
-                    onUnload={handleUnloadModel}
-                    onSpawn={spawnFromModel}
-                    unloading={unloadingModel}
-                  />
-                ))}
+    for (const m of ggufModels) {
+      seen.add(m.id);
+      models.push({
+        id: m.id,
+        name: m.id,
+        source: 'gguf',
+        status: 'downloaded',
+        size: m.sizeBytes ? formatBytes(m.sizeBytes) : '—',
+        parameters: m.parameters,
+        quantization: m.quantization,
+        isInLab: isModelInLab(m.id),
+        repoId: m.repoId,
+        contextWindow: m.contextWindow,
+      });
+    }
+
+    for (const d of downloads) {
+      if (seen.has(d.filename)) continue;
+      models.push({
+        id: `dl-${d.filename}`,
+        name: d.filename,
+        source: 'gguf',
+        status: 'downloading',
+        download: d,
+      });
+    }
+
+    for (const [id, prog] of Object.entries(pullProgress)) {
+      if (seen.has(id)) continue;
+      models.push({
+        id: `pull-${id}`,
+        name: id,
+        source: 'ollama',
+        status: 'downloading',
+        pullProgress: prog,
+      });
+    }
+
+    return models;
+  }, [runningModels, installedModels, ggufModels, downloads, pullProgress, labActiveModel, catalog]);
+
+  // ── Computed: filter + search ──────────────────────────────────
+
+  const filteredModels = useMemo(() => {
+    let list = unifiedModels;
+    if (filter === 'running') list = list.filter((m) => m.status === 'running');
+    else if (filter === 'ready') list = list.filter((m) => m.status === 'ready');
+    else if (filter === 'downloaded') list = list.filter((m) => m.status === 'downloaded' || m.status === 'downloading');
+    if (searchQuery.trim() && discoveryTab !== 'search') {
+      const q = searchQuery.toLowerCase();
+      list = list.filter((m) => m.name.toLowerCase().includes(q));
+    }
+    return list;
+  }, [unifiedModels, filter, searchQuery, discoveryTab]);
+
+  const filterCounts = useMemo(() => ({
+    all: unifiedModels.length,
+    running: unifiedModels.filter((m) => m.status === 'running').length,
+    ready: unifiedModels.filter((m) => m.status === 'ready').length,
+    downloaded: unifiedModels.filter((m) => m.status === 'downloaded' || m.status === 'downloading').length,
+  }), [unifiedModels]);
+
+  const hasNoModels = unifiedModels.length === 0;
+
+  // ── Render ─────────────────────────────────────────────────────
+
+  return (
+    <div className="h-full flex flex-col bg-surface-0">
+      {/* ════ ZONE 1: Sticky Toolbar ════ */}
+      <div className="flex-shrink-0 px-5 pt-4 pb-3 border-b border-border space-y-3">
+
+        {/* Server status row */}
+        {!ollamaStatus.installed ? (
+          <div className="flex items-center gap-2 bg-surface-1 border border-border-subtle rounded-lg px-3 py-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-text-4 flex-shrink-0" />
+            <span className="text-xs font-sans text-text-3 font-medium">Ollama Not Installed</span>
+            <div className="flex-1" />
+            <a
+              href="https://ollama.ai/download"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-2xs font-sans text-accent hover:underline flex items-center gap-1"
+            >
+              Install <ExternalLink size={10} />
+            </a>
+          </div>
+        ) : ollamaStatus.serverRunning ? (
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="relative flex-shrink-0 w-1.5 h-1.5">
+              <span className="absolute inset-0 rounded-full bg-success" />
+              <span className="absolute inset-[-2px] rounded-full bg-success opacity-20 animate-pulse" />
+            </span>
+            <span className="text-xs font-sans text-text-1 font-medium">Ollama</span>
+            <span className="text-2xs font-mono text-text-4">:11434</span>
+
+            {ollamaStatus.hardware && (
+              <div className="flex items-center gap-1.5 ml-2">
+                <div className="flex items-center gap-1 px-2 py-0.5 rounded-md bg-surface-2 text-2xs font-sans text-text-2">
+                  <MemoryStick size={10} className="text-text-3" />
+                  {ollamaStatus.hardware.totalRamGb} GB
+                </div>
+                <div className="flex items-center gap-1 px-2 py-0.5 rounded-md bg-surface-2 text-2xs font-sans text-text-2">
+                  <Cpu size={10} className="text-text-3" />
+                  {ollamaStatus.hardware.cores} cores
+                </div>
+                {ollamaStatus.hardware.gpu && (
+                  <div className="flex items-center gap-1 px-2 py-0.5 rounded-md bg-surface-2 text-2xs font-sans text-text-2">
+                    <HardDrive size={10} className="text-text-3" />
+                    {ollamaStatus.hardware.gpu.name}
+                    {ollamaStatus.hardware.gpu.vram ? ` (${ollamaStatus.hardware.gpu.vram} GB)` : ''}
+                  </div>
+                )}
+                {ollamaStatus.hardware.isAppleSilicon && (
+                  <Badge variant="accent" className="text-2xs">Unified Memory</Badge>
+                )}
               </div>
             )}
+
+            <div className="flex-1" />
+            <button
+              onClick={handleServerRestart}
+              disabled={!!serverAction}
+              className="flex items-center gap-1 text-2xs font-sans text-text-3 hover:text-accent cursor-pointer transition-colors disabled:opacity-40"
+            >
+              <RefreshCw size={10} className={serverAction === 'restarting' ? 'animate-spin' : ''} />
+              {serverAction === 'restarting' ? 'Restarting...' : 'Restart'}
+            </button>
+            <button
+              onClick={handleServerStop}
+              disabled={!!serverAction}
+              className="flex items-center gap-1 text-2xs font-sans text-text-3 hover:text-danger cursor-pointer transition-colors disabled:opacity-40"
+            >
+              <Square size={10} />
+              {serverAction === 'stopping' ? 'Stopping...' : 'Stop'}
+            </button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 bg-danger/8 border border-danger/20 rounded-lg px-3 py-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-danger flex-shrink-0" />
+            <span className="text-xs font-sans text-danger font-semibold">Ollama Stopped</span>
+            <span className="text-2xs font-mono text-text-4">:11434</span>
+            <div className="flex-1" />
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleServerStart}
+              disabled={!!serverAction}
+              className="h-6 px-2.5 text-2xs gap-1"
+            >
+              <Play size={10} />
+              {serverAction === 'starting' ? 'Starting...' : 'Start Server'}
+            </Button>
           </div>
+        )}
 
-          {/* Installed Models Section */}
-          <div>
-            <SectionHeader title="Installed Models" count={installedModels.length} icon={HardDrive} />
-            {installedModels.length === 0 ? (
-              <div className="px-4 py-6 bg-surface-1 border border-border-subtle rounded-lg text-center">
-                <Box size={32} className="mx-auto text-text-4 mb-2" />
-                <p className="text-sm text-text-2 font-sans font-medium">No models installed</p>
-                <p className="text-xs text-text-3 font-sans mt-1">
-                  Pull a model from the Recommended section below, or search HuggingFace.
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {installedModels.map((m) => (
-                  <InstalledModelCard
-                    key={m.id}
-                    model={m}
-                    catalogEntry={getCatalogEntry(m.id)}
-                    isRunning={runningIds.has(m.id)}
-                    onStart={handleLoadModel}
-                    onSpawn={spawnFromModel}
-                    onDelete={handleDeleteModel}
-                    loading={loadingModel}
-                    deleting={deletingModel}
-                    serverRunning={ollamaStatus.serverRunning}
-                  />
-                ))}
-              </div>
-            )}
+        {/* Search + Filter row */}
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1 max-w-md">
+            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-4" />
+            <input
+              ref={searchInputRef}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              placeholder="Search models or HuggingFace..."
+              className="w-full h-8 pl-9 pr-3 text-sm rounded-md bg-surface-1 border border-border text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+            />
+          </div>
+
+          <div className="flex items-center gap-1">
+            {FILTERS.map((f) => (
+              <button
+                key={f.id}
+                onClick={() => setFilter(f.id)}
+                className={cn(
+                  'px-2.5 py-1 rounded-md text-2xs font-sans font-medium transition-colors cursor-pointer',
+                  filter === f.id
+                    ? 'bg-accent/12 text-accent'
+                    : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
+                )}
+              >
+                {f.label}
+                {filterCounts[f.id] > 0 && (
+                  <span className={cn('ml-1', filter === f.id ? 'text-accent/60' : 'text-text-4')}>
+                    {filterCounts[f.id]}
+                  </span>
+                )}
+              </button>
+            ))}
           </div>
+        </div>
+      </div>
 
-          {/* Downloaded GGUF Models Section */}
-          {ggufModels.length > 0 && (
-            <div>
-              <SectionHeader title="Downloaded Models (GGUF)" count={ggufModels.length} icon={Download} />
-              <div className="space-y-2">
-                {ggufModels.map((m) => (
-                  <GgufModelCard
-                    key={m.id}
-                    model={m}
-                    onImport={handleImportToOllama}
-                    onDelete={handleDeleteGguf}
-                    importing={importingGguf}
-                    deleting={deletingGguf}
-                  />
-                ))}
+      {/* ════ ZONE 2 + 3: Scrollable Content ════ */}
+      <ScrollArea className="flex-1">
+        <div className="p-5 space-y-6">
+
+          {/* Empty State */}
+          {hasNoModels && !searchQuery.trim() && filter === 'all' ? (
+            <div className="flex flex-col items-center justify-center py-16 px-8">
+              <Box size={48} className="text-text-4 mb-4" />
+              <h2 className="text-lg font-sans font-bold text-text-0 mb-1">Get started with local models</h2>
+              <p className="text-sm text-text-3 font-sans text-center max-w-md mb-6">
+                Run AI models locally for privacy, speed, and zero API costs.
+                Pull popular models from Ollama or download GGUF files from HuggingFace.
+              </p>
+              <div className="flex gap-3">
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    setDiscoveryOpen(true);
+                    setDiscoveryTab('recommended');
+                    discoveryRef.current?.scrollIntoView({ behavior: 'smooth' });
+                  }}
+                  className="gap-2"
+                >
+                  <Download size={14} /> Pull from Ollama
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    searchInputRef.current?.focus();
+                  }}
+                  className="gap-2"
+                >
+                  <Search size={14} /> Search HuggingFace
+                </Button>
               </div>
             </div>
-          )}
-
-          {/* Divider */}
-          <div className="border-t border-border-subtle" />
-
-          {/* Discovery Section */}
-          <div>
-            <div className="flex items-center justify-between mb-3">
-              <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Discover Models</span>
+          ) : filteredModels.length === 0 ? (
+            <div className="text-center py-12">
+              <Search size={32} className="mx-auto text-text-4 mb-2" />
+              <p className="text-sm text-text-2 font-sans font-medium">No models match your filter</p>
+              <p className="text-xs text-text-3 font-sans mt-1">
+                Try changing the filter or clearing your search.
+              </p>
             </div>
-
-            {/* Search */}
-            <div className="flex gap-2 mb-3">
-              <div className="relative flex-1">
-                <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-4" />
-                <input
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-                  placeholder="Search HuggingFace for GGUF models..."
-                  className="w-full h-8 pl-9 pr-3 text-sm rounded-md bg-surface-1 border border-border text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+          ) : (
+            /* ── Card Grid ── */
+            <div className="grid gap-3" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
+              {filteredModels.map((model) => (
+                <UnifiedModelCard
+                  key={model.id}
+                  model={model}
+                  serverRunning={ollamaStatus.serverRunning}
+                  onStart={handleLoadModel}
+                  onStop={handleUnloadModel}
+                  onSpawn={spawnFromModel}
+                  onDelete={handleDeleteUnified}
+                  onImport={handleImportToOllama}
+                  isLoading={loadingModel === model.id}
+                  isUnloading={unloadingModel === model.id || unloadingModel === model.name}
+                  isDeleting={deletingModel === model.id || deletingGguf === model.id}
+                  isImporting={importingGguf === model.id}
                 />
-              </div>
-              <Button onClick={handleSearch} disabled={searching} size="sm" variant="accent">
-                {searching ? <Loader2 size={14} className="animate-spin" /> : 'Search'}
-              </Button>
-            </div>
-
-            {/* Tabs */}
-            <div className="flex gap-1 mb-3">
-              {[
-                { id: 'recommended', label: `Recommended (${recommended.length})` },
-                { id: 'search', label: `Search (${searchResults.length})` },
-              ].map((t) => (
-                <button
-                  key={t.id}
-                  onClick={() => setDiscoveryTab(t.id)}
-                  className={cn(
-                    'px-3 py-1 rounded-md text-xs font-sans font-medium transition-colors cursor-pointer',
-                    discoveryTab === t.id ? 'bg-accent/12 text-accent' : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-                  )}
-                >
-                  {t.label}
-                </button>
               ))}
             </div>
+          )}
 
-            {/* Tab content */}
-            <div className="space-y-2">
-              {discoveryTab === 'recommended' && (
-                <>
-                  {recommended.length === 0 ? (
-                    <div className="text-center py-8">
-                      <Cpu size={32} className="mx-auto text-text-4 mb-2" />
-                      <p className="text-sm text-text-2 font-sans font-medium">Detecting hardware...</p>
-                      <p className="text-xs text-text-3 font-sans mt-1">Make sure Ollama is installed so we can check your system.</p>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="text-xs text-text-3 font-sans mb-2">
-                        Top models for your system ({ollamaStatus.hardware?.totalRamGb || '?'} GB RAM). Click Pull to download via Ollama.
-                      </div>
-                      {recommended.map((m) => {
-                        const baseId = m.id.split(':')[0];
-                        const isInstalled = installedModels.some((im) =>
-                          im.id === m.id || im.id.startsWith(baseId + ':') || im.id === baseId
-                        );
-                        return (
-                          <RecommendedModel
-                            key={m.id}
-                            model={m}
-                            systemRamGb={ollamaStatus.hardware?.totalRamGb}
-                            onPull={handlePull}
-                            pulling={pullProgress[m.id] ? m.id : null}
-                            isInstalled={isInstalled}
-                          />
-                        );
-                      })}
-                    </>
-                  )}
-                </>
-              )}
+          {/* ════ ZONE 3: Discovery ════ */}
+          <div ref={discoveryRef} className="border-t border-border-subtle pt-4">
+            <button
+              onClick={() => setDiscoveryOpen(!discoveryOpen)}
+              className="flex items-center gap-2 mb-3 cursor-pointer group"
+            >
+              {discoveryOpen
+                ? <ChevronDown size={14} className="text-text-3 group-hover:text-text-1 transition-colors" />
+                : <ChevronRight size={14} className="text-text-3 group-hover:text-text-1 transition-colors" />}
+              <Sparkles size={14} className="text-text-3" />
+              <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">
+                Discover Models
+              </span>
+            </button>
 
-              {discoveryTab === 'search' && (
-                <>
-                  {searching ? (
-                    <div className="text-center py-8">
-                      <Loader2 size={24} className="mx-auto text-accent animate-spin mb-2" />
-                      <p className="text-sm text-text-3 font-sans">Searching HuggingFace...</p>
-                    </div>
-                  ) : searchResults.length === 0 ? (
-                    <div className="text-center py-8">
-                      <Search size={32} className="mx-auto text-text-4 mb-2" />
-                      <p className="text-sm text-text-2 font-sans font-medium">Search for GGUF models</p>
-                      <p className="text-xs text-text-3 font-sans mt-1">Try "qwen coder", "deepseek", "codestral", "llama"</p>
-                    </div>
-                  ) : (
-                    searchResults.map((r) => (
-                      <div key={r.id} className="space-y-1">
-                        <SearchResult
-                          result={r}
-                          expanded={expandedResult === r.id}
-                          onExpand={setExpandedResult}
-                        />
-                        {expandedResult === r.id && (
-                          <FilePicker repoId={r.id} systemRamGb={ollamaStatus.hardware?.totalRamGb} />
-                        )}
+            {discoveryOpen && (
+              <div className="space-y-4">
+                {/* Discovery tabs */}
+                <div className="flex gap-1">
+                  {[
+                    { id: 'recommended', label: `Recommended (${recommended.length})` },
+                    { id: 'search', label: `Search Results (${searchResults.length})` },
+                  ].map((t) => (
+                    <button
+                      key={t.id}
+                      onClick={() => setDiscoveryTab(t.id)}
+                      className={cn(
+                        'px-3 py-1 rounded-md text-xs font-sans font-medium transition-colors cursor-pointer',
+                        discoveryTab === t.id ? 'bg-accent/12 text-accent' : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
+                      )}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
+
+                {/* Recommended — horizontal scroll */}
+                {discoveryTab === 'recommended' && (
+                  <>
+                    {recommended.length === 0 ? (
+                      <div className="text-center py-8">
+                        <Cpu size={32} className="mx-auto text-text-4 mb-2" />
+                        <p className="text-sm text-text-2 font-sans font-medium">Detecting hardware...</p>
+                        <p className="text-xs text-text-3 font-sans mt-1">Make sure Ollama is installed so we can check your system.</p>
                       </div>
-                    ))
-                  )}
-                </>
-              )}
-            </div>
+                    ) : (
+                      <>
+                        <div className="text-xs text-text-3 font-sans">
+                          Top models for your system ({ollamaStatus.hardware?.totalRamGb || '?'} GB RAM). Click Pull to download via Ollama.
+                        </div>
+                        <div className="flex gap-3 overflow-x-auto pb-2">
+                          {recommended.map((m) => {
+                            const baseId = m.id.split(':')[0];
+                            const isInstalled = installedModels.some((im) =>
+                              im.id === m.id || im.id.startsWith(baseId + ':') || im.id === baseId
+                            );
+                            const headroom = ollamaStatus.hardware?.totalRamGb
+                              ? Math.round((1 - m.ramGb / ollamaStatus.hardware.totalRamGb) * 100)
+                              : null;
+                            const isPulling = !!pullProgress[m.id];
+
+                            return (
+                              <div
+                                key={m.id}
+                                className={cn(
+                                  'flex-shrink-0 w-[240px] p-3 rounded-xl border transition-colors',
+                                  isInstalled
+                                    ? 'bg-success/5 border-success/20'
+                                    : 'bg-surface-1 border-border-subtle hover:border-accent/30',
+                                )}
+                              >
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className="text-sm font-mono font-bold text-text-0 truncate">{m.name}</span>
+                                  {isInstalled && <Check size={12} className="text-success flex-shrink-0" />}
+                                </div>
+                                <div className="text-2xs text-text-3 font-sans line-clamp-1 mb-2">{m.description}</div>
+                                <div className="flex items-center gap-2 text-2xs font-sans mb-2">
+                                  <span className="text-text-2">{m.sizeGb} GB</span>
+                                  <span className="text-green-400 font-medium">{m.ramGb} GB RAM</span>
+                                  {headroom !== null && <span className="text-text-4">{headroom}%</span>}
+                                </div>
+                                {isInstalled ? (
+                                  <Badge variant="success" className="text-2xs">Installed</Badge>
+                                ) : (
+                                  <button
+                                    onClick={() => pullModel(m.id)}
+                                    disabled={isPulling}
+                                    className="w-full flex items-center justify-center gap-1.5 h-7 rounded-md text-xs font-sans font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors cursor-pointer disabled:opacity-40"
+                                  >
+                                    {isPulling ? <Loader2 size={12} className="animate-spin" /> : <Download size={12} />}
+                                    Pull
+                                  </button>
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </>
+                    )}
+                  </>
+                )}
+
+                {/* Search results */}
+                {discoveryTab === 'search' && (
+                  <>
+                    {searching ? (
+                      <div className="text-center py-8">
+                        <Loader2 size={24} className="mx-auto text-accent animate-spin mb-2" />
+                        <p className="text-sm text-text-3 font-sans">Searching HuggingFace...</p>
+                      </div>
+                    ) : searchResults.length === 0 ? (
+                      <div className="text-center py-8">
+                        <Search size={32} className="mx-auto text-text-4 mb-2" />
+                        <p className="text-sm text-text-2 font-sans font-medium">Search for GGUF models</p>
+                        <p className="text-xs text-text-3 font-sans mt-1">
+                          Type a query above and press Enter — try "qwen coder", "deepseek", "codestral", "llama"
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {searchResults.map((r) => (
+                          <div key={r.id} className="space-y-1">
+                            <button
+                              onClick={() => setExpandedResult(expandedResult === r.id ? null : r.id)}
+                              className="w-full text-left px-4 py-3 bg-surface-1 border border-border-subtle rounded-lg hover:border-accent/30 transition-colors cursor-pointer"
+                            >
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-mono font-bold text-text-0 truncate flex-1">{r.name}</span>
+                                <span className="text-2xs text-text-4 font-sans">{r.author}</span>
+                                {expandedResult === r.id
+                                  ? <ChevronDown size={14} className="text-text-3" />
+                                  : <ChevronRight size={14} className="text-text-3" />}
+                              </div>
+                              <div className="text-2xs text-text-3 font-sans mt-0.5 flex gap-3">
+                                <span>{r.downloads?.toLocaleString()} downloads</span>
+                                <span>{r.likes} likes</span>
+                              </div>
+                            </button>
+                            {expandedResult === r.id && (
+                              <FilePicker repoId={r.id} systemRamGb={ollamaStatus.hardware?.totalRamGb} />
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
           </div>
         </div>
       </ScrollArea>