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

package/src/components/StreamingMessageContainer.ts

@@ -0,0 +1,107 @@
+import type { AgentMessage, AgentTool } from "@oh-my-pi/pi-agent-core";
+import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
+import { html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+
+export class StreamingMessageContainer extends LitElement {
+	@property({ type: Array }) tools: AgentTool[] = [];
+	@property({ type: Boolean }) isStreaming = false;
+	@property({ type: Object }) pendingToolCalls?: Set<string>;
+	@property({ type: Object }) toolResultsById?: Map<string, ToolResultMessage>;
+	@property({ attribute: false }) onCostClick?: () => void;
+
+	@state() private _message: AgentMessage | null = null;
+	private _pendingMessage: AgentMessage | null = null;
+	private _updateScheduled = false;
+	private _immediateUpdate = false;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+	}
+
+	// Public method to update the message with batching for performance
+	public setMessage(message: AgentMessage | null, immediate = false) {
+		// Store the latest message
+		this._pendingMessage = message;
+
+		// If this is an immediate update (like clearing), apply it right away
+		if (immediate || message === null) {
+			this._immediateUpdate = true;
+			this._message = message;
+			this.requestUpdate();
+			// Cancel any pending updates since we're clearing
+			this._pendingMessage = null;
+			this._updateScheduled = false;
+			return;
+		}
+
+		// Otherwise batch updates for performance during streaming
+		if (!this._updateScheduled) {
+			this._updateScheduled = true;
+
+			requestAnimationFrame(async () => {
+				// Only apply the update if we haven't been cleared
+				if (!this._immediateUpdate && this._pendingMessage !== null) {
+					// Deep clone the message to ensure Lit detects changes in nested properties
+					// (like toolCall.arguments being mutated during streaming)
+					this._message = JSON.parse(JSON.stringify(this._pendingMessage));
+					this.requestUpdate();
+				}
+				// Reset for next batch
+				this._pendingMessage = null;
+				this._updateScheduled = false;
+				this._immediateUpdate = false;
+			});
+		}
+	}
+
+	override render() {
+		// Show loading indicator if loading but no message yet
+		if (!this._message) {
+			if (this.isStreaming)
+				return html`<div class="flex flex-col gap-3 mb-3">
+					<span class="mx-4 inline-block w-2 h-4 bg-muted-foreground animate-pulse"></span>
+				</div>`;
+			return html``; // Empty until a message is set
+		}
+		const msg = this._message;
+
+		if (msg.role === "toolResult") {
+			// Skip standalone tool result in streaming; the stable list will render paired tool-message
+			return html``;
+		} else if (msg.role === "user" || msg.role === "user-with-attachments") {
+			// Skip standalone tool result in streaming; the stable list will render it immediiately
+			return html``;
+		} else if (msg.role === "assistant") {
+			// Assistant message - render inline tool messages during streaming
+			return html`
+				<div class="flex flex-col gap-3 mb-3">
+					<assistant-message
+						.message=${msg}
+						.tools=${this.tools}
+						.isStreaming=${this.isStreaming}
+						.pendingToolCalls=${this.pendingToolCalls}
+						.toolResultsById=${this.toolResultsById}
+						.hideToolCalls=${false}
+						.onCostClick=${this.onCostClick}
+					></assistant-message>
+					${
+						this.isStreaming
+							? html`<span class="mx-4 inline-block w-2 h-4 bg-muted-foreground animate-pulse"></span>`
+							: ""
+					}
+				</div>
+			`;
+		}
+	}
+}
+
+// Register custom element
+if (!customElements.get("streaming-message-container")) {
+	customElements.define("streaming-message-container", StreamingMessageContainer);
+}

package/src/components/ThinkingBlock.ts

@@ -0,0 +1,45 @@
+import { icon } from "@mariozechner/mini-lit";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ChevronRight } from "lucide";
+
+@customElement("thinking-block")
+export class ThinkingBlock extends LitElement {
+	@property() content!: string;
+	@property({ type: Boolean }) isStreaming = false;
+	@state() private isExpanded = false;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+	}
+
+	private toggleExpanded() {
+		this.isExpanded = !this.isExpanded;
+	}
+
+	override render() {
+		const shimmerClasses = this.isStreaming
+			? "animate-shimmer bg-gradient-to-r from-muted-foreground via-foreground to-muted-foreground bg-[length:200%_100%] bg-clip-text text-transparent"
+			: "";
+
+		return html`
+			<div class="thinking-block">
+				<div
+					class="thinking-header cursor-pointer select-none flex items-center gap-2 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+					@click=${this.toggleExpanded}
+				>
+					<span class="transition-transform inline-block ${this.isExpanded ? "rotate-90" : ""}"
+						>${icon(ChevronRight, "sm")}</span
+					>
+					<span class="${shimmerClasses}">Thinking...</span>
+				</div>
+				${this.isExpanded ? html`<markdown-block .content=${this.content} .isThinking=${true}></markdown-block>` : ""}
+			</div>
+		`;
+	}
+}

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

@@ -0,0 +1,28 @@
+import type { AgentMessage } from "@oh-my-pi/pi-agent-core";
+import type { TemplateResult } from "lit";
+
+// Extract role type from AppMessage union
+export type MessageRole = AgentMessage["role"];
+
+// Generic message renderer typed to specific message type
+export interface MessageRenderer<TMessage extends AgentMessage = AgentMessage> {
+	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<AgentMessage, { role: TRole }>>,
+): void {
+	messageRenderers.set(role, renderer);
+}
+
+export function getMessageRenderer(role: MessageRole): MessageRenderer | undefined {
+	return messageRenderers.get(role);
+}
+
+export function renderMessage(message: AgentMessage): 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 } = 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,186 @@
+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;
+	}
+}