@quandev104/pi-style 0.1.2 → 0.1.3

package/extension-src/pi-style/features/tools/boxed/grep.ts

@@ -1,108 +1,180 @@
 // Boxed grep/search tool renderer.
+//
+// grep renders a **boxless tree panel**: a summary header
+// (`Grep: <pattern> <N> matches · <M> files · in <path>`) followed by match rows
+// grouped by file (`├─ *line│content`). Like the quiet-tool batch panel, the
+// whole panel lives in the call component and reads a live registry on every
+// render, so the result's match data is picked up without cross-component
+// invalidation. grep does not batch (each call owns its own panel).
+//
+// Lifecycle: panels are keyed by toolCallId and cleared on session reset and new
+// message boundaries (see resetGrepRegistry wiring in session-coordinator.ts and
+// pi/index.ts), mirroring the batch registry.
 
+import type { Component } from "@earendil-works/pi-tui";
 import { stripAnsi } from "../../../shared/ansi.js";
+import { type BoxTheme, getTextOutput, shortenPath } from "../../../shared/box.js";
+import { safeTruncateToWidth } from "../../../shared/render-budget.js";
 import {
-	boxedToolWidthKey,
-	countLines,
-	getTextOutput,
-	renderBoxedToolResult,
-	renderLines,
-	shortenPath,
-	stripTrailingNotice,
-} from "../../../shared/box.js";
+	type GrepMatch,
+	groupMatchesByFile,
+	parseGrepOutput,
+	pluralForm,
+	renderGrepTree,
+	SEARCH_ICON,
+	TREE_INDENT,
+} from "./output-tree.js";
 import { getToolsRenderConfig } from "./session-config.js";
-import {
-	type BoxedToolDefinition,
-	clearFooterState,
-	compactCall,
-	compactFooterWithState,
-	matchLimitReached,
-	noteExecutionStart,
-	resultFooterLines,
-} from "./shared.js";
+import { type BoxedToolDefinition, noteExecutionStart } from "./shared.js";
+
+const GREP_HEAD_LIMIT = 6;
+const GREP_ERROR_LINES = 2;
+
+interface GrepPanelState {
+	pattern: string;
+	pathLabel: string;
+	/** `undefined` until the result arrives; an empty array means zero matches. */
+	matches: GrepMatch[] | undefined;
+	isError: boolean;
+	errorText: string | undefined;
+	isPartial: boolean;
+}
 
-const MAX_GREP_PREVIEW_LINES = 10;
+const grepPanels = new Map<string, GrepPanelState>();
 
