@xynogen/pix-pretty 1.7.27 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.7.27",
+	"version": "1.8.0",
 	"description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, diff rendering, and FFF search",
 	"type": "module",
 	"main": "src/index.ts",

package/src/confirm.ts

@@ -5,8 +5,15 @@
  * as gate-overlay and pix-ask. Returns true on confirm, false on deny/timeout.
  */
 
-import { type SelectItem, SelectList } from "@earendil-works/pi-tui";
-import { frameLines, modalWidth, selectListTheme } from "./modal-frame.js";
+import { type KeybindingsManager, type SelectItem, SelectList } from "@earendil-works/pi-tui";
+import {
+	frameModal,
+	MIN_PERMISSION_MODAL_HEIGHT,
+	ModalPager,
+	modalWidth,
+	selectListTheme,
+	terminalModalHeight,
+} from "./modal-frame.js";
 
 // Minimal structural type for the `ctx.ui.custom` host call.
 interface CustomTheme {
@@ -25,12 +32,12 @@ interface CustomComponent {
 export interface ConfirmUI {
 	custom<T>(
 		cb: (
-			tui: { requestRender(): void },
+			tui: { requestRender(): void; terminal?: { rows?: number } },
 			theme: CustomTheme,
-			kb: unknown,
+			kb: KeybindingsManager,
 			done: (v: T) => void,
 		) => CustomComponent,
-		opts?: { overlay?: boolean },
+		opts?: { overlay?: boolean; overlayOptions?: { maxHeight?: number | `${number}%` } },
 	): Promise<T | undefined>;
 }
 
@@ -64,9 +71,10 @@ export function confirmOverlay(ui: ConfirmUI, opts: ConfirmOptions): Promise<boo
 		const timer = timeoutMs > 0 ? setTimeout(() => controller.abort(), timeoutMs) : undefined;
 
 		ui.custom<boolean>(
-			(tui, theme, _kb, done) => {
+			(tui, theme, kb, done) => {
 				let ticker: ReturnType<typeof setInterval> | undefined;
 				let countdownLine: string | undefined;
+				const pager = new ModalPager();
 
 				const choices: SelectItem[] = [
 					{
@@ -112,43 +120,43 @@ export function confirmOverlay(ui: ConfirmUI, opts: ConfirmOptions): Promise<boo
 					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({
+						const footer = [theme.fg("dim", "─".repeat(inner))];
+						if (countdownLine !== undefined) footer.push(countdownLine);
+						footer.push(...selectList.render(inner));
+						footer.push("");
+						footer.push(
+							theme.fg("dim", "↑↓ choose • ←→/PgUp/PgDn inspect • enter select • esc cancel"),
+						);
+
+						const result = frameModal({
 							width: mw,
-							lines,
+							maxHeight: terminalModalHeight(tui.terminal?.rows),
+							minHeight: MIN_PERMISSION_MODAL_HEIGHT,
+							header: [theme.fg(accent, theme.bold(opts.title))],
+							body: (opts.body ?? []).map((line) => theme.fg("text", line)),
+							footer,
+							bodyOffset: pager.bodyOffset,
 							color: (s) => theme.fg(accent, s),
 							bg: (s) => theme.bg("customMessageBg", s),
+							fg: (s) => theme.fg("text", s),
+							overflowLine: ({ page, totalPages }) =>
+								theme.fg("dim", `←→/PgUp/PgDn inspect • ${page}/${totalPages}`),
 						});
+						pager.sync(result);
+						return result.lines;
 					},
 					invalidate: () => {},
 					handleInput: (data: string) => {
+						if (pager.handleInput(data, kb, true)) {
+							tui.requestRender();
+							return;
+						}
 						selectList.handleInput(data);
 						tui.requestRender();
 					},
 				};
 			},
-			{ overlay: true },
+			{ overlay: true, overlayOptions: { maxHeight: "80%" } },
 		).then((result) => {
 			if (timer !== undefined) clearTimeout(timer);
 			resolve(result ?? false);

package/src/diff-render.ts

@@ -80,16 +80,25 @@ export interface DiffColors {
 	bgGutterDel: string;
 }
 
+// Faint row tints for changed lines. Kept dark enough to sit under syntax
+// highlighting without washing it out, but visible enough that a scanned diff
+// reads as add/remove bands rather than gutter chips alone.
+const BG_ADD_FAINT = "\x1b[48;2;18;42;28m";
+const BG_DEL_FAINT = "\x1b[48;2;48;22;26m";
+/** Intra-line word-diff emphasis — one step brighter than the row tint. */
+const BG_ADD_STRONG = "\x1b[48;2;28;72;44m";
+const BG_DEL_STRONG = "\x1b[48;2;82;32;38m";
+
 export const DEFAULT_DIFF_COLORS: DiffColors = {
 	fgAdd: FG_ADD,
 	fgDel: FG_DEL,
 	fgCtx: FG_DIM,
-	bgAdd: BG_BASE,
-	bgDel: BG_BASE,
-	bgAddHighlight: BG_BASE,
-	bgDelHighlight: BG_BASE,
-	bgGutterAdd: BG_BASE,
-	bgGutterDel: BG_BASE,
+	bgAdd: BG_ADD_FAINT,
+	bgDel: BG_DEL_FAINT,
+	bgAddHighlight: BG_ADD_STRONG,
+	bgDelHighlight: BG_DEL_STRONG,
+	bgGutterAdd: BG_ADD_FAINT,
+	bgGutterDel: BG_DEL_FAINT,
 };
 
 type DiffTheme = {
@@ -112,12 +121,12 @@ export function resolveDiffColors(theme?: DiffTheme): DiffColors {
 		fgDel: themeFg(theme, "toolDiffRemoved", FG_DEL),
 		fgCtx: themeFg(theme, "toolDiffContext", FG_DIM),
 		theme: typeof theme.fg === "function" ? (theme as FgTheme) : undefined,
-		bgAdd: BG_BASE,
-		bgDel: BG_BASE,
-		bgAddHighlight: BG_BASE,
-		bgDelHighlight: BG_BASE,
-		bgGutterAdd: BG_BASE,
-		bgGutterDel: BG_BASE,
+		bgAdd: BG_ADD_FAINT,
+		bgDel: BG_DEL_FAINT,
+		bgAddHighlight: BG_ADD_STRONG,
+		bgDelHighlight: BG_DEL_STRONG,
+		bgGutterAdd: BG_ADD_FAINT,
+		bgGutterDel: BG_DEL_FAINT,
 	};
 }
 

package/src/diff.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "bun:test";
 import { parseDiff } from "./diff.js";
 import {
+	DEFAULT_DIFF_COLORS,
 	diffThemeCacheKey,
 	renderDiffSummary,
 	renderUnified,
@@ -22,20 +23,34 @@ describe("theme-derived diff rendering", () => {
 		},
 	};
 
-	it("uses semantic foregrounds without tint backgrounds", () => {
+	it("uses semantic foregrounds", () => {
 		const colors = resolveDiffColors(theme);
 		expect(colors.fgAdd).toBe("\x1b[38;2;120;210;150m");
 		expect(colors.fgDel).toBe("\x1b[38;2;230;120;130m");
 		expect(colors.fgCtx).toBe("\x1b[38;2;130;140;150m");
-		for (const key of [
-			"bgAdd",
-			"bgDel",
-			"bgAddHighlight",
-			"bgDelHighlight",
-			"bgGutterAdd",
-			"bgGutterDel",
-		] as const) {
-			expect(colors[key]).toBe("\x1b[49m");
+	});
+
+	// Regression: these six slots were all set to BG_BASE (\x1b[49m), which
+	// dropped the faint green/red row tint and left only the gutter chips
+	// colored. A diff must read as add/remove bands at a glance.
+	it("gives changed rows a faint tint background", () => {
+		for (const colors of [DEFAULT_DIFF_COLORS, resolveDiffColors(theme)]) {
+			for (const key of [
+				"bgAdd",
+				"bgDel",
+				"bgAddHighlight",
+				"bgDelHighlight",
+				"bgGutterAdd",
+				"bgGutterDel",
+			] as const) {
+				expect(colors[key]).not.toBe("\x1b[49m");
+				expect(colors[key]).toMatch(/^\x1b\[48;2;\d+;\d+;\d+m$/);
+			}
+			// Word-diff emphasis must be distinguishable from the row tint.
+			expect(colors.bgAddHighlight).not.toBe(colors.bgAdd);
+			expect(colors.bgDelHighlight).not.toBe(colors.bgDel);
+			// Add and remove must never collide.
+			expect(colors.bgAdd).not.toBe(colors.bgDel);
 		}
 	});
 
@@ -53,7 +68,19 @@ describe("theme-derived diff rendering", () => {
 		);
 	});
 
-	it("keeps the foreground-only diff style", async () => {
+	it("emits tint backgrounds on changed rows", async () => {
+		const rendered = await renderUnified(
+			parseDiff("const oldValue = 1;", "const newValue = 2;"),
+			"typescript",
+			80,
+			resolveDiffColors({ ...theme, fg: (_key, text) => text }),
+		);
+		const { bgAdd, bgDel } = resolveDiffColors(theme);
+		expect(rendered).toContain(bgDel);
+		expect(rendered).toContain(bgAdd);
+	});
+
+	it("keeps gutter numbering and rule layout intact", async () => {
 		const rendered = await renderUnified(
 			parseDiff("const oldValue = 1;", "const newValue = 2;"),
 			"typescript",
@@ -69,7 +96,6 @@ describe("theme-derived diff rendering", () => {
 		expect(lines[3]).toMatch(/^─+$/);
 		expect(rendered).toContain(theme.getFgAnsi("toolDiffRemoved"));
 		expect(rendered).toContain(theme.getFgAnsi("toolDiffAdded"));
-		expect(rendered).not.toMatch(/\x1b\[48(?:;[^m]*)?m/);
 	});
 });
 

package/src/gate-overlay.ts

@@ -14,8 +14,16 @@
  *   - Single source of truth for the overlay look across pix-gate and pix-sudo.
  */
 
-import { Input, type SelectItem, SelectList, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import { frameLines, modalWidth, selectListTheme } from "./modal-frame.js";
+import { Input, type SelectItem, SelectList } from "@earendil-works/pi-tui";
+import {
+	frameModal,
+	MIN_PERMISSION_MODAL_HEIGHT,
+	type ModalPageKeybindings,
+	ModalPager,
+	modalWidth,
+	selectListTheme,
+	terminalModalHeight,
+} from "./modal-frame.js";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -83,6 +91,7 @@ interface OverlayTheme {
 
 interface OverlayTui {
 	requestRender(): void;
+	terminal?: { rows?: number };
 }
 
 interface OverlayComponent {
@@ -111,6 +120,13 @@ const DEFAULT_CHOICES: OverlayChoice[] = [
 	{ value: "no", label: "Deny", description: "Block" },
 ];
 
+function asPageKeybindings(value: unknown): ModalPageKeybindings | undefined {
+	if (!value || typeof value !== "object") return undefined;
+	return typeof (value as { matches?: unknown }).matches === "function"
+		? (value as ModalPageKeybindings)
+		: undefined;
+}
+
 // ── Masked input (● per char) ─────────────────────────────────────────────────
 
 class MaskedInput extends Input {
@@ -125,8 +141,14 @@ class MaskedInput extends Input {
 
 // ── Renderer ──────────────────────────────────────────────────────────────────
 
-/** Build body lines for the current stage, rendered into frameLines. */
-function buildLines(opts: {
+interface OverlaySections {
+	header: string[];
+	body: string[];
+	footer: string[];
+}
+
+/** Partition inspectable content from pinned approval controls. */
+function buildSections(opts: {
 	theme: OverlayTheme;
 	accent: string;
 	config: OverlayConfig;
@@ -136,7 +158,7 @@ function buildLines(opts: {
 	countdownLine: string | undefined;
 	passwordStatus: string | undefined;
 	width: number;
-}): string[] {
+}): OverlaySections {
 	const {
 		theme,
 		accent,
@@ -149,42 +171,31 @@ function buildLines(opts: {
 		width,
 	} = opts;
 	const inner = width - 4; // CHROME = 2 border + 2 padding
-	const lines: string[] = [];
-
-	// Title — wrap so a long reason/command isn't truncated by the frame.
-	for (const t of wrapTextWithAnsi(config.title, inner)) {
-		lines.push(theme.fg(accent, theme.bold(t)));
-	}
-
-	// Body — wrap each line so long commands wrap instead of getting cut off.
-	for (const line of config.body ?? []) {
-		const wrapped = line === "" ? [""] : wrapTextWithAnsi(line, inner);
-		for (const w of wrapped) lines.push(theme.fg("text", w));
-	}
-
-	// Divider after title/body
-	lines.push(theme.fg("dim", "─".repeat(inner)));
+	const header = [theme.fg(accent, theme.bold(config.title))];
+	const body = (config.body ?? []).map((line) => {
+		if (line.startsWith("Intent:")) return theme.fg("text", line.slice(7).trimStart());
+		if (line.startsWith("Command:")) return theme.fg("dim", line.slice(8).trimStart());
+		return theme.fg("text", line);
+	});
+	const footer = [theme.fg("dim", "─".repeat(inner))];
 
-	// Countdown
-	if (countdownLine !== undefined) lines.push(countdownLine);
+	if (countdownLine !== undefined) footer.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"));
+		footer.push(...selectList.render(inner));
+		footer.push("");
+		footer.push(theme.fg("dim", "↑↓ choose • ←→/PgUp/PgDn inspect • enter select • esc deny"));
 	} else {
 		const label = config.mode === "sudo" ? (config.passwordLabel ?? "Sudo password:") : "Password:";
-		lines.push(theme.fg("muted", label));
-		if (passwordStatus) lines.push(theme.fg("error", passwordStatus));
-		const inputLines = maskedInput.render(inner);
-		for (const l of inputLines) lines.push(l);
-		lines.push("");
-		lines.push(theme.fg("dim", "enter confirm • esc cancel"));
+		footer.push(theme.fg("muted", label));
+		if (passwordStatus) footer.push(theme.fg("error", passwordStatus));
+		footer.push(...maskedInput.render(inner));
+		footer.push("");
+		footer.push(theme.fg("dim", "←→/PgUp/PgDn inspect • enter confirm • esc cancel"));
 	}
 
-	return lines;
+	return { header, body, footer };
 }
 
 // ── Main ──────────────────────────────────────────────────────────────────────
@@ -225,13 +236,15 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 
 	return new Promise((resolve) => {
 		ui.custom<OverlayResult>(
-			(tui, theme, _kb, done) => {
+			(tui, theme, kb, done) => {
+				const pageKeybindings = asPageKeybindings(kb);
 				type Stage = "select" | "password";
 				let stage: Stage = "select";
 				let countdownLine: string | undefined;
 				let passwordStatus: string | undefined;
 				let passwordAttempts = 0;
 				let validatingPassword = false;
+				const pager = new ModalPager();
 
 				// Dead-man's-switch timer: counts down only while untouched. The
 				// first keypress cancels it (user is present → let them decide). If
@@ -267,14 +280,21 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 
 				// Arm the dead-man's switch (only when a timeout was requested).
 				if (timeoutMs > 0) {
-					countdownLine = theme.fg("dim", `auto-deny in ${remaining}s`);
+					const urgencyColor = (s: number): string =>
+						s <= 5 ? "error" : s <= 15 ? "warning" : "dim";
+					const countdownText = (s: number): string => {
+						const color = urgencyColor(s);
+						const text = `auto-deny in ${s}s`;
+						return s <= 5 ? theme.bold(theme.fg(color, text)) : theme.fg(color, text);
+					};
+					countdownLine = countdownText(remaining);
 					timer = setInterval(() => {
 						remaining -= 1;
 						if (remaining <= 0) {
 							finish({ action: "timeout" });
 							return;
 						}
-						countdownLine = theme.fg("dim", `auto-deny in ${remaining}s`);
+						countdownLine = countdownText(remaining);
 						tui.requestRender();
 					}, 1000);
 				}
@@ -327,7 +347,7 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 				return {
 					render: (w) => {
 						const mw = modalWidth(w);
-						const lines = buildLines({
+						const sections = buildSections({
 							theme,
 							accent,
 							config,
@@ -338,17 +358,29 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 							passwordStatus,
 							width: mw,
 						});
-						return frameLines({
+						const result = frameModal({
 							width: mw,
-							lines,
+							maxHeight: terminalModalHeight(tui.terminal?.rows),
+							minHeight: MIN_PERMISSION_MODAL_HEIGHT,
+							...sections,
+							bodyOffset: pager.bodyOffset,
 							color: (s) => theme.fg(accent, s),
 							bg: (s) => theme.bg("customMessageBg", s),
+							fg: (s) => theme.fg("text", s),
+							overflowLine: ({ page, totalPages }) =>
+								theme.fg("dim", `←→/PgUp/PgDn inspect • ${page}/${totalPages}`),
 						});
+						pager.sync(result);
+						return result.lines;
 					},
 					invalidate: () => {},
 					handleInput: (data) => {
 						cancelTimer(); // user is present — stop the auto-deny countdown
 						if (validatingPassword) return;
+						if (pager.handleInput(data, pageKeybindings, true)) {
+							tui.requestRender();
+							return;
+						}
 						if (stage === "select") selectList.handleInput(data);
 						else maskedInput.handleInput(data);
 						tui.requestRender();