Upload folder using huggingface_hub

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

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { streamText } from 'ai';
+import { streamText, generateText } 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';
@@ -1188,579 +1188,690 @@ MORPH FAST APPLY MODE (EDIT-ONLY):
         console.log(`[generate-ai-code-stream] Using provider for model: ${actualModel}`);
         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.`
+        if (isEdit) {
+            // 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;
             }
-          ],
-          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'
+            
+            // 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);
+                
+                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));
+                  
+                } else {
+                  // Final error, send to user
+                  await sendProgress({ 
+                    type: 'error', 
+                    message: `Failed to initialize ${isGoogle ? 'Gemini' : isAnthropic ? 'Claude' : isOpenAI ? 'GPT-5' : 'AI'} 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;
+                }
+              }
             }
-          };
-        }
-        
-        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);
             
-            const isRetryableError = streamError.message?.includes('Service unavailable') || 
-                                    streamError.message?.includes('rate limit') ||
-                                    streamError.message?.includes('timeout');
+            // 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 = '';
             
-            if (retryCount < maxRetries && isRetryableError) {
-              retryCount++;
-              console.log(`[generate-ai-code-stream] Retrying in ${retryCount * 2} seconds...`);
+            // 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;
               
-              // Send progress update about retry
-              await sendProgress({ 
-                type: 'info', 
-                message: `Service temporarily unavailable, retrying (attempt ${retryCount + 1}/${maxRetries + 1})...` 
-              });
+              // Combine with buffer for tag detection
+              const searchText = tagBuffer + text;
               
-              // Wait before retry with exponential backoff
-              await new Promise(resolve => setTimeout(resolve, retryCount * 2000));
+              // Log streaming chunks to console
+              process.stdout.write(text);
               
-            } else {
-              // Final error, send to user
+              // 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: 'error', 
-                message: `Failed to initialize ${isGoogle ? 'Gemini' : isAnthropic ? 'Claude' : isOpenAI ? 'GPT-5' : 'AI'} streaming: ${streamError.message}` 
+                type: 'stream', 
+                text: text,
+                raw: true 
               });
               
-              // 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.' 
-                });
+              // Debug: Log every 100 characters streamed
+              if (generatedCode.length % 100 < text.length) {
+                console.log(`[generate-ai-code-stream] Streamed ${generatedCode.length} chars`);
               }
               
-              throw streamError;
+              // 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 = '';
+              }
             }
-          }
-        }
-        
-        // 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) {
+            
+            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()
               });
-              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}`
-                });
+            // 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}`
+                    });
+                  }
+                }
               }
-              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
-              });
+            // 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;
             }
             
-            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);
+            // Parse files and send progress for each
+            const fileRegex = /<file path="([^"]+)">([\s\S]*?)<\/file>/g;
+            const files = [];
+            let match;
             
-            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];
+            while ((match = fileRegex.exec(generatedCode)) !== null) {
+              const filePath = match[1];
+              const content = match[2].trim();
+              files.push({ path: filePath, content });
               
-              if (!packages.includes(packageName)) {
-                packages.push(packageName);
+              // 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}`
+                    });
+                  }
+                }
               }
-            }
-          }
-          
-          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}`);
+              
+              // 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: 'package', 
-                  name: pkg,
-                  message: `Package detected from imports: ${pkg}`
+                  type: 'app', 
+                  message: 'Generated main App.jsx',
+                  path: filePath
                 });
               }
             }
-          }
-          
-          // 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];
+            // Extract explanation
+            const explanationMatch = generatedCode.match(/<explanation>([\s\S]*?)<\/explanation>/);
+            const explanation = explanationMatch ? explanationMatch[1].trim() : 'Code generated successfully!';
             
-            // 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?)$/);
+            // Validate generated code for truncation issues
+            const truncationWarnings: string[] = [];
             
-            // Check for unmatched braces specifically
-            const openBraceCount = (content.match(/{/g) || []).length;
-            const closeBraceCount = (content.match(/}/g) || []).length;
-            const hasUnmatchedBraces = Math.abs(openBraceCount - closeBraceCount) > 1;
+            // Skip ellipsis checking entirely - too many false positives with spread operators, loading text, etc.
             
-            const isTruncated = (hasEllipsis && endsAbruptly) || 
-                               hasUnclosedTags || 
-                               (tooShort && !content.includes('export')) ||
-                               hasUnmatchedBraces;
+            // 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`);
+            }
             
