From 74e0997b3e6f93b5bdf0bb5b04632ac6566bfbf4 Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@cstech.dev>
Date: Sun, 14 Dec 2025 14:13:15 -0500
Subject: [PATCH 1/2] Add multi-file and directory upload support with progress
 tracking

---
 backend/src/routes/files.ts                   |   3 +-
 backend/src/services/files.ts                 |  20 +-
 .../components/file-browser/FileBrowser.tsx   | 226 ++++++++++++++++--
 .../file-browser/FileOperations.tsx           |  62 +++--
 frontend/src/components/ui/progress.tsx       |  36 +++
 5 files changed, 310 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/ui/progress.tsx

diff --git a/backend/src/routes/files.ts b/backend/src/routes/files.ts
index a61acef..8da02a2 100644
--- a/backend/src/routes/files.ts
+++ b/backend/src/routes/files.ts
@@ -66,7 +66,8 @@ export function createFileRoutes(_database: Database) {
         return c.json({ error: 'No file provided' }, 400)
       }
       
-      const result = await fileService.uploadFile(path, file)
+      const relativePath = body.relativePath as string | undefined
+      const result = await fileService.uploadFile(path, file, relativePath)
       return c.json(result)
     } catch (error: any) {
       logger.error('Failed to upload file:', error)
diff --git a/backend/src/services/files.ts b/backend/src/services/files.ts
index b0f265a..e755dcb 100644
--- a/backend/src/services/files.ts
+++ b/backend/src/services/files.ts
@@ -138,7 +138,7 @@ export async function getFile(userPath: string): Promise<FileInfo> {
   }
 }
 
