Added checkpoint downloader

ui/src/components/FilesWidget.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import useFilesList from '@/hooks/useFilesList';
+import Link from 'next/link';
+import { Loader2, AlertCircle, Download, Box, Brain } from 'lucide-react';
+
+export default function FilesWidget({ jobID }: { jobID: string }) {
+  const { files, status, refreshFiles } = useFilesList(jobID, 5000);
+
+  const cleanSize = (size: number) => {
+    if (size < 1024) {
+      return `${size} B`;
+    } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(1)} KB`;
+    } else if (size < 1024 * 1024 * 1024) {
+      return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+    } else {
+      return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+    }
+  };
+
+  return (
+    <div className="col-span-2 bg-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-gray-800">
+      <div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <Brain className="w-5 h-5 text-purple-400" />
+          <h2 className="font-semibold text-gray-100">Model Checkpoints</h2>
+          <span className="px-2 py-0.5 bg-gray-700 rounded-full text-xs text-gray-300">
+            {files.length}
+          </span>
+        </div>
+      </div>
+
+      <div className="p-2">
+        {status === 'loading' && (
+          <div className="flex items-center justify-center py-4">
+            <Loader2 className="w-5 h-5 text-gray-400 animate-spin" />
+          </div>
+        )}
+
+        {status === 'error' && (
+          <div className="flex items-center justify-center py-4 text-rose-400 space-x-2">
+            <AlertCircle className="w-4 h-4" />
+            <span className="text-sm">Error loading checkpoints</span>
+          </div>
+        )}
+
+        {['success', 'refreshing'].includes(status) && (
+          <div className="space-y-1">
+            {files.map((file, index) => {
+              const fileName = file.path.split('/').pop() || '';
+              const nameWithoutExt = fileName.replace('.safetensors', '');
+              return (
+                <a 
+                  key={index}
+                  target='_blank'
+                  href={`/api/files/${encodeURIComponent(file.path)}`}
+                  className="group flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-gray-800 transition-all duration-200"
+                >
+                  <div className="flex items-center space-x-2 min-w-0">
+                    <Box className="w-4 h-4 text-purple-400 flex-shrink-0" />
+                    <div className="flex flex-col min-w-0">
+                      <div className="flex text-sm text-gray-200">
+                        <span className="overflow-hidden text-ellipsis direction-rtl whitespace-nowrap">
+                          {nameWithoutExt}
+                        </span>
+                      </div>
+                      <span className="text-xs text-gray-500">.safetensors</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-3 flex-shrink-0">
+                    <span className="text-xs text-gray-400">{cleanSize(file.size)}</span>
+                    <div className="bg-purple-500 bg-opacity-0 group-hover:bg-opacity-10 rounded-full p-1 transition-all">
+                      <Download className="w-3 h-3 text-purple-400" />
+                    </div>
+                  </div>
+                </a>
+              );
+            })}
+          </div>
+        )}
+
+        {['success', 'refreshing'].includes(status) && files.length === 0 && (
+          <div className="text-center py-4 text-gray-400 text-sm">
+            No checkpoints available
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

ui/src/components/JobOverview.tsx

@@ -1,6 +1,7 @@
 import { Job } from '@prisma/client';
 import useGPUInfo from '@/hooks/useGPUInfo';
 import GPUWidget from '@/components/GPUWidget';
+import FilesWidget from '@/components/FilesWidget';
 import { getJobConfig, getTotalSteps } from '@/utils/jobs';
 import { Cpu, HardDrive, Info } from 'lucide-react';
 import { useMemo } from 'react';
@@ -92,7 +93,12 @@ export default function JobOverview({ job }: JobOverviewProps) {
       </div>
 
       {/* GPU Widget Panel */}
-      <div className="col-span-1">{isGPUInfoLoaded && gpuList.length > 0 && <GPUWidget gpu={gpuList[0]} />}</div>
+      <div className="col-span-1">
+        <div>{isGPUInfoLoaded && gpuList.length > 0 && <GPUWidget gpu={gpuList[0]} />}</div>
+        <div className='mt-4'>
+          <FilesWidget jobID={job.id} />
+        </div>
+      </div>
     </div>
   );
 }

ui/src/components/SampleImageModal.tsx

@@ -118,6 +118,7 @@ export default function SampleImageModal() {
     const maxIdx = stepMinIdx + imageModal.numSamples - 1;
     const nextIdx = currentIdx + 1;
     if (nextIdx > maxIdx) return;
+    if (nextIdx >= imageModal.sampleImages.length) return;
     openSampleImage({
       imgPath: imageModal.sampleImages[nextIdx],
       numSamples: imageModal.numSamples,