Add per-file cancel button for upload jobs

- Cancel button (X) shown next to pending and in-progress uploads
- Aborts the XHR for active uploads, skips pending ones
- Cancelled files shown in yellow with "cancelled" status
- Cancellation state tracked via refs to survive across async iterations

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/files/FilesPage.tsx

@@ -114,11 +114,13 @@ function FileSessionView({ session }: { session: FileSession }) {
   interface UploadFile {
     name: string;
     size: number;
-    status: "pending" | "uploading" | "done" | "error";
+    status: "pending" | "uploading" | "done" | "error" | "cancelled";
     progress: number; // 0-100
     error?: string;
   }
   const [uploadQueue, setUploadQueue] = useState<UploadFile[]>([]);
+  const uploadXhrs = useRef<Map<number, XMLHttpRequest>>(new Map());
+  const cancelledIndices = useRef<Set<number>>(new Set());
   const uploading = uploadQueue.length > 0;
 
   const fullPath = (name: string) => (cwd === "/" ? `/${name}` : `${cwd}/${name}`);
@@ -233,20 +235,35 @@ function FileSessionView({ session }: { session: FileSession }) {
 
   const handleInfo = (entry: FileEntry) => setDialog({ type: "info", entry });
 
+  const cancelUpload = (index: number) => {
+    const xhr = uploadXhrs.current.get(index);
+    if (xhr) {
+      xhr.abort();
+      uploadXhrs.current.delete(index);
+    }
+    cancelledIndices.current.add(index);
+    setUploadQueue((q) => q.map((f, i) => i === index && f.status !== "done" ? { ...f, status: "cancelled", progress: 0 } : f));
+  };
+
   const uploadFile = (file: File, index: number): Promise<void> => {
+    if (cancelledIndices.current.has(index)) return Promise.resolve();
+
     return new Promise((resolve) => {
       const formData = new FormData();
       formData.append("file", file);
       formData.append("dir", cwd);
 
       const xhr = new XMLHttpRequest();
+      uploadXhrs.current.set(index, xhr);
+
       xhr.upload.onprogress = (e) => {
         if (e.lengthComputable) {
           const pct = Math.round((e.loaded / e.total) * 100);
           setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, progress: pct } : f));
         }
       };
       xhr.onload = () => {
+        uploadXhrs.current.delete(index);
         try {
           const data = JSON.parse(xhr.responseText);
           if (data.error) {
@@ -260,9 +277,14 @@ function FileSessionView({ session }: { session: FileSession }) {
         resolve();
       };
       xhr.onerror = () => {
+        uploadXhrs.current.delete(index);
         setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: "Network error" } : f));
         resolve();
       };
+      xhr.onabort = () => {
+        uploadXhrs.current.delete(index);
+        resolve();
+      };
 
       setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "uploading" } : f));
       xhr.open("POST", "/api/files/upload");
@@ -272,6 +294,7 @@ function FileSessionView({ session }: { session: FileSession }) {
 
   const handleUpload = async (files: FileList | null) => {
     if (!files || files.length === 0) return;
+    cancelledIndices.current.clear();
     const queue: UploadFile[] = Array.from(files).map((f) => ({
       name: f.name,
       size: f.size,
@@ -282,11 +305,12 @@ function FileSessionView({ session }: { session: FileSession }) {
 
     const fileArray = Array.from(files);
     for (let i = 0; i < fileArray.length; i++) {
-      await uploadFile(fileArray[i], i);
+      if (!cancelledIndices.current.has(i)) {
+        await uploadFile(fileArray[i], i);
+      }
     }
     await loadDirectory(cwd);
-    // Keep queue visible briefly so user sees completion
-    setTimeout(() => setUploadQueue([]), 1500);
+    setTimeout(() => { setUploadQueue([]); uploadXhrs.current.clear(); cancelledIndices.current.clear(); }, 1500);
     if (uploadInputRef.current) uploadInputRef.current.value = "";
   };
 
@@ -392,16 +416,25 @@ function FileSessionView({ session }: { session: FileSession }) {
             {uploadQueue.map((file, i) => (
               <div key={i} className="flex flex-col gap-1">
                 <div className="flex items-center justify-between text-[11px]">
-                  <span className={`truncate flex-1 mr-2 ${file.status === "error" ? "text-red-400" : file.status === "done" ? "text-green-400" : "text-gray-300"}`}>
+                  <span className={`truncate flex-1 mr-2 ${file.status === "error" ? "text-red-400" : file.status === "cancelled" ? "text-yellow-400" : file.status === "done" ? "text-green-400" : "text-gray-300"}`}>
                     {file.name}
                   </span>
-                  <span className="text-gray-500 shrink-0">
-                    {file.status === "error" ? file.error : file.status === "done" ? "done" : file.status === "uploading" ? `${file.progress}%` : "waiting"}
+                  <span className="text-gray-500 shrink-0 flex items-center gap-1.5">
+                    {file.status === "error" ? file.error : file.status === "cancelled" ? "cancelled" : file.status === "done" ? "done" : file.status === "uploading" ? `${file.progress}%` : "waiting"}
+                    {(file.status === "pending" || file.status === "uploading") && (
+                      <button
+                        onClick={() => cancelUpload(i)}
+                        className="text-gray-500 hover:text-red-400 transition-colors"
+                        title="Cancel upload"
+                      >
+                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                      </button>
+                    )}
                   </span>
                 </div>
                 <div className="w-full h-1 bg-gray-800 rounded overflow-hidden">
                   <div
-                    className={`h-full transition-all duration-200 rounded ${file.status === "error" ? "bg-red-500" : file.status === "done" ? "bg-green-500" : "bg-blue-500"}`}
+                    className={`h-full transition-all duration-200 rounded ${file.status === "error" ? "bg-red-500" : file.status === "cancelled" ? "bg-yellow-500" : file.status === "done" ? "bg-green-500" : "bg-blue-500"}`}
                     style={{ width: `${file.progress}%` }}
                   />
                 </div>