@xynogen/pix-pretty 1.7.1 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.7.1",
+	"version": "1.7.2",
 	"description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, FFF search, and paste chip formatting",
 	"type": "module",
 	"main": "src/index.ts",
@@ -21,7 +21,8 @@
 		"./utils": "./src/utils.ts",
 		"./resize": "./src/resize.ts",
 		"./context": "./src/tools/context.ts",
-		"./gate-overlay": "./src/gate-overlay.ts"
+		"./gate-overlay": "./src/gate-overlay.ts",
+		"./modal-frame": "./src/modal-frame.ts"
 	},
 	"scripts": {
 		"test": "bun test"

package/src/confirm.ts

@@ -1,18 +1,14 @@
 /**
  * pix-pretty/confirm — reusable Yes/No confirmation overlay.
  *
- * A single coloured SelectList overlay (Yes / No) with optional title, body
- * lines and an auto-cancel countdown. Mirrors the confirm stage of pix-sudo
- * so any extension can get the same look without re-implementing it.
- *
- * Returns true on confirm, false on deny / cancel / timeout.
+ * Rounded modal frame (╭─╮╰─╯), solid bg, accent border — same visual style
+ * as gate-overlay and pix-ask. Returns true on confirm, false on deny/timeout.
  */
 
-import { DynamicBorder } from "@earendil-works/pi-coding-agent";
-import { Box, type SelectItem, SelectList, Text } from "@earendil-works/pi-tui";
+import { type SelectItem, SelectList } from "@earendil-works/pi-tui";
+import { frameLines, modalWidth, selectListTheme } from "./modal-frame.js";
 
-// Minimal structural type for the `ctx.ui.custom` host call. Kept local so the
-// component has no hard dependency on a specific Pi context shape.
+// Minimal structural type for the `ctx.ui.custom` host call.
 interface CustomTheme {
 	fg(color: string, text: string): string;
 	bg(color: string, text: string): string;
@@ -76,6 +72,7 @@ export function confirmOverlay(
 		ui.custom<boolean>(
 			(tui, theme, _kb, done) => {
 				let ticker: ReturnType<typeof setInterval> | undefined;
+				let countdownLine: string | undefined;
 
 				const choices: SelectItem[] = [
 					{
@@ -90,62 +87,33 @@ export function confirmOverlay(
 					},
 				];
 
-				const selectList = new SelectList(choices, choices.length, {
-					selectedPrefix: (t) => theme.fg(accent, t),
-					selectedText: (t) => theme.fg(accent, t),
-					description: (t) => theme.fg("muted", t),
-					scrollInfo: (t) => theme.fg("dim", t),
-					noMatch: (t) => theme.fg("warning", t),
-				});
-
-				const container = new Box(0, 0, (s) => theme.bg("customMessageBg", s));
-				container.addChild(
-					new DynamicBorder((s: string) => theme.fg(accent, s)),
-				);
-				container.addChild(
-					new Text(theme.fg(accent, theme.bold(opts.title)), 1, 0),
+				const selectList = new SelectList(
+					choices,
+					choices.length,
+					selectListTheme(theme, accent),
 				);
 
-				for (const line of opts.body ?? []) {
-					container.addChild(new Text(theme.fg("text", line), 1, 0));
-				}
-
 				if (timeoutMs > 0) {
 					const deadlineMs = Date.now() + timeoutMs;
-					const countdownText = new Text("", 1, 0);
 					const updateCountdown = () => {
 						const remaining = Math.max(
 							0,
 							Math.ceil((deadlineMs - Date.now()) / SECOND_MS),
 						);
-						countdownText.setText(
+						countdownLine =
 							theme.fg("dim", "Auto-cancel in ") +
-								theme.fg(
-									remaining <= COUNTDOWN_WARN_S ? accent : "muted",
-									`${remaining}s`,
-								),
-						);
+							theme.fg(
+								remaining <= COUNTDOWN_WARN_S ? accent : "muted",
+								`${remaining}s`,
+							);
 					};
 					updateCountdown();
 					ticker = setInterval(() => {
 						updateCountdown();
 						tui.requestRender();
 					}, SECOND_MS);
-					container.addChild(countdownText);
 				}
 
-				container.addChild(selectList);
-				container.addChild(
-					new Text(
-						theme.fg("dim", "↑↓ navigate • enter select • esc cancel"),
-						1,
-						0,
-					),
-				);
-				container.addChild(
-					new DynamicBorder((s: string) => theme.fg(accent, s)),
-				);
-
 				const finish = (value: boolean) => {
 					if (timer !== undefined) clearTimeout(timer);
 					if (ticker !== undefined) clearInterval(ticker);
@@ -157,8 +125,41 @@ export function confirmOverlay(
 				controller.signal.addEventListener("abort", () => finish(false));
 
 				return {
-					render: (w: number) => container.render(w),
-					invalidate: () => container.invalidate(),
+					render: (w: number) => {
+						const mw = modalWidth(w);
+						const inner = mw - 4;
+						const lines: string[] = [];
+
+						// Title
+						lines.push(theme.fg(accent, theme.bold(opts.title)));
+
+						// Body
+						for (const line of opts.body ?? []) {
+							lines.push(theme.fg("text", line));
+						}
+
+						// Divider
+						lines.push(theme.fg("dim", "─".repeat(inner)));
+
+						// Countdown
+						if (countdownLine !== undefined) lines.push(countdownLine);
+
+						// Select list
+						for (const l of selectList.render(inner)) lines.push(l);
+
+						lines.push("");
+						lines.push(
+							theme.fg("dim", "↑↓ navigate • enter select • esc cancel"),
+						);
+
+						return frameLines({
+							width: mw,
+							lines,
+							color: (s) => theme.fg(accent, s),
+							bg: (s) => theme.bg("customMessageBg", s),
+						});
+					},
+					invalidate: () => {},
 					handleInput: (data: string) => {
 						selectList.handleInput(data);
 						tui.requestRender();

package/src/gate-overlay.ts

@@ -5,7 +5,8 @@
  *   "confirm" — SelectList only. Used by pix-gate for command gating.
  *   "sudo"    — SelectList → masked password input. Used by pix-sudo.
  *
- * Both modes share: colored border, title, body lines, countdown.
+ * Both modes share: rounded modal frame (╭─╮╰─╯), solid bg, accent border,
+ * title, body lines, optional countdown. Same visual style as pix-ask.
  *
  * Design goals:
  *   - Pure function — no side effects, no global state.
@@ -13,14 +14,8 @@
  *   - Single source of truth for the overlay look across pix-gate and pix-sudo.
  */
 
-import { DynamicBorder } from "@earendil-works/pi-coding-agent";
-import {
-	Box,
-	Input,
-	type SelectItem,
-	SelectList,
-	Text,
-} from "@earendil-works/pi-tui";
+import { Input, type SelectItem, SelectList } from "@earendil-works/pi-tui";
+import { frameLines, modalWidth, selectListTheme } from "./modal-frame.js";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -122,6 +117,67 @@ class MaskedInput extends Input {
 	}
 }
 
+// ── Renderer ──────────────────────────────────────────────────────────────────
+
+/** Build body lines for the current stage, rendered into frameLines. */
+function buildLines(opts: {
+	theme: OverlayTheme;
+	accent: string;
+	config: OverlayConfig;
+	stage: "select" | "password";
+	selectList: SelectList;
+	maskedInput: MaskedInput;
+	countdownLine: string | undefined;
+	width: number;
+}): string[] {
+	const {
+		theme,
+		accent,
+		config,
+		stage,
+		selectList,
+		maskedInput,
+		countdownLine,
+		width,
+	} = opts;
+	const inner = width - 4; // CHROME = 2 border + 2 padding
+	const lines: string[] = [];
+
+	// Title
+	lines.push(theme.fg(accent, theme.bold(config.title)));
+
+	// Body
+	for (const line of config.body ?? []) {
+		lines.push(theme.fg("text", line));
+	}
+
+	// Divider after title/body
+	lines.push(theme.fg("dim", "─".repeat(inner)));
+
+	// Countdown
+	if (countdownLine !== undefined) lines.push(countdownLine);
+
+	// Select or password stage
+	if (stage === "select") {
+		const listLines = selectList.render(inner);
+		for (const l of listLines) lines.push(l);
+		lines.push("");
+		lines.push(theme.fg("dim", "↑↓ navigate • enter select • esc deny"));
+	} else {
+		const label =
+			config.mode === "sudo"
+				? (config.passwordLabel ?? "Sudo password:")
+				: "Password:";
+		lines.push(theme.fg("muted", label));
+		const inputLines = maskedInput.render(inner);
+		for (const l of inputLines) lines.push(l);
+		lines.push("");
+		lines.push(theme.fg("dim", "enter confirm • esc cancel"));
+	}
+
+	return lines;
+}
+
 // ── Main ──────────────────────────────────────────────────────────────────────
 
 /**
@@ -171,9 +227,9 @@ export function showOverlay(
 
 		ui.custom<OverlayResult>(
 			(tui, theme, _kb, done) => {
-				// ── state ───────────────────────────────────────────────────────
 				type Stage = "select" | "password";
 				let stage: Stage = "select";
+				let countdownLine: string | undefined;
 
 				// ── components ──────────────────────────────────────────────────
 				const selectItems: SelectItem[] = choices.map((c) => ({
@@ -182,32 +238,12 @@ export function showOverlay(
 					description: c.description,
 				}));
 
-				const selectList = new SelectList(selectItems, selectItems.length, {
-					selectedPrefix: (t) => theme.fg(accent, t),
-					selectedText: (t) => theme.fg(accent, t),
-					description: (t) => theme.fg("muted", t),
-					scrollInfo: (t) => theme.fg("dim", t),
-					noMatch: (t) => theme.fg("warning", t),
-				});
-
-				const maskedInput = new MaskedInput();
-				const passwordHint = new Text("", 1, 0);
-				const helpText = new Text("", 1, 0);
-				const countdownText = new Text("", 1, 0);
-
-				// ── container ───────────────────────────────────────────────────
-				// padding: 2 cols horizontal, 1 row vertical around all dialog content
-				const container = new Box(2, 1, (s) => theme.bg("customMessageBg", s));
-				container.addChild(
-					new DynamicBorder((s: string) => theme.fg(accent, s)),
+				const selectList = new SelectList(
+					selectItems,
+					selectItems.length,
+					selectListTheme(theme, accent),
 				);
-				container.addChild(
-					new Text(theme.fg(accent, theme.bold(config.title)), 1, 0),
-				);
-
-				for (const line of config.body ?? []) {
-					container.addChild(new Text(theme.fg("text", line), 1, 0));
-				}
+				const maskedInput = new MaskedInput();
 
 				// ── countdown ───────────────────────────────────────────────────
 				let ticker: ReturnType<typeof setInterval> | undefined;
@@ -218,64 +254,34 @@ export function showOverlay(
 							0,
 							Math.ceil((deadlineMs - Date.now()) / SECOND_MS),
 						);
-						countdownText.setText(
+						countdownLine =
 							theme.fg("dim", "Auto-deny in ") +
-								theme.fg(
-									remaining <= COUNTDOWN_WARN_S ? accent : "muted",
-									`${remaining}s`,
-								),
-						);
+							theme.fg(
+								remaining <= COUNTDOWN_WARN_S ? accent : "muted",
+								`${remaining}s`,
+							);
 					};
 					updateCountdown();
 					ticker = setInterval(() => {
 						updateCountdown();
 						tui.requestRender();
 					}, SECOND_MS);
-					container.addChild(countdownText);
 				}
 
-				// ── select stage (always starts here) ───────────────────────────
-				helpText.setText(
-					theme.fg("dim", "↑↓ navigate • enter select • esc deny"),
-				);
-				container.addChild(selectList);
-				container.addChild(helpText);
-				container.addChild(
-					new DynamicBorder((s: string) => theme.fg(accent, s)),
-				);
-
-				// ── finish helper ────────────────────────────────────────────────
+				// ── finish ───────────────────────────────────────────────────────
 				const finish = (result: OverlayResult) => {
 					if (timer !== undefined) clearTimeout(timer);
 					if (ticker !== undefined) clearInterval(ticker);
 					done(result);
 				};
 
-				// ── stage: password (sudo mode only) ────────────────────────────
-				const switchToPassword = () => {
-					stage = "password";
-					container.removeChild(selectList);
-					container.removeChild(helpText);
-
-					const label =
-						config.mode === "sudo"
-							? (config.passwordLabel ?? "Sudo password:")
-							: "Password:";
-					passwordHint.setText(theme.fg("muted", label));
-					container.addChild(passwordHint);
-					container.addChild(maskedInput);
-					container.addChild(
-						new Text(theme.fg("dim", "enter confirm • esc cancel"), 1, 0),
-					);
-					tui.requestRender();
-				};
-
 				// ── event wiring ─────────────────────────────────────────────────
 				selectList.onSelect = (item) => {
 					if (item.value !== approveVal) {
 						finish({ action: "denied" });
 					} else if (config.mode === "sudo") {
-						switchToPassword();
+						stage = "password";
+						tui.requestRender();
 					} else {
 						finish({ action: "approved" });
 					}
@@ -292,8 +298,26 @@ export function showOverlay(
 
 				// ── component interface ──────────────────────────────────────────
 				return {
-					render: (w) => container.render(w),
-					invalidate: () => container.invalidate(),
+					render: (w) => {
+						const mw = modalWidth(w);
+						const lines = buildLines({
+							theme,
+							accent,
+							config,
+							stage,
+							selectList,
+							maskedInput,
+							countdownLine,
+							width: mw,
+						});
+						return frameLines({
+							width: mw,
+							lines,
+							color: (s) => theme.fg(accent, s),
+							bg: (s) => theme.bg("customMessageBg", s),
+						});
+					},
+					invalidate: () => {},
 					handleInput: (data) => {
 						if (stage === "select") selectList.handleInput(data);
 						else maskedInput.handleInput(data);

package/src/modal-frame.ts

@@ -0,0 +1,115 @@
+/**
+ * pix-pretty/modal-frame — shared primitives for interactive overlay UIs.
+ *
+ * Provides:
+ *   frameLines()       — render a rounded bordered modal box (╭─╮╰─╯)
+ *   modalWidth()       — clamp terminal width to a sane modal width
+ *   selectListTheme()  — canonical SelectList theme config (accent + muted + dim)
+ *
+ * Used by: gate-overlay, confirm, and (via re-export) pix-ask.
+ */
+
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const MIN_WIDTH = 40;
+const MAX_WIDTH = 96;
+const MARGIN = 4;
+/** 2 border cols + 2 padding spaces */
+const CHROME = 4;
+
+// ── Width ─────────────────────────────────────────────────────────────────────
+
+/** Clamp terminal width to a sane modal width (40–96 cols). */
+export function modalWidth(termWidth: number): number {
+	return Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, termWidth - MARGIN));
+}
+
+// ── Frame ─────────────────────────────────────────────────────────────────────
+
+export interface FrameOptions {
+	width: number;
+	lines: string[];
+	/** Color function for border glyphs — e.g. `(s) => theme.fg("accent", s)` */
+	color: (s: string) => string;
+	/** Background fill function — e.g. `(s) => theme.bg("customMessageBg", s)` */
+	bg?: (s: string) => string;
+	/** Optional pre-styled string rendered as the first content row (tab bar etc.) */
+	top?: string;
+}
+
+/**
+ * Render a rounded modal box.
+ *
+ * Returns an array of full-width ANSI strings:
+ *   ╭──────────────────╮
+ *   │ [top row]        │   ← only if top is set
+ *   │ content line 1   │
+ *   │ content line 2   │
+ *   ╰──────────────────╯
+ *
+ * Solid background fill — theme fg/bold spans that emit \x1b[0m are patched
+ * so the background colour is re-asserted, preventing transparent holes.
+ */
+export function frameLines(opts: FrameOptions): string[] {
+	const { width, lines, color, top } = opts;
+	const bg = opts.bg ?? ((s: string) => s);
+	const inner = Math.max(1, width - CHROME);
+	const dashes = "─".repeat(width - 2);
+
+	// Derive the bg OPEN sequence so we can re-assert it after any full reset
+	// (\x1b[0m) or bg reset (\x1b[49m) embedded in content.
+	const SENTINEL = "\x00";
+	const bgOpen = bg(SENTINEL).split(SENTINEL)[0] ?? "";
+	const reassert = (s: string): string =>
+		bgOpen
+			? s.replace(/\x1b\[([0-9;]*)m/g, (seq, p: string) =>
+					p === "0" || p.split(";").includes("49") ? `${seq}${bgOpen}` : seq,
+				)
+			: s;
+
+	const row = (content: string): string => {
+		const pad = inner - visibleWidth(content);
+		const padded =
+			pad > 0 ? content + " ".repeat(pad) : truncateToWidth(content, inner);
+		return bg(`${color("│")} ${reassert(padded)} ${color("│")}`);
+	};
+
+	const out: string[] = [bg(color(`╭${dashes}╮`))];
+	if (top !== undefined) out.push(row(top));
+	for (const line of lines) out.push(row(line));
+	out.push(bg(color(`╰${dashes}╯`)));
+	return out;
+}
+
+// ── SelectList theme ──────────────────────────────────────────────────────────
+
+export interface SelectListThemeConfig {
+	selectedPrefix: (t: string) => string;
+	selectedText: (t: string) => string;
+	description: (t: string) => string;
+	scrollInfo: (t: string) => string;
+	noMatch: (t: string) => string;
+}
+
+interface FgTheme {
+	fg(color: string, text: string): string;
+}
+
+/**
+ * Canonical SelectList theme for interactive overlays.
+ * accent = active/selected, muted = descriptions, dim = scroll/hints, warning = no-match.
+ */
+export function selectListTheme(
+	theme: FgTheme,
+	accent = "accent",
+): SelectListThemeConfig {
+	return {
+		selectedPrefix: (t) => theme.fg(accent, t),
+		selectedText: (t) => theme.fg(accent, t),
+		description: (t) => theme.fg("muted", t),
+		scrollInfo: (t) => theme.fg("dim", t),
+		noMatch: (t) => theme.fg("warning", t),
+	};
+}