@f5xc-salesdemos/xcsh 18.40.1 → 18.41.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@f5xc-salesdemos/xcsh",
-	"version": "18.40.1",
+	"version": "18.41.0",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"homepage": "https://github.com/f5xc-salesdemos/xcsh",
 	"author": "Can Boluk",
@@ -48,12 +48,12 @@
 	"dependencies": {
 		"@agentclientprotocol/sdk": "0.16.1",
 		"@mozilla/readability": "^0.6",
-		"@f5xc-salesdemos/xcsh-stats": "18.40.1",
-		"@f5xc-salesdemos/pi-agent-core": "18.40.1",
-		"@f5xc-salesdemos/pi-ai": "18.40.1",
-		"@f5xc-salesdemos/pi-natives": "18.40.1",
-		"@f5xc-salesdemos/pi-tui": "18.40.1",
-		"@f5xc-salesdemos/pi-utils": "18.40.1",
+		"@f5xc-salesdemos/xcsh-stats": "18.41.0",
+		"@f5xc-salesdemos/pi-agent-core": "18.41.0",
+		"@f5xc-salesdemos/pi-ai": "18.41.0",
+		"@f5xc-salesdemos/pi-natives": "18.41.0",
+		"@f5xc-salesdemos/pi-tui": "18.41.0",
+		"@f5xc-salesdemos/pi-utils": "18.41.0",
 		"@sinclair/typebox": "^0.34",
 		"@xterm/headless": "^6.0",
 		"ajv": "^8.18",

package/src/autoresearch/tools/init-experiment.ts

@@ -1,7 +1,7 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { StringEnum } from "@f5xc-salesdemos/pi-ai";
-import { Text } from "@f5xc-salesdemos/pi-tui";
+import { type Component, Text } from "@f5xc-salesdemos/pi-tui";
 import { Type } from "@sinclair/typebox";
 import type { ToolDefinition } from "../../extensibility/extensions";
 import type { Theme } from "../../modes/theme/theme";
@@ -370,8 +370,13 @@ export function createInitExperimentTool(
 				details: { state: cloneExperimentState(state) },
 			};
 		},
