@mariozechner/pi-web-ui 0.5.44

package/src/tools/artifacts/index.ts

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

package/src/tools/index.ts

@@ -0,0 +1,35 @@
+import type { TemplateResult } from "@mariozechner/mini-lit";
+import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { getToolRenderer, registerToolRenderer } from "./renderer-registry.js";
+import { BashRenderer } from "./renderers/BashRenderer.js";
+import { DefaultRenderer } from "./renderers/DefaultRenderer.js";
+import "./javascript-repl.js"; // Auto-registers the renderer
+
+// Register all built-in tool renderers
+registerToolRenderer("bash", new BashRenderer());
+
+const defaultRenderer = new DefaultRenderer();
+
+/**
+ * Render tool call parameters
+ */
+export function renderToolParams(toolName: string, params: any, isStreaming?: boolean): TemplateResult {
+	const renderer = getToolRenderer(toolName);
+	if (renderer) {
+		return renderer.renderParams(params, isStreaming);
+	}
+	return defaultRenderer.renderParams(params, isStreaming);
+}
+
+/**
+ * Render tool result
+ */
+export function renderToolResult(toolName: string, params: any, result: ToolResultMessage): TemplateResult {
+	const renderer = getToolRenderer(toolName);
+	if (renderer) {
+		return renderer.renderResult(params, result);
+	}
+	return defaultRenderer.renderResult(params, result);
+}
+
+export { registerToolRenderer, getToolRenderer };

package/src/tools/javascript-repl.ts

