@heyhuynhgiabuu/pi-diff 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 huynhgiabuu
+
+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

@@ -0,0 +1,205 @@
+# pi-diff
+
+A [pi](https://pi.dev) extension that replaces the default `write` and `edit` tool output with **Shiki-powered, syntax-highlighted diffs** — side-by-side split view, unified stacked view, and word-level change emphasis, all rendered directly in your terminal.
+
+> **Status:** Early release.
+
+<!-- TODO: add screenshot -->
+<!-- <img width="600" alt="pi-diff screenshot" src="https://github.com/heyhuynhgiabuu/pi-diff/raw/main/media/screenshot.png" /> -->
+
+## Features
+
+- **Syntax-highlighted diffs** — full Shiki grammar highlighting (190+ languages) composited with diff background colors
+- **Split view** — side-by-side comparison for `edit` tool, auto-falls back to unified on narrow terminals
+- **Unified view** — stacked single-column layout for `write` tool overwrites
+- **Word-level emphasis** — changed characters get brighter backgrounds so you see exactly what changed
+- **New file preview** — syntax-highlighted preview when creating files
+- **Adaptive layout** — auto-detects terminal width; wraps intelligently on wide terminals, truncates on narrow ones
+- **LRU cache** — singleton Shiki highlighter with 192-entry cache for fast re-renders
+- **Large diff fallback** — gracefully degrades (skips highlighting, still shows diff structure) for files > 80k chars
+- **Fully customizable** — every color and threshold is overridable via environment variables
+
+## Install
+
+```bash
+pi install npm:@heyhuynhgiabuu/pi-diff
+```
+
+Or load directly for development:
+
+```bash
+pi -e ./src/index.ts
+```
+
+## How It Works
+
+pi-diff wraps the built-in `write` and `edit` tools from the pi SDK. When the agent writes or edits a file:
+
+1. **Before the write** — reads the existing file content
+2. **Delegates** to the original SDK tool (file is actually written)
+3. **After the write** — computes a structured diff between old and new content
+4. **Renders** the diff with syntax highlighting and word-level emphasis
+
+The rendering pipeline:
+
+```
+Old content ──┐
+              ├── diff (structuredPatch) ── parse ── highlight (Shiki → ANSI)
+New content ──┘                                          │
+                                                         ├── inject diff bg
+                                                         ├── inject word-level bg
+                                                         └── wrap/fit to terminal
+```
+
+### Views
+
+| View | Used by | Description |
+|------|---------|-------------|
+| **Split** | `edit` tool | Side-by-side with old on left, new on right. Diagonal stripes fill empty slots. Auto-falls back to unified when terminal < 150 cols or > 20% of lines would wrap. |
+| **Unified** | `write` tool | Single column with `+`/`-` gutter. Compact, works at any terminal width. |
+
+Both views show:
+- Colored border bars (`▌`) for changed lines
+- Line numbers in the gutter
+- Hunk separators (`··· N unmodified lines ···`)
+- Word-level emphasis on paired add/del lines
+
+## Configuration
+
+All settings are controlled via environment variables. Add them to your shell profile or `.envrc`:
+
+### Theme
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `DIFF_THEME` | `github-dark` | Shiki theme name (e.g., `dracula`, `one-dark-pro`, `catppuccin-mocha`) |
+
+### Colors
+
+Override any diff color with hex `#RRGGBB` format:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `DIFF_BG_ADD` | `#162620` | Background for added lines |
+| `DIFF_BG_DEL` | `#2d1919` | Background for removed lines |
+| `DIFF_BG_ADD_HL` | `#234b32` | Word-level emphasis on added text |
+| `DIFF_BG_DEL_HL` | `#502323` | Word-level emphasis on removed text |
+| `DIFF_BG_GUTTER_ADD` | `#12201a` | Gutter background for added lines |
+| `DIFF_BG_GUTTER_DEL` | `#261616` | Gutter background for removed lines |
+| `DIFF_FG_ADD` | `#64b478` | Foreground for `+` signs and add indicators |
+| `DIFF_FG_DEL` | `#c86464` | Foreground for `-` signs and del indicators |
+
+### Layout
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `DIFF_SPLIT_MIN_WIDTH` | `150` | Minimum terminal columns to use split view |
+| `DIFF_SPLIT_MIN_CODE_WIDTH` | `60` | Minimum code columns per side in split view |
+
+### Example `.envrc`
+
+```bash
+# Use a different Shiki theme
+export DIFF_THEME="catppuccin-mocha"
+
+# Brighter add backgrounds
+export DIFF_BG_ADD="#1a3a25"
+export DIFF_BG_ADD_HL="#2d6040"
+
+# Allow split view on narrower terminals
+export DIFF_SPLIT_MIN_WIDTH=120
+```
+
+## Architecture
+
+```
+src/
+└── index.ts    # Extension entry point — wraps write/edit tools with diff rendering
+```
+
+### Key internals
+
+| Component | Purpose |
+|-----------|---------|
+| `parseDiff()` | Converts old/new content to structured `DiffLine[]` using `diff.structuredPatch` |
+| `hlBlock()` | Shiki ANSI highlighting with LRU cache (192 entries) |
+| `injectBg()` | Composites diff backgrounds into Shiki ANSI output (fg + bg layering) |
+| `wordDiffAnalysis()` | Single-pass word diff → similarity score + character ranges |
+| `renderSplit()` | Side-by-side renderer with diagonal stripe fillers |
+| `renderUnified()` | Stacked single-column renderer |
+| `wrapAnsi()` | ANSI-aware line wrapping with state carry-forward |
+| `shouldUseSplit()` | Heuristic: split vs unified based on terminal width and wrap ratio |
+
+### Rendering constants
+
+| Constant | Value | Description |
+|----------|-------|-------------|
+| `MAX_PREVIEW_LINES` | 60 | Max lines in edit preview (split view) |
+| `MAX_RENDER_LINES` | 150 | Max lines in write result (unified view) |
+| `MAX_HL_CHARS` | 80,000 | Skip syntax highlighting above this |
+| `CACHE_LIMIT` | 192 | LRU cache entries for highlighted blocks |
+| `WORD_DIFF_MIN_SIM` | 0.15 | Minimum similarity for word-level emphasis |
+
+## Exports
+
+The extension exports a `__testing` object for unit testing:
+
+```typescript
+import { __testing } from "@heyhuynhgiabuu/pi-diff";
+
+const { parseDiff, renderSplit, renderUnified, normalizeShikiContrast } = __testing;
+```
+
+## Development
+
+```bash
+git clone https://github.com/heyhuynhgiabuu/pi-diff.git
+cd pi-diff
+npm install
+npm run typecheck   # TypeScript validation
+npm run lint        # Biome linting
+npm test            # Run tests
+```
+
+### Load in pi for testing
+
+```bash
+# From the pi-diff directory
+pi -e ./src/index.ts
+
+# Or install globally
+pi install .
+```
+
+## How pi Extensions Work
+
+pi-diff is a **pi extension** — a TypeScript file that exports a default function receiving the pi API:
+
+```typescript
+export default function piDiffExtension(pi: any): void {
+  // Get SDK tools
+  const origWrite = createWriteTool(cwd);
+  const origEdit = createEditTool(cwd);
+
+  // Register enhanced versions
+  pi.registerTool({
+    ...origWrite,
+    name: "write",
+    execute: async (...) => { /* wrap + diff */ },
+    renderCall: (...) => { /* preview */ },
+    renderResult: (...) => { /* render diff */ },
+  });
+}
+```
+
+Extensions can:
+- **Register tools** — `pi.registerTool(definition)` 
+- **Listen to events** — `pi.on("session_start" | "input" | "before_tool_call" | ...)`
+- **Register commands** — `pi.registerCommand("/name", handler)`
+- **Register providers** — `pi.registerProvider("name", config)`
+
+See the [pi docs](https://pi.dev) for the full extension API.
+
+## License
+
+MIT — [huynhgiabuu](https://github.com/heyhuynhgiabuu)

package/biome.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "tab",
+    "lineWidth": 120
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@heyhuynhgiabuu/pi-diff",
+  "version": "0.1.0",
+  "description": "Shiki-powered terminal diff renderer for pi — syntax-highlighted, word-level diffs in split and unified views.",
+  "author": "huynhgiabuu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heyhuynhgiabuu/pi-diff.git"
+  },
+  "homepage": "https://github.com/heyhuynhgiabuu/pi-diff#readme",
+  "bugs": {
+    "url": "https://github.com/heyhuynhgiabuu/pi-diff/issues"
+  },
+  "keywords": [
+    "pi-package",
+    "pi",
+    "pi-extension",
+    "diff",
+    "syntax-highlighting",
+    "shiki",
+    "terminal"
+  ],
+  "dependencies": {
+    "diff": "^7.0.0",
+    "@shikijs/cli": "^4.0.2"
+  },
+  "peerDependencies": {
+    "@mariozechner/pi-coding-agent": "*",
+    "@mariozechner/pi-tui": "*"
+  },
+  "devDependencies": {
+    "@types/diff": "^7.0.2",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "@biomejs/biome": "^2.3.5",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "lint:fix": "biome check --fix src/",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "pi": {
+    "extensions": [
+      "./src/index.ts"
+    ]
+  }
+}

package/src/index.ts

@@ -0,0 +1,1043 @@
+/**
+ * pi-diff — Shiki-powered terminal diff renderer for pi.
+ *
+ * @module pi-diff
+ * @see https://github.com/heyhuynhgiabuu/pi-diff
+ *
+ * Architecture (like OpenTUI / delta):
+ *   1. Syntax-highlight full code blocks via Shiki → ANSI (fg-only codes)
+ *   2. Layer diff background colors underneath (composites at cell level)
+ *   3. For word-level changes, inject brighter bg at changed char positions
+ *   4. Result: syntax fg + diff bg + word emphasis — all three visible together
+ *
+ * Views:
+ *   • Split (side-by-side) — edit tool, auto-falls back to unified on narrow terminals
+ *   • Unified (stacked)    — write tool overwrites
+ *
+ * Performance:
+ *   • Singleton Shiki highlighter (managed by @shikijs/cli)
+ *   • LRU memo cache per highlighted block
+ *   • Large-diff fallback (skip highlighting, still show diff)
+ *   • Async rendering with invalidate() for non-blocking preview
+ */
+
+import { existsSync, readFileSync } from "node:fs";
+import { extname, relative } from "node:path";
+
+import { codeToANSI } from "@shikijs/cli";
+import * as Diff from "diff";
+import type { BundledLanguage, BundledTheme } from "shiki";
+
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+
+const THEME: BundledTheme = (process.env.DIFF_THEME as BundledTheme | undefined) ?? "github-dark";
+
+function envInt(name: string, fallback: number): number {
+	const v = Number.parseInt(process.env[name] ?? "", 10);
+	return Number.isFinite(v) && v > 0 ? v : fallback;
+}
+
+/** Parse env hex color "#RRGGBB" → ANSI 24-bit fg/bg escape, or return fallback. */
+function envFg(name: string, fallback: string): string {
+	const hex = process.env[name];
+	if (!hex || !/^#[0-9a-fA-F]{6}$/.test(hex)) return fallback;
+	const r = Number.parseInt(hex.slice(1, 3), 16);
+	const g = Number.parseInt(hex.slice(3, 5), 16);
+	const b = Number.parseInt(hex.slice(5, 7), 16);
+	return `\x1b[38;2;${r};${g};${b}m`;
+}
+function envBg(name: string, fallback: string): string {
+	const hex = process.env[name];
+	if (!hex || !/^#[0-9a-fA-F]{6}$/.test(hex)) return fallback;
+	const r = Number.parseInt(hex.slice(1, 3), 16);
+	const g = Number.parseInt(hex.slice(3, 5), 16);
+	const b = Number.parseInt(hex.slice(5, 7), 16);
+	return `\x1b[48;2;${r};${g};${b}m`;
+}
+
+// --- Split-view thresholds ---
+// Split is preferred when there's real room. At narrow widths, a clean stacked
+// (unified) view is better than a cramped split with wrapping.
+const SPLIT_MIN_WIDTH = envInt("DIFF_SPLIT_MIN_WIDTH", 150);          // need ≥150 cols for split to breathe
+const SPLIT_MIN_CODE_WIDTH = envInt("DIFF_SPLIT_MIN_CODE_WIDTH", 60); // ≥60 code cols per side
+const SPLIT_MAX_WRAP_RATIO = 0.20;      // if >20% lines wrap in split, fall back to stacked
+const SPLIT_MAX_WRAP_LINES = 8;         // absolute cap before unified fallback
+
+// --- Terminal bounds ---
+const MAX_TERM_WIDTH = 210;             // max for 1728px wide display (~205 cols at typical font)
+const DEFAULT_TERM_WIDTH = 200;         // safe default for 1728x1117 resolution
+
+// --- Rendering limits ---
+const MAX_PREVIEW_LINES = 60;           // was 50 — show slightly more context in edit preview
+const MAX_RENDER_LINES = 150;           // was 120 — show more of the diff in write tool
+const MAX_HL_CHARS = 80_000;            // was 50k — allow syntax hl for larger diffs
+const CACHE_LIMIT = 192;               // was 128 — bigger cache for multi-file sessions
+
+// --- Word diff ---
+const WORD_DIFF_MIN_SIM = 0.15;        // was 0.2 — show word diffs for slightly less similar lines
+
+// --- Wrapping ---
+// Adaptive: narrow terminals truncate aggressively, wide terminals allow wrapping.
+// Actual wrap rows are computed per-render via adaptiveWrapRows().
+const MAX_WRAP_ROWS_WIDE = 3;          // ≥180 cols
+const MAX_WRAP_ROWS_MED  = 2;          // 120–179 cols
+const MAX_WRAP_ROWS_NARROW = 1;        // <120 cols (truncate, no wrap)
+
+// ---------------------------------------------------------------------------
+// ANSI
+// ---------------------------------------------------------------------------
+
+const RST = "\x1b[0m";
+const BOLD = "\x1b[1m";
+const DIM = "\x1b[2m";
+
+// Subtle diff backgrounds — muted tones to let syntax fg shine through
+// Override via env: DIFF_BG_ADD="#1a3320" etc. (hex "#RRGGBB" format)
+const BG_ADD   = envBg("DIFF_BG_ADD",    "\x1b[48;2;22;38;32m");      // muted teal-green
+const BG_DEL   = envBg("DIFF_BG_DEL",    "\x1b[48;2;45;25;25m");      // muted brown-red
+const BG_ADD_W = envBg("DIFF_BG_ADD_HL", "\x1b[48;2;35;75;50m");      // word-level emphasis
+const BG_DEL_W = envBg("DIFF_BG_DEL_HL", "\x1b[48;2;80;35;35m");
+const BG_GUTTER_ADD = envBg("DIFF_BG_GUTTER_ADD", "\x1b[48;2;18;32;26m");
+const BG_GUTTER_DEL = envBg("DIFF_BG_GUTTER_DEL", "\x1b[48;2;38;22;22m");
+const BG_GUTTER_CTX = "";  // use terminal default bg for context gutters
+const BG_EMPTY = "\x1b[48;2;18;18;18m";     // filler rows when one side is shorter
+
+// Diff foregrounds — override via env: DIFF_FG_ADD="#50d264" etc.
+const FG_ADD  = envFg("DIFF_FG_ADD",  "\x1b[38;2;100;180;120m");      // desaturated green
+const FG_DEL  = envFg("DIFF_FG_DEL",  "\x1b[38;2;200;100;100m");      // desaturated red
+const FG_DIM  = "\x1b[38;2;80;80;80m";
+const FG_LNUM = "\x1b[38;2;100;100;100m";
+const FG_RULE = "\x1b[38;2;50;50;50m";
+const FG_SAFE_MUTED = "\x1b[38;2;139;148;158m";
+
+const FG_STRIPE = "\x1b[38;2;40;40;40m"; // gray diagonal stripes on terminal default bg
+
+const BORDER_BAR = "▌";
+
+/** Generate a dense diagonal stripe fill for empty filler cells.
+ *  Solid ╱ characters — uniform direction like CSS diagonal hatching. */
+function stripes(w: number, _rowOffset: number): string {
+	return FG_STRIPE + "╱".repeat(w) + RST;
+}
+
+const DIVIDER = `${FG_RULE}│${RST}`;
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+const BG_DEFAULT = "\x1b[49m"; // reset to terminal default background
+
+// ---------------------------------------------------------------------------
+// Theme-aware diff colors
+// ---------------------------------------------------------------------------
+
+/** Resolved ANSI colors for diff rendering — theme overrides hardcoded defaults. */
+interface DiffColors {
+	fgAdd: string;
+	fgDel: string;
+	fgCtx: string;
+}
+
+const DEFAULT_DIFF_COLORS: DiffColors = { fgAdd: FG_ADD, fgDel: FG_DEL, fgCtx: FG_DIM };
+
+/** Resolve diff fg colors from theme (if available), falling back to hardcoded ANSI. */
+function resolveDiffColors(theme?: any): DiffColors {
+	if (!theme?.getFgAnsi) return DEFAULT_DIFF_COLORS;
+	try {
+		const fgAdd = theme.getFgAnsi("toolDiffAdded") || FG_ADD;
+		const fgDel = theme.getFgAnsi("toolDiffRemoved") || FG_DEL;
+		const fgCtx = theme.getFgAnsi("toolDiffContext") || FG_DIM;
+		return { fgAdd, fgDel, fgCtx };
+	} catch {
+		return DEFAULT_DIFF_COLORS;
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Adaptive helpers
+// ---------------------------------------------------------------------------
+
+/** Returns max wrap rows based on current terminal width. Narrow = truncate, wide = allow wrapping. */
+function adaptiveWrapRows(tw?: number): number {
+	const w = tw ?? termW();
+	if (w >= 180) return MAX_WRAP_ROWS_WIDE;
+	if (w >= 120) return MAX_WRAP_ROWS_MED;
+	return MAX_WRAP_ROWS_NARROW;
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface DiffLine {
+	type: "add" | "del" | "ctx" | "sep";
+	oldNum: number | null;
+	newNum: number | null;
+	content: string;
+}
+
+interface ParsedDiff {
+	lines: DiffLine[];
+	added: number;
+	removed: number;
+	chars: number;
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+function strip(s: string): string { return s.replace(ANSI_RE, ""); }
+
+function tabs(s: string): string { return s.replace(/\t/g, "  "); }
+
+function termW(): number {
+	// Try multiple sources — process.stdout.columns may be undefined in piped/subagent contexts
+	const raw = process.stdout.columns
+		|| (process.stderr as any).columns
+		|| Number.parseInt(process.env.COLUMNS ?? "", 10)
+		|| DEFAULT_TERM_WIDTH;
+	return Math.max(80, Math.min(raw - 4, MAX_TERM_WIDTH)); // -4 safety margin for pi TUI padding
+}
+
+/** Pad/truncate `s` to exactly `w` visible chars. ANSI-aware. */
+function fit(s: string, w: number): string {
+	if (w <= 0) return "";
+	const plain = strip(s);
+	if (plain.length <= w) return s + " ".repeat(w - plain.length);
+	// Truncated — show content + dim › indicator
+	const showW = w > 2 ? w - 1 : w;
+	let vis = 0, i = 0;
+	while (i < s.length && vis < showW) {
+		if (s[i] === "\x1b") { const e = s.indexOf("m", i); if (e !== -1) { i = e + 1; continue; } }
+		vis++; i++;
+	}
+	return w > 2
+		? s.slice(0, i) + RST + FG_DIM + "›" + RST
+		: s.slice(0, i) + RST;
+}
+
+/** Extract last active fg + bg ANSI codes from a string. Used for wrapping continuations. */
+function ansiState(s: string): string {
+	let fg = "", bg = "";
+	const re = /\x1b\[([^m]*)m/g;
+	let m: RegExpExecArray | null;
+	while ((m = re.exec(s)) !== null) {
+		const p = m[1];
+		if (p === "0") { fg = ""; bg = ""; }
+		else if (p === "39") { fg = ""; }
+		else if (p.startsWith("38;")) { fg = m[0]; }
+		else if (p.startsWith("48;")) { bg = m[0]; }
+	}
+	return bg + fg;
+}
+
+function isLowContrastShikiFg(params: string): boolean {
+	if (params === "30" || params === "90") return true;
+	if (params === "38;5;0" || params === "38;5;8") return true;
+	if (!params.startsWith("38;2;")) return false;
+	const parts = params.split(";").map(Number);
+	if (parts.length !== 5 || parts.some((n) => !Number.isFinite(n))) return false;
+	const [, , r, g, b] = parts;
+	const luminance = (0.2126 * r) + (0.7152 * g) + (0.0722 * b);
+	return luminance < 72;
+}
+
+function normalizeShikiContrast(ansi: string): string {
+	return ansi.replace(/\x1b\[([0-9;]*)m/g, (seq, params: string) => (
+		isLowContrastShikiFg(params) ? FG_SAFE_MUTED : seq
+	));
+}
+
+/** Wrap ANSI-encoded string into rows of `w` visible chars. Max `maxRows` rows; last row truncates with ›. */
+function wrapAnsi(s: string, w: number, maxRows = adaptiveWrapRows(), fillBg = ""): string[] {
+	if (w <= 0) return [""];
+	const plain = strip(s);
+	if (plain.length <= w) {
+		const pad = w - plain.length;
+		return pad > 0 ? [s + fillBg + " ".repeat(pad) + (fillBg ? RST : "")] : [s];
+	}
+
+	const rows: string[] = [];
+	let row = "", vis = 0, i = 0;
+	let onLastRow = false;
+	let effW = w;
+
+	while (i < s.length) {
+		// When we reach the last allowed row, reserve 1 char for › indicator
+		if (!onLastRow && rows.length >= maxRows - 1) {
+			onLastRow = true;
+			effW = w > 2 ? w - 1 : w;
+		}
+
+		// Pass through ANSI escapes
+		if (s[i] === "\x1b") {
+			const end = s.indexOf("m", i);
+			if (end !== -1) { row += s.slice(i, end + 1); i = end + 1; continue; }
+		}
+
+		// Row full
+		if (vis >= effW) {
+			if (onLastRow) {
+				// Check if remaining string has visible chars
+				let hasMore = false;
+				for (let j = i; j < s.length; j++) {
+					if (s[j] === "\x1b") { const e2 = s.indexOf("m", j); if (e2 !== -1) { j = e2; continue; } }
+					hasMore = true; break;
+				}
+				if (hasMore && w > 2) row += RST + FG_DIM + "›" + RST;
+				else row += fillBg + " ".repeat(Math.max(0, w - vis)) + RST;
+				rows.push(row);
+				return rows;
+			}
+			// Normal wrap — carry ANSI state forward
+			const state = ansiState(row);
+			rows.push(row + RST);
+			row = state + fillBg;
+			vis = 0;
+			if (rows.length >= maxRows - 1) { onLastRow = true; effW = w > 2 ? w - 1 : w; }
+		}
+
+		row += s[i]; vis++; i++;
+	}
+
+	// Final row, padded
+	if (row.length > 0 || rows.length === 0) {
+		rows.push(row + fillBg + " ".repeat(Math.max(0, w - vis)) + RST);
+	}
+	return rows;
+}
+
+function lnum(n: number | null, w: number, fg = FG_LNUM): string {
+	if (n === null) return " ".repeat(w);
+	const v = String(n);
+	return `${fg}${" ".repeat(Math.max(0, w - v.length))}${v}${RST}`;
+}
+
+function shortPath(cwd: string, home: string, p: string): string {
+	if (!p) return "";
+	const r = relative(cwd, p);
+	if (!r.startsWith("..") && !r.startsWith("/")) return r;
+	return p.replace(home, "~");
+}
+
+function summarize(a: number, d: number): string {
+	const p: string[] = [];
+	if (a > 0) p.push(`${FG_ADD}+${a}${RST}`);
+	if (d > 0) p.push(`${FG_DEL}-${d}${RST}`);
+	return p.length ? p.join(" ") : `${FG_DIM}no changes${RST}`;
+}
+
+function rule(w: number): string {
+	return `${FG_RULE}${"─".repeat(w)}${RST}`;
+}
+
+/**
+ * Decide whether split view is readable for the given terminal width.
+ * Prefers split view — side-by-side is always easier to scan.
+ * Falls back to unified only when code columns would be too cramped
+ * or too many lines would wrap even with adaptive truncation.
+ */
+function shouldUseSplit(diff: ParsedDiff, tw: number, maxRows = MAX_PREVIEW_LINES): boolean {
+	if (!diff.lines.length) return false;
+	if (tw < SPLIT_MIN_WIDTH) return false;
+
+	const nw = Math.max(2, String(Math.max(...diff.lines.map(l => l.oldNum ?? l.newNum ?? 0), 0)).length);
+	const half = Math.floor((tw - 1) / 2); // -1 for center divider
+	const gw = nw + 5; // border + num + sign + sp + │ + sp
+	const cw = Math.max(12, half - gw);
+	if (cw < SPLIT_MIN_CODE_WIDTH) return false;
+
+	// Estimate how many lines would need wrapping at this code width
+	const vis = diff.lines.slice(0, maxRows);
+	let contentLines = 0;
+	let wrapCandidates = 0;
+	for (const l of vis) {
+		if (l.type === "sep") continue;
+		contentLines++;
+		if (tabs(l.content).length > cw) wrapCandidates++;
+	}
+	if (contentLines === 0) return true;
+
+	const wrapRatio = wrapCandidates / contentLines;
+	if (wrapCandidates >= SPLIT_MAX_WRAP_LINES) return false;
+	if (wrapRatio >= SPLIT_MAX_WRAP_RATIO) return false;
+	return true;
+}
+
+// ---------------------------------------------------------------------------
+// Language detection
+// ---------------------------------------------------------------------------
+
+const EXT_LANG: Record<string, BundledLanguage> = {
+	ts: "typescript", tsx: "tsx", js: "javascript", jsx: "jsx",
+	mjs: "javascript", cjs: "javascript",
+	py: "python", rb: "ruby", rs: "rust", go: "go", java: "java",
+	c: "c", cpp: "cpp", h: "c", hpp: "cpp", cs: "csharp",
+	swift: "swift", kt: "kotlin",
+	html: "html", css: "css", scss: "scss",
+	json: "json", yaml: "yaml", yml: "yaml", toml: "toml",
+	md: "markdown", sql: "sql", sh: "bash", bash: "bash", zsh: "bash",
+	lua: "lua", php: "php", dart: "dart", xml: "xml",
+	graphql: "graphql", svelte: "svelte", vue: "vue",
+};
+
+function lang(fp: string): BundledLanguage | undefined {
+	return EXT_LANG[extname(fp).slice(1).toLowerCase()];
+}
+
+// ---------------------------------------------------------------------------
+// Shiki ANSI cache + pre-warm
+// ---------------------------------------------------------------------------
+
+// Pre-warm the Shiki singleton (loads WASM grammars + theme) so the first
+// diff render doesn't pay the ~200-500ms startup cost.
+codeToANSI("", "typescript", THEME).catch(() => {});
+
+const _cache = new Map<string, string[]>();
+
+function _touch(k: string, v: string[]): string[] {
+	_cache.delete(k); _cache.set(k, v);
+	while (_cache.size > CACHE_LIMIT) {
+		const first = _cache.keys().next().value;
+		if (first === undefined) break;
+		_cache.delete(first);
+	}
+	return v;
+}
+
+async function hlBlock(code: string, language: BundledLanguage | undefined): Promise<string[]> {
+	if (!code) return [""];
+	if (!language || code.length > MAX_HL_CHARS) return code.split("\n");
+
+	const k = `${THEME}\0${language}\0${code}`;
+	const hit = _cache.get(k);
+	if (hit) return _touch(k, hit);
+
+	try {
+		const ansi = normalizeShikiContrast(await codeToANSI(code, language, THEME));
+		const out = (ansi.endsWith("\n") ? ansi.slice(0, -1) : ansi).split("\n");
+		return _touch(k, out);
+	} catch {
+		return code.split("\n");
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Diff parsing
+// ---------------------------------------------------------------------------
+
+function parseDiff(oldContent: string, newContent: string, ctx = 3): ParsedDiff {
+	const patch = Diff.structuredPatch("", "", oldContent, newContent, "", "", { context: ctx });
+	const lines: DiffLine[] = [];
+	let added = 0, removed = 0;
+
+	for (let hi = 0; hi < patch.hunks.length; hi++) {
+		if (hi > 0) {
+			const prev = patch.hunks[hi - 1];
+			const gap = patch.hunks[hi].oldStart - (prev.oldStart + prev.oldLines);
+			lines.push({ type: "sep", oldNum: null, newNum: gap > 0 ? gap : null, content: "" });
+		}
+		const h = patch.hunks[hi];
+		let oL = h.oldStart, nL = h.newStart;
+		for (const raw of h.lines) {
+			if (raw === "\") continue;
+			const ch = raw[0], text = raw.slice(1);
+			if (ch === "+") { lines.push({ type: "add", oldNum: null, newNum: nL++, content: text }); added++; }
+			else if (ch === "-") { lines.push({ type: "del", oldNum: oL++, newNum: null, content: text }); removed++; }
+			else { lines.push({ type: "ctx", oldNum: oL++, newNum: nL++, content: text }); }
+		}
+	}
+	return { lines, added, removed, chars: oldContent.length + newContent.length };
+}
+
+// ---------------------------------------------------------------------------
+// Word diff + bg injection
+//
+// Key insight: Shiki's codeToANSI only emits fg codes (\x1b[38;...m and
+// \x1b[39m). It never sets backgrounds.  So we can layer a diff bg underneath
+// and it persists through all fg switches.  For word-level emphasis we swap
+// the bg to a brighter shade at changed character positions.
+// ---------------------------------------------------------------------------
+
+/**
+ * Combined word diff analysis — single Diff.diffWords() call returns both
+ * similarity score and character ranges for emphasis highlighting.
+ * Replaces separate wordDiffRanges + wordDiffSimilarity (which called diffWords twice).
+ */
+function wordDiffAnalysis(a: string, b: string): {
+	similarity: number;
+	oldRanges: Array<[number, number]>;
+	newRanges: Array<[number, number]>;
+} {
+	if (!a && !b) return { similarity: 1, oldRanges: [], newRanges: [] };
+	const parts = Diff.diffWords(a, b);
+	const oldRanges: Array<[number, number]> = [];
+	const newRanges: Array<[number, number]> = [];
+	let oPos = 0, nPos = 0, same = 0;
+	for (const p of parts) {
+		if (p.removed) { oldRanges.push([oPos, oPos + p.value.length]); oPos += p.value.length; }
+		else if (p.added) { newRanges.push([nPos, nPos + p.value.length]); nPos += p.value.length; }
+		else { const len = p.value.length; same += len; oPos += len; nPos += len; }
+	}
+	const maxLen = Math.max(a.length, b.length);
+	return { similarity: maxLen > 0 ? same / maxLen : 1, oldRanges, newRanges };
+}
+
+/**
+ * Inject diff background into Shiki ANSI output.
+ * `baseBg` on unchanged spans, `hlBg` on changed character ranges.
+ * Re-injects bg after any full reset (\x1b[0m).
+ *
+ * Uses sorted-range pointer scan instead of Set (avoids O(totalChars) Set creation).
+ */
+function injectBg(
+	ansiLine: string,
+	ranges: Array<[number, number]>,
+	baseBg: string,
+	hlBg: string,
+): string {
+	if (!ranges.length) return baseBg + ansiLine + RST;
+
+	let out = baseBg;
+	let vis = 0;
+	let inHL = false;
+	let ri = 0; // current range index
+	let i = 0;
+
+	while (i < ansiLine.length) {
+		if (ansiLine[i] === "\x1b") {
+			const m = ansiLine.indexOf("m", i);
+			if (m !== -1) {
+				const seq = ansiLine.slice(i, m + 1);
+				out += seq;
+				// Re-inject bg after full reset
+				if (seq === "\x1b[0m") out += inHL ? hlBg : baseBg;
+				i = m + 1;
+				continue;
+			}
+		}
+		// Advance past exhausted ranges
+		while (ri < ranges.length && vis >= ranges[ri][1]) ri++;
+		const want = ri < ranges.length && vis >= ranges[ri][0] && vis < ranges[ri][1];
+		if (want !== inHL) { inHL = want; out += inHL ? hlBg : baseBg; }
+		out += ansiLine[i];
+		vis++; i++;
+	}
+	return out + RST;
+}
+
+/** Simple word diff (no syntax hl) — fallback when Shiki isn't available. */
+function plainWordDiff(oldText: string, newText: string): { old: string; new: string } {
+	const parts = Diff.diffWords(oldText, newText);
+	let o = "", n = "";
+	for (const p of parts) {
+		if (p.removed) o += `${BG_DEL_W}${p.value}${RST}${BG_DEL}`;
+		else if (p.added) n += `${BG_ADD_W}${p.value}${RST}${BG_ADD}`;
+		else { o += p.value; n += p.value; }
+	}
+	return { old: o, new: n };
+}
+
+// ---------------------------------------------------------------------------
+// Stacked (unified) view — clean single-column layout
+//
+// Modelled after Shiki diff/GitHub stacked view:
+//   • Single line-number column (shows old num for del/ctx, new num for add)
+//   • Compact gutter: "NNN-│" or "NNN+│" or "NNN │"
+//   • Full-width code — no side-by-side cramming
+//   • Hunk separators as "··· N unmodified lines ···"
+//   • Paired del/add lines adjacent with word-level emphasis
+// ---------------------------------------------------------------------------
+
+async function renderUnified(diff: ParsedDiff, language: BundledLanguage | undefined, max = MAX_RENDER_LINES, dc: DiffColors = DEFAULT_DIFF_COLORS): Promise<string> {
+	if (!diff.lines.length) return "";
+
+	const vis = diff.lines.slice(0, max);
+	const tw = termW();
+	const nw = Math.max(2, String(Math.max(...vis.map(l => l.oldNum ?? l.newNum ?? 0), 0)).length);
+	const gw = nw + 5; // border + num + sign + sp + │ + sp
+	const cw = Math.max(20, tw - gw);
+	const canHL = diff.chars <= MAX_HL_CHARS && vis.length <= MAX_RENDER_LINES;
+
+	// Build separate old/new code blocks for highlighting
+	const oldSrc: string[] = [], newSrc: string[] = [];
+	for (const l of vis) {
+		if (l.type === "ctx" || l.type === "del") oldSrc.push(l.content);
+		if (l.type === "ctx" || l.type === "add") newSrc.push(l.content);
+	}
+	const [oldHL, newHL] = canHL
+		? await Promise.all([hlBlock(oldSrc.join("\n"), language), hlBlock(newSrc.join("\n"), language)])
+		: [oldSrc, newSrc];
+
+	let oI = 0, nI = 0, idx = 0;
+	const out: string[] = [];
+	out.push(rule(tw));
+
+	/** Emit a single stacked row with compact gutter + left border bar. */
+	function emitRow(num: number | null, sign: string, gutterBg: string, signFg: string, body: string, bodyBg = ""): void {
+		const borderFg = sign === "-" ? dc.fgDel : sign === "+" ? dc.fgAdd : "";
+		const border = borderFg ? `${borderFg}${BORDER_BAR}${RST}` : `${BG_DEFAULT} `;
+		const numFg = borderFg || FG_LNUM;
+		const gutter = `${border}${gutterBg}${lnum(num, nw, numFg)}${signFg}${sign}${RST} ${DIVIDER} `;
+		const contGutter = `${border}${gutterBg}${" ".repeat(nw + 1)}${RST} ${DIVIDER} `;
+		const rows = wrapAnsi(tabs(body), cw, adaptiveWrapRows(), bodyBg);
+		out.push(`${gutter}${rows[0]}${RST}`);
+		for (let r = 1; r < rows.length; r++) out.push(`${contGutter}${rows[r]}${RST}`);
+	}
+
+	while (idx < vis.length) {
+		const l = vis[idx];
+
+		// Hunk separator — collapsed context
+		if (l.type === "sep") {
+			const gap = l.newNum;
+			const label = gap && gap > 0 ? ` ${gap} unmodified lines ` : "···";
+			const totalW = Math.min(tw, 72);
+			const pad = Math.max(0, totalW - label.length - 2);
+			const half1 = Math.floor(pad / 2), half2 = pad - half1;
+			out.push(`${FG_DIM}${"─".repeat(half1)}${label}${"─".repeat(half2)}${RST}`);
+			idx++; continue;
+		}
+
+		// Context line — dimmed, single line number
+		if (l.type === "ctx") {
+			const hl = oldHL[oI] ?? l.content;
+			emitRow(l.newNum, " ", BG_DEFAULT, dc.fgCtx, `${BG_DEFAULT}${DIM}${hl}`, BG_DEFAULT);
+			oI++; nI++; idx++; continue;
+		}
+
+		// Collect del/add blocks
+		const dels: Array<{ l: DiffLine; hl: string }> = [];
+		while (idx < vis.length && vis[idx].type === "del") {
+			dels.push({ l: vis[idx], hl: oldHL[oI] ?? vis[idx].content });
+			oI++; idx++;
+		}
+		const adds: Array<{ l: DiffLine; hl: string }> = [];
+		while (idx < vis.length && vis[idx].type === "add") {
+			adds.push({ l: vis[idx], hl: newHL[nI] ?? vis[idx].content });
+			nI++; idx++;
+		}
+
+		// 1:1 paired → word diff emphasis
+		const isPaired = dels.length === 1 && adds.length === 1;
+		const wd = isPaired ? wordDiffAnalysis(dels[0].l.content, adds[0].l.content) : null;
+
+		if (isPaired && wd && wd.similarity >= WORD_DIFF_MIN_SIM && canHL) {
+			const delBody = injectBg(dels[0].hl, wd.oldRanges, BG_DEL, BG_DEL_W);
+			const addBody = injectBg(adds[0].hl, wd.newRanges, BG_ADD, BG_ADD_W);
+			emitRow(dels[0].l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, delBody, BG_DEL);
+			emitRow(adds[0].l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, addBody, BG_ADD);
+			continue;
+		}
+		if (isPaired && wd && wd.similarity >= WORD_DIFF_MIN_SIM && !canHL) {
+			const pwd = plainWordDiff(dels[0].l.content, adds[0].l.content);
+			emitRow(dels[0].l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, `${BG_DEL}${pwd.old}`, BG_DEL);
+			emitRow(adds[0].l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, `${BG_ADD}${pwd.new}`, BG_ADD);
+			continue;
+		}
+
+		// Multi-line blocks — syntax highlighted with diff bg
+		for (const d of dels) {
+			const body = canHL ? `${BG_DEL}${d.hl}` : `${BG_DEL}${d.l.content}`;
+			emitRow(d.l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, body, BG_DEL);
+		}
+		for (const a of adds) {
+			const body = canHL ? `${BG_ADD}${a.hl}` : `${BG_ADD}${a.l.content}`;
+			emitRow(a.l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, body, BG_ADD);
+		}
+	}
+
+	out.push(rule(tw));
+	if (diff.lines.length > vis.length) {
+		out.push(`${FG_DIM}  … ${diff.lines.length - vis.length} more lines${RST}`);
+	}
+	return out.join("\n");
+}
+
+// ---------------------------------------------------------------------------
+// Split view (auto-fallback to unified when narrow)
+// ---------------------------------------------------------------------------
+
+async function renderSplit(diff: ParsedDiff, language: BundledLanguage | undefined, max = MAX_PREVIEW_LINES, dc: DiffColors = DEFAULT_DIFF_COLORS): Promise<string> {
+	const tw = termW();
+	if (!shouldUseSplit(diff, tw, max)) return renderUnified(diff, language, max, dc);
+	if (!diff.lines.length) return "";
+
+	// Build rows
+	type Row = { left: DiffLine | null; right: DiffLine | null };
+	const rows: Row[] = [];
+	let i = 0;
+	while (i < diff.lines.length) {
+		const l = diff.lines[i];
+		if (l.type === "sep" || l.type === "ctx") { rows.push({ left: l, right: l }); i++; continue; }
+		const dels: DiffLine[] = [], adds: DiffLine[] = [];
+		while (i < diff.lines.length && diff.lines[i].type === "del") { dels.push(diff.lines[i]); i++; }
+		while (i < diff.lines.length && diff.lines[i].type === "add") { adds.push(diff.lines[i]); i++; }
+		const n = Math.max(dels.length, adds.length);
+		for (let j = 0; j < n; j++) rows.push({ left: dels[j] ?? null, right: adds[j] ?? null });
+	}
+
+	const vis = rows.slice(0, max);
+	const half = Math.floor((tw - 1) / 2); // -1 for center divider
+	const nw = Math.max(2, String(Math.max(...diff.lines.map(l => l.oldNum ?? l.newNum ?? 0), 0)).length);
+	const gw = nw + 5; // border + num + sign + sp + │ + sp
+	const cw = Math.max(12, half - gw);
+	const canHL = diff.chars <= MAX_HL_CHARS && vis.length * 2 <= MAX_RENDER_LINES * 2;
+
+	// Build separate code blocks per side
+	const leftSrc: string[] = [], rightSrc: string[] = [];
+	for (const r of vis) {
+		if (r.left && r.left.type !== "sep") leftSrc.push(r.left.content);
+		if (r.right && r.right.type !== "sep") rightSrc.push(r.right.content);
+	}
+	const [leftHL, rightHL] = canHL
+		? await Promise.all([hlBlock(leftSrc.join("\n"), language), hlBlock(rightSrc.join("\n"), language)])
+		: [leftSrc, rightSrc];
+
+	let lI = 0, rI = 0;
+	let stripeRow = 0; // tracks row index for diagonal stripe offset
+
+	// Returns { gutter, contGutter, body } for wrapping composition
+	type HalfResult = { gutter: string; contGutter: string; bodyRows: string[] };
+
+	function half_build(line: DiffLine | null, hl: string, ranges: Array<[number, number]> | null, side: "left" | "right"): HalfResult {
+		// Empty filler — diagonal stripes
+		if (!line) {
+			const gw2 = nw + 2; // number + sign + space before │
+			const gPat = FG_STRIPE + "╱".repeat(gw2) + RST;
+			const g = ` ${gPat}${FG_RULE}│${RST} `;
+			return { gutter: g, contGutter: g, bodyRows: [stripes(cw, stripeRow)] };
+		}
+		// Hunk separator
+		if (line.type === "sep") {
+			const gap = line.newNum;
+			const label = gap && gap > 0 ? `··· ${gap} lines ···` : "···";
+			const g = ` ${FG_DIM}${fit("", nw + 2)}${RST}${FG_RULE}│${RST} `;
+			return { gutter: g, contGutter: g, bodyRows: [`${FG_DIM}${fit(label, cw)}${RST}`] };
+		}
+
+		const isDel = line.type === "del", isAdd = line.type === "add";
+		const gBg = isDel ? BG_GUTTER_DEL : isAdd ? BG_GUTTER_ADD : BG_DEFAULT;
+		const cBg = isDel ? BG_DEL : isAdd ? BG_ADD : BG_DEFAULT;
+		const sFg = isDel ? dc.fgDel : isAdd ? dc.fgAdd : dc.fgCtx;
+		const sign = isDel ? "-" : isAdd ? "+" : " ";
+		const num = isDel ? line.oldNum : isAdd ? line.newNum : (side === "left" ? line.oldNum : line.newNum);
+
+		// Border bar + colored line numbers for changed lines
+		const borderFg = isDel ? dc.fgDel : isAdd ? dc.fgAdd : "";
+		const border = borderFg ? `${borderFg}${BORDER_BAR}${RST}` : ` ${BG_DEFAULT}`;
+		const numFg = borderFg || FG_LNUM;
+
+		let body: string;
+		if (ranges && ranges.length > 0) {
+			body = injectBg(hl, ranges, cBg, isDel ? BG_DEL_W : BG_ADD_W);
+		} else if (isDel || isAdd) {
+			body = `${cBg}${hl}`;
+		} else {
+			body = `${BG_DEFAULT}${DIM}${hl}`;
+		}
+
+		const gutter = `${border}${gBg}${lnum(num, nw, numFg)}${sFg}${BOLD}${sign}${RST} ${FG_RULE}│${RST} `;
+		const contGutter = `${border}${gBg}${" ".repeat(nw + 1)}${RST} ${FG_RULE}│${RST} `;
+		const bodyRows = wrapAnsi(tabs(body), cw, adaptiveWrapRows(), cBg);
+		return { gutter, contGutter, bodyRows };
+	}
+
+	const out: string[] = [];
+	// Column headers — "old" / "new" positioned above line numbers
+	const hdrOld = `${" ".repeat(Math.max(0, nw - 2))}${dc.fgDel}${DIM}old${RST}`;
+	const hdrNew = `${" ".repeat(Math.max(0, nw - 2))}${dc.fgAdd}${DIM}new${RST}`;
+	out.push(`${hdrOld}${" ".repeat(Math.max(0, half - nw - 1))}${FG_RULE}┊${RST}${hdrNew}`);
+	out.push(`${rule(half)}${FG_RULE}┊${RST}${rule(half)}`);
+
+	for (const r of vis) {
+		const leftLine = r.left, rightLine = r.right;
+		const paired = leftLine && rightLine && leftLine.type === "del" && rightLine.type === "add";
+		const wd = paired ? wordDiffAnalysis(leftLine.content, rightLine.content) : null;
+
+		let lResult: HalfResult, rResult: HalfResult;
+
+		if (paired && wd && wd.similarity >= WORD_DIFF_MIN_SIM && canHL) {
+			const lhl = leftHL[lI++] ?? leftLine.content;
+			const rhl = rightHL[rI++] ?? rightLine.content;
+			lResult = half_build(leftLine, lhl, wd.oldRanges, "left");
+			rResult = half_build(rightLine, rhl, wd.newRanges, "right");
+		} else if (paired && wd && wd.similarity >= WORD_DIFF_MIN_SIM && !canHL) {
+			const pwd = plainWordDiff(leftLine.content, rightLine.content);
+			lI++; rI++;
+			lResult = half_build(leftLine, pwd.old, null, "left");
+			rResult = half_build(rightLine, pwd.new, null, "right");
+		} else {
+			const lhl = (leftLine && leftLine.type !== "sep") ? (leftHL[lI++] ?? leftLine?.content ?? "") : "";
+			const rhl = (rightLine && rightLine.type !== "sep") ? (rightHL[rI++] ?? rightLine?.content ?? "") : "";
+			lResult = half_build(leftLine, lhl, null, "left");
+			rResult = half_build(rightLine, rhl, null, "right");
+		}
+
+		// Compose wrapped rows — pad shorter side with striped continuation rows
+		const maxRows = Math.max(lResult.bodyRows.length, rResult.bodyRows.length);
+		const leftIsEmpty = !r.left;
+		const rightIsEmpty = !r.right;
+		for (let row = 0; row < maxRows; row++) {
+			const lg = row === 0 ? lResult.gutter : lResult.contGutter;
+			const rg = row === 0 ? rResult.gutter : rResult.contGutter;
+			const lb = lResult.bodyRows[row] ?? (leftIsEmpty ? stripes(cw, stripeRow) : `${BG_EMPTY}${" ".repeat(cw)}${RST}`);
+			const rb = rResult.bodyRows[row] ?? (rightIsEmpty ? stripes(cw, stripeRow) : `${BG_EMPTY}${" ".repeat(cw)}${RST}`);
+			out.push(`${lg}${lb}${DIVIDER}${rg}${rb}`);
+			stripeRow++;
+		}
+	}
+
+	out.push(`${rule(half)}${FG_RULE}┊${RST}${rule(half)}`);
+	if (rows.length > vis.length) {
+		out.push(`${FG_DIM}  … ${rows.length - vis.length} more lines${RST}`);
+	}
+	return out.join("\n");
+}
+
+// ---------------------------------------------------------------------------
+// Extension
+// ---------------------------------------------------------------------------
+
+export const __testing = {
+	normalizeShikiContrast,
+	parseDiff,
+	renderSplit,
+	renderUnified,
+};
+
+export default function diffRendererExtension(pi: any): void {
+	let createWriteTool: any, createEditTool: any, TextComponent: any;
+	try {
+		const sdk = require("@mariozechner/pi-coding-agent");
+		createWriteTool = sdk.createWriteTool;
+		createEditTool = sdk.createEditTool;
+		TextComponent = require("@mariozechner/pi-tui").Text;
+	} catch { return; }
+	if (!createWriteTool || !createEditTool || !TextComponent) return;
+
+	const cwd = process.cwd();
+	const home = process.env.HOME ?? "";
+	const sp = (p: string) => shortPath(cwd, home, p);
+
+	// =======================================================================
+	// write
+	// =======================================================================
+
+	const origWrite = createWriteTool(cwd);
+
+	pi.registerTool({
+		...origWrite,
+		name: "write",
+
+		async execute(tid: string, params: any, sig: any, upd: any, ctx: any) {
+			const fp = params.path ?? params.file_path ?? "";
+			let old: string | null = null;
+			try { if (fp && existsSync(fp)) old = readFileSync(fp, "utf-8"); } catch { old = null; }
+
+			const result = await origWrite.execute(tid, params, sig, upd, ctx);
+			const content = params.content ?? "";
+
+			// Store in details — the only custom field TUI preserves in renderResult
+			if (old !== null && old !== content) {
+				const diff = parseDiff(old, content);
+				const lg = lang(fp);
+				(result as any).details = { _type: "diff", summary: summarize(diff.added, diff.removed), diff, language: lg };
+			} else if (old === null) {
+				const lineCount = content ? content.split("\n").length : 0;
+				(result as any).details = { _type: "new", lines: lineCount, content: content ?? "", filePath: fp };
+			} else if (old === content) {
+				(result as any).details = { _type: "noChange" };
+			}
+			return result;
+		},
+
+		renderCall(args: any, theme: any, ctx: any) {
+			const fp = args?.path ?? args?.file_path ?? "";
+			const isNew = !fp || !existsSync(fp);
+			const label = isNew ? "create" : "write";
+			const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+			const hdr = `${theme.fg("toolTitle", theme.bold(label))} ${theme.fg("accent", sp(fp))}`;
+
+			// Streaming
+			if (args?.content && !ctx.argsComplete) {
+				const n = String(args.content).split("\n").length;
+				text.setText(`${hdr}  ${theme.fg("muted", `(${n} lines…)`)}`);
+				return text;
+			}
+
+			// New file preview with Shiki
+			if (args?.content && ctx.argsComplete && isNew) {
+				const previewKey = `create:${fp}:${String(args.content).length}`;
+				if (ctx.state._previewKey !== previewKey) {
+					ctx.state._previewKey = previewKey;
+					ctx.state._previewText = hdr;
+					const lg = lang(fp);
+					hlBlock(args.content, lg).then((lines: string[]) => {
+						if (ctx.state._previewKey !== previewKey) return;
+						const maxShow = ctx.expanded ? lines.length : 16;
+						const preview = lines.slice(0, maxShow).join("\n");
+						const rem = lines.length - maxShow;
+						let out = `${hdr}\n\n${preview}`;
+						if (rem > 0) out += `\n${theme.fg("muted", `… (${rem} more lines, ${lines.length} total)`)}`;
+						ctx.state._previewText = out;
+						ctx.invalidate();
+					}).catch(() => {});
+				}
+				text.setText(ctx.state._previewText ?? hdr);
+				return text;
+			}
+
+			text.setText(hdr);
+			return text;
+		},
+
+		renderResult(result: any, _opt: any, theme: any, ctx: any) {
+			const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+			if (ctx.isError) {
+				const e = result.content?.filter((c: any) => c.type === "text").map((c: any) => c.text || "").join("\n") ?? "Error";
+				text.setText(`\n${theme.fg("error", e)}`);
+				return text;
+			}
+			const d = result.details;
+			if (d?._type === "diff") {
+				const w = termW();
+				const key = `wd:${w}:${d.summary}:${d.diff?.lines?.length ?? 0}:${d.language ?? ""}`;
+				if (ctx.state._wdk !== key) {
+					ctx.state._wdk = key;
+					ctx.state._wdt = `  ${d.summary}\n${theme.fg("muted", "  rendering diff…")}`;
+					const dc = resolveDiffColors(theme);
+					renderSplit(d.diff, d.language, MAX_RENDER_LINES, dc).then((rendered: string) => {
+						if (ctx.state._wdk !== key) return;
+						ctx.state._wdt = `  ${d.summary}\n${rendered}`;
+						ctx.invalidate();
+					}).catch(() => {
+						if (ctx.state._wdk !== key) return;
+						ctx.state._wdt = `  ${d.summary}`;
+						ctx.invalidate();
+					});
+				}
+				text.setText(ctx.state._wdt ?? `  ${d.summary}`);
+				return text;
+			}
+			if (d?._type === "noChange") {
+				text.setText(`  ${theme.fg("muted", "✓ no changes")}`);
+				return text;
+			}
+			if (d?._type === "new") {
+				const { lines: lineCount, content: rawContent, filePath: fp } = d;
+				const pk = `nf:${fp}:${lineCount}`;
+				if (ctx.state._nfk !== pk) {
+					ctx.state._nfk = pk;
+					ctx.state._nft = `  ${theme.fg("success", `✓ new file (${lineCount} lines)`)}`;
+					const lg = lang(fp);
+					if (rawContent) {
+						hlBlock(rawContent, lg).then((hlLines: string[]) => {
+							if (ctx.state._nfk !== pk) return;
+							const maxShow = ctx.expanded ? hlLines.length : 12;
+							const preview = hlLines.slice(0, maxShow).join("\n");
+							const rem = hlLines.length - maxShow;
+							let out = `  ${theme.fg("success", `✓ new file (${lineCount} lines)`)}\n${preview}`;
+							if (rem > 0) out += `\n${theme.fg("muted", `  … ${rem} more lines`)}`;
+							ctx.state._nft = out;
+							ctx.invalidate();
+						}).catch(() => {});
+					}
+				}
+				text.setText(ctx.state._nft ?? `  ${theme.fg("success", `✓ new file (${lineCount} lines)`)}`);
+				return text;
+			}
+			text.setText(`  ${theme.fg("dim", String(result?.content?.[0]?.text ?? "written").slice(0, 120))}`);
+			return text;
+		},
+	});
+
+	// =======================================================================
+	// edit
+	// =======================================================================
+
+	const origEdit = createEditTool(cwd);
+
+	pi.registerTool({
+		...origEdit,
+		name: "edit",
+
+		async execute(tid: string, params: any, sig: any, upd: any, ctx: any) {
+			const fp = params.path ?? params.file_path ?? "";
+			const oldText = params.oldText ?? params.old_text ?? "";
+			const newText = params.newText ?? params.new_text ?? "";
+
+			const result = await origEdit.execute(tid, params, sig, upd, ctx);
+
+			if (oldText && oldText !== newText) {
+				let editLine = 0;
+				try {
+					if (fp && existsSync(fp)) {
+						const f = readFileSync(fp, "utf-8");
+						const idx = f.indexOf(newText);
+						if (idx >= 0) editLine = f.slice(0, idx).split("\n").length;
+					}
+				} catch { editLine = 0; }
+				const diff = parseDiff(oldText, newText);
+				(result as any).details = { _type: "editInfo", summary: summarize(diff.added, diff.removed), editLine };
+			}
+			return result;
+		},
+
+		renderCall(args: any, theme: any, ctx: any) {
+			const fp = args?.path ?? args?.file_path ?? "";
+			const oldText = args?.oldText ?? args?.old_text ?? "";
+			const newText = args?.newText ?? args?.new_text ?? "";
+			const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+			const hdr = `${theme.fg("toolTitle", theme.bold("edit"))} ${theme.fg("accent", sp(fp))}`;
+
+			if (!(ctx.argsComplete && oldText && oldText !== newText)) {
+				text.setText(hdr);
+				return text;
+			}
+
+			const pk = JSON.stringify({ fp, oldText, newText, w: termW() });
+			if (ctx.state._pk !== pk) {
+				ctx.state._pk = pk;
+				ctx.state._pt = `${hdr}  ${theme.fg("muted", "(rendering…)")}`;
+				const lg = lang(fp);
+				const diff = parseDiff(oldText, newText);
+				const dc = resolveDiffColors(theme);
+				renderSplit(diff, lg, MAX_PREVIEW_LINES, dc).then((rendered) => {
+					if (ctx.state._pk !== pk) return;
+					ctx.state._pt = `${hdr}\n${summarize(diff.added, diff.removed)}\n${rendered}`;
+					ctx.invalidate();
+				}).catch(() => {
+					if (ctx.state._pk !== pk) return;
+					// Fallback: plain word diff
+					const diff2 = parseDiff(oldText, newText);
+					ctx.state._pt = `${hdr}  ${summarize(diff2.added, diff2.removed)}`;
+					ctx.invalidate();
+				});
+			}
+
+			text.setText(ctx.state._pt ?? hdr);
+			return text;
+		},
+
+		renderResult(result: any, _opt: any, theme: any, ctx: any) {
+			const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+			if (ctx.isError) {
+				const e = result.content?.filter((c: any) => c.type === "text").map((c: any) => c.text || "").join("\n") ?? "Error";
+				text.setText(`\n${theme.fg("error", e)}`);
+				return text;
+			}
+			if (result.details?._type === "editInfo") {
+				const { summary: s, editLine } = result.details;
+				const loc = editLine > 0 ? ` ${theme.fg("muted", `at line ${editLine}`)}` : "";
+				const content = `  ${s}${loc}`;
+				const vis = content.replace(ANSI_RE, "").length;
+				const pad = Math.max(0, termW() - vis);
+				text.setText(`${content}${" ".repeat(pad)}`);
+				return text;
+			}
+			text.setText(`  ${theme.fg("dim", String(result?.content?.[0]?.text ?? "edited").slice(0, 120))}`);
+			return text;
+		},
+	});
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist", "test"]
+}