@mariozechner/pi-web-ui 0.5.44 → 0.5.46

package/src/components/message-renderer-registry.ts

@@ -0,0 +1,28 @@
+import type { TemplateResult } from "lit";
+import type { AppMessage } from "./Messages.js";
+
+// Extract role type from AppMessage union
+export type MessageRole = AppMessage["role"];
+
+// Generic message renderer typed to specific message type
+export interface MessageRenderer<TMessage extends AppMessage = AppMessage> {
+	render(message: TMessage): TemplateResult;
+}
+
+// Registry of custom message renderers by role
+const messageRenderers = new Map<MessageRole, MessageRenderer<any>>();
+
+export function registerMessageRenderer<TRole extends MessageRole>(
+	role: TRole,
+	renderer: MessageRenderer<Extract<AppMessage, { role: TRole }>>,
+): void {
+	messageRenderers.set(role, renderer);
+}
+
+export function getMessageRenderer(role: MessageRole): MessageRenderer | undefined {
+	return messageRenderers.get(role);
+}
+
+export function renderMessage(message: AppMessage): TemplateResult | undefined {
+	return messageRenderers.get(message.role)?.render(message);
+}

package/src/components/sandbox/ArtifactsRuntimeProvider.ts

@@ -0,0 +1,219 @@
+import {
+	ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO,
+	ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW,
+} from "../../prompts/prompts.js";
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+// Define minimal interface for ArtifactsPanel to avoid circular dependencies
+interface ArtifactsPanelLike {
+	artifacts: Map<string, { content: string }>;
+	tool: {
+		execute(toolCallId: string, args: { command: string; filename: string; content?: string }): Promise<any>;
+	};
+}
+
+interface AgentLike {
+	appendMessage(message: any): void;
+}
+
+/**
+ * Artifacts Runtime Provider
+ *
+ * Provides programmatic access to session artifacts from sandboxed code.
+ * Allows code to create, read, update, and delete artifacts dynamically.
+ * Supports both online (extension) and offline (downloaded HTML) modes.
+ */
+export class ArtifactsRuntimeProvider implements SandboxRuntimeProvider {
+	constructor(
+		private artifactsPanel: ArtifactsPanelLike,
+		private agent?: AgentLike,
+		private readWrite: boolean = true,
+	) {}
+
+	getData(): Record<string, any> {
+		// Inject artifact snapshot for offline mode
+		const snapshot: Record<string, string> = {};
+		this.artifactsPanel.artifacts.forEach((artifact, filename) => {
+			snapshot[filename] = artifact.content;
+		});
+		return { artifacts: snapshot };
+	}
+
+	getRuntime(): (sandboxId: string) => void {
+		// This function will be stringified, so no external references!
+		return (_sandboxId: string) => {
+			// Auto-parse/stringify for .json files
+			const isJsonFile = (filename: string) => filename.endsWith(".json");
+
+			(window as any).listArtifacts = async (): Promise<string[]> => {
+				// Online: ask extension
+				if ((window as any).sendRuntimeMessage) {
+					const response = await (window as any).sendRuntimeMessage({
+						type: "artifact-operation",
+						action: "list",
+					});
+					if (!response.success) throw new Error(response.error);
+					return response.result;
+				}
+				// Offline: return snapshot keys
+				else {
+					return Object.keys((window as any).artifacts || {});
+				}
+			};
+
+			(window as any).getArtifact = async (filename: string): Promise<any> => {
+				let content: string;
+
+				// Online: ask extension
+				if ((window as any).sendRuntimeMessage) {
+					const response = await (window as any).sendRuntimeMessage({
+						type: "artifact-operation",
+						action: "get",
+						filename,
+					});
+					if (!response.success) throw new Error(response.error);
+					content = response.result;
+				}
+				// Offline: read snapshot
+				else {
+					if (!(window as any).artifacts?.[filename]) {
+						throw new Error(`Artifact not found (offline mode): ${filename}`);
+					}
+					content = (window as any).artifacts[filename];
+				}
+
+				// Auto-parse .json files
+				if (isJsonFile(filename)) {
+					try {
+						return JSON.parse(content);
+					} catch (e) {
+						throw new Error(`Failed to parse JSON from ${filename}: ${e}`);
+					}
+				}
+				return content;
+			};
+
+			(window as any).createOrUpdateArtifact = async (
+				filename: string,
+				content: any,
+				mimeType?: string,
+			): Promise<void> => {
+				if (!(window as any).sendRuntimeMessage) {
+					throw new Error("Cannot create/update artifacts in offline mode (read-only)");
+				}
+
+				let finalContent = content;
+				// Auto-stringify .json files
+				if (isJsonFile(filename) && typeof content !== "string") {
+					finalContent = JSON.stringify(content, null, 2);
+				} else if (typeof content !== "string") {
+					finalContent = JSON.stringify(content, null, 2);
+				}
+
+				const response = await (window as any).sendRuntimeMessage({
+					type: "artifact-operation",
+					action: "createOrUpdate",
+					filename,
+					content: finalContent,
+					mimeType,
+				});
+				if (!response.success) throw new Error(response.error);
+			};
+
+			(window as any).deleteArtifact = async (filename: string): Promise<void> => {
+				if (!(window as any).sendRuntimeMessage) {
+					throw new Error("Cannot delete artifacts in offline mode (read-only)");
+				}
+
+				const response = await (window as any).sendRuntimeMessage({
+					type: "artifact-operation",
+					action: "delete",
+					filename,
+				});
+				if (!response.success) throw new Error(response.error);
+			};
+		};
+	}
+
+	async handleMessage(message: any, respond: (response: any) => void): Promise<void> {
+		if (message.type !== "artifact-operation") {
+			return;
+		}
+
+		const { action, filename, content, mimeType } = message;
+
+		try {
+			switch (action) {
+				case "list": {
+					const filenames = Array.from(this.artifactsPanel.artifacts.keys());
+					respond({ success: true, result: filenames });
+					break;
+				}
+
+				case "get": {
+					const artifact = this.artifactsPanel.artifacts.get(filename);
+					if (!artifact) {
+						respond({ success: false, error: `Artifact not found: ${filename}` });
+					} else {
+						respond({ success: true, result: artifact.content });
+					}
+					break;
+				}
+
+				case "createOrUpdate": {
+					try {
+						const exists = this.artifactsPanel.artifacts.has(filename);
+						const command = exists ? "rewrite" : "create";
+						const action = exists ? "update" : "create";
+
+						await this.artifactsPanel.tool.execute("", {
+							command,
+							filename,
+							content,
+						});
+						this.agent?.appendMessage({
+							role: "artifact",
+							action,
+							filename,
+							content,
+							...(action === "create" && { title: filename }),
+							timestamp: new Date().toISOString(),
+						});
+						respond({ success: true });
+					} catch (err: any) {
+						respond({ success: false, error: err.message });
+					}
+					break;
+				}
+
+				case "delete": {
+					try {
+						await this.artifactsPanel.tool.execute("", {
+							command: "delete",
+							filename,
+						});
+						this.agent?.appendMessage({
+							role: "artifact",
+							action: "delete",
+							filename,
+							timestamp: new Date().toISOString(),
+						});
+						respond({ success: true });
+					} catch (err: any) {
+						respond({ success: false, error: err.message });
+					}
+					break;
+				}
+
+				default:
+					respond({ success: false, error: `Unknown artifact action: ${action}` });
+			}
+		} catch (error: any) {
+			respond({ success: false, error: error.message });
+		}
+	}
+
+	getDescription(): string {
+		return this.readWrite ? ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW : ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO;
+	}
+}

