pi-compact-tools 0.7.7 → 0.8.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Dong Hyeong Lee
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Dong Hyeong Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -20,9 +20,20 @@ The working label above the prompt uses the Thinking summary color with a soft w
 
 ![Spinner and elapsed-time display](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/spinner-duration-optimized.gif)
 
-### Bounded result previews
+### Code-aware results
 
-Completed `edit` rows show only the lines actually removed (`-`) or added (`+`), without unchanged context, hunk metadata, or success prose. The per-tool `auto_compact` setting chooses between hidden results and a bounded preview; click or `Ctrl+O` uses Pi's normal expansion flow to reveal all changed lines.
+Completed `edit` rows render a syntax-highlighted diff: a line-number and `+`/`-` gutter beside the code, tinted rows for additions and deletions, and `⋮` where context is skipped. Collapsed rows keep one line of context around each change so the edit itself stays visible; expanding with a click or `Ctrl+O` restores the full context the patch carries.
+
+```text
+⦁ edit src/load.ts
+ │ 3   export async function load(path: string): Promise<string> {
+ │ 4 -    const raw = await readFile(path, "utf8");
+ │ 4 +    const raw = await readFile(path, "utf-8");
+ │ 5      return raw.trim();
+ └─ Done in 0.012s (2 lines)
+```
+
+`read` and `write` results use the same numbered, syntax-highlighted layout without the diff signs. `read` line numbers start at the requested `offset`, and Pi's continuation notice (`[Showing lines …]`) is shown as a dim note below the code. Markdown files keep their exact source but style headings, lists, quotes, links, emphasis, and inline code, while fenced blocks are highlighted in their declared language. Files without a recognized language keep the plain output color instead of a guessed highlight.
 
 ![Edit diff](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/edit-diff.gif)
 
@@ -30,13 +41,15 @@ Completed `edit` rows show only the lines actually removed (`-`) or added (`+`),
 
 - Compact rendering for `read`, `write`, `edit`, `bash`, `powershell`, `grep`, `find`, and `ls`
 - One continuously glowing working label above the input prompt across thinking and tool execution
-- Semantic built-in progress labels and automatically cleaned custom/MCP tool names without exposing invocation arguments
+- Semantic built-in progress labels and automatically cleaned custom/MCP tool names; collapsed text-search rows include the searched pattern
 - Four-step `Ctrl+T` thinking cycle when provider detail is available: summary, detail, summary, then hidden
 - Millisecond-precision duration and completed output line counts with neutral status text
 - Per-tool hidden or persistent bounded-preview collapsed state with `auto_compact: true` or `false`
-- Primary invocation targets such as paths and patterns stay visible; collapsed shell calls show concise intent summaries
+- Primary invocation targets such as paths and patterns stay visible, including common collapsed shell file operations
 - Click and `Ctrl+O` follow Pi's built-in expansion state while preview rows collapse back to their preview
-- Edit patches display only removed (`-`) and added (`+`) lines, omitting unchanged context
+- Edit results render as syntax-highlighted diffs with a line-number gutter, tinted change rows, and `⋮` context breaks
+- `read` and `write` contents use the same numbered, syntax-highlighted layout, with `read` line numbers following `offset`
+- Markdown files keep their exact source but style headings, lists, quotes, links, and inline code, and highlight fenced code blocks in their declared language
 - Configurable `previewLines` prevents large diffs, HTML, and shell output from flooding the transcript
 - Width-cached expanded results, edit-diff processing, and unchanged result reuse during status animation
 - Dark `│` and `└─` visual grouping
@@ -103,7 +116,7 @@ Every tool call title uses `⦁`. Pending calls use dark gray; active calls smoo
 - `false` starts with at most `previewLines` rendered rows visible.
 - Clicking or pressing `Ctrl+O` expands the complete result through Pi's built-in expansion state.
 
-`previewLines` accepts `1`–`100` and defaults to `10`. It limits the collapsed preview; the complete result remains available. Unspecified entries inherit the previous configuration layer. By default, `read`, `write`, and `bash` start hidden, while `edit` starts with a short changed-lines preview.
+`previewLines` accepts `1`–`100` and defaults to `10`. It limits the collapsed preview; the complete result remains available. Unspecified entries inherit the previous configuration layer. By default, `read`, `write`, and `bash` start hidden, while `edit` starts with a short diff preview centered on the changed lines.
 
 To enable all Unix-compatible tools:
 
@@ -125,7 +138,7 @@ one-line summary → summary + │-indented detail → one-line summary → Thin
 
 Standalone bold lines and Markdown headings split one provider thinking run into logical sections. Each section gets its own summary and optional `│`-indented detail. Summary-only views stay uncluttered with no control hint; the control row appears only while provider-supplied detail is visible. When no thinking detail exists, `Ctrl+T` falls back to Pi's normal visible/hidden toggle instead of showing a duplicate detail phase. While thinking streams, a slightly faster highlight sweeps from the Thinking summary color to white across Pi's working label at a steady interval rather than depending on token updates. The transcript summary remains visually stable. The transformation is display-only; complete thinking remains unchanged in the session and model context.
 
