pi-usereq 0.6.0 → 0.10.0

package/pi.dev-src/pi-mono/web-ui/src/components/sandbox/FileDownloadRuntimeProvider.ts

@@ -0,0 +1,110 @@
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+export interface DownloadableFile {
+	fileName: string;
+	content: string | Uint8Array;
+	mimeType: string;
+}
+
+/**
+ * File Download Runtime Provider
+ *
+ * Provides returnDownloadableFile() for creating user downloads.
+ * Files returned this way are NOT accessible to the LLM later (one-time download).
+ * Works both online (sends to extension) and offline (triggers browser download directly).
+ * Collects files for retrieval by caller.
+ */
+export class FileDownloadRuntimeProvider implements SandboxRuntimeProvider {
+	private files: DownloadableFile[] = [];
+
+	getData(): Record<string, any> {
+		// No data needed
+		return {};
+	}
+
+	getRuntime(): (sandboxId: string) => void {
+		return (_sandboxId: string) => {
+			(window as any).returnDownloadableFile = 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(
+							"returnDownloadableFile: 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(
+							"returnDownloadableFile: 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";
+				}
+
+				// Send to extension if in extension context (online mode)
+				if ((window as any).sendRuntimeMessage) {
+					const response = await (window as any).sendRuntimeMessage({
+						type: "file-returned",
+						fileName,
+						content: finalContent,
+						mimeType: finalMimeType,
+					});
+					if (response.error) throw new Error(response.error);
+				} else {
+					// Offline mode: trigger browser download directly
+					const blob = new Blob([finalContent instanceof Uint8Array ? finalContent : finalContent], {
+						type: finalMimeType,
+					});
+					const url = URL.createObjectURL(blob);
+					const a = document.createElement("a");
+					a.href = url;
+					a.download = fileName;
+					a.click();
+					URL.revokeObjectURL(url);
+				}
+			};
+		};
+	}
+
+	async handleMessage(message: any, respond: (response: any) => void): Promise<void> {
+		if (message.type === "file-returned") {
+			// Collect file for caller
+			this.files.push({
+				fileName: message.fileName,
+				content: message.content,
+				mimeType: message.mimeType,
+			});
+
+			respond({ success: true });
+		}
+	}
+
+	/**
+	 * Get collected files
+	 */
+	getFiles(): DownloadableFile[] {
+		return this.files;
+	}
+
+	/**
+	 * Reset state for reuse
+	 */
+	reset(): void {
+		this.files = [];
+	}
+
+	getDescription(): string {
+		return "returnDownloadableFile(filename, content, mimeType?) - Create downloadable file for user (one-time download, not accessible later)";
+	}
+}

package/pi.dev-src/pi-mono/web-ui/src/components/sandbox/RuntimeMessageBridge.ts

@@ -0,0 +1,82 @@
+/**
+ * Generates sendRuntimeMessage() function for injection into execution contexts.
+ * Provides unified messaging API that works in both sandbox iframe and user script contexts.
+ */
+
+export type MessageType = "request-response" | "fire-and-forget";
+
+export interface RuntimeMessageBridgeOptions {
+	context: "sandbox-iframe" | "user-script";
+	sandboxId: string;
+}
+
+// biome-ignore lint/complexity/noStaticOnlyClass: fine
+export class RuntimeMessageBridge {
+	/**
+	 * Generate sendRuntimeMessage() function as injectable string.
+	 * Returns the function source code to be injected into target context.
+	 */
+	static generateBridgeCode(options: RuntimeMessageBridgeOptions): string {
+		if (options.context === "sandbox-iframe") {
+			return RuntimeMessageBridge.generateSandboxBridge(options.sandboxId);
+		} else {
+			return RuntimeMessageBridge.generateUserScriptBridge(options.sandboxId);
+		}
+	}
+
+	private static generateSandboxBridge(sandboxId: string): string {
+		// Returns stringified function that uses window.parent.postMessage
+		return `
+window.__completionCallbacks = [];
+window.sendRuntimeMessage = async (message) => {
+    const messageId = 'msg_' + Date.now() + '_' + Math.random().toString(36).substring(2, 9);
+
+    return new Promise((resolve, reject) => {
+        const handler = (e) => {
+            if (e.data.type === 'runtime-response' && e.data.messageId === messageId) {
+                window.removeEventListener('message', handler);
+                if (e.data.success) {
+                    resolve(e.data);
+                } else {
+                    reject(new Error(e.data.error || 'Operation failed'));
+                }
+            }
+        };
+
+        window.addEventListener('message', handler);
+
+        window.parent.postMessage({
+            ...message,
+            sandboxId: ${JSON.stringify(sandboxId)},
+            messageId: messageId
+        }, '*');
+
+        // Timeout after 30s
+        setTimeout(() => {
+            window.removeEventListener('message', handler);
+            reject(new Error('Runtime message timeout'));
+        }, 30000);
+    });
+};
+window.onCompleted = (callback) => {
+    window.__completionCallbacks.push(callback);
+};
+`.trim();
+	}
+
+	private static generateUserScriptBridge(sandboxId: string): string {
+		// Returns stringified function that uses chrome.runtime.sendMessage
+		return `
+window.__completionCallbacks = [];
+window.sendRuntimeMessage = async (message) => {
+    return await chrome.runtime.sendMessage({
+        ...message,
+        sandboxId: ${JSON.stringify(sandboxId)}
+    });
+};
+window.onCompleted = (callback) => {
+    window.__completionCallbacks.push(callback);
+};
+`.trim();
+	}
+}

