Save current v2 sandbox implementation before styling refactor

- Modified sandbox API routes for v2 implementation
- Updated sandbox providers (E2B and Vercel)
- Added styling-reference directory with Firecrawl AI-ready website
- Preparing for styling system port from Firecrawl design

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

app/api/create-ai-sandbox/route.ts

@@ -9,9 +9,59 @@ declare global {
   var sandboxData: any;
   var existingFiles: Set<string>;
   var sandboxState: SandboxState;
+  var sandboxCreationInProgress: boolean;
+  var sandboxCreationPromise: Promise<any> | null;
 }
 
 export async function POST() {
+  // Check if sandbox creation is already in progress
+  if (global.sandboxCreationInProgress && global.sandboxCreationPromise) {
+    console.log('[create-ai-sandbox] Sandbox creation already in progress, waiting for existing creation...');
+    try {
+      const existingResult = await global.sandboxCreationPromise;
+      console.log('[create-ai-sandbox] Returning existing sandbox creation result');
+      return NextResponse.json(existingResult);
+    } catch (error) {
+      console.error('[create-ai-sandbox] Existing sandbox creation failed:', error);
+      // Continue with new creation if the existing one failed
+    }
+  }
+
+  // Check if we already have an active sandbox
+  if (global.activeSandbox && global.sandboxData) {
+    console.log('[create-ai-sandbox] Returning existing active sandbox');
+    return NextResponse.json({
+      success: true,
+      sandboxId: global.sandboxData.sandboxId,
+      url: global.sandboxData.url
+    });
+  }
+
+  // Set the creation flag
+  global.sandboxCreationInProgress = true;
+  
+  // Create the promise that other requests can await
+  global.sandboxCreationPromise = createSandboxInternal();
+  
+  try {
+    const result = await global.sandboxCreationPromise;
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error('[create-ai-sandbox] Sandbox creation failed:', error);
+    return NextResponse.json(
+      { 
+        error: error instanceof Error ? error.message : 'Failed to create sandbox',
+        details: error instanceof Error ? error.stack : undefined
+      },
+      { status: 500 }
+    );
+  } finally {
+    global.sandboxCreationInProgress = false;
+    global.sandboxCreationPromise = null;
+  }
+}
+
+async function createSandboxInternal() {
   let sandbox: any = null;
 
   try {
@@ -26,6 +76,7 @@ export async function POST() {
         console.error('Failed to stop existing sandbox:', e);
       }
       global.activeSandbox = null;
+      global.sandboxData = null;
     }
     
     // Clear existing files tracking
@@ -297,12 +348,20 @@ body {
     
     console.log('[create-ai-sandbox] Sandbox ready at:', sandboxUrl);
     
-    return NextResponse.json({
+    const result = {
       success: true,
       sandboxId,
       url: sandboxUrl,
       message: 'Vercel sandbox created and Vite React app initialized'
-    });
+    };
+    
+    // Store the result for reuse
+    global.sandboxData = {
+      ...global.sandboxData,
+      ...result
+    };
+    
+    return result;
 
   } catch (error) {
     console.error('[create-ai-sandbox] Error:', error);
@@ -316,12 +375,10 @@ body {
       }
     }
     
-    return NextResponse.json(
-      { 
-        error: error instanceof Error ? error.message : 'Failed to create sandbox',
-        details: error instanceof Error ? error.stack : undefined
-      },
-      { status: 500 }
-    );
+    // Clear global state on error
+    global.activeSandbox = null;
+    global.sandboxData = null;
+    
+    throw error; // Throw to be caught by the outer handler
   }
 }