@quandev104/pi-style 0.1.2 → 0.1.4

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

@@ -0,0 +1,368 @@
+// Boxless output-tree primitives shared by the ls/find/grep/bash renderers.
+//
+// ls/find/grep and bash `ls/find/grep/rg` results render their parsed output as
+// a **boxless tree panel** — a summary header line followed by `├─/└─` rows —
+// instead of a boxed command/response shell. This module owns:
+//
+// - output parsers that turn native tool text (entries, paths, `file:line:`
+//   match lines) into structured records, dropping trailing truncation notices;
+// - `renderOutputTree`, which lays out a flat list of entries under a header
+//   (used by lone ls/find and bash ls/find);
+// - `renderGrepTree`, which lays out grep matches grouped by file (used by grep
+//   and bash grep/rg).
+//
+// Design notes:
+// - Pure + theme-consuming: no filesystem, no global state, no caching (callers
+//   cache at the component boundary).
+// - Every row is width-safe via safeTruncateToWidth; the header is never
+//   truncated by this layer (callers pass a concise, pre-sized header).
+// - Tree indent matches the quiet-tool batch panel (`  ├─`) so the panels read
+//   as one visual family.
+
+import type { BoxTheme } from "../../../shared/box.js";
+import { safeTruncateToWidth } from "../../../shared/render-budget.js";
+
+/** Indent for top-level tree rows; matches the quiet-tool batch panel. */
+export const TREE_INDENT = "  ";
+/** Extra indent for rows nested under a grouping node. */
+export const TREE_CHILD_INDENT = "  ";
+/** Default number of entries/matches shown before collapsing to "… N more". */
+export const OUTPUT_TREE_HEAD_LIMIT = 6;
+
+// ── Nerd Font file-type icons ───────────────────────────────────────────────
+// Only used when the session glyph mode is nerd (see withIcons). Unicode/ASCII
+// modes render plain entries.
+
+const FILE_ICON_FOLDER = "\u{F415}"; //  (nf-md-folder)
+const FILE_ICON_DEFAULT = "\u{E612}"; //  (nf-seti-default)
+/** Search (magnifying-glass) icon for find/grep headers (nf-fa-search). */
+export const SEARCH_ICON = "\u{F002}";
+const FILE_ICONS: Readonly<Record<string, string>> = {
+	ts: "\u{E628}", //  (nf-seti-typescript)
+	tsx: "\u{E7BA}", //  (nf-seti-react)
+	js: "\u{E62C}", //  (nf-seti-javascript)
+	jsx: "\u{E7BA}", //  (nf-seti-react)
+	mjs: "\u{E62C}",
+	cjs: "\u{E62C}",
+	json: "\u{E62B}", //  (nf-seti-json)
+	md: "\u{E609}", //  (nf-seti-markdown)
+	mdx: "\u{E609}",
+	css: "\u{E749}", //  (nf-seti-css)
+	scss: "\u{E749}",
+	sass: "\u{E749}",
+	less: "\u{E749}",
+	html: "\u{E60E}", //  (nf-seti-html)
+	htm: "\u{E60E}",
+	py: "\u{E606}", //  (nf-seti-python)
+	go: "\u{E627}", //  (nf-seti-go)
+	rs: "\u{E7A8}", //  (nf-seti-rust)
+	sh: "\u{E795}", //  (nf-seti-shell)
+	bash: "\u{E795}",
+	zsh: "\u{E795}",
+	fish: "\u{E795}",
+	yml: "\u{E615}", //  (nf-seti-yaml)
+	yaml: "\u{E615}",
+	toml: "\u{E615}",
+	java: "\u{E738}", //  (nf-seti-java)
+	c: "\u{E61E}", //  (nf-seti-c)
+	h: "\u{E61E}",
+	cpp: "\u{E61E}",
+	hpp: "\u{E61E}",
+	cs: "\u{E61E}",
+	svg: "\u{E62A}", //  (nf-seti-svg)
+	png: "\u{E61D}", //  (nf-seti-image)
+	jpg: "\u{E61D}",
+	jpeg: "\u{E61D}",
+	gif: "\u{E61D}",
+	webp: "\u{E61D}",
+	pdf: "\u{E67A}", //  (nf-seti-pdf)
+	dockerfile: "\u{E7B0}", //  (nf-seti-docker)
+	lock: "\u{E7B0}",
+	gitignore: "\u{E702}", //  (nf-seti-git)
+	gitattributes: "\u{E702}",
+	vue: "\u{ED43}", //  (nf-vue)
+	svelte: "\u{E697}",
+};
+
+/** Nerd Font file-type icon for a path, or "" when not applicable. */
+export function fileIcon(path: string): string {
+	if (path.endsWith("/")) return FILE_ICON_FOLDER;
+	const name = path.split("/").pop() ?? path;
+	const lower = name.toLowerCase();
+	const ext = lower.includes(".") ? lower.slice(lower.lastIndexOf(".") + 1) : lower;
+	return FILE_ICONS[ext] ?? FILE_ICONS[lower] ?? FILE_ICON_DEFAULT;
+}
+
+/** Lines produced by these native tools to signal truncation (already in the
+ *  output text, not separate metadata). Dropped before parsing. */
+const NOTICE_LINE_PATTERN = /^\[[^\]]*\]$/;
+
+/** A parsed grep match line. Context lines are not surfaced in the tree. */
+export interface GrepMatch {
+	readonly file: string;
+	readonly line: number;
+	readonly content: string;
+}
+
+/** Drop trailing tool notices (`[Showing last …]`, `[Truncated: …]`) and blanks. */
+function stripNotices(text: string): string[] {
+	return text
+		.replace(/\r/g, "")
+		.split("\n")
+		.map((line) => line.trimEnd())
+		.filter((line) => line.length > 0 && !NOTICE_LINE_PATTERN.test(line.trim()));
+}
+
+/**
+ * Parse native `ls` output into display entries. Directories keep their `/`
+ * suffix; the `(empty directory)` placeholder and truncation notices are
+ * removed. Output is already sorted alphabetically by the tool.
+ */
+export function parseLsOutput(rawText: string): string[] {
+	return stripNotices(rawText)
+		.map((line) => line.trim())
+		.filter((line) => line.length > 0 && line !== "(empty directory)");
+}
+
+/**
+ * Parse `ls -l`/`ls -la` long-format output into display entries: the entry
+ * name is the text after the time column; directory names get a trailing `/`.
+ * The `total N` summary and `.`/`..` entries are dropped. Standard POSIX
+ * columns: perms links owner group size month day time name. macOS `@`/`+`
+ * permission suffixes are tolerated.
+ */
+export function parseLsLongOutput(rawText: string): string[] {
+	const entries: string[] = [];
+	for (const line of stripNotices(rawText)) {
+		if (!/^[bcdlsp-][rwxtsST-]{9}/.test(line)) continue;
+		const parts = line.split(/\s+/);
+		const name = parts.slice(8).join(" ").trim();
+		if (!name || name === "." || name === "..") continue;
+		const isDir = (parts[0] ?? "").startsWith("d");
+		entries.push(isDir ? `${name}/` : name);
+	}
+	return entries;
+}
+
+/**
+ * Parse native `find` output into display paths (one per line). Notices are
+ * removed. The native tool returns paths relative to the search directory.
+ */
+export function parseFindOutput(rawText: string): string[] {
+	return stripNotices(rawText)
+		.map((line) => line.trim())
+		.filter((line) => line.length > 0);
+}
+
+// Match line:  path/to/file.ts:42:  matched content   (Pi grep adds a space;
+// ripgrep/grep emit no space). Context lines (path-line- …) are dropped.
+const GREP_MATCH_PATTERN = /^(.*):(\d+):[ \t]?(.*)$/;
+// Single-file ripgrep/grep output: `42:  content` (no filename).
+const GREP_BARE_PATTERN = /^(\d+):[ \t]?(.*)$/;
+
+/**
+ * Parse native `grep` output into match records. Only real match lines
+ * (`file:line: content`) are kept; context lines (`file-line- …`) are dropped
+ * so the tree stays focused on hits. Trailing notices are removed.
+ */
+export function parseGrepOutput(rawText: string): GrepMatch[] {
+	const matches: GrepMatch[] = [];
+	for (const line of stripNotices(rawText)) {
+		const match = GREP_MATCH_PATTERN.exec(line);
+		if (!match) continue;
+		const [, file, lineNo, content] = match;
+		if (!file || lineNo === undefined || content === undefined) continue;
+		const parsed = Number(lineNo);
+		if (!Number.isFinite(parsed) || parsed < 1) continue;
+		matches.push({ file, line: parsed, content });
+	}
+	return matches;
+}
+
+/**
+ * Parse single-file grep/ripgrep output — `line: content` without a filename —
+ * attributing every match to the given file. Used by bash `grep pattern file`.
+ */
+export function parseGrepBareOutput(rawText: string, file: string): GrepMatch[] {
+	const matches: GrepMatch[] = [];
+	for (const line of stripNotices(rawText)) {
+		const match = GREP_BARE_PATTERN.exec(line);
+		if (!match) continue;
+		const parsed = Number(match[1]);
+		if (!Number.isFinite(parsed) || parsed < 1) continue;
+		matches.push({ file, line: parsed, content: match[2] ?? "" });
+	}
+	return matches;
+}
+
+/** Group grep matches by file, preserving first-seen order. */
+export function groupMatchesByFile(matches: readonly GrepMatch[]): { file: string; matches: GrepMatch[] }[] {
+	const order: string[] = [];
+	const buckets = new Map<string, GrepMatch[]>();
+	for (const match of matches) {
+		let bucket = buckets.get(match.file);
+		if (!bucket) {
+			bucket = [];
+			buckets.set(match.file, bucket);
+			order.push(match.file);
+		}
+		bucket.push(match);
+	}
+	return order.map((file) => ({ file, matches: buckets.get(file) ?? [] }));
+}
+
+export interface OutputTreeOptions {
+	/** Maximum entries shown before the "… N more" row. */
+	headLimit?: number;
+	/** Singular noun used in the collapse row (default "file"); pluralized automatically. */
+	moreUnit?: string;
+	/** Optional ANSI-themed color for entry text (defaults to "toolOutput"). */
+	entryColor?: string;
+	/** Indent prefix applied to every row (defaults to TREE_INDENT). */
+	indent?: string;
+	/** Nerd Font mode: prefix each entry with its file-type icon. */
+	withIcons?: boolean;
+}
+
+/**
+ * Render a flat output tree: `<header>` then `├─/└─` rows for the first entries
+ * and a trailing `└─ … N more <unit>` row when truncated. Used by lone ls/find
+ * (and bash ls/find).
+ */
+export function renderOutputTree(
+	theme: BoxTheme,
+	header: string,
+	entries: readonly string[],
+	width: number,
+	options: OutputTreeOptions = {},
+): string[] {
+	const headLimit = options.headLimit ?? OUTPUT_TREE_HEAD_LIMIT;
+	const moreUnit = options.moreUnit ?? "file";
+	const entryColor = options.entryColor ?? "toolOutput";
+	const indent = options.indent ?? TREE_INDENT;
+	const safeWidth = Math.max(1, width);
+	const label = (entry: string) => (options.withIcons && entry ? `${fileIcon(entry)} ${entry}` : entry);
+
+	const out: string[] = [safeTruncateToWidth(header, safeWidth, "…")];
+	if (entries.length === 0) return out;
+
+	const visible = entries.slice(0, headLimit);
+	const more = entries.length - visible.length;
+	const lastIndex = visible.length - 1;
+	for (let i = 0; i < visible.length; i++) {
+		const branch = i < lastIndex || more > 0 ? "├─" : "└─";
+		const line = `${indent}${theme.fg("borderMuted", branch)} ${theme.fg(entryColor, label(visible[i] ?? ""))}`;
+		out.push(safeTruncateToWidth(line, safeWidth, "…"));
+	}
+	if (more > 0) {
+		const line = `${indent}${theme.fg("borderMuted", "└─")} ${theme.fg("dim", `… ${more} more ${pluralForm(moreUnit, more)}`)}`;
+		out.push(safeTruncateToWidth(line, safeWidth, "…"));
+	}
+	return out;
+}
+
+export interface GrepTreeOptions {
+	/** Maximum matches shown (across all files) before the "… N more" row. */
+	headLimit?: number;
+	/** Indent prefix applied to top-level rows. */
+	indent?: string;
+	/** Nerd Font mode: prefix file nodes with their file-type icon. */
+	withIcons?: boolean;
+}
+
+function formatMatchRow(theme: BoxTheme, match: GrepMatch): string {
+	// Match rows render in the output text color (not primary) so they read like
+	// the matched code; only the file nodes carry the primary color.
+	const label = theme.fg("toolOutput", `*${match.line}`);
+	const sep = theme.fg("borderMuted", "│");
+	return `${label}${sep} ${theme.fg("toolOutput", match.content)}`;
+}
+
+/**
+ * Render a grep matches tree: `<header>` then matches grouped by file. With a
+ * single file the matches are direct children; with several files each file is
+ * a `├─ file` node and its matches hang off an indented trunk beneath. A
+ * trailing `└─ … N more matches` row appears when the match budget is exceeded.
+ */
+export function renderGrepTree(
+	theme: BoxTheme,
+	header: string,
+	matches: readonly GrepMatch[],
+	width: number,
+	options: GrepTreeOptions = {},
+): string[] {
+	const headLimit = options.headLimit ?? OUTPUT_TREE_HEAD_LIMIT;
+	const indent = options.indent ?? TREE_INDENT;
+	const safeWidth = Math.max(1, width);
+
+	const out: string[] = [safeTruncateToWidth(header, safeWidth, "…")];
+	if (matches.length === 0) return out;
+
+	const groups = groupMatchesByFile(matches);
+	const singleFile = groups.length === 1;
+
+	// First decide which matches fit the budget so branch glyphs (├─ vs └─) and
+	// the trailing "… N more" row stay consistent.
+	const budget = matches.slice(0, headLimit);
+	const remaining = matches.length - budget.length;
+	const truncated = remaining > 0;
+	const totalVisible = budget.length;
+
+	const push = (line: string) => out.push(safeTruncateToWidth(line, safeWidth, "…"));
+
+	if (singleFile) {
+		budget.forEach((match, index) => {
+			const isLast = index === totalVisible - 1 && !truncated;
+			push(`${indent}${theme.fg("borderMuted", isLast ? "└─" : "├─")} ${formatMatchRow(theme, match)}`);
+		});
+	} else {
+		// Walk the budget, tracking position within each file group so the file
+		// node and its match subtree render as one connected unit.
+		let shown = 0;
+		for (let gi = 0; gi < groups.length && shown < totalVisible; gi++) {
+			const group = groups[gi];
+			if (!group) continue;
+			const isLastGroup = gi === groups.length - 1;
+			const trunk = isLastGroup ? " " : theme.fg("borderMuted", "│");
+
+			const visibleHere: GrepMatch[] = [];
+			for (const match of group.matches) {
+				if (shown >= totalVisible) break;
+				visibleHere.push(match);
+				shown++;
+			}
+			if (visibleHere.length === 0) continue;
+
+			const groupIsLastRendered = shown >= totalVisible && !truncated;
+			const fileLabel = options.withIcons ? `${fileIcon(group.file)} ${group.file}` : group.file;
+			// File nodes use the primary (accent) color, matching read/ls/find paths.
+			push(`${indent}${theme.fg("borderMuted", groupIsLastRendered ? "└─" : "├─")} ${theme.fg("accent", fileLabel)}`);
+
+			visibleHere.forEach((match, index) => {
+				const isLastInGroup = index === visibleHere.length - 1;
+				const isLastOverall = groupIsLastRendered && isLastInGroup;
+				push(
+					`${indent}${trunk}${TREE_CHILD_INDENT}${theme.fg("borderMuted", isLastOverall ? "└─" : "├─")} ${formatMatchRow(theme, match)}`,
+				);
+			});
+		}
+	}
+
+	if (truncated) {
+		push(
+			`${indent}${theme.fg("borderMuted", "└─")} ${theme.fg("dim", `… ${remaining} more ${pluralForm("match", remaining)}`)}`,
+		);
+	}
+	return out;
+}
+
+/** Return the pluralized form of a noun for the given count. */
+export function pluralForm(noun: string, count: number): string {
+	if (count === 1) return noun;
+	return /(s|x|z|ch|sh)$/i.test(noun) ? `${noun}es` : `${noun}s`;
+}
+
+/** Pluralize a count noun: "1 file" / "3 files", "1 match" / "3 matches". */
+export function pluralize(count: number, noun: string): string {
+	return `${count} ${pluralForm(noun, count)}`;
+}

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

