@pi-archimedes/diff 0.5.0 → 0.7.0

package/src/index.ts

@@ -4,17 +4,21 @@
  * Adapted from pi-ui-hephaestus diff renderer.
  */
 
-import { existsSync, readFileSync } from "node:fs";
 import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
 import type { SettingItem } from "@earendil-works/pi-tui";
 
-import { type DiffLine, type ParsedDiff, parseDiff } from "./core/diff.js";
-import * as Ansi from "./ansi.js";
-import { resolveDiffColors, themeCacheKey, DEFAULT_DIFF_COLORS } from "./ansi.js";
 import { setConfigGetter as setShikiConfig } from "./shiki.js";
-import { hlBlock, lang } from "./shiki.js";
-import { renderSplit, MAX_PREVIEW_LINES, MAX_RENDER_LINES } from "./render.js";
-import { setConfigGetter as setRenderConfig } from "./render.js";
+import { setConfigGetter as setRenderConfig } from "./render/index.js";
+import { DiffComponent } from "./diff-component.js";
+import type { DiffBg, DiffColors } from "./ansi/index.js";
+import { registerWriteTool, registerEditTool } from "./tools/index.js";
+
+// ---------------------------------------------------------------------------
+// Re-exports
+// ---------------------------------------------------------------------------
+
+export { DiffComponent } from "./diff-component.js";
+export type { DiffBg, DiffColors } from "./ansi/index.js";
 
 // ---------------------------------------------------------------------------
 // Config
