Fix various sandbox issues.

packages/web-ui/src/components/sandbox/AttachmentsRuntimeProvider.ts

@@ -0,0 +1,99 @@
+import type { Attachment } from "../../utils/attachment-utils.js";
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+/**
+ * Attachments Runtime Provider
+ *
+ * OPTIONAL provider that provides file access APIs to sandboxed code.
+ * Only needed when attachments are present.
+ */
+export class AttachmentsRuntimeProvider implements SandboxRuntimeProvider {
+	constructor(private attachments: Attachment[]) {}
+
+	getData(): Record<string, any> {
+		const attachmentsData = this.attachments.map((a) => ({
+			id: a.id,
+			fileName: a.fileName,
+			mimeType: a.mimeType,
+			size: a.size,
+			content: a.content,
+			extractedText: a.extractedText,
+		}));
+
+		return { attachments: attachmentsData };
+	}
+
+	getRuntime(): (sandboxId: string) => void {
+		// This function will be stringified, so no external references!
+		return (sandboxId: string) => {
+			// Helper functions for attachments
+			(window as any).listFiles = () =>
+				((window as any).attachments || []).map((a: any) => ({
+					id: a.id,
+					fileName: a.fileName,
+					mimeType: a.mimeType,
+					size: a.size,
+				}));
+
+			(window as any).readTextFile = (attachmentId: string) => {
+				const a = ((window as any).attachments || []).find((x: any) => x.id === attachmentId);
+				if (!a) throw new Error("Attachment not found: " + attachmentId);
+				if (a.extractedText) return a.extractedText;
+				try {
+					return atob(a.content);
+				} catch {
+					throw new Error("Failed to decode text content for: " + attachmentId);
+				}
+			};
+
+			(window as any).readBinaryFile = (attachmentId: string) => {
+				const a = ((window as any).attachments || []).find((x: any) => x.id === attachmentId);
+				if (!a) throw new Error("Attachment not found: " + attachmentId);
+				const bin = atob(a.content);
+				const bytes = new Uint8Array(bin.length);
+				for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+				return bytes;
+			};
+
+			(window as any).returnFile = async (fileName: string, content: any, mimeType?: string) => {
+				let finalContent: any, finalMimeType: string;
+
+				if (content instanceof Blob) {
+					const arrayBuffer = await content.arrayBuffer();
+					finalContent = new Uint8Array(arrayBuffer);
+					finalMimeType = mimeType || content.type || "application/octet-stream";
+					if (!mimeType && !content.type) {
+						throw new Error(
+							"returnFile: MIME type is required for Blob content. Please provide a mimeType parameter (e.g., 'image/png').",
+						);
+					}
+				} else if (content instanceof Uint8Array) {
+					finalContent = content;
+					if (!mimeType) {
+						throw new Error(
+							"returnFile: MIME type is required for Uint8Array content. Please provide a mimeType parameter (e.g., 'image/png').",
+						);
+					}
+					finalMimeType = mimeType;
+				} else if (typeof content === "string") {
+					finalContent = content;
+					finalMimeType = mimeType || "text/plain";
+				} else {
+					finalContent = JSON.stringify(content, null, 2);
+					finalMimeType = mimeType || "application/json";
+				}
+
+				window.parent.postMessage(
+					{
+						type: "file-returned",
+						sandboxId,
+						fileName,
+						content: finalContent,
+						mimeType: finalMimeType,
+					},
+					"*",
+				);
+			};
+		};
+	}
+}

packages/web-ui/src/components/sandbox/ConsoleRuntimeProvider.ts