-Primary file and search targets stay visible. Collapsed `bash` and `powershell` rows describe intent—such as `Run tests`, `Check repository status`, or `Search text`—without printing arguments; expanding the row reveals the exact command. After every supported tool completes, the status reports the expanded result size as `Done in …s (N lines)` instead of repeating options such as context and limit. Counts use the returned text for reads, searches, listings, and shell commands, written content for `write`, and only the displayed `-`/`+` lines for `edit`. The count is computed once after completion and cached with the row, so streaming and repeated expansion do not add ongoing work. Large payloads represented as results follow the result toggle.
+Primary file and search targets stay visible. Collapsed `bash` and `powershell` rows describe intent—such as `Run tests` or `Check repository status`. Text searches retain their primary pattern (for example, `Search text "TODO|FIXME"`), and common file commands retain their operands (for example, `Run rm "build"` or `Find files "*.test.ts" in "src"`). Expanding the row reveals the exact command. After every supported tool completes, the status reports the expanded result size as `Done in …s (N lines)` instead of repeating options such as context and limit. Counts use the returned text for reads, searches, listings, and shell commands, written content for `write`, and only the changed `-`/`+` lines for `edit`. The count is computed once after completion and cached with the row, so streaming and repeated expansion do not add ongoing work. Large payloads represented as results follow the result toggle.
 
 A mouse click toggles one row using Pi's native result state. `Ctrl+O` remains owned by Pi and expands or collapses all tool rows consistently, including tools not rendered by this extension. A row with `auto_compact: false` cycles predictably between its bounded preview and the complete result, so repeated clicks never remove the row and fall through to a neighboring Thinking block. The extension does not intercept the global keybinding.
 
@@ -134,6 +147,8 @@ A mouse click toggles one row using Pi's native result state. `Ctrl+O` remains o
 - Pi `0.85.1+` and Node.js `22.19.0+` are recommended.
 - The working indicator and mouse interaction are provided by Pi's TUI; `Ctrl+O` also works in regular mode.
 - Duration covers the full rendered tool-call lifecycle, including streamed `write` and `edit` arguments.
+- Syntax highlighting is skipped, keeping line numbers, for content over 512 KB, 10,000 lines, or a single 4 KB line. Pi already truncates `read` output to 2,000 lines or 50 KB.
+- Highlighting runs per diff hunk or `read` range, so a hunk or `offset` that starts inside a block comment or Markdown code fence may color its first lines as surrounding text.
 - Selected tools override definitions with the same names so their compact renderers are restored reliably after `/reload`; other extensions overriding those tools may conflict by load order.
 
 ## Development

package/extensions/compact-tools-color.ts

@@ -63,3 +63,27 @@ export function colorizeRgb(theme: Theme, color: Rgb, text: string): string {
 	}
 	return `\x1b[38;2;${color.r};${color.g};${color.b}m${text}\x1b[39m`;
 }
+
+function isDarkTheme(theme: Theme): boolean {
+	const text = themeColorRgb(theme, "text");
+	if (!text) return true;
+	return text.r * 0.299 + text.g * 0.587 + text.b * 0.114 > 128;
+}
+
+/**
+ * Diff rows need a tint that reads on the terminal background without hijacking `toolSuccessBg`
+ * and `toolErrorBg`, which Pi paints across the whole tool row.
+ */
+export function diffTintRgb(theme: Theme, color: ThemeForeground, amount = 0.16): Rgb | undefined {
+	const rgb = themeColorRgb(theme, color);
+	if (!rgb) return undefined;
+	const base: Rgb = isDarkTheme(theme) ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 };
+	return interpolateRgb(base, rgb, amount);
+}
+
+export function fillRgb(theme: Theme, color: Rgb, text: string): string {
+	if (typeof theme.getColorMode === "function" && theme.getColorMode() === "256color") {
+		return `\x1b[48;5;${rgbToAnsi256(color)}m${text}\x1b[49m`;
+	}
+	return `\x1b[48;2;${color.r};${color.g};${color.b}m${text}\x1b[49m`;
+}

package/extensions/compact-tools-invocation.ts

@@ -77,18 +77,192 @@ function shellSegments(command: string): string[] {
 	return segments;
 }
 
