Add a way to delete checkpoints on the ui

ui/src/app/api/files/delete/route.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import { getDatasetsRoot, getTrainingFolder } from '@/server/settings';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { filePath } = body;
+
+    if (!filePath || typeof filePath !== 'string') {
+      return new NextResponse('filePath is required', { status: 400 });
+    }
+
+    // Decode the path
+    const decodedFilePath = decodeURIComponent(filePath);
+
+    // Get allowed directories
+    const datasetRoot = await getDatasetsRoot();
+    const trainingRoot = await getTrainingFolder();
+    const allowedDirs = [datasetRoot, trainingRoot];
+
+    // Security check: resolve so `..` segments collapse, then verify still under
+    // an allowed root. Substring `.includes('..')` false-positives on filenames
+    // containing `..` as text (e.g. an ellipsis in a filename).
+    const resolvedFilePath = path.resolve(decodedFilePath);
+    const isAllowed = allowedDirs.some(
+      allowedDir => resolvedFilePath === allowedDir || resolvedFilePath.startsWith(allowedDir + path.sep),
+    );
+
+    if (!isAllowed) {
+      console.warn(`Access denied: ${resolvedFilePath} not in ${allowedDirs.join(', ')}`);
+      return new NextResponse('Access denied', { status: 403 });
+    }
+
+    // Check if file exists
+    if (!fs.existsSync(resolvedFilePath)) {
+      console.warn(`File not found: ${resolvedFilePath}`);
+      return new NextResponse('File not found', { status: 404 });
+    }
+
+    // Get file info
+    const stat = fs.statSync(resolvedFilePath);
+    if (!stat.isFile()) {
+      return new NextResponse('Not a file', { status: 400 });
+    }
+
+    fs.unlinkSync(resolvedFilePath);
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting file:', error);
+    return new NextResponse('Internal Server Error', { status: 500 });
+  }
+}

ui/src/components/FilesWidget.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import useFilesList from '@/hooks/useFilesList';
-import Link from 'next/link';
-import { Loader2, AlertCircle, Download, Box, Brain } from 'lucide-react';
+import { Loader2, AlertCircle, Download, Box, Brain, Trash2 } from 'lucide-react';
 import { openMergeLoRAsModal } from './MergeLoRAsModal';
 import { getFilename, getFoldername } from '@/utils/basic';
+import { openConfirm } from './ConfirmModal';
+import { apiClient } from '@/utils/api';
 
 export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName: string }) {
   const { files, status, refreshFiles } = useFilesList(jobID, 5000);
@@ -20,6 +21,26 @@ export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName
     }
   };
 
+  const handleDeleteFile = (filePath: string) => {
+    const fileName = getFilename(filePath);
+    openConfirm({
+      title: 'Delete Checkpoint',
+      message: `Are you sure you want to delete "${fileName}"? This action cannot be undone.`,
+      type: 'warning',
+      confirmText: 'Delete',
+      onConfirm: () => {
+        apiClient
+          .post('/api/files/delete', { filePath })
+          .then(() => {
+            refreshFiles();
+          })
+          .catch(error => {
+            console.error('Error deleting checkpoint:', error);
+          });
+      },
+    });
+  };
+
   return (
     <div className="col-span-2 bg-gray-900 rounded-xl shadow-lg overflow-hidden border border-gray-800">
       <div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
@@ -68,13 +89,15 @@ export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName
               const fileName = getFilename(file.path);
               const nameWithoutExt = fileName.replace('.safetensors', '');
               return (
-                <a
+                <div
                   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">
+                  <a
+                    target="_blank"
+                    href={`/api/files/${encodeURIComponent(file.path)}`}
+                    className="flex items-center space-x-2 min-w-0 flex-1"
+                  >
                     <Box className="w-4 h-4 text-purple-600 dark:text-purple-400 flex-shrink-0" />
                     <div className="flex flex-col min-w-0">
                       <div className="flex text-sm text-gray-200">
@@ -84,14 +107,26 @@ export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName
                       </div>
                       <span className="text-xs text-gray-500">.safetensors</span>
                     </div>
-                  </div>
+                  </a>
                   <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">
+                    <a
+                      target="_blank"
+                      href={`/api/files/${encodeURIComponent(file.path)}`}
+                      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-600 dark:text-purple-400" />
-                    </div>
+                    </a>
+                    <button
+                      type="button"
+                      onClick={() => handleDeleteFile(file.path)}
+                      className="bg-red-500 bg-opacity-0 group-hover:bg-opacity-10 hover:!bg-opacity-30 rounded-full p-1 transition-all"
+                      title="Delete checkpoint"
+                    >
+                      <Trash2 className="w-3 h-3 text-red-500" />
+                    </button>
                   </div>
-                </a>
+                </div>
               );
             })}
           </div>