@draht/web-ui 2026.3.2-2

package/src/tools/renderer-registry.ts

@@ -0,0 +1,130 @@
+import { icon } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
+import type { Ref } from "lit/directives/ref.js";
+import { ref } from "lit/directives/ref.js";
+import { ChevronsUpDown, ChevronUp, Loader } from "lucide";
+import type { ToolRenderer } from "./types.js";
+
+// Registry of tool renderers
+export const toolRenderers = new Map<string, ToolRenderer>();
+
+/**
+ * Register a custom tool renderer
+ */
+export function registerToolRenderer(toolName: string, renderer: ToolRenderer): void {
+	toolRenderers.set(toolName, renderer);
+}
+
+/**
+ * Get a tool renderer by name
+ */
+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");
+				// Show ChevronUp, hide ChevronsUpDown
+				const upIcon = chevron.querySelector(".chevron-up");
+				const downIcon = chevron.querySelector(".chevrons-up-down");
+				if (upIcon && downIcon) {
+					upIcon.classList.remove("hidden");
+					downIcon.classList.add("hidden");
+				}
+			} else {
+				content.classList.remove("max-h-[2000px]", "mt-3");
+				content.classList.add("max-h-0");
+				// Show ChevronsUpDown, hide ChevronUp
+				const upIcon = chevron.querySelector(".chevron-up");
+				const downIcon = chevron.querySelector(".chevrons-up-down");
+				if (upIcon && downIcon) {
+					upIcon.classList.add("hidden");
+					downIcon.classList.remove("hidden");
+				}
+			}
+		}
+	};
+
+	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" ${ref(chevronRef)}>
+				<span class="chevron-up ${defaultExpanded ? "" : "hidden"}">${icon(ChevronUp, "sm")}</span>
+				<span class="chevrons-up-down ${defaultExpanded ? "hidden" : ""}">${icon(ChevronsUpDown, "sm")}</span>
+			</span>
+		</button>
+	`;
+}

package/src/tools/renderers/BashRenderer.ts

@@ -0,0 +1,52 @@
+import type { ToolResultMessage } from "@draht/ai";
+import { html } from "lit";
+import { SquareTerminal } from "lucide";
+import { i18n } from "../../utils/i18n.js";
+import { renderHeader } from "../renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
+
+interface BashParams {
+	command: string;
+}
+
+// Bash tool has undefined details (only uses output)
+export class BashRenderer implements ToolRenderer<BashParams, undefined> {
+	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.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
+			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,
+			};
+		}
+
+		// 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,
+			};
+		}
+
+		// No params yet
+		return { content: renderHeader(state, SquareTerminal, i18n("Waiting for command...")), isCustom: false };
+	}
+}

package/src/tools/renderers/CalculateRenderer.ts

@@ -0,0 +1,58 @@
+import type { ToolResultMessage } from "@draht/ai";
+import { html } from "lit";
+import { Calculator } from "lucide";
+import { i18n } from "../../utils/i18n.js";
+import { renderHeader } from "../renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
+
+interface CalculateParams {
+	expression: string;
+}
+
+// Calculate tool has undefined details (only uses output)
+export class CalculateRenderer implements ToolRenderer<CalculateParams, undefined> {
+	render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): ToolRenderResult {
+		const state = result ? (result.isError ? "error" : "complete") : "inprogress";
+
+		// Full params + full result
+		if (result && params?.expression) {
+			const output =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
+
+			// 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 };
+		}
+
+		// 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,
+			};
+		}
+
+		// Partial params (empty expression), no result
+		if (params && !params.expression) {
+			return { content: renderHeader(state, Calculator, i18n("Writing expression...")), isCustom: false };
+		}
+
+		// No params, no result
+		return { content: renderHeader(state, Calculator, i18n("Waiting for expression...")), isCustom: false };
+	}
+}

package/src/tools/renderers/DefaultRenderer.ts

@@ -0,0 +1,103 @@
+import type { ToolResultMessage } from "@draht/ai";
+import { html } from "lit";
+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 {
+		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) {
+			let outputJson =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || 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="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,
+			};
+		}
+
+		// Just params (streaming or waiting for result)
+		if (params) {
+			if (isStreaming && (!paramsJson || paramsJson === "{}" || paramsJson === "null")) {
+				return {
+					content: html`
+						<div>
+							${renderHeader(state, Code, "Preparing tool parameters...")}
+						</div>
+					`,
+					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>
+					${renderHeader(state, Code, "Preparing tool...")}
+				</div>
+			`,
+			isCustom: false,
+		};
+	}
+}

package/src/tools/renderers/GetCurrentTimeRenderer.ts

@@ -0,0 +1,92 @@
+import type { ToolResultMessage } from "@draht/ai";
+import { html } from "lit";
+import { Clock } from "lucide";
+import { i18n } from "../../utils/i18n.js";
+import { renderHeader } from "../renderer-registry.js";
+import type { ToolRenderer, ToolRenderResult } from "../types.js";
+
+interface GetCurrentTimeParams {
+	timezone?: string;
+}
+
+// GetCurrentTime tool has undefined details (only uses output)
+export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams, undefined> {
+	render(
+		params: GetCurrentTimeParams | undefined,
+		result: ToolResultMessage<undefined> | undefined,
+	): ToolRenderResult {
+		const state = result ? (result.isError ? "error" : "complete") : "inprogress";
+
+		// Full params + full result
+		if (result && params) {
+			const output =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
+			const headerText = params.timezone
+				? `${i18n("Getting current time in")} ${params.timezone}`
+				: i18n("Getting current date and time");
+
+			// Error: show header, error below
+			if (result.isError) {
+				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 { content: renderHeader(state, Clock, `${headerText}: ${output}`), isCustom: false };
+		}
+
+		// Full result, no params
+		if (result) {
+			const output =
+				result.content
+					?.filter((c) => c.type === "text")
+					.map((c: any) => c.text)
+					.join("\n") || "";
+
+			// Error: show header, error below
+			if (result.isError) {
+				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 {
+				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 {
+				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 { content: renderHeader(state, Clock, i18n("Getting current date and time")), isCustom: false };
+		}
+
+		// No params, no result
+		return { content: renderHeader(state, Clock, i18n("Getting time...")), isCustom: false };
+	}
+}

package/src/tools/types.ts

@@ -0,0 +1,15 @@
+import type { ToolResultMessage } from "@draht/ai";
+import type { TemplateResult } from "lit";
+
+export interface ToolRenderResult {
+	content: TemplateResult;
+	isCustom: boolean; // true = no card wrapper, false = wrap in card
+}
+
+export interface ToolRenderer<TParams = any, TDetails = any> {
+	render(
+		params: TParams | undefined,
+		result: ToolResultMessage<TDetails> | undefined,
+		isStreaming?: boolean,
+	): ToolRenderResult;
+}