@oh-my-pi/pi-tui 18.14.2 → 18.15.0

package/src/chrome/transcript-status.ts

@@ -6,10 +6,10 @@ import { type ThemeColor, theme } from "../theme";
 import { TranscriptBlock } from "./transcript-container";
 import { type NoticeTone, noticeRow } from "./transcript-notice";
 
-/** One themed run of a status row's terminal line. */
+/** One run of a status row's terminal line, in `color` unless the text is already styled. */
 export interface TranscriptStatusPart {
 	readonly text: string;
-	readonly color: ThemeColor;
+	readonly color?: ThemeColor;
 }
 
 /** A status row in a native terminal: its {@link noticeRow}'s tone, icon and message. */
@@ -41,7 +41,9 @@ export class TranscriptStatusBlock extends TranscriptBlock {
 	constructor(rows: readonly TranscriptStatusRow[]) {
 		super();
 		for (const row of rows) {
-			const styled = row.parts.flatMap(part => (part ? [theme.fg(part.color, part.text)] : []));
+			const styled = row.parts.flatMap(part =>
+				part ? [part.color ? theme.fg(part.color, part.text) : part.text] : [],
+			);
 			this.addChild(new Text(styled.join(" "), row.indent ?? 1, 0));
 		}
 		this.#native = col(

package/src/overlays/hook-editor.ts

@@ -407,6 +407,12 @@ export class HookEditorComponent extends OverlayPanel implements Focusable {
 		else this.#editor.pasteText(text);
 	}
 
+	/** Replace the draft, as Ctrl+R history search does for the main composer. */
+	setText(text: string): void {
+		if (this.#disposed) return;
+		this.#editor.setText(text);
+	}
+
 	/**
 	 * Prompt-style: raw Enter submits; Editor owns newline-producing sequences.
 	 * The follow-up chord (`app.message.followUp` → Ctrl+Q / Ctrl+Enter) also

package/src/overlays/jobs-panel.ts

@@ -26,6 +26,10 @@ export interface JobsPanelJob {
 	readonly type: string;
 	readonly status: "running" | "completed" | "failed" | "cancelled";
 	readonly label: string;
+	/** What the job is for, in the model's words; rows and the detail lead with it over a command `label`. */
+	readonly intent?: string;
+	/** One line on what a command does and when it ends, from the cheap model; the detail shows it under the intent. */
+	readonly caption?: string;
 	readonly startTime: number;
 	readonly endTime?: number;
 	/** Registry id of the agent that owns the job. */
@@ -146,13 +150,14 @@ export class JobsSheet implements Component {
 		const detail = selected && this.#inspect(selected.id);
 		const now = Date.now();
 		// Elapsed nodes tick on their own; list values and the output pane redraw
-		// when a job starts, settles, leaves or moves in the tree, its process
-		// changes, its output grows, or (while one runs) once a second.
+		// when a job starts, settles, leaves or moves in the tree, gets its
+		// caption (it can land after the job settles), its process changes, its
+		// output grows, or (while one runs) once a second.
 		const key = [
 			rows
 				.map(
 					entry =>
-						`${jobTreeGuide(entry, theme)}${entry.kind === "job" ? `${entry.job.id}:${entry.job.status}` : entry.agent.id}`,
+						`${jobTreeGuide(entry, theme)}${entry.kind === "job" ? `${entry.job.id}:${entry.job.status}:${entry.job.caption ?? ""}` : entry.agent.id}`,
 				)
 				.join(","),
 			selected?.id,
@@ -200,15 +205,20 @@ export class JobsSheet implements Component {
 			const cursor = job === selected ? ">" : " ";
 			const age = formatDuration(jobAge(job, now));
 			const agent = entry.agent && entry.agent.id !== job.label ? `${entry.agent.id}: ` : "";
-			lines.push(
-				truncateToWidth(
-					`${cursor} ${guide}${job.status}  ${job.type} ${age}  ${agent}${collapseCommand(job.label)}`,
-					width,
-				),
-			);
+			// The intent is model-written: strip terminal controls and flatten it to one row like the command.
+			const title = shortenEmbeddedPaths(collapseCommand(sanitizeText(job.intent ?? job.label)));
+			lines.push(truncateToWidth(`${cursor} ${guide}${job.status}  ${job.type} ${age}  ${agent}${title}`, width));
 		}
 		const detail = selected && this.#inspect(selected.id);
 		if (detail) {
+			if (selected.caption) {
+				for (const line of wrapTextWithAnsi(
+					shortenEmbeddedPaths(sanitizeText(selected.caption)),
+					Math.max(1, width - 3),
+				)) {
+					lines.push(`   ${theme.fg("muted", line)}`);
+				}
+			}
 			// Rows show the cut label; the selected job's command wraps here,
 			// bounded so a long script never pushes the facts and output off the sheet.
 			if (detail.command) {
@@ -227,7 +237,7 @@ export class JobsSheet implements Component {
 				detail.artifactId && `artifact://${detail.artifactId}`,
 			]);
 			if (facts.length > 0) lines.push(truncateToWidth(`   ${facts.join(" · ")}`, width));
-			if (detail.widget) {
+			if (detail.widget && widgetHasData(detail.widget)) {
 				for (const line of renderJobWidgetLines(detail.widget, Math.max(0, width - 3), theme)) {
 					lines.push(`   ${line}`);
 				}
@@ -331,6 +341,11 @@ function jobAge(job: JobsPanelJob, nowMs: number): number {
 	return Math.max(0, (job.endTime ?? nowMs) - job.startTime);
 }
 
+/** Whether a widget draws more than its title: one without data only repeats the job's heading. */
+function widgetHasData(widget: JobWidgetView): boolean {
+	return widget.blocks.length > 0 || widget.headline !== undefined || Boolean(widget.stage);
+}
+
 /**
  * The last `count` pieces of `text.trimEnd().split("\n")`, found by scanning
  * back from the end so a long running output is never split as a whole.
@@ -373,8 +388,9 @@ function describeJobList(rows: readonly JobTreeRow<JobsPanelJob>[], selected: Jo
 
 /**
  * One list row: the type icon tinted by status, the tree connector, the
- * subagent a task job runs, the one-line label (a process job's command in
- * mono, a task's work in prose) and how long it ran.
+ * subagent a task job runs, the one-line label (what the job is for when the
+ * model said, else a process job's command in mono or a task's work in prose)
+ * and how long it ran.
  */
 function describeJobItem(job: JobsPanelJob, agentName: string | undefined, guide: string, nowMs: number): NativeNode {
 	const status = STATUS_LABEL[job.status];
@@ -383,13 +399,17 @@ function describeJobItem(job: JobsPanelJob, agentName: string | undefined, guide
 		label: compact([
 			guide !== "" && span(guide, "mono dim"),
 			agentName !== undefined && agentName !== job.label && span(`${agentName} `, "strong"),
-			job.type === "task" ? span(job.label) : span(collapseCommand(job.label), "mono"),
+			job.intent
+				? span(job.intent)
+				: job.type === "task"
+					? span(job.label)
+					: span(collapseCommand(job.label), "mono"),
 		]),
 		value: [span(age, "mono")],
 		icon: TYPE_ICON[job.type] ?? "job",
 		tone: STATUS_TONE[job.status],
-		title: `${job.label}\n${status} · ${job.type} · ${job.id}`,
-		aria: `${job.label}, ${status.toLowerCase()}, ${age}`,
+		title: `${job.intent ? `${job.intent}\n` : ""}${job.caption ? `${job.caption}\n` : ""}${job.label}\n${status} · ${job.type} · ${job.id}`,
+		aria: `${job.intent ?? job.label}, ${status.toLowerCase()}, ${age}`,
 	});
 }
 
@@ -422,8 +442,9 @@ function describeEmpty(): NativeNode {
 
 /**
  * The selected job: a status line (pill, live elapsed, type · id, Cancel job
- * when `cancellable`), its task or full command, facts and the output pane (or
- * its empty state).
+ * when `cancellable`), what it is for, what its command does (the cheap
+ * model's caption), its full command, facts, its widget
+ * when it has data to draw and the output pane (or its empty state).
  */
 function describeDetail(
 	job: JobsPanelJob,
@@ -435,6 +456,7 @@ function describeDetail(
 	const exit = detail?.exitCode;
 	const age = Math.round(jobAge(job, nowMs));
 	const command = detail?.command ?? (job.type === "task" ? undefined : job.label);
+	const title = job.intent ?? (command ? undefined : job.label);
 	const pids = detail?.pids ?? [];
 	const facts = compact([
 		job.agentId ? { k: "Agent", v: [span(job.agentId, "mono")] } : undefined,
@@ -464,11 +486,15 @@ function describeDetail(
 			]),
 			{ role: "omp.jobs.status", gap: "sm", align: "center" },
 		),
+		title ? text(title, { role: "omp.jobs.title", wrap: "word" }) : undefined,
+		job.caption ? text([span(job.caption, "muted")], { role: "omp.jobs.caption", wrap: "word" }) : undefined,
 		command
 			? code(command, { lang: "bash", wrap: true, preview: { lines: 4 }, role: "omp.jobs.command" })
-			: text(job.label, { role: "omp.jobs.title", wrap: "word" }),
+			: undefined,
 		facts.length > 0 && node("kv", { items: facts, role: "omp.jobs.facts" }),
-		detail?.widget && node("col", { role: "omp.jobs.widget" }, [describeJobWidget(detail.widget)], "widget"),
+		detail?.widget &&
+			widgetHasData(detail.widget) &&
+			node("col", { role: "omp.jobs.widget" }, [describeJobWidget(detail.widget)], "widget"),
 		node(
 			"col",
 			{ role: "omp.jobs.out", gap: "sm" },

package/src/render/file-list.ts

@@ -6,6 +6,7 @@ import { node, span } from "../native/describe";
 import type { NativeNode } from "../native/node";
 import type { Theme } from "../theme/theme";
 import { fileLinkSpan } from "./hyperlink";
+import { formatStyledPath } from "./render-utils";
 import { renderTreeList } from "./tree-list";
 
 /** A file-list item with optional display metadata. */
@@ -69,15 +70,11 @@ export function renderFileList(options: FileListOptions, theme: Theme): string[]
 				const isDirectory = entry.isDirectory ?? entry.path.endsWith("/");
 				const displayPath = entry.path;
 				const lang = isDirectory ? undefined : getLanguageFromPath(displayPath);
-				const icon = !showIcons
-					? ""
-					: isDirectory
-						? theme.fg("accent", theme.icon.folder)
-						: theme.fg("muted", theme.getLangIcon(lang));
-				const labelColor = isDirectory ? "accent" : "toolOutput";
+				// Type icons stay muted beside the dim directory and colored file name.
+				const icon = !showIcons ? "" : theme.fg("muted", isDirectory ? theme.icon.folder : theme.getLangIcon(lang));
 				const meta = entry.meta ? ` ${theme.fg("dim", entry.meta)}` : "";
 				const iconPrefix = icon ? `${icon} ` : "";
-				const pathStr = theme.fg(labelColor, displayPath);
+				const pathStr = formatStyledPath(displayPath, theme);
 				const linkedPath = entry.absPath && hyperlinkFn ? hyperlinkFn(entry.absPath, pathStr) : pathStr;
 				return `${iconPrefix}${linkedPath}${meta}`;
 			},

package/src/render/render-utils.ts

@@ -13,7 +13,7 @@ import { expandWindowsLongPath, getWindowsShortPath } from "@oh-my-pi/pi-natives
 import { pluralize, sanitizeText } from "@oh-my-pi/pi-utils";
 import { formatKeyHint, type KeyId } from "../app-keybindings";
 import { getKeybindings } from "../keybindings";
-import type { Theme } from "../theme/theme";
+import type { Theme, ThemeColor } from "../theme/theme";
 import type { Component } from "../tui";
 import { replaceTabs, sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 import { Hasher } from "./utils";
@@ -435,6 +435,34 @@ export function formatEmptyMessage(message: string, theme: Theme): string {
 	return `${theme.styledSymbol("status.warning", "warning")} ${theme.fg("muted", message)}`;
 }
 
+/**
+ * Color of a file's name, or a whole URL, in tool bodies: it keeps paths apart
+ * from the tool titles above them (bronze in titanium).
+ */
+export const FILE_NAME_COLOR = "customMessageLabel" satisfies ThemeColor;
+
+/**
+ * Where a display path's final segment (file or folder name) starts, past its
+ * last `/` or `\` separator; a trailing-slash directory keeps its slash on the
+ * name. Shared by the terminal ({@link formatStyledPath}) and Tern file rows.
+ */
+export function pathNameStart(filePath: string): number {
+	let end = filePath.length;
+	while (end > 0 && (filePath[end - 1] === "/" || filePath[end - 1] === "\\")) end--;
+	return end === 0 ? 0 : Math.max(filePath.lastIndexOf("/", end - 1), filePath.lastIndexOf("\\", end - 1)) + 1;
+}
+
+/**
+ * A file path in a tool body: the directory (with its trailing separator) dim,
+ * the final segment in {@link FILE_NAME_COLOR}. Tool headers keep paths in
+ * their plain subject color instead.
+ */
+export function formatStyledPath(filePath: string, theme: Theme): string {
+	const cut = pathNameStart(filePath);
+	const name = theme.fg(FILE_NAME_COLOR, filePath.slice(cut));
+	return cut > 0 ? `${theme.fg("dim", filePath.slice(0, cut))}${name}` : name;
+}
+
 // =============================================================================
 // Code Frame Formatting
 // =============================================================================
@@ -600,7 +628,7 @@ export function formatDiagnostics(
 		const fileBranch = isLastFileNode ? theme.tree.last : theme.tree.branch;
 
 		const fileIcon = theme.fg("muted", getLangIcon(filePath));
-		output += `\n ${theme.fg("dim", fileBranch)} ${fileIcon} ${theme.fg("accent", filePath)}`;
+		output += `\n ${theme.fg("dim", fileBranch)} ${fileIcon} ${formatStyledPath(filePath, theme)}`;
 
 		for (let di = 0; di < diagnostics.length && diagsShown < maxDiags; di++) {
 			const d = diagnostics[di];
@@ -624,7 +652,7 @@ export function formatDiagnostics(
 					: d.severity === "warning"
 						? theme.styledSymbol("status.warning", "warning")
 						: theme.styledSymbol("status.info", "muted");
-			const location = theme.fg("dim", `:${d.line}:${d.col}`);
+			const location = theme.fg("muted", `:${d.line}:${d.col}`);
 			const codeTag = d.code ? theme.fg("dim", ` (${d.code})`) : "";
 			const msgColor = d.severity === "error" ? "error" : d.severity === "warning" ? "warning" : "toolOutput";
 

package/src/terminal-capabilities.ts

@@ -67,6 +67,7 @@ export type TerminalId =
 	| "rio"
 	| "tern"
 	| "monstar"
+	| "rex"
 	| "base"
 	| "trueColor";
 
@@ -626,6 +627,8 @@ const KNOWN_TERMINALS = Object.freeze({
 	// OSC 99, and OSC 66 text sizing are outside rio's supported set and keep
 	// the conservative defaults.
 	rio: new TerminalInfo("rio", ImageProtocol.Kitty, true, true),
+	// Rex (TERM_PROGRAM=rex / TERM=xterm-rex): only Kitty graphics is confirmed.
+	rex: new TerminalInfo("rex", ImageProtocol.Kitty, true, false),
 	// Tern (Stencil's terminal, `stencil-term`) sets TERM_PROGRAM=tern and
 	// implements Kitty graphics, OSC 8 and OSC 9/99 notifications. Whether omp
 	// renders natively (Tern Surface Protocol) is decided by the `hello`
@@ -666,6 +669,7 @@ export function detectTerminalId(env: NodeJS.ProcessEnv = Bun.env): TerminalId {
 		if (caseEq(program, "rio")) return "rio";
 		if (caseEq(program, "tern")) return "tern";
 		if (caseEq(program, "monstar")) return "monstar";
+		if (caseEq(program, "rex")) return "rex";
 		return null;
 	}
 
@@ -717,6 +721,7 @@ export function detectTerminalId(env: NodeJS.ProcessEnv = Bun.env): TerminalId {
 
 	if (TERM?.toLowerCase().includes("ghostty")) return "ghostty";
 	if (TERM && caseEq(TERM, "monstar")) return "monstar";
+	if (TERM && caseEq(TERM, "xterm-rex")) return "rex";
 
 	if (COLORTERM) {
 		if (caseEq(COLORTERM, "truecolor") || caseEq(COLORTERM, "24bit")) return "trueColor";

package/src/tmux.ts

@@ -21,6 +21,7 @@ const CLIENT_TERMINAL_TIMEOUT_MS = 2_000;
 const CLIENT_TERMNAME_PROGRAMS: ReadonlyArray<readonly [RegExp, string]> = [
 	[/^xterm-kitty$/u, "kitty"],
 	[/^xterm-ghostty$/u, "ghostty"],
+	[/^xterm-rex$/u, "rex"],
 	[/^wezterm$/u, "wezterm"],
 ];
 let cachedClientTerminalNames: readonly string[] | undefined;

package/src/tools/ast-edit.ts

@@ -1,19 +1,24 @@
-import { isRecord, sanitizeText } from "@oh-my-pi/pi-utils";
 import type { Component } from "../tui";
 import { Text } from "../components/text";
-import { replaceTabs } from "../utils";
 import type { Theme } from "../theme/theme";
-import { Ellipsis, fileHyperlink, renderStatusLine, truncateToWidth } from "../render";
+import { Ellipsis, renderStatusLine, truncateToWidth } from "../render";
 import { framedToolCard } from "../render/tool-card";
 import {
 	appendParseErrorsBulletList,
 	formatCount,
 	formatErrorDetail,
-	formatMoreItems,
 	formatParseErrorsCountLabel,
 	PREVIEW_LIMITS,
 } from "../render/render-utils";
-import { classifyGroupedLines, groupLineIndicesByBlank } from "./grouped-file-output";
+import {
+	classifyGroupedLines,
+	createGroupedRowStyler,
+	fitGroupsToBudget,
+	groupedLinkTargets,
+	groupLineIndicesByBlank,
+	groupsByFile,
+	walkGroupedOutput,
+} from "./grouped-file-output";
 import type { OutputMeta } from "./output-meta";
 import type {
 	NativeToolHead,
@@ -59,34 +64,24 @@ interface AstEditRenderArgs {
 const COLLAPSED_CHANGE_LIMIT = PREVIEW_LIMITS.COLLAPSED_LINES * 2;
 
 /**
- * Flatten change groups (line indices, styled on demand) into frame body
- * lines. Groups are separated by a blank line and carry no tree guides — the
- * frame border is the container, so nested `├─ │` gutters would just be
- * noise. Collapsed mode always shows at least the first group, then fills up
- * to `budget` lines before summarizing the rest as `… N more changes`.
+ * Frame body lines for per-file change groups, styled on demand: files apart by
+ * a blank line and without tree guides (the frame border is the container), fit
+ * to `budget` with the rest summarized as `… N more files`.
  */
 function buildChangeBody(
 	groups: readonly (readonly number[])[],
 	styleLine: (index: number) => string,
-	expanded: boolean,
+	isFileRow: (index: number) => boolean,
 	budget: number,
 	theme: Theme,
 ): string[] {
+	const { shown, summary } = fitGroupsToBudget(groups, budget, { isUnit: isFileRow, unit: "file", gap: 1 });
 	const lines: string[] = [];
-	let shown = 0;
-	for (let i = 0; i < groups.length; i++) {
-		const group = groups[i]!;
-		const separator = shown > 0 ? 1 : 0;
-		const remainingAfter = groups.length - (i + 1);
-		const reserved = !expanded && remainingAfter > 0 ? 1 : 0;
-		// Always emit the first group; budget only gates subsequent ones.
-		if (!expanded && shown > 0 && lines.length + separator + group.length + reserved > budget) break;
-		if (separator) lines.push("");
+	for (const group of shown) {
+		if (lines.length > 0) lines.push("");
 		for (const index of group) lines.push(styleLine(index));
-		shown++;
 	}
-	const remaining = groups.length - shown;
-	if (!expanded && remaining > 0) lines.push(theme.fg("muted", formatMoreItems(remaining, "change")));
+	if (summary) lines.push(theme.fg("muted", summary));
 	return lines;
 }
 
@@ -98,9 +93,7 @@ function patternPreview(pat: string | undefined): string | undefined {
 	return collapsed || undefined;
 }
 
-const AST_EDIT_HEADER_RE = /^(#+)\s+(.*)$/;
 const AST_EDIT_CHANGE_LINE_RE = /^([+\- ])\s*(\d+)(?:│|[:|])(.*)$/;
-const AST_EDIT_HEADER_SUFFIX_RE = /\s+\([^)]*\)\s*$/;
 
 /** One file's proposed rewrite: its unified diff text and change counts. */
 interface AstEditFileDiff {
@@ -117,29 +110,15 @@ interface AstEditFileDiff {
  */
 function parseAstEditChanges(lines: readonly string[]): AstEditFileDiff[] {
 	const files: AstEditFileDiff[] = [];
-	const dirs: string[] = [];
 	let file: AstEditFileDiff | undefined;
-	const flush = () => {
-		if (file && file.lines.length > 0) files.push(file);
-		file = undefined;
-	};
-	for (const line of lines) {
-		const header = AST_EDIT_HEADER_RE.exec(line);
-		if (header) {
-			flush();
-			const depth = header[1]!.length;
-			const rest = header[2]!.trimEnd().replace(AST_EDIT_HEADER_SUFFIX_RE, "");
-			dirs.length = depth - 1;
-			if (rest.endsWith("/")) {
-				dirs[depth - 1] = rest.slice(0, -1);
-				continue;
-			}
-			const prefix = dirs.filter(Boolean).join("/");
-			file = { path: prefix ? `${prefix}/${rest}` : rest, lines: [], added: 0, removed: 0 };
+	for (const event of walkGroupedOutput(lines)) {
+		if (event.kind !== "line") {
+			if (file && file.lines.length > 0) files.push(file);
+			file = event.kind === "file" ? { path: event.path, lines: [], added: 0, removed: 0 } : undefined;
 			continue;
 		}
-		if (!file || line.trim().length === 0) continue;
-		const change = AST_EDIT_CHANGE_LINE_RE.exec(line);
+		if (!file) continue;
+		const change = AST_EDIT_CHANGE_LINE_RE.exec(event.text);
 		if (!change) continue;
 		const lineNumber = Number.parseInt(change[2]!, 10);
 		if (file.lastOld === undefined || lineNumber > file.lastOld + 1 || lineNumber < file.lastOld) {
@@ -150,7 +129,7 @@ function parseAstEditChanges(lines: readonly string[]): AstEditFileDiff[] {
 		else if (change[1] === "-") file.removed++;
 		file.lines.push(`${change[1]}${change[3]}`);
 	}
-	flush();
+	if (file && file.lines.length > 0) files.push(file);
 	return files;
 }
 
@@ -248,53 +227,23 @@ export const astEditToolRenderer = {
 
 		const textContent = result.details?.displayContent ?? result.content?.find(c => c.type === "text")?.text ?? "";
 		const allLines = textContent.split("\n");
-		// Resolve hyperlinks over the whole output so nested directory headers
-		// reconstruct across the blank-line groups the tree list collapses by.
+		// Classify the whole output so nested directory headers resolve across blank-line groups.
 		const contexts = classifyGroupedLines(allLines, details?.cwd ?? details?.searchPath, details?.searchPath);
-		// The display lines are sanitized; reconstruct link targets from the original
-		// grouped headers only when they still align with those display lines.
-		const rawDetails = options.renderContext?.rawDetails;
-		const rawContent =
-			isRecord(rawDetails) && typeof rawDetails.displayContent === "string" ? rawDetails.displayContent : undefined;
-		const rawLines = rawContent?.split("\n");
-		const rawCwd = isRecord(rawDetails) && typeof rawDetails.cwd === "string" ? rawDetails.cwd : undefined;
-		const rawSearchPath =
-			isRecord(rawDetails) && typeof rawDetails.searchPath === "string" ? rawDetails.searchPath : undefined;
-		const rawContexts =
-			rawContent !== undefined && rawLines?.length === allLines.length && sanitizeText(rawContent) === textContent
-				? classifyGroupedLines(rawLines, rawCwd ?? rawSearchPath, rawSearchPath)
-				: undefined;
-		// Style lazily: collapsed bodies show only the first groups.
-		const styledLines: (string | undefined)[] = Array.from({ length: allLines.length }, () => undefined);
-		const styleLine = (index: number): string => {
-			const cached = styledLines[index];
-			if (cached !== undefined) return cached;
-			const ctx = contexts[index]!;
-			// Swap the inner code-frame gutter `│` for a space so it does not nest a
-			// second vertical bar inside the frame border.
-			const display = replaceTabs(allLines[index]!.replace("│", " "));
-			let styled: string;
-			const linkPath =
-				ctx.headerPath && rawContexts?.[index]?.kind === ctx.kind && rawContexts[index]?.depth === ctx.depth
-					? (rawContexts[index]?.headerPath ?? ctx.headerPath)
-					: ctx.headerPath;
-			if (ctx.kind === "dir") {
-				const accent = uiTheme.fg("accent", display);
-				styled = linkPath ? fileHyperlink(linkPath, accent) : accent;
-			} else if (ctx.kind === "file") {
-				const tinted = uiTheme.fg(ctx.depth === 1 ? "accent" : "dim", display);
-				styled = linkPath ? fileHyperlink(linkPath, tinted) : tinted;
-			} else if (display.startsWith("+")) {
-				styled = uiTheme.fg("toolDiffAdded", display);
-			} else if (display.startsWith("-")) {
-				styled = uiTheme.fg("toolDiffRemoved", display);
-			} else {
-				styled = uiTheme.fg("toolOutput", display);
-			}
-			styledLines[index] = styled;
-			return styled;
-		};
-		const changeGroups = groupLineIndicesByBlank(allLines).filter(indices => {
+		const styleLine = createGroupedRowStyler(allLines, contexts, uiTheme, {
+			linkTarget: groupedLinkTargets(contexts, textContent, details, options.renderContext?.rawDetails),
+			styleBody: index => {
+				// Swap the code-frame gutter `│` for a space so it does not nest a
+				// second vertical bar inside the frame border.
+				const line = allLines[index]!.replace("│", " ");
+				const color = line.startsWith("+")
+					? "toolDiffAdded"
+					: line.startsWith("-")
+						? "toolDiffRemoved"
+						: "toolOutput";
+				return uiTheme.fg(color, line);
+			},
+		});
+		const changeGroups = groupsByFile(groupLineIndicesByBlank(allLines), contexts).filter(indices => {
 			const first = allLines[indices[0]!]!;
 			return !first.startsWith("Safety cap reached") && !first.startsWith("Parse issues:");
 		});
@@ -321,7 +270,13 @@ export const astEditToolRenderer = {
 			({ contentWidth }) => {
 				const expanded = Boolean(options.expanded);
 				if (bodyMemo === undefined || bodyMemo.expanded !== expanded || bodyMemo.width !== contentWidth) {
-					const changeLines = buildChangeBody(changeGroups, styleLine, expanded, COLLAPSED_CHANGE_LIMIT, uiTheme);
+					const changeLines = buildChangeBody(
+						changeGroups,
+						styleLine,
+						index => contexts[index]!.kind === "file",
+						expanded ? Number.POSITIVE_INFINITY : COLLAPSED_CHANGE_LIMIT,
+						uiTheme,
+					);
 					const lines = [...changeLines, ...extraLines].map(l => truncateToWidth(l, contentWidth, Ellipsis.Omit));
 					while (lines.length > 0 && lines[0].trim() === "") lines.shift();
 					bodyMemo = { expanded, width: contentWidth, lines };

package/src/tools/ast-grep.ts

@@ -1,8 +1,7 @@
-import { isRecord, sanitizeText } from "@oh-my-pi/pi-utils";
 import type { Component } from "../tui";
 import { Text } from "../components/text";
 import type { Theme } from "../theme/theme";
-import { fileHyperlink, renderStatusLine, renderTreeList } from "../render";
+import { renderStatusLine, renderTreeList } from "../render";
 import {
 	appendParseErrorsBulletList,
 	createCachedComponent,
@@ -17,8 +16,13 @@ import {
 import {
 	classifyGroupedLines,
 	createCodeFrameStyler,
+	createGroupedRowStyler,
 	describeGroupedOutput,
+	fitGroupsToBudget,
+	groupedLinkTargets,
 	groupLineIndicesByBlank,
+	groupsByFile,
+	isMatchRow,
 } from "./grouped-file-output";
 import { code, compact, node, span } from "../native/describe";
 import type { NativeChild } from "../native/node";
@@ -128,64 +132,21 @@ export const astGrepToolRenderer = {
 
 		const textContent = result.details?.displayContent ?? result.content?.find(c => c.type === "text")?.text ?? "";
 		const allLines = textContent.split("\n");
-		// Resolve hyperlinks over the whole output so nested directory headers
-		// reconstruct across the blank-line groups the tree list collapses by.
+		// Classify the whole output so nested directory headers resolve across blank-line groups.
 		const contexts = classifyGroupedLines(allLines, details?.cwd ?? details?.searchPath, details?.searchPath);
 		const styleCodeFrame = createCodeFrameStyler(allLines, contexts, "toolOutput", uiTheme, args?.lang);
-		// The displayed lines are sanitized, but OSC 8 destinations must retain the
-		// original path bytes. Only substitute targets for headers already linked
-		// by the sanitized output; never let raw text create additional links.
-		const rawDetails = options.renderContext?.rawDetails;
-		const rawContent =
-			isRecord(rawDetails) && typeof rawDetails.displayContent === "string" ? rawDetails.displayContent : undefined;
-		const rawLines = rawContent?.split("\n");
-		const rawCwd = isRecord(rawDetails) && typeof rawDetails.cwd === "string" ? rawDetails.cwd : undefined;
-		const rawSearchPath =
-			isRecord(rawDetails) && typeof rawDetails.searchPath === "string" ? rawDetails.searchPath : undefined;
-		const rawContexts =
-			rawContent !== undefined && rawLines?.length === allLines.length && sanitizeText(rawContent) === textContent
-				? classifyGroupedLines(rawLines, rawCwd ?? rawSearchPath, rawSearchPath)
-				: undefined;
-		// Style lazily: the collapsed tree list only renders the first few groups,
-		// so a large result never styles/hyperlinks rows nobody sees.
-		const styledLines: (string | undefined)[] = Array.from({ length: allLines.length }, () => undefined);
-		const styleLine = (index: number): string => {
-			const cached = styledLines[index];
-			if (cached !== undefined) return cached;
-			const line = allLines[index]!;
-			const ctx = contexts[index]!;
-			const rawContext = rawContexts?.[index];
-			const target =
-				ctx.headerPath && rawContext?.kind === ctx.kind && rawContext.depth === ctx.depth
-					? (rawContext.headerPath ?? ctx.headerPath)
-					: ctx.headerPath;
-			let styled: string;
-			if (ctx.kind === "dir") {
-				const accent = uiTheme.fg("accent", line);
-				styled = target ? fileHyperlink(target, accent) : accent;
-			} else if (ctx.kind === "file") {
-				const tinted = uiTheme.fg(ctx.depth === 1 ? "accent" : "dim", line);
-				styled = target ? fileHyperlink(target, tinted) : tinted;
-			} else {
-				styled = styleCodeFrame(index) ?? uiTheme.fg(line.startsWith("  meta:") ? "dim" : "toolOutput", line);
-			}
-			styledLines[index] = styled;
-			return styled;
-		};
-		const matchGroups = groupLineIndicesByBlank(allLines).filter(indices => {
+		const styleLine = createGroupedRowStyler(allLines, contexts, uiTheme, {
+			linkTarget: groupedLinkTargets(contexts, textContent, details, options.renderContext?.rawDetails),
+			styleBody: index => {
+				const line = allLines[index]!;
+				return styleCodeFrame(index) ?? uiTheme.fg(line.startsWith("  meta:") ? "dim" : "toolOutput", line);
+			},
+			linkLines: true,
+		});
+		const matchGroups = groupsByFile(groupLineIndicesByBlank(allLines), contexts).filter(indices => {
 			const first = allLines[indices[0]!]!;
 			return !first.startsWith("Result limit reached") && !first.startsWith("Parse issues:");
 		});
-		// Line offset at which each group starts. A collapsed tree list stops at the
-		// first group that overflows its line budget, so groups starting at or past
-		// the budget are never shown — hand it same-length placeholders instead of
-		// styling them (renderTreeList only needs their line counts).
-		const groupStarts: number[] = [];
-		let groupStart = 0;
-		for (const group of matchGroups) {
-			groupStarts.push(groupStart);
-			groupStart += group.length;
-		}
 
 		const extraLines: string[] = [];
 		if (limitReached) {
@@ -200,18 +161,13 @@ export const astGrepToolRenderer = {
 		return createCachedComponent(
 			() => options.expanded,
 			width => {
+				const { shown, summary } = fitGroupsToBudget(
+					matchGroups,
+					options.expanded ? Number.POSITIVE_INFINITY : COLLAPSED_MATCH_LIMIT,
+					{ isUnit: index => isMatchRow(allLines[index]!), unit: "match", total: matchCount },
+				);
 				const matchLines = renderTreeList(
-					{
-						items: matchGroups,
-						expanded: options.expanded,
-						maxCollapsed: matchGroups.length,
-						maxCollapsedLines: COLLAPSED_MATCH_LIMIT,
-						itemType: "match",
-						renderItem: (group, context) =>
-							!options.expanded && groupStarts[context.index]! >= COLLAPSED_MATCH_LIMIT
-								? Array.from({ length: group.length }, () => "")
-								: group.map(styleLine),
-					},
+					{ items: shown, trailingSummary: summary, renderItem: group => group.map(styleLine) },
 					uiTheme,
 				);
 				return fitHeaderedRows(header, [...matchLines, ...extraLines], width);