pi-bro 0.23.0 → 0.24.0

package/src/modal-kit.ts

@@ -0,0 +1,258 @@
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { stripVTControlCharacters } from "node:util";
+import { matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component, type OverlayHandle, type OverlayOptions, type TUI } from "@earendil-works/pi-tui";
+import { broModalRows, consumeWheel, rawWheel, setRegularMouseReporting, SGR_MOUSE, type BroMouseEvent, type BroMouseResult } from "./ui-capabilities.ts";
+
+// Shared building blocks for Bro's overlays; see docs/plans/modal-consistency.md.
+
+type Mounted = Component & { dispose?(): void };
+export type Area = { top: number; left: number; width: number; height: number };
+export type Theme = ExtensionCommandContext["ui"]["theme"];
+export type TuiLike = {
+	readonly mode: "regular" | "fullscreen";
+	readonly terminal?: { rows?: number; columns?: number; write?: (data: string) => void };
+	requestRender(): void;
+};
+
+export type NoticeTone = "info" | "success" | "warning" | "error";
+
+/**
+ * Format a notice text with the semantic tone.
+ * Strips raw terminal control characters from the message to prevent escape sequence injection.
+ */
+export function formatNotice(theme: Theme, text: string, tone: NoticeTone = "info"): string {
+	const sanitized = stripVTControlCharacters(text)
+		.replace(/[\u0000-\u001f\u007f-\u009f]/g, " ")
+		.trim();
+	if (!sanitized) return "";
+	const color = tone === "error" ? "error" : tone === "warning" ? "warning" : tone === "success" ? "success" : "accent";
+	return theme.fg(color, sanitized);
+}
+
+/** One overlay preset for Bro's windows. Drawn heights come from the same numbers via modalHeight. */
+export const BRO_OVERLAY = {
+	width: "78%",
+	minWidth: 48,
+	maxHeight: "78%",
+	anchor: "top-center",
+	margin: { top: 1, left: 2, right: 2 },
+} as const;
+
+type HeightOptions = { readonly maxHeight: `${number}%`; readonly margin: { readonly top?: number; readonly bottom?: number } };
+
+/** Rows the host lets the overlay show; mirrors pi-tui's resolveOverlayLayout (floor, clamp to margins, min 1). */
+export function modalHeight(tui: unknown, overlay: HeightOptions = BRO_OVERLAY, cap = Infinity): number {
+	const rows = broModalRows(tui, process.stdout.rows);
+	const percent = Math.floor((rows * Number.parseFloat(overlay.maxHeight)) / 100);
+	const available = Math.max(1, rows - (overlay.margin.top ?? 0) - (overlay.margin.bottom ?? 0));
+	return Math.max(1, Math.min(percent, available, cap));
+}
+
+/** Terminal-cell bounds for the rendered top-centred Bro overlay. */
+export function broOverlayArea(tui: TuiLike, width: number, height: number): Area {
+	const columns = tui.terminal?.columns;
+	const centered = typeof columns === "number" ? Math.floor((columns - width) / 2) : 0;
+	return {
+		top: BRO_OVERLAY.margin.top,
+		left: Math.max(BRO_OVERLAY.margin.left, centered),
+		width,
+		height,
+	};
+}
+
+export type FrameParts = {
+	/** Header line, already styled; called after `body` so it can show the scroll position. */
+	header: () => string;
+	/** Called with the rows left for the body; return at most that many lines. */
+	body: (rows: number, innerWidth: number) => string[];
+	/** Lines under the body, e.g. a composer; truncated to the inner width, so wrap long text first. */
+	footer?: string[];
+	/** Already styled; wrapped to at most three lines, above the hints. Put the action first. */
+	notice?: string;
+	/** Omit when the body prints its own hints (config's SettingsList). */
+	hints?: string;
+	/** false: size to the content instead of padding the body to the full height. */
+	fill?: boolean;
+	/** Body rows the notice must leave free; it shrinks to one line before taking them. */
+	minBody?: number;
+};
+
+/**
+ * Square frame that never renders more than `height` lines (exactly `height` unless `fill` is false).
+ * Pi clips overlays from the bottom, so when space runs out the notice shrinks to `minBody`, the
+ * body shrinks, then lines go from the top of the frame's middle (header, rules, notice), keeping
+ * the footer (e.g. a composer), the hints and both borders.
+ */
+export function renderFrame(theme: Theme, width: number, height: number, parts: FrameParts): string[] {
+	const inner = Math.max(1, width - 2);
+	const border = (text: string) => theme.fg("border", text);
+	const row = (content: string) => {
+		const line = truncateToWidth(content, inner, "");
+		return `${border("│")}${line}${" ".repeat(Math.max(0, inner - visibleWidth(line)))}${border("│")}`;
+	};
+	const rule = border(`├${"─".repeat(inner)}┤`);
+	const footer = parts.footer ?? [];
+	// Wrapped, not truncated: Esc comes last in every hint line and must not be cut off.
+	const hints = parts.hints ? wrapTextWithAnsi(theme.fg("dim", parts.hints), inner) : [];
+	const notice = parts.notice ? wrapTextWithAnsi(parts.notice, inner).slice(0, 3) : [];
+	while (notice.length > 1 && height - 5 - footer.length - hints.length - notice.length < (parts.minBody ?? 0)) notice.pop();
+	// The notice sits above the footer so it is dropped before a composer when space runs out.
+	const below = [...notice, ...footer, ...hints];
+	const bodyRows = Math.max(0, height - 5 - below.length);
+	const body = bodyRows ? parts.body(bodyRows, inner).slice(0, bodyRows) : [];
+	if (parts.fill !== false) while (body.length < bodyRows) body.push("");
+	const middle = [row(parts.header()), rule, ...(bodyRows ? [...body.map(row), rule] : []), ...below.map(row)];
+	return [border(`┌${"─".repeat(inner)}┐`), ...middle.slice(-Math.max(0, height - 2)), border(`└${"─".repeat(inner)}┘`)].slice(0, height);
+}
+
+/** Line-based scrolling for a body: keys, both wheel paths and an ↑/↓ indicator. */
+export class Scroller {
+	private offset = 0;
+	private max = 0;
+	private rows = 1;
+	private follow = false;
+
+	/** `followEnd`: scrolling to the end pins the view to new text until the reader scrolls up. */
+	constructor(
+		private readonly onScroll: () => void,
+		private readonly options: { followEnd?: boolean } = {},
+	) {}
+
+	view(lines: string[], rows: number): string[] {
+		this.rows = Math.max(1, rows);
+		this.max = Math.max(0, lines.length - this.rows);
+		this.offset = this.follow ? this.max : Math.max(0, Math.min(this.offset, this.max));
+		return lines.slice(this.offset, this.offset + this.rows);
+	}
+
+	by(delta: number): void {
+		this.offset = Math.max(0, Math.min(this.offset + delta, this.max));
+		this.follow = Boolean(this.options.followEnd) && this.offset >= this.max;
+		this.onScroll();
+	}
+
+	toStart(): void {
+		this.offset = 0;
+		this.follow = false;
+	}
+
+	toEnd(): void {
+		this.follow = true;
+	}
+
+	/** ↑/↓ one line, PgUp/PgDn one page, and raw SGR mouse input (Pi 0.84, regular mode). */
+	handleKey(data: string, area?: Area): boolean {
+		if (SGR_MOUSE.test(data)) {
+			const wheel = rawWheel(data);
+			const x = (wheel?.column ?? 0) - 1;
+			const y = (wheel?.row ?? 0) - 1;
+			if (
+				wheel &&
+				(!area || (x >= area.left && x < area.left + area.width && y >= area.top && y < area.top + area.height))
+			) this.by(wheel.delta);
+			return true;
+		}
+		const page = Math.max(1, this.rows - 1);
+		const delta =
+			(matchesKey(data, "up") ? -1 : matchesKey(data, "down") ? 1 : 0) ||
+			(matchesKey(data, "pageUp") ? -page : matchesKey(data, "pageDown") ? page : 0);
+		if (!delta) return false;
+		this.by(delta);
+		return true;
+	}
+
+	/** Pi 1.x delivers the wheel here; it is always consumed so the chat behind never scrolls. */
+	handleMouse(event: BroMouseEvent): BroMouseResult {
+		if (event.type !== "wheel") return;
+		const delta = Math.trunc(event.wheelDelta ?? 0);
+		if (delta) this.by(delta);
+		return { handled: true, render: false };
+	}
+
+	indicator(): string {
+		return this.max > 0 ? `↑${this.offset} ↓${this.max - this.offset}` : "";
+	}
+}
+
+/**
+ * Forward a pointer event to a pi-tui child drawn at `area` inside the overlay, in the child's own
+ * coordinates (without `area`, the event already is). Pi 0.84 components have no handleMouse, hence
+ * the structural call. A wheel the child leaves unhandled is consumed; presses and drags the child
+ * ignores (Editor does) stay unhandled so host text selection keeps working there.
+ */
+export function delegateMouse(child: object, event: BroMouseEvent, area?: Area): BroMouseResult {
+	const { x = -1, y = -1 } = event;
+	const inside = !area || (y >= area.top && y < area.top + area.height && x >= area.left && x < area.left + area.width);
+	const local = area ? { ...event, x: x - area.left, y: y - area.top, width: area.width, height: area.height } : event;
+	const handle = (child as { handleMouse?: (event: BroMouseEvent) => BroMouseResult }).handleMouse;
+	return (inside ? handle?.call(child, local) : undefined) ?? consumeWheel(event);
+}
+
+/** Regular-mode mouse reporting held by one overlay; release is idempotent and also runs on exit. */
+export function mouseLease(tui: TuiLike): { acquire(): void; release(): void } {
+	let held = false;
+	const release = () => {
+		if (!held) return;
+		held = false;
+		process.off("exit", release);
+		setRegularMouseReporting(tui, false);
+	};
+	return {
+		acquire() {
+			if (held) return;
+			held = true;
+			// Pi's regular-mode TUI never resets 1000/1006 itself, so a quit with a modal open would leave it on.
+			process.once("exit", release);
+			setRegularMouseReporting(tui, true);
+		},
+		release,
+	};
+}
+
+/**
+ * Mount a Bro overlay. `mouse` holds regular-mode reporting until the overlay closes or is disposed,
+ * and releases it while the overlay is hidden through the handle passed to `onHandle`.
+ */
+export async function openBroOverlay<T>(
+	ctx: ExtensionCommandContext,
+	factory: (tui: TUI, theme: Theme, keybindings: unknown, done: (result: T) => void) => Mounted,
+	options: { mouse?: boolean; overlay?: OverlayOptions; onHandle?: (handle: OverlayHandle) => void } = {},
+): Promise<T> {
+	let lease: ReturnType<typeof mouseLease> | undefined;
+	// Once closed or disposed, un-hiding must not turn reporting back on.
+	let ended = false;
+	try {
+		return await ctx.ui.custom<T>(
+			(tui, theme, keybindings, done) => {
+				const component = factory(tui, theme, keybindings, done);
+				if (!options.mouse) return component;
+				const held = (lease = mouseLease(tui));
+				held.acquire();
+				const dispose = component.dispose?.bind(component);
+				component.dispose = () => {
+					ended = true;
+					held.release();
+					dispose?.();
+				};
+				return component;
+			},
+			{
+				overlay: true,
+				overlayOptions: options.overlay ?? BRO_OVERLAY,
+				onHandle: (handle) =>
+					options.onHandle?.({
+						...handle,
+						setHidden: (hidden: boolean) => {
+							if (hidden) lease?.release();
+							else if (!ended) lease?.acquire();
+							handle.setHidden(hidden);
+						},
+					}),
+			},
+		);
+	} finally {
+		// Also covers a close before mount, when the host never calls dispose.
+		ended = true;
+		lease?.release();
+	}
+}