@@ -0,0 +1,132 @@
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+/**
+ * Console Runtime Provider
+ *
+ * REQUIRED provider that should always be included first.
+ * Provides console capture, error handling, and execution lifecycle management.
+ */
+export class ConsoleRuntimeProvider implements SandboxRuntimeProvider {
+	getData(): Record<string, any> {
+		// No data needed
+		return {};
+	}
+
+	getRuntime(): (sandboxId: string) => void {
+		return (sandboxId: string) => {
+			// Console capture
+			const originalConsole = {
+				log: console.log,
+				error: console.error,
+				warn: console.warn,
+				info: console.info,
+			};
+
+			["log", "error", "warn", "info"].forEach((method) => {
+				(console as any)[method] = (...args: any[]) => {
+					const text = args
+						.map((arg) => {
+							try {
+								return typeof arg === "object" ? JSON.stringify(arg) : String(arg);
+							} catch {
+								return String(arg);
+							}
+						})
+						.join(" ");
+
+					window.parent.postMessage(
+						{
+							type: "console",
+							sandboxId,
+							method,
+							text,
+						},
+						"*",
+					);
+
+					(originalConsole as any)[method].apply(console, args);
+				};
+			});
+
+			// Track errors for HTML artifacts
+			let lastError: { message: string; stack: string } | null = null;
+
+			// Error handlers
+			window.addEventListener("error", (e) => {
+				const text =
+					(e.error?.stack || e.message || String(e)) + " at line " + (e.lineno || "?") + ":" + (e.colno || "?");
+
+				lastError = {
+					message: e.error?.message || e.message || String(e),
+					stack: e.error?.stack || text,
+				};
+
+				window.parent.postMessage(
+					{
+						type: "console",
+						sandboxId,
+						method: "error",
+						text,
+					},
+					"*",
+				);
+			});
+
+			window.addEventListener("unhandledrejection", (e) => {
+				const text = "Unhandled promise rejection: " + (e.reason?.message || e.reason || "Unknown error");
+
+				lastError = {
+					message: e.reason?.message || String(e.reason) || "Unhandled promise rejection",
+					stack: e.reason?.stack || text,
+				};
+
+				window.parent.postMessage(
+					{
+						type: "console",
+						sandboxId,
+						method: "error",
+						text,
+					},
+					"*",
+				);
+			});
+
+			// Expose complete() method for user code to call
+			let completionSent = false;
+			(window as any).complete = (error?: { message: string; stack: string }) => {
+				if (completionSent) return;
+				completionSent = true;
+
+				const finalError = error || lastError;
+
+				if (finalError) {
+					window.parent.postMessage(
+						{
+							type: "execution-error",
+							sandboxId,
+							error: finalError,
+						},
+						"*",
+					);
+				} else {
+					window.parent.postMessage(
+						{
+							type: "execution-complete",
+							sandboxId,
+						},
+						"*",
+					);
+				}
+			};
+
+			// Fallback timeout for HTML artifacts that don't call complete()
+			if (document.readyState === "complete" || document.readyState === "interactive") {
+				setTimeout(() => (window as any).complete(), 2000);
+			} else {
+				window.addEventListener("load", () => {
+					setTimeout(() => (window as any).complete(), 2000);
+				});
+			}
+		};
+	}
+}

packages/web-ui/src/components/sandbox/SandboxMessageRouter.ts

