pi-compact-tools 0.7.8 → 0.8.1

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

@@ -1,48 +1,19 @@
 # pi-compact-tools
 
-Compact, expandable rendering for Pi's built-in tools, with a polished GitHub Dark theme.
+Compact, expandable rendering for Pi's built-in tools, with a GitHub Dark theme.
 
-> Formerly `@nedleeds/pi-compact-ui`. New installations should use `pi-compact-tools`.
-
-## Demo
-
-The UI uses portable Unicode symbols and does not require a Nerd Font.
-
-### Compact tool workflow
-
-Active, successful, and failed tool calls stay compact while preserving useful status and timing information.
-
-![Compact tool workflow with Nerd Font](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/nerd-font-workflow-optimized.gif)
-
-### Progress and duration display
-
-The working label above the prompt uses the Thinking summary color with a soft white light sweep. Every tool state uses the same `⦁` glyph; running tools use a fourteen-frame cosine-eased RGB pulse between dim and bright gray, then settle to green on success or red on failure. Elapsed time remains visible in the neutral control color.
+![Compact tool workflow](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/nerd-font-workflow-optimized.gif)
 
 ![Spinner and elapsed-time display](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/spinner-duration-optimized.gif)
 
-### Bounded result previews
-
-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.
-
 ![Edit diff](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/edit-diff.gif)
 
 ## Features
 
-- 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; 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, 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
-- 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
-- Distinct cool-blue thinking text
-- Truecolor and 256-color terminal support, plus Windows, Unix, and classic Mac line endings
-- No Nerd Font requirement
+- Compact rows for `read`, `write`, `edit`, `bash`, `powershell`, `grep`, `find`, and `ls`, with status, duration, and line count
+- Syntax-highlighted edit diffs and numbered `read`/`write` code views, including Markdown code fences
+- Animated working label above the prompt and a `Ctrl+T` thinking summary/detail cycle
+- No Nerd Font required
 
 ## Install
 
@@ -50,91 +21,27 @@ Completed `edit` rows show only the lines actually removed (`-`) or added (`+`),
 pi install npm:pi-compact-tools
 ```
 
-Or install from GitHub:
-
-```bash
-pi install git:github.com/nedleeds/pi-compact-tools
-```
-
-Restart Pi or run `/reload`.
-
-Migrating from the previous package name:
-
-```bash
-pi remove npm:@nedleeds/pi-compact-ui
-pi install npm:pi-compact-tools
-```
-
-## Theme
-
-Select `github-dark-pro` in Pi's settings, or add it to `~/.pi/agent/settings.json`:
-
-```json
-{
-  "theme": "github-dark-pro"
-}
-```
+Then restart Pi or run `/reload`. For the bundled theme, set `"theme": "github-dark-pro"` in `~/.pi/agent/settings.json`.
 
 ## Configuration
 
-Configuration is optional. Create `~/.pi/agent/compact-tools.json` for global settings or `<project>/.pi/compact-tools.json` for a trusted project.
-
-Default configuration:
+Optional. Put it in `~/.pi/agent/compact-tools.json` or `<project>/.pi/compact-tools.json`:
 
 ```json
 {
-  "$schema": "https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/schemas/compact-tools.schema.json",
   "tools": ["read", "write", "edit", "bash"],
   "previewLines": 10,
-  "auto_compact": {
-    "read": true,
-    "write": true,
-    "edit": false,
-    "bash": true
-  }
-}
-```
-
-Every tool call title uses `⦁`. Pending calls use dark gray; active calls smoothly pulse through fourteen cosine-eased RGB frames at a 45 ms interval without disappearing. Animation starts while arguments stream, so `write` and `edit` remain visibly active before their filesystem operation begins. Successful titles use green, and failed titles use red. `Done`, `Failed`, elapsed time, and line counts use the same neutral control color without printing inline click or keyboard hints. A single Pi working label animates independently of token arrival and reports `Thinking…`, `Responding…`, semantic built-in states such as `Reading file…`, or cleaned custom states such as `Using jira search…`. Invocation arguments remain in the tool row instead of being duplicated above the prompt. No separate spinner glyph is shown above the prompt.
-
-`auto_compact` controls each tool's initial result state:
-
-- `true` starts with the result hidden.
-- `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.
-
-To enable all Unix-compatible tools:
-
-```json
-{
-  "tools": ["read", "write", "edit", "bash", "grep", "find", "ls"]
+  "auto_compact": { "read": true, "write": true, "edit": false, "bash": true }
 }
 ```
 
-Add `"powershell"` on Windows if desired.
+- `tools`: tools to render compactly. Also available: `grep`, `find`, `ls`, `powershell`.
+- `auto_compact`: `true` starts hidden, `false` starts with a preview of up to `previewLines` rows (`1`–`100`).
 
 ## Controls
 
-`Ctrl+T` cycles every thinking block through:
-
-```text
-one-line summary → summary + │-indented detail → one-line summary → Thinking...
-```
-
-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` 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 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.
-
-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.
-
-## Notes
-
-- 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.
-- 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.
+- Click a row or press `Ctrl+O` to expand or collapse results.
+- `Ctrl+T` cycles thinking: summary → detail → summary → hidden.
 
 ## Development
 
@@ -144,8 +51,6 @@ npm run check
 pi -e .
 ```
 
-Pi extensions execute with full system access. Review third-party extension source before installation.
-
 ## License
 
 MIT

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

@@ -321,6 +321,7 @@ export function getTextResult(result: AgentToolResult<unknown>): string {
 
 type ResultDetails = {
 	diff?: unknown;
+	patch?: unknown;
 	truncation?: {
 		firstLineExceedsLimit?: boolean;
 		outputLines?: number;
@@ -341,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.8",
+  "version": "0.8.1",
   "description": "Compact, expandable UI for pi's built-in tools, bundled with a polished GitHub Dark theme.",
   "type": "module",
   "license": "MIT",