From 07c0aba883095052a2eeb170f65ed7dfdec5f8ed Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Fri, 30 Jan 2026 19:53:20 -0800
Subject: [PATCH] Refactor model download handling and improve progress
 tracking

- Rearranged imports for consistency across components.
- Enhanced the ModelManagement component to include detailed logging for download actions and errors.
- Updated the ModelProgress component to connect to SSE only when actively downloading, preventing connection exhaustion.
- Added a downloading state to the model status to indicate ongoing downloads.
- Improved toast notifications for model downloads with completion and error callbacks.
- Refactored the useModelDownloadToast hook to support new callbacks for download completion and error handling.
- Updated backend model status to reflect downloading state during active downloads.
---
 app/src/App.tsx                               |  18 ++-
 app/src/components/History/HistoryTable.tsx   |  19 ++-
 .../ServerSettings/ModelManagement.tsx        | 143 +++++++++++-------
 .../ServerSettings/ModelProgress.tsx          |  19 ++-
 app/src/hooks/useAutoUpdater.ts               |  26 ++--
 app/src/hooks/useAutoUpdater.tsx              |  17 ++-
 app/src/lib/api/client.ts                     |   5 +-
 app/src/lib/api/models/ModelStatus.ts         |   1 +
 app/src/lib/api/types.ts                      |   1 +
 app/src/lib/hooks/useModelDownloadToast.tsx   |  59 +++++---
 backend/main.py                               |  16 ++
 backend/models.py                             |   1 +
 tauri/src-tauri/gen/Assets.car                | Bin 3847048 -> 3847048 bytes
 13 files changed, 223 insertions(+), 102 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 7ea797df..fbe29118 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,14 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
 import { RouterProvider } from '@tanstack/react-router';
+import { useEffect, useRef, useState } from 'react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import ShinyText from '@/components/ShinyText';
 import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
+import { useAutoUpdater } from '@/hooks/useAutoUpdater';
 import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
+import { usePlatform } from '@/platform/PlatformContext';
 import { router } from '@/router';
 import { useServerStore } from '@/stores/serverStore';
-import { usePlatform } from '@/platform/PlatformContext';
-import { useAutoUpdater } from '@/hooks/useAutoUpdater';
 
 const LOADING_MESSAGES = [
   'Warming up tensors...',
@@ -50,14 +50,18 @@ function App() {
         console.error('Failed to sync initial setting to Rust:', error);
       });
     }
