@linxiraos/pi-tui 1.1.26 → 1.2.0

package/src/overlays/plan-review-overlay.ts

@@ -13,13 +13,15 @@
  * Focus regions (`toc`/`body`/`actions`) cycle with Tab/Shift+Tab; arrows move
  * within the focused region and step left into the sidebar. The default focus is
  * `actions`, so the muscle memory of the old single-target overlay carries over:
- * ↑/↓ select options, Enter confirms, ←/→ drives the slider when there is no
- * sidebar, g/G + PgUp/PgDn scroll, and the external-editor key opens the plan.
+ * ↑/↓ select options, Enter confirms, ←/→ drives the slider, g/G + PgUp/PgDn
+ * scroll, and the external-editor key opens the plan. Under Tern the options
+ * are a horizontal bar, so ←/→ select options and Shift+←/→ drive the slider.
  */
 import {
 	type Component,
 	Ellipsis,
 	Editor,
+	getWidthConfigEpoch,
 	Markdown,
 	type MarkdownTheme,
 	matchesKey,
@@ -31,7 +33,7 @@ import {
 } from "../index";
 import { sanitizeText } from "@linxiraos/pi-utils";
 import { sanitizeStatusText } from "../chrome/shared";
-import { getEditorTheme, getMarkdownTheme, theme } from "../theme/theme";
+import { getEditorTheme, getMarkdownTheme, getThemeEpoch, theme } from "../theme/theme";
 import {
 	matchesAppExternalEditor,
 	matchesSelectCancel,
@@ -58,6 +60,7 @@ import type { KeyName } from "../key-hint-format";
 import { col, item, keyed, md, node, row as rowNode, span, text } from "../native/describe";
 import { leafKey, type NativeChild, type NativeNode, type NativeUiEvent } from "../native/node";
 import { actionButton, actionHint, hintsRow, itemIndex, type NativeHint, selectList } from "../native/overlay";
+import { isNativeRendering } from "../native/state";
 import { getKeybindings } from "../keybindings";
 
 /** Title shown in the overlay's top border. */
@@ -74,6 +77,8 @@ const SIDEBAR_MIN_TOTAL_WIDTH = 64;
 const SIDEBAR_MIN_BODY_WIDTH = 40;
 /** Persisted line-context cap; render-time captions clamp again to the viewport. */
 const MAX_ANNOTATION_CONTEXT_WIDTH = 120;
+/** Oldest delete/annotate undo snapshots are dropped past this depth (each holds the full plan text). */
+const MAX_UNDO_ENTRIES = 100;
 
 type Focus = "toc" | "body" | "actions";
 
@@ -146,6 +151,78 @@ interface UndoEntry {
 	deleted: string[];
 }
 
+/** Concatenated plan body rows and their anchors, reused while every render input is unchanged. */
+interface BodyLayout {
+	width: number;
+	annotationRev: number;
+	themeEpoch: number;
+	widthEpoch: number;
+	/** Each section's `Markdown.render` result the layout was built from (compared by identity). */
+	rendered: readonly (readonly string[])[];
+	lines: readonly string[];
+	anchors: BodyRowAnchor[];
+	offsets: number[];
+}
+
+/** Line contexts per rendered-lines array; `Markdown.render` returns a stable array per (text, width). */
+const lineContextCache = new WeakMap<readonly string[], readonly LineAnchorContext[]>();
+/** Match keys per context list, so resolving several annotations normalizes each row once. */
+const normalizedContextCache = new WeakMap<readonly LineAnchorContext[], readonly string[]>();
+
+function lineContexts(rendered: readonly string[]): readonly LineAnchorContext[] {
+	let contexts = lineContextCache.get(rendered);
+	if (!contexts) {
+		contexts = rendered.map(line => {
+			const sanitized = sanitizeStatusText(line);
+			const truncated = visibleWidth(sanitized) > MAX_ANNOTATION_CONTEXT_WIDTH;
+			const text = truncateToWidth(sanitized, MAX_ANNOTATION_CONTEXT_WIDTH, Ellipsis.Unicode);
+			return { text: text || "(blank line)", truncated };
+		});
+		lineContextCache.set(rendered, contexts);
+	}
+	return contexts;
+}
+
+function normalizeLineContext(context: LineAnchorContext): string {
+	const normalized = sanitizeStatusText(context.text).replace(/\s+/g, " ").trim();
+	return context.truncated && normalized.endsWith("…") ? normalized.slice(0, -1) : normalized;
+}
+
+/** Row in `contexts` nearest `storedRow` whose text matches the stored context, or -1. */
+function resolveLineRow(
+	storedRow: number,
+	storedContext: LineAnchorContext,
+	contexts: readonly LineAnchorContext[],
+): number {
+	if (contexts.length === 0) return -1;
+	const targetRow = Math.max(0, Math.floor(storedRow));
+	const normalizedStoredContext = normalizeLineContext(storedContext);
+	if (!normalizedStoredContext) return -1;
+	let normalizedContexts = normalizedContextCache.get(contexts);
+	if (!normalizedContexts) {
+		normalizedContexts = contexts.map(normalizeLineContext);
+		normalizedContextCache.set(contexts, normalizedContexts);
+	}
+	let best = -1;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (let row = 0; row < normalizedContexts.length; row++) {
+		const normalizedContext = normalizedContexts[row]!;
+		if (
+			normalizedContext !== normalizedStoredContext &&
+			!normalizedContext.includes(normalizedStoredContext) &&
+			!normalizedStoredContext.includes(normalizedContext)
+		) {
+			continue;
+		}
+		const distance = Math.abs(row - targetRow);
+		if (distance < bestDistance) {
+			best = row;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+
 export interface PlanReviewOverlayCallbacks {
 	/** Invoked with the chosen option label (never a disabled one). */
 	onPick: (label: string) => void;
@@ -197,6 +274,10 @@ export class PlanReviewOverlay implements Component {
 	#sectionOffsets: number[] = [];
 	/** Rendered body row to underlying plan row; callouts retain their owner's anchor. */
 	#bodyRowAnchors: BodyRowAnchor[] = [];
+	/** Memoized {@link #buildBody} result. */
+	#bodyLayout: BodyLayout | undefined;
+	/** Lines last handed to the scroll view; unchanged layouts skip the copy and keep its render cache. */
+	#scrollLines: readonly string[] | undefined;
 	#undo: UndoEntry[] = [];
 	/** Titles of sections deleted in the overlay, surfaced as Refine feedback. */
 	#deleted: string[] = [];
@@ -249,6 +330,11 @@ export class PlanReviewOverlay implements Component {
 	#nativeRoot: NativeNode | undefined;
 	/** Content the memoized root was built from. */
 	#nativeRootContent: NativePlanContent | undefined;
+	/**
+	 * The section the last Contents jump targets under a native surface, which
+	 * scrolls the body itself: `n` counts the jumps, so each one reveals it again.
+	 */
+	#jump: { section: number; n: number } | undefined;
 
 	constructor(
 		planContent: string,
@@ -437,8 +523,8 @@ export class PlanReviewOverlay implements Component {
 			) {
 				continue;
 			}
-			const contexts = section.md.render(MAX_ANNOTATION_CONTEXT_WIDTH).map(line => this.#lineContext(line));
-			const row = this.#resolveLineRow(
+			const contexts = lineContexts(section.md.render(MAX_ANNOTATION_CONTEXT_WIDTH));
+			const row = resolveLineRow(
 				entry.target.row,
 				{ text: entry.target.context, truncated: entry.target.contextTruncated === true },
 				contexts,
@@ -661,6 +747,10 @@ export class PlanReviewOverlay implements Component {
 	}
 
 	#handleActions(data: string): void {
+		if (isNativeRendering()) {
+			this.#handleNativeActions(data);
+			return;
+		}
 		// Left/right always drive the slider. The sidebar sits beside the body
 		// (above this row), not the slider, so stealing left for it would strand
 		// the operator unable to step the model tier back — reach the ToC via Tab.
@@ -690,6 +780,37 @@ export class PlanReviewOverlay implements Component {
 		this.#handleBodyScroll(data);
 	}
 
+	/** Tern lays the options out as a horizontal decision bar: ←/→ step through
+	 *  it, ↑ returns to the body above, and the model slider moves to Shift+←/→. */
+	#handleNativeActions(data: string): void {
+		if (matchesKey(data, "shift+left")) {
+			this.#moveSlider(-1);
+			return;
+		}
+		if (matchesKey(data, "shift+right")) {
+			this.#moveSlider(1);
+			return;
+		}
+		if (matchesKey(data, "left") || matchesKey(data, "h")) {
+			this.#moveSelection(-1);
+			return;
+		}
+		if (matchesKey(data, "right") || matchesKey(data, "l")) {
+			this.#moveSelection(1);
+			return;
+		}
+		if (matchesSelectUp(data) || matchesKey(data, "k")) {
+			this.#setFocus("body");
+			return;
+		}
+		if (matchesSelectDown(data) || matchesKey(data, "j")) return;
+		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
+			this.#confirmSelection();
+			return;
+		}
+		this.#handleBodyScroll(data);
+	}
+
 	#handleBody(data: string): void {
 		if (data === "a") {
 			this.#startBodyAnnotate();
@@ -798,6 +919,7 @@ export class PlanReviewOverlay implements Component {
 	#scrubBodyToToc(): void {
 		const sectionIndex = this.#toc[this.#tocCursor];
 		if (sectionIndex === undefined) return;
+		this.#jump = { section: sectionIndex, n: (this.#jump?.n ?? 0) + 1 };
 		const offset = this.#sectionOffsets[sectionIndex];
 		if (offset !== undefined) {
 			this.#scrollView.setScrollOffset(offset);
@@ -823,6 +945,7 @@ export class PlanReviewOverlay implements Component {
 	}
 
 	#pushUndo(): void {
+		if (this.#undo.length >= MAX_UNDO_ENTRIES) this.#undo.shift();
 		this.#undo.push({
 			text: joinPlanSections(this.#sections),
 			annotations: this.#sections.map(section =>
@@ -916,7 +1039,7 @@ export class PlanReviewOverlay implements Component {
 			seenRows.add(candidate.row);
 			sectionAnchors.push({ text: candidate.context, truncated: candidate.contextTruncated });
 		}
-		const resolvedRow = this.#resolveLineRow(
+		const resolvedRow = resolveLineRow(
 			annotation.target.row,
 			{ text: annotation.target.context, truncated: annotation.target.contextTruncated },
 			sectionAnchors,
@@ -1144,23 +1267,64 @@ export class PlanReviewOverlay implements Component {
 
 	#layoutBody(lines: readonly string[], height: number): void {
 		this.#captureScrollProgress();
-		this.#scrollView.setLines(lines);
+		if (lines !== this.#scrollLines) {
+			this.#scrollView.setLines(lines);
+			this.#scrollLines = lines;
+		}
 		this.#scrollView.setHeight(height);
 		const maxOffset = this.#scrollView.getMaxScrollOffset();
 		if (maxOffset > 0) this.#scrollView.setScrollOffset(Math.round(this.#scrollProgress * maxOffset));
 	}
 
-	/** Build the concatenated body lines and map each rendered row back to a plan anchor. */
-	#buildBody(bodyContentWidth: number): string[] {
+	/**
+	 * Build the concatenated body lines and map each rendered row back to a plan
+	 * anchor. Memoized on width, annotation revision, theme/width epochs and each
+	 * section's rendered-lines identity, so steady frames and scrolling reuse it.
+	 */
+	#buildBody(bodyContentWidth: number): readonly string[] {
+		const themeEpoch = getThemeEpoch();
+		const widthEpoch = getWidthConfigEpoch();
+		const cached = this.#bodyLayout;
+		if (
+			cached?.width === bodyContentWidth &&
+			cached.annotationRev === this.#annotationRev &&
+			cached.themeEpoch === themeEpoch &&
+			cached.widthEpoch === widthEpoch &&
+			cached.rendered.length === this.#sections.length &&
+			this.#sections.every((section, i) => section.md.render(bodyContentWidth) === cached.rendered[i])
+		) {
+			this.#sectionOffsets = cached.offsets;
+			this.#bodyRowAnchors = cached.anchors;
+			return cached.lines;
+		}
 		const lines: string[] = [];
 		const anchors: BodyRowAnchor[] = [];
+		const renderedSections: (readonly string[])[] = [];
 		// oxlint-disable-next-line unicorn/no-new-array -- length preallocation
 		const offsets: number[] = new Array(this.#sections.length);
 		for (let sectionIndex = 0; sectionIndex < this.#sections.length; sectionIndex++) {
 			const section = this.#sections[sectionIndex]!;
 			offsets[sectionIndex] = lines.length;
 			const rendered = section.md.render(bodyContentWidth);
-			const contexts = rendered.map(line => this.#lineContext(line));
+			renderedSections.push(rendered);
+			const contexts = lineContexts(rendered);
+			// Resolve each note's row once; notes on one row keep their array order.
+			let notesByRow: Map<number, string[]> | undefined;
+			for (const annotation of section.annotations) {
+				const annotationRow =
+					annotation.target.kind === "section"
+						? 0
+						: resolveLineRow(
+								annotation.target.row,
+								{ text: annotation.target.context, truncated: annotation.target.contextTruncated },
+								contexts,
+							);
+				if (annotationRow < 0) continue;
+				notesByRow ??= new Map();
+				const notes = notesByRow.get(annotationRow);
+				if (notes) notes.push(annotation.note);
+				else notesByRow.set(annotationRow, [annotation.note]);
+			}
 			for (let row = 0; row < rendered.length; row++) {
 				const context = contexts[row]!;
 				const anchor = {
@@ -1171,67 +1335,24 @@ export class PlanReviewOverlay implements Component {
 				};
 				lines.push(rendered[row]!);
 				anchors.push(anchor);
-				for (const annotation of section.annotations) {
-					const annotationRow =
-						annotation.target.kind === "section"
-							? 0
-							: this.#resolveLineRow(
-									annotation.target.row,
-									{
-										text: annotation.target.context,
-										truncated: annotation.target.contextTruncated,
-									},
-									contexts,
-								);
-					if (annotationRow === row) {
-						this.#appendAnnotationCallout(lines, anchors, annotation.note, anchor, bodyContentWidth);
-					}
-				}
+				const notes = notesByRow?.get(row);
+				if (!notes) continue;
+				for (const note of notes) this.#appendAnnotationCallout(lines, anchors, note, anchor, bodyContentWidth);
 			}
 		}
 		this.#sectionOffsets = offsets;
 		this.#bodyRowAnchors = anchors;
-		return lines;
-	}
-
-	#lineContext(line: string): LineAnchorContext {
-		const sanitized = sanitizeStatusText(line);
-		const truncated = visibleWidth(sanitized) > MAX_ANNOTATION_CONTEXT_WIDTH;
-		const text = truncateToWidth(sanitized, MAX_ANNOTATION_CONTEXT_WIDTH, Ellipsis.Unicode);
-		return { text: text || "(blank line)", truncated };
-	}
-
-	#resolveLineRow(
-		storedRow: number,
-		storedContext: LineAnchorContext,
-		contexts: readonly LineAnchorContext[],
-	): number {
-		if (contexts.length === 0) return -1;
-		const targetRow = Math.max(0, Math.floor(storedRow));
-		const normalize = (context: LineAnchorContext): string => {
-			const normalized = sanitizeStatusText(context.text).replace(/\s+/g, " ").trim();
-			return context.truncated && normalized.endsWith("…") ? normalized.slice(0, -1) : normalized;
+		this.#bodyLayout = {
+			width: bodyContentWidth,
+			annotationRev: this.#annotationRev,
+			themeEpoch,
+			widthEpoch,
+			rendered: renderedSections,
+			lines,
+			anchors,
+			offsets,
 		};
-		const normalizedStoredContext = normalize(storedContext);
-		if (!normalizedStoredContext) return -1;
-		let best = -1;
-		let bestDistance = Number.POSITIVE_INFINITY;
-		for (let row = 0; row < contexts.length; row++) {
-			const normalizedContext = normalize(contexts[row]!);
-			if (
-				normalizedContext !== normalizedStoredContext &&
-				!normalizedContext.includes(normalizedStoredContext) &&
-				!normalizedStoredContext.includes(normalizedContext)
-			) {
-				continue;
-			}
-			const distance = Math.abs(row - targetRow);
-			if (distance < bestDistance) {
-				best = row;
-				bestDistance = distance;
-			}
-		}
-		return best;
+		return lines;
 	}
 
 	#appendAnnotationCallout(
@@ -1404,6 +1525,7 @@ export class PlanReviewOverlay implements Component {
 		const sig = [
 			this.#focus,
 			this.#tocCursor,
+			this.#jump?.n ?? 0,
 			this.#selectedIndex,
 			this.#sliderIndex,
 			this.#committed ? `committed:${this.#committedLabel ?? ""}` : "",
@@ -1419,6 +1541,13 @@ export class PlanReviewOverlay implements Component {
 		const children: NativeChild[] = [];
 		const tools = this.#describeTools();
 		if (tools) children.push(tools);
+		// The section a Contents jump targets scrolls to the body's top.
+		const jump = this.#jump;
+		const body = jump
+			? content.body.map((section): NativeNode =>
+					section.key === `s${jump.section}` ? { ...section, reveal: { at: "start", n: jump.n } } : section,
+				)
+			: content.body;
 		const bodyCol = node(
 			"col",
 			{ role: "zeta.plan.body", grow: 1, gap: "md", tone: this.#focus === "body" ? "accent" : undefined },
@@ -1478,7 +1607,7 @@ export class PlanReviewOverlay implements Component {
 		return this.#nativeRoot;
 	}
 
-	/** Head tools: Copy `c` and the external editor, mirroring their keys. */
+	/** Head tools: Copy `c`, the external editor and Cancel, mirroring their keys. */
 	#describeTools(): NativeNode | undefined {
 		if (this.#committed) return undefined;
 		const buttons: NativeNode[] = [];
@@ -1489,6 +1618,12 @@ export class PlanReviewOverlay implements Component {
 		if (this.callbacks.onExternalEditor) {
 			buttons.push(actionButton("Edit in $EDITOR", "externalEditor", editorKeyId ? { keys: editorKeyId } : {}));
 		}
+		// Cancel the review the way the cancel key does; while annotating that key
+		// only leaves the draft/chooser, so the button is hidden there.
+		if (!this.#annotating && !this.#annotationChooser) {
+			const cancelKeyId = getKeybindings().getKeys("tui.select.cancel")[0];
+			buttons.push(actionButton("Cancel", "cancel", cancelKeyId ? { keys: cancelKeyId } : {}));
+		}
 		if (buttons.length === 0) return undefined;
 		return node("row", { role: "zeta.plan.tools", gap: "sm", align: "center", justify: "end" }, buttons, "tools");
 	}
@@ -1496,12 +1631,15 @@ export class PlanReviewOverlay implements Component {
 	handleNativeEvent(event: NativeUiEvent): void {
 		if (this.#committed) return;
 		if (event.type === "action") {
-			// Head tools run exactly what `c` and the external-editor key run.
+			// Head tools run exactly what `c`, the external-editor key and Esc run.
 			if (this.#annotating || this.#annotationChooser) return;
 			if (event.act === "copyPlan" && this.callbacks.onCopyPlan) {
 				void this.callbacks.onCopyPlan(joinPlanSections(this.#sections));
 			} else if (event.act === "externalEditor") {
 				this.callbacks.onExternalEditor?.();
+			} else if (event.act === "cancel") {
+				this.#committed = true;
+				this.callbacks.onCancel();
 			}
 			return;
 		}
@@ -1672,8 +1810,8 @@ export class PlanReviewOverlay implements Component {
 		const hints: (NativeHint | undefined)[] = [];
 		switch (this.#focus) {
 			case "actions":
-				hints.push(upDown("select"), key("enter", "confirm"));
-				if (this.#slider) hints.push(key(["left", "right"], "model"));
+				hints.push(key(["left", "right"], "select"), key("enter", "confirm"));
+				if (this.#slider) hints.push(key(["shift+left", "shift+right"], "model"));
 				break;
 			case "toc":
 				hints.push(

package/src/overlays/plugin-settings.ts

@@ -378,7 +378,7 @@ export class PluginListComponent extends OverlayPanel {
 			lead:
 				rows.length > 0
 					? "Plugins installed for you and this project. Configure one to turn it or its features on and off."
-					: "No plugins installed. Install one with omp plugin install <package>, or <name>@<marketplace>.",
+					: "No plugins installed. Install one with zetacode plugin install <package>, or <name>@<marketplace>.",
 			sections: rows.length > 0 ? [{ id: "installed", title: "Installed", rows }] : [],
 			focus: this.#selectList.getSelectedItem()?.value ?? null,
 			editing: null,
@@ -403,10 +403,10 @@ export class PluginListComponent extends OverlayPanel {
 						text([span("No plugins installed", "muted")]),
 						node("kv", {
 							items: [
-								{ k: "Install npm plugins", v: [span("omp plugin install <package>", "code")] },
+								{ k: "Install npm plugins", v: [span("zetacode plugin install <package>", "code")] },
 								{
 									k: "Install marketplace plugins",
-									v: [span("omp plugin install <name>@<marketplace>", "code")],
+									v: [span("zetacode plugin install <name>@<marketplace>", "code")],
 								},
 							],
 						}),

package/src/overlays/report-panel.ts

@@ -0,0 +1,191 @@
+import type { TspScrollBy, TspText } from "@linxiraos/pi-wire";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { editorKey } from "../chrome/keybinding-hints";
+import { Ellipsis } from "../index";
+import { ScrollView } from "../components/scroll-view";
+import { Spacer } from "../components/spacer";
+import { Text } from "../components/text";
+import {
+	matchesSelectCancel,
+	matchesSelectDown,
+	matchesSelectPageDown,
+	matchesSelectPageUp,
+	matchesSelectUp,
+} from "../keybinding-matchers";
+import { matchesKey } from "../keys";
+import { routeSgrMouseInput } from "../mouse";
+import { actionBar, actionButton } from "../native/overlay";
+import { col } from "../native/describe";
+import type { NativeNode, NativeScroll, NativeUiEvent } from "../native/node";
+import { theme } from "../theme/theme";
+import type { Component } from "../tui";
+
+/** Options of a {@link ReportPanel}. */
+export interface ReportPanelOptions {
+	/** Plain title: the text-mode border title, and the native sheet head unless {@link head} is given. */
+	readonly title: string;
+	/** Styled native sheet head. */
+	readonly head?: TspText;
+	/** The read-only report; it draws no frame or title of its own. */
+	readonly body: Component;
+	/**
+	 * Display form of the key that dismisses the report while it sits above the
+	 * editor (the editor's interrupt key, which routes to it). Once the panel
+	 * holds focus ({@link ReportPanel.holdFocus}) the hint shows the key its own
+	 * input closes on instead.
+	 */
+	readonly closeKey: string;
+	/** The focused panel (native sheet, text-mode full-screen page) closes on Esc / its Close button: this runs. */
+	readonly onClose: () => void;
+	/**
+	 * Most rows the text-mode panel may take, borders included (the screen rows
+	 * left above the editor); a taller report scrolls inside it. `undefined`
+	 * leaves it uncapped.
+	 */
+	readonly maxRows?: () => number | undefined;
+}
+
+/** Text-mode rows around the scrolled body: the borders, two spacers and the footer. */
+const TEXT_CHROME_ROWS = 5;
+
+/**
+ * A read-only command report (`/changelog`, `/context`, `/tools`, …).
+ *
+ * Text mode draws a titled box with the body and an Esc hint: above the editor
+ * like the `/btw` panel while it fits there (the editor keeps focus and its
+ * Esc takes it away), or as a full-screen page on the alternate screen when it
+ * is taller, whose body scrolls on the arrow/page/Home/End keys and the wheel.
+ * Natively it is a sheet like `/usage`: a centred `lg` glass sheet titled by
+ * the report whose body the terminal scrolls (wheel, and the same keys
+ * forwarded as scroll requests), then a Close button; Esc closes it.
+ */
+export class ReportPanel extends OverlayPanel {
+	readonly nativeOverlay: NonNullable<Component["nativeOverlay"]>;
+	readonly #body: Component;
+	readonly #onClose: () => void;
+	readonly #maxRows: (() => number | undefined) | undefined;
+	readonly #view: ScrollView;
+	readonly #footer: Text;
+	#closeHint: string;
+	#bodyRows = 0;
+	#scroll: NativeScroll | undefined;
+	#native: { scroll: NativeScroll | undefined; node: NativeNode } | undefined;
+
+	constructor(options: ReportPanelOptions) {
+		super(options.title, "zeta.overlay.report");
+		this.nativeOverlay = {
+			role: "zeta.overlay.report",
+			size: "lg",
+			anchor: "center",
+			head: options.head ?? options.title,
+		};
+		this.#body = options.body;
+		this.#onClose = options.onClose;
+		this.#maxRows = options.maxRows;
+		this.#closeHint = `${options.closeKey} to close`;
+		this.#view = new ScrollView(options.body, {
+			height: 0,
+			scrollbar: "auto",
+			ellipsis: Ellipsis.Omit,
+			theme: { track: text => theme.fg("dim", text), thumb: text => theme.fg("accent", text) },
+		});
+		this.#footer = new Text(theme.fg("muted", this.#closeHint), 0, 0);
+		this.addChild(new Spacer(1));
+		this.addChild(this.#view);
+		this.addChild(new Spacer(1));
+		this.addChild(this.#footer);
+	}
+
+	/**
+	 * The panel is shown with focus (native sheet, text-mode full-screen page):
+	 * its own {@link handleInput} closes it, so the hint names that key.
+	 */
+	holdFocus(): void {
+		this.#closeHint = `${editorKey("tui.select.cancel")} to close`;
+	}
+
+	/**
+	 * Text mode: cap the box to {@link ReportPanelOptions.maxRows}, scrolling a
+	 * taller body. The cap is a hard limit: when a resize leaves fewer rows than
+	 * the box's chrome needs, its bottom (the hint and closing border) is cut
+	 * rather than spilling over the editor.
+	 */
+	override render(width: number): readonly string[] {
+		const innerWidth = Math.max(1, width - 4);
+		const rows = this.#body.render(innerWidth).length;
+		const cap = this.#maxRows?.();
+		const bodyMax = cap === undefined ? rows : Math.max(1, cap - TEXT_CHROME_ROWS);
+		const overflows = rows > bodyMax;
+		this.#bodyRows = Math.min(rows, bodyMax);
+		this.#view.setHeight(this.#bodyRows);
+		const scrollHint = `${editorKey("tui.select.pageUp")}/${editorKey("tui.select.pageDown")} scroll · `;
+		this.#footer.setText(theme.fg("muted", overflows ? scrollHint + this.#closeHint : this.#closeHint));
+		const lines = super.render(width);
+		return cap !== undefined && lines.length > cap ? lines.slice(0, Math.max(0, cap)) : lines;
+	}
+
+	/** Text mode: rows the whole box takes at `width` when nothing caps it. */
+	heightAt(width: number): number {
+		return this.#body.render(Math.max(1, width - 4)).length + TEXT_CHROME_ROWS;
+	}
+
+	/** The sheet body (the overlay is the frame, and its body the scroller): the report, then Close (Esc). */
+	override describe(): NativeNode {
+		const scroll = this.#scroll;
+		if (this.#native && this.#native.scroll === scroll) return this.#native.node;
+		const body: NativeNode = { ...col([this.#body]), key: "body", scroll };
+		const node = col([body, actionBar([null, actionButton("Close", "close", { keys: "escape" })])], { gap: "md" });
+		this.#native = { scroll, node };
+		return node;
+	}
+
+	override invalidate(): void {
+		this.#native = undefined;
+		super.invalidate();
+	}
+
+	/**
+	 * Focused (the native sheet, or the text-mode full-screen page): Esc closes;
+	 * the arrow, page, Home and End keys and the wheel scroll the body.
+	 */
+	handleInput(data: string): void {
+		if (
+			routeSgrMouseInput(data, event => {
+				if (event.wheel === null) return false;
+				this.#view.scroll(event.wheel * 3);
+				return true;
+			})
+		) {
+			return;
+		}
+		if (matchesSelectCancel(data)) {
+			this.#onClose();
+			return;
+		}
+		const by: TspScrollBy | undefined = matchesSelectUp(data)
+			? "line-up"
+			: matchesSelectDown(data)
+				? "line-down"
+				: matchesSelectPageUp(data)
+					? "page-up"
+					: matchesSelectPageDown(data)
+						? "page-down"
+						: matchesKey(data, "home")
+							? "start"
+							: matchesKey(data, "end")
+								? "end"
+								: undefined;
+		if (by === undefined) return;
+		// Natively the terminal scrolls the sheet body; text mode scrolls the box.
+		this.#scroll = { by, n: (this.#scroll?.n ?? 0) + 1 };
+		const page = Math.max(1, this.#bodyRows - 1);
+		if (by === "start") this.#view.scrollToTop();
+		else if (by === "end") this.#view.scrollToBottom();
+		else this.#view.scroll(by === "line-up" ? -1 : by === "line-down" ? 1 : by === "page-up" ? -page : page);
+	}
+
+	/** Close runs what Esc runs. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "action" && event.act === "close") this.#onClose();
+	}
+}