feat: add automatic error detection and fixing for preview

- Add error detection script that captures runtime, syntax, and resource errors in iframe
- Implement auto-fix UI with toggle button and attempt counter (max 3 attempts)
- Create error formatter to convert errors into AI-friendly prompts
- Add TypeScript types for preview errors
- Implement defensive resets to prevent stale error state
- Add proper error sanitization and logging controls
- Extract magic numbers to constants
- Fix infinite loop issue by always reporting error state

The feature detects JavaScript errors in the preview iframe and automatically
sends them to the AI for correction, with safety limits and user controls.

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

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

app/api/ask-ai/route.ts

@@ -14,6 +14,7 @@ import {
   SEARCH_START,
 } from "@/lib/prompts";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+import { createErrorFixPrompt } from "@/lib/error-formatter";
 
 const ipAddresses = new Map();
 
@@ -223,8 +224,15 @@ export async function PUT(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, html, previousPrompt, provider, selectedElementHtml, model } =
-    body;
+  const {
+    prompt,
+    html,
+    previousPrompt,
+    provider,
+    selectedElementHtml,
+    model,
+    errors,
+  } = body;
 
   if (!prompt || !html) {
     return NextResponse.json(
@@ -243,6 +251,16 @@ export async function PUT(request: NextRequest) {
     );
   }
 
+  if (process.env.NODE_ENV !== "production") {
+    // Sanitize error messages to prevent log injection
+    const errorCount = errors && Array.isArray(errors) ? errors.length : 0;
+    console.log(
+      `[PUT /api/ask-ai] Model: ${selectedModel.label}, Provider: ${provider}${
+        errorCount > 0 ? `, Fixing ${errorCount} errors` : ""
+      }`
+    );
+  }
+
   let token = userToken;
   let billTo: string | null = null;
 
@@ -311,7 +329,10 @@ export async function PUT(request: NextRequest) {
           },
           {
             role: "user",
-            content: prompt,
+            content:
+              errors && errors.length > 0
+                ? createErrorFixPrompt(errors, html)
+                : prompt,
           },
         ],
         ...(selectedProvider.id !== "sambanova"

components/editor/ask-ai/index.tsx

@@ -22,6 +22,23 @@ import { TooltipContent } from "@radix-ui/react-tooltip";
 import { SelectedHtmlElement } from "./selected-html-element";
 import { FollowUpTooltip } from "./follow-up-tooltip";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
+import {
+  areErrorsFixable,
+  deduplicateErrors,
+  createErrorFixPrompt,
+} from "@/lib/error-formatter";
+import { AlertCircle } from "lucide-react";
+import type { PreviewError } from "@/types/preview-error";
+import { MAX_AUTO_FIX_ATTEMPTS, AUTO_FIX_DELAY_MS } from "@/lib/constants";
+
+// Reset function for cleaning up state
+export function resetAutoFixState(
+  setAutoFixEnabled: (value: boolean) => void,
+  setFixAttempts: (value: number) => void,
+) {
+  setAutoFixEnabled(false);
+  setFixAttempts(0);
+}
 
 export function AskAI({
   html,
@@ -35,6 +52,7 @@ export function AskAI({
   setIsEditableModeEnabled,
   onNewPrompt,
   onSuccess,
+  previewErrors = [],
 }: {
   html: string;
   setHtml: (html: string) => void;
@@ -48,6 +66,7 @@ export function AskAI({
   setIsEditableModeEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   selectedElement?: HTMLElement | null;
   setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  previewErrors?: PreviewError[];
 }) {
   const refThink = useRef<HTMLDivElement | null>(null);
   const audio = useRef<HTMLAudioElement | null>(null);
@@ -66,14 +85,21 @@ export function AskAI({
   const [isThinking, setIsThinking] = useState(true);
   const [controller, setController] = useState<AbortController | null>(null);
   const [isFollowUp, setIsFollowUp] = useState(true);
+  const [autoFixEnabled, setAutoFixEnabled] = useLocalStorage(
+    "autoFixEnabled",
+    false,
+  );
+  const [fixAttempts, setFixAttempts] = useState(0);
+  const [isFixingErrors, setIsFixingErrors] = useState(false);
 
   const selectedModel = useMemo(() => {
     return MODELS.find((m: { value: string }) => m.value === model);
   }, [model]);
 
-  const callAi = async (redesignMarkdown?: string) => {
+  const callAi = async (redesignMarkdown?: string, errors?: PreviewError[]) => {
     if (isAiWorking) return;
-    if (!redesignMarkdown && !prompt.trim()) return;
+    if (!redesignMarkdown && !prompt.trim() && (!errors || errors.length === 0))
+      return;
     setisAiWorking(true);
     setProviderError("");
     setThink("");
@@ -95,12 +121,16 @@ export function AskAI({
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
           body: JSON.stringify({
-            prompt,
+            prompt:
+              errors && errors.length > 0
+                ? createErrorFixPrompt(errors, html)
+                : prompt,
             provider,
             previousPrompt,
             model,
             html,
             selectedElementHtml,
+            errors,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -129,7 +159,12 @@ export function AskAI({
           setPreviousPrompt(prompt);
           setPrompt("");
           setisAiWorking(false);
-          onSuccess(res.html, prompt, res.updatedLines);
+          setIsFixingErrors(false);
+          onSuccess(
+            res.html,
+            errors ? "Fixed errors automatically" : prompt,
+            res.updatedLines,
+          );
           if (audio.current) audio.current.play();
         }
       } else {
@@ -152,7 +187,7 @@ export function AskAI({
           const reader = request.body.getReader();
           const decoder = new TextDecoder("utf-8");
           const selectedModel = MODELS.find(
-            (m: { value: string }) => m.value === model
+            (m: { value: string }) => m.value === model,
           );
           let contentThink: string | undefined = undefined;
           const read = async () => {
@@ -181,6 +216,7 @@ export function AskAI({
               setPreviousPrompt(prompt);
               setPrompt("");
               setisAiWorking(false);
+              setIsFixingErrors(false);
               setHasAsked(true);
               if (selectedModel?.isThinker) {
                 setModel(MODELS[0].value);
@@ -189,7 +225,7 @@ export function AskAI({
 
               // Now we have the complete HTML including </html>, so set it to be sure
               const finalDoc = contentResponse.match(
-                /<!DOCTYPE html>[\s\S]*<\/html>/
+                /<!DOCTYPE html>[\s\S]*<\/html>/,
               )?.[0];
               if (finalDoc) {
                 setHtml(finalDoc);
@@ -216,7 +252,7 @@ export function AskAI({
             contentResponse += chunk;
 
             const newHtml = contentResponse.match(
-              /<!DOCTYPE html>[\s\S]*/
+              /<!DOCTYPE html>[\s\S]*/,
             )?.[0];
             if (newHtml) {
               setIsThinking(false);
@@ -290,6 +326,58 @@ export function AskAI({
     return isTheSameHtml(html);
   }, [html]);
 
+  // Process and deduplicate errors
+  const fixableErrors = useMemo(() => {
+    if (!previewErrors || previewErrors.length === 0) return [];
+    const dedupedErrors = deduplicateErrors(previewErrors);
+    return dedupedErrors.filter((error) => areErrorsFixable([error]));
+  }, [previewErrors]);
+
+  // Auto-fix errors when detected
+  useUpdateEffect(() => {
+    if (
+      autoFixEnabled &&
+      fixableErrors.length > 0 &&
+      !isAiWorking &&
+      !isFixingErrors &&
+      fixAttempts < MAX_AUTO_FIX_ATTEMPTS
+    ) {
+      // Add a small delay to avoid immediate re-triggering
+      const timer = setTimeout(() => {
+        setIsFixingErrors(true);
+        setFixAttempts((prev) => prev + 1);
+        toast.info(
+          `Auto-fixing ${fixableErrors.length} error${fixableErrors.length > 1 ? "s" : ""}...`,
+        );
+        callAi(undefined, fixableErrors);
+      }, AUTO_FIX_DELAY_MS);
+
+      return () => clearTimeout(timer);
+    } else if (
+      autoFixEnabled &&
+      fixableErrors.length > 0 &&
+      fixAttempts >= MAX_AUTO_FIX_ATTEMPTS &&
+      !isAiWorking
+    ) {
+      // Max attempts reached, notify user
+      toast.error(
+        `Failed to auto-fix after ${MAX_AUTO_FIX_ATTEMPTS} attempts. Please fix manually.`,
+      );
+      setAutoFixEnabled(false);
+    }
+  }, [fixableErrors, autoFixEnabled, isAiWorking, fixAttempts]);
+
+  // Reset fix attempts when errors are cleared
+  useUpdateEffect(() => {
+    if (fixableErrors.length === 0 && fixAttempts > 0) {
+      setFixAttempts(0);
+      setIsFixingErrors(false);
+      if (autoFixEnabled) {
+        toast.success("All errors fixed!");
+      }
+    }
+  }, [fixableErrors]);
+
   return (
     <div className="px-3">
       <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 w-full group">
@@ -309,7 +397,7 @@ export function AskAI({
                   "size-4 text-neutral-400 group-hover:text-neutral-300 transition-all duration-200",
                   {
                     "rotate-180": openThink,
-                  }
+                  },
                 )}
               />
             </header>
@@ -321,7 +409,7 @@ export function AskAI({
                   "max-h-[0px]": !openThink,
                   "min-h-[250px] max-h-[250px] border-t border-neutral-700":
                     openThink,
-                }
+                },
               )}
             >
               <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
@@ -364,14 +452,14 @@ export function AskAI({
               "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4",
               {
                 "!pt-2.5": selectedElement && !isAiWorking,
-              }
+              },
             )}
             placeholder={
               selectedElement
                 ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
                 : hasAsked
-                ? "Ask DeepSite for edits"
-                : "Ask DeepSite anything..."
+                  ? "Ask DeepSite for edits"
+                  : "Ask DeepSite anything..."
             }
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
@@ -412,6 +500,36 @@ export function AskAI({
                 </TooltipContent>
               </Tooltip>
             )}
+            {fixableErrors.length > 0 && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="xs"
+                    variant={autoFixEnabled ? "destructive" : "outline"}
+                    onClick={() => setAutoFixEnabled?.(!autoFixEnabled)}
+                    className={classNames("h-[28px]", {
+                      "!text-red-400 hover:!text-red-200 !border-red-600 !hover:!border-red-500":
+                        !autoFixEnabled && fixableErrors.length > 0,
+                    })}
+                  >
+                    <AlertCircle className="size-4" />
+                    {fixableErrors.length} Error
+                    {fixableErrors.length > 1 ? "s" : ""}
+                    {autoFixEnabled &&
+                      fixAttempts > 0 &&
+                      ` (${fixAttempts}/${MAX_AUTO_FIX_ATTEMPTS})`}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  align="start"
+                  className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
+                >
+                  {autoFixEnabled
+                    ? `Auto-fix is ON. Click to disable. ${fixAttempts > 0 ? `Attempted ${fixAttempts}/${MAX_AUTO_FIX_ATTEMPTS} fixes.` : ""}`
+                    : "Click to enable auto-fix for detected errors"}
+                </TooltipContent>
+              </Tooltip>
+            )}
             <InviteFriends />
           </div>
           <div className="flex items-center justify-end gap-2">

components/editor/index.tsx

@@ -26,6 +26,7 @@ import { Project } from "@/types";
 import { SaveButton } from "./save-button";
 import { LoadProject } from "../my-projects/load-project";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
+import type { PreviewError } from "@/types/preview-error";
 
 export const AppEditor = ({ project }: { project?: Project | null }) => {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
@@ -51,8 +52,9 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
   const [isAiWorking, setIsAiWorking] = useState(false);
   const [isEditableModeEnabled, setIsEditableModeEnabled] = useState(false);
   const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
-    null
+    null,
   );
+  const [previewErrors, setPreviewErrors] = useState<PreviewError[]>([]);
 
   /**
    * Resets the layout based on screen size
@@ -92,7 +94,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
     const editorWidth = e.clientX;
     const clampedEditorWidth = Math.max(
       minWidth,
-      Math.min(editorWidth, maxWidth)
+      Math.min(editorWidth, maxWidth),
     );
     const calculatedPreviewWidth =
       window.innerWidth - clampedEditorWidth - resizerWidth;
@@ -121,7 +123,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
           onClick: () => {
             window.open(
               `https://huggingface.co/spaces/${project?.space_id}`,
-              "_blank"
+              "_blank",
             );
           },
         },
@@ -169,6 +171,8 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
         preview.current.style.width = "100%";
       }
     }
+    // Clear preview errors when switching tabs
+    setPreviewErrors([]);
   }, [currentTab]);
 
   const handleEditorValidation = (markers: editor.IMarker[]) => {
@@ -210,7 +214,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                   "h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
                   {
                     "pointer-events-none": isAiWorking,
-                  }
+                  },
                 )}
                 options={{
                   colorDecorators: true,
@@ -242,7 +246,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                 onSuccess={(
                   finalHtml: string,
                   p: string,
-                  updatedLines?: number[][]
+                  updatedLines?: number[][],
                 ) => {
                   const currentHistory = [...htmlHistory];
                   currentHistory.unshift({
@@ -262,7 +266,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                         line[0],
                         1,
                         line[1],
-                        1
+                        1,
                       ),
                       options: {
                         inlineClassName: "matched-line",
@@ -284,13 +288,14 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                 }}
                 onScrollToBottom={() => {
                   editorRef.current?.revealLine(
-                    editorRef.current?.getModel()?.getLineCount() ?? 0
+                    editorRef.current?.getModel()?.getLineCount() ?? 0,
                   );
                 }}
                 isEditableModeEnabled={isEditableModeEnabled}
                 setIsEditableModeEnabled={setIsEditableModeEnabled}
                 selectedElement={selectedElement}
                 setSelectedElement={setSelectedElement}
+                previewErrors={previewErrors}
               />
             </div>
             <div
@@ -313,6 +318,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
             setSelectedElement(element);
             setCurrentTab("chat");
           }}
+          onErrors={setPreviewErrors}
         />
       </main>
       <Footer
@@ -327,7 +333,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
             setHtml(defaultHTML);
             removeHtmlStorage();
             editorRef.current?.revealLine(
-              editorRef.current?.getModel()?.getLineCount() ?? 0
+              editorRef.current?.getModel()?.getLineCount() ?? 0,
             );
           }
         }}

components/editor/preview/index.tsx

@@ -1,12 +1,15 @@
 "use client";
 import { useUpdateEffect } from "react-use";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
 import { GridPattern } from "@/components/magic-ui/grid-pattern";
 import { htmlTagToText } from "@/lib/html-tag-to-text";
+import { errorDetectorScript, ERROR_DETECTOR_ID } from "@/lib/error-detector";
+
+import type { PreviewError } from "@/types/preview-error";
 
 export const Preview = ({
   html,
@@ -18,6 +21,7 @@ export const Preview = ({
   iframeRef,
   isEditableModeEnabled,
   onClickElement,
+  onErrors,
 }: {
   html: string;
   isResizing: boolean;
@@ -28,11 +32,29 @@ export const Preview = ({
   currentTab: string;
   isEditableModeEnabled?: boolean;
   onClickElement?: (element: HTMLElement) => void;
+  onErrors?: (errors: PreviewError[]) => void;
 }) => {
   const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
-    null
+    null,
   );
 
+  // Listen for error messages from the iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === "PREVIEW_ERRORS" && onErrors) {
+        onErrors(event.data.errors);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onErrors]);
+
+  // Defensive reset: Clear errors when HTML changes
+  useUpdateEffect(() => {
+    onErrors?.([]);
+  }, [html]);
+
   // add event listener to the iframe to track hovered elements
   const handleMouseOver = (event: MouseEvent) => {
     if (iframeRef?.current) {
@@ -100,6 +122,36 @@ export const Preview = ({
     return hoveredElement;
   }, [hoveredElement, isEditableModeEnabled]);
 
+  // Inject error detection script into the HTML
+  const htmlWithErrorDetection = useMemo(() => {
+    if (!html) return "";
+
+    // First, remove any existing error detector script to prevent duplicates
+    const cleanedHtml = html.replace(
+      new RegExp(
+        `<script[^>]*id="${ERROR_DETECTOR_ID}"[^>]*>[\\s\\S]*?</script>`,
+        "gi",
+      ),
+      "",
+    );
+
+    // Create the script tag with proper ID
+    const scriptTag = `<script id="${ERROR_DETECTOR_ID}">${errorDetectorScript}</script>`;
+
+    // If html already has a </head> tag, inject script before it
+    if (cleanedHtml.includes("</head>")) {
+      return cleanedHtml.replace("</head>", `${scriptTag}</head>`);
+    }
+    // If html already has a <body> tag, inject script after it
+    else if (cleanedHtml.includes("<body")) {
+      return cleanedHtml.replace(/<body([^>]*)>/, `<body$1>${scriptTag}`);
+    }
+    // Otherwise, wrap the content with proper HTML structure
+    else {
+      return `<!DOCTYPE html><html><head>${scriptTag}</head><body>${cleanedHtml}</body></html>`;
+    }
+  }, [html]);
+
   return (
     <div
       ref={ref}
@@ -109,7 +161,7 @@ export const Preview = ({
           "lg:p-4": currentTab !== "preview",
           "max-lg:h-0": currentTab === "chat",
           "max-lg:h-full": currentTab === "preview",
-        }
+        },
       )}
       onClick={(e) => {
         if (isAiWorking) {
@@ -124,7 +176,7 @@ export const Preview = ({
         y={-1}
         strokeDasharray={"4 2"}
         className={cn(
-          "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]"
+          "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]",
         )}
       />
       {!isAiWorking && hoveredElement && selectedElement && (
@@ -158,10 +210,13 @@ export const Preview = ({
               device === "mobile",
             "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
               currentTab !== "preview" && device === "desktop",
-          }
+          },
         )}
-        srcDoc={html}
+        srcDoc={htmlWithErrorDetection}
         onLoad={() => {
+          // Clear errors on fresh load as extra safety
+          onErrors?.([]);
+
           if (iframeRef?.current?.contentWindow?.document?.body) {
             iframeRef.current.contentWindow.document.body.scrollIntoView({
               block: isAiWorking ? "end" : "start",

lib/constants.ts

@@ -0,0 +1,5 @@
+// Auto-fix feature constants
+export const MAX_AUTO_FIX_ATTEMPTS = 3;
+export const AUTO_FIX_DELAY_MS = 2000;
+export const ERROR_BATCH_DELAY_MS = 1000;
+export const MAX_ERRORS_TO_DISPLAY = 10;

lib/error-detector.ts

@@ -0,0 +1,140 @@
+export const ERROR_DETECTOR_ID = "deepsite-error-detector";
+
+export const errorDetectorScript = `
+(function() {
+  const errors = [];
+  let errorTimeout = null;
+  const MAX_ERRORS = 10;
+  const BATCH_DELAY = 1000; // Wait 1 second before sending errors
+  
+  // Create a safe error object that can be serialized
+  function createSafeError(error, type, context = {}) {
+    return {
+      type,
+      message: error?.message || String(error),
+      stack: error?.stack,
+      lineNumber: error?.lineNumber || context.lineNumber,
+      columnNumber: error?.columnNumber || context.columnNumber,
+      fileName: error?.fileName || context.fileName,
+      timestamp: new Date().toISOString(),
+      ...context
+    };
+  }
+  
+  // Send errors to parent window (always send, even if empty)
+  function sendErrors() {
+    window.parent.postMessage({
+      type: 'PREVIEW_ERRORS',
+      errors: errors.slice(0, MAX_ERRORS), // Limit errors sent
+      url: window.location.href
+    }, '*');
+    
+    errors.length = 0; // Clear sent errors
+  }
+  
+  // Batch errors to avoid spamming
+  function queueError(error) {
+    errors.push(error);
+    
+    if (errorTimeout) clearTimeout(errorTimeout);
+    errorTimeout = setTimeout(sendErrors, BATCH_DELAY);
+  }
+  
+  // Global error handler
+  window.addEventListener('error', function(event) {
+    const error = createSafeError(event.error || event.message, 'runtime-error', {
+      lineNumber: event.lineno,
+      columnNumber: event.colno,
+      fileName: event.filename,
+      errorType: 'JavaScript Error'
+    });
+    queueError(error);
+  });
+  
+  // Unhandled promise rejection handler
+  window.addEventListener('unhandledrejection', function(event) {
+    const error = createSafeError(event.reason, 'unhandled-promise', {
+      promise: event.promise,
+      errorType: 'Unhandled Promise Rejection'
+    });
+    queueError(error);
+  });
+  
+  // Override console.error to catch logged errors
+  const originalConsoleError = console.error;
+  console.error = function(...args) {
+    originalConsoleError.apply(console, args);
+    
+    const error = createSafeError(args.join(' '), 'console-error', {
+      errorType: 'Console Error',
+      args: args.map(arg => String(arg))
+    });
+    queueError(error);
+  };
+  
+  // Monitor failed resource loads (404s, etc)
+  window.addEventListener('error', function(event) {
+    if (event.target !== window) {
+      // This is a resource loading error
+      const target = event.target;
+      const error = createSafeError(\`Failed to load resource: \${target.src || target.href}\`, 'resource-error', {
+        tagName: target.tagName,
+        src: target.src || target.href,
+        errorType: 'Resource Loading Error'
+      });
+      queueError(error);
+    }
+  }, true); // Use capture phase to catch resource errors
+  
+  // Monitor for common React errors
+  if (window.React && window.React.version) {
+    const originalError = console.error;
+    console.error = function(...args) {
+      originalError.apply(console, args);
+      
+      const errorString = args.join(' ');
+      if (errorString.includes('ReactDOM.render is no longer supported') ||
+          errorString.includes('Cannot read property') ||
+          errorString.includes('Cannot access property')) {
+        const error = createSafeError(errorString, 'react-error', {
+          errorType: 'React Error',
+          reactVersion: window.React.version
+        });
+        queueError(error);
+      }
+    };
+  }
+  
+  // Report current state of errors
+  function reportCurrentState() {
+    sendErrors();
+  }
+  
+  // Send initial ready message and current error state
+  window.addEventListener('load', reportCurrentState);
+  
+  // Monitor for DOM changes that might clear errors
+  const observer = new MutationObserver(() => {
+    // Small delay to let any new errors register
+    setTimeout(reportCurrentState, 100);
+  });
+  
+  // Start observing once DOM is ready
+  if (document.body) {
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true
+    });
+  } else {
+    window.addEventListener('DOMContentLoaded', () => {
+      observer.observe(document.body, {
+        subtree: true,
+        childList: true
+      });
+    });
+  }
+  
+  // Send initial state
+  reportCurrentState();
+})();
+`;

lib/error-formatter.ts

@@ -0,0 +1,139 @@
+import type { PreviewError } from "@/types/preview-error";
+
+// Sanitize error messages to prevent prompt injection
+function sanitizeErrorMessage(message: string): string {
+  return message
+    .replace(/[<>]/g, "") // Remove potential HTML tags
+    .replace(/```/g, "'''") // Escape code blocks
+    .slice(0, 500); // Limit length
+}
+
+export function formatErrorsForAI(
+  errors: PreviewError[],
+  html: string
+): string {
+  if (!errors || errors.length === 0) return "";
+
+  // Validate errors array
+  const validErrors = errors.filter((e) => e && typeof e.message === "string");
+  if (validErrors.length === 0) return "";
+
+  // Group errors by type for better organization
+  const errorGroups = validErrors.reduce((acc, error) => {
+    const type = error.errorType || error.type;
+    if (!acc[type]) acc[type] = [];
+    acc[type].push(error);
+    return acc;
+  }, {} as Record<string, PreviewError[]>);
+
+  let formattedErrors =
+    "The following errors were detected in the preview:\n\n";
+
+  // Format each error group
+  Object.entries(errorGroups).forEach(([type, groupErrors]) => {
+    formattedErrors += `### ${type} (${groupErrors.length} error${
+      groupErrors.length > 1 ? "s" : ""
+    })\n\n`;
+
+    groupErrors.forEach((error, index) => {
+      const sanitizedMessage = sanitizeErrorMessage(error.message);
+      formattedErrors += `${index + 1}. **${sanitizedMessage}**\n`;
+
+      if (error.lineNumber) {
+        formattedErrors += `   - Line: ${error.lineNumber}`;
+        if (error.columnNumber) {
+          formattedErrors += `, Column: ${error.columnNumber}`;
+        }
+        formattedErrors += "\n";
+      }
+
+      if (error.fileName && error.fileName !== "undefined") {
+        formattedErrors += `   - File: ${error.fileName}\n`;
+      }
+
+      // For resource errors, include the problematic resource
+      if (error.type === "resource-error" && error.src) {
+        formattedErrors += `   - Resource: ${error.src}\n`;
+        formattedErrors += `   - Tag: <${error.tagName?.toLowerCase()}>\n`;
+      }
+
+      // Include relevant code snippet if we have line numbers
+      if (error.lineNumber && html) {
+        const lines = html.split("\n");
+        const startLine = Math.max(0, error.lineNumber - 3);
+        const endLine = Math.min(lines.length, error.lineNumber + 2);
+
+        if (lines[error.lineNumber - 1]) {
+          formattedErrors += "   - Code context:\n";
+          formattedErrors += "   ```html\n";
+          for (let i = startLine; i < endLine; i++) {
+            const marker = i === error.lineNumber - 1 ? ">" : " ";
+            formattedErrors += `   ${marker} ${i + 1}: ${lines[i]}\n`;
+          }
+          formattedErrors += "   ```\n";
+        }
+      }
+
+      formattedErrors += "\n";
+    });
+  });
+
+  return formattedErrors;
+}
+
+export function createErrorFixPrompt(
+  errors: PreviewError[],
+  html: string
+): string {
+  const formattedErrors = formatErrorsForAI(errors, html);
+
+  return `${formattedErrors}
+Please fix these errors in the HTML code. Focus on:
+1. Fixing JavaScript syntax errors
+2. Resolving undefined variables or functions
+3. Fixing broken resource links (404s)
+4. Ensuring all referenced libraries are properly loaded
+5. Fixing any HTML structure issues
+
+Make the minimum necessary changes to fix the errors while preserving the intended functionality.`;
+}
+
+// Check if errors are likely fixable by AI
+export function areErrorsFixable(errors: PreviewError[]): boolean {
+  if (!errors || errors.length === 0) return false;
+
+  // Filter out errors that are likely not fixable
+  const fixableErrors = errors.filter((error) => {
+    // Skip errors from external resources
+    if (
+      error.fileName &&
+      (error.fileName.includes("http://") ||
+        error.fileName.includes("https://"))
+    ) {
+      return false;
+    }
+
+    // Skip certain console errors that might be intentional
+    if (
+      error.type === "console-error" &&
+      error.message.includes("Development mode")
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return fixableErrors.length > 0;
+}
+
+// Deduplicate similar errors
+export function deduplicateErrors(errors: PreviewError[]): PreviewError[] {
+  const seen = new Set<string>();
+  return errors.filter((error) => {
+    const key = `${error.type}-${error.message}-${error.lineNumber || 0}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}

types/preview-error.ts

@@ -0,0 +1,22 @@
+export interface PreviewError {
+  type:
+    | "runtime-error"
+    | "unhandled-promise"
+    | "console-error"
+    | "resource-error"
+    | "react-error";
+  message: string;
+  stack?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+  fileName?: string;
+  timestamp: string;
+  errorType?: string;
+  // For resource errors
+  tagName?: string;
+  src?: string;
+  // For React errors
+  reactVersion?: string;
+  // For console errors
+  args?: string[];
+}