@mariozechner/pi-web-ui 0.5.44 → 0.5.46

package/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/src/components/sandbox/SandboxRuntimeProvider.ts

@@ -0,0 +1,35 @@
+/**
+ * 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;
+}

package/src/dialogs/ApiKeyPromptDialog.ts

@@ -29,7 +29,7 @@ export class ApiKeyPromptDialog extends DialogBase {
 
 		// Poll for key existence - when key is added, resolve and close
 		const checkInterval = setInterval(async () => {
-			const hasKey = await getAppStorage().providerKeys.hasKey(this.provider);
+			const hasKey = !!(await getAppStorage().providerKeys.get(this.provider));
 			if (hasKey) {
 				clearInterval(checkInterval);
 				if (this.resolvePromise) {
@@ -64,11 +64,8 @@ export class ApiKeyPromptDialog extends DialogBase {
 				children: html`
 					${DialogHeader({
 						title: i18n("API Key Required"),
-						description: i18n("Enter your API key for {provider}").replace("{provider}", this.provider),
 					})}
-					<div class="mt-4">
-						<provider-key-input .provider=${this.provider}></provider-key-input>
-					</div>
+					<provider-key-input .provider=${this.provider}></provider-key-input>
 				`,
 			})}
 		`;

package/src/dialogs/ModelSelector.ts

@@ -101,7 +101,7 @@ export class ModelSelector extends DialogBase {
 
 			// Fetch details for each model and convert to Model format
 			const ollamaModelPromises: Promise<Model<any> | null>[] = models
-				.map(async (model) => {
+				.map(async (model: any) => {
 					try {
 						// Get model details
 						const details = await ollama.show({
@@ -144,7 +144,7 @@ export class ModelSelector extends DialogBase {
 						return null;
 					}
 				})
-				.filter((m) => m !== null);
+				.filter((m: any) => m !== null);
 
 			const results = await Promise.all(ollamaModelPromises);
 			this.ollamaModels = results.filter((m): m is Model<any> => m !== null);

package/src/dialogs/PersistentStorageDialog.ts

@@ -0,0 +1,141 @@
+import { Button, DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
+import { customElement, state } from "lit/decorators.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("persistent-storage-dialog")
+export class PersistentStorageDialog extends DialogBase {
+	@state() private requesting = false;
+
+	private resolvePromise?: (userApproved: boolean) => void;
+
+	protected modalWidth = "min(500px, 90vw)";
+	protected modalHeight = "auto";
+
+	/**
+	 * Request persistent storage permission.
+	 * Returns true if browser granted persistent storage, false otherwise.
+	 */
+	static async request(): Promise<boolean> {
+		// Check if already persisted
+		if (navigator.storage?.persisted) {
+			const alreadyPersisted = await navigator.storage.persisted();
+			if (alreadyPersisted) {
+				console.log("✓ Persistent storage already granted");
+				return true;
+			}
+		}
+
+		// Show dialog and wait for user response
+		const dialog = new PersistentStorageDialog();
+		dialog.open();
+
+		const userApproved = await new Promise<boolean>((resolve) => {
+			dialog.resolvePromise = resolve;
+		});
+
+		if (!userApproved) {
+			console.warn("⚠ User declined persistent storage - sessions may be lost");
+			return false;
+		}
+
+		// User approved, request from browser
+		if (!navigator.storage?.persist) {
+			console.warn("⚠ Persistent storage API not available");
+			return false;
+		}
+
+		try {
+			const granted = await navigator.storage.persist();
+			if (granted) {
+				console.log("✓ Persistent storage granted - sessions will be preserved");
+			} else {
+				console.warn("⚠ Browser denied persistent storage - sessions may be lost under storage pressure");
+			}
+			return granted;
+		} catch (error) {
+			console.error("Failed to request persistent storage:", error);
+			return false;
+		}
+	}
+
+	private handleGrant() {
+		if (this.resolvePromise) {
+			this.resolvePromise(true);
+			this.resolvePromise = undefined;
+		}
+		this.close();
+	}
+
+	private handleDeny() {
+		if (this.resolvePromise) {
+			this.resolvePromise(false);
+			this.resolvePromise = undefined;
+		}
+		this.close();
+	}
+
+	override close() {
+		super.close();
+		if (this.resolvePromise) {
+			this.resolvePromise(false);
+		}
+	}
+
+	protected override renderContent() {
+		return html`
+			${DialogContent({
+				children: html`
+					${DialogHeader({
+						title: i18n("Storage Permission Required"),
+						description: i18n("This app needs persistent storage to save your conversations"),
+					})}
+
+					<div class="mt-4 flex flex-col gap-4">
+						<div class="flex gap-3 p-4 bg-warning/10 border border-warning/20 rounded-lg">
+							<div class="flex-shrink-0 text-warning">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+									<line x1="12" y1="9" x2="12" y2="13"></line>
+									<line x1="12" y1="17" x2="12.01" y2="17"></line>
+								</svg>
+							</div>
+							<div class="text-sm">
+								<p class="font-medium text-foreground mb-1">${i18n("Why is this needed?")}</p>
+								<p class="text-muted-foreground">
+									${i18n(
+										"Without persistent storage, your browser may delete saved conversations when it needs disk space. Granting this permission ensures your chat history is preserved.",
+									)}
+								</p>
+							</div>
+						</div>
+
+						<div class="text-sm text-muted-foreground">
+							<p class="mb-2">${i18n("What this means:")}</p>
+							<ul class="list-disc list-inside space-y-1 ml-2">
+								<li>${i18n("Your conversations will be saved locally in your browser")}</li>
+								<li>${i18n("Data will not be deleted automatically to free up space")}</li>
+								<li>${i18n("You can still manually clear data at any time")}</li>
+								<li>${i18n("No data is sent to external servers")}</li>
+							</ul>
+						</div>
+					</div>
+
+					<div class="mt-6 flex gap-3 justify-end">
+						${Button({
+							variant: "outline",
+							onClick: () => this.handleDeny(),
+							disabled: this.requesting,
+							children: i18n("Continue Anyway"),
+						})}
+						${Button({
+							variant: "default",
+							onClick: () => this.handleGrant(),
+							disabled: this.requesting,
+							children: this.requesting ? i18n("Requesting...") : i18n("Grant Permission"),
+						})}
+					</div>
+				`,
+			})}
+		`;
+	}
+}

