Refactor App and Sidebar components to support macOS, add TitleBarDragRegion for improved window dragging, and enhance model management with delete functionality and download progress tracking. Update audio player to handle audio resets more effectively and improve generation form with model download notifications.

app/src/App.tsx

@@ -9,10 +9,11 @@ import { ServerStatus } from '@/components/ServerSettings/ServerStatus';
 import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
 import ShinyText from '@/components/ShinyText';
 import { Sidebar } from '@/components/Sidebar';
+import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
 import { UpdateNotification } from '@/components/UpdateNotification';
 import { Toaster } from '@/components/ui/toaster';
 import { ProfileList } from '@/components/VoiceProfiles/ProfileList';
-import { isTauri, setupWindowCloseHandler, startServer } from '@/lib/tauri';
+import { isTauri, isMacOS, setupWindowCloseHandler, startServer } from '@/lib/tauri';
 
 // Track if server is starting to prevent duplicate starts
 let serverStarting = false;
@@ -115,36 +116,38 @@ function App() {
   // Show loading screen while server is starting in Tauri
   if (isTauri() && !serverReady) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center space-y-6">
-          <div className="flex justify-center relative">
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="w-48 h-48 rounded-full bg-accent/20 blur-3xl" />
+      <div className="min-h-screen bg-background flex items-center justify-center pt-12">
+        <TitleBarDragRegion />
+          <div className="text-center space-y-6">
+            <div className="flex justify-center relative">
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-48 h-48 rounded-full bg-accent/20 blur-3xl" />
+              </div>
+              <img
+                src={voiceboxLogo}
+                alt="Voicebox"
+                className="w-48 h-48 object-contain animate-fade-in-scale relative z-10"
+              />
+            </div>
+            <div className="animate-fade-in-delayed">
+              <ShinyText
+                text={LOADING_MESSAGES[loadingMessageIndex]}
+                className="text-lg font-medium text-muted-foreground"
+                speed={2}
+                color="hsl(var(--muted-foreground))"
+                shineColor="hsl(var(--foreground))"
+              />
             </div>
-            <img
-              src={voiceboxLogo}
-              alt="Voicebox"
-              className="w-48 h-48 object-contain animate-fade-in-scale relative z-10"
-            />
           </div>
-          <div className="animate-fade-in-delayed">
-            <ShinyText
-              text={LOADING_MESSAGES[loadingMessageIndex]}
-              className="text-lg font-medium text-muted-foreground"
-              speed={2}
-              color="hsl(var(--muted-foreground))"
-              shineColor="hsl(var(--foreground))"
-            />
-          </div>
-        </div>
       </div>
     );
   }
 
   return (
-    <div className="h-screen bg-background flex flex-col overflow-hidden">
+    <div className="h-screen bg-background flex flex-col overflow-hidden pt-12">
+      <TitleBarDragRegion />
       <div className="flex flex-1 min-h-0 overflow-hidden">
-        <Sidebar activeTab={activeTab} onTabChange={setActiveTab} />
+        <Sidebar activeTab={activeTab} onTabChange={setActiveTab} isMacOS={isMacOS()} />
 
         <main className="flex-1 ml-20 overflow-hidden flex flex-col">
           <div className="container mx-auto px-8 max-w-[1800px] h-full overflow-hidden flex flex-col">

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -9,6 +9,7 @@ import { usePlayerStore } from '@/stores/playerStore';
 export function AudioPlayer() {
   const {
     audioUrl,
+    audioId,
     title,
     isPlaying,
     currentTime,
@@ -25,6 +26,9 @@ export function AudioPlayer() {
   const waveformRef = useRef<HTMLDivElement>(null);
   const wavesurferRef = useRef<WaveSurfer | null>(null);
   const loadingRef = useRef(false);
+  const previousAudioIdRef = useRef<string | null>(null);
+  const previousCurrentTimeRef = useRef<number>(0);
+  const hasInitializedRef = useRef(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -354,6 +358,61 @@ export function AudioPlayer() {
     }
   }, [volume]);
 
+  // Mark as initialized when audio is ready, reset when audioId changes
+  useEffect(() => {
+    if (duration > 0 && audioId) {
+      hasInitializedRef.current = true;
+    }
+    // Reset initialization flag when audioId changes to a new audio
+    if (audioId !== previousAudioIdRef.current && previousAudioIdRef.current !== null) {
+      hasInitializedRef.current = false;
+    }
+  }, [duration, audioId]);
+
+  // Handle clicking the same audio again - always restart from beginning
+  // When setAudio is called with the same audioId, it sets currentTime to 0 in the store
+  // but WaveSurfer's actual position is still wherever it was. We detect this mismatch and reset.
+  useEffect(() => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer || !audioId || duration === 0 || !hasInitializedRef.current) {
+      // Update the refs even if we don't process
+      if (audioId !== null) {
+        previousAudioIdRef.current = audioId;
+      }
+      previousCurrentTimeRef.current = currentTime;
+      return;
+    }
+
+    const previousAudioId = previousAudioIdRef.current;
+    const previousCurrentTime = previousCurrentTimeRef.current;
+    
+    // Check if the same audio was clicked again
+    // This happens when:
+    // 1. audioId matches the previous one (same audio)
+    // 2. currentTime was reset from a non-zero value to 0 (setAudio was called)
+    // 3. WaveSurfer is not at the beginning (needs reset)
+    const wasResetToZero = previousCurrentTime > 0.1 && currentTime < 0.1;
+    const isSameAudio = audioId === previousAudioId;
+    const wavesurferPosition = wavesurfer.getCurrentTime();
+    const wavesurferNotAtStart = wavesurferPosition > 0.1;
+
+    // Update refs for next time
+    previousAudioIdRef.current = audioId;
+    previousCurrentTimeRef.current = currentTime;
+
+    // If same audio was clicked (reset to 0) and WaveSurfer is not at start, reset it
+    if (isSameAudio && wasResetToZero && wavesurferNotAtStart) {
+      // Reset to beginning and play
+      console.log('Same audio clicked again, resetting to beginning');
+      wavesurfer.seekTo(0);
+      wavesurfer.play().catch((error) => {
+        console.error('Failed to play after reset:', error);
+        setIsPlaying(false);
+        setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
+      });
+    }
+  }, [audioId, duration, currentTime, setIsPlaying]);
+
   // Handle loop - WaveSurfer handles this via the 'finish' event
 
   const handlePlayPause = () => {

app/src/components/Generation/GenerationForm.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2, Mic } from 'lucide-react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { Button } from '@/components/ui/button';
@@ -25,6 +26,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
 import { useGeneration } from '@/lib/hooks/useGeneration';
+import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
 import { useProfile } from '@/lib/hooks/useProfiles';
 import { useGenerationStore } from '@/stores/generationStore';
 import { usePlayerStore } from '@/stores/playerStore';
@@ -47,6 +49,15 @@ export function GenerationForm() {
   const { toast } = useToast();
   const setAudio = usePlayerStore((state) => state.setAudio);
   const setIsGenerating = useGenerationStore((state) => state.setIsGenerating);
+  const [downloadingModelName, setDownloadingModelName] = useState<string | null>(null);
+  const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
+
+  // Use the download toast hook to show progress when model is downloading
+  useModelDownloadToast({
+    modelName: downloadingModelName || '',
+    displayName: downloadingDisplayName || '',
+    enabled: !!downloadingModelName,
+  });
 
   const form = useForm<GenerationFormValues>({
     resolver: zodResolver(generationSchema),
@@ -71,6 +82,27 @@ export function GenerationForm() {
 
     try {
       setIsGenerating(true);
+
+      // Determine model name and display name
+      const modelName = `qwen-tts-${data.modelSize}`;
+      const displayName = data.modelSize === '1.7B' ? 'Qwen TTS 1.7B' : 'Qwen TTS 0.6B';
+
+      // Check if model is downloaded before starting generation
+      try {
+        const modelStatus = await apiClient.getModelStatus();
+        const model = modelStatus.models.find((m) => m.model_name === modelName);
+
+        if (model && !model.downloaded) {
+          // Model is not downloaded, enable download toast
+          setDownloadingModelName(modelName);
+          setDownloadingDisplayName(displayName);
+        }
+      } catch (error) {
+        // If status check fails, continue anyway - generation will handle it
+        console.error('Failed to check model status:', error);
+      }
+
+      // Proceed with generation (which will trigger download if needed)
       const result = await generation.mutateAsync({
         profile_id: selectedProfileId,
         text: data.text,
@@ -98,6 +130,9 @@ export function GenerationForm() {
       });
     } finally {
       setIsGenerating(false);
+      // Clear download state after generation completes
+      setDownloadingModelName(null);
+      setDownloadingDisplayName(null);
     }
   }
 

app/src/components/History/HistoryTable.tsx

@@ -1,5 +1,5 @@
 import { AudioWaveform, Download, MoreHorizontal, Play, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -20,6 +20,8 @@ import { usePlayerStore } from '@/stores/playerStore';
 // NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS
 export function HistoryTable() {
   const [page, setPage] = useState(0);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
   const limit = 20;
 
   const { data: historyData, isLoading } = useHistory({
@@ -34,6 +36,18 @@ export function HistoryTable() {
   const audioUrl = usePlayerStore((state) => state.audioUrl);
   const isPlayerVisible = !!audioUrl;
 
+  useEffect(() => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+
+    const handleScroll = () => {
+      setIsScrolled(scrollEl.scrollTop > 0);
+    };
+
+    scrollEl.addEventListener('scroll', handleScroll);
+    return () => scrollEl.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const handlePlay = (audioId: string, text: string) => {
     const audioUrl = apiClient.getAudioUrl(audioId);
     // If clicking the same audio that's playing, it will be handled by the player
@@ -64,14 +78,18 @@ export function HistoryTable() {
   const hasMore = history.length === limit && (page + 1) * limit < total;
 
   return (
-    <div className="flex flex-col h-full min-h-0">
+    <div className="flex flex-col h-full min-h-0 relative">
       {history.length === 0 ? (
         <div className="text-center py-12 text-muted-foreground flex-1 flex items-center justify-center">
           No generation history yet. Generate your first audio to see it here.
         </div>
       ) : (
         <>
+          {isScrolled && (
+            <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
+          )}
           <div
+            ref={scrollRef}
             className={cn(
               'flex-1 min-h-0 overflow-y-auto space-y-2',
               isPlayerVisible && 'max-h-[calc(100vh-117px)]',

app/src/components/ServerSettings/ModelManagement.tsx

@@ -4,14 +4,26 @@ import { apiClient } from '@/lib/api/client';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Loader2, Download, CheckCircle2 } from 'lucide-react';
+import { Loader2, Download, CheckCircle2, Trash2 } from 'lucide-react';
 import { ModelProgress } from './ModelProgress';
 import { useToast } from '@/components/ui/use-toast';
+import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 
 export function ModelManagement() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [downloadingModel, setDownloadingModel] = useState<string | null>(null);
+  const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
 
   const { data: modelStatus, isLoading } = useQuery({
     queryKey: ['modelStatus'],
@@ -19,16 +31,29 @@ export function ModelManagement() {
     refetchInterval: 5000, // Refresh every 5 seconds
   });
 
+  // Use progress toast hook for the downloading model
+  useModelDownloadToast({
+    modelName: downloadingModel || '',
+    displayName: downloadingDisplayName || '',
+    enabled: !!downloadingModel && !!downloadingDisplayName,
+  });
+
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [modelToDelete, setModelToDelete] = useState<{
+    name: string;
+    displayName: string;
+    sizeMb?: number;
+  } | null>(null);
+
   const downloadMutation = useMutation({
     mutationFn: (modelName: string) => {
       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: (_, modelName) => {
-      toast({
-        title: 'Download started',
-        description: `Downloading ${modelName}...`,
-      });
+    onSuccess: () => {
       // Refetch status after a delay to see progress
       setTimeout(() => {
         queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
@@ -36,6 +61,7 @@ export function ModelManagement() {
     },
     onError: (error: Error) => {
       setDownloadingModel(null);
+      setDownloadingDisplayName(null);
       toast({
         title: 'Download failed',
         description: error.message,
@@ -46,10 +72,32 @@ export function ModelManagement() {
       // Clear downloading state after a delay to allow progress to show
       setTimeout(() => {
         setDownloadingModel(null);
+        setDownloadingDisplayName(null);
       }, 2000);
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (modelName: string) => apiClient.deleteModel(modelName),
+    onSuccess: () => {
+      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'] });
+    },
+    onError: (error: Error) => {
+      toast({
+        title: 'Delete failed',
+        description: error.message,
+        variant: 'destructive',
+      });
+    },
+  });
+
   const formatSize = (sizeMb?: number): string => {
     if (!sizeMb) return 'Unknown';
     if (sizeMb < 1024) return `${sizeMb.toFixed(1)} MB`;
@@ -84,6 +132,14 @@ export function ModelManagement() {
                       key={model.model_name}
                       model={model}
                       onDownload={() => downloadMutation.mutate(model.model_name)}
+                      onDelete={() => {
+                        setModelToDelete({
+                          name: model.model_name,
+                          displayName: model.display_name,
+                          sizeMb: model.size_mb,
+                        });
+                        setDeleteDialogOpen(true);
+                      }}
                       isDownloading={downloadingModel === model.model_name}
                       formatSize={formatSize}
                     />
@@ -104,6 +160,14 @@ export function ModelManagement() {
                       key={model.model_name}
                       model={model}
                       onDownload={() => downloadMutation.mutate(model.model_name)}
+                      onDelete={() => {
+                        setModelToDelete({
+                          name: model.model_name,
+                          displayName: model.display_name,
+                          sizeMb: model.size_mb,
+                        });
+                        setDeleteDialogOpen(true);
+                      }}
                       isDownloading={downloadingModel === model.model_name}
                       formatSize={formatSize}
                     />
@@ -129,6 +193,46 @@ export function ModelManagement() {
           </div>
         ) : null}
       </CardContent>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Model</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete <strong>{modelToDelete?.displayName}</strong>?
+              {modelToDelete?.sizeMb && (
+                <>
+                  {' '}
+                  This will free up {formatSize(modelToDelete.sizeMb)} of disk space. The model
+                  will need to be re-downloaded if you want to use it again.
+                </>
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (modelToDelete) {
+                  deleteMutation.mutate(modelToDelete.name);
+                }
+              }}
+              disabled={deleteMutation.isPending}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleteMutation.isPending ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Card>
   );
 }
@@ -142,11 +246,18 @@ interface ModelItemProps {
     loaded: boolean;
   };
   onDownload: () => void;
+  onDelete: () => void;
   isDownloading: boolean;
   formatSize: (sizeMb?: number) => string;
 }
 
-function ModelItem({ model, onDownload, isDownloading, formatSize }: ModelItemProps) {
+function ModelItem({
+  model,
+  onDownload,
+  onDelete,
+  isDownloading,
+  formatSize,
+}: ModelItemProps) {
   return (
     <div className="flex items-center justify-between p-3 border rounded-lg">
       <div className="flex-1">
@@ -171,9 +282,21 @@ function ModelItem({ model, onDownload, isDownloading, formatSize }: ModelItemPr
       </div>
       <div className="flex items-center gap-2">
         {model.downloaded ? (
-          <div className="flex items-center gap-1 text-sm text-muted-foreground">
-            <CheckCircle2 className="h-4 w-4 text-green-500" />
-            <span>Ready</span>
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1 text-sm text-muted-foreground">
+              <CheckCircle2 className="h-4 w-4 text-green-500" />
+              <span>Ready</span>
+            </div>
+            <Button
+              size="sm"
+              onClick={onDelete}
+              variant="outline"
+              className="text-destructive hover:text-destructive"
+              disabled={model.loaded}
+              title={model.loaded ? 'Unload model before deleting' : 'Delete model'}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
           </div>
         ) : (
           <Button size="sm" onClick={onDownload} disabled={isDownloading} variant="outline">

app/src/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import { usePlayerStore } from '@/stores/playerStore';
 interface SidebarProps {
   activeTab: string;
   onTabChange: (tab: string) => void;
+  isMacOS?: boolean;
 }
 
 const tabs = [
@@ -14,13 +15,16 @@ const tabs = [
   { id: 'settings', icon: Settings, label: 'Settings' },
 ];
 
-export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
+export function Sidebar({ activeTab, onTabChange, isMacOS }: SidebarProps) {
   const isGenerating = useGenerationStore((state) => state.isGenerating);
   const audioUrl = usePlayerStore((state) => state.audioUrl);
   const isPlayerVisible = !!audioUrl;
 
   return (
-    <div className="fixed left-0 top-0 h-full w-20 bg-sidebar border-r border-border flex flex-col items-center py-6 gap-6">
+    <div className={cn(
+      "fixed left-0 top-0 h-full w-20 bg-sidebar border-r border-border flex flex-col items-center py-6 gap-6",
+      isMacOS && "pt-14"
+    )}>
       {/* Logo */}
       <div className="mb-2">
         <img src={voiceboxLogo} alt="Voicebox" className="w-12 h-12 object-contain" />

app/src/components/TitleBarDragRegion.tsx

@@ -0,0 +1,8 @@
+export function TitleBarDragRegion() {
+  return (
+    <div
+      data-tauri-drag-region
+      className="fixed top-0 left-0 right-0 h-12 z-[9999]"
+    />
+  );
+}

app/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,114 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

app/src/lib/api/client.ts

@@ -219,6 +219,12 @@ class ApiClient {
       body: JSON.stringify({ model_name: modelName } as ModelDownloadRequest),
     });
   }
+
+  async deleteModel(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>(`/models/${modelName}`, {
+      method: 'DELETE',
+    });
+  }
 }
 
 export const apiClient = new ApiClient();

app/src/lib/hooks/useModelDownloadToast.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useRef } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+import { useServerStore } from '@/stores/serverStore';
+import { Progress } from '@/components/ui/progress';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import type { ModelProgress } from '@/lib/api/types';
+
+interface UseModelDownloadToastOptions {
+  modelName: string;
+  displayName: string;
+  enabled?: boolean;
+}
+
+/**
+ * Hook to show and update a toast notification with model download progress.
+ * Subscribes to Server-Sent Events for real-time progress updates.
+ */
+export function useModelDownloadToast({
+  modelName,
+  displayName,
+  enabled = false,
+}: 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);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  const formatBytes = (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(() => {
+    if (!enabled || !serverUrl || !modelName) {
+      return;
+    }
+
+    // Create initial toast
+    const toastResult = toast({
+      title: displayName,
+      description: 'Starting download...',
+      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}`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const progress = JSON.parse(event.data) as ModelProgress;
+
+        // Update toast with progress
+        if (toastIdRef.current && toastUpdateRef.current) {
+          const progressPercent = progress.total > 0 ? progress.progress : 0;
+          const progressText =
+            progress.total > 0
+              ? `${formatBytes(progress.current)} / ${formatBytes(progress.total)} (${progress.progress.toFixed(1)}%)`
+              : '';
+
+          // Determine status icon and text
+          let statusIcon: React.ReactNode = null;
+          let statusText = 'Processing...';
+
+          switch (progress.status) {
+            case 'complete':
+              statusIcon = <CheckCircle2 className="h-4 w-4 text-green-500" />;
+              statusText = 'Download complete';
+              break;
+            case 'error':
+              statusIcon = <XCircle className="h-4 w-4 text-destructive" />;
+              statusText = `Error: ${progress.error || 'Unknown error'}`;
+              break;
+            case 'downloading':
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
+              statusText = progress.filename ? `Downloading ${progress.filename}...` : 'Downloading...';
+              break;
+            case 'extracting':
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
+              statusText = 'Extracting...';
+              break;
+          }
+
+          toastUpdateRef.current({
+            title: (
+              <div className="flex items-center gap-2">
+                {statusIcon}
+                <span>{displayName}</span>
+              </div>
+            ),
+            description: (
+              <div className="space-y-2">
+                <div className="text-sm">{statusText}</div>
+                {progress.total > 0 && (
+                  <>
+                    <Progress value={progressPercent} className="h-2" />
+                    <div className="text-xs text-muted-foreground">{progressText}</div>
+                  </>
+                )}
+              </div>
+            ),
+            duration: progress.status === 'complete' ? 5000 : Infinity,
+            variant: progress.status === 'error' ? 'destructive' : 'default',
+          });
+
+          // Close connection and dismiss toast on completion or error
+          if (progress.status === 'complete' || progress.status === 'error') {
+            eventSource.close();
+            eventSourceRef.current = null;
+
+            // Auto-dismiss on completion after delay
+            if (progress.status === 'complete') {
+              setTimeout(() => {
+                if (toastIdRef.current && toastUpdateRef.current) {
+                  toastUpdateRef.current({
+                    open: false,
+                  });
+                  toastIdRef.current = null;
+                  toastUpdateRef.current = null;
+                }
+              }, 5000);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error parsing progress event:', error);
+      }
+    };
+
+    eventSource.onerror = () => {
+      console.error('SSE error');
+      eventSource.close();
+      eventSourceRef.current = null;
+
+      // Show error toast
+      if (toastIdRef.current && toastUpdateRef.current) {
+        toastUpdateRef.current({
+          title: displayName,
+          description: 'Failed to track download progress',
+          variant: 'destructive',
+          duration: 5000,
+        });
+        toastIdRef.current = null;
+        toastUpdateRef.current = null;
+      }
+    };
+
+    eventSourceRef.current = eventSource;
+
+    // Cleanup on unmount or when disabled
+    return () => {
+      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]);
+
+  return {
+    isTracking: enabled && eventSourceRef.current !== null,
+  };
+}

app/src/lib/tauri.ts

@@ -12,6 +12,13 @@ export function isTauri(): boolean {
   return '__TAURI_INTERNALS__' in window;
 }
 
+/**
+ * Check if running on macOS
+ */
+export function isMacOS(): boolean {
+  return navigator.platform.toLowerCase().includes('mac');
+}
+
 /**
  * Start the bundled Python server (Tauri only)
  */

backend/main.py

@@ -314,9 +314,9 @@ async def generate_speech(
         
         # Generate audio
         tts_model = tts.get_tts_model()
-        # Load the requested model size if different from current
+        # Load the requested model size if different from current (async to not block)
         model_size = data.model_size or "1.7B"
-        tts_model.load_model(model_size)
+        await tts_model.load_model_async(model_size)
         audio, sample_rate = await tts_model.generate(
             data.text,
             voice_prompt,
@@ -519,7 +519,7 @@ async def load_model(model_size: str = "1.7B"):
     """Manually load TTS model."""
     try:
         tts_model = tts.get_tts_model()
-        tts_model.load_model(model_size)
+        await tts_model.load_model_async(model_size)
         return {"message": f"Model {model_size} loaded successfully"}
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
@@ -784,6 +784,88 @@ async def trigger_model_download(request: models.ModelDownloadRequest):
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@app.delete("/models/{model_name}")
+async def delete_model(model_name: str):
+    """Delete a downloaded model from the HuggingFace cache."""
+    import shutil
+    import os
+    
+    # Map model names to HuggingFace repo IDs
+    model_configs = {
+        "qwen-tts-1.7B": {
+            "hf_repo_id": "Qwen/Qwen3-TTS-12Hz-1.7B-Base",
+            "model_size": "1.7B",
+            "model_type": "tts",
+        },
+        "qwen-tts-0.6B": {
+            "hf_repo_id": "Qwen/Qwen3-TTS-12Hz-0.6B-Base",
+            "model_size": "0.6B",
+            "model_type": "tts",
+        },
+        "whisper-base": {
+            "hf_repo_id": "openai/whisper-base",
+            "model_size": "base",
+            "model_type": "whisper",
+        },
+        "whisper-small": {
+            "hf_repo_id": "openai/whisper-small",
+            "model_size": "small",
+            "model_type": "whisper",
+        },
+        "whisper-medium": {
+            "hf_repo_id": "openai/whisper-medium",
+            "model_size": "medium",
+            "model_type": "whisper",
+        },
+        "whisper-large": {
+            "hf_repo_id": "openai/whisper-large",
+            "model_size": "large",
+            "model_type": "whisper",
+        },
+    }
+    
+    if model_name not in model_configs:
+        raise HTTPException(status_code=400, detail=f"Unknown model: {model_name}")
+    
+    config = model_configs[model_name]
+    hf_repo_id = config["hf_repo_id"]
+    
+    try:
+        # Check if model is loaded and unload it first
+        if config["model_type"] == "tts":
+            tts_model = tts.get_tts_model()
+            if tts_model.is_loaded() and tts_model.model_size == config["model_size"]:
+                tts.unload_tts_model()
+        elif config["model_type"] == "whisper":
+            whisper_model = transcribe.get_whisper_model()
+            if whisper_model.is_loaded() and whisper_model.model_size == config["model_size"]:
+                transcribe.unload_whisper_model()
+        
+        # Find and delete the cache directory
+        cache_dir = os.path.expanduser("~/.cache/huggingface/hub")
+        repo_cache_dir = Path(cache_dir) / ("models--" + hf_repo_id.replace("/", "--"))
+        
+        # Check if the cache directory exists
+        if not repo_cache_dir.exists():
+            raise HTTPException(status_code=404, detail=f"Model {model_name} not found in cache")
+        
+        # Delete the entire cache directory for this model
+        try:
+            shutil.rmtree(repo_cache_dir)
+        except OSError as e:
+            raise HTTPException(
+                status_code=500,
+                detail=f"Failed to delete model cache directory: {str(e)}"
+            )
+        
+        return {"message": f"Model {model_name} deleted successfully"}
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to delete model: {str(e)}")
+
+
 # ============================================
 # STARTUP & SHUTDOWN
 # ============================================

backend/transcribe.py

@@ -3,6 +3,7 @@ Whisper ASR module for transcription.
 """
 
 from typing import Optional, List, Dict
+import asyncio
 import torch
 import numpy as np
 from pathlib import Path
@@ -79,6 +80,22 @@ class WhisperModel:
             progress_manager.mark_error(f"whisper-{model_size}", str(e))
             raise
     
+    async def load_model_async(self, model_size: Optional[str] = None):
+        """
+        Async version of load_model that runs in thread pool.
+        
+        This prevents blocking the event loop during model loading.
+        """
+        if model_size is None:
+            model_size = self.model_size
+            
+        # If already loaded with correct size, return immediately
+        if self.model is not None and self.model_size == model_size:
+            return
+        
+        # Run the blocking load operation in a thread pool
+        await asyncio.to_thread(self.load_model, model_size)
+    
     def unload_model(self):
         """Unload the model to free memory."""
         if self.model is not None:
@@ -107,44 +124,49 @@ class WhisperModel:
         Returns:
             Transcribed text
         """
-        self.load_model()
+        await self.load_model_async()
         
         from .utils.audio import load_audio
         
-        # Load audio
-        audio, sr = load_audio(audio_path, sample_rate=16000)
-        
-        # Process audio
-        inputs = self.processor(
-            audio,
-            sampling_rate=16000,
-            return_tensors="pt",
-        )
-        inputs = inputs.to(self.device)
-        
-        # Set language if provided
-        forced_decoder_ids = None
-        if language:
-            lang_code = "en" if language == "en" else "zh"
-            forced_decoder_ids = self.processor.get_decoder_prompt_ids(
-                language=lang_code,
-                task="transcribe",
+        def _transcribe_sync():
+            """Run synchronous transcription in thread pool."""
+            # Load audio
+            audio, sr = load_audio(audio_path, sample_rate=16000)
+            
+            # Process audio
+            inputs = self.processor(
+                audio,
+                sampling_rate=16000,
+                return_tensors="pt",
             )
+            inputs = inputs.to(self.device)
+            
+            # Set language if provided
+            forced_decoder_ids = None
+            if language:
+                lang_code = "en" if language == "en" else "zh"
+                forced_decoder_ids = self.processor.get_decoder_prompt_ids(
+                    language=lang_code,
+                    task="transcribe",
+                )
+            
+            # Generate transcription
+            with torch.no_grad():
+                predicted_ids = self.model.generate(
+                    inputs["input_features"],
+                    forced_decoder_ids=forced_decoder_ids,
+                )
+            
+            # Decode
+            transcription = self.processor.batch_decode(
+                predicted_ids,
+                skip_special_tokens=True,
+            )[0]
+            
+            return transcription.strip()
         
-        # Generate transcription
-        with torch.no_grad():
-            predicted_ids = self.model.generate(
-                inputs["input_features"],
-                forced_decoder_ids=forced_decoder_ids,
-            )
-        
-        # Decode
-        transcription = self.processor.batch_decode(
-            predicted_ids,
-            skip_special_tokens=True,
-        )[0]
-        
-        return transcription.strip()
+        # Run blocking transcription in thread pool
+        return await asyncio.to_thread(_transcribe_sync)
     
     async def transcribe_with_timestamps(
         self,
@@ -161,59 +183,58 @@ class WhisperModel:
         Returns:
             List of word segments with timestamps
         """
-        self.load_model()
+        await self.load_model_async()
         
         from .utils.audio import load_audio
         
-        # Load audio
-        audio, sr = load_audio(audio_path, sample_rate=16000)
-        
-        # Process audio
-        inputs = self.processor(
-            audio,
-            sampling_rate=16000,
-            return_tensors="pt",
-        )
-        inputs = inputs.to(self.device)
-        
-        # Set language if provided
-        forced_decoder_ids = None
-        if language:
-            lang_code = "en" if language == "en" else "zh"
-            forced_decoder_ids = self.processor.get_decoder_prompt_ids(
-                language=lang_code,
-                task="transcribe",
+        def _transcribe_timestamps_sync():
+            """Run synchronous transcription with timestamps in thread pool."""
+            # Load audio
+            audio, sr = load_audio(audio_path, sample_rate=16000)
+            
+            # Process audio
+            inputs = self.processor(
+                audio,
+                sampling_rate=16000,
+                return_tensors="pt",
             )
+            inputs = inputs.to(self.device)
+            
+            # Set language if provided
+            forced_decoder_ids = None
+            if language:
+                lang_code = "en" if language == "en" else "zh"
+                forced_decoder_ids = self.processor.get_decoder_prompt_ids(
+                    language=lang_code,
+                    task="transcribe",
+                )
+            
+            # Generate with timestamps
+            with torch.no_grad():
+                predicted_ids = self.model.generate(
+                    inputs["input_features"],
+                    forced_decoder_ids=forced_decoder_ids,
+                    return_timestamps=True,
+                )
+            
+            # Parse timestamps (simplified - would need more robust parsing)
+            # For now, return basic transcription
+            # TODO: Implement proper timestamp parsing
+            transcription = self.processor.batch_decode(
+                predicted_ids,
+                skip_special_tokens=True,
+            )[0]
+            
+            return [
+                {
+                    "text": transcription,
+                    "start": 0.0,
+                    "end": len(audio) / sr,
+                }
+            ]
         
-        # Generate with timestamps
-        with torch.no_grad():
-            predicted_ids = self.model.generate(
-                inputs["input_features"],
-                forced_decoder_ids=forced_decoder_ids,
-                return_timestamps=True,
-            )
-        
-        # Decode with timestamps
-        result = self.processor.batch_decode(
-            predicted_ids,
-            skip_special_tokens=False,
-        )[0]
-        
-        # Parse timestamps (simplified - would need more robust parsing)
-        # For now, return basic transcription
-        # TODO: Implement proper timestamp parsing
-        transcription = self.processor.batch_decode(
-            predicted_ids,
-            skip_special_tokens=True,
-        )[0]
-        
-        return [
-            {
-                "text": transcription,
-                "start": 0.0,
-                "end": len(audio) / sr,
-            }
-        ]
+        # Run blocking transcription in thread pool
+        return await asyncio.to_thread(_transcribe_timestamps_sync)
 
 
 # Global model instance

backend/tts.py

@@ -3,6 +3,7 @@ TTS inference module using Qwen3-TTS.
 """
 
 from typing import Optional, List, Tuple
+import asyncio
 import torch
 import numpy as np
 import io
@@ -110,6 +111,15 @@ class TTSModel:
             if model_path.startswith("Qwen/"):
                 print(f"Loading TTS model {model_size} on {self.device}...")
                 
+                # Initialize progress state to show download has started
+                progress_manager.update_progress(
+                    model_name=model_name,
+                    current=0,
+                    total=1,  # Set to 1 initially, will be updated by callback
+                    filename="",
+                    status="downloading",
+                )
+                
                 # Set up progress callback
                 progress_callback = create_hf_progress_callback(model_name, progress_manager)
                 tracker = HFProgressTracker(progress_callback)
@@ -151,6 +161,22 @@ class TTSModel:
             progress_manager.mark_error(f"qwen-tts-{model_size}", str(e))
             raise
     
+    async def load_model_async(self, model_size: Optional[str] = None):
+        """
+        Async version of load_model that runs in thread pool.
+        
+        This prevents blocking the event loop during model loading.
+        """
+        if model_size is None:
+            model_size = self.model_size
+            
+        # If already loaded with correct size, return immediately
+        if self.model is not None and self._current_model_size == model_size:
+            return
+        
+        # Run the blocking load operation in a thread pool
+        await asyncio.to_thread(self.load_model, model_size)
+    
     def unload_model(self):
         """Unload the model to free memory."""
         if self.model is not None:
@@ -180,7 +206,7 @@ class TTSModel:
         Returns:
             Tuple of (voice_prompt_dict, was_cached)
         """
-        self.load_model()
+        await self.load_model_async()
         
         # Check cache if enabled
         if use_cache:
@@ -189,12 +215,16 @@ class TTSModel:
             if cached_prompt is not None:
                 return cached_prompt, True
         
-        # Create new voice prompt
-        voice_prompt_items = self.model.create_voice_clone_prompt(
-            ref_audio=str(audio_path),
-            ref_text=reference_text,
-            x_vector_only_mode=False,
-        )
+        def _create_prompt_sync():
+            """Run synchronous voice prompt creation in thread pool."""
+            return self.model.create_voice_clone_prompt(
+                ref_audio=str(audio_path),
+                ref_text=reference_text,
+                x_vector_only_mode=False,
+            )
+        
+        # Run blocking operation in thread pool
+        voice_prompt_items = await asyncio.to_thread(_create_prompt_sync)
         
         # Cache if enabled
         if use_cache:
@@ -256,22 +286,27 @@ class TTSModel:
         Returns:
             Tuple of (audio_array, sample_rate)
         """
-        self.load_model()
+        # Load model (already handles async via to_thread if needed)
+        await self.load_model_async()
 
-        # Set seed if provided
-        if seed is not None:
-            torch.manual_seed(seed)
-            if torch.cuda.is_available():
-                torch.cuda.manual_seed(seed)
+        def _generate_sync():
+            """Run synchronous generation in thread pool."""
+            # Set seed if provided
+            if seed is not None:
+                torch.manual_seed(seed)
+                if torch.cuda.is_available():
+                    torch.cuda.manual_seed(seed)
 
-        # Generate audio
-        wavs, sample_rate = self.model.generate_voice_clone(
-            text=text,
-            voice_clone_prompt=voice_prompt,
-            instruct=instruct,
-        )
+            # Generate audio - this is the blocking operation
+            wavs, sample_rate = self.model.generate_voice_clone(
+                text=text,
+                voice_clone_prompt=voice_prompt,
+                instruct=instruct,
+            )
+            return wavs[0], sample_rate
 
-        audio = wavs[0]  # Get first result
+        # Run blocking inference in thread pool to avoid blocking event loop
+        audio, sample_rate = await asyncio.to_thread(_generate_sync)
 
         return audio, sample_rate
     

backend/utils/hf_progress.py

@@ -8,14 +8,18 @@ import threading
 
 
 class HFProgressTracker:
-    """Tracks HuggingFace Hub download progress by intercepting hf_hub_download."""
+    """Tracks HuggingFace Hub download progress by intercepting hf_hub_download and snapshot_download."""
     
     def __init__(self, progress_callback: Optional[Callable] = None):
         self.progress_callback = progress_callback
         self._original_hf_hub_download = None
+        self._original_snapshot_download = None
         self._lock = threading.Lock()
         self._total_downloaded = 0
         self._total_size = 0
+        self._file_sizes = {}  # Track sizes of individual files
+        self._file_downloaded = {}  # Track downloaded bytes per file
+        self._current_filename = ""
     
     def _tracked_hf_hub_download(self, *args, **kwargs):
         """Wrapper for hf_hub_download with progress tracking."""
@@ -24,12 +28,53 @@ class HFProgressTracker:
         # Get original callback if present
         original_resume_callback = kwargs.get("resume_download", None)
         
+        # Extract filename if available
+        filename = kwargs.get("filename", "")
+        if not filename and len(args) > 1:
+            filename = args[1] if isinstance(args[1], str) else ""
+        
+        with self._lock:
+            self._current_filename = filename
+        
         def combined_callback(downloaded: int, total: int):
             """Combined callback that tracks progress."""
-            # Update totals
+            # Update per-file tracking
             with self._lock:
-                # Estimate: assume each file contributes equally
-                # This is a simplification - in reality we'd track per-file
+                if filename:
+                    self._file_sizes[filename] = total
+                    self._file_downloaded[filename] = downloaded
+                
+                # Calculate totals across all files
+                self._total_size = sum(self._file_sizes.values())
+                self._total_downloaded = sum(self._file_downloaded.values())
+            
+            # Call original callback if present
+            if original_resume_callback:
+                original_resume_callback(downloaded, total)
+            
+            # Call our progress callback
+            if self.progress_callback:
+                with self._lock:
+                    # Pass filename for better progress display
+                    self.progress_callback(self._total_downloaded, self._total_size, filename)
+        
+        # Replace callback
+        kwargs["resume_download"] = combined_callback
+        
+        # Call original download
+        return self._original_hf_hub_download(*args, **kwargs)
+    
+    def _tracked_snapshot_download(self, *args, **kwargs):
+        """Wrapper for snapshot_download with progress tracking."""
+        import huggingface_hub
+        
+        # snapshot_download also uses resume_download callback
+        original_resume_callback = kwargs.get("resume_download", None)
+        
+        def combined_callback(downloaded: int, total: int):
+            """Combined callback that tracks progress."""
+            with self._lock:
+                # For snapshot_download, we track overall progress
                 if total > 0:
                     self._total_size = max(self._total_size, total)
                     self._total_downloaded = downloaded
@@ -41,53 +86,80 @@ class HFProgressTracker:
             # Call our progress callback
             if self.progress_callback:
                 with self._lock:
-                    self.progress_callback(self._total_downloaded, self._total_size)
+                    self.progress_callback(self._total_downloaded, self._total_size, "")
         
         # Replace callback
         kwargs["resume_download"] = combined_callback
         
         # Call original download
-        return self._original_hf_hub_download(*args, **kwargs)
+        return self._original_snapshot_download(*args, **kwargs)
+    
+    def _tracked_tqdm_update(self, n=1):
+        """Track tqdm updates for progress."""
+        if self._original_tqdm:
+            # Get current tqdm instance
+            import tqdm
+            # Try to get progress info from tqdm
+            # This is a fallback if hf_hub_download callback doesn't work
+            pass
     
     @contextmanager
     def patch_download(self):
-        """Context manager to patch hf_hub_download for progress tracking."""
+        """Context manager to patch hf_hub_download and snapshot_download for progress tracking."""
         try:
             import huggingface_hub
             self._original_hf_hub_download = huggingface_hub.hf_hub_download
             
+            # Also patch snapshot_download if available (used by from_pretrained)
+            try:
+                self._original_snapshot_download = huggingface_hub.snapshot_download
+            except AttributeError:
+                self._original_snapshot_download = None
+            
             # Reset totals
             with self._lock:
                 self._total_downloaded = 0
                 self._total_size = 0
+                self._file_sizes = {}
+                self._file_downloaded = {}
+                self._current_filename = ""
             
-            # Patch the function
+            # Patch the functions
             huggingface_hub.hf_hub_download = self._tracked_hf_hub_download
+            if self._original_snapshot_download:
+                huggingface_hub.snapshot_download = self._tracked_snapshot_download
             
             yield
         except ImportError:
             # If huggingface_hub not available, just yield without patching
             yield
         finally:
-            # Restore original
+            # Restore original functions
             if self._original_hf_hub_download:
                 try:
                     import huggingface_hub
                     huggingface_hub.hf_hub_download = self._original_hf_hub_download
                 except ImportError:
                     pass
+            
+            if self._original_snapshot_download:
+                try:
+                    import huggingface_hub
+                    huggingface_hub.snapshot_download = self._original_snapshot_download
+                except (ImportError, AttributeError):
+                    pass
 
 
 def create_hf_progress_callback(model_name: str, progress_manager):
     """Create a progress callback for HuggingFace downloads."""
-    def callback(downloaded: int, total: int):
+    def callback(downloaded: int, total: int, filename: str = ""):
         """Progress callback."""
         if total > 0:
             progress_manager.update_progress(
                 model_name=model_name,
                 current=downloaded,
                 total=total,
-                filename="",
+                filename=filename or "",
                 status="downloading",
             )
     return callback

tauri/src-tauri/capabilities/default.json

@@ -10,6 +10,7 @@
   "permissions": [
     "core:default",
     "core:window:default",
+    "core:window:allow-start-dragging",
     "core:webview:default",
     "core:webview:allow-internal-toggle-devtools",
     "shell:allow-open",

tauri/src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default permissions for voicebox","remote":{"urls":["http://localhost:*"]},"local":true,"windows":["main"],"permissions":["core:default","core:window:default","core:webview:default","core:webview:allow-internal-toggle-devtools","shell:allow-open","shell:allow-execute","shell:allow-spawn","updater:default","dialog:default","dialog:allow-save","dialog:allow-open","fs:default","fs:read-all","fs:write-all"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default permissions for voicebox","remote":{"urls":["http://localhost:*"]},"local":true,"windows":["main"],"permissions":["core:default","core:window:default","core:window:allow-start-dragging","core:webview:default","core:webview:allow-internal-toggle-devtools","shell:allow-open","shell:allow-execute","shell:allow-spawn","updater:default","dialog:default","dialog:allow-save","dialog:allow-open","fs:default","fs:read-all","fs:write-all"],"platforms":["linux","macOS","windows"]}}

tauri/src-tauri/tauri.conf.json

@@ -48,7 +48,8 @@
         "resizable": true,
         "fullscreen": false,
         "devtools": true,
-        "userAgent": null
+        "userAgent": null,
+        "titleBarStyle": "Overlay"
       }
     ],
     "withGlobalTauri": true