-function unquote(value: string): string {
-	return value.replace(/^["']|["']$/gu, "");
+function shellWords(command: string, powershell = false): string[] {
+	const words: string[] = [];
+	let current = "";
+	let quote: "'" | '"' | undefined;
+	const input = command.trim();
+	for (let index = 0; index < input.length; index++) {
+		const character = input[index]!;
+		if (powershell && character === "`" && quote !== "'") {
+			const next = input[index + 1];
+			if (next !== undefined) {
+				current += next;
+				index++;
+			}
+			continue;
+		}
+		if (!powershell && character === "\\" && quote !== "'") {
+			const next = input[index + 1];
+			if (next === undefined) {
+				current += "\\";
+				continue;
+			}
+			// In double quotes, Bash preserves backslashes before ordinary characters.
+			if (quote === '"' && !['$', '`', '"', "\\", "\n"].includes(next)) {
+				current += "\\";
+				continue;
+			}
+			current += next;
+			index++;
+			continue;
+		}
+		if (quote) {
+			if (character === quote) quote = undefined;
+			else current += character;
+			continue;
+		}
+		if (character === "'" || character === '"') {
+			quote = character;
+			continue;
+		}
+		if (/\s/u.test(character)) {
+			if (current) words.push(current);
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	if (current) words.push(current);
+	return words;
+}
+
+const SEARCH_OPTIONS_WITH_VALUES = new Set([
+	"-a", "--after-context", "-b", "--before-context", "-c", "--context", "--context-separator",
+	"-d", "--max-depth", "--dfa-size-limit", "-f", "--file", "-g", "--glob", "--iglob",
+	"-m", "--max-count", "--max-columns", "--path-separator", "--pre", "--pre-glob",
+	"--regex-size-limit", "--replace", "--sort", "--sortr", "-t", "--type", "--type-not",
+	"--encoding", "--engine", "--field-context-separator", "--field-match-separator", "--hostname-bin",
+	"--binary-files", "--exclude", "--exclude-from", "--exclude-dir", "--include", "--label",
+]);
+
+function searchPattern(executable: string, words: string[]): string | undefined {
+	const args = words.slice(1);
+	for (let index = 0; index < args.length; index++) {
+		const argument = args[index] ?? "";
+		const lower = argument.toLowerCase();
+		if (executable === "select-string") {
+			if (lower === "-pattern") return args[index + 1];
+			if (lower.startsWith("-pattern:")) return argument.slice(argument.indexOf(":") + 1);
+			if (!argument.startsWith("-")) return argument;
+			continue;
+		}
+		if (lower === "-e" || lower === "--regexp") return args[index + 1];
+		if (lower.startsWith("--regexp=")) return argument.slice(argument.indexOf("=") + 1);
+		if (/^-e.+/u.test(argument)) return argument.slice(2);
+		if (argument === "--") return args[index + 1];
+		const optionName = lower.split("=", 1)[0] ?? lower;
+		if (SEARCH_OPTIONS_WITH_VALUES.has(optionName) && !argument.includes("=")) {
+			index++;
+			continue;
+		}
+		if (argument.startsWith("-")) continue;
+		return argument;
+	}
+	return undefined;
+}
+
+function summarizeTextSearch(executable: string, words: string[]): string {
+	const pattern = searchPattern(executable, words);
+	return pattern === undefined ? "Search text" : `Search text ${JSON.stringify(pattern)}`;
+}
+
+function formatTargets(targets: string[]): string {
+	const visible = targets.slice(0, 2).map((target) => JSON.stringify(target)).join(", ");
+	const remaining = targets.length - 2;
+	return remaining > 0 ? `${visible} + ${remaining} more` : visible;
+}
+
+function plainOperands(words: string[]): string[] {
+	const separator = words.indexOf("--");
+	if (separator >= 0) return words.slice(separator + 1);
+	return words.slice(1).filter((word) => !word.startsWith("-"));
 }
 
-/** A calm collapsed label that describes intent without exposing command arguments. */
+function optionValue(words: string[], names: string[]): string | undefined {
+	for (let index = 1; index < words.length; index++) {
+		const word = words[index] ?? "";
+		const lower = word.toLowerCase();
+		if (names.includes(lower)) return words[index + 1];
+		const prefix = names.find((name) => lower.startsWith(`${name}=`) || lower.startsWith(`${name}:`));
+		if (prefix) return word.slice(prefix.length + 1);
+	}
+	return undefined;
+}
+
+const FD_OPTIONS_WITH_VALUES = new Set([
+	"-d", "--max-depth", "-e", "--extension", "-E", "--exclude", "-t", "--type",
+	"-x", "--exec", "-X", "--exec-batch", "-j", "--threads", "--base-directory",
+	"--changed-before", "--changed-within", "--format", "--glob", "--path-separator",
+	"--search-path", "--size", "--strip-cwd-prefix",
+].map((option) => option.toLowerCase()));
+
+function fdOperands(words: string[]): string[] {
+	const operands: string[] = [];
+	for (let index = 1; index < words.length; index++) {
+		const word = words[index] ?? "";
+		if (word === "--") return [...operands, ...words.slice(index + 1)];
+		const optionName = word.toLowerCase().split("=", 1)[0] ?? word.toLowerCase();
+		if (FD_OPTIONS_WITH_VALUES.has(optionName) && !word.includes("=")) {
+			index++;
+			continue;
+		}
+		if (!word.startsWith("-")) operands.push(word);
+	}
+	return operands;
+}
+
+function summarizeFileDiscovery(executable: string, words: string[]): string {
+	if (executable === "find") {
+		const paths: string[] = [];
+		for (let index = 1; index < words.length; index++) {
+			const word = words[index] ?? "";
+			if (word.startsWith("-") || word === "!" || word === "(") break;
+			paths.push(word);
+		}
+		const pattern = optionValue(words, ["-name", "-iname", "-path", "-ipath", "-regex"]);
+		const location = formatTargets(paths.length > 0 ? paths : ["."]);
+		return pattern ? `Find files ${JSON.stringify(pattern)} in ${location}` : `Find files in ${location}`;
+	}
+	if (executable === "fd") {
+		const operands = fdOperands(words);
+		const pattern = operands[0];
+		const locations = operands.slice(1);
+		if (!pattern) return "Find files";
+		return locations.length > 0
+			? `Find files ${JSON.stringify(pattern)} in ${formatTargets(locations)}`
+			: `Find files ${JSON.stringify(pattern)}`;
+	}
+	const explicitPath = optionValue(words, ["-path", "-literalpath"]);
+	const targets = explicitPath ? [explicitPath] : plainOperands(words);
+	return targets.length > 0 ? `List files ${formatTargets(targets)}` : "List files";
+}
+
+function summarizeFileOperation(executable: string, words: string[]): string | undefined {
+	const targets = plainOperands(words);
+	if (targets.length === 0) return undefined;
+	if (["rm", "del", "erase", "remove-item"].includes(executable)) return `Run ${executable} ${formatTargets(targets)}`;
+	if (["cat", "type", "get-content"].includes(executable)) return `Read file ${formatTargets(targets)}`;
+	if (["mkdir", "md", "new-item"].includes(executable)) return `Create ${formatTargets(targets)}`;
+	if (["rmdir", "rd"].includes(executable)) return `Remove directory ${formatTargets(targets)}`;
+	if (["touch"].includes(executable)) return `Touch ${formatTargets(targets)}`;
+	if (["cp", "copy", "copy-item"].includes(executable) && targets.length >= 2) {
+		return `Copy ${JSON.stringify(targets[0])} to ${JSON.stringify(targets.at(-1))}`;
+	}
+	if (["mv", "move", "move-item", "ren", "rename-item"].includes(executable) && targets.length >= 2) {
+		return `Move ${JSON.stringify(targets[0])} to ${JSON.stringify(targets.at(-1))}`;
+	}
+	return undefined;
+}
+
+/** A calm collapsed label that describes intent while retaining primary command targets. */
 export function summarizeShellCommand(name: string, command: string): string {
 	const allSegments = shellSegments(normalizeLineEndings(command));
 	const segments = allSegments.filter((segment) => !/^\s*(?:cd|pushd|popd)\b/iu.test(segment));
 	const primary = segments[0] ?? allSegments[0] ?? "";
 	if (!primary) return name === "powershell" ? "Prepare PowerShell command" : "Prepare shell command";
 
-	const words = primary.trim().split(/\s+/u).map(unquote);
+	const words = shellWords(primary, name === "powershell");
 	while (words.length > 0) {
 		if (/^[A-Za-z_][A-Za-z\d_]*=.*/u.test(words[0] ?? "")
 			|| ["command", "env", "sudo", "time"].includes((words[0] ?? "").toLowerCase())) {
@@ -117,11 +291,11 @@ export function summarizeShellCommand(name: string, command: string): string {
 	} else if (executable === "git" && ["fetch", "pull", "push", "clone"].includes(action)) {
 		summary = `${action[0]!.toUpperCase()}${action.slice(1)} repository`;
 	} else if (["rg", "grep", "select-string"].includes(executable)) {
-		summary = "Search text";
+		summary = summarizeTextSearch(executable, words);
 	} else if (["find", "fd", "get-childitem", "ls", "dir"].includes(executable)) {
-		summary = executable === "ls" || executable === "dir" || executable === "get-childitem" ? "List files" : "Find files";
-	} else if (["cat", "type", "get-content"].includes(executable)) {
-		summary = "Read file content";
+		summary = summarizeFileDiscovery(executable, words);
+	} else if (summarizeFileOperation(executable, words)) {
+		summary = summarizeFileOperation(executable, words)!;
 	} else if (["tsc", "mypy", "pyright"].includes(executable)) {
 		summary = "Check types";
 	} else if (["jest", "vitest", "pytest", "invoke-pester"].includes(executable)) {
@@ -147,6 +321,7 @@ export function getTextResult(result: AgentToolResult<unknown>): string {
 
 type ResultDetails = {
 	diff?: unknown;
+	patch?: unknown;
 	truncation?: {
 		firstLineExceedsLimit?: boolean;
 		outputLines?: number;
@@ -167,21 +342,42 @@ function countTextLines(text: string): number {
 	return count;
 }
 
+export function getEditDiff(result: AgentToolResult<unknown>): string {
+	const diff = (result.details as ResultDetails | undefined)?.diff;
+	return typeof diff === "string" ? normalizeLineEndings(diff).trimEnd() : "";
+}
+
+export function getEditPatch(result: AgentToolResult<unknown>): string {
+	const patch = (result.details as ResultDetails | undefined)?.patch;
+	return typeof patch === "string" ? normalizeLineEndings(patch).trimEnd() : "";
+}
+
 /** Keep only the lines that the edit actually removed or added; discard context and ellipses. */
 export function getEditChanges(result: AgentToolResult<unknown>): string {
-	const diff = (result.details as ResultDetails | undefined)?.diff;
-	if (typeof diff !== "string") return "";
-	return normalizeLineEndings(diff)
+	return getEditDiff(result)
 		.split("\n")
 		.filter((line) => line.startsWith("-") || line.startsWith("+"))
 		.join("\n")
 		.trimEnd();
 }
 
+const READ_FOOTER = /\n\n(\[(?:Showing lines |\d+ more lines in file\.)[^\n]*\])$/u;
+
+/** Separate a read's file contents from the continuation notice Pi appends to them. */
+export function splitReadFooter(text: string): { body: string; footer?: string } {
+	const match = text.match(READ_FOOTER);
+	return match ? { body: text.slice(0, match.index), footer: match[1] } : { body: text };
+}
+
+/** Whether a read result is plain file text that can be shown as numbered code. */
+export function isReadTextResult(result: AgentToolResult<unknown>): boolean {
+	const details = result.details as ResultDetails | undefined;
+	return !details?.truncation?.firstLineExceedsLimit
+		&& !result.content.some((item) => item.type === "image");
+}
+
 function stripGeneratedFooter(name: string, text: string, details: ResultDetails | undefined): string {
-	if (name === "read") {
-		return text.replace(/\n\n\[(?:Showing lines |\d+ more lines in file\.)[^\n]*\]$/u, "");
-	}
+	if (name === "read") return splitReadFooter(text).body;
 	const hasGeneratedFooter = details?.truncation?.outputLines !== undefined
 		|| details?.matchLimitReached !== undefined
 		|| details?.resultLimitReached !== undefined

package/extensions/compact-tools-layout.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "@earendil-works/pi-coding-agent";
+import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
 import {
 	Container,
@@ -7,7 +7,9 @@ import {
 	visibleWidth,
 	wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
+import { diffTintRgb, fillRgb } from "./compact-tools-color.ts";
 import { normalizeLineEndings } from "./compact-tools-core.ts";
+import { highlightMarkdown } from "./compact-tools-markdown.ts";
 import type { ToolArgs } from "./compact-tools-types.ts";
 
 class CachedComponent implements Component {
@@ -129,14 +131,252 @@ export function renderOutput(output: string, theme: Theme, isError: boolean): Co
 	return prefixedText(styled, theme.fg("border", " │ "));
 }
 
-/** Render an edit's changed lines without unchanged context, hunk metadata, or result prose. */
-export function renderEditChanges(changes: string, theme: Theme): Component | undefined {
-	const normalized = normalizeLineEndings(changes).trimEnd();
+export type CodeDiffLineKind = "context" | "add" | "remove" | "separator";
+
+export type CodeDiffLine = {
+	kind: CodeDiffLineKind;
+	lineNumber?: number;
+	content: string;
+	hunk: number;
+};
+
+export type CodeDiffOptions = {
+	/** Context lines kept around each change; omit to keep every context line the diff carries. */
+	contextLines?: number;
+};
+
+const DIFF_SEPARATOR = "\u22ee";
+
+function parseUnifiedPatch(patch: string): CodeDiffLine[] {
+	const result: CodeDiffLine[] = [];
+	let oldLine = 0;
+	let newLine = 0;
+	let hunk = -1;
+	for (const line of normalizeLineEndings(patch).split("\n")) {
+		const header = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/u);
+		if (header) {
+			if (hunk >= 0) result.push({ kind: "separator", content: DIFF_SEPARATOR, hunk });
+			hunk++;
+			oldLine = Number(header[1]);
+			newLine = Number(header[2]);
+			continue;
+		}
+		if (hunk < 0 || line.startsWith("\")) continue;
+		const prefix = line[0];
+		const content = line.slice(1).replace(/\t/gu, "   ");
+		if (prefix === "+") {
+			result.push({ kind: "add", lineNumber: newLine++, content, hunk });
+		} else if (prefix === "-") {
+			result.push({ kind: "remove", lineNumber: oldLine++, content, hunk });
+		} else if (prefix === " ") {
+			result.push({ kind: "context", lineNumber: newLine++, content, hunk });
+			oldLine++;
+		}
+	}
+	return result;
+}
+
+function parseDisplayDiff(diff: string): CodeDiffLine[] {
+	const result: CodeDiffLine[] = [];
+	let hunk = 0;
+	for (const line of normalizeLineEndings(diff).split("\n")) {
+		if (/^\s*\.\.\.\s*$/u.test(line)) {
+			result.push({ kind: "separator", content: DIFF_SEPARATOR, hunk: hunk++ });
+			continue;
+		}
+		const match = line.match(/^([ +\-])(\s*\d+)\s(.*)$/u);
+		if (!match) continue;
+		result.push({
+			kind: match[1] === "+" ? "add" : match[1] === "-" ? "remove" : "context",
+			lineNumber: Number(match[2]),
+			content: match[3]!.replace(/\t/gu, "   "),
+			hunk,
+		});
+	}
+	return result;
+}
+
+/** Parse a standard patch, falling back to Pi's display-oriented numbered diff. */
+export function parseCodeDiff(patch: string, displayDiff = ""): CodeDiffLine[] {
+	const parsedPatch = patch ? parseUnifiedPatch(patch) : [];
+	return parsedPatch.length > 0 ? parsedPatch : parseDisplayDiff(displayDiff);
+}
+
+/** Drop context that sits far from any change so a collapsed preview still reaches the edit. */
+export function trimDiffContext(lines: CodeDiffLine[], contextLines: number): CodeDiffLine[] {
+	const kept = lines.map((line) => line.kind !== "context");
+	lines.forEach((line, index) => {
+		if (line.kind !== "add" && line.kind !== "remove") return;
+		for (let offset = 1; offset <= contextLines; offset++) {
+			if (lines[index - offset]?.kind === "context") kept[index - offset] = true;
+			if (lines[index + offset]?.kind === "context") kept[index + offset] = true;
+		}
+	});
+	const result: CodeDiffLine[] = [];
+	lines.forEach((line, index) => {
+		if (kept[index]) {
+			result.push(line);
+			return;
+		}
+		if (result.length > 0 && result[result.length - 1]!.kind !== "separator") {
+			result.push({ kind: "separator", content: DIFF_SEPARATOR, hunk: line.hunk });
+		}
+	});
+	while (result.length > 0 && result[result.length - 1]!.kind === "separator") result.pop();
+	return result;
+}
+
+/** Past these sizes syntax highlighting costs more than it helps; mirrors Codex's diff renderer. */
+const HIGHLIGHT_MAX_CHARS = 512 * 1024;
+const HIGHLIGHT_MAX_LINES = 10_000;
+const HIGHLIGHT_MAX_LINE_CHARS = 4 * 1024;
+
+function canHighlight(lines: readonly CodeDiffLine[]): boolean {
+	if (lines.length > HIGHLIGHT_MAX_LINES) return false;
+	let total = 0;
+	for (const line of lines) {
+		if (line.content.length > HIGHLIGHT_MAX_LINE_CHARS) return false;
+		total += line.content.length + 1;
+		if (total > HIGHLIGHT_MAX_CHARS) return false;
+	}
+	return true;
+}
+
+/** Highlight each hunk as one block so multi-line strings and comments keep their state. */
+function highlightCodeLines(lines: CodeDiffLine[], language: string | undefined, theme: Theme): string[] {
+	if (!language || !canHighlight(lines)) {
+		return lines.map((line) => line.kind === "separator" ? line.content : theme.fg("toolOutput", line.content));
+	}
+	const rendered = new Array<string>(lines.length);
+	let index = 0;
+	while (index < lines.length) {
+		if (lines[index]!.kind === "separator") {
+			rendered[index] = lines[index]!.content;
+			index++;
+			continue;
+		}
+		let end = index;
+		while (end < lines.length && lines[end]!.kind !== "separator") end++;
+		const block = lines.slice(index, end);
+		const contents = block.map((line) => line.content);
+		const highlighted = language === "markdown"
+			? highlightMarkdown(contents, theme)
+			: highlightCode(contents.join("\n"), language);
+		block.forEach((line, offset) => {
+			rendered[index + offset] = highlighted[offset] ?? line.content;
+		});
+		index = end;
+	}
+	return rendered;
+}
+
+function hardSliceAnsi(text: string, width: number): string[] {
+	const safeWidth = Math.max(1, width);
+	const lineWidth = visibleWidth(text);
+	if (lineWidth === 0) return [""];
+	const slices: string[] = [];
+	for (let offset = 0; offset < lineWidth; offset += safeWidth) {
+		slices.push(sliceByColumn(text, offset, safeWidth, true));
+	}
+	return slices;
+}
+
+function codeGutter(
+	kind: CodeDiffLineKind,
+	lineNumber: number | undefined,
+	numberWidth: number,
+	signs: boolean,
+	theme: Theme,
+): string {
+	const number = (lineNumber === undefined ? "" : String(lineNumber)).padStart(numberWidth);
+	if (!signs) return theme.fg("toolDiffContext", `${number}  `);
+	const sign = kind === "add" ? "+" : kind === "remove" ? "-" : " ";
+	const color = kind === "add" ? "toolDiffAdded" : kind === "remove" ? "toolDiffRemoved" : "toolDiffContext";
+	return theme.fg(color, `${number} ${sign} `);
+}
+
+type CodeRowsOptions = {
+	/** Show the `+`/`-` sign column and tint changed rows. */
+	signs: boolean;
+	/** Dim note rendered below the code, such as a read truncation notice. */
+	footer?: string;
+};
+
+/** Render numbered, syntax-highlighted code rows shared by edit diffs and read/write file views. */
+function renderCodeRows(lines: CodeDiffLine[], path: string, theme: Theme, options: CodeRowsOptions): Component {
+	const highlighted = highlightCodeLines(lines, getLanguageFromPath(path), theme);
+	const numberWidth = Math.max(1, ...lines.map((line) => String(line.lineNumber ?? "").length));
+	const prefix = theme.fg("border", " \u2502 ");
+	const prefixWidth = visibleWidth(prefix);
+	const gutterWidth = numberWidth + (options.signs ? 3 : 2);
+	const addedTint = options.signs ? diffTintRgb(theme, "toolDiffAdded") : undefined;
+	const removedTint = options.signs ? diffTintRgb(theme, "toolDiffRemoved") : undefined;
+	return new CachedComponent((width) => {
+		const bodyWidth = Math.max(1, width - prefixWidth);
+		const codeWidth = Math.max(1, bodyWidth - gutterWidth);
+		const output: string[] = [];
+		lines.forEach((line, index) => {
+			if (line.kind === "separator") {
+				output.push(prefix + " ".repeat(numberWidth + 1) + theme.fg("toolDiffContext", line.content));
+				return;
+			}
+			const tint = line.kind === "add" ? addedTint : line.kind === "remove" ? removedTint : undefined;
+			for (const [chunkIndex, chunk] of hardSliceAnsi(highlighted[index] ?? line.content, codeWidth).entries()) {
+				const gutter = codeGutter(
+					line.kind,
+					chunkIndex === 0 ? line.lineNumber : undefined,
+					numberWidth,
+					options.signs,
+					theme,
+				);
+				const body = gutter + chunk;
+				if (!tint) {
+					output.push(prefix + body);
+					continue;
+				}
+				const padded = body + " ".repeat(Math.max(0, bodyWidth - visibleWidth(body)));
+				output.push(prefix + fillRgb(theme, tint, padded));
+			}
+		});
+		if (options.footer) {
+			for (const line of wrapTextWithAnsi(options.footer, bodyWidth)) output.push(prefix + theme.fg("dim", line));
+		}
+		return output;
+	});
+}
+
+/** Render an edit as a syntax-highlighted diff with a line-number gutter and tinted change rows. */
+export function renderCodeDiff(
+	patch: string,
+	displayDiff: string,
+	path: string,
+	theme: Theme,
+	options: CodeDiffOptions = {},
+): Component | undefined {
+	const diff = parseCodeDiff(patch, displayDiff);
+	const lines = options.contextLines === undefined ? diff : trimDiffContext(diff, options.contextLines);
+	if (lines.length === 0) return undefined;
+	return renderCodeRows(lines, path, theme, { signs: true });
+}
+
+export type CodeViewOptions = {
+	/** File line number of the first code line, e.g. a read's `offset`. */
+	startLine?: number;
+	footer?: string;
+};
+
+/** Render file contents with line numbers and syntax highlighting, matching the edit diff layout. */
+export function renderCodeView(code: string, path: string, theme: Theme, options: CodeViewOptions = {}): Component | undefined {
+	const normalized = normalizeLineEndings(code).replace(/\n+$/u, "");
 	if (!normalized) return undefined;
-	const styled = normalized.split("\n").map((line) =>
-		theme.fg(line.startsWith("+") ? "success" : "error", line)
-	).join("\n");
-	return prefixedText(styled, theme.fg("border", " │ "));
+	const startLine = Math.max(1, Math.floor(options.startLine ?? 1));
+	const lines = normalized.split("\n").map((content, index): CodeDiffLine => ({
+		kind: "context",
+		lineNumber: startLine + index,
+		content: content.replace(/\t/gu, "   "),
+		hunk: 0,
+	}));
+	return renderCodeRows(lines, path, theme, { signs: false, footer: options.footer });
 }
 
 /** Limit a result preview by rendered rows while preserving the full source component for expansion. */

package/extensions/compact-tools-markdown.ts

@@ -0,0 +1,94 @@
+import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+
+type Fence = { char: string; length: number; language: string | undefined; start: number };
+
+const FENCE_OPEN = /^\s{0,3}(`{3,}|~{3,})\s*([^\s`]*)/u;
+const FENCE_CLOSE = /^\s{0,3}(`{3,}|~{3,})\s*$/u;
+const HEADING = /^\s{0,3}#{1,6}(?:\s|$)/u;
+const RULE = /^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/u;
+const QUOTE = /^(\s{0,3}(?:>\s?)+)(.*)$/u;
+const LIST_ITEM = /^(\s*)([-*+]|\d{1,9}[.)])(\s+(?:\[[ xX]\]\s+)?)(.*)$/u;
+const INLINE = /(`+)(.+?)\1|\[([^\]\n]+)\]\(([^)\s]+)\)|\*\*(?=\S)(.+?)\*\*|__(?=\S)(.+?)__|\*(?=[^\s*])(.+?)\*|(?<!\w)_(?=[^\s_])(.+?)_(?!\w)/gu;
+
+/** Resolve a fence info string such as `ts` or `typescript` to a highlighter language. */
+function fenceLanguage(info: string): string | undefined {
+	const name = info.toLowerCase();
+	if (!name) return undefined;
+	return getLanguageFromPath(`fence.${name}`) ?? name;
+}
+
+function highlightInline(text: string, theme: Theme): string {
+	const plain = (value: string) => value ? theme.fg("toolOutput", value) : "";
+	const marker = (value: string) => theme.fg("dim", value);
+	let output = "";
+	let last = 0;
+	for (const match of text.matchAll(INLINE)) {
+		output += plain(text.slice(last, match.index));
+		const [whole, ticks, code, label, url, strong, strongAlt, emphasis, emphasisAlt] = match;
+		if (ticks !== undefined) {
+			output += marker(ticks) + theme.fg("mdCode", code!) + marker(ticks);
+		} else if (label !== undefined) {
+			output += marker("[") + theme.fg("mdLink", label) + marker("](") + theme.fg("mdLinkUrl", url!) + marker(")");
+		} else if (strong !== undefined || strongAlt !== undefined) {
+			const delimiter = whole.slice(0, 2);
+			output += marker(delimiter) + theme.bold(plain(strong ?? strongAlt!)) + marker(delimiter);
+		} else {
+			const delimiter = whole[0]!;
+			output += marker(delimiter) + theme.italic(plain(emphasis ?? emphasisAlt!)) + marker(delimiter);
+		}
+		last = match.index + whole.length;
+	}
+	return output + plain(text.slice(last));
+}
+
+function highlightProse(line: string, theme: Theme): string {
+	if (HEADING.test(line)) return theme.bold(theme.fg("mdHeading", line));
+	if (RULE.test(line)) return theme.fg("mdHr", line);
+	const quote = line.match(QUOTE);
+	if (quote) return theme.fg("mdQuoteBorder", quote[1]!) + theme.italic(theme.fg("mdQuote", quote[2]!));
+	const item = line.match(LIST_ITEM);
+	if (item) return item[1]! + theme.fg("mdListBullet", item[2]! + item[3]!) + highlightInline(item[4]!, theme);
+	return highlightInline(line, theme);
+}
+
+function highlightFenceBody(lines: string[], language: string | undefined, theme: Theme): string[] {
+	if (lines.length === 0) return [];
+	if (!language) return lines.map((line) => theme.fg("mdCodeBlock", line));
+	return highlightCode(lines.join("\n"), language);
+}
+
+/**
+ * Highlight Markdown source line by line: prose gets Markdown styling, fenced code is
+ * highlighted as its declared language, and every character of the source stays visible.
+ */
+export function highlightMarkdown(lines: string[], theme: Theme): string[] {
+	const output = new Array<string>(lines.length);
+	let fence: Fence | undefined;
+	const flush = (end: number) => {
+		if (!fence) return;
+		const body = highlightFenceBody(lines.slice(fence.start, end), fence.language, theme);
+		body.forEach((line, offset) => {
+			output[fence!.start + offset] = line;
+		});
+	};
+	lines.forEach((line, index) => {
+		if (fence) {
+			const close = line.match(FENCE_CLOSE);
+			if (close && close[1]![0] === fence.char && close[1]!.length >= fence.length) {
+				flush(index);
+				output[index] = theme.fg("mdCodeBlockBorder", line);
+				fence = undefined;
+			}
+			return;
+		}
+		const open = line.match(FENCE_OPEN);
+		if (open) {
+			fence = { char: open[1]![0]!, length: open[1]!.length, language: fenceLanguage(open[2]!), start: index + 1 };
+			output[index] = theme.fg("mdCodeBlockBorder", line);
+			return;
+		}
+		output[index] = highlightProse(line, theme);
+	});
+	flush(lines.length);
+	return output.map((line, index) => line ?? lines[index]!);
+}

package/extensions/compact-tools.ts

@@ -33,9 +33,12 @@ import {
 	formatResultLineSummary,
 	getArgumentDetails,
 	getCallDetails,
-	getEditChanges,
+	getEditDiff,
+	getEditPatch,
 	getFileOutput,
 	getTextResult,
+	isReadTextResult,
+	splitReadFooter,
 	summarizeShellCommand,
 } from "./compact-tools-invocation.ts";
 import {
@@ -43,7 +46,8 @@ import {
 	limitComponentLines,
 	prefixedText,
 	renderArguments,
-	renderEditChanges,
+	renderCodeDiff,
+	renderCodeView,
 	renderOutput,
 	renderToolCall,
 	styleMultiline,
@@ -60,6 +64,9 @@ import type {
 	ToolArgs,
 } from "./compact-tools-types.ts";
 
+/** Context lines kept around each change while an edit result is collapsed. */
+const PREVIEW_DIFF_CONTEXT_LINES = 1;
+
 const runtime = new ToolRuntime();
 const registeredTools = new Set<CompactToolName>();
 let registeredConfiguration: string | undefined;
@@ -161,19 +168,45 @@ function renderFileCall(
 	return container;
 }
 
+function renderFileBody(
+	name: CompactToolName,
+	args: ToolArgs,
+	result: AgentToolResult<unknown>,
+	output: string,
+	expanded: boolean,
+	theme: Theme,
+	isError: boolean,
+): Component | undefined {
+	if (isError) return renderOutput(output, theme, isError);
+	const path = typeof args.path === "string" ? args.path : typeof args.file_path === "string" ? args.file_path : "";
+	if (name === "edit") {
+		const diff = getEditDiff(result);
+		const component = diff
+			? renderCodeDiff(getEditPatch(result), diff, path, theme, expanded ? {} : { contextLines: PREVIEW_DIFF_CONTEXT_LINES })
+			: undefined;
+		return component ?? renderOutput(output, theme, isError);
+	}
+	if (name === "read" && isReadTextResult(result)) {
+		const { body, footer } = splitReadFooter(output);
+		const startLine = typeof args.offset === "number" ? args.offset : 1;
+		return renderCodeView(body, path, theme, { startLine, footer }) ?? renderOutput(output, theme, isError);
+	}
+	if (name === "write") return renderCodeView(output, path, theme) ?? renderOutput(output, theme, isError);
+	return renderOutput(output, theme, isError);
+}
+
 function appendFileResult(
 	container: Container,
-	definition: BuiltInDefinition,
+	name: CompactToolName,
 	state: RowState,
+	args: ToolArgs,
+	result: AgentToolResult<unknown>,
 	output: string,
-	editChanges: string,
 	theme: Theme,
 	isError: boolean,
 ): void {
 	if (!state.expanded && !state.preview) return;
-	const component = definition.name === "edit" && editChanges
-		? renderEditChanges(editChanges, theme)
-		: renderOutput(output, theme, isError);
+	const component = renderFileBody(name, args, result, output, state.expanded === true, theme, isError);
 	if (!component) return;
 	container.addChild(state.expanded ? component : limitComponentLines(component, runtime.config.previewLines, theme));
 }
@@ -190,10 +223,10 @@ function renderFileResult(
 	runtime.syncExpansion(state, ctx.expanded, name);
 	if (canReuseResult(state, result, options, ctx)) return ctx.lastComponent;
 	const output = getFileOutput(name, ctx.args, result, ctx.isError);
-	const editChanges = name === "edit" ? getEditChanges(result) : "";
-	runtime.setResultAvailable(state, name, editChanges.length > 0 || output.length > 0);
+	const hasEditDiff = name === "edit" && getEditDiff(result).length > 0;
+	runtime.setResultAvailable(state, name, hasEditDiff || output.length > 0);
 	const container = new CachedContainer();
-	appendFileResult(container, definition, state, output, editChanges, theme, ctx.isError);
+	appendFileResult(container, name, state, ctx.args, result, output, theme, ctx.isError);
 	if (!options.isPartial && !state.resultLineSummaryComputed) {
 		state.resultLineSummary = formatResultLineSummary(name, ctx.args, result, output);
 		state.resultLineSummaryComputed = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-compact-tools",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "description": "Compact, expandable UI for pi's built-in tools, bundled with a polished GitHub Dark theme.",
   "type": "module",
   "license": "MIT",