Add ToolRenderResult interface for custom tool rendering

- Changed ToolRenderer return type from TemplateResult to ToolRenderResult
- ToolRenderResult = { content: TemplateResult, isCustom: boolean }
- isCustom: true = no card wrapper, false = wrap in card
- Updated all existing tool renderers to return new format
- Updated Messages.ts to handle custom rendering

This enables tools to render without default card chrome when needed.

packages/web-ui/src/tools/renderers/BashRenderer.ts

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

packages/web-ui/src/tools/renderers/CalculateRenderer.ts

@@ -1,9 +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 { renderHeader } from "../renderer-registry.js";
-import type { ToolRenderer } from "../types.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
 
 interface CalculateParams {
 	expression: string;
@@ -11,7 +11,7 @@ interface CalculateParams {
 
 // Calculate tool has undefined details (only uses output)
 export class CalculateRenderer implements ToolRenderer<CalculateParams, undefined> {
-	render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
+	render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): ToolRenderResult {
 		const state = result ? (result.isError ? "error" : "complete") : "inprogress";
 
 		// Full params + full result
@@ -20,29 +20,35 @@ export class CalculateRenderer implements ToolRenderer<CalculateParams, undefine
 
 			// Error: show expression in header, error below
 			if (result.isError) {
-				return html`
-					<div class="space-y-3">
-						${renderHeader(state, Calculator, params.expression)}
-						<div class="text-sm text-destructive">${output}</div>
-					</div>
-				`;
+				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 renderHeader(state, Calculator, `${params.expression} = ${output}`);
+			return { content: renderHeader(state, Calculator, `${params.expression} = ${output}`), isCustom: false };
 		}
 
 		// Full params, no result: just show header with expression in it
 		if (params?.expression) {
-			return renderHeader(state, Calculator, `${i18n("Calculating")} ${params.expression}`);
+			return {
+				content: renderHeader(state, Calculator, `${i18n("Calculating")} ${params.expression}`),
+				isCustom: false,
+			};
 		}
 
 		// Partial params (empty expression), no result
 		if (params && !params.expression) {
-			return renderHeader(state, Calculator, i18n("Writing expression..."));
+			return { content: renderHeader(state, Calculator, i18n("Writing expression...")), isCustom: false };
 		}
 
 		// No params, no result
-		return renderHeader(state, Calculator, i18n("Waiting for expression..."));
+		return { content: renderHeader(state, Calculator, i18n("Waiting for expression...")), isCustom: false };
 	}
 }

packages/web-ui/src/tools/renderers/DefaultRenderer.ts

@@ -1,14 +1,17 @@
-import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
 import { i18n } from "../../utils/i18n.js";
-import type { ToolRenderer } from "../types.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
 
 export class DefaultRenderer implements ToolRenderer {
-	render(params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): TemplateResult {
+	render(params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): ToolRenderResult {
 		// Show result if available
 		if (result) {
 			const text = result.output || i18n("(no output)");
-			return html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
+			return {
+				content: html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`,
+				isCustom: false,
+			};
 		}
 
 		// Show params
@@ -25,13 +28,19 @@ export class DefaultRenderer implements ToolRenderer {
 			}
 
 			if (isStreaming && (!text || text === "{}" || text === "null")) {
-				return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`;
+				return {
+					content: html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`,
+					isCustom: false,
+				};
 			}
 
-			return html`<console-block .content=${text}></console-block>`;
+			return { content: html`<console-block .content=${text}></console-block>`, isCustom: false };
 		}
 
 		// No params or result yet
-		return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool...")}</div>`;
+		return {
+			content: html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool...")}</div>`,
+			isCustom: false,
+		};
 	}
 }

packages/web-ui/src/tools/renderers/GetCurrentTimeRenderer.ts

@@ -1,9 +1,9 @@
-import { html, type TemplateResult } from "@mariozechner/mini-lit";
+import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
 import { Clock } from "lucide";
 import { i18n } from "../../utils/i18n.js";
 import { renderHeader } from "../renderer-registry.js";
-import type { ToolRenderer } from "../types.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
 
 interface GetCurrentTimeParams {
 	timezone?: string;
@@ -11,7 +11,10 @@ interface GetCurrentTimeParams {
 
 // GetCurrentTime tool has undefined details (only uses output)
 export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams, undefined> {
-	render(params: GetCurrentTimeParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
+	render(
+		params: GetCurrentTimeParams | undefined,
+		result: ToolResultMessage<undefined> | undefined,
+	): ToolRenderResult {
 		const state = result ? (result.isError ? "error" : "complete") : "inprogress";
 
 		// Full params + full result
@@ -23,16 +26,19 @@ export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams
 
 			// Error: show header, error below
 			if (result.isError) {
-				return html`
-					<div class="space-y-3">
-						${renderHeader(state, Clock, headerText)}
-						<div class="text-sm text-destructive">${output}</div>
-					</div>
-				`;
+				return {
+					content: html`
+						<div class="space-y-3">
+							${renderHeader(state, Clock, headerText)}
+							<div class="text-sm text-destructive">${output}</div>
+						</div>
+					`,
+					isCustom: false,
+				};
 			}
 
 			// Success: show time in header
-			return renderHeader(state, Clock, `${headerText}: ${output}`);
+			return { content: renderHeader(state, Clock, `${headerText}: ${output}`), isCustom: false };
 		}
 
 		// Full result, no params
@@ -41,29 +47,38 @@ export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams
 
 			// Error: show header, error below
 			if (result.isError) {
-				return html`
-					<div class="space-y-3">
-						${renderHeader(state, Clock, i18n("Getting current date and time"))}
-						<div class="text-sm text-destructive">${output}</div>
-					</div>
-				`;
+				return {
+					content: html`
+						<div class="space-y-3">
+							${renderHeader(state, Clock, i18n("Getting current date and time"))}
+							<div class="text-sm text-destructive">${output}</div>
+						</div>
+					`,
+					isCustom: false,
+				};
 			}
 
 			// Success: show time in header
-			return renderHeader(state, Clock, `${i18n("Getting current date and time")}: ${output}`);
+			return {
+				content: renderHeader(state, Clock, `${i18n("Getting current date and time")}: ${output}`),
+				isCustom: false,
+			};
 		}
 
 		// Full params, no result: show timezone info in header
 		if (params?.timezone) {
-			return renderHeader(state, Clock, `${i18n("Getting current time in")} ${params.timezone}`);
+			return {
+				content: renderHeader(state, Clock, `${i18n("Getting current time in")} ${params.timezone}`),
+				isCustom: false,
+			};
 		}
 
 		// Partial params (no timezone) or empty params, no result
 		if (params) {
-			return renderHeader(state, Clock, i18n("Getting current date and time"));
+			return { content: renderHeader(state, Clock, i18n("Getting current date and time")), isCustom: false };
 		}
 
 		// No params, no result
-		return renderHeader(state, Clock, i18n("Getting time..."));
+		return { content: renderHeader(state, Clock, i18n("Getting time...")), isCustom: false };
 	}
 }