Deploy to clean space

.cursor/mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "dev3000": {
+      "type": "http",
+      "url": "http://localhost:3684/mcp"
+    }
+  }
+}

.env.example

@@ -0,0 +1,46 @@
+# Required
+FIRECRAWL_API_KEY=your_firecrawl_api_key  # Get from https://firecrawl.dev (Web scraping)
+
+# =================================================================================
+# SANDBOX PROVIDER - Choose Option 1 OR 2
+# =================================================================================
+
+# Option 1: Vercel Sandbox (recommended - default)
+# Set SANDBOX_PROVIDER=vercel and choose authentication method below
+SANDBOX_PROVIDER=vercel
+
+# Vercel Authentication - Choose method a OR b
+# Method a: OIDC Token (recommended for development)
+# Run `vercel link` then `vercel env pull` to get VERCEL_OIDC_TOKEN automatically
+VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull
+
+# Method b: Personal Access Token (for production or when OIDC unavailable)
+# VERCEL_TEAM_ID=team_xxxxxxxxx      # Your Vercel team ID 
+# VERCEL_PROJECT_ID=prj_xxxxxxxxx    # Your Vercel project ID
+# VERCEL_TOKEN=vercel_xxxxxxxxxxxx   # Personal access token from Vercel dashboard
+
+# Get yours at https://console.groq.com
+GROQ_API_KEY=your_groq_api_key_here
+
+=======
+# Option 2: E2B Sandbox
+# Set SANDBOX_PROVIDER=e2b and configure E2B_API_KEY below
+# SANDBOX_PROVIDER=e2b
+# E2B_API_KEY=your_e2b_api_key  # Get from https://e2b.dev
+
+# =================================================================================
+# AI PROVIDERS - Need at least one
+# =================================================================================
+
+# Vercel AI Gateway (recommended - provides access to multiple models)
+AI_GATEWAY_API_KEY=your_ai_gateway_api_key  # Get from https://vercel.com/dashboard/ai-gateway/api-keys
+
+# Individual provider keys (used when AI_GATEWAY_API_KEY is not set)
+ANTHROPIC_API_KEY=your_anthropic_api_key  # Get from https://console.anthropic.com
+OPENAI_API_KEY=your_openai_api_key  # Get from https://platform.openai.com (GPT-5)
+GEMINI_API_KEY=your_gemini_api_key  # Get from https://aistudio.google.com/app/apikey
+GROQ_API_KEY=your_groq_api_key  # Get from https://console.groq.com (Fast inference - Kimi K2 recommended)
+
+# Optional Morph Fast Apply
+# Get yours at https://morphllm.com/
+MORPH_API_KEY=your_fast_apply_key

.gitignore

@@ -0,0 +1,60 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+**/node_modules/
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+.env.local
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# E2B template builds
+*.tar.gz
+e2b-template-*
+
+# IDE
+.vscode/
+.idea/
+
+# Temporary files
+*.tmp
+*.temp
+repomix-output.txt
+bun.lockb
+.env*.local
+\n# Log files\n*.log

Dockerfile

@@ -0,0 +1,26 @@
+# Use an official Node.js runtime as a parent image
+FROM node:18-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and pnpm-lock.yaml to leverage Docker cache
+COPY package.json pnpm-lock.yaml ./
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Install dependencies
+RUN pnpm install
+
+# Copy the rest of the application's code
+COPY . .
+
+# Build the Next.js application
+RUN pnpm build
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Command to run the application
+CMD ["pnpm", "start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

PROJECT_README.md

@@ -0,0 +1,67 @@
+# Open Lovable
+
+Chat with AI to build React apps instantly. An example app made by the [Firecrawl](https://firecrawl.dev/?ref=open-lovable-github) team. For a complete cloud solution, check out [Lovable.dev](https://lovable.dev/) ❤️.
+
+<img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbmZtaHFleGRsMTNlaWNydGdianI4NGQ4dHhyZjB0d2VkcjRyeXBucCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZFVLWMa6dVskQX0qu1/giphy.gif" alt="Open Lovable Demo" width="100%"/>
+
+## Setup
+
+1. **Clone & Install**
+```bash
+git clone https://github.com/firecrawl/open-lovable.git
+cd open-lovable
+pnpm install  # or npm install / yarn install
+```
+
+2. **Add `.env.local`**
+
+```env
+# =================================================================
+# REQUIRED
+# =================================================================
+FIRECRAWL_API_KEY=your_firecrawl_api_key    # https://firecrawl.dev
+
+# =================================================================
+# AI PROVIDER - Choose your LLM
+# =================================================================
+GEMINI_API_KEY=your_gemini_api_key        # https://aistudio.google.com/app/apikey
+ANTHROPIC_API_KEY=your_anthropic_api_key  # https://console.anthropic.com
+OPENAI_API_KEY=your_openai_api_key        # https://platform.openai.com
+GROQ_API_KEY=your_groq_api_key            # https://console.groq.com
+
+# =================================================================
+# FAST APPLY (Optional - for faster edits)
+# =================================================================
+MORPH_API_KEY=your_morphllm_api_key    # https://morphllm.com/dashboard
+
+# =================================================================
+# SANDBOX PROVIDER - Choose ONE: Vercel (default) or E2B
+# =================================================================
+SANDBOX_PROVIDER=vercel  # or 'e2b'
+
+# Option 1: Vercel Sandbox (default)
+# Choose one authentication method:
+
+# Method A: OIDC Token (recommended for development)
+# Run `vercel link` then `vercel env pull` to get VERCEL_OIDC_TOKEN automatically
+VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull
+
+# Method B: Personal Access Token (for production or when OIDC unavailable)
+# VERCEL_TEAM_ID=team_xxxxxxxxx      # Your Vercel team ID 
+# VERCEL_PROJECT_ID=prj_xxxxxxxxx    # Your Vercel project ID
+# VERCEL_TOKEN=vercel_xxxxxxxxxxxx   # Personal access token from Vercel dashboard
+
+# Option 2: E2B Sandbox
+# E2B_API_KEY=your_e2b_api_key      # https://e2b.dev
+```
+
+3. **Run**
+```bash
+pnpm dev  # or npm run dev / yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000)
+
+## License
+
+MIT

README.md

@@ -1,10 +1,10 @@
 ---
-title: Openoperator
-emoji: 🐠
-colorFrom: blue
-colorTo: gray
+# Trigger rebuild
+title: Open Lovable
+emoji: ❤️
+colorFrom: pink
+colorTo: blue
 sdk: docker
+app_port: 3000
 pinned: false
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/api/analyze-edit-intent/route.ts

@@ -0,0 +1,190 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createGroq } from '@ai-sdk/groq';
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { createOpenAI } from '@ai-sdk/openai';
+import { createGoogleGenerativeAI } from '@ai-sdk/google';
+import { generateObject } from 'ai';
+import { z } from 'zod';
+// import type { FileManifest } from '@/types/file-manifest'; // Type is used implicitly through manifest parameter
+
+// Check if we're using Vercel AI Gateway
+const isUsingAIGateway = !!process.env.AI_GATEWAY_API_KEY;
+const aiGatewayBaseURL = 'https://ai-gateway.vercel.sh/v1';
+
+const groq = createGroq({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.GROQ_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : undefined,
+});
+
+const anthropic = createAnthropic({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.ANTHROPIC_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : (process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com/v1'),
+});
+
+const openai = createOpenAI({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.OPENAI_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : process.env.OPENAI_BASE_URL,
+});
+
+const googleGenerativeAI = createGoogleGenerativeAI({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.GEMINI_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : undefined,
+});
+
+// Schema for the AI's search plan - not file selection!
+const searchPlanSchema = z.object({
+  editType: z.enum([
+    'UPDATE_COMPONENT',
+    'ADD_FEATURE', 
+    'FIX_ISSUE',
+    'UPDATE_STYLE',
+    'REFACTOR',
+    'ADD_DEPENDENCY',
+    'REMOVE_ELEMENT'
+  ]).describe('The type of edit being requested'),
+  
+  reasoning: z.string().describe('Explanation of the search strategy'),
+  
+  searchTerms: z.array(z.string()).describe('Specific text to search for (case-insensitive). Be VERY specific - exact button text, class names, etc.'),
+  
+  regexPatterns: z.array(z.string()).optional().describe('Regex patterns for finding code structures (e.g., "className=[\\"\\\'].*header.*[\\"\\\']")'),
+  
+  fileTypesToSearch: z.array(z.string()).default(['.jsx', '.tsx', '.js', '.ts']).describe('File extensions to search'),
+  
+  expectedMatches: z.number().min(1).max(10).default(1).describe('Expected number of matches (helps validate search worked)'),
+  
+  fallbackSearch: z.object({
+    terms: z.array(z.string()),
+    patterns: z.array(z.string()).optional()
+  }).optional().describe('Backup search if primary fails')
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const { prompt, manifest, model = 'openai/gpt-oss-20b' } = await request.json();
+    
+    console.log('[analyze-edit-intent] Request received');
+    console.log('[analyze-edit-intent] Prompt:', prompt);
+    console.log('[analyze-edit-intent] Model:', model);
+    console.log('[analyze-edit-intent] Manifest files count:', manifest?.files ? Object.keys(manifest.files).length : 0);
+    
+    if (!prompt || !manifest) {
+      return NextResponse.json({
+        error: 'prompt and manifest are required'
+      }, { status: 400 });
+    }
+    
+    // Create a summary of available files for the AI
+    const validFiles = Object.entries(manifest.files as Record<string, any>)
+      .filter(([path]) => {
+        // Filter out invalid paths
+        return path.includes('.') && !path.match(/\/\d+$/);
+      });
+    
+    const fileSummary = validFiles
+      .map(([path, info]: [string, any]) => {
+        const componentName = info.componentInfo?.name || path.split('/').pop();
+        // const hasImports = info.imports?.length > 0; // Kept for future use
+        const childComponents = info.componentInfo?.childComponents?.join(', ') || 'none';
+        return `- ${path} (${componentName}, renders: ${childComponents})`;
+      })
+      .join('\n');
+    
+    console.log('[analyze-edit-intent] Valid files found:', validFiles.length);
+    
+    if (validFiles.length === 0) {
+      console.error('[analyze-edit-intent] No valid files found in manifest');
+      return NextResponse.json({
+        success: false,
+        error: 'No valid files found in manifest'
+      }, { status: 400 });
+    }
+    
+    console.log('[analyze-edit-intent] Analyzing prompt:', prompt);
+    console.log('[analyze-edit-intent] File summary preview:', fileSummary.split('\n').slice(0, 5).join('\n'));
+    
+    // Select the appropriate AI model based on the request
+    let aiModel;
+    if (model.startsWith('anthropic/')) {
+      aiModel = anthropic(model.replace('anthropic/', ''));
+    } else if (model.startsWith('openai/')) {
+      if (model.includes('gpt-oss')) {
+        aiModel = groq(model);
+      } else {
+        aiModel = openai(model.replace('openai/', ''));
+      }
+    } else if (model.startsWith('google/')) {
+      aiModel = googleGenerativeAI(model.replace('google/', ''));
+    } else {
+      // Default to groq if model format is unclear
+      aiModel = groq(model);
+    }
+    
+    console.log('[analyze-edit-intent] Using AI model:', model);
+    
+    // Use AI to create a search plan
+    const result = await generateObject({
+      model: aiModel,
+      schema: searchPlanSchema,
+      messages: [
+        {
+          role: 'system',
+          content: `You are an expert at planning code searches. Your job is to create a search strategy to find the exact code that needs to be edited.
+
+DO NOT GUESS which files to edit. Instead, provide specific search terms that will locate the code.
+
+SEARCH STRATEGY RULES:
+1. For text changes (e.g., "change 'Start Deploying' to 'Go Now'"):
+   - Search for the EXACT text: "Start Deploying"
+   
+2. For style changes (e.g., "make header black"):
+   - Search for component names: "Header", "<header"
+   - Search for class names: "header", "navbar"
+   - Search for className attributes containing relevant words
+   
+3. For removing elements (e.g., "remove the deploy button"):
+   - Search for the button text or aria-label
+   - Search for relevant IDs or data-testids
+   
+4. For navigation/header issues:
+   - Search for: "navigation", "nav", "Header", "navbar"
+   - Look for Link components or href attributes
+   
+5. Be SPECIFIC:
+   - Use exact capitalization for user-visible text
+   - Include multiple search terms for redundancy
+   - Add regex patterns for structural searches
+
+Current project structure for context:
+${fileSummary}`
+        },
+        {
+          role: 'user',
+          content: `User request: "${prompt}"
+
+Create a search plan to find the exact code that needs to be modified. Include specific search terms and patterns.`
+        }
+      ]
+    });
+    
+    console.log('[analyze-edit-intent] Search plan created:', {
+      editType: result.object.editType,
+      searchTerms: result.object.searchTerms,
+      patterns: result.object.regexPatterns?.length || 0,
+      reasoning: result.object.reasoning
+    });
+    
+    // Return the search plan, not file matches
+    return NextResponse.json({
+      success: true,
+      searchPlan: result.object
+    });
+    
+  } catch (error) {
+    console.error('[analyze-edit-intent] Error:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}

app/api/apply-ai-code-stream/route.ts

@@ -0,0 +1,799 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { parseMorphEdits, applyMorphEditToFile } from '@/lib/morph-fast-apply';
+// Sandbox import not needed - using global sandbox from sandbox-manager
+import type { SandboxState } from '@/types/sandbox';
+import type { ConversationState } from '@/types/conversation';
+import { sandboxManager } from '@/lib/sandbox/sandbox-manager';
+
+declare global {
+  var conversationState: ConversationState | null;
+  var activeSandboxProvider: any;
+  var existingFiles: Set<string>;
+  var sandboxState: SandboxState;
+}
+
+interface ParsedResponse {
+  explanation: string;
+  template: string;
+  files: Array<{ path: string; content: string }>;
+  packages: string[];
+  commands: string[];
+  structure: string | null;
+}
+
+function parseAIResponse(response: string): ParsedResponse {
+  const sections = {
+    files: [] as Array<{ path: string; content: string }>,
+    commands: [] as string[],
+    packages: [] as string[],
+    structure: null as string | null,
+    explanation: '',
+    template: ''
+  };
+
+  // Function to extract packages from import statements
+  function extractPackagesFromCode(content: string): string[] {
+    const packages: string[] = [];
+    // Match ES6 imports
+    const importRegex = /import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)(?:\s*,\s*(?:\{[^}]*\}|\*\s+as\s+\w+|\w+))*\s+from\s+)?['"]([^'"]+)['"]/g;
+    let importMatch;
+
+    while ((importMatch = importRegex.exec(content)) !== null) {
+      const importPath = importMatch[1];
+      // Skip relative imports and built-in React
+      if (!importPath.startsWith('.') && !importPath.startsWith('/') &&
+        importPath !== 'react' && importPath !== 'react-dom' &&
+        !importPath.startsWith('@/')) {
+        // Extract package name (handle scoped packages like @heroicons/react)
+        const packageName = importPath.startsWith('@')
+          ? importPath.split('/').slice(0, 2).join('/')
+          : importPath.split('/')[0];
+
+        if (!packages.includes(packageName)) {
+          packages.push(packageName);
+
+          // Log important packages for debugging
+          if (packageName === 'react-router-dom' || packageName.includes('router') || packageName.includes('icon')) {
+            console.log(`[apply-ai-code-stream] Detected package from imports: ${packageName}`);
+          }
+        }
+      }
+    }
+
+    return packages;
+  }
+
+  // Parse file sections - handle duplicates and prefer complete versions
+  const fileMap = new Map<string, { content: string; isComplete: boolean }>();
+
+  // First pass: Find all file declarations
+  const fileRegex = /<file path="([^"]+)">([\s\S]*?)(?:<\/file>|$)/g;
+  let match;
+  while ((match = fileRegex.exec(response)) !== null) {
+    const filePath = match[1];
+    const content = match[2].trim();
+    const hasClosingTag = response.substring(match.index, match.index + match[0].length).includes('</file>');
+
+    // Check if this file already exists in our map
+    const existing = fileMap.get(filePath);
+
+    // Decide whether to keep this version
+    let shouldReplace = false;
+    if (!existing) {
+      shouldReplace = true; // First occurrence
+    } else if (!existing.isComplete && hasClosingTag) {
+      shouldReplace = true; // Replace incomplete with complete
+      console.log(`[apply-ai-code-stream] Replacing incomplete ${filePath} with complete version`);
+    } else if (existing.isComplete && hasClosingTag && content.length > existing.content.length) {
+      shouldReplace = true; // Replace with longer complete version
+      console.log(`[apply-ai-code-stream] Replacing ${filePath} with longer complete version`);
+    } else if (!existing.isComplete && !hasClosingTag && content.length > existing.content.length) {
+      shouldReplace = true; // Both incomplete, keep longer one
+    }
+
+    if (shouldReplace) {
+      // Additional validation: reject obviously broken content
+      if (content.includes('...') && !content.includes('...props') && !content.includes('...rest')) {
+        console.warn(`[apply-ai-code-stream] Warning: ${filePath} contains ellipsis, may be truncated`);
+        // Still use it if it's the only version we have
+        if (!existing) {
+          fileMap.set(filePath, { content, isComplete: hasClosingTag });
+        }
+      } else {
+        fileMap.set(filePath, { content, isComplete: hasClosingTag });
+      }
+    }
+  }
+
+  // Convert map to array for sections.files
+  for (const [path, { content, isComplete }] of fileMap.entries()) {
+    if (!isComplete) {
+      console.log(`[apply-ai-code-stream] Warning: File ${path} appears to be truncated (no closing tag)`);
+    }
+
+    sections.files.push({
+      path,
+      content
+    });
+
+    // Extract packages from file content
+    const filePackages = extractPackagesFromCode(content);
+    for (const pkg of filePackages) {
+      if (!sections.packages.includes(pkg)) {
+        sections.packages.push(pkg);
+        console.log(`[apply-ai-code-stream] 📦 Package detected from imports: ${pkg}`);
+      }
+    }
+  }
+
+  // Also parse markdown code blocks with file paths
+  const markdownFileRegex = /```(?:file )?path="([^"]+)"\n([\s\S]*?)```/g;
+  while ((match = markdownFileRegex.exec(response)) !== null) {
+    const filePath = match[1];
+    const content = match[2].trim();
+    sections.files.push({
+      path: filePath,
+      content: content
+    });
+
+    // Extract packages from file content
+    const filePackages = extractPackagesFromCode(content);
+    for (const pkg of filePackages) {
+      if (!sections.packages.includes(pkg)) {
+        sections.packages.push(pkg);
+        console.log(`[apply-ai-code-stream] 📦 Package detected from imports: ${pkg}`);
+      }
+    }
+  }
+
+  // Parse plain text format like "Generated Files: Header.jsx, index.css"
+  const generatedFilesMatch = response.match(/Generated Files?:\s*([^\n]+)/i);
+  if (generatedFilesMatch) {
+    // Split by comma first, then trim whitespace, to preserve filenames with dots
+    const filesList = generatedFilesMatch[1]
+      .split(',')
+      .map(f => f.trim())
+      .filter(f => f.endsWith('.jsx') || f.endsWith('.js') || f.endsWith('.tsx') || f.endsWith('.ts') || f.endsWith('.css') || f.endsWith('.json') || f.endsWith('.html'));
+    console.log(`[apply-ai-code-stream] Detected generated files from plain text: ${filesList.join(', ')}`);
+
+    // Try to extract the actual file content if it follows
+    for (const fileName of filesList) {
+      // Look for the file content after the file name
+      const fileContentRegex = new RegExp(`${fileName}[\\s\\S]*?(?:import[\\s\\S]+?)(?=Generated Files:|Applying code|$)`, 'i');
+      const fileContentMatch = response.match(fileContentRegex);
+      if (fileContentMatch) {
+        // Extract just the code part (starting from import statements)
+        const codeMatch = fileContentMatch[0].match(/^(import[\s\S]+)$/m);
+        if (codeMatch) {
+          const filePath = fileName.includes('/') ? fileName : `src/components/${fileName}`;
+          sections.files.push({
+            path: filePath,
+            content: codeMatch[1].trim()
+          });
+          console.log(`[apply-ai-code-stream] Extracted content for ${filePath}`);
+
+          // Extract packages from this file
+          const filePackages = extractPackagesFromCode(codeMatch[1]);
+          for (const pkg of filePackages) {
+            if (!sections.packages.includes(pkg)) {
+              sections.packages.push(pkg);
+              console.log(`[apply-ai-code-stream] Package detected from imports: ${pkg}`);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Also try to parse if the response contains raw JSX/JS code blocks
+  const codeBlockRegex = /```(?:jsx?|tsx?|javascript|typescript)?\n([\s\S]*?)```/g;
+  while ((match = codeBlockRegex.exec(response)) !== null) {
+    const content = match[1].trim();
+    // Try to detect the file name from comments or context
+    const fileNameMatch = content.match(/\/\/\s*(?:File:|Component:)\s*([^\n]+)/);
+    if (fileNameMatch) {
+      const fileName = fileNameMatch[1].trim();
+      const filePath = fileName.includes('/') ? fileName : `src/components/${fileName}`;
+
+      // Don't add duplicate files
+      if (!sections.files.some(f => f.path === filePath)) {
+        sections.files.push({
+          path: filePath,
+          content: content
+        });
+
+        // Extract packages
+        const filePackages = extractPackagesFromCode(content);
+        for (const pkg of filePackages) {
+          if (!sections.packages.includes(pkg)) {
+            sections.packages.push(pkg);
+          }
+        }
+      }
+    }
+  }
+
+  // Parse commands
+  const cmdRegex = /<command>(.*?)<\/command>/g;
+  while ((match = cmdRegex.exec(response)) !== null) {
+    sections.commands.push(match[1].trim());
+  }
+
+  // Parse packages - support both <package> and <packages> tags
+  const pkgRegex = /<package>(.*?)<\/package>/g;
+  while ((match = pkgRegex.exec(response)) !== null) {
+    sections.packages.push(match[1].trim());
+  }
+
+  // Also parse <packages> tag with multiple packages
+  const packagesRegex = /<packages>([\s\S]*?)<\/packages>/;
+  const packagesMatch = response.match(packagesRegex);
+  if (packagesMatch) {
+    const packagesContent = packagesMatch[1].trim();
+    // Split by newlines or commas
+    const packagesList = packagesContent.split(/[\n,]+/)
+      .map(pkg => pkg.trim())
+      .filter(pkg => pkg.length > 0);
+    sections.packages.push(...packagesList);
+  }
+
+  // Parse structure
+  const structureMatch = /<structure>([\s\S]*?)<\/structure>/;
+  const structResult = response.match(structureMatch);
+  if (structResult) {
+    sections.structure = structResult[1].trim();
+  }
+
+  // Parse explanation
+  const explanationMatch = /<explanation>([\s\S]*?)<\/explanation>/;
+  const explResult = response.match(explanationMatch);
+  if (explResult) {
+    sections.explanation = explResult[1].trim();
+  }
+
+  // Parse template
+  const templateMatch = /<template>(.*?)<\/template>/;
+  const templResult = response.match(templateMatch);
+  if (templResult) {
+    sections.template = templResult[1].trim();
+  }
+
+  return sections;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { response, isEdit = false, packages = [], sandboxId } = await request.json();
+
+    if (!response) {
+      return NextResponse.json({
+        error: 'response is required'
+      }, { status: 400 });
+    }
+
+    // Debug log the response
+    console.log('[apply-ai-code-stream] Received response to parse:');
+    console.log('[apply-ai-code-stream] Response length:', response.length);
+    console.log('[apply-ai-code-stream] Response preview:', response.substring(0, 500));
+    console.log('[apply-ai-code-stream] isEdit:', isEdit);
+    console.log('[apply-ai-code-stream] packages:', packages);
+
+    // Parse the AI response
+    const parsed = parseAIResponse(response);
+    const morphEnabled = Boolean(isEdit && process.env.MORPH_API_KEY);
+    const morphEdits = morphEnabled ? parseMorphEdits(response) : [];
+    console.log('[apply-ai-code-stream] Morph Fast Apply mode:', morphEnabled);
+    if (morphEnabled) {
+      console.log('[apply-ai-code-stream] Morph edits found:', morphEdits.length);
+    }
+    
+    // Log what was parsed
+    console.log('[apply-ai-code-stream] Parsed result:');
+    console.log('[apply-ai-code-stream] Files found:', parsed.files.length);
+    if (parsed.files.length > 0) {
+      parsed.files.forEach(f => {
+        console.log(`[apply-ai-code-stream] - ${f.path} (${f.content.length} chars)`);
+      });
+    }
+    console.log('[apply-ai-code-stream] Packages found:', parsed.packages);
+
+    // Initialize existingFiles if not already
+    if (!global.existingFiles) {
+      global.existingFiles = new Set<string>();
+    }
+
+    // Try to get provider from sandbox manager first
+    let provider = sandboxId ? sandboxManager.getProvider(sandboxId) : sandboxManager.getActiveProvider();
+
+    // Fall back to global state if not found in manager
+    if (!provider) {
+      provider = global.activeSandboxProvider;
+    }
+
+    // If we have a sandboxId but no provider, try to get or create one
+    if (!provider && sandboxId) {
+      console.log(`[apply-ai-code-stream] No provider found for sandbox ${sandboxId}, attempting to get or create...`);
+
+      try {
+        provider = await sandboxManager.getOrCreateProvider(sandboxId);
+
+        // If we got a new provider (not reconnected), we need to create a new sandbox
+        if (!provider.getSandboxInfo()) {
+          console.log(`[apply-ai-code-stream] Creating new sandbox since reconnection failed for ${sandboxId}`);
+          await provider.createSandbox();
+          await provider.setupViteApp();
+          sandboxManager.registerSandbox(sandboxId, provider);
+        }
+
+        // Update legacy global state
+        global.activeSandboxProvider = provider;
+        console.log(`[apply-ai-code-stream] Successfully got provider for sandbox ${sandboxId}`);
+      } catch (providerError) {
+        console.error(`[apply-ai-code-stream] Failed to get or create provider for sandbox ${sandboxId}:`, providerError);
+        return NextResponse.json({
+          success: false,
+          error: `Failed to create sandbox provider for ${sandboxId}. The sandbox may have expired.`,
+          results: {
+            filesCreated: [],
+            packagesInstalled: [],
+            commandsExecuted: [],
+            errors: [`Sandbox provider creation failed: ${(providerError as Error).message}`]
+          },
+          explanation: parsed.explanation,
+          structure: parsed.structure,
+          parsedFiles: parsed.files,
+          message: `Parsed ${parsed.files.length} files but couldn't apply them - sandbox reconnection failed.`
+        }, { status: 500 });
+      }
+    }
+
+    // If we still don't have a provider, create a new one
+    if (!provider) {
+      console.log(`[apply-ai-code-stream] No active provider found, creating new sandbox...`);
+      try {
+        const { SandboxFactory } = await import('@/lib/sandbox/factory');
+        provider = SandboxFactory.create();
+        const sandboxInfo = await provider.createSandbox();
+        await provider.setupViteApp();
+
+        // Register with sandbox manager
+        sandboxManager.registerSandbox(sandboxInfo.sandboxId, provider);
+
+        // Store in legacy global state
+        global.activeSandboxProvider = provider;
+        global.sandboxData = {
+          sandboxId: sandboxInfo.sandboxId,
+          url: sandboxInfo.url
+        };
+
+        console.log(`[apply-ai-code-stream] Created new sandbox successfully`);
+      } catch (createError) {
+        console.error(`[apply-ai-code-stream] Failed to create new sandbox:`, createError);
+        return NextResponse.json({
+          success: false,
+          error: `Failed to create new sandbox: ${createError instanceof Error ? createError.message : 'Unknown error'}`,
+          results: {
+            filesCreated: [],
+            packagesInstalled: [],
+            commandsExecuted: [],
+            errors: [`Sandbox creation failed: ${createError instanceof Error ? createError.message : 'Unknown error'}`]
+          },
+          explanation: parsed.explanation,
+          structure: parsed.structure,
+          parsedFiles: parsed.files,
+          message: `Parsed ${parsed.files.length} files but couldn't apply them - sandbox creation failed.`
+        }, { status: 500 });
+      }
+    }
+
+    // Create a response stream for real-time updates
+    const encoder = new TextEncoder();
+    const stream = new TransformStream();
+    const writer = stream.writable.getWriter();
+
+    // Function to send progress updates
+    const sendProgress = async (data: any) => {
+      const message = `data: ${JSON.stringify(data)}\n\n`;
+      await writer.write(encoder.encode(message));
+    };
+
+    // Start processing in background (pass provider and request to the async function)
+    (async (providerInstance, req) => {
+      const results = {
+        filesCreated: [] as string[],
+        filesUpdated: [] as string[],
+        packagesInstalled: [] as string[],
+        packagesAlreadyInstalled: [] as string[],
+        packagesFailed: [] as string[],
+        commandsExecuted: [] as string[],
+        errors: [] as string[]
+      };
+
+      try {
+        await sendProgress({
+          type: 'start',
+          message: 'Starting code application...',
+          totalSteps: 3
+        });
+        if (morphEnabled) {
+          await sendProgress({ type: 'info', message: 'Morph Fast Apply enabled' });
+          await sendProgress({ type: 'info', message: `Parsed ${morphEdits.length} Morph edits` });
+          if (morphEdits.length === 0) {
+            console.warn('[apply-ai-code-stream] Morph enabled but no <edit> blocks found; falling back to full-file flow');
+            await sendProgress({ type: 'warning', message: 'Morph enabled but no <edit> blocks found; falling back to full-file flow' });
+          }
+        }
+        
+        // Step 1: Install packages
+        const packagesArray = Array.isArray(packages) ? packages : [];
+        const parsedPackages = Array.isArray(parsed.packages) ? parsed.packages : [];
+
+        // Combine and deduplicate packages
+        const allPackages = [...packagesArray.filter(pkg => pkg && typeof pkg === 'string'), ...parsedPackages];
+
+        // Use Set to remove duplicates, then filter out pre-installed packages
+        const uniquePackages = [...new Set(allPackages)]
+          .filter(pkg => pkg && typeof pkg === 'string' && pkg.trim() !== '') // Remove empty strings
+          .filter(pkg => pkg !== 'react' && pkg !== 'react-dom'); // Filter pre-installed
+
+        // Log if we found duplicates
+        if (allPackages.length !== uniquePackages.length) {
+          console.log(`[apply-ai-code-stream] Removed ${allPackages.length - uniquePackages.length} duplicate packages`);
+          console.log(`[apply-ai-code-stream] Original packages:`, allPackages);
+          console.log(`[apply-ai-code-stream] Deduplicated packages:`, uniquePackages);
+        }
+
+        if (uniquePackages.length > 0) {
+          await sendProgress({
+            type: 'step',
+            step: 1,
+            message: `Installing ${uniquePackages.length} packages...`,
+            packages: uniquePackages
+          });
+
+          // Use streaming package installation
+          try {
+            // Construct the API URL properly for both dev and production
+            const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
+            const host = req.headers.get('host') || 'localhost:3000';
+            const apiUrl = `${protocol}://${host}/api/install-packages`;
+
+            const installResponse = await fetch(apiUrl, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                packages: uniquePackages,
+                sandboxId: sandboxId || providerInstance.getSandboxInfo()?.sandboxId
+              })
+            });
+
+            if (installResponse.ok && installResponse.body) {
+              const reader = installResponse.body.getReader();
+              const decoder = new TextDecoder();
+
+              while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+
+                const chunk = decoder.decode(value);
+                if (!chunk) continue;
+                const lines = chunk.split('\n');
+
+                for (const line of lines) {
+                  if (line.startsWith('data: ')) {
+                    try {
+                      const data = JSON.parse(line.slice(6));
+
+                      // Forward package installation progress
+                      await sendProgress({
+                        type: 'package-progress',
+                        ...data
+                      });
+
+                      // Track results
+                      if (data.type === 'success' && data.installedPackages) {
+                        results.packagesInstalled = data.installedPackages;
+                      }
+                    } catch (parseError) {
+                      console.debug('Error parsing terminal output:', parseError);
+                    }
+                  }
+                }
+              }
+            }
+          } catch (error) {
+            console.error('[apply-ai-code-stream] Error installing packages:', error);
+            await sendProgress({
+              type: 'warning',
+              message: `Package installation skipped (${(error as Error).message}). Continuing with file creation...`
+            });
+            results.errors.push(`Package installation failed: ${(error as Error).message}`);
+          }
+        } else {
+          await sendProgress({
+            type: 'step',
+            step: 1,
+            message: 'No additional packages to install, skipping...'
+          });
+        }
+
+        // Step 2: Create/update files
+        const filesArray = Array.isArray(parsed.files) ? parsed.files : [];
+        await sendProgress({
+          type: 'step',
+          step: 2,
+          message: `Creating ${filesArray.length} files...`
+        });
+
+        // Filter out config files that shouldn't be created
+        const configFiles = ['tailwind.config.js', 'vite.config.js', 'package.json', 'package-lock.json', 'tsconfig.json', 'postcss.config.js'];
+        let filteredFiles = filesArray.filter(file => {
+          if (!file || typeof file !== 'object') return false;
+          const fileName = (file.path || '').split('/').pop() || '';
+          return !configFiles.includes(fileName);
+        });
+
+        // If Morph is enabled and we have edits, apply them before file writes
+        const morphUpdatedPaths = new Set<string>();
+        if (morphEnabled && morphEdits.length > 0) {
+          const morphSandbox = (global as any).activeSandbox || providerInstance;
+          if (!morphSandbox) {
+            console.warn('[apply-ai-code-stream] No sandbox available to apply Morph edits');
+            await sendProgress({ type: 'warning', message: 'No sandbox available to apply Morph edits' });
+          } else {
+            await sendProgress({ type: 'info', message: `Applying ${morphEdits.length} fast edits via Morph...` });
+            for (const [idx, edit] of morphEdits.entries()) {
+              try {
+                await sendProgress({ type: 'file-progress', current: idx + 1, total: morphEdits.length, fileName: edit.targetFile, action: 'morph-applying' });
+                const result = await applyMorphEditToFile({
+                  sandbox: morphSandbox,
+                  targetPath: edit.targetFile,
+                  instructions: edit.instructions,
+                  updateSnippet: edit.update
+                });
+                if (result.success && result.normalizedPath) {
+                  console.log('[apply-ai-code-stream] Morph updated', result.normalizedPath);
+                  morphUpdatedPaths.add(result.normalizedPath);
+                  if (results.filesUpdated) results.filesUpdated.push(result.normalizedPath);
+                  await sendProgress({ type: 'file-complete', fileName: result.normalizedPath, action: 'morph-updated' });
+                } else {
+                  const msg = result.error || 'Unknown Morph error';
+                  console.error('[apply-ai-code-stream] Morph apply failed for', edit.targetFile, msg);
+                  if (results.errors) results.errors.push(`Morph apply failed for ${edit.targetFile}: ${msg}`);
+                  await sendProgress({ type: 'file-error', fileName: edit.targetFile, error: msg });
+                }
+              } catch (err) {
+                const msg = (err as Error).message;
+                console.error('[apply-ai-code-stream] Morph apply exception for', edit.targetFile, msg);
+                if (results.errors) results.errors.push(`Morph apply exception for ${edit.targetFile}: ${msg}`);
+                await sendProgress({ type: 'file-error', fileName: edit.targetFile, error: msg });
+              }
+            }
+          }
+        }
+
+        // Avoid overwriting Morph-updated files in the file write loop
+        if (morphUpdatedPaths.size > 0) {
+          filteredFiles = filteredFiles.filter(file => {
+            if (!file?.path) return true;
+            let normalizedPath = file.path.startsWith('/') ? file.path.slice(1) : file.path;
+            const fileName = normalizedPath.split('/').pop() || '';
+            if (!normalizedPath.startsWith('src/') &&
+                !normalizedPath.startsWith('public/') &&
+                normalizedPath !== 'index.html' &&
+                !configFiles.includes(fileName)) {
+              normalizedPath = 'src/' + normalizedPath;
+            }
+            return !morphUpdatedPaths.has(normalizedPath);
+          });
+        }
+        
+        for (const [index, file] of filteredFiles.entries()) {
+          try {
+            // Send progress for each file
+            await sendProgress({
+              type: 'file-progress',
+              current: index + 1,
+              total: filteredFiles.length,
+              fileName: file.path,
+              action: 'creating'
+            });
+
+            // Normalize the file path
+            let normalizedPath = file.path;
+            if (normalizedPath.startsWith('/')) {
+              normalizedPath = normalizedPath.substring(1);
+            }
+            if (!normalizedPath.startsWith('src/') &&
+              !normalizedPath.startsWith('public/') &&
+              normalizedPath !== 'index.html' &&
+              !configFiles.includes(normalizedPath.split('/').pop() || '')) {
+              normalizedPath = 'src/' + normalizedPath;
+            }
+
+            const isUpdate = global.existingFiles.has(normalizedPath);
+
+            // Remove any CSS imports from JSX/JS files (we're using Tailwind)
+            let fileContent = file.content;
+            if (file.path.endsWith('.jsx') || file.path.endsWith('.js') || file.path.endsWith('.tsx') || file.path.endsWith('.ts')) {
+              fileContent = fileContent.replace(/import\s+['"]\.\/[^'"]+\.css['"];?\s*\n?/g, '');
+            }
+
+            // Fix common Tailwind CSS errors in CSS files
+            if (file.path.endsWith('.css')) {
+              // Replace shadow-3xl with shadow-2xl (shadow-3xl doesn't exist)
+              fileContent = fileContent.replace(/shadow-3xl/g, 'shadow-2xl');
+              // Replace any other non-existent shadow utilities
+              fileContent = fileContent.replace(/shadow-4xl/g, 'shadow-2xl');
+              fileContent = fileContent.replace(/shadow-5xl/g, 'shadow-2xl');
+            }
+
+            // Create directory if needed
+            const dirPath = normalizedPath.includes('/') ? normalizedPath.substring(0, normalizedPath.lastIndexOf('/')) : '';
+            if (dirPath) {
+              await providerInstance.runCommand(`mkdir -p ${dirPath}`);
+            }
+
+            // Write the file using provider
+            await providerInstance.writeFile(normalizedPath, fileContent);
+
+            // Update file cache
+            if (global.sandboxState?.fileCache) {
+              global.sandboxState.fileCache.files[normalizedPath] = {
+                content: fileContent,
+                lastModified: Date.now()
+              };
+            }
+
+            if (isUpdate) {
+              if (results.filesUpdated) results.filesUpdated.push(normalizedPath);
+            } else {
+              if (results.filesCreated) results.filesCreated.push(normalizedPath);
+              if (global.existingFiles) global.existingFiles.add(normalizedPath);
+            }
+
+            await sendProgress({
+              type: 'file-complete',
+              fileName: normalizedPath,
+              action: isUpdate ? 'updated' : 'created'
+            });
+          } catch (error) {
+            if (results.errors) {
+              results.errors.push(`Failed to create ${file.path}: ${(error as Error).message}`);
+            }
+            await sendProgress({
+              type: 'file-error',
+              fileName: file.path,
+              error: (error as Error).message
+            });
+          }
+        }
+
+        // Step 3: Execute commands
+        const commandsArray = Array.isArray(parsed.commands) ? parsed.commands : [];
+        if (commandsArray.length > 0) {
+          await sendProgress({
+            type: 'step',
+            step: 3,
+            message: `Executing ${commandsArray.length} commands...`
+          });
+
+          for (const [index, cmd] of commandsArray.entries()) {
+            try {
+              await sendProgress({
+                type: 'command-progress',
+                current: index + 1,
+                total: parsed.commands.length,
+                command: cmd,
+                action: 'executing'
+              });
+
+              // Use provider runCommand
+              const result = await providerInstance.runCommand(cmd);
+
+              // Get command output from provider result
+              const stdout = result.stdout;
+              const stderr = result.stderr;
+
+              if (stdout) {
+                await sendProgress({
+                  type: 'command-output',
+                  command: cmd,
+                  output: stdout,
+                  stream: 'stdout'
+                });
+              }
+
+              if (stderr) {
+                await sendProgress({
+                  type: 'command-output',
+                  command: cmd,
+                  output: stderr,
+                  stream: 'stderr'
+                });
+              }
+
+              if (results.commandsExecuted) {
+                results.commandsExecuted.push(cmd);
+              }
+
+              await sendProgress({
+                type: 'command-complete',
+                command: cmd,
+                exitCode: result.exitCode,
+                success: result.exitCode === 0
+              });
+            } catch (error) {
+              if (results.errors) {
+                results.errors.push(`Failed to execute ${cmd}: ${(error as Error).message}`);
+              }
+              await sendProgress({
+                type: 'command-error',
+                command: cmd,
+                error: (error as Error).message
+              });
+            }
+          }
+        }
+
+        // Send final results
+        await sendProgress({
+          type: 'complete',
+          results,
+          explanation: parsed.explanation,
+          structure: parsed.structure,
+          message: `Successfully applied ${results.filesCreated.length} files`
+        });
+
+        // Track applied files in conversation state
+        if (global.conversationState && results.filesCreated.length > 0) {
+          const messages = global.conversationState.context.messages;
+          if (messages.length > 0) {
+            const lastMessage = messages[messages.length - 1];
+            if (lastMessage.role === 'user') {
+              lastMessage.metadata = {
+                ...lastMessage.metadata,
+                editedFiles: results.filesCreated
+              };
+            }
+          }
+
+          // Track applied code in project evolution
+          if (global.conversationState.context.projectEvolution) {
+            global.conversationState.context.projectEvolution.majorChanges.push({
+              timestamp: Date.now(),
+              description: parsed.explanation || 'Code applied',
+              filesAffected: results.filesCreated || []
+            });
+          }
+
+          global.conversationState.lastUpdated = Date.now();
+        }
+
+      } catch (error) {
+        await sendProgress({
+          type: 'error',
+          error: (error as Error).message
+        });
+      } finally {
+        await writer.close();
+      }
+    })(provider, request);
+
+    // Return the stream
+    return new Response(stream.readable, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+      },
+    });
+
+  } catch (error) {
+    console.error('Apply AI code stream error:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to parse AI code' },
+      { status: 500 }
+    );
+  }
+}

