@mariozechner/pi-web-ui 0.5.44 → 0.5.45

package/src/components/AgentInterface.ts

@@ -7,7 +7,7 @@ import type { MessageEditor } from "./MessageEditor.js";
 import "./MessageEditor.js";
 import "./MessageList.js";
 import "./Messages.js"; // Import for side effects to register the custom elements
-import type { AgentSession, AgentSessionEvent } from "../state/agent-session.js";
+import type { Agent, AgentEvent } from "../agent/agent.js";
 import { getAppStorage } from "../storage/app-storage.js";
 import "./StreamingMessageContainer.js";
 import type { Attachment } from "../utils/attachment-utils.js";
@@ -18,14 +18,17 @@ import type { StreamingMessageContainer } from "./StreamingMessageContainer.js";
 @customElement("agent-interface")
 export class AgentInterface extends LitElement {
 	// Optional external session: when provided, this component becomes a view over the session
-	@property({ attribute: false }) session?: AgentSession;
-	@property() enableAttachments = true;
-	@property() enableModelSelector = true;
-	@property() enableThinking = true;
-	@property() showThemeToggle = false;
-	@property() showDebugToggle = false;
+	@property({ attribute: false }) session?: Agent;
+	@property({ type: Boolean }) enableAttachments = true;
+	@property({ type: Boolean }) enableModelSelector = true;
+	@property({ type: Boolean }) enableThinkingSelector = true;
+	@property({ type: Boolean }) showThemeToggle = false;
 	// Optional custom API key prompt handler - if not provided, uses default dialog
 	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
+	// Optional callback called before sending a message
+	@property({ attribute: false }) onBeforeSend?: () => void | Promise<void>;
+	// Optional callback called before executing a tool call - return false to prevent execution
+	@property({ attribute: false }) onBeforeToolCall?: (toolName: string, args: any) => boolean | Promise<boolean>;
 
 	// References
 	@query("message-editor") private _messageEditor!: MessageEditor;
@@ -49,10 +52,23 @@ export class AgentInterface extends LitElement {
 		update();
 	}
 
+	public setAutoScroll(enabled: boolean) {
+		this._autoScroll = enabled;
+	}
+
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
 		return this;
 	}
 
