feat(frontend): add folder upload support (#1042)

## Summary
- Adds a **Folder** tab to the upload modal alongside File and URL
- Uploads all files sequentially, preserving directory structure under
`file-uploads/`
- Validates per-file (10MB) and total folder (100MB) size limits with
hard errors
- Adds `sanitizeRelativePath` with path traversal protection and depth
limit (20 levels)
- 13 tests passing (3 new folder validation tests)

## Test plan
- [ ] Select a folder with mixed file sizes — all upload correctly
- [ ] Select a folder with a file >10MB — hard error shown
- [ ] Select a folder totaling >100MB — hard error shown
- [ ] Single file and URL upload still work as before

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Ambient Code Bot <bot@ambient-code.local>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

components/frontend/src/app/api/projects/[name]/agentic-sessions/[sessionName]/workspace/upload/route.ts

@@ -37,6 +37,21 @@ function sanitizeFilename(filename: string): string {
   return filename.replace(/[\/\\\0]/g, '_').substring(0, 255);
 }
 
+// Sanitize a relative path (e.g. "folder/subfolder/file.txt") for folder uploads.
+// Each segment is sanitized individually, then rejoined.
+// Prevents path traversal while preserving directory structure.
+function sanitizeRelativePath(relativePath: string): string {
+  const MAX_PATH_DEPTH = 20;
+  const segments = relativePath
+    .split('/')
+    .filter(segment => segment && segment !== '..' && segment !== '.')
+    .map(segment => segment.replace(/[\\\0]/g, '_').substring(0, 255));
+  if (segments.length > MAX_PATH_DEPTH) {
+    throw new Error(`Path too deeply nested (max ${MAX_PATH_DEPTH} levels)`);
+  }
+  return segments.join('/');
+}
+
 // Validate URL to prevent SSRF attacks
 // Returns true if URL is safe to fetch, false otherwise
 function isValidUrl(urlString: string): boolean {
@@ -318,14 +333,23 @@ async function uploadFileToWorkspace(
   contentType: string,
   headers: HeadersInit,
   name: string,
-  sessionName: string
+  sessionName: string,
+  subpath?: string
 ): Promise<Response> {
   const maxRetries = 3;
   const retryDelay = 2000; // 2 seconds
 
+  // Build the upload path: file-uploads/[subpath/]filename
+  const pathParts = ['file-uploads'];
+  if (subpath) {
+    pathParts.push(...subpath.split('/').map(s => encodeURIComponent(s)));
+  }
+  pathParts.push(encodeURIComponent(filename));
+  const uploadPath = pathParts.join('/');
+
   for (let retries = 0; retries < maxRetries; retries++) {
     const resp = await fetch(
-      `${BACKEND_URL}/projects/${encodeURIComponent(name)}/agentic-sessions/${encodeURIComponent(sessionName)}/workspace/file-uploads/${encodeURIComponent(filename)}`,
+      `${BACKEND_URL}/projects/${encodeURIComponent(name)}/agentic-sessions/${encodeURIComponent(sessionName)}/workspace/${uploadPath}`,
       {
         method: 'PUT',
         headers: {
@@ -362,6 +386,20 @@ export async function POST(
     const formData = await request.formData();
     const uploadType = formData.get('type') as string;
 
+    // Optional subpath for folder uploads (preserves directory structure)
+    const rawSubpath = formData.get('subpath') as string | null;
+    let subpath: string | undefined;
+    if (rawSubpath) {
+      try {
+        subpath = sanitizeRelativePath(rawSubpath);
+      } catch {
+        return new Response(JSON.stringify({ error: 'Invalid upload path: too deeply nested' }), {
+          status: 400,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+    }
+
     if (uploadType === 'local') {
       // Handle local file upload
       const file = formData.get('file') as File;
@@ -416,7 +454,7 @@ export async function POST(
       }
 
       // Upload to workspace with retry logic
-      const resp = await uploadFileToWorkspace(fileBuffer, filename, finalContentType, headers, name, sessionName);
+      const resp = await uploadFileToWorkspace(fileBuffer, filename, finalContentType, headers, name, sessionName, subpath);
 
       if (!resp.ok) {
         const errorText = await resp.text();
@@ -430,7 +468,7 @@ export async function POST(
       return new Response(
         JSON.stringify({
           success: true,
-          filename,
+          filename: subpath ? `${subpath}/${filename}` : filename,
           compressed: compressionInfo.compressed,
           originalSize: compressionInfo.originalSize,
           finalSize: compressionInfo.finalSize,
@@ -518,7 +556,7 @@ export async function POST(
       }
 
       // Upload to workspace with retry logic
-      const resp = await uploadFileToWorkspace(fileBuffer, filename, finalContentType, headers, name, sessionName);
+      const resp = await uploadFileToWorkspace(fileBuffer, filename, finalContentType, headers, name, sessionName, subpath);
 
       if (!resp.ok) {
         const errorText = await resp.text();
@@ -532,7 +570,7 @@ export async function POST(
       return new Response(
         JSON.stringify({
           success: true,
-          filename,
+          filename: subpath ? `${subpath}/${filename}` : filename,
           compressed: compressionInfo.compressed,
           originalSize: compressionInfo.originalSize,
           finalSize: compressionInfo.finalSize,

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/modals/__tests__/upload-file-modal.test.tsx

@@ -1,3 +1,4 @@
+import React, { createContext, useContext } from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { UploadFileModal } from '../upload-file-modal';
@@ -10,6 +11,37 @@ vi.mock('@/hooks/use-input-history', () => ({
   })),
 }));
 
+// Mock Radix Tabs so tab switching works reliably in jsdom
+const TabsContext = createContext({ value: '', onValueChange: (() => {}) as (v: string) => void });
+
+vi.mock('@/components/ui/tabs', () => ({
+  Tabs: ({ children, value, onValueChange, className }: Record<string, unknown>) => (
+    <TabsContext.Provider value={{ value: value as string, onValueChange: onValueChange as (v: string) => void }}>
+      <div className={className as string}>{children as React.ReactNode}</div>
+    </TabsContext.Provider>
+  ),
+  TabsList: ({ children, className }: Record<string, unknown>) => (
+    <div role="tablist" className={className as string}>{children as React.ReactNode}</div>
+  ),
+  TabsTrigger: ({ children, value, disabled }: Record<string, unknown>) => {
+    const ctx = useContext(TabsContext);
+    return (
+      <button
+        role="tab"
+        data-state={ctx.value === value ? 'active' : 'inactive'}
+        disabled={disabled as boolean}
+        onClick={() => ctx.onValueChange(value as string)}
+      >
+        {children as React.ReactNode}
+      </button>
+    );
+  },
+  TabsContent: ({ children, value, className }: Record<string, unknown>) => {
+    const ctx = useContext(TabsContext);
+    return ctx.value === value ? <div role="tabpanel" className={className as string}>{children as React.ReactNode}</div> : null;
+  },
+}));
+
 vi.mock('@/components/input-with-history', () => ({
   InputWithHistory: (props: Record<string, unknown>) => (
     <input
@@ -39,8 +71,9 @@ describe('UploadFileModal', () => {
   it('renders modal when open', () => {
     render(<UploadFileModal {...defaultProps} />);
     expect(screen.getByText('Upload File')).toBeDefined();
-    expect(screen.getByText('Local File')).toBeDefined();
-    expect(screen.getByText('From URL')).toBeDefined();
+    expect(screen.getByText('File')).toBeDefined();
+    expect(screen.getByText('Folder')).toBeDefined();
+    expect(screen.getByText('URL')).toBeDefined();
     expect(screen.getByText('Cancel')).toBeDefined();
     expect(screen.getByText('Upload')).toBeDefined();
   });
@@ -119,7 +152,7 @@ describe('UploadFileModal', () => {
 
   it('switches to URL tab and shows URL input', async () => {
     render(<UploadFileModal {...defaultProps} />);
-    fireEvent.click(screen.getByText('From URL'));
+    fireEvent.click(screen.getByText('URL'));
 
     // Radix Tabs may not render inactive content in jsdom, but the tab trigger should be active
     await waitFor(() => {
@@ -128,8 +161,81 @@ describe('UploadFileModal', () => {
         expect(urlInput).toBeDefined();
       } else {
         // Tab triggers still render
-        expect(screen.getByText('From URL')).toBeDefined();
+        expect(screen.getByText('URL')).toBeDefined();
       }
     });
   });
+
+  it('switches to Folder tab and shows folder input', async () => {
+    render(<UploadFileModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Folder'));
+
+    const folderInput = await screen.findByLabelText('Choose Folder');
+    expect(folderInput).toBeDefined();
+  });
+
+  it('shows error when folder contains a file exceeding per-file limit', async () => {
+    render(<UploadFileModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Folder'));
+
+    const folderInput = await screen.findByLabelText('Choose Folder');
+
+    const smallFile = new File(['ok'], 'a.txt', { type: 'text/plain' });
+    Object.defineProperty(smallFile, 'size', { value: 1024 });
+    Object.defineProperty(smallFile, 'webkitRelativePath', { value: 'mydir/a.txt' });
+
+    const bigFile = new File(['big'], 'big.bin', { type: 'application/octet-stream' });
+    Object.defineProperty(bigFile, 'size', { value: 11 * 1024 * 1024 });
+    Object.defineProperty(bigFile, 'webkitRelativePath', { value: 'mydir/big.bin' });
+
+    fireEvent.change(folderInput, { target: { files: [smallFile, bigFile] } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/exceeds the per-file limit/)).toBeDefined();
+    });
+  });
+
+  it('shows error when total folder size exceeds limit', async () => {
+    render(<UploadFileModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Folder'));
+
+    const folderInput = await screen.findByLabelText('Choose Folder');
+
+    // Create files that together exceed 100MB but individually are under 10MB
+    const files = [];
+    for (let i = 0; i < 12; i++) {
+      const file = new File([`file-${i}`], `file-${i}.bin`, { type: 'application/octet-stream' });
+      Object.defineProperty(file, 'size', { value: 9 * 1024 * 1024 }); // 9MB each, 12 * 9 = 108MB
+      Object.defineProperty(file, 'webkitRelativePath', { value: `mydir/file-${i}.bin` });
+      files.push(file);
+    }
+
+    fireEvent.change(folderInput, { target: { files } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/exceeds the maximum allowed size/)).toBeDefined();
+    });
+  });
+
+  it('accepts a valid folder and shows summary', async () => {
+    render(<UploadFileModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Folder'));
+
+    const folderInput = await screen.findByLabelText('Choose Folder');
+
+    const file1 = new File(['hello'], 'a.txt', { type: 'text/plain' });
+    Object.defineProperty(file1, 'size', { value: 512 });
+    Object.defineProperty(file1, 'webkitRelativePath', { value: 'mydir/a.txt' });
+
+    const file2 = new File(['world'], 'b.txt', { type: 'text/plain' });
+    Object.defineProperty(file2, 'size', { value: 256 });
+    Object.defineProperty(file2, 'webkitRelativePath', { value: 'mydir/sub/b.txt' });
+
+    fireEvent.change(folderInput, { target: { files: [file1, file2] } });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Selected: mydir\//)).toBeDefined();
+      expect(screen.getByText(/2 file\(s\)/)).toBeDefined();
+    });
+  });
 });