app/api/apply-ai-code/route.ts

@@ -0,0 +1,800 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { parseMorphEdits, applyMorphEditToFile } from '@/lib/morph-fast-apply';
+import type { SandboxState } from '@/types/sandbox';
+import type { ConversationState } from '@/types/conversation';
+
+declare global {
+  var conversationState: ConversationState | null;
+}
+
+interface ParsedResponse {
+  explanation: string;
+  template: string;
+  files: Array<{ path: string; content: string }>;
+  packages: string[];
+  commands: string[];
+  structure: string | null;
+}
+
+function parseAIResponse(response: string): ParsedResponse {
+  const sections = {
+    files: [] as Array<{ path: string; content: string }>,
+    commands: [] as string[],
+    packages: [] as string[],
+    structure: null as string | null,
+    explanation: '',
+    template: ''
+  };
+
+  // Parse file sections - handle duplicates and prefer complete versions
+  const fileMap = new Map<string, { content: string; isComplete: boolean }>();
+  
+  const fileRegex = /<file path="([^"]+)">([\s\S]*?)(?:<\/file>|$)/g;
+  let match;
+  while ((match = fileRegex.exec(response)) !== null) {
+    const filePath = match[1];
+    const content = match[2].trim();
+    const hasClosingTag = response.substring(match.index, match.index + match[0].length).includes('</file>');
+    
+    // Check if this file already exists in our map
+    const existing = fileMap.get(filePath);
+    
+    // Decide whether to keep this version
+    let shouldReplace = false;
+    if (!existing) {
+      shouldReplace = true; // First occurrence
+    } else if (!existing.isComplete && hasClosingTag) {
+      shouldReplace = true; // Replace incomplete with complete
+      console.log(`[parseAIResponse] Replacing incomplete ${filePath} with complete version`);
+    } else if (existing.isComplete && hasClosingTag && content.length > existing.content.length) {
+      shouldReplace = true; // Replace with longer complete version
+      console.log(`[parseAIResponse] Replacing ${filePath} with longer complete version`);
+    } else if (!existing.isComplete && !hasClosingTag && content.length > existing.content.length) {
+      shouldReplace = true; // Both incomplete, keep longer one
+    }
+    
+    if (shouldReplace) {
+      // Additional validation: reject obviously broken content
+      if (content.includes('...') && !content.includes('...props') && !content.includes('...rest')) {
+        console.warn(`[parseAIResponse] Warning: ${filePath} contains ellipsis, may be truncated`);
+        // Still use it if it's the only version we have
+        if (!existing) {
+          fileMap.set(filePath, { content, isComplete: hasClosingTag });
+        }
+      } else {
+        fileMap.set(filePath, { content, isComplete: hasClosingTag });
+      }
+    }
+  }
+  
+  // Convert map to array for sections.files
+  for (const [path, { content, isComplete }] of fileMap.entries()) {
+    if (!isComplete) {
+      console.log(`[parseAIResponse] Warning: File ${path} appears to be truncated (no closing tag)`);
+    }
+    
+    sections.files.push({
+      path,
+      content
+    });
+  }
+
+  // Parse commands
+  const cmdRegex = /<command>(.*?)<\/command>/g;
+  while ((match = cmdRegex.exec(response)) !== null) {
+    sections.commands.push(match[1].trim());
+  }
+
+  // Parse packages - support both <package> and <packages> tags
+  const pkgRegex = /<package>(.*?)<\/package>/g;
+  while ((match = pkgRegex.exec(response)) !== null) {
+    sections.packages.push(match[1].trim());
+  }
+  
+  // Also parse <packages> tag with multiple packages
+  const packagesRegex = /<packages>([\s\S]*?)<\/packages>/;
+  const packagesMatch = response.match(packagesRegex);
+  if (packagesMatch) {
+    const packagesContent = packagesMatch[1].trim();
+    // Split by newlines or commas
+    const packagesList = packagesContent.split(/[\n,]+/)
+      .map(pkg => pkg.trim())
+      .filter(pkg => pkg.length > 0);
+    sections.packages.push(...packagesList);
+  }
+
+  // Parse structure
+  const structureMatch = /<structure>([\s\S]*?)<\/structure>/;
+  const structResult = response.match(structureMatch);
+  if (structResult) {
+    sections.structure = structResult[1].trim();
+  }
+
+  // Parse explanation
+  const explanationMatch = /<explanation>([\s\S]*?)<\/explanation>/;
+  const explResult = response.match(explanationMatch);
+  if (explResult) {
+    sections.explanation = explResult[1].trim();
+  }
+
+  // Parse template
+  const templateMatch = /<template>(.*?)<\/template>/;
+  const templResult = response.match(templateMatch);
+  if (templResult) {
+    sections.template = templResult[1].trim();
+  }
+
+  return sections;
+}
+
+declare global {
+  var activeSandbox: any;
+  var activeSandboxProvider: any;
+  var existingFiles: Set<string>;
+  var sandboxState: SandboxState;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { response, isEdit = false, packages = [] } = await request.json();
+    
+    if (!response) {
+      return NextResponse.json({
+        error: 'response is required'
+      }, { status: 400 });
+    }
+    
+    // Parse the AI response
+    const parsed = parseAIResponse(response);
+    const morphEnabled = Boolean(isEdit && process.env.MORPH_API_KEY);
+    const morphEdits = morphEnabled ? parseMorphEdits(response) : [];
+    console.log('[apply-ai-code] Morph Fast Apply mode:', morphEnabled);
+    if (morphEnabled) {
+      console.log('[apply-ai-code] Morph edits found:', morphEdits.length);
+    }
+    
+    // Initialize existingFiles if not already
+    if (!global.existingFiles) {
+      global.existingFiles = new Set<string>();
+    }
+    
+    // Get the active sandbox or provider
+    const sandbox = global.activeSandbox || global.activeSandboxProvider;
+    
+    // If no active sandbox, just return parsed results
+    if (!sandbox) {
+      return NextResponse.json({
+        success: true,
+        results: {
+          filesCreated: parsed.files.map(f => f.path),
+          packagesInstalled: parsed.packages,
+          commandsExecuted: parsed.commands,
+          errors: []
+        },
+        explanation: parsed.explanation,
+        structure: parsed.structure,
+        parsedFiles: parsed.files,
+        message: `Parsed ${parsed.files.length} files successfully. Create a sandbox to apply them.`
+      });
+    }
+    
+    // Verify sandbox is ready before applying code
+    console.log('[apply-ai-code] Verifying sandbox is ready...');
+    
+    // For Vercel sandboxes, check if Vite is running
+    if (sandbox.constructor?.name === 'VercelProvider' || sandbox.getSandboxInfo?.()?.provider === 'vercel') {
+      console.log('[apply-ai-code] Detected Vercel sandbox, checking Vite status...');
+      try {
+        // Check if Vite process is running
+        const checkResult = await sandbox.runCommand('pgrep -f vite');
+        if (!checkResult || !checkResult.stdout) {
+          console.log('[apply-ai-code] Vite not running, starting it...');
+          // Start Vite if not running
+          await sandbox.runCommand('sh -c "cd /vercel/sandbox && nohup npm run dev > /tmp/vite.log 2>&1 &"');
+          // Wait for Vite to start
+          await new Promise(resolve => setTimeout(resolve, 5000));
+          console.log('[apply-ai-code] Vite started, proceeding with code application');
+        } else {
+          console.log('[apply-ai-code] Vite is already running');
+        }
+      } catch (e) {
+        console.log('[apply-ai-code] Could not check Vite status, proceeding anyway:', e);
+      }
+    }
+    
+    // Apply to active sandbox
+    console.log('[apply-ai-code] Applying code to sandbox...');
+    console.log('[apply-ai-code] Is edit mode:', isEdit);
+    console.log('[apply-ai-code] Files to write:', parsed.files.map(f => f.path));
+    console.log('[apply-ai-code] Existing files:', Array.from(global.existingFiles));
+    if (morphEnabled) {
+      console.log('[apply-ai-code] Morph Fast Apply enabled');
+      if (morphEdits.length > 0) {
+        console.log('[apply-ai-code] Parsed Morph edits:', morphEdits.map(e => e.targetFile));
+      } else {
+        console.log('[apply-ai-code] No <edit> blocks found in response');
+      }
+    }
+    
+    const results = {
+      filesCreated: [] as string[],
+      filesUpdated: [] as string[],
+      packagesInstalled: [] as string[],
+      packagesAlreadyInstalled: [] as string[],
+      packagesFailed: [] as string[],
+      commandsExecuted: [] as string[],
+      errors: [] as string[]
+    };
+    
+    // Combine packages from tool calls and parsed XML tags
+    const allPackages = [...packages.filter((pkg: any) => pkg && typeof pkg === 'string'), ...parsed.packages];
+    const uniquePackages = [...new Set(allPackages)]; // Remove duplicates
+    
+    if (uniquePackages.length > 0) {
+      console.log('[apply-ai-code] Installing packages from XML tags and tool calls:', uniquePackages);
+      
+      try {
+        const installResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/install-packages`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ packages: uniquePackages })
+        });
+        
+        if (installResponse.ok) {
+          const installResult = await installResponse.json();
+          console.log('[apply-ai-code] Package installation result:', installResult);
+          
+          if (installResult.installed && installResult.installed.length > 0) {
+            results.packagesInstalled = installResult.installed;
+          }
+          if (installResult.failed && installResult.failed.length > 0) {
+            results.packagesFailed = installResult.failed;
+          }
+        }
+      } catch (error) {
+        console.error('[apply-ai-code] Error installing packages:', error);
+      }
+    } else {
+      // Fallback to detecting packages from code
+      console.log('[apply-ai-code] No packages provided, detecting from generated code...');
+      console.log('[apply-ai-code] Number of files to scan:', parsed.files.length);
+      
+      // Filter out config files first
+      const configFiles = ['tailwind.config.js', 'vite.config.js', 'package.json', 'package-lock.json', 'tsconfig.json', 'postcss.config.js'];
+      const filteredFilesForDetection = parsed.files.filter(file => {
+        const fileName = file.path.split('/').pop() || '';
+        return !configFiles.includes(fileName);
+      });
+      
+      // Build files object for package detection
+      const filesForPackageDetection: Record<string, string> = {};
+      for (const file of filteredFilesForDetection) {
+        filesForPackageDetection[file.path] = file.content;
+        // Log if heroicons is found
+        if (file.content.includes('heroicons')) {
+          console.log(`[apply-ai-code] Found heroicons import in ${file.path}`);
+        }
+      }
+      
+      try {
+        console.log('[apply-ai-code] Calling detect-and-install-packages...');
+        const packageResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/detect-and-install-packages`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ files: filesForPackageDetection })
+        });
+        
+        console.log('[apply-ai-code] Package detection response status:', packageResponse.status);
+        
+        if (packageResponse.ok) {
+          const packageResult = await packageResponse.json();
+          console.log('[apply-ai-code] Package installation result:', JSON.stringify(packageResult, null, 2));
+        
+        if (packageResult.packagesInstalled && packageResult.packagesInstalled.length > 0) {
+          results.packagesInstalled = packageResult.packagesInstalled;
+          console.log(`[apply-ai-code] Installed packages: ${packageResult.packagesInstalled.join(', ')}`);
+        }
+        
+        if (packageResult.packagesAlreadyInstalled && packageResult.packagesAlreadyInstalled.length > 0) {
+          results.packagesAlreadyInstalled = packageResult.packagesAlreadyInstalled;
+          console.log(`[apply-ai-code] Already installed: ${packageResult.packagesAlreadyInstalled.join(', ')}`);
+        }
+        
+        if (packageResult.packagesFailed && packageResult.packagesFailed.length > 0) {
+          results.packagesFailed = packageResult.packagesFailed;
+          console.error(`[apply-ai-code] Failed to install packages: ${packageResult.packagesFailed.join(', ')}`);
+          results.errors.push(`Failed to install packages: ${packageResult.packagesFailed.join(', ')}`);
+        }
+        
+        // Force Vite restart after package installation
+        if (results.packagesInstalled.length > 0) {
+          console.log('[apply-ai-code] Packages were installed, forcing Vite restart...');
+          
+          try {
+            // Call the restart-vite endpoint
+            const restartResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/restart-vite`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' }
+            });
+            
+            if (restartResponse.ok) {
+              const restartResult = await restartResponse.json();
+              console.log('[apply-ai-code] Vite restart result:', restartResult.message);
+            } else {
+              console.error('[apply-ai-code] Failed to restart Vite:', await restartResponse.text());
+            }
+          } catch (e) {
+            console.error('[apply-ai-code] Error calling restart-vite:', e);
+          }
+          
+          // Additional delay to ensure files can be written after restart
+          await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+        } else {
+          console.error('[apply-ai-code] Package detection/installation failed:', await packageResponse.text());
+        }
+      } catch (error) {
+        console.error('[apply-ai-code] Error detecting/installing packages:', error);
+        // Continue with file writing even if package installation fails
+      }
+    }
+    
+    // Attempt Morph Fast Apply for edits before file creation
+    const morphUpdatedPaths = new Set<string>();
+
+    if (morphEnabled && morphEdits.length > 0) {
+      if (!global.activeSandbox) {
+        console.warn('[apply-ai-code] Morph edits found but no active sandbox; skipping Morph application');
+      } else {
+        console.log(`[apply-ai-code] Applying ${morphEdits.length} fast edits via Morph...`);
+        for (const edit of morphEdits) {
+          try {
+            const result = await applyMorphEditToFile({
+              sandbox: global.activeSandbox,
+              targetPath: edit.targetFile,
+              instructions: edit.instructions,
+              updateSnippet: edit.update
+            });
+
+            if (result.success && result.normalizedPath) {
+              morphUpdatedPaths.add(result.normalizedPath);
+              results.filesUpdated.push(result.normalizedPath);
+              console.log('[apply-ai-code] Morph applied to', result.normalizedPath);
+            } else {
+              const msg = result.error || 'Unknown Morph error';
+              console.error('[apply-ai-code] Morph apply failed:', msg);
+              results.errors.push(`Morph apply failed for ${edit.targetFile}: ${msg}`);
+            }
+          } catch (e) {
+            console.error('[apply-ai-code] Morph apply exception:', e);
+            results.errors.push(`Morph apply exception for ${edit.targetFile}: ${(e as Error).message}`);
+          }
+        }
+      }
+    }
+    if (morphEnabled && morphEdits.length === 0) {
+      console.warn('[apply-ai-code] Morph enabled but no <edit> blocks found; falling back to full-file flow');
+    }
+
+    // Filter out config files that shouldn't be created
+    const configFiles = ['tailwind.config.js', 'vite.config.js', 'package.json', 'package-lock.json', 'tsconfig.json', 'postcss.config.js'];
+    let filteredFiles = parsed.files.filter(file => {
+      const fileName = file.path.split('/').pop() || '';
+      if (configFiles.includes(fileName)) {
+        console.warn(`[apply-ai-code] Skipping config file: ${file.path} - already exists in template`);
+        return false;
+      }
+      return true;
+    });
+
+    // Avoid overwriting files already updated by Morph
+    if (morphUpdatedPaths.size > 0) {
+      filteredFiles = filteredFiles.filter(file => {
+        let normalizedPath = file.path.startsWith('/') ? file.path.slice(1) : file.path;
+        const fileName = normalizedPath.split('/').pop() || '';
+        if (!normalizedPath.startsWith('src/') &&
+            !normalizedPath.startsWith('public/') &&
+            normalizedPath !== 'index.html' &&
+            !configFiles.includes(fileName)) {
+          normalizedPath = 'src/' + normalizedPath;
+        }
+        return !morphUpdatedPaths.has(normalizedPath);
+      });
+    }
+    
+    // Create or update files AFTER package installation
+    for (const file of filteredFiles) {
+      try {
+        // Normalize the file path
+        let normalizedPath = file.path;
+        // Remove leading slash if present
+        if (normalizedPath.startsWith('/')) {
+          normalizedPath = normalizedPath.substring(1);
+        }
+        // Ensure src/ prefix for component files
+        if (!normalizedPath.startsWith('src/') && 
+            !normalizedPath.startsWith('public/') && 
+            normalizedPath !== 'index.html' && 
+            normalizedPath !== 'package.json' &&
+            normalizedPath !== 'vite.config.js' &&
+            normalizedPath !== 'tailwind.config.js' &&
+            normalizedPath !== 'postcss.config.js') {
+          normalizedPath = 'src/' + normalizedPath;
+        }
+        
+        const fullPath = `/home/user/app/${normalizedPath}`;
+        const isUpdate = global.existingFiles.has(normalizedPath);
+        
+        // Remove any CSS imports from JSX/JS files (we're using Tailwind)
+        let fileContent = file.content;
+        if (file.path.endsWith('.jsx') || file.path.endsWith('.js') || file.path.endsWith('.tsx') || file.path.endsWith('.ts')) {
+          fileContent = fileContent.replace(/import\s+['"]\.\/[^'"]+\.css['"];?\s*\n?/g, '');
+        }
+        
+        // Fix common Tailwind CSS errors in CSS files
+        if (file.path.endsWith('.css')) {
+          // Replace shadow-3xl with shadow-2xl (shadow-3xl doesn't exist)
+          fileContent = fileContent.replace(/shadow-3xl/g, 'shadow-2xl');
+          // Replace any other non-existent shadow utilities
+          fileContent = fileContent.replace(/shadow-4xl/g, 'shadow-2xl');
+          fileContent = fileContent.replace(/shadow-5xl/g, 'shadow-2xl');
+        }
+        
+        console.log(`[apply-ai-code] Writing file using E2B files API: ${fullPath}`);
+        
+        try {
+          // Check if we're using provider pattern (v2) or direct sandbox (v1)
+          if (sandbox.writeFile) {
+            // V2: Provider pattern (Vercel/E2B provider)
+            await sandbox.writeFile(file.path, fileContent);
+          } else if (sandbox.files?.write) {
+            // V1: Direct E2B sandbox
+            await sandbox.files.write(fullPath, fileContent);
+          } else {
+            throw new Error('Unsupported sandbox type');
+          }
+          console.log(`[apply-ai-code] Successfully wrote file: ${fullPath}`);
+          
+          // Update file cache
+          if (global.sandboxState?.fileCache) {
+            global.sandboxState.fileCache.files[normalizedPath] = {
+              content: fileContent,
+              lastModified: Date.now()
+            };
+            console.log(`[apply-ai-code] Updated file cache for: ${normalizedPath}`);
+          }
+          
+        } catch (writeError) {
+          console.error(`[apply-ai-code] E2B file write error:`, writeError);
+          throw writeError as Error;
+        }
+        
+        
+        if (isUpdate) {
+          results.filesUpdated.push(normalizedPath);
+        } else {
+          results.filesCreated.push(normalizedPath);
+          global.existingFiles.add(normalizedPath);
+        }
+      } catch (error) {
+        results.errors.push(`Failed to create ${file.path}: ${(error as Error).message}`);
+      }
+    }
+    
+    // Only create App.jsx if it's not an edit and doesn't exist
+    const appFileInParsed = parsed.files.some(f => {
+      const normalized = f.path.replace(/^\//, '').replace(/^src\//, '');
+      return normalized === 'App.jsx' || normalized === 'App.tsx';
+    });
+    
+    const appFileExists = global.existingFiles.has('src/App.jsx') || 
+                         global.existingFiles.has('src/App.tsx') ||
+                         global.existingFiles.has('App.jsx') ||
+                         global.existingFiles.has('App.tsx');
+    
+    if (!isEdit && !appFileInParsed && !appFileExists && parsed.files.length > 0) {
+      // Find all component files
+      const componentFiles = parsed.files.filter(f => 
+        (f.path.endsWith('.jsx') || f.path.endsWith('.tsx')) &&
+        f.path.includes('component')
+      );
+      
+      // Generate imports for components
+      const imports = componentFiles
+        .filter(f => !f.path.includes('App.') && !f.path.includes('main.') && !f.path.includes('index.'))
+        .map(f => {
+          const pathParts = f.path.split('/');
+          const fileName = pathParts[pathParts.length - 1];
+          const componentName = fileName.replace(/\.(jsx|tsx)$/, '');
+          // Fix import path - components are in src/components/
+          const importPath = f.path.startsWith('src/') 
+            ? f.path.replace('src/', './').replace(/\.(jsx|tsx)$/, '')
+            : './' + f.path.replace(/\.(jsx|tsx)$/, '');
+          return `import ${componentName} from '${importPath}';`;
+        })
+        .join('\n');
+      
+      // Find the main component
+      const mainComponent = componentFiles.find(f => {
+        const name = f.path.toLowerCase();
+        return name.includes('header') || 
+               name.includes('hero') ||
+               name.includes('layout') ||
+               name.includes('main') ||
+               name.includes('home');
+      }) || componentFiles[0];
+      
+      const mainComponentName = mainComponent 
+        ? mainComponent.path.split('/').pop()?.replace(/\.(jsx|tsx)$/, '') 
+        : null;
+      
+      // Create App.jsx with better structure
+      const appContent = `import React from 'react';
+${imports}
+
+function App() {
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-8">
+      ${mainComponentName ? `<${mainComponentName} />` : '<div className="text-center">\n        <h1 className="text-4xl font-bold mb-4">Welcome to your React App</h1>\n        <p className="text-gray-400">Your components have been created but need to be added here.</p>\n      </div>'}
+      {/* Generated components: ${componentFiles.map(f => f.path).join(', ')} */}
+    </div>
+  );
+}
+
+export default App;`;
+      
+      try {
+        // Use provider pattern if available
+        if (sandbox.writeFile) {
+          await sandbox.writeFile('src/App.jsx', appContent);
+        } else if (sandbox.writeFiles) {
+          await sandbox.writeFiles([{
+            path: 'src/App.jsx',
+            content: Buffer.from(appContent)
+          }]);
+        }
+        
+        console.log('Auto-generated: src/App.jsx');
+        results.filesCreated.push('src/App.jsx (auto-generated)');
+      } catch (error) {
+        results.errors.push(`Failed to create App.jsx: ${(error as Error).message}`);
+      }
+      
+      // Don't auto-generate App.css - we're using Tailwind CSS
+      
+      // Only create index.css if it doesn't exist
+      const indexCssInParsed = parsed.files.some(f => {
+        const normalized = f.path.replace(/^\//, '').replace(/^src\//, '');
+        return normalized === 'index.css' || f.path === 'src/index.css';
+      });
+      
+      const indexCssExists = global.existingFiles.has('src/index.css') || 
+                            global.existingFiles.has('index.css');
+      
+      if (!isEdit && !indexCssInParsed && !indexCssExists) {
+        try {
+          const indexCssContent = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: dark;
+  
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #0a0a0a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}`;
+
+          // Use provider pattern if available
+          if (sandbox.writeFile) {
+            await sandbox.writeFile('src/index.css', indexCssContent);
+          } else if (sandbox.writeFiles) {
+            await sandbox.writeFiles([{
+              path: 'src/index.css',
+              content: Buffer.from(indexCssContent)
+            }]);
+          }
+          
+          console.log('Auto-generated: src/index.css');
+          results.filesCreated.push('src/index.css (with Tailwind)');
+        } catch (error) {
+          console.error('Failed to create index.css:', error);
+          results.errors.push('Failed to create index.css with Tailwind');
+        }
+      }
+    }
+    
+    // Execute commands
+    for (const cmd of parsed.commands) {
+      try {
+        // Parse command and arguments
+        const commandParts = cmd.trim().split(/\s+/);
+        const cmdName = commandParts[0];
+        const args = commandParts.slice(1);
+        
+        // Execute command using sandbox
+        let result;
+        if (sandbox.runCommand && typeof sandbox.runCommand === 'function') {
+          // Check if this is a provider pattern sandbox
+          const testResult = await sandbox.runCommand(cmd);
+          if (testResult && typeof testResult === 'object' && 'stdout' in testResult) {
+            // Provider returns CommandResult directly
+            result = testResult;
+          } else {
+            // Direct sandbox - expects object with cmd and args
+            result = await sandbox.runCommand({
+              cmd: cmdName,
+              args
+            });
+          }
+        }
+        
+        console.log(`Executed: ${cmd}`);
+        
+        // Handle result based on type
+        let stdout = '';
+        let stderr = '';
+        
+        if (result) {
+          if (typeof result.stdout === 'string') {
+            stdout = result.stdout;
+            stderr = result.stderr || '';
+          } else if (typeof result.stdout === 'function') {
+            stdout = await result.stdout();
+            stderr = await result.stderr();
+          }
+        }
+        
+        if (stdout) console.log(stdout);
+        if (stderr) console.log(`Errors: ${stderr}`);
+        
+        results.commandsExecuted.push(cmd);
+      } catch (error) {
+        results.errors.push(`Failed to execute ${cmd}: ${(error as Error).message}`);
+      }
+    }
+    
+    // Check for missing imports in App.jsx
+    const missingImports: string[] = [];
+    const appFile = parsed.files.find(f => 
+      f.path === 'src/App.jsx' || f.path === 'App.jsx'
+    );
+    
+    if (appFile) {
+      // Extract imports from App.jsx
+      const importRegex = /import\s+(?:\w+|\{[^}]+\})\s+from\s+['"]([^'"]+)['"]/g;
+      let match;
+      const imports: string[] = [];
+      
+      while ((match = importRegex.exec(appFile.content)) !== null) {
+        const importPath = match[1];
+        if (importPath.startsWith('./') || importPath.startsWith('../')) {
+          imports.push(importPath);
+        }
+      }
+      
+      // Check if all imported files exist
+      for (const imp of imports) {
+        // Skip CSS imports for this check
+        if (imp.endsWith('.css')) continue;
+        
+        // Convert import path to expected file paths
+        const basePath = imp.replace('./', 'src/');
+        const possiblePaths = [
+          basePath + '.jsx',
+          basePath + '.js',
+          basePath + '/index.jsx',
+          basePath + '/index.js'
+        ];
+        
+        const fileExists = parsed.files.some(f => 
+          possiblePaths.some(path => f.path === path)
+        );
+        
+        if (!fileExists) {
+          missingImports.push(imp);
+        }
+      }
+    }
+    
+    // Prepare response
+    const responseData: any = {
+      success: true,
+      results,
+      explanation: parsed.explanation,
+      structure: parsed.structure,
+      message: `Applied ${results.filesCreated.length} files successfully`
+    };
+    
+    // Handle missing imports automatically
+    if (missingImports.length > 0) {
+      console.warn('[apply-ai-code] Missing imports detected:', missingImports);
+      
+      // Automatically generate missing components
+      try {
+        console.log('[apply-ai-code] Auto-generating missing components...');
+        
+        const autoCompleteResponse = await fetch(
+          `${request.nextUrl.origin}/api/auto-complete-components`,
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              missingImports,
+              model: 'claude-sonnet-4-20250514'
+            })
+          }
+        );
+        
+        const autoCompleteData = await autoCompleteResponse.json();
+        
+        if (autoCompleteData.success) {
+          responseData.autoCompleted = true;
+          responseData.autoCompletedComponents = autoCompleteData.components;
+          responseData.message = `Applied ${results.filesCreated.length} files + auto-generated ${autoCompleteData.files} missing components`;
+          
+          // Add auto-completed files to results
+          results.filesCreated.push(...autoCompleteData.components);
+        } else {
+          // If auto-complete fails, still warn the user
+          responseData.warning = `Missing ${missingImports.length} imported components: ${missingImports.join(', ')}`;
+          responseData.missingImports = missingImports;
+        }
+      } catch (error) {
+        console.error('[apply-ai-code] Auto-complete failed:', error);
+        responseData.warning = `Missing ${missingImports.length} imported components: ${missingImports.join(', ')}`;
+        responseData.missingImports = missingImports;
+      }
+    }
+    
+    // Track applied files in conversation state
+    if (global.conversationState && results.filesCreated.length > 0) {
+      // Update the last message metadata with edited files
+      const messages = global.conversationState.context.messages;
+      if (messages.length > 0) {
+        const lastMessage = messages[messages.length - 1];
+        if (lastMessage.role === 'user') {
+          lastMessage.metadata = {
+            ...lastMessage.metadata,
+            editedFiles: results.filesCreated
+          };
+        }
+      }
+      
+      // Track applied code in project evolution
+      if (global.conversationState.context.projectEvolution) {
+        global.conversationState.context.projectEvolution.majorChanges.push({
+          timestamp: Date.now(),
+          description: parsed.explanation || 'Code applied',
+          filesAffected: results.filesCreated
+        });
+      }
+      
+      // Update last updated timestamp
+      global.conversationState.lastUpdated = Date.now();
+      
+      console.log('[apply-ai-code] Updated conversation state with applied files:', results.filesCreated);
+    }
+    
+    return NextResponse.json(responseData);
+    
+  } catch (error) {
+    console.error('Apply AI code error:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to parse AI code' },
+      { status: 500 }
+    );
+  }
+}