@@ -4,19 +4,35 @@ import { getLanguageFromPath } from "@earendil-works/pi-coding-agent";
 import { stripAnsi } from "../../../shared/ansi.js";
 import {
 	type BoxTheme,
-	boxInnerWidth,
+	formatBoxedRunningStatus,
 	getTextOutput,
 	renderBoxedToolCall,
 	renderBoxedToolResult,
 } from "../../../shared/box.js";
 import { formatElapsedMs, getElapsedMs } from "../../../shared/elapsed.js";
 import { AdaptiveDiffComponent, buildSplitRows, countDiffStats } from "../../../shared/split-diff.js";
-import { getStateElapsedMs } from "./session-config.js";
-import { type BoxedToolContext, type BoxedToolDefinition, displayPath, noteExecutionStart } from "./shared.js";
+import { getStateElapsedMs, isResultSeen } from "./session-config.js";
+import {
+	type BoxedToolContext,
+	type BoxedToolDefinition,
+	displayPath,
+	noteBoxedCallState,
+	noteBoxedResultPhase,
+	noteExecutionStart,
+	stateElapsedMs,
+} from "./shared.js";
 
 const MAX_HIGHLIGHT_DIFF_CHARS = 12000;
 const MAX_HIGHLIGHT_DIFF_ROWS = 120;
 
