@oh-my-pi/pi-coding-agent 8.0.20 → 8.2.0

package/src/web/search/render.ts

@@ -3,9 +3,10 @@
  *
  * Tree-based rendering with collapsed/expanded states for web search results.
  */
-
-import type { RenderResultOptions } from "@oh-my-pi/pi-coding-agent/extensibility/custom-tools/types";
-import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import type { Component } from "@oh-my-pi/pi-tui";
+import { Text } from "@oh-my-pi/pi-tui";
+import type { RenderResultOptions } from "../../extensibility/custom-tools/types";
+import type { Theme } from "../../modes/theme/theme";
 import {
 	formatAge,
 	formatCount,
@@ -17,9 +18,8 @@ import {
 	PREVIEW_LIMITS,
 	TRUNCATE_LENGTHS,
 	truncate,
-} from "@oh-my-pi/pi-coding-agent/tools/render-utils";
-import type { Component } from "@oh-my-pi/pi-tui";
-import { Text } from "@oh-my-pi/pi-tui";
+} from "../../tools/render-utils";
+import { renderOutputBlock, renderStatusLine, renderTreeList } from "../../tui";
 import type { WebSearchResponse } from "./types";
 
 const MAX_COLLAPSED_ANSWER_LINES = PREVIEW_LIMITS.COLLAPSED_LINES;
@@ -27,15 +27,15 @@ const MAX_EXPANDED_ANSWER_LINES = PREVIEW_LIMITS.EXPANDED_LINES;
 const MAX_ANSWER_LINE_LEN = TRUNCATE_LENGTHS.LINE;
 const MAX_SNIPPET_LINES = 2;
 const MAX_SNIPPET_LINE_LEN = TRUNCATE_LENGTHS.LINE;