app/api/check-vite-errors/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+
+// Stub endpoint to prevent 404 errors
+// This endpoint is being called but the source is unknown
+// Returns empty errors array to satisfy any calling code
+export async function GET() {
+  return NextResponse.json({
+    success: true,
+    errors: [],
+    message: 'No Vite errors detected'
+  });
+}

app/api/clear-vite-errors-cache/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from 'next/server';
+
+declare global {
+  var viteErrorsCache: { errors: any[], timestamp: number } | null;
+}
+
+export async function POST() {
+  try {
+    // Clear the cache
+    global.viteErrorsCache = null;
+    
+    console.log('[clear-vite-errors-cache] Cache cleared');
+    
+    return NextResponse.json({
+      success: true,
+      message: 'Vite errors cache cleared'
+    });
+    
+  } catch (error) {
+    console.error('[clear-vite-errors-cache] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/conversation-state/route.ts

@@ -0,0 +1,160 @@
+import { NextRequest, NextResponse } from 'next/server';
+import type { ConversationState } from '@/types/conversation';
+
+declare global {
+  var conversationState: ConversationState | null;
+}
+
+// GET: Retrieve current conversation state
+export async function GET() {
+  try {
+    if (!global.conversationState) {
+      return NextResponse.json({
+        success: true,
+        state: null,
+        message: 'No active conversation'
+      });
+    }
+    
+    return NextResponse.json({
+      success: true,
+      state: global.conversationState
+    });
+  } catch (error) {
+    console.error('[conversation-state] Error getting state:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}
+
+// POST: Reset or update conversation state
+export async function POST(request: NextRequest) {
+  try {
+    const { action, data } = await request.json();
+    
+    switch (action) {
+      case 'reset':
+        global.conversationState = {
+          conversationId: `conv-${Date.now()}`,
+          startedAt: Date.now(),
+          lastUpdated: Date.now(),
+          context: {
+            messages: [],
+            edits: [],
+            projectEvolution: { majorChanges: [] },
+            userPreferences: {}
+          }
+        };
+        
+        console.log('[conversation-state] Reset conversation state');
+        
+        return NextResponse.json({
+          success: true,
+          message: 'Conversation state reset',
+          state: global.conversationState
+        });
+        
+      case 'clear-old':
+        // Clear old conversation data but keep recent context
+        if (!global.conversationState) {
+          // Initialize conversation state if it doesn't exist
+          global.conversationState = {
+            conversationId: `conv-${Date.now()}`,
+            startedAt: Date.now(),
+            lastUpdated: Date.now(),
+            context: {
+              messages: [],
+              edits: [],
+              projectEvolution: { majorChanges: [] },
+              userPreferences: {}
+            }
+          };
+          
+          console.log('[conversation-state] Initialized new conversation state for clear-old');
+          
+          return NextResponse.json({
+            success: true,
+            message: 'New conversation state initialized',
+            state: global.conversationState
+          });
+        }
+        
+        // Keep only recent data
+        global.conversationState.context.messages = global.conversationState.context.messages.slice(-5);
+        global.conversationState.context.edits = global.conversationState.context.edits.slice(-3);
+        global.conversationState.context.projectEvolution.majorChanges = 
+          global.conversationState.context.projectEvolution.majorChanges.slice(-2);
+        
+        console.log('[conversation-state] Cleared old conversation data');
+        
+        return NextResponse.json({
+          success: true,
+          message: 'Old conversation data cleared',
+          state: global.conversationState
+        });
+        
+      case 'update':
+        if (!global.conversationState) {
+          return NextResponse.json({
+            success: false,
+            error: 'No active conversation to update'
+          }, { status: 400 });
+        }
+        
+        // Update specific fields if provided
+        if (data) {
+          if (data.currentTopic) {
+            global.conversationState.context.currentTopic = data.currentTopic;
+          }
+          if (data.userPreferences) {
+            global.conversationState.context.userPreferences = {
+              ...global.conversationState.context.userPreferences,
+              ...data.userPreferences
+            };
+          }
+          
+          global.conversationState.lastUpdated = Date.now();
+        }
+        
+        return NextResponse.json({
+          success: true,
+          message: 'Conversation state updated',
+          state: global.conversationState
+        });
+        
+      default:
+        return NextResponse.json({
+          success: false,
+          error: 'Invalid action. Use "reset" or "update"'
+        }, { status: 400 });
+    }
+  } catch (error) {
+    console.error('[conversation-state] Error:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}
+
+// DELETE: Clear conversation state
+export async function DELETE() {
+  try {
+    global.conversationState = null;
+    
+    console.log('[conversation-state] Cleared conversation state');
+    
+    return NextResponse.json({
+      success: true,
+      message: 'Conversation state cleared'
+    });
+  } catch (error) {
+    console.error('[conversation-state] Error clearing state:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,103 @@
+import { NextResponse } from 'next/server';
+import { SandboxFactory } from '@/lib/sandbox/factory';
+// SandboxProvider type is used through SandboxFactory
+import type { SandboxState } from '@/types/sandbox';
+import { sandboxManager } from '@/lib/sandbox/sandbox-manager';
+
+// Store active sandbox globally
+declare global {
+  var activeSandboxProvider: any;
+  var sandboxData: any;
+  var existingFiles: Set<string>;
+  var sandboxState: SandboxState;
+}
+
+export async function POST() {
+  try {
+    console.log('[create-ai-sandbox-v2] Creating sandbox...');
+    
+    // Clean up all existing sandboxes
+    console.log('[create-ai-sandbox-v2] Cleaning up existing sandboxes...');
+    await sandboxManager.terminateAll();
+    
+    // Also clean up legacy global state
+    if (global.activeSandboxProvider) {
+      try {
+        await global.activeSandboxProvider.terminate();
+      } catch (e) {
+        console.error('Failed to terminate legacy global sandbox:', e);
+      }
+      global.activeSandboxProvider = null;
+    }
+    
+    // Clear existing files tracking
+    if (global.existingFiles) {
+      global.existingFiles.clear();
+    } else {
+      global.existingFiles = new Set<string>();
+    }
+
+    // Create new sandbox using factory
+    const provider = SandboxFactory.create();
+    const sandboxInfo = await provider.createSandbox();
+    
+    console.log('[create-ai-sandbox-v2] Setting up Vite React app...');
+    await provider.setupViteApp();
+    
+    // Register with sandbox manager
+    sandboxManager.registerSandbox(sandboxInfo.sandboxId, provider);
+    
+    // Also store in legacy global state for backward compatibility
+    global.activeSandboxProvider = provider;
+    global.sandboxData = {
+      sandboxId: sandboxInfo.sandboxId,
+      url: sandboxInfo.url
+    };
+    
+    // Initialize sandbox state
+    global.sandboxState = {
+      fileCache: {
+        files: {},
+        lastSync: Date.now(),
+        sandboxId: sandboxInfo.sandboxId
+      },
+      sandbox: provider, // Store the provider instead of raw sandbox
+      sandboxData: {
+        sandboxId: sandboxInfo.sandboxId,
+        url: sandboxInfo.url
+      }
+    };
+    
+    console.log('[create-ai-sandbox-v2] Sandbox ready at:', sandboxInfo.url);
+    
+    return NextResponse.json({
+      success: true,
+      sandboxId: sandboxInfo.sandboxId,
+      url: sandboxInfo.url,
+      provider: sandboxInfo.provider,
+      message: 'Sandbox created and Vite React app initialized'
+    });
+
+  } catch (error) {
+    console.error('[create-ai-sandbox-v2] Error:', error);
+    
+    // Clean up on error
+    await sandboxManager.terminateAll();
+    if (global.activeSandboxProvider) {
+      try {
+        await global.activeSandboxProvider.terminate();
+      } catch (e) {
+        console.error('Failed to terminate sandbox on error:', e);
+      }
+      global.activeSandboxProvider = null;
+    }
+    
+    return NextResponse.json(
+      { 
+        error: error instanceof Error ? error.message : 'Failed to create sandbox',
+        details: error instanceof Error ? error.stack : undefined
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,384 @@
+import { NextResponse } from 'next/server';
+import { Sandbox } from '@vercel/sandbox';
+import type { SandboxState } from '@/types/sandbox';
+import { appConfig } from '@/config/app.config';
+
+// Store active sandbox globally
+declare global {
+  var activeSandbox: any;
+  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 {
+    console.log('[create-ai-sandbox] Creating Vercel sandbox...');
+    
+    // Kill existing sandbox if any
+    if (global.activeSandbox) {
+      console.log('[create-ai-sandbox] Stopping existing sandbox...');
+      try {
+        await global.activeSandbox.stop();
+      } catch (e) {
+        console.error('Failed to stop existing sandbox:', e);
+      }
+      global.activeSandbox = null;
+      global.sandboxData = null;
+    }
+    
+    // Clear existing files tracking
+    if (global.existingFiles) {
+      global.existingFiles.clear();
+    } else {
+      global.existingFiles = new Set<string>();
+    }
+
+    // Create Vercel sandbox with flexible authentication
+    console.log(`[create-ai-sandbox] Creating Vercel sandbox with ${appConfig.vercelSandbox.timeoutMinutes} minute timeout...`);
+    
+    // Prepare sandbox configuration
+    const sandboxConfig: any = {
+      timeout: appConfig.vercelSandbox.timeoutMs,
+      runtime: appConfig.vercelSandbox.runtime,
+      ports: [appConfig.vercelSandbox.devPort]
+    };
+    
+    // Add authentication parameters if using personal access token
+    if (process.env.VERCEL_TOKEN && process.env.VERCEL_TEAM_ID && process.env.VERCEL_PROJECT_ID) {
+      console.log('[create-ai-sandbox] Using personal access token authentication');
+      sandboxConfig.teamId = process.env.VERCEL_TEAM_ID;
+      sandboxConfig.projectId = process.env.VERCEL_PROJECT_ID;
+      sandboxConfig.token = process.env.VERCEL_TOKEN;
+    } else if (process.env.VERCEL_OIDC_TOKEN) {
+      console.log('[create-ai-sandbox] Using OIDC token authentication');
+    } else {
+      console.log('[create-ai-sandbox] No authentication found - relying on default Vercel authentication');
+    }
+    
+    sandbox = await Sandbox.create(sandboxConfig);
+    
+    const sandboxId = sandbox.sandboxId;
+    console.log(`[create-ai-sandbox] Sandbox created: ${sandboxId}`);
+
+    // Set up a basic Vite React app
+    console.log('[create-ai-sandbox] Setting up Vite React app...');
+    
+    // First, change to the working directory
+    await sandbox.runCommand('pwd');
+    // workDir is defined in appConfig - not needed here
+    
+    // Get the sandbox URL using the correct Vercel Sandbox API
+    const sandboxUrl = sandbox.domain(appConfig.vercelSandbox.devPort);
+    
+    // Extract the hostname from the sandbox URL for Vite config
+    const sandboxHostname = new URL(sandboxUrl).hostname;
+    console.log(`[create-ai-sandbox] Sandbox hostname: ${sandboxHostname}`);
+
+    // Create the Vite config content with the proper hostname (using string concatenation)
+    const viteConfigContent = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// Vercel Sandbox compatible Vite configuration
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: ${appConfig.vercelSandbox.devPort},
+    strictPort: true,
+    hmr: true,
+    allowedHosts: [
+      'localhost',
+      '127.0.0.1',
+      '` + sandboxHostname + `', // Allow the Vercel Sandbox domain
+      '.vercel.run', // Allow all Vercel sandbox domains
+      '.vercel-sandbox.dev' // Fallback pattern
+    ]
+  }
+})`;
+
+    // Create the project files (now we have the sandbox hostname)
+    const projectFiles = [
+      {
+        path: 'package.json',
+        content: Buffer.from(JSON.stringify({
+          "name": "sandbox-app",
+          "version": "1.0.0",
+          "type": "module",
+          "scripts": {
+            "dev": "vite --host --port 3000",
+            "build": "vite build",
+            "preview": "vite preview"
+          },
+          "dependencies": {
+            "react": "^18.2.0",
+            "react-dom": "^18.2.0"
+          },
+          "devDependencies": {
+            "@vitejs/plugin-react": "^4.0.0",
+            "vite": "^4.3.9",
+            "tailwindcss": "^3.3.0",
+            "postcss": "^8.4.31",
+            "autoprefixer": "^10.4.16"
+          }
+        }, null, 2))
+      },
+      {
+        path: 'vite.config.js',
+        content: Buffer.from(viteConfigContent)
+      },
+      {
+        path: 'tailwind.config.js',
+        content: Buffer.from(`/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`)
+      },
+      {
+        path: 'postcss.config.js',
+        content: Buffer.from(`export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`)
+      },
+      {
+        path: 'index.html',
+        content: Buffer.from(`<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>`)
+      },
+      {
+        path: 'src/main.jsx',
+        content: Buffer.from(`import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)`)
+      },
+      {
+        path: 'src/App.jsx',
+        content: Buffer.from(`function App() {
+  return (
+    <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center p-4">
+      <div className="text-center max-w-2xl">
+        <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+          Sandbox Ready
+        </h1>
+        <p className="text-lg text-gray-400">
+          Start building your React app with Vite and Tailwind CSS!
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default App`)
+      },
+      {
+        path: 'src/index.css',
+        content: Buffer.from(`@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Force Tailwind to load */
+@layer base {
+  :root {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  background-color: rgb(17 24 39);
+}`)
+      }
+    ];
+
+    // Create directory structure first
+    await sandbox.runCommand({
+      cmd: 'mkdir',
+      args: ['-p', 'src']
+    });
+    
+    // Write all files
+    await sandbox.writeFiles(projectFiles);
+    console.log('[create-ai-sandbox] ✓ Project files created');
+    
+    // Install dependencies
+    console.log('[create-ai-sandbox] Installing dependencies...');
+    const installResult = await sandbox.runCommand({
+      cmd: 'npm',
+      args: ['install', '--loglevel', 'info']
+    });
+    if (installResult.exitCode === 0) {
+      console.log('[create-ai-sandbox] ✓ Dependencies installed successfully');
+    } else {
+      console.log('[create-ai-sandbox] ⚠ Warning: npm install had issues but continuing...');
+    }
+    
+    // Start Vite dev server in detached mode
+    console.log('[create-ai-sandbox] Starting Vite dev server...');
+    const viteProcess = await sandbox.runCommand({
+      cmd: 'npm',
+      args: ['run', 'dev'],
+      detached: true
+    });
+    
+    console.log('[create-ai-sandbox] ✓ Vite dev server started');
+    
+    // Wait for Vite to be fully ready
+    await new Promise(resolve => setTimeout(resolve, appConfig.vercelSandbox.devServerStartupDelay));
+
+    // Store sandbox globally
+    global.activeSandbox = sandbox;
+    global.sandboxData = {
+      sandboxId,
+      url: sandboxUrl,
+      viteProcess
+    };
+    
+    // Initialize sandbox state
+    global.sandboxState = {
+      fileCache: {
+        files: {},
+        lastSync: Date.now(),
+        sandboxId
+      },
+      sandbox,
+      sandboxData: {
+        sandboxId,
+        url: sandboxUrl
+      }
+    };
+    
+    // Track initial files
+    global.existingFiles.add('src/App.jsx');
+    global.existingFiles.add('src/main.jsx');
+    global.existingFiles.add('src/index.css');
+    global.existingFiles.add('index.html');
+    global.existingFiles.add('package.json');
+    global.existingFiles.add('vite.config.js');
+    global.existingFiles.add('tailwind.config.js');
+    global.existingFiles.add('postcss.config.js');
+    
+    console.log('[create-ai-sandbox] Sandbox ready at:', sandboxUrl);
+    
+    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);
+    
+    // Clean up on error
+    if (sandbox) {
+      try {
+        await sandbox.stop();
+      } catch (e) {
+        console.error('Failed to stop sandbox on error:', e);
+      }
+    }
+    
+    // Clear global state on error
+    global.activeSandbox = null;
+    global.sandboxData = null;
+    
+    throw error; // Throw to be caught by the outer handler
+  }
+}

app/api/create-zip/route.ts

@@ -0,0 +1,70 @@
+import { NextResponse } from 'next/server';
+
+declare global {
+  var activeSandbox: any;
+}
+
+export async function POST() {
+  try {
+    if (!global.activeSandbox) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    console.log('[create-zip] Creating project zip...');
+    
+    // Create zip file in sandbox using standard commands
+    const zipResult = await global.activeSandbox.runCommand({
+      cmd: 'bash',
+      args: ['-c', `zip -r /tmp/project.zip . -x "node_modules/*" ".git/*" ".next/*" "dist/*" "build/*" "*.log"`]
+    });
+    
+    if (zipResult.exitCode !== 0) {
+      const error = await zipResult.stderr();
+      throw new Error(`Failed to create zip: ${error}`);
+    }
+    
+    const sizeResult = await global.activeSandbox.runCommand({
+      cmd: 'bash',
+      args: ['-c', `ls -la /tmp/project.zip | awk '{print $5}'`]
+    });
+    
+    const fileSize = await sizeResult.stdout();
+    console.log(`[create-zip] Created project.zip (${fileSize.trim()} bytes)`);
+    
+    // Read the zip file and convert to base64
+    const readResult = await global.activeSandbox.runCommand({
+      cmd: 'base64',
+      args: ['/tmp/project.zip']
+    });
+    
+    if (readResult.exitCode !== 0) {
+      const error = await readResult.stderr();
+      throw new Error(`Failed to read zip file: ${error}`);
+    }
+    
+    const base64Content = (await readResult.stdout()).trim();
+    
+    // Create a data URL for download
+    const dataUrl = `data:application/zip;base64,${base64Content}`;
+    
+    return NextResponse.json({
+      success: true,
+      dataUrl,
+      fileName: 'vercel-sandbox-project.zip',
+      message: 'Zip file created successfully'
+    });
+    
+  } catch (error) {
+    console.error('[create-zip] Error:', error);
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: (error as Error).message 
+      }, 
+      { status: 500 }
+    );
+  }
+}

app/api/detect-and-install-packages/route.ts

@@ -0,0 +1,189 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+declare global {
+  var activeSandbox: any;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { files } = await request.json();
+    
+    if (!files || typeof files !== 'object') {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Files object is required' 
+      }, { status: 400 });
+    }
+
+    if (!global.activeSandbox) {
+      return NextResponse.json({
+        success: false,
+        error: 'No active sandbox'
+      }, { status: 404 });
+    }
+
+    console.log('[detect-and-install-packages] Processing files:', Object.keys(files));
+
+    // Extract all import statements from the files
+    const imports = new Set<string>();
+    const importRegex = /import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)\s*,?\s*)*(?:from\s+)?['"]([^'"]+)['"]/g;
+    const requireRegex = /require\s*\(['"]([^'"]+)['"]\)/g;
+
+    for (const [filePath, content] of Object.entries(files)) {
+      if (typeof content !== 'string') continue;
+      
+      // Skip non-JS/JSX/TS/TSX files
+      if (!filePath.match(/\.(jsx?|tsx?)$/)) continue;
+
+      // Find ES6 imports
+      let match;
+      while ((match = importRegex.exec(content)) !== null) {
+        imports.add(match[1]);
+      }
+
+      // Find CommonJS requires
+      while ((match = requireRegex.exec(content)) !== null) {
+        imports.add(match[1]);
+      }
+    }
+
+    console.log('[detect-and-install-packages] Found imports:', Array.from(imports));
+    
+    // Log specific heroicons imports
+    const heroiconImports = Array.from(imports).filter(imp => imp.includes('heroicons'));
+    if (heroiconImports.length > 0) {
+      console.log('[detect-and-install-packages] Heroicon imports:', heroiconImports);
+    }
+
+    // Filter out relative imports and built-in modules
+    const packages = Array.from(imports).filter(imp => {
+      // Skip relative imports
+      if (imp.startsWith('.') || imp.startsWith('/')) return false;
+      
+      // Skip built-in Node modules
+      const builtins = ['fs', 'path', 'http', 'https', 'crypto', 'stream', 'util', 'os', 'url', 'querystring', 'child_process'];
+      if (builtins.includes(imp)) return false;
+      
+      return true;
+    });
+
+    // Extract just the package names (without subpaths)
+    const packageNames = packages.map(pkg => {
+      if (pkg.startsWith('@')) {
+        // Scoped package: @scope/package or @scope/package/subpath
+        const parts = pkg.split('/');
+        return parts.slice(0, 2).join('/');
+      } else {
+        // Regular package: package or package/subpath
+        return pkg.split('/')[0];
+      }
+    });
+
+    // Remove duplicates
+    const uniquePackages = [...new Set(packageNames)];
+
+    console.log('[detect-and-install-packages] Packages to install:', uniquePackages);
+
+    if (uniquePackages.length === 0) {
+      return NextResponse.json({
+        success: true,
+        packagesInstalled: [],
+        message: 'No new packages to install'
+      });
+    }
+
+    // Check which packages are already installed
+    const installed: string[] = [];
+    const missing: string[] = [];
+    
+    for (const packageName of uniquePackages) {
+      try {
+        const checkResult = await global.activeSandbox.runCommand({
+          cmd: 'test',
+          args: ['-d', `node_modules/${packageName}`]
+        });
+        
+        if (checkResult.exitCode === 0) {
+          installed.push(packageName);
+        } else {
+          missing.push(packageName);
+        }
+      } catch (checkError) {
+        // If test command fails, assume package is missing
+        console.debug(`Package check failed for ${packageName}:`, checkError);
+        missing.push(packageName);
+      }
+    }
+
+    console.log('[detect-and-install-packages] Package status:', { installed, missing });
+
+    if (missing.length === 0) {
+      return NextResponse.json({
+        success: true,
+        packagesInstalled: [],
+        packagesAlreadyInstalled: installed,
+        message: 'All packages already installed'
+      });
+    }
+
+    // Install missing packages
+    console.log('[detect-and-install-packages] Installing packages:', missing);
+    
+    const installResult = await global.activeSandbox.runCommand({
+      cmd: 'npm',
+      args: ['install', '--save', ...missing]
+    });
+
+    const stdout = await installResult.stdout();
+    const stderr = await installResult.stderr();
+    
+    console.log('[detect-and-install-packages] Install stdout:', stdout);
+    if (stderr) {
+      console.log('[detect-and-install-packages] Install stderr:', stderr);
+    }
+
+    // Verify installation
+    const finalInstalled: string[] = [];
+    const failed: string[] = [];
+
+    for (const packageName of missing) {
+      try {
+        const verifyResult = await global.activeSandbox.runCommand({
+          cmd: 'test',
+          args: ['-d', `node_modules/${packageName}`]
+        });
+        
+        if (verifyResult.exitCode === 0) {
+          finalInstalled.push(packageName);
+          console.log(`✓ Verified installation of ${packageName}`);
+        } else {
+          failed.push(packageName);
+          console.log(`✗ Failed to verify installation of ${packageName}`);
+        }
+      } catch (error) {
+        failed.push(packageName);
+        console.log(`✗ Error verifying ${packageName}:`, error);
+      }
+    }
+
+    if (failed.length > 0) {
+      console.error('[detect-and-install-packages] Failed to install:', failed);
+    }
+
+    return NextResponse.json({
+      success: true,
+      packagesInstalled: finalInstalled,
+      packagesFailed: failed,
+      packagesAlreadyInstalled: installed,
+      message: `Installed ${finalInstalled.length} packages`,
+      logs: stdout
+    });
+
+  } catch (error) {
+    console.error('[detect-and-install-packages] Error:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}

app/api/extract-brand-styles/route.ts

@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const url = body.url;
+    const prompt = body.prompt;
+
+    console.log('[extract-brand-styles] Extracting brand styles for:', url);
+    console.log('[extract-brand-styles] User prompt:', prompt);
+
+    // Call Firecrawl API to extract branding information
+    const FIRECRAWL_API_KEY = process.env.FIRECRAWL_API_KEY;
+
+    if (!FIRECRAWL_API_KEY) {
+      console.error('[extract-brand-styles] No Firecrawl API key found');
+      throw new Error('Firecrawl API key not configured');
+    }
+
+    console.log('[extract-brand-styles] Calling Firecrawl branding API for:', url);
+
+    const firecrawlResponse = await fetch('https://api.firecrawl.dev/v2/scrape', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${FIRECRAWL_API_KEY}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        url: url,
+        formats: ['branding'],
+      }),
+    });
+
+    if (!firecrawlResponse.ok) {
+      const errorText = await firecrawlResponse.text();
+      console.error('[extract-brand-styles] Firecrawl API error:', firecrawlResponse.status, errorText);
+      throw new Error(`Firecrawl API returned ${firecrawlResponse.status}`);
+    }
+
+    const firecrawlData = await firecrawlResponse.json();
+    console.log('[extract-brand-styles] Firecrawl response received successfully');
+
+    // Extract branding data from response
+    const brandingData = firecrawlData.data?.branding || firecrawlData.branding;
+
+    if (!brandingData) {
+      console.error('[extract-brand-styles] No branding data in Firecrawl response');
+      console.log('[extract-brand-styles] Response structure:', JSON.stringify(firecrawlData, null, 2));
+      throw new Error('No branding data in Firecrawl response');
+    }
+
+    console.log('[extract-brand-styles] Successfully extracted branding data');
+
+    // Return the branding data
+    return NextResponse.json({
+      success: true,
+      url,
+      styleName: brandingData.name || url,
+      guidelines: brandingData,
+    });
+
+  } catch (error) {
+    console.error('[extract-brand-styles] Error occurred:', error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to extract brand styles'
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/generate-ai-code-stream/route.ts

@@ -0,0 +1,1896 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createGroq } from '@ai-sdk/groq';
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { createOpenAI } from '@ai-sdk/openai';
+import { createGoogleGenerativeAI } from '@ai-sdk/google';
+import { streamText } from 'ai';
+import type { SandboxState } from '@/types/sandbox';
+import { selectFilesForEdit, getFileContents, formatFilesForAI } from '@/lib/context-selector';
+import { executeSearchPlan, formatSearchResultsForAI, selectTargetFile } from '@/lib/file-search-executor';
+import { FileManifest } from '@/types/file-manifest';
+import type { ConversationState, ConversationMessage, ConversationEdit } from '@/types/conversation';
+import { appConfig } from '@/config/app.config';
+
+// Force dynamic route to enable streaming
+export const dynamic = 'force-dynamic';
+
+// Check if we're using Vercel AI Gateway
+const isUsingAIGateway = !!process.env.AI_GATEWAY_API_KEY;
+const aiGatewayBaseURL = 'https://ai-gateway.vercel.sh/v1';
+
+console.log('[generate-ai-code-stream] AI Gateway config:', {
+  isUsingAIGateway,
+  hasGroqKey: !!process.env.GROQ_API_KEY,
+  hasAIGatewayKey: !!process.env.AI_GATEWAY_API_KEY
+});
+
+const groq = createGroq({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.GROQ_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : undefined,
+});
+
+const anthropic = createAnthropic({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.ANTHROPIC_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : (process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com/v1'),
+});
+
+const googleGenerativeAI = createGoogleGenerativeAI({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.GEMINI_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : undefined,
+});
+
+const openai = createOpenAI({
+  apiKey: process.env.AI_GATEWAY_API_KEY ?? process.env.OPENAI_API_KEY,
+  baseURL: isUsingAIGateway ? aiGatewayBaseURL : process.env.OPENAI_BASE_URL,
+});
+
+// Helper function to analyze user preferences from conversation history
+function analyzeUserPreferences(messages: ConversationMessage[]): {
+  commonPatterns: string[];
+  preferredEditStyle: 'targeted' | 'comprehensive';
+} {
+  const userMessages = messages.filter(m => m.role === 'user');
+  const patterns: string[] = [];
+  
+  // Count edit-related keywords
+  let targetedEditCount = 0;
+  let comprehensiveEditCount = 0;
+  
+  userMessages.forEach(msg => {
+    const content = msg.content.toLowerCase();
+    
+    // Check for targeted edit patterns
+    if (content.match(/\b(update|change|fix|modify|edit|remove|delete)\s+(\w+\s+)?(\w+)\b/)) {
+      targetedEditCount++;
+    }
+    
+    // Check for comprehensive edit patterns
+    if (content.match(/\b(rebuild|recreate|redesign|overhaul|refactor)\b/)) {
+      comprehensiveEditCount++;
+    }
+    
+    // Extract common request patterns
+    if (content.includes('hero')) patterns.push('hero section edits');
+    if (content.includes('header')) patterns.push('header modifications');
+    if (content.includes('color') || content.includes('style')) patterns.push('styling changes');
+    if (content.includes('button')) patterns.push('button updates');
+    if (content.includes('animation')) patterns.push('animation requests');
+  });
+  
+  return {
+    commonPatterns: [...new Set(patterns)].slice(0, 3), // Top 3 unique patterns
+    preferredEditStyle: targetedEditCount > comprehensiveEditCount ? 'targeted' : 'comprehensive'
+  };
+}
+
+declare global {
+  var sandboxState: SandboxState;
+  var conversationState: ConversationState | null;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { prompt, model = 'openai/gpt-oss-20b', context, isEdit = false } = await request.json();
+    
+    console.log('[generate-ai-code-stream] Received request:');
+    console.log('[generate-ai-code-stream] - prompt:', prompt);
+    console.log('[generate-ai-code-stream] - isEdit:', isEdit);
+    console.log('[generate-ai-code-stream] - context.sandboxId:', context?.sandboxId);
+    console.log('[generate-ai-code-stream] - context.currentFiles:', context?.currentFiles ? Object.keys(context.currentFiles) : 'none');
+    console.log('[generate-ai-code-stream] - currentFiles count:', context?.currentFiles ? Object.keys(context.currentFiles).length : 0);
+    
+    // Initialize conversation state if not exists
+    if (!global.conversationState) {
+      global.conversationState = {
+        conversationId: `conv-${Date.now()}`,
+        startedAt: Date.now(),
+        lastUpdated: Date.now(),
+        context: {
+          messages: [],
+          edits: [],
+          projectEvolution: { majorChanges: [] },
+          userPreferences: {}
+        }
+      };
+    }
+    
+    // Add user message to conversation history
+    const userMessage: ConversationMessage = {
+      id: `msg-${Date.now()}`,
+      role: 'user',
+      content: prompt,
+      timestamp: Date.now(),
+      metadata: {
+        sandboxId: context?.sandboxId
+      }
+    };
+    global.conversationState.context.messages.push(userMessage);
+    
+    // Clean up old messages to prevent unbounded growth
+    if (global.conversationState.context.messages.length > 20) {
+      // Keep only the last 15 messages
+      global.conversationState.context.messages = global.conversationState.context.messages.slice(-15);
+      console.log('[generate-ai-code-stream] Trimmed conversation history to prevent context overflow');
+    }
+    
+    // Clean up old edits
+    if (global.conversationState.context.edits.length > 10) {
+      global.conversationState.context.edits = global.conversationState.context.edits.slice(-8);
+    }
+    
+    // Debug: Show a sample of actual file content
+    if (context?.currentFiles && Object.keys(context.currentFiles).length > 0) {
+      const firstFile = Object.entries(context.currentFiles)[0];
+      console.log('[generate-ai-code-stream] - sample file:', firstFile[0]);
+      console.log('[generate-ai-code-stream] - sample content preview:', 
+        typeof firstFile[1] === 'string' ? firstFile[1].substring(0, 100) + '...' : 'not a string');
+    }
+    
+    if (!prompt) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Prompt is required' 
+      }, { status: 400 });
+    }
+    
+    // Create a stream for real-time updates
+    const encoder = new TextEncoder();
+    const stream = new TransformStream();
+    const writer = stream.writable.getWriter();
+    
+    // Function to send progress updates with flushing
+    const sendProgress = async (data: any) => {
+      const message = `data: ${JSON.stringify(data)}\n\n`;
+      try {
+        await writer.write(encoder.encode(message));
+        // Force flush by writing a keep-alive comment
+        if (data.type === 'stream' || data.type === 'conversation') {
+          await writer.write(encoder.encode(': keepalive\n\n'));
+        }
+      } catch (error) {
+        console.error('[generate-ai-code-stream] Error writing to stream:', error);
+      }
+    };
+    
+    // Start processing in background
+    (async () => {
+      try {
+        // Send initial status
+        await sendProgress({ type: 'status', message: 'Initializing AI...' });
+        
+        // No keep-alive needed - sandbox provisioned for 10 minutes
+        
+        // Check if we have a file manifest for edit mode
+        let editContext = null;
+        let enhancedSystemPrompt = '';
+        
+        if (isEdit) {
+          console.log('[generate-ai-code-stream] Edit mode detected - starting agentic search workflow');
+          console.log('[generate-ai-code-stream] Has fileCache:', !!global.sandboxState?.fileCache);
+          console.log('[generate-ai-code-stream] Has manifest:', !!global.sandboxState?.fileCache?.manifest);
+          
+          const manifest: FileManifest | undefined = global.sandboxState?.fileCache?.manifest;
+          
+          if (manifest) {
+            await sendProgress({ type: 'status', message: '🔍 Creating search plan...' });
+            
+            const fileContents = global.sandboxState.fileCache?.files || {};
+            console.log('[generate-ai-code-stream] Files available for search:', Object.keys(fileContents).length);
+            
+            // STEP 1: Get search plan from AI
+            try {
+              const intentResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/analyze-edit-intent`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt, manifest, model })
+              });
+              
+              if (intentResponse.ok) {
+                const { searchPlan } = await intentResponse.json();
+                console.log('[generate-ai-code-stream] Search plan received:', searchPlan);
+                
+                await sendProgress({ 
+                  type: 'status', 
+                  message: `🔎 Searching for: "${searchPlan.searchTerms.join('", "')}"`
+                });
+                
+                // STEP 2: Execute the search plan
+                const searchExecution = executeSearchPlan(searchPlan, 
+                  Object.fromEntries(
+                    Object.entries(fileContents).map(([path, data]) => [
+                      path.startsWith('/') ? path : `/home/user/app/${path}`,
+                      data.content
+                    ])
+                  )
+                );
+                
+                console.log('[generate-ai-code-stream] Search execution:', {
+                  success: searchExecution.success,
+                  resultsCount: searchExecution.results.length,
+                  filesSearched: searchExecution.filesSearched,
+                  time: searchExecution.executionTime + 'ms'
+                });
+                
+                if (searchExecution.success && searchExecution.results.length > 0) {
+                  // STEP 3: Select the best target file
+                  const target = selectTargetFile(searchExecution.results, searchPlan.editType);
+                  
+                  if (target) {
+                    await sendProgress({ 
+                      type: 'status', 
+                      message: `✅ Found code in ${target.filePath.split('/').pop()} at line ${target.lineNumber}`
+                    });
+                    
+                    console.log('[generate-ai-code-stream] Target selected:', target);
+                    
+                    // Create surgical edit context with exact location
+                    // normalizedPath would be: target.filePath.replace('/home/user/app/', '');
+                    // fileContent available but not used in current implementation
+                    // const fileContent = fileContents[normalizedPath]?.content || '';
+                    
+                    // Build enhanced context with search results
+                    enhancedSystemPrompt = `
+${formatSearchResultsForAI(searchExecution.results)}
+
+SURGICAL EDIT INSTRUCTIONS:
+You have been given the EXACT location of the code to edit.
+- File: ${target.filePath}
+- Line: ${target.lineNumber}
+- Reason: ${target.reason}
+
+Make ONLY the change requested by the user. Do not modify any other code.
+User request: "${prompt}"`;
+                    
+                    // Set up edit context with just this one file
+                    editContext = {
+                      primaryFiles: [target.filePath],
+                      contextFiles: [],
+                      systemPrompt: enhancedSystemPrompt,
+                      editIntent: {
+                        type: searchPlan.editType,
+                        description: searchPlan.reasoning,
+                        targetFiles: [target.filePath],
+                        confidence: 0.95, // High confidence since we found exact location
+                        searchTerms: searchPlan.searchTerms
+                      }
+                    };
+                    
+                    console.log('[generate-ai-code-stream] Surgical edit context created');
+                  }
+                } else {
+                  // Search failed - fall back to old behavior but inform user
+                  console.warn('[generate-ai-code-stream] Search found no results, falling back to broader context');
+                  await sendProgress({ 
+                    type: 'status', 
+                    message: '⚠️ Could not find exact match, using broader search...'
+                  });
+                }
+              } else {
+                console.error('[generate-ai-code-stream] Failed to get search plan');
+              }
+            } catch (error) {
+              console.error('[generate-ai-code-stream] Error in agentic search workflow:', error);
+              await sendProgress({ 
+                type: 'status', 
+                message: '⚠️ Search workflow error, falling back to keyword method...'
+              });
+              // Fall back to old method on any error if we have a manifest
+              if (manifest) {
+                editContext = selectFilesForEdit(prompt, manifest);
+              }
+            }
+          } else {
+            // Fall back to old method if AI analysis fails
+            console.warn('[generate-ai-code-stream] AI intent analysis failed, falling back to keyword method');
+            if (manifest) {
+              editContext = selectFilesForEdit(prompt, manifest);
+            } else {
+              console.log('[generate-ai-code-stream] No manifest available for fallback');
+              await sendProgress({ 
+                type: 'status', 
+                message: '⚠️ No file manifest available, will use broad context'
+              });
+            }
+          }
+          
+          // If we got an edit context from any method, use its system prompt
+          if (editContext) {
+            enhancedSystemPrompt = editContext.systemPrompt;
+            
+            await sendProgress({ 
+              type: 'status', 
+              message: `Identified edit type: ${editContext.editIntent?.description || 'Code modification'}`
+            });
+          } else if (!manifest) {
+            console.log('[generate-ai-code-stream] WARNING: No manifest available for edit mode!');
+            
+            // Try to fetch files from sandbox if we have one
+            if (global.activeSandbox) {
+              await sendProgress({ type: 'status', message: 'Fetching current files from sandbox...' });
+              
+              try {
+                // Fetch files directly from sandbox
+                const filesResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/get-sandbox-files`, {
+                  method: 'GET',
+                  headers: { 'Content-Type': 'application/json' }
+                });
+                
+                if (filesResponse.ok) {
+                  const filesData = await filesResponse.json();
+                  
+                  if (filesData.success && filesData.manifest) {
+                    console.log('[generate-ai-code-stream] Successfully fetched manifest from sandbox');
+                    const manifest = filesData.manifest;
+                    
+                    // Now try to analyze edit intent with the fetched manifest
+                    try {
+                      const intentResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/analyze-edit-intent`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ prompt, manifest, model })
+                      });
+                      
+                      if (intentResponse.ok) {
+                        const { searchPlan } = await intentResponse.json();
+                        console.log('[generate-ai-code-stream] Search plan received (after fetch):', searchPlan);
+                        
+                        // For now, fall back to keyword search since we don't have file contents for search execution
+                        // This path happens when no manifest was initially available
+                        let targetFiles: any[] = [];
+                        if (!searchPlan || searchPlan.searchTerms.length === 0) {
+                          console.warn('[generate-ai-code-stream] No target files after fetch, searching for relevant files');
+                          
+                          const promptLower = prompt.toLowerCase();
+                          const allFilePaths = Object.keys(manifest.files);
+                          
+                          // Look for component names mentioned in the prompt
+                          if (promptLower.includes('hero')) {
+                            targetFiles = allFilePaths.filter(p => p.toLowerCase().includes('hero'));
+                          } else if (promptLower.includes('header')) {
+                            targetFiles = allFilePaths.filter(p => p.toLowerCase().includes('header'));
+                          } else if (promptLower.includes('footer')) {
+                            targetFiles = allFilePaths.filter(p => p.toLowerCase().includes('footer'));
+                          } else if (promptLower.includes('nav')) {
+                            targetFiles = allFilePaths.filter(p => p.toLowerCase().includes('nav'));
+                          } else if (promptLower.includes('button')) {
+                            targetFiles = allFilePaths.filter(p => p.toLowerCase().includes('button'));
+                          }
+                          
+                          if (targetFiles.length > 0) {
+                            console.log('[generate-ai-code-stream] Found target files by keyword search after fetch:', targetFiles);
+                          }
+                        }
+                        
+                        const allFiles = Object.keys(manifest.files)
+                          .filter(path => !targetFiles.includes(path));
+                        
+                        editContext = {
+                          primaryFiles: targetFiles,
+                          contextFiles: allFiles,
+                          systemPrompt: `
+You are an expert senior software engineer performing a surgical, context-aware code modification. Your primary directive is **precision and preservation**.
+
+Think of yourself as a surgeon making a precise incision, not a construction worker demolishing a wall.
+
+## Search-Based Edit
+Search Terms: ${searchPlan?.searchTerms?.join(', ') || 'keyword-based'}
+Edit Type: ${searchPlan?.editType || 'UPDATE_COMPONENT'}
+Reasoning: ${searchPlan?.reasoning || 'Modifying based on user request'}
+
+Files to Edit: ${targetFiles.join(', ') || 'To be determined'}
+User Request: "${prompt}"
+
+## Your Mandatory Thought Process (Execute Internally):
+Before writing ANY code, you MUST follow these steps:
+
+1. **Understand Intent:**
+   - What is the user's core goal? (adding feature, fixing bug, changing style?)
+   - Does the conversation history provide extra clues?
+
+2. **Locate the Code:**
+   - First examine the Primary Files provided
+   - Check the "ALL PROJECT FILES" list to find the EXACT file name
+   - "nav" might be Navigation.tsx, NavBar.tsx, Nav.tsx, or Header.tsx
+   - DO NOT create a new file if a similar one exists!
+
+3. **Plan the Changes (Mental Diff):**
+   - What is the *minimal* set of changes required?
+   - Which exact lines need to be added, modified, or deleted?
+   - Will this require new packages?
+
+4. **Verify Preservation:**
+   - What existing code, props, state, and logic must NOT be touched?
+   - How can I make my change without disrupting surrounding code?
+
+5. **Construct the Final Code:**
+   - Only after completing steps above, generate the final code
+   - Provide the ENTIRE file content with modifications integrated
+
+## Critical Rules & Constraints:
+
+**PRESERVATION IS KEY:** You MUST NOT rewrite entire components or files. Integrate your changes into the existing code. Preserve all existing logic, props, state, and comments not directly related to the user's request.
+
+**MINIMALISM:** Only output files you have actually changed. If a file doesn't need modification, don't include it.
+
+**COMPLETENESS:** Each file must be COMPLETE from first line to last:
+- NEVER TRUNCATE - Include EVERY line
+- NO ellipsis (...) to skip content
+- ALL imports, functions, JSX, and closing tags must be present
+- The file MUST be runnable
+
+**SURGICAL PRECISION:**
+- Change ONLY what's explicitly requested
+- If user says "change background to green", change ONLY the background class
+- 99% of the original code should remain untouched
+- NO refactoring, reformatting, or "improvements" unless requested
+
+**NO CONVERSATION:** Your output must contain ONLY the code. No explanations or apologies.
+
+## EXAMPLES:
+
+### CORRECT APPROACH for "change hero background to blue":
+<thinking>
+I need to change the background color of the Hero component. Looking at the file, I see the main div has 'bg-gray-900'. I will change ONLY this to 'bg-blue-500' and leave everything else exactly as is.
+</thinking>
+
+Then return the EXACT same file with only 'bg-gray-900' changed to 'bg-blue-500'.
+
+### WRONG APPROACH (DO NOT DO THIS):
+- Rewriting the Hero component from scratch
+- Changing the structure or reorganizing imports
+- Adding or removing unrelated code
+- Reformatting or "cleaning up" the code
+
+Remember: You are a SURGEON making a precise incision, not an artist repainting the canvas!`,
+                          editIntent: {
+                            type: searchPlan?.editType || 'UPDATE_COMPONENT',
+                            targetFiles: targetFiles,
+                            confidence: searchPlan ? 0.85 : 0.6,
+                            description: searchPlan?.reasoning || 'Keyword-based file selection',
+                            suggestedContext: []
+                          }
+                        };
+                        
+                        enhancedSystemPrompt = editContext.systemPrompt;
+                        
+                        await sendProgress({ 
+                          type: 'status', 
+                          message: `Identified edit type: ${editContext.editIntent.description}`
+                        });
+                      }
+                    } catch (error) {
+                      console.error('[generate-ai-code-stream] Error analyzing intent after fetch:', error);
+                    }
+                  } else {
+                    console.error('[generate-ai-code-stream] Failed to get manifest from sandbox files');
+                  }
+                } else {
+                  console.error('[generate-ai-code-stream] Failed to fetch sandbox files:', filesResponse.status);
+                }
+              } catch (error) {
+                console.error('[generate-ai-code-stream] Error fetching sandbox files:', error);
+                await sendProgress({ 
+                  type: 'warning', 
+                  message: 'Could not analyze existing files for targeted edits. Proceeding with general edit mode.'
+                });
+              }
+            } else {
+              console.log('[generate-ai-code-stream] No active sandbox to fetch files from');
+              await sendProgress({ 
+                type: 'warning', 
+                message: 'No existing files found. Consider generating initial code first.'
+              });
+            }
+          }
+        }
+        
+        // Build conversation context for system prompt
+        let conversationContext = '';
+        if (global.conversationState && global.conversationState.context.messages.length > 1) {
+          console.log('[generate-ai-code-stream] Building conversation context');
+          console.log('[generate-ai-code-stream] Total messages:', global.conversationState.context.messages.length);
+          console.log('[generate-ai-code-stream] Total edits:', global.conversationState.context.edits.length);
+          
+          conversationContext = `\n\n## Conversation History (Recent)\n`;
+          
+          // Include only the last 3 edits to save context
+          const recentEdits = global.conversationState.context.edits.slice(-3);
+          if (recentEdits.length > 0) {
+            console.log('[generate-ai-code-stream] Including', recentEdits.length, 'recent edits in context');
+            conversationContext += `\n### Recent Edits:\n`;
+            recentEdits.forEach(edit => {
+              conversationContext += `- "${edit.userRequest}" → ${edit.editType} (${edit.targetFiles.map(f => f.split('/').pop()).join(', ')})\n`;
+            });
+          }
+          
+          // Include recently created files - CRITICAL for preventing duplicates
+          const recentMsgs = global.conversationState.context.messages.slice(-5);
+          const recentlyCreatedFiles: string[] = [];
+          recentMsgs.forEach(msg => {
+            if (msg.metadata?.editedFiles) {
+              recentlyCreatedFiles.push(...msg.metadata.editedFiles);
+            }
+          });
+          
+          if (recentlyCreatedFiles.length > 0) {
+            const uniqueFiles = [...new Set(recentlyCreatedFiles)];
+            conversationContext += `\n### 🚨 RECENTLY CREATED/EDITED FILES (DO NOT RECREATE THESE):\n`;
+            uniqueFiles.forEach(file => {
+              conversationContext += `- ${file}\n`;
+            });
+            conversationContext += `\nIf the user mentions any of these components, UPDATE the existing file!\n`;
+          }
+          
+          // Include only last 5 messages for context (reduced from 10)
+          const recentMessages = recentMsgs;
+          if (recentMessages.length > 2) { // More than just current message
+            conversationContext += `\n### Recent Messages:\n`;
+            recentMessages.slice(0, -1).forEach(msg => { // Exclude current message
+              if (msg.role === 'user') {
+                const truncatedContent = msg.content.length > 100 ? msg.content.substring(0, 100) + '...' : msg.content;
+                conversationContext += `- "${truncatedContent}"\n`;
+              }
+            });
+          }
+          
+          // Include only last 2 major changes
+          const majorChanges = global.conversationState.context.projectEvolution.majorChanges.slice(-2);
+          if (majorChanges.length > 0) {
+            conversationContext += `\n### Recent Changes:\n`;
+            majorChanges.forEach(change => {
+              conversationContext += `- ${change.description}\n`;
+            });
+          }
+          
+          // Keep user preferences - they're concise
+          const userPrefs = analyzeUserPreferences(global.conversationState.context.messages);
+          if (userPrefs.commonPatterns.length > 0) {
+            conversationContext += `\n### User Preferences:\n`;
+            conversationContext += `- Edit style: ${userPrefs.preferredEditStyle}\n`;
+          }
+          
+          // Limit total conversation context length
+          if (conversationContext.length > 2000) {
+            conversationContext = conversationContext.substring(0, 2000) + '\n[Context truncated to prevent length errors]';
+          }
+        }
+        
+        // Build system prompt with conversation awareness
+        let systemPrompt = `You are an expert React developer with perfect memory of the conversation. You maintain context across messages and remember scraped websites, generated components, and applied code. Generate clean, modern React code for Vite applications.
+${conversationContext}
+
+🚨 CRITICAL RULES - YOUR MOST IMPORTANT INSTRUCTIONS:
+1. **DO EXACTLY WHAT IS ASKED - NOTHING MORE, NOTHING LESS**
+   - Don't add features not requested
+   - Don't fix unrelated issues
+   - Don't improve things not mentioned
+2. **CHECK App.jsx FIRST** - ALWAYS see what components exist before creating new ones
+3. **NAVIGATION LIVES IN Header.jsx** - Don't create Nav.jsx if Header exists with nav
+4. **USE STANDARD TAILWIND CLASSES ONLY**:
+   - ✅ CORRECT: bg-white, text-black, bg-blue-500, bg-gray-100, text-gray-900
+   - ❌ WRONG: bg-background, text-foreground, bg-primary, bg-muted, text-secondary
+   - Use ONLY classes from the official Tailwind CSS documentation
+5. **FILE COUNT LIMITS**:
+   - Simple style/text change = 1 file ONLY
+   - New component = 2 files MAX (component + parent)
+   - If >3 files, YOU'RE DOING TOO MUCH
+6. **DO NOT CREATE SVGs FROM SCRATCH**:
+   - NEVER generate custom SVG code unless explicitly asked
+   - Use existing icon libraries (lucide-react, heroicons, etc.)
+   - Or use placeholder elements/text if icons are not critical
+   - Only create custom SVGs when user specifically requests "create an SVG" or "draw an SVG"
+
+COMPONENT RELATIONSHIPS (CHECK THESE FIRST):
+- Navigation usually lives INSIDE Header.jsx, not separate Nav.jsx
+- Logo is typically in Header, not standalone
+- Footer often contains nav links already
+- Menu/Hamburger is part of Header, not separate
+
+PACKAGE USAGE RULES:
+- DO NOT use react-router-dom unless user explicitly asks for routing
+- For simple nav links in a single-page app, use scroll-to-section or href="#"
+- Only add routing if building a multi-page application
+- Common packages are auto-installed from your imports
+
+WEBSITE CLONING REQUIREMENTS:
+When recreating/cloning a website, you MUST include:
+1. **Header with Navigation** - Usually Header.jsx containing nav
+2. **Hero Section** - The main landing area (Hero.jsx)
+3. **Main Content Sections** - Features, Services, About, etc.
+4. **Footer** - Contact info, links, copyright (Footer.jsx)
+5. **App.jsx** - Main app component that imports and uses all components
+
+${isEdit ? `CRITICAL: THIS IS AN EDIT TO AN EXISTING APPLICATION
+
+YOU MUST FOLLOW THESE EDIT RULES:
+0. NEVER create tailwind.config.js, vite.config.js, package.json, or any other config files - they already exist!
+1. DO NOT regenerate the entire application
+2. DO NOT create files that already exist (like App.jsx, index.css, tailwind.config.js)
+3. ONLY edit the EXACT files needed for the requested change - NO MORE, NO LESS
+4. If the user says "update the header", ONLY edit the Header component - DO NOT touch Footer, Hero, or any other components
+5. If the user says "change the color", ONLY edit the relevant style or component file - DO NOT "improve" other parts
+6. If you're unsure which file to edit, choose the SINGLE most specific one related to the request
+7. IMPORTANT: When adding new components or libraries:
+   - Create the new component file
+   - UPDATE ONLY the parent component that will use it
+   - Example: Adding a Newsletter component means:
+     * Create Newsletter.jsx
+     * Update ONLY the file that will use it (e.g., Footer.jsx OR App.jsx) - NOT both
+8. When adding npm packages:
+   - Import them ONLY in the files where they're actually used
+   - The system will auto-install missing packages
+
+CRITICAL FILE MODIFICATION RULES - VIOLATION = FAILURE:
+- **NEVER TRUNCATE FILES** - Always return COMPLETE files with ALL content
+- **NO ELLIPSIS (...)** - Include every single line of code, no skipping
+- Files MUST be complete and runnable - include ALL imports, functions, JSX, and closing tags
+- Count the files you're about to generate
+- If the user asked to change ONE thing, you should generate ONE file (or at most two if adding a new component)
+- DO NOT "fix" or "improve" files that weren't mentioned in the request
+- DO NOT update multiple components when only one was requested
+- DO NOT add features the user didn't ask for
+- RESIST the urge to be "helpful" by updating related files
+
+CRITICAL: DO NOT REDESIGN OR REIMAGINE COMPONENTS
+- "update" means make a small change, NOT redesign the entire component
+- "change X to Y" means ONLY change X to Y, nothing else
+- "fix" means repair what's broken, NOT rewrite everything
+- "remove X" means delete X from the existing file, NOT create a new file
+- "delete X" means remove X from where it currently exists
+- Preserve ALL existing functionality and design unless explicitly asked to change it
+
+NEVER CREATE NEW FILES WHEN THE USER ASKS TO REMOVE/DELETE SOMETHING
+If the user says "remove X", you must:
+1. Find which existing file contains X
+2. Edit that file to remove X
+3. DO NOT create any new files
+
+${editContext ? `
+TARGETED EDIT MODE ACTIVE
+- Edit Type: ${editContext.editIntent.type}
+- Confidence: ${editContext.editIntent.confidence}
+- Files to Edit: ${editContext.primaryFiles.join(', ')}
+
+🚨 CRITICAL RULE - VIOLATION WILL RESULT IN FAILURE 🚨
+YOU MUST ***ONLY*** GENERATE THE FILES LISTED ABOVE!
+
+ABSOLUTE REQUIREMENTS:
+1. COUNT the files in "Files to Edit" - that's EXACTLY how many files you must generate
+2. If "Files to Edit" shows ONE file, generate ONLY that ONE file
+3. DO NOT generate App.jsx unless it's EXPLICITLY listed in "Files to Edit"
+4. DO NOT generate ANY components that aren't listed in "Files to Edit"
+5. DO NOT "helpfully" update related files
+6. DO NOT fix unrelated issues you notice
+7. DO NOT improve code quality in files not being edited
+8. DO NOT add bonus features
+
+EXAMPLE VIOLATIONS (THESE ARE FAILURES):
+❌ User says "update the hero" → You update Hero, Header, Footer, and App.jsx
+❌ User says "change header color" → You redesign the entire header
+❌ User says "fix the button" → You update multiple components
+❌ Files to Edit shows "Hero.jsx" → You also generate App.jsx "to integrate it"
+❌ Files to Edit shows "Header.jsx" → You also update Footer.jsx "for consistency"
+
+CORRECT BEHAVIOR (THIS IS SUCCESS):
+✅ User says "update the hero" → You ONLY edit Hero.jsx with the requested change
+✅ User says "change header color" → You ONLY change the color in Header.jsx
+✅ User says "fix the button" → You ONLY fix the specific button issue
+✅ Files to Edit shows "Hero.jsx" → You generate ONLY Hero.jsx
+✅ Files to Edit shows "Header.jsx, Nav.jsx" → You generate EXACTLY 2 files: Header.jsx and Nav.jsx
+
+THE AI INTENT ANALYZER HAS ALREADY DETERMINED THE FILES.
+DO NOT SECOND-GUESS IT.
+DO NOT ADD MORE FILES.
+ONLY OUTPUT THE EXACT FILES LISTED IN "Files to Edit".
+` : ''}
+
+VIOLATION OF THESE RULES WILL RESULT IN FAILURE!
+` : ''}
+
+CRITICAL INCREMENTAL UPDATE RULES:
+- When the user asks for additions or modifications (like "add a videos page", "create a new component", "update the header"):
+  - DO NOT regenerate the entire application
+  - DO NOT recreate files that already exist unless explicitly asked
+  - ONLY create/modify the specific files needed for the requested change
+  - Preserve all existing functionality and files
+  - If adding a new page/route, integrate it with the existing routing system
+  - Reference existing components and styles rather than duplicating them
+  - NEVER recreate config files (tailwind.config.js, vite.config.js, package.json, etc.)
+
+IMPORTANT: When the user asks for edits or modifications:
+- You have access to the current file contents in the context
+- Make targeted changes to existing files rather than regenerating everything
+- Preserve the existing structure and only modify what's requested
+- If you need to see a specific file that's not in context, mention it
+
+IMPORTANT: You have access to the full conversation context including:
+- Previously scraped websites and their content
+- Components already generated and applied
+- The current project being worked on
+- Recent conversation history
+- Any Vite errors that need to be resolved
+
+When the user references "the app", "the website", or "the site" without specifics, refer to:
+1. The most recently scraped website in the context
+2. The current project name in the context
+3. The files currently in the sandbox
+
+If you see scraped websites in the context, you're working on a clone/recreation of that site.
+
+CRITICAL UI/UX RULES:
+- NEVER use emojis in any code, text, console logs, or UI elements
+- ALWAYS ensure responsive design using proper Tailwind classes (sm:, md:, lg:, xl:)
+- ALWAYS use proper mobile-first responsive design patterns
+- NEVER hardcode pixel widths - use relative units and responsive classes
+- ALWAYS test that the layout works on mobile devices (320px and up)
+- ALWAYS make sections full-width by default - avoid max-w-7xl or similar constraints
+- For full-width layouts: use className="w-full" or no width constraint at all
+- Only add max-width constraints when explicitly needed for readability (like blog posts)
+- Prefer system fonts and clean typography
+- Ensure all interactive elements have proper hover/focus states
+- Use proper semantic HTML elements for accessibility
+
+CRITICAL STYLING RULES - MUST FOLLOW:
+- NEVER use inline styles with style={{ }} in JSX
+- NEVER use <style jsx> tags or any CSS-in-JS solutions
+- NEVER create App.css, Component.css, or any component-specific CSS files
+- NEVER import './App.css' or any CSS files except index.css
+- ALWAYS use Tailwind CSS classes for ALL styling
+- ONLY create src/index.css with the @tailwind directives
+- The ONLY CSS file should be src/index.css with:
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+- Use Tailwind's full utility set: spacing, colors, typography, flexbox, grid, animations, etc.
+- ALWAYS add smooth transitions and animations where appropriate:
+  - Use transition-all, transition-colors, transition-opacity for hover states
+  - Use animate-fade-in, animate-pulse, animate-bounce for engaging UI elements
+  - Add hover:scale-105 or hover:scale-110 for interactive elements
+  - Use transform and transition utilities for smooth interactions
+- For complex layouts, combine Tailwind utilities rather than writing custom CSS
+- NEVER use non-standard Tailwind classes like "border-border", "bg-background", "text-foreground", etc.
+- Use standard Tailwind classes only:
+  - For borders: use "border-gray-200", "border-gray-300", etc. NOT "border-border"
+  - For backgrounds: use "bg-white", "bg-gray-100", etc. NOT "bg-background"
+  - For text: use "text-gray-900", "text-black", etc. NOT "text-foreground"
+- Examples of good Tailwind usage:
+  - Buttons: className="px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg transform hover:scale-105 transition-all duration-200"
+  - Cards: className="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-xl transition-shadow duration-300"
+  - Full-width sections: className="w-full px-4 sm:px-6 lg:px-8"
+  - Constrained content (only when needed): className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+  - Dark backgrounds: className="min-h-screen bg-gray-900 text-white"
+  - Hero sections: className="animate-fade-in-up"
+  - Feature cards: className="transform hover:scale-105 transition-transform duration-300"
+  - CTAs: className="animate-pulse hover:animate-none"
+
+CRITICAL STRING AND SYNTAX RULES:
+- ALWAYS escape apostrophes in strings: use \' instead of ' or use double quotes
+- ALWAYS escape quotes properly in JSX attributes
+- NEVER use curly quotes or smart quotes ('' "" '' "") - only straight quotes (' ")
+- ALWAYS convert smart/curly quotes to straight quotes:
+  - ' and ' → '
+  - " and " → "
+  - Any other Unicode quotes → straight quotes
+- When strings contain apostrophes, either:
+  1. Use double quotes: "you're" instead of 'you're'
+  2. Escape the apostrophe: 'you\'re'
+- When working with scraped content, ALWAYS sanitize quotes first
+- Replace all smart quotes with straight quotes before using in code
+- Be extra careful with user-generated content or scraped text
+- Always validate that JSX syntax is correct before generating
+
+CRITICAL CODE SNIPPET DISPLAY RULES:
+- When displaying code examples in JSX, NEVER put raw curly braces { } in text
+- ALWAYS wrap code snippets in template literals with backticks
+- For code examples in components, use one of these patterns:
+  1. Template literals: <div>{\`const example = { key: 'value' }\`}</div>
+  2. Pre/code blocks: <pre><code>{\`your code here\`}</code></pre>
+  3. Escape braces: <div>{'{'}key: value{'}'}</div>
+- NEVER do this: <div>const example = { key: 'value' }</div> (causes parse errors)
+- For multi-line code snippets, always use:
+  <pre className="bg-gray-900 text-gray-100 p-4 rounded">
+    <code>{\`
+      // Your code here
+      const example = {
+        key: 'value'
+      }
+    \`}</code>
+  </pre>
+
+CRITICAL: When asked to create a React app or components:
+- ALWAYS CREATE ALL FILES IN FULL - never provide partial implementations
+- ALWAYS CREATE EVERY COMPONENT that you import - no placeholders
+- ALWAYS IMPLEMENT COMPLETE FUNCTIONALITY - don't leave TODOs unless explicitly asked
+- If you're recreating a website, implement ALL sections and features completely
+- NEVER create tailwind.config.js - it's already configured in the template
+- ALWAYS include a Navigation/Header component (Nav.jsx or Header.jsx) - websites need navigation!
+
+REQUIRED COMPONENTS for website clones:
+1. Nav.jsx or Header.jsx - Navigation bar with links (NEVER SKIP THIS!)
+2. Hero.jsx - Main landing section
+3. Features/Services/Products sections - Based on the site content
+4. Footer.jsx - Footer with links and info
+5. App.jsx - Main component that imports and arranges all components
+- NEVER create vite.config.js - it's already configured in the template
+- NEVER create package.json - it's already configured in the template
+
+WHEN WORKING WITH SCRAPED CONTENT:
+- ALWAYS sanitize all text content before using in code
+- Convert ALL smart quotes to straight quotes
+- Example transformations:
+  - "Firecrawl's API" → "Firecrawl's API" or "Firecrawl\\'s API"
+  - 'It's amazing' → "It's amazing" or 'It\\'s amazing'
+  - "Best tool ever" → "Best tool ever"
+- When in doubt, use double quotes for strings containing apostrophes
+- For testimonials or quotes from scraped content, ALWAYS clean the text:
+  - Bad: content: 'Moved our internal agent's web scraping...'
+  - Good: content: "Moved our internal agent's web scraping..."
+  - Also good: content: 'Moved our internal agent\\'s web scraping...'
+
+When generating code, FOLLOW THIS PROCESS:
+1. ALWAYS generate src/index.css FIRST - this establishes the styling foundation
+2. List ALL components you plan to import in App.jsx
+3. Count them - if there are 10 imports, you MUST create 10 component files
+4. Generate src/index.css first (with proper CSS reset and base styles)
+5. Generate App.jsx second
+6. Then generate EVERY SINGLE component file you imported
+7. Do NOT stop until all imports are satisfied
+
+Use this XML format for React components only (DO NOT create tailwind.config.js - it already exists):
+
+<file path="src/index.css">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</file>
+
+<file path="src/App.jsx">
+// Main App component that imports and uses other components
+// Use Tailwind classes: className="min-h-screen bg-gray-50"
+</file>
+
+<file path="src/components/Example.jsx">
+// Your React component code here
+// Use Tailwind classes for ALL styling
+</file>
+
+CRITICAL COMPLETION RULES:
+1. NEVER say "I'll continue with the remaining components"
+2. NEVER say "Would you like me to proceed?"
+3. NEVER use <continue> tags
+4. Generate ALL components in ONE response
+5. If App.jsx imports 10 components, generate ALL 10
+6. Complete EVERYTHING before ending your response
+
+With 16,000 tokens available, you have plenty of space to generate a complete application. Use it!
+
+UNDERSTANDING USER INTENT FOR INCREMENTAL VS FULL GENERATION:
+- "add/create/make a [specific feature]" → Add ONLY that feature to existing app
+- "add a videos page" → Create ONLY Videos.jsx and update routing
+- "update the header" → Modify ONLY header component
+- "fix the styling" → Update ONLY the affected components
+- "change X to Y" → Find the file containing X and modify it
+- "make the header black" → Find Header component and change its color
+- "rebuild/recreate/start over" → Full regeneration
+- Default to incremental updates when working on an existing app
+
+SURGICAL EDIT RULES (CRITICAL FOR PERFORMANCE):
+- **PREFER TARGETED CHANGES**: Don't regenerate entire components for small edits
+- For color/style changes: Edit ONLY the specific className or style prop
+- For text changes: Change ONLY the text content, keep everything else
+- For adding elements: INSERT into existing JSX, don't rewrite the whole return
+- **PRESERVE EXISTING CODE**: Keep all imports, functions, and unrelated code exactly as-is
+- Maximum files to edit:
+  - Style change = 1 file ONLY
+  - Text change = 1 file ONLY
+  - New feature = 2 files MAX (feature + parent)
+- If you're editing >3 files for a simple request, STOP - you're doing too much
+
+EXAMPLES OF CORRECT SURGICAL EDITS:
+✅ "change header to black" → Find className="..." in Header.jsx, change ONLY color classes
+✅ "update hero text" → Find the <h1> or <p> in Hero.jsx, change ONLY the text inside
+✅ "add a button to hero" → Find the return statement, ADD button, keep everything else
+❌ WRONG: Regenerating entire Header.jsx to change one color
+❌ WRONG: Rewriting Hero.jsx to add one button
+
+NAVIGATION/HEADER INTELLIGENCE:
+- ALWAYS check App.jsx imports first
+- Navigation is usually INSIDE Header.jsx, not separate
+- If user says "nav", check Header.jsx FIRST
+- Only create Nav.jsx if no navigation exists anywhere
+- Logo, menu, hamburger = all typically in Header
+
+CRITICAL: When files are provided in the context:
+1. The user is asking you to MODIFY the existing app, not create a new one
+2. Find the relevant file(s) from the provided context
+3. Generate ONLY the files that need changes
+4. Do NOT ask to see files - they are already provided in the context above
+5. Make the requested change immediately`;
+
+        // If Morph Fast Apply is enabled (edit mode + MORPH_API_KEY), force <edit> block output
+        const morphFastApplyEnabled = Boolean(isEdit && process.env.MORPH_API_KEY);
+        if (morphFastApplyEnabled) {
+          systemPrompt += `
+
+MORPH FAST APPLY MODE (EDIT-ONLY):
+- Output edits as <edit> blocks, not full <file> blocks, for files that already exist.
+- Format for each edit:
+  <edit target_file="src/components/Header.jsx">
+    <instructions>Describe the minimal change, single sentence.</instructions>
+    <update>Provide the SMALLEST code snippet necessary to perform the change.</update>
+  </edit>
+- Only use <file> blocks when you must CREATE a brand-new file.
+- Prefer ONE edit block for a simple change; multiple edits only if absolutely needed for separate files.
+- Keep updates minimal and precise; do not rewrite entire files.
+`;
+        }
+
+        // Build full prompt with context
+        let fullPrompt = prompt;
+        if (context) {
+          const contextParts = [];
+          
+          if (context.sandboxId) {
+            contextParts.push(`Current sandbox ID: ${context.sandboxId}`);
+          }
+          
+          if (context.structure) {
+            contextParts.push(`Current file structure:\n${context.structure}`);
+          }
+          
+          // Use backend file cache instead of frontend-provided files
+          let backendFiles = global.sandboxState?.fileCache?.files || {};
+          let hasBackendFiles = Object.keys(backendFiles).length > 0;
+          
+          console.log('[generate-ai-code-stream] Backend file cache status:');
+          console.log('[generate-ai-code-stream] - Has sandboxState:', !!global.sandboxState);
+          console.log('[generate-ai-code-stream] - Has fileCache:', !!global.sandboxState?.fileCache);
+          console.log('[generate-ai-code-stream] - File count:', Object.keys(backendFiles).length);
+          console.log('[generate-ai-code-stream] - Has manifest:', !!global.sandboxState?.fileCache?.manifest);
+          
+          // If no backend files and we're in edit mode, try to fetch from sandbox
+          if (!hasBackendFiles && isEdit && (global.activeSandbox || context?.sandboxId)) {
+            console.log('[generate-ai-code-stream] No backend files, attempting to fetch from sandbox...');
+            
+            try {
+              const filesResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/get-sandbox-files`, {
+                method: 'GET',
+                headers: { 'Content-Type': 'application/json' }
+              });
+              
+              if (filesResponse.ok) {
+                const filesData = await filesResponse.json();
+                if (filesData.success && filesData.files) {
+                  console.log('[generate-ai-code-stream] Successfully fetched', Object.keys(filesData.files).length, 'files from sandbox');
+                  
+                  // Initialize sandboxState if needed
+                  if (!global.sandboxState) {
+                    global.sandboxState = {
+                      fileCache: {
+                        files: {},
+                        lastSync: Date.now(),
+                        sandboxId: context?.sandboxId || 'unknown'
+                      }
+                    } as any;
+                  } else if (!global.sandboxState.fileCache) {
+                    global.sandboxState.fileCache = {
+                      files: {},
+                      lastSync: Date.now(),
+                      sandboxId: context?.sandboxId || 'unknown'
+                    };
+                  }
+                  
+                  // Store files in cache
+                  for (const [path, content] of Object.entries(filesData.files)) {
+                    const normalizedPath = path.replace('/home/user/app/', '');
+                    if (global.sandboxState.fileCache) {
+                      global.sandboxState.fileCache.files[normalizedPath] = {
+                        content: content as string,
+                        lastModified: Date.now()
+                      };
+                    }
+                  }
+                  
+                  if (filesData.manifest && global.sandboxState.fileCache) {
+                    global.sandboxState.fileCache.manifest = filesData.manifest;
+                    
+                    // Now try to analyze edit intent with the fetched manifest
+                    if (!editContext) {
+                      console.log('[generate-ai-code-stream] Analyzing edit intent with fetched manifest');
+                      try {
+                        const intentResponse = await fetch(`${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/api/analyze-edit-intent`, {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ prompt, manifest: filesData.manifest, model })
+                        });
+                        
+                        if (intentResponse.ok) {
+                          const { searchPlan } = await intentResponse.json();
+                          console.log('[generate-ai-code-stream] Search plan received:', searchPlan);
+                          
+                          // Create edit context from AI analysis
+                          // Note: We can't execute search here without file contents, so fall back to keyword method
+                          const fileContext = selectFilesForEdit(prompt, filesData.manifest);
+                          editContext = fileContext;
+                          enhancedSystemPrompt = fileContext.systemPrompt;
+                          
+                          console.log('[generate-ai-code-stream] Edit context created with', editContext.primaryFiles.length, 'primary files');
+                        }
+                      } catch (error) {
+                        console.error('[generate-ai-code-stream] Failed to analyze edit intent:', error);
+                      }
+                    }
+                  }
+                  
+                  // Update variables
+                  backendFiles = global.sandboxState.fileCache?.files || {};
+                  hasBackendFiles = Object.keys(backendFiles).length > 0;
+                  console.log('[generate-ai-code-stream] Updated backend cache with fetched files');
+                }
+              }
+            } catch (error) {
+              console.error('[generate-ai-code-stream] Failed to fetch sandbox files:', error);
+            }
+          }
+          
+          // Include current file contents from backend cache
+          if (hasBackendFiles) {
+            // If we have edit context, use intelligent file selection
+            if (editContext && editContext.primaryFiles.length > 0) {
+              contextParts.push('\nEXISTING APPLICATION - TARGETED EDIT MODE');
+              contextParts.push(`\n${editContext.systemPrompt || enhancedSystemPrompt}\n`);
+              
+              // Get contents of primary and context files
+              const primaryFileContents = await getFileContents(editContext.primaryFiles, global.sandboxState!.fileCache!.manifest!);
+              const contextFileContents = await getFileContents(editContext.contextFiles, global.sandboxState!.fileCache!.manifest!);
+              
+              // Format files for AI
+              const formattedFiles = formatFilesForAI(primaryFileContents, contextFileContents);
+              contextParts.push(formattedFiles);
+              
+              contextParts.push('\nIMPORTANT: Only modify the files listed under "Files to Edit". The context files are provided for reference only.');
+            } else {
+              // Fallback to showing all files if no edit context
+              console.log('[generate-ai-code-stream] WARNING: Using fallback mode - no edit context available');
+              contextParts.push('\nEXISTING APPLICATION - TARGETED EDIT REQUIRED');
+              contextParts.push('\nYou MUST analyze the user request and determine which specific file(s) to edit.');
+              contextParts.push('\nCurrent project files (DO NOT regenerate all of these):');
+              
+              const fileEntries = Object.entries(backendFiles);
+              console.log(`[generate-ai-code-stream] Using backend cache: ${fileEntries.length} files`);
+              
+              // Show file list first for reference
+              contextParts.push('\n### File List:');
+              for (const [path] of fileEntries) {
+                contextParts.push(`- ${path}`);
+              }
+              
+              // Include ALL files as context in fallback mode
+              contextParts.push('\n### File Contents (ALL FILES FOR CONTEXT):');
+              for (const [path, fileData] of fileEntries) {
+                const content = fileData.content;
+                if (typeof content === 'string') {
+                  contextParts.push(`\n<file path="${path}">\n${content}\n</file>`);
+                }
+              }
+              
+              contextParts.push('\n🚨 CRITICAL INSTRUCTIONS - VIOLATION = FAILURE 🚨');
+              contextParts.push('1. Analyze the user request: "' + prompt + '"');
+              contextParts.push('2. Identify the MINIMUM number of files that need editing (usually just ONE)');
+              contextParts.push('3. PRESERVE ALL EXISTING CONTENT in those files');
+              contextParts.push('4. ONLY ADD/MODIFY the specific part requested');
+              contextParts.push('5. DO NOT regenerate entire components from scratch');
+              contextParts.push('6. DO NOT change unrelated parts of any file');
+              contextParts.push('7. Generate ONLY the files that MUST be changed - NO EXTRAS');
+              contextParts.push('\n⚠️ FILE COUNT RULE:');
+              contextParts.push('- Simple change (color, text, spacing) = 1 file ONLY');
+              contextParts.push('- Adding new component = 2 files MAX (new component + parent that imports it)');
+              contextParts.push('- DO NOT exceed these limits unless absolutely necessary');
+              contextParts.push('\nEXAMPLES OF CORRECT BEHAVIOR:');
+              contextParts.push('✅ "add a chart to the hero" → Edit ONLY Hero.jsx, ADD the chart, KEEP everything else');
+              contextParts.push('✅ "change header to black" → Edit ONLY Header.jsx, change ONLY the color');
+              contextParts.push('✅ "fix spacing in footer" → Edit ONLY Footer.jsx, adjust ONLY spacing');
+              contextParts.push('\nEXAMPLES OF FAILURES:');
+              contextParts.push('❌ "change header color" → You edit Header, Footer, and App "for consistency"');
+              contextParts.push('❌ "add chart to hero" → You regenerate the entire Hero component');
+              contextParts.push('❌ "fix button" → You update 5 different component files');
+              contextParts.push('\n⚠️ FINAL WARNING:');
+              contextParts.push('If you generate MORE files than necessary, you have FAILED');
+              contextParts.push('If you DELETE or REWRITE existing functionality, you have FAILED');
+              contextParts.push('ONLY change what was EXPLICITLY requested - NOTHING MORE');
+            }
+          } else if (context.currentFiles && Object.keys(context.currentFiles).length > 0) {
+            // Fallback to frontend-provided files if backend cache is empty
+            console.log('[generate-ai-code-stream] Warning: Backend cache empty, using frontend files');
+            contextParts.push('\nEXISTING APPLICATION - DO NOT REGENERATE FROM SCRATCH');
+            contextParts.push('Current project files (modify these, do not recreate):');
+            
+            const fileEntries = Object.entries(context.currentFiles);
+            for (const [path, content] of fileEntries) {
+              if (typeof content === 'string') {
+                contextParts.push(`\n<file path="${path}">\n${content}\n</file>`);
+              }
+            }
+            contextParts.push('\nThe above files already exist. When the user asks to modify something (like "change the header color to black"), find the relevant file above and generate ONLY that file with the requested changes.');
+          }
+          
+          // Add explicit edit mode indicator
+          if (isEdit) {
+            contextParts.push('\nEDIT MODE ACTIVE');
+            contextParts.push('This is an incremental update to an existing application.');
+            contextParts.push('DO NOT regenerate App.jsx, index.css, or other core files unless explicitly requested.');
+            contextParts.push('ONLY create or modify the specific files needed for the user\'s request.');
+            contextParts.push('\n⚠️ CRITICAL FILE OUTPUT FORMAT - VIOLATION = FAILURE:');
+            contextParts.push('YOU MUST OUTPUT EVERY FILE IN THIS EXACT XML FORMAT:');
+            contextParts.push('<file path="src/components/ComponentName.jsx">');
+            contextParts.push('// Complete file content here');
+            contextParts.push('</file>');
+            contextParts.push('<file path="src/index.css">');
+            contextParts.push('/* CSS content here */');
+            contextParts.push('</file>');
+            contextParts.push('\n❌ NEVER OUTPUT: "Generated Files: index.css, App.jsx"');
+            contextParts.push('❌ NEVER LIST FILE NAMES WITHOUT CONTENT');
+            contextParts.push('✅ ALWAYS: One <file> tag per file with COMPLETE content');
+            contextParts.push('✅ ALWAYS: Include EVERY file you modified');
+          } else if (!hasBackendFiles) {
+            // First generation mode - make it beautiful!
+            contextParts.push('\n🎨 FIRST GENERATION MODE - CREATE SOMETHING BEAUTIFUL!');
+            contextParts.push('\nThis is the user\'s FIRST experience. Make it impressive:');
+            contextParts.push('1. **USE TAILWIND PROPERLY** - Use standard Tailwind color classes');
+            contextParts.push('2. **NO PLACEHOLDERS** - Use real content, not lorem ipsum');
+            contextParts.push('3. **COMPLETE COMPONENTS** - Header, Hero, Features, Footer minimum');
+            contextParts.push('4. **VISUAL POLISH** - Shadows, hover states, transitions');
+            contextParts.push('5. **STANDARD CLASSES** - bg-white, text-gray-900, bg-blue-500, NOT bg-background');
+            contextParts.push('\nCreate a polished, professional application that works perfectly on first load.');
+            contextParts.push('\n⚠️ OUTPUT FORMAT:');
+            contextParts.push('Use <file path="...">content</file> tags for EVERY file');
+            contextParts.push('NEVER output "Generated Files:" as plain text');
+          }
+          
+          // Add conversation context (scraped websites, etc)
+          if (context.conversationContext) {
+            if (context.conversationContext.scrapedWebsites?.length > 0) {
+              contextParts.push('\nScraped Websites in Context:');
+              context.conversationContext.scrapedWebsites.forEach((site: any) => {
+                contextParts.push(`\nURL: ${site.url}`);
+                contextParts.push(`Scraped: ${new Date(site.timestamp).toLocaleString()}`);
+                if (site.content) {
+                  // Include a summary of the scraped content
+                  const contentPreview = typeof site.content === 'string' 
+                    ? site.content.substring(0, 1000) 
+                    : JSON.stringify(site.content).substring(0, 1000);
+                  contextParts.push(`Content Preview: ${contentPreview}...`);
+                }
+              });
+            }
+            
+            if (context.conversationContext.currentProject) {
+              contextParts.push(`\nCurrent Project: ${context.conversationContext.currentProject}`);
+            }
+          }
+          
+          if (contextParts.length > 0) {
+            if (morphFastApplyEnabled) {
+              contextParts.push('\nOUTPUT FORMAT (REQUIRED IN MORPH MODE):');
+              contextParts.push('<edit target_file="src/components/Component.jsx">');
+              contextParts.push('<instructions>Minimal, precise instruction.</instructions>');
+              contextParts.push('<update>// Smallest necessary snippet</update>');
+              contextParts.push('</edit>');
+              contextParts.push('\nIf you need to create a NEW file, then and only then output a full file:');
+              contextParts.push('<file path="src/components/NewComponent.jsx">');
+              contextParts.push('// Full file content when creating new files');
+              contextParts.push('</file>');
+            }
+            fullPrompt = `CONTEXT:\n${contextParts.join('\n')}\n\nUSER REQUEST:\n${prompt}`;
+          }
+        }
+        
+        await sendProgress({ type: 'status', message: 'Planning application structure...' });
+        
+        console.log('\n[generate-ai-code-stream] Starting streaming response...\n');
+        
+        // Track packages that need to be installed
+        const packagesToInstall: string[] = [];
+        
+        // Determine which provider to use based on model
+        const isAnthropic = model.startsWith('anthropic/');
+        const isGoogle = model.startsWith('google/');
+        const isOpenAI = model.startsWith('openai/');
+        const isKimiGroq = model === 'moonshotai/kimi-k2-instruct-0905';
+        const modelProvider = isAnthropic ? anthropic : 
+                              (isOpenAI ? openai : 
+                              (isGoogle ? googleGenerativeAI : 
+                              (isKimiGroq ? groq : groq)));
+        
+        // Fix model name transformation for different providers
+        let actualModel: string;
+        if (isAnthropic) {
+          actualModel = model.replace('anthropic/', '');
+        } else if (isOpenAI) {
+          actualModel = model.replace('openai/', '');
+        } else if (isKimiGroq) {
+          // Kimi on Groq - use full model string
+          actualModel = 'moonshotai/kimi-k2-instruct-0905';
+        } else if (isGoogle) {
+          // Google uses specific model names - convert our naming to theirs  
+          actualModel = model.replace('google/', '');
+        } else {
+          actualModel = model;
+        }
+
+        console.log(`[generate-ai-code-stream] Using provider: ${isAnthropic ? 'Anthropic' : isGoogle ? 'Google' : isOpenAI ? 'OpenAI' : 'Groq'}, model: ${actualModel}`);
+        console.log(`[generate-ai-code-stream] AI Gateway enabled: ${isUsingAIGateway}`);
+        console.log(`[generate-ai-code-stream] Model string: ${model}`);
+
+        // Make streaming API call with appropriate provider
+        const streamOptions: any = {
+          model: modelProvider(actualModel),
+          messages: [
+            { 
+              role: 'system', 
+              content: systemPrompt + `
+
+🚨 CRITICAL CODE GENERATION RULES - VIOLATION = FAILURE 🚨:
+1. NEVER truncate ANY code - ALWAYS write COMPLETE files
+2. NEVER use "..." anywhere in your code - this causes syntax errors
+3. NEVER cut off strings mid-sentence - COMPLETE every string
+4. NEVER leave incomplete class names or attributes
+5. ALWAYS close ALL tags, quotes, brackets, and parentheses
+6. If you run out of space, prioritize completing the current file
+
+CRITICAL STRING RULES TO PREVENT SYNTAX ERRORS:
+- NEVER write: className="px-8 py-4 bg-black text-white font-bold neobrut-border neobr...
+- ALWAYS write: className="px-8 py-4 bg-black text-white font-bold neobrut-border neobrut-shadow"
+- COMPLETE every className attribute
+- COMPLETE every string literal
+- NO ellipsis (...) ANYWHERE in code
+
+PACKAGE RULES:
+- For INITIAL generation: Use ONLY React, no external packages
+- For EDITS: You may use packages, specify them with <package> tags
+- NEVER install packages like @mendable/firecrawl-js unless explicitly requested
+
+Examples of SYNTAX ERRORS (NEVER DO THIS):
+❌ className="px-4 py-2 bg-blue-600 hover:bg-blue-7...
+❌ <button className="btn btn-primary btn-...
+❌ const title = "Welcome to our...
+❌ import { useState, useEffect, ... } from 'react'
+
+Examples of CORRECT CODE (ALWAYS DO THIS):
+✅ className="px-4 py-2 bg-blue-600 hover:bg-blue-700"
+✅ <button className="btn btn-primary btn-large">
+✅ const title = "Welcome to our application"
+✅ import { useState, useEffect, useCallback } from 'react'
+
+REMEMBER: It's better to generate fewer COMPLETE files than many INCOMPLETE files.`
+            },
+            { 
+              role: 'user', 
+              content: fullPrompt + `
+
+CRITICAL: You MUST complete EVERY file you start. If you write:
+<file path="src/components/Hero.jsx">
+
+You MUST include the closing </file> tag and ALL the code in between.
+
+NEVER write partial code like:
+<h1>Build and deploy on the AI Cloud.</h1>
+<p>Some text...</p>  ❌ WRONG
+
+ALWAYS write complete code:
+<h1>Build and deploy on the AI Cloud.</h1>
+<p>Some text here with full content</p>  ✅ CORRECT
+
+If you're running out of space, generate FEWER files but make them COMPLETE.
+It's better to have 3 complete files than 10 incomplete files.`
+            }
+          ],
+          maxTokens: 8192, // Reduce to ensure completion
+          stopSequences: [] // Don't stop early
+          // Note: Neither Groq nor Anthropic models support tool/function calling in this context
+          // We use XML tags for package detection instead
+        };
+        
+        // Add temperature for non-reasoning models
+        if (!model.startsWith('openai/gpt-5')) {
+          streamOptions.temperature = 0.7;
+        }
+        
+        // Add reasoning effort for GPT-5 models
+        if (isOpenAI) {
+          streamOptions.experimental_providerMetadata = {
+            openai: {
+              reasoningEffort: 'high'
+            }
+          };
+        }
+        
+        let result;
+        let retryCount = 0;
+        const maxRetries = 2;
+        
+        while (retryCount <= maxRetries) {
+          try {
+            result = await streamText(streamOptions);
+            break; // Success, exit retry loop
+          } catch (streamError: any) {
+            console.error(`[generate-ai-code-stream] Error calling streamText (attempt ${retryCount + 1}/${maxRetries + 1}):`, streamError);
+            
+            // Check if this is a Groq service unavailable error
+            const isGroqServiceError = isKimiGroq && streamError.message?.includes('Service unavailable');
+            const isRetryableError = streamError.message?.includes('Service unavailable') || 
+                                    streamError.message?.includes('rate limit') ||
+                                    streamError.message?.includes('timeout');
+            
+            if (retryCount < maxRetries && isRetryableError) {
+              retryCount++;
+              console.log(`[generate-ai-code-stream] Retrying in ${retryCount * 2} seconds...`);
+              
+              // Send progress update about retry
+              await sendProgress({ 
+                type: 'info', 
+                message: `Service temporarily unavailable, retrying (attempt ${retryCount + 1}/${maxRetries + 1})...` 
+              });
+              
+              // Wait before retry with exponential backoff
+              await new Promise(resolve => setTimeout(resolve, retryCount * 2000));
+              
+              // If Groq fails, try switching to a fallback model
+              if (isGroqServiceError && retryCount === maxRetries) {
+                console.log('[generate-ai-code-stream] Groq service unavailable, falling back to GPT-4');
+                streamOptions.model = openai('gpt-4-turbo');
+                actualModel = 'gpt-4-turbo';
+              }
+            } else {
+              // Final error, send to user
+              await sendProgress({ 
+                type: 'error', 
+                message: `Failed to initialize ${isGoogle ? 'Gemini' : isAnthropic ? 'Claude' : isOpenAI ? 'GPT-5' : isKimiGroq ? 'Kimi (Groq)' : 'Groq'} streaming: ${streamError.message}` 
+              });
+              
+              // If this is a Google model error, provide helpful info
+              if (isGoogle) {
+                await sendProgress({ 
+                  type: 'info', 
+                  message: 'Tip: Make sure your GEMINI_API_KEY is set correctly and has proper permissions.' 
+                });
+              }
+              
+              throw streamError;
+            }
+          }
+        }
+        
+        // Stream the response and parse in real-time
+        let generatedCode = '';
+        let currentFile = '';
+        let currentFilePath = '';
+        let componentCount = 0;
+        let isInFile = false;
+        let isInTag = false;
+        let conversationalBuffer = '';
+        
+        // Buffer for incomplete tags
+        let tagBuffer = '';
+        
+        // Stream the response and parse for packages in real-time
+        for await (const textPart of result?.textStream || []) {
+          const text = textPart || '';
+          generatedCode += text;
+          currentFile += text;
+          
+          // Combine with buffer for tag detection
+          const searchText = tagBuffer + text;
+          
+          // Log streaming chunks to console
+          process.stdout.write(text);
+          
+          // Check if we're entering or leaving a tag
+          const hasOpenTag = /<(file|package|packages|explanation|command|structure|template)\b/.test(text);
+          const hasCloseTag = /<\/(file|package|packages|explanation|command|structure|template)>/.test(text);
+          
+          if (hasOpenTag) {
+            // Send any buffered conversational text before the tag
+            if (conversationalBuffer.trim() && !isInTag) {
+              await sendProgress({ 
+                type: 'conversation', 
+                text: conversationalBuffer.trim()
+              });
+              conversationalBuffer = '';
+            }
+            isInTag = true;
+          }
+          
+          if (hasCloseTag) {
+            isInTag = false;
+          }
+          
+          // If we're not in a tag, buffer as conversational text
+          if (!isInTag && !hasOpenTag) {
+            conversationalBuffer += text;
+          }
+          
+          // Stream the raw text for live preview
+          await sendProgress({ 
+            type: 'stream', 
+            text: text,
+            raw: true 
+          });
+          
+          // Debug: Log every 100 characters streamed
+          if (generatedCode.length % 100 < text.length) {
+            console.log(`[generate-ai-code-stream] Streamed ${generatedCode.length} chars`);
+          }
+          
+          // Check for package tags in buffered text (ONLY for edits, not initial generation)
+          let lastIndex = 0;
+          if (isEdit) {
+            const packageRegex = /<package>([^<]+)<\/package>/g;
+            let packageMatch;
+            
+            while ((packageMatch = packageRegex.exec(searchText)) !== null) {
+              const packageName = packageMatch[1].trim();
+              if (packageName && !packagesToInstall.includes(packageName)) {
+                packagesToInstall.push(packageName);
+                console.log(`[generate-ai-code-stream] Package detected: ${packageName}`);
+                await sendProgress({ 
+                  type: 'package', 
+                  name: packageName,
+                  message: `Package detected: ${packageName}`
+                });
+              }
+              lastIndex = packageMatch.index + packageMatch[0].length;
+            }
+          }
+          
+          // Keep unmatched portion in buffer for next iteration
+          tagBuffer = searchText.substring(Math.max(0, lastIndex - 50)); // Keep last 50 chars
+          
+          // Check for file boundaries
+          if (text.includes('<file path="')) {
+            const pathMatch = text.match(/<file path="([^"]+)"/);
+            if (pathMatch) {
+              currentFilePath = pathMatch[1];
+              isInFile = true;
+              currentFile = text;
+            }
+          }
+          
+          // Check for file end
+          if (isInFile && currentFile.includes('</file>')) {
+            isInFile = false;
+            
+            // Send component progress update
+            if (currentFilePath.includes('components/')) {
+              componentCount++;
+              const componentName = currentFilePath.split('/').pop()?.replace('.jsx', '') || 'Component';
+              await sendProgress({ 
+                type: 'component', 
+                name: componentName,
+                path: currentFilePath,
+                index: componentCount
+              });
+            } else if (currentFilePath.includes('App.jsx')) {
+              await sendProgress({ 
+                type: 'app', 
+                message: 'Generated main App.jsx',
+                path: currentFilePath
+              });
+            }
+            
+            currentFile = '';
+            currentFilePath = '';
+          }
+        }
+        
+        console.log('\n\n[generate-ai-code-stream] Streaming complete.');
+        
+        // Send any remaining conversational text
+        if (conversationalBuffer.trim()) {
+          await sendProgress({ 
+            type: 'conversation', 
+            text: conversationalBuffer.trim()
+          });
+        }
+        
+        // Also parse <packages> tag for multiple packages - ONLY for edits
+        if (isEdit) {
+          const packagesRegex = /<packages>([\s\S]*?)<\/packages>/g;
+          let packagesMatch;
+          while ((packagesMatch = packagesRegex.exec(generatedCode)) !== null) {
+            const packagesContent = packagesMatch[1].trim();
+            const packagesList = packagesContent.split(/[\n,]+/)
+              .map(pkg => pkg.trim())
+              .filter(pkg => pkg.length > 0);
+            
+            for (const packageName of packagesList) {
+              if (!packagesToInstall.includes(packageName)) {
+                packagesToInstall.push(packageName);
+                console.log(`[generate-ai-code-stream] Package from <packages> tag: ${packageName}`);
+                await sendProgress({ 
+                  type: 'package', 
+                  name: packageName,
+                  message: `Package detected: ${packageName}`
+                });
+              }
+            }
+          }
+        }
+        
+        // Function to extract packages from import statements
+        function extractPackagesFromCode(content: string): string[] {
+          const packages: string[] = [];
+          // Match ES6 imports
+          const importRegex = /import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)(?:\s*,\s*(?:\{[^}]*\}|\*\s+as\s+\w+|\w+))*\s+from\s+)?['"]([^'"]+)['"]/g;
+          let importMatch;
+          
+          while ((importMatch = importRegex.exec(content)) !== null) {
+            const importPath = importMatch[1];
+            // Skip relative imports and built-in React
+            if (!importPath.startsWith('.') && !importPath.startsWith('/') && 
+                importPath !== 'react' && importPath !== 'react-dom' &&
+                !importPath.startsWith('@/')) {
+              // Extract package name (handle scoped packages like @heroicons/react)
+              const packageName = importPath.startsWith('@') 
+                ? importPath.split('/').slice(0, 2).join('/')
+                : importPath.split('/')[0];
+              
+              if (!packages.includes(packageName)) {
+                packages.push(packageName);
+              }
+            }
+          }
+          
+          return packages;
+        }
+        
+        // Parse files and send progress for each
+        const fileRegex = /<file path="([^"]+)">([\s\S]*?)<\/file>/g;
+        const files = [];
+        let match;
+        
+        while ((match = fileRegex.exec(generatedCode)) !== null) {
+          const filePath = match[1];
+          const content = match[2].trim();
+          files.push({ path: filePath, content });
+          
+          // Extract packages from file content - ONLY for edits
+          if (isEdit) {
+            const filePackages = extractPackagesFromCode(content);
+            for (const pkg of filePackages) {
+              if (!packagesToInstall.includes(pkg)) {
+                packagesToInstall.push(pkg);
+                console.log(`[generate-ai-code-stream] Package detected from imports: ${pkg}`);
+                await sendProgress({ 
+                  type: 'package', 
+                  name: pkg,
+                  message: `Package detected from imports: ${pkg}`
+                });
+              }
+            }
+          }
+          
+          // Send progress for each file (reusing componentCount from streaming)
+          if (filePath.includes('components/')) {
+            const componentName = filePath.split('/').pop()?.replace('.jsx', '') || 'Component';
+            await sendProgress({ 
+              type: 'component', 
+              name: componentName,
+              path: filePath,
+              index: componentCount
+            });
+          } else if (filePath.includes('App.jsx')) {
+            await sendProgress({ 
+              type: 'app', 
+              message: 'Generated main App.jsx',
+              path: filePath
+            });
+          }
+        }
+        
+        // Extract explanation
+        const explanationMatch = generatedCode.match(/<explanation>([\s\S]*?)<\/explanation>/);
+        const explanation = explanationMatch ? explanationMatch[1].trim() : 'Code generated successfully!';
+        
+        // Validate generated code for truncation issues
+        const truncationWarnings: string[] = [];
+        
+        // Skip ellipsis checking entirely - too many false positives with spread operators, loading text, etc.
+        
+        // Check for unclosed file tags
+        const fileOpenCount = (generatedCode.match(/<file path="/g) || []).length;
+        const fileCloseCount = (generatedCode.match(/<\/file>/g) || []).length;
+        if (fileOpenCount !== fileCloseCount) {
+          truncationWarnings.push(`Unclosed file tags detected: ${fileOpenCount} open, ${fileCloseCount} closed`);
+        }
+        
+        // Check for files that seem truncated (very short or ending abruptly)
+        const truncationCheckRegex = /<file path="([^"]+)">([\s\S]*?)(?:<\/file>|$)/g;
+        let truncationMatch;
+        while ((truncationMatch = truncationCheckRegex.exec(generatedCode)) !== null) {
+          const filePath = truncationMatch[1];
+          const content = truncationMatch[2];
+          
+          // Only check for really obvious HTML truncation - file ends with opening tag
+          if (content.trim().endsWith('<') || content.trim().endsWith('</')) {
+            truncationWarnings.push(`File ${filePath} appears to have incomplete HTML tags`);
+          }
+          
+          // Skip "..." check - too many false positives with loading text, etc.
+          
+          // Only check for SEVERE truncation issues
+          if (filePath.match(/\.(jsx?|tsx?)$/)) {
+            // Only check for severely unmatched brackets (more than 3 difference)
+            const openBraces = (content.match(/{/g) || []).length;
+            const closeBraces = (content.match(/}/g) || []).length;
+            const braceDiff = Math.abs(openBraces - closeBraces);
+            if (braceDiff > 3) { // Only flag severe mismatches
+              truncationWarnings.push(`File ${filePath} has severely unmatched braces (${openBraces} open, ${closeBraces} closed)`);
+            }
+            
+            // Check if file is extremely short and looks incomplete
+            if (content.length < 20 && content.includes('function') && !content.includes('}')) {
+              truncationWarnings.push(`File ${filePath} appears severely truncated`);
+            }
+          }
+        }
+        
+        // Handle truncation with automatic retry (if enabled in config)
+        if (truncationWarnings.length > 0 && appConfig.codeApplication.enableTruncationRecovery) {
+          console.warn('[generate-ai-code-stream] Truncation detected, attempting to fix:', truncationWarnings);
+          
+          await sendProgress({
+            type: 'warning',
+            message: 'Detected incomplete code generation. Attempting to complete...',
+            warnings: truncationWarnings
+          });
+          
+          // Try to fix truncated files automatically
+          const truncatedFiles: string[] = [];
+          const fileRegex = /<file path="([^"]+)">([\s\S]*?)(?:<\/file>|$)/g;
+          let match;
+          
+          while ((match = fileRegex.exec(generatedCode)) !== null) {
+            const filePath = match[1];
+            const content = match[2];
+            
+            // Check if this file appears truncated - be more selective
+            const hasEllipsis = content.includes('...') && 
+                               !content.includes('...rest') && 
+                               !content.includes('...props') &&
+                               !content.includes('spread');
+                               
+            const endsAbruptly = content.trim().endsWith('...') || 
+                                 content.trim().endsWith(',') ||
+                                 content.trim().endsWith('(');
+                                 
+            const hasUnclosedTags = content.includes('</') && 
+                                    !content.match(/<\/[a-zA-Z0-9]+>/) &&
+                                    content.includes('<');
+                                    
+            const tooShort = content.length < 50 && filePath.match(/\.(jsx?|tsx?)$/);
+            
+            // Check for unmatched braces specifically
+            const openBraceCount = (content.match(/{/g) || []).length;
+            const closeBraceCount = (content.match(/}/g) || []).length;
+            const hasUnmatchedBraces = Math.abs(openBraceCount - closeBraceCount) > 1;
+            
+            const isTruncated = (hasEllipsis && endsAbruptly) || 
+                               hasUnclosedTags || 
+                               (tooShort && !content.includes('export')) ||
+                               hasUnmatchedBraces;
+            
+            if (isTruncated) {
+              truncatedFiles.push(filePath);
+            }
+          }
+          
+          // If we have truncated files, try to regenerate them
+          if (truncatedFiles.length > 0) {
+            console.log('[generate-ai-code-stream] Attempting to regenerate truncated files:', truncatedFiles);
+            
+            for (const filePath of truncatedFiles) {
+              await sendProgress({
+                type: 'info',
+                message: `Completing ${filePath}...`
+              });
+              
+              try {
+                // Create a focused prompt to complete just this file
+                const completionPrompt = `Complete the following file that was truncated. Provide the FULL file content.
+                
+File: ${filePath}
+Original request: ${prompt}
+                
+Provide the complete file content without any truncation. Include all necessary imports, complete all functions, and close all tags properly.`;
+                
+                // Make a focused API call to complete this specific file
+                // Create a new client for the completion based on the provider
+                let completionClient;
+                if (model.includes('gpt') || model.includes('openai')) {
+                  completionClient = openai;
+                } else if (model.includes('claude')) {
+                  completionClient = anthropic;
+                } else if (model === 'moonshotai/kimi-k2-instruct-0905') {
+                  completionClient = groq;
+                } else {
+                  completionClient = groq;
+                }
+                
+                // Determine the correct model name for the completion
+                let completionModelName: string;
+                if (model === 'moonshotai/kimi-k2-instruct-0905') {
+                  completionModelName = 'moonshotai/kimi-k2-instruct-0905';
+                } else if (model.includes('openai')) {
+                  completionModelName = model.replace('openai/', '');
+                } else if (model.includes('anthropic')) {
+                  completionModelName = model.replace('anthropic/', '');
+                } else if (model.includes('google')) {
+                  completionModelName = model.replace('google/', '');
+                } else {
+                  completionModelName = model;
+                }
+                
+                const completionResult = await streamText({
+                  model: completionClient(completionModelName),
+                  messages: [
+                    { 
+                      role: 'system', 
+                      content: 'You are completing a truncated file. Provide the complete, working file content.'
+                    },
+                    { role: 'user', content: completionPrompt }
+                  ],
+                  temperature: model.startsWith('openai/gpt-5') ? undefined : appConfig.ai.defaultTemperature
+                });
+                
+                // Get the full text from the stream
+                let completedContent = '';
+                for await (const chunk of completionResult.textStream) {
+                  completedContent += chunk;
+                }
+                
+                // Replace the truncated file in the generatedCode
+                const filePattern = new RegExp(
+                  `<file path="${filePath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}">[\\s\\S]*?(?:</file>|$)`,
+                  'g'
+                );
+                
+                // Extract just the code content (remove any markdown or explanation)
+                let cleanContent = completedContent;
+                if (cleanContent.includes('```')) {
+                  const codeMatch = cleanContent.match(/```[\w]*\n([\s\S]*?)```/);
+                  if (codeMatch) {
+                    cleanContent = codeMatch[1];
+                  }
+                }
+                
+                generatedCode = generatedCode.replace(
+                  filePattern,
+                  `<file path="${filePath}">\n${cleanContent}\n</file>`
+                );
+                
+                console.log(`[generate-ai-code-stream] Successfully completed ${filePath}`);
+                
+              } catch (completionError) {
+                console.error(`[generate-ai-code-stream] Failed to complete ${filePath}:`, completionError);
+                await sendProgress({
+                  type: 'warning',
+                  message: `Could not auto-complete ${filePath}. Manual review may be needed.`
+                });
+              }
+            }
+            
+            // Clear the warnings after attempting fixes
+            truncationWarnings.length = 0;
+            await sendProgress({
+              type: 'info',
+              message: 'Truncation recovery complete'
+            });
+          }
+        }
+        
+        // Send completion with packages info
+        await sendProgress({ 
+          type: 'complete', 
+          generatedCode,
+          explanation,
+          files: files.length,
+          components: componentCount,
+          model,
+          packagesToInstall: packagesToInstall.length > 0 ? packagesToInstall : undefined,
+          warnings: truncationWarnings.length > 0 ? truncationWarnings : undefined
+        });
+        
+        // Track edit in conversation history
+        if (isEdit && editContext && global.conversationState) {
+          const editRecord: ConversationEdit = {
+            timestamp: Date.now(),
+            userRequest: prompt,
+            editType: editContext.editIntent.type,
+            targetFiles: editContext.primaryFiles,
+            confidence: editContext.editIntent.confidence,
+            outcome: 'success' // Assuming success if we got here
+          };
+          
+          global.conversationState.context.edits.push(editRecord);
+          
+          // Track major changes
+          if (editContext.editIntent.type === 'ADD_FEATURE' || files.length > 3) {
+            global.conversationState.context.projectEvolution.majorChanges.push({
+              timestamp: Date.now(),
+              description: editContext.editIntent.description,
+              filesAffected: editContext.primaryFiles
+            });
+          }
+          
+          // Update last updated timestamp
+          global.conversationState.lastUpdated = Date.now();
+          
+          console.log('[generate-ai-code-stream] Updated conversation history with edit:', editRecord);
+        }
+        
+      } catch (error) {
+        console.error('[generate-ai-code-stream] Stream processing error:', error);
+        
+        // Check if it's a tool validation error
+        if ((error as any).message?.includes('tool call validation failed')) {
+          console.error('[generate-ai-code-stream] Tool call validation error - this may be due to the AI model sending incorrect parameters');
+          await sendProgress({ 
+            type: 'warning', 
+            message: 'Package installation tool encountered an issue. Packages will be detected from imports instead.'
+          });
+          // Continue processing - packages can still be detected from the code
+        } else {
+          await sendProgress({ 
+            type: 'error', 
+            error: (error as Error).message 
+          });
+        }
+      } finally {
+        await writer.close();
+      }
+    })();
+    
+    // Return the stream with proper headers for streaming support
+    return new Response(stream.readable, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+        'Transfer-Encoding': 'chunked',
+        'Content-Encoding': 'none', // Prevent compression that can break streaming
+        'X-Accel-Buffering': 'no', // Disable nginx buffering
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
+    });
+    
+  } catch (error) {
+    console.error('[generate-ai-code-stream] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/get-sandbox-files/route.ts

@@ -0,0 +1,208 @@
+import { NextResponse } from 'next/server';
+import { parseJavaScriptFile, buildComponentTree } from '@/lib/file-parser';
+import { FileManifest, FileInfo, RouteInfo } from '@/types/file-manifest';
+// SandboxState type used implicitly through global.activeSandbox
+
+declare global {
+  var activeSandbox: any;
+}
+
+export async function GET() {
+  try {
+    if (!global.activeSandbox) {
+      return NextResponse.json({
+        success: false,
+        error: 'No active sandbox'
+      }, { status: 404 });
+    }
+
+    console.log('[get-sandbox-files] Fetching and analyzing file structure...');
+    
+    // Get list of all relevant files
+    const findResult = await global.activeSandbox.runCommand({
+      cmd: 'find',
+      args: [
+        '.',
+        '-name', 'node_modules', '-prune', '-o',
+        '-name', '.git', '-prune', '-o',
+        '-name', 'dist', '-prune', '-o',
+        '-name', 'build', '-prune', '-o',
+        '-type', 'f',
+        '(',
+        '-name', '*.jsx',
+        '-o', '-name', '*.js',
+        '-o', '-name', '*.tsx',
+        '-o', '-name', '*.ts',
+        '-o', '-name', '*.css',
+        '-o', '-name', '*.json',
+        ')',
+        '-print'
+      ]
+    });
+    
+    if (findResult.exitCode !== 0) {
+      throw new Error('Failed to list files');
+    }
+    
+    const fileList = (await findResult.stdout()).split('\n').filter((f: string) => f.trim());
+    console.log('[get-sandbox-files] Found', fileList.length, 'files');
+    
+    // Read content of each file (limit to reasonable sizes)
+    const filesContent: Record<string, string> = {};
+    
+    for (const filePath of fileList) {
+      try {
+        // Check file size first
+        const statResult = await global.activeSandbox.runCommand({
+          cmd: 'stat',
+          args: ['-f', '%z', filePath]
+        });
+        
+        if (statResult.exitCode === 0) {
+          const fileSize = parseInt(await statResult.stdout());
+          
+          // Only read files smaller than 10KB
+          if (fileSize < 10000) {
+            const catResult = await global.activeSandbox.runCommand({
+              cmd: 'cat',
+              args: [filePath]
+            });
+            
+            if (catResult.exitCode === 0) {
+              const content = await catResult.stdout();
+              // Remove leading './' from path
+              const relativePath = filePath.replace(/^\.\//, '');
+              filesContent[relativePath] = content;
+            }
+          }
+        }
+      } catch (parseError) {
+        console.debug('Error parsing component info:', parseError);
+        // Skip files that can't be read
+        continue;
+      }
+    }
+    
+    // Get directory structure
+    const treeResult = await global.activeSandbox.runCommand({
+      cmd: 'find',
+      args: ['.', '-type', 'd', '-not', '-path', '*/node_modules*', '-not', '-path', '*/.git*']
+    });
+    
+    let structure = '';
+    if (treeResult.exitCode === 0) {
+      const dirs = (await treeResult.stdout()).split('\n').filter((d: string) => d.trim());
+      structure = dirs.slice(0, 50).join('\n'); // Limit to 50 lines
+    }
+    
+    // Build enhanced file manifest
+    const fileManifest: FileManifest = {
+      files: {},
+      routes: [],
+      componentTree: {},
+      entryPoint: '',
+      styleFiles: [],
+      timestamp: Date.now(),
+    };
+    
+    // Process each file
+    for (const [relativePath, content] of Object.entries(filesContent)) {
+      const fullPath = `/${relativePath}`;
+      
+      // Create base file info
+      const fileInfo: FileInfo = {
+        content: content,
+        type: 'utility',
+        path: fullPath,
+        relativePath,
+        lastModified: Date.now(),
+      };
+      
+      // Parse JavaScript/JSX files
+      if (relativePath.match(/\.(jsx?|tsx?)$/)) {
+        const parseResult = parseJavaScriptFile(content, fullPath);
+        Object.assign(fileInfo, parseResult);
+        
+        // Identify entry point
+        if (relativePath === 'src/main.jsx' || relativePath === 'src/index.jsx') {
+          fileManifest.entryPoint = fullPath;
+        }
+        
+        // Identify App.jsx
+        if (relativePath === 'src/App.jsx' || relativePath === 'App.jsx') {
+          fileManifest.entryPoint = fileManifest.entryPoint || fullPath;
+        }
+      }
+      
+      // Track style files
+      if (relativePath.endsWith('.css')) {
+        fileManifest.styleFiles.push(fullPath);
+        fileInfo.type = 'style';
+      }
+      
+      fileManifest.files[fullPath] = fileInfo;
+    }
+    
+    // Build component tree
+    fileManifest.componentTree = buildComponentTree(fileManifest.files);
+    
+    // Extract routes (simplified - looks for Route components or page pattern)
+    fileManifest.routes = extractRoutes(fileManifest.files);
+    
+    // Update global file cache with manifest
+    if (global.sandboxState?.fileCache) {
+      global.sandboxState.fileCache.manifest = fileManifest;
+    }
+
+    return NextResponse.json({
+      success: true,
+      files: filesContent,
+      structure,
+      fileCount: Object.keys(filesContent).length,
+      manifest: fileManifest,
+    });
+
+  } catch (error) {
+    console.error('[get-sandbox-files] Error:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}
+
+function extractRoutes(files: Record<string, FileInfo>): RouteInfo[] {
+  const routes: RouteInfo[] = [];
+  
+  // Look for React Router usage
+  for (const [path, fileInfo] of Object.entries(files)) {
+    if (fileInfo.content.includes('<Route') || fileInfo.content.includes('createBrowserRouter')) {
+      // Extract route definitions (simplified)
+      const routeMatches = fileInfo.content.matchAll(/path=["']([^"']+)["'].*(?:element|component)={([^}]+)}/g);
+      
+      for (const match of routeMatches) {
+        const [, routePath] = match;
+        // componentRef available in match but not used currently
+        routes.push({
+          path: routePath,
+          component: path,
+        });
+      }
+    }
+    
+    // Check for Next.js style pages
+    if (fileInfo.relativePath.startsWith('pages/') || fileInfo.relativePath.startsWith('src/pages/')) {
+      const routePath = '/' + fileInfo.relativePath
+        .replace(/^(src\/)?pages\//, '')
+        .replace(/\.(jsx?|tsx?)$/, '')
+        .replace(/index$/, '');
+        
+      routes.push({
+        path: routePath,
+        component: path,
+      });
+    }
+  }
+  
+  return routes;
+}

app/api/install-packages-v2/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { SandboxProvider } from '@/lib/sandbox/types';
+import { sandboxManager } from '@/lib/sandbox/sandbox-manager';
+
+declare global {
+  var activeSandboxProvider: any;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { packages } = await request.json();
+    
+    if (!packages || !Array.isArray(packages) || packages.length === 0) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Packages array is required' 
+      }, { status: 400 });
+    }
+    
+    // Get provider from sandbox manager or global state
+    const provider = sandboxManager.getActiveProvider() || global.activeSandboxProvider;
+    
+    if (!provider) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    console.log(`[install-packages-v2] Installing: ${packages.join(', ')}`);
+    
+    const result = await provider.installPackages(packages);
+    
+    return NextResponse.json({
+      success: result.success,
+      output: result.stdout,
+      error: result.stderr,
+      message: result.success ? 'Packages installed successfully' : 'Package installation failed'
+    });
+    
+  } catch (error) {
+    console.error('[install-packages-v2] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/install-packages/route.ts

@@ -0,0 +1,259 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+declare global {
+  var activeSandbox: any;
+  var activeSandboxProvider: any;
+  var sandboxData: any;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { packages } = await request.json();
+    // sandboxId not used - using global sandbox
+    
+    if (!packages || !Array.isArray(packages) || packages.length === 0) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Packages array is required' 
+      }, { status: 400 });
+    }
+    
+    // Validate and deduplicate package names
+    const validPackages = [...new Set(packages)]
+      .filter(pkg => pkg && typeof pkg === 'string' && pkg.trim() !== '')
+      .map(pkg => pkg.trim());
+    
+    if (validPackages.length === 0) {
+      return NextResponse.json({
+        success: false,
+        error: 'No valid package names provided'
+      }, { status: 400 });
+    }
+    
+    // Log if duplicates were found
+    if (packages.length !== validPackages.length) {
+      console.log(`[install-packages] Cleaned packages: removed ${packages.length - validPackages.length} invalid/duplicate entries`);
+      console.log(`[install-packages] Original:`, packages);
+      console.log(`[install-packages] Cleaned:`, validPackages);
+    }
+    
+    // Get active sandbox provider
+    const provider = global.activeSandboxProvider;
+    
+    if (!provider) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox provider available' 
+      }, { status: 400 });
+    }
+    
+    console.log('[install-packages] Installing packages:', validPackages);
+    
+    // Create a response stream for real-time updates
+    const encoder = new TextEncoder();
+    const stream = new TransformStream();
+    const writer = stream.writable.getWriter();
+    
+    // Function to send progress updates
+    const sendProgress = async (data: any) => {
+      const message = `data: ${JSON.stringify(data)}\n\n`;
+      await writer.write(encoder.encode(message));
+    };
+    
+    // Start installation in background
+    (async (providerInstance) => {
+      try {
+        await sendProgress({ 
+          type: 'start', 
+          message: `Installing ${validPackages.length} package${validPackages.length > 1 ? 's' : ''}...`,
+          packages: validPackages 
+        });
+        
+        // Stop any existing development server first
+        await sendProgress({ type: 'status', message: 'Stopping development server...' });
+        
+        try {
+          // Try to kill any running dev server processes
+          await providerInstance.runCommand('pkill -f vite');
+          await new Promise(resolve => setTimeout(resolve, 1000)); // Wait a bit
+        } catch (killError) {
+          // It's OK if no process is found
+          console.debug('[install-packages] No existing dev server found:', killError);
+        }
+        
+        // Check which packages are already installed
+        await sendProgress({ 
+          type: 'status', 
+          message: 'Checking installed packages...' 
+        });
+        
+        let packagesToInstall = validPackages;
+        
+        try {
+          // Read package.json to check existing dependencies
+          let packageJsonContent = '';
+          try {
+            packageJsonContent = await providerInstance.readFile('package.json');
+          } catch (error) {
+            console.log('[install-packages] Error reading package.json:', error);
+          }
+          if (packageJsonContent) {
+            const packageJson = JSON.parse(packageJsonContent);
+            
+            const dependencies = packageJson.dependencies || {};
+            const devDependencies = packageJson.devDependencies || {};
+            const allDeps = { ...dependencies, ...devDependencies };
+            
+            const alreadyInstalled = [];
+            const needInstall = [];
+            
+            for (const pkg of validPackages) {
+              // Handle scoped packages
+              const pkgName = pkg.startsWith('@') ? pkg : pkg.split('@')[0];
+              
+              if (allDeps[pkgName]) {
+                alreadyInstalled.push(pkgName);
+              } else {
+                needInstall.push(pkg);
+              }
+            }
+            
+            packagesToInstall = needInstall;
+            
+            if (alreadyInstalled.length > 0) {
+              await sendProgress({ 
+                type: 'info', 
+                message: `Already installed: ${alreadyInstalled.join(', ')}` 
+              });
+            }
+          }
+        } catch (error) {
+          console.error('[install-packages] Error checking existing packages:', error);
+          // If we can't check, just try to install all packages
+          packagesToInstall = validPackages;
+        }
+        
+        if (packagesToInstall.length === 0) {
+          await sendProgress({ 
+            type: 'success', 
+            message: 'All packages are already installed',
+            installedPackages: [],
+            alreadyInstalled: validPackages
+          });
+          
+          // Restart dev server
+          await sendProgress({ type: 'status', message: 'Restarting development server...' });
+          
+          await providerInstance.restartViteServer();
+          
+          await sendProgress({ 
+            type: 'complete', 
+            message: 'Dev server restarted!',
+            installedPackages: []
+          });
+          
+          return;
+        }
+        
+        // Install only packages that aren't already installed
+        await sendProgress({ 
+          type: 'info', 
+          message: `Installing ${packagesToInstall.length} new package(s): ${packagesToInstall.join(', ')}`
+        });
+        
+        // Install packages using provider method
+        const installResult = await providerInstance.installPackages(packagesToInstall);
+        
+        // Get install output - ensure stdout/stderr are strings
+        const stdout = String(installResult.stdout || '');
+        const stderr = String(installResult.stderr || '');
+        
+        if (stdout) {
+          const lines = stdout.split('\n').filter(line => line.trim());
+          for (const line of lines) {
+            if (line.includes('npm WARN')) {
+              await sendProgress({ type: 'warning', message: line });
+            } else if (line.trim()) {
+              await sendProgress({ type: 'output', message: line });
+            }
+          }
+        }
+        
+        if (stderr) {
+          const errorLines = stderr.split('\n').filter(line => line.trim());
+          for (const line of errorLines) {
+            if (line.includes('ERESOLVE')) {
+              await sendProgress({ 
+                type: 'warning', 
+                message: `Dependency conflict resolved with --legacy-peer-deps: ${line}` 
+              });
+            } else if (line.trim()) {
+              await sendProgress({ type: 'error', message: line });
+            }
+          }
+        }
+        
+        if (installResult.exitCode === 0) {
+          await sendProgress({ 
+            type: 'success', 
+            message: `Successfully installed: ${packagesToInstall.join(', ')}`,
+            installedPackages: packagesToInstall
+          });
+        } else {
+          await sendProgress({ 
+            type: 'error', 
+            message: 'Package installation failed' 
+          });
+        }
+        
+        // Restart development server
+        await sendProgress({ type: 'status', message: 'Restarting development server...' });
+        
+        try {
+          await providerInstance.restartViteServer();
+          
+          // Wait a bit for the server to start
+          await new Promise(resolve => setTimeout(resolve, 3000));
+          
+          await sendProgress({ 
+            type: 'complete', 
+            message: 'Package installation complete and dev server restarted!',
+            installedPackages: packagesToInstall
+          });
+        } catch (error) {
+          await sendProgress({ 
+            type: 'error', 
+            message: `Failed to restart dev server: ${(error as Error).message}` 
+          });
+        }
+        
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        if (errorMessage && errorMessage !== 'undefined') {
+          await sendProgress({ 
+            type: 'error', 
+            message: errorMessage
+          });
+        }
+      } finally {
+        await writer.close();
+      }
+    })(provider);
+    
+    // Return the stream
+    return new Response(stream.readable, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+      },
+    });
+    
+  } catch (error) {
+    console.error('[install-packages] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/kill-sandbox/route.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from 'next/server';
+
+declare global {
+  var activeSandboxProvider: any;
+  var sandboxData: any;
+  var existingFiles: Set<string>;
+}
+
+export async function POST() {
+  try {
+    console.log('[kill-sandbox] Stopping active sandbox...');
+
+    let sandboxKilled = false;
+
+    // Stop existing sandbox if any
+    if (global.activeSandboxProvider) {
+      try {
+        await global.activeSandboxProvider.terminate();
+        sandboxKilled = true;
+        console.log('[kill-sandbox] Sandbox stopped successfully');
+      } catch (e) {
+        console.error('[kill-sandbox] Failed to stop sandbox:', e);
+      }
+      global.activeSandboxProvider = null;
+      global.sandboxData = null;
+    }
+    
+    // Clear existing files tracking
+    if (global.existingFiles) {
+      global.existingFiles.clear();
+    }
+    
+    return NextResponse.json({
+      success: true,
+      sandboxKilled,
+      message: 'Sandbox cleaned up successfully'
+    });
+    
+  } catch (error) {
+    console.error('[kill-sandbox] Error:', error);
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: (error as Error).message 
+      }, 
+      { status: 500 }
+    );
+  }
+}

