@gajae-code/tui 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+## [0.5.3] - 2026-06-16
+
+### Fixed
+
+- Hardened the TUI for very long-running sessions to stop freezes and unbounded memory growth: `Container.render` emits frame lines via a loop instead of `push(...spread)` so huge (~492k-line) frames no longer throw `RangeError`; the component/container/box `dispose()` lifecycle is reuse-safe (`clear()`/`removeChild()` dispose, `detach*()` does not) across tool/loader/oauth/mcp-wizard/extension-ui components, and the reusable editor is detached before transient hook UI is torn down so it is never disposed by accident; markdown gains a per-code-block highlight LRU cache plus a UTF-8 byte/line highlight cap and assistant-message instance reuse. An opt-in viewport-windowed normalize/diff path (`PI_TUI_VIRTUAL_VIEWPORT`, default off) keeps rendering O(rows) at 100k+ lines while staying byte-identical to the golden output (#716).
+
 ## [0.5.1] - 2026-06-14
 
 ### Fixed

package/dist/types/components/box.d.ts

@@ -8,7 +8,12 @@ export declare class Box implements Component {
     constructor(paddingX?: number, paddingY?: number, bgFn?: (text: string) => string);
     addChild(component: Component): void;
     removeChild(component: Component): void;
+    /** Remove a child without disposing it (for detach-then-readd reuse). */
+    detachChild(component: Component): void;
     clear(): void;
+    /** Remove all children without disposing them (for detach-then-readd reuse). */
+    detachAll(): void;
+    dispose(): void;
     setBgFn(bgFn?: (text: string) => string): void;
     invalidate(): void;
     render(width: number): string[];

package/dist/types/components/loader.d.ts

@@ -9,5 +9,6 @@ export declare class Loader extends Text {
     render(width: number): string[];
     start(): void;
     stop(): void;
+    dispose(): void;
     setMessage(message: string): void;
 }

package/dist/types/components/markdown.d.ts

@@ -1,5 +1,8 @@
 import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
+/** Test/diagnostic seam: number of synchronous highlight invocations since the last reset. */
+export declare function getMarkdownHighlightCallCount(): number;
+export declare function resetMarkdownHighlightCallCount(): void;
 /** Drop all L2 cache entries. Call on theme change to prevent stale styled output. */
 export declare function clearRenderCache(): void;
 /**

package/dist/types/metrics.d.ts

@@ -29,6 +29,10 @@ export interface HelperStat {
     totalMs: number;
     meanMs: number;
 }
+export interface LineCountGauge {
+    last: number;
+    max: number;
+}
 export interface RenderMetricsSnapshot {
     enabled: boolean;
     renderCount: number;
@@ -43,6 +47,7 @@ export interface RenderMetricsSnapshot {
     ownerGauges: Record<string, number>;
     timerGauges: Record<string, number>;
     helperStats: Record<string, HelperStat>;
+    lineCounts: Record<string, LineCountGauge>;
 }
 export declare class RenderMetrics {
     #private;
@@ -66,6 +71,8 @@ export declare class RenderMetrics {
     setTimerGauge(name: string, value: number): void;
     /** Accumulate timing/count for a named render helper (e.g. "renderTree"). */
     recordHelper(name: string, durationMs: number): void;
+    /** Record a per-render line-count gauge (e.g. "rendered", "normalized", "diffed"). */
+    recordLineCount(name: string, value: number): void;
     /**
      * Force a GC when the runtime exposes one and sample RSS as the post-run
      * "return" value used by the memory-leak gate. Callers should drop large

package/dist/types/tui.d.ts

@@ -29,6 +29,13 @@ export interface Component {
      * Called when theme changes or when component needs to re-render from scratch.
      */
     invalidate(): void;
+    /**
+     * Optional cleanup hook. Called once when the component is permanently
+     * removed from the tree via removeChild/clear/dispose. Implementations MUST
+     * be idempotent. Components meant to be re-added should be detached, not
+     * removed/cleared.
+     */
+    dispose?(): void;
 }
 /**
  * Interface for components that can receive focus and display a hardware cursor.
@@ -110,10 +117,16 @@ export interface OverlayHandle {
  * Container - a component that contains other components
  */
 export declare class Container implements Component {
+    #private;
     children: Component[];
     addChild(component: Component): void;
     removeChild(component: Component): void;
+    /** Remove a child without disposing it (for detach-then-readd reuse). */
+    detachChild(component: Component): void;
     clear(): void;
+    /** Remove all children without disposing them (for detach-then-readd reuse). */
+    detachAll(): void;
+    dispose(): void;
     invalidate(): void;
     render(width: number): string[];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@gajae-code/tui",
-	"version": "0.5.2",
+	"version": "0.5.4",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://gaebal-gajae.dev",
 	"author": "Yeachan-Heo",
@@ -38,8 +38,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@gajae-code/natives": "0.5.2",
-		"@gajae-code/utils": "0.5.2",
+		"@gajae-code/natives": "0.5.4",
+		"@gajae-code/utils": "0.5.4",
 		"lru-cache": "11.3.6",
 		"marked": "^18.0.3"
 	},

package/src/components/box.ts

@@ -11,6 +11,7 @@ type Cache = {
  */
 export class Box implements Component {
 	children: Component[] = [];
+	#disposed = false;
 	#paddingX: number;
 	#paddingY: number;
 	#bgFn?: (text: string) => string;
@@ -30,6 +31,16 @@ export class Box implements Component {
 	}
 
 	removeChild(component: Component): void {
+		const index = this.children.indexOf(component);
+		if (index !== -1) {
+			this.children.splice(index, 1);
+			this.#invalidateCache();
+			component.dispose?.();
+		}
+	}
+
+	/** Remove a child without disposing it (for detach-then-readd reuse). */
+	detachChild(component: Component): void {
 		const index = this.children.indexOf(component);
 		if (index !== -1) {
 			this.children.splice(index, 1);
@@ -38,10 +49,28 @@ export class Box implements Component {
 	}
 
 	clear(): void {
+		for (const child of this.children) {
+			child.dispose?.();
+		}
 		this.children = [];
 		this.#invalidateCache();
 	}
 
+	/** Remove all children without disposing them (for detach-then-readd reuse). */
+	detachAll(): void {
+		this.children = [];
+		this.#invalidateCache();
+	}
+
+	dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		for (const child of this.children) {
+			child.dispose?.();
+		}
+		this.#invalidateCache();
+	}
+
 	setBgFn(bgFn?: (text: string) => string): void {
 		this.#bgFn = bgFn;
 		// Don't invalidate here - we'll detect bgFn changes by sampling output

package/src/components/loader.ts

@@ -78,6 +78,10 @@ export class Loader extends Text {
 		}
 	}
 
+	dispose(): void {
+		this.stop();
+	}
+
 	setMessage(message: string) {
 		this.message = message;
 		this.#updateDisplay();

package/src/components/markdown.ts

@@ -43,6 +43,24 @@ const renderCache = new LRUCache<string, { source: string; lines: string[] }>({
 const PARSE_CACHE_MAX = 128;
 const parseCache = new LRUCache<string, { source: string; tokens: Token[] }>({ max: PARSE_CACHE_MAX });
 
+// Per-code-block highlight cache (F3): keyed by theme + lang + code so streaming
+// appends only highlight new/changed blocks instead of re-highlighting the whole
+// prefix on every chunk. Bounded LRU; cleared on theme change via clearRenderCache().
+const HIGHLIGHT_CACHE_MAX = 512;
+const highlightCache = new LRUCache<string, string[]>({ max: HIGHLIGHT_CACHE_MAX });
+// F18: cap synchronous (Rust FFI) syntax highlighting so a single huge fenced block
+// cannot stall the UI thread; oversized blocks render plain with a sanitized marker.
+const MAX_HIGHLIGHT_BYTES = 200_000;
+const MAX_HIGHLIGHT_LINES = 2000;
+let highlightCallCount = 0;
+/** Test/diagnostic seam: number of synchronous highlight invocations since the last reset. */
+export function getMarkdownHighlightCallCount(): number {
+	return highlightCallCount;
+}
+export function resetMarkdownHighlightCallCount(): void {
+	highlightCallCount = 0;
+}
+
 // Full-content 64-bit wyhash over every byte (no lossy sampling). Cache hits
 // additionally verify entry.source against the normalized text, so even a
 // hash collision can never return another message's render.
@@ -58,6 +76,7 @@ function wrapTextIfNeeded(line: string, width: number): string[] {
 export function clearRenderCache(): void {
 	renderCache.clear();
 	parseCache.clear();
+	highlightCache.clear();
 }
 
 // Stable numeric IDs for structural theme/style objects (no ID field on type).
@@ -186,6 +205,47 @@ export class Markdown implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	#exceedsHighlightCap(code: string): boolean {
+		let newlines = 0;
+		for (let i = 0; i < code.length; i++) {
+			if (code.charCodeAt(i) === 10) newlines += 1;
+		}
+		if (newlines + 1 > MAX_HIGHLIGHT_LINES) return true;
+		// UTF-8 byte length (not UTF-16 code-unit count) so a non-ASCII block cannot
+		// exceed the advertised byte cap and still reach the synchronous highlighter.
+		return Buffer.byteLength(code, "utf8") > MAX_HIGHLIGHT_BYTES;
+	}
+
+	#highlightCodeBlock(code: string, lang: string): string[] | null {
+		if (!this.#theme.highlightCode) return null;
+		if (this.#exceedsHighlightCap(code)) return null;
+		const key = `${objectId(this.#theme)}\x00${lang}\x00${code}`;
+		const cached = highlightCache.get(key);
+		if (cached) return cached;
+		highlightCallCount += 1;
+		const result = this.#theme.highlightCode(code, lang || undefined);
+		highlightCache.set(key, result);
+		return result;
+	}
+
+	#emitCodeBlock(lines: string[], code: string, lang: string, codeIndent: string): void {
+		lines.push(this.#theme.codeBlockBorder(`\`\`\`${lang}`));
+		const highlighted = this.#highlightCodeBlock(code, lang);
+		if (highlighted) {
+			for (const hlLine of highlighted) {
+				lines.push(`${codeIndent}${hlLine}`);
+			}
+		} else {
+			if (this.#theme.highlightCode && this.#exceedsHighlightCap(code)) {
+				lines.push(`${codeIndent}${this.#theme.codeBlock("[syntax highlighting skipped: code block too large]")}`);
+			}
+			for (const codeLine of code.split("\n")) {
+				lines.push(`${codeIndent}${this.#theme.codeBlock(codeLine)}`);
+			}
+		}
+		lines.push(this.#theme.codeBlockBorder("```"));
+	}
+
 	render(width: number): string[] {
 		// L1: per-instance cache — fastest path for repeated renders of the same
 		// instance at the same width (e.g. resize debounce, repeated redraws).
@@ -442,20 +502,7 @@ export class Markdown implements Component {
 				}
 
 				const codeIndent = padding(this.#codeBlockIndent);
-				lines.push(this.#theme.codeBlockBorder(`\`\`\`${token.lang || ""}`));
-				if (this.#theme.highlightCode) {
-					const highlightedLines = this.#theme.highlightCode(token.text, token.lang);
-					for (const hlLine of highlightedLines) {
-						lines.push(`${codeIndent}${hlLine}`);
-					}
-				} else {
-					// Split code by newlines and style each line
-					const codeLines = token.text.split("\n");
-					for (const codeLine of codeLines) {
-						lines.push(`${codeIndent}${this.#theme.codeBlock(codeLine)}`);
-					}
-				}
-				lines.push(this.#theme.codeBlockBorder("```"));
+				this.#emitCodeBlock(lines, token.text, token.lang || "", codeIndent);
 				if (nextTokenType && nextTokenType !== "space") {
 					lines.push(""); // Add spacing after code blocks (unless space token follows)
 				}
@@ -725,19 +772,7 @@ export class Markdown implements Component {
 			} else if (token.type === "code") {
 				// Code block in list item
 				const codeIndent = padding(this.#codeBlockIndent);
-				lines.push(this.#theme.codeBlockBorder(`\`\`\`${token.lang || ""}`));
-				if (this.#theme.highlightCode) {
-					const highlightedLines = this.#theme.highlightCode(token.text, token.lang);
-					for (const hlLine of highlightedLines) {
-						lines.push(`${codeIndent}${hlLine}`);
-					}
-				} else {
-					const codeLines = token.text.split("\n");
-					for (const codeLine of codeLines) {
-						lines.push(`${codeIndent}${this.#theme.codeBlock(codeLine)}`);
-					}
-				}
-				lines.push(this.#theme.codeBlockBorder("```"));
+				this.#emitCodeBlock(lines, token.text, token.lang || "", codeIndent);
 			} else {
 				// Other token types - try to render as inline
 				const text = this.#renderInlineTokens([token], styleContext);

package/src/metrics.ts

@@ -104,6 +104,11 @@ export interface HelperStat {
 	meanMs: number;
 }
 
+export interface LineCountGauge {
+	last: number;
+	max: number;
+}
+
 export interface RenderMetricsSnapshot {
 	enabled: boolean;
 	renderCount: number;
@@ -118,6 +123,7 @@ export interface RenderMetricsSnapshot {
 	ownerGauges: Record<string, number>;
 	timerGauges: Record<string, number>;
 	helperStats: Record<string, HelperStat>;
+	lineCounts: Record<string, LineCountGauge>;
 }
 
 function emptyDurationStats(): DurationStats {
@@ -153,6 +159,7 @@ export class RenderMetrics {
 	#ownerGauges = new Map<string, number>();
 	#timerGauges = new Map<string, number>();
 	#helpers = new Map<string, { count: number; totalMs: number }>();
+	#lineGauges = new Map<string, LineCountGauge>();
 	#rssReturn: number | null = null;
 	#heapBaseline: number | null = null;
 	#heapReturn: number | null = null;
@@ -192,6 +199,7 @@ export class RenderMetrics {
 		this.#ownerGauges.clear();
 		this.#timerGauges.clear();
 		this.#helpers.clear();
+		this.#lineGauges.clear();
 		this.#rssReturn = null;
 		this.#heapBaseline = null;
 		this.#heapReturn = null;
@@ -278,6 +286,16 @@ export class RenderMetrics {
 		this.#helpers.set(retained, cur);
 	}
 
+	/** Record a per-render line-count gauge (e.g. "rendered", "normalized", "diffed"). */
+	recordLineCount(name: string, value: number): void {
+		if (!this.#enabled) return;
+		const retained = retainedLabel(this.#lineGauges, name);
+		const cur = this.#lineGauges.get(retained) ?? { last: 0, max: 0 };
+		cur.last = value;
+		if (value > cur.max) cur.max = value;
+		this.#lineGauges.set(retained, cur);
+	}
+
 	/**
 	 * Force a GC when the runtime exposes one and sample RSS as the post-run
 	 * "return" value used by the memory-leak gate. Callers should drop large
@@ -319,6 +337,14 @@ export class RenderMetrics {
 		return out;
 	}
 
+	#lineCountStats(): Record<string, LineCountGauge> {
+		const out: Record<string, LineCountGauge> = {};
+		for (const [name, v] of this.#lineGauges) {
+			out[name] = { last: v.last, max: v.max };
+		}
+		return out;
+	}
+
 	snapshot(): RenderMetricsSnapshot {
 		return {
 			enabled: this.#enabled,
@@ -347,6 +373,7 @@ export class RenderMetrics {
 			ownerGauges: Object.fromEntries(this.#ownerGauges),
 			timerGauges: Object.fromEntries(this.#timerGauges),
 			helperStats: this.#helperStats(),
+			lineCounts: this.#lineCountStats(),
 		};
 	}
 }

package/src/tui.ts

@@ -59,6 +59,14 @@ export interface Component {
 	 * Called when theme changes or when component needs to re-render from scratch.
 	 */
 	invalidate(): void;
+
+	/**
+	 * Optional cleanup hook. Called once when the component is permanently
+	 * removed from the tree via removeChild/clear/dispose. Implementations MUST
+	 * be idempotent. Components meant to be re-added should be detached, not
+	 * removed/cleared.
+	 */
+	dispose?(): void;
 }
 
 /**
@@ -196,12 +204,22 @@ export interface OverlayHandle {
  */
 export class Container implements Component {
 	children: Component[] = [];
+	#disposed = false;
 
 	addChild(component: Component): void {
 		this.children.push(component);
 	}
 
 	removeChild(component: Component): void {
+		const index = this.children.indexOf(component);
+		if (index !== -1) {
+			this.children.splice(index, 1);
+			component.dispose?.();
+		}
+	}
+
+	/** Remove a child without disposing it (for detach-then-readd reuse). */
+	detachChild(component: Component): void {
 		const index = this.children.indexOf(component);
 		if (index !== -1) {
 			this.children.splice(index, 1);
@@ -209,9 +227,25 @@ export class Container implements Component {
 	}
 
 	clear(): void {
+		for (const child of this.children) {
+			child.dispose?.();
+		}
+		this.children = [];
+	}
+
+	/** Remove all children without disposing them (for detach-then-readd reuse). */
+	detachAll(): void {
 		this.children = [];
 	}
 
+	dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		for (const child of this.children) {
+			child.dispose?.();
+		}
+	}
+
 	invalidate(): void {
 		for (const child of this.children) {
 			child.invalidate?.();
@@ -222,7 +256,10 @@ export class Container implements Component {
 		width = Math.max(1, width);
 		const lines: string[] = [];
 		for (const child of this.children) {
-			lines.push(...child.render(width));
+			const childLines = child.render(width);
+			for (let i = 0; i < childLines.length; i++) {
+				lines.push(childLines[i]);
+			}
 		}
 		return lines;
 	}
@@ -239,6 +276,13 @@ type LineNormalizationCacheEntry = {
 export class TUI extends Container {
 	terminal: Terminal;
 	#previousLines: string[] = [];
+	/**
+	 * Raw (pre-normalization) lines from the previous frame, kept only when the
+	 * virtual-viewport flag is on. Used to detect whether the off-screen prefix is
+	 * unchanged (by raw value equality, with a fast reference short-circuit when components
+	 * return stable string instances) so its normalized form can be reused (bounded normalize).
+	 */
+	#previousRaw: string[] = [];
 	#lineNormalizationCache = new Map<string, LineNormalizationCacheEntry>();
 	#lineTruncationCache = new Map<string, string>();
 	#lineNormalizationCacheLimit = 0;
@@ -269,6 +313,9 @@ export class TUI extends Container {
 	#sixelProbeUnsubscribe?: () => void;
 	#showHardwareCursor = $flag("PI_HARDWARE_CURSOR");
 	#clearOnShrink = $flag("PI_CLEAR_ON_SHRINK"); // Clear empty rows when content shrinks (default: off)
+	// Opt-in: reuse the previous normalized off-screen prefix and only normalize/diff the
+	// visible window, bounding per-frame work on huge transcripts. Output stays byte-identical.
+	#virtualViewport = $flag("PI_TUI_VIRTUAL_VIEWPORT");
 	#maxLinesRendered = 0; // Line count from last render, used for viewport calculation
 	#fullRedrawCount = 0;
 	#stopped = false;
@@ -663,6 +710,7 @@ export class TUI extends Container {
 		// focus/listener state is intentionally preserved so input routing survives
 		// a resume.
 		this.#previousLines = [];
+		this.#previousRaw = [];
 		this.#lineNormalizationCache.clear();
 		this.#lineTruncationCache.clear();
 		this.#previousWidth = 0;
@@ -679,6 +727,7 @@ export class TUI extends Container {
 			// A forced full redraw supersedes any queued input-priority render.
 			this.#inputRenderPending = false;
 			this.#previousLines = [];
+			this.#previousRaw = [];
 			this.#lineNormalizationCache.clear();
 			this.#lineTruncationCache.clear();
 			this.#previousWidth = -1; // -1 triggers widthChanged, forcing a full clear
@@ -1204,14 +1253,16 @@ export class TUI extends Container {
 		};
 	}
 
+	/** Normalize + width-fit a single line for emission (image lines pass through). */
+	#normalizeLineForEmit(line: string, width: number): string {
+		if (TERMINAL.isImageLine(line)) return line;
+		const { normalized, terminated } = this.#normalizeLineForRender(line);
+		return this.#lineFitsWidth(normalized, width) ? terminated : this.#truncateNormalizedLine(normalized, width);
+	}
+
 	#applyLineResetsAndTruncate(lines: string[], width: number): string[] {
 		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (TERMINAL.isImageLine(line)) continue;
-			const { normalized, terminated } = this.#normalizeLineForRender(line);
-			lines[i] = this.#lineFitsWidth(normalized, width)
-				? terminated
-				: this.#truncateNormalizedLine(normalized, width);
+			lines[i] = this.#normalizeLineForEmit(lines[i], width);
 		}
 		this.#trimLineCachesForRender(lines.length);
 		return lines;
@@ -1247,12 +1298,61 @@ export class TUI extends Container {
 		// (closes SGR + OSC 8 hyperlink state). Must run after cursor extraction
 		// because the marker is embedded mid-line, and before any diff/full render
 		// path so cache comparisons stay byte-accurate.
-		newLines = this.#applyLineResetsAndTruncate(newLines, width);
-
-		// Width changed - need full re-render (line wrapping changes)
+		// Width/height change detection (used for both normalization reuse and full-redraw decisions).
 		const widthChanged = this.#previousWidth !== 0 && this.#previousWidth !== width;
 		const heightChanged = this.#previousHeight !== 0 && this.#previousHeight !== height;
 
+		// Normalize/truncate lines for emission. With the opt-in virtual-viewport flag
+		// (PI_TUI_VIRTUAL_VIEWPORT) we reuse the previous frame's normalized prefix when the
+		// off-screen raw prefix is unchanged (raw value equality per line; fast reference
+		// short-circuit for cached components), so only the visible window is
+		// re-normalized and the diff starts at the window. Output is byte-identical to the
+		// full path (reused entries are deterministic normalizations of identical raw lines).
+		const VIEWPORT_NORMALIZE_OVERSCAN = 8;
+		const rawLines = newLines;
+		const total = rawLines.length;
+		let diffStart = 0;
+		let usedWindowNormalize = false;
+		if (
+			this.#virtualViewport &&
+			!widthChanged &&
+			this.#previousRaw.length > 0 &&
+			this.#previousLines.length === this.#previousRaw.length
+		) {
+			const winTop = Math.max(0, total - height - VIEWPORT_NORMALIZE_OVERSCAN);
+			if (winTop <= this.#previousLines.length && winTop <= this.#previousRaw.length) {
+				let stable = true;
+				for (let i = 0; i < winTop; i++) {
+					if (rawLines[i] !== this.#previousRaw[i]) {
+						stable = false;
+						break;
+					}
+				}
+				if (stable) {
+					const windowed = this.#previousLines.slice(0, winTop);
+					for (let i = winTop; i < total; i++) {
+						windowed.push(this.#normalizeLineForEmit(rawLines[i], width));
+					}
+					this.#trimLineCachesForRender(total);
+					newLines = windowed;
+					diffStart = winTop;
+					usedWindowNormalize = true;
+				}
+			}
+		}
+		if (!usedWindowNormalize) {
+			newLines = this.#applyLineResetsAndTruncate(this.#virtualViewport ? rawLines.slice() : rawLines, width);
+		}
+		if (this.#virtualViewport) {
+			this.#previousRaw = rawLines;
+		}
+		if (renderMetrics.enabled) {
+			renderMetrics.recordLineCount("rendered", total);
+			renderMetrics.recordLineCount("normalized", total - diffStart);
+			renderMetrics.recordLineCount("measured", total - diffStart);
+			if (usedWindowNormalize) renderMetrics.recordLineCount("offscreenScan", diffStart);
+		}
+
 		// Helper to clear scrollback and viewport and render all new lines
 		const fullRender = (clear: boolean, reason = "full render"): void => {
 			this.#fullRedrawCount += 1;
@@ -1390,7 +1490,10 @@ export class TUI extends Container {
 		let firstChanged = -1;
 		let lastChanged = -1;
 		const maxLines = Math.max(newLines.length, this.#previousLines.length);
-		for (let i = 0; i < maxLines; i++) {
+		if (renderMetrics.enabled) renderMetrics.recordLineCount("diffed", maxLines - diffStart);
+		// When the off-screen prefix was reused (virtual viewport), it is verified
+		// unchanged (raw value equality), so the diff can safely start at the window boundary.
+		for (let i = diffStart; i < maxLines; i++) {
 			const oldLine = i < this.#previousLines.length ? this.#previousLines[i] : "";
 			const newLine = i < newLines.length ? newLines[i] : "";