-		renderCall(args, _options, theme): Text {
-			return new Text(renderInitCall(args.name, theme), 0, 0);
+		renderCall(args, _options, theme): Component {
+			return {
+				render(width: number): string[] {
+					return [renderInitCall(args.name, theme, width)];
+				},
+				invalidate() {},
+			};
 		},
 		renderResult(result): Text {
 			const text = replaceTabs(result.content.find(part => part.type === "text")?.text ?? "");
@@ -380,8 +385,8 @@ export function createInitExperimentTool(
 	};
 }
 
-function renderInitCall(name: string, theme: Theme): string {
-	return `${theme.fg("toolTitle", theme.bold("init_experiment"))} ${theme.fg("contentAccent", truncateToWidth(replaceTabs(name), 100))}`;
+function renderInitCall(name: string, theme: Theme, width?: number): string {
+	return `${theme.fg("toolTitle", theme.bold("init_experiment"))} ${theme.fg("contentAccent", truncateToWidth(replaceTabs(name), Math.max(20, (width ?? 100) - 20)))}`;
 }
 
 function collectLoggedRunNumbers(results: ExperimentState["results"]): Set<number> {

package/src/autoresearch/tools/log-experiment.ts

@@ -1,7 +1,7 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { StringEnum } from "@f5xc-salesdemos/pi-ai";
-import { Text } from "@f5xc-salesdemos/pi-tui";
+import { type Component, Text } from "@f5xc-salesdemos/pi-tui";
 import { logger } from "@f5xc-salesdemos/pi-utils";
 import { Type } from "@sinclair/typebox";
 import type { ToolDefinition } from "../../extensibility/extensions";
@@ -358,22 +358,29 @@ export function createLogExperimentTool(
 				},
 			};
 		},
-		renderCall(args, _options, theme): Text {
+		renderCall(args, _options, theme): Component {
 			const color = args.status === "keep" ? "success" : args.status === "discard" ? "warning" : "error";
-			const description = truncateToWidth(replaceTabs(args.description), 100);
-			return new Text(
-				`${theme.fg("toolTitle", theme.bold("log_experiment"))} ${theme.fg(color, args.status)} ${theme.fg("muted", description)}`,
-				0,
-				0,
-			);
+			return {
+				render(width: number): string[] {
+					const description = truncateToWidth(replaceTabs(args.description), Math.max(20, width - 30));
+					return [
+						`${theme.fg("toolTitle", theme.bold("log_experiment"))} ${theme.fg(color, args.status)} ${theme.fg("muted", description)}`,
+					];
+				},
+				invalidate() {},
+			};
 		},
-		renderResult(result, _options, theme): Text {
+		renderResult(result, _options, theme): Component {
 			const details = result.details;
 			if (!details) {
 				return new Text(replaceTabs(result.content.find(part => part.type === "text")?.text ?? ""), 0, 0);
 			}
-			const summary = renderSummary(details, theme);
-			return new Text(summary, 0, 0);
+			return {
+				render(width: number): string[] {
+					return [renderSummary(details, theme, width)];
+				},
+				invalidate() {},
+			};
 		},
 	};
 }
@@ -763,10 +770,10 @@ function truncateAsiValue(value: ASIData[string]): string {
 	return text.length > 120 ? `${text.slice(0, 117)}...` : text;
 }
 
-function renderSummary(details: LogDetails, theme: Theme): string {
+function renderSummary(details: LogDetails, theme: Theme, width?: number): string {
 	const { experiment, state } = details;
 	const color = experiment.status === "keep" ? "success" : experiment.status === "discard" ? "warning" : "error";
-	let summary = `${theme.fg(color, experiment.status.toUpperCase())} ${theme.fg("muted", truncateToWidth(replaceTabs(experiment.description), 100))}`;
+	let summary = `${theme.fg(color, experiment.status.toUpperCase())} ${theme.fg("muted", truncateToWidth(replaceTabs(experiment.description), Math.max(20, (width ?? 100) - 30)))}`;
 	summary += ` ${theme.fg("contentAccent", `${state.metricName}=${formatNum(experiment.metric, state.metricUnit)}`)}`;
 	if (state.bestMetric !== null) {
 		summary += ` ${theme.fg("dim", `baseline ${formatNum(state.bestMetric, state.metricUnit)}`)}`;

package/src/autoresearch/tools/run-experiment.ts

@@ -1,7 +1,7 @@
 import * as childProcess from "node:child_process";
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { Text } from "@f5xc-salesdemos/pi-tui";
+import { type Component, Text } from "@f5xc-salesdemos/pi-tui";
 import { formatBytes } from "@f5xc-salesdemos/pi-utils";
 import { Type } from "@sinclair/typebox";
 import type { ToolDefinition } from "../../extensibility/extensions";
@@ -380,13 +380,14 @@ export function createRunExperimentTool(
 				details: resultDetails,
 			};
 		},
-		renderCall(args, _options, theme): Text {
-			const commandPreview = truncateToWidth(replaceTabs(args.command), 100);
-			return new Text(
-				`${theme.fg("toolTitle", theme.bold("run_experiment"))} ${theme.fg("muted", commandPreview)}`,
-				0,
-				0,
-			);
+		renderCall(args, _options, theme): Component {
+			return {
+				render(width: number): string[] {
+					const commandPreview = truncateToWidth(replaceTabs(args.command), Math.max(20, width - 20));
+					return [`${theme.fg("toolTitle", theme.bold("run_experiment"))} ${theme.fg("muted", commandPreview)}`];
+				},
+				invalidate() {},
+			};
 		},
 		renderResult(result, options, theme): Text {
 			if (isProgressDetails(result.details)) {

package/src/edit/renderer.ts

@@ -3,7 +3,7 @@
  */
 import type { ToolCallContext } from "@f5xc-salesdemos/pi-agent-core";
 import type { Component } from "@f5xc-salesdemos/pi-tui";
-import { Text, visibleWidth, wrapTextWithAnsi } from "@f5xc-salesdemos/pi-tui";
+import { visibleWidth, wrapTextWithAnsi } from "@f5xc-salesdemos/pi-tui";
 import type { RenderResultOptions } from "../extensibility/custom-tools/types";
 import type { FileDiagnosticsResult } from "../lsp";
 import { renderDiff as renderDiffColored } from "../modes/components/diff";
@@ -145,8 +145,6 @@ export interface EditRenderContext {
 
 const EDIT_STREAMING_PREVIEW_LINES = 12;
 const CALL_TEXT_PREVIEW_LINES = 6;
-const CALL_TEXT_PREVIEW_WIDTH = 80;
-const STREAMING_EDIT_PREVIEW_WIDTH = 120;
 const STREAMING_EDIT_PREVIEW_LIMIT = 4;
 const STREAMING_EDIT_PREVIEW_DST_LINE_LIMIT = 8;
 
@@ -207,11 +205,11 @@ function formatEditDescription(
 	};
 }
 
-function renderPlainTextPreview(text: string, uiTheme: Theme): string {
+function renderPlainTextPreview(text: string, uiTheme: Theme, width: number): string {
 	const previewLines = text.split("\n");
 	let preview = "\n\n";
 	for (const line of previewLines.slice(0, CALL_TEXT_PREVIEW_LINES)) {
-		preview += `${uiTheme.fg("toolOutput", truncateToWidth(replaceTabs(line), CALL_TEXT_PREVIEW_WIDTH))}\n`;
+		preview += `${uiTheme.fg("toolOutput", truncateToWidth(replaceTabs(line), width))}\n`;
 	}
 	if (previewLines.length > CALL_TEXT_PREVIEW_LINES) {
 		preview += uiTheme.fg("dim", `… ${previewLines.length - CALL_TEXT_PREVIEW_LINES} more lines`);
@@ -299,7 +297,11 @@ function formatChunkStreamingEdit(edit: Partial<ChunkToolEdit>): FormattedStream
 	return { srcLabel: `\u2022 edit ${target}`, dst: "" };
 }
 
-function formatStreamingHashlineEdits(edits: Partial<HashlineToolEdit | ChunkToolEdit>[], uiTheme: Theme): string {
+function formatStreamingHashlineEdits(
+	edits: Partial<HashlineToolEdit | ChunkToolEdit>[],
+	uiTheme: Theme,
+	width: number,
+): string {
 	let text = "\n\n";
 
 	// Detect whether these are chunk edits (target field) or hashline edits (loc field)
@@ -314,17 +316,17 @@ function formatStreamingHashlineEdits(edits: Partial<HashlineToolEdit | ChunkToo
 		shownEdits++;
 		if (shownEdits > STREAMING_EDIT_PREVIEW_LIMIT) break;
 		const formatted = formatEdit(edit as never);
-		text += uiTheme.fg("toolOutput", truncateToWidth(replaceTabs(formatted.srcLabel), STREAMING_EDIT_PREVIEW_WIDTH));
+		text += uiTheme.fg("toolOutput", truncateToWidth(replaceTabs(formatted.srcLabel), width));
 		text += "\n";
 		if (formatted.dst === "") {
-			text += uiTheme.fg("dim", truncateToWidth("  (delete)", STREAMING_EDIT_PREVIEW_WIDTH));
+			text += uiTheme.fg("dim", truncateToWidth("  (delete)", width));
 			text += "\n";
 			continue;
 		}
 		for (const dstLine of formatted.dst.split("\n")) {
 			shownDstLines++;
 			if (shownDstLines > STREAMING_EDIT_PREVIEW_DST_LINE_LIMIT) break;
-			text += uiTheme.fg("toolOutput", truncateToWidth(replaceTabs(`+ ${dstLine}`), STREAMING_EDIT_PREVIEW_WIDTH));
+			text += uiTheme.fg("toolOutput", truncateToWidth(replaceTabs(`+ ${dstLine}`), width));
 			text += "\n";
 		}
 		if (shownDstLines > STREAMING_EDIT_PREVIEW_DST_LINE_LIMIT) break;
@@ -347,7 +349,7 @@ function formatMetadataLine(lineCount: number | null, language: string | undefin
 	return uiTheme.fg("dim", `${icon}`);
 }
 
-function getCallPreview(args: EditRenderArgs, rawPath: string, uiTheme: Theme): string {
+function getCallPreview(args: EditRenderArgs, rawPath: string, uiTheme: Theme, width: number): string {
 	if (args.previewDiff) {
 		return formatStreamingDiff(args.previewDiff, rawPath, uiTheme, "preview");
 	}
@@ -358,14 +360,14 @@ function getCallPreview(args: EditRenderArgs, rawPath: string, uiTheme: Theme):
 		// Only show hashline/chunk streaming edits — replace/patch use previewDiff above
 		const first = args.edits[0];
 		if (first && typeof first === "object" && ("loc" in first || isChunkStreamingEdit(first))) {
-			return formatStreamingHashlineEdits(args.edits, uiTheme);
+			return formatStreamingHashlineEdits(args.edits, uiTheme, width);
 		}
 	}
 	if (args.diff) {
-		return renderPlainTextPreview(args.diff, uiTheme);
+		return renderPlainTextPreview(args.diff, uiTheme, width);
 	}
 	if (args.newText || args.patch) {
-		return renderPlainTextPreview(args.newText ?? args.patch ?? "", uiTheme);
+		return renderPlainTextPreview(args.newText ?? args.patch ?? "", uiTheme, width);
 	}
 	return "";
 }
@@ -445,15 +447,20 @@ export const editToolRenderer = {
 		const { description } = formatEditDescription(rawPath, uiTheme, { rename });
 		const spinner =
 			options?.spinnerFrame !== undefined ? formatStatusIcon("running", uiTheme, options.spinnerFrame) : "";
-		let text = `${formatTitle(getOperationTitle(op), uiTheme)} ${spinner ? `${spinner} ` : ""}${description}`;
+		let header = `${formatTitle(getOperationTitle(op), uiTheme)} ${spinner ? `${spinner} ` : ""}${description}`;
 		// Show file count hint for multi-file edits
 		const fileCount = Array.isArray(args.edits) ? countEditFiles(args.edits as any[]) : 0;
 		if (fileCount > 1) {
-			text += uiTheme.fg("dim", ` (+${fileCount - 1} more)`);
+			header += uiTheme.fg("dim", ` (+${fileCount - 1} more)`);
 		}
-		text += getCallPreview(args, rawPath, uiTheme);
 
-		return new Text(text, 0, 0);
+		return {
+			render(width: number) {
+				const text = header + getCallPreview(args, rawPath, uiTheme, width);
+				return text.split("\n");
+			},
+			invalidate() {},
+		};
 	},
 
 	renderResult(

package/src/exa/render.ts

@@ -15,17 +15,12 @@ import {
 	getDomain,
 	getPreviewLines,
 	PREVIEW_LIMITS,
-	TRUNCATE_LENGTHS,
 	truncateToWidth,
 } from "../tools/render-utils";
 import type { ExaRenderDetails } from "./types";
 
 const COLLAPSED_PREVIEW_LINES = PREVIEW_LIMITS.COLLAPSED_LINES;
-const COLLAPSED_PREVIEW_LINE_LEN = TRUNCATE_LENGTHS.LONG;
 const EXPANDED_TEXT_LINES = 5;
-const EXPANDED_TEXT_LINE_LEN = 90;
-const MAX_TITLE_LEN = TRUNCATE_LENGTHS.TITLE;
-const MAX_HIGHLIGHT_LEN = TRUNCATE_LENGTHS.CONTENT;
 
 function renderErrorMessage(message: string, theme: Theme): Text {
 	const clean = message.replace(/^Error:\s*/, "").trim();
@@ -42,7 +37,6 @@ export function renderExaResult(
 	options: RenderResultOptions,
 	uiTheme: Theme,
 ): Component {
-	const { expanded } = options;
 	const details = result.details;
 
 	if (details?.error) {
@@ -51,187 +45,188 @@ export function renderExaResult(
 	}
 
 	const response = details?.response;
-	if (!response) {
-		if (details?.raw) {
-			const rawText = typeof details.raw === "string" ? details.raw : JSON.stringify(details.raw, null, 2);
-			const rawLines = rawText.split("\n").filter(l => l.trim());
-			const maxLines = expanded ? rawLines.length : Math.min(rawLines.length, COLLAPSED_PREVIEW_LINES);
-			const displayLines = rawLines.slice(0, maxLines);
-			const remaining = rawLines.length - maxLines;
-			const expandHint = formatExpandHint(uiTheme, expanded, remaining > 0);
-
-			let text = `${uiTheme.fg("dim", "Raw response")}${expandHint}`;
-
-			for (let i = 0; i < displayLines.length; i++) {
-				const isLast = i === displayLines.length - 1 && remaining === 0;
-				const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
-				text += `\n ${uiTheme.fg("dim", branch)} ${uiTheme.fg(
-					"toolOutput",
-					truncateToWidth(displayLines[i], COLLAPSED_PREVIEW_LINE_LEN),
-				)}`;
-			}
-
-			if (remaining > 0) {
-				text += `\n ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg(
-					"muted",
-					formatMoreItems(remaining, "line"),
-				)}`;
-			}
-
-			return new Text(text, 0, 0);
-		}
+	if (!response && !details?.raw) {
 		return renderEmptyMessage("No response data", uiTheme);
 	}
 
-	const results = response.results ?? [];
-	const resultCount = results.length;
-	const cost = response.costDollars?.total;
-	const time = response.searchTime;
-
-	const metaParts = [formatCount("result", resultCount)];
-	if (cost !== undefined) metaParts.push(`cost:$${cost.toFixed(4)}`);
-	if (time !== undefined) metaParts.push(`time:${time.toFixed(2)}s`);
-	const summaryText = metaParts.join(uiTheme.sep.dot);
-
-	let hasMorePreview = false;
-	if (!expanded && resultCount > 0) {
-		const previewText = results[0].text ?? results[0].title ?? "";
-		const totalLines = previewText.split("\n").filter(l => l.trim()).length;
-		hasMorePreview = totalLines > COLLAPSED_PREVIEW_LINES || resultCount > 1;
-	}
-	const expandHint = formatExpandHint(uiTheme, expanded, hasMorePreview);
-
-	let text = `${uiTheme.fg("dim", summaryText)}${expandHint}`;
-
-	if (!expanded) {
-		if (resultCount === 0) {
-			text += `\n ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg("muted", "No results")}`;
-			return new Text(text, 0, 0);
-		}
-
-		const first = results[0];
-		const previewText = first.text ?? first.title ?? "";
-		const previewLines = previewText
-			? getPreviewLines(previewText, COLLAPSED_PREVIEW_LINES, COLLAPSED_PREVIEW_LINE_LEN)
-			: [];
-		const safePreviewLines = previewLines.length > 0 ? previewLines : ["No preview text"];
-		const totalLines = previewText.split("\n").filter(l => l.trim()).length;
-		const remainingLines = Math.max(0, totalLines - previewLines.length);
-		const extraItems: string[] = [];
-		if (remainingLines > 0) {
-			extraItems.push(formatMoreItems(remainingLines, "line"));
-		}
-		if (resultCount > 1) {
-			extraItems.push(formatMoreItems(resultCount - 1, "result"));
-		}
-
-		for (let i = 0; i < safePreviewLines.length; i++) {
-			const isLast = i === safePreviewLines.length - 1 && extraItems.length === 0;
-			const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
-			const line = safePreviewLines[i];
-			const color = line === "No preview text" ? "muted" : "toolOutput";
-			text += `\n ${uiTheme.fg("dim", branch)} ${uiTheme.fg(color, line)}`;
-		}
-
-		for (let i = 0; i < extraItems.length; i++) {
-			const isLast = i === extraItems.length - 1;
-			const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
-			text += `\n ${uiTheme.fg("dim", branch)} ${uiTheme.fg("muted", extraItems[i])}`;
-		}
-
-		return new Text(text, 0, 0);
-	}
-
-	if (resultCount === 0) {
-		text += `\n ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg("muted", "No results")}`;
-		return new Text(text, 0, 0);
-	}
+	return {
+		render(width: number): string[] {
+			const { expanded } = options;
+			const contentWidth = Math.max(20, width - 6);
+
+			if (!response) {
+				const rawText = typeof details?.raw === "string" ? details.raw : JSON.stringify(details?.raw, null, 2);
+				const rawLines = rawText.split("\n").filter(l => l.trim());
+				const maxLines = expanded ? rawLines.length : Math.min(rawLines.length, COLLAPSED_PREVIEW_LINES);
+				const displayLines = rawLines.slice(0, maxLines);
+				const remaining = rawLines.length - maxLines;
+				const expandHint = formatExpandHint(uiTheme, expanded, remaining > 0);
+
+				const lines: string[] = [`${uiTheme.fg("dim", "Raw response")}${expandHint}`];
+
+				for (let i = 0; i < displayLines.length; i++) {
+					const isLast = i === displayLines.length - 1 && remaining === 0;
+					const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
+					lines.push(
+						` ${uiTheme.fg("dim", branch)} ${uiTheme.fg("toolOutput", truncateToWidth(displayLines[i], contentWidth))}`,
+					);
+				}
+
+				if (remaining > 0) {
+					lines.push(
+						` ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg("muted", formatMoreItems(remaining, "line"))}`,
+					);
+				}
+
+				return lines;
+			}
 
-	for (let i = 0; i < results.length; i++) {
-		const res = results[i];
-		const isLast = i === results.length - 1;
-		const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
-		const cont = isLast ? " " : uiTheme.tree.vertical;
-
-		const title = truncateToWidth(res.title ?? "Untitled", MAX_TITLE_LEN);
-		const domain = res.url ? getDomain(res.url) : "";
-		const domainPart = domain ? uiTheme.fg("dim", ` (${domain})`) : "";
-
-		text += `\n ${uiTheme.fg("dim", branch)} ${uiTheme.fg("contentAccent", title)}${domainPart}`;
-
-		if (res.url) {
-			text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-				"mdLinkUrl",
-				res.url,
-			)}`;
-		}
-
-		if (res.author) {
-			text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-				"muted",
-				`Author: ${res.author}`,
-			)}`;
-		}
-
-		if (res.publishedDate) {
-			text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-				"muted",
-				`Published: ${res.publishedDate}`,
-			)}`;
-		}
-
-		if (res.text) {
-			const textLines = res.text.split("\n").filter(l => l.trim());
-			const displayLines = textLines.slice(0, EXPANDED_TEXT_LINES);
-			for (const line of displayLines) {
-				text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-					"toolOutput",
-					truncateToWidth(line.trim(), EXPANDED_TEXT_LINE_LEN),
-				)}`;
+			const results = response.results ?? [];
+			const resultCount = results.length;
+			const cost = response.costDollars?.total;
+			const time = response.searchTime;
+
+			const metaParts = [formatCount("result", resultCount)];
+			if (cost !== undefined) metaParts.push(`cost:$${cost.toFixed(4)}`);
+			if (time !== undefined) metaParts.push(`time:${time.toFixed(2)}s`);
+			const summaryText = metaParts.join(uiTheme.sep.dot);
+
+			let hasMorePreview = false;
+			if (!expanded && resultCount > 0) {
+				const previewText = results[0].text ?? results[0].title ?? "";
+				const totalLines = previewText.split("\n").filter(l => l.trim()).length;
+				hasMorePreview = totalLines > COLLAPSED_PREVIEW_LINES || resultCount > 1;
 			}
-			if (textLines.length > EXPANDED_TEXT_LINES) {
-				text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-					"muted",
-					formatMoreItems(textLines.length - EXPANDED_TEXT_LINES, "line"),
-				)}`;
+			const expandHint = formatExpandHint(uiTheme, expanded, hasMorePreview);
+
+			const lines: string[] = [`${uiTheme.fg("dim", summaryText)}${expandHint}`];
+
+			if (!expanded) {
+				if (resultCount === 0) {
+					lines.push(` ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg("muted", "No results")}`);
+					return lines;
+				}
+
+				const first = results[0];
+				const previewText = first.text ?? first.title ?? "";
+				const previewLines = previewText ? getPreviewLines(previewText, COLLAPSED_PREVIEW_LINES, contentWidth) : [];
+				const safePreviewLines = previewLines.length > 0 ? previewLines : ["No preview text"];
+				const totalLines = previewText.split("\n").filter(l => l.trim()).length;
+				const remainingLines = Math.max(0, totalLines - previewLines.length);
+				const extraItems: string[] = [];
+				if (remainingLines > 0) {
+					extraItems.push(formatMoreItems(remainingLines, "line"));
+				}
+				if (resultCount > 1) {
+					extraItems.push(formatMoreItems(resultCount - 1, "result"));
+				}
+
+				for (let i = 0; i < safePreviewLines.length; i++) {
+					const isLast = i === safePreviewLines.length - 1 && extraItems.length === 0;
+					const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
+					const line = safePreviewLines[i];
+					const color = line === "No preview text" ? "muted" : "toolOutput";
+					lines.push(` ${uiTheme.fg("dim", branch)} ${uiTheme.fg(color, line)}`);
+				}
+
+				for (let i = 0; i < extraItems.length; i++) {
+					const isLast = i === extraItems.length - 1;
+					const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
+					lines.push(` ${uiTheme.fg("dim", branch)} ${uiTheme.fg("muted", extraItems[i])}`);
+				}
+
+				return lines;
 			}
-		}
-
-		if (res.highlights?.length) {
-			text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-				"contentAccent",
-				"Highlights",
-			)}`;
-			const maxHighlights = Math.min(res.highlights.length, 3);
-			for (let j = 0; j < maxHighlights; j++) {
-				const h = res.highlights[j];
-				text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-					"muted",
-					`${uiTheme.format.dash} ${truncateToWidth(h, MAX_HIGHLIGHT_LEN)}`,
-				)}`;
+
+			if (resultCount === 0) {
+				lines.push(` ${uiTheme.fg("dim", uiTheme.tree.last)} ${uiTheme.fg("muted", "No results")}`);
+				return lines;
 			}
-			if (res.highlights.length > maxHighlights) {
-				text += `\n ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg(
-					"muted",
-					formatMoreItems(res.highlights.length - maxHighlights, "highlight"),
-				)}`;
+
+			for (let i = 0; i < results.length; i++) {
+				const res = results[i];
+				const isLast = i === results.length - 1;
+				const branch = isLast ? uiTheme.tree.last : uiTheme.tree.branch;
+				const cont = isLast ? " " : uiTheme.tree.vertical;
+
+				const title = truncateToWidth(res.title ?? "Untitled", contentWidth);
+				const domain = res.url ? getDomain(res.url) : "";
+				const domainPart = domain ? uiTheme.fg("dim", ` (${domain})`) : "";
+
+				lines.push(` ${uiTheme.fg("dim", branch)} ${uiTheme.fg("contentAccent", title)}${domainPart}`);
+
+				if (res.url) {
+					lines.push(
+						` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("mdLinkUrl", res.url)}`,
+					);
+				}
+
+				if (res.author) {
+					lines.push(
+						` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("muted", `Author: ${res.author}`)}`,
+					);
+				}
+
+				if (res.publishedDate) {
+					lines.push(
+						` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("muted", `Published: ${res.publishedDate}`)}`,
+					);
+				}
+
+				if (res.text) {
+					const textLines = res.text.split("\n").filter(l => l.trim());
+					const displayLines = textLines.slice(0, EXPANDED_TEXT_LINES);
+					for (const line of displayLines) {
+						lines.push(
+							` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("toolOutput", truncateToWidth(line.trim(), contentWidth))}`,
+						);
+					}
+					if (textLines.length > EXPANDED_TEXT_LINES) {
+						lines.push(
+							` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("muted", formatMoreItems(textLines.length - EXPANDED_TEXT_LINES, "line"))}`,
+						);
+					}
+				}
+
+				if (res.highlights?.length) {
+					lines.push(
+						` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("contentAccent", "Highlights")}`,
+					);
+					const maxHighlights = Math.min(res.highlights.length, 3);
+					for (let j = 0; j < maxHighlights; j++) {
+						const h = res.highlights[j];
+						lines.push(
+							` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("muted", `${uiTheme.format.dash} ${truncateToWidth(h, contentWidth)}`)}`,
+						);
+					}
+					if (res.highlights.length > maxHighlights) {
+						lines.push(
+							` ${uiTheme.fg("dim", cont)} ${uiTheme.fg("dim", uiTheme.tree.hook)} ${uiTheme.fg("muted", formatMoreItems(res.highlights.length - maxHighlights, "highlight"))}`,
+						);
+					}
+				}
 			}
-		}
-	}
 
-	return new Text(text, 0, 0);
+			return lines;
+		},
+		invalidate() {},
+	};
 }
 
 /** Render Exa call (query/args preview) */
 export function renderExaCall(args: Record<string, unknown>, toolName: string, uiTheme: Theme): Component {
 	const toolLabel = toolName || "Exa Search";
-	const query = typeof args.query === "string" ? truncateToWidth(args.query, 80) : "?";
 	const numResults = typeof args.num_results === "number" ? args.num_results : undefined;
 
-	let text = `${uiTheme.fg("toolTitle", toolLabel)} ${uiTheme.fg("contentAccent", query)}`;
-	if (numResults !== undefined) {
-		text += ` ${uiTheme.fg("muted", `results:${numResults}`)}`;
-	}
-
-	return new Text(text, 0, 0);
+	return {
+		render(width: number): string[] {
+			const query = typeof args.query === "string" ? truncateToWidth(args.query, Math.max(20, width - 30)) : "?";
+			let text = `${uiTheme.fg("toolTitle", toolLabel)} ${uiTheme.fg("contentAccent", query)}`;
+			if (numResults !== undefined) {
+				text += ` ${uiTheme.fg("muted", `results:${numResults}`)}`;
+			}
+			return [truncateToWidth(text, width)];
+		},
+		invalidate() {},
+	};
 }