@oh-my-pi/pi-tui 18.9.2 → 18.10.1

package/src/chat/assistant-message.ts

@@ -828,10 +828,10 @@ export class AssistantMessageComponent extends Container {
 		this.#nativeViewVersion++;
 	}
 
-	/** Mirrors a thinking section collapsed or expanded in the terminal. */
+	/** Mirrors a thinking section collapsed or expanded in the terminal; runs its controls' clicks. */
 	handleNativeEvent(event: NativeUiEvent): void {
 		if (event.type === "action") {
-			this.#handleErrorAction(event.act);
+			this.#handleAction(event.act);
 			return;
 		}
 		if (event.type !== "toggle" || !event.key.startsWith("k")) return;
@@ -860,6 +860,7 @@ export class AssistantMessageComponent extends Container {
 			return entry.node;
 		};
 		const children: NativeChild[] = [];
+		let answered = false;
 		if (message) {
 			const live = !this.#transcriptBlockFinalized && this.#lastUpdateTransient;
 			let tailIndex = -1;
@@ -876,6 +877,7 @@ export class AssistantMessageComponent extends Container {
 				const content = message.content[index]!;
 				const streaming = live && index === tailIndex;
 				if (content.type === "text" && canonicalizeMessage(content.text)) {
+					answered = true;
 					const source = content.text.trim();
 					// The terminal renders this source itself and would resolve a relative
 					// link against its own idea of the cwd: hand it the session-resolved
@@ -983,16 +985,29 @@ export class AssistantMessageComponent extends Container {
 		}
 		if (this.#turnUsage) {
 			const usage = formatTurnUsage(this.#turnUsage);
+			const line: NativeChild[] = [];
+			// Led by Copy and a dot: `⧉ · 12.4s · 19K tok this turn`.
+			if (answered && hasTranscriptActions()) {
+				line.push(
+					// `copy-answer`, not Tern's local `copy` (that would copy the icon's empty label).
+					node(
+						"icon",
+						{
+							name: "copy",
+							role: "omp.turn.copy",
+							title: "Copy answer",
+							aria: "Copy answer",
+							actions: { click: "copy-answer" },
+						},
+						undefined,
+						"copy",
+					),
+					node("text", { text: "·" }, undefined, "dot"),
+				);
+			}
+			line.push(node("text", { text: usage.text }, undefined, "text"));
 			children.push(
-				node(
-					"row",
-					{ role: "omp.turn.usage", gap: "xs", align: "center", title: usage.title },
-					[
-						node("icon", { name: "time" }, undefined, "icon"),
-						node("text", { text: usage.text }, undefined, "text"),
-					],
-					"turn-usage",
-				),
+				node("row", { role: "omp.turn.usage", gap: "xs", align: "center", title: usage.title }, line, "turn-usage"),
 			);
 		}
 		return col(children, { role: this.#rewound ? "omp.assistant.rewound" : "omp.assistant" });
@@ -1081,11 +1096,24 @@ export class AssistantMessageComponent extends Container {
 		return card({ role: "omp.error", tone: "error", key: "error" }, children);
 	}
 
-	/** Error frame action clicks: omp's own retry, clipboard and model-picker paths. */
-	#handleErrorAction(act: string): void {
+	/** Control clicks (the error frame's actions, the turn footer's Copy): omp's own retry, clipboard and model-picker paths. */
+	#handleAction(act: string): void {
 		if (act === "retry") runTranscriptAction({ act: "retry" });
 		else if (act === "switch-model") runTranscriptAction({ act: "switch-model" });
 		else if (act === "copy-error" && this.#errorText) runTranscriptAction({ act: "copy", text: this.#errorText });
+		else if (act === "copy-answer") {
+			const text = this.#answerText();
+			if (text) runTranscriptAction({ act: "copy", text });
+		}
+	}
+
+	/** The answer as the transcript shows it: its text blocks' markdown, a blank line apart, without thinking or tool calls. */
+	#answerText(): string {
+		const blocks: string[] = [];
+		for (const content of this.#displayedMessage?.content ?? []) {
+			if (content.type === "text" && canonicalizeMessage(content.text)) blocks.push(content.text.trim());
+		}
+		return blocks.join("\n\n");
 	}
 
 	/** Width-independent stable identities for the streamed leading thinking run. */

package/src/chat/user-message.ts

@@ -195,8 +195,9 @@ export class UserMessageComponent extends Container implements ReactionTarget, T
 	/**
 	 * A head-less user-toned frame with the prompt as markdown under its
 	 * attached images (titled `#N` like their chips, opening the materialized
-	 * file on click): the fill says "you". A quiet toolbar (time, Copy, Rewind) fades in on hover when the
-	 * host handles transcript actions. The live-steering marker and the
+	 * file on click): the fill says "you". A quiet footer like a turn's usage line
+	 * (`⧉ ⏪ · 09:45`: Copy, Rewind, the time sent) fades in at its bottom-left on hover when
+	 * the host handles transcript actions. The live-steering marker and the
 	 * agent's reaction are chips at the bottom-right, so a reaction landing
 	 * later updates the frame in place, even deep in scrollback.
 	 */
@@ -207,32 +208,44 @@ export class UserMessageComponent extends Container implements ReactionTarget, T
 		this.#nativeHour12 = hour12;
 		const children: NativeChild[] = [];
 		if (!this.#synthetic && hasTranscriptActions()) {
-			const tools: NativeChild[] = [];
+			const tools: NativeChild[] = [
+				// `copy-message`, not Tern's local `copy` (that would copy the icon's empty label).
+				node(
+					"icon",
+					{
+						name: "copy",
+						role: "omp.user.tool",
+						title: "Copy message",
+						aria: "Copy message",
+						actions: { click: "copy-message" },
+					},
+					undefined,
+					"copy",
+				),
+				node(
+					"icon",
+					{
+						name: "rewind",
+						role: "omp.user.tool",
+						title: "Rewind the conversation to an earlier message",
+						aria: "Rewind",
+						actions: { click: "rewind" },
+					},
+					undefined,
+					"rewind",
+				),
+			];
 			if (this.#timestamp !== undefined) {
 				const at = new Date(this.#timestamp);
 				tools.push(
+					node("text", { text: "·" }, undefined, "dot"),
 					text([span(at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12 }), "dim mono")], {
 						role: "omp.user.time",
 						title: at.toLocaleString([], { hour12 }),
 					}),
 				);
 			}
-			tools.push(
-				// `copy-message`, not Tern's local `copy` (that would copy the label).
-				text("Copy", {
-					role: "omp.user.tool",
-					actions: { click: "copy-message" },
-					title: "Copy message",
-					key: "copy",
-				}),
-				text("Rewind", {
-					role: "omp.user.tool",
-					actions: { click: "rewind" },
-					title: "Rewind the conversation to an earlier message",
-					key: "rewind",
-				}),
-			);
-			children.push(node("row", { gap: "xs", role: "omp.user.tools" }, tools, "tools"));
+			children.push(node("row", { gap: "xs", align: "center", role: "omp.user.tools" }, tools, "tools"));
 		}
 		// Videos keep their chip only: the native image node decodes stills.
 		const thumbs: NativeNode[] = [];

package/src/chrome/countdown-timer.ts

@@ -49,15 +49,15 @@ export class CountdownTimer {
 
 	/**
 	 * The remaining time as a terminal-clocked `elapsed` node: its age is the
-	 * negative remaining time (the start lies in the future), so it counts up
-	 * toward zero and freezes there at expiry. The age is taken on the first
+	 * negative remaining time (the start lies in the future), so it counts down
+	 * to zero and holds there at expiry (no `stopped`: that would freeze it at
+	 * zero from the start). The age is taken on the first
 	 * call after a (re)start, when the node is first written, and the node is
 	 * reused until {@link reset}.
 	 */
 	describe(): NativeNode {
 		this.#node ??= node("elapsed", {
 			age: Math.min(0, Date.now() - this.#deadlineMs),
-			stopped: 0,
 			format: "short",
 		});
 		return this.#node;

package/src/chrome/transcript-container.ts

@@ -96,12 +96,37 @@ interface TranscriptEntry {
 	 * state for emitted-row slicing but never emits another mid-stream row.
 	 */
 	stableFrozen: boolean;
+	/**
+	 * Head rows of a settled block already in native history while the rest
+	 * stays live: pressure commits only the rows that left the screen, so no
+	 * committed row is ever still visible above the viewport.
+	 */
+	split: RowSplit | undefined;
+}
+
+/**
+ * A committed physical row prefix of one block. `rows` counts trimmed render
+ * rows at `width` (any emitted stable prefix included) and `hash` fingerprints
+ * them; `text` is their letters and digits in order. A settled block can still
+ * change (a tool pane expanding) or rewrap at another width without a replay,
+ * so every render re-locates the seam: the committed rows when they render
+ * unchanged, else by continuing `text` — per-row decoration (quote bars,
+ * borders, rules) is punctuation it ignores.
+ */
+interface RowSplit {
+	readonly rows: number;
+	readonly width: number;
+	readonly hash: number | bigint;
+	readonly text: string;
+	/** Seam of the last render it was located in; renders are memoized per frame. */
+	located?: { readonly rendered: readonly string[]; readonly count: number };
 }
 
 type RetirementPolicy = "pressure" | "flush";
 type Offered =
 	| { batch: HistoryBatch; kind: "append"; entry: number; emittedEnd: number }
-	| { batch: HistoryBatch; kind: "commit"; end: number }
+	/** Whole blocks `[frontier, end)`, then optionally the head rows of block `end`. */
+	| { batch: HistoryBatch; kind: "commit"; end: number; split?: RowSplit }
 	| { batch: HistoryBatch; kind: "replay" };
 
 /** Rows a progressive-append retirement offers, and the stable count they bring the head to. */
@@ -140,6 +165,24 @@ function isPlainBlank(line: string): boolean {
 	return !/\S/.test(line);
 }
 
+/** Letters and digits of `rows` in reading order: the content rewrapping preserves. */
+function contentOf(rows: readonly string[]): string {
+	let text = "";
+	for (const row of rows) text += Bun.stripANSI(row).replace(/[^\p{L}\p{N}]/gu, "");
+	return text;
+}
+
+/**
+ * Split committing the first `rows` rows of `scrollback` at `width`. The
+ * fingerprint covers the scrollback bytes history receives, which can differ
+ * from the measured render at the same row count (a SIXEL image encodes
+ * synchronously instead of returning its reserved rows).
+ */
+function rowSplit(scrollback: readonly string[], rows: number, width: number): RowSplit {
+	const committed = scrollback.slice(0, rows);
+	return { rows, width, hash: Bun.hash(committed.join("\n")), text: contentOf(committed) };
+}
+
 /** Whether `prefix` matches `rows` byte-for-byte from the top. */
 export function isRowPrefix(prefix: readonly string[], rows: readonly string[]): boolean {
 	if (prefix.length > rows.length) return false;
@@ -226,6 +269,7 @@ export class TranscriptContainer extends Container {
 			stableRowCountByWidth: new Map(),
 			emitted: 0,
 			stableFrozen: false,
+			split: undefined,
 		});
 		// `children` is public and may be edited externally; re-check the whole
 		// list once instead of trusting positions. Insert-after-anchor callers
@@ -300,13 +344,16 @@ export class TranscriptContainer extends Container {
 	 */
 	resetStableEmission(): void {
 		this.#syncEntries();
-		if (this.#offered?.kind === "append") this.#offered = undefined;
+		if (this.#offered?.kind === "append" || (this.#offered?.kind === "commit" && this.#offered.split)) {
+			this.#offered = undefined;
+		}
 		for (const entry of this.#entries) {
 			entry.emitted = 0;
 			entry.stableRows = EMPTY_STABLE_ROWS;
 			entry.renderedStableByWidth = new Map();
 			entry.stableRowCountByWidth = new Map();
 			entry.stableFrozen = false;
+			entry.split = undefined;
 			if (entry.mode === "appendOnly") {
 				(entry.component as Component & AppendOnlyTranscriptBlock).resetTranscriptStableRows?.();
 			}
@@ -329,8 +376,8 @@ export class TranscriptContainer extends Container {
 		const index = this.#entries.findLastIndex(entry => entry.component === component);
 		if (index < 0) return -1;
 		const entry = this.#entries[index]!;
-		if (entry.state === "committed" || entry.emitted > 0) return -1;
-		if (this.#offered?.kind === "commit" && index < this.#offered.end) return -1;
+		if (entry.state === "committed" || entry.emitted > 0 || entry.split !== undefined) return -1;
+		if (this.#offered?.kind === "commit" && index < this.#offered.end + (this.#offered.split ? 1 : 0)) return -1;
 		if (this.#offered?.kind === "append" && index === this.#offered.entry) return -1;
 		return index;
 	}
@@ -434,17 +481,21 @@ export class TranscriptContainer extends Container {
 
 	/**
 	 * One block's blank-trimmed render at its full-height allocation. Inside an
-	 * open frame the first measurement of each block is replayed to later ones.
+	 * open frame the first measurement of each block is replayed to later ones,
+	 * leaving whatever allocation the viewport has since rendered it at.
 	 */
 	#measuredRows(entry: TranscriptEntry, width: number): readonly string[] {
-		this.#setAllocation(entry.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
-		if (this.#openFrame === undefined) return this.#renderEntry(entry, width);
+		if (this.#openFrame === undefined) {
+			this.#setAllocation(entry.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
+			return this.#renderEntry(entry, width);
+		}
 		if (this.#frameRowsWidth !== width) {
 			this.#frameRows.clear();
 			this.#frameRowsWidth = width;
 		}
 		let rows = this.#frameRows.get(entry);
 		if (rows === undefined) {
+			this.#setAllocation(entry.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
 			rows = this.#renderEntry(entry, width);
 			this.#frameRows.set(entry, rows);
 		}
@@ -646,6 +697,20 @@ export class TranscriptContainer extends Container {
 			rows = after.slice(before.length);
 		} else if (offered.kind === "commit") {
 			rows = this.#renderRange(this.#frontier, offered.end, width, true).rows;
+			const head = offered.split ? this.#entries[offered.end] : undefined;
+			if (head !== undefined && offered.split !== undefined) {
+				// The offer's fingerprint covers bytes of a discarded frame history
+				// never received (an image-budget retry demotes graphics to text),
+				// so the split keeps its cut and re-fingerprints the rows it now
+				// delivers. Only another width relocates the cut.
+				const start = this.#emittedRowCount(head, width);
+				const scrollback = renderForScrollback(() => this.#renderEntry(head, width));
+				const cut =
+					width === offered.split.width ? offered.split.rows : this.#splitRowCount(head, offered.split, width);
+				const end = Math.min(cut, scrollback.length);
+				offered.split = rowSplit(scrollback, end, width);
+				rows = [...rows, ...scrollback.slice(start, end)];
+			}
 		} else {
 			rows = this.#renderReplay(width);
 		}
@@ -674,6 +739,7 @@ export class TranscriptContainer extends Container {
 			head?.mode === "appendOnly" &&
 			!head.stableFrozen &&
 			head.state !== "committed" &&
+			head.split === undefined &&
 			head.emitted < head.stableRows.length
 				? head
 				: undefined;
@@ -739,9 +805,26 @@ export class TranscriptContainer extends Container {
 			limit = Math.max(limit, this.#frontier + (this.#liveCount() - (MAX_LIVE_BLOCKS - 1)));
 		}
 		if (policy === "flush") limit = this.#entries.length;
+		// The block straddling the top edge commits only the rows that left the
+		// screen; the rest stays live, so a later shrink of the chrome or the
+		// tail refills the screen from live rows instead of opening a band no
+		// frame can fill (rows still on screen cannot return from scrollback).
+		let split: { index: number; rows: readonly string[]; split: RowSplit } | undefined;
+		if (policy === "pressure" && keep > 0 && limit === this.#frontier + keep) {
+			const boundary = live[keep - 1]!;
+			const visible = room - tailRows - (tailRows > 0 ? 1 : 0);
+			if (boundary.entry.state === "settled" && visible > 0) {
+				const offer = this.#splitOffer(boundary.entry, width, visible);
+				if (offer !== undefined) {
+					split = { index: boundary.index, ...offer };
+					limit = boundary.index;
+				}
+			}
+		}
 		let end = this.#frontier;
 		while (end < limit && end < this.#entries.length && this.#entries[end]!.state === "settled") end++;
-		if (end === this.#frontier) {
+		if (split !== undefined && end !== split.index) split = undefined;
+		if (end === this.#frontier && split === undefined) {
 			if (policy === "pressure") this.#notePinnedFrontier();
 			return undefined;
 		}
@@ -761,15 +844,35 @@ export class TranscriptContainer extends Container {
 		} finally {
 			popLoopPhase();
 		}
+		if (split !== undefined && retirement.end !== split.index) split = undefined;
 		const batch: HistoryBatch = {
 			id: this.#nextBatchId++,
-			rows: retirement.rows,
+			rows: split === undefined ? retirement.rows : [...retirement.rows, ...split.rows],
 			kind: "append",
 		};
-		this.#offered = { batch, end: retirement.end, kind: "commit" };
+		this.#offered = { batch, end: retirement.end, kind: "commit", split: split?.split };
 		return batch;
 	}
 
+	/**
+	 * The head rows of settled `entry` beyond its committed prefix that leave
+	 * `visible` rows live, or undefined when nothing would remain committed
+	 * past that prefix or the scrollback render would not line up row for row.
+	 */
+	#splitOffer(
+		entry: TranscriptEntry,
+		width: number,
+		visible: number,
+	): { rows: readonly string[]; split: RowSplit } | undefined {
+		const measured = this.#measuredRows(entry, width);
+		const start = this.#emittedRowCount(entry, width);
+		const total = measured.length - visible;
+		if (total <= start) return undefined;
+		const scrollback = renderForScrollback(() => this.#renderEntry(entry, width));
+		if (scrollback.length !== measured.length) return undefined;
+		return { rows: scrollback.slice(start, total), split: rowSplit(scrollback, total, width) };
+	}
+
 	/** Acknowledges exactly the most recently offered append, commit, or replay transaction. */
 	acknowledgeFinalizedBatch(id: number): void {
 		const offered = this.#offered;
@@ -786,6 +889,8 @@ export class TranscriptContainer extends Container {
 				this.#retireEntry(this.#entries[index]!);
 			}
 			this.#frontier = offered.end;
+			const head = offered.split ? this.#entries[offered.end] : undefined;
+			if (head !== undefined) head.split = offered.split;
 		} else {
 			this.#releaseCommittedRenderCaches();
 		}
@@ -928,14 +1033,32 @@ export class TranscriptContainer extends Container {
 	}
 
 	/**
-	 * Length-only variant of `#renderStablePrefix`: answers the projected
-	 * emitted row count without re-rendering the prefix. The container only
-	 * needs the length for slicing; the render call it replaced existed
-	 * purely to read `.length` off the result.
+	 * Rows of `entry` at `width` already in native history or in the
+	 * unacknowledged offer: the row split when one is pending or committed,
+	 * else its emitted stable prefix.
 	 */
 	#projectedEmittedRowCount(entry: TranscriptEntry, index: number, width: number): number {
 		const offered = this.#offered;
-		const count = offered?.kind === "append" && offered.entry === index ? offered.emittedEnd : entry.emitted;
+		if (offered?.kind === "commit" && offered.split !== undefined && offered.end === index) {
+			return this.#splitRowCount(entry, offered.split, width);
+		}
+		if (offered?.kind === "append" && offered.entry === index && entry.split === undefined) {
+			return this.#stablePrefixRowCount(entry, offered.emittedEnd, width);
+		}
+		return this.#emittedRowCount(entry, width);
+	}
+
+	/** Rows of `entry` at `width` already acknowledged into native history. */
+	#emittedRowCount(entry: TranscriptEntry, width: number): number {
+		if (entry.split !== undefined) return this.#splitRowCount(entry, entry.split, width);
+		return this.#stablePrefixRowCount(entry, entry.emitted, width);
+	}
+
+	/**
+	 * Length-only variant of `#renderStablePrefix`: answers the emitted row
+	 * count without re-rendering the prefix when this width already recorded it.
+	 */
+	#stablePrefixRowCount(entry: TranscriptEntry, count: number, width: number): number {
 		if (count === 0) return 0;
 		const perCount = entry.stableRowCountByWidth.get(width);
 		const memo = perCount?.get(Math.min(count, entry.stableRows.length));
@@ -943,6 +1066,39 @@ export class TranscriptContainer extends Container {
 		return this.#renderStablePrefix(entry, count, width).length;
 	}
 
+	/**
+	 * Rows of `entry`'s current render at `width` that `split` committed: all
+	 * of them while they render unchanged, else the longest prefix whose
+	 * content continues the committed text exactly. A row the seam falls
+	 * inside, a row the block changed, a row with no content (a rule or other
+	 * punctuation the block revealed), or one whose decoration reads as
+	 * content stays live: it can repeat committed text but never drop any.
+	 */
+	#splitRowCount(entry: TranscriptEntry, split: RowSplit, width: number): number {
+		const rendered = this.#measuredRows(entry, width);
+		if (split.located?.rendered === rendered) return split.located.count;
+		let count = 0;
+		if (
+			width === split.width &&
+			rendered.length >= split.rows &&
+			Bun.hash(rendered.slice(0, split.rows).join("\n")) === split.hash
+		) {
+			count = split.rows;
+		} else {
+			let consumed = 0;
+			while (count < rendered.length && consumed < split.text.length) {
+				const row = contentOf([rendered[count]!]);
+				// An empty-content row matches at any offset, so the walk cannot
+				// tell it apart from a revealed row history never received.
+				if (row.length === 0 || !split.text.startsWith(row, consumed)) break;
+				consumed += row.length;
+				count++;
+			}
+		}
+		split.located = { rendered, count };
+		return count;
+	}
+
 	/**
 	 * Size a progressive-append batch from the stable renders `#renderEntry`
 	 * recorded at this width, without rendering any prefix. Each recorded count
@@ -950,7 +1106,8 @@ export class TranscriptContainer extends Container {
 	 * `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.
+	 * resize); the rendered walk then decides. Like the rendered walk, it never
+	 * passes `overflow`: a prefix reaching onto the screen waits.
 	 */
 	#measuredAppendBatch(entry: TranscriptEntry, width: number, overflow: number): AppendBatch | undefined {
 		const counts = entry.stableRowCountByWidth.get(width);
@@ -961,7 +1118,7 @@ export class TranscriptContainer extends Container {
 		if (start === undefined) return undefined;
 		let emittedEnd = entry.emitted;
 		let end = start;
-		while (emittedEnd < target && end - start < overflow) {
+		while (emittedEnd < target) {
 			const next = counts.get(emittedEnd + 1);
 			if (next === undefined) return undefined;
 			if (next <= start) {
@@ -970,6 +1127,7 @@ export class TranscriptContainer extends Container {
 				}
 				break;
 			}
+			if (next - start > overflow) break;
 			end = next;
 			emittedEnd += 1;
 		}
@@ -978,15 +1136,18 @@ export class TranscriptContainer extends Container {
 
 	/**
 	 * 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).
+	 * extend the emitted prefix while its new rows stay within `overflow` — the
+	 * rows that left the screen — stopping at the first prefix that would reach
+	 * onto it, adds no row, or stops extending the emitted one (freezing the
+	 * block when that is the very next prefix). A prefix still partly on screen
+	 * stays live: committing it would strand those rows above the live tail,
+	 * where a later shrink of the chrome below opens a band no frame can fill.
 	 */
 	#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) {
+		while (emittedEnd < entry.stableRows.length) {
 			const next = this.#renderStablePrefix(entry, emittedEnd + 1, width);
 			if (!isRowPrefix(before, next) || next.length === before.length) {
 				if (emittedEnd === entry.emitted) {
@@ -994,6 +1155,7 @@ export class TranscriptContainer extends Container {
 				}
 				break;
 			}
+			if (next.length - before.length > overflow) break;
 			after = next;
 			emittedEnd += 1;
 		}
@@ -1055,7 +1217,7 @@ export class TranscriptContainer extends Container {
 			const rendered = renderForScrollback(() =>
 				index === start ? this.#renderEntry(entry, width) : trimBlankEdges(entry.component.render(width)),
 			);
-			const emittedRows = index === start ? this.#renderStablePrefix(entry, entry.emitted, width).length : 0;
+			const emittedRows = index === start ? this.#emittedRowCount(entry, width) : 0;
 			const block = rendered.slice(emittedRows);
 			reached = index + 1;
 			if (block.length > 0) {
@@ -1071,7 +1233,11 @@ export class TranscriptContainer extends Container {
 	#renderReplay(width: number): readonly string[] {
 		const rows = Array.from(this.#renderRange(0, this.#frontier, width, true).rows);
 		const head = this.#entries[this.#frontier];
-		if (head?.mode === "appendOnly" && head.emitted > 0) {
+		if (head?.split !== undefined) {
+			this.#setAllocation(head.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
+			const committed = this.#splitRowCount(head, head.split, width);
+			rows.push(...renderForScrollback(() => this.#renderEntry(head, width)).slice(0, committed));
+		} else if (head?.mode === "appendOnly" && head.emitted > 0) {
 			this.#setAllocation(head.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
 			this.#renderEntry(head, width);
 			rows.push(...this.#renderStablePrefix(head, head.emitted, width));
@@ -1082,10 +1248,15 @@ export class TranscriptContainer extends Container {
 	#completeFullyEmittedHeads(width: number): void {
 		while (this.#frontier < this.#entries.length) {
 			const entry = this.#entries[this.#frontier]!;
-			if (entry.mode !== "appendOnly" || entry.state !== "settled") return;
-			const rendered = this.#measuredRows(entry, width);
-			if (entry.emitted !== entry.stableRows.length) return;
-			if (this.#renderStablePrefix(entry, entry.emitted, width).length !== rendered.length) return;
+			if (entry.state !== "settled") return;
+			if (entry.split !== undefined) {
+				if (this.#splitRowCount(entry, entry.split, width) < this.#measuredRows(entry, width).length) return;
+			} else {
+				if (entry.mode !== "appendOnly") return;
+				const rendered = this.#measuredRows(entry, width);
+				if (entry.emitted !== entry.stableRows.length) return;
+				if (this.#renderStablePrefix(entry, entry.emitted, width).length !== rendered.length) return;
+			}
 			this.#retireEntry(entry);
 			this.#frontier++;
 		}
@@ -1094,6 +1265,7 @@ export class TranscriptContainer extends Container {
 	#retireEntry(entry: TranscriptEntry): void {
 		entry.state = "committed";
 		entry.emitted = 0;
+		entry.split = undefined;
 		entry.stableRows = EMPTY_STABLE_ROWS;
 		entry.renderedStableByWidth = new Map();
 		entry.stableRowCountByWidth = new Map();
@@ -1124,7 +1296,8 @@ export class TranscriptContainer extends Container {
 
 	#startReplay(): void {
 		const head = this.#entries[this.#frontier];
-		this.#replayPending = this.#frontier > 0 || (head?.mode === "appendOnly" && head.emitted > 0);
+		this.#replayPending =
+			this.#frontier > 0 || head?.split !== undefined || (head?.mode === "appendOnly" && head.emitted > 0);
 		this.#replayRequested = false;
 	}
 
@@ -1295,6 +1468,7 @@ export class TranscriptContainer extends Container {
 					stableRowCountByWidth: new Map(),
 					emitted: 0,
 					stableFrozen: false,
+					split: undefined,
 				},
 		);
 		this.#frontier = this.#entries.findIndex(entry => entry.state !== "committed");