@@ -0,0 +1,152 @@
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+/**
+ * Message consumer interface - components that want to receive messages from sandboxes
+ */
+export interface MessageConsumer {
+	/**
+	 * Handle a message from a sandbox.
+	 * @returns true if message was consumed (stops propagation), false otherwise
+	 */
+	handleMessage(message: any): boolean;
+}
+
+/**
+ * Sandbox context - tracks active sandboxes and their consumers
+ */
+interface SandboxContext {
+	sandboxId: string;
+	iframe: HTMLIFrameElement | null; // null until setSandboxIframe()
+	providers: SandboxRuntimeProvider[];
+	consumers: Set<MessageConsumer>;
+}
+
+/**
+ * Centralized message router for all sandbox communication.
+ *
+ * This singleton replaces all individual window.addEventListener("message") calls
+ * with a single global listener that routes messages to the appropriate handlers.
+ *
+ * Benefits:
+ * - Single global listener instead of multiple independent listeners
+ * - Automatic cleanup when sandboxes are destroyed
+ * - Support for bidirectional communication (providers) and broadcasting (consumers)
+ * - Clear lifecycle management
+ */
+export class SandboxMessageRouter {
+	private sandboxes = new Map<string, SandboxContext>();
+	private messageListener: ((e: MessageEvent) => void) | null = null;
+
+	/**
+	 * Register a new sandbox with its runtime providers.
+	 * Call this BEFORE creating the iframe.
+	 */
+	registerSandbox(sandboxId: string, providers: SandboxRuntimeProvider[], consumers: MessageConsumer[]): void {
+		this.sandboxes.set(sandboxId, {
+			sandboxId,
+			iframe: null, // Will be set via setSandboxIframe()
+			providers,
+			consumers: new Set(consumers),
+		});
+
+		// Setup global listener if not already done
+		this.setupListener();
+		console.log("Registered sandbox:", sandboxId);
+	}
+
+	/**
+	 * Update the iframe reference for a sandbox.
+	 * Call this AFTER creating the iframe.
+	 * This is needed so providers can send responses back to the sandbox.
+	 */
+	setSandboxIframe(sandboxId: string, iframe: HTMLIFrameElement): void {
+		const context = this.sandboxes.get(sandboxId);
+		if (context) {
+			context.iframe = iframe;
+		}
+		console.log("Set iframe for sandbox:", sandboxId);
+	}
+
+	/**
+	 * Unregister a sandbox and remove all its consumers.
+	 * Call this when the sandbox is destroyed.
+	 */
+	unregisterSandbox(sandboxId: string): void {
+		this.sandboxes.delete(sandboxId);
+
+		// If no more sandboxes, remove global listener
+		if (this.sandboxes.size === 0 && this.messageListener) {
+			window.removeEventListener("message", this.messageListener);
+			this.messageListener = null;
+		}
+		console.log("Unregistered sandbox:", sandboxId);
+	}
+
+	/**
+	 * Add a message consumer for a sandbox.
+	 * Consumers receive broadcast messages (console, execution-complete, etc.)
+	 */
+	addConsumer(sandboxId: string, consumer: MessageConsumer): void {
+		const context = this.sandboxes.get(sandboxId);
+		if (context) {
+			context.consumers.add(consumer);
+		}
+		console.log("Added consumer for sandbox:", sandboxId);
+	}
+
+	/**
+	 * Remove a message consumer from a sandbox.
+	 */
+	removeConsumer(sandboxId: string, consumer: MessageConsumer): void {
+		const context = this.sandboxes.get(sandboxId);
+		if (context) {
+			context.consumers.delete(consumer);
+		}
+		console.log("Removed consumer for sandbox:", sandboxId);
+	}
+
+	/**
+	 * Setup the global message listener (called automatically)
+	 */
+	private setupListener(): void {
+		if (this.messageListener) return;
+
+		this.messageListener = (e: MessageEvent) => {
+			const { sandboxId } = e.data;
+			if (!sandboxId) return;
+
+			console.log("Router received message for sandbox:", sandboxId, e.data);
+
+			const context = this.sandboxes.get(sandboxId);
+			if (!context) return;
+
+			// Create respond() function for bidirectional communication
+			const respond = (response: any) => {
+				if (!response.sandboxId) response.sandboxId = sandboxId;
+				context.iframe?.contentWindow?.postMessage(response, "*");
+			};
+
+			// 1. Try provider handlers first (for bidirectional comm like memory)
+			for (const provider of context.providers) {
+				if (provider.handleMessage) {
+					const handled = provider.handleMessage(e.data, respond);
+					if (handled) return; // Stop if handled
+				}
+			}
+
+			// 2. Broadcast to consumers (for one-way messages like console)
+			for (const consumer of context.consumers) {
+				const consumed = consumer.handleMessage(e.data);
+				if (consumed) break; // Stop if consumed
+			}
+		};
+
+		window.addEventListener("message", this.messageListener);
+	}
+}
+
+/**
+ * Global singleton instance.
+ * Import this from wherever you need to interact with the message router.
+ */
+export const SANDBOX_MESSAGE_ROUTER = new SandboxMessageRouter();

packages/web-ui/src/components/sandbox/SandboxRuntimeProvider.ts

@@ -0,0 +1,30 @@
+/**
+ * Interface for providing runtime capabilities to sandboxed iframes.
+ * Each provider injects data and runtime functions into the sandbox context.
+ */
+export interface SandboxRuntimeProvider {
+	/**
+	 * Returns data to inject into window scope.
+	 * Keys become window properties (e.g., { attachments: [...] } -> window.attachments)
+	 */
+	getData(): Record<string, any>;
+
+	/**
+	 * Returns a runtime function that will be stringified and executed in the sandbox.
+	 * The function receives sandboxId and has access to data from getData() via window.
+	 *
+	 * IMPORTANT: This function will be converted to string via .toString() and injected
+	 * into the sandbox, so it cannot reference external variables or imports.
+	 */
+	getRuntime(): (sandboxId: string) => void;
+
+	/**
+	 * Optional message handler for bidirectional communication.
+	 * Return true if the message was handled, false to let other handlers try.
+	 *
+	 * @param message - The message from the sandbox
+	 * @param respond - Function to send a response back to the sandbox
+	 * @returns true if message was handled, false otherwise
+	 */
+	handleMessage?(message: any, respond: (response: any) => void): boolean;
+}