-            if (isTruncated) {
-              truncatedFiles.push(filePath);
+            // 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`);
+                }
+              }
             }
-          }
-          
-          // 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) {
+            // 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: 'info',
-                message: `Completing ${filePath}...`
+                type: 'warning',
+                message: 'Detected incomplete code generation. Attempting to complete...',
+                warnings: truncationWarnings
               });
               
-              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}
+              // 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];
                 
-Provide the complete file content without any truncation. Include all necessary imports, complete all functions, and close all tags properly.`;
+                // 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?)$/);
                 
-                // Make a focused API call to complete this specific file
-                const { client: completionClient, actualModel: completionModelName } = getProviderForModel(model);
+                // 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 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
-                });
+                const isTruncated = (hasEllipsis && endsAbruptly) || 
+                                   hasUnclosedTags || 
+                                   (tooShort && !content.includes('export')) ||
+                                   hasUnmatchedBraces;
                 
-                // Get the full text from the stream
-                let completedContent = '';
-                for await (const chunk of completionResult.textStream) {
-                  completedContent += chunk;
+                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);
                 
-                // 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];
+                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
+                    const { client: completionClient, actualModel: completionModelName } = getProviderForModel(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.`
+                    });
                   }
                 }
                 
-                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);
+                // Clear the warnings after attempting fixes
+                truncationWarnings.length = 0;
                 await sendProgress({
-                  type: 'warning',
-                  message: `Could not auto-complete ${filePath}. Manual review may be needed.`
+                  type: 'info',
+                  message: 'Truncation recovery complete'
                 });
               }
             }
             
-            // 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
             });