-const MAX_RELATED_QUESTIONS = 6;
+const MAX_COLLAPSED_ITEMS = PREVIEW_LIMITS.COLLAPSED_ITEMS;
 const MAX_QUERY_PREVIEW = 2;
 const MAX_QUERY_LEN = 90;
 const MAX_REQUEST_ID_LEN = 36;
 
 function renderFallbackText(contentText: string, expanded: boolean, theme: Theme): Component {
-	const lines = contentText.split("\n").filter((line) => line.trim());
+	const lines = contentText.split("\n").filter(line => line.trim());
 	const maxLines = expanded ? lines.length : 6;
-	const displayLines = lines.slice(0, maxLines).map((line) => truncate(line.trim(), 110, theme.format.ellipsis));
+	const displayLines = lines.slice(0, maxLines).map(line => truncate(line.trim(), 110, theme.format.ellipsis));
 	const remaining = lines.length - displayLines.length;
 
 	const headerIcon = formatStatusIcon("warning", theme);
@@ -70,6 +70,7 @@ export function renderWebSearchResult(
 	result: { content: Array<{ type: string; text?: string }>; details?: WebSearchRenderDetails },
 	options: RenderResultOptions,
 	theme: Theme,
+	args?: { query?: string; provider?: string },
 ): Component {
 	const { expanded } = options;
 	const details = result.details;
@@ -79,7 +80,7 @@ export function renderWebSearchResult(
 		return new Text(theme.fg("error", `Error: ${details.error}`), 0, 0);
 	}
 
-	const rawText = result.content?.find((block) => block.type === "text")?.text?.trim() ?? "";
+	const rawText = result.content?.find(block => block.type === "text")?.text?.trim() ?? "";
 	const response = details?.response;
 	if (!response) {
 		return renderFallbackText(rawText, expanded, theme);
@@ -90,24 +91,23 @@ export function renderWebSearchResult(
 	const citations = Array.isArray(response.citations) ? response.citations : [];
 	const citationCount = citations.length;
 	const related = Array.isArray(response.relatedQuestions)
-		? response.relatedQuestions.filter((item) => typeof item === "string")
+		? response.relatedQuestions.filter(item => typeof item === "string")
 		: [];
 	const relatedCount = related.length;
 	const searchQueries = Array.isArray(response.searchQueries)
-		? response.searchQueries.filter((item) => typeof item === "string")
+		? response.searchQueries.filter(item => typeof item === "string")
 		: [];
 	const provider = response.provider;
 
 	// Get answer text
 	const answerText = typeof response.answer === "string" ? response.answer.trim() : "";
 	const contentText = answerText || rawText;
-	const totalAnswerLines = contentText ? contentText.split("\n").filter((l) => l.trim()).length : 0;
+	const totalAnswerLines = contentText ? contentText.split("\n").filter(l => l.trim()).length : 0;
 	const answerLimit = expanded ? MAX_EXPANDED_ANSWER_LINES : MAX_COLLAPSED_ANSWER_LINES;
 	const answerPreview = contentText
 		? getPreviewLines(contentText, answerLimit, MAX_ANSWER_LINE_LEN, theme.format.ellipsis)
 		: [];
 
-	// Build header: status icon Web Search (provider) · counts
 	const providerLabel =
 		provider === "anthropic"
 			? "Anthropic"
@@ -116,144 +116,110 @@ export function renderWebSearchResult(
 				: provider === "exa"
 					? "Exa"
 					: "Unknown";
-	const headerIcon = formatStatusIcon(sourceCount > 0 ? "success" : "warning", theme);
-	const hasMore =
-		totalAnswerLines > answerPreview.length ||
-		sourceCount > 0 ||
-		citationCount > 0 ||
-		relatedCount > 0 ||
-		searchQueries.length > 0;
-	const expandHint = formatExpandHint(theme, expanded, hasMore);
-	let text = `${headerIcon} ${theme.fg("dim", `(${providerLabel})`)}${theme.sep.dot}${theme.fg(
-		"dim",
-		formatCount("source", sourceCount),
-	)}${expandHint}`;
-
-	if (!expanded) {
-		const answerTitle = `${theme.fg("accent", theme.status.info)} ${theme.fg("accent", "Answer")}`;
-		text += `\n ${theme.fg("dim", theme.tree.branch)} ${answerTitle}`;
-
-		const remaining = totalAnswerLines - answerPreview.length;
-		const allLines: Array<{ text: string; style: "dim" | "muted" }> = [];
-
-		if (answerPreview.length === 0) {
-			allLines.push({ text: "No answer text returned", style: "muted" });
-		} else {
-			for (const line of answerPreview) {
-				allLines.push({ text: line, style: "dim" });
-			}
-		}
-		if (remaining > 0) {
-			allLines.push({ text: formatMoreItems(remaining, "line", theme), style: "muted" });
-		}
-
-		for (let i = 0; i < allLines.length; i++) {
-			const { text: lineText, style } = allLines[i];
-			const isLastLine = i === allLines.length - 1;
-			const lineBranch = isLastLine ? theme.tree.last : theme.tree.branch;
-			text += `\n ${theme.fg("dim", theme.tree.vertical)} ${theme.fg("dim", lineBranch)} ${theme.fg(style, lineText)}`;
-		}
-
-		const summary = [
-			formatCount("source", sourceCount),
-			formatCount("citation", citationCount),
-			formatCount("related question", relatedCount),
-		].join(theme.sep.dot);
-		text += `\n ${theme.fg("dim", theme.tree.last)} ${theme.fg("muted", summary)}`;
-		return new Text(text, 0, 0);
-	}
+	const queryPreview = args?.query
+		? truncate(args.query, 80, theme.format.ellipsis)
+		: searchQueries[0]
+			? truncate(searchQueries[0], 80, theme.format.ellipsis)
+			: undefined;
+	const header = renderStatusLine(
+		{
+			icon: sourceCount > 0 ? "success" : "warning",
+			title: "Web Search",
+			description: providerLabel,
+			meta: [formatCount("source", sourceCount)],
+		},
+		theme,
+	);
 
+	const remainingAnswer = totalAnswerLines - answerPreview.length;
 	const answerLines = answerPreview.length > 0 ? answerPreview : ["No answer text returned"];
-	const answerSectionLines = answerLines.map((line) =>
-		line === "No answer text returned" ? theme.fg("muted", line) : theme.fg("text", line),
+	const answerTree = renderTreeList(
+		{
+			items: answerLines,
+			expanded: true,
+			maxCollapsed: answerLines.length,
+			itemType: "line",
+			renderItem: line => (line === "No answer text returned" ? theme.fg("muted", line) : theme.fg("dim", line)),
+		},
+		theme,
 	);
-	const remainingAnswer = totalAnswerLines - answerPreview.length;
 	if (remainingAnswer > 0) {
-		answerSectionLines.push(theme.fg("muted", formatMoreItems(remainingAnswer, "line", theme)));
+		answerTree.push(theme.fg("muted", formatMoreItems(remainingAnswer, "line", theme)));
 	}
 
-	const sourceLines: string[] = [];
-	if (sourceCount === 0) {
-		sourceLines.push(theme.fg("muted", "No sources returned"));
-	} else {
-		for (const src of sources) {
-			const titleText =
-				typeof src.title === "string" && src.title.trim()
-					? src.title
-					: typeof src.url === "string" && src.url.trim()
-						? src.url
-						: "Untitled";
-			const title = truncate(titleText, 70, theme.format.ellipsis);
-			const url = typeof src.url === "string" ? src.url : "";
-			const domain = url ? getDomain(url) : "";
-			const age = formatAge(src.ageSeconds) || (typeof src.publishedDate === "string" ? src.publishedDate : "");
-			const metaParts: string[] = [];
-			if (domain) {
-				metaParts.push(theme.fg("dim", `(${domain})`));
-			}
-			if (typeof src.author === "string" && src.author.trim()) {
-				metaParts.push(theme.fg("muted", src.author));
-			}
-			if (age) {
-				metaParts.push(theme.fg("muted", age));
-			}
-			const metaSep = theme.fg("dim", theme.sep.dot);
-			const metaSuffix = metaParts.length > 0 ? ` ${metaParts.join(metaSep)}` : "";
-			sourceLines.push(`${theme.fg("accent", title)}${metaSuffix}`);
-
-			const snippetText = typeof src.snippet === "string" ? src.snippet : "";
-			if (snippetText.trim()) {
-				const snippetLines = getPreviewLines(
-					snippetText,
-					MAX_SNIPPET_LINES,
-					MAX_SNIPPET_LINE_LEN,
-					theme.format.ellipsis,
-				);
-				for (const snippetLine of snippetLines) {
-					sourceLines.push(theme.fg("muted", `${theme.format.dash} ${snippetLine}`));
+	const sourceTree = renderTreeList(
+		{
+			items: sources,
+			expanded,
+			maxCollapsed: MAX_COLLAPSED_ITEMS,
+			itemType: "source",
+			renderItem: src => {
+				const titleText =
+					typeof src.title === "string" && src.title.trim()
+						? src.title
+						: typeof src.url === "string" && src.url.trim()
+							? src.url
+							: "Untitled";
+				const title = truncate(titleText, 70, theme.format.ellipsis);
+				const url = typeof src.url === "string" ? src.url : "";
+				const domain = url ? getDomain(url) : "";
+				const age = formatAge(src.ageSeconds) || (typeof src.publishedDate === "string" ? src.publishedDate : "");
+				const metaParts: string[] = [];
+				if (domain) metaParts.push(theme.fg("dim", `(${domain})`));
+				if (typeof src.author === "string" && src.author.trim()) metaParts.push(theme.fg("muted", src.author));
+				if (age) metaParts.push(theme.fg("muted", age));
+				const metaSep = theme.fg("dim", theme.sep.dot);
+				const metaSuffix = metaParts.length > 0 ? ` ${metaParts.join(metaSep)}` : "";
+				const lines: string[] = [`${theme.fg("accent", title)}${metaSuffix}`];
+				const snippetText = typeof src.snippet === "string" ? src.snippet : "";
+				if (snippetText.trim()) {
+					const snippetLines = getPreviewLines(
+						snippetText,
+						MAX_SNIPPET_LINES,
+						MAX_SNIPPET_LINE_LEN,
+						theme.format.ellipsis,
+					);
+					for (const snippetLine of snippetLines) {
+						lines.push(theme.fg("muted", `${theme.format.dash} ${snippetLine}`));
+					}
 				}
-			}
-
-			if (url) {
-				sourceLines.push(theme.fg("mdLinkUrl", url));
-			}
-		}
-	}
+				if (url) lines.push(theme.fg("mdLinkUrl", url));
+				return lines;
+			},
+		},
+		theme,
+	);
 
-	const relatedLines: string[] = [];
-	if (relatedCount === 0) {
-		relatedLines.push(theme.fg("muted", "No related questions"));
-	} else {
-		const maxRelated = Math.min(MAX_RELATED_QUESTIONS, related.length);
-		for (let i = 0; i < maxRelated; i++) {
-			relatedLines.push(theme.fg("muted", `${theme.format.dash} ${related[i]}`));
-		}
-		if (relatedCount > maxRelated) {
-			relatedLines.push(theme.fg("muted", formatMoreItems(relatedCount - maxRelated, "question", theme)));
-		}
+	const relatedLines = related.length > 0 ? related : ["No related questions"];
+	const relatedTree = renderTreeList(
+		{
+			items: relatedLines,
+			expanded,
+			maxCollapsed: MAX_COLLAPSED_ITEMS,
+			itemType: "question",
+			renderItem: line => theme.fg("muted", line === "No related questions" ? line : `${theme.format.dash} ${line}`),
+		},
+		theme,
+	);
+	if (!expanded && relatedCount > MAX_COLLAPSED_ITEMS) {
+		relatedTree.push(theme.fg("muted", formatMoreItems(relatedCount - MAX_COLLAPSED_ITEMS, "question", theme)));
 	}
 
 	const metaLines: string[] = [];
 	metaLines.push(`${theme.fg("muted", "Provider:")} ${theme.fg("text", providerLabel)}`);
-	if (response.model) {
-		metaLines.push(`${theme.fg("muted", "Model:")} ${theme.fg("text", response.model)}`);
-	}
+	if (response.model) metaLines.push(`${theme.fg("muted", "Model:")} ${theme.fg("text", response.model)}`);
 	metaLines.push(`${theme.fg("muted", "Sources:")} ${theme.fg("text", String(sourceCount))}`);
-	if (citationCount > 0) {
+	if (citationCount > 0)
 		metaLines.push(`${theme.fg("muted", "Citations:")} ${theme.fg("text", String(citationCount))}`);
-	}
-	if (relatedCount > 0) {
-		metaLines.push(`${theme.fg("muted", "Related:")} ${theme.fg("text", String(relatedCount))}`);
-	}
+	if (relatedCount > 0) metaLines.push(`${theme.fg("muted", "Related:")} ${theme.fg("text", String(relatedCount))}`);
 	if (response.usage) {
 		const usageParts: string[] = [];
 		if (response.usage.inputTokens !== undefined) usageParts.push(`in ${response.usage.inputTokens}`);
 		if (response.usage.outputTokens !== undefined) usageParts.push(`out ${response.usage.outputTokens}`);
 		if (response.usage.totalTokens !== undefined) usageParts.push(`total ${response.usage.totalTokens}`);
 		if (response.usage.searchRequests !== undefined) usageParts.push(`search ${response.usage.searchRequests}`);
-		if (usageParts.length > 0) {
+		if (usageParts.length > 0)
 			metaLines.push(`${theme.fg("muted", "Usage:")} ${theme.fg("text", usageParts.join(theme.sep.dot))}`);
-		}
 	}
 	if (response.requestId) {
 		metaLines.push(
@@ -264,55 +230,42 @@ export function renderWebSearchResult(
 		);
 	}
 	if (searchQueries.length > 0) {
-		metaLines.push(`${theme.fg("muted", "Search queries:")} ${theme.fg("text", String(searchQueries.length))}`);
-		const queryPreview = searchQueries.slice(0, MAX_QUERY_PREVIEW);
-		for (const q of queryPreview) {
-			metaLines.push(theme.fg("muted", `${theme.format.dash} ${truncate(q, MAX_QUERY_LEN, theme.format.ellipsis)}`));
-		}
-		if (searchQueries.length > MAX_QUERY_PREVIEW) {
-			metaLines.push(theme.fg("muted", formatMoreItems(searchQueries.length - MAX_QUERY_PREVIEW, "query", theme)));
-		}
+		const queriesPreview = searchQueries.slice(0, MAX_QUERY_PREVIEW);
+		const queryList = queriesPreview.map(q => truncate(q, MAX_QUERY_LEN, theme.format.ellipsis));
+		const suffix = searchQueries.length > queriesPreview.length ? theme.format.ellipsis : "";
+		metaLines.push(`${theme.fg("muted", "Queries:")} ${theme.fg("text", queryList.join("; "))}${suffix}`);
 	}
 
-	const sections: Array<{ title: string; icon: string; lines: string[] }> = [
+	const sections = [
+		...(queryPreview
+			? [
+					{
+						lines: [`${theme.fg("muted", "Query:")} ${theme.fg("text", queryPreview)}`],
+					},
+				]
+			: []),
+		{ label: theme.fg("toolTitle", "Answer"), lines: answerTree },
 		{
-			title: "Answer",
-			icon: formatStatusIcon("info", theme),
-			lines: answerSectionLines,
-		},
-		{
-			title: "Sources",
-			icon: formatStatusIcon(sourceCount > 0 ? "success" : "warning", theme),
-			lines: sourceLines,
-		},
-		{
-			title: "Related",
-			icon: formatStatusIcon(relatedCount > 0 ? "info" : "warning", theme),
-			lines: relatedLines,
-		},
-		{
-			title: "Meta",
-			icon: formatStatusIcon("info", theme),
-			lines: metaLines,
+			label: theme.fg("toolTitle", "Sources"),
+			lines: sourceTree.length > 0 ? sourceTree : [theme.fg("muted", "No sources returned")],
 		},
+		{ label: theme.fg("toolTitle", "Related"), lines: relatedTree },
+		{ label: theme.fg("toolTitle", "Metadata"), lines: metaLines },
 	];
 
-	for (let i = 0; i < sections.length; i++) {
-		const section = sections[i];
-		const isLast = i === sections.length - 1;
-		const branch = isLast ? theme.tree.last : theme.tree.branch;
-		const indent = isLast ? "  " : `${theme.tree.vertical} `;
-
-		text += `\n ${theme.fg("dim", branch)} ${section.icon} ${theme.fg("accent", section.title)}`;
-		for (let j = 0; j < section.lines.length; j++) {
-			const line = section.lines[j];
-			const isLastLine = j === section.lines.length - 1;
-			const lineBranch = isLastLine ? theme.tree.last : theme.tree.branch;
-			text += `\n ${theme.fg("dim", indent)}${theme.fg("dim", lineBranch)} ${line}`;
-		}
-	}
-
-	return new Text(text, 0, 0);
+	return {
+		render: (width: number) =>
+			renderOutputBlock(
+				{
+					header,
+					state: sourceCount > 0 ? "success" : "warning",
+					sections,
+					width,
+				},
+				theme,
+			),
+		invalidate: () => {},
+	};
 }
 
 /** Render web search call (query preview) */
@@ -322,11 +275,12 @@ export function renderWebSearchCall(
 ): Component {
 	const provider = args.provider ?? "auto";
 	const query = truncate(args.query, 80, theme.format.ellipsis);
-	const text = `${theme.fg("toolTitle", "Web Search")} ${theme.fg("dim", `(${provider})`)} ${theme.fg("muted", query)}`;
+	const text = renderStatusLine({ icon: "pending", title: "Web Search", description: query, meta: [provider] }, theme);
 	return new Text(text, 0, 0);
 }
 
 export const webSearchToolRenderer = {
 	renderCall: renderWebSearchCall,
 	renderResult: renderWebSearchResult,
+	mergeCallAndResult: true,
 };

package/tsconfig.json

@@ -1,42 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2024",
-		"module": "ESNext",
-		"lib": [
-			"ES2024"
-		],
-		"strict": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "Bundler",
-		"resolveJsonModule": true,
-		"allowImportingTsExtensions": true,
-		"experimentalDecorators": true,
-		"emitDecoratorMetadata": true,
-		"useDefineForClassFields": false,
-		"types": [
-			"bun",
-			"node"
-		],
-		"noEmit": true,
-		"baseUrl": ".",
-		"paths": {
-			"@oh-my-pi/pi-coding-agent": [
-				"./src/index.ts"
-			],
-			"@oh-my-pi/pi-coding-agent/*": [
-				"./src/*"
-			]
-		}
-	},
-	"include": [
-		"src/**/*.ts"
-	],
-	"exclude": [
-		"node_modules",
-		"dist",
-		"**/*.test.ts",
-		"test/**"
-	]
-}