+	override willUpdate(changedProperties: Map<string, any>) {
+		super.willUpdate(changedProperties);
+
+		// Re-subscribe when session property changes
+		if (changedProperties.has("session")) {
+			this.setupSessionSubscription();
+		}
+	}
+
 	override async connectedCallback() {
 		super.connectedCallback();
 
@@ -85,11 +101,6 @@ export class AgentInterface extends LitElement {
 
 		// Subscribe to external session if provided
 		this.setupSessionSubscription();
-
-		// Attach debug listener if session provided
-		if (this.session) {
-			this.session = this.session; // explicitly set to trigger subscription
-		}
 	}
 
 	override disconnectedCallback() {
@@ -117,7 +128,7 @@ export class AgentInterface extends LitElement {
 			this._unsubscribeSession = undefined;
 		}
 		if (!this.session) return;
-		this._unsubscribeSession = this.session.subscribe(async (ev: AgentSessionEvent) => {
+		this._unsubscribeSession = this.session.subscribe(async (ev: AgentEvent) => {
 			if (ev.type === "state-update") {
 				if (this._streamingContainer) {
 					this._streamingContainer.isStreaming = ev.state.isStreaming;
@@ -166,7 +177,7 @@ export class AgentInterface extends LitElement {
 
 		// Check if API key exists for the provider (only needed in direct mode)
 		const provider = session.state.model.provider;
-		const apiKey = await getAppStorage().providerKeys.getKey(provider);
+		const apiKey = await getAppStorage().providerKeys.get(provider);
 
 		// If no API key, prompt for it
 		if (!apiKey) {
@@ -183,6 +194,11 @@ export class AgentInterface extends LitElement {
 			}
 		}
 
+		// Call onBeforeSend hook before sending
+		if (this.onBeforeSend) {
+			await this.onBeforeSend();
+		}
+
 		// Only clear editor after we know we can send
 		this._messageEditor.value = "";
 		this._messageEditor.attachments = [];
@@ -286,7 +302,7 @@ export class AgentInterface extends LitElement {
 							.thinkingLevel=${state.thinkingLevel}
 							.showAttachmentButton=${this.enableAttachments}
 							.showModelSelector=${this.enableModelSelector}
-							.showThinking=${this.enableThinking}
+							.showThinkingSelector=${this.enableThinkingSelector}
 							.onSend=${(input: string, attachments: Attachment[]) => {
 								this.sendMessage(input, attachments);
 							}}
@@ -295,7 +311,7 @@ export class AgentInterface extends LitElement {
 								ModelSelector.open(state.model, (model) => session.setModel(model));
 							}}
 							.onThinkingChange=${
-								this.enableThinking
+								this.enableThinkingSelector
 									? (level: "off" | "minimal" | "low" | "medium" | "high") => {
 											session.setThinkingLevel(level);
 										}

package/src/components/ConsoleBlock.ts

@@ -6,6 +6,7 @@ import { i18n } from "../utils/i18n.js";
 
 export class ConsoleBlock extends LitElement {
 	@property() content: string = "";
+	@property() variant: "default" | "error" = "default";
 	@state() private copied = false;
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
@@ -38,6 +39,9 @@ export class ConsoleBlock extends LitElement {
 	}
 
 	override render() {
+		const isError = this.variant === "error";
+		const textClass = isError ? "text-destructive" : "text-foreground";
+
 		return html`
 			<div class="border border-border rounded-lg overflow-hidden">
 				<div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border">
@@ -52,7 +56,7 @@ export class ConsoleBlock extends LitElement {
 					</button>
 				</div>
 				<div class="console-scroll overflow-auto max-h-64">
-					<pre class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs text-foreground font-mono whitespace-pre-wrap">
+					<pre class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs ${textClass} font-mono whitespace-pre-wrap">
 ${this.content || ""}</pre
 					>
 				</div>

package/src/components/ExpandableSection.ts

@@ -0,0 +1,46 @@
+import { icon } from "@mariozechner/mini-lit";
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ChevronDown, ChevronRight } from "lucide";
+
+/**
+ * Reusable expandable section component for tool renderers.
+ * Captures children in connectedCallback and re-renders them in the details area.
+ */
+@customElement("expandable-section")
+export class ExpandableSection extends LitElement {
+	@property() summary!: string;
+	@property({ type: Boolean }) defaultExpanded = false;
+	@state() private expanded = false;
+	private capturedChildren: Node[] = [];
+
+	protected createRenderRoot() {
+		return this; // light DOM
+	}
+
+	override connectedCallback() {
+		super.connectedCallback();
+		// Capture children before first render
+		this.capturedChildren = Array.from(this.childNodes);
+		// Clear children (we'll re-insert them in render)
+		this.innerHTML = "";
+		this.expanded = this.defaultExpanded;
+	}
+
+	override render(): TemplateResult {
+		return html`
+			<div>
+				<button
+					@click=${() => {
+						this.expanded = !this.expanded;
+					}}
+					class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full text-left"
+				>
+					${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
+					<span>${this.summary}</span>
+				</button>
+				${this.expanded ? html`<div class="mt-2">${this.capturedChildren}</div>` : ""}
+			</div>
+		`;
+	}
+}

package/src/components/MessageEditor.ts

@@ -1,9 +1,9 @@
-import { Button, html, icon } from "@mariozechner/mini-lit";
+import { Button, html, icon, Select, type SelectOption } from "@mariozechner/mini-lit";
 import type { Model } from "@mariozechner/pi-ai";
 import { LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
+import { Brain, Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
 import "./AttachmentTile.js";
 import { type Attachment, loadAttachment } from "../utils/attachment-utils.js";
 import { i18n } from "../utils/i18n.js";
@@ -33,13 +33,15 @@ export class MessageEditor extends LitElement {
 
 	@property() isStreaming = false;
 	@property() currentModel?: Model<any>;
+	@property() thinkingLevel: "off" | "minimal" | "low" | "medium" | "high" = "off";
 	@property() showAttachmentButton = true;
 	@property() showModelSelector = true;
-	@property() showThinking = false; // Disabled for now
+	@property() showThinkingSelector = true;
 	@property() onInput?: (value: string) => void;
 	@property() onSend?: (input: string, attachments: Attachment[]) => void;
 	@property() onAbort?: () => void;
 	@property() onModelSelect?: () => void;
+	@property() onThinkingChange?: (level: "off" | "minimal" | "low" | "medium" | "high") => void;
 	@property() onFilesChange?: (files: Attachment[]) => void;
 	@property() attachments: Attachment[] = [];
 	@property() maxFiles = 10;
@@ -48,6 +50,7 @@ export class MessageEditor extends LitElement {
 		"image/*,application/pdf,.docx,.pptx,.xlsx,.xls,.txt,.md,.json,.xml,.html,.css,.js,.ts,.jsx,.tsx,.yml,.yaml";
 
 	@state() processingFiles = false;
+	@state() isDragging = false;
 	private fileInputRef = createRef<HTMLInputElement>();
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
@@ -74,6 +77,56 @@ export class MessageEditor extends LitElement {
 		}
 	};
 
+	private handlePaste = async (e: ClipboardEvent) => {
+		const items = e.clipboardData?.items;
+		if (!items) return;
+
+		const imageFiles: File[] = [];
+
+		// Check for image items in clipboard
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item.type.startsWith("image/")) {
+				const file = item.getAsFile();
+				if (file) {
+					imageFiles.push(file);
+				}
+			}
+		}
+
+		// If we found images, process them
+		if (imageFiles.length > 0) {
+			e.preventDefault(); // Prevent default paste behavior
+
+			if (imageFiles.length + this.attachments.length > this.maxFiles) {
+				alert(`Maximum ${this.maxFiles} files allowed`);
+				return;
+			}
+
+			this.processingFiles = true;
+			const newAttachments: Attachment[] = [];
+
+			for (const file of imageFiles) {
+				try {
+					if (file.size > this.maxFileSize) {
+						alert(`Image exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+						continue;
+					}
+
+					const attachment = await loadAttachment(file);
+					newAttachments.push(attachment);
+				} catch (error) {
+					console.error("Error processing pasted image:", error);
+					alert(`Failed to process pasted image: ${String(error)}`);
+				}
+			}
+
+			this.attachments = [...this.attachments, ...newAttachments];
+			this.onFilesChange?.(this.attachments);
+			this.processingFiles = false;
+		}
+	};
+
 	private handleSend = () => {
 		this.onSend?.(this.value, this.attachments);
 	};
@@ -122,6 +175,62 @@ export class MessageEditor extends LitElement {
 		this.onFilesChange?.(this.attachments);
 	}
 
+	private handleDragOver = (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!this.isDragging) {
+			this.isDragging = true;
+		}
+	};
+
+	private handleDragLeave = (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		// Only set isDragging to false if we're leaving the entire component
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const x = e.clientX;
+		const y = e.clientY;
+		if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+			this.isDragging = false;
+		}
+	};
+
+	private handleDrop = async (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.isDragging = false;
+
+		const files = Array.from(e.dataTransfer?.files || []);
+		if (files.length === 0) return;
+
+		if (files.length + this.attachments.length > this.maxFiles) {
+			alert(`Maximum ${this.maxFiles} files allowed`);
+			return;
+		}
+
+		this.processingFiles = true;
+		const newAttachments: Attachment[] = [];
+
+		for (const file of files) {
+			try {
+				if (file.size > this.maxFileSize) {
+					alert(`${file.name} exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+					continue;
+				}
+
+				const attachment = await loadAttachment(file);
+				newAttachments.push(attachment);
+			} catch (error) {
+				console.error(`Error processing ${file.name}:`, error);
+				alert(`Failed to process ${file.name}: ${String(error)}`);
+			}
+		}
+
+		this.attachments = [...this.attachments, ...newAttachments];
+		this.onFilesChange?.(this.attachments);
+		this.processingFiles = false;
+	};
+
 	private adjustTextareaHeight() {
 		const textarea = this.textareaRef.value;
 		if (textarea) {
@@ -150,8 +259,28 @@ export class MessageEditor extends LitElement {
 	}
 
 	override render() {
+		// Check if current model supports thinking/reasoning
+		const model = this.currentModel;
+		const supportsThinking = model?.reasoning === true; // Models with reasoning:true support thinking
+
 		return html`
-			<div class="bg-card rounded-xl border border-border shadow-sm">
+			<div
+				class="bg-card rounded-xl border shadow-sm relative ${this.isDragging ? "border-primary border-2 bg-primary/5" : "border-border"}"
+				@dragover=${this.handleDragOver}
+				@dragleave=${this.handleDragLeave}
+				@drop=${this.handleDrop}
+			>
+				<!-- Drag overlay -->
+				${
+					this.isDragging
+						? html`
+					<div class="absolute inset-0 bg-primary/10 rounded-xl pointer-events-none z-10 flex items-center justify-center">
+						<div class="text-primary font-medium">${i18n("Drop files here")}</div>
+					</div>
+				`
+						: ""
+				}
+
 				<!-- Attachments -->
 				${
 					this.attachments.length > 0
@@ -179,6 +308,7 @@ export class MessageEditor extends LitElement {
 					.value=${this.value}
 					@input=${this.handleTextareaInput}
 					@keydown=${this.handleKeyDown}
+					@paste=${this.handlePaste}
 					${ref(this.textareaRef)}
 				></textarea>
 
@@ -194,7 +324,7 @@ export class MessageEditor extends LitElement {
 
 				<!-- Button Row -->
 				<div class="px-2 pb-2 flex items-center justify-between">
-					<!-- Left side - attachment and quick action buttons -->
+					<!-- Left side - attachment and thinking selector -->
 					<div class="flex gap-2 items-center">
 						${
 							this.showAttachmentButton
@@ -215,6 +345,30 @@ export class MessageEditor extends LitElement {
 									`
 								: ""
 						}
+						${
+							supportsThinking && this.showThinkingSelector
+								? html`
+									${Select({
+										value: this.thinkingLevel,
+										placeholder: i18n("Off"),
+										options: [
+											{ value: "off", label: i18n("Off"), icon: icon(Brain, "sm") },
+											{ value: "minimal", label: i18n("Minimal"), icon: icon(Brain, "sm") },
+											{ value: "low", label: i18n("Low"), icon: icon(Brain, "sm") },
+											{ value: "medium", label: i18n("Medium"), icon: icon(Brain, "sm") },
+											{ value: "high", label: i18n("High"), icon: icon(Brain, "sm") },
+										] as SelectOption[],
+										onChange: (value: string) => {
+											this.onThinkingChange?.(value as "off" | "minimal" | "low" | "medium" | "high");
+										},
+										width: "80px",
+										size: "sm",
+										variant: "ghost",
+										fitContent: true,
+									})}
+								`
+								: ""
+						}
 					</div>
 
 					<!-- Model selector and send on the right -->

package/src/components/MessageList.ts

@@ -2,15 +2,16 @@ import { html } from "@mariozechner/mini-lit";
 import type {
 	AgentTool,
 	AssistantMessage as AssistantMessageType,
-	Message,
 	ToolResultMessage as ToolResultMessageType,
 } from "@mariozechner/pi-ai";
 import { LitElement, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import type { AppMessage } from "./Messages.js";
+import { renderMessage } from "./message-renderer-registry.js";
 
 export class MessageList extends LitElement {
-	@property({ type: Array }) messages: Message[] = [];
+	@property({ type: Array }) messages: AppMessage[] = [];
 	@property({ type: Array }) tools: AgentTool[] = [];
 	@property({ type: Object }) pendingToolCalls?: Set<string>;
 	@property({ type: Boolean }) isStreaming: boolean = false;
@@ -36,6 +37,20 @@ export class MessageList extends LitElement {
 		const items: Array<{ key: string; template: TemplateResult }> = [];
 		let index = 0;
 		for (const msg of this.messages) {
+			// Skip artifact messages - they're for session persistence only, not UI display
+			if (msg.role === "artifact") {
+				continue;
+			}
+
+			// Try custom renderer first
+			const customTemplate = renderMessage(msg);
+			if (customTemplate) {
+				items.push({ key: `msg:${index}`, template: customTemplate });
+				index++;
+				continue;
+			}
+
+			// Fall back to built-in renderers
 			if (msg.role === "user") {
 				items.push({
 					key: `msg:${index}`,
@@ -58,7 +73,7 @@ export class MessageList extends LitElement {
 				index++;
 			} else {
 				// Skip standalone toolResult messages; they are rendered via paired tool-message above
-				// For completeness, other roles are not expected
+				// Skip unknown roles
 			}
 		}
 		return items;

package/src/components/Messages.ts

@@ -1,4 +1,4 @@
-import { Button, html, icon } from "@mariozechner/mini-lit";
+import { html } from "@mariozechner/mini-lit";
 import type {
 	AgentTool,
 	AssistantMessage as AssistantMessageType,
@@ -6,17 +6,41 @@ import type {
 	ToolResultMessage as ToolResultMessageType,
 	UserMessage as UserMessageType,
 } from "@mariozechner/pi-ai";
-import type { AgentToolResult } from "@mariozechner/pi-ai/dist/agent/types.js";
 import { LitElement, type TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { Bug, Loader, Wrench } from "lucide";
-import { renderToolParams, renderToolResult } from "../tools/index.js";
+import { customElement, property } from "lit/decorators.js";
+import { renderTool } from "../tools/index.js";
 import type { Attachment } from "../utils/attachment-utils.js";
 import { formatUsage } from "../utils/format.js";
 import { i18n } from "../utils/i18n.js";
 
 export type UserMessageWithAttachments = UserMessageType & { attachments?: Attachment[] };
-export type AppMessage = AssistantMessageType | UserMessageWithAttachments | ToolResultMessageType;
+
+// Artifact message type for session persistence
+export interface ArtifactMessage {
+	role: "artifact";
+	action: "create" | "update" | "delete";
+	filename: string;
+	content?: string;
+	title?: string;
+	timestamp: string;
+}
+
+// Base message union
+type BaseMessage = AssistantMessageType | UserMessageWithAttachments | ToolResultMessageType | ArtifactMessage;
+
+// Extensible interface - apps can extend via declaration merging
+// Example:
+// declare module "@mariozechner/pi-web-ui" {
+//   interface CustomMessages {
+//     "system-notification": SystemNotificationMessage;
+//   }
+// }
+export interface CustomMessages {
+	// Empty by default - apps extend via declaration merging
+}
+
+// AppMessage is union of base messages + custom messages
+export type AppMessage = BaseMessage | CustomMessages[keyof CustomMessages];
 
 @customElement("user-message")
 export class UserMessage extends LitElement {
@@ -88,7 +112,8 @@ export class AssistantMessage extends LitElement {
 					const tool = this.tools?.find((t) => t.name === chunk.name);
 					const pending = this.pendingToolCalls?.has(chunk.id) ?? false;
 					const result = this.toolResultsById?.get(chunk.id);
-					const aborted = !pending && !result && !this.isStreaming;
+					// A tool call is aborted if the message was aborted and there's no result for this tool call
+					const aborted = this.message.stopReason === "aborted" && !result;
 					orderedParts.push(
 						html`<tool-message
 							.tool=${tool}
@@ -133,7 +158,7 @@ export class AssistantMessage extends LitElement {
 @customElement("tool-message-debug")
 export class ToolMessageDebugView extends LitElement {
 	@property({ type: Object }) callArgs: any;
-	@property({ type: String }) result?: AgentToolResult<any>;
+	@property({ type: Object }) result?: ToolResultMessageType;
 	@property({ type: Boolean }) hasResult: boolean = false;
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
@@ -189,7 +214,6 @@ export class ToolMessage extends LitElement {
 	@property({ type: Boolean }) pending: boolean = false;
 	@property({ type: Boolean }) aborted: boolean = false;
 	@property({ type: Boolean }) isStreaming: boolean = false;
-	@state() private _showDebug = false;
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
 		return this;
@@ -200,94 +224,29 @@ export class ToolMessage extends LitElement {
 		this.style.display = "block";
 	}
 
-	private toggleDebug = () => {
-		this._showDebug = !this._showDebug;
-	};
-
 	override render() {
-		const toolLabel = this.tool?.label || this.toolCall.name;
 		const toolName = this.tool?.name || this.toolCall.name;
-		const isError = this.result?.isError === true;
-		const hasResult = !!this.result;
-
-		let statusIcon: TemplateResult;
-		if (this.pending || (this.isStreaming && !hasResult)) {
-			statusIcon = html`<span class="inline-block text-muted-foreground animate-spin">${icon(Loader, "sm")}</span>`;
-		} else if (this.aborted && !hasResult) {
-			statusIcon = html`<span class="inline-block text-destructive">${icon(Wrench, "sm")}</span>`;
-		} else if (hasResult && isError) {
-			statusIcon = html`<span class="inline-block text-destructive">${icon(Wrench, "sm")}</span>`;
-		} else if (hasResult) {
-			statusIcon = html`<span class="inline-block text-muted-foreground">${icon(Wrench, "sm")}</span>`;
-		} else {
-			statusIcon = html`<span class="inline-block text-muted-foreground">${icon(Wrench, "sm")}</span>`;
-		}
 
-		// Normalize error text
-		let errorMessage = this.result?.output || "";
-		if (isError) {
-			try {
-				const parsed = JSON.parse(errorMessage);
-				if ((parsed as any).error) errorMessage = (parsed as any).error;
-				else if ((parsed as any).message) errorMessage = (parsed as any).message;
-			} catch {}
-			errorMessage = errorMessage.replace(/^(Tool )?Error:\s*/i, "");
-			errorMessage = errorMessage.replace(/^Error:\s*/i, "");
-		}
-
-		const paramsTpl = renderToolParams(
+		// Render tool content (renderer handles errors and styling)
+		const result: ToolResultMessageType<any> | undefined = this.aborted
+			? { role: "toolResult", isError: true, output: "", toolCallId: this.toolCall.id, toolName: this.toolCall.name }
+			: this.result;
+		const renderResult = renderTool(
 			toolName,
 			this.toolCall.arguments,
-			this.isStreaming || (this.pending && !hasResult),
+			result,
+			!this.aborted && (this.isStreaming || this.pending),
 		);
-		const resultTpl =
-			hasResult && !isError ? renderToolResult(toolName, this.toolCall.arguments, this.result!) : undefined;
 
-		return html`
-			<div class="p-2.5 border border-border rounded-md bg-card text-card-foreground">
-				<div class="flex items-center justify-between text-xs text-muted-foreground">
-					<div class="flex items-center gap-2">
-						${statusIcon}
-						<span class="font-medium">${toolLabel}</span>
-					</div>
-					${Button({
-						variant: this._showDebug ? "default" : "ghost",
-						size: "sm",
-						onClick: this.toggleDebug,
-						children: icon(Bug, "sm"),
-						className: "text-muted-foreground",
-					})}
-				</div>
+		// Handle custom rendering (no card wrapper)
+		if (renderResult.isCustom) {
+			return renderResult.content;
+		}
 
-				${
-					this._showDebug
-						? html`<tool-message-debug
-							.callArgs=${this.toolCall.arguments}
-							.result=${this.result}
-							.hasResult=${!!this.result}
-						></tool-message-debug>`
-						: html`
-							<div class="mt-2 text-sm text-muted-foreground">${paramsTpl}</div>
-							${
-								this.pending && !hasResult
-									? html`<div class="mt-2 text-sm text-muted-foreground">${i18n("Waiting for tool result…")}</div>`
-									: ""
-							}
-							${
-								this.aborted && !hasResult
-									? html`<div class="mt-2 text-sm text-muted-foreground">${i18n("Call was aborted; no result.")}</div>`
-									: ""
-							}
-							${
-								hasResult && isError
-									? html`<div class="mt-2 p-2 border border-destructive rounded bg-destructive/10 text-sm text-destructive">
-										${errorMessage}
-									</div>`
-									: ""
-							}
-							${resultTpl ? html`<div class="mt-2">${resultTpl}</div>` : ""}
-						`
-				}
+		// Default: wrap in card
+		return html`
+			<div class="p-2.5 border border-border rounded-md bg-card text-card-foreground shadow-xs">
+				${renderResult.content}
 			</div>
 		`;
 	}