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

package/src/tools/artifacts/index.ts

@@ -0,0 +1,7 @@
+export { ArtifactElement } from "./ArtifactElement.js";
+export { type Artifact, ArtifactsPanel, type ArtifactsParams } from "./artifacts.js";
+export { ArtifactsToolRenderer } from "./artifacts-tool-renderer.js";
+export { HtmlArtifact } from "./HtmlArtifact.js";
+export { MarkdownArtifact } from "./MarkdownArtifact.js";
+export { SvgArtifact } from "./SvgArtifact.js";
+export { TextArtifact } from "./TextArtifact.js";

package/src/tools/extract-document.ts

@@ -0,0 +1,271 @@
+import type { AgentTool } from "@oh-my-pi/pi-agent-core";
+import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
+import { type Static, Type } from "@sinclair/typebox";
+import { html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { FileText } from "lucide";
+import { EXTRACT_DOCUMENT_DESCRIPTION } from "../prompts/prompts.js";
+import { loadAttachment } from "../utils/attachment-utils.js";
+import { isCorsError } from "../utils/proxy-utils.js";
+import { registerToolRenderer, renderCollapsibleHeader, renderHeader } from "./renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "./types.js";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+const extractDocumentSchema = Type.Object({
+	url: Type.String({
+		description: "URL of the document to extract text from (PDF, DOCX, XLSX, or PPTX)",
+	}),
+});
+
+export type ExtractDocumentParams = Static<typeof extractDocumentSchema>;
+
+export interface ExtractDocumentResult {
+	extractedText: string;
+	format: string;
+	fileName: string;
+	size: number;
+}
+
+// ============================================================================
+// TOOL
+// ============================================================================
+
+export function createExtractDocumentTool(): AgentTool<typeof extractDocumentSchema, ExtractDocumentResult> & {
+	corsProxyUrl?: string;
+} {
+	const tool = {
+		label: "Extract Document",
+		name: "extract_document",
+		corsProxyUrl: undefined as string | undefined, // Can be set by consumer (e.g., from user settings)
+		description: EXTRACT_DOCUMENT_DESCRIPTION,
+		parameters: extractDocumentSchema,
+		execute: async (_toolCallId: string, args: ExtractDocumentParams, signal?: AbortSignal) => {
+			if (signal?.aborted) {
+				throw new Error("Extract document aborted");
+			}
+
+			const url = args.url.trim();
+			if (!url) {
+				throw new Error("URL is required");
+			}
+
+			// Validate URL format
+			try {
+				new URL(url);
+			} catch {
+				throw new Error(`Invalid URL: ${url}`);
+			}
+
+			// Size limit: 50MB
+			const MAX_SIZE = 50 * 1024 * 1024;
+
+			// Helper function to fetch and process document
+			const fetchAndProcess = async (fetchUrl: string) => {
+				const response = await fetch(fetchUrl, { signal });
+
+				if (!response.ok) {
+					throw new Error(
+						`TELL USER: Unable to download the document (${response.status} ${response.statusText}). The site likely blocks automated downloads.\n\n` +
+							`INSTRUCT USER: Please download the file manually and attach it to your message using the attachment button (paperclip icon) in the message input area. I can then extract the text from the attached file.`,
+					);
+				}
+
+				// Check size before downloading
+				const contentLength = response.headers.get("content-length");
+				if (contentLength) {
+					const size = Number.parseInt(contentLength, 10);
+					if (size > MAX_SIZE) {
+						throw new Error(
+							`Document is too large (${(size / 1024 / 1024).toFixed(1)}MB). Maximum supported size is 50MB.`,
+						);
+					}
+				}
+
+				// Download the document
+				const arrayBuffer = await response.arrayBuffer();
+				const size = arrayBuffer.byteLength;
+
+				if (size > MAX_SIZE) {
+					throw new Error(
+						`Document is too large (${(size / 1024 / 1024).toFixed(1)}MB). Maximum supported size is 50MB.`,
+					);
+				}
+
+				return arrayBuffer;
+			};
+
+			// Try without proxy first, fallback to proxy on CORS error
+			let arrayBuffer: ArrayBuffer;
+
+			try {
+				// Attempt direct fetch first
+				arrayBuffer = await fetchAndProcess(url);
+			} catch (directError: any) {
+				// If CORS error and proxy is available, retry with proxy
+				if (isCorsError(directError) && tool.corsProxyUrl) {
+					try {
+						const proxiedUrl = tool.corsProxyUrl + encodeURIComponent(url);
+						arrayBuffer = await fetchAndProcess(proxiedUrl);
+					} catch (proxyError: any) {
+						// Proxy fetch also failed - throw helpful message
+						throw new Error(
+							`TELL USER: Unable to fetch the document due to CORS restrictions.\n\n` +
+								`Tried with proxy but it also failed: ${proxyError.message}\n\n` +
+								`INSTRUCT USER: Please download the file manually and attach it to your message using the attachment button (paperclip icon) in the message input area. I can then extract the text from the attached file.`,
+						);
+					}
+				} else if (isCorsError(directError) && !tool.corsProxyUrl) {
+					// CORS error but no proxy configured
+					throw new Error(
+						`TELL USER: Unable to fetch the document due to CORS restrictions (the server blocks requests from browser extensions).\n\n` +
+							`To fix this, you need to configure a CORS proxy in Sitegeist settings:\n` +
+							`1. Open Sitegeist settings\n` +
+							`2. Find "CORS Proxy URL" setting\n` +
+							`3. Enter a proxy URL like: https://corsproxy.io/?\n` +
+							`4. Save and try again\n\n` +
+							`Alternatively, download the file manually and attach it to your message using the attachment button (paperclip icon).`,
+					);
+				} else {
+					// Not a CORS error - re-throw
+					throw directError;
+				}
+			}
+
+			// Extract filename from URL
+			const urlParts = url.split("/");
+			let fileName = urlParts[urlParts.length - 1]?.split("?")[0] || "document";
+			if (url.startsWith("https://arxiv.org/")) {
+				fileName = `${fileName}.pdf`;
+			}
+
+			// Use loadAttachment to process the document
+			const attachment = await loadAttachment(arrayBuffer, fileName);
+
+			if (!attachment.extractedText) {
+				throw new Error(
+					`Document format not supported. Supported formats:\n` +
+						`- PDF (.pdf)\n` +
+						`- Word (.docx)\n` +
+						`- Excel (.xlsx, .xls)\n` +
+						`- PowerPoint (.pptx)`,
+				);
+			}
+
+			// Determine format from attachment
+			let format = "unknown";
+			if (attachment.mimeType.includes("pdf")) {
+				format = "pdf";
+			} else if (attachment.mimeType.includes("wordprocessingml")) {
+				format = "docx";
+			} else if (attachment.mimeType.includes("spreadsheetml") || attachment.mimeType.includes("ms-excel")) {
+				format = "xlsx";
+			} else if (attachment.mimeType.includes("presentationml")) {
+				format = "pptx";
+			}
+
+			return {
+				content: [{ type: "text" as const, text: attachment.extractedText }],
+				details: {
+					extractedText: attachment.extractedText,
+					format,
+					fileName: attachment.fileName,
+					size: attachment.size,
+				},
+			};
+		},
+	};
+	return tool;
+}
+
+// Export a default instance
+export const extractDocumentTool = createExtractDocumentTool();
+
+// ============================================================================
+// RENDERER
+// ============================================================================
+
+export const extractDocumentRenderer: ToolRenderer<ExtractDocumentParams, ExtractDocumentResult> = {
+	render(
+		params: ExtractDocumentParams | undefined,
+		result: ToolResultMessage<ExtractDocumentResult> | undefined,
+		isStreaming?: boolean,
+	): ToolRenderResult {
+		// Determine status
+		const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
+
+		// Create refs for collapsible sections
+		const contentRef = createRef<HTMLDivElement>();
+		const chevronRef = createRef<HTMLSpanElement>();
+
+		// With result: show params + result
+		if (result && params) {
+			const details = result.details;
+			const title = details
+				? result.isError
+					? `Failed to extract ${details.fileName || "document"}`
+					: `Extracted text from ${details.fileName} (${details.format.toUpperCase()}, ${(
+							details.size / 1024
+						).toFixed(1)}KB)`
+				: result.isError
+					? "Failed to extract document"
+					: "Extracted text from document";
+
+			const output =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
+
+			return {
+				content: html`
+					<div>
+						${renderCollapsibleHeader(state, FileText, title, contentRef, chevronRef, false)}
+						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
+							${
+								params.url
+									? html`<div class="text-sm text-gray-600 dark:text-gray-400"><strong>URL:</strong> ${params.url}</div>`
+									: ""
+							}
+							${output && !result.isError ? html`<code-block .code=${output} language="plaintext"></code-block>` : ""}
+							${
+								result.isError && output
+									? html`<console-block .content=${output} .variant=${"error"}></console-block>`
+									: ""
+							}
+						</div>
+					</div>
+				`,
+				isCustom: false,
+			};
+		}
+
+		// Just params (streaming or waiting for result)
+		if (params) {
+			const title = "Extracting document...";
+
+			return {
+				content: html`
+					<div>
+						${renderCollapsibleHeader(state, FileText, title, contentRef, chevronRef, false)}
+						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
+							<div class="text-sm text-gray-600 dark:text-gray-400"><strong>URL:</strong> ${params.url}</div>
+						</div>
+					</div>
+				`,
+				isCustom: false,
+			};
+		}
+
+		// No params or result yet
+		return {
+			content: renderHeader(state, FileText, "Preparing extraction..."),
+			isCustom: false,
+		};
+	},
+};
+
+// Auto-register the renderer
+registerToolRenderer("extract_document", extractDocumentRenderer);

