indusagi 0.1.1

package/dist/webui/tools/extract-document.d.ts

@@ -0,0 +1,24 @@
+import type { AgentTool } from "../../agent/index.js";
+import { type Static } from "@sinclair/typebox";
+import type { ToolRenderer } from "./types.js";
+declare const extractDocumentSchema: import("@sinclair/typebox").TObject<{
+    url: import("@sinclair/typebox").TString;
+}>;
+export type ExtractDocumentParams = Static<typeof extractDocumentSchema>;
+export interface ExtractDocumentResult {
+    extractedText: string;
+    format: string;
+    fileName: string;
+    size: number;
+}
+export declare function createExtractDocumentTool(): AgentTool<typeof extractDocumentSchema, ExtractDocumentResult> & {
+    corsProxyUrl?: string;
+};
+export declare const extractDocumentTool: AgentTool<import("@sinclair/typebox").TObject<{
+    url: import("@sinclair/typebox").TString;
+}>, ExtractDocumentResult> & {
+    corsProxyUrl?: string;
+};
+export declare const extractDocumentRenderer: ToolRenderer<ExtractDocumentParams, ExtractDocumentResult>;
+export {};
+//# sourceMappingURL=extract-document.d.ts.map

package/dist/webui/tools/extract-document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-document.d.ts","sourceRoot":"","sources":["../../../src/webui/tools/extract-document.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,KAAK,MAAM,EAAQ,MAAM,mBAAmB,CAAC;AAQtD,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,YAAY,CAAC;AAMjE,QAAA,MAAM,qBAAqB;;EAIzB,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEzE,MAAM,WAAW,qBAAqB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACb;AAMD,wBAAgB,yBAAyB,IAAI,SAAS,CAAC,OAAO,qBAAqB,EAAE,qBAAqB,CAAC,GAAG;IAC7G,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CA+IA;AAGD,eAAO,MAAM,mBAAmB;;;mBAnJhB,MAAM;CAmJwC,CAAC;AAM/D,eAAO,MAAM,uBAAuB,EAAE,YAAY,CAAC,qBAAqB,EAAE,qBAAqB,CAkF9F,CAAC"}

package/dist/webui/tools/extract-document.js

