pi-bro 0.23.1 → 0.25.0

package/src/explain-modal.ts

@@ -3,13 +3,10 @@ import { stripVTControlCharacters } from "node:util";
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { copyToClipboard, getMarkdownTheme, getSelectListTheme } from "@earendil-works/pi-coding-agent";
 import {
-	Container,
 	Editor,
 	Markdown,
-	Text,
 	matchesKey,
-	truncateToWidth,
-	visibleWidth,
+	wrapTextWithAnsi,
 	type Component,
 	type EditorTheme,
 	type Focusable,
@@ -17,7 +14,6 @@ import {
 } from "@earendil-works/pi-tui";
 import { ADVISOR_STEERING_ENTRY, ADVISOR_STEERING_FILE, resolveAdvisorState } from "./advisor.ts";
 import { runBackendText } from "./backend.ts";
-import type { Theme, TuiLike } from "./config-ui.ts";
 import {
 	type BroMode,
 	MAX_PREFERENCES_CHARS,
@@ -40,15 +36,8 @@ import {
 } from "./settings.ts";
 import { openShowHtml, stripShowDiagramFence } from "./show.ts";
 import type { BroSource } from "./sources.ts";
-import {
-	broModalRows,
-	consumeWheel,
-	hasBroCustomUi,
-	setRegularMouseReporting,
-	wheelDelta,
-	type BroMouseEvent,
-	type BroMouseResult,
-} from "./ui-capabilities.ts";
+import { BRO_OVERLAY, broOverlayArea, delegateMouse, formatNotice, modalHeight, openBroOverlay, renderFrame, Scroller, type Area, type NoticeTone, type Theme, type TuiLike } from "./modal-kit.ts";
+import { hasBroCustomUi, type BroMouseEvent, type BroMouseResult } from "./ui-capabilities.ts";
 import { errorMessage } from "./util.ts";
 
 const LOADING_TEXT = "Simplifying for my bro…";
@@ -93,9 +82,12 @@ export async function simplify(
 
 export type TextEditorModalOptions = {
 	title: string;
+	/** Always shown in full above the editor; the editor asks for a bigger terminal before hiding it. */
+	privacy: string;
 	subtitle: string;
 	initialText: string;
 	initialNotice?: string;
+	initialNoticeTone?: NoticeTone;
 	// Returns an error message to refuse the save without calling onSave.
 	validate?: (text: string) => string | undefined;
 	// Either may be async; the modal then waits, ignores further edits, and reports success only once it settles.
@@ -117,17 +109,30 @@ export function createTextEditorModal(
 		editor.setText(options.initialText);
 		let disposed = false;
 		let pending = false;
-		// paddingY 0: the overlay clips from the bottom, so blank rows would push hints and notices off screen.
-		// shortcut: Editor keeps its own min height, so preferences fits from ~22 rows at 80+ columns; revisit if users report smaller terminals.
-		const notice = new Text(options.initialNotice ? theme.fg("accent", options.initialNotice) : "", 1, 0);
-		const showNotice = (message: string, color: "success" | "error") => {
+		let closeRequested = false;
+		let lastSavedText = editor.getExpandedText();
+		let discardArmed = false;
+		let notice = options.initialNotice
+			? formatNotice(theme, options.initialNotice, options.initialNoticeTone ?? "info")
+			: "";
+		// Where the editor was last drawn inside the overlay, for click forwarding.
+		let editorArea: Area = { top: 0, left: 0, width: 0, height: 0 };
+		// The editor did not fit at the last render; editing blind could save text the user never saw.
+		let tooSmall = false;
+		const showNotice = (message: string, tone: NoticeTone) => {
 			if (disposed) return;
-			notice.setText(theme.fg(color, message));
+			notice = formatNotice(theme, message, tone);
 			tui.requestRender();
 		};
-		editor.onChange = () => notice.setText("");
+		editor.onChange = () => {
+			notice = "";
+			discardArmed = false;
+		};
 		const persist = (action: () => void | Promise<void>, success: string, failure: string, after?: () => void) => {
-			const fail = (error: unknown) => showNotice(`${failure}: ${errorMessage(error)}`, "error");
+			const fail = (error: unknown) => {
+				closeRequested = false;
+				showNotice(`${failure}: ${errorMessage(error)}`, "error");
+			};
 			let result: void | Promise<void>;
 			try {
 				result = action();
@@ -147,6 +152,11 @@ export function createTextEditorModal(
 					if (disposed) return;
 					after?.();
 					showNotice(success, "success");
+					if (closeRequested) {
+						closeRequested = false;
+						disposed = true;
+						done(undefined);
+					}
 				},
 				(error) => {
 					pending = false;
@@ -155,31 +165,86 @@ export function createTextEditorModal(
 			);
 		};
 
-		const container = new Container();
-		container.addChild(new Text(theme.fg("accent", theme.bold(options.title)), 1, 0));
-		container.addChild(new Text(theme.fg("dim", options.subtitle), 1, 0));
-		container.addChild(editor);
-		container.addChild(notice);
-		container.addChild(new Text(theme.fg("dim", "Ctrl+S save · Ctrl+K clear · Ctrl+C copy · Esc close"), 1, 0));
-
 		return {
-			render: (w: number) => {
-				const inner = Math.max(1, w - 4);
-				const border = (left: string, right: string) => theme.fg("border", left + "─".repeat(inner + 2) + right);
-				return [border("┌", "┐"), ...container.render(inner).map((line) => {
-					const text = truncateToWidth(line, inner, "");
-					return theme.fg("border", "│") + " " + text + " ".repeat(Math.max(0, inner - visibleWidth(text))) + " " + theme.fg("border", "│");
-				}), border("└", "┘")];
+			// shortcut: Editor keeps its own min height (5 lines), so preferences fits from ~22 rows at
+			// 80+ columns; the subtitle gives way first, the privacy line never. Revisit if users report smaller terminals.
+			render: (width: number) => {
+				editorArea = { top: 0, left: 0, width: 0, height: 0 };
+				// Editor sizes itself from the terminal and cannot be cut without hiding its cursor.
+				const lines = editor.render(Math.max(1, width - 2));
+				const privacy = wrapTextWithAnsi(theme.fg("dim", options.privacy), Math.max(1, width - 2));
+				let fits = false;
+				const frame = renderFrame(theme, width, modalHeight(tui), {
+					header: () => theme.fg("accent", theme.bold(options.title)),
+					body: (rows, innerWidth) => {
+						fits = rows >= privacy.length + lines.length;
+						if (!fits) {
+							// Most important first: the body may have only a row or two.
+							const clear = notice ? "; any key clears the message below" : "";
+							return wrapTextWithAnsi(theme.fg("warning", `Enlarge the terminal to edit (about 22 rows). Ctrl+C still copies the text${clear}.`), innerWidth);
+						}
+						const subtitle = wrapTextWithAnsi(theme.fg("dim", options.subtitle), innerWidth).slice(0, rows - privacy.length - lines.length);
+						// Body rows start under the top border, header and rule.
+						editorArea = { top: 3 + privacy.length + subtitle.length, left: 1, width: innerWidth, height: lines.length };
+						return [...privacy, ...subtitle, ...lines];
+					},
+					notice,
+					// Hints change to discardArmed on first Esc without altering row height.
+					hints: discardArmed
+						? "Esc again to discard · Ctrl+S save · Ctrl+C copy"
+						: "Ctrl+S save · Ctrl+K clear · Ctrl+C copy · Esc close",
+					fill: false,
+					// A long notice shrinks before it can push the editor or the privacy line off screen.
+					minBody: privacy.length + lines.length,
+				});
+				tooSmall = !fits;
+				return frame;
+			},
+			invalidate: () => editor.invalidate(),
+			handleMouse: (event: BroMouseEvent) => {
+				if (discardArmed && event.type === "click") {
+					discardArmed = false;
+					tui.requestRender();
+				}
+				return delegateMouse(editor, event, editorArea);
 			},
-			invalidate: () => container.invalidate(),
-			handleMouse: consumeWheel,
 			handleInput: (data: string) => {
 				if (matchesKey(data, "escape")) {
+					if (pending) {
+						closeRequested = true;
+						showNotice("Saving… closes when done", "info");
+						return;
+					}
+					const isDirty = editor.getExpandedText() !== lastSavedText;
+					if (isDirty && !discardArmed) {
+						discardArmed = true;
+						tui.requestRender();
+						return;
+					}
 					disposed = true;
 					done(undefined);
 					return;
 				}
-				if (pending) return;
+				if (discardArmed) {
+					discardArmed = false;
+					tui.requestRender();
+				}
+				// Copy works even when the editor does not fit, so a draft can always be rescued.
+				if (matchesKey(data, "ctrl+c")) {
+					const text = editor.getExpandedText();
+					void Promise.resolve()
+						.then(() => copy(text))
+						.then(() => showNotice("Copied", "success"))
+						.catch((error) => showNotice(`Copy failed: ${errorMessage(error)}`, "error"));
+					return;
+				}
+				// Even a one-line notice can tip the editor out at the edge sizes; any key clears it.
+				if (tooSmall && notice) {
+					notice = "";
+					tui.requestRender();
+					return;
+				}
+				if (pending || tooSmall) return;
 				if (matchesKey(data, "ctrl+s")) {
 					const text = editor.getExpandedText();
 					const invalid = validate?.(text);
@@ -187,19 +252,18 @@ export function createTextEditorModal(
 						showNotice(invalid, "error");
 						return;
 					}
-					persist(() => onSave(text), "Saved", "Save failed");
+					persist(() => onSave(text), "Saved", "Save failed", () => {
+						lastSavedText = text;
+						discardArmed = false;
+					});
 					return;
 				}
 				if (matchesKey(data, "ctrl+k")) {
-					persist(onClear, "Cleared", "Clear failed", () => editor.setText(""));
-					return;
-				}
-				if (matchesKey(data, "ctrl+c")) {
-					const text = editor.getExpandedText();
-					void Promise.resolve()
-						.then(() => copy(text))
-						.then(() => showNotice("Copied", "success"))
-						.catch((error) => showNotice(`Copy failed: ${errorMessage(error)}`, "error"));
+					persist(onClear, "Cleared", "Clear failed", () => {
+						editor.setText("");
+						lastSavedText = "";
+						discardArmed = false;
+					});
 					return;
 				}
 				if (matchesKey(data, "enter")) {
@@ -223,7 +287,8 @@ export function createAdvisorSteerModal(
 ): ReturnType<typeof createTextEditorModal> {
 	return createTextEditorModal({
 		title: "Bro · advisor steer",
-		subtitle: `Session-specific steering brief for the advisor (takes precedence over ${ADVISOR_STEERING_FILE}) — never sent to the main model.`,
+		privacy: "Never sent to the main model.",
+		subtitle: `Session-specific steering brief for the advisor (takes precedence over ${ADVISOR_STEERING_FILE}).`,
 		initialText,
 		onSave,
 		onClear,
@@ -248,9 +313,11 @@ export function createPreferencesModal(
 	const starter = loaded.text === undefined && !loaded.error;
 	return createTextEditorModal({
 		title: "Bro · preferences",
-		subtitle: "About you and how you like answers. Sent to the selected backend with every explain, show, btw, and Guided Review request — never to the advisor or Pi's main model.",
+		privacy: "Never sent to the advisor or Pi's main model.",
+		subtitle: "About you and how you like answers; sent to the selected backend with every explain, show, btw, and Guided Review request.",
 		initialText: starter ? STARTER_PREFERENCES : (loaded.text ?? ""),
-		initialNotice: loaded.error ?? (starter ? "Starter text — not saved. Ctrl+S saves it; Esc leaves no file." : undefined),
+		initialNotice: loaded.error ?? (starter ? "Starter text — not saved. Ctrl+S saves it." : undefined),
+		initialNoticeTone: loaded.error ? "error" : "info",
 		validate: preferencesTooLong,
 		onSave: persist.save,
 		onClear: persist.clear,
@@ -268,18 +335,16 @@ export async function showPreferencesModal(ctx: ExtensionCommandContext): Promis
 		const text = await readPreferencesRaw();
 		loaded = text === undefined ? {} : { text };
 	} catch (error) {
-		loaded = { error: `${errorMessage(error)} Ctrl+K deletes it.` };
+		// Action first: long notices are cut after three lines.
+		loaded = { error: `Unusable preferences file (Ctrl+K deletes it): ${errorMessage(error)}` };
 	}
-	await ctx.ui.custom<void>(
+	await openBroOverlay<void>(
+		ctx,
 		createPreferencesModal(loaded, {
 			// ponytail: last writer wins against external edits while the editor is open, like writeSettings.
 			save: (text) => queuePreferencesWrite(() => writeFile(PREFERENCES_FILE, `${text.trim()}\n`, "utf8")),
 			clear: () => queuePreferencesWrite(() => rm(PREFERENCES_FILE, { force: true })),
 		}),
-		{
-			overlay: true,
-			overlayOptions: { width: "78%", minWidth: 48, maxHeight: "78%", anchor: "top-center", margin: { top: 1, left: 2, right: 2 } },
-		},
 	);
 }
 
@@ -289,16 +354,13 @@ export async function showAdvisorSteerModal(ctx: ExtensionCommandContext, pi: Ex
 		return;
 	}
 	const { steering } = resolveAdvisorState(ctx.sessionManager.getBranch());
-	await ctx.ui.custom<void>(
+	await openBroOverlay<void>(
+		ctx,
 		createAdvisorSteerModal(
 			steering,
 			(text) => pi.appendEntry(ADVISOR_STEERING_ENTRY, { text }),
 			() => pi.appendEntry(ADVISOR_STEERING_ENTRY, { text: "" }),
 		),
-		{
-			overlay: true,
-			overlayOptions: { width: "78%", minWidth: 48, maxHeight: "78%", anchor: "top-center", margin: { top: 1, left: 2, right: 2 } },
-		},
 	);
 }
 
@@ -333,26 +395,32 @@ Quick reference. Full user guide: https://github.com/tranhoangnguyen03/pi-bro/bl
 ## Guided Review
 
 - \`/bro guided-review <PR number or URL>\` — automatically explain and assess a PR with captured code and optional private questions (local Pi interactive only; Git and authenticated gh required).
-- Your work is saved automatically. Open the same PR to return without a model call; \`/bro guided-review\` lists saved reviews (\`resume\` is an alias). Reopening keeps the captured revision, not newer commits.
-- Enter opens an item or focuses actions; Enter on a highlighted action activates it. Tab changes focus. Esc goes back, then closes from Contents. Close saves automatically; Stop and close stops active work first.
-- Copy finding copies to the system clipboard, not GitHub. Regenerate guide is optional and makes a confirmed call about the same captured code. Review generation/questions require Claude or Muse file-only tools: shell, writes and web tools are disabled. Set a review override in /bro config; other backends can still read saved reviews. Repository text can still mislead the model; citations are not proof.
+- Reviews save automatically. Reopen the same PR without a model call; bare \`/bro guided-review\` lists saved reviews (\`resume\` is an alias). Captured code stays unchanged.
+- Enter opens items or activates focused actions. Tab changes focus; Esc goes back, then closes from Contents. Close saves; Stop and close cancels active work first.
+- Copy finding uses the clipboard, not GitHub. Regenerate requires confirmation and reviews the same capture. For untrusted PRs, prefer Claude/Muse: file-only tools, no shell/writes/web. Codex/Grok allow shell in a read-only sandbox; Agy's sandbox permits project writes. All three show an advisory. Choose a review override in /bro config. Repository text can mislead; citations are not proof.
+
+## Elevate
+
+- \`/bro elevate [request]\` — improve a task before sending it. Ctrl+Shift+E uses the draft. Choose Messages/Full context; Space/Enter ticks findings; Tab focuses actions.
+- Enter adds a line; Ctrl+S or Ctrl+Enter discovers gaps. Use labelled buttons for actions.
+- Shares BTW settings; see docs/elevate.md.
 
 ## Side conversation
 
 - \`/bro btw [question]\` — open a side conversation seeded with recent main-session context. It starts conversation-only; reopening keeps the thread and its mode.
-- Inside the modal: Enter asks (empty Enter re-asks); \`/mode\` toggles conversation-only / full permission (read and edit the workspace) and keeps the thread; \`/copy\` and \`/copy-all\` copy to the clipboard; \`/insert\` and \`/insert-all\` insert into an empty main editor without submitting; \`/retry\` re-asks; \`/clear\` resets. Any other text is sent as a question. Esc closes.
+- Enter asks; empty Enter or \`/retry\` re-asks. \`/mode\` toggles conversation-only/full workspace access, retaining the thread. \`/copy\`, \`/copy-all\` copy; \`/insert\`, \`/insert-all\` fill an empty main editor without submitting. \`/clear\` resets; Esc closes.
 
 ## Advisor
 
 - \`bro_advisor\` — a tool the executor agent may call for a second opinion from a fresh backend process with real, auto-approved workspace access; it is told to advise, not edit, but that is not enforced
 - \`/bro advisor\` — whether \`bro_advisor\` is available right now
 - \`/bro advisor-steer\` — edit the session's persistent steering brief (**Ctrl+S** save, **Ctrl+K** clear, **Ctrl+C** copy, **Esc** close)
-- Standing advisor steering: \`${ADVISOR_STEERING_FILE}\` sets standing priorities across sessions (session steering takes precedence)
+- Standing advisor steering sets cross-session priorities; session steering takes precedence.
 
 ## Configure and check
 
-- \`/bro preferences\` — tell Bro about yourself and how you like answers; added to explain, show, btw, and Guided Review prompts, never the advisor (**Ctrl+S** save, **Ctrl+K** delete, **Ctrl+C** copy, **Esc** close)
-- \`/bro config\` — shared default and per-capability (explain/show/btw/advisor/review) backend, model, and effort; explain mode; show turns. Changes save immediately.
+- \`/bro preferences\` — tell Bro about yourself and how you like answers; added to explain, show, btw, Elevate and Guided Review prompts, never the advisor (**Ctrl+S** save, **Ctrl+K** delete, **Ctrl+C** copy, **Esc** close)
+- \`/bro config\` — shared default and per-capability (explain/show/btw/advisor/review) backend, model, and effort; explain mode; show turns. Changes save immediately. If the terminal is too small, Esc closes config after pending saves finish; a failed save keeps it open.
 - \`/bro mode [brief|balanced|faithful]\` — view or choose the explanation mode
 - \`/bro doctor\` — check settings, preferences, and every selected backend without running a model turn
 
@@ -375,7 +443,7 @@ The mode decides how much of the source to keep; your preferences decide who it'
 
 ## Controls
 
-- **Mouse wheel / trackpad**, **↑ / ↓** — scroll
+- **Mouse wheel / trackpad**, **↑ / ↓**, **PgUp / PgDn** — scroll
 - **C** — copy the full explanation
 - **R** — repeat the current action (an explanation keeps its mode)
 - **M** — re-simplify in the next mode (brief → balanced → faithful); not saved
@@ -395,10 +463,13 @@ export class BroModal implements Focusable {
 	private rawText = "";
 	private sourceLabel = "";
 	private modelLabel = "";
-	private notice = "";
-	private offset = 0;
-	private maxOffset = 0;
-	private bodyHeight = 1;
+	private noticeText = "";
+	private noticeTone: NoticeTone = "info";
+	private rawArea: Area | undefined;
+	private readonly scroller = new Scroller(() => {
+		this.noticeText = "";
+		this.tui.requestRender();
+	});
 	private copyable = false;
 	private retryable = false;
 	private disposed = false;
@@ -416,9 +487,7 @@ export class BroModal implements Focusable {
 		private readonly onDispose: () => void,
 		private readonly retryLabel: string,
 		private readonly onSwitchMode: () => void = () => {},
-	) {
-		setRegularMouseReporting(this.tui, true);
-	}
+	) {}
 
 	setLoading(text = LOADING_TEXT): void {
 		this.setContent("loading", `**${text}**`, "", false, false);
@@ -428,8 +497,23 @@ export class BroModal implements Focusable {
 		this.setContent("streaming", text, "", false, false);
 	}
 
-	setResult(text: string, retryable: boolean, notice = "", sourceLabel = "", rawText = text, modelLabel = ""): void {
-		this.setContent("result", text, rawText, true, retryable, notice, sourceLabel, modelLabel);
+	get notice(): string {
+		return this.noticeText;
+	}
+
+	set notice(text: string) {
+		this.setNotice(text);
+	}
+
+	setResult(text: string, retryable: boolean, notice = "", sourceLabel = "", rawText = text, modelLabel = "", noticeTone: NoticeTone = "info"): void {
+		this.setContent("result", text, rawText, true, retryable, notice, sourceLabel, modelLabel, noticeTone);
+	}
+
+	setNotice(text: string, tone: NoticeTone = "info"): void {
+		if (this.disposed) return;
+		this.noticeText = text;
+		this.noticeTone = tone;
+		this.tui.requestRender();
 	}
 
 	setHtmlPath(path: string): void {
@@ -464,39 +548,25 @@ export class BroModal implements Focusable {
 		notice = "",
 		sourceLabel = "",
 		modelLabel = "",
+		noticeTone: NoticeTone = "info",
 	): void {
 		this.kind = kind;
 		if (kind !== "result") this.htmlPath = "";
 		this.rawText = rawText;
 		this.copyable = copyable;
 		this.retryable = retryable;
-		this.notice = notice;
+		this.noticeText = notice;
+		this.noticeTone = noticeTone;
 		this.sourceLabel = stripVTControlCharacters(sourceLabel)
 			.replace(/[\u0000-\u001f\u007f-\u009f]/g, " ")
 			.replace(/\s+/g, " ")
 			.trim();
 		this.modelLabel = modelLabel;
-		if (kind !== "streaming") this.offset = 0;
+		if (kind !== "streaming") this.scroller.toStart();
 		this.markdown.setText(text);
 		this.tui.requestRender();
 	}
 
-	private frameLine(content: string, innerWidth: number): string {
-		const truncated = truncateToWidth(content, innerWidth, "");
-		const padding = Math.max(0, innerWidth - visibleWidth(truncated));
-		return `${this.theme.fg("border", "│")}${truncated}${" ".repeat(padding)}${this.theme.fg("border", "│")}`;
-	}
-
-	private borderLine(innerWidth: number, edge: "top" | "bottom"): string {
-		const left = edge === "top" ? "┌" : "└";
-		const right = edge === "top" ? "┐" : "┘";
-		return this.theme.fg("border", `${left}${"─".repeat(innerWidth)}${right}`);
-	}
-
-	private ruleLine(innerWidth: number): string {
-		return this.theme.fg("border", `├${"─".repeat(innerWidth)}┤`);
-	}
-
 	private canSwitchMode(): boolean {
 		return Boolean(this.modeLabel) && (this.kind === "loading" || this.kind === "streaming" || this.kind === "result");
 	}
@@ -514,55 +584,28 @@ export class BroModal implements Focusable {
 	}
 
 	render(width: number): string[] {
-		const dialogWidth = Math.max(24, width);
-		const innerWidth = Math.max(22, dialogWidth - 2);
-		const terminalRows = broModalRows(this.tui, process.stdout.rows);
-		const dialogHeight = Math.min(32, Math.max(7, Math.floor(terminalRows * 0.78)));
-		this.bodyHeight = Math.max(1, dialogHeight - 6);
-
-		const rendered = this.markdown.render(innerWidth);
-		this.maxOffset = Math.max(0, rendered.length - this.bodyHeight);
-		this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
-		const visible = rendered.slice(this.offset, this.offset + this.bodyHeight);
-		const hiddenBelow = Math.max(0, this.maxOffset - this.offset);
-		const scroll = this.maxOffset > 0 ? ` · ↑${this.offset} ↓${hiddenBelow}` : "";
-		const controls = this.notice ? `${this.notice} · ${this.controls()}` : this.controls();
-
-		const lines = [
-			this.borderLine(innerWidth, "top"),
-			this.frameLine(
-				this.theme.fg("accent", this.theme.bold(`Bro${this.sourceLabel ? ` · ${this.sourceLabel}` : ""}`)) +
-					this.theme.fg("dim", `${this.modelLabel ? ` · ${this.modelLabel}` : ""}${this.modeLabel ? ` · ${this.modeLabel}` : ""}${this.preferencesUsed ? " · prefs" : ""}${scroll}`),
-				innerWidth,
-			),
-			this.ruleLine(innerWidth),
-		];
-
-		for (const line of visible) lines.push(this.frameLine(line, innerWidth));
-		for (let i = visible.length; i < this.bodyHeight; i++) lines.push(this.frameLine("", innerWidth));
-
-		lines.push(this.ruleLine(innerWidth));
-		lines.push(this.frameLine(this.theme.fg("dim", controls), innerWidth));
-		lines.push(this.borderLine(innerWidth, "bottom"));
-		return lines;
+		const height = modalHeight(this.tui, BRO_OVERLAY, 32);
+		this.rawArea = broOverlayArea(this.tui, width, height);
+		return renderFrame(this.theme, width, height, {
+			header: () => {
+				const scroll = this.scroller.indicator();
+				return (
+					this.theme.fg("accent", this.theme.bold(`Bro${this.sourceLabel ? ` · ${this.sourceLabel}` : ""}`)) +
+					this.theme.fg("dim", `${this.modelLabel ? ` · ${this.modelLabel}` : ""}${this.modeLabel ? ` · ${this.modeLabel}` : ""}${this.preferencesUsed ? " · prefs" : ""}${scroll ? ` · ${scroll}` : ""}`)
+				);
+			},
+			body: (rows, innerWidth) => this.scroller.view(this.markdown.render(innerWidth), rows),
+			notice: this.noticeText ? formatNotice(this.theme, this.noticeText, this.noticeTone) : undefined,
+			hints: this.controls(),
+		});
 	}
 
 	invalidate(): void {
 		this.markdown.invalidate();
 	}
 
-	// Pi 1.2+ fullscreen delivers the wheel here and no longer forwards raw wheel input to handleInput.
 	handleMouse(event: BroMouseEvent): BroMouseResult {
-		if (event.type !== "wheel") return;
-		const delta = Math.trunc(event.wheelDelta ?? 0);
-		if (delta) this.scroll(delta);
-		return { handled: true, render: false };
-	}
-
-	private scroll(delta: number): void {
-		this.offset = Math.max(0, Math.min(this.offset + delta, this.maxOffset));
-		this.notice = "";
-		this.tui.requestRender();
+		return this.scroller.handleMouse(event);
 	}
 
 	handleInput(data: string): void {
@@ -571,25 +614,15 @@ export class BroModal implements Focusable {
 			return;
 		}
 
-		const delta = wheelDelta(data) || (matchesKey(data, "up") ? -1 : matchesKey(data, "down") ? 1 : 0);
-		if (delta) {
-			this.scroll(delta);
-			return;
-		}
+		if (this.scroller.handleKey(data, this.rawArea)) return;
 
 		if ((matchesKey(data, "c") || matchesKey(data, "shift+c")) && this.copyable && this.rawText) {
 			void copyToClipboard(this.rawText)
 				.then(() => {
-					if (!this.disposed) {
-						this.notice = "Copied";
-						this.tui.requestRender();
-					}
+					this.setNotice("Copied", "success");
 				})
 				.catch((error) => {
-					if (!this.disposed) {
-						this.notice = `Copy failed: ${error instanceof Error ? error.message : String(error)}`;
-						this.tui.requestRender();
-					}
+					this.setNotice(`Copy failed: ${error instanceof Error ? error.message : String(error)}`, "error");
 				});
 			return;
 		}
@@ -609,17 +642,17 @@ export class BroModal implements Focusable {
 		}
 
 		if ((matchesKey(data, "o") || matchesKey(data, "shift+o")) && this.htmlPath && this.kind === "result") {
-			this.notice = openShowHtml(this.htmlPath)
-				? "Opening diagram"
-				: `Could not open ${this.htmlPath}`;
-			this.tui.requestRender();
+			const opened = openShowHtml(this.htmlPath);
+			this.setNotice(
+				opened ? "Opening diagram" : `Could not open ${this.htmlPath}`,
+				opened ? "info" : "error",
+			);
 		}
 	}
 
 	dispose(): void {
 		if (this.disposed) return;
 		this.disposed = true;
-		setRegularMouseReporting(this.tui, false);
 		this.onDispose();
 	}
 }
@@ -650,13 +683,14 @@ export async function showBroModal(ctx: ExtensionCommandContext, options: BroMod
 		return;
 	}
 
-	await ctx.ui.custom<void>(
+	await openBroOverlay<void>(
+		ctx,
 		(tui, theme, _keybindings, done) => {
 			let closed = false;
 			let controller: AbortController | undefined;
 			let current = options.result;
 			let inFlightMode: BroMode | undefined;
-			let execute: (source?: BroSource, mode?: BroMode, notice?: string) => void = () => {};
+			let execute: (source?: BroSource, mode?: BroMode, notice?: string, noticeTone?: NoticeTone) => void = () => {};
 
 			const close = () => {
 				if (closed) return;
@@ -686,15 +720,15 @@ export async function showBroModal(ctx: ExtensionCommandContext, options: BroMod
 				},
 			);
 
-			const present = (result: ModalResult, notice = "") => {
+			const present = (result: ModalResult, notice = "", noticeTone: NoticeTone = "info") => {
 				const display = result.htmlPath ? stripShowDiagramFence(result.text) : result.text;
-				modal.setResult(display, options.retryable ?? Boolean(options.run), notice, result.source?.label, result.text, result.model);
+				modal.setResult(display, options.retryable ?? Boolean(options.run), notice, result.source?.label, result.text, result.model, noticeTone);
 				modal.setHtmlPath(result.htmlPath ?? "");
 				modal.setMode(result.mode);
 				modal.setPreferences(Boolean(result.preferences));
 			};
 
-			execute = (source?: BroSource, mode?: BroMode, notice = "") => {
+			execute = (source?: BroSource, mode?: BroMode, notice = "", noticeTone: NoticeTone = "info") => {
 				if (!options.run || controller || closed) return;
 				const previous = current;
 				const nextController = new AbortController();
@@ -713,14 +747,14 @@ export async function showBroModal(ctx: ExtensionCommandContext, options: BroMod
 						if (closed || nextController.signal.aborted) return;
 						current = result;
 						options.onResult?.(result);
-						present(result, notice);
+						present(result, notice, noticeTone);
 					})
 					.catch((error) => {
 						if (closed || nextController.signal.aborted) return;
 						const message = error instanceof Error ? error.message : String(error);
 						if (previous) {
 							current = previous;
-							present(previous, `Retry failed: ${message}`);
+							present(previous, `Retry failed: ${message}`, "error");
 						} else {
 							modal.setMode(undefined);
 							modal.setError(message);
@@ -744,15 +778,6 @@ export async function showBroModal(ctx: ExtensionCommandContext, options: BroMod
 
 			return modal;
 		},
-		{
-			overlay: true,
-			overlayOptions: {
-				width: "78%",
-				minWidth: 48,
-				maxHeight: "78%",
-				anchor: "top-center",
-				margin: { top: 1, left: 2, right: 2 },
-			},
-		},
+		{ mouse: true },
 	);
 }