@@ -0,0 +1,309 @@
+import { html, i18n, type TemplateResult } from "@mariozechner/mini-lit";
+import type { AgentTool, ToolResultMessage } from "@mariozechner/pi-ai";
+import { type Static, Type } from "@sinclair/typebox";
+import { type SandboxFile, SandboxIframe, type SandboxResult } from "../components/SandboxedIframe.js";
+import type { Attachment } from "../utils/attachment-utils.js";
+
+import { registerToolRenderer } from "./renderer-registry.js";
+import type { ToolRenderer } from "./types.js";
+
+// Execute JavaScript code with attachments using SandboxedIframe
+export async function executeJavaScript(
+	code: string,
+	attachments: Attachment[] = [],
+	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()}`;
+		const result: SandboxResult = await sandbox.execute(sandboxId, code, attachments, signal);
+
+		// Remove the sandbox iframe after execution
+		sandbox.remove();
+
+		// Return plain text output
+		if (!result.success) {
+			// Return error as plain text
+			return {
+				output: `Error: ${result.error?.message || "Unknown error"}\n${result.error?.stack || ""}`,
+			};
+		}
+
+		// 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) {
+				const prefix = entry.type === "error" ? "[ERROR]" : "";
+				output += (prefix ? `${prefix} ` : "") + entry.text + "\n";
+			}
+		}
+
+		// 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({
+	code: Type.String({ description: "JavaScript code to execute" }),
+});
+
+export function createJavaScriptReplTool(): AgentTool<typeof javascriptReplSchema, JavaScriptReplToolResult> & {
+	attachmentsProvider?: () => Attachment[];
+	sandboxUrlProvider?: () => string;
+} {
+	return {
+		label: "JavaScript REPL",
+		name: "javascript_repl",
+		attachmentsProvider: () => [], // default to empty array
+		sandboxUrlProvider: undefined, // optional, for browser extensions
+		description: `Execute JavaScript code in a sandboxed browser environment with full modern browser capabilities.
+
+Environment: Modern browser with ALL Web APIs available:
+- ES2023+ JavaScript (async/await, optional chaining, nullish coalescing, etc.)
+- DOM APIs (document, window, Canvas, WebGL, etc.)
+- Fetch API for HTTP requests
+
+Loading external libraries via dynamic imports (use esm.run):
+- XLSX (Excel files): const XLSX = await import('https://esm.run/xlsx');
+- Papa Parse (CSV): const Papa = (await import('https://esm.run/papaparse')).default;
+- Lodash: const _ = await import('https://esm.run/lodash-es');
+- D3.js: const d3 = await import('https://esm.run/d3');
+- Chart.js: const Chart = (await import('https://esm.run/chart.js/auto')).default;
+- Three.js: const THREE = await import('https://esm.run/three');
+- Any npm package: await import('https://esm.run/package-name')
+
+IMPORTANT for graphics/canvas:
+- Use fixed dimensions like 400x400 or 800x600, NOT window.innerWidth/Height
+- For Three.js: renderer.setSize(400, 400) and camera aspect ratio of 1
+- For Chart.js: Set options: { responsive: false, animation: false } to ensure immediate rendering
+- Web Storage (localStorage, sessionStorage, IndexedDB)
+- Web Workers, WebAssembly, WebSockets
+- Media APIs (Audio, Video, WebRTC)
+- File APIs (Blob, FileReader, etc.)
+- Crypto API for cryptography
+- And much more - anything a modern browser supports!
+
+Output:
+- console.log() - All output is captured as text
+- await returnFile(filename, content, mimeType?) - Create downloadable files (async function!)
+  * Always use await with returnFile
+  * REQUIRED: For Blob/Uint8Array binary content, you MUST supply a proper MIME type (e.g., "image/png").
+    If omitted, the REPL throws an Error with stack trace pointing to the offending line.
+  * Strings without a MIME default to text/plain.
+  * Objects are auto-JSON stringified and default to application/json unless a MIME is provided.
+  * Canvas images: Use toBlob() with await Promise wrapper
+  * Examples:
+    - await returnFile('data.txt', 'Hello World', 'text/plain')
+    - await returnFile('data.json', {key: 'value'}, 'application/json')
+    - await returnFile('data.csv', 'name,age\\nJohn,30', 'text/csv')
+    - Chart.js example:
+      const Chart = (await import('https://esm.run/chart.js/auto')).default;
+      const canvas = document.createElement('canvas');
+      canvas.width = 400; canvas.height = 300;
+      document.body.appendChild(canvas);
+      new Chart(canvas, {
+        type: 'line',
+        data: {
+          labels: ['Jan', 'Feb', 'Mar', 'Apr'],
+          datasets: [{ label: 'Sales', data: [10, 20, 15, 25], borderColor: 'blue' }]
+        },
+        options: { responsive: false, animation: false }
+      });
+      const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+      await returnFile('chart.png', blob, 'image/png');
+
+Global variables:
+- attachments[] - Array of attachment objects from user messages
+  * Properties:
+    - id: string (unique identifier)
+    - fileName: string (e.g., "data.xlsx")
+    - mimeType: string (e.g., "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
+    - size: number (bytes)
+  * Helper functions:
+    - listFiles() - Returns array of {id, fileName, mimeType, size} for all attachments
+    - readTextFile(attachmentId) - Returns text content of attachment (for CSV, JSON, text files)
+    - readBinaryFile(attachmentId) - Returns Uint8Array of binary data (for images, Excel, etc.)
+  * Examples:
+    - const files = listFiles();
+    - const csvContent = readTextFile(files[0].id); // Read CSV as text
+    - const xlsxBytes = readBinaryFile(files[0].id); // Read Excel as binary
+- All standard browser globals (window, document, fetch, etc.)`,
+		parameters: javascriptReplSchema,
+		execute: async function (_toolCallId: string, args: Static<typeof javascriptReplSchema>, signal?: AbortSignal) {
+			const attachments = this.attachmentsProvider?.() || [];
+			const result = await executeJavaScript(args.code, attachments, 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 { output: result.output, details: { files } };
+		},
+	};
+}
+
+// Export a default instance for backward compatibility
+export const javascriptReplTool = createJavaScriptReplTool();
+
+// JavaScript REPL renderer with streaming support
+
+interface JavaScriptReplParams {
+	code: string;
+}
+
+interface JavaScriptReplResult {
+	output?: string;
+	files?: Array<{
+		fileName: string;
+		mimeType: string;
+		size: number;
+		contentBase64: string;
+	}>;
+}
+
+export const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScriptReplResult> = {
+	renderParams(params: JavaScriptReplParams, isStreaming?: boolean): TemplateResult {
+		if (isStreaming && (!params.code || params.code.length === 0)) {
+			return html`<div class="text-sm text-muted-foreground">Writing JavaScript code...</div>`;
+		}
+
+		return html`
+			<div class="text-sm text-muted-foreground mb-2">${i18n("Executing JavaScript")}</div>
+			<code-block .code=${params.code || ""} language="javascript"></code-block>
+		`;
+	},
+
+	renderResult(_params: JavaScriptReplParams, result: ToolResultMessage<JavaScriptReplResult>): TemplateResult {
+		// Console output is in the main output field, files are in details
+		const output = result.output || "";
+		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 html`
+			<div class="flex flex-col gap-3">
+				${output ? html`<console-block .content=${output}></console-block>` : ""}
+				${
+					attachments.length
+						? html`<div class="flex flex-wrap gap-2">
+							${attachments.map((att) => html`<attachment-tile .attachment=${att}></attachment-tile>`)}
+					  </div>`
+						: ""
+				}
+			</div>
+		`;
+	},
+};
+
+// Auto-register the renderer
+registerToolRenderer(javascriptReplTool.name, javascriptReplRenderer);

package/src/tools/renderer-registry.ts

@@ -0,0 +1,18 @@
+import type { ToolRenderer } from "./types.js";
+
+// Registry of tool renderers
+export const toolRenderers = new Map<string, ToolRenderer>();
+
+/**
+ * Register a custom tool renderer
+ */
+export function registerToolRenderer(toolName: string, renderer: ToolRenderer): void {
+	toolRenderers.set(toolName, renderer);
+}
+
+/**
+ * Get a tool renderer by name
+ */
+export function getToolRenderer(toolName: string): ToolRenderer | undefined {
+	return toolRenderers.get(toolName);
+}

package/src/tools/renderers/BashRenderer.ts

@@ -0,0 +1,45 @@
+import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { i18n } from "../../utils/i18n.js";
+import type { ToolRenderer } from "../types.js";
+
+interface BashParams {
+	command: string;
+}
+
+// Bash tool has undefined details (only uses output)
+export class BashRenderer implements ToolRenderer<BashParams, undefined> {
+	renderParams(params: BashParams, isStreaming?: boolean): TemplateResult {
+		if (isStreaming && (!params.command || params.command.length === 0)) {
+			return html`<div class="text-sm text-muted-foreground">${i18n("Writing command...")}</div>`;
+		}
+
+		return html`
+			<div class="text-sm text-muted-foreground">
+				<span>${i18n("Running command:")}</span>
+				<code class="ml-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.command}</code>
+			</div>
+		`;
+	}
+
+	renderResult(_params: BashParams, result: ToolResultMessage<undefined>): TemplateResult {
+		const output = result.output || "";
+		const isError = result.isError === true;
+
+		if (isError) {
+			return html`
+				<div class="text-sm">
+					<div class="text-destructive font-medium mb-1">${i18n("Command failed:")}</div>
+					<pre class="text-xs font-mono text-destructive bg-destructive/10 p-2 rounded overflow-x-auto">${output}</pre>
+				</div>
+			`;
+		}
+
+		// Display the command output
+		return html`
+			<div class="text-sm">
+				<pre class="text-xs font-mono text-foreground bg-muted/50 p-2 rounded overflow-x-auto">${output}</pre>
+			</div>
+		`;
+	}
+}

package/src/tools/renderers/CalculateRenderer.ts

@@ -0,0 +1,49 @@
+import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { i18n } from "../../utils/i18n.js";
+import type { ToolRenderer } from "../types.js";
+
+interface CalculateParams {
+	expression: string;
+}
+
+// Calculate tool has undefined details (only uses output)
+export class CalculateRenderer implements ToolRenderer<CalculateParams, undefined> {
+	renderParams(params: CalculateParams, isStreaming?: boolean): TemplateResult {
+		if (isStreaming && !params.expression) {
+			return html`<div class="text-sm text-muted-foreground">${i18n("Writing expression...")}</div>`;
+		}
+
+		return html`
+			<div class="text-sm text-muted-foreground">
+				<span>${i18n("Calculating")}</span>
+				<code class="mx-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.expression}</code>
+			</div>
+		`;
+	}
+
+	renderResult(_params: CalculateParams, result: ToolResultMessage<undefined>): TemplateResult {
+		// Parse the output to make it look nicer
+		const output = result.output || "";
+		const isError = result.isError === true;
+
+		if (isError) {
+			return html`<div class="text-sm text-destructive">${output}</div>`;
+		}
+
+		// Try to split on = to show expression and result separately
+		const parts = output.split(" = ");
+		if (parts.length === 2) {
+			return html`
+				<div class="text-sm font-mono">
+					<span class="text-muted-foreground">${parts[0]}</span>
+					<span class="text-muted-foreground mx-1">=</span>
+					<span class="text-foreground font-semibold">${parts[1]}</span>
+				</div>
+			`;
+		}
+
+		// Fallback to showing the whole output
+		return html`<div class="text-sm font-mono text-foreground">${output}</div>`;
+	}
+}

package/src/tools/renderers/DefaultRenderer.ts

@@ -0,0 +1,36 @@
+import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { i18n } from "../../utils/i18n.js";
+import type { ToolRenderer } from "../types.js";
+
+export class DefaultRenderer implements ToolRenderer {
+	renderParams(params: any, isStreaming?: boolean): TemplateResult {
+		let text: string;
+		let isJson = false;
+
+		try {
+			text = JSON.stringify(JSON.parse(params), null, 2);
+			isJson = true;
+		} catch {
+			try {
+				text = JSON.stringify(params, null, 2);
+				isJson = true;
+			} catch {
+				text = String(params);
+			}
+		}
+
+		if (isStreaming && (!text || text === "{}" || text === "null")) {
+			return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`;
+		}
+
+		return html`<console-block .content=${text}></console-block>`;
+	}
+
+	renderResult(_params: any, result: ToolResultMessage): TemplateResult {
+		// Just show the output field - that's what was sent to the LLM
+		const text = result.output || i18n("(no output)");
+
+		return html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
+	}
+}

package/src/tools/renderers/GetCurrentTimeRenderer.ts

@@ -0,0 +1,39 @@
+import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { i18n } from "../../utils/i18n.js";
+import type { ToolRenderer } from "../types.js";
+
+interface GetCurrentTimeParams {
+	timezone?: string;
+}
+
+// GetCurrentTime tool has undefined details (only uses output)
+export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams, undefined> {
+	renderParams(params: GetCurrentTimeParams, isStreaming?: boolean): TemplateResult {
+		if (params.timezone) {
+			return html`
+				<div class="text-sm text-muted-foreground">
+					<span>${i18n("Getting current time in")}</span>
+					<code class="mx-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.timezone}</code>
+				</div>
+			`;
+		}
+		return html`
+			<div class="text-sm text-muted-foreground">
+				<span>${i18n("Getting current date and time")}${isStreaming ? "..." : ""}</span>
+			</div>
+		`;
+	}
+
+	renderResult(_params: GetCurrentTimeParams, result: ToolResultMessage<undefined>): TemplateResult {
+		const output = result.output || "";
+		const isError = result.isError === true;
+
+		if (isError) {
+			return html`<div class="text-sm text-destructive">${output}</div>`;
+		}
+
+		// Display the date/time result
+		return html`<div class="text-sm font-mono text-foreground">${output}</div>`;
+	}
+}

package/src/tools/types.ts

@@ -0,0 +1,7 @@
+import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import type { TemplateResult } from "lit";
+
+export interface ToolRenderer<TParams = any, TDetails = any> {
+	renderParams(params: TParams, isStreaming?: boolean): TemplateResult;
+	renderResult(params: TParams, result: ToolResultMessage<TDetails>): TemplateResult;
+}