package/src/tools/index.ts

@@ -0,0 +1,46 @@
+import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
+import "./javascript-repl.js"; // Auto-registers the renderer
+import "./extract-document.js"; // Auto-registers the renderer
+import { getToolRenderer, registerToolRenderer } from "./renderer-registry.js";
+import { BashRenderer } from "./renderers/BashRenderer.js";
+import { DefaultRenderer } from "./renderers/DefaultRenderer.js";
+import type { ToolRenderResult } from "./types.js";
+
+// Register all built-in tool renderers
+registerToolRenderer("bash", new BashRenderer());
+
+const defaultRenderer = new DefaultRenderer();
+
+// Global flag to force default JSON rendering for all tools
+let showJsonMode = false;
+
+/**
+ * Enable or disable show JSON mode
+ * When enabled, all tool renderers will use the default JSON renderer
+ */
+export function setShowJsonMode(enabled: boolean): void {
+	showJsonMode = enabled;
+}
+
+/**
+ * Render tool - unified function that handles params, result, and streaming state
+ */
+export function renderTool(
+	toolName: string,
+	params: any | undefined,
+	result: ToolResultMessage | undefined,
+	isStreaming?: boolean,
+): ToolRenderResult {
+	// If showJsonMode is enabled, always use the default renderer
+	if (showJsonMode) {
+		return defaultRenderer.render(params, result, isStreaming);
+	}
+
+	const renderer = getToolRenderer(toolName);
+	if (renderer) {
+		return renderer.render(params, result, isStreaming);
+	}
+	return defaultRenderer.render(params, result, isStreaming);
+}
+
+export { getToolRenderer, registerToolRenderer };

