@mariozechner/pi-web-ui 0.5.44 → 0.5.46

package/src/tools/javascript-repl.ts

@@ -1,16 +1,19 @@
-import { html, i18n, type TemplateResult } from "@mariozechner/mini-lit";
+import { html, i18n } from "@mariozechner/mini-lit";
 import type { AgentTool, ToolResultMessage } from "@mariozechner/pi-ai";
 import { type Static, Type } from "@sinclair/typebox";
+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 } from "./renderer-registry.js";
-import type { ToolRenderer } from "./types.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,
-	attachments: Attachment[] = [],
+	runtimeProviders: SandboxRuntimeProvider[],
 	signal?: AbortSignal,
 	sandboxUrlProvider?: () => string,
 ): Promise<{ output: string; files?: SandboxFile[] }> {
@@ -32,31 +35,40 @@ export async function executeJavaScript(
 	document.body.appendChild(sandbox);
 
 	try {
-		const sandboxId = `repl-${Date.now()}`;
-		const result: SandboxResult = await sandbox.execute(sandboxId, code, attachments, signal);
+		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();
 
-		// 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";
+				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`;
@@ -92,94 +104,49 @@ export type JavaScriptReplToolResult = {
 };
 
 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> & {
-	attachmentsProvider?: () => Attachment[];
+	runtimeProvidersFactory?: () => SandboxRuntimeProvider[];
 	sandboxUrlProvider?: () => string;
 } {
 	return {
 		label: "JavaScript REPL",
 		name: "javascript_repl",
-		attachmentsProvider: () => [], // default to empty array
+		runtimeProvidersFactory: () => [], // 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.)`,
+		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 attachments = this.attachmentsProvider?.() || [];
-			const result = await executeJavaScript(args.code, attachments, signal, this.sandboxUrlProvider);
+			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 } => {
@@ -228,80 +195,91 @@ Global variables:
 // 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 || [];
+	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.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);
+					}
+				}
 
-		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");
+				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,
+				};
+			});
 
-			if (isTextBased && f.contentBase64) {
-				try {
-					extractedText = atob(f.contentBase64);
-				} catch (e) {
-					console.warn("Failed to decode base64 content for", f.fileName);
-				}
-			}
+			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 {
-				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,
+				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,
 			};
-		});
+		}
 