-  }, [platform]);
+    // Empty dependency array - platform is stable from context, only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.metadata.isTauri, platform.lifecycle]);
 
   // Setup lifecycle callbacks
   useEffect(() => {
     platform.lifecycle.onServerReady = () => {
       setServerReady(true);
     };
-  }, [platform]);
+    // Empty dependency array - platform is stable from context, only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.lifecycle]);
 
   // Setup window close handler and auto-start server when running in Tauri (production only)
   useEffect(() => {
@@ -115,7 +119,9 @@ function App() {
       // Window close event handles server shutdown based on setting
       serverStartingRef.current = false;
     };
-  }, [platform]);
+    // Empty dependency array - platform is stable from context, only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.metadata.isTauri, platform.lifecycle]);
 
   // Cycle through loading messages every 3 seconds
   useEffect(() => {
diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx
index 67abe80d..ac0f5170 100644
--- a/app/src/components/History/HistoryTable.tsx
+++ b/app/src/components/History/HistoryTable.tsx
@@ -1,6 +1,13 @@
-import { AudioWaveform, Download, FileArchive, Loader2, MoreHorizontal, Play, Trash2 } from 'lucide-react';
+import {
+  AudioWaveform,
+  Download,
+  FileArchive,
+  Loader2,
+  MoreHorizontal,
+  Play,
+  Trash2,
+} from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import type { HistoryResponse } from '@/lib/api/types';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -19,6 +26,7 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
+import type { HistoryResponse } from '@/lib/api/types';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import {
   useDeleteGeneration,
@@ -48,7 +56,11 @@ export function HistoryTable() {
   const limit = 20;
   const { toast } = useToast();
 
-  const { data: historyData, isLoading, isFetching } = useHistory({
+  const {
+    data: historyData,
+    isLoading,
+    isFetching,
+  } = useHistory({
     limit,
     offset: page * limit,
   });
@@ -265,6 +277,7 @@ export function HistoryTable() {
                     <Textarea
                       value={gen.text}
                       className="flex-1 resize-none text-sm text-muted-foreground select-text"
+                      readOnly
                     />
                   </div>
 
diff --git a/app/src/components/ServerSettings/ModelManagement.tsx b/app/src/components/ServerSettings/ModelManagement.tsx
index 4d3975e5..4a5fd439 100644
--- a/app/src/components/ServerSettings/ModelManagement.tsx
+++ b/app/src/components/ServerSettings/ModelManagement.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Download, Loader2, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -17,7 +17,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
-import { ModelProgress } from './ModelProgress';
 
 export function ModelManagement() {
   const { toast } = useToast();
@@ -27,15 +26,36 @@ export function ModelManagement() {
 
   const { data: modelStatus, isLoading } = useQuery({
     queryKey: ['modelStatus'],
-    queryFn: () => apiClient.getModelStatus(),
+    queryFn: async () => {
+      console.log('[Query] Fetching model status');
+      const result = await apiClient.getModelStatus();
+      console.log('[Query] Model status fetched:', result);
+      return result;
+    },
     refetchInterval: 5000, // Refresh every 5 seconds
   });
 
+  // Callbacks for download completion
+  const handleDownloadComplete = useCallback(() => {
+    console.log('[ModelManagement] Download complete, clearing state');
+    setDownloadingModel(null);
+    setDownloadingDisplayName(null);
+    queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
+  }, [queryClient]);
+
+  const handleDownloadError = useCallback(() => {
+    console.log('[ModelManagement] Download error, clearing state');
+    setDownloadingModel(null);
+    setDownloadingDisplayName(null);
+  }, []);
+
   // Use progress toast hook for the downloading model
   useModelDownloadToast({
     modelName: downloadingModel || '',
     displayName: downloadingDisplayName || '',
     enabled: !!downloadingModel && !!downloadingDisplayName,
+    onComplete: handleDownloadComplete,
+    onError: handleDownloadError,
   });
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -45,44 +65,69 @@ export function ModelManagement() {
     sizeMb?: number;
   } | null>(null);
 
-  const downloadMutation = useMutation({
-    mutationFn: (modelName: string) => {
+  const handleDownload = async (modelName: string) => {
+    console.log('[Download] Button clicked for:', modelName, 'at', new Date().toISOString());
+    
+    // Find display name
+    const model = modelStatus?.models.find((m) => m.model_name === modelName);
+    const displayName = model?.display_name || modelName;
+    
+    try {
+      // IMPORTANT: Call the API FIRST before setting state
+      // Setting state enables the SSE EventSource in useModelDownloadToast,
+      // which can block/delay the download fetch due to HTTP/1.1 connection limits
+      console.log('[Download] Calling download API for:', modelName);
+      const result = await apiClient.triggerModelDownload(modelName);
+      console.log('[Download] Download API responded:', result);
+      
+      // NOW set state to enable SSE tracking (after download has started on backend)
       setDownloadingModel(modelName);
-      // Find display name from model status
-      const model = modelStatus?.models.find((m) => m.model_name === modelName);
-      setDownloadingDisplayName(model?.display_name || modelName);
-      return apiClient.triggerModelDownload(modelName);
-    },
-    onSuccess: () => {
-      // Download completed - clear state and refetch status
-      setDownloadingModel(null);
-      setDownloadingDisplayName(null);
+      setDownloadingDisplayName(displayName);
+      
+      // Download initiated successfully - state will be cleared when SSE reports completion
+      // or by the polling interval detecting the model is downloaded
       queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
-    },
-    onError: (error: Error) => {
+    } catch (error) {
+      console.error('[Download] Download failed:', error);
       setDownloadingModel(null);
       setDownloadingDisplayName(null);
       toast({
         title: 'Download failed',
-        description: error.message,
+        description: error instanceof Error ? error.message : 'Unknown error',
         variant: 'destructive',
       });
-    },
-  });
+    }
+  };
 
   const deleteMutation = useMutation({
-    mutationFn: (modelName: string) => apiClient.deleteModel(modelName),
-    onSuccess: () => {
+    mutationFn: async (modelName: string) => {
+      console.log('[Delete] Deleting model:', modelName);
+      const result = await apiClient.deleteModel(modelName);
+      console.log('[Delete] Model deleted successfully:', modelName);
+      return result;
+    },
+    onSuccess: async (_data, _modelName) => {
+      console.log('[Delete] onSuccess - showing toast and invalidating queries');
       toast({
         title: 'Model deleted',
         description: `${modelToDelete?.displayName || 'Model'} has been deleted successfully.`,
       });
       setDeleteDialogOpen(false);
       setModelToDelete(null);
-      // Refetch status to update UI
-      queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
+      // Invalidate AND explicitly refetch to ensure UI updates
+      // Using refetchType: 'all' ensures we refetch even if the query is stale
+      console.log('[Delete] Invalidating modelStatus query');
+      await queryClient.invalidateQueries({ 
+        queryKey: ['modelStatus'],
+        refetchType: 'all',
+      });
+      // Also explicitly refetch to guarantee fresh data
+      console.log('[Delete] Explicitly refetching modelStatus query');
+      await queryClient.refetchQueries({ queryKey: ['modelStatus'] });
+      console.log('[Delete] Query refetched');
     },
     onError: (error: Error) => {
+      console.log('[Delete] onError:', error);
       toast({
         title: 'Delete failed',
         description: error.message,
@@ -124,7 +169,7 @@ export function ModelManagement() {
                     <ModelItem
                       key={model.model_name}
                       model={model}
-                      onDownload={() => downloadMutation.mutate(model.model_name)}
+                      onDownload={() => handleDownload(model.model_name)}
                       onDelete={() => {
                         setModelToDelete({
                           name: model.model_name,
@@ -152,7 +197,7 @@ export function ModelManagement() {
                     <ModelItem
                       key={model.model_name}
                       model={model}
-                      onDownload={() => downloadMutation.mutate(model.model_name)}
+                      onDownload={() => handleDownload(model.model_name)}
                       onDelete={() => {
                         setModelToDelete({
                           name: model.model_name,
@@ -168,21 +213,6 @@ export function ModelManagement() {
               </div>
             </div>
 
-            {/* Progress indicators */}
-            <div className="pt-4 border-t">
-              <h3 className="text-sm font-semibold mb-3 text-muted-foreground">
-                Download Progress
-              </h3>
-              <div className="space-y-2">
-                {modelStatus.models.map((model) => (
-                  <ModelProgress
-                    key={model.model_name}
-                    modelName={model.model_name}
-                    displayName={model.display_name}
-                  />
-                ))}
-              </div>
-            </div>
           </div>
         ) : null}
       </CardContent>
@@ -235,16 +265,20 @@ interface ModelItemProps {
     model_name: string;
     display_name: string;
     downloaded: boolean;
+    downloading?: boolean;  // From server - true if download in progress
     size_mb?: number;
     loaded: boolean;
   };
   onDownload: () => void;
   onDelete: () => void;
-  isDownloading: boolean;
+  isDownloading: boolean;  // Local state - true if user just clicked download
   formatSize: (sizeMb?: number) => string;
 }
 
 function ModelItem({ model, onDownload, onDelete, isDownloading, formatSize }: ModelItemProps) {
+  // Use server's downloading state OR local state (for immediate feedback before server updates)
+  const showDownloading = model.downloading || isDownloading;
+  
   return (
     <div className="flex items-center justify-between p-3 border rounded-lg">
       <div className="flex-1">
@@ -255,20 +289,21 @@ function ModelItem({ model, onDownload, onDelete, isDownloading, formatSize }: M
               Loaded
             </Badge>
           )}
-          {model.downloaded && !model.loaded && (
+          {/* Only show Downloaded if actually downloaded AND not downloading */}
+          {model.downloaded && !model.loaded && !showDownloading && (
             <Badge variant="secondary" className="text-xs">
               Downloaded
             </Badge>
           )}
         </div>
-        {model.downloaded && model.size_mb && (
+        {model.downloaded && model.size_mb && !showDownloading && (
           <div className="text-xs text-muted-foreground mt-1">
             Size: {formatSize(model.size_mb)}
           </div>
         )}
       </div>
       <div className="flex items-center gap-2">
-        {model.downloaded ? (
+        {model.downloaded && !showDownloading ? (
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-1 text-sm text-muted-foreground">
               <span>Ready</span>
@@ -283,19 +318,15 @@ function ModelItem({ model, onDownload, onDelete, isDownloading, formatSize }: M
               <Trash2 className="h-4 w-4" />
             </Button>
           </div>
+        ) : showDownloading ? (
+          <Button size="sm" variant="outline" disabled>
+            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            Downloading...
+          </Button>
         ) : (
-          <Button size="sm" onClick={onDownload} disabled={isDownloading} variant="outline">
-            {isDownloading ? (
-              <>
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                Downloading...
-              </>
-            ) : (
-              <>
-                <Download className="h-4 w-4 mr-2" />
-                Download
-              </>
-            )}
+          <Button size="sm" onClick={onDownload} variant="outline">
+            <Download className="h-4 w-4 mr-2" />
+            Download
           </Button>
         )}
       </div>
diff --git a/app/src/components/ServerSettings/ModelProgress.tsx b/app/src/components/ServerSettings/ModelProgress.tsx
index f222ed10..76aa99f1 100644
--- a/app/src/components/ServerSettings/ModelProgress.tsx
+++ b/app/src/components/ServerSettings/ModelProgress.tsx
@@ -8,14 +8,23 @@ import { useServerStore } from '@/stores/serverStore';
 interface ModelProgressProps {
   modelName: string;
   displayName: string;
+  /** Only connect to SSE when actively downloading - prevents connection exhaustion */
+  isDownloading?: boolean;
 }
 
-export function ModelProgress({ modelName, displayName }: ModelProgressProps) {
+export function ModelProgress({ modelName, displayName, isDownloading = false }: ModelProgressProps) {
   const [progress, setProgress] = useState<ModelProgressType | null>(null);
   const serverUrl = useServerStore((state) => state.serverUrl);
 
   useEffect(() => {
-    if (!serverUrl) return;
+    // IMPORTANT: Only connect to SSE when this specific model is downloading
+    // Opening SSE connections for all models exhausts HTTP/1.1 connection limits (6 per origin)
+    // which causes other fetches (like the download trigger) to be queued/blocked
+    if (!serverUrl || !isDownloading) {
+      return;
+    }
+
+    console.log(`[ModelProgress] Connecting SSE for ${modelName}`);
 
     // Subscribe to progress updates via Server-Sent Events
     const eventSource = new EventSource(`${serverUrl}/models/progress/${modelName}`);
@@ -27,6 +36,7 @@ export function ModelProgress({ modelName, displayName }: ModelProgressProps) {
 
         // Close connection if complete or error
         if (data.status === 'complete' || data.status === 'error') {
+          console.log(`[ModelProgress] Download ${data.status} for ${modelName}, closing SSE`);
           eventSource.close();
         }
       } catch (error) {
@@ -35,14 +45,15 @@ export function ModelProgress({ modelName, displayName }: ModelProgressProps) {
     };
 
     eventSource.onerror = (error) => {
-      console.error('SSE error:', error);
+      console.error(`[ModelProgress] SSE error for ${modelName}:`, error);
       eventSource.close();
     };
 
     return () => {
+      console.log(`[ModelProgress] Cleanup - closing SSE for ${modelName}`);
       eventSource.close();
     };
-  }, [serverUrl, modelName]);
+  }, [serverUrl, modelName, isDownloading]);
 
   // Don't render if no progress or if complete/error and some time has passed
   if (
diff --git a/app/src/hooks/useAutoUpdater.ts b/app/src/hooks/useAutoUpdater.ts
index 44940349..7a9f169a 100644
--- a/app/src/hooks/useAutoUpdater.ts
+++ b/app/src/hooks/useAutoUpdater.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { usePlatform } from '@/platform/PlatformContext';
 import type { UpdateStatus } from '@/platform/types';
 
@@ -7,9 +7,8 @@ export type { UpdateStatus };
 
 export function useAutoUpdater(checkOnMount = false) {
   const platform = usePlatform();
-  const [status, setStatus] = useState<UpdateStatus>(
-    platform.updater.getStatus(),
-  );
+  const [status, setStatus] = useState<UpdateStatus>(platform.updater.getStatus());
+  const hasCheckedRef = useRef(false);
 
   // Subscribe to updater status changes
   useEffect(() => {
@@ -17,25 +16,32 @@ export function useAutoUpdater(checkOnMount = false) {
       setStatus(newStatus);
     });
     return unsubscribe;
-  }, [platform]);
+    // Empty dependency array - platform is stable from context
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.subscribe]);
 
   const checkForUpdates = useCallback(async () => {
     await platform.updater.checkForUpdates();
-  }, [platform]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.checkForUpdates]);
 
   const downloadAndInstall = useCallback(async () => {
     await platform.updater.downloadAndInstall();
-  }, [platform]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.downloadAndInstall]);
 
   const restartAndInstall = useCallback(async () => {
     await platform.updater.restartAndInstall();
-  }, [platform]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.restartAndInstall]);
 
   useEffect(() => {
-    if (checkOnMount && platform.metadata.isTauri) {
+    if (checkOnMount && platform.metadata.isTauri && !hasCheckedRef.current) {
+      hasCheckedRef.current = true;
       checkForUpdates();
     }
-  }, [checkOnMount, checkForUpdates, platform.metadata.isTauri]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.metadata.isTauricheckOnMountcheckForUpdates]);
 
   return {
     status,
diff --git a/app/src/hooks/useAutoUpdater.tsx b/app/src/hooks/useAutoUpdater.tsx
index a7562115..8a6351f6 100644
--- a/app/src/hooks/useAutoUpdater.tsx
+++ b/app/src/hooks/useAutoUpdater.tsx
@@ -44,19 +44,24 @@ export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false)
       setStatus(newStatus);
     });
     return unsubscribe;
-  }, [platform]);
+    // Empty dependency array - platform is stable from context
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.subscribe]);
 
   const checkForUpdates = useCallback(async () => {
     await platform.updater.checkForUpdates();
-  }, [platform]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.checkForUpdates]);
 
   const downloadAndInstall = useCallback(async () => {
     await platform.updater.downloadAndInstall();
-  }, [platform]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.downloadAndInstall]);
 
   const restartAndInstall = useCallback(async () => {
     await platform.updater.restartAndInstall();
-  }, [platform]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.restartAndInstall]);
 
   // Check for updates on mount
   useEffect(() => {
@@ -66,7 +71,9 @@ export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false)
         console.error('Auto update check failed:', error);
       });
     }
-  }, [checkOnMount, checkForUpdates, platform.metadata.isTauri]);
+    // Empty dependency array - only run once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.metadata.isTauricheckOnMountcheckForUpdates]);
 
   // Show toast when update is available
   useEffect(() => {
diff --git a/app/src/lib/api/client.ts b/app/src/lib/api/client.ts
index cd87ab89..c5b079b2 100644
--- a/app/src/lib/api/client.ts
+++ b/app/src/lib/api/client.ts
@@ -310,10 +310,13 @@ class ApiClient {
   }
 
   async triggerModelDownload(modelName: string): Promise<{ message: string }> {
-    return this.request<{ message: string }>('/models/download', {
+    console.log('[API] triggerModelDownload called for:', modelName, 'at', new Date().toISOString());
+    const result = await this.request<{ message: string }>('/models/download', {
       method: 'POST',
       body: JSON.stringify({ model_name: modelName } as ModelDownloadRequest),
     });
+    console.log('[API] triggerModelDownload response:', result);
+    return result;
   }
 
   async deleteModel(modelName: string): Promise<{ message: string }> {
diff --git a/app/src/lib/api/models/ModelStatus.ts b/app/src/lib/api/models/ModelStatus.ts
index e8b806b3..0d744893 100644
--- a/app/src/lib/api/models/ModelStatus.ts
+++ b/app/src/lib/api/models/ModelStatus.ts
@@ -9,6 +9,7 @@ export type ModelStatus = {
   model_name: string;
   display_name: string;
   downloaded: boolean;
+  downloading?: boolean;  // True if download is in progress
   size_mb?: number | null;
   loaded?: boolean;
 };
diff --git a/app/src/lib/api/types.ts b/app/src/lib/api/types.ts
index 6da3161a..131c1be5 100644
--- a/app/src/lib/api/types.ts
+++ b/app/src/lib/api/types.ts
@@ -96,6 +96,7 @@ export interface ModelStatus {
   model_name: string;
   display_name: string;
   downloaded: boolean;
+  downloading: boolean;  // True if download is in progress
   size_mb?: number;
   loaded: boolean;
 }
diff --git a/app/src/lib/hooks/useModelDownloadToast.tsx b/app/src/lib/hooks/useModelDownloadToast.tsx
index d1865bb4..b78fdc9c 100644
--- a/app/src/lib/hooks/useModelDownloadToast.tsx
+++ b/app/src/lib/hooks/useModelDownloadToast.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useToast } from '@/components/ui/use-toast';
 import { useServerStore } from '@/stores/serverStore';
 import { Progress } from '@/components/ui/progress';
@@ -9,6 +9,8 @@ interface UseModelDownloadToastOptions {
   modelName: string;
   displayName: string;
   enabled?: boolean;
+  onComplete?: () => void;
+  onError?: () => void;
 }
 
 /**
@@ -19,47 +21,59 @@ export function useModelDownloadToast({
   modelName,
   displayName,
   enabled = false,
+  onComplete,
+  onError,
 }: UseModelDownloadToastOptions) {
   const { toast } = useToast();
   const serverUrl = useServerStore((state) => state.serverUrl);
   const toastIdRef = useRef<string | null>(null);
-  const toastUpdateRef = useRef<
-    ((props: {
-      title?: React.ReactNode;
-      description?: React.ReactNode;
-      duration?: number;
-      variant?: 'default' | 'destructive';
-      open?: boolean;
-    }) => void) | null
-  >(null);
+  // biome-ignore lint: Using any for toast update ref to handle complex toast types
+  const toastUpdateRef = useRef<any>(null);
   const eventSourceRef = useRef<EventSource | null>(null);
 
-  const formatBytes = (bytes: number): string => {
+  const formatBytes = useCallback((bytes: number): string => {
     if (bytes === 0) return '0 B';
     const k = 1024;
     const sizes = ['B', 'KB', 'MB', 'GB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
-  };
+  }, []);
 
   useEffect(() => {
+    console.log('[useModelDownloadToast] useEffect triggered', { enabled, serverUrl, modelName, displayName });
+    
     if (!enabled || !serverUrl || !modelName) {
+      console.log('[useModelDownloadToast] Not enabled, skipping');
       return;
     }
 
+    console.log('[useModelDownloadToast] Creating toast and EventSource for:', modelName);
+    
     // Create initial toast
     const toastResult = toast({
       title: displayName,
-      description: 'Starting download...',
+      description: (
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span>Connecting to download...</span>
+        </div>
+      ),
       duration: Infinity, // Don't auto-dismiss, we'll handle it manually
     });
     toastIdRef.current = toastResult.id;
     toastUpdateRef.current = toastResult.update;
 
     // Subscribe to progress updates via Server-Sent Events
-    const eventSource = new EventSource(`${serverUrl}/models/progress/${modelName}`);
+    const eventSourceUrl = `${serverUrl}/models/progress/${modelName}`;
+    console.log('[useModelDownloadToast] Creating EventSource to:', eventSourceUrl);
+    const eventSource = new EventSource(eventSourceUrl);
+
+    eventSource.onopen = () => {
+      console.log('[useModelDownloadToast] EventSource connection opened for:', modelName);
+    };
 
     eventSource.onmessage = (event) => {
+      console.log('[useModelDownloadToast] Received SSE message:', event.data);
       try {
         const progress = JSON.parse(event.data) as ModelProgress;
 
@@ -86,7 +100,7 @@ export function useModelDownloadToast({
               break;
             case 'downloading':
               statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
-              statusText = progress.filename ? `Downloading ${progress.filename}...` : 'Downloading...';
+              statusText = progress.filename || 'Downloading...';
               break;
             case 'extracting':
               statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
@@ -121,6 +135,15 @@ export function useModelDownloadToast({
             eventSource.close();
             eventSourceRef.current = null;
 
+            // Call callbacks
+            if (progress.status === 'complete' && onComplete) {
+              console.log('[useModelDownloadToast] Download complete, calling onComplete callback');
+              onComplete();
+            } else if (progress.status === 'error' && onError) {
+              console.log('[useModelDownloadToast] Download error, calling onError callback');
+              onError();
+            }
+
             // Auto-dismiss on completion after delay
             if (progress.status === 'complete') {
               setTimeout(() => {
@@ -141,7 +164,8 @@ export function useModelDownloadToast({
     };
 
     eventSource.onerror = (error) => {
-      console.error('SSE error:', error);
+      console.error('[useModelDownloadToast] SSE error for:', modelName, error);
+      console.log('[useModelDownloadToast] EventSource readyState:', eventSource.readyState);
       eventSource.close();
       eventSourceRef.current = null;
 
@@ -162,13 +186,14 @@ export function useModelDownloadToast({
 
     // Cleanup on unmount or when disabled
     return () => {
+      console.log('[useModelDownloadToast] Cleanup - closing EventSource for:', modelName);
       if (eventSourceRef.current) {
         eventSourceRef.current.close();
         eventSourceRef.current = null;
       }
       // Note: We don't dismiss the toast here as it might still be showing completion state
     };
-  }, [enabled, serverUrl, modelName, displayName, toast]);
+  }, [enabled, serverUrl, modelName, displayName, toast, formatBytes, onComplete, onError]);
 
   return {
     isTracking: enabled && eventSourceRef.current !== null,
diff --git a/backend/main.py b/backend/main.py
index 7ac2ed93..40c39a33 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -1161,6 +1161,10 @@ async def get_model_status():
     import os
     
     backend_type = get_backend_type()
+    task_manager = get_task_manager()
+    
+    # Get set of currently downloading models
+    active_downloads = {task.model_name for task in task_manager.get_active_downloads()}
     
     # Try to import scan_cache_dir (might not be available in older versions)
     try:
@@ -1328,10 +1332,18 @@ async def get_model_status():
             except Exception:
                 loaded = False
             
+            # Check if this model is currently being downloaded
+            is_downloading = config["model_name"] in active_downloads
+            
+            # If downloading, don't report as downloaded (partial files exist)
+            if is_downloading:
+                downloaded = False
+            
             statuses.append(models.ModelStatus(
                 model_name=config["model_name"],
                 display_name=config["display_name"],
                 downloaded=downloaded,
+                downloading=is_downloading,
                 size_mb=size_mb,
                 loaded=loaded,
             ))
@@ -1342,10 +1354,14 @@ async def get_model_status():
             except Exception:
                 loaded = False
             
+            # Check if this model is currently being downloaded
+            is_downloading = config["model_name"] in active_downloads
+            
             statuses.append(models.ModelStatus(
                 model_name=config["model_name"],
                 display_name=config["display_name"],
                 downloaded=False,  # Assume not downloaded if check failed
+                downloading=is_downloading,
                 size_mb=None,
                 loaded=loaded,
             ))
diff --git a/backend/models.py b/backend/models.py
index 7e72cd13..59e45405 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -134,6 +134,7 @@ class ModelStatus(BaseModel):
     model_name: str
     display_name: str
     downloaded: bool
+    downloading: bool = False  # True if download is in progress
     size_mb: Optional[float] = None
     loaded: bool = False
 
diff --git a/tauri/src-tauri/gen/Assets.car b/tauri/src-tauri/gen/Assets.car
index 0ebcba9463de31c656da9673595c683054e8867b..add24cf4c32889361f774ad6c96b517e8d5212d1 100644
GIT binary patch
delta 825
zcmZY7J5Q8B6b4|H6<O|HKmkEO#rt7rzPZzU%r%sh`~y2<X<=bvv9yF3D|-?wOej7I
z3;zLsz}}68Q4>S!t3tJtJjqn=nK^m)zJ6=%!N=3}<(Z+Op=lU{4otx$Ou+c@&-K%p
zeKvBiquId^#ST8hD(<iKQtS8ed;M#;_9>XCgrmZvAep=%mrW)vvo%46sH;RmGGmGT
zJ6xL(gjccJc=7z%{@UW3zU%c}3x=T$mtX`g!)ViYojg*zEST2_&QV#C)<&{H8gkrl
zt*kXR^1(Tka+?32v()U>owx0pc@vq*g1ps=q$(O2m7yw09|LEZYc?1pgtGA>=w<B8
zwd&wQiLw;RK1!0@Cvu5#Dy|Yq1({PN2ZO4@M7Rj*r_MsV)?TF|lOvUNAgruVkOC_#
zC0VXB%XaWZQFvR<zc%07-R{5`jKc&>!W2xy3|xV$a1E}*EX=_TxCwtV7GM!>!4fRP
zZCHU-Sc5xo7w*A2+=mD75FWwfW_SC^*;y@_<Jq7M%o_9}ia<_jLn(?%Y406Nc5pkE
z3sKH{(L3CF3IrR_1qK`{5FkM{hg-V&UZV$@XHgMPJdxCqk>^g36;@}jlW;)~4wS*U
jbTROxYkDVL3$8ioZnj^wX5W1}+FWVPH(!o6KaBnXcI4!;

delta 825
zcmZwFJ5N+W6bJBK)|KV$0~Bx(Q1N}(c|W$f+&gzBl$3k}J7Z~KVPdh{l8v#lC&9vm
z;%;H#H{c7<yRk58L+hUa)p~D!nQH#$oXP3`_*w76*ORTaxmv9@3kxt0Q_zALm_Giq
zb+T~4nu86)2ER2M?BV>5^Sx=;Pme#FzZ02KDKR4%X&D`<R0t}VvLw9awhYlSUy}2l
zD`MxLa0O$Lr<BX>H?LnEY_5J7`QFIaVFDU(4VrKrCaaNe#b%ZV$$c^fF~@UKf*UHl
zV<d&q(iPf;#K!9|<~+Zs)2{ki>tiERrI0$8o~#cDiY%aE8_AYYod3dmH6Fx`D9fv$
zx1qIE&oH+vaf>)ZGfKpQ3TZs~sEkTJc#CewCTGdS%gNi-sBEn?vXtk+M(@Z-hafK!
z<w0-?x=>tsu9LK5K}p0E#6?HTz5U%5Ou;nFz%0zcJS@NsxCyu5HY~yt+=07rp0NU}
za1YwB2KQkdHeeGTz(aThTksg3z*Bez&#V327iVXg&6z2!4it^G*b5iQr<`FggwCx?
zEc*Yvjwz+hFZZH%xbqSSwxI(II0%rSKv#!5ruvnkOpKi6<Vr3{1ue-jp2#_eUXsQ_
pnz2`mQuC;;3JyEAH|#j@)v(iTysIyN`gYV^uP;`oN8K-z{{VHc<ZS=|