@@ -96,301 +100,11 @@ export function registerDiffTools(
 
 		const cwd = process.cwd();
 		const home = process.env.HOME ?? "";
-		const sp = (p: string) => Ansi.shortPath(cwd, home, p);
-
-		// ===================================================================
-		// write tool
-		// ===================================================================
-
-		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 ?? "";
-
-				if (old !== null && old !== content) {
-					const diff = parseDiff(old, content);
-					const lg = lang(fp);
-					(result as any).details = {
-						_type: "diff",
-						summary: Ansi.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, 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))}`;
-
-				if (args?.content && !ctx.argsComplete) {
-					const n = String(args.content).split("\n").length;
-					text.setText(`${hdr}  ${theme.fg("muted", `(${n} lines…)`)}`);
-					return text;
-				}
-
-				if (args?.content && ctx.argsComplete && isNew) {
-					const previewKey = `create:${themeCacheKey(theme)}:${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 = process.stdout.columns ?? 200;
-					const key = `wd:${themeCacheKey(theme)}:${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:${themeCacheKey(theme)}:${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 tool
-		// ===================================================================
-
-		const origEdit = createEditTool(cwd);
-
-		function getEditOperations(input: any): Array<{ oldText: string; newText: string }> {
-			if (Array.isArray(input?.edits)) {
-				return input.edits
-					.map((edit: any) => ({
-						oldText: typeof edit?.oldText === "string" ? edit.oldText : typeof edit?.old_text === "string" ? edit.old_text : "",
-						newText: typeof edit?.newText === "string" ? edit.newText : typeof edit?.new_text === "string" ? edit.new_text : "",
-					}))
-					.filter((edit: { oldText: string; newText: string }) => edit.oldText && edit.oldText !== edit.newText);
-			}
-			const oldText = typeof input?.oldText === "string" ? input.oldText : typeof input?.old_text === "string" ? input.old_text : "";
-			const newText = typeof input?.newText === "string" ? input.newText : typeof input?.new_text === "string" ? input.new_text : "";
-			return oldText && oldText !== newText ? [{ oldText, newText }] : [];
-		}
-
-		function summarizeEditOperations(operations: Array<{ oldText: string; newText: string }>) {
-			const diffs = operations.map((edit) => parseDiff(edit.oldText, edit.newText));
-			const totalAdded = diffs.reduce((sum, diff) => sum + diff.added, 0);
-			const totalRemoved = diffs.reduce((sum, diff) => sum + diff.removed, 0);
-			return { diffs, totalAdded, totalRemoved, summary: Ansi.summarize(totalAdded, totalRemoved) };
-		}
-
-		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 operations = getEditOperations(params);
-				const result = await origEdit.execute(tid, params, sig, upd, ctx);
-
-				if (operations.length === 0) return result;
-
-				const { diffs, summary } = summarizeEditOperations(operations);
-				if (operations.length === 1) {
-					let editLine = 0;
-					try {
-						if (fp && existsSync(fp)) {
-							const f = readFileSync(fp, "utf-8");
-							const idx = f.indexOf(operations[0]!.newText);
-							if (idx >= 0) editLine = f.slice(0, idx).split("\n").length;
-						}
-					} catch { editLine = 0; }
-					(result as any).details = { _type: "editInfo", summary, editLine };
-					return result;
-				}
-
-				(result as any).details = {
-					_type: "multiEditInfo",
-					summary,
-					editCount: operations.length,
-					diffLineCount: diffs.reduce((sum, diff) => sum + diff.lines.length, 0),
-				};
-				return result;
-			},
-
-			renderCall(args: any, theme: any, ctx: any) {
-				const fp = args?.path ?? args?.file_path ?? "";
-				const operations = getEditOperations(args);
-				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
-				const hdr = `${theme.fg("toolTitle", theme.bold("edit"))} ${theme.fg("accent", sp(fp))}`;
-
-				if (!(ctx.argsComplete && operations.length > 0)) {
-					text.setText(hdr);
-					return text;
-				}
-
-				const pk = JSON.stringify({ fp, operations, theme: themeCacheKey(theme), w: process.stdout.columns ?? 200 });
-				if (ctx.state._pk !== pk) {
-					ctx.state._pk = pk;
-					ctx.state._pt = `${hdr}  ${theme.fg("muted", "(rendering…)")}`;
-					const lg = lang(fp);
-					const dc = resolveDiffColors(theme);
-
-					if (operations.length === 1) {
-						const diff = parseDiff(operations[0]!.oldText, operations[0]!.newText);
-						renderSplit(diff, lg, MAX_PREVIEW_LINES, dc)
-							.then((rendered) => {
-								if (ctx.state._pk !== pk) return;
-								ctx.state._pt = `${hdr}\n${Ansi.summarize(diff.added, diff.removed)}\n${rendered}`;
-								ctx.invalidate();
-							})
-							.catch(() => {
-								if (ctx.state._pk !== pk) return;
-								ctx.state._pt = `${hdr}  ${Ansi.summarize(diff.added, diff.removed)}`;
-								ctx.invalidate();
-							});
-					} else {
-						const { diffs, summary } = summarizeEditOperations(operations);
-						const maxShown = Math.min(operations.length, 3);
-						const previewLines = Math.max(8, Math.floor(MAX_PREVIEW_LINES / maxShown));
-						Promise.all(
-							diffs.slice(0, maxShown).map((diff, index) =>
-								renderSplit(diff, lg, previewLines, dc)
-									.then((rendered) => `Edit ${index + 1}/${operations.length}\n${rendered}`)
-									.catch(() => `Edit ${index + 1}/${operations.length}  ${Ansi.summarize(diff.added, diff.removed)}`),
-							),
-						)
-							.then((sections) => {
-								if (ctx.state._pk !== pk) return;
-								const remainder = operations.length - maxShown;
-								const suffix = remainder > 0 ? `\n${theme.fg("muted", `… ${remainder} more edit blocks`)}` : "";
-								ctx.state._pt = `${hdr}\n${`${operations.length} edits ${summary}`}\n\n${sections.join("\n\n")}${suffix}`;
-								ctx.invalidate();
-							})
-							.catch(() => {
-								if (ctx.state._pk !== pk) return;
-								ctx.state._pt = `${hdr}  ${operations.length} edits ${summary}`;
-								ctx.invalidate();
-							});
-					}
-				}
 
-				text.setText(ctx.state._pt ?? hdr);
-				return text;
-			},
+		// Register write tool override
+		registerWriteTool(pi, cwd, home, createWriteTool, TextComponent);
 
-			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}`)}` : "";
-					text.setText(`  ${s}${loc}`);
-					return text;
-				}
-				if (result.details?._type === "multiEditInfo") {
-					const { summary: s, editCount, diffLineCount } = result.details;
-					text.setText(`  ${editCount} edits ${s}${typeof diffLineCount === "number" ? ` ${theme.fg("muted", `(${diffLineCount} diff lines)`)}` : ""}`);
-					return text;
-				}
-				text.setText(`  ${theme.fg("dim", String(result?.content?.[0]?.text ?? "edited").slice(0, 120))}`);
-				return text;
-			},
-		});
+		// Register edit tool override
+		registerEditTool(pi, cwd, home, createEditTool);
 	})().catch(console.error);
 }

package/src/render/index.ts

@@ -0,0 +1,21 @@
+/** Barrel — re-export all render modules. */
+
+// Shared constants, config, and helpers
+export {
+	MAX_PREVIEW_LINES,
+	MAX_RENDER_LINES,
+	MAX_HL_CHARS,
+	WORD_DIFF_MIN_SIM,
+	DEFAULT_TERM_WIDTH,
+	getConfig,
+	setConfigGetter,
+	adaptiveWrapRows,
+	wrapAnsi,
+	shouldUseSplit,
+} from "./shared.js";
+
+// Unified view
+export { renderUnified, renderUnifiedLines } from "./unified.js";
+
+// Split view
+export { renderSplit, renderSplitLines } from "./split.js";

package/src/render/shared.ts

@@ -0,0 +1,130 @@
+/** Shared constants, config, and helpers for diff rendering. */
+
+import * as Ansi from "../ansi/index.js";
+import type { ParsedDiff } from "../core/diff.js";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+export const MAX_PREVIEW_LINES = 60;
+export const MAX_RENDER_LINES = 150;
+export const MAX_HL_CHARS = 80_000;
+export const WORD_DIFF_MIN_SIM = 0.15;
+const SPLIT_MAX_WRAP_RATIO = 0.2;
+const SPLIT_MAX_WRAP_LINES = 8;
+const MAX_WRAP_ROWS_WIDE = 3;
+const MAX_WRAP_ROWS_MED = 2;
+const MAX_WRAP_ROWS_NARROW = 1;
+export const DEFAULT_TERM_WIDTH = 200;
+
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+
+export function getConfig(): { diffSplitMinWidth: number; diffSplitMinCodeWidth: number } {
+	return typeof _getConfig === "function" ? _getConfig() : DEFAULT_CONFIG;
+}
+
+const DEFAULT_CONFIG = { diffSplitMinWidth: 150, diffSplitMinCodeWidth: 60 };
+let _getConfig: (() => { diffSplitMinWidth: number; diffSplitMinCodeWidth: number }) | undefined;
+export function setConfigGetter(fn: () => { diffSplitMinWidth: number; diffSplitMinCodeWidth: number }): void {
+	_getConfig = fn;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+export function adaptiveWrapRows(w: number): number {
+	if (w >= 180) return MAX_WRAP_ROWS_WIDE;
+	if (w >= 120) return MAX_WRAP_ROWS_MED;
+	return MAX_WRAP_ROWS_NARROW;
+}
+
+/** Wrap ANSI-encoded string into rows of `w` visible chars. */
+export function wrapAnsi(s: string, w: number, maxRows = adaptiveWrapRows(w), fillBg = "", rst = Ansi.RST): string[] {
+	if (w <= 0) return [""];
+	const plain = Ansi.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) {
+		if (!onLastRow && rows.length >= maxRows - 1) {
+			onLastRow = true;
+			effW = w > 2 ? w - 1 : w;
+		}
+		if (s[i] === "\x1b") {
+			const end = s.indexOf("m", i);
+			if (end !== -1) {
+				row += s.slice(i, end + 1);
+				i = end + 1;
+				continue;
+			}
+		}
+		if (vis >= effW) {
+			if (onLastRow) {
+				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}${Ansi.FG_DIM}›${rst}`;
+				else row += fillBg + " ".repeat(Math.max(0, w - vis)) + rst;
+				rows.push(row);
+				return rows;
+			}
+			const state = Ansi.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++;
+	}
+	if (row.length > 0 || rows.length === 0) {
+		rows.push(row + fillBg + " ".repeat(Math.max(0, w - vis)) + rst);
+	}
+	return rows;
+}
+
+export function shouldUseSplit(diff: ParsedDiff, tw: number, maxRows = MAX_PREVIEW_LINES): boolean {
+	if (!diff.lines.length) return false;
+	const cfg = getConfig();
+	if (tw < cfg.diffSplitMinWidth) 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);
+	const gw = nw + 5;
+	const cw = Math.max(12, half - gw);
+	if (cw < cfg.diffSplitMinCodeWidth) return false;
+
+	const vis = diff.lines.slice(0, maxRows);
+	let contentLines = 0, wrapCandidates = 0;
+	for (const l of vis) {
+		if (l.type === "sep") continue;
+		contentLines++;
+		if (Ansi.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;
+}

package/src/render/split.ts

@@ -0,0 +1,192 @@
+/** Split diff view rendering. */
+
+import type { BundledLanguage } from "shiki";
+import * as Ansi from "../ansi/index.js";
+import type { DiffBg, DiffColors } from "../ansi/index.js";
+import { DEFAULT_DIFF_COLORS, DEFAULT_DIFF_BG } from "../ansi/index.js";
+import { hlBlock } from "../shiki.js";
+import { wordDiffAnalysis, injectBg, plainWordDiff } from "../word-diff.js";
+import type { DiffLine, ParsedDiff } from "../core/diff.js";
+import {
+	MAX_HL_CHARS,
+	MAX_PREVIEW_LINES,
+	MAX_RENDER_LINES,
+	WORD_DIFF_MIN_SIM,
+	DEFAULT_TERM_WIDTH,
+	adaptiveWrapRows,
+	wrapAnsi,
+	shouldUseSplit,
+} from "./shared.js";
+import { renderUnifiedLines } from "./unified.js";
+
+// ---------------------------------------------------------------------------
+// Split view
+// ---------------------------------------------------------------------------
+
+/**
+ * Backward-compatible wrapper — reads width from stdout, returns joined string.
+ * Prefer `renderSplitLines` for Component-based rendering.
+ */
+export async function renderSplit(
+	diff: ParsedDiff,
+	language: BundledLanguage | undefined,
+	max = MAX_PREVIEW_LINES,
+	dc: DiffColors = DEFAULT_DIFF_COLORS,
+): Promise<string> {
+	const width = process.stdout.columns ?? DEFAULT_TERM_WIDTH;
+	// Build DiffBg from current (possibly theme-derived) global aliases.
+	const dbg: DiffBg = {
+		bgAdd: Ansi.BG_ADD,
+		bgDel: Ansi.BG_DEL,
+		bgAddW: Ansi.BG_ADD_W,
+		bgDelW: Ansi.BG_DEL_W,
+		bgGutterAdd: Ansi.BG_GUTTER_ADD,
+		bgGutterDel: Ansi.BG_GUTTER_DEL,
+		bgEmpty: Ansi.BG_EMPTY,
+		bgBase: Ansi.BG_BASE,
+		rst: Ansi.BG_BASE === "\x1b[49m" ? "\x1b[0m" : `\x1b[0m${Ansi.BG_BASE}`,
+		divider: Ansi.DIVIDER,
+	};
+	const lines = await renderSplitLines(diff, language, width, max, dc, dbg);
+	return lines.join("\n");
+}
+
+export async function renderSplitLines(
+	diff: ParsedDiff,
+	language: BundledLanguage | undefined,
+	width: number,
+	max = MAX_PREVIEW_LINES,
+	dc: DiffColors = DEFAULT_DIFF_COLORS,
+	dbg: DiffBg = DEFAULT_DIFF_BG,
+): Promise<string[]> {
+	const rst = dbg.rst;
+	const bgBase = dbg.bgBase;
+
+	if (!shouldUseSplit(diff, width, max)) return renderUnifiedLines(diff, language, width, max, dc, dbg);
+	if (!diff.lines.length) return [];
+
+	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((width - 1) / 2);
+	const nw = Math.max(2, String(Math.max(...diff.lines.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
+	const gw = nw + 5;
+	const cw = Math.max(12, half - gw);
+	const canHL = diff.chars <= MAX_HL_CHARS && vis.length * 2 <= MAX_RENDER_LINES * 2;
+
+	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;
+
+	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 {
+		if (!line) {
+			const gw2 = nw + 2;
+			const gPat = Ansi.FG_STRIPE + "╱".repeat(gw2) + rst;
+			const g = ` ${gPat}${Ansi.FG_RULE}│${rst} `;
+			return { gutter: g, contGutter: g, bodyRows: [Ansi.stripes(dbg, cw, stripeRow)] };
+		}
+		if (line.type === "sep") {
+			const gap = line.newNum;
+			const label = gap && gap > 0 ? `··· ${gap} lines ···` : "···";
+			const g = `${bgBase} ${Ansi.FG_DIM}${Ansi.fit("", nw + 2)}${rst}${Ansi.FG_RULE}│${rst} `;
+			return { gutter: g, contGutter: g, bodyRows: [`${bgBase}${Ansi.FG_DIM}${Ansi.fit(label, cw)}${rst}`] };
+		}
+
+		const isDel = line.type === "del", isAdd = line.type === "add";
+		const gBg = isDel ? dbg.bgGutterDel : isAdd ? dbg.bgGutterAdd : bgBase;
+		const cBg = isDel ? dbg.bgDel : isAdd ? dbg.bgAdd : bgBase;
+		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;
+
+		const borderFg = isDel ? dc.fgDel : isAdd ? dc.fgAdd : "";
+		const border = borderFg ? `${borderFg}${Ansi.BORDER_BAR}${rst}` : ` ${bgBase}`;
+		const numFg = borderFg || Ansi.FG_LNUM;
+
+		let body: string;
+		if (ranges && ranges.length > 0) {
+			body = injectBg(hl, ranges, cBg, isDel ? dbg.bgDelW : dbg.bgAddW);
+		} else if (isDel || isAdd) {
+			body = `${cBg}${hl}`;
+		} else {
+			body = `${bgBase}${Ansi.DIM}${hl}`;
+		}
+
+		const gutter = `${border}${gBg}${Ansi.lnum(num, nw, numFg)}${sFg}${Ansi.BOLD}${sign}${rst} ${Ansi.FG_RULE}│${rst} `;
+		const contGutter = `${border}${gBg}${" ".repeat(nw + 1)}${rst} ${Ansi.FG_RULE}│${rst} `;
+		const bodyRows = wrapAnsi(Ansi.tabs(body), cw, adaptiveWrapRows(cw), cBg, rst);
+		return { gutter, contGutter, bodyRows };
+	}
+
+	const out: string[] = [];
+	const hdrOld = `${bgBase}${" ".repeat(Math.max(0, nw - 2))}${dc.fgDel}${Ansi.DIM}old${rst}`;
+	const hdrNew = `${bgBase}${" ".repeat(Math.max(0, nw - 2))}${dc.fgAdd}${Ansi.DIM}new${rst}`;
+	out.push(`${bgBase}${hdrOld}${" ".repeat(Math.max(0, half - nw - 1))}${Ansi.FG_RULE}┊${rst}${hdrNew}`);
+	out.push(`${Ansi.rule(dbg, half)}${Ansi.FG_RULE}┊${rst}${Ansi.rule(dbg, 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");
+		}
+
+		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 ? Ansi.stripes(dbg, cw, stripeRow) : `${dbg.bgEmpty}${" ".repeat(cw)}${rst}`);
+			const rb = rResult.bodyRows[row] ?? (rightIsEmpty ? Ansi.stripes(dbg, cw, stripeRow) : `${dbg.bgEmpty}${" ".repeat(cw)}${rst}`);
+			out.push(`${lg}${lb}${dbg.divider}${rg}${rb}`);
+			stripeRow++;
+		}
+	}
+
+	out.push(`${Ansi.rule(dbg, half)}${Ansi.FG_RULE}┊${rst}${Ansi.rule(dbg, half)}`);
+	if (rows.length > vis.length) {
+		out.push(`${bgBase}${Ansi.FG_DIM}  … ${rows.length - vis.length} more lines${rst}`);
+	}
+	return out;
+}