@illuma-ai/code-sandbox 1.0.0 → 1.1.0

package/src/components/Preview.tsx

@@ -1,22 +1,204 @@
 /**
  * Preview — Full-width iframe that renders the Nodepod virtual server.
  *
- * Loads the URL from Nodepod's Service Worker proxy (/__virtual__/PORT/).
+ * Loads the URL from Nodepod's Service Worker proxy (/__preview__/PORT/).
  * The toolbar handles the URL bar and refresh — this is just the iframe.
+ *
+ * Error capture: After the iframe loads, we inject a small script that
+ * hooks `window.onerror`, `window.onunhandledrejection`, and
+ * `console.error` inside the iframe. These are relayed to the parent
+ * via `postMessage`, where we parse them into SandboxError objects
+ * and forward to the `onBrowserError` callback.
+ *
+ * The iframe and parent are same-origin (both served through the
+ * Nodepod Service Worker), so direct contentWindow access works.
+ */
+
+import React, { useRef, useEffect, useCallback } from "react";
+import type {
+  PreviewProps,
+  SandboxError,
+  SandboxErrorCategory,
+} from "../types";
+
+/** Message type sent from the error-capture script inside the iframe */
+interface IframeErrorMessage {
+  type: "sandbox-error";
+  category: SandboxErrorCategory;
+  message: string;
+  stack?: string;
+  filename?: string;
+  lineno?: number;
+  colno?: number;
+}
+
+/**
+ * Build the error-capture script injected into the iframe.
+ *
+ * This script runs inside the preview iframe's global scope and
+ * intercepts three error vectors:
+ * 1. window.onerror — uncaught exceptions
+ * 2. window.onunhandledrejection — unhandled Promise rejections
+ * 3. console.error — explicit error logging
+ *
+ * Each error is posted to the parent via postMessage with a
+ * structured payload so the parent can construct a SandboxError.
  */
+function buildErrorCaptureScript(): string {
+  return `
+(function() {
+  // Guard against double-injection
+  if (window.__sandboxErrorCapture) return;
+  window.__sandboxErrorCapture = true;
+
+  var post = function(category, message, stack, filename, lineno, colno) {
+    try {
+      window.parent.postMessage({
+        type: 'sandbox-error',
+        category: category,
+        message: String(message || 'Unknown error'),
+        stack: stack || undefined,
+        filename: filename || undefined,
+        lineno: lineno || undefined,
+        colno: colno || undefined
+      }, '*');
+    } catch(e) { /* swallow — parent may not be listening */ }
+  };
+
+  // 1. Uncaught exceptions
+  window.onerror = function(msg, source, lineno, colno, error) {
+    post(
+      'browser-error',
+      msg,
+      error && error.stack ? error.stack : undefined,
+      source,
+      lineno,
+      colno
+    );
+  };
+
+  // 2. Unhandled promise rejections
+  window.onunhandledrejection = function(event) {
+    var reason = event.reason;
+    var msg = reason instanceof Error ? reason.message : String(reason);
+    var stack = reason instanceof Error ? reason.stack : undefined;
+    post('browser-unhandled-rejection', msg, stack);
+  };
+
+  // 3. console.error intercept
+  var origError = console.error;
+  console.error = function() {
+    // Forward to original so DevTools still shows it
+    origError.apply(console, arguments);
+    var parts = [];
+    for (var i = 0; i < arguments.length; i++) {
+      var arg = arguments[i];
+      if (arg instanceof Error) {
+        parts.push(arg.message);
+        // Use the stack from the first Error argument
+        if (parts.length === 1) {
+          post('browser-console-error', arg.message, arg.stack);
+          return;
+        }
+      } else {
+        parts.push(String(arg));
+      }
+    }
+    post('browser-console-error', parts.join(' '));
+  };
+})();
+`;
+}
 
-import React, { useRef, useEffect } from "react";
-import type { PreviewProps } from "../types";
+/** Counter for unique error IDs within this component instance */
+let browserErrorCounter = 0;
 
 /**
  * Preview component — renders the dev server output in a full-width iframe.
  *
- * The URL points to /__virtual__/PORT/ which is intercepted by the
+ * The URL points to /__preview__/PORT/ which is intercepted by the
  * Nodepod Service Worker and proxied to the Express server running
  * in the Web Worker.
+ *
+ * After the iframe loads, an error-capture script is injected so that
+ * runtime errors inside the preview are surfaced to the AI agent.
  */
