errors-forwardings

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[];
+}