pi-usereq 0.49.0 → 0.50.0

package/pi.dev-src/pi-mono/web-ui/src/tools/renderer-registry.ts

@@ -1,130 +0,0 @@
-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/pi.dev-src/pi-mono/web-ui/src/tools/renderers/BashRenderer.ts

@@ -1,52 +0,0 @@
-import type { ToolResultMessage } from "@mariozechner/pi-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/pi.dev-src/pi-mono/web-ui/src/tools/renderers/CalculateRenderer.ts

@@ -1,58 +0,0 @@
-import type { ToolResultMessage } from "@mariozechner/pi-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/pi.dev-src/pi-mono/web-ui/src/tools/renderers/DefaultRenderer.ts

@@ -1,103 +0,0 @@
-import type { ToolResultMessage } from "@mariozechner/pi-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/pi.dev-src/pi-mono/web-ui/src/tools/renderers/GetCurrentTimeRenderer.ts

@@ -1,92 +0,0 @@
-import type { ToolResultMessage } from "@mariozechner/pi-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/pi.dev-src/pi-mono/web-ui/src/tools/types.ts

@@ -1,15 +0,0 @@
-import type { ToolResultMessage } from "@mariozechner/pi-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;
-}