@linxiraos/pi-tui 1.1.26 → 1.2.0

package/src/app-keybindings.ts

@@ -2,7 +2,7 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 // Subpaths, not the `@linxiraos/pi-utils` barrel: the barrel loads the native
 // addon (file-lock), and key-hint formatting runs on addon-free CLI paths
-// (`omp --version`, help) through cli/command-help.ts.
+// (`zetacode --version`, help) through cli/command-help.ts.
 import { getActiveProfile, getAgentDir, getProfileRootDir } from "@linxiraos/pi-utils/dirs";
 import { isEnoent } from "@linxiraos/pi-utils/fs-error";
 import * as logger from "@linxiraos/pi-utils/logger";
@@ -60,6 +60,7 @@ interface AppKeybindings {
 	"app.tree.unfoldOrDown": true;
 	"app.plan.toggle": true;
 	"app.history.search": true;
+	"app.stt.pushToTalk": true;
 	"app.stt.toggle": true;
 	"app.live.toggle": true;
 }
@@ -237,9 +238,13 @@ export const KEYBINDINGS = {
 		defaultKeys: "ctrl+r",
 		description: "Search history",
 	},
+	"app.stt.pushToTalk": {
+		defaultKeys: "space",
+		description: "Hold to record speech-to-text",
+	},
 	"app.stt.toggle": {
 		defaultKeys: [],
-		description: "Toggle speech-to-text (default gesture: hold Space)",
+		description: "Toggle speech-to-text recording",
 	},
 	"app.live.toggle": {
 		defaultKeys: "ctrl+l",

package/src/apps/autoresearch-dashboard.ts

@@ -17,8 +17,8 @@ import {
 import { formatNum, type ExperimentResult, type ExperimentState } from "../tools/autoresearch";
 import type { TspSpan, TspTableColumn, TspText } from "@linxiraos/pi-wire";
 import { card, col, elapsed, keyed, node, row, span, text } from "../native/describe";
-import type { DescribeContext, NativeNode } from "../native/node";
-import { hintsRow } from "../native/overlay";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { actionBar, actionButton, hintsRow } from "../native/overlay";
 import { Memo } from "../native/memo";
 import { isNativeRendering } from "../native/state";
 
@@ -190,9 +190,9 @@ export function createDashboardController(): DashboardController {
 											{ keys: ["up", "down", "j", "k"], label: "scroll" },
 											{ keys: ["pageUp", "pageDown"], label: "page" },
 											{ keys: ["g", "shift+g"], label: "top/bottom" },
-											{ keys: ["escape"], label: "close" },
 										]),
 									);
+									children.push(actionBar([null, actionButton("Close", "close", { keys: "escape" })]));
 									return col(children, { gap: "md", role: "zeta.app.autoresearch" });
 								},
 							);
@@ -214,6 +214,10 @@ export function createDashboardController(): DashboardController {
 							scrollView.setHeight(viewportRows);
 							return [header, ...scrollView.render(width), renderOverlayFooter(width, theme)];
 						},