package/src/dialogs/SessionListDialog.ts

@@ -0,0 +1,148 @@
+import { DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
+import { customElement, state } from "lit/decorators.js";
+import { getAppStorage } from "../storage/app-storage.js";
+import type { SessionMetadata } from "../storage/types.js";
+import { formatUsage } from "../utils/format.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("session-list-dialog")
+export class SessionListDialog extends DialogBase {
+	@state() private sessions: SessionMetadata[] = [];
+	@state() private loading = true;
+
+	private onSelectCallback?: (sessionId: string) => void;
+	private onDeleteCallback?: (sessionId: string) => void;
+	private deletedSessions = new Set<string>();
+	private closedViaSelection = false;
+
+	protected modalWidth = "min(600px, 90vw)";
+	protected modalHeight = "min(700px, 90vh)";
+
+	static async open(onSelect: (sessionId: string) => void, onDelete?: (sessionId: string) => void) {
+		const dialog = new SessionListDialog();
+		dialog.onSelectCallback = onSelect;
+		dialog.onDeleteCallback = onDelete;
+		dialog.open();
+		await dialog.loadSessions();
+	}
+
+	private async loadSessions() {
+		this.loading = true;
+		try {
+			const storage = getAppStorage();
+			this.sessions = await storage.sessions.getAllMetadata();
+		} catch (err) {
+			console.error("Failed to load sessions:", err);
+			this.sessions = [];
+		} finally {
+			this.loading = false;
+		}
+	}
+
+	private async handleDelete(sessionId: string, event: Event) {
+		event.stopPropagation();
+
+		if (!confirm(i18n("Delete this session?"))) {
+			return;
+		}
+
+		try {
+			const storage = getAppStorage();
+			if (!storage.sessions) return;
+
+			await storage.sessions.deleteSession(sessionId);
+			await this.loadSessions();
+
+			// Track deleted session
+			this.deletedSessions.add(sessionId);
+		} catch (err) {
+			console.error("Failed to delete session:", err);
+		}
+	}
+
+	override close() {
+		super.close();
+
+		// Only notify about deleted sessions if dialog wasn't closed via selection
+		if (!this.closedViaSelection && this.onDeleteCallback && this.deletedSessions.size > 0) {
+			for (const sessionId of this.deletedSessions) {
+				this.onDeleteCallback(sessionId);
+			}
+		}
+	}
+
+	private handleSelect(sessionId: string) {
+		this.closedViaSelection = true;
+		if (this.onSelectCallback) {
+			this.onSelectCallback(sessionId);
+		}
+		this.close();
+	}
+
+	private formatDate(isoString: string): string {
+		const date = new Date(isoString);
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+		if (days === 0) {
+			return i18n("Today");
+		} else if (days === 1) {
+			return i18n("Yesterday");
+		} else if (days < 7) {
+			return i18n("{days} days ago").replace("{days}", days.toString());
+		} else {
+			return date.toLocaleDateString();
+		}
+	}
+
+	protected override renderContent() {
+		return html`
+			${DialogContent({
+				className: "h-full flex flex-col",
+				children: html`
+					${DialogHeader({
+						title: i18n("Sessions"),
+						description: i18n("Load a previous conversation"),
+					})}
+
+					<div class="flex-1 overflow-y-auto mt-4 space-y-2">
+						${
+							this.loading
+								? html`<div class="text-center py-8 text-muted-foreground">${i18n("Loading...")}</div>`
+								: this.sessions.length === 0
+									? html`<div class="text-center py-8 text-muted-foreground">${i18n("No sessions yet")}</div>`
+									: this.sessions.map(
+											(session) => html`
+											<div
+												class="group flex items-start gap-3 p-3 rounded-lg border border-border hover:bg-secondary/50 cursor-pointer transition-colors"
+												@click=${() => this.handleSelect(session.id)}
+											>
+												<div class="flex-1 min-w-0">
+													<div class="font-medium text-sm text-foreground truncate">${session.title}</div>
+													<div class="text-xs text-muted-foreground mt-1">${this.formatDate(session.lastModified)}</div>
+													<div class="text-xs text-muted-foreground mt-1">
+														${session.messageCount} ${i18n("messages")} · ${formatUsage(session.usage)}
+													</div>
+												</div>
+												<button
+													class="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-destructive/10 text-destructive transition-opacity"
+													@click=${(e: Event) => this.handleDelete(session.id, e)}
+													title=${i18n("Delete")}
+												>
+													<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+														<path d="M3 6h18"></path>
+														<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+														<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+													</svg>
+												</button>
+											</div>
+										`,
+										)
+						}
+					</div>
+				`,
+			})}
+		`;
+	}
+}

package/src/dialogs/SettingsDialog.ts

@@ -179,6 +179,7 @@ export class SettingsDialog extends LitElement {
 			},
 			width: "min(1000px, 90vw)",
 			height: "min(800px, 90vh)",
+			backdropClassName: "bg-black/50 backdrop-blur-sm",
 			children: html`
 				${DialogContent({
 					className: "h-full p-6",