Debug tool rendering.

packages/web-ui/src/index.ts

@@ -87,7 +87,7 @@ export { SvgArtifact } from "./tools/artifacts/SvgArtifact.js";
 export { TextArtifact } from "./tools/artifacts/TextArtifact.js";
 export { createExtractDocumentTool, extractDocumentTool } from "./tools/extract-document.js";
 // Tools
-export { getToolRenderer, registerToolRenderer, renderTool } from "./tools/index.js";
+export { getToolRenderer, registerToolRenderer, renderTool, setShowJsonMode } from "./tools/index.js";
 export { createJavaScriptReplTool, javascriptReplTool } from "./tools/javascript-repl.js";
 export { renderCollapsibleHeader, renderHeader } from "./tools/renderer-registry.js";
 export { BashRenderer } from "./tools/renderers/BashRenderer.js";

packages/web-ui/src/tools/index.ts

@@ -11,6 +11,17 @@ 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: boolean): void {
+	showJsonMode = enabled;
+}
+
 /**
  * Render tool - unified function that handles params, result, and streaming state
  */
@@ -20,6 +31,11 @@ export function renderTool(
 	result: ToolResultMessage | undefined,
 	isStreaming?: boolean,
 ): ToolRenderResult {
+	// 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);

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

@@ -1,45 +1,98 @@
 import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
+import { Code } from "lucide";
 import { i18n } from "../../utils/i18n.js";
+import { renderHeader } from "../renderer-registry.js";
 import type { ToolRenderer, ToolRenderResult } from "../types.js";
 
 export class DefaultRenderer implements ToolRenderer {
 	render(params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): ToolRenderResult {
-		// Show result if available
+		const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
+
+		// Format params as JSON
+		let paramsJson = "";
+		if (params) {
+			try {
+				paramsJson = JSON.stringify(JSON.parse(params), null, 2);
+			} catch {
+				try {
+					paramsJson = JSON.stringify(params, null, 2);
+				} catch {
+					paramsJson = String(params);
+				}
+			}
+		}
+
+		// With result: show header + params + result
 		if (result) {
-			const text = result.output || i18n("(no output)");
+			let outputJson = result.output || i18n("(no output)");
+			let outputLanguage = "text";
+
+			// Try to parse and pretty-print if it's valid JSON
+			try {
+				const parsed = JSON.parse(outputJson);
+				outputJson = JSON.stringify(parsed, null, 2);
+				outputLanguage = "json";
+			} catch {
+				// Not valid JSON, leave as-is and use text highlighting
+			}
+
 			return {
-				content: html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`,
+				content: html`
+					<div class="space-y-3">
+						${renderHeader(state, Code, "Tool Call")}
+						${
+							paramsJson
+								? html`<div>
+							<div class="text-xs font-medium mb-1 text-muted-foreground">${i18n("Input")}</div>
+							<code-block .code=${paramsJson} language="json"></code-block>
+						</div>`
+								: ""
+						}
+						<div>
+							<div class="text-xs font-medium mb-1 text-muted-foreground">${i18n("Output")}</div>
+							<code-block .code=${outputJson} language="${outputLanguage}"></code-block>
+						</div>
+					</div>
+				`,
 				isCustom: false,
 			};
 		}
 
-		// Show params
+		// Just params (streaming or waiting for result)
 		if (params) {
-			let text: string;
-			try {
-				text = JSON.stringify(JSON.parse(params), null, 2);
-			} catch {
-				try {
-					text = JSON.stringify(params, null, 2);
-				} catch {
-					text = String(params);
-				}
-			}
-
-			if (isStreaming && (!text || text === "{}" || text === "null")) {
+			if (isStreaming && (!paramsJson || paramsJson === "{}" || paramsJson === "null")) {
 				return {
-					content: html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`,
+					content: html`
+						<div>
+							${renderHeader(state, Code, "Preparing tool parameters...")}
+						</div>
+					`,
 					isCustom: false,
 				};
 			}
 
-			return { content: html`<console-block .content=${text}></console-block>`, isCustom: false };
+			return {
+				content: html`
+					<div class="space-y-3">
+						${renderHeader(state, Code, "Tool Call")}
+						<div>
+							<div class="text-xs font-medium mb-1 text-muted-foreground">${i18n("Input")}</div>
+							<code-block .code=${paramsJson} language="json"></code-block>
+						</div>
+					</div>
+				`,
+				isCustom: false,
+			};
 		}
 
 		// No params or result yet
 		return {
-			content: html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool...")}</div>`,
+			content: html`
+				<div>
+					${renderHeader(state, Code, "Preparing tool...")}
+				</div>
+			`,
 			isCustom: false,
 		};
 	}

packages/web-ui/src/utils/i18n.ts

@@ -63,6 +63,8 @@ declare module "@mariozechner/mini-lit" {
 		"No session set": string;
 		"Preparing tool parameters...": string;
 		"(no output)": string;
+		Input: string;
+		Output: string;
 		"Writing expression...": string;
 		"Waiting for expression...": string;
 		Calculating: string;
@@ -237,6 +239,8 @@ export const translations = {
 		"No session set": "No session set",
 		"Preparing tool parameters...": "Preparing tool parameters...",
 		"(no output)": "(no output)",
+		Input: "Input",
+		Output: "Output",
 		"Waiting for expression...": "Waiting for expression...",
 		"Writing expression...": "Writing expression...",
 		Calculating: "Calculating",
@@ -414,6 +418,8 @@ export const translations = {
 		"No session set": "Keine Sitzung gesetzt",
 		"Preparing tool parameters...": "Bereite Tool-Parameter vor...",
 		"(no output)": "(keine Ausgabe)",
+		Input: "Eingabe",
+		Output: "Ausgabe",
 		"Waiting for expression...": "Warte auf Ausdruck",
 		"Writing expression...": "Schreibe Ausdruck...",
 		Calculating: "Berechne",