app/api/monitor-vite-logs/route.ts

@@ -0,0 +1,121 @@
+import { NextResponse } from 'next/server';
+
+declare global {
+  var activeSandbox: any;
+}
+
+export async function GET() {
+  try {
+    if (!global.activeSandbox) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    console.log('[monitor-vite-logs] Checking Vite process logs...');
+    
+    const errors: any[] = [];
+    
+    // Check if there's an error file from previous runs
+    try {
+      const catResult = await global.activeSandbox.runCommand({
+        cmd: 'cat',
+        args: ['/tmp/vite-errors.json']
+      });
+      
+      if (catResult.exitCode === 0) {
+        const errorFileContent = await catResult.stdout();
+        const data = JSON.parse(errorFileContent);
+        errors.push(...(data.errors || []));
+      }
+    } catch {
+      // No error file exists, that's OK
+    }
+    
+    // Look for any Vite-related log files that might contain errors
+    try {
+      const findResult = await global.activeSandbox.runCommand({
+        cmd: 'find',
+        args: ['/tmp', '-name', '*vite*', '-type', 'f']
+      });
+      
+      if (findResult.exitCode === 0) {
+        const logFiles = (await findResult.stdout()).split('\n').filter((f: string) => f.trim());
+        
+        for (const logFile of logFiles.slice(0, 3)) {
+          try {
+            const grepResult = await global.activeSandbox.runCommand({
+              cmd: 'grep',
+              args: ['-i', 'failed to resolve import', logFile]
+            });
+            
+            if (grepResult.exitCode === 0) {
+              const errorLines = (await grepResult.stdout()).split('\n').filter((line: string) => line.trim());
+              
+              for (const line of errorLines) {
+                // Extract package name from error line
+                const importMatch = line.match(/"([^"]+)"/);
+                if (importMatch) {
+                  const importPath = importMatch[1];
+                  
+                  // Skip relative imports
+                  if (!importPath.startsWith('.')) {
+                    // Extract base package name
+                    let packageName;
+                    if (importPath.startsWith('@')) {
+                      const parts = importPath.split('/');
+                      packageName = parts.length >= 2 ? parts.slice(0, 2).join('/') : importPath;
+                    } else {
+                      packageName = importPath.split('/')[0];
+                    }
+                    
+                    const errorObj = {
+                      type: "npm-missing",
+                      package: packageName,
+                      message: `Failed to resolve import "${importPath}"`,
+                      file: "Unknown"
+                    };
+                    
+                    // Avoid duplicates
+                    if (!errors.some(e => e.package === errorObj.package)) {
+                      errors.push(errorObj);
+                    }
+                  }
+                }
+              }
+            }
+          } catch {
+            // Skip if grep fails
+          }
+        }
+      }
+    } catch {
+      // No log files found, that's OK
+    }
+    
+    // Deduplicate errors by package name
+    const uniqueErrors: any[] = [];
+    const seenPackages = new Set<string>();
+    
+    for (const error of errors) {
+      if (error.package && !seenPackages.has(error.package)) {
+        seenPackages.add(error.package);
+        uniqueErrors.push(error);
+      }
+    }
+    
+    return NextResponse.json({
+      success: true,
+      hasErrors: uniqueErrors.length > 0,
+      errors: uniqueErrors
+    });
+    
+  } catch (error) {
+    console.error('[monitor-vite-logs] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/report-vite-error/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+declare global {
+  var viteErrors: any[];
+}
+
+// Initialize global viteErrors array if it doesn't exist
+if (!global.viteErrors) {
+  global.viteErrors = [];
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { error, file, type = 'runtime-error' } = await request.json();
+    
+    if (!error) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Error message is required' 
+      }, { status: 400 });
+    }
+    
+    // Parse the error to extract useful information
+    const errorObj: any = {
+      type,
+      message: error,
+      file: file || 'unknown',
+      timestamp: new Date().toISOString()
+    };
+    
+    // Extract import information if it's an import error
+    const importMatch = error.match(/Failed to resolve import ['"]([^'"]+)['"] from ['"]([^'"]+)['"]/);
+    if (importMatch) {
+      errorObj.type = 'import-error';
+      errorObj.import = importMatch[1];
+      errorObj.file = importMatch[2];
+    }
+    
+    // Add to global errors array
+    global.viteErrors.push(errorObj);
+    
+    // Keep only last 50 errors
+    if (global.viteErrors.length > 50) {
+      global.viteErrors = global.viteErrors.slice(-50);
+    }
+    
+    console.log('[report-vite-error] Error reported:', errorObj);
+    
+    return NextResponse.json({
+      success: true,
+      message: 'Error reported successfully',
+      error: errorObj
+    });
+    
+  } catch (error) {
+    console.error('[report-vite-error] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/restart-vite/route.ts

@@ -0,0 +1,103 @@
+import { NextResponse } from 'next/server';
+
+declare global {
+  var activeSandbox: any;
+  var activeSandboxProvider: any;
+  var lastViteRestartTime: number;
+  var viteRestartInProgress: boolean;
+}
+
+const RESTART_COOLDOWN_MS = 5000; // 5 second cooldown between restarts
+
+export async function POST() {
+  try {
+    // Check both v1 and v2 global references
+    const provider = global.activeSandbox || global.activeSandboxProvider;
+    
+    if (!provider) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    // Check if restart is already in progress
+    if (global.viteRestartInProgress) {
+      console.log('[restart-vite] Vite restart already in progress, skipping...');
+      return NextResponse.json({
+        success: true,
+        message: 'Vite restart already in progress'
+      });
+    }
+    
+    // Check cooldown
+    const now = Date.now();
+    if (global.lastViteRestartTime && (now - global.lastViteRestartTime) < RESTART_COOLDOWN_MS) {
+      const remainingTime = Math.ceil((RESTART_COOLDOWN_MS - (now - global.lastViteRestartTime)) / 1000);
+      console.log(`[restart-vite] Cooldown active, ${remainingTime}s remaining`);
+      return NextResponse.json({
+        success: true,
+        message: `Vite was recently restarted, cooldown active (${remainingTime}s remaining)`
+      });
+    }
+    
+    // Set the restart flag
+    global.viteRestartInProgress = true;
+    
+    console.log('[restart-vite] Using provider method to restart Vite...');
+    
+    // Use the provider's restartViteServer method if available
+    if (typeof provider.restartViteServer === 'function') {
+      await provider.restartViteServer();
+      console.log('[restart-vite] Vite restarted via provider method');
+    } else {
+      // Fallback to manual restart using provider's runCommand
+      console.log('[restart-vite] Fallback to manual Vite restart...');
+      
+      // Kill existing Vite processes
+      try {
+        await provider.runCommand('pkill -f vite');
+        console.log('[restart-vite] Killed existing Vite processes');
+        
+        // Wait a moment for processes to terminate
+        await new Promise(resolve => setTimeout(resolve, 2000));
+      } catch {
+        console.log('[restart-vite] No existing Vite processes found');
+      }
+      
+      // Clear any error tracking files
+      try {
+        await provider.runCommand('bash -c "echo \'{\\"errors\\": [], \\"lastChecked\\": '+ Date.now() +'}\' > /tmp/vite-errors.json"');
+      } catch {
+        // Ignore if this fails
+      }
+      
+      // Start Vite dev server in background
+      await provider.runCommand('sh -c "nohup npm run dev > /tmp/vite.log 2>&1 &"');
+      console.log('[restart-vite] Vite dev server restarted');
+      
+      // Wait for Vite to start up
+      await new Promise(resolve => setTimeout(resolve, 3000));
+    }
+    
+    // Update global state
+    global.lastViteRestartTime = Date.now();
+    global.viteRestartInProgress = false;
+    
+    return NextResponse.json({
+      success: true,
+      message: 'Vite restarted successfully'
+    });
+    
+  } catch (error) {
+    console.error('[restart-vite] Error:', error);
+    
+    // Clear the restart flag on error
+    global.viteRestartInProgress = false;
+    
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/run-command-v2/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { SandboxProvider } from '@/lib/sandbox/types';
+import { sandboxManager } from '@/lib/sandbox/sandbox-manager';
+
+// Get active sandbox provider from global state
+declare global {
+  var activeSandboxProvider: any;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { command } = await request.json();
+    
+    if (!command) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Command is required' 
+      }, { status: 400 });
+    }
+    
+    // Get provider from sandbox manager or global state
+    const provider = sandboxManager.getActiveProvider() || global.activeSandboxProvider;
+    
+    if (!provider) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    console.log(`[run-command-v2] Executing: ${command}`);
+    
+    const result = await provider.runCommand(command);
+    
+    return NextResponse.json({
+      success: result.success,
+      output: result.stdout,
+      error: result.stderr,
+      exitCode: result.exitCode,
+      message: result.success ? 'Command executed successfully' : 'Command failed'
+    });
+    
+  } catch (error) {
+    console.error('[run-command-v2] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/run-command/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Get active sandbox from global state (in production, use a proper state management solution)
+declare global {
+  var activeSandbox: any;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { command } = await request.json();
+    
+    if (!command) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'Command is required' 
+      }, { status: 400 });
+    }
+    
+    if (!global.activeSandbox) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    console.log(`[run-command] Executing: ${command}`);
+    
+    // Parse command and arguments
+    const commandParts = command.trim().split(/\s+/);
+    const cmd = commandParts[0];
+    const args = commandParts.slice(1);
+    
+    // Execute command using Vercel Sandbox
+    const result = await global.activeSandbox.runCommand({
+      cmd,
+      args
+    });
+    
+    // Get output streams
+    const stdout = await result.stdout();
+    const stderr = await result.stderr();
+    
+    const output = [
+      stdout ? `STDOUT:\n${stdout}` : '',
+      stderr ? `\nSTDERR:\n${stderr}` : '',
+      `\nExit code: ${result.exitCode}`
+    ].filter(Boolean).join('');
+    
+    return NextResponse.json({
+      success: true,
+      output,
+      exitCode: result.exitCode,
+      message: result.exitCode === 0 ? 'Command executed successfully' : 'Command completed with non-zero exit code'
+    });
+    
+  } catch (error) {
+    console.error('[run-command] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/sandbox-logs/route.ts

@@ -0,0 +1,89 @@
+import { NextResponse } from 'next/server';
+
+declare global {
+  var activeSandbox: any;
+}
+
+export async function GET() {
+  try {
+    if (!global.activeSandbox) {
+      return NextResponse.json({ 
+        success: false, 
+        error: 'No active sandbox' 
+      }, { status: 400 });
+    }
+    
+    console.log('[sandbox-logs] Fetching Vite dev server logs...');
+    
+    // Check if Vite processes are running
+    const psResult = await global.activeSandbox.runCommand({
+      cmd: 'ps',
+      args: ['aux']
+    });
+    
+    let viteRunning = false;
+    const logContent: string[] = [];
+    
+    if (psResult.exitCode === 0) {
+      const psOutput = await psResult.stdout();
+      const viteProcesses = psOutput.split('\n').filter((line: string) => 
+        line.toLowerCase().includes('vite') || 
+        line.toLowerCase().includes('npm run dev')
+      );
+      
+      viteRunning = viteProcesses.length > 0;
+      
+      if (viteRunning) {
+        logContent.push("Vite is running");
+        logContent.push(...viteProcesses.slice(0, 3)); // Show first 3 processes
+      } else {
+        logContent.push("Vite process not found");
+      }
+    }
+    
+    // Try to read any recent log files
+    try {
+      const findResult = await global.activeSandbox.runCommand({
+        cmd: 'find',
+        args: ['/tmp', '-name', '*vite*', '-name', '*.log', '-type', 'f']
+      });
+      
+      if (findResult.exitCode === 0) {
+        const logFiles = (await findResult.stdout()).split('\n').filter((f: string) => f.trim());
+        
+        for (const logFile of logFiles.slice(0, 2)) {
+          try {
+            const catResult = await global.activeSandbox.runCommand({
+              cmd: 'tail',
+              args: ['-n', '10', logFile]
+            });
+            
+            if (catResult.exitCode === 0) {
+              const logFileContent = await catResult.stdout();
+              logContent.push(`--- ${logFile} ---`);
+              logContent.push(logFileContent);
+            }
+          } catch {
+            // Skip if can't read log file
+          }
+        }
+      }
+    } catch {
+      // No log files found, that's OK
+    }
+    
+    return NextResponse.json({
+      success: true,
+      hasErrors: false,
+      logs: logContent,
+      status: viteRunning ? 'running' : 'stopped'
+    });
+    
+  } catch (error) {
+    console.error('[sandbox-logs] Error:', error);
+    return NextResponse.json({ 
+      success: false, 
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/sandbox-status/route.ts

@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+import { sandboxManager } from '@/lib/sandbox/sandbox-manager';
+
+declare global {
+  var activeSandboxProvider: any;
+  var sandboxData: any;
+  var existingFiles: Set<string>;
+}
+
+export async function GET() {
+  try {
+    // Check sandbox manager first, then fall back to global state
+    const provider = sandboxManager.getActiveProvider() || global.activeSandboxProvider;
+    const sandboxExists = !!provider;
+
+    let sandboxHealthy = false;
+    let sandboxInfo = null;
+
+    if (sandboxExists && provider) {
+      try {
+        // Check if sandbox is healthy by getting its info
+        const providerInfo = provider.getSandboxInfo();
+        sandboxHealthy = !!providerInfo;
+        
+        sandboxInfo = {
+          sandboxId: providerInfo?.sandboxId || global.sandboxData?.sandboxId,
+          url: providerInfo?.url || global.sandboxData?.url,
+          filesTracked: global.existingFiles ? Array.from(global.existingFiles) : [],
+          lastHealthCheck: new Date().toISOString()
+        };
+      } catch (error) {
+        console.error('[sandbox-status] Health check failed:', error);
+        sandboxHealthy = false;
+      }
+    }
+    
+    return NextResponse.json({
+      success: true,
+      active: sandboxExists,
+      healthy: sandboxHealthy,
+      sandboxData: sandboxInfo,
+      message: sandboxHealthy 
+        ? 'Sandbox is active and healthy' 
+        : sandboxExists 
+          ? 'Sandbox exists but is not responding' 
+          : 'No active sandbox'
+    });
+    
+  } catch (error) {
+    console.error('[sandbox-status] Error:', error);
+    return NextResponse.json({ 
+      success: false,
+      active: false,
+      error: (error as Error).message 
+    }, { status: 500 });
+  }
+}

app/api/scrape-screenshot/route.ts

@@ -0,0 +1,81 @@
+import { NextRequest, NextResponse } from 'next/server';
+import FirecrawlApp from '@mendable/firecrawl-js';
+
+export async function POST(req: NextRequest) {
+  try {
+    const { url } = await req.json();
+    
+    if (!url) {
+      return NextResponse.json({ error: 'URL is required' }, { status: 400 });
+    }
+
+    // Initialize Firecrawl with API key from environment
+    const apiKey = process.env.FIRECRAWL_API_KEY;
+    
+    if (!apiKey) {
+      console.error("FIRECRAWL_API_KEY not configured");
+      return NextResponse.json({ 
+        error: 'Firecrawl API key not configured' 
+      }, { status: 500 });
+    }
+    
+    const app = new FirecrawlApp({ apiKey });
+
+    console.log('[scrape-screenshot] Attempting to capture screenshot for:', url);
+    console.log('[scrape-screenshot] Using Firecrawl API key:', apiKey ? 'Present' : 'Missing');
+
+    // Use the new v4 scrape method (not scrapeUrl)
+    const scrapeResult = await app.scrape(url, {
+      formats: ['screenshot'], // Request screenshot format
+      waitFor: 3000, // Wait for page to fully load
+      timeout: 30000,
+      onlyMainContent: false, // Get full page for screenshot
+      actions: [
+        {
+          type: 'wait',
+          milliseconds: 2000 // Additional wait for dynamic content
+        }
+      ]
+    });
+
+    console.log('[scrape-screenshot] Full scrape result:', JSON.stringify(scrapeResult, null, 2));
+    console.log('[scrape-screenshot] Scrape result type:', typeof scrapeResult);
+    console.log('[scrape-screenshot] Scrape result keys:', Object.keys(scrapeResult));
+    
+    // The Firecrawl v4 API might return data directly without a success flag
+    // Check if we have data with screenshot
+    if (scrapeResult && scrapeResult.screenshot) {
+      // Direct screenshot response
+      return NextResponse.json({
+        success: true,
+        screenshot: scrapeResult.screenshot,
+        metadata: scrapeResult.metadata || {}
+      });
+    } else if ((scrapeResult as any)?.data?.screenshot) {
+      // Nested data structure
+      return NextResponse.json({
+        success: true,
+        screenshot: (scrapeResult as any).data.screenshot,
+        metadata: (scrapeResult as any).data.metadata || {}
+      });
+    } else if ((scrapeResult as any)?.success === false) {
+      // Explicit failure
+      console.error('[scrape-screenshot] Firecrawl API error:', (scrapeResult as any).error);
+      throw new Error((scrapeResult as any).error || 'Failed to capture screenshot');
+    } else {
+      // No screenshot in response
+      console.error('[scrape-screenshot] No screenshot in response. Full response:', JSON.stringify(scrapeResult, null, 2));
+      throw new Error('Screenshot not available in response - check console for full response structure');
+    }
+
+  } catch (error: any) {
+    console.error('[scrape-screenshot] Screenshot capture error:', error);
+    console.error('[scrape-screenshot] Error stack:', error.stack);
+    
+    // Provide fallback response for development - removed NODE_ENV check as it doesn't work in Next.js production builds
+    
+    return NextResponse.json({ 
+      error: error.message || 'Failed to capture screenshot'
+    }, { status: 500 });
+  }
+}

app/api/scrape-url-enhanced/route.ts

@@ -0,0 +1,127 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Function to sanitize smart quotes and other problematic characters
+function sanitizeQuotes(text: string): string {
+  return text
+    // Replace smart single quotes
+    .replace(/[\u2018\u2019\u201A\u201B]/g, "'")
+    // Replace smart double quotes
+    .replace(/[\u201C\u201D\u201E\u201F]/g, '"')
+    // Replace other quote-like characters
+    .replace(/[\u00AB\u00BB]/g, '"') // Guillemets
+    .replace(/[\u2039\u203A]/g, "'") // Single guillemets
+    // Replace other problematic characters
+    .replace(/[\u2013\u2014]/g, '-') // En dash and em dash
+    .replace(/[\u2026]/g, '...') // Ellipsis
+    .replace(/[\u00A0]/g, ' '); // Non-breaking space
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { url } = await request.json();
+    
+    if (!url) {
+      return NextResponse.json({
+        success: false,
+        error: 'URL is required'
+      }, { status: 400 });
+    }
+    
+    console.log('[scrape-url-enhanced] Scraping with Firecrawl:', url);
+    
+    const FIRECRAWL_API_KEY = process.env.FIRECRAWL_API_KEY;
+    if (!FIRECRAWL_API_KEY) {
+      throw new Error('FIRECRAWL_API_KEY environment variable is not set');
+    }
+    
+    // Make request to Firecrawl API with maxAge for 500% faster scraping
+    const firecrawlResponse = await fetch('https://api.firecrawl.dev/v1/scrape', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${FIRECRAWL_API_KEY}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        url,
+        formats: ['markdown', 'html', 'screenshot'],
+        waitFor: 3000,
+        timeout: 30000,
+        blockAds: true,
+        maxAge: 3600000, // Use cached data if less than 1 hour old (500% faster!)
+        actions: [
+          {
+            type: 'wait',
+            milliseconds: 2000
+          },
+          {
+            type: 'screenshot',
+            fullPage: false // Just visible viewport for performance
+          }
+        ]
+      })
+    });
+    
+    if (!firecrawlResponse.ok) {
+      const error = await firecrawlResponse.text();
+      throw new Error(`Firecrawl API error: ${error}`);
+    }
+    
+    const data = await firecrawlResponse.json();
+    
+    if (!data.success || !data.data) {
+      throw new Error('Failed to scrape content');
+    }
+    
+    const { markdown, metadata, screenshot, actions } = data.data;
+    // html available but not used in current implementation
+    
+    // Get screenshot from either direct field or actions result
+    const screenshotUrl = screenshot || actions?.screenshots?.[0] || null;
+    
+    // Sanitize the markdown content
+    const sanitizedMarkdown = sanitizeQuotes(markdown || '');
+    
+    // Extract structured data from the response
+    const title = metadata?.title || '';
+    const description = metadata?.description || '';
+    
+    // Format content for AI
+    const formattedContent = `
+Title: ${sanitizeQuotes(title)}
+Description: ${sanitizeQuotes(description)}
+URL: ${url}
+
+Main Content:
+${sanitizedMarkdown}
+    `.trim();
+    
+    return NextResponse.json({
+      success: true,
+      url,
+      content: formattedContent,
+      screenshot: screenshotUrl,
+      structured: {
+        title: sanitizeQuotes(title),
+        description: sanitizeQuotes(description),
+        content: sanitizedMarkdown,
+        url,
+        screenshot: screenshotUrl
+      },
+      metadata: {
+        scraper: 'firecrawl-enhanced',
+        timestamp: new Date().toISOString(),
+        contentLength: formattedContent.length,
+        cached: data.data.cached || false, // Indicates if data came from cache
+        ...metadata
+      },
+      message: 'URL scraped successfully with Firecrawl (with caching for 500% faster performance)'
+    });
+    
+  } catch (error) {
+    console.error('[scrape-url-enhanced] Error:', error);
+    return NextResponse.json({
+      success: false,
+      error: (error as Error).message
+    }, { status: 500 });
+  }
+}

app/api/scrape-website/route.ts

@@ -0,0 +1,110 @@
+import { NextRequest, NextResponse } from "next/server";
+import FirecrawlApp from '@mendable/firecrawl-js';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { url, formats = ['markdown', 'html'], options = {} } = await request.json();
+    
+    if (!url) {
+      return NextResponse.json(
+        { error: "URL is required" },
+        { status: 400 }
+      );
+    }
+    
+    // Initialize Firecrawl with API key from environment
+    const apiKey = process.env.FIRECRAWL_API_KEY;
+    
+    if (!apiKey) {
+      console.error("FIRECRAWL_API_KEY not configured");
+      // For demo purposes, return mock data if API key is not set
+      return NextResponse.json({
+        success: true,
+        data: {
+          title: "Example Website",
+          content: `This is a mock response for ${url}. Configure FIRECRAWL_API_KEY to enable real scraping.`,
+          description: "A sample website",
+          markdown: `# Example Website\n\nThis is mock content for demonstration purposes.`,
+          html: `<h1>Example Website</h1><p>This is mock content for demonstration purposes.</p>`,
+          metadata: {
+            title: "Example Website",
+            description: "A sample website",
+            sourceURL: url,
+            statusCode: 200
+          }
+        }
+      });
+    }
+    
+    const app = new FirecrawlApp({ apiKey });
+    
+    // Scrape the website using the latest SDK patterns
+    // Include screenshot if requested in formats
+    const scrapeResult = await app.scrape(url, {
+      formats: formats,
+      onlyMainContent: options.onlyMainContent !== false, // Default to true for cleaner content
+      waitFor: options.waitFor || 2000, // Wait for dynamic content
+      timeout: options.timeout || 30000,
+      ...options // Pass through any additional options
+    });
+    
+    // Handle the response according to the latest SDK structure
+    const result = scrapeResult as any;
+    if (result.success === false) {
+      throw new Error(result.error || "Failed to scrape website");
+    }
+    
+    // The SDK may return data directly or nested
+    const data = result.data || result;
+    
+    return NextResponse.json({
+      success: true,
+      data: {
+        title: data?.metadata?.title || "Untitled",
+        content: data?.markdown || data?.html || "",
+        description: data?.metadata?.description || "",
+        markdown: data?.markdown || "",
+        html: data?.html || "",
+        metadata: data?.metadata || {},
+        screenshot: data?.screenshot || null,
+        links: data?.links || [],
+        // Include raw data for flexibility
+        raw: data
+      }
+    });
+    
+  } catch (error) {
+    console.error("Error scraping website:", error);
+    
+    // Return a more detailed error response
+    return NextResponse.json({
+      success: false,
+      error: error instanceof Error ? error.message : "Failed to scrape website",
+      // Provide mock data as fallback for development
+      data: {
+        title: "Example Website",
+        content: "This is fallback content due to an error. Please check your configuration.",
+        description: "Error occurred while scraping",
+        markdown: `# Error\n\n${error instanceof Error ? error.message : 'Unknown error occurred'}`,
+        html: `<h1>Error</h1><p>${error instanceof Error ? error.message : 'Unknown error occurred'}</p>`,
+        metadata: {
+          title: "Error",
+          description: "Failed to scrape website",
+          statusCode: 500
+        }
+      }
+    }, { status: 500 });
+  }
+}
+
+// Optional: Add OPTIONS handler for CORS if needed
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}