-function queryDetail(pattern: string, rawPath: string): string {
+/** Reset all grep panel state (session start/shutdown). */
+export function resetGrepRegistry(): void {
+	grepPanels.clear();
+}
+
+function pathLabel(rawPath: string): string {
 	const displayPath = String(rawPath ?? ".");
-	const path = displayPath === "." || displayPath === "" ? "current directory" : shortenPath(displayPath);
-	return pattern ? `/${pattern}/ in ${path}` : path;
+	return displayPath === "." || displayPath === "" ? "current directory" : shortenPath(displayPath);
 }
 
-export const grepTool: BoxedToolDefinition = {
-	call(args, theme, context) {
-		noteExecutionStart(context);
-		const detail = queryDetail(String(args?.pattern ?? ""), String(args?.path ?? "."));
-		return compactCall(theme, "Search", `${theme.fg("dim", "Query: ")}${detail}`, {
-			detailKey: detail,
-			context,
-		});
-	},
-	result(result, options, theme, context) {
-		clearFooterState(context);
-		const output = stripAnsi(getTextOutput(result)).trimEnd();
-		const stripped = stripTrailingNotice(output);
-		const detail = queryDetail(String(context?.args?.pattern ?? ""), String(context?.args?.path ?? "."));
-		const widthKey = boxedToolWidthKey("Search", detail);
-		const cfg = getToolsRenderConfig();
+function registerGrepCall(toolCallId: string, pattern: string, label: string): void {
+	const existing = grepPanels.get(toolCallId);
+	if (existing) {
+		existing.pattern = pattern;
+		existing.pathLabel = label;
+		return;
+	}
+	grepPanels.set(toolCallId, {
+		pattern,
+		pathLabel: label,
+		matches: undefined,
+		isError: false,
+		errorText: undefined,
+		isPartial: true,
+	});
+}
+
+function registerGrepResult(
+	toolCallId: string,
+	data: { matches: GrepMatch[]; isError: boolean; errorText: string | undefined; isPartial: boolean },
+): void {
+	const state = grepPanels.get(toolCallId);
+	if (!state) return;
+	state.matches = data.matches;
+	state.isError = data.isError;
+	state.errorText = data.errorText;
+	state.isPartial = data.isPartial;
+}
 
-		if (context.isError) {
-			return renderBoxedToolResult(
-				theme,
-				(width) => {
-					const body = renderLines(theme, stripped || output || "Error", options, {
-						maxLines: MAX_GREP_PREVIEW_LINES,
-						color: "error",
-						width,
-					});
-					return body ? body.split("\n") : [];
-				},
-				{
-					widthKey,
-					footerLines: resultFooterLines(theme, result, context),
-					isError: true,
-				},
-			);
-		}
+function bold(theme: BoxTheme, text: string): string {
+	return typeof theme?.bold === "function" ? theme.bold(text) : text;
+}
 
-		if (!options.expanded) return compactFooterWithState(theme, result, context);
+/** `Grep: <pattern> <N> matches · <M> files · in <path>` (done) /
+ *  `Grep: <pattern> · in <path>` (pending). */
+function formatGrepHeader(theme: BoxTheme, state: GrepPanelState): string {
+	const icon = getToolsRenderConfig().nerdFonts ? `${SEARCH_ICON} ` : "";
+	const label = bold(theme, "Grep:");
+	const patternPart = state.pattern ? ` ${theme.fg("text", state.pattern)}` : "";
+	const pathPart = state.pathLabel ? theme.fg("dim", ` · in ${state.pathLabel}`) : "";
+	if (state.isError) {
+		return `${icon}${theme.fg("error", bold(theme, "✗ Grep:"))}${state.pattern ? ` ${theme.fg("error", state.pattern)}` : ""}${pathPart}`;
+	}
+	if (state.matches === undefined) {
+		return `${icon}${label}${patternPart}${pathPart}`;
+	}
+	const matchCount = state.matches.length;
+	const fileCount = groupMatchesByFile(state.matches).length;
+	const matchesPart = theme.fg("accent", `${matchCount} ${pluralForm("match", matchCount)}`);
+	const filesPart = theme.fg("dim", ` · ${fileCount} ${pluralForm("file", fileCount)}`);
+	return `${icon}${label}${patternPart} ${matchesPart}${filesPart}${pathPart}`;
+}
 
-		let matchCount = 0;
-		if (stripped && stripped !== "No matches found") {
-			const lines = stripped.split("\n");
-			matchCount = lines.filter((line) => /:\d+:/.test(line)).length;
+function renderErrorLines(theme: BoxTheme, errorText: string, width: number): string[] {
+	const raw = stripAnsi(errorText)
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line.length > 0);
+	if (raw.length === 0) return [];
+	const prefix = `${TREE_INDENT}${theme.fg("borderMuted", "└─")} `;
+	const out = raw
+		.slice(0, GREP_ERROR_LINES)
+		.map((line) => safeTruncateToWidth(`${prefix}${theme.fg("error", line)}`, Math.max(1, width), "…"));
+	if (raw.length > GREP_ERROR_LINES)
+		out.push(safeTruncateToWidth(`${prefix}${theme.fg("error", "…")}`, Math.max(1, width), "…"));
+	return out;
+}
 
-			if (matchCount === 0) {
-				matchCount = countLines(stripped);
-			}
+function renderGrepPanelLines(theme: BoxTheme, state: GrepPanelState, width: number): string[] {
+	const safeWidth = Math.max(1, width);
+	const header = safeTruncateToWidth(formatGrepHeader(theme, state), safeWidth, "…");
+	if (state.isError) {
+		return [header, ...(state.errorText ? renderErrorLines(theme, state.errorText, width) : [])];
+	}
+	if (state.matches === undefined) return [header];
+	return renderGrepTree(theme, header, state.matches, safeWidth, {
+		headLimit: GREP_HEAD_LIMIT,
+		withIcons: getToolsRenderConfig().nerdFonts,
+	});
+}
 
-			if (matchLimitReached(result) !== undefined) {
-				matchCount = Math.max(matchCount, matchLimitReached(result) as number);
-			}
-		}
+/** Live panel component reading the registry on every render pass. The state
+ *  reference is captured at creation (like the batch panel): a registry clear
+ *  on session reset/resume must not blank already-rendered panels — the result
+ *  renderer mutates this same object, so live updates still flow. */
+function renderGrepPanel(theme: BoxTheme, toolCallId: string): Component {
+	const state = grepPanels.get(toolCallId);
+	return {
+		invalidate() {},
+		render(width: number): string[] {
+			if (!state) return [safeTruncateToWidth(bold(theme, "Grep:"), Math.max(1, width), "…")];
+			return renderGrepPanelLines(theme, state, width);
+		},
+	};
+}
 
-		const summary = theme.fg("dim", `↳ Found ${matchCount} ${matchCount === 1 ? "match" : "matches"}.`);
-		if (!stripped || stripped === "No matches found") {
-			return renderBoxedToolResult(theme, () => [summary], {
-				widthKey,
-				footerLines: resultFooterLines(theme, result, context),
-			});
-		}
+/** Empty result component — the panel lives in the call component, which
+ *  re-renders when the result arrives (Pi re-renders the tool execution
+ *  component on tool_execution_end), picking up the stored matches. */
+const EMPTY_GREP_RESULT: Component = {
+	invalidate() {},
+	render() {
+		return [];
+	},
+};
 
-		return renderBoxedToolResult(
-			theme,
-			(width) => {
-				const body = renderLines(theme, stripped, options, {
-					maxLines: options.expanded ? cfg.maxExpandedLines : MAX_GREP_PREVIEW_LINES,
-					color: "toolOutput",
-					width,
-				});
-				return [summary, ...(body ? body.split("\n") : [])];
-			},
-			{
-				widthKey,
-				footerLines: resultFooterLines(theme, result, context),
-			},
-		);
+export const grepTool: BoxedToolDefinition = {
+	call(args, theme, context) {
+		noteExecutionStart(context);
+		const pattern = String(args?.pattern ?? "");
+		registerGrepCall(context.toolCallId, pattern, pathLabel(String(args?.path ?? ".")));
+		return renderGrepPanel(theme, context.toolCallId);
+	},
+	result(result, options, _theme, context) {
+		const output = stripAnsi(getTextOutput(result)).trimEnd();
+		const isError = Boolean(context.isError);
+		const matches = isError ? [] : parseGrepOutput(output);
+		registerGrepResult(context.toolCallId, {
+			matches,
+			isError,
+			errorText: isError ? output || undefined : undefined,
+			isPartial: Boolean(options.isPartial),
+		});
+		return EMPTY_GREP_RESULT;
 	},
 };

package/extension-src/pi-style/features/tools/boxed/index.ts

@@ -7,6 +7,7 @@
 import type { Component } from "@earendil-works/pi-tui";
 import type { BoxTheme } from "../../../shared/box.js";
 import { bashTool } from "./bash.js";
+import { closeActiveBatch, isBatchableTool } from "./batch.js";
 import { editTool } from "./edit.js";
 import { renderFallbackCall, renderFallbackResult } from "./fallback.js";
 import { findTool } from "./find.js";
@@ -46,6 +47,9 @@ export function renderBoxedToolCall(
 	theme: BoxTheme,
 	context: BoxedToolContext,
 ): Component {
+	// Any non-batchable tool call is a batch boundary: the next quiet call starts
+	// a fresh batch instead of joining the previous one.
+	if (!isBatchableTool(toolName)) closeActiveBatch();
 	const tool = typeof toolName === "string" ? REGISTRY[toolName] : undefined;
 	if (tool) return tool.call(args, theme, context);
 	return renderFallbackCall(toolName, args, theme, context);

package/extension-src/pi-style/features/tools/boxed/ls.ts

@@ -1,23 +1,28 @@
 // Boxed ls tool renderer.
+//
+// ls calls render as a boxless tree panel — a lone ls shows its parsed output as
+// a flat `List: <N> files · in <path>` tree; consecutive ls calls group into one
+// panel with per-member nested subtrees (see batch.ts). Pending/failed calls
+// without output fall back to a path row.
 
 import { stripAnsi } from "../../../shared/ansi.js";
+import { getTextOutput, shortenPath } from "../../../shared/box.js";
 import {
-	boxedToolWidthKey,
-	countLines,
-	getTextOutput,
-	renderBoxedToolResult,
-	shortenPath,
-	stripTrailingNotice,
-} from "../../../shared/box.js";
-import {
-	type BoxedToolDefinition,
-	clearFooterState,
-	compactCall,
-	compactFooterWithState,
-	noteExecutionStart,
-	resultFooterLines,
-	truncationOutputLines,
-} from "./shared.js";
+	type BatchToolMeta,
+	EMPTY_BATCH_COMPONENT,
+	emptyBatchResult,
+	registerBatchCall,
+	registerBatchResult,
+	renderBatchAwareCall,
+} from "./batch.js";
+import { parseLsOutput } from "./output-tree.js";
+import { type BoxedToolDefinition, noteExecutionStart } from "./shared.js";
+
+const LIST_META: BatchToolMeta = Object.freeze({
+	toolName: "ls",
+	label: "List",
+	headerLabel: "List",
+});
 
 function displayPath(rawPath: string): string {
 	const path = String(rawPath ?? ".");
@@ -28,38 +33,25 @@ function displayPath(rawPath: string): string {
 export const lsTool: BoxedToolDefinition = {
 	call(args, theme, context) {
 		noteExecutionStart(context);
-		const detail = displayPath(String(args?.path ?? "."));
-		return compactCall(theme, "List", `${theme.fg("dim", "Path: ")}${detail}`, {
-			detailKey: detail,
-			context,
-		});
+		const rawPath = String(args?.path ?? ".");
+		const detail = displayPath(rawPath);
+		const { isLeader, batch } = registerBatchCall(LIST_META, detail, context, { pathLabel: detail });
+		if (!isLeader) return EMPTY_BATCH_COMPONENT;
+		return renderBatchAwareCall(theme, batch);
 	},
-	result(result, options, theme, context) {
-		clearFooterState(context);
+	result(result, options, _theme, context) {
 		const output = stripAnsi(getTextOutput(result)).trimEnd();
-		const detail = displayPath(String(context?.args?.path ?? "."));
-		const widthKey = boxedToolWidthKey("List", detail);
-
-		if (context.isError) {
-			return renderBoxedToolResult(theme, () => [theme.fg("error", output || "Error")], {
-				widthKey,
-				footerLines: resultFooterLines(theme, result, context),
-				isError: true,
-			});
-		}
-
-		if (!options.expanded) return compactFooterWithState(theme, result, context);
-
-		let itemCount = 0;
-		if (output && output !== "(empty directory)") {
-			const stripped = stripTrailingNotice(output);
-			itemCount = truncationOutputLines(result) ?? countLines(stripped);
-		}
-
-		const summary = `↳ Listed ${itemCount} ${itemCount === 1 ? "item" : "items"}.`;
-		return renderBoxedToolResult(theme, () => [theme.fg("dim", summary)], {
-			widthKey,
-			footerLines: resultFooterLines(theme, result, context),
-		});
+		const entries = context.isError ? undefined : parseLsOutput(output);
+		registerBatchResult(
+			LIST_META,
+			{
+				isPartial: Boolean(options.isPartial),
+				isError: Boolean(context.isError),
+				errorText: context.isError ? output || undefined : undefined,
+				...(entries !== undefined ? { entries } : {}),
+			},
+			context,
+		);
+		return emptyBatchResult();
 	},
 };