groove-dev 0.27.124 → 0.27.125

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

@@ -1,18 +1,20 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
 import { api } from '../lib/api';
 import { useToast } from '../lib/hooks/use-toast';
 import { useGrooveStore } from '../stores/groove';
 import {
   Search, Download, Trash2, HardDrive, Cpu, MemoryStick,
-  Check, X, Loader2, ExternalLink, Box, ChevronDown, ChevronRight,
+  Check, Loader2, Box, ChevronDown, ChevronRight,
+  RefreshCw, Play, Square, Zap, AlertCircle, Monitor, Rocket,
 } 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`;
@@ -26,11 +28,81 @@ 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>
+    );
+  }
+
+  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>
+    );
+  }
+
+  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>
+  );
+}
+
 // ---- Hardware Info ----
 function HardwareBar({ hardware }) {
   if (!hardware) return null;
   return (
-    <div className="flex items-center gap-4 px-4 py-2.5 bg-surface-1 border border-border-subtle rounded-lg text-xs font-sans text-text-2">
+    <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>
@@ -45,15 +117,109 @@ function HardwareBar({ hardware }) {
           <span>{hardware.gpu.name}{hardware.gpu.vram ? ` (${hardware.gpu.vram} GB)` : ''}</span>
         </div>
       )}
-      {hardware.recommended?.code && (
-        <div className="ml-auto text-accent">
-          Recommended: {hardware.recommended.code}
-        </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;
+
+  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>
+      </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>}
+        </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}</>}
+        </div>
+      </div>
+      <div className="flex items-center gap-1">
+        {!isRunning && serverRunning && (
+          <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"
+          >
+            {loading === model.id ? <Loader2 size={11} className="animate-spin" /> : <Play size={11} />}
+            Start
+          </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>
+  );
+}
+
 // ---- Download Progress Bar ----
 function DownloadProgress({ download }) {
   const pct = Math.round((download.percent || 0) * 100);
@@ -73,33 +239,57 @@ function DownloadProgress({ download }) {
   );
 }
 
-// ---- Installed Model Card ----
-function InstalledModel({ model, onDelete }) {
-  const [deleting, setDeleting] = useState(false);
-  const tierColors = { light: 'text-green-400', medium: 'text-blue-400', heavy: 'text-orange-400' };
+// ---- 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;
 
   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="text-accent flex-shrink-0" />
+    <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.id}</span>
-          {model.quantization && <Badge variant="subtle" className="text-2xs">{model.quantization}</Badge>}
-          {model.parameters && <Badge variant="subtle" className="text-2xs">{model.parameters}</Badge>}
-          <span className={cn('text-2xs font-medium capitalize', tierColors[model.tier] || 'text-text-3')}>{model.tier}</span>
+          <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">
-          {formatBytes(model.sizeBytes)} &middot; ctx {(model.contextWindow || 0).toLocaleString()} &middot; {model.category}
-          {model.repoId && <span className="text-text-4"> &middot; {model.repoId}</span>}
+        <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>
-      <button
-        onClick={async () => { setDeleting(true); await onDelete(model.id); setDeleting(false); }}
-        disabled={deleting}
-        className="p-1.5 rounded-md text-text-4 hover:text-red-400 hover:bg-red-400/10 transition-colors"
-      >
-        {deleting ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
-      </button>
+      {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>
   );
 }
@@ -199,44 +389,14 @@ function FilePicker({ repoId, onDownload, systemRamGb }) {
   );
 }
 
-// ---- Recommended Model Card ----
-function RecommendedModel({ model, systemRamGb, onPull, pulling, isInstalled }) {
-  const tierColors = { light: 'text-green-400', medium: 'text-blue-400', heavy: 'text-orange-400' };
-  const categoryIcons = { code: '{}', general: 'AI' };
-  const headroom = systemRamGb ? Math.round((1 - model.ramGb / systemRamGb) * 100) : null;
-
+// ---- Section Header ----
+function SectionHeader({ title, count, icon: Icon }) {
   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', tierColors[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 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>
   );
@@ -244,74 +404,59 @@ function RecommendedModel({ model, systemRamGb, onPull, pulling, isInstalled })
 
 // ---- Main View ----
 export default function ModelsView() {
-  const [tab, setTab] = useState('recommended'); // recommended | installed | search
+  const [discoveryTab, setDiscoveryTab] = useState('recommended');
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState([]);
   const [searching, setSearching] = useState(false);
-  const [installed, setInstalled] = useState([]);
   const [recommended, setRecommended] = useState([]);
   const [downloads, setDownloads] = useState([]);
-  const [hardware, setHardware] = useState(null);
   const [expandedResult, setExpandedResult] = useState(null);
-  const [pulling, setPulling] = useState(null);
-  const [ollamaModels, setOllamaModels] = useState([]);
+  const [serverAction, setServerAction] = useState(null);
+  const [loadingModel, setLoadingModel] = useState(null);
+  const [unloadingModel, setUnloadingModel] = useState(null);
+  const [deletingModel, setDeletingModel] = useState(null);
   const toast = useToast();
 
-  // Fetch installed models
-  const fetchInstalled = useCallback(() => {
-    api.get('/models/installed').then((data) => {
-      setInstalled(data.models || []);
-    }).catch(() => {});
-  }, []);
-
-  const fetchOllamaModels = useCallback(() => {
-    api.get('/providers/ollama/models').then((data) => {
-      setOllamaModels((data.installed || []).map((m) => m.id));
-    }).catch(() => {});
-  }, []);
+  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 fetchOllamaStatus = useGrooveStore((s) => s.fetchOllamaStatus);
+  const startServer = useGrooveStore((s) => s.startOllamaServer);
+  const stopServer = useGrooveStore((s) => s.stopOllamaServer);
+  const restartServer = useGrooveStore((s) => s.restartOllamaServer);
+  const pullModel = useGrooveStore((s) => s.pullOllamaModel);
+  const deleteModel = useGrooveStore((s) => s.deleteOllamaModel);
+  const loadModel = useGrooveStore((s) => s.loadOllamaModel);
+  const unloadModel = useGrooveStore((s) => s.unloadOllamaModel);
+  const spawnFromModel = useGrooveStore((s) => s.spawnFromModel);
+
+  const pollingRef = useRef(null);
+
+  // Fetch status on mount and poll every 10s
+  useEffect(() => {
+    fetchOllamaStatus();
+    pollingRef.current = setInterval(fetchOllamaStatus, 10000);
+    return () => clearInterval(pollingRef.current);
+  }, [fetchOllamaStatus]);
 
-  // Fetch hardware info + recommended models + Ollama installed
+  // Fetch recommended models
   useEffect(() => {
-    api.get('/providers/ollama/hardware').then(setHardware).catch(() => {});
     api.get('/models/recommended').then((data) => {
       setRecommended(data.models || []);
-      if (!hardware && data.hardware) setHardware(data.hardware);
     }).catch(() => {});
-    fetchInstalled();
-    fetchOllamaModels();
-  }, [fetchInstalled, fetchOllamaModels]);
-
-  async function handlePull(modelId) {
-    setPulling(modelId);
-    try {
-      await api.post('/providers/ollama/pull', { model: modelId });
-      toast.success(`${modelId} ready to use`);
-      // Refresh all model lists so UI reflects the new install
-      fetchInstalled();
-      fetchOllamaModels();
-      // Also optimistically mark it installed immediately
-      setOllamaModels((prev) => [...prev, modelId]);
-    } catch (err) {
-      toast.error(`Pull failed: ${err.message}`);
-    }
-    setPulling(null);
-  }
+  }, []);
 
-  // Listen for download progress via WebSocket
+  // Poll active GGUF downloads
   useEffect(() => {
-    const unsub = useGrooveStore.subscribe((state, prev) => {
-      // Refresh on model events
-    });
-
-    // Poll active downloads
     const poll = setInterval(() => {
       api.get('/models/downloads').then(setDownloads).catch(() => {});
     }, 2000);
-
-    return () => { unsub(); clearInterval(poll); };
+    return () => clearInterval(poll);
   }, []);
 
-  // WebSocket events for download progress
+  // WebSocket events for GGUF download progress
   useEffect(() => {
     function handleWs(event) {
       try {
@@ -329,7 +474,6 @@ export default function ModelsView() {
         }
         if (msg.type === 'model:download:complete') {
           setDownloads((prev) => prev.filter((d) => d.filename !== msg.data.filename));
-          fetchInstalled();
           toast.success(`${msg.data.filename} downloaded`);
         }
         if (msg.type === 'model:download:error') {
@@ -338,15 +482,55 @@ export default function ModelsView() {
         }
       } catch {}
     }
-    const ws = useGrooveStore.getState()._ws;
+    const ws = useGrooveStore.getState().ws;
     if (ws) ws.addEventListener('message', handleWs);
     return () => { if (ws) ws.removeEventListener('message', handleWs); };
-  }, [fetchInstalled, toast]);
+  }, [toast]);
+
+  async function handleServerStart() {
+    setServerAction('starting');
+    try { await startServer(); } catch {}
+    setServerAction(null);
+  }
+
+  async function handleServerStop() {
+    setServerAction('stopping');
+    try { await stopServer(); } catch {}
+    setServerAction(null);
+  }
+
+  async function handleServerRestart() {
+    setServerAction('restarting');
+    try { await restartServer(); } catch {}
+    setServerAction(null);
+  }
+
+  async function handleLoadModel(modelId) {
+    setLoadingModel(modelId);
+    try { await loadModel(modelId); } catch {}
+    setLoadingModel(null);
+  }
+
+  async function handleUnloadModel(modelId) {
+    setUnloadingModel(modelId);
+    try { await unloadModel(modelId); } catch {}
+    setUnloadingModel(null);
+  }
+
+  async function handleDeleteModel(modelId) {
+    setDeletingModel(modelId);
+    try { await deleteModel(modelId); } catch {}
+    setDeletingModel(null);
+  }
+
+  async function handlePull(modelId) {
+    pullModel(modelId);
+  }
 
   async function handleSearch() {
     if (!searchQuery.trim()) return;
     setSearching(true);
-    setTab('search');
+    setDiscoveryTab('search');
     try {
       const results = await api.get(`/models/search?q=${encodeURIComponent(searchQuery.trim())}`);
       setSearchResults(results);
@@ -356,14 +540,19 @@ export default function ModelsView() {
     setSearching(false);
   }
 
-  async function handleDelete(modelId) {
-    try {
-      await api.delete(`/models/${modelId}`);
-      setInstalled((prev) => prev.filter((m) => m.id !== modelId));
-      toast.success('Model deleted');
-    } catch (err) {
-      toast.error(err.message);
-    }
+  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;
+  }
+
+  function getCatalogEntry(modelId) {
+    if (catalogByBase[modelId]) return catalogByBase[modelId];
+    const base = modelId.split(':')[0];
+    return catalogByBase[base] || null;
   }
 
   return (
@@ -372,50 +561,29 @@ export default function ModelsView() {
       <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>
-          <Badge variant="subtle" className="text-2xs">{installed.length} installed</Badge>
-        </div>
-
-        <HardwareBar hardware={hardware} />
-
-        {/* Search */}
-        <div className="flex gap-2">
-          <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"
-            />
+          <div className="flex items-center gap-2">
+            <Badge variant="subtle" className="text-2xs">{installedModels.length} installed</Badge>
+            {runningModels.length > 0 && (
+              <Badge variant="success" className="text-2xs">{runningModels.length} running</Badge>
+            )}
           </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">
-          {[
-            { id: 'recommended', label: `Recommended (${recommended.length})` },
-            { id: 'installed', label: `Installed (${installed.length})` },
-            { id: 'search', label: `Search (${searchResults.length})` },
-          ].map((t) => (
-            <button
-              key={t.id}
-              onClick={() => setTab(t.id)}
-              className={cn(
-                'px-3 py-1 rounded-md text-xs font-sans font-medium transition-colors cursor-pointer',
-                tab === t.id ? 'bg-accent/12 text-accent' : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-              )}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
+        {/* 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>
 
-      {/* Active Downloads */}
+      {/* 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>
@@ -423,85 +591,188 @@ export default function ModelsView() {
         </div>
       )}
 
+      {/* 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>
+      )}
+
       {/* Content */}
       <ScrollArea className="flex-1">
-        <div className="px-5 py-4 space-y-2">
-          {tab === 'recommended' && (
-            <>
-              {recommended.length === 0 ? (
-                <div className="text-center py-12">
-                  <Cpu size={40} className="mx-auto text-text-4 mb-3" />
-                  <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="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}
+                  />
+                ))}
+              </div>
+            )}
+          </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>
+            )}
+          </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>
+            </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"
+                />
+              </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' && (
                 <>
-                  <div className="text-xs text-text-3 font-sans mb-2">
-                    Top models for your system ({hardware?.totalRamGb || '?'} GB RAM). Click Pull to download via Ollama.
-                  </div>
-                  {recommended.map((m) => {
-                    // Check if this model (or a variant) is already installed in Ollama
-                    const baseId = m.id.split(':')[0];
-                    const isInstalled = ollamaModels.some((id) => id === m.id || id.startsWith(baseId + ':') || id === baseId);
-                    return (
-                      <RecommendedModel
-                        key={m.id}
-                        model={m}
-                        systemRamGb={hardware?.totalRamGb}
-                        onPull={handlePull}
-                        pulling={pulling}
-                        isInstalled={isInstalled}
-                      />
-                    );
-                  })}
+                  {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}
+                          />
+                        );
+                      })}
+                    </>
+                  )}
                 </>
               )}
-            </>
-          )}
-
-          {tab === 'installed' && (
-            <>
-              {installed.length === 0 ? (
-                <div className="text-center py-12">
-                  <Box size={40} className="mx-auto text-text-4 mb-3" />
-                  <p className="text-sm text-text-2 font-sans font-medium">No local models yet</p>
-                  <p className="text-xs text-text-3 font-sans mt-1">Search HuggingFace to download GGUF models, or pull models via Ollama.</p>
-                </div>
-              ) : (
-                installed.map((m) => <InstalledModel key={m.id} model={m} onDelete={handleDelete} />)
-              )}
-            </>
-          )}
 
-          {tab === 'search' && (
-            <>
-              {searching ? (
-                <div className="text-center py-12">
-                  <Loader2 size={24} className="mx-auto text-accent animate-spin mb-3" />
-                  <p className="text-sm text-text-3 font-sans">Searching HuggingFace...</p>
-                </div>
-              ) : searchResults.length === 0 ? (
-                <div className="text-center py-12">
-                  <Search size={40} className="mx-auto text-text-4 mb-3" />
-                  <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} onDownload={() => fetchInstalled()} systemRamGb={hardware?.totalRamGb} />
-                    )}
-                  </div>
-                ))
+              {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} />
+                        )}
+                      </div>
+                    ))
+                  )}
+                </>
               )}
-            </>
-          )}
+            </div>
+          </div>
         </div>
       </ScrollArea>
     </div>