package/src/components/sandbox/AttachmentsRuntimeProvider.ts

@@ -0,0 +1,66 @@
+import { ATTACHMENTS_RUNTIME_DESCRIPTION } from "../../prompts/prompts.js";
+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.
+ * Attachments are read-only snapshot data - no messaging needed.
+ */
+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!
+		// These functions read directly from window.attachments
+		// Works both online AND offline (no messaging needed!)
+		return (_sandboxId: string) => {
+			(window as any).listAttachments = () =>
+				((window as any).attachments || []).map((a: any) => ({
+					id: a.id,
+					fileName: a.fileName,
+					mimeType: a.mimeType,
+					size: a.size,
+				}));
+
+			(window as any).readTextAttachment = (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).readBinaryAttachment = (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;
+			};
+		};
+	}
+
+	getDescription(): string {
+		return ATTACHMENTS_RUNTIME_DESCRIPTION;
+	}
+}

package/src/components/sandbox/ConsoleRuntimeProvider.ts

@@ -0,0 +1,187 @@
+import type { SandboxRuntimeProvider } from "./SandboxRuntimeProvider.js";
+
+export interface ConsoleLog {
+	type: "log" | "warn" | "error" | "info";
+	text: string;
+	args?: unknown[];
+}
+
+/**
+ * Console Runtime Provider
+ *
+ * REQUIRED provider that should always be included first.
+ * Provides console capture, error handling, and execution lifecycle management.
+ * Collects console output for retrieval by caller.
+ */
+export class ConsoleRuntimeProvider implements SandboxRuntimeProvider {
+	private logs: ConsoleLog[] = [];
+	private completionError: { message: string; stack: string } | null = null;
+	private completed = false;
+
+	getData(): Record<string, any> {
+		// No data needed
+		return {};
+	}
+
+	getDescription(): string {
+		return "";
+	}
+
+	getRuntime(): (sandboxId: string) => void {
+		return (_sandboxId: string) => {
+			// Store truly original console methods on first wrap only
+			// This prevents accumulation of wrapper functions across multiple executions
+			if (!(window as any).__originalConsole) {
+				(window as any).__originalConsole = {
+					log: console.log.bind(console),
+					error: console.error.bind(console),
+					warn: console.warn.bind(console),
+					info: console.info.bind(console),
+				};
+			}
+
+			// Always use the truly original console, not the current (possibly wrapped) one
+			const originalConsole = (window as any).__originalConsole;
+
+			// Track pending send promises to wait for them in onCompleted
+			const pendingSends: Promise<any>[] = [];
+
+			["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(" ");
+
+					// Always log locally too (using truly original console)
+					(originalConsole as any)[method].apply(console, args);
+
+					// Send immediately and track the promise (only in extension context)
+					if ((window as any).sendRuntimeMessage) {
+						const sendPromise = (window as any)
+							.sendRuntimeMessage({
+								type: "console",
+								method,
+								text,
+								args,
+							})
+							.catch(() => {});
+						pendingSends.push(sendPromise);
+					}
+				};
+			});
+
+			// Register completion callback to wait for all pending sends
+			if ((window as any).onCompleted) {
+				(window as any).onCompleted(async (_success: boolean) => {
+					// Wait for all pending console sends to complete
+					if (pendingSends.length > 0) {
+						await Promise.all(pendingSends);
+					}
+				});
+			}
+
+			// Track errors for HTML artifacts
+			let lastError: { message: string; stack: string } | null = null;
+
+			// Error handlers - track errors but don't log them
+			// (they'll be shown via execution-error message)
+			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.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,
+				};
+			});
+
+			// Expose complete() method for user code to call
+			let completionSent = false;
+			(window as any).complete = async (error?: { message: string; stack: string }, returnValue?: any) => {
+				if (completionSent) return;
+				completionSent = true;
+
+				const finalError = error || lastError;
+
+				if ((window as any).sendRuntimeMessage) {
+					if (finalError) {
+						await (window as any).sendRuntimeMessage({
+							type: "execution-error",
+							error: finalError,
+						});
+					} else {
+						await (window as any).sendRuntimeMessage({
+							type: "execution-complete",
+							returnValue,
+						});
+					}
+				}
+			};
+		};
+	}
+
+	async handleMessage(message: any, respond: (response: any) => void): Promise<void> {
+		if (message.type === "console") {
+			// Collect console output
+			this.logs.push({
+				type:
+					message.method === "error"
+						? "error"
+						: message.method === "warn"
+							? "warn"
+							: message.method === "info"
+								? "info"
+								: "log",
+				text: message.text,
+				args: message.args,
+			});
+			// Acknowledge receipt
+			respond({ success: true });
+		}
+	}
+
+	/**
+	 * Get collected console logs
+	 */
+	getLogs(): ConsoleLog[] {
+		return this.logs;
+	}
+
+	/**
+	 * Get completion status
+	 */
+	isCompleted(): boolean {
+		return this.completed;
+	}
+
+	/**
+	 * Get completion error if any
+	 */
+	getCompletionError(): { message: string; stack: string } | null {
+		return this.completionError;
+	}
+
+	/**
+	 * Reset state for reuse
+	 */
+	reset(): void {
+		this.logs = [];
+		this.completionError = null;
+		this.completed = false;
+	}
+}

package/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/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();
+	}
+}