@quandev104/pi-style 0.1.1

package/extension-src/pi-style/shared/split-diff.ts

@@ -0,0 +1,692 @@
+// Split-diff renderer — side-by-side diff view with syntax highlighting and
+// inline emphasis.
+
+import { highlightCode } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+
+import { stripAnsi } from "./ansi.js";
+import { safeTruncateToWidth, safeVisibleWidth } from "./render-budget.js";
+
+// ── Types ──────────────────────────────────────────────────────────
+
+type DiffLine = {
+	prefix: "+" | "-" | " ";
+	line: string;
+	lineNumber: string;
+};
+
+type SplitDiffRow = {
+	kind: "context" | "changed" | "added" | "removed";
+	left?: DiffLine;
+	right?: DiffLine;
+};
+
+type CellLineKind = "add" | "remove" | "context";
+
+type DiffSpan = { start: number; end: number };
+
+type RgbColor = { r: number; g: number; b: number };
+
+/** Structural view of the theme as used by the split-diff renderer. */
+export interface SplitDiffTheme {
+	fg(color: string, text: string): string;
+	getBgAnsi?(color: string): string;
+	getFgAnsi?(color: string): string;
+}
+
+type DiffPalette = {
+	addRowBgAnsi: string;
+	removeRowBgAnsi: string;
+	addEmphasisBgAnsi: string;
+	removeEmphasisBgAnsi: string;
+};
+
+// ── Constants ──────────────────────────────────────────────────────
+
+const ESC = "\x1b";
+const BG_ANSI_PATTERN = new RegExp(`${ESC}\\[(?:4\\d|10\\d|48;5;\\d{1,3}|48;2;\\d{1,3};\\d{1,3};\\d{1,3}|49)m`, "g");
+const CONTROL_CHARS = "\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F";
+
+const ADD_ROW_BACKGROUND_MIX_RATIO = 0.24;
+const REMOVE_ROW_BACKGROUND_MIX_RATIO = 0.12;
+const ADD_INLINE_EMPHASIS_MIX_RATIO = 0.44;
+const REMOVE_INLINE_EMPHASIS_MIX_RATIO = 0.26;
+
+// ── ANSI color utilities (diff-specific) ───────────────────────────
+
+function ansi256ToRgb(code: number): RgbColor {
+	if (code <= 15) {
+		const base16: RgbColor[] = [
+			{ r: 0, g: 0, b: 0 },
+			{ r: 128, g: 0, b: 0 },
+			{ r: 0, g: 128, b: 0 },
+			{ r: 128, g: 128, b: 0 },
+			{ r: 0, g: 0, b: 128 },
+			{ r: 128, g: 0, b: 128 },
+			{ r: 0, g: 128, b: 128 },
+			{ r: 192, g: 192, b: 192 },
+			{ r: 128, g: 128, b: 128 },
+			{ r: 255, g: 0, b: 0 },
+			{ r: 0, g: 255, b: 0 },
+			{ r: 255, g: 255, b: 0 },
+			{ r: 0, g: 0, b: 255 },
+			{ r: 255, g: 0, b: 255 },
+			{ r: 0, g: 255, b: 255 },
+			{ r: 255, g: 255, b: 255 },
+		];
+		return base16[code] ?? { r: 255, g: 255, b: 255 };
+	}
+	if (code >= 232) {
+		const value = Math.max(0, Math.min(255, 8 + (code - 232) * 10));
+		return { r: value, g: value, b: value };
+	}
+	const cube = code - 16;
+	const levels = [0, 95, 135, 175, 215, 255];
+	const blue = cube % 6;
+	const green = Math.floor(cube / 6) % 6;
+	const red = Math.floor(cube / 36) % 6;
+	return {
+		r: levels[red] ?? 0,
+		g: levels[green] ?? 0,
+		b: levels[blue] ?? 0,
+	};
+}
+
+function parseAnsiColorCode(ansi: string | undefined): RgbColor | null {
+	if (!ansi) return null;
+	const rgbMatch = new RegExp(`${ESC}\\[(?:3|4)8;2;(\\d{1,3});(\\d{1,3});(\\d{1,3})m`).exec(ansi);
+	if (rgbMatch) {
+		const r = Number.parseInt(rgbMatch[1] ?? "0", 10);
+		const g = Number.parseInt(rgbMatch[2] ?? "0", 10);
+		const b = Number.parseInt(rgbMatch[3] ?? "0", 10);
+		return { r, g, b };
+	}
+	const bitMatch = new RegExp(`${ESC}\\[(?:3|4)8;5;(\\d{1,3})m`).exec(ansi);
+	if (bitMatch) {
+		const code = Number.parseInt(bitMatch[1] ?? "0", 10);
+		return ansi256ToRgb(code);
+	}
+	return null;
+}
+
+function rgbToBgAnsi(color: RgbColor): string {
+	const r = Math.max(0, Math.min(255, Math.round(color.r)));
+	const g = Math.max(0, Math.min(255, Math.round(color.g)));
+	const b = Math.max(0, Math.min(255, Math.round(color.b)));
+	return `\x1b[48;2;${r};${g};${b}m`;
+}
+
+function mixRgb(base: RgbColor, tint: RgbColor, ratio: number): RgbColor {
+	const clamped = Math.max(0, Math.min(1, ratio));
+	return {
+		r: base.r * (1 - clamped) + tint.r * clamped,
+		g: base.g * (1 - clamped) + tint.g * clamped,
+		b: base.b * (1 - clamped) + tint.b * clamped,
+	};
+}
+
+function resolveDiffPalette(theme: SplitDiffTheme): DiffPalette {
+	const baseBg = parseAnsiColorCode(theme.getBgAnsi?.("toolSuccessBg")) ??
+		parseAnsiColorCode(theme.getBgAnsi?.("toolPendingBg")) ?? { r: 32, g: 35, b: 42 };
+	const addFg = parseAnsiColorCode(theme.getFgAnsi?.("toolDiffAdded")) ?? { r: 88, g: 173, b: 88 };
+	const removeFg = parseAnsiColorCode(theme.getFgAnsi?.("toolDiffRemoved")) ?? { r: 196, g: 98, b: 98 };
+
+	const addRowBg = mixRgb(baseBg, addFg, ADD_ROW_BACKGROUND_MIX_RATIO);
+	const removeRowBg = mixRgb(baseBg, removeFg, REMOVE_ROW_BACKGROUND_MIX_RATIO);
+	const addEmphasisBg = mixRgb(baseBg, addFg, ADD_INLINE_EMPHASIS_MIX_RATIO);
+	const removeEmphasisBg = mixRgb(baseBg, removeFg, REMOVE_INLINE_EMPHASIS_MIX_RATIO);
+
+	return {
+		addRowBgAnsi: rgbToBgAnsi(addRowBg),
+		removeRowBgAnsi: rgbToBgAnsi(removeRowBg),
+		addEmphasisBgAnsi: rgbToBgAnsi(addEmphasisBg),
+		removeEmphasisBgAnsi: rgbToBgAnsi(removeEmphasisBg),
+	};
+}
+
+// ── ANSI background helpers ────────────────────────────────────────
+
+function keepBackgroundAcrossResets(text: string, rowBgAnsi: string): string {
+	if (!text) return text;
+
+	return text.replace(new RegExp(`${ESC}\\[([0-9;]*)m`, "g"), (sequence, rawCodes) => {
+		const split = String(rawCodes ?? "")
+			.split(";")
+			.filter(Boolean);
+		const codes = split.length > 0 ? split : ["0"]; // ESC[m == reset
+		const hasGlobalReset = codes.includes("0");
+		const hasBgReset = codes.includes("49");
+		if (!hasGlobalReset && !hasBgReset) return sequence;
+
+		const rebuiltCodes = codes.filter((code: string) => code !== "49");
+		const rebuilt = rebuiltCodes.length > 0 ? `\x1b[${rebuiltCodes.join(";")}m` : "";
+		return `${rebuilt}${rowBgAnsi}`;
+	});
+}
+
+function applyBackgroundToVisibleRange(
+	ansiText: string,
+	start: number,
+	end: number,
+	backgroundAnsi: string,
+	restoreBackgroundAnsi: string,
+): string {
+	if (!ansiText || start >= end || end <= 0) return ansiText;
+
+	let output = "";
+	let visibleIndex = 0;
+	let index = 0;
+	let inRange = false;
+
+	while (index < ansiText.length) {
+		if (ansiText[index] === "\x1b") {
+			const sequenceEnd = ansiText.indexOf("m", index);
+			if (sequenceEnd !== -1) {
+				output += ansiText.slice(index, sequenceEnd + 1);
+				index = sequenceEnd + 1;
+				continue;
+			}
+		}
+
+		if (visibleIndex === start && !inRange) {
+			output += backgroundAnsi;
+			inRange = true;
+		}
+		if (visibleIndex === end && inRange) {
+			output += restoreBackgroundAnsi;
+			inRange = false;
+		}
+
+		output += ansiText[index] ?? "";
+		visibleIndex++;
+		index++;
+	}
+
+	if (inRange) output += restoreBackgroundAnsi;
+	return output;
+}
+
+// ── Text utilities ─────────────────────────────────────────────────
+
+function sanitizeSingleLineText(value: string): string {
+	return value
+		.replace(/\r/g, "")
+		.replace(/\n/g, "")
+		.replace(new RegExp(`[${CONTROL_CHARS}]`, "g"), "");
+}
+
+function stripInlineBreaksPreserveAnsi(value: string): string {
+	return value.replace(/\r/g, "").replace(/\n/g, "");
+}
+
+function padRight(value: string, width: number): string {
+	const visual = safeVisibleWidth(stripAnsi(value));
+	if (visual >= width) return value;
+	return value + " ".repeat(width - visual);
+}
+
+function fitToWidth(value: string, width: number): string {
+	return padRight(safeTruncateToWidth(value, width), width);
+}
+
+function padRenderedLineWidth(line: string, width: number): string {
+	const safeWidth = Math.max(1, width);
+	const current = safeVisibleWidth(stripAnsi(line));
+	if (current >= safeWidth) return line;
+	return line + " ".repeat(safeWidth - current);
+}
+
+function wrapPlainText(text: string, width: number): string[] {
+	const safeWidth = Math.max(1, width);
+	const safeText = sanitizeSingleLineText(text);
+	if (!safeText) return [""];
+
+	const lines: string[] = [];
+	let cursor = 0;
+
+	while (cursor < safeText.length) {
+		const remaining = safeText.length - cursor;
+		if (remaining <= safeWidth) {
+			lines.push(safeText.slice(cursor));
+			break;
+		}
+
+		const window = safeText.slice(cursor, cursor + safeWidth);
+		const breakOnSpace = window.lastIndexOf(" ");
+
+		if (breakOnSpace > 0) {
+			const next = breakOnSpace + 1; // keep the space so offsets stay stable for inline diff spans
+			lines.push(safeText.slice(cursor, cursor + next));
+			cursor += next;
+			continue;
+		}
+
+		// Fallback for long uninterrupted tokens (paths, hashes, etc.)
+		lines.push(window);
+		cursor += safeWidth;
+	}
+
+	return lines.length > 0 ? lines : [""];
+}
+
+// ── Diff parsing ───────────────────────────────────────────────────
+
+function parseLineNumber(value: string): number | undefined {
+	const trimmed = value.trim();
+	if (!/^\d+$/.test(trimmed)) return undefined;
+	const parsed = Number.parseInt(trimmed, 10);
+	return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function makeDiffLine(prefix: "+" | "-" | " ", lineNumber: string | number | undefined, line: string): DiffLine {
+	return {
+		prefix,
+		lineNumber: lineNumber === undefined ? "" : String(lineNumber),
+		line,
+	};
+}
+
+function parseDiffLine(rawLine: string): DiffLine | undefined {
+	const match = rawLine.match(/^([+\- ])\s?(.*)$/);
+	if (!match) return undefined;
+	const [, prefix, rest = ""] = match;
+	if (prefix !== "+" && prefix !== "-" && prefix !== " ") return undefined;
+
+	const gutterMatch = rest.match(/^(\d+)\s(.*)$/);
+	const lineNumber = gutterMatch?.[1] ?? "";
+	const line = gutterMatch?.[2] ?? rest;
+	const cleanLineNumber = sanitizeSingleLineText(lineNumber);
+	const cleanLine = sanitizeSingleLineText(line).replace(/\t/g, "    ");
+	return { prefix, lineNumber: cleanLineNumber, line: cleanLine };
+}
+
+function computeInlineDiffSpans(leftLine: string, rightLine: string): { left: DiffSpan[]; right: DiffSpan[] } {
+	if (leftLine === rightLine) return { left: [], right: [] };
+	let start = 0;
+	const minLen = Math.min(leftLine.length, rightLine.length);
+	while (start < minLen && leftLine[start] === rightLine[start]) start++;
+
+	let leftEnd = leftLine.length;
+	let rightEnd = rightLine.length;
+	while (leftEnd > start && rightEnd > start && leftLine[leftEnd - 1] === rightLine[rightEnd - 1]) {
+		leftEnd--;
+		rightEnd--;
+	}
+
+	const leftSpan = leftEnd > start ? [{ start, end: leftEnd }] : [];
+	const rightSpan = rightEnd > start ? [{ start, end: rightEnd }] : [];
+	return { left: leftSpan, right: rightSpan };
+}
+
+// ── Exported helpers ───────────────────────────────────────────────
+
+export function buildSplitRows(diff: string): SplitDiffRow[] {
+	const rows: SplitDiffRow[] = [];
+	const pendingLeft: DiffLine[] = [];
+	const pendingRight: DiffLine[] = [];
+	let oldCursor: number | undefined;
+	let newCursor: number | undefined;
+
+	const flushPending = () => {
+		while (pendingLeft.length > 0 || pendingRight.length > 0) {
+			const left = pendingLeft.shift();
+			const right = pendingRight.shift();
+			if (left && right) rows.push({ kind: "changed", left, right });
+			else if (left) rows.push({ kind: "removed", left });
+			else if (right) rows.push({ kind: "added", right });
+		}
+	};
+
+	for (const rawLine of diff.split("\n")) {
+		const parsed = parseDiffLine(rawLine);
+		if (!parsed) continue;
+
+		const parsedNum = parseLineNumber(parsed.lineNumber);
+		if (parsed.prefix === "-") {
+			const oldNum = parsedNum ?? oldCursor;
+			if (oldNum !== undefined) oldCursor = oldNum + 1;
+			pendingLeft.push(makeDiffLine("-", oldNum, parsed.line));
+			continue;
+		}
+		if (parsed.prefix === "+") {
+			const newNum = parsedNum ?? newCursor;
+			if (newNum !== undefined) newCursor = newNum + 1;
+			pendingRight.push(makeDiffLine("+", newNum, parsed.line));
+			continue;
+		}
+
+		flushPending();
+
+		const oldNum = parsedNum ?? oldCursor;
+		const newNum = newCursor ?? oldNum;
+		if (oldNum !== undefined) oldCursor = oldNum + 1;
+		if (newNum !== undefined) newCursor = newNum + 1;
+
+		rows.push({
+			kind: "context",
+			left: makeDiffLine(" ", oldNum, parsed.line),
+			right: makeDiffLine(" ", newNum, parsed.line),
+		});
+	}
+
+	flushPending();
+	return rows;
+}
+
+export function countDiffStats(diff: string): { additions: number; removals: number } {
+	let additions = 0;
+	let removals = 0;
+	for (const line of diff.split("\n")) {
+		if (line.startsWith("+++") || line.startsWith("---")) continue;
+		if (line.startsWith("+")) additions += 1;
+		if (line.startsWith("-")) removals += 1;
+	}
+	return { additions, removals };
+}
+
+export function renderDiffMeter(theme: SplitDiffTheme, additions: number, removals: number, width = 20): string {
+	const total = additions + removals;
+	if (total <= 0) return "";
+
+	const addBlocks = Math.round((additions / total) * width);
+	const removeBlocks = Math.max(0, width - addBlocks);
+	const addBar = addBlocks > 0 ? theme.fg("toolDiffAdded", "━".repeat(addBlocks)) : "";
+	const removeBar = removeBlocks > 0 ? theme.fg("toolDiffRemoved", "━".repeat(removeBlocks)) : "";
+	return `${theme.fg("dim", "[")}${addBar}${removeBar}${theme.fg("dim", "]")}`;
+}
+
+export function extractEditedPath(message: string): string | undefined {
+	const m = message.match(/Successfully replaced (?:text|\d+ block\(s\)|lines L\d+-\d+) in (.+)\.$/);
+	return m?.[1];
+}
+
+export function firstText(content: Array<{ type: string; text?: string }>): string {
+	for (const part of content) {
+		if (part.type === "text" && typeof part.text === "string") {
+			return part.text;
+		}
+	}
+	return "";
+}
+
+// ── SplitDiffComponent ─────────────────────────────────────────────
+
+export class SplitDiffComponent implements Component {
+	private cacheWidth: number | undefined;
+	private cacheLines: string[] | undefined;
+	private readonly lineNumberWidth: number;
+	private readonly highlightCache = new Map<string, string>();
+	private readonly inlineHighlights = new WeakMap<DiffLine, DiffSpan[]>();
+	private readonly palette: DiffPalette;
+	private readonly containerBgAnsi: string;
+
+	constructor(
+		private readonly theme: SplitDiffTheme,
+		private readonly rows: SplitDiffRow[],
+		private readonly maxRows: number,
+		private readonly language?: string,
+	) {
+		let maxDigits = 3;
+		for (const row of rows) {
+			const leftDigits = row.left?.lineNumber.trim().length ?? 0;
+			const rightDigits = row.right?.lineNumber.trim().length ?? 0;
+			maxDigits = Math.max(maxDigits, leftDigits, rightDigits);
+
+			if (row.kind === "changed" && row.left && row.right) {
+				const spans = computeInlineDiffSpans(row.left.line, row.right.line);
+				if (spans.left.length > 0) this.inlineHighlights.set(row.left, spans.left);
+				if (spans.right.length > 0) this.inlineHighlights.set(row.right, spans.right);
+			}
+		}
+		this.lineNumberWidth = maxDigits;
+		this.palette = resolveDiffPalette(theme);
+		this.containerBgAnsi = theme.getBgAnsi?.("toolSuccessBg") ?? "";
+	}
+
+	private getCellLineKind(kind: SplitDiffRow["kind"], side: "left" | "right"): CellLineKind {
+		if (kind === "changed") return side === "left" ? "remove" : "add";
+		if (kind === "removed" && side === "left") return "remove";
+		if (kind === "added" && side === "right") return "add";
+		return "context";
+	}
+
+	private getVisualLineKind(kind: SplitDiffRow["kind"], side: "left" | "right", line?: DiffLine): CellLineKind {
+		const base = this.getCellLineKind(kind, side);
+		if ((kind === "added" || kind === "removed") && (line?.line ?? "") === "") {
+			return "context";
+		}
+		return base;
+	}
+
+	private getNumberColor(lineKind: CellLineKind): "toolDiffRemoved" | "toolDiffAdded" | "dim" {
+		if (lineKind === "remove") return "toolDiffRemoved";
+		if (lineKind === "add") return "toolDiffAdded";
+		return "dim";
+	}
+
+	private getRowBackground(lineKind: CellLineKind): string | undefined {
+		if (lineKind === "add") return this.palette.addRowBgAnsi;
+		if (lineKind === "remove") return this.palette.removeRowBgAnsi;
+		return undefined;
+	}
+
+	private getEmphasisBackground(lineKind: CellLineKind): string | undefined {
+		if (lineKind === "add") return this.palette.addEmphasisBgAnsi;
+		if (lineKind === "remove") return this.palette.removeEmphasisBgAnsi;
+		return undefined;
+	}
+
+	private getCellFillBackground(kind: SplitDiffRow["kind"], side: "left" | "right"): string | undefined {
+		switch (kind) {
+			case "changed":
+				return side === "left" ? this.palette.removeRowBgAnsi : this.palette.addRowBgAnsi;
+			case "removed":
+				return side === "left" ? this.palette.removeRowBgAnsi : undefined;
+			case "added":
+				return side === "right" ? this.palette.addRowBgAnsi : undefined;
+			default:
+				return undefined;
+		}
+	}
+
+	private blankCell(kind: SplitDiffRow["kind"], side: "left" | "right", columnWidth: number): string {
+		const lineKind = this.getCellLineKind(kind, side);
+		const markerChar = lineKind === "add" || lineKind === "remove" ? "▌" : " ";
+		const markerColor =
+			lineKind === "add" ? "toolDiffAdded" : lineKind === "remove" ? "toolDiffRemoved" : "borderMuted";
+		const marker = this.theme.fg(markerColor, markerChar);
+		const lineNumber = this.theme.fg("dim", " ".repeat(this.lineNumberWidth));
+		const divider = this.theme.fg("borderMuted", " │ ");
+		const prefix = `${marker} ${lineNumber}${divider}`;
+		const prefixPlain = `${markerChar} ${" ".repeat(this.lineNumberWidth)} │ `;
+		const tailWidth = Math.max(0, columnWidth - safeVisibleWidth(prefixPlain));
+		let rendered = prefix + " ".repeat(tailWidth);
+
+		const bg = this.getCellFillBackground(kind, side);
+		if (!bg) return padRenderedLineWidth(rendered, columnWidth);
+		rendered = `${bg}${keepBackgroundAcrossResets(rendered, bg)}${this.containerBgAnsi}`;
+		return padRenderedLineWidth(rendered, columnWidth);
+	}
+
+	private syntaxHighlight(line: string): string {
+		if (!this.language) return stripInlineBreaksPreserveAnsi(line);
+		const safeLine = sanitizeSingleLineText(line);
+		const key = `${this.language}\n${safeLine}`;
+		const cached = this.highlightCache.get(key);
+		if (cached) return cached;
+
+		let highlighted = safeLine;
+		try {
+			highlighted = highlightCode(safeLine, this.language)[0] ?? safeLine;
+			highlighted = stripInlineBreaksPreserveAnsi(highlighted).replace(BG_ANSI_PATTERN, "");
+		} catch {
+			highlighted = safeLine;
+		}
+		this.highlightCache.set(key, highlighted);
+		return highlighted;
+	}
+
+	private formatCellLines(
+		kind: SplitDiffRow["kind"],
+		side: "left" | "right",
+		line: DiffLine | undefined,
+		columnWidth: number,
+	): string[] {
+		if (!line) return [this.blankCell(kind, side, columnWidth)];
+
+		const lineKind = this.getVisualLineKind(kind, side, line);
+		const markerChar = lineKind === "add" || lineKind === "remove" ? "▌" : " ";
+		const markerColor =
+			lineKind === "add" ? "toolDiffAdded" : lineKind === "remove" ? "toolDiffRemoved" : "borderMuted";
+		const lineNumber = line.lineNumber.trim().padStart(this.lineNumberWidth, " ");
+
+		const firstPrefixAnsi =
+			this.theme.fg(markerColor, markerChar) +
+			" " +
+			this.theme.fg(this.getNumberColor(lineKind), lineNumber) +
+			this.theme.fg("borderMuted", " │ ");
+		const firstPrefixPlain = `${markerChar} ${lineNumber} │ `;
+
+		const contPrefixAnsi =
+			this.theme.fg(markerColor, markerChar) +
+			" " +
+			this.theme.fg("dim", " ".repeat(this.lineNumberWidth)) +
+			this.theme.fg("borderMuted", " │ ");
+		const contPrefixPlain = `${markerChar} ${" ".repeat(this.lineNumberWidth)} │ `;
+
+		const codeWidth = Math.max(1, columnWidth - safeVisibleWidth(firstPrefixPlain));
+		const rowBg = this.getRowBackground(lineKind);
+		const emphasisBg = this.getEmphasisBackground(lineKind);
+
+		const plainSegments = wrapPlainText(line.line, codeWidth);
+		const lines: string[] = [];
+		const spans = this.inlineHighlights.get(line) ?? [];
+
+		let consumed = 0;
+		for (let i = 0; i < plainSegments.length; i++) {
+			const prefixAnsi = i === 0 ? firstPrefixAnsi : contPrefixAnsi;
+			const prefixPlain = i === 0 ? firstPrefixPlain : contPrefixPlain;
+			const plainSegment = plainSegments[i] ?? "";
+			let segment = this.syntaxHighlight(plainSegment);
+
+			if (spans.length > 0 && emphasisBg) {
+				const segmentStart = consumed;
+				for (let si = spans.length - 1; si >= 0; si--) {
+					const span = spans[si];
+					if (!span) continue;
+					const localStart = Math.max(0, span.start - segmentStart);
+					const localEnd = Math.min(plainSegment.length, span.end - segmentStart);
+					if (localEnd > localStart) {
+						segment = applyBackgroundToVisibleRange(
+							segment,
+							localStart,
+							localEnd,
+							emphasisBg,
+							rowBg ?? this.containerBgAnsi,
+						);
+					}
+				}
+			}
+
+			segment = fitToWidth(segment, codeWidth);
+			let rendered = prefixAnsi + segment;
+
+			// Defensive pad if prefix widths diverge because of unicode widths
+			const expectedWidth = safeVisibleWidth(prefixPlain) + codeWidth;
+			const currentWidth = safeVisibleWidth(stripAnsi(rendered));
+			if (currentWidth < expectedWidth) {
+				rendered += " ".repeat(expectedWidth - currentWidth);
+			}
+
+			if (rowBg) {
+				rendered = `${rowBg}${keepBackgroundAcrossResets(rendered, rowBg)}${this.containerBgAnsi}`;
+			}
+			lines.push(padRenderedLineWidth(rendered, columnWidth));
+			consumed += plainSegment.length;
+		}
+
+		return lines;
+	}
+
+	render(width: number): string[] {
+		if (this.cacheWidth === width && this.cacheLines) return this.cacheLines;
+
+		const safeWidth = Math.max(20, width);
+		const columnSeparator = this.theme.fg("borderMuted", " │ ");
+		const separatorWidth = safeVisibleWidth(stripAnsi(columnSeparator));
+		const leftWidth = Math.max(20, Math.floor((safeWidth - separatorWidth) / 2));
+		const rightWidth = Math.max(20, safeWidth - separatorWidth - leftWidth);
+
+		const formatBorderCell = (columnWidth: number, junction: string): string => {
+			const safeColumnWidth = Math.max(1, columnWidth);
+			const chars = "─".repeat(safeColumnWidth).split("");
+			const dividerIndex = this.lineNumberWidth + 3;
+			if (dividerIndex >= 0 && dividerIndex < chars.length) {
+				chars[dividerIndex] = junction;
+			}
+			return this.theme.fg("borderMuted", chars.join(""));
+		};
+
+		const formatHeaderCell = (label: string, columnWidth: number): string => {
+			// Keep marker+space columns, then place label inside the line-number column.
+			const markerPad = "  ";
+			const lineNumberLabel = fitToWidth(label, this.lineNumberWidth);
+			const prefixAnsi =
+				this.theme.fg("borderMuted", markerPad) +
+				this.theme.fg("dim", lineNumberLabel) +
+				this.theme.fg("borderMuted", " │ ");
+			const prefixPlain = `${markerPad}${stripAnsi(lineNumberLabel)} │ `;
+			const codeWidth = Math.max(0, columnWidth - safeVisibleWidth(prefixPlain));
+			return padRenderedLineWidth(prefixAnsi + " ".repeat(codeWidth), columnWidth);
+		};
+
+		const lines: string[] = [];
+		lines.push(
+			padRenderedLineWidth(
+				formatBorderCell(leftWidth, "┬") + this.theme.fg("borderMuted", "─┬─") + formatBorderCell(rightWidth, "┬"),
+				safeWidth,
+			),
+		);
+		lines.push(
+			padRenderedLineWidth(
+				formatHeaderCell("old", leftWidth) + columnSeparator + formatHeaderCell("new", rightWidth),
+				safeWidth,
+			),
+		);
+
+		for (const row of this.rows.slice(0, this.maxRows)) {
+			const leftCellLines = this.formatCellLines(row.kind, "left", row.left, leftWidth);
+			const rightCellLines = this.formatCellLines(row.kind, "right", row.right, rightWidth);
+			const rowHeight = Math.max(leftCellLines.length, rightCellLines.length);
+
+			for (let i = 0; i < rowHeight; i++) {
+				const leftFallbackKind: SplitDiffRow["kind"] = row.kind === "changed" ? "context" : row.kind;
+				const rightFallbackKind: SplitDiffRow["kind"] = row.kind === "changed" ? "context" : row.kind;
+				const leftCell = leftCellLines[i] ?? this.blankCell(leftFallbackKind, "left", leftWidth);
+				const rightCell = rightCellLines[i] ?? this.blankCell(rightFallbackKind, "right", rightWidth);
+				const joined = padRenderedLineWidth(leftCell + columnSeparator + rightCell, safeWidth);
+				lines.push(joined);
+			}
+		}
+
+		if (this.rows.length > this.maxRows) {
+			lines.push(this.theme.fg("muted", `... ${this.rows.length - this.maxRows} more rows`));
+		}
+
+		lines.push(
+			padRenderedLineWidth(
+				formatBorderCell(leftWidth, "┴") + this.theme.fg("borderMuted", "─┴─") + formatBorderCell(rightWidth, "┴"),
+				safeWidth,
+			),
+		);
+		this.cacheWidth = width;
+		this.cacheLines = lines;
+		return lines;
+	}
+
+	invalidate(): void {
+		this.cacheWidth = undefined;
+		this.cacheLines = undefined;
+		this.highlightCache.clear();
+	}
+}