@illuma-ai/code-sandbox 1.4.0 → 1.5.0

package/src/components/Preview.tsx

@@ -1,262 +0,0 @@
-/**
- * Preview — Full-width iframe that renders the Nodepod virtual server.
- *
- * 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(' '));
-  };
-})();
-`;
-}
-
-/** 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 /__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 = "",
-  onBrowserError,
-  reloadKey = 0,
-}: PreviewProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const onBrowserErrorRef = useRef(onBrowserError);
-  onBrowserErrorRef.current = onBrowserError;
-
-  /**
-   * Track the previous reloadKey so we only reload on actual changes,
-   * not on initial mount or unrelated re-renders.
-   */
-  const prevReloadKeyRef = useRef(reloadKey);
-
-  /**
-   * 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(() => {
-    if (iframeRef.current && url) {
-      iframeRef.current.src = url;
-    }
-  }, [url]);
-
-  // Hot reload: soft-refresh the iframe when reloadKey changes.
-  // This avoids a full server restart for static asset changes (CSS, HTML).
-  useEffect(() => {
-    if (reloadKey !== prevReloadKeyRef.current) {
-      prevReloadKeyRef.current = reloadKey;
-      const iframe = iframeRef.current;
-      if (iframe && url) {
-        try {
-          // Try same-origin reload first (preserves scroll position)
-          iframe.contentWindow?.location.reload();
-        } catch {
-          // Cross-origin fallback — re-assign src
-          iframe.src = url;
-        }
-      }
-    }
-  }, [reloadKey, url]);
-
-  return (
-    <div className={`h-full w-full bg-white ${className}`}>
-      {url ? (
-        <iframe
-          ref={iframeRef}
-          src={url}
-          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">
-          <div className="text-center px-4">
-            <div className="w-10 h-10 mx-auto mb-3 border-2 border-sb-accent border-t-transparent rounded-full animate-spin" />
-            <p className="text-sb-text-muted text-sm">
-              Waiting for dev server to start...
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Terminal.tsx

@@ -1,111 +0,0 @@
-/**
- * Terminal — Clean monochrome terminal output panel with minimize toggle.
- *
- * Uses a simple div-based approach (not xterm.js) to keep the bundle lean.
- * Auto-scrolls to bottom as new output arrives.
- * Minimize/expand state is controlled by the parent via props.
- */
-
-import React, { useEffect, useRef } from "react";
-import type { TerminalProps } from "../types";
-
-/**
- * Terminal component — renders process output in a clean monochrome panel.
- *
- * Features:
- * - Monospace font with proper line spacing
- * - Auto-scroll to bottom on new output
- * - Minimize/expand toggle via chevron in header (parent-controlled)
- * - Modern thin scrollbar matching the sandbox theme
- */
-export function Terminal({
-  output,
-  className = "",
-  minimized = false,
-  onToggleMinimize,
-}: TerminalProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Auto-scroll to bottom when new output arrives
-  useEffect(() => {
-    const el = containerRef.current;
-    if (el && !minimized) {
-      el.scrollTop = el.scrollHeight;
-    }
-  }, [output.length, minimized]);
-
-  return (
-    <div
-      className={`flex flex-col ${minimized ? "" : "h-full"} ${className}`}
-      style={{ background: "var(--sb-terminal)" }}
-    >
-      {/* Header */}
-      <div
-        className="flex items-center gap-2 px-3 py-1 border-t border-sb-border shrink-0 select-none cursor-pointer"
-        style={{ background: "var(--sb-terminal-header)" }}
-        onClick={onToggleMinimize}
-      >
-        {/* Chevron toggle */}
-        <svg
-          width="14"
-          height="14"
-          viewBox="0 0 16 16"
-          fill="none"
-          className="shrink-0 transition-transform duration-150"
-          style={{
-            transform: minimized ? "rotate(-90deg)" : "rotate(0deg)",
-            color: "var(--sb-text-muted)",
-          }}
-        >
-          <path
-            d="M4 6l4 4 4-4"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-        <span
-          className="text-[11px] font-medium tracking-wider"
-          style={{ color: "var(--sb-text-muted)" }}
-        >
-          TERMINAL
-        </span>
-        {/* Line count badge */}
-        {output.length > 0 && (
-          <span
-            className="text-[10px] ml-auto tabular-nums"
-            style={{ color: "var(--sb-text-muted)", opacity: 0.6 }}
-          >
-            {output.length} lines
-          </span>
-        )}
-      </div>
-
-      {/* Output area — hidden when minimized */}
-      {!minimized && (
-        <div
-          ref={containerRef}
-          className="flex-1 overflow-auto px-3.5 py-2 sb-terminal-output overscroll-contain min-h-0"
-        >
-          {output.length === 0 ? (
-            <div style={{ color: "var(--sb-text-muted)" }}>
-              <span>$ </span>
-              <span className="animate-pulse">_</span>
-            </div>
-          ) : (
-            output.map((line, i) => (
-              <div
-                key={i}
-                className="whitespace-pre-wrap"
-                style={{ color: "var(--sb-text)" }}
-              >
-                {line}
-              </div>
-            ))
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/ViewSlider.tsx

@@ -1,87 +0,0 @@
-/**
- * ViewSlider — Pill-shaped toggle to switch between Code and Preview views.
- *
- * Inspired by bolt.diy's Slider component. Uses Framer Motion's layoutId
- * for a smooth animated pill that slides between options.
- *
- * @see bolt.diy: app/components/ui/Slider.tsx
- */
-
-import React, { memo } from "react";
-import { motion } from "framer-motion";
-
-/** The two views available in the workbench */
-export type WorkbenchView = "code" | "preview";
-
-interface ViewSliderProps {
-  selected: WorkbenchView;
-  onSelect: (view: WorkbenchView) => void;
-}
-
-/** Cubic bezier easing — typed as a 4-tuple for Framer Motion */
-const CUBIC_EASING: [number, number, number, number] = [0.4, 0, 0.2, 1];
-
-/**
- * Individual button within the slider.
- * When selected, renders an animated pill background via layoutId.
- */
-const SliderButton = memo(function SliderButton({
-  selected,
-  children,
-  onClick,
-}: {
-  selected: boolean;
-  children: React.ReactNode;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={`relative px-3 py-1 rounded-full text-xs font-medium transition-colors ${
-        selected ? "text-white" : "text-sb-text-muted hover:text-sb-text"
-      }`}
-    >
-      <span className="relative z-10">{children}</span>
-      {selected && (
-        <motion.span
-          layoutId="view-slider-pill"
-          transition={{
-            duration: 0.2,
-            ease: CUBIC_EASING,
-          }}
-          className="absolute inset-0 z-0 bg-sb-accent rounded-full"
-        />
-      )}
-    </button>
-  );
-});
-
-/**
- * ViewSlider — renders a pill-shaped toggle with animated selection indicator.
- *
- * Usage:
- * ```tsx
- * <ViewSlider selected={view} onSelect={setView} />
- * ```
- */
-export const ViewSlider = memo(function ViewSlider({
-  selected,
-  onSelect,
-}: ViewSliderProps) {
-  return (
-    <div className="flex items-center gap-0.5 bg-sb-bg rounded-full p-0.5 border border-sb-border">
-      <SliderButton
-        selected={selected === "code"}
-        onClick={() => onSelect("code")}
-      >
-        Code
-      </SliderButton>
-      <SliderButton
-        selected={selected === "preview"}
-        onClick={() => onSelect("preview")}
-      >
-        Preview
-      </SliderButton>
-    </div>
-  );
-});