-          }
-        }
-        
-        // 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
+            
+            // 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);
+            }
+        } else {
+            // New logic for initial generation (non-edit mode)
+            await sendProgress({ type: 'status', message: 'Creating file generation plan...' });
+            const planPrompt = `Based on the user's request for a new web application, provide a list of files to create.
+User Request: "${prompt}"
+
+Respond ONLY with a JSON array of strings, where each string is a file path.
+Example: ["src/index.css", "src/App.jsx", "src/components/Header.jsx", "src/components/Hero.jsx", "src/components/Footer.jsx"]`;
+
+            const { text: filePlanJson } = await generateText({
+                model: modelProvider(actualModel),
+                system: "You are a senior software architect. Your task is to plan the file structure for a new React application based on a user's request. You only respond with a JSON array of file paths.",
+                prompt: planPrompt,
+                temperature: 0.2, // Low temp for planning
+            });
+
+            let filePlan: string[];
+            try {
+                // Attempt to parse the JSON. Handle cases where the AI might return markdown
+                const cleanedJson = filePlanJson.replace(/```json\n|```/g, '').trim();
+                filePlan = JSON.parse(cleanedJson);
+                console.log('[generate-ai-code-stream] Parsed file plan:', filePlan);
+            } catch (e) {
+                console.error("Failed to parse file plan:", filePlanJson);
+                await sendProgress({ type: 'error', message: 'Failed to create a file generation plan. The AI returned an invalid format.' });
+                throw new Error("Invalid file plan format");
+            }
+
+            await sendProgress({ type: 'plan', files: filePlan });
+
+            let generatedCode = '';
+            let componentCount = 0;
+            const generatedFilesContent: { [key: string]: string } = {};
+
+            for (const filePath of filePlan) {
+                await sendProgress({ type: 'status', message: `Generating ${filePath}...` });
+
+                // Accumulate context from previously generated files
+                let accumulatedContext = '';
+                if (Object.keys(generatedFilesContent).length > 0) {
+                    accumulatedContext += "\n\nPreviously generated files for context:\n";
+                    for (const [path, content] of Object.entries(generatedFilesContent)) {
+                        accumulatedContext += `<file path="${path}">\n${content}\n</file>\n`;
+                    }
+                }
+
+                const fileGenPrompt = `The overall user request is to build a new web application: "${prompt}".
+The full planned application file structure is: ${JSON.stringify(filePlan)}.
+${accumulatedContext}
+Your current task is to generate the complete, production-ready code for the following file ONLY:
+File: ${filePath}
+
+CRITICAL INSTRUCTIONS:
+1. Generate ONLY the code for the specified file path.
+2. The file must be complete, with all necessary imports and code.
+3. Do NOT include any explanations, markdown, or XML tags. Your entire response will be the content of this single file.
+4. Adhere to all the rules specified in the system prompt (Tailwind usage, no inline styles, etc.).
+5. Make sure you are generating code that aligns with the other files in the plan (e.g., if App.jsx imports Header.jsx, the Header.jsx you generate should be a valid React component).`;
+
+                let fileContent = '';
+                const fileResult = await streamText({
+                  model: modelProvider(actualModel),
+                  messages: [
+                      { role: 'system', content: systemPrompt },
+                      { role: 'user', content: fileGenPrompt }
+                  ],
+                  maxTokens: 4096, // Smaller token limit per file
+                  temperature: 0.7
+                });
+
+                const fileTagStart = `<file path="${filePath}">`;
+                generatedCode += fileTagStart;
+                await sendProgress({ type: 'stream', text: fileTagStart, raw: true });
+
+                for await (const textPart of fileResult.textStream) {
+                    fileContent += textPart;
+                    generatedCode += textPart;
+                    await sendProgress({ type: 'stream', text: textPart, raw: true });
+                }
+                generatedFilesContent[filePath] = fileContent;
+
+                const fileTagEnd = `</file>`;
+                generatedCode += fileTagEnd;
+                await sendProgress({ type: 'stream', text: fileTagEnd, raw: true });
+
+
+                if (filePath.includes('components/')) {
+                    componentCount++;
+                    const componentName = filePath.split('/').pop()?.replace('.jsx', '') || 'Component';
+                    await sendProgress({
+                        type: 'component',
+                        name: componentName,
+                        path: filePath,
+                        index: componentCount
+                    });
+                }
+            }
+
+            // Finalize
+            await sendProgress({
+                type: 'complete',
+                generatedCode,
+                explanation: 'Application generated successfully.',
+                files: filePlan.length,
+                components: componentCount,
+                model,
+                packagesToInstall: undefined,
+                warnings: undefined
             });
-          }
-          
-          // Update last updated timestamp
-          global.conversationState.lastUpdated = Date.now();
-          
-          console.log('[generate-ai-code-stream] Updated conversation history with edit:', editRecord);
         }
         
       } catch (error) {

upload_to_hf.py

@@ -0,0 +1,23 @@
+from huggingface_hub import HfApi
+import os
+
+# Get the Hugging Face token from the environment variable
+hf_token = os.environ.get("HF_TOKEN")
+if not hf_token:
+    raise ValueError("HF_TOKEN environment variable not set")
+
+repo_id = "Leon4gr45/openoperator"
+repo_type = "space"
+
+# Initialize the HfApi client
+api = HfApi(token=hf_token)
+
+# Upload the entire directory
+api.upload_folder(
+    folder_path=".",
+    repo_id=repo_id,
+    repo_type=repo_type,
+    ignore_patterns=[".git/*", "node_modules/*", ".next/*", "upload_to_hf.py"] # ignore some files
+)
+
+print("Files uploaded successfully.")