-export async function uploadFile(userPath: string, file: File): Promise<FileUploadResult> {
+export async function uploadFile(userPath: string, file: File, relativePath?: string): Promise<FileUploadResult> {
   if (file.size > FILE_LIMITS.MAX_UPLOAD_SIZE_BYTES) {
     throw new Error('File too large')
   }
@@ -148,17 +148,25 @@ export async function uploadFile(userPath: string, file: File): Promise<FileUplo
     throw new Error('File type not allowed')
   }
   
-  const validatedPath = validatePath(userPath)
-  const fileName = file.name || path.basename(userPath)
-  const fullPath = path.join(validatedPath, fileName)
+  const validatedBasePath = validatePath(userPath)
+  const targetRelativePath = relativePath || file.name || path.basename(userPath)
+  const fullPath = path.join(validatedBasePath, targetRelativePath)
+  
+  const finalValidatedPath = validatePath(path.join(userPath, targetRelativePath))
+  if (finalValidatedPath !== fullPath) {
+    throw { message: 'Invalid relative path', statusCode: 400 }
+  }
+  
+  const parentDir = path.dirname(fullPath)
+  await fs.mkdir(parentDir, { recursive: true })
   
   const buffer = await file.arrayBuffer()
   
   await writeFileContent(fullPath, Buffer.from(buffer))
   
   return {
-    name: fileName,
-    path: path.join(userPath, fileName),
+    name: path.basename(targetRelativePath),
+    path: path.join(userPath, targetRelativePath),
     size: file.size,
     mimeType,
   }
diff --git a/frontend/src/components/file-browser/FileBrowser.tsx b/frontend/src/components/file-browser/FileBrowser.tsx
index 66b1b24..5a68480 100644
--- a/frontend/src/components/file-browser/FileBrowser.tsx
+++ b/frontend/src/components/file-browser/FileBrowser.tsx
@@ -6,14 +6,26 @@ import { MobileFilePreviewModal } from './MobileFilePreviewModal'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { FolderOpen, Upload, RefreshCw } from 'lucide-react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Progress } from '@/components/ui/progress'
+import { FolderOpen, Upload, RefreshCw, X } from 'lucide-react'
 import type { FileInfo } from '@/types/files'
 import { API_BASE_URL } from '@/config'
 import { useMobile } from '@/hooks/useMobile'
 import { useFile } from '@/api/files'
 
+interface UploadItem {
+  file: File
+  relativePath: string
+}
 
-
+interface UploadProgress {
+  current: number
+  total: number
+  currentFile: string
+  errors: string[]
+  cancelled: boolean
+}
 
 interface FileBrowserProps {
   basePath?: string
@@ -23,6 +35,86 @@ interface FileBrowserProps {
   onDirectoryLoad?: (info: { workspaceRoot?: string; currentPath: string }) => void
 }
 
+async function readFileEntry(entry: FileSystemFileEntry): Promise<File> {
+  return new Promise((resolve, reject) => {
+    entry.file(resolve, reject)
+  })
+}
+
+async function readDirectoryEntries(dirReader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> {
+  return new Promise((resolve, reject) => {
+    dirReader.readEntries(resolve, reject)
+  })
+}
+
+async function traverseFileSystemEntry(
+  entry: FileSystemEntry,
+  basePath: string = ''
+): Promise<UploadItem[]> {
+  const items: UploadItem[] = []
+  const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name
+
+  if (entry.isFile) {
+    const fileEntry = entry as FileSystemFileEntry
+    const file = await readFileEntry(fileEntry)
+    items.push({ file, relativePath })
+  } else if (entry.isDirectory) {
+    const dirEntry = entry as FileSystemDirectoryEntry
+    const dirReader = dirEntry.createReader()
+    let entries: FileSystemEntry[] = []
+    let batch: FileSystemEntry[]
+    
+    do {
+      batch = await readDirectoryEntries(dirReader)
+      entries = entries.concat(batch)
+    } while (batch.length > 0)
+
+    for (const childEntry of entries) {
+      const childItems = await traverseFileSystemEntry(childEntry, relativePath)
+      items.push(...childItems)
+    }
+  }
+
+  return items
+}
+
+async function getUploadItemsFromDataTransfer(dataTransfer: DataTransfer): Promise<UploadItem[]> {
+  const items: UploadItem[] = []
+  const entries: FileSystemEntry[] = []
+
+  for (let i = 0; i < dataTransfer.items.length; i++) {
+    const item = dataTransfer.items[i]
+    const entry = item.webkitGetAsEntry?.()
+    if (entry) {
+      entries.push(entry)
+    }
+  }
+
+  if (entries.length > 0) {
+    for (const entry of entries) {
+      const entryItems = await traverseFileSystemEntry(entry)
+      items.push(...entryItems)
+    }
+  } else {
+    for (let i = 0; i < dataTransfer.files.length; i++) {
+      const file = dataTransfer.files[i]
+      items.push({ file, relativePath: file.name })
+    }
+  }
+
+  return items
+}
+
+function getUploadItemsFromFileList(fileList: FileList): UploadItem[] {
+  const items: UploadItem[] = []
+  for (let i = 0; i < fileList.length; i++) {
+    const file = fileList[i]
+    const relativePath = (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name
+    items.push({ file, relativePath })
+  }
+  return items
+}
+
 export function FileBrowser({ basePath = '', onFileSelect, embedded = false, initialSelectedFile, onDirectoryLoad }: FileBrowserProps) {
   const [currentPath, setCurrentPath] = useState(basePath)
   const [files, setFiles] = useState<FileInfo | null>(null)
@@ -32,8 +124,10 @@ export function FileBrowser({ basePath = '', onFileSelect, embedded = false, ini
   const [error, setError] = useState<string | null>(null)
   const [isDragging, setIsDragging] = useState(false)
   const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false)
+  const [uploadProgress, setUploadProgress] = useState<UploadProgress | null>(null)
   
   const dropZoneRef = useRef<HTMLDivElement>(null)
+  const uploadCancelledRef = useRef(false)
   const isMobile = useMobile()
 
    const { data: initialFileData, error: initialFileError } = useFile(initialSelectedFile)
@@ -117,9 +211,10 @@ useEffect(() => {
     loadFiles(currentPath)
   }
 
-  const handleUpload = useCallback(async (files: FileList) => {
+  const uploadSingleFile = useCallback(async (item: UploadItem): Promise<string | null> => {
     const formData = new FormData()
-    formData.append('file', files[0])
+    formData.append('file', item.file)
+    formData.append('relativePath', item.relativePath)
     
     try {
       const response = await fetch(`${API_BASE_URL}/api/files/${currentPath}`, {
@@ -128,15 +223,75 @@ useEffect(() => {
       })
       
       if (!response.ok) {
-        throw new Error(`Upload failed: ${response.statusText}`)
+        const errorData = await response.json().catch(() => ({}))
+        return errorData.error || `Upload failed: ${response.statusText}`
       }
       
-      await loadFiles(currentPath)
+      return null
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Upload failed')
+      return err instanceof Error ? err.message : 'Upload failed'
     }
   }, [currentPath])
 
+  const handleUploadItems = useCallback(async (items: UploadItem[]) => {
+    if (items.length === 0) return
+
+    uploadCancelledRef.current = false
+    const errors: string[] = []
+    
+    setUploadProgress({
+      current: 0,
+      total: items.length,
+      currentFile: items[0].relativePath,
+      errors: [],
+      cancelled: false,
+    })
+
+    for (let i = 0; i < items.length; i++) {
+      if (uploadCancelledRef.current) {
+        setUploadProgress(prev => prev ? { ...prev, cancelled: true } : null)
+        break
+      }
+
+      const item = items[i]
+      setUploadProgress(prev => prev ? {
+        ...prev,
+        current: i,
+        currentFile: item.relativePath,
+      } : null)
+
+      const error = await uploadSingleFile(item)
+      if (error) {
+        errors.push(`${item.relativePath}: ${error}`)
+      }
+    }
+
+    setUploadProgress(prev => prev ? {
+      ...prev,
+      current: items.length,
+      errors,
+      cancelled: uploadCancelledRef.current,
+    } : null)
+
+    await loadFiles(currentPath)
+
+    setTimeout(() => {
+      setUploadProgress(null)
+      if (errors.length > 0) {
+        setError(`${errors.length} file(s) failed to upload`)
+      }
+    }, 2000)
+  }, [currentPath, uploadSingleFile])
+
+  const handleUpload = useCallback(async (fileList: FileList) => {
+    const items = getUploadItemsFromFileList(fileList)
+    await handleUploadItems(items)
+  }, [handleUploadItems])
+
+  const cancelUpload = useCallback(() => {
+    uploadCancelledRef.current = true
+  }, [])
+
   const handleCreateFile = useCallback(async (name: string, type: 'file' | 'folder') => {
     try {
       const response = await fetch(`${API_BASE_URL}/api/files/${currentPath}/${name}`, {
@@ -214,9 +369,9 @@ useEffect(() => {
     e.stopPropagation()
     setIsDragging(false)
 
-    const droppedFiles = e.dataTransfer.files
-    if (droppedFiles.length > 0) {
-      await handleUpload(droppedFiles)
+    const items = await getUploadItemsFromDataTransfer(e.dataTransfer)
+    if (items.length > 0) {
+      await handleUploadItems(items)
     }
   }
 
@@ -253,6 +408,45 @@ useEffect(() => {
     file.name.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
+  const uploadDialog = (
+    <Dialog open={!!uploadProgress} onOpenChange={() => {}}>
+      <DialogContent className="sm:max-w-md" hideCloseButton>
+        <DialogHeader>
+          <DialogTitle className="flex items-center justify-between">
+            <span>
+              {uploadProgress?.cancelled ? 'Upload Cancelled' : 
+               uploadProgress && uploadProgress.current >= uploadProgress.total ? 'Upload Complete' : 'Uploading...'}
+            </span>
+            {uploadProgress && uploadProgress.current < uploadProgress.total && !uploadProgress.cancelled && (
+              <Button variant="ghost" size="sm" onClick={cancelUpload}>
+                <X className="w-4 h-4" />
+              </Button>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+        {uploadProgress && (
+          <div className="space-y-3">
+            <Progress 
+              value={uploadProgress.current} 
+              max={uploadProgress.total} 
+            />
+            <p className="text-sm text-muted-foreground">
+              {uploadProgress.current} / {uploadProgress.total} files
+            </p>
+            <p className="text-xs text-muted-foreground truncate">
+              {uploadProgress.currentFile}
+            </p>
+            {uploadProgress.errors.length > 0 && (
+              <p className="text-xs text-destructive">
+                {uploadProgress.errors.length} file(s) failed
+              </p>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+
   if (embedded) {
     return (
       <div 
@@ -267,11 +461,13 @@ useEffect(() => {
           <div className="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center">
             <div className="text-center">
               <Upload className="w-12 h-12 mx-auto mb-2 text-primary" />
-              <p className="text-lg font-semibold text-primary">Drop files here to upload</p>
+              <p className="text-lg font-semibold text-primary">Drop files or folders here to upload</p>
             </div>
           </div>
         )}
         
+        {uploadDialog}
+        
         {/* Mobile: Full width file listing, Desktop: Split view */}
         <div className="flex-1 flex overflow-hidden min-h-0 h-full">
           <div className={`${isMobile ? 'w-full' : 'w-[30%]'} border-r border-border px-1 md:px-4 flex flex-col min-h-0 h-full`}>
@@ -354,10 +550,10 @@ useEffect(() => {
     >
       <Card className="flex-1 relative">
         {isDragging && (
-          <div className="absolute inset-0 z-50 bg-blue-50/90 border-2 border-dashed border-blue-500 rounded-lg flex items-center justify-center">
+          <div className="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center">
             <div className="text-center">
-              <Upload className="w-12 h-12 mx-auto mb-2 text-blue-500" />
-              <p className="text-lg font-semibold text-blue-600">Drop files here to upload</p>
+              <Upload className="w-12 h-12 mx-auto mb-2 text-primary" />
+              <p className="text-lg font-semibold text-primary">Drop files or folders here to upload</p>
             </div>
           </div>
         )}
@@ -438,6 +634,8 @@ useEffect(() => {
         onClose={handleCloseModal}
         file={selectedFile}
       />
+      
+      {uploadDialog}
     </div>
   )
 }
diff --git a/frontend/src/components/file-browser/FileOperations.tsx b/frontend/src/components/file-browser/FileOperations.tsx
index 109af2f..577aaca 100644
--- a/frontend/src/components/file-browser/FileOperations.tsx
+++ b/frontend/src/components/file-browser/FileOperations.tsx
@@ -1,9 +1,11 @@
-import { useState, memo } from 'react'
+import { useState, memo, useRef } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Upload, Plus, FolderPlus, FilePlus } from 'lucide-react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Upload, Plus, FolderPlus, FilePlus, File, Folder } from 'lucide-react'
+import { useMobile } from '@/hooks/useMobile'
 
 interface FileOperationsProps {
   onUpload: (files: FileList) => void
@@ -14,6 +16,10 @@ export const FileOperations = memo(function FileOperations({ onUpload, onCreate
   const [createDialogOpen, setCreateDialogOpen] = useState(false)
   const [createType, setCreateType] = useState<'file' | 'folder'>('file')
   const [createName, setCreateName] = useState('')
+  
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const folderInputRef = useRef<HTMLInputElement>(null)
+  const isMobile = useMobile()
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files
@@ -33,21 +39,45 @@ export const FileOperations = memo(function FileOperations({ onUpload, onCreate
 
   return (
     <div className="flex items-center gap-2">
-      <div className="relative">
-        <input
-          type="file"
-          id="file-upload"
-          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-          onChange={handleFileSelect}
-          multiple
-        />
-        <Button variant="outline" size="sm" asChild>
-          <label htmlFor="file-upload" className="cursor-pointer flex items-center gap-2">
-            <Upload className="w-4 h-4" />
-            <span className='hidden sm:inline'>Upload</span>
-          </label>
+      <input
+        ref={fileInputRef}
+        type="file"
+        className="hidden"
+        onChange={handleFileSelect}
+        multiple
+      />
+      <input
+        ref={folderInputRef}
+        type="file"
+        className="hidden"
+        onChange={handleFileSelect}
+        {...{ webkitdirectory: '', directory: '' } as React.InputHTMLAttributes<HTMLInputElement>}
+      />
+      
+      {isMobile ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Upload className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
+              <File className="w-4 h-4 mr-2" />
+              Files
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => folderInputRef.current?.click()}>
+              <Folder className="w-4 h-4 mr-2" />
+              Folder
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <Button variant="outline" size="sm" onClick={() => fileInputRef.current?.click()}>
+          <Upload className="w-4 h-4" />
+          <span className="hidden sm:inline ml-1">Upload</span>
         </Button>
-      </div>
+      )}
 
       <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
         <DialogTrigger asChild>
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
new file mode 100644
index 0000000..8000f7e
--- /dev/null
+++ b/frontend/src/components/ui/progress.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number
+  max?: number
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, max = 100, ...props }, ref) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        className={cn(
+          "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+          className
+        )}
+        {...props}
+      >
+        <div
+          className="h-full bg-primary transition-all duration-300 ease-in-out"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    )
+  }
+)
+Progress.displayName = "Progress"
+
+export { Progress }

From 782bfe97dd57805783721bd2861fee2900dabe7f Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@cstech.dev>
Date: Sun, 14 Dec 2025 14:16:32 -0500
Subject: [PATCH 2/2] Show upload error details and fix delete dialog overflow

---
 .../components/file-browser/FileBrowser.tsx   | 49 +++++++++++++------
 frontend/src/components/ui/delete-dialog.tsx  |  8 +--
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/file-browser/FileBrowser.tsx b/frontend/src/components/file-browser/FileBrowser.tsx
index 5a68480..e2d0f79 100644
--- a/frontend/src/components/file-browser/FileBrowser.tsx
+++ b/frontend/src/components/file-browser/FileBrowser.tsx
@@ -274,13 +274,6 @@ useEffect(() => {
     } : null)
 
     await loadFiles(currentPath)
-
-    setTimeout(() => {
-      setUploadProgress(null)
-      if (errors.length > 0) {
-        setError(`${errors.length} file(s) failed to upload`)
-      }
-    }, 2000)
   }, [currentPath, uploadSingleFile])
 
   const handleUpload = useCallback(async (fileList: FileList) => {
@@ -408,14 +401,17 @@ useEffect(() => {
     file.name.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
+  const isUploadComplete = uploadProgress && uploadProgress.current >= uploadProgress.total
+  const canDismissDialog = isUploadComplete || uploadProgress?.cancelled
+
   const uploadDialog = (
-    <Dialog open={!!uploadProgress} onOpenChange={() => {}}>
-      <DialogContent className="sm:max-w-md" hideCloseButton>
+    <Dialog open={!!uploadProgress} onOpenChange={(open) => { if (!open && canDismissDialog) setUploadProgress(null) }}>
+      <DialogContent className="sm:max-w-md" hideCloseButton={!canDismissDialog}>
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between">
             <span>
               {uploadProgress?.cancelled ? 'Upload Cancelled' : 
-               uploadProgress && uploadProgress.current >= uploadProgress.total ? 'Upload Complete' : 'Uploading...'}
+               isUploadComplete ? 'Upload Complete' : 'Uploading...'}
             </span>
             {uploadProgress && uploadProgress.current < uploadProgress.total && !uploadProgress.cancelled && (
               <Button variant="ghost" size="sm" onClick={cancelUpload}>
@@ -433,14 +429,35 @@ useEffect(() => {
             <p className="text-sm text-muted-foreground">
               {uploadProgress.current} / {uploadProgress.total} files
             </p>
-            <p className="text-xs text-muted-foreground truncate">
-              {uploadProgress.currentFile}
-            </p>
-            {uploadProgress.errors.length > 0 && (
-              <p className="text-xs text-destructive">
-                {uploadProgress.errors.length} file(s) failed
+            {!isUploadComplete && (
+              <p className="text-xs text-muted-foreground truncate">
+                {uploadProgress.currentFile}
               </p>
             )}
+            {uploadProgress.errors.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-sm font-medium text-destructive">
+                  {uploadProgress.errors.length} file(s) failed:
+                </p>
+                <div className="max-h-32 overflow-y-auto rounded border border-destructive/20 bg-destructive/5 p-2">
+                  {uploadProgress.errors.map((error, index) => (
+                    <p key={index} className="text-xs text-destructive break-all">
+                      {error}
+                    </p>
+                  ))}
+                </div>
+              </div>
+            )}
+            {canDismissDialog && (
+              <Button 
+                variant="outline" 
+                size="sm" 
+                className="w-full mt-2"
+                onClick={() => setUploadProgress(null)}
+              >
+                Close
+              </Button>
+            )}
           </div>
         )}
       </DialogContent>
diff --git a/frontend/src/components/ui/delete-dialog.tsx b/frontend/src/components/ui/delete-dialog.tsx
index 00ba80d..033086a 100644
--- a/frontend/src/components/ui/delete-dialog.tsx
+++ b/frontend/src/components/ui/delete-dialog.tsx
@@ -35,10 +35,10 @@ export function DeleteDialog({
         </DialogHeader>
         
         {itemName && (
-          <Alert>
-            <AlertTriangle className="h-4 w-4" />
-            <AlertDescription>
-              This will permanently delete "{itemName}". This action cannot be undone.
+          <Alert className="overflow-hidden">
+            <AlertTriangle className="h-4 w-4 flex-shrink-0" />
+            <AlertDescription className="break-all">
+              This will permanently delete "<span className="font-medium">{itemName}</span>". This action cannot be undone.
             </AlertDescription>
           </Alert>
         )}