package/pi.dev-src/pi-mono/web-ui/src/components/sandbox/RuntimeMessageRouter.ts

@@ -0,0 +1,216 @@
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+// Type declaration for chrome extension API (when available)
+declare const chrome: any;
+
+/**
+ * Message consumer interface - components that want to receive messages from sandboxes
+ */
+export interface MessageConsumer {
+	/**
+	 * Handle a message from a sandbox.
+	 * All consumers receive all messages - decide internally what to handle.
+	 */
+	handleMessage(message: any): Promise<void>;
+}
+
+/**
+ * Sandbox context - tracks active sandboxes and their consumers
+ */
+interface SandboxContext {
+	sandboxId: string;
+	iframe: HTMLIFrameElement | null; // null until setSandboxIframe() or null for user scripts
+	providers: SandboxRuntimeProvider[];
+	consumers: Set<MessageConsumer>;
+}
+
+/**
+ * Centralized message router for all runtime communication.
+ *
+ * This singleton replaces all individual window.addEventListener("message") calls
+ * with a single global listener that routes messages to the appropriate handlers.
+ * Also handles user script messages from chrome.runtime.onUserScriptMessage.
+ *
+ * Benefits:
+ * - Single global listener instead of multiple independent listeners
+ * - Automatic cleanup when sandboxes are destroyed
+ * - Support for bidirectional communication (providers) and broadcasting (consumers)
+ * - Works with both sandbox iframes and user scripts
+ * - Clear lifecycle management
+ */
+export class RuntimeMessageRouter {
+	private sandboxes = new Map<string, SandboxContext>();
+	private messageListener: ((e: MessageEvent) => void) | null = null;
+	private userScriptMessageListener:
+		| ((message: any, sender: any, sendResponse: (response: any) => void) => boolean)
+		| null = null;
+
+	/**
+	 * Register a new sandbox with its runtime providers.
+	 * Call this BEFORE creating the iframe (for sandbox contexts) or executing user script.
+	 */
+	registerSandbox(sandboxId: string, providers: SandboxRuntimeProvider[], consumers: MessageConsumer[]): void {
+		this.sandboxes.set(sandboxId, {
+			sandboxId,
+			iframe: null, // Will be set via setSandboxIframe() for sandbox contexts
+			providers,
+			consumers: new Set(consumers),
+		});
+
+		// Setup global listener if not already done
+		this.setupListener();
+	}
+
+	/**
+	 * 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;
+		}
+	}
+
+	/**
+	 * 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 listeners
+		if (this.sandboxes.size === 0) {
+			// Remove iframe listener
+			if (this.messageListener) {
+				window.removeEventListener("message", this.messageListener);
+				this.messageListener = null;
+			}
+
+			// Remove user script listener
+			if (this.userScriptMessageListener && typeof chrome !== "undefined" && chrome.runtime?.onUserScriptMessage) {
+				chrome.runtime.onUserScriptMessage.removeListener(this.userScriptMessageListener);
+				this.userScriptMessageListener = null;
+			}
+		}
+	}
+
+	/**
+	 * 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);
+		}
+	}
+
+	/**
+	 * 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);
+		}
+	}
+
+	/**
+	 * Setup the global message listeners (called automatically)
+	 */
+	private setupListener(): void {
+		// Setup sandbox iframe listener
+		if (!this.messageListener) {
+			this.messageListener = async (e: MessageEvent) => {
+				const { sandboxId, messageId } = e.data;
+				if (!sandboxId) return;
+
+				const context = this.sandboxes.get(sandboxId);
+				if (!context) {
+					return;
+				}
+
+				// Create respond() function for bidirectional communication
+				const respond = (response: any) => {
+					context.iframe?.contentWindow?.postMessage(
+						{
+							type: "runtime-response",
+							messageId,
+							sandboxId,
+							...response,
+						},
+						"*",
+					);
+				};
+
+				// 1. Try provider handlers first (for bidirectional comm)
+				for (const provider of context.providers) {
+					if (provider.handleMessage) {
+						await provider.handleMessage(e.data, respond);
+						// Don't stop - let consumers also handle the message
+					}
+				}
+
+				// 2. Broadcast to consumers (one-way messages or lifecycle events)
+				for (const consumer of context.consumers) {
+					await consumer.handleMessage(e.data);
+					// Don't stop - let all consumers see the message
+				}
+			};
+
+			window.addEventListener("message", this.messageListener);
+		}
+
+		// Setup user script message listener
+		if (!this.userScriptMessageListener) {
+			// Guard: check if we're in extension context
+			if (typeof chrome === "undefined" || !chrome.runtime?.onUserScriptMessage) {
+				return;
+			}
+
+			this.userScriptMessageListener = (message: any, _sender: any, sendResponse: (response: any) => void) => {
+				const { sandboxId } = message;
+				if (!sandboxId) return false;
+
+				const context = this.sandboxes.get(sandboxId);
+				if (!context) return false;
+
+				const respond = (response: any) => {
+					sendResponse({
+						...response,
+						sandboxId,
+					});
+				};
+
+				// Route to providers (async)
+				(async () => {
+					// 1. Try provider handlers first (for bidirectional comm)
+					for (const provider of context.providers) {
+						if (provider.handleMessage) {
+							await provider.handleMessage(message, respond);
+							// Don't stop - let consumers also handle the message
+						}
+					}
+
+					// 2. Broadcast to consumers (one-way messages or lifecycle events)
+					for (const consumer of context.consumers) {
+						await consumer.handleMessage(message);
+						// Don't stop - let all consumers see the message
+					}
+				})();
+
+				return true; // Indicates async response
+			};
+
+			chrome.runtime.onUserScriptMessage.addListener(this.userScriptMessageListener);
+		}
+	}
+}
+
+/**
+ * Global singleton instance.
+ * Import this from wherever you need to interact with the message router.
+ */
+export const RUNTIME_MESSAGE_ROUTER = new RuntimeMessageRouter();

