@xynogen/pix-pretty 1.16.2 → 1.17.2

package/README.md

@@ -74,6 +74,8 @@ Configuration is read from **`~/.pi/agent/pix.json`** (the unified config file o
     "icons": "nerd",          // nerd | unicode | ascii
     "maxPreviewLines": 80,
     "maxRenderLines": 150,
+    "maxRenderWidth": "65%",  // modal frame width; percentage or columns
+    "maxRenderHeight": "80%", // pagination threshold; percentage or rows
     "maxHighlightChars": 80000,
     "cacheLimit": 128,
     "diff": {
@@ -84,7 +86,7 @@ Configuration is read from **`~/.pi/agent/pix.json`** (the unified config file o
 }
 ```
 
-Syntax highlighting, diffs, and tool surfaces use the active Pi theme. Color overrides do not live in `pix.json`.
+Syntax highlighting, diffs, and tool surfaces use the active Pi theme. Color overrides do not live in `pix.json`. `/pix` exposes modal width and height under **Pretty**; percentage choices move in 5% steps.
 
 ### Environment Variables (override `pix.json`)
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.16.2",
+	"version": "1.17.2",
 	"description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, diff rendering, and FFF search",
 	"type": "module",
 	"main": "src/index.ts",
@@ -59,8 +59,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@xynogen/pix-data": "^0.4.3",
-		"@xynogen/pix-runtime": "^0.6.0",
+		"@xynogen/pix-runtime": "^0.8.0",
 		"chalk": "^4.1.2",
 		"cli-highlight": "^2.1.11",
 		"@ff-labs/fff-node": "^0.5.2",

package/src/confirm.ts

@@ -10,6 +10,7 @@ import {
 	frameModal,
 	MIN_PERMISSION_MODAL_HEIGHT,
 	ModalPager,
+	modalOverlayOptions,
 	modalWidth,
 	selectListTheme,
 	terminalModalHeight,
@@ -37,7 +38,7 @@ export interface ConfirmUI {
 			kb: KeybindingsManager,
 			done: (v: T) => void,
 		) => CustomComponent,
-		opts?: { overlay?: boolean; overlayOptions?: { maxHeight?: number | `${number}%` } },
+		opts?: { overlay?: boolean; overlayOptions?: ReturnType<typeof modalOverlayOptions> },
 	): Promise<T | undefined>;
 }
 
@@ -156,7 +157,7 @@ export function confirmOverlay(ui: ConfirmUI, opts: ConfirmOptions): Promise<boo
 					},
 				};
 			},
-			{ overlay: true, overlayOptions: { maxHeight: "80%" } },
+			{ overlay: true, overlayOptions: modalOverlayOptions() },
 		).then((result) => {
 			if (timer !== undefined) clearTimeout(timer);
 			resolve(result ?? false);

package/src/gate-overlay.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, jest, test } from "bun:test";
 import { type OverlayUI, showOverlay } from "./gate-overlay.ts";
+import { modalOverlayOptions } from "./modal-frame.ts";
 
 // ── Mock host ─────────────────────────────────────────────────────────────────
 //
@@ -60,7 +61,7 @@ const ENTER = "\r";
 const DOWN = "\x1b[B";
 
 describe("showOverlay — confirm mode", () => {
-	test("caps overlay at 80% of terminal height", async () => {
+	test("uses configured global overlay bounds", async () => {
 		let options: unknown;
 		await showOverlay(
 			makeUI(
@@ -71,7 +72,7 @@ describe("showOverlay — confirm mode", () => {
 			),
 			{ mode: "confirm", title: "T" },
 		);
-		expect(options).toEqual({ overlay: true, overlayOptions: { maxHeight: "80%" } });
+		expect(options).toEqual({ overlay: true, overlayOptions: modalOverlayOptions() });
 	});
 
 	test("selecting the approve choice (first) returns approved", async () => {

package/src/gate-overlay.ts

@@ -2,8 +2,10 @@
  * pix-pretty/gate-overlay — shared permission dialog component.
  *
  * One component, two modes:
- *   "confirm" — SelectList only. Used by pix-gate for command gating.
- *   "sudo"    — SelectList → masked password input. Used by pix-sudo.
+ *   "confirm" — SelectList only. Used by pix-gate (command gating) and pix-ssh
+ *               (host confirm when no password is missing).
+ *   "sudo"    — SelectList → masked password input. Used by pix-sudo and pix-ssh
+ *               (SSH login + remote sudo password entry).
  *
  * Both modes share: rounded modal frame (╭─╮╰─╯), solid bg, accent border,
  * title, body lines, optional countdown. Same visual style as pix-ask.
@@ -11,7 +13,7 @@
  * Design goals:
  *   - Pure function — no side effects, no global state.
  *   - Fully unit-testable: inject a mock `ui` to drive inputs deterministically.
- *   - Single source of truth for the overlay look across pix-gate and pix-sudo.
+ *   - Single source of truth for the overlay look across pix-gate, pix-sudo, and pix-ssh.
  */
 
 import { Input, type SelectItem, SelectList } from "@earendil-works/pi-tui";
@@ -20,6 +22,7 @@ import {
 	MIN_PERMISSION_MODAL_HEIGHT,
 	type ModalPageKeybindings,
 	ModalPager,
+	modalOverlayOptions,
 	modalWidth,
 	selectListTheme,
 	terminalModalHeight,
@@ -109,7 +112,7 @@ export interface OverlayUI {
 			kb: unknown,
 			done: (v: T) => void,
 		) => OverlayComponent,
-		opts?: { overlay?: boolean; overlayOptions?: { maxHeight?: number | `${number}%` } },
+		opts?: { overlay?: boolean; overlayOptions?: ReturnType<typeof modalOverlayOptions> },
 	): Promise<T | undefined>;
 }
 
@@ -387,7 +390,7 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 					},
 				};
 			},
-			{ overlay: true, overlayOptions: { maxHeight: "80%" } },
+			{ overlay: true, overlayOptions: modalOverlayOptions() },
 		).then((result) => {
 			resolve(result ?? { action: "denied" });
 		});

package/src/index.ts

@@ -8,13 +8,15 @@
  * UI features (paste chips, thinking blocks) live in pix-display.
  */
 
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { registerFffCommands } from "./commands/fff.js";
 import { fffState } from "./fff.js";
 import { clearHighlightCache } from "./highlight.js";
 import { initIconMode } from "./icon-persist.js";
 import type { PiPrettyApi } from "./types.js";
 
-export default function piPrettyExtension(pi: PiPrettyApi): void {
+export default function piPrettyExtension(pi: ExtensionAPI): void {
+	const prettyPi = pi as unknown as PiPrettyApi;
 	clearHighlightCache();
 
 	// ── Icon mode ───────────────────────────────────────────
@@ -25,5 +27,5 @@ export default function piPrettyExtension(pi: PiPrettyApi): void {
 	// ── FFF slash commands ──────────────────────────────────────────────
 	// fffState is a module-level singleton shared with pix-grep/pix-find.
 	// Commands become available once pix-grep initialises the finder.
-	registerFffCommands(pi, fffState);
+	registerFffCommands(prettyPi, fffState);
 }

package/src/modal-frame.test.ts

@@ -27,8 +27,10 @@ function render(offset = 0): ModalFrameResult {
 	});
 }
 
-test("modalHeight uses 80% without exceeding the terminal", () => {
+test("modalHeight resolves configured percentages and rows without exceeding the terminal", () => {
 	expect(modalHeight(40)).toBe(32);
+	expect(modalHeight(40, "50%")).toBe(20);
+	expect(modalHeight(40, 12)).toBe(12);
 	expect(modalHeight(10)).toBe(8);
 	expect(modalHeight(1)).toBe(1);
 });
@@ -38,12 +40,14 @@ test("modalHeight is defensive about junk row counts", () => {
 	expect(modalHeight(Number.POSITIVE_INFINITY)).toBe(19);
 	expect(modalHeight(0)).toBe(1);
 	expect(modalHeight(-5)).toBe(1);
-	expect(modalHeight(40, 100)).toBe(40);
+	expect(modalHeight(40, "100%")).toBe(40);
 });
 
-test("modalWidth never exceeds the available render width", () => {
-	expect(modalWidth(200)).toBe(96);
-	expect(modalWidth(50)).toBe(46);
+test("modalWidth resolves configured percentages and columns without exceeding available width", () => {
+	expect(modalWidth(200)).toBe(200);
+	expect(modalWidth(200, "50%")).toBe(100);
+	expect(modalWidth(200, 88)).toBe(88);
+	expect(modalWidth(50)).toBe(50);
 	expect(modalWidth(10)).toBe(10);
 	expect(modalWidth(1)).toBe(1);
 });

package/src/modal-frame.ts

@@ -16,6 +16,8 @@ import {
 	visibleWidth,
 	wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
+import { config } from "@xynogen/pix-runtime/config";
+import { prettySection, type RenderSize } from "@xynogen/pix-runtime/sections";
 
 export { truncateToWidth, visibleWidth, wrapTextWithAnsi };
 
@@ -24,18 +26,36 @@ export { truncateToWidth, visibleWidth, wrapTextWithAnsi };
 // ── Constants ─────────────────────────────────────────────────────────────────
 
 const MIN_WIDTH = 40;
-const MAX_WIDTH = 96;
-const MARGIN = 4;
 /** 2 border cols + 2 padding spaces */
 const CHROME = 4;
 
 // ── Width ─────────────────────────────────────────────────────────────────────
 
-/** Prefer a 40–96 column modal without exceeding the available render width. */
-export function modalWidth(termWidth: number): number {
+function resolveRenderSize(limit: RenderSize, available: number): number {
+	if (typeof limit === "number") return Math.floor(limit);
+	return Math.floor((available * Number.parseFloat(limit)) / 100);
+}
+
+/** Resolve modal width without exceeding available render width. */
+export function modalWidth(termWidth: number, limit: RenderSize = "100%"): number {
 	const available = Number.isFinite(termWidth) ? Math.max(1, Math.floor(termWidth)) : MIN_WIDTH;
-	const preferred = Math.max(MIN_WIDTH, available - MARGIN);
-	return Math.min(MAX_WIDTH, available, preferred);
+	return Math.max(1, Math.min(available, resolveRenderSize(limit, available)));
+}
+
+/** Native overlay options matching shared modal size contract. */
+export function modalOverlayOptions(): {
+	anchor: "center";
+	width: RenderSize;
+	maxHeight: RenderSize;
+	margin: 2;
+} {
+	const pretty = config(prettySection);
+	return {
+		anchor: "center",
+		width: pretty.maxRenderWidth,
+		maxHeight: pretty.maxRenderHeight,
+		margin: 2,
+	};
 }
 
 // ── Frame ─────────────────────────────────────────────────────────────────────
@@ -185,25 +205,26 @@ export function frameLines(opts: FrameOptions): string[] {
 
 // ── Height ────────────────────────────────────────────────────────────────────
 
-export const DEFAULT_MODAL_HEIGHT_PERCENT = 80;
 /** Fail-closed floor for ordinary overlays. Compare against modalHeight(), not raw rows. */
 export const MIN_MODAL_HEIGHT = 6;
 /** Fail-closed floor for permission overlays. Compare against modalHeight(), not raw rows. */
 export const MIN_PERMISSION_MODAL_HEIGHT = 12;
 
-/** Rows a modal may occupy: `percent` of the terminal, never more than it has. */
-export function modalHeight(terminalRows: number, percent = DEFAULT_MODAL_HEIGHT_PERCENT): number {
+/** Rows a modal may occupy before paging, never more than terminal has. */
+export function modalHeight(
+	terminalRows: number,
+	limit: RenderSize = config(prettySection).maxRenderHeight,
+): number {
 	const rows = Number.isFinite(terminalRows) ? Math.max(1, Math.floor(terminalRows)) : 24;
-	const ratio = Math.min(100, Math.max(1, percent)) / 100;
-	return Math.max(1, Math.min(rows, Math.floor(rows * ratio)));
+	return Math.max(1, Math.min(rows, resolveRenderSize(limit, rows)));
 }
 
-/** Current modal budget. Pass host TUI rows when available; stdout is the fallback. */
+/** Current modal budget. Pass host TUI rows when available; stdout is fallback. */
 export function terminalModalHeight(
 	terminalRows = process.stdout.rows ?? 24,
-	percent = DEFAULT_MODAL_HEIGHT_PERCENT,
+	limit: RenderSize = config(prettySection).maxRenderHeight,
 ): number {
-	return modalHeight(terminalRows, percent);
+	return modalHeight(terminalRows, limit);
 }
 
 /** Rows available for variable body content: total − borders − pinned rows. */

package/src/progress.ts

@@ -13,7 +13,13 @@
  *   p.close();                             // releases input, removes overlay
  */
 
-import { frameModal, MIN_MODAL_HEIGHT, modalWidth, terminalModalHeight } from "./modal-frame.js";
+import {
+	frameModal,
+	MIN_MODAL_HEIGHT,
+	modalOverlayOptions,
+	modalWidth,
+	terminalModalHeight,
+} from "./modal-frame.js";
 import { SPINNER } from "./widget-format.js";
 
 interface ProgressTheme {
@@ -36,7 +42,7 @@ export interface ProgressUI {
 			kb: unknown,
 			done: (v: T) => void,
 		) => ProgressComponent,
-		opts?: { overlay?: boolean; overlayOptions?: { maxHeight?: number | `${number}%` } },
+		opts?: { overlay?: boolean; overlayOptions?: ReturnType<typeof modalOverlayOptions> },
 	): Promise<T | undefined>;
 }
 
@@ -97,7 +103,7 @@ export function openProgress(ui: ProgressUI, title: string, accent = "accent"):
 				handleInput: () => {},
 			};
 		},
-		{ overlay: true, overlayOptions: { maxHeight: "80%" } },
+		{ overlay: true, overlayOptions: modalOverlayOptions() },
 	);
 
 	return {