-		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>
-		`;
+		// No params or result yet
+		return { content: renderHeader(state, Code, i18n("Preparing JavaScript...")), isCustom: false };
 	},
 };
 

package/src/tools/renderer-registry.ts

@@ -1,3 +1,7 @@
+import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import type { Ref } from "lit/directives/ref.js";
+import { ref } from "lit/directives/ref.js";
+import { ChevronRight, Loader } from "lucide";
 import type { ToolRenderer } from "./types.js";
 
 // Registry of tool renderers
@@ -16,3 +20,97 @@ export function registerToolRenderer(toolName: string, renderer: ToolRenderer):
 export function getToolRenderer(toolName: string): ToolRenderer | undefined {
 	return toolRenderers.get(toolName);
 }
+
+/**
+ * Helper to render a header for tool renderers
+ * Shows icon on left when complete/error, spinner on right when in progress
+ */
+export function renderHeader(
+	state: "inprogress" | "complete" | "error",
+	toolIcon: any,
+	text: string | TemplateResult,
+): TemplateResult {
+	const statusIcon = (iconComponent: any, color: string) =>
+		html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
+
+	switch (state) {
+		case "inprogress":
+			return html`
+				<div class="flex items-center justify-between gap-2 text-sm text-muted-foreground">
+					<div class="flex items-center gap-2">
+						${statusIcon(toolIcon, "text-foreground")}
+						${text}
+					</div>
+					${statusIcon(Loader, "text-foreground animate-spin")}
+				</div>
+			`;
+		case "complete":
+			return html`
+				<div class="flex items-center gap-2 text-sm text-muted-foreground">
+					${statusIcon(toolIcon, "text-green-600 dark:text-green-500")}
+					${text}
+				</div>
+			`;
+		case "error":
+			return html`
+				<div class="flex items-center gap-2 text-sm text-muted-foreground">
+					${statusIcon(toolIcon, "text-destructive")}
+					${text}
+				</div>
+			`;
+	}
+}
+
+/**
+ * Helper to render a collapsible header for tool renderers
+ * Same as renderHeader but with a chevron button that toggles visibility of content
+ */
+export function renderCollapsibleHeader(
+	state: "inprogress" | "complete" | "error",
+	toolIcon: any,
+	text: string | TemplateResult,
+	contentRef: Ref<HTMLElement>,
+	chevronRef: Ref<HTMLElement>,
+	defaultExpanded = false,
+): TemplateResult {
+	const statusIcon = (iconComponent: any, color: string) =>
+		html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
+
+	const toggleContent = (e: Event) => {
+		e.preventDefault();
+		const content = contentRef.value;
+		const chevron = chevronRef.value;
+		if (content && chevron) {
+			const isCollapsed = content.classList.contains("max-h-0");
+			if (isCollapsed) {
+				content.classList.remove("max-h-0");
+				content.classList.add("max-h-[2000px]", "mt-3");
+				chevron.classList.add("rotate-90");
+			} else {
+				content.classList.remove("max-h-[2000px]", "mt-3");
+				content.classList.add("max-h-0");
+				chevron.classList.remove("rotate-90");
+			}
+		}
+	};
+
+	const toolIconColor =
+		state === "complete"
+			? "text-green-600 dark:text-green-500"
+			: state === "error"
+				? "text-destructive"
+				: "text-foreground";
+
+	return html`
+		<button @click=${toggleContent} class="flex items-center justify-between gap-2 text-sm text-muted-foreground w-full text-left hover:text-foreground transition-colors cursor-pointer">
+			<div class="flex items-center gap-2">
+				${state === "inprogress" ? statusIcon(Loader, "text-foreground animate-spin") : ""}
+				${statusIcon(toolIcon, toolIconColor)}
+				${text}
+			</div>
+			<span class="inline-block text-muted-foreground transition-transform duration-300 ${defaultExpanded ? "rotate-90" : ""}" ${ref(chevronRef)}>
+				${icon(ChevronRight, "sm")}
+			</span>
+		</button>
+	`;
+}

package/src/tools/renderers/BashRenderer.ts

@@ -1,7 +1,9 @@
-import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { SquareTerminal } from "lucide";
 import { i18n } from "../../utils/i18n.js";
-import type { ToolRenderer } from "../types.js";
+import { renderHeader } from "../renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
 
 interface BashParams {
 	command: string;
@@ -9,37 +11,38 @@ interface BashParams {
 
 // 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>
-		`;
-	}
+	render(params: BashParams | undefined, result: ToolResultMessage<undefined> | undefined): ToolRenderResult {
+		const state = result ? (result.isError ? "error" : "complete") : "inprogress";
 
-	renderResult(_params: BashParams, result: ToolResultMessage<undefined>): TemplateResult {
-		const output = result.output || "";
-		const isError = result.isError === true;
+		// With result: show command + output
+		if (result && params?.command) {
+			const output = result.output || "";
+			const combined = output ? `> ${params.command}\n\n${output}` : `> ${params.command}`;
+			return {
+				content: html`
+					<div class="space-y-3">
+						${renderHeader(state, SquareTerminal, i18n("Running command..."))}
+						<console-block .content=${combined} .variant=${result.isError ? "error" : "default"}></console-block>
+					</div>
+				`,
+				isCustom: false,
+			};
+		}
 
-		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>
-			`;
+		// Just params (streaming or waiting)
+		if (params?.command) {
+			return {
+				content: html`
+					<div class="space-y-3">
+						${renderHeader(state, SquareTerminal, i18n("Running command..."))}
+						<console-block .content=${`> ${params.command}`}></console-block>
+					</div>
+				`,
+				isCustom: false,
+			};
 		}
 
-		// 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>
-		`;
+		// No params yet
+		return { content: renderHeader(state, SquareTerminal, i18n("Waiting for command...")), isCustom: false };
 	}
 }

package/src/tools/renderers/CalculateRenderer.ts

@@ -1,7 +1,9 @@
-import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { Calculator } from "lucide";
 import { i18n } from "../../utils/i18n.js";
-import type { ToolRenderer } from "../types.js";
+import { renderHeader } from "../renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
 
 interface CalculateParams {
 	expression: string;
@@ -9,41 +11,44 @@ interface CalculateParams {
 
 // 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>`;
-		}
+	render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): ToolRenderResult {
+		const state = result ? (result.isError ? "error" : "complete") : "inprogress";
 
-		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>
-		`;
-	}
+		// Full params + full result
+		if (result && params?.expression) {
+			const output = result.output || "";
 
-	renderResult(_params: CalculateParams, result: ToolResultMessage<undefined>): TemplateResult {
-		// Parse the output to make it look nicer
-		const output = result.output || "";
-		const isError = result.isError === true;
+			// Error: show expression in header, error below
+			if (result.isError) {
+				return {
+					content: html`
+						<div class="space-y-3">
+							${renderHeader(state, Calculator, params.expression)}
+							<div class="text-sm text-destructive">${output}</div>
+						</div>
+					`,
+					isCustom: false,
+				};
+			}
+
+			// Success: show expression = result in header
+			return { content: renderHeader(state, Calculator, `${params.expression} = ${output}`), isCustom: false };
+		}
 
-		if (isError) {
-			return html`<div class="text-sm text-destructive">${output}</div>`;
+		// Full params, no result: just show header with expression in it
+		if (params?.expression) {
+			return {
+				content: renderHeader(state, Calculator, `${i18n("Calculating")} ${params.expression}`),
+				isCustom: false,
+			};
 		}
 
-		// 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>
-			`;
+		// Partial params (empty expression), no result
+		if (params && !params.expression) {
+			return { content: renderHeader(state, Calculator, i18n("Writing expression...")), isCustom: false };
 		}
 
-		// Fallback to showing the whole output
-		return html`<div class="text-sm font-mono text-foreground">${output}</div>`;
+		// No params, no result
+		return { content: renderHeader(state, Calculator, i18n("Waiting for expression...")), isCustom: false };
 	}
 }