npm - @oh-my-pi/pi-web-ui - Versions diffs - 1.337.0 - Mend

@oh-my-pi/pi-web-ui 1.337.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/CHANGELOG.md +96 -0
package/README.md +609 -0
package/example/README.md +61 -0
package/example/index.html +13 -0
package/example/package.json +24 -0
package/example/src/app.css +1 -0
package/example/src/custom-messages.ts +99 -0
package/example/src/main.ts +420 -0
package/example/tsconfig.json +23 -0
package/example/vite.config.ts +6 -0
package/package.json +57 -0
package/scripts/count-prompt-tokens.ts +88 -0
package/src/ChatPanel.ts +218 -0
package/src/app.css +68 -0
package/src/components/AgentInterface.ts +390 -0
package/src/components/AttachmentTile.ts +107 -0
package/src/components/ConsoleBlock.ts +74 -0
package/src/components/CustomProviderCard.ts +96 -0
package/src/components/ExpandableSection.ts +46 -0
package/src/components/Input.ts +113 -0
package/src/components/MessageEditor.ts +404 -0
package/src/components/MessageList.ts +97 -0
package/src/components/Messages.ts +384 -0
package/src/components/ProviderKeyInput.ts +152 -0
package/src/components/SandboxedIframe.ts +626 -0
package/src/components/StreamingMessageContainer.ts +107 -0
package/src/components/ThinkingBlock.ts +45 -0
package/src/components/message-renderer-registry.ts +28 -0
package/src/components/sandbox/ArtifactsRuntimeProvider.ts +219 -0
package/src/components/sandbox/AttachmentsRuntimeProvider.ts +66 -0
package/src/components/sandbox/ConsoleRuntimeProvider.ts +186 -0
package/src/components/sandbox/FileDownloadRuntimeProvider.ts +110 -0
package/src/components/sandbox/RuntimeMessageBridge.ts +82 -0
package/src/components/sandbox/RuntimeMessageRouter.ts +216 -0
package/src/components/sandbox/SandboxRuntimeProvider.ts +52 -0
package/src/dialogs/ApiKeyPromptDialog.ts +75 -0
package/src/dialogs/AttachmentOverlay.ts +640 -0
package/src/dialogs/CustomProviderDialog.ts +274 -0
package/src/dialogs/ModelSelector.ts +314 -0
package/src/dialogs/PersistentStorageDialog.ts +146 -0
package/src/dialogs/ProvidersModelsTab.ts +212 -0
package/src/dialogs/SessionListDialog.ts +157 -0
package/src/dialogs/SettingsDialog.ts +216 -0
package/src/index.ts +115 -0
package/src/prompts/prompts.ts +282 -0
package/src/storage/app-storage.ts +60 -0
package/src/storage/backends/indexeddb-storage-backend.ts +193 -0
package/src/storage/store.ts +33 -0
package/src/storage/stores/custom-providers-store.ts +62 -0
package/src/storage/stores/provider-keys-store.ts +33 -0
package/src/storage/stores/sessions-store.ts +136 -0
package/src/storage/stores/settings-store.ts +34 -0
package/src/storage/types.ts +206 -0
package/src/tools/artifacts/ArtifactElement.ts +14 -0
package/src/tools/artifacts/ArtifactPill.ts +26 -0
package/src/tools/artifacts/Console.ts +102 -0
package/src/tools/artifacts/DocxArtifact.ts +213 -0
package/src/tools/artifacts/ExcelArtifact.ts +231 -0
package/src/tools/artifacts/GenericArtifact.ts +118 -0
package/src/tools/artifacts/HtmlArtifact.ts +203 -0
package/src/tools/artifacts/ImageArtifact.ts +116 -0
package/src/tools/artifacts/MarkdownArtifact.ts +83 -0
package/src/tools/artifacts/PdfArtifact.ts +201 -0
package/src/tools/artifacts/SvgArtifact.ts +82 -0
package/src/tools/artifacts/TextArtifact.ts +148 -0
package/src/tools/artifacts/artifacts-tool-renderer.ts +371 -0
package/src/tools/artifacts/artifacts.ts +713 -0
package/src/tools/artifacts/index.ts +7 -0
package/src/tools/extract-document.ts +271 -0
package/src/tools/index.ts +46 -0
package/src/tools/javascript-repl.ts +316 -0
package/src/tools/renderer-registry.ts +127 -0
package/src/tools/renderers/BashRenderer.ts +52 -0
package/src/tools/renderers/CalculateRenderer.ts +58 -0
package/src/tools/renderers/DefaultRenderer.ts +95 -0
package/src/tools/renderers/GetCurrentTimeRenderer.ts +92 -0
package/src/tools/types.ts +15 -0
package/src/utils/attachment-utils.ts +472 -0
package/src/utils/auth-token.ts +22 -0
package/src/utils/format.ts +42 -0
package/src/utils/i18n.ts +653 -0
package/src/utils/model-discovery.ts +277 -0
package/src/utils/proxy-utils.ts +134 -0
package/src/utils/test-sessions.ts +2357 -0
package/tsconfig.build.json +20 -0
package/tsconfig.json +7 -0