package/src/tools/javascript-repl.ts

@@ -0,0 +1,316 @@
+import { i18n } from "@mariozechner/mini-lit";
+import type { AgentTool } from "@oh-my-pi/pi-agent-core";
+import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
+import { type Static, Type } from "@sinclair/typebox";
+import { html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Code } from "lucide";
+import { type SandboxFile, SandboxIframe, type SandboxResult } from "../components/SandboxedIframe.js";
+import type { SandboxRuntimeProvider } from "../components/sandbox/SandboxRuntimeProvider.js";
+import { JAVASCRIPT_REPL_TOOL_DESCRIPTION } from "../prompts/prompts.js";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { registerToolRenderer, renderCollapsibleHeader, renderHeader } from "./renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "./types.js";
+
+// Execute JavaScript code with attachments using SandboxedIframe
+export async function executeJavaScript(
+	code: string,
+	runtimeProviders: SandboxRuntimeProvider[],
+	signal?: AbortSignal,
+	sandboxUrlProvider?: () => string,
+): Promise<{ output: string; files?: SandboxFile[] }> {
+	if (!code) {
+		throw new Error("Code parameter is required");
+	}
+
+	// Check for abort before starting
+	if (signal?.aborted) {
+		throw new Error("Execution aborted");
+	}
+
+	// Create a SandboxedIframe instance for execution
+	const sandbox = new SandboxIframe();
+	if (sandboxUrlProvider) {
+		sandbox.sandboxUrlProvider = sandboxUrlProvider;
+	}
+	sandbox.style.display = "none";
+	document.body.appendChild(sandbox);
+
+	try {
+		const sandboxId = `repl-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+
+		// Pass providers to execute (router handles all message routing)
+		// No additional consumers needed - execute() has its own internal consumer
+		const result: SandboxResult = await sandbox.execute(sandboxId, code, runtimeProviders, [], signal);
+
+		// Remove the sandbox iframe after execution
+		sandbox.remove();
+
+		// Build plain text response
+		let output = "";
+
+		// Add console output - result.console contains { type: string, text: string } from sandbox.js
+		if (result.console && result.console.length > 0) {
+			for (const entry of result.console) {
+				output += `${entry.text}\n`;
+			}
+		}
+
+		// Add error if execution failed
+		if (!result.success) {
+			if (output) output += "\n";
+			output += `Error: ${result.error?.message || "Unknown error"}\n${result.error?.stack || ""}`;
+
+			// Throw error so tool call is marked as failed
+			throw new Error(output.trim());
+		}
+
+		// Add return value if present
+		if (result.returnValue !== undefined) {
+			if (output) output += "\n";
+			output += `=> ${
+				typeof result.returnValue === "object" ? JSON.stringify(result.returnValue, null, 2) : result.returnValue
+			}`;
+		}
+
+		// Add file notifications
+		if (result.files && result.files.length > 0) {
+			output += `\n[Files returned: ${result.files.length}]\n`;
+			for (const file of result.files) {
+				output += `  - ${file.fileName} (${file.mimeType})\n`;
+			}
+		} else {
+			// Explicitly note when no files were returned (helpful for debugging)
+			if (code.includes("returnFile")) {
+				output += "\n[No files returned - check async operations]";
+			}
+		}
+
+		return {
+			output: output.trim() || "Code executed successfully (no output)",
+			files: result.files,
+		};
+	} catch (error: unknown) {
+		// Clean up on error
+		sandbox.remove();
+		throw new Error((error as Error).message || "Execution failed");
+	}
+}
+
+export type JavaScriptReplToolResult = {
+	files?:
+		| {
+				fileName: string;
+				contentBase64: string;
+				mimeType: string;
+		  }[]
+		| undefined;
+};
+
+const javascriptReplSchema = Type.Object({
+	title: Type.String({
+		description:
+			"Brief title describing what the code snippet tries to achieve in active form, e.g. 'Calculating sum'",
+	}),
+	code: Type.String({ description: "JavaScript code to execute" }),
+});
+
+export type JavaScriptReplParams = Static<typeof javascriptReplSchema>;
+
+interface JavaScriptReplResult {
+	output?: string;
+	files?: Array<{
+		fileName: string;
+		mimeType: string;
+		size: number;
+		contentBase64: string;
+	}>;
+}
+
+export function createJavaScriptReplTool(): AgentTool<typeof javascriptReplSchema, JavaScriptReplToolResult> & {
+	runtimeProvidersFactory?: () => SandboxRuntimeProvider[];
+	sandboxUrlProvider?: () => string;
+} {
+	return {
+		label: "JavaScript REPL",
+		name: "javascript_repl",
+		runtimeProvidersFactory: () => [], // default to empty array
+		sandboxUrlProvider: undefined, // optional, for browser extensions
+		get description() {
+			const runtimeProviderDescriptions =
+				this.runtimeProvidersFactory?.()
+					.map((d) => d.getDescription())
+					.filter((d) => d.trim().length > 0) || [];
+			return JAVASCRIPT_REPL_TOOL_DESCRIPTION(runtimeProviderDescriptions);
+		},
+		parameters: javascriptReplSchema,
+		execute: async function (_toolCallId: string, args: Static<typeof javascriptReplSchema>, signal?: AbortSignal) {
+			const result = await executeJavaScript(
+				args.code,
+				this.runtimeProvidersFactory?.() ?? [],
+				signal,
+				this.sandboxUrlProvider,
+			);
+			// Convert files to JSON-serializable with base64 payloads
+			const files = (result.files || []).map((f) => {
+				const toBase64 = (input: string | Uint8Array): { base64: string; size: number } => {
+					if (input instanceof Uint8Array) {
+						let binary = "";
+						const chunk = 0x8000;
+						for (let i = 0; i < input.length; i += chunk) {
+							binary += String.fromCharCode(...input.subarray(i, i + chunk));
+						}
+						return { base64: btoa(binary), size: input.length };
+					} else if (typeof input === "string") {
+						const enc = new TextEncoder();
+						const bytes = enc.encode(input);
+						let binary = "";
+						const chunk = 0x8000;
+						for (let i = 0; i < bytes.length; i += chunk) {
+							binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+						}
+						return { base64: btoa(binary), size: bytes.length };
+					} else {
+						const s = String(input);
+						const enc = new TextEncoder();
+						const bytes = enc.encode(s);
+						let binary = "";
+						const chunk = 0x8000;
+						for (let i = 0; i < bytes.length; i += chunk) {
+							binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+						}
+						return { base64: btoa(binary), size: bytes.length };
+					}
+				};
+
+				const { base64, size } = toBase64(f.content);
+				return {
+					fileName: f.fileName || "file",
+					mimeType: f.mimeType || "application/octet-stream",
+					size,
+					contentBase64: base64,
+				};
+			});
+			return { content: [{ type: "text", text: result.output }], details: { files } };
+		},
+	};
+}
+
+// Export a default instance for backward compatibility
+export const javascriptReplTool = createJavaScriptReplTool();
+
+export const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScriptReplResult> = {
+	render(
+		params: JavaScriptReplParams | undefined,
+		result: ToolResultMessage<JavaScriptReplResult> | undefined,
+		isStreaming?: boolean,
+	): ToolRenderResult {
+		// Determine status
+		const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
+
+		// Create refs for collapsible code section
+		const codeContentRef = createRef<HTMLDivElement>();
+		const codeChevronRef = createRef<HTMLSpanElement>();
+
+		// With result: show params + result
+		if (result && params) {
+			const output =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
+			const files = result.details?.files || [];
+
+			const attachments: Attachment[] = files.map((f, i) => {
+				// Decode base64 content for text files to show in overlay
+				let extractedText: string | undefined;
+				const isTextBased =
+					f.mimeType?.startsWith("text/") ||
+					f.mimeType === "application/json" ||
+					f.mimeType === "application/javascript" ||
+					f.mimeType?.includes("xml");
+
+				if (isTextBased && f.contentBase64) {
+					try {
+						extractedText = atob(f.contentBase64);
+					} catch (_e) {
+						console.warn("Failed to decode base64 content for", f.fileName);
+					}
+				}
+
+				return {
+					id: `repl-${Date.now()}-${i}`,
+					type: f.mimeType?.startsWith("image/") ? "image" : "document",
+					fileName: f.fileName || `file-${i}`,
+					mimeType: f.mimeType || "application/octet-stream",
+					size: f.size ?? 0,
+					content: f.contentBase64,
+					preview: f.mimeType?.startsWith("image/") ? f.contentBase64 : undefined,
+					extractedText,
+				};
+			});
+
+			return {
+				content: html`
+					<div>
+						${renderCollapsibleHeader(
+							state,
+							Code,
+							params.title ? params.title : i18n("Executing JavaScript"),
+							codeContentRef,
+							codeChevronRef,
+							false,
+						)}
+						<div ${ref(codeContentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
+							<code-block .code=${params.code || ""} language="javascript"></code-block>
+							${
+								output
+									? html`<console-block
+										.content=${output}
+										.variant=${result.isError ? "error" : "default"}
+								  ></console-block>`
+									: ""
+							}
+						</div>
+						${
+							attachments.length
+								? html`<div class="flex flex-wrap gap-2 mt-3">
+									${attachments.map((att) => html`<attachment-tile .attachment=${att}></attachment-tile>`)}
+							  </div>`
+								: ""
+						}
+					</div>
+				`,
+				isCustom: false,
+			};
+		}
+
+		// Just params (streaming or waiting for result)
+		if (params) {
+			return {
+				content: html`
+					<div>
+						${renderCollapsibleHeader(
+							state,
+							Code,
+							params.title ? params.title : i18n("Executing JavaScript"),
+							codeContentRef,
+							codeChevronRef,
+							false,
+						)}
+						<div ${ref(codeContentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
+							${params.code ? html`<code-block .code=${params.code} language="javascript"></code-block>` : ""}
+						</div>
+					</div>
+				`,
+				isCustom: false,
+			};
+		}
+
+		// No params or result yet
+		return { content: renderHeader(state, Code, i18n("Preparing JavaScript...")), isCustom: false };
+	},
+};
+
+// Auto-register the renderer
+registerToolRenderer(javascriptReplTool.name, javascriptReplRenderer);