+						/** The Close button runs Esc's path. */
+						handleNativeEvent(event: NativeUiEvent): void {
+							if (event.type === "action" && event.act === "close") done(undefined);
+						},
 						handleInput(data: string): void {
 							if (matchesKey(data, "escape") || matchesKey(data, "esc") || data === "q") {
 								done(undefined);

package/src/apps/cleanse-board.ts

@@ -1,5 +1,5 @@
 /**
- * Live status board for `omp cleanse`.
+ * Live status board for `zetacode cleanse`.
  *
  * Interactive terminals get a transient board repainted in place: a phase
  * spinner (model resolution, checker discovery), one row per running checker,
@@ -59,7 +59,7 @@ const REPAIR_BAR_STYLE: ProgressBarStyle = {
 	styleEmpty: text => fgOrPlain("dim", text),
 };
 
-/** Rendering surface for one `omp cleanse` run. */
+/** Rendering surface for one `zetacode cleanse` run. */
 export interface CleanseStatusBoard {
 	readonly interactive: boolean;
 	/** Print a permanent line above the live area (plain write when non-TTY). */

package/src/apps/cleanse-picker.ts

@@ -1,5 +1,5 @@
 /**
- * Standalone TUI pickers for `omp cleanse`.
+ * Standalone TUI pickers for `zetacode cleanse`.
  *
  * One-shot {@link selectStandaloneItem} and {@link promptStandaloneText}
  * prompts, resolved on select/submit/cancel so the command can keep writing

package/src/apps/debug/log-viewer.ts

@@ -10,7 +10,7 @@ import { Input } from "../../components/input";
 import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
 import { padding, truncateToWidth, visibleWidth } from "../../utils";
 import { isRecord, sanitizeText } from "@linxiraos/pi-utils";
-import { theme } from "../../theme/theme";
+import { getThemeEpoch, theme } from "../../theme/theme";
 import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
 import { DebugViewerFrame, type DebugViewerFrameContent, type DebugViewerFrameContext } from "./viewer-frame";
 import { formatDebugLogExpandedLines, parseDebugLogPid, parseDebugLogTimestampMs } from "./log-formatting";
@@ -28,6 +28,12 @@ export const LOAD_OLDER_LABEL = "### MOVE UP TO LOAD MORE...";
 
 const INITIAL_LOG_CHUNK = 50;
 const LOAD_OLDER_CHUNK = 50;
+/**
+ * Default for {@link DebugLogViewerModelOptions.maxLogEntries}. Once this many
+ * entries are loaded, older history stops loading; the newest entries (the
+ * current session) are never evicted.
+ */
+const MAX_LOG_ENTRIES = 50_000;
 const MIN_LOG_VIEWER_WIDTH = 48;
 /** Picker item id of the "load older entries" row. */
 const OLDER_ITEM = "older";
@@ -43,6 +49,24 @@ type LogEntry = {
 	rawLine: string;
 	timestampMs: number | undefined;
 	pid: number | undefined;
+	/** Lowercased {@link rawLine}, filled on first filter match. */
+	lowerLine?: string;
+};
+
+type SelectionState = {
+	rows: readonly ViewerRow[];
+	cursor: number;
+	anchor: number | undefined;
+	indices: number[];
+	set: Set<number>;
+};
+
+type CachedLogRow = {
+	width: number;
+	selected: boolean;
+	active: boolean;
+	expanded: boolean;
+	lines: string[];
 };
 
 type CursorToken = { kind: "log"; logIndex: number } | { kind: "load-older" };
@@ -52,6 +76,8 @@ type DebugLogViewerModelOptions = {
 	processPid?: number;
 	hasOlderLogs?: () => boolean;
 	loadOlderLogs?: (limitDays?: number) => Promise<string>;
+	/** Most entries kept; older history beyond it is not loaded. Defaults to {@link MAX_LOG_ENTRIES}. */
+	maxLogEntries?: number;
 };
 
 /**
@@ -111,6 +137,17 @@ function getProcessStartMs(): number {
 	return Date.now() - process.uptime() * 1000;
 }
 
+function parseLogEntries(logText: string): LogEntry[] {
+	return logText
+		.split("\n")
+		.filter(line => line.length > 0)
+		.map(rawLine => ({
+			rawLine,
+			timestampMs: parseDebugLogTimestampMs(rawLine),
+			pid: parseDebugLogPid(rawLine),
+		}));
+}
+
 /** Split raw log text into nonempty entries. */
 export function splitLogText(logText: string): string[] {
 	return logText.split("\n").filter(line => line.length > 0);
@@ -126,12 +163,18 @@ export function buildLogCopyPayload(lines: string[]): string {
 
 /** Filter, paginate, expand, and select captured log entries. */
 export class DebugLogViewerModel {
+	/**
+	 * Loaded entries, newest first, so loading older history appends instead of
+	 * copying the whole array. Log index `i` (0 = oldest) lives at `length - 1 - i`.
+	 */
 	#entries: LogEntry[];
+	readonly #maxLogEntries: number;
 	#rows: ViewerRow[];
 	#visibleLogIndices: number[];
 	#selectableRowIndices: number[];
 	#cursorSelectableIndex = 0;
 	#selectionAnchorSelectableIndex: number | undefined;
+	#selection: SelectionState | undefined;
 	#expandedLogIndices = new Set<number>();
 	#filterQuery = "";
 	#processStartMs: number;
@@ -142,12 +185,17 @@ export class DebugLogViewerModel {
 	#loadOlderLogs?: (limitDays?: number) => Promise<string>;
 
 	constructor(logText: string, options: DebugLogViewerModelOptions = {}) {
-		const { processStartMs = getProcessStartMs(), processPid = process.pid, hasOlderLogs, loadOlderLogs } = options;
-		this.#entries = splitLogText(logText).map(rawLine => ({
-			rawLine,
-			timestampMs: parseDebugLogTimestampMs(rawLine),
-			pid: parseDebugLogPid(rawLine),
-		}));
+		const {
+			processStartMs = getProcessStartMs(),
+			processPid = process.pid,
+			hasOlderLogs,
+			loadOlderLogs,
+			maxLogEntries = MAX_LOG_ENTRIES,
+		} = options;
+		this.#maxLogEntries = Math.max(1, maxLogEntries);
+		this.#entries = parseLogEntries(logText).reverse();
+		// Newest first: truncating keeps the newest entries and drops the oldest.
+		if (this.#entries.length > this.#maxLogEntries) this.#entries.length = this.#maxLogEntries;
 		this.#processStartMs = processStartMs;
 		this.#processPid = processPid;
 		this.#hasOlderLogs = hasOlderLogs;
@@ -163,6 +211,11 @@ export class DebugLogViewerModel {
 		return this.#entries.length;
 	}
 
+	/** True once the entry cap is reached, so older history no longer loads. */
+	get historyLimitReached(): boolean {
+		return this.#entries.length >= this.#maxLogEntries;
+	}
+
 	get visibleLogCount(): number {
 		return this.#visibleLogIndices.length;
 	}
@@ -201,7 +254,7 @@ export class DebugLogViewerModel {
 	}
 
 	getRawLine(logIndex: number): string {
-		return this.#entries[logIndex]?.rawLine ?? "";
+		return this.#entryAt(logIndex)?.rawLine ?? "";
 	}
 
 	setFilterQuery(query: string): void {
@@ -269,38 +322,15 @@ export class DebugLogViewerModel {
 	}
 
 	getSelectedLogIndices(): number[] {
-		if (this.#selectableRowIndices.length === 0) {
-			return [];
-		}
-
-		const cursorRow = this.#getCursorRow();
-		if (this.#selectionAnchorSelectableIndex === undefined) {
-			if (cursorRow?.kind !== "log") {
-				return [];
-			}
-			return [cursorRow.logIndex];
-		}
-
-		const min = Math.min(this.#selectionAnchorSelectableIndex, this.#cursorSelectableIndex);
-		const max = Math.max(this.#selectionAnchorSelectableIndex, this.#cursorSelectableIndex);
-		const selected: number[] = [];
-		for (let i = min; i <= max; i++) {
-			const rowIndex = this.#selectableRowIndices[i];
-			const row = rowIndex === undefined ? undefined : this.#rows[rowIndex];
-			if (row?.kind === "log") {
-				selected.push(row.logIndex);
-			}
-		}
-		return selected;
+		return this.#selectionState().indices.slice();
 	}
 
 	getSelectedCount(): number {
-		return this.getSelectedLogIndices().length;
+		return this.#selectionState().indices.length;
 	}
 
 	isSelected(logIndex: number): boolean {
-		const selected = this.getSelectedLogIndices();
-		return selected.includes(logIndex);
+		return this.#selectionState().set.has(logIndex);
 	}
 
 	isExpanded(logIndex: number): boolean {
@@ -320,8 +350,7 @@ export class DebugLogViewerModel {
 	}
 
 	getSelectedRawLines(): string[] {
-		const selectedIndices = this.getSelectedLogIndices();
-		return selectedIndices.map(index => this.getRawLine(index));
+		return this.#selectionState().indices.map(index => this.getRawLine(index));
 	}
 
 	selectAllVisible(): void {
@@ -381,16 +410,17 @@ export class DebugLogViewerModel {
 	prependLogs(logText: string): number {
 		const previousCursor = this.#getCursorToken();
 		const previousAnchorLogIndex = this.#getAnchorLogIndex();
-		const newEntries = splitLogText(logText).map(rawLine => ({
-			rawLine,
-			timestampMs: parseDebugLogTimestampMs(rawLine),
-			pid: parseDebugLogPid(rawLine),
-		}));
+		const room = this.#maxLogEntries - this.#entries.length;
+		const parsed = room > 0 ? parseLogEntries(logText) : [];
+		// Chronological order: past the cap, keep the chunk's newest entries (nearest the loaded history).
+		const newEntries = parsed.length > room ? parsed.slice(parsed.length - room) : parsed;
 		if (newEntries.length === 0) {
 			return 0;
 		}
 		const offset = newEntries.length;
-		this.#entries = [...newEntries, ...this.#entries];
+		for (let i = offset - 1; i >= 0; i--) {
+			this.#entries.push(newEntries[i]!);
+		}
 		this.#loadedStartIndex += offset;
 		this.#expandedLogIndices = new Set([...this.#expandedLogIndices].map(logIndex => logIndex + offset));
 		const adjustedCursor: CursorToken | undefined =
@@ -421,7 +451,7 @@ export class DebugLogViewerModel {
 		const query = this.#filterQuery.toLowerCase();
 		const visible: number[] = [];
 		for (let i = this.#loadedStartIndex; i < this.#entries.length; i++) {
-			const entry = this.#entries[i];
+			const entry = this.#entryAt(i);
 			if (!entry) {
 				continue;
 			}
@@ -438,7 +468,7 @@ export class DebugLogViewerModel {
 		let olderSeen = false;
 		let warningInserted = false;
 		for (const logIndex of visible) {
-			const timestampMs = this.#entries[logIndex]?.timestampMs;
+			const timestampMs = this.#entryAt(logIndex)?.timestampMs;
 			if (timestampMs !== undefined) {
 				if (timestampMs < this.#processStartMs) {
 					olderSeen = true;
@@ -486,7 +516,7 @@ export class DebugLogViewerModel {
 	}
 
 	#matchesFilters(entry: LogEntry, query: string): boolean {
-		if (query.length > 0 && !entry.rawLine.toLowerCase().includes(query)) {
+		if (query.length > 0 && !(entry.lowerLine ??= entry.rawLine.toLowerCase()).includes(query)) {
 			return false;
 		}
 		if (!this.#processFilterEnabled) {
@@ -503,7 +533,7 @@ export class DebugLogViewerModel {
 			return false;
 		}
 		for (let i = 0; i < this.#loadedStartIndex; i++) {
-			const entry = this.#entries[i];
+			const entry = this.#entryAt(i);
 			if (entry && this.#matchesFilters(entry, query)) {
 				return true;
 			}
@@ -512,7 +542,60 @@ export class DebugLogViewerModel {
 	}
 
 	#hasExternalOlderLogs(): boolean {
-		return this.#hasOlderLogs?.() ?? false;
+		return !this.historyLimitReached && (this.#hasOlderLogs?.() ?? false);
+	}
+
+	#entryAt(logIndex: number): LogEntry | undefined {
+		return this.#entries[this.#entries.length - 1 - logIndex];
+	}
+
+	/** Selected log indices, memoized until the rows, cursor or anchor change. */
+	#selectionState(): SelectionState {
+		const cached = this.#selection;
+		if (
+			cached &&
+			cached.rows === this.#rows &&
+			cached.cursor === this.#cursorSelectableIndex &&
+			cached.anchor === this.#selectionAnchorSelectableIndex
+		) {
+			return cached;
+		}
+		const indices = this.#computeSelectedLogIndices();
+		const state: SelectionState = {
+			rows: this.#rows,
+			cursor: this.#cursorSelectableIndex,
+			anchor: this.#selectionAnchorSelectableIndex,
+			indices,
+			set: new Set(indices),
+		};
+		this.#selection = state;
+		return state;
+	}
+
+	#computeSelectedLogIndices(): number[] {
+		if (this.#selectableRowIndices.length === 0) {
+			return [];
+		}
+
+		const cursorRow = this.#getCursorRow();
+		if (this.#selectionAnchorSelectableIndex === undefined) {
+			if (cursorRow?.kind !== "log") {
+				return [];
+			}
+			return [cursorRow.logIndex];
+		}
+
+		const min = Math.min(this.#selectionAnchorSelectableIndex, this.#cursorSelectableIndex);
+		const max = Math.max(this.#selectionAnchorSelectableIndex, this.#cursorSelectableIndex);
+		const selected: number[] = [];
+		for (let i = min; i <= max; i++) {
+			const rowIndex = this.#selectableRowIndices[i];
+			const row = rowIndex === undefined ? undefined : this.#rows[rowIndex];
+			if (row?.kind === "log") {
+				selected.push(row.logIndex);
+			}
+		}
+		return selected;
 	}
 
 	#getCursorRow(): ViewerRow | undefined {
@@ -572,9 +655,13 @@ export class DebugLogViewerComponent implements Component {
 	#loadingOlder = false;
 	#bodyLineToRowIndex: Array<number | undefined> = [];
 	readonly #native = new Memo();
-	/** Picker rows by log index, valid while {@link #nativeItemsCount} entries are loaded (a prepend shifts indices). */
+	/** Picker rows by log index, valid for {@link #nativeItemsGeneration} (a prepend shifts indices). */
 	#nativeItems = new Map<number, TspPickerItem>();
-	#nativeItemsCount = 0;
+	#nativeItemsGeneration = 0;
+	/** Formatted ANSI log rows by log index, valid for {@link #rowCacheGeneration} and {@link #rowCacheThemeEpoch}. */
+	#rowCache = new Map<number, CachedLogRow>();
+	#rowCacheGeneration = 0;
+	#rowCacheThemeEpoch = -1;
 
 	constructor(options: DebugLogViewerComponentOptions) {
 		this.#deps = options.deps;
@@ -744,6 +831,7 @@ export class DebugLogViewerComponent implements Component {
 	invalidate(): void {
 		this.#frame.invalidate();
 		this.#native.clear();
+		this.#rowCache.clear();
 	}
 
 	dispose(): void {
@@ -774,6 +862,7 @@ export class DebugLogViewerComponent implements Component {
 				model.cursorRowIndex,
 				selected.join(","),
 				model.logCount,
+				model.historyLimitReached,
 				model.isProcessFilterEnabled(),
 				model.canLoadOlder(),
 				query,
@@ -782,9 +871,11 @@ export class DebugLogViewerComponent implements Component {
 				this.#statusMessage,
 			],
 			() => {
-				if (this.#nativeItemsCount !== model.logCount) {
+				// Entries only grow, and every prepend shifts log indices, so the count keys the item cache.
+				const generation = model.logCount;
+				if (this.#nativeItemsGeneration !== generation) {
 					this.#nativeItems = new Map();
-					this.#nativeItemsCount = model.logCount;
+					this.#nativeItemsGeneration = generation;
 				}
 				const items: TspPickerItem[] = [];
 				const order: (string | TspPickerGroup)[] = [];
@@ -817,6 +908,7 @@ export class DebugLogViewerComponent implements Component {
 				const subtitle = [
 					`${model.visibleLogCount}/${model.logCount} entries`,
 					selected.length > 1 ? `${selected.length} selected` : undefined,
+					model.historyLimitReached ? "history limit reached" : undefined,
 					this.#loadingOlder ? "loading older…" : undefined,
 				]
 					.filter(part => part !== undefined)
@@ -853,7 +945,11 @@ export class DebugLogViewerComponent implements Component {
 							pickerAction("all", "Select all", "ctrl+a"),
 							pickerAction("pid", "This process", "ctrl+p", { on: model.isProcessFilterEnabled() }),
 							pickerAction("older", "Load older", "ctrl+o", {
-								disabled: model.canLoadOlder() ? undefined : "No older log entries",
+								disabled: model.canLoadOlder()
+									? undefined
+									: model.historyLimitReached
+										? "Log history limit reached"
+										: "No older log entries",
 							}),
 							CLOSE_ACTION,
 						],
@@ -945,7 +1041,8 @@ export class DebugLogViewerComponent implements Component {
 	#summaryText(): string {
 		const selected = this.#model.getSelectedCount();
 		const expanded = this.#model.expandedCount;
-		return `${theme.fg("muted", "showing")} ${theme.fg("accent", `${this.#model.visibleLogCount}/${this.#model.logCount}`)}  ${theme.fg("muted", "selected")} ${theme.fg(selected > 0 ? "accent" : "muted", String(selected))}  ${theme.fg("muted", "expanded")} ${theme.fg(expanded > 0 ? "accent" : "muted", String(expanded))}`;
+		const limitText = this.#model.historyLimitReached ? `  ${theme.fg("warning", "history limit reached")}` : "";
+		return `${theme.fg("muted", "showing")} ${theme.fg("accent", `${this.#model.visibleLogCount}/${this.#model.logCount}`)}  ${theme.fg("muted", "selected")} ${theme.fg(selected > 0 ? "accent" : "muted", String(selected))}  ${theme.fg("muted", "expanded")} ${theme.fg(expanded > 0 ? "accent" : "muted", String(expanded))}${limitText}`;
 	}
 
 	#controlsText(): string {
@@ -1017,10 +1114,21 @@ export class DebugLogViewerComponent implements Component {
 	}
 
 	#renderRows(innerWidth: number): Array<{ lines: string[]; rowIndex: number }> {
+		const model = this.#model;
 		const rendered: Array<{ lines: string[]; rowIndex: number }> = [];
-
-		for (let rowIndex = 0; rowIndex < this.#model.rows.length; rowIndex++) {
-			const row = this.#model.rows[rowIndex];
+		// Entries only grow, and every prepend shifts log indices, so the count keys the row cache.
+		const generation = model.logCount;
+		const themeEpoch = getThemeEpoch();
+		if (this.#rowCacheGeneration !== generation || this.#rowCacheThemeEpoch !== themeEpoch) {
+			this.#rowCache.clear();
+			this.#rowCacheGeneration = generation;
+			this.#rowCacheThemeEpoch = themeEpoch;
+		}
+		const cursorRowIndex = model.cursorRowIndex;
+		const cursorLogIndex = model.cursorLogIndex;
+
+		for (let rowIndex = 0; rowIndex < model.rows.length; rowIndex++) {
+			const row = model.rows[rowIndex];
 			if (!row) {
 				continue;
 			}
@@ -1034,7 +1142,7 @@ export class DebugLogViewerComponent implements Component {
 			}
 
 			if (row.kind === "load-older") {
-				const active = this.#model.cursorRowIndex === rowIndex;
+				const active = cursorRowIndex === rowIndex;
 				const marker = active ? theme.fg("accent", "❯") : " ";
 				const prefix = `${marker}  `;
 				const contentWidth = Math.max(1, innerWidth - visibleWidth(prefix));
@@ -1047,32 +1155,40 @@ export class DebugLogViewerComponent implements Component {
 			}
 
 			const logIndex = row.logIndex;
-			const selected = this.#model.isSelected(logIndex);
-			const cursorLogIndex = this.#model.cursorLogIndex;
+			const selected = model.isSelected(logIndex);
 			const active = cursorLogIndex !== undefined && cursorLogIndex === logIndex;
-			const expanded = this.#model.isExpanded(logIndex);
+			const expanded = model.isExpanded(logIndex);
+			const cached = this.#rowCache.get(logIndex);
+			if (
+				cached &&
+				cached.width === innerWidth &&
+				cached.selected === selected &&
+				cached.active === active &&
+				cached.expanded === expanded
+			) {
+				rendered.push({ rowIndex, lines: cached.lines });
+				continue;
+			}
+
 			const marker = active ? theme.fg("accent", "❯") : selected ? theme.fg("accent", "•") : " ";
 			const fold = expanded ? theme.fg("accent", "▾") : theme.fg("muted", "▸");
 			const prefix = `${marker}${fold} `;
 			const contentWidth = Math.max(1, innerWidth - visibleWidth(prefix));
-
+			let lines: string[];
 			if (expanded) {
-				const wrapped = formatDebugLogExpandedLines(this.#model.getRawLine(logIndex), contentWidth);
+				const wrapped = formatDebugLogExpandedLines(model.getRawLine(logIndex), contentWidth);
 				const indent = padding(visibleWidth(prefix));
-				const lines = wrapped.map((segment, index) => {
+				lines = wrapped.map((segment, index) => {
 					const content = selected ? theme.bold(segment) : segment;
 					return truncateToWidth(`${index === 0 ? prefix : indent}${content}`, innerWidth);
 				});
-				rendered.push({ rowIndex, lines });
-				continue;
+			} else {
+				const preview = truncateToWidth(sanitizeDisplayText(model.getRawLine(logIndex)), contentWidth);
+				const content = selected ? theme.bold(preview) : preview;
+				lines = [truncateToWidth(`${prefix}${content}`, innerWidth)];
 			}
-
-			const preview = truncateToWidth(
-				sanitizeDisplayText(this.#model.getRawLine(logIndex)),
-				Math.max(1, contentWidth),
-			);
-			const content = selected ? theme.bold(preview) : preview;
-			rendered.push({ rowIndex, lines: [truncateToWidth(`${prefix}${content}`, innerWidth)] });
+			this.#rowCache.set(logIndex, { width: innerWidth, selected, active, expanded, lines });
+			rendered.push({ rowIndex, lines });
 		}
 
 		return rendered;

package/src/apps/debug/raw-sse-buffer.ts

@@ -271,9 +271,15 @@ export class RawSseDebugBuffer {
 	#totalEvents = 0;
 	#lastUpdatedAt: number | undefined;
 	#nextSequence = 1;
+	#revision = 0;
 	#listeners = new Set<() => void>();
 	#emitScheduled = false;
 
+	/** Bumped on every change to the captured window (append, eviction, clear); equal revisions mean equal snapshots. */
+	get revision(): number {
+		return this.#revision;
+	}
+
 	subscribe(listener: () => void): () => void {
 		this.#listeners.add(listener);
 		return () => this.#listeners.delete(listener);
@@ -359,6 +365,7 @@ export class RawSseDebugBuffer {
 		this.#droppedChars = 0;
 		this.#totalEvents = 0;
 		this.#lastUpdatedAt = undefined;
+		this.#revision += 1;
 		this.#emit();
 	}
 
@@ -368,6 +375,7 @@ export class RawSseDebugBuffer {
 		this.#totalChars += chars;
 		this.#lastUpdatedAt = record.timestamp;
 		this.#enforceLimits();
+		this.#revision += 1;
 		this.#emit();
 	}
 

package/src/apps/debug/raw-sse.ts

@@ -9,7 +9,7 @@ import { actionBar, actionButton } from "../../native/overlay";
 import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
 import { truncateToWidth } from "../../utils";
 import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
-import { theme } from "../../theme/theme";
+import { getThemeEpoch, theme } from "../../theme/theme";
 import { DebugViewerFrame } from "./viewer-frame";
 import {
 	formatRawSseIsoTime,
@@ -106,6 +106,14 @@ export class RawSseViewerComponent implements Component {
 	// Sequences are monotonic; we prune entries below the oldest live record
 	// after each render so the cache tracks the buffer's eviction window.
 	readonly #prettyLinesCache = new Map<number, string[]>();
+	/** Buffer snapshot for {@link #snapshotRevision}; the buffer's revision bumps on every change. */
+	#snapshot: RawSseDebugSnapshot | undefined;
+	#snapshotRevision = -1;
+	/** Rendered body for (buffer revision, width, theme epoch). */
+	#bodyLines: string[] = [];
+	#bodyRevision = -1;
+	#bodyWidth = -1;
+	#bodyThemeEpoch = -1;
 
 	constructor(options: RawSseViewerOptions) {
 		this.#deps = options.deps;
@@ -227,6 +235,7 @@ export class RawSseViewerComponent implements Component {
 		this.#native.clear();
 		this.#nativeHead.clear();
 		this.#nativeBody.clear();
+		this.#bodyRevision = -1;
 	}
 
 	render(width: number): readonly string[] {
@@ -249,7 +258,7 @@ export class RawSseViewerComponent implements Component {
 	 * so they never scroll away.
 	 */
 	describeScreen(): NativeScreen {
-		const snapshot = this.#buffer.snapshot();
+		const snapshot = this.#currentSnapshot();
 		const stream = this.#feedNative(snapshot);
 		const head = this.#nativeHead.get(
 			[snapshot.totalEvents, snapshot.records.length, snapshot.droppedRecords, snapshot.lastUpdatedAt],
@@ -372,15 +381,40 @@ export class RawSseViewerComponent implements Component {
 		this.#onExit();
 	}
 
+	/** The buffer's snapshot, re-taken only when its revision moved. */
+	#currentSnapshot(): RawSseDebugSnapshot {
+		const revision = this.#buffer.revision;
+		if (!this.#snapshot || this.#snapshotRevision !== revision) {
+			this.#snapshot = this.#buffer.snapshot();
+			this.#snapshotRevision = revision;
+		}
+		return this.#snapshot;
+	}
+
 	#renderRawLines(innerWidth: number): string[] {
-		const snapshot = this.#buffer.snapshot();
+		const snapshot = this.#currentSnapshot();
+		const themeEpoch = getThemeEpoch();
+		if (
+			this.#bodyRevision === this.#snapshotRevision &&
+			this.#bodyWidth === innerWidth &&
+			this.#bodyThemeEpoch === themeEpoch
+		) {
+			return this.#bodyLines;
+		}
+		this.#bodyRevision = this.#snapshotRevision;
+		this.#bodyWidth = innerWidth;
+		this.#bodyThemeEpoch = themeEpoch;
+		this.#bodyLines = this.#formatRawLines(snapshot, innerWidth);
+		return this.#bodyLines;
+	}
+
+	#formatRawLines(snapshot: RawSseDebugSnapshot, innerWidth: number): string[] {
 		if (snapshot.records.length === 0) {
 			return [
 				theme.fg("muted", "No raw SSE frames captured yet."),
 				theme.fg("muted", "HTTP SSE providers populate this view while a model response is streaming."),
 			];
 		}
-
 		const lines: string[] = [];
 		if (snapshot.droppedRecords > 0) {
 			lines.push(
@@ -421,7 +455,7 @@ export class RawSseViewerComponent implements Component {
 		}
 	}
 	#summaryText(): string {
-		const snapshot = this.#buffer.snapshot();
+		const snapshot = this.#currentSnapshot();
 		const last = snapshot.lastUpdatedAt
 			? `${theme.fg("muted", "last")} ${theme.fg("accent", formatRawSseIsoTime(snapshot.lastUpdatedAt))}`
 			: theme.fg("muted", "waiting for first frame");