pi-bro 0.23.0 → 0.24.0

package/src/config-ui.ts

@@ -2,20 +2,13 @@ import {
 	type Component,
 	type SelectItem,
 	type SettingItem,
-	Container,
 	Input,
 	SelectList,
 	SettingsList,
-	Text,
 	matchesKey,
 	truncateToWidth,
-	visibleWidth,
 } from "@earendil-works/pi-tui";
-import {
-	type ExtensionCommandContext,
-	getSelectListTheme,
-	getSettingsListTheme,
-} from "@earendil-works/pi-coding-agent";
+import { getSelectListTheme, getSettingsListTheme } from "@earendil-works/pi-coding-agent";
 import {
 	type AgyModelFamily,
 	type BroSettings,
@@ -34,15 +27,10 @@ import {
 	withCapabilityOverride,
 } from "./settings.ts";
 import { BRO_MODES, parseBroMode } from "./prompt.ts";
+import { delegateMouse, formatNotice, modalHeight, renderFrame, type Area, type Theme, type TuiLike } from "./modal-kit.ts";
+import type { BroMouseEvent } from "./ui-capabilities.ts";
 import { errorMessage } from "./util.ts";
 
-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;
-};
-
 const SHOW_TURNS_PRESETS = [1, 2, 3, 5, 8];
 
 function showTurnsValues(current: number): string[] {
@@ -58,6 +46,9 @@ export function createConfigModal(
 	persistSettings: (settings: BroSettings) => Promise<void>,
 ): (tui: TuiLike, theme: Theme, keybindings: unknown, done: (value?: void) => void) => Component & { dispose?(): void } {
 	return (tui, theme, _keybindings, done) => {
+		// Size the host list once, then stop interaction if a later resize cannot show the whole
+		// component. SettingsList has no public resize API; clipping it would hide selection/actions.
+		const listRows = Math.max(1, modalHeight(tui) - 11);
 		let settings = initialSettings;
 		// The last settings actually confirmed on disk. A failed save reverts `settings` (and the
 		// whole displayed row set) back to this, so the screen never shows state that doesn't exist.
@@ -73,6 +64,12 @@ export function createConfigModal(
 		// that only actually happens once the in-flight (and any coalesced) save has settled, and
 		// only if it succeeded — a failure cancels the pending close so its notice stays visible.
 		let closeRequested = false;
+		let closed = false;
+		const close = () => {
+			if (closed) return;
+			closed = true;
+			done(undefined);
+		};
 
 		const modelPicker = (current: string, pickerDone: (value?: string) => void, capability?: Capability) => {
 			const defaultResolved = resolveModelEffort({ model: settings.model, effort: settings.effort }, families);
@@ -101,7 +98,7 @@ export function createConfigModal(
 					pickerDone(`${meta.prefix}${value.trim()}`);
 				}
 			};
-			const picker = new SelectList(options, Math.min(options.length, 8), getSelectListTheme());
+			const picker = new SelectList(options, Math.min(options.length, 8, listRows), getSelectListTheme());
 			const selectedIndex = capability && current === "Default" ? 0 : options.findIndex((option) => option.value === current);
 			picker.setSelectedIndex(Math.max(0, selectedIndex));
 			picker.onSelect = (item) => {
@@ -112,8 +109,18 @@ export function createConfigModal(
 			picker.onCancel = () => pickerDone();
 			const customLabel = () => enteringBackend ? EXTERNAL_BACKENDS[enteringBackend].label : "";
 			return {
-				render: (width: number) => enteringBackend ? [`${customLabel()} model ID (Enter saves, Esc cancels)`, ...input.render(width)] : picker.render(width),
+				// SettingsList draws an open submenu instead of its own list and hints, so the picker brings its own.
+				render: (width: number) => enteringBackend
+					? [
+						`${customLabel()} model ID:`,
+						...input.render(width),
+						"",
+						truncateToWidth(theme.fg("dim", "  Enter save · Esc back"), width),
+					]
+					: [...picker.render(width), "", truncateToWidth(theme.fg("dim", "  ↑/↓ choose · Enter select · Esc back"), width)],
 				invalidate: () => { picker.invalidate(); input.invalidate(); },
+				// SettingsList hands an open submenu its own events unchanged.
+				handleMouse: (event: BroMouseEvent) => (enteringBackend ? delegateMouse(input, event, { top: 1, left: 0, width: tui.terminal?.columns ?? 80, height: 1 }) : delegateMouse(picker, event)),
 				handleInput: (data: string) => {
 					if (enteringBackend && matchesKey(data, "escape")) pickerDone();
 					else if (enteringBackend) input.handleInput(data);
@@ -197,14 +204,17 @@ export function createConfigModal(
 			...CAPABILITIES.flatMap((capability) => [capabilityItems[capability].model, capabilityItems[capability].effort]),
 		];
 
-		const noticeText = new Text("");
+		let notice = "";
+		let interactive = true;
+		// Where the complete list was last drawn inside the overlay, for click forwarding.
+		let listArea: Area = { top: 0, left: 0, width: 0, height: 0 };
 
 		function runSave(toSave: BroSettings): void {
 			saving = true;
 			void persistSettings(toSave)
 				.then(() => {
 					savedSettings = toSave;
-					noticeText.setText("");
+					notice = "";
 				})
 				.catch((error: unknown) => {
 					// Restore the last state that is actually on disk: showing the failed, unsaved
@@ -213,7 +223,8 @@ export function createConfigModal(
 					queued = undefined;
 					closeRequested = false;
 					refresh();
-					noticeText.setText(theme.fg("warning", `Could not save settings: ${errorMessage(error)}. Reverted to the last saved settings.`));
+					// Outcome first: long notices are cut after three lines.
+					notice = formatNotice(theme, `Reverted to the last saved settings. Could not save settings: ${errorMessage(error)}`, "error");
 				})
 				.finally(() => {
 					saving = false;
@@ -224,7 +235,7 @@ export function createConfigModal(
 						runSave(next);
 					} else if (closeRequested) {
 						closeRequested = false;
-						done(undefined);
+						close();
 					}
 				});
 		}
@@ -295,30 +306,56 @@ export function createConfigModal(
 				closeRequested = true;
 				return;
 			}
-			done(undefined);
+			close();
 		};
 
-		const settingsList = new SettingsList(items, Math.min(items.length + 2, 18), getSettingsListTheme(), onChange, requestClose);
-		const container = new Container();
-		container.addChild(new Text(theme.fg("accent", theme.bold("Bro · config"))));
-		container.addChild(new Text(theme.fg("dim", "Shared defaults, with optional overrides per capability")));
-		container.addChild(settingsList);
-		container.addChild(noticeText);
-		container.addChild(new Text(theme.fg("dim", "↑/↓ navigate · Enter select/change · Esc back/close")));
-
+		const settingsList = new SettingsList(items, Math.min(items.length, listRows), getSettingsListTheme(), onChange, requestClose);
 		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("└", "┘")];
+			render: (width: number) => {
+				listArea = { top: 0, left: 0, width: 0, height: 0 };
+				const height = modalHeight(tui);
+				const innerWidth = Math.max(1, width - 2);
+				const list = settingsList.render(innerWidth);
+				// renderFrame shrinks a notice to one line before taking minBody rows.
+				interactive = list.length <= Math.max(0, height - 5 - (notice ? 1 : 0));
+				return renderFrame(theme, width, height, {
+					header: () => theme.fg(
+						interactive ? "accent" : "warning",
+						theme.bold(interactive ? "Bro · config" : "Bro · config · enlarge terminal"),
+					),
+					body: (rows) => {
+						if (!interactive) return [theme.fg("warning", "Enlarge the terminal to configure settings safely.")];
+						// The subtitle gives way before SettingsList's selection, scroll state and key hints.
+						const subtitle = rows > list.length
+							? [truncateToWidth(theme.fg("dim", "Shared defaults, with optional overrides per capability"), innerWidth)]
+							: [];
+						// Clicks only reach list rows that were actually drawn.
+						listArea = { top: 3 + subtitle.length, left: 1, width: innerWidth, height: Math.min(list.length, rows - subtitle.length) };
+						return [...subtitle, ...list];
+					},
+					notice,
+					hints: interactive ? undefined : "Esc close",
+					fill: false,
+					minBody: interactive ? list.length : 1,
+				});
 			},
-			invalidate: () => container.invalidate(),
+			invalidate: () => settingsList.invalidate(),
+			handleMouse: (event: BroMouseEvent) => delegateMouse(settingsList, event, listArea),
 			handleInput: (data: string) => {
+				if (!interactive) {
+					// No picker is visible here: Esc closes config, still waiting for pending saves.
+					if (matchesKey(data, "escape")) {
+						requestClose();
+						return;
+					}
+					if (notice) {
+						notice = "";
+						tui.requestRender();
+					}
+					return;
+				}
 				settingsList.handleInput?.(data);
-				tui.requestRender();
+				if (!closed) tui.requestRender();
 			},
 		};
 	};