package/src/review-modal.ts

@@ -14,6 +14,8 @@ import {
 	type Finding,
 	type ReviewRecord,
 } from "./review.ts";
+import { modalHeight } from "./modal-kit.ts";
+import { rawWheel, SGR_MOUSE } from "./ui-capabilities.ts";
 
 export type ReviewView = {
 	selected: string;
@@ -53,10 +55,18 @@ export type ReviewControls = {
 	changed(): void;
 	copy(text: string): void;
 };
+// Narrower than the kit's TuiLike/Theme on purpose: Review always reads terminal rows and needs no mode.
 type Tui = { terminal: { rows: number; columns?: number }; requestRender(): void };
 // Structural subset keeps normalized mouse support compatible with the pinned pre-mouse SDK.
 type ReviewMouseEvent = { type: string; x: number; y: number; wheelDelta?: number };
 type Theme = { fg: (name: any, text: string) => string; bold: (text: string) => string };
+/** Guided Review's full-width overlay; the drawn height comes from it via modalHeight. */
+export const REVIEW_OVERLAY = {
+	anchor: "center",
+	width: "100%",
+	maxHeight: "100%",
+	margin: { top: 1, bottom: 1 },
+} as const;
 export const safeReviewText = (text: string): string =>
 	text.replace(/[\x00-\x08\x0b-\x1f\x7f-\x9f]/g, "");
 const label = (text: string) => safeReviewText(text).replace(/[\n\r\t]/g, " ");
@@ -72,6 +82,7 @@ export class ReviewModal {
 	operation: "guide" | "answer" | "regenerate" = "guide";
 	activeTurn: ReviewRecord["turns"][number] | undefined;
 	notice = "";
+	advisory = "";
 	saveError = "";
 	evidence = new Map<string, string>();
 	evidenceErrors = new Map<string, string>();
@@ -89,6 +100,7 @@ export class ReviewModal {
 	private layout = {
 		height: 0,
 		bodyRows: 0,
+		navRows: 0,
 		leftWidth: 0,
 		navigationOnly: false,
 		contentsStart: 0,
@@ -204,6 +216,13 @@ export class ReviewModal {
 	syncGuideView(): void {
 		if (!this.record.guide?.topics.some((topic) => topic.id === this.view.scope))
 			delete this.view.scope;
+		// A regenerated guide can drop the selected topic or finding; fall back rather than leaving
+		// the selection pointing at an entry that no longer exists (no marker, stale target).
+		if (!this.entries().some((entry) => entry.id === this.view.selected)) {
+			this.view.selected = "overview";
+			this.view.screen = "reading";
+			delete this.view.returnTo;
+		}
 		const origin = this.view.returnTo;
 		if (
 			origin &&
@@ -416,9 +435,9 @@ export class ReviewModal {
 			event.y >= this.layout.height
 		)
 			return { handled: true, render: false };
-		const { bodyRows, leftWidth, navigationOnly, contentsStart, bodyStart } = this.layout;
+		const { navRows, leftWidth, navigationOnly, contentsStart, bodyStart } = this.layout;
 		const start = 4;
-		const rows = bodyRows + bodyStart - 4;
+		const rows = this.layout.bodyRows + bodyStart - 4;
 		if (event.y < start || event.y >= start + rows || event.x === 0 || event.x === this.width - 1)
 			return { handled: true, render: false };
 		const delta = Math.trunc(event.wheelDelta ?? 0);
@@ -427,7 +446,7 @@ export class ReviewModal {
 			this.contentsOffset = Math.max(
 				0,
 				Math.min(
-					Math.max(0, this.entries().length - bodyRows),
+					Math.max(0, this.entries().length - navRows),
 					(this.contentsOffset ?? contentsStart) + delta,
 				),
 			);
@@ -454,20 +473,18 @@ export class ReviewModal {
 			offset === this.maxOffset;
 	}
 	handleInput(data: string): void {
-		// Pi 0.84 forwards raw wheel input to focused overlays; newer hosts use handleMouse.
-		const mouse = /^\u001b\[<(\d+);(\d+);(\d+)([Mm])$/.exec(data);
-		if (mouse) {
-			const button = Number(mouse[1]);
-			if (button & 64 && (button & 3) < 2 && mouse[4] === "M") {
-				const columns = this.tui.terminal.columns;
-				if (columns !== undefined)
-					this.handleMouse({
-						type: "wheel",
-						x: Number(mouse[2]) - 1 - Math.floor((columns - this.width) / 2),
-						y: Number(mouse[3]) - 1 - Math.floor((this.tui.terminal.rows - this.layout.height) / 2),
-						wheelDelta: button & 1 ? 3 : -3,
-					});
-			}
+		// Pi 0.84 and regular mode deliver raw mouse reports here; Pi 1.x fullscreen uses handleMouse.
+		// Every raw report is swallowed so none reaches the composer as text.
+		if (SGR_MOUSE.test(data)) {
+			const wheel = rawWheel(data);
+			const columns = this.tui.terminal.columns;
+			if (wheel && columns !== undefined)
+				this.handleMouse({
+					type: "wheel",
+					x: wheel.column - 1 - Math.floor((columns - this.width) / 2),
+					y: wheel.row - 1 - Math.floor((this.tui.terminal.rows - this.layout.height) / 2),
+					wheelDelta: wheel.delta,
+				});
 			return;
 		}
 		if (this.tiny) {
@@ -497,7 +514,9 @@ export class ReviewModal {
 				]!;
 		} else if (matchesKey(data, "pageDown") || matchesKey(data, "pageUp")) {
 			this.render(this.width);
-			const delta = (matchesKey(data, "pageDown") ? 1 : -1) * Math.max(1, this.layout.bodyRows - 1);
+			// Page by the pane being paged: Contents shows navRows, the reading area shows bodyRows.
+			const page = this.focus === "contents" ? this.layout.navRows : this.layout.bodyRows;
+			const delta = (matchesKey(data, "pageDown") ? 1 : -1) * Math.max(1, page - 1);
 			if (this.focus === "contents") {
 				const entries = this.entries(),
 					index = entries.findIndex((entry) => entry.id === this.view.selected);
@@ -1022,7 +1041,7 @@ export class ReviewModal {
 	}
 	render(width: number): string[] {
 		this.width = width;
-		const height = Math.max(1, Math.min(36, this.tui.terminal.rows - 2));
+		const height = modalHeight(this.tui, REVIEW_OVERLAY, 36);
 		const inner = Math.max(1, width - 2);
 		const fit = (text: string, size: number) => {
 			const line = truncateToWidth(text, size, "…");
@@ -1038,7 +1057,7 @@ export class ReviewModal {
 			return [
 				border("╭", "╮"),
 				row("Resize to at least 36×18"),
-				row(this.busy ? "Esc: stop and close" : "Esc: close"),
+				row(this.busy ? "Esc stop and close" : "Esc close"),
 				border("╰", "╯"),
 			]
 				.slice(0, height)
@@ -1074,21 +1093,49 @@ export class ReviewModal {
 				? wrapTextWithAnsi(buttons.join(" "), detailWidth)
 				: buttons.map((button) => "  " + button);
 		const availableRows = height - (narrow ? 7 : 8) - actionRows.length - (composer ? 1 : 0);
-		const sticky =
-			!navigationOnly &&
-			this.view.screen === "finding" &&
-			this.finding &&
-			availableRows >= 4 &&
-			(this.view.offsets[this.key] ?? 0) > 0
+		const actionGap = actionRows.length && availableRows >= 8 ? 1 : 0;
+		// Middle rows are one budget: the pinned advisory and finding title take detail rows from the
+		// top of it, and the reading area keeps everything else. Navigation renders on every middle
+		// row in the wide layout, so pinned chrome never removes a Contents entry; in the narrow
+		// Contents-only layout the pinned rows print first and navigation fills the remaining rows.
+		const budget = Math.max(0, availableRows - actionGap);
+		const resizeScreen = () =>
+			[
+				border("╭", "╮"),
+				row("Enlarge the terminal to read this review"),
+				row(this.busy ? "Esc stop and close" : "Esc close"),
+				border("╰", "╯"),
+			]
+				.slice(0, height)
+				.map((line) => truncateToWidth(line, width, ""));
+		const stickyRow =
+			!navigationOnly && budget >= 4 && this.view.screen === "finding" && this.finding && (this.view.offsets[this.key] ?? 0) > 0
 				? truncateToWidth(
 						`${this.findingBadge(this.finding)}  ${this.theme.bold(label(this.finding.title))}`,
 						detailWidth,
 						"…",
 					)
 				: undefined;
-		const actionGap = actionRows.length && availableRows >= 8 ? 1 : 0;
-		const bodyRows = availableRows - (sticky ? 1 : 0) - actionGap;
-		const bodyStart = 4 + (sticky ? 1 : 0);
+		const advisoryLines = this.advisory ? wrapTextWithAnsi(label(this.advisory), detailWidth) : [];
+		const advisoryCount = Math.min(advisoryLines.length, Math.max(0, budget - 1 - (stickyRow ? 1 : 0)));
+		// A viewport that cannot show the advisory plus one reading row (or a pinned title plus one)
+		// shows the resize screen instead of a frame with controls and no review text.
+		if ((advisoryLines.length && advisoryCount === 0) || budget - advisoryCount - (stickyRow ? 1 : 0) < 1)
+			return resizeScreen();
+		const advisoryRows = advisoryLines.slice(0, advisoryCount).map((line, index) =>
+			this.theme.fg(
+				"warning",
+				index === advisoryCount - 1 && advisoryCount < advisoryLines.length
+					? truncateToWidth(line, Math.max(1, detailWidth - 1), "") + "…"
+					: line,
+			),
+		);
+		const pinned = [...advisoryRows, ...(stickyRow ? [stickyRow] : [])];
+		const bodyRows = budget - pinned.length;
+		// Wide: every middle row carries a nav entry. Narrow: the pinned rows carry their own text and
+		// navigation starts right after them.
+		const navRows = navigationOnly ? bodyRows : budget;
+		const bodyStart = 4 + pinned.length;
 		if (this.isList)
 			this.view.row = Math.max(0, Math.min(Math.max(0, this.listLength - 1), this.view.row));
 		const body = [
@@ -1102,7 +1149,7 @@ export class ReviewModal {
 			...(this.notice && this.notice !== "Saved" && !this.busy
 				? [
 						...wrapTextWithAnsi(label(this.notice), detailWidth).map((line) =>
-							this.theme.fg("accent", line),
+							this.theme.fg(/failed|error|cannot/i.test(this.notice) ? "error" : "accent", line),
 						),
 						"",
 					]
@@ -1123,11 +1170,11 @@ export class ReviewModal {
 		const start = Math.max(
 			0,
 			Math.min(
-				this.contentsOffset ?? selected - Math.floor(bodyRows / 2),
-				Math.max(0, entries.length - bodyRows),
+				this.contentsOffset ?? selected - Math.floor(navRows / 2),
+				Math.max(0, entries.length - navRows),
 			),
 		);
-		this.layout = { height, bodyRows, leftWidth, navigationOnly, contentsStart: start, bodyStart };
+		this.layout = { height, bodyRows, navRows, leftWidth, navigationOnly, contentsStart: start, bodyStart };
 		const target = this.record.snapshot.target;
 		const paneRule = (title: string, size: number, active: boolean) =>
 			this.theme.fg(
@@ -1184,31 +1231,31 @@ export class ReviewModal {
 			),
 			divider,
 		];
-		for (let i = 0; i < bodyRows + (sticky ? 1 : 0); i++) {
-			const entry = entries[start + i];
+		for (let i = 0; i < budget; i++) {
+			const isPinned = i < pinned.length;
+			// Wide: nav index is the row index, so a pinned row still shows its Contents entry.
+			// Narrow: pinned rows print their own text, so nav starts at the first non-pinned row.
+			const navIndex = navigationOnly ? i - pinned.length : i;
+			const entry = navIndex >= 0 ? entries[start + navIndex] : undefined;
 			let nav = entry ? `${entry.id === this.view.selected ? "›" : " "} ${label(entry.title)}` : "";
 			if (entry?.id === this.view.selected)
 				nav =
 					this.focus === "contents"
 						? this.theme.bold(this.theme.fg("accent", nav))
 						: this.theme.fg("dim", nav);
-			if (i === 0 && start > 0) nav = "▲ " + nav.slice(2);
-			if (i === bodyRows + (sticky ? 1 : 0) - 1 && start + i + 1 < entries.length)
+			if (navIndex === 0 && start > 0) nav = "▲ " + nav.slice(2);
+			if (navIndex === navRows - 1 && start + navIndex + 1 < entries.length)
 				nav = "▼ " + nav.slice(2);
+			const detail = isPinned ? pinned[i]! : (body[offset + i - pinned.length] ?? "");
 			lines.push(
 				row(
 					navigationOnly
-						? nav
+						? isPinned
+							? pinned[i]!
+							: nav
 						: leftWidth
-							? fit(nav, leftWidth) +
-								this.theme.fg("border", " │ ") +
-								fit(
-									sticky && i === 0 ? sticky : (body[offset + i - (sticky ? 1 : 0)] ?? ""),
-									detailWidth,
-								)
-							: sticky && i === 0
-								? sticky
-								: (body[offset + i - (sticky ? 1 : 0)] ?? ""),
+							? fit(nav, leftWidth) + this.theme.fg("border", " │ ") + fit(detail, detailWidth)
+							: detail,
 				),
 			);
 		}
@@ -1239,7 +1286,7 @@ export class ReviewModal {
 									? "Enter actions"
 									: "↑↓ read";
 		const hint = `${exit} · ${primary} · Tab${narrow ? "" : this.focus === "input" ? " actions" : " focus"}`;
-		const more = navigationOnly ? start + bodyRows < entries.length : offset < this.maxOffset;
+		const more = navigationOnly ? start + navRows < entries.length : offset < this.maxOffset;
 		const paused =
 			this.busy &&
 			this.view.screen === "discussion" &&