feat: model management improvements and folder migration

- Add model folder migration with byte-level progress tracking (backend + UI)
- Custom models directory support via VOICEBOX_MODELS_DIR env var passed to sidecar
- Hardcoded model descriptions displayed in model detail cards
- Open model folder button in storage location row
- Remove 'not downloaded' badge from model cards
- Fix server settings scroll offset for audio player
- Fix shell open permission to allow file paths
- Add normalize toggle to generation settings

app/src/components/AudioTab/AudioTab.tsx

@@ -23,8 +23,8 @@ import {
 import { apiClient } from '@/lib/api/client';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
-import { usePlayerStore } from '@/stores/playerStore';
 import { usePlatform } from '@/platform/PlatformContext';
+import { usePlayerStore } from '@/stores/playerStore';
 
 interface AudioDevice {
   id: string;
@@ -129,7 +129,7 @@ export function AudioTab() {
     if (await confirm('Delete this channel?')) {
       deleteChannel.mutate(channelId);
     }
-  }
+  };
 
   const allChannels = channels || [];
   const allDevices = devices || [];
@@ -168,7 +168,7 @@ export function AudioTab() {
               </Button>
             </div>
           ) : (
-            <div className="space-y-3 p-2">
+            <div className="space-y-3">
               {allChannels.map((channel) => {
                 const isSelected = selectedChannelId === channel.id;
                 return (
@@ -343,7 +343,9 @@ export function AudioTab() {
             <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
               <CheckCircle2 className="h-12 w-12 text-muted-foreground mb-4" />
               <p className="text-muted-foreground text-center">
-                {platform.metadata.isTauri ? 'No audio devices found' : 'Audio device selection requires Tauri'}
+                {platform.metadata.isTauri
+                  ? 'No audio devices found'
+                  : 'Audio device selection requires Tauri'}
               </p>
             </div>
           )}

app/src/components/ModelsTab/ModelsTab.tsx

@@ -2,7 +2,7 @@ import { ModelManagement } from '@/components/ServerSettings/ModelManagement';
 
 export function ModelsTab() {
   return (
-    <div className="h-full flex flex-col p-4">
+    <div className="h-full flex flex-col">
       <ModelManagement />
     </div>
   );

app/src/components/ServerSettings/GenerationSettings.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Slider } from '@/components/ui/slider';
 import { useServerStore } from '@/stores/serverStore';
 
@@ -7,6 +8,8 @@ export function GenerationSettings() {
   const setMaxChunkChars = useServerStore((state) => state.setMaxChunkChars);
   const crossfadeMs = useServerStore((state) => state.crossfadeMs);
   const setCrossfadeMs = useServerStore((state) => state.setCrossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
+  const setNormalizeAudio = useServerStore((state) => state.setNormalizeAudio);
 
   return (
     <Card role="region" aria-label="Generation Settings" tabIndex={0}>
@@ -64,6 +67,25 @@ export function GenerationSettings() {
               Blends audio between chunks to smooth transitions. Set to 0 for a hard cut.
             </p>
           </div>
+
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="normalizeAudio"
+              checked={normalizeAudio}
+              onCheckedChange={setNormalizeAudio}
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="normalizeAudio"
+                className="text-sm font-medium leading-none cursor-pointer"
+              >
+                Normalize audio
+              </label>
+              <p className="text-sm text-muted-foreground">
+                Adjusts output volume to a consistent level across generations.
+              </p>
+            </div>
+          </div>
         </div>
       </CardContent>
     </Card>

app/src/components/ServerSettings/ModelManagement.tsx

@@ -7,6 +7,7 @@ import {
   CircleX,
   Download,
   ExternalLink,
+  FolderOpen,
   HardDrive,
   Heart,
   Loader2,
@@ -41,6 +42,8 @@ import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
 import type { ActiveDownloadTask, HuggingFaceModelInfo, ModelStatus } from '@/lib/api/types';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
 
 async function fetchHuggingFaceModelInfo(repoId: string): Promise<HuggingFaceModelInfo> {
   const response = await fetch(`https://huggingface.co/api/models/${repoId}`);
@@ -48,6 +51,29 @@ async function fetchHuggingFaceModelInfo(repoId: string): Promise<HuggingFaceMod
   return response.json();
 }
 
+const MODEL_DESCRIPTIONS: Record<string, string> = {
+  'qwen-tts-1.7B':
+    'High-quality multilingual TTS by Alibaba. Supports 10 languages with natural prosody and voice cloning from short reference audio.',
+  'qwen-tts-0.6B':
+    'Lightweight version of Qwen TTS. Same language support with faster inference, ideal for lower-end hardware.',
+  luxtts:
+    'Lightweight ZipVoice-based TTS designed for high quality voice cloning and 48kHz speech generation at speeds exceeding 150x realtime.',
+  'chatterbox-tts':
+    'Production-grade open source TTS by Resemble AI. Supports 23 languages with voice cloning and emotion exaggeration control.',
+  'chatterbox-turbo':
+    'Streamlined 350M parameter TTS by Resemble AI. High-quality English speech with less compute and VRAM than larger models.',
+  'whisper-base':
+    'Smallest Whisper model (74M parameters). Fast transcription with moderate accuracy.',
+  'whisper-small':
+    'Whisper Small (244M parameters). Good balance of speed and accuracy for transcription.',
+  'whisper-medium':
+    'Whisper Medium (769M parameters). Higher accuracy transcription at moderate speed.',
+  'whisper-large':
+    'Whisper Large (1.5B parameters). Best accuracy for speech-to-text across multiple languages.',
+  'whisper-turbo':
+    'Whisper Large v3 Turbo. Pruned for significantly faster inference while maintaining near-large accuracy.',
+};
+
 function formatDownloads(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
@@ -85,6 +111,18 @@ function formatBytes(bytes: number): string {
 export function ModelManagement() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
+  const platform = usePlatform();
+  const customModelsDir = useServerStore((state) => state.customModelsDir);
+  const setCustomModelsDir = useServerStore((state) => state.setCustomModelsDir);
+  const [migrating, setMigrating] = useState(false);
+  const [migrationProgress, setMigrationProgress] = useState<{
+    current: number;
+    total: number;
+    progress: number;
+    filename?: string;
+    status: string;
+  } | null>(null);
+  const [pendingMigrateDir, setPendingMigrateDir] = useState<string | null>(null);
   const [downloadingModel, setDownloadingModel] = useState<string | null>(null);
   const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
   const [consoleOpen, setConsoleOpen] = useState(false);
@@ -104,6 +142,12 @@ export function ModelManagement() {
     refetchInterval: 5000,
   });
 
+  const { data: cacheDir } = useQuery({
+    queryKey: ['modelsCacheDir'],
+    queryFn: () => apiClient.getModelsCacheDir(),
+    staleTime: 1000 * 60 * 5,
+  });
+
   const { data: activeTasks } = useQuery({
     queryKey: ['activeTasks'],
     queryFn: () => apiClient.getActiveTasks(),
@@ -382,6 +426,87 @@ export function ModelManagement() {
         </p>
       </div>
 
+      {/* Model storage location */}
+      {platform.metadata.isTauri && cacheDir && (
+        <div className="shrink-0 pb-4 border-b mb-4">
+          <div className="flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <span className="text-xs text-muted-foreground">Storage location</span>
+              <p
+                className="text-xs font-mono text-muted-foreground/70 truncate"
+                title={cacheDir.path}
+              >
+                {cacheDir.path}
+              </p>
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-muted-foreground h-7 px-2"
+                onClick={async () => {
+                  try {
+                    const { open } = await import('@tauri-apps/plugin-shell');
+                    await open(cacheDir.path);
+                  } catch {
+                    toast({ title: 'Failed to open model folder', variant: 'destructive' });
+                  }
+                }}
+              >
+                <FolderOpen className="h-3 w-3" />
+                Open
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-muted-foreground h-7 px-2"
+                onClick={async () => {
+                  try {
+                    const { open: openDialog } = await import('@tauri-apps/plugin-dialog');
+                    const selected = await openDialog({
+                      directory: true,
+                      title: 'Choose model storage folder',
+                    });
+                    if (!selected) return;
+                    const newDir =
+                      typeof selected === 'string' ? selected : (selected as { path: string }).path;
+                    if (!newDir) return;
+                    setPendingMigrateDir(newDir);
+                  } catch {
+                    toast({ title: 'Failed to open folder picker', variant: 'destructive' });
+                  }
+                }}
+                disabled={migrating}
+              >
+                {migrating ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <FolderOpen className="h-3 w-3" />
+                )}
+                {migrating ? 'Migrating...' : 'Change'}
+              </Button>
+              {customModelsDir && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs text-muted-foreground h-7 px-2"
+                  disabled={migrating}
+                  onClick={async () => {
+                    setCustomModelsDir(null);
+                    toast({ title: 'Reset to default location. Restarting server...' });
+                    await platform.lifecycle.restartServer('');
+                    queryClient.invalidateQueries();
+                  }}
+                >
+                  <RotateCcw className="h-3 w-3" />
+                  Reset
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Model list */}
       {isLoading ? (
         <div className="flex items-center justify-center py-16">
@@ -457,9 +582,7 @@ export function ModelManagement() {
                             {formatSize(model.size_mb)}
                           </span>
                         )}
-                        {!model.downloaded && !isDownloading && !hasError && (
-                          <span className="text-xs text-muted-foreground/60">Not downloaded</span>
-                        )}
+
                         <ChevronRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
                       </div>
                     </button>
@@ -571,13 +694,6 @@ export function ModelManagement() {
                       Error
                     </Badge>
                   )}
-                  {!freshSelectedModel.downloaded &&
-                    !selectedState?.isDownloading &&
-                    !selectedState?.hasError && (
-                      <Badge variant="outline" className="text-xs text-muted-foreground">
-                        Not downloaded
-                      </Badge>
-                    )}
                 </div>
 
                 {/* HuggingFace model card info */}
@@ -588,6 +704,13 @@ export function ModelManagement() {
                   </div>
                 )}
 
+                {/* Description */}
+                {MODEL_DESCRIPTIONS[freshSelectedModel.model_name] && (
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {MODEL_DESCRIPTIONS[freshSelectedModel.model_name]}
+                  </p>
+                )}
+
                 {hfModelInfo && (
                   <div className="space-y-3">
                     {/* Pipeline tag + author */}
@@ -810,6 +933,126 @@ export function ModelManagement() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* Migration confirmation dialog */}
+      <AlertDialog
+        open={!!pendingMigrateDir}
+        onOpenChange={(open) => !open && setPendingMigrateDir(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Move models to new location?</AlertDialogTitle>
+            <AlertDialogDescription>
+              The server will shut down while models are being moved to the new folder. It will
+              restart automatically once the migration is complete.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div
+            className="text-xs font-mono text-muted-foreground bg-muted/50 rounded px-3 py-2 truncate"
+            title={pendingMigrateDir ?? ''}
+          >
+            {pendingMigrateDir}
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async () => {
+                if (!pendingMigrateDir) return;
+                const newDir = pendingMigrateDir;
+                setPendingMigrateDir(null);
+                setMigrating(true);
+                setMigrationProgress({
+                  current: 0,
+                  total: 0,
+                  progress: 0,
+                  status: 'downloading',
+                  filename: 'Preparing...',
+                });
+                try {
+                  // Start the migration (background task)
+                  await apiClient.migrateModels(newDir);
+
+                  // Connect to SSE for progress
+                  await new Promise<void>((resolve, reject) => {
+                    const es = new EventSource(apiClient.getMigrationProgressUrl());
+                    es.onmessage = (event) => {
+                      try {
+                        const data = JSON.parse(event.data);
+                        setMigrationProgress(data);
+                        if (data.status === 'complete') {
+                          es.close();
+                          resolve();
+                        } else if (data.status === 'error') {
+                          es.close();
+                          reject(new Error(data.error || 'Migration failed'));
+                        }
+                      } catch {
+                        /* ignore parse errors */
+                      }
+                    };
+                    es.onerror = () => {
+                      es.close();
+                      reject(new Error('Lost connection during migration'));
+                    };
+                  });
+
+                  setCustomModelsDir(newDir);
+                  setMigrationProgress({
+                    current: 1,
+                    total: 1,
+                    progress: 100,
+                    status: 'complete',
+                    filename: 'Restarting server...',
+                  });
+                  await platform.lifecycle.restartServer(newDir);
+                  queryClient.invalidateQueries();
+                  toast({ title: 'Models moved successfully' });
+                } catch (e) {
+                  toast({
+                    title: 'Migration failed',
+                    description: e instanceof Error ? e.message : 'Failed to migrate models',
+                    variant: 'destructive',
+                  });
+                } finally {
+                  setMigrating(false);
+                  setMigrationProgress(null);
+                }
+              }}
+            >
+              Move Models
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Migration progress overlay */}
+      {migrating && migrationProgress && (
+        <div className="fixed inset-0 z-50 bg-background/95 backdrop-blur-sm flex items-center justify-center">
+          <div className="w-full max-w-md px-8 space-y-6 text-center">
+            <div className="space-y-2">
+              <Loader2 className="h-8 w-8 animate-spin mx-auto text-muted-foreground" />
+              <h2 className="text-lg font-semibold">Moving models</h2>
+              <p className="text-sm text-muted-foreground">
+                {migrationProgress.status === 'complete'
+                  ? 'Restarting server...'
+                  : 'The server is offline while models are being moved.'}
+              </p>
+            </div>
+            {migrationProgress.total > 0 && (
+              <div className="space-y-2">
+                <Progress value={migrationProgress.progress} className="h-2" />
+                <div className="flex justify-between text-xs text-muted-foreground">
+                  <span className="truncate max-w-[60%]">{migrationProgress.filename}</span>
+                  <span>
+                    {formatBytes(migrationProgress.current)} /{' '}
+                    {formatBytes(migrationProgress.total)}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

app/src/components/ServerTab/ServerTab.tsx

@@ -2,12 +2,18 @@ import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
 import { GenerationSettings } from '@/components/ServerSettings/GenerationSettings';
 import { GpuAcceleration } from '@/components/ServerSettings/GpuAcceleration';
 import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { cn } from '@/lib/utils/cn';
 import { usePlatform } from '@/platform/PlatformContext';
+import { usePlayerStore } from '@/stores/playerStore';
 
 export function ServerTab() {
   const platform = usePlatform();
+  const isPlayerVisible = !!usePlayerStore((state) => state.audioUrl);
   return (
-    <div className="overflow-y-auto flex flex-col">
+    <div
+      className={cn('overflow-y-auto flex flex-col', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}
+    >
       <div className="grid gap-4 md:grid-cols-2">
         <ConnectionForm />
         <GenerationSettings />