app/api/search/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  try {
+    const { query } = await req.json();
+    
+    if (!query) {
+      return NextResponse.json({ error: 'Query is required' }, { status: 400 });
+    }
+
+    // Use Firecrawl search to get top 10 results with screenshots
+    const searchResponse = await fetch('https://api.firecrawl.dev/v1/search', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${process.env.FIRECRAWL_API_KEY}`,
+      },
+      body: JSON.stringify({
+        query,
+        limit: 10,
+        scrapeOptions: {
+          formats: ['markdown', 'screenshot'],
+          onlyMainContent: true,
+        },
+      }),
+    });
+
+    if (!searchResponse.ok) {
+      throw new Error('Search failed');
+    }
+
+    const searchData = await searchResponse.json();
+    
+    // Format results with screenshots and markdown
+    const results = searchData.data?.map((result: any) => ({
+      url: result.url,
+      title: result.title || result.url,
+      description: result.description || '',
+      screenshot: result.screenshot || null,
+      markdown: result.markdown || '',
+    })) || [];
+
+    return NextResponse.json({ results });
+  } catch (error) {
+    console.error('Search error:', error);
+    return NextResponse.json(
+      { error: 'Failed to perform search' },
+      { status: 500 }
+    );
+  }
+}

app/api/text-generation/route.ts

@@ -0,0 +1,32 @@
+import OpenAI from 'openai';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+// Create an OpenAI API client (that's edge friendly!)
+const openai = new OpenAI({
+  apiKey: process.env.HELMHOLTZ_API_KEY || '',
+  baseURL: 'https://api.helmholtz-blablador.fz-juelich.de/v1',
+});
+
+// IMPORTANT! Set the runtime to edge
+export const runtime = 'edge';
+
+export async function POST(req: Request) {
+  const { prompt, model } = await req.json();
+
+  // Ask OpenAI for a streaming chat completion given the prompt
+  const response = await openai.chat.completions.create({
+    model: model || 'alias-code',
+    stream: true,
+    messages: [
+      {
+        role: 'user',
+        content: prompt,
+      },
+    ],
+  });
+
+  // Convert the response into a friendly text-stream
+  const stream = OpenAIStream(response);
+  // Respond with the stream
+  return new StreamingTextResponse(stream);
+}

app/builder/page.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+export default function BuilderPage() {
+  const [targetUrl, setTargetUrl] = useState<string>("");
+  const [selectedStyle, setSelectedStyle] = useState<string>("modern");
+  const [isLoading, setIsLoading] = useState(true);
+  const [previewUrl, setPreviewUrl] = useState<string>("");
+  const [progress, setProgress] = useState<string>("Initializing...");
+  const [generatedCode, setGeneratedCode] = useState<string>("");
+  const router = useRouter();
+
+  useEffect(() => {
+    // Get the URL and style from sessionStorage
+    const url = sessionStorage.getItem('targetUrl');
+    const style = sessionStorage.getItem('selectedStyle');
+    
+    if (!url) {
+      router.push('/');
+      return;
+    }
+    
+    setTargetUrl(url);
+    setSelectedStyle(style || "modern");
+    
+    // Start the website generation process
+    generateWebsite(url, style || "modern");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router]);
+
+  const generateWebsite = async (url: string, style: string) => {
+    try {
+      setProgress("Analyzing website...");
+      
+      // For demo purposes, we'll generate a simple HTML template
+      // In production, this would call the actual scraping and generation APIs
+      const mockGeneratedCode = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${style} Website - Reimagined</title>
+  <style>
+    :root {
+      --primary: ${style === 'modern' ? '#FA5D19' : style === 'playful' ? '#9061ff' : style === 'professional' ? '#2a6dfb' : '#eb3424'};
+      --background: ${style === 'modern' ? '#ffffff' : style === 'playful' ? '#f9f9f9' : style === 'professional' ? '#f5f5f5' : '#fafafa'};
+    }
+    
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      background: var(--background);
+      color: #262626;
+      line-height: 1.6;
+    }
+    
+    header {
+      background: white;
+      border-bottom: 1px solid #ededed;
+      padding: 2rem;
+    }
+    
+    nav {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .logo {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: var(--primary);
+    }
+    
+    main {
+      max-width: 1200px;
+      margin: 4rem auto;
+      padding: 0 2rem;
+    }
+    
+    .hero {
+      text-align: center;
+      margin-bottom: 4rem;
+    }
+    
+    h1 {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      background: linear-gradient(135deg, var(--primary), #262626);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    
+    .subtitle {
+      font-size: 1.25rem;
+      color: #666;
+    }
+    
+    .cta-button {
+      display: inline-block;
+      margin-top: 2rem;
+      padding: 1rem 2rem;
+      background: var(--primary);
+      color: white;
+      text-decoration: none;
+      border-radius: 0.5rem;
+      transition: transform 0.2s;
+    }
+    
+    .cta-button:hover {
+      transform: scale(1.05);
+    }
+    
+    .features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 2rem;
+      margin-top: 4rem;
+    }
+    
+    .feature {
+      padding: 2rem;
+      background: white;
+      border-radius: 1rem;
+      border: 1px solid #ededed;
+      transition: box-shadow 0.2s;
+    }
+    
+    .feature:hover {
+      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    }
+    
+    .feature h3 {
+      margin-bottom: 1rem;
+      color: var(--primary);
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="logo">Reimagined</div>
+      <div>
+        <a href="#features" style="margin-right: 2rem; color: #666; text-decoration: none;">Features</a>
+        <a href="#about" style="margin-right: 2rem; color: #666; text-decoration: none;">About</a>
+        <a href="#contact" style="color: #666; text-decoration: none;">Contact</a>
+      </div>
+    </nav>
+  </header>
+  
+  <main>
+    <div class="hero">
+      <h1>Welcome to Your ${style === 'modern' ? 'Modern' : style === 'playful' ? 'Playful' : style === 'professional' ? 'Professional' : 'Artistic'} Website</h1>
+      <p class="subtitle">Reimagined from ${url}</p>
+      <a href="#" class="cta-button">Get Started</a>
+    </div>
+    
+    <div class="features" id="features">
+      <div class="feature">
+        <h3>Fast</h3>
+        <p>Lightning-fast performance optimized for modern web standards.</p>
+      </div>
+      <div class="feature">
+        <h3>Responsive</h3>
+        <p>Looks great on all devices, from mobile to desktop.</p>
+      </div>
+      <div class="feature">
+        <h3>Beautiful</h3>
+        <p>Stunning design that captures attention and drives engagement.</p>
+      </div>
+    </div>
+  </main>
+</body>
+</html>`;
+      
+      setGeneratedCode(mockGeneratedCode);
+      
+      // Create a blob URL for the preview
+      const blob = new Blob([mockGeneratedCode], { type: 'text/html' });
+      const blobUrl = URL.createObjectURL(blob);
+      setPreviewUrl(blobUrl);
+      
+      setProgress("Website ready!");
+      setIsLoading(false);
+      
+      // Show success message
+      toast.success("Website generated successfully!");
+      
+    } catch (error) {
+      console.error("Error generating website:", error);
+      toast.error("Failed to generate website. Please try again.");
+      setProgress("Error occurred");
+      setTimeout(() => router.push('/'), 2000);
+    }
+  };
+  
+  const downloadCode = () => {
+    const blob = new Blob([generatedCode], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'website.html';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    toast.success("Code downloaded!");
+  };
+
+  return (
+    <div className="min-h-screen bg-background-base">
+      <div className="flex h-screen">
+        {/* Sidebar */}
+        <div className="w-80 bg-white border-r border-border-faint p-24 flex flex-col">
+          <h2 className="text-title-small font-semibold mb-16">Building Your Website</h2>
+          
+          <div className="space-y-12 flex-1">
+            <div>
+              <div className="text-label-small text-black-alpha-56 mb-4">Target URL</div>
+              <div className="text-body-medium text-accent-black truncate">{targetUrl}</div>
+            </div>
+            
+            <div>
+              <div className="text-label-small text-black-alpha-56 mb-4">Style</div>
+              <div className="text-body-medium text-accent-black capitalize">{selectedStyle}</div>
+            </div>
+            
+            <div>
+              <div className="text-label-small text-black-alpha-56 mb-4">Status</div>
+              <div className="text-body-medium text-heat-100">{progress}</div>
+            </div>
+          </div>
+          
+          <div className="space-y-8">
+            {!isLoading && (
+              <button
+                onClick={downloadCode}
+                className="w-full py-12 px-16 bg-heat-100 hover:bg-heat-200 text-white rounded-10 text-label-medium transition-all"
+              >
+                Download Code
+              </button>
+            )}
+            
+            <button
+              onClick={() => router.push('/')}
+              className="w-full py-12 px-16 bg-black-alpha-4 hover:bg-black-alpha-6 rounded-10 text-label-medium transition-all"
+            >
+              Start Over
+            </button>
+          </div>
+        </div>
+        
+        {/* Preview */}
+        <div className="flex-1 bg-gray-50">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center">
+                <div className="w-48 h-48 border-4 border-heat-100 border-t-transparent rounded-full animate-spin mb-16 mx-auto"></div>
+                <p className="text-body-large text-black-alpha-56">{progress}</p>
+              </div>
+            </div>
+          ) : (
+            previewUrl && (
+              <iframe
+                src={previewUrl}
+                className="w-full h-full border-0"
+                title="Website Preview"
+              />
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1 @@
+@import "../styles/main.css";

app/landing.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+// useState not currently used but kept for future interactivity
+import Link from "next/link";
+
+// Import shared components
+import { HeaderProvider } from "@/components/shared/header/HeaderContext";
+// import HeaderBrandKit from "@/components/shared/header/BrandKit/BrandKit"; // Not used in current implementation
+import HeaderWrapper from "@/components/shared/header/Wrapper/Wrapper";
+import HeaderDropdownWrapper from "@/components/shared/header/Dropdown/Wrapper/Wrapper";
+import ButtonUI from "@/components/ui/shadcn/button";
+
+// Import hero section components
+import HomeHeroBackground from "@/components/app/(home)/sections/hero/Background/Background";
+import { BackgroundOuterPiece } from "@/components/app/(home)/sections/hero/Background/BackgroundOuterPiece";
+import HomeHeroBadge from "@/components/app/(home)/sections/hero/Badge/Badge";
+import HomeHeroPixi from "@/components/app/(home)/sections/hero/Pixi/Pixi";
+import HomeHeroTitle from "@/components/app/(home)/sections/hero/Title/Title";
+import HeroInput from "@/components/app/(home)/sections/hero-input/HeroInput";
+import { Connector } from "@/components/shared/layout/curvy-rect";
+import HeroFlame from "@/components/shared/effects/flame/hero-flame";
+import FirecrawlIcon from "@/components/FirecrawlIcon";
+import FirecrawlLogo from "@/components/FirecrawlLogo";
+
+export default function LandingPage() {
+  return (
+    <HeaderProvider>
+      <div className="min-h-screen bg-background-base">
+        {/* Header/Navigation Section */}
+        <HeaderDropdownWrapper />
+
+        <div className="sticky top-0 left-0 w-full z-[101] bg-background-base header">
+          <div className="absolute top-0 cmw-container border-x border-border-faint h-full pointer-events-none" />
+          <div className="h-1 bg-border-faint w-full left-0 -bottom-1 absolute" />
+          
+          <div className="cmw-container absolute h-full pointer-events-none top-0">
+            <Connector className="absolute -left-[10.5px] -bottom-11" />
+            <Connector className="absolute -right-[10.5px] -bottom-11" />
+          </div>
+
+          <HeaderWrapper>
+            <div className="max-w-[900px] mx-auto w-full flex justify-between items-center">
+              <div className="flex gap-24 items-center">
+                <Link href="/" className="flex items-center gap-2">
+                  <FirecrawlIcon className="w-7 h-7 text-accent-black" />
+                  <FirecrawlLogo />
+                </Link>
+              </div>
+
+              <div className="flex gap-8">
+                <Link
+                  href="https://github.com/mendableai/open-lovable"
+                  target="_blank"
+                  className="contents"
+                >
+                  <ButtonUI variant="tertiary">
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                    </svg>
+                    Use this Template
+                  </ButtonUI>
+                </Link>
+              </div>
+            </div>
+          </HeaderWrapper>
+        </div>
+
+        {/* Hero Section */}
+        <section className="overflow-x-clip" id="home-hero">
+          <div className="pt-28 lg:pt-254 lg:-mt-100 pb-115 relative" id="hero-content">
+            <HomeHeroPixi />
+            <HeroFlame />
+            <BackgroundOuterPiece />
+            <HomeHeroBackground />
+
+            <div className="relative container px-16">
+              <HomeHeroBadge />
+              <HomeHeroTitle />
+              
+              {/* Hero Input */}
+              <div className="mt-24">
+                <HeroInput />
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </HeaderProvider>
+  );
+}

app/layout.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import { Inter, Roboto_Mono } from "next/font/google";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const inter = Inter({ 
+  subsets: ["latin"],
+  variable: "--font-inter"
+});
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+});
+
+export const metadata: Metadata = {
+  title: "Open Lovable v3",
+  description: "Re-imagine any website in seconds with AI-powered website builder.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} ${geistSans.variable} ${geistMono.variable} ${robotoMono.variable} font-sans`}>
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,897 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { appConfig } from '@/config/app.config';
+import { toast } from "sonner";
+
+// Import shared components
+import { Connector } from "@/components/shared/layout/curvy-rect";
+import HeroFlame from "@/components/shared/effects/flame/hero-flame";
+import AsciiExplosion from "@/components/shared/effects/flame/ascii-explosion";
+import { HeaderProvider } from "@/components/shared/header/HeaderContext";
+
+// Import hero section components
+import HomeHeroBackground from "@/components/app/(home)/sections/hero/Background/Background";
+import { BackgroundOuterPiece } from "@/components/app/(home)/sections/hero/Background/BackgroundOuterPiece";
+import HomeHeroBadge from "@/components/app/(home)/sections/hero/Badge/Badge";
+import HomeHeroPixi from "@/components/app/(home)/sections/hero/Pixi/Pixi";
+import HomeHeroTitle from "@/components/app/(home)/sections/hero/Title/Title";
+import HeroInputSubmitButton from "@/components/app/(home)/sections/hero-input/Button/Button";
+// import Globe from "@/components/app/(home)/sections/hero-input/_svg/Globe";
+
+// Import header components
+import HeaderBrandKit from "@/components/shared/header/BrandKit/BrandKit";
+import HeaderWrapper from "@/components/shared/header/Wrapper/Wrapper";
+import HeaderDropdownWrapper from "@/components/shared/header/Dropdown/Wrapper/Wrapper";
+import GithubIcon from "@/components/shared/header/Github/_svg/GithubIcon";
+import ButtonUI from "@/components/ui/shadcn/button"
+
+interface SearchResult {
+  url: string;
+  title: string;
+  description: string;
+  screenshot: string | null;
+  markdown: string;
+}
+
+export default function HomePage() {
+  const [url, setUrl] = useState<string>("");
+  const [selectedStyle, setSelectedStyle] = useState<string>("1");
+  const [selectedModel, setSelectedModel] = useState<string>(appConfig.ai.defaultModel);
+  const [isValidUrl, setIsValidUrl] = useState<boolean>(false);
+  const [showSearchTiles, setShowSearchTiles] = useState<boolean>(false);
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [hasSearched, setHasSearched] = useState<boolean>(false);
+  const [isFadingOut, setIsFadingOut] = useState<boolean>(false);
+  const [showSelectMessage, setShowSelectMessage] = useState<boolean>(false);
+  const [showInstructionsForIndex, setShowInstructionsForIndex] = useState<number | null>(null);
+  const [additionalInstructions, setAdditionalInstructions] = useState<string>('');
+  const [extendBrandStyles, setExtendBrandStyles] = useState<boolean>(false);
+  const router = useRouter();
+  
+  // Simple URL validation
+  const validateUrl = (urlString: string) => {
+    if (!urlString) return false;
+    // Basic URL pattern - accepts domains with or without protocol
+    const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
+    return urlPattern.test(urlString.toLowerCase());
+  };
+
+  // Check if input is a URL (contains a dot)
+  const isURL = (str: string): boolean => {
+    const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/.*)?$/;
+    return urlPattern.test(str.trim());
+  };
+
+  const styles = [
+    { id: "1", name: "Glassmorphism", description: "Frosted glass effect" },
+    { id: "2", name: "Neumorphism", description: "Soft 3D shadows" },
+    { id: "3", name: "Brutalism", description: "Bold and raw" },
+    { id: "4", name: "Minimalist", description: "Clean and simple" },
+    { id: "5", name: "Dark Mode", description: "Dark theme design" },
+    { id: "6", name: "Gradient Rich", description: "Vibrant gradients" },
+    { id: "7", name: "3D Depth", description: "Dimensional layers" },
+    { id: "8", name: "Retro Wave", description: "80s inspired" },
+  ];
+
+  const models = appConfig.ai.availableModels.map(model => ({
+    id: model,
+    name: appConfig.ai.modelDisplayNames[model] || model,
+  }));
+
+  const handleSubmit = async (selectedResult?: SearchResult) => {
+    const inputValue = url.trim();
+
+    if (!inputValue) {
+      toast.error("Please enter a URL or search term");
+      return;
+    }
+
+    // Validate brand extension mode requirements
+    if (extendBrandStyles && isURL(inputValue) && !additionalInstructions.trim()) {
+      toast.error("Please describe what you want to build with this brand's styles");
+      return;
+    }
+    
+    // If it's a search result being selected, fade out and redirect
+    if (selectedResult) {
+      setIsFadingOut(true);
+      
+      // Wait for fade animation
+      setTimeout(() => {
+        sessionStorage.setItem('targetUrl', selectedResult.url);
+        sessionStorage.setItem('selectedStyle', selectedStyle);
+        sessionStorage.setItem('selectedModel', selectedModel);
+        sessionStorage.setItem('autoStart', 'true');
+        if (selectedResult.markdown) {
+          sessionStorage.setItem('siteMarkdown', selectedResult.markdown);
+        }
+        router.push('/generation');
+      }, 500);
+      return;
+    }
+    
+    // If it's a URL, check if we're extending brand styles or cloning
+    if (isURL(inputValue)) {
+      if (extendBrandStyles) {
+        // Brand extension mode - extract brand styles and use them with the prompt
+        sessionStorage.setItem('targetUrl', inputValue);
+        sessionStorage.setItem('selectedModel', selectedModel);
+        sessionStorage.setItem('autoStart', 'true');
+        sessionStorage.setItem('brandExtensionMode', 'true');
+        sessionStorage.setItem('brandExtensionPrompt', additionalInstructions || '');
+        router.push('/generation');
+      } else {
+        // Normal clone mode
+        sessionStorage.setItem('targetUrl', inputValue);
+        sessionStorage.setItem('selectedStyle', selectedStyle);
+        sessionStorage.setItem('selectedModel', selectedModel);
+        sessionStorage.setItem('autoStart', 'true');
+        router.push('/generation');
+      }
+    } else {
+      // It's a search term, fade out if results exist, then search
+      if (hasSearched && searchResults.length > 0) {
+        setIsFadingOut(true);
+        
+        setTimeout(async () => {
+          setSearchResults([]);
+          setIsFadingOut(false);
+          setShowSelectMessage(true);
+          
+          // Perform new search
+          await performSearch(inputValue);
+          setHasSearched(true);
+          setShowSearchTiles(true);
+          setShowSelectMessage(false);
+          
+          // Smooth scroll to carousel
+          setTimeout(() => {
+            const carouselSection = document.querySelector('.carousel-section');
+            if (carouselSection) {
+              carouselSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+          }, 300);
+        }, 500);
+      } else {
+        // First search, no fade needed
+        setShowSelectMessage(true);
+        setIsSearching(true);
+        setHasSearched(true);
+        setShowSearchTiles(true);
+        
+        // Scroll to carousel area immediately
+        setTimeout(() => {
+          const carouselSection = document.querySelector('.carousel-section');
+          if (carouselSection) {
+            carouselSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 100);
+        
+        await performSearch(inputValue);
+        setShowSelectMessage(false);
+        setIsSearching(false);
+        
+        // Smooth scroll to carousel
+        setTimeout(() => {
+          const carouselSection = document.querySelector('.carousel-section');
+          if (carouselSection) {
+            carouselSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }, 300);
+      }
+    }
+  };
+
+  // Perform search when user types
+  const performSearch = async (searchQuery: string) => {
+    if (!searchQuery.trim() || isURL(searchQuery)) {
+      setSearchResults([]);
+      setShowSearchTiles(false);
+      return;
+    }
+
+    setIsSearching(true);
+    setShowSearchTiles(true);
+    try {
+      const response = await fetch('/api/search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: searchQuery }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setSearchResults(data.results || []);
+        setShowSearchTiles(true);
+      }
+    } catch (error) {
+      console.error('Search error:', error);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  return (
+    <HeaderProvider>
+      <div className="min-h-screen bg-background-base">
+        {/* Header/Navigation Section */}
+        <HeaderDropdownWrapper />
+
+        <div className="sticky top-0 left-0 w-full z-[101] bg-background-base header">
+          <div className="absolute top-0 cmw-container border-x border-border-faint h-full pointer-events-none" />
+          <div className="h-1 bg-border-faint w-full left-0 -bottom-1 absolute" />
+          <div className="cmw-container absolute h-full pointer-events-none top-0">
+            <Connector className="absolute -left-[10.5px] -bottom-11" />
+            <Connector className="absolute -right-[10.5px] -bottom-11" />
+          </div>
+
+          <HeaderWrapper>
+            <div className="max-w-[900px] mx-auto w-full flex justify-between items-center">
+              <div className="flex gap-24 items-center">
+                <HeaderBrandKit />
+              </div>
+              <div className="flex gap-8">
+                <a
+                  className="contents"
+                  href="https://github.com/mendableai/open-lovable"
+                  target="_blank"
+                >
+                  <ButtonUI variant="tertiary">
+                    <GithubIcon />
+                    Use this Template
+                  </ButtonUI>
+                </a>
+                <Link href="/text-generation">
+                  <ButtonUI variant="tertiary">
+                    Text Generation
+                  </ButtonUI>
+                </Link>
+              </div>
+            </div>
+          </HeaderWrapper>
+        </div>
+
+        {/* Hero Section */}
+        <section className="overflow-x-clip" id="home-hero">
+          <div className="pt-28 lg:pt-254 lg:-mt-100 pb-115 relative" id="hero-content">
+            <HomeHeroPixi />
+            <HeroFlame />
+            <BackgroundOuterPiece />
+            <HomeHeroBackground />
+
+            <div className="relative container px-16">
+              <HomeHeroBadge />
+              <HomeHeroTitle />
+              <p className="text-center text-body-large">
+                Clone brand format or re-imagine any website, in seconds.
+              </p>
+              <Link
+                className="bg-black-alpha-4 hover:bg-black-alpha-6 rounded-6 px-8 lg:px-6 text-label-large h-30 lg:h-24 block mt-8 mx-auto w-max gap-4 transition-all"
+                href="#"
+                onClick={(e) => e.preventDefault()}
+              >
+                Powered by Firecrawl.
+              </Link>
+            </div>
+          </div>
+
+          {/* Mini Playground Input */}
+          <div className="container lg:contents !p-16 relative -mt-90">
+            <div className="absolute top-0 left-[calc(50%-50vw)] w-screen h-1 bg-border-faint lg:hidden" />
+            <div className="absolute bottom-0 left-[calc(50%-50vw)] w-screen h-1 bg-border-faint lg:hidden" />
+            <Connector className="-top-10 -left-[10.5px] lg:hidden" />
+            <Connector className="-top-10 -right-[10.5px] lg:hidden" />
+            <Connector className="-bottom-10 -left-[10.5px] lg:hidden" />
+            <Connector className="-bottom-10 -right-[10.5px] lg:hidden" />
+
+            {/* Hero Input Component */}
+            <div className="max-w-552 mx-auto z-[11] lg:z-[2]">
+              <div className="rounded-20 -mt-30 lg:-mt-30">
+                <div
+                  className="bg-white rounded-20 relative z-10"
+                  style={{
+                    boxShadow:
+                      "0px 0px 44px 0px rgba(0, 0, 0, 0.02), 0px 88px 56px -20px rgba(0, 0, 0, 0.03), 0px 56px 56px -20px rgba(0, 0, 0, 0.02), 0px 32px 32px -20px rgba(0, 0, 0, 0.03), 0px 16px 24px -12px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 0px 10px #F9F9F9",
+                  }}
+                >
+
+                <div className="p-[28px] flex gap-12 items-center w-full relative bg-white rounded-20">
+                  {/* Show different UI when search results are displayed */}
+                  {hasSearched && searchResults.length > 0 && !isFadingOut ? (
+                    <>
+                      {/* Selection mode icon */}
+                      <svg 
+                        width="20" 
+                        height="20" 
+                        viewBox="0 0 20 20" 
+                        fill="none" 
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="opacity-40 flex-shrink-0"
+                      >
+                        <rect x="2" y="4" width="7" height="5" rx="1" stroke="currentColor" strokeWidth="1.5"/>
+                        <rect x="11" y="4" width="7" height="5" rx="1" stroke="currentColor" strokeWidth="1.5"/>
+                        <rect x="2" y="11" width="7" height="5" rx="1" stroke="currentColor" strokeWidth="1.5"/>
+                        <rect x="11" y="11" width="7" height="5" rx="1" stroke="currentColor" strokeWidth="1.5"/>
+                      </svg>
+                      
+                      {/* Selection message */}
+                      <div className="flex-1 text-body-input text-accent-black">
+                        Select which site to clone from the results below
+                      </div>
+                      
+                      {/* Search again button */}
+                      <button
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setIsFadingOut(true);
+                          setTimeout(() => {
+                            setSearchResults([]);
+                            setHasSearched(false);
+                            setShowSearchTiles(false);
+                            setIsFadingOut(false);
+                            setUrl('');
+                          }, 500);
+                        }}
+                        className="button relative rounded-10 px-12 py-8 text-label-medium font-medium flex items-center justify-center gap-6 bg-gray-100 hover:bg-gray-200 text-gray-700 active:scale-[0.995] transition-all"
+                      >
+                        <svg 
+                          width="16" 
+                          height="16" 
+                          viewBox="0 0 16 16" 
+                          fill="none" 
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="opacity-60"
+                        >
+                          <path d="M14 14L10 10M11 6.5C11 9 9 11 6.5 11C4 11 2 9 2 6.5C2 4 4 2 6.5 2C9 2 11 4 11 6.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                        </svg>
+                        <span>Search Again</span>
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      {isURL(url) ? (
+                        // Scrape icon for URLs
+                        <svg 
+                          width="20" 
+                          height="20" 
+                          viewBox="0 0 20 20" 
+                          fill="none" 
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="opacity-40 flex-shrink-0"
+                        >
+                          <rect x="3" y="3" width="14" height="14" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                          <path d="M7 10L9 12L13 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                      ) : (
+                        // Search icon for search terms
+                        <svg 
+                          width="20" 
+                          height="20" 
+                          viewBox="0 0 20 20" 
+                          fill="none" 
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="opacity-40 flex-shrink-0"
+                        >
+                          <circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" strokeWidth="1.5"/>
+                          <path d="M12.5 12.5L16.5 16.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                        </svg>
+                      )}
+                      <input
+                        className="flex-1 bg-transparent text-body-input text-accent-black placeholder:text-black-alpha-48 focus:outline-none focus:ring-0 focus:border-transparent"
+                        placeholder="Enter URL or search term..."
+                        type="text"
+                        value={url}
+                        disabled={isSearching}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          setUrl(value);
+                          setIsValidUrl(validateUrl(value));
+                          // Reset search state when input changes
+                          if (value.trim() === "") {
+                            setShowSearchTiles(false);
+                            setHasSearched(false);
+                            setSearchResults([]);
+                          }
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" && !isSearching) {
+                            e.preventDefault();
+                            handleSubmit();
+                          }
+                        }}
+                        onFocus={() => {
+                          if (url.trim() && !isURL(url) && searchResults.length > 0) {
+                            setShowSearchTiles(true);
+                          }
+                        }}
+                      />
+                      <div
+                        onClick={(e) => {
+                          e.preventDefault();
+                          if (!isSearching) {
+                            handleSubmit();
+                          }
+                        }}
+                        className={isSearching ? 'pointer-events-none' : ''}
+                      >
+                        <HeroInputSubmitButton 
+                          dirty={url.length > 0} 
+                          buttonText={isURL(url) ? 'Scrape Site' : 'Search'} 
+                          disabled={isSearching}
+                        />
+                      </div>
+                    </>
+                  )}
+                </div>
+
+                {/* Options Section - Only show when valid URL */}
+                <div className={`overflow-hidden transition-all duration-500 ease-in-out ${
+                  isValidUrl ? (extendBrandStyles ? 'max-h-[400px]' : 'max-h-[300px]') + ' opacity-100' : 'max-h-0 opacity-0'
+                }`}>
+                  <div className="px-[28px] pt-0 pb-[28px]">
+                    <div className="border-t border-gray-100 bg-white">
+                      {/* Extend Brand Styles Toggle */}
+                      <div className={`transition-all duration-300 transform ${
+                        isValidUrl ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0'
+                      }`} style={{ transitionDelay: '50ms' }}>
+                        <div className="py-8 grid grid-cols-2 items-center gap-12 group cursor-pointer" onClick={() => setExtendBrandStyles(!extendBrandStyles)}>
+                          <div className="flex select-none">
+                            <div className="flex lg-max:flex-col whitespace-nowrap flex-wrap min-w-0 gap-8 lg:justify-between flex-1">
+                              <div className="text-xs font-medium text-black-alpha-72 transition-all group-hover:text-accent-black relative">
+                                Extend brand styles
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex justify-end">
+                            <button
+                              className="transition-all relative rounded-full group bg-black-alpha-10"
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setExtendBrandStyles(!extendBrandStyles);
+                              }}
+                              style={{
+                                width: '50px',
+                                height: '20px',
+                                boxShadow: 'rgba(0, 0, 0, 0.02) 0px 6px 12px 0px inset, rgba(0, 0, 0, 0.02) 0px 0.75px 0.75px 0px inset, rgba(0, 0, 0, 0.04) 0px 0.25px 0.25px 0px inset'
+                              }}
+                            >
+                              <div
+                                className={`overlay transition-opacity ${extendBrandStyles ? 'opacity-100' : 'opacity-0'}`}
+                                style={{ background: 'color(display-p3 0.9059 0.3294 0.0784)', backgroundColor: '#FA4500' }}
+                              />
+                              <div
+                                className="top-[2px] left-[2px] transition-all absolute rounded-full bg-accent-white"
+                                style={{
+                                  width: '28px',
+                                  height: '16px',
+                                  boxShadow: 'rgba(0, 0, 0, 0.06) 0px 6px 12px -3px, rgba(0, 0, 0, 0.06) 0px 3px 6px -1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0.5px 0.5px 0px',
+                                  transform: extendBrandStyles ? 'translateX(16px)' : 'none'
+                                }}
+                              />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Brand Extension Prompt - Show when toggle is enabled */}
+                      {extendBrandStyles && (
+                        <div className="pb-10 transition-all duration-300 opacity-100">
+                          <textarea
+                            value={additionalInstructions}
+                            onChange={(e) => setAdditionalInstructions(e.target.value)}
+                            placeholder="Describe the new functionality you want to build using this brand's styles..."
+                            className="w-full px-4 py-10 text-xs font-medium text-gray-700 bg-gray-50 rounded border border-gray-200 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500 placeholder:text-gray-400 min-h-[80px] resize-none"
+                          />
+                        </div>
+                      )}
+
+                      {/* Style Selector - Hide when brand extension mode is enabled */}
+                      {!extendBrandStyles && (
+                        <div className={`mb-2 transition-all duration-300 transform ${
+                          isValidUrl ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0'
+                        }`} style={{ transitionDelay: '100ms' }}>
+                          <div className="grid grid-cols-4 gap-2">
+                            {styles.map((style, index) => (
+                              <button
+                                key={style.id}
+                                onClick={() => setSelectedStyle(style.id)}
+                                className={`
+                                  ${selectedStyle === style.id
+                                    ? 'bg-heat-100 hover:bg-heat-200 flex items-center justify-center button relative text-label-medium button-primary group/button rounded-10 p-8 text-accent-white active:scale-[0.995] border-0'
+                                    : 'border-gray-200 hover:border-gray-300 bg-white text-gray-700 py-3.5 px-4 rounded text-xs font-medium border text-center'
+                                  }
+                                  transition-all
+                                  ${isValidUrl ? 'opacity-100' : 'opacity-0'}
+                                `}
+                                style={{
+                                  transitionDelay: `${150 + index * 30}ms`,
+                                  transition: 'all 0.3s ease-in-out'
+                                }}
+                              >
+                                {selectedStyle === style.id && (
+                                  <div className="button-background absolute inset-0 rounded-10 pointer-events-none" />
+                                )}
+                                <span className={selectedStyle === style.id ? 'relative' : ''}>
+                                  {style.name}
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Model Selector Dropdown and Additional Instructions */}
+                      <div className={`flex items-center gap-3 mt-2 pb-4 transition-all duration-300 transform ${
+                        isValidUrl ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0'
+                      }`} style={{ transitionDelay: '400ms' }}>
+                        {/* Model Dropdown */}
+                        <select
+                          value={selectedModel}
+                          onChange={(e) => setSelectedModel(e.target.value)}
+                          className={`px-3 py-2.5 text-xs font-medium text-gray-700 bg-white rounded border border-gray-200 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500 ${extendBrandStyles ? 'flex-1' : ''}`}
+                        >
+                          {models.map((model) => (
+                            <option key={model.id} value={model.id}>
+                              {model.name}
+                            </option>
+                          ))}
+                        </select>
+
+                        {/* Additional Instructions - Hidden when extend brand styles is enabled */}
+                        {!extendBrandStyles && (
+                          <input
+                            type="text"
+                            className="flex-1 px-3 py-2.5 text-xs font-medium text-gray-700 bg-gray-50 rounded border border-gray-200 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500 placeholder:text-gray-400"
+                            placeholder="Additional instructions (optional)"
+                            onChange={(e) => sessionStorage.setItem('additionalInstructions', e.target.value)}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                </div>
+
+                <div className="h-248 top-84 cw-768 pointer-events-none absolute overflow-clip -z-10">
+                  <AsciiExplosion className="-top-200" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Full-width oval carousel section */}
+        {showSearchTiles && hasSearched && (
+          <section className={`carousel-section relative w-full overflow-hidden mt-32 mb-32 transition-opacity duration-500 ${
+            isFadingOut ? 'opacity-0' : 'opacity-100'
+          }`}>
+            <div className="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-white rounded-[50%] transform scale-x-150 -translate-y-24" />
+            
+            {isSearching ? (
+              // Loading state with animated scrolling skeletons
+              <div className="relative h-[250px] overflow-hidden">
+                {/* Edge fade overlays */}
+                <div className="absolute left-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to right, white 0%, white 20%, transparent 100%)'}} />
+                <div className="absolute right-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to left, white 0%, white 20%, transparent 100%)'}} />
+                
+                <div className="carousel-container absolute left-0 flex gap-12 py-4">
+                  {/* Duplicate skeleton tiles for continuous scroll */}
+                  {[...Array(10), ...Array(10)].map((_, index) => (
+                    <div
+                      key={`loading-${index}`}
+                      className="flex-shrink-0 w-[400px] h-[240px] rounded-lg overflow-hidden border-2 border-gray-200/30 bg-white relative"
+                    >
+                      <div className="absolute inset-0 skeleton-shimmer">
+                        <div className="absolute inset-0 bg-gradient-to-r from-gray-100 via-gray-50 to-gray-100 skeleton-gradient" />
+                      </div>
+                      
+                      {/* Fake browser UI - 5x bigger */}
+                      <div className="absolute top-0 left-0 right-0 h-40 bg-gray-100 border-b border-gray-200/50 flex items-center px-6 gap-4">
+                        <div className="flex gap-3">
+                          <div className="w-5 h-5 rounded-full bg-gray-300 animate-pulse" />
+                          <div className="w-5 h-5 rounded-full bg-gray-300 animate-pulse" style={{ animationDelay: '0.1s' }} />
+                          <div className="w-5 h-5 rounded-full bg-gray-300 animate-pulse" style={{ animationDelay: '0.2s' }} />
+                        </div>
+                        <div className="flex-1 h-8 bg-gray-200 rounded-md mx-6 animate-pulse" />
+                      </div>
+                      
+                      {/* Content skeleton - positioned just below nav bar */}
+                      <div className="absolute top-44 left-4 right-4">
+                        <div className="h-3 bg-gray-200 rounded w-3/4 mb-2 animate-pulse" />
+                        <div className="h-3 bg-gray-150 rounded w-1/2 mb-2 animate-pulse" style={{ animationDelay: '0.2s' }} />
+                        <div className="h-3 bg-gray-150 rounded w-2/3 animate-pulse" style={{ animationDelay: '0.3s' }} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : searchResults.length > 0 ? (
+              // Actual results
+              <div className="relative h-[250px] overflow-hidden">
+                {/* Edge fade overlays */}
+                <div className="absolute left-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to right, white 0%, white 20%, transparent 100%)'}} />
+                <div className="absolute right-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to left, white 0%, white 20%, transparent 100%)'}} />
+                
+                <div className="carousel-container absolute left-0 flex gap-12 py-4">
+                  {/* Duplicate results for infinite scroll */}
+                  {[...searchResults, ...searchResults].map((result, index) => (
+                    <div
+                      key={`${result.url}-${index}`}
+                      className="group flex-shrink-0 w-[400px] h-[240px] rounded-lg overflow-hidden border-2 border-gray-200/50 transition-all duration-300 hover:shadow-2xl bg-white relative"
+                      onMouseLeave={() => {
+                        if (showInstructionsForIndex === index) {
+                          setShowInstructionsForIndex(null);
+                          setAdditionalInstructions('');
+                        }
+                      }}
+                    >
+                      {/* Hover overlay with clone buttons or instructions input */}
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex flex-col items-center justify-center p-6">
+                        {showInstructionsForIndex === index ? (
+                          /* Instructions input view - matching main input style exactly */
+                          <div className="w-full max-w-[380px]">
+                            <div className="bg-white rounded-20" style={{
+                              boxShadow: "0px 0px 44px 0px rgba(0, 0, 0, 0.02), 0px 88px 56px -20px rgba(0, 0, 0, 0.03), 0px 56px 56px -20px rgba(0, 0, 0, 0.02), 0px 32px 32px -20px rgba(0, 0, 0, 0.03), 0px 16px 24px -12px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.05)"
+                            }}>
+                              {/* Input area matching main search */}
+                              <div className="p-16 flex gap-12 items-start w-full relative">
+                                {/* Instructions icon */}
+                                <div className="mt-2 flex-shrink-0">
+                                  <svg 
+                                    width="20" 
+                                    height="20" 
+                                    viewBox="0 0 20 20" 
+                                    fill="none" 
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    className="opacity-40"
+                                  >
+                                    <path d="M5 5H15M5 10H15M5 15H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                                  </svg>
+                                </div>
+                                
+                                <textarea
+                                  value={additionalInstructions}
+                                  onChange={(e) => setAdditionalInstructions(e.target.value)}
+                                  placeholder="Describe your customizations..."
+                                  className="flex-1 bg-transparent text-body-input text-accent-black placeholder:text-black-alpha-48 focus:outline-none focus:ring-0 focus:border-transparent resize-none min-h-[60px]"
+                                  autoFocus
+                                  onClick={(e) => e.stopPropagation()}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Escape') {
+                                      e.stopPropagation();
+                                      setShowInstructionsForIndex(null);
+                                      setAdditionalInstructions('');
+                                    }
+                                  }}
+                                />
+                              </div>
+                              
+                              {/* Divider */}
+                              <div className="border-t border-black-alpha-5" />
+                              
+                              {/* Buttons area matching main style */}
+                              <div className="p-10 flex justify-between items-center">
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    setShowInstructionsForIndex(null);
+                                    setAdditionalInstructions('');
+                                  }}
+                                  className="button relative rounded-10 px-8 py-8 text-label-medium font-medium flex items-center justify-center bg-black-alpha-4 hover:bg-black-alpha-6 text-black-alpha-48 active:scale-[0.995] transition-all"
+                                >
+                                  <svg 
+                                    width="20" 
+                                    height="20" 
+                                    viewBox="0 0 20 20" 
+                                    fill="none" 
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path d="M12 5L7 10L12 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                                  </svg>
+                                </button>
+                                
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    if (additionalInstructions.trim()) {
+                                      sessionStorage.setItem('additionalInstructions', additionalInstructions);
+                                      handleSubmit(result);
+                                    }
+                                  }}
+                                  disabled={!additionalInstructions.trim()}
+                                  className={`
+                                    button relative rounded-10 px-8 py-8 text-label-medium font-medium
+                                    flex items-center justify-center gap-6
+                                    ${additionalInstructions.trim() 
+                                      ? 'button-primary text-accent-white active:scale-[0.995]' 
+                                      : 'bg-black-alpha-4 text-black-alpha-24 cursor-not-allowed'
+                                    }
+                                  `}
+                                >
+                                  {additionalInstructions.trim() && <div className="button-background absolute inset-0 rounded-10 pointer-events-none" />}
+                                  <span className="px-6 relative">Apply & Clone</span>
+                                  <svg 
+                                    width="20" 
+                                    height="20" 
+                                    viewBox="0 0 20 20" 
+                                    fill="none" 
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    className="relative"
+                                  >
+                                    <path d="M11.6667 4.79163L16.875 9.99994M16.875 9.99994L11.6667 15.2083M16.875 9.99994H3.125" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"/>
+                                  </svg>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        ) : (
+                          /* Default buttons view */
+                          <>
+                            <div className="text-white text-center mb-3">
+                              <p className="text-base font-semibold mb-0.5">{result.title}</p>
+                              <p className="text-[11px] opacity-80">Choose how to clone this site</p>
+                            </div>
+                            
+                            <div className="flex gap-3 justify-center">
+                              {/* Instant Clone Button - Orange/Heat style */}
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleSubmit(result);
+                                }}
+                                className="bg-orange-500 hover:bg-orange-600 flex items-center justify-center button relative text-label-medium button-primary group/button rounded-10 p-8 gap-2 text-white active:scale-[0.995]"
+                              >
+                                <div className="button-background absolute inset-0 rounded-10 pointer-events-none" />
+                                <svg 
+                                  width="20" 
+                                  height="20" 
+                                  viewBox="0 0 20 20" 
+                                  fill="none" 
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  className="relative"
+                                >
+                                  <path d="M11.6667 4.79163L16.875 9.99994M16.875 9.99994L11.6667 15.2083M16.875 9.99994H3.125" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"/>
+                                </svg>
+                                <span className="px-6 relative">Instant Clone</span>
+                              </button>
+                              
+                              {/* Instructions Button - Gray style */}
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setShowInstructionsForIndex(index);
+                                  setAdditionalInstructions('');
+                                }}
+                                className="bg-gray-100 hover:bg-gray-200 flex items-center justify-center button relative text-label-medium rounded-10 p-8 gap-2 text-gray-700 active:scale-[0.995]"
+                              >
+                                <svg 
+                                  width="20" 
+                                  height="20" 
+                                  viewBox="0 0 20 20" 
+                                  fill="none" 
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  className="opacity-60"
+                                >
+                                  <path d="M5 5H15M5 10H15M5 15H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                                  <path d="M14 14L16 16L14 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                                </svg>
+                                <span className="px-6">Add Instructions</span>
+                              </button>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                      
+                      {result.screenshot ? (
+                        <div className="relative w-full h-full">
+                          <Image 
+                            src={result.screenshot} 
+                            alt={result.title}
+                            fill
+                            className="object-cover object-top"
+                            loading="lazy"
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-50 flex items-center justify-center">
+                          <div className="text-center">
+                            <div className="w-16 h-16 rounded-full bg-gray-200 mx-auto mb-3 flex items-center justify-center">
+                              <svg 
+                                width="32" 
+                                height="32" 
+                                viewBox="0 0 24 24" 
+                                fill="none" 
+                                xmlns="http://www.w3.org/2000/svg"
+                                className="text-gray-400"
+                              >
+                                <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5"/>
+                                <path d="M3 9H21" stroke="currentColor" strokeWidth="1.5"/>
+                                <circle cx="6" cy="6" r="1" fill="currentColor"/>
+                                <circle cx="9" cy="6" r="1" fill="currentColor"/>
+                                <circle cx="12" cy="6" r="1" fill="currentColor"/>
+                              </svg>
+                            </div>
+                            <p className="text-gray-500 text-sm font-medium">{result.title}</p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              // No results state
+              <div className="relative h-[250px] flex items-center justify-center">
+                <div className="text-center">
+                  <div className="mb-4">
+                    <svg className="w-16 h-16 mx-auto text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                  </div>
+                  <p className="text-gray-500 text-lg">No results found</p>
+                  <p className="text-gray-400 text-sm mt-1">Try a different search term</p>
+                </div>
+              </div>
+            )}
+          </section>
+        )}
+
+      </div>
+
+      <style jsx>{`
+        @keyframes infiniteScroll {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(-50%);
+          }
+        }
+
+        @keyframes shimmer {
+          0% {
+            transform: translateX(-100%);
+          }
+          100% {
+            transform: translateX(100%);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .carousel-container {
+          animation: infiniteScroll 30s linear infinite;
+        }
+
+        .carousel-container:hover {
+          animation-play-state: paused;
+        }
+
+        .skeleton-shimmer {
+          position: relative;
+          overflow: hidden;
+        }
+
+        .skeleton-gradient {
+          animation: shimmer 2s infinite;
+        }
+      `}</style>
+    </HeaderProvider>
+  );
+}

app/text-generation/page.tsx

@@ -0,0 +1,11 @@
+import TextGeneration from '@/components/app/TextGeneration';
+
+export default function TextGenerationPage() {
+  return (
+    <main>
+      <div className="md:px-8 flex flex-col items-center gap-4">
+        <TextGeneration />
+      </div>
+    </main>
+  );
+}

atoms/sheets.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isMobileSheetOpenAtom = atom(false);

colors.json

@@ -0,0 +1,182 @@
+{
+  "heat-4": {
+    "hex": "fa5d190a",
+    "p3": "0.980392 0.364706 0.098039 / 0.039216"
+  },
+  "heat-8": {
+    "hex": "fa5d1914",
+    "p3": "0.980392 0.364706 0.098039 / 0.078431"
+  },
+  "heat-12": {
+    "hex": "fa5d191f",
+    "p3": "0.980392 0.364706 0.098039 / 0.121569"
+  },
+  "heat-16": {
+    "hex": "fa5d1929",
+    "p3": "0.980392 0.364706 0.098039 / 0.160784"
+  },
+  "heat-20": {
+    "hex": "fa5d1933",
+    "p3": "0.980392 0.364706 0.098039 / 0.200000"
+  },
+  "heat-40": {
+    "hex": "fa5d1966",
+    "p3": "0.980392 0.364706 0.098039 / 0.400000"
+  },
+  "heat-90": {
+    "hex": "fa5d19e6",
+    "p3": "0.980392 0.364706 0.098039 / 0.900000"
+  },
+  "heat-100": {
+    "hex": "fa5d19ff",
+    "p3": "0.980392 0.364706 0.098039 / 1.000000"
+  },
+  "accent-black": {
+    "hex": "262626ff",
+    "p3": "0.149020 0.149020 0.149020 / 1.000000"
+  },
+  "accent-white": {
+    "hex": "ffffffff",
+    "p3": "1.000000 1.000000 1.000000 / 1.000000"
+  },
+  "accent-amethyst": {
+    "hex": "9061ffff",
+    "p3": "0.564706 0.380392 1.000000 / 1.000000"
+  },
+  "accent-bluetron": {
+    "hex": "2a6dfbff",
+    "p3": "0.164706 0.427451 0.984314 / 1.000000"
+  },
+  "accent-crimson": {
+    "hex": "eb3424ff",
+    "p3": "0.921569 0.203922 0.141176 / 1.000000"
+  },
+  "accent-forest": {
+    "hex": "42c366ff",
+    "p3": "0.258824 0.764706 0.400000 / 1.000000"
+  },
+  "accent-honey": {
+    "hex": "ecb730ff",
+    "p3": "0.925490 0.717647 0.188235 / 1.000000"
+  },
+  "black-alpha-1": {
+    "hex": "00000003",
+    "p3": "0.000000 0.000000 0.000000 / 0.011765"
+  },
+  "black-alpha-2": {
+    "hex": "00000005",
+    "p3": "0.000000 0.000000 0.000000 / 0.019608"
+  },
+  "black-alpha-3": {
+    "hex": "00000008",
+    "p3": "0.000000 0.000000 0.000000 / 0.031373"
+  },
+  "black-alpha-4": {
+    "hex": "0000000a",
+    "p3": "0.000000 0.000000 0.000000 / 0.039216"
+  },
+  "black-alpha-5": {
+    "hex": "0000000d",
+    "p3": "0.000000 0.000000 0.000000 / 0.050980"
+  },
+  "black-alpha-6": {
+    "hex": "0000000f",
+    "p3": "0.000000 0.000000 0.000000 / 0.058824"
+  },
+  "black-alpha-7": {
+    "hex": "00000012",
+    "p3": "0.000000 0.000000 0.000000 / 0.070588"
+  },
+  "black-alpha-8": {
+    "hex": "00000014",
+    "p3": "0.000000 0.000000 0.000000 / 0.078431"
+  },
+  "black-alpha-10": {
+    "hex": "0000001a",
+    "p3": "0.000000 0.000000 0.000000 / 0.101961"
+  },
+  "black-alpha-12": {
+    "hex": "0000001f",
+    "p3": "0.000000 0.000000 0.000000 / 0.121569"
+  },
+  "black-alpha-16": {
+    "hex": "00000029",
+    "p3": "0.000000 0.000000 0.000000 / 0.160784"
+  },
+  "black-alpha-20": {
+    "hex": "00000033",
+    "p3": "0.000000 0.000000 0.000000 / 0.200000"
+  },
+  "black-alpha-24": {
+    "hex": "0000003d",
+    "p3": "0.000000 0.000000 0.000000 / 0.239216"
+  },
+  "black-alpha-32": {
+    "hex": "26262652",
+    "p3": "0.149020 0.149020 0.149020 / 0.321569"
+  },
+  "black-alpha-40": {
+    "hex": "26262666",
+    "p3": "0.149020 0.149020 0.149020 / 0.400000"
+  },
+  "black-alpha-48": {
+    "hex": "2626267a",
+    "p3": "0.149020 0.149020 0.149020 / 0.478431"
+  },
+  "black-alpha-56": {
+    "hex": "2626268f",
+    "p3": "0.149020 0.149020 0.149020 / 0.560784"
+  },
+  "black-alpha-64": {
+    "hex": "262626a3",
+    "p3": "0.149020 0.149020 0.149020 / 0.639216"
+  },
+  "black-alpha-72": {
+    "hex": "262626b8",
+    "p3": "0.149020 0.149020 0.149020 / 0.721569"
+  },
+  "black-alpha-88": {
+    "hex": "262626e0",
+    "p3": "0.149020 0.149020 0.149020 / 0.878431"
+  },
+  "white-alpha-56": {
+    "hex": "ffffff8f",
+    "p3": "1.000000 1.000000 1.000000 / 0.560784"
+  },
+  "white-alpha-72": {
+    "hex": "ffffffb8",
+    "p3": "1.000000 1.000000 1.000000 / 0.721569"
+  },
+  "border-faint": {
+    "hex": "edededff",
+    "p3": "0.929412 0.929412 0.929412 / 1.000000"
+  },
+  "border-muted": {
+    "hex": "e8e8e8ff",
+    "p3": "0.909804 0.909804 0.909804 / 1.000000"
+  },
+  "border-loud": {
+    "hex": "e6e6e6ff",
+    "p3": "0.901961 0.901961 0.901961 / 1.000000"
+  },
+  "illustrations-faint": {
+    "hex": "edededff",
+    "p3": "0.929412 0.929412 0.929412 / 1.000000"
+  },
+  "illustrations-muted": {
+    "hex": "e6e6e6ff",
+    "p3": "0.901961 0.901961 0.901961 / 1.000000"
+  },
+  "illustrations-default": {
+    "hex": "dbdbdbff",
+    "p3": "0.858824 0.858824 0.858824 / 1.000000"
+  },
+  "background-lighter": {
+    "hex": "fbfbfbff",
+    "p3": "0.984314 0.984314 0.984314 / 1.000000"
+  },
+  "background-base": {
+    "hex": "f9f9f9ff",
+    "p3": "0.976471 0.976471 0.976471 / 1.000000"
+  }
+}

components/CodeApplicationProgress.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface CodeApplicationState {
+  stage: 'analyzing' | 'installing' | 'applying' | 'complete' | null;
+  packages?: string[];
+  installedPackages?: string[];
+  filesGenerated?: string[];
+  message?: string;
+}
+
+interface CodeApplicationProgressProps {
+  state: CodeApplicationState;
+}
+
+export default function CodeApplicationProgress({ state }: CodeApplicationProgressProps) {
+  if (!state.stage || state.stage === 'complete') return null;
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key="loading"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -10 }}
+        transition={{ duration: 0.3 }}
+        className="inline-block bg-gray-100 rounded-[10px] p-3 mt-2"
+      >
+        <div className="flex items-center gap-3">
+          {/* Rotating loading indicator */}
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+            className="w-4 h-4"
+          >
+            <svg className="w-full h-full" viewBox="0 0 24 24" fill="none">
+              <circle 
+                cx="12" 
+                cy="12" 
+                r="10" 
+                stroke="currentColor" 
+                strokeWidth="2" 
+                strokeLinecap="round"
+                strokeDasharray="31.416"
+                strokeDashoffset="10"
+                className="text-gray-700"
+              />
+            </svg>
+          </motion.div>
+
+          {/* Simple loading text */}
+          <div className="text-sm font-medium text-gray-700">
+            Applying to sandbox...
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

components/FirecrawlIcon.tsx

@@ -0,0 +1,15 @@
+export default function FirecrawlIcon({ className = "w-5 h-5" }: { className?: string }) {
+  return (
+    <svg 
+      className={className}
+      fill="none" 
+      viewBox="0 0 20 20" 
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.7605 6.61389C13.138 6.79867 12.6687 7.21667 12.3251 7.67073C12.2513 7.76819 12.0975 7.69495 12.1268 7.57552C12.7848 4.86978 11.9155 2.6209 9.20582 1.51393C9.06836 1.4576 8.92527 1.58097 8.96132 1.72519C10.1939 6.67417 5.00941 6.25673 5.66459 11.8671C5.67585 11.9634 5.56769 12.0293 5.48882 11.973C5.2432 11.7967 4.96885 11.4288 4.78069 11.1702C4.72548 11.0942 4.60605 11.1156 4.5807 11.2063C4.43085 11.7482 4.35986 12.2586 4.35986 12.7656C4.35986 14.7373 5.37333 16.473 6.90734 17.4791C6.99522 17.5366 7.10789 17.4543 7.07804 17.3535C6.99917 17.0887 6.95466 16.8093 6.95128 16.5203C6.95128 16.3429 6.96255 16.1615 6.99015 15.9925C7.05438 15.5677 7.20197 15.1632 7.44985 14.7948C8.29995 13.5188 10.0041 12.2862 9.73199 10.6125C9.71453 10.5066 9.83959 10.4368 9.91846 10.5094C11.119 11.6063 11.3567 13.0817 11.1595 14.405C11.1426 14.5199 11.2868 14.5813 11.3595 14.4912C11.5432 14.2613 11.7674 14.0596 12.0113 13.9081C12.0722 13.8703 12.1533 13.8991 12.1764 13.9667C12.3121 14.3616 12.5138 14.7323 12.7042 15.1029C12.9318 15.5485 13.0529 16.0573 13.0338 16.5958C13.0242 16.8578 12.9808 17.1113 12.9082 17.3524C12.8772 17.4543 12.9887 17.5394 13.0783 17.4808C14.6134 16.4747 15.6275 14.739 15.6275 12.7662C15.6275 12.0806 15.5075 11.4085 15.2804 10.7787C14.8044 9.45766 13.5966 8.46561 13.9019 6.74403C13.9166 6.66178 13.8405 6.59023 13.7605 6.61389Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}