@@ -0,0 +1,215 @@
+import { 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";
+// ============================================================================
+// TYPES
+// ============================================================================
+const extractDocumentSchema = Type.Object({
+    url: Type.String({
+        description: "URL of the document to extract text from (PDF, DOCX, XLSX, or PPTX)",
+    }),
+});
+// ============================================================================
+// TOOL
+// ============================================================================
+export function createExtractDocumentTool() {
+    const tool = {
+        label: "Extract Document",
+        name: "extract_document",
+        corsProxyUrl: undefined, // Can be set by consumer (e.g., from user settings)
+        description: EXTRACT_DOCUMENT_DESCRIPTION,
+        parameters: extractDocumentSchema,
+        execute: async (_toolCallId, args, signal) => {
+            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) => {
+                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;
+            try {
+                // Attempt direct fetch first
+                arrayBuffer = await fetchAndProcess(url);
+            }
+            catch (directError) {
+                // 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) {
+                        // 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", 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 = {
+    render(params, result, isStreaming) {
+        // Determine status
+        const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
+        // Create refs for collapsible sections
+        const contentRef = createRef();
+        const chevronRef = createRef();
+        // 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) => 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/dist/webui/tools/index.d.ts

@@ -0,0 +1,16 @@
+import type { ToolResultMessage } from "../../ai/index.js";
+import "./javascript-repl.js";
+import "./extract-document.js";
+import { getToolRenderer, registerToolRenderer } from "./renderer-registry.js";
+import type { ToolRenderResult } from "./types.js";
+/**
+ * Enable or disable show JSON mode
+ * When enabled, all tool renderers will use the default JSON renderer
+ */
+export declare function setShowJsonMode(enabled: boolean): void;
+/**
+ * Render tool - unified function that handles params, result, and streaming state
+ */
+export declare function renderTool(toolName: string, params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): ToolRenderResult;
+export { getToolRenderer, registerToolRenderer };
+//# sourceMappingURL=index.d.ts.map

package/dist/webui/tools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/webui/tools/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAUnD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAEtD;AAED;;GAEG;AACH,wBAAgB,UAAU,CACzB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,GAAG,GAAG,SAAS,EACvB,MAAM,EAAE,iBAAiB,GAAG,SAAS,EACrC,WAAW,CAAC,EAAE,OAAO,GACnB,gBAAgB,CAWlB;AAED,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/webui/tools/index.js

@@ -0,0 +1,32 @@
+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";
+// 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) {
+    showJsonMode = enabled;
+}
+/**
+ * Render tool - unified function that handles params, result, and streaming state
+ */
+export function renderTool(toolName, params, result, isStreaming) {
+    // 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/dist/webui/tools/javascript-repl.d.ts

@@ -0,0 +1,44 @@
+import type { AgentTool } from "../../agent/index.js";
+import { type Static } from "@sinclair/typebox";
+import { type SandboxFile } from "../components/SandboxedIframe.js";
+import type { SandboxRuntimeProvider } from "../components/sandbox/SandboxRuntimeProvider.js";
+import type { ToolRenderer } from "./types.js";
+export declare function executeJavaScript(code: string, runtimeProviders: SandboxRuntimeProvider[], signal?: AbortSignal, sandboxUrlProvider?: () => string): Promise<{
+    output: string;
+    files?: SandboxFile[];
+}>;
+export type JavaScriptReplToolResult = {
+    files?: {
+        fileName: string;
+        contentBase64: string;
+        mimeType: string;
+    }[] | undefined;
+};
+declare const javascriptReplSchema: import("@sinclair/typebox").TObject<{
+    title: import("@sinclair/typebox").TString;
+    code: import("@sinclair/typebox").TString;
+}>;
+export type JavaScriptReplParams = Static<typeof javascriptReplSchema>;
+interface JavaScriptReplResult {
+    output?: string;
+    files?: Array<{
+        fileName: string;
+        mimeType: string;
+        size: number;
+        contentBase64: string;
+    }>;
+}
+export declare function createJavaScriptReplTool(): AgentTool<typeof javascriptReplSchema, JavaScriptReplToolResult> & {
+    runtimeProvidersFactory?: () => SandboxRuntimeProvider[];
+    sandboxUrlProvider?: () => string;
+};
+export declare const javascriptReplTool: AgentTool<import("@sinclair/typebox").TObject<{
+    title: import("@sinclair/typebox").TString;
+    code: import("@sinclair/typebox").TString;
+}>, JavaScriptReplToolResult> & {
+    runtimeProvidersFactory?: () => SandboxRuntimeProvider[];
+    sandboxUrlProvider?: () => string;
+};
+export declare const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScriptReplResult>;
+export {};
+//# sourceMappingURL=javascript-repl.d.ts.map

package/dist/webui/tools/javascript-repl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"javascript-repl.d.ts","sourceRoot":"","sources":["../../../src/webui/tools/javascript-repl.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,KAAK,MAAM,EAAQ,MAAM,mBAAmB,CAAC;AAItD,OAAO,EAAE,KAAK,WAAW,EAAqC,MAAM,kCAAkC,CAAC;AACvG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AAI9F,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,YAAY,CAAC;AAGjE,wBAAsB,iBAAiB,CACtC,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,sBAAsB,EAAE,EAC1C,MAAM,CAAC,EAAE,WAAW,EACpB,kBAAkB,CAAC,EAAE,MAAM,MAAM,GAC/B,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC,CA2EpD;AAED,MAAM,MAAM,wBAAwB,GAAG;IACtC,KAAK,CAAC,EACH;QACA,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,MAAM,CAAC;KAChB,EAAE,GACH,SAAS,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,oBAAoB;;;EAMxB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEvE,UAAU,oBAAoB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,aAAa,EAAE,MAAM,CAAC;KACtB,CAAC,CAAC;CACH;AAED,wBAAgB,wBAAwB,IAAI,SAAS,CAAC,OAAO,oBAAoB,EAAE,wBAAwB,CAAC,GAAG;IAC9G,uBAAuB,CAAC,EAAE,MAAM,sBAAsB,EAAE,CAAC;IACzD,kBAAkB,CAAC,EAAE,MAAM,MAAM,CAAC;CAClC,CAgEA;AAGD,eAAO,MAAM,kBAAkB;;;;8BArEJ,MAAM,sBAAsB,EAAE;yBACnC,MAAM,MAAM;CAoE0B,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,YAAY,CAAC,oBAAoB,EAAE,oBAAoB,CA0F3F,CAAC"}

package/dist/webui/tools/javascript-repl.js

@@ -0,0 +1,223 @@
+import { i18n } from "@mariozechner/mini-lit";
+import { Type } from "@sinclair/typebox";
+import { html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Code } from "lucide";
+import { SandboxIframe } from "../components/SandboxedIframe.js";
+import { JAVASCRIPT_REPL_TOOL_DESCRIPTION } from "../prompts/prompts.js";
+import { registerToolRenderer, renderCollapsibleHeader, renderHeader } from "./renderer-registry.js";
+// Execute JavaScript code with attachments using SandboxedIframe
+export async function executeJavaScript(code, runtimeProviders, signal, sandboxUrlProvider) {
+    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 = 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) {
+        // Clean up on error
+        sandbox.remove();
+        throw new Error(error.message || "Execution failed");
+    }
+}
+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 function createJavaScriptReplTool() {
+    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, args, signal) {
+            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) => {
+                    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 = {
+    render(params, result, isStreaming) {
+        // Determine status
+        const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
+        // Create refs for collapsible code section
+        const codeContentRef = createRef();
+        const codeChevronRef = createRef();
+        // With result: show params + result
+        if (result && params) {
+            const output = result.content
+                ?.filter((c) => c.type === "text")
+                .map((c) => c.text)
+                .join("\n") || "";
+            const files = result.details?.files || [];
+            const attachments = files.map((f, i) => {
+                // Decode base64 content for text files to show in overlay
+                let extractedText;
+                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);

package/dist/webui/tools/renderer-registry.d.ts

@@ -0,0 +1,23 @@
+import { type TemplateResult } from "lit";
+import type { Ref } from "lit/directives/ref.js";
+import type { ToolRenderer } from "./types.js";
+export declare const toolRenderers: Map<string, ToolRenderer<any, any>>;
+/**
+ * Register a custom tool renderer
+ */
+export declare function registerToolRenderer(toolName: string, renderer: ToolRenderer): void;
+/**
+ * Get a tool renderer by name
+ */
+export declare function getToolRenderer(toolName: string): ToolRenderer | undefined;
+/**
+ * Helper to render a header for tool renderers
+ * Shows icon on left when complete/error, spinner on right when in progress
+ */
+export declare function renderHeader(state: "inprogress" | "complete" | "error", toolIcon: any, text: string | TemplateResult): TemplateResult;
+/**
+ * Helper to render a collapsible header for tool renderers
+ * Same as renderHeader but with a chevron button that toggles visibility of content
+ */
+export declare function renderCollapsibleHeader(state: "inprogress" | "complete" | "error", toolIcon: any, text: string | TemplateResult, contentRef: Ref<HTMLElement>, chevronRef: Ref<HTMLElement>, defaultExpanded?: boolean): TemplateResult;
+//# sourceMappingURL=renderer-registry.d.ts.map

package/dist/webui/tools/renderer-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer-registry.d.ts","sourceRoot":"","sources":["../../../src/webui/tools/renderer-registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,eAAO,MAAM,aAAa,qCAAkC,CAAC;AAE7D;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI,CAEnF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAE1E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,EAC1C,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,MAAM,GAAG,cAAc,GAC3B,cAAc,CA8BhB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACtC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,EAC1C,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,MAAM,GAAG,cAAc,EAC7B,UAAU,EAAE,GAAG,CAAC,WAAW,CAAC,EAC5B,UAAU,EAAE,GAAG,CAAC,WAAW,CAAC,EAC5B,eAAe,UAAQ,GACrB,cAAc,CAsDhB"}