package/pi.dev-src/pi-mono/web-ui/src/components/sandbox/SandboxRuntimeProvider.ts

@@ -0,0 +1,52 @@
+/**
+ * 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.
+	 * All providers receive all messages - decide internally what to handle.
+	 *
+	 * @param message - The message from the sandbox
+	 * @param respond - Function to send a response back to the sandbox
+	 */
+	handleMessage?(message: any, respond: (response: any) => void): Promise<void>;
+
+	/**
+	 * Optional documentation describing what globals/functions this provider injects.
+	 * This will be appended to tool descriptions dynamically so the LLM knows what's available.
+	 */
+	getDescription(): string;
+
+	/**
+	 * Optional lifecycle callback invoked when sandbox execution starts.
+	 * Providers can use this to track abort signals for cancellation of async operations.
+	 *
+	 * @param sandboxId - The unique identifier for this sandbox execution
+	 * @param signal - Optional AbortSignal that will be triggered if execution is cancelled
+	 */
+	onExecutionStart?(sandboxId: string, signal?: AbortSignal): void;
+
+	/**
+	 * Optional lifecycle callback invoked when sandbox execution ends (success, error, or abort).
+	 * Providers can use this to clean up any resources associated with the sandbox.
+	 *
+	 * @param sandboxId - The unique identifier for this sandbox execution
+	 */
+	onExecutionEnd?(sandboxId: string): void;
+}

package/pi.dev-src/pi-mono/web-ui/src/dialogs/ApiKeyPromptDialog.ts

@@ -0,0 +1,75 @@
+import { customElement, state } from "lit/decorators.js";
+import "../components/ProviderKeyInput.js";
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
+import { getAppStorage } from "../storage/app-storage.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("api-key-prompt-dialog")
+export class ApiKeyPromptDialog extends DialogBase {
+	@state() private provider = "";
+
+	private resolvePromise?: (success: boolean) => void;
+	private unsubscribe?: () => void;
+
+	protected modalWidth = "min(500px, 90vw)";
+	protected modalHeight = "auto";
+
+	static async prompt(provider: string): Promise<boolean> {
+		const dialog = new ApiKeyPromptDialog();
+		dialog.provider = provider;
+		dialog.open();
+
+		return new Promise((resolve) => {
+			dialog.resolvePromise = resolve;
+		});
+	}
+
+	override async connectedCallback() {
+		super.connectedCallback();
+
+		// Poll for key existence - when key is added, resolve and close
+		const checkInterval = setInterval(async () => {
+			const hasKey = !!(await getAppStorage().providerKeys.get(this.provider));
+			if (hasKey) {
+				clearInterval(checkInterval);
+				if (this.resolvePromise) {
+					this.resolvePromise(true);
+					this.resolvePromise = undefined;
+				}
+				this.close();
+			}
+		}, 500);
+
+		this.unsubscribe = () => clearInterval(checkInterval);
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.unsubscribe) {
+			this.unsubscribe();
+			this.unsubscribe = undefined;
+		}
+	}
+
+	override close() {
+		super.close();
+		if (this.resolvePromise) {
+			this.resolvePromise(false);
+		}
+	}
+
+	protected override renderContent() {
+		return html`
+			${DialogContent({
+				children: html`
+					${DialogHeader({
+						title: i18n("API Key Required"),
+					})}
+					<provider-key-input .provider=${this.provider}></provider-key-input>
+				`,
+			})}
+		`;
+	}
+}