-export function Preview({ url, className = "" }: PreviewProps) {
+export function Preview({ url, className = "", onBrowserError }: PreviewProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const onBrowserErrorRef = useRef(onBrowserError);
+  onBrowserErrorRef.current = onBrowserError;
+
+  /**
+   * Inject the error-capture script into the iframe's contentWindow.
+   *
+   * Called on iframe `load` event. We use direct contentWindow access
+   * (same-origin) rather than srcdoc to avoid breaking the SW proxy.
+   */
+  const injectErrorCapture = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      const iframeDoc =
+        iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc) return;
+
+      const script = iframeDoc.createElement("script");
+      script.textContent = buildErrorCaptureScript();
+      // Append to <head> (or <body> if <head> doesn't exist)
+      const target =
+        iframeDoc.head || iframeDoc.body || iframeDoc.documentElement;
+      if (target) {
+        target.appendChild(script);
+      }
+    } catch (err) {
+      // Cross-origin restriction — shouldn't happen with SW proxy but
+      // degrade gracefully if it does.
+      console.warn(
+        "[CodeSandbox:Preview] Could not inject error capture:",
+        err,
+      );
+    }
+  }, []);
+
+  // Listen for postMessage from the iframe
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      if (!event.data || event.data.type !== "sandbox-error") return;
+
+      const data = event.data as IframeErrorMessage;
+      const cb = onBrowserErrorRef.current;
+      if (!cb) return;
+
+      // Parse filename to extract relative file path.
+      // The iframe's script src URLs look like:
+      //   https://host/__preview__/3000/js/app.js
+      // We want just "public/js/app.js" or "js/app.js".
+      let filePath: string | undefined;
+      if (data.filename) {
+        const match = data.filename.match(
+          /\/__(?:preview|virtual)__\/\d+(\/.*)/,
+        );
+        filePath = match ? match[1].replace(/^\//, "") : undefined;
+      }
+
+      const error: SandboxError = {
+        id: `browser_${++browserErrorCounter}_${Date.now()}`,
+        category: data.category,
+        message: data.message,
+        stack: data.stack,
+        filePath,
+        line: data.lineno ?? undefined,
+        column: data.colno ?? undefined,
+        timestamp: new Date().toISOString(),
+      };
+
+      cb(error);
+    };
+
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, []);
 
   // Reload iframe when URL changes
   useEffect(() => {
@@ -34,6 +216,7 @@ export function Preview({ url, className = "" }: PreviewProps) {
           className="w-full h-full border-none"
           title="Preview"
           sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+          onLoad={injectErrorCapture}
         />
       ) : (
         <div className="flex items-center justify-center h-full bg-sb-bg">

package/src/components/Workbench.tsx

@@ -32,7 +32,7 @@ import { Preview } from "./Preview";
 import { BootOverlay } from "./BootOverlay";
 import { ViewSlider, type WorkbenchView } from "./ViewSlider";
 import { useRuntime } from "../hooks/useRuntime";
-import type { CodeSandboxProps } from "../types";
+import type { CodeSandboxProps, FileChangeStatus } from "../types";
 
 /** Transition for view crossfade */
 const VIEW_TRANSITION = {
@@ -60,6 +60,7 @@ export function CodeSandbox(props: CodeSandboxProps) {
     handleFileChange,
     handleSelectFile,
     handleCloseFile,
+    handleBrowserError,
     restart,
   } = useRuntime(props);
 
@@ -118,6 +119,8 @@ export function CodeSandbox(props: CodeSandboxProps) {
           <CodeView
             fileTree={fileTree}
             files={state.files}
+            originalFiles={state.originalFiles}
+            fileChanges={state.fileChanges}
             selectedFile={selectedFile}
             openFiles={openFiles}
             terminalOutput={state.terminalOutput}
@@ -137,7 +140,7 @@ export function CodeSandbox(props: CodeSandboxProps) {
           }}
           transition={{ duration: 0.15 }}
         >
-          <Preview url={state.previewUrl} />
+          <Preview url={state.previewUrl} onBrowserError={handleBrowserError} />
         </motion.div>
       </div>
     </div>
@@ -241,6 +244,8 @@ function RefreshIcon() {
 interface CodeViewProps {
   fileTree: ReturnType<typeof buildFileTree>;
   files: Record<string, string>;
+  originalFiles: Record<string, string>;
+  fileChanges: Record<string, FileChangeStatus>;
   selectedFile: string | null;
   openFiles: string[];
   terminalOutput: string[];
@@ -257,6 +262,8 @@ interface CodeViewProps {
 function CodeView({
   fileTree,
   files,
+  originalFiles,
+  fileChanges,
   selectedFile,
   openFiles,
   terminalOutput,
@@ -273,6 +280,7 @@ function CodeView({
             files={fileTree}
             selectedFile={selectedFile}
             onSelectFile={onSelectFile}
+            fileChanges={fileChanges}
           />
         </Allotment.Pane>
 
@@ -282,6 +290,8 @@ function CodeView({
             <Allotment.Pane preferredSize="70%">
               <CodeEditor
                 files={files}
+                originalFiles={originalFiles}
+                fileChanges={fileChanges}
                 activeFile={selectedFile}
                 openFiles={openFiles}
                 onSelectFile={onSelectFile}