@oh-my-pi/pi-tui 18.4.2 → 18.4.3

package/src/chat/assistant-message.ts

@@ -33,7 +33,8 @@ const EMPTY_STABLE_RENDER: readonly string[] = [];
 
 type ThinkingContentBlock = Extract<AssistantMessage["content"][number], { type: "thinking" }>;
 type DisplayThinkingContentBlock = ThinkingContentBlock & { rawThinking?: string };
-type StablePart = { kind: "thinking" | "text"; text: string } | { kind: "spacer" };
+type StablePartKind = "thinking" | "text";
+type StablePart = { kind: StablePartKind; text: string } | { kind: "spacer" };
 
 /**
  * One published prefix of the block's finished content. Later snapshots extend
@@ -47,6 +48,37 @@ interface StableSnapshot {
 	readonly lastTextLength: number;
 }
 
+/**
+ * Stable-row renders at one width. `rows` renders snapshot `newest`; every
+ * count in `ends` renders byte-identically to `rows.slice(0, end)` — checked
+ * against `rows` when recorded — so an earlier prefix is a slice of the newest
+ * render instead of a re-render, and one row array stays resident per width.
+ */
+interface StableRowLedger {
+	newest: number;
+	rows: readonly string[];
+	readonly ends: Map<number, number>;
+	/** Rendered rows of parts a snapshot has closed (full text final), by part index. */
+	readonly parts: (
+		| { readonly kind: StablePartKind; readonly text: string; readonly rows: readonly string[] }
+		| undefined
+	)[];
+}
+
+/** One Markdown instance reused while a stable part's text grows between renders. */
+interface StablePartRenderer {
+	readonly index: number;
+	readonly kind: StablePartKind;
+	readonly md: Markdown;
+}
+
+/** Theme inputs cached stable renders were produced with; any change drops them. */
+interface StableRenderInputs {
+	readonly prose: MarkdownTheme;
+	readonly markdown: MarkdownTheme;
+	readonly color: ((text: string) => string) | undefined;
+}
+
 function isSnapshotExtension(previous: readonly StablePart[], current: readonly StablePart[]): boolean {
 	if (previous.length > current.length) return false;
 	for (let index = 0; index < previous.length; index++) {
@@ -260,13 +292,20 @@ export class AssistantMessageComponent extends Container {
 	#nextStableRowId = 0;
 	#transcriptStableRows: TranscriptStableRow[] = [];
 	/**
-	 * Rendered rows per published snapshot index and width. The container asks
-	 * for several different counts in one frame (emitted, offered end,
-	 * projected, pressure-loop +1s); a 2-entry LRU thrashes across those and
-	 * re-renders the whole prefix per miss. Sized generously so the live prefix
-	 * stays cached; cleared on reset/finalize like before.
+	 * Verified stable-row renders per width ({@link StableRowLedger}). The
+	 * container asks for several counts per frame (emitted, offered end,
+	 * projected) and each publication re-checks the previous prefix; the ledger
+	 * answers all of them from the newest render. A few widths cover resizes.
+	 * Cleared on reset, finalize, and theme change.
 	 */
-	#stableRenderCache = new LRUCache<string, readonly string[]>({ max: 64 });
+	#stableLedgers = new LRUCache<number, StableRowLedger>({ max: 4 });
+	/** Prefixes handed out as ledger slices or rendered off-ledger, by `${count}:${width}`. */
+	#stableRenderCache = new LRUCache<string, readonly string[]>({ max: 8 });
+	/** Reused for the growing final part of each publication candidate. */
+	#stableHeadRenderer: StablePartRenderer | undefined;
+	/** Reused for final parts of published snapshots rendered off-ledger (reflow, replay). */
+	#stableReplayRenderer: StablePartRenderer | undefined;
+	#stableRenderInputs: StableRenderInputs | undefined;
 	/** Provider-reported tokens in the live thinking block — reasoning tokens when
 	 *  the provider streams them, else total output — shown dimmed beside the
 	 *  speed badge. 0 when no thinking is streaming. */
@@ -626,22 +665,33 @@ export class AssistantMessageComponent extends Container {
 		this.#stableSnapshots = [];
 		this.#stableParts = [];
 		this.#transcriptStableRows = [];
-		this.#stableRenderCache.clear();
+		this.#dropStableRenders();
 	}
 
 	renderTranscriptStableRows(count: number, width: number): readonly string[] {
 		const index = Math.min(Math.trunc(count), this.#stableSnapshots.length);
 		if (index <= 0) return EMPTY_STABLE_RENDER;
+		this.#syncStableRenderInputs();
+		const ledger = this.#stableLedgers.get(width);
+		if (ledger?.newest === index) return ledger.rows;
 		const key = `${index}:${width}`;
 		const cached = this.#stableRenderCache.get(key);
 		if (cached) return cached;
-		const snapshot = this.#stableSnapshots[index - 1]!;
-		const parts = this.#stableParts.slice(0, snapshot.partCount);
-		const last = parts.at(-1);
-		if (last && last.kind !== "spacer") {
-			parts[parts.length - 1] = { kind: last.kind, text: last.text.slice(0, snapshot.lastTextLength) };
+		const end = ledger?.ends.get(index);
+		let rows: readonly string[];
+		if (ledger !== undefined && end !== undefined) {
+			rows = ledger.rows.slice(0, end);
+		} else {
+			const snapshot = this.#stableSnapshots[index - 1]!;
+			rows = this.#renderStableParts(
+				this.#stableParts,
+				snapshot.partCount,
+				snapshot.lastTextLength,
+				width,
+				"replay",
+			);
+			if (this.#recordStableRows(index, width, rows)) return rows;
 		}
-		const rows = this.#renderStableSnapshot(parts, width);
 		this.#stableRenderCache.set(key, rows);
 		return rows;
 	}
@@ -662,9 +712,12 @@ export class AssistantMessageComponent extends Container {
 		if (!last || last.kind === "spacer") return;
 		const snapshot = { partCount: parts.length, lastTextLength: last.text.length };
 		const previous = this.#stableSnapshots.at(-1);
-		if (previous && !isSnapshotExtension(this.#stableParts, parts)) return;
+		// An unmoved boundary publishes nothing whether or not it still extends
+		// the last snapshot, so most frames skip the whole-document comparison.
 		if (previous?.partCount === snapshot.partCount && previous.lastTextLength === snapshot.lastTextLength) return;
-		const currentRows = this.#renderStableSnapshot(parts, width);
+		if (previous && !isSnapshotExtension(this.#stableParts, parts)) return;
+		this.#syncStableRenderInputs();
+		const currentRows = this.#renderStableParts(parts, parts.length, last.text.length, width, "head");
 		// The container verifies stable rows against the blank-trimmed render.
 		if (!isRowPrefix(currentRows, trimBlankEdges(rendered))) return;
 		const previousRows = previous
@@ -676,7 +729,7 @@ export class AssistantMessageComponent extends Container {
 		this.#stableParts = parts;
 		this.#stableSnapshots.push(snapshot);
 		this.#transcriptStableRows.push({ key: `thinking:${this.#nextStableRowId++}` });
-		this.#stableRenderCache.set(`${this.#stableSnapshots.length}:${width}`, currentRows);
+		this.#recordStableRows(this.#stableSnapshots.length, width, currentRows);
 	}
 
 	/**
@@ -726,37 +779,136 @@ export class AssistantMessageComponent extends Container {
 		return parts;
 	}
 
-	#renderStableSnapshot(parts: readonly StablePart[], width: number): readonly string[] {
+	/**
+	 * Render the first `partCount` stable parts, the final one cut to
+	 * `lastLength`. Rows match fresh Markdown renders of each part byte for
+	 * byte — {@link #createStableMarkdown} mirrors the live children — but a
+	 * closed part renders once per width, and the growing final part reuses one
+	 * Markdown instance so its already-frozen blocks are not re-lexed.
+	 */
+	#renderStableParts(
+		parts: readonly StablePart[],
+		partCount: number,
+		lastLength: number,
+		width: number,
+		role: "head" | "replay",
+	): readonly string[] {
+		const ledger = this.#stableLedger(width);
 		const rows: string[] = [];
-		for (const part of parts) {
+		const lastIndex = partCount - 1;
+		for (let index = 0; index < partCount; index++) {
+			const part = parts[index]!;
 			if (part.kind === "spacer") {
 				rows.push("");
 				continue;
 			}
-			// Constructor args mirror the live child Markdown exactly so these
-			// rows are byte-identical to the block render's prefix — including the
-			// trim the live children apply, which drops the trailing blank line a
-			// frozen prefix still carries.
-			const text = part.text.trim();
-			const markdown =
-				part.kind === "text"
-					? new Markdown(
-							text,
-							1,
-							0,
-							this.#getProseTheme(),
-							this.#textColorTransform ? { color: this.#textColorTransform } : undefined,
-							0,
-						)
-					: new Markdown(text, 1, 0, getMarkdownTheme(), {
-							color: (value: string) => theme.fg("thinkingText", value),
-							italic: true,
-						});
-			rows.push(...markdown.render(width));
+			const closed = index < lastIndex;
+			const text = closed || lastLength === part.text.length ? part.text : part.text.slice(0, lastLength);
+			const cached = ledger.parts[index];
+			let partRows: readonly string[];
+			if (cached?.kind === part.kind && cached.text === text) {
+				partRows = cached.rows;
+			} else {
+				partRows = this.#renderStablePart(index, part.kind, text, width, closed ? undefined : role);
+				if (closed) ledger.parts[index] = { kind: part.kind, text, rows: partRows };
+			}
+			for (const row of partRows) rows.push(row);
 		}
 		return rows;
 	}
 
+	/**
+	 * Render one part's Markdown. `role` names the instance reused for a final
+	 * part as its text grows; a closed part continues whichever instance was
+	 * already growing it, else renders once. Finalized blocks keep no instance.
+	 */
+	#renderStablePart(
+		index: number,
+		kind: StablePartKind,
+		text: string,
+		width: number,
+		role: "head" | "replay" | undefined,
+	): readonly string[] {
+		// Trim like the live children, dropping the trailing blank line a frozen
+		// prefix still carries.
+		const trimmed = text.trim();
+		if (this.#transcriptBlockFinalized) return this.#createStableMarkdown(kind, trimmed).render(width);
+		const head = this.#stableHeadRenderer;
+		const replay = this.#stableReplayRenderer;
+		const renderer = role === "head" ? head : role === "replay" ? replay : head?.index === index ? head : replay;
+		if (renderer?.index === index && renderer.kind === kind) {
+			renderer.md.setText(trimmed);
+			return renderer.md.render(width);
+		}
+		const md = this.#createStableMarkdown(kind, trimmed);
+		if (role === "head") this.#stableHeadRenderer = { index, kind, md };
+		else if (role === "replay") this.#stableReplayRenderer = { index, kind, md };
+		return md.render(width);
+	}
+
+	/** Constructor args mirror the live child Markdown so stable rows prefix the block render. */
+	#createStableMarkdown(kind: StablePartKind, text: string): Markdown {
+		return kind === "text"
+			? new Markdown(
+					text,
+					1,
+					0,
+					this.#getProseTheme(),
+					this.#textColorTransform ? { color: this.#textColorTransform } : undefined,
+					0,
+				)
+			: new Markdown(text, 1, 0, getMarkdownTheme(), {
+					color: (value: string) => theme.fg("thinkingText", value),
+					italic: true,
+				});
+	}
+
+	#stableLedger(width: number): StableRowLedger {
+		let ledger = this.#stableLedgers.get(width);
+		if (ledger === undefined) {
+			ledger = { newest: 0, rows: EMPTY_STABLE_RENDER, ends: new Map(), parts: [] };
+			this.#stableLedgers.set(width, ledger);
+		}
+		return ledger;
+	}
+
+	/**
+	 * Remember `rows` as snapshot `index`'s render at `width`. A newer snapshot
+	 * becomes the ledger's newest render — keeping earlier counts only when it
+	 * extends their rows; an older one that prefixes the newest keeps just its
+	 * row count. Returns whether `rows` is now the newest render.
+	 */
+	#recordStableRows(index: number, width: number, rows: readonly string[]): boolean {
+		const ledger = this.#stableLedger(width);
+		if (index > ledger.newest) {
+			if (!isRowPrefix(ledger.rows, rows)) ledger.ends.clear();
+			ledger.newest = index;
+			ledger.rows = rows;
+			ledger.ends.set(index, rows.length);
+			return true;
+		}
+		if (index < ledger.newest && isRowPrefix(rows, ledger.rows)) ledger.ends.set(index, rows.length);
+		return false;
+	}
+
+	/** Drop cached stable renders once the themes they were rendered with change. */
+	#syncStableRenderInputs(): void {
+		const prose = this.#getProseTheme();
+		const markdown = getMarkdownTheme();
+		const color = this.#textColorTransform;
+		const inputs = this.#stableRenderInputs;
+		if (inputs?.prose === prose && inputs.markdown === markdown && inputs.color === color) return;
+		this.#dropStableRenders();
+		this.#stableRenderInputs = { prose, markdown, color };
+	}
+
+	#dropStableRenders(): void {
+		this.#stableLedgers.clear();
+		this.#stableRenderCache.clear();
+		this.#stableHeadRenderer = undefined;
+		this.#stableReplayRenderer = undefined;
+	}
+
 	/** Render completed prose rather than an earlier thinking row under emergency viewport pressure. */
 	renderTranscriptBlockEmergencyRow(width: number): string | undefined {
 		if (!this.#transcriptBlockFinalized) return undefined;
@@ -769,7 +921,7 @@ export class AssistantMessageComponent extends Container {
 
 	markTranscriptBlockFinalized(): void {
 		this.#transcriptBlockFinalized = true;
-		this.#stableRenderCache.clear();
+		this.#dropStableRenders();
 		this.#stopThinkingAnimation();
 		// If the live pulse was on screen when the block sealed, drop the fast path
 		// and rebuild so the placeholder is removed — finalized blocks never animate.

package/src/chat/thinking-display.ts

@@ -1,13 +1,16 @@
 import type { AgentMessage } from "@oh-my-pi/pi-agent-core";
 import { FENCE_RE } from "../render/render-utils";
 
-// Single-slot-per-mode memo for formatThinkingForDisplay. During a streaming
+// Small per-mode MRU memo for formatThinkingForDisplay. During a streaming
 // tick the same growing thinking text is formatted up to three times (reveal
 // count, reveal slice, component render); this collapses them to one
 // computation. Prose and raw modes produce different output for the same text,
-// so each mode keeps its own slot. One entry per mode is enough for the common
-// case of one active thinking block and never regresses (a miss recomputes
-// exactly as before).
+// so each mode keeps its own slots. A message routinely holds several thinking
+// blocks (thinking → text → thinking), and every tick formats each of them, so
+// one slot per mode would thrash between blocks and turn every append into a
+// full refold; {@link DISPLAY_CACHE_SLOTS} slots keep one checkpoint per live
+// block. A miss recomputes exactly as before and evicts the least recently
+// used slot.
 //
 // Each slot also carries the fold state for incremental extension: when the
 // incoming text is an append of the previously formatted text (streaming only
@@ -85,8 +88,69 @@ function freshDisplayCache(): DisplayCache {
 	return { text: "", value: "", hadComment: false, startLineByte: 0, state: freshFoldState(), resumable: true };
 }
 
-const proseCache = freshDisplayCache();
-const rawCache = freshDisplayCache();
+/** Slots per mode: enough for the thinking blocks of one streaming message. */
+const DISPLAY_CACHE_SLOTS = 4;
+// Most recently used first.
+const proseSlots: DisplayCache[] = [];
+const rawSlots: DisplayCache[] = [];
+
+/** Drop every memo slot so the next call recomputes from scratch. Tests only. */
+export function resetThinkingDisplayCacheForTests(): void {
+	proseSlots.length = 0;
+	rawSlots.length = 0;
+}
+
+/**
+ * Pick the slot to format `text` into and move it to the front: an exact memo
+ * hit, else the resumable slot holding the longest verbatim prefix of `text`
+ * (an append). A miss overwrites a non-resumable slot holding a prefix of
+ * `text` — the same stream's retired checkpoint, e.g. the raw identity
+ * shortcut — so such a stream never evicts the other blocks' checkpoints;
+ * otherwise the least recently used slot (or a new one below the cap).
+ * Append detection runs here once so the caller never re-verifies.
+ */
+function acquireDisplayCache(
+	slots: DisplayCache[],
+	text: string,
+): { cache: DisplayCache; match: "hit" | "append" | "miss" } {
+	// Identity pass first: the repeated renders of one streaming tick must not
+	// pay any prefix verification against the other blocks' slots.
+	let index = slots.findIndex(slot => slot.text === text);
+	let match: "hit" | "append" | "miss" = index === -1 ? "miss" : "hit";
+	if (index === -1) {
+		let appendLength = 0;
+		let retired = -1;
+		let retiredLength = 0;
+		for (let i = 0; i < slots.length; i++) {
+			const slot = slots[i]!;
+			const length = slot.text.length;
+			if (length <= (slot.resumable ? appendLength : retiredLength) || !isAppend(slot, text)) continue;
+			if (slot.resumable) {
+				index = i;
+				match = "append";
+				appendLength = length;
+			} else {
+				retired = i;
+				retiredLength = length;
+			}
+		}
+		if (index === -1) index = retired;
+	}
+	if (index === -1) {
+		if (slots.length < DISPLAY_CACHE_SLOTS) {
+			const cache = freshDisplayCache();
+			slots.unshift(cache);
+			return { cache, match };
+		}
+		index = slots.length - 1;
+	}
+	const cache = slots[index]!;
+	if (index > 0) {
+		slots.splice(index, 1);
+		slots.unshift(cache);
+	}
+	return { cache, match };
+}
 
 export function canonicalizeMessage(text: string | null | undefined): string {
 	if (!text) return "";
@@ -190,14 +254,12 @@ function renderFold(state: FoldState): string {
  */
 export function formatThinkingForDisplay(text: string, proseOnly: boolean): string {
 	if (!text) return text;
-	const cache = proseOnly ? proseCache : rawCache;
-	// Identity memo first: the 2nd and 3rd renders of one streaming tick pass
-	// the same text and must not pay the prefix verification below.
-	if (text === cache.text) return cache.value;
+	const { cache, match } = acquireDisplayCache(proseOnly ? proseSlots : rawSlots, text);
+	if (match === "hit") return cache.value;
 	let hasComment: boolean;
 	let fromByte: number;
 	let state: FoldState;
-	if (cache.resumable && isAppend(cache, text)) {
+	if (match === "append") {
 		// Append: a `<!--` introduced by the suffix flips the noise gate, and a
 		// marker straddling the seam can start at most 3 bytes back — identical
 		// to rescanning the full text, at O(delta).

package/src/chrome/transcript-container.ts

@@ -93,6 +93,12 @@ type Offered =
 	| { batch: HistoryBatch; kind: "commit"; end: number }
 	| { batch: HistoryBatch; kind: "replay" };
 
+/** Rows a progressive-append retirement offers, and the stable count they bring the head to. */
+interface AppendBatch {
+	rows: readonly string[];
+	emittedEnd: number;
+}
+
 const MAX_LIVE_BLOCKS = 256;
 /** Grace before a pressure-blocked frontier is reported; a streaming block may legitimately hold it briefly. */
 const PINNED_FRONTIER_WARN_MS = 30_000;
@@ -189,6 +195,10 @@ export class TranscriptContainer extends Container {
 	 */
 	#frameRows = new Map<TranscriptEntry, readonly string[]>();
 	#frameRowsWidth = 0;
+	/** The `children` array `#entries` last mirrored; see {@link #syncEntries}. */
+	#syncedChildren: Component[] | undefined;
+	/** Forces the next {@link #syncEntries} to compare every entry, not just the live tail. */
+	#entriesUnverified = false;
 	override addChild(component: Component): void {
 		if (isToolActivityComponent(component)) component.setToolActivityVisible(this.#toolActivityVisible);
 		super.addChild(component);
@@ -202,6 +212,9 @@ export class TranscriptContainer extends Container {
 			emitted: 0,
 			stableFrozen: false,
 		});
+		// Callers may splice a just-added block into place (insert after an
+		// anchor); re-check the whole list once instead of trusting positions.
+		this.#entriesUnverified = true;
 	}
 
 	override removeChild(component: Component): void {
@@ -639,20 +652,9 @@ export class TranscriptContainer extends Container {
 			// rows left behind here are rows dropped from the top of the viewport.
 			// `liveRows` is exact here: the append path measured every live block.
 			const overflow = liveRows - room;
-			const before = this.#renderStablePrefix(appendHead, appendHead.emitted, width);
-			let emittedEnd = appendHead.emitted;
-			let rows: readonly string[] = EMPTY_ROWS;
-			while (emittedEnd < appendHead.stableRows.length && rows.length < overflow) {
-				const after = this.#renderStablePrefix(appendHead, emittedEnd + 1, width);
-				if (!isRowPrefix(before, after) || after.length === before.length) {
-					if (emittedEnd === appendHead.emitted) {
-						this.#freezeStableRows(appendHead, EMPTY_ROWS, "semantic row render added no suffix");
-					}
-					break;
-				}
-				rows = after.slice(before.length);
-				emittedEnd += 1;
-			}
+			const { rows, emittedEnd } =
+				this.#measuredAppendBatch(appendHead, width, overflow) ??
+				this.#renderedAppendBatch(appendHead, width, overflow);
 			if (emittedEnd > appendHead.emitted) {
 				const batch: HistoryBatch = {
 					id: this.#nextBatchId++,
@@ -840,6 +842,64 @@ export class TranscriptContainer extends Container {
 		if (memo !== undefined) return memo;
 		return this.#renderStablePrefix(entry, count, width).length;
 	}
+
+	/**
+	 * Size a progressive-append batch from the stable renders `#renderEntry`
+	 * recorded at this width, without rendering any prefix. Each recorded count
+	 * was checked to render as a byte prefix of every later one, and
+	 * `renderedStableByWidth` holds the newest, so each count's rows are a
+	 * prefix of it and the batch is one slice. Undefined when a count the walk
+	 * needs was never recorded here (published between renders, or before a
+	 * resize); the rendered walk then decides.
+	 */
+	#measuredAppendBatch(entry: TranscriptEntry, width: number, overflow: number): AppendBatch | undefined {
+		const counts = entry.stableRowCountByWidth.get(width);
+		const newest = entry.renderedStableByWidth.get(width);
+		const target = entry.stableRows.length;
+		if (counts === undefined || newest === undefined || counts.get(target) !== newest.length) return undefined;
+		const start = entry.emitted === 0 ? 0 : counts.get(entry.emitted);
+		if (start === undefined) return undefined;
+		let emittedEnd = entry.emitted;
+		let end = start;
+		while (emittedEnd < target && end - start < overflow) {
+			const next = counts.get(emittedEnd + 1);
+			if (next === undefined) return undefined;
+			if (next <= start) {
+				if (emittedEnd === entry.emitted) {
+					this.#freezeStableRows(entry, EMPTY_ROWS, "semantic row render added no suffix");
+				}
+				break;
+			}
+			end = next;
+			emittedEnd += 1;
+		}
+		return { rows: emittedEnd > entry.emitted ? newest.slice(start, end) : EMPTY_ROWS, emittedEnd };
+	}
+
+	/**
+	 * Size a progressive-append batch by rendering each further stable prefix:
+	 * extend the emitted prefix until its new rows cover `overflow`, stopping
+	 * at the first prefix that adds no row or stops extending the emitted one
+	 * (freezing the block when that is the very next prefix).
+	 */
+	#renderedAppendBatch(entry: TranscriptEntry, width: number, overflow: number): AppendBatch {
+		const before = this.#renderStablePrefix(entry, entry.emitted, width);
+		let emittedEnd = entry.emitted;
+		let after = before;
+		while (emittedEnd < entry.stableRows.length && after.length - before.length < overflow) {
+			const next = this.#renderStablePrefix(entry, emittedEnd + 1, width);
+			if (!isRowPrefix(before, next) || next.length === before.length) {
+				if (emittedEnd === entry.emitted) {
+					this.#freezeStableRows(entry, EMPTY_ROWS, "semantic row render added no suffix");
+				}
+				break;
+			}
+			after = next;
+			emittedEnd += 1;
+		}
+		return { rows: emittedEnd > entry.emitted ? after.slice(before.length) : EMPTY_ROWS, emittedEnd };
+	}
+
 	/**
 	 * Record that pressure retirement is blocked behind a not-yet-settled
 	 * frontier block, and log its identity once the episode outlives the grace
@@ -1069,12 +1129,27 @@ export class TranscriptContainer extends Container {
 		return this.#entries.length - this.#frontier;
 	}
 
+	/**
+	 * Mirror `children` into `#entries`. The container's own add/remove/clear
+	 * keep the two aligned, so the per-frame check stays off the committed
+	 * ledger: external edits to the public `children` array are caught by array
+	 * identity (replacement), length (push, removing splices), and an identity
+	 * scan of the live tail (in-place reorders and index writes). Committed
+	 * blocks are immutable history nothing reorders, and the scan skipping
+	 * them keeps this proportional to the live tail rather than the session.
+	 */
 	#syncEntries(): void {
+		const children = this.children;
 		if (
-			this.#entries.length === this.children.length &&
-			this.#entries.every((entry, index) => entry.component === this.children[index])
-		)
+			!this.#entriesUnverified &&
+			children === this.#syncedChildren &&
+			this.#entriesMatch(children, this.#frontier)
+		) {
 			return;
+		}
+		this.#entriesUnverified = false;
+		this.#syncedChildren = children;
+		if (this.#entriesMatch(children, 0)) return;
 		const existing = new Map(this.#entries.map(entry => [entry.component, entry]));
 		this.#entries = this.children.map(
 			component =>
@@ -1092,6 +1167,16 @@ export class TranscriptContainer extends Container {
 		this.#frontier = this.#entries.findIndex(entry => entry.state !== "committed");
 		if (this.#frontier < 0) this.#frontier = this.#entries.length;
 	}
+
+	/** Whether `#entries` has `children`'s length and components from `start` on. */
+	#entriesMatch(children: readonly Component[], start: number): boolean {
+		const entries = this.#entries;
+		if (entries.length !== children.length) return false;
+		for (let index = start; index < entries.length; index++) {
+			if (entries[index]!.component !== children[index]) return false;
+		}
+		return true;
+	}
 }
 
 /** Groups sibling rows into one conservative mutable semantic transcript block. */

package/src/components/editor.ts

@@ -63,12 +63,12 @@ const AUTOCOMPLETE_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
 /**
  * `@` file lists are narrowed in place (`setFilter(liveToken)`) while a fresh
  * search runs, so a slow walk never leaves entries that contradict the typed
- * token on screen. An emptied list means the refresh is still pending.
+ * token on screen. An emptied list means the refresh is still pending; the
+ * popup stays open but renders nothing until results arrive.
  */
 const AT_FILE_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
 	...AUTOCOMPLETE_SELECT_LIST_LAYOUT,
 	filterItems: (items, token) => items.filter(item => atCompletionMatches(token, item.value)),
-	noMatchText: "Searching…",
 };
 
 const SLASH_COMMAND_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
@@ -1539,15 +1539,15 @@ export class Editor implements Component, Focusable {
 		if (bottomRow !== undefined) result.push(bottomRow);
 
 		// Add autocomplete list if active
-		if (this.#autocompleteState && this.#autocompleteList) {
+		const autocompleteList = this.#visibleAutocompleteList();
+		if (autocompleteList) {
 			// Clamp the dropdown to the terminal viewport: the editor rows already
 			// rendered above plus a small reserve must stay visible.
 			const viewportRows = this.viewportRowsProvider?.() || process.stdout.rows || Number(Bun.env.LINES) || 24;
-			this.#autocompleteList.setMaxVisible(
+			autocompleteList.setMaxVisible(
 				Math.max(3, Math.min(this.#autocompleteMaxVisible, viewportRows - result.length - 2)),
 			);
-			const autocompleteResult = this.#autocompleteList.render(width);
-			result.push(...autocompleteResult);
+			result.push(...autocompleteList.render(width));
 		}
 
 		return result;
@@ -1651,10 +1651,13 @@ export class Editor implements Component, Focusable {
 
 		// Handle autocomplete special keys first (but don't block other input)
 		if (this.#autocompleteState && this.#autocompleteList) {
-			// Escape - cancel autocomplete
+			// Escape - cancel autocomplete. A hidden popup (empty narrowed `@` list) is
+			// dropped too, so its pending refresh cannot pop up afterward, but the key
+			// falls through: the user never saw anything to dismiss.
 			if (kb.matchesCanonical(canonical, "tui.select.cancel")) {
+				const visible = this.isShowingAutocomplete();
 				this.#cancelAutocomplete(true);
-				return;
+				if (visible) return;
 			}
 			// Right arrow at end of line accepts the selection like Tab (fish-style).
 			// Mid-line, right arrow keeps its cursor-movement role and falls through.
@@ -4246,8 +4249,19 @@ export class Editor implements Component, Focusable {
 		}
 	}
 
+	/**
+	 * Whether an autocomplete popup is on screen. An `@` list narrowed to no match
+	 * while its refresh is pending stays open internally but is hidden, so it does
+	 * not claim keys (Escape, Vim mode switches) meant for the editor or app.
+	 */
 	isShowingAutocomplete(): boolean {
-		return this.#autocompleteState !== null;
+		return this.#visibleAutocompleteList() !== undefined;
+	}
+
+	/** The open autocomplete list, unless it has no candidate to show. */
+	#visibleAutocompleteList(): SelectList | undefined {
+		if (this.#autocompleteState === null) return undefined;
+		return this.#autocompleteList?.getSelectedItem() ? this.#autocompleteList : undefined;
 	}
 
 	async #updateAutocomplete(): Promise<void> {