Fix build errors

Author: Juan Castaño

app/api/generate/route.ts

@@ -100,27 +100,27 @@ export async function POST(request: NextRequest) {
         }
 
         // Repair the generated code using Benchify's API
-        // const { data } = await benchify.fixer.run({
-        //     files: filesToSandbox.map(file => ({
-        //         path: file.path,
-        //         contents: file.content
-        //     }))
-        // });
+        const { data } = await benchify.fixer.run({
+            files: filesToSandbox.map(file => ({
+                path: file.path,
+                contents: file.content
+            }))
+        });
 
         let repairedFiles = filesToSandbox;
-        // if (data) {
-        //     const { success, diff } = data;
-
-        //     if (success && diff) {
-        //         repairedFiles = filesToSandbox.map(file => {
-        //             const patchResult = applyPatch(file.content, diff);
-        //             return {
-        //                 ...file,
-        //                 content: typeof patchResult === 'string' ? patchResult : file.content
-        //             };
-        //         });
-        //     }
-        // }
+        if (data) {
+            const { success, diff } = data;
+
+            if (success && diff) {
+                repairedFiles = filesToSandbox.map(file => {
+                    const patchResult = applyPatch(file.content, diff);
+                    return {
+                        ...file,
+                        content: typeof patchResult === 'string' ? patchResult : file.content
+                    };
+                });
+            }
+        }
 
         const sandboxResult = await createSandbox({ files: repairedFiles });
 

components/ui-builder/code-editor.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { benchifyFileSchema } from "@/lib/schemas";
 import { z } from "zod";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -35,7 +35,7 @@ export function CodeEditor({ files = [] }: CodeEditorProps) {
     const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
 
     // Build file tree structure (pure function, no side effects)
-    const buildFileTree = (files: Array<{ path: string; content: string }>): { tree: FileNode[], allFolders: string[] } => {
+    const buildFileTree = useCallback((files: Array<{ path: string; content: string }>): { tree: FileNode[], allFolders: string[] } => {
         const root: FileNode[] = [];
         const folderMap = new Map<string, FileNode>();
         const allFolders: string[] = [];
@@ -81,7 +81,7 @@ export function CodeEditor({ files = [] }: CodeEditorProps) {
         });
 
         return { tree: root, allFolders };
-    };
+    }, []);
 
     const { tree: fileTree, allFolders } = buildFileTree(files);
     const selectedFile = files.find(f => f.path === selectedFilePath);
@@ -91,14 +91,14 @@ export function CodeEditor({ files = [] }: CodeEditorProps) {
         if (allFolders.length > 0) {
             setOpenFolders(new Set(allFolders));
         }
-    }, [files.length]); // Only trigger when files array changes
+    }, [allFolders]);
 
     // Auto-select first file if none selected (only once when files change)
     useEffect(() => {
         if (!selectedFilePath && files.length > 0) {
             setSelectedFilePath(files[0].path);
         }
-    }, [files.length, selectedFilePath]); // Dependency on selectedFilePath prevents loops
+    }, [files, selectedFilePath]);
 
     // Get file icon based on extension
     const getFileIcon = (path: string) => {

components/ui-builder/error-display.tsx

@@ -17,10 +17,20 @@ interface BuildError {
     column?: number;
 }
 
+interface FixResult {
+    originalFiles: z.infer<typeof benchifyFileSchema>;
+    repairedFiles: z.infer<typeof benchifyFileSchema>;
+    buildOutput: string;
+    previewUrl: string;
+    buildErrors?: BuildError[];
+    hasErrors: boolean;
+    editInstruction?: string;
+}
+
 interface ErrorDisplayProps {
     errors: BuildError[];
     currentFiles?: z.infer<typeof benchifyFileSchema>;
-    onFixComplete?: (result: any) => void;
+    onFixComplete?: (result: FixResult) => void;
 }
 
 export function ErrorDisplay({ errors, currentFiles, onFixComplete }: ErrorDisplayProps) {
@@ -196,7 +206,7 @@ Please make the minimal changes necessary to resolve these errors while maintain
                         <li>• Verify that all props are properly typed</li>
                         <li>• Make sure all dependencies are correctly installed</li>
                         <li>• Try regenerating the component with more specific requirements</li>
-                        {currentFiles && <li>• Use the "Fix with AI" button above for automatic error resolution</li>}
+                        {currentFiles && <li>• Use the &quot;Fix with AI&quot; button above for automatic error resolution</li>}
                     </ul>
                 </div>
             </div>

components/ui-builder/preview-card.tsx

@@ -45,14 +45,24 @@ interface BuildError {
     column?: number;
 }
 
+interface FixResult {
+    originalFiles: z.infer<typeof benchifyFileSchema>;
+    repairedFiles: z.infer<typeof benchifyFileSchema>;
+    buildOutput: string;
+    previewUrl: string;
+    buildErrors?: BuildError[];
+    hasErrors: boolean;
+    editInstruction?: string;
+}
+
 interface PreviewCardProps {
     previewUrl?: string;
     code: z.infer<typeof benchifyFileSchema>;
     isGenerating?: boolean;
     prompt?: string;
     buildErrors?: BuildError[];
     hasErrors?: boolean;
-    onFixComplete?: (result: any) => void;
+    onFixComplete?: (result: FixResult) => void;
 }
 
 export function PreviewCard({
@@ -110,7 +120,7 @@ export function PreviewCard({
                                 <CardHeader>
                                     <CardTitle>Building Your UI</CardTitle>
                                     <p className="text-sm text-muted-foreground mt-2">
-                                        "{prompt.substring(0, 100)}{prompt.length > 100 ? '...' : ''}"
+                                        &quot;{prompt.substring(0, 100)}{prompt.length > 100 ? '...' : ''}&quot;
                                     </p>
                                 </CardHeader>
                                 <CardContent className="space-y-4">