+/** First-partial-pass result: the pending/running call card stands alone. */
+const EMPTY_QUICK_EDIT_RESULT = Object.freeze({
+	invalidate() {},
+	render() {
+		return [];
+	},
+});
+
 interface QuickEditToolConfig {
 	toolLabel: string;
 	applyingLabel: string;
@@ -131,10 +147,12 @@ function renderQuickEditResult(
 	config: QuickEditToolConfig,
 ) {
 	if (options.isPartial) {
+		const firstResultPass = noteBoxedResultPhase(context, options.isPartial);
+		if (firstResultPass) return EMPTY_QUICK_EDIT_RESULT;
 		return renderBoxedToolResult(
 			theme,
 			() => [`${theme.fg("dim", "↳")} ${theme.fg("muted", `Applying ${config.applyingLabel}...`)}`],
-			{ isPartial: true },
+			{ showDivider: false, footerLines: [formatBoxedRunningStatus(theme, stateElapsedMs(context))], isPartial: true },
 		);
 	}
 
@@ -196,12 +214,15 @@ export function quickEditTool(config: QuickEditToolConfig): BoxedToolDefinition
 	return {
 		call(args, theme, context) {
 			noteExecutionStart(context);
+			noteBoxedCallState(context);
 			const detail = displayPath(String(args?.path ?? ""), context);
 			return renderBoxedToolCall(theme, config.toolLabel, [], {
 				headerDetail: detail,
 				isError: Boolean(context.isError),
 				isPartial: Boolean(context.isPartial),
 				isPending: Boolean(context.isPartial),
+				running: Boolean(context.executionStarted),
+				resultSeen: isResultSeen(context.state),
 			});
 		},
 		result(result, options, theme, context) {

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

@@ -1,204 +1,47 @@
 // Boxed read tool renderer
 // (renderCall/renderResult only; no tool re-registration).
+//
+// Read calls render as a boxless tree panel — a lone read is a batch of one,
+// consecutive reads group into one panel (see batch.ts). There is no boxed
+// single-call special case.
 
-import { getLanguageFromPath, highlightCode } from "@earendil-works/pi-coding-agent";
 import { stripAnsi } from "../../../shared/ansi.js";
-import type { BoxTheme } from "../../../shared/box.js";
+import { getTextOutput } from "../../../shared/box.js";
 import {
-	boxedToolWidthKey,
-	countLines,
-	extractTrailingNotice,
-	getTextOutput,
-	renderBoxedToolResult,
-	stripTrailingNotice,
-} from "../../../shared/box.js";
-import { safeTruncateToWidth } from "../../../shared/render-budget.js";
-import { getToolsRenderConfig } from "./session-config.js";
-import {
-	type BoxedToolDefinition,
-	clearFooterState,
-	compactCall,
-	compactFooterWithState,
-	noteExecutionStart,
-	pathRangeDetail,
-	resultFooterLines,
-	truncationOutputLines,
-} from "./shared.js";
-
-const MAX_HIGHLIGHT_OUTPUT_CHARS = 12000;
-const MAX_HIGHLIGHT_OUTPUT_LINES = 300;
-
-type NumberedReadLine = {
-	lineNumber: string;
-	content: string;
-};
-
-type ParsedReadOutput = {
-	fileHash: string | undefined;
-	numberedLines?: NumberedReadLine[];
-	body: string;
-};
-
-function parseReadOutput(text: string): ParsedReadOutput {
-	const fileHashMatch = text.match(/^fileHash: ([^\n]+)\n\n/);
-	const body = fileHashMatch ? text.slice(fileHashMatch[0].length) : text;
-	const rawLines = body ? body.split("\n") : [];
-	const numberedLines = rawLines.map((line) => line.match(/^\s*(\d+)\| ?(.*)$/));
-
-	if (numberedLines.length > 0 && numberedLines.every(Boolean)) {
-		return {
-			fileHash: fileHashMatch?.[1],
-			body: numberedLines.map((match) => match?.[2] ?? "").join("\n"),
-			numberedLines: numberedLines.map((match) => ({
-				lineNumber: match?.[1] ?? "",
-				content: match?.[2] ?? "",
-			})),
-		};
-	}
-
-	return { fileHash: fileHashMatch?.[1], body };
-}
-
-function renderReadBody(
-	theme: BoxTheme,
-	options: { expanded: boolean },
-	parsed: ParsedReadOutput,
-	output: string,
-	truncationNotice: string | null,
-): { render(width: number): string[]; invalidate(): void } {
-	let cacheKey = "";
-	let cacheLines: string[] | null = null;
-	return {
-		invalidate() {
-			cacheKey = "";
-			cacheLines = null;
-		},
-		render(width: number): string[] {
-			const renderWidth = Math.max(1, width);
-			const cfg = getToolsRenderConfig();
-			const maxLines = cfg.maxExpandedLines;
-			const expanded = Boolean(options.expanded);
-			const cacheId = `${renderWidth}|${expanded ? 1 : 0}|${maxLines}|${cfg.dimOutput ? 1 : 0}`;
-			if (cacheLines && cacheKey === cacheId) return cacheLines;
-
-			const linesRead = parsed.numberedLines?.length ?? countLines(parsed.body);
-			const summary = theme.fg("dim", `↳ Read ${linesRead} ${linesRead === 1 ? "line" : "lines"}.`);
-			const footer: string[] = [];
-			if (truncationNotice) footer.push(theme.fg("warning", truncationNotice));
-			footer.push("", summary);
-			const budget = maxLines > 0 ? maxLines - footer.length : 0;
-			const renderPlain = (text: string): string[] => {
-				const out: string[] = [];
-				for (const line of text.split("\n")) {
-					out.push(safeTruncateToWidth(theme.fg("toolOutput", line), renderWidth, "…"));
-				}
-				return out;
-			};
-			const lineCount = parsed.numberedLines?.length ?? countLines(parsed.body);
-			const shouldHighlight =
-				expanded &&
-				Boolean(getLanguageFromPath(output)) &&
-				parsed.body.length <= MAX_HIGHLIGHT_OUTPUT_CHARS &&
-				lineCount <= MAX_HIGHLIGHT_OUTPUT_LINES;
-
-			const renderBody = (): string[] => {
-				if (!parsed.numberedLines)
-					return renderPlain(parsed.fileHash ? `fileHash: ${parsed.fileHash}\n\n${parsed.body}` : parsed.body);
-
-				let bodyLines = parsed.body.split("\n").map((line) => theme.fg("toolOutput", line));
-				const lang = getLanguageFromPath(output);
-				if (shouldHighlight && lang) {
-					try {
-						bodyLines = highlightCode(parsed.body, lang);
-					} catch {
-						bodyLines = parsed.body.split("\n").map((line) => theme.fg("toolOutput", line));
-					}
-				}
-
-				const out: string[] = [];
-				if (parsed.fileHash) out.push(theme.fg("muted", `fileHash: ${parsed.fileHash}`), "");
-
-				const numberWidth = Math.max(...parsed.numberedLines.map((line) => line.lineNumber.length));
-				const gutterWidth = numberWidth + 3;
-				const contentWidth = Math.max(1, renderWidth - gutterWidth);
-				for (let i = 0; i < parsed.numberedLines.length; i++) {
-					const numberedLine = parsed.numberedLines[i] ?? { lineNumber: "", content: "" };
-					const bodyLine = safeTruncateToWidth(bodyLines[i] ?? "", contentWidth, "…");
-					const gutter = theme.fg("dim", `${numberedLine.lineNumber.padStart(numberWidth)} │ `);
-					out.push(`${gutter}${bodyLine}`);
-				}
-				return out;
-			};
-
-			const highlighted = renderBody();
-			if (maxLines > 0 && highlighted.length > budget) {
-				const truncated = highlighted.slice(0, budget);
-				const remaining = highlighted.length - budget;
-				truncated.push(theme.fg("dim", `… ${remaining} more lines`));
-				truncated.push(...footer);
-				cacheKey = cacheId;
-				cacheLines = truncated;
-				return cacheLines;
-			}
-			highlighted.push(...footer);
-			cacheKey = cacheId;
-			cacheLines = highlighted;
-			return cacheLines;
-		},
-	};
-}
+	type BatchToolMeta,
+	EMPTY_BATCH_COMPONENT,
+	emptyBatchResult,
+	registerBatchCall,
+	registerBatchResult,
+	renderBatchAwareCall,
+} from "./batch.js";
+import { type BoxedToolDefinition, noteExecutionStart, pathRangeDetail } from "./shared.js";
+
+const READ_META: BatchToolMeta = Object.freeze({
+	toolName: "read",
+	label: "Read",
+});
 
 export const readTool: BoxedToolDefinition = {
 	call(args, theme, context) {
 		noteExecutionStart(context);
 		const rawPath = String(args?.path ?? args?.file_path ?? "");
 		const detail = pathRangeDetail(rawPath, args?.offset, args?.limit, context);
-		return compactCall(theme, "Read", `${theme.fg("dim", "Path: ")}${detail}`, {
-			detailKey: detail,
-			context,
-		});
+		const { isLeader, batch } = registerBatchCall(READ_META, detail, context);
+		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 rawPath = String(context?.args?.path ?? context?.args?.file_path ?? "");
-		const detail = pathRangeDetail(rawPath, context?.args?.offset, context?.args?.limit, context);
-		const widthKey = boxedToolWidthKey("Read", detail);
-
-		if (context.isError) {
-			return renderBoxedToolResult(theme, () => [theme.fg("error", output || "Error")], {
-				widthKey,
-				footerLines: resultFooterLines(theme, result, context),
-				isError: true,
-			});
-		}
-
-		const imageCount = Array.isArray(result.content)
-			? result.content.filter((contentBlock) => {
-					if (!contentBlock || typeof contentBlock !== "object") return false;
-					return (contentBlock as { type?: unknown }).type === "image";
-				}).length
-			: 0;
-		if (imageCount > 0) {
-			if (!options.expanded) return compactFooterWithState(theme, result, context);
-			const summary = `↳ Read ${imageCount} ${imageCount === 1 ? "image" : "images"}.`;
-			return renderBoxedToolResult(theme, () => [theme.fg("dim", summary)], {
-				widthKey,
-				footerLines: resultFooterLines(theme, result, context),
-			});
-		}
-
-		const stripped = stripTrailingNotice(output);
-		const parsed = parseReadOutput(stripped);
-		const truncationNotice = extractTrailingNotice(output);
-		const _linesRead = truncationOutputLines(result) ?? parsed.numberedLines?.length ?? countLines(parsed.body);
-
-		if (!options.expanded) return compactFooterWithState(theme, result, context);
-
-		const body = renderReadBody(theme, options, parsed, output, truncationNotice);
-		return renderBoxedToolResult(theme, body, {
-			widthKey,
-			footerLines: resultFooterLines(theme, result, context),
-		});
+		registerBatchResult(
+			READ_META,
+			{
+				isPartial: Boolean(options.isPartial),
+				isError: Boolean(context.isError),
+				errorText: context.isError ? output || undefined : undefined,
+			},
+			context,
+		);
+		return emptyBatchResult();
 	},
 };