@xynogen/pix-pretty 1.16.1 → 1.17.0

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.1",
+	"version": "1.17.0",
 	"description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, diff rendering, and FFF search",
 	"type": "module",
 	"main": "src/index.ts",
@@ -60,7 +60,7 @@
 	},
 	"dependencies": {
 		"@xynogen/pix-data": "^0.4.3",
-		"@xynogen/pix-runtime": "^0.6.0",
+		"@xynogen/pix-runtime": "^0.7.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/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 {

package/src/utils.test.ts

@@ -35,12 +35,14 @@ class MockTextComponent {
 // regression that recomputes every frame (the pre-memo CPU bug) fails loudly.
 class CountingTextComponent {
 	static setCalls = 0;
+	static renderCalls = 0;
 	private text = "";
 	setText(value: string): void {
 		CountingTextComponent.setCalls++;
 		this.text = value;
 	}
 	render(): string[] {
+		CountingTextComponent.renderCalls++;
 		return this.text.split("\n");
 	}
 	invalidate(): void {}
@@ -99,6 +101,56 @@ describe("viewportText", () => {
 		text.render(20); // still cached
 		expect(CountingTextComponent.setCalls).toBe(1);
 	});
+
+	it("idle frames (same text+width) do not re-call the inner render", () => {
+		CountingTextComponent.renderCalls = 0;
+		const text = viewportText(CountingTextComponent);
+		text.setText("line one\nline two");
+		text.render(20);
+		text.render(20);
+		text.render(20);
+		// One inner render for the width; spinner ticks reuse the memoized output.
+		expect(CountingTextComponent.renderCalls).toBe(1);
+	});
+
+	it("re-calls inner render after content changes", () => {
+		CountingTextComponent.renderCalls = 0;
+		const text = viewportText(CountingTextComponent);
+		text.setText("first");
+		text.render(20);
+		text.setText("second"); // content changed → render output stale
+		text.render(20);
+		expect(CountingTextComponent.renderCalls).toBe(2);
+	});
+
+	it("invalidate() drops the render memo so a same-width frame recomputes (theme change)", () => {
+		CountingTextComponent.renderCalls = 0;
+		const text = viewportText(CountingTextComponent);
+		text.setText("body");
+		text.render(20);
+		text.render(20); // memo hit
+		expect(CountingTextComponent.renderCalls).toBe(1);
+		text.invalidate(); // theme/style changed → output stale even at same width
+		text.render(20); // must recompute, not serve pre-invalidate output
+		expect(CountingTextComponent.renderCalls).toBe(2);
+	});
+
+	it("streaming append reuses already-fitted lines and fits only the new tail", () => {
+		const text = viewportText(MockTextComponent);
+		text.setText("aaaaaaaaaa\nbbbbbbbbbb");
+		expect(text.render(5).map(plain)).toEqual(["aaaaa", "bbbbb"]);
+		// Append (streaming). Old lines fit identically; new line appears.
+		text.setText("aaaaaaaaaa\nbbbbbbbbbb\ncccccccccc");
+		expect(text.render(5).map(plain)).toEqual(["aaaaa", "bbbbb", "ccccc"]);
+	});
+
+	it("width change re-fits all lines (line cache is width-scoped, no stale serve)", () => {
+		const text = viewportText(MockTextComponent);
+		text.setText("abcdefghij");
+		expect(text.render(5).map(plain)).toEqual(["abcde"]);
+		// Must NOT serve the stale 5-wide fit for the same raw line at a new width.
+		expect(text.render(8).map(plain)).toEqual(["abcdefgh"]);
+	});
 });
 
 // Strip ANSI escapes so assertions test content, not color codes.

package/src/utils.ts

@@ -71,18 +71,33 @@ type ViewportComponent = {
 
 class ViewportText implements TextComponentLike, ViewportComponent {
 	private text = "";
-	// Pi re-renders every frame (spinner/streaming). Without this cache each
-	// frame re-split + re-truncated the full text AND re-setText'd the inner
-	// component (re-dirtying it), burning CPU on unchanged content.
+	// Pi re-renders every frame (spinner/streaming). Two-level cache:
+	//  1. per-line: `truncateToWidth` result keyed by raw line + width. Streaming
+	//     only appends to the tail, so already-fitted lines hit the cache and
+	//     only the new/changed lines pay the pi-tui width cost (was O(total
+	//     lines) per chunk, now O(new lines)).
+	//  2. per-blob: skip re-joining + re-setText'ing the inner component when
+	//     neither text nor width changed (idle frames, spinner ticks).
 	private fittedWidth = -1;
 	private fittedText = "";
+	private lineCache = new Map<string, string>();
+	private lineCacheWidth = -1;
+	// Render-output memo. The inner component's render is a pure function of
+	// (fittedText, width), so on an unchanged frame (spinner tick, idle) we skip
+	// calling into pi-tui AND skip the fallback split — otherwise both fired
+	// every single frame even when nothing changed. The returned array is shared
+	// by reference; pi-tui's render contract is read-only (the host joins/prints
+	// the lines, never mutates), so we don't defensively copy per frame.
+	private rendered: string[] = [];
+	private renderedWidth = -1;
 
 	constructor(private readonly component: TextComponentLike) {}
 
 	setText(value: string): void {
 		if (value === this.text) return;
 		this.text = value;
-		this.fittedWidth = -1; // invalidate memo
+		this.fittedWidth = -1; // invalidate blob memo (line cache stays valid)
+		this.renderedWidth = -1; // invalidate render-output memo
 	}
 
 	getText(): string {
@@ -91,17 +106,45 @@ class ViewportText implements TextComponentLike, ViewportComponent {
 
 	render(width: number): string[] {
 		if (width !== this.fittedWidth) {
-			this.fittedText = this.text
-				.split("\n")
-				.map((line) => truncateToWidth(line, width, ""))
+			if (width !== this.lineCacheWidth) {
+				this.lineCache.clear(); // width changed → every line must re-fit
+				this.lineCacheWidth = width;
+			}
+			const cache = this.lineCache;
+			const lines = this.text.split("\n");
+			// Bound the cache so a long streaming log can't grow it without limit.
+			// The working set is the visible line count; a generous multiple keeps
+			// steady-state hits while capping worst-case memory. Reset when exceeded
+			// rather than LRU-evicting — simpler, and a width-stable frame refills it.
+			if (cache.size > 4 * lines.length + 256) cache.clear();
+			this.fittedText = lines
+				.map((line) => {
+					let fitted = cache.get(line);
+					if (fitted === undefined) {
+						fitted = truncateToWidth(line, width, "");
+						cache.set(line, fitted);
+					}
+					return fitted;
+				})
 				.join("\n");
 			this.fittedWidth = width;
+			this.renderedWidth = -1; // fitted text rebuilt → render output is stale
 			this.component.setText(this.fittedText);
 		}
-		return this.component.render?.(width) ?? this.fittedText.split("\n");
+		if (width !== this.renderedWidth) {
+			this.rendered = this.component.render?.(width) ?? this.fittedText.split("\n");
+			this.renderedWidth = width;
+		}
+		return this.rendered;
 	}
 
 	invalidate(): void {
+		// invalidate = "output stale for reasons other than (text,width)" — theme /
+		// style change. Fitting is pure on (text,width) so fittedText/lineCache stay
+		// valid, but the RENDER output (colors) may differ, so drop the render memo;
+		// otherwise a same-width frame after invalidate would serve pre-invalidate
+		// output forever.
+		this.renderedWidth = -1;
 		this.component.invalidate?.();
 	}
 }