Add automatic image compression for file uploads to prevent SDK buffer overflow

- Reduced MAX_IMAGE_SIZE from 1MB to 500KB to account for base64 encoding overhead
- Added compressImageIfNeeded() function using sharp library for server-side image processing
- Implements multi-stage compression: quality reduction (80% → 20%), then dimension scaling
- Automatically compresses JPEG/PNG/WebP images exceeding 500KB before upload
- Prevents Claude SDK JSON buffer overflow (1MB limit) when reading large screenshots
- Added sharp@^0.33.0 dependency to frontend package.json
- Graceful error handling if compression fails

Fixes the "JSON message exceeded maximum buffer size" error for large image uploads.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: sallyom

components/frontend/package.json

@@ -37,6 +37,7 @@
     "react-resizable-panels": "^3.0.6",
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
+    "sharp": "^0.33.0",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.5"
   },

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

@@ -4,7 +4,7 @@ import { NextRequest } from 'next/server';
 
 // Maximum file sizes based on type
 const MAX_DOCUMENT_SIZE = 8 * 1024 * 1024; // 8MB for documents
-const MAX_IMAGE_SIZE = 1 * 1024 * 1024; // 1MB for images
+const MAX_IMAGE_SIZE = 500 * 1024; // 500KB for images (SDK has 1MB JSON limit, base64 adds ~33% overhead)
 
 // Determine if a file is an image based on content type
 const isImageFile = (contentType: string): boolean => {
@@ -23,6 +23,75 @@ const formatSizeLimit = (contentType: string): string => {
   return `${sizeInMB}MB for ${fileType}`;
 };
 
+// Compress image if it exceeds size limit
+// Returns compressed image buffer or original if already small enough
+async function compressImageIfNeeded(
+  buffer: ArrayBuffer,
+  contentType: string,
+  maxSize: number
+): Promise<ArrayBuffer> {
+  // Only compress actual images (not SVGs or other formats that won't benefit)
+  if (!contentType.match(/^image\/(jpeg|jpg|png|webp)$/i)) {
+    return buffer;
+  }
+
+  // If already under limit, return as-is
+  if (buffer.byteLength <= maxSize) {
+    return buffer;
+  }
+
+  // Use canvas API to resize and compress
+  // Note: This requires browser APIs, but we're in Next.js API route (Node.js)
+  // We'll use sharp library for server-side image processing
+  try {
+    const sharp = (await import('sharp')).default;
+
+    // Start with moderate compression
+    let quality = 80;
+    let compressed = await sharp(Buffer.from(buffer))
+      .jpeg({ quality, mozjpeg: true }) // Convert to JPEG for better compression
+      .toBuffer();
+
+    // Reduce quality iteratively if still too large
+    while (compressed.byteLength > maxSize && quality > 20) {
+      quality -= 10;
+      compressed = await sharp(Buffer.from(buffer))
+        .jpeg({ quality, mozjpeg: true })
+        .toBuffer();
+    }
+
+    // If still too large, resize dimensions
+    if (compressed.byteLength > maxSize) {
+      const metadata = await sharp(Buffer.from(buffer)).metadata();
+      const width = metadata.width || 1920;
+      const height = metadata.height || 1080;
+
+      // Reduce by 25% iteratively
+      let scale = 0.75;
+      while (compressed.byteLength > maxSize && scale > 0.25) {
+        compressed = await sharp(Buffer.from(buffer))
+          .resize(Math.floor(width * scale), Math.floor(height * scale), {
+            fit: 'inside',
+            withoutEnlargement: true,
+          })
+          .jpeg({ quality: 70, mozjpeg: true })
+          .toBuffer();
+        scale -= 0.1;
+      }
+    }
+
+    console.log(
+      `Compressed image: ${buffer.byteLength} bytes -> ${compressed.byteLength} bytes (${Math.round((compressed.byteLength / buffer.byteLength) * 100)}%)`
+    );
+
+    return compressed.buffer;
+  } catch (error) {
+    console.error('Failed to compress image:', error);
+    // If compression fails, throw error rather than uploading oversized file
+    throw new Error('Image too large and compression failed');
+  }
+}
+
 export async function POST(
   request: NextRequest,
   { params }: { params: Promise<{ name: string; sessionName: string }> },
@@ -46,22 +115,40 @@ export async function POST(
 
       const filename = (formData.get('filename') as string) || file.name;
       const contentType = file.type || 'application/octet-stream';
-
-      // Check file size based on type
       const maxSize = getMaxFileSize(contentType);
-      if (file.size > maxSize) {
-        return new Response(
-          JSON.stringify({
-            error: `File too large. Maximum size is ${formatSizeLimit(contentType)}`
-          }),
-          {
-            status: 413, // Payload Too Large
-            headers: { 'Content-Type': 'application/json' },
-          }
-        );
-      }
 
-      const fileBuffer = await file.arrayBuffer();
+      // Get initial file buffer
+      let fileBuffer = await file.arrayBuffer();
+
+      // For images, compress if needed instead of rejecting
+      if (isImageFile(contentType)) {
+        try {
+          fileBuffer = await compressImageIfNeeded(fileBuffer, contentType, maxSize);
+        } catch (compressionError) {
+          return new Response(
+            JSON.stringify({
+              error: `Image too large and could not be compressed. Please reduce image size and try again.`
+            }),
+            {
+              status: 413, // Payload Too Large
+              headers: { 'Content-Type': 'application/json' },
+            }
+          );
+        }
+      } else {
+        // For non-images, enforce strict size limit
+        if (file.size > maxSize) {
+          return new Response(
+            JSON.stringify({
+              error: `File too large. Maximum size is ${formatSizeLimit(contentType)}`
+            }),
+            {
+              status: 413, // Payload Too Large
+              headers: { 'Content-Type': 'application/json' },
+            }
+          );
+        }
+      }
 
       // Upload to workspace/file-uploads directory using the PUT endpoint
       // Retry logic: if backend returns 202 (content service starting), retry up to 3 times
@@ -133,21 +220,38 @@ export async function POST(
         });
       }
 
-      const fileBuffer = await fileResp.arrayBuffer();
+      let fileBuffer = await fileResp.arrayBuffer();
       const contentType = fileResp.headers.get('content-type') || 'application/octet-stream';
-
-      // Check file size based on type
       const maxSize = getMaxFileSize(contentType);
-      if (fileBuffer.byteLength > maxSize) {
-        return new Response(
-          JSON.stringify({
-            error: `File too large. Maximum size is ${formatSizeLimit(contentType)}`
-          }),
-          {
-            status: 413, // Payload Too Large
-            headers: { 'Content-Type': 'application/json' },
-          }
-        );
+
+      // For images, compress if needed instead of rejecting
+      if (isImageFile(contentType)) {
+        try {
+          fileBuffer = await compressImageIfNeeded(fileBuffer, contentType, maxSize);
+        } catch (compressionError) {
+          return new Response(
+            JSON.stringify({
+              error: `Image too large and could not be compressed. Please reduce image size and try again.`
+            }),
+            {
+              status: 413, // Payload Too Large
+              headers: { 'Content-Type': 'application/json' },
+            }
+          );
+        }
+      } else {
+        // For non-images, enforce strict size limit
+        if (fileBuffer.byteLength > maxSize) {
+          return new Response(
+            JSON.stringify({
+              error: `File too large. Maximum size is ${formatSizeLimit(contentType)}`
+            }),
+            {
+              status: 413, // Payload Too Large
+              headers: { 'Content-Type': 'application/json' },
+            }
+          );
+        }
       }
 
       // Upload to workspace/file-uploads directory using the PUT endpoint