package/src/components/SandboxedIframe.ts ADDED Viewed

@@ -0,0 +1,626 @@
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ConsoleRuntimeProvider } from "./sandbox/ConsoleRuntimeProvider.js";
+import { RuntimeMessageBridge } from "./sandbox/RuntimeMessageBridge.js";
+import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "./sandbox/RuntimeMessageRouter.js";
+import type { SandboxRuntimeProvider } from "./sandbox/SandboxRuntimeProvider.js";
+export interface SandboxFile {
+	fileName: string;
+	content: string | Uint8Array;
+	mimeType: string;
+}
+export interface SandboxResult {
+	success: boolean;
+	console: Array<{ type: string; text: string }>;
+	files?: SandboxFile[];
+	error?: { message: string; stack: string };
+	returnValue?: any;
+}
+/**
+ * Function that returns the URL to the sandbox HTML file.
+ * Used in browser extensions to load sandbox.html via chrome.runtime.getURL().
+ */
+export type SandboxUrlProvider = () => string;
+/**
+ * Configuration for prepareHtmlDocument
+ */
+export interface PrepareHtmlOptions {
+	/** True if this is an HTML artifact (inject into existing HTML), false if REPL (wrap in HTML) */
+	isHtmlArtifact: boolean;
+	/** True if this is a standalone download (no runtime bridge, no navigation interceptor) */
+	isStandalone?: boolean;
+}
+/**
+ * Escape HTML special sequences in code to prevent premature tag closure
+ * @param code Code that will be injected into <script> tags
+ * @returns Escaped code safe for injection
+ */
+function escapeScriptContent(code: string): string {
+	return code.replace(/<\/script/gi, "<\\/script");
+}
+@customElement("sandbox-iframe")
+export class SandboxIframe extends LitElement {
+	private iframe?: HTMLIFrameElement;
+	/**
+	 * Optional: Provide a function that returns the sandbox HTML URL.
+	 * If provided, the iframe will use this URL instead of srcdoc.
+	 * This is required for browser extensions with strict CSP.
+	 */
+	@property({ attribute: false }) sandboxUrlProvider?: SandboxUrlProvider;
+	createRenderRoot() {
+		return this;
+	}
+	override connectedCallback() {
+		super.connectedCallback();
+	}
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		// Note: We don't unregister the sandbox here for loadContent() mode
+		// because the caller (HtmlArtifact) owns the sandbox lifecycle.
+		// For execute() mode, the sandbox is unregistered in the cleanup function.
+		this.iframe?.remove();
+	}
+	/**
+	 * Load HTML content into sandbox and keep it displayed (for HTML artifacts)
+	 * @param sandboxId Unique ID
+	 * @param htmlContent Full HTML content
+	 * @param providers Runtime providers to inject
+	 * @param consumers Message consumers to register (optional)
+	 */
+	public loadContent(
+		sandboxId: string,
+		htmlContent: string,
+		providers: SandboxRuntimeProvider[] = [],
+		consumers: MessageConsumer[] = [],
+	): void {
+		// Unregister previous sandbox if exists
+		try {
+			RUNTIME_MESSAGE_ROUTER.unregisterSandbox(sandboxId);
+		} catch {
+			// Sandbox might not exist, that's ok
+		}
+		providers = [new ConsoleRuntimeProvider(), ...providers];
+		RUNTIME_MESSAGE_ROUTER.registerSandbox(sandboxId, providers, consumers);
+		// loadContent is always used for HTML artifacts (not standalone)
+		const completeHtml = this.prepareHtmlDocument(sandboxId, htmlContent, providers, {
+			isHtmlArtifact: true,
+			isStandalone: false,
+		});
+		// Validate HTML before loading
+		const validationError = this.validateHtml(completeHtml);
+		if (validationError) {
+			console.error("HTML validation failed:", validationError);
+			// Show error in iframe instead of crashing
+			this.iframe?.remove();
+			this.iframe = document.createElement("iframe");
+			this.iframe.style.cssText = "width: 100%; height: 100%; border: none;";
+			this.iframe.srcdoc = `
+				<html>
+				<body style="font-family: monospace; padding: 20px; background: #fff; color: #000;">
+					<h3 style="color: #c00;">HTML Validation Error</h3>
+					<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; white-space: pre-wrap;">${validationError}</pre>
+				</body>
+				</html>
+			`;
+			this.appendChild(this.iframe);
+			return;
+		}
+		// Remove previous iframe if exists
+		this.iframe?.remove();
+		if (this.sandboxUrlProvider) {
+			// Browser extension mode: use sandbox.html with postMessage
+			this.loadViaSandboxUrl(sandboxId, completeHtml);
+		} else {
+			// Web mode: use srcdoc
+			this.loadViaSrcdoc(sandboxId, completeHtml);
+		}
+	}
+	private loadViaSandboxUrl(sandboxId: string, completeHtml: string): void {
+		// Create iframe pointing to sandbox URL
+		this.iframe = document.createElement("iframe");
+		this.iframe.sandbox.add("allow-scripts");
+		this.iframe.sandbox.add("allow-modals");
+		this.iframe.style.width = "100%";
+		this.iframe.style.height = "100%";
+		this.iframe.style.border = "none";
+		this.iframe.src = this.sandboxUrlProvider!();
+		// Update router with iframe reference BEFORE appending to DOM
+		RUNTIME_MESSAGE_ROUTER.setSandboxIframe(sandboxId, this.iframe);
+		// Listen for open-external-url messages from iframe
+		const externalUrlHandler = (e: MessageEvent) => {
+			if (e.data.type === "open-external-url" && e.source === this.iframe?.contentWindow) {
+				// Use chrome.tabs API to open in new tab
+				const chromeAPI = (globalThis as any).chrome;
+				if (chromeAPI?.tabs) {
+					chromeAPI.tabs.create({ url: e.data.url });
+				} else {
+					// Fallback for non-extension context
+					window.open(e.data.url, "_blank");
+				}
+			}
+		};
+		window.addEventListener("message", externalUrlHandler);
+		// Listen for sandbox-ready and sandbox-error messages directly
+		const readyHandler = (e: MessageEvent) => {
+			if (e.data.type === "sandbox-ready" && e.source === this.iframe?.contentWindow) {
+				window.removeEventListener("message", readyHandler);
+				window.removeEventListener("message", errorHandler);
+				// Send content to sandbox
+				this.iframe?.contentWindow?.postMessage(
+					{
+						type: "sandbox-load",
+						sandboxId,
+						code: completeHtml,
+					},
+					"*",
+				);
+			}
+		};
+		const errorHandler = (e: MessageEvent) => {
+			if (e.data.type === "sandbox-error" && e.source === this.iframe?.contentWindow) {
+				window.removeEventListener("message", readyHandler);
+				window.removeEventListener("message", errorHandler);
+				// The sandbox.js already sent us the error via postMessage.
+				// We need to convert it to an execution-error message that the execute() consumer will handle.
+				// Simulate receiving an execution-error from the sandbox
+				window.postMessage(
+					{
+						sandboxId: sandboxId,
+						type: "execution-error",
+						error: { message: e.data.error, stack: e.data.stack },
+					},
+					"*",
+				);
+			}
+		};
+		window.addEventListener("message", readyHandler);
+		window.addEventListener("message", errorHandler);
+		this.appendChild(this.iframe);
+	}
+	private loadViaSrcdoc(sandboxId: string, completeHtml: string): void {
+		// Create iframe with srcdoc
+		this.iframe = document.createElement("iframe");
+		this.iframe.sandbox.add("allow-scripts");
+		this.iframe.sandbox.add("allow-modals");
+		this.iframe.style.width = "100%";
+		this.iframe.style.height = "100%";
+		this.iframe.style.border = "none";
+		this.iframe.srcdoc = completeHtml;
+		// Update router with iframe reference BEFORE appending to DOM
+		RUNTIME_MESSAGE_ROUTER.setSandboxIframe(sandboxId, this.iframe);
+		// Listen for open-external-url messages from iframe
+		const externalUrlHandler = (e: MessageEvent) => {
+			if (e.data.type === "open-external-url" && e.source === this.iframe?.contentWindow) {
+				// Fallback for non-extension context
+				window.open(e.data.url, "_blank");
+			}
+		};
+		window.addEventListener("message", externalUrlHandler);
+		this.appendChild(this.iframe);
+	}
+	/**
+	 * Execute code in sandbox
+	 * @param sandboxId Unique ID for this execution
+	 * @param code User code (plain JS for REPL, or full HTML for artifacts)
+	 * @param providers Runtime providers to inject
+	 * @param consumers Additional message consumers (optional, execute has its own internal consumer)
+	 * @param signal Abort signal
+	 * @returns Promise resolving to execution result
+	 */
+	public async execute(
+		sandboxId: string,
+		code: string,
+		providers: SandboxRuntimeProvider[] = [],
+		consumers: MessageConsumer[] = [],
+		signal?: AbortSignal,
+		isHtmlArtifact: boolean = false,
+	): Promise<SandboxResult> {
+		if (signal?.aborted) {
+			throw new Error("Execution aborted");
+		}
+		const consoleProvider = new ConsoleRuntimeProvider();
+		providers = [consoleProvider, ...providers];
+		RUNTIME_MESSAGE_ROUTER.registerSandbox(sandboxId, providers, consumers);
+		// Notify providers that execution is starting
+		for (const provider of providers) {
+			provider.onExecutionStart?.(sandboxId, signal);
+		}
+		const files: SandboxFile[] = [];
+		let completed = false;
+		return new Promise((resolve, reject) => {
+			// 4. Create execution consumer for lifecycle messages
+			const executionConsumer: MessageConsumer = {
+				async handleMessage(message: any): Promise<void> {
+					if (message.type === "file-returned") {
+						files.push({
+							fileName: message.fileName,
+							content: message.content,
+							mimeType: message.mimeType,
+						});
+					} else if (message.type === "execution-complete") {
+						completed = true;
+						cleanup();
+						resolve({
+							success: true,
+							console: consoleProvider.getLogs(),
+							files,
+							returnValue: message.returnValue,
+						});
+					} else if (message.type === "execution-error") {
+						completed = true;
+						cleanup();
+						resolve({ success: false, console: consoleProvider.getLogs(), error: message.error, files });
+					}
+				},
+			};
+			RUNTIME_MESSAGE_ROUTER.addConsumer(sandboxId, executionConsumer);
+			const cleanup = () => {
+				// Notify providers that execution has ended
+				for (const provider of providers) {
+					provider.onExecutionEnd?.(sandboxId);
+				}
+				RUNTIME_MESSAGE_ROUTER.unregisterSandbox(sandboxId);
+				signal?.removeEventListener("abort", abortHandler);
+				clearTimeout(timeoutId);
+				this.iframe?.remove();
+				this.iframe = undefined;
+			};
+			// Abort handler
+			const abortHandler = () => {
+				if (!completed) {
+					completed = true;
+					cleanup();
+					reject(new Error("Execution aborted"));
+				}
+			};
+			if (signal) {
+				signal.addEventListener("abort", abortHandler);
+			}
+			// Timeout handler (30 seconds)
+			const timeoutId = setTimeout(() => {
+				if (!completed) {
+					completed = true;
+					cleanup();
+					resolve({
+						success: false,
+						console: consoleProvider.getLogs(),
+						error: { message: "Execution timeout (120s)", stack: "" },
+						files,
+					});
+				}
+			}, 120000);
+			// 4. Prepare HTML and create iframe
+			const completeHtml = this.prepareHtmlDocument(sandboxId, code, providers, {
+				isHtmlArtifact,
+				isStandalone: false,
+			});
+			// 5. Validate HTML before sending to sandbox
+			const validationError = this.validateHtml(completeHtml);
+			if (validationError) {
+				reject(new Error(`HTML validation failed: ${validationError}`));
+				return;
+			}
+			if (this.sandboxUrlProvider) {
+				// Browser extension mode: wait for sandbox-ready
+				this.iframe = document.createElement("iframe");
+				this.iframe.sandbox.add("allow-scripts", "allow-modals");
+				this.iframe.style.cssText = "width: 100%; height: 100%; border: none;";
+				this.iframe.src = this.sandboxUrlProvider();
+				// Update router with iframe reference BEFORE appending to DOM
+				RUNTIME_MESSAGE_ROUTER.setSandboxIframe(sandboxId, this.iframe);
+				// Listen for sandbox-ready and sandbox-error messages
+				const readyHandler = (e: MessageEvent) => {
+					if (e.data.type === "sandbox-ready" && e.source === this.iframe?.contentWindow) {
+						window.removeEventListener("message", readyHandler);
+						window.removeEventListener("message", errorHandler);
+						// Send content to sandbox
+						this.iframe?.contentWindow?.postMessage(
+							{
+								type: "sandbox-load",
+								sandboxId,
+								code: completeHtml,
+							},
+							"*",
+						);
+					}
+				};
+				const errorHandler = (e: MessageEvent) => {
+					if (e.data.type === "sandbox-error" && e.source === this.iframe?.contentWindow) {
+						window.removeEventListener("message", readyHandler);
+						window.removeEventListener("message", errorHandler);
+						// Convert sandbox-error to execution-error for the execution consumer
+						window.postMessage(
+							{
+								sandboxId: sandboxId,
+								type: "execution-error",
+								error: { message: e.data.error, stack: e.data.stack },
+							},
+							"*",
+						);
+					}
+				};
+				window.addEventListener("message", readyHandler);
+				window.addEventListener("message", errorHandler);
+				this.appendChild(this.iframe);
+			} else {
+				// Web mode: use srcdoc
+				this.iframe = document.createElement("iframe");
+				this.iframe.sandbox.add("allow-scripts", "allow-modals");
+				this.iframe.style.cssText = "width: 100%; height: 100%; border: none; display: none;";
+				this.iframe.srcdoc = completeHtml;
+				// Update router with iframe reference BEFORE appending to DOM
+				RUNTIME_MESSAGE_ROUTER.setSandboxIframe(sandboxId, this.iframe);
+				this.appendChild(this.iframe);
+			}
+		});
+	}
+	/**
+	 * Validate HTML using DOMParser - returns error message if invalid, null if valid
+	 * Note: JavaScript syntax validation is done in sandbox.js to avoid CSP restrictions
+	 */
+	private validateHtml(html: string): string | null {
+		try {
+			const parser = new DOMParser();
+			const doc = parser.parseFromString(html, "text/html");
+			// Check for parser errors
+			const parserError = doc.querySelector("parsererror");
+			if (parserError) {
+				return parserError.textContent || "Unknown parse error";
+			}
+			return null;
+		} catch (error: any) {
+			return error.message || "Unknown validation error";
+		}
+	}
+	/**
+	 * Prepare complete HTML document with runtime + user code
+	 * PUBLIC so HtmlArtifact can use it for download button
+	 */
+	public prepareHtmlDocument(
+		sandboxId: string,
+		userCode: string,
+		providers: SandboxRuntimeProvider[] = [],
+		options?: PrepareHtmlOptions,
+	): string {
+		// Default options
+		const opts: PrepareHtmlOptions = {
+			isHtmlArtifact: false,
+			isStandalone: false,
+			...options,
+		};
+		// Runtime script that will be injected
+		const runtime = this.getRuntimeScript(sandboxId, providers, opts.isStandalone || false);
+		// Only check for HTML tags if explicitly marked as HTML artifact
+		// For javascript_repl, userCode is JavaScript that may contain HTML in string literals
+		if (opts.isHtmlArtifact) {
+			// HTML Artifact - inject runtime into existing HTML
+			const headMatch = userCode.match(/<head[^>]*>/i);
+			if (headMatch) {
+				const index = headMatch.index! + headMatch[0].length;
+				return userCode.slice(0, index) + runtime + userCode.slice(index);
+			}
+			const htmlMatch = userCode.match(/<html[^>]*>/i);
+			if (htmlMatch) {
+				const index = htmlMatch.index! + htmlMatch[0].length;
+				return userCode.slice(0, index) + runtime + userCode.slice(index);
+			}
+			// Fallback: prepend runtime
+			return runtime + userCode;
+		} else {
+			// REPL - wrap code in HTML with runtime and call complete() when done
+			// Escape </script> in user code to prevent premature tag closure
+			const escapedUserCode = escapeScriptContent(userCode);
+			return `<!DOCTYPE html>
+<html>
+<head>
+	${runtime}
+</head>
+<body>
+	<script type="module">
+		(async () => {
+			try {
+				// Wrap user code in async function to capture return value
+				const userCodeFunc = async () => {
+					${escapedUserCode}
+				};
+				const returnValue = await userCodeFunc();
+				// Call completion callbacks before complete()
+				if (window.__completionCallbacks && window.__completionCallbacks.length > 0) {
+					try {
+						await Promise.all(window.__completionCallbacks.map(cb => cb(true)));
+					} catch (e) {
+						console.error('Completion callback error:', e);
+					}
+				}
+				await window.complete(null, returnValue);
+			} catch (error) {
+				// Call completion callbacks before complete() (error path)
+				if (window.__completionCallbacks && window.__completionCallbacks.length > 0) {
+					try {
+						await Promise.all(window.__completionCallbacks.map(cb => cb(false)));
+					} catch (e) {
+						console.error('Completion callback error:', e);
+					}
+				}
+				await window.complete({
+					message: error?.message || String(error),
+					stack: error?.stack || new Error().stack
+				});
+			}
+		})();
+	</script>
+</body>
+</html>`;
+		}
+	}
+	/**
+	 * Generate runtime script from providers
+	 * @param sandboxId Unique sandbox ID
+	 * @param providers Runtime providers
+	 * @param isStandalone If true, skip runtime bridge and navigation interceptor (for standalone downloads)
+	 */
+	private getRuntimeScript(
+		sandboxId: string,
+		providers: SandboxRuntimeProvider[] = [],
+		isStandalone: boolean = false,
+	): string {
+		// Collect all data from providers
+		const allData: Record<string, any> = {};
+		for (const provider of providers) {
+			Object.assign(allData, provider.getData());
+		}
+		// Generate bridge code (skip if standalone)
+		const bridgeCode = isStandalone
+			? ""
+			: RuntimeMessageBridge.generateBridgeCode({
+					context: "sandbox-iframe",
+					sandboxId,
+				});
+		// Collect all runtime functions - pass sandboxId as string literal
+		const runtimeFunctions: string[] = [];
+		for (const provider of providers) {
+			runtimeFunctions.push(`(${provider.getRuntime().toString()})(${JSON.stringify(sandboxId)});`);
+		}
+		// Build script with HTML escaping
+		// Escape </script> to prevent premature tag closure in HTML parser
+		const dataInjection = Object.entries(allData)
+			.map(([key, value]) => {
+				const jsonStr = JSON.stringify(value).replace(/<\/script/gi, "<\\/script");
+				return `window.${key} = ${jsonStr};`;
+			})
+			.join("\n");
+		// TODO the font-size is needed, as chrome seems to inject a stylesheet into iframes
+		// found in an extension context like sidepanel, settin body { font-size: 75% }. It's
+		// definitely not our code doing that.
+		// See  https://stackoverflow.com/questions/71480433/chrome-is-injecting-some-stylesheet-in-popup-ui-which-reduces-the-font-size-to-7
+		// Navigation interceptor (only if NOT standalone)
+		const navigationInterceptor = isStandalone
+			? ""
+			: `
+// Navigation interceptor: prevent all navigation and open externally
+(function() {
+	// Intercept link clicks
+	document.addEventListener('click', function(e) {
+		const link = e.target.closest('a');
+		if (link && link.href) {
+			// Check if it's an external link (not javascript: or #hash)
+			if (link.href.startsWith('http://') || link.href.startsWith('https://')) {
+				e.preventDefault();
+				e.stopPropagation();
+				window.parent.postMessage({ type: 'open-external-url', url: link.href }, '*');
+			}
+		}
+	}, true);
+	// Intercept form submissions
+	document.addEventListener('submit', function(e) {
+		const form = e.target;
+		if (form && form.action) {
+			e.preventDefault();
+			e.stopPropagation();
+			window.parent.postMessage({ type: 'open-external-url', url: form.action }, '*');
+		}
+	}, true);
+	// Prevent window.location changes (only if not already redefined)
+	try {
+		const originalLocation = window.location;
+		Object.defineProperty(window, 'location', {
+			get: function() { return originalLocation; },
+			set: function(url) {
+				window.parent.postMessage({ type: 'open-external-url', url: url.toString() }, '*');
+			}
+		});
+	} catch (e) {
+		// Already defined, skip
+	}
+})();
+`;
+		return `<style>
+html, body {
+	font-size: initial;
+}
+</style>
+<script>
+window.sandboxId = ${JSON.stringify(sandboxId)};
+${dataInjection}
+${bridgeCode}
+${runtimeFunctions.join("\n")}
+${navigationInterceptor}
+</script>`;
+	}
+}