@mariozechner/pi-web-ui 0.5.48 → 0.7.1

package/src/dialogs/SessionListDialog.ts

@@ -1,4 +1,6 @@
-import { DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { getAppStorage } from "../storage/app-storage.js";
 import type { SessionMetadata } from "../storage/types.js";

package/src/dialogs/SettingsDialog.ts

@@ -1,16 +1,10 @@
-import {
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	html,
-	Input,
-	i18n,
-	Label,
-	Switch,
-	type TemplateResult,
-} from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Dialog, DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { Input } from "@mariozechner/mini-lit/dist/Input.js";
+import { Label } from "@mariozechner/mini-lit/dist/Label.js";
+import { Switch } from "@mariozechner/mini-lit/dist/Switch.js";
 import { getProviders } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "../components/ProviderKeyInput.js";
 import { getAppStorage } from "../storage/app-storage.js";
@@ -84,7 +78,7 @@ export class ProxyTab extends SettingsTab {
 		return html`
 			<div class="flex flex-col gap-4">
 				<p class="text-sm text-muted-foreground">
-					${i18n("The CORS proxy strips CORS headers from API responses, allowing browser-based apps to make direct calls to LLM providers without CORS restrictions. It forwards requests to providers while removing headers that would otherwise block cross-origin requests.")}
+					${i18n("Allows browser-based apps to bypass CORS restrictions when calling LLM providers. Required for Z-AI and Anthropic with OAuth token.")}
 				</p>
 
 				<div class="flex items-center justify-between">
@@ -109,6 +103,9 @@ export class ProxyTab extends SettingsTab {
 						},
 						onChange: () => this.saveProxySettings(),
 					})}
+					<p class="text-xs text-muted-foreground">
+						${i18n("Format: The proxy must accept requests as <proxy-url>/?url=<target-url>")}
+					</p>
 				</div>
 			</div>
 		`;

package/src/index.ts

@@ -46,11 +46,13 @@ export {
 export { RuntimeMessageBridge } from "./components/sandbox/RuntimeMessageBridge.js";
 export { RUNTIME_MESSAGE_ROUTER } from "./components/sandbox/RuntimeMessageRouter.js";
 export type { SandboxRuntimeProvider } from "./components/sandbox/SandboxRuntimeProvider.js";
+export { ThinkingBlock } from "./components/ThinkingBlock.js";
 export { ApiKeyPromptDialog } from "./dialogs/ApiKeyPromptDialog.js";
 export { AttachmentOverlay } from "./dialogs/AttachmentOverlay.js";
 // Dialogs
 export { ModelSelector } from "./dialogs/ModelSelector.js";
 export { PersistentStorageDialog } from "./dialogs/PersistentStorageDialog.js";
+export { ProvidersModelsTab } from "./dialogs/ProvidersModelsTab.js";
 export { SessionListDialog } from "./dialogs/SessionListDialog.js";
 export { ApiKeysTab, ProxyTab, SettingsDialog, SettingsTab } from "./dialogs/SettingsDialog.js";
 // Prompts
@@ -63,6 +65,12 @@ export {
 export { AppStorage, getAppStorage, setAppStorage } from "./storage/app-storage.js";
 export { IndexedDBStorageBackend } from "./storage/backends/indexeddb-storage-backend.js";
 export { Store } from "./storage/store.js";
+export type {
+	AutoDiscoveryProviderType,
+	CustomProvider,
+	CustomProviderType,
+} from "./storage/stores/custom-providers-store.js";
+export { CustomProvidersStore } from "./storage/stores/custom-providers-store.js";
 export { ProviderKeysStore } from "./storage/stores/provider-keys-store.js";
 export { SessionsStore } from "./storage/stores/sessions-store.js";
 export { SettingsStore } from "./storage/stores/settings-store.js";

package/src/storage/app-storage.ts

@@ -1,3 +1,4 @@
+import type { CustomProvidersStore } from "./stores/custom-providers-store.js";
 import type { ProviderKeysStore } from "./stores/provider-keys-store.js";
 import type { SessionsStore } from "./stores/sessions-store.js";
 import type { SettingsStore } from "./stores/settings-store.js";
@@ -12,16 +13,19 @@ export class AppStorage {
 	readonly settings: SettingsStore;
 	readonly providerKeys: ProviderKeysStore;
 	readonly sessions: SessionsStore;
+	readonly customProviders: CustomProvidersStore;
 
 	constructor(
 		settings: SettingsStore,
 		providerKeys: ProviderKeysStore,
 		sessions: SessionsStore,
+		customProviders: CustomProvidersStore,
 		backend: StorageBackend,
 	) {
 		this.settings = settings;
 		this.providerKeys = providerKeys;
 		this.sessions = sessions;
+		this.customProviders = customProviders;
 		this.backend = backend;
 	}
 

package/src/storage/stores/custom-providers-store.ts

@@ -0,0 +1,62 @@
+import type { Model } from "@mariozechner/pi-ai";
+import { Store } from "../store.js";
+import type { StoreConfig } from "../types.js";
+
+export type AutoDiscoveryProviderType = "ollama" | "llama.cpp" | "vllm" | "lmstudio";
+
+export type CustomProviderType =
+	| AutoDiscoveryProviderType // Auto-discovery - models fetched on-demand
+	| "openai-completions" // Manual models - stored in provider.models
+	| "openai-responses" // Manual models - stored in provider.models
+	| "anthropic-messages"; // Manual models - stored in provider.models
+
+export interface CustomProvider {
+	id: string; // UUID
+	name: string; // Display name, also used as Model.provider
+	type: CustomProviderType;
+	baseUrl: string;
+	apiKey?: string; // Optional, applies to all models
+
+	// For manual types ONLY - models stored directly on provider
+	// Auto-discovery types: models fetched on-demand, never stored
+	models?: Model<any>[];
+}
+
+/**
+ * Store for custom LLM providers (auto-discovery servers + manual providers).
+ */
+export class CustomProvidersStore extends Store {
+	getConfig(): StoreConfig {
+		return {
+			name: "custom-providers",
+		};
+	}
+
+	async get(id: string): Promise<CustomProvider | null> {
+		return this.getBackend().get("custom-providers", id);
+	}
+
+	async set(provider: CustomProvider): Promise<void> {
+		await this.getBackend().set("custom-providers", provider.id, provider);
+	}
+
+	async delete(id: string): Promise<void> {
+		await this.getBackend().delete("custom-providers", id);
+	}
+
+	async getAll(): Promise<CustomProvider[]> {
+		const keys = await this.getBackend().keys("custom-providers");
+		const providers: CustomProvider[] = [];
+		for (const key of keys) {
+			const provider = await this.get(key);
+			if (provider) {
+				providers.push(provider);
+			}
+		}
+		return providers;
+	}
+
+	async has(id: string): Promise<boolean> {
+		return this.getBackend().has("custom-providers", id);
+	}
+}

package/src/storage/stores/sessions-store.ts

@@ -103,7 +103,6 @@ export class SessionsStore extends Store {
 				cacheWrite: 0,
 				cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
 			},
-			modelId: state.model?.id || null,
 			thinkingLevel: state.thinkingLevel || "off",
 			preview: "",
 		};

package/src/storage/types.ts

@@ -128,9 +128,6 @@ export interface SessionMetadata {
 		};
 	};
 
-	/** Last used model ID (e.g., "claude-sonnet-4") */
-	modelId: string | null;
-
 	/** Last used thinking level */
 	thinkingLevel: ThinkingLevel;
 

package/src/tools/artifacts/ArtifactPill.ts

@@ -1,4 +1,5 @@
-import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
 import { FileCode2 } from "lucide";
 import type { ArtifactsPanel } from "./artifacts.js";
 

package/src/tools/artifacts/DocxArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { renderAsync } from "docx-preview";
 import { html, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/src/tools/artifacts/ExcelArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import * as XLSX from "xlsx";

package/src/tools/artifacts/GenericArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { i18n } from "../../utils/i18n.js";

package/src/tools/artifacts/HtmlArtifact.ts

@@ -1,4 +1,3 @@
-import { Button, CopyButton, DownloadButton, icon, PreviewCodeToggle } from "@mariozechner/mini-lit";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -13,6 +12,11 @@ import "../../components/SandboxedIframe.js";
 import { ArtifactElement } from "./ArtifactElement.js";
 import type { Console } from "./Console.js";
 import "./Console.js";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
 
 @customElement("html-artifact")
 export class HtmlArtifact extends ArtifactElement {

package/src/tools/artifacts/ImageArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { i18n } from "../../utils/i18n.js";

package/src/tools/artifacts/MarkdownArtifact.ts

@@ -1,10 +1,12 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { i18n } from "../../utils/i18n.js";
 import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
 import { ArtifactElement } from "./ArtifactElement.js";
 
 @customElement("markdown-artifact")

package/src/tools/artifacts/PdfArtifact.ts

@@ -1,4 +1,4 @@
-import { DownloadButton } from "@mariozechner/mini-lit";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import { html, type TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import * as pdfjsLib from "pdfjs-dist";

package/src/tools/artifacts/SvgArtifact.ts

@@ -1,4 +1,6 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/src/tools/artifacts/TextArtifact.ts

@@ -1,4 +1,5 @@
-import { CopyButton, DownloadButton } from "@mariozechner/mini-lit";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/src/tools/artifacts/artifacts-tool-renderer.ts

@@ -1,15 +1,27 @@
-import { Diff, html, type TemplateResult } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/CodeBlock.js";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FileCode2 } from "lucide";
 import "../../components/ConsoleBlock.js";
+import { Diff } from "@mariozechner/mini-lit/dist/Diff.js";
+import { html, type TemplateResult } from "lit";
 import { i18n } from "../../utils/i18n.js";
 import { renderCollapsibleHeader, renderHeader } from "../renderer-registry.js";
 import type { ToolRenderer, ToolRenderResult } from "../types.js";
 import { ArtifactPill } from "./ArtifactPill.js";
 import type { ArtifactsPanel, ArtifactsParams } from "./artifacts.js";
 
+// Helper to extract text from content blocks
+function getTextOutput(result: ToolResultMessage<any> | undefined): string {
+	if (!result) return "";
+	return (
+		result.content
+			?.filter((c) => c.type === "text")
+			.map((c: any) => c.text)
+			.join("\n") || ""
+	);
+}
+
 // Helper to determine language for syntax highlighting
 function getLanguageFromFilename(filename?: string): string {
 	if (!filename) return "text";
@@ -109,8 +121,8 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 							${isDiff ? diffContent : content ? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
 							${
 								isHtml
-									? html`<console-block .content=${result.output || i18n("An error occurred")} variant="error"></console-block>`
-									: html`<div class="text-sm text-destructive">${result.output || i18n("An error occurred")}</div>`
+									? html`<console-block .content=${getTextOutput(result) || i18n("An error occurred")} variant="error"></console-block>`
+									: html`<div class="text-sm text-destructive">${getTextOutput(result) || i18n("An error occurred")}</div>`
 							}
 						</div>
 					</div>
@@ -124,7 +136,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				content: html`
 				<div class="space-y-3">
 					${renderHeader(state, FileCode2, headerText)}
-					<div class="text-sm text-destructive">${result.output || i18n("An error occurred")}</div>
+					<div class="text-sm text-destructive">${getTextOutput(result) || i18n("An error occurred")}</div>
 				</div>
 			`,
 				isCustom: false,
@@ -141,7 +153,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 
 			// GET command: show code block with file content
 			if (command === "get") {
-				const fileContent = result.output || i18n("(no output)");
+				const fileContent = getTextOutput(result) || i18n("(no output)");
 				return {
 					content: html`
 					<div>
@@ -157,7 +169,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 
 			// LOGS command: show console block
 			if (command === "logs") {
-				const logs = result.output || i18n("(no output)");
+				const logs = getTextOutput(result) || i18n("(no output)");
 				return {
 					content: html`
 					<div>
@@ -175,7 +187,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 			if (command === "create" || command === "rewrite") {
 				const codeContent = content || "";
 				const isHtml = filename?.endsWith(".html");
-				const logs = result.output || "";
+				const logs = getTextOutput(result) || "";
 
 				return {
 					content: html`
@@ -193,7 +205,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 
 			if (command === "update") {
 				const isHtml = filename?.endsWith(".html");
-				const logs = result.output || "";
+				const logs = getTextOutput(result) || "";
 				return {
 					content: html`
 					<div>

package/src/tools/artifacts/artifacts.ts

@@ -1,5 +1,6 @@
-import { Button, icon } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { type AgentTool, type Message, StringEnum, type ToolCall } from "@mariozechner/pi-ai";
 import { type Static, Type } from "@sinclair/typebox";
 import { html, LitElement, type TemplateResult } from "lit";
@@ -284,7 +285,7 @@ export class ArtifactsPanel extends LitElement {
 			// Execute mutates our local store and returns a plain output
 			execute: async (_toolCallId: string, args: Static<typeof artifactsParamsSchema>, _signal?: AbortSignal) => {
 				const output = await this.executeCommand(args);
-				return { output, details: undefined };
+				return { content: [{ type: "text", text: output }], details: undefined };
 			},
 		};
 	}

package/src/tools/extract-document.ts

@@ -1,10 +1,11 @@
-import { html } from "@mariozechner/mini-lit";
 import type { AgentTool, ToolResultMessage } from "@mariozechner/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";
 
@@ -34,13 +35,13 @@ export interface ExtractDocumentResult {
 export function createExtractDocumentTool(): AgentTool<typeof extractDocumentSchema, ExtractDocumentResult> & {
 	corsProxyUrl?: string;
 } {
-	return {
+	const tool = {
 		label: "Extract Document",
 		name: "extract_document",
-		corsProxyUrl: undefined, // Can be set by consumer (e.g., from user settings)
+		corsProxyUrl: undefined as string | undefined, // Can be set by consumer (e.g., from user settings)
 		description: EXTRACT_DOCUMENT_DESCRIPTION,
 		parameters: extractDocumentSchema,
-		execute: async function (_toolCallId: string, args: ExtractDocumentParams, signal?: AbortSignal) {
+		execute: async (_toolCallId: string, args: ExtractDocumentParams, signal?: AbortSignal) => {
 			if (signal?.aborted) {
 				throw new Error("Extract document aborted");
 			}
@@ -57,17 +58,11 @@ export function createExtractDocumentTool(): AgentTool<typeof extractDocumentSch
 				throw new Error(`Invalid URL: ${url}`);
 			}
 
-			// Determine fetch URL (with or without CORS proxy)
-			let fetchUrl = url;
-			if (this.corsProxyUrl) {
-				fetchUrl = this.corsProxyUrl + encodeURIComponent(url);
-			}
-
 			// Size limit: 50MB
 			const MAX_SIZE = 50 * 1024 * 1024;
 
-			try {
-				// Attempt to fetch the document
+			// Helper function to fetch and process document
+			const fetchAndProcess = async (fetchUrl: string) => {
 				const response = await fetch(fetchUrl, { signal });
 
 				if (!response.ok) {
@@ -98,52 +93,31 @@ export function createExtractDocumentTool(): AgentTool<typeof extractDocumentSch
 					);
 				}
 
-				// 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) {
-					const mimeType = response.headers.get("content-type") || "unknown";
-					throw new Error(
-						`Document format not supported. Supported formats:\n` +
-							`- PDF (.pdf)\n` +
-							`- Word (.docx)\n` +
-							`- Excel (.xlsx, .xls)\n` +
-							`- PowerPoint (.pptx)\n\n` +
-							`Detected: ${mimeType}`,
-					);
-				}
+				return arrayBuffer;
+			};
 
-				// 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";
-				}
+			// Try without proxy first, fallback to proxy on CORS error
+			let arrayBuffer: ArrayBuffer;
 
-				return {
-					output: attachment.extractedText,
-					details: {
-						extractedText: attachment.extractedText,
-						format,
-						fileName: attachment.fileName,
-						size: attachment.size,
-					},
-				};
-			} catch (error: any) {
-				// Handle CORS errors specifically
-				if (error.name === "TypeError" && error.message.includes("Failed to fetch")) {
+			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` +
@@ -151,15 +125,58 @@ export function createExtractDocumentTool(): AgentTool<typeof extractDocumentSch
 							`2. Find "CORS Proxy URL" setting\n` +
 							`3. Enter a proxy URL like: https://corsproxy.io/?\n` +
 							`4. Save and try again\n\n` +
-							`Would you like me to explain what a CORS proxy is and how to set one up?`,
+							`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";
+			}
 
-				// Re-throw other errors
-				throw error;
+			// 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
@@ -193,7 +210,11 @@ export const extractDocumentRenderer: ToolRenderer<ExtractDocumentParams, Extrac
 					? "Failed to extract document"
 					: "Extracted text from document";
 
-			const output = result.output || "";
+			const output =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
 
 			return {
 				content: html`
@@ -214,7 +235,7 @@ export const extractDocumentRenderer: ToolRenderer<ExtractDocumentParams, Extrac
 							}
 							${
 								result.isError && output
-									? html`<console-block .content=${output} .variant="error"></console-block>`
+									? html`<console-block .content=${output} .variant=${"error"}></console-block>`
 									: ""
 							}
 						</div>

package/src/tools/javascript-repl.ts

@@ -1,6 +1,7 @@
-import { html, i18n } from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
 import type { AgentTool, ToolResultMessage } from "@mariozechner/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";
@@ -187,7 +188,7 @@ export function createJavaScriptReplTool(): AgentTool<typeof javascriptReplSchem
 					contentBase64: base64,
 				};
 			});
-			return { output: result.output, details: { files } };
+			return { content: [{ type: "text", text: result.output }], details: { files } };
 		},
 	};
 }
@@ -210,7 +211,11 @@ export const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScri
 
 		// With result: show params + result
 		if (result && params) {
-			const output = result.output || "";
+			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) => {