Add model size selection to GenerationForm and enhance model management features

app/src/components/ServerSettings/ModelManagement.tsx

@@ -1,4 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
 import { apiClient } from '@/lib/api/client';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -10,6 +11,7 @@ import { useToast } from '@/components/ui/use-toast';
 export function ModelManagement() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
+  const [downloadingModel, setDownloadingModel] = useState<string | null>(null);
 
   const { data: modelStatus, isLoading } = useQuery({
     queryKey: ['modelStatus'],
@@ -18,7 +20,10 @@ export function ModelManagement() {
   });
 
   const downloadMutation = useMutation({
-    mutationFn: (modelName: string) => apiClient.triggerModelDownload(modelName),
+    mutationFn: (modelName: string) => {
+      setDownloadingModel(modelName);
+      return apiClient.triggerModelDownload(modelName);
+    },
     onSuccess: (_, modelName) => {
       toast({
         title: 'Download started',
@@ -30,12 +35,19 @@ export function ModelManagement() {
       }, 1000);
     },
     onError: (error: Error) => {
+      setDownloadingModel(null);
       toast({
         title: 'Download failed',
         description: error.message,
         variant: 'destructive',
       });
     },
+    onSettled: () => {
+      // Clear downloading state after a delay to allow progress to show
+      setTimeout(() => {
+        setDownloadingModel(null);
+      }, 2000);
+    },
   });
 
   const formatSize = (sizeMb?: number): string => {
@@ -70,7 +82,7 @@ export function ModelManagement() {
                       key={model.model_name}
                       model={model}
                       onDownload={() => downloadMutation.mutate(model.model_name)}
-                      isDownloading={downloadMutation.isPending}
+                      isDownloading={downloadingModel === model.model_name}
                       formatSize={formatSize}
                     />
                   ))}
@@ -88,7 +100,7 @@ export function ModelManagement() {
                       key={model.model_name}
                       model={model}
                       onDownload={() => downloadMutation.mutate(model.model_name)}
-                      isDownloading={downloadMutation.isPending}
+                      isDownloading={downloadingModel === model.model_name}
                       formatSize={formatSize}
                     />
                   ))}

app/src/components/ServerSettings/ServerStatus.tsx

@@ -47,18 +47,9 @@ export function ServerStatus() {
               <span className="text-sm">Connected</span>
             </div>
             <div className="flex flex-wrap gap-2">
-              <Badge variant={health.model_loaded ? 'default' : 'secondary'}>
-                Model: {health.model_loaded 
-                  ? `Loaded${health.model_size ? ` (${health.model_size})` : ''}` 
-                  : health.model_downloaded === false 
-                    ? 'Not Downloaded' 
-                    : 'Not Loaded'}
+              <Badge variant={health.model_loaded || health.model_downloaded ? 'default' : 'secondary'}>
+                {health.model_loaded || health.model_downloaded ? 'Model Ready' : 'No Model'}
               </Badge>
-              {health.model_downloaded === true && !health.model_loaded && (
-                <Badge variant="outline">
-                  Model Cached (will load on first use)
-                </Badge>
-              )}
               <Badge variant={health.gpu_available ? 'default' : 'secondary'}>
                 GPU: {health.gpu_available ? 'Available' : 'Not Available'}
               </Badge>