@xynogen/pix-runtime 0.6.0 → 0.7.0

package/README.md

@@ -44,6 +44,12 @@ const timeoutMs = ioTimeoutMs();                    // shared network timeout
 const signal = ioTimeoutSignal(toolSignal);         // timeout + cancellation
 ```
 
+Set `pretty.maxRenderWidth` and `pretty.maxRenderHeight` in `~/.pi/agent/pix.json`,
+or change **Pretty → max modal width/height** with `/pix`. Values accept terminal
+percentages such as `"65%"`/`"80%"` or fixed columns/rows such as `96`/`20`.
+Percentage choices in `/pix` move in 5% steps. Width is the rendered frame width;
+height is the threshold where modal content starts paging.
+
 Set `io.timeoutSec` in `~/.pi/agent/pix.json`, or change **Network → timeout (sec)**
 with `/pix`. The default is 30 seconds. It applies to Pix network operations,
 including remote skills, web fetch/search/transcription, MCP requests and

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-runtime",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "Pix shared runtime — versioned pix.json config, atomic persistence, typed change events",
 	"type": "module",
 	"main": "src/index.ts",

package/src/pix-command.ts

@@ -21,7 +21,7 @@ import { collapseSection } from "./sections/collapse.ts";
 import { compactionSection } from "./sections/compaction.ts";
 import { gateSection } from "./sections/gate.ts";
 import { ioSection } from "./sections/io.ts";
-import { prettySection } from "./sections/pretty.ts";
+import { prettySection, type RenderSize } from "./sections/pretty.ts";
 
 interface SettingRow<T> {
 	section: string;
@@ -42,6 +42,15 @@ function formatTokens(tokens: number): string {
 	return tokens % 1_000_000 === 0 ? `${tokens / 1_000_000}M` : `${tokens / 1000}k`;
 }
 
+function parseRenderSize(value: string): RenderSize {
+	return value.endsWith("%") ? (value as `${number}%`) : Number.parseFloat(value);
+}
+
+function resolveRenderSize(limit: RenderSize, available: number): number {
+	if (typeof limit === "number") return Math.floor(limit);
+	return Math.floor((available * Number.parseFloat(limit)) / 100);
+}
+
 /** Parse a compact token label ("1M", "150k") back to an absolute count. */
 function parseTokens(label: string): number {
 	const raw = label.trim();
@@ -71,6 +80,58 @@ const SETTINGS: SettingRow<unknown>[] = [
 		read: (v) => v.lsStyle,
 		patch: (value) => ({ lsStyle: value as "grid" | "tree" }),
 	}),
+	row({
+		section: "Pretty",
+		label: "max modal width",
+		handle: prettySection,
+		values: [
+			"50%",
+			"55%",
+			"60%",
+			"65%",
+			"70%",
+			"75%",
+			"80%",
+			"85%",
+			"90%",
+			"95%",
+			"100%",
+			"72 cols",
+			"80 cols",
+			"88 cols",
+			"96 cols",
+			"104 cols",
+			"120 cols",
+		],
+		read: (v) =>
+			typeof v.maxRenderWidth === "number" ? `${v.maxRenderWidth} cols` : v.maxRenderWidth,
+		patch: (value) => ({ maxRenderWidth: parseRenderSize(value) }),
+	}),
+	row({
+		section: "Pretty",
+		label: "max modal height",
+		handle: prettySection,
+		values: [
+			"50%",
+			"55%",
+			"60%",
+			"65%",
+			"70%",
+			"75%",
+			"80%",
+			"85%",
+			"90%",
+			"95%",
+			"100%",
+			"12 rows",
+			"16 rows",
+			"20 rows",
+			"24 rows",
+		],
+		read: (v) =>
+			typeof v.maxRenderHeight === "number" ? `${v.maxRenderHeight} rows` : v.maxRenderHeight,
+		patch: (value) => ({ maxRenderHeight: parseRenderSize(value) }),
+	}),
 	row({
 		section: "Collapse",
 		label: "enabled",
@@ -154,7 +215,6 @@ export function registerPixCommand(pi: ExtensionAPI, runtime: PixRuntime): void
 				return;
 			}
 
-			const boxW = 52;
 			await ui.custom(
 				(
 					tui: { requestRender(): void; terminal?: { rows?: number } },
@@ -208,7 +268,7 @@ export function registerPixCommand(pi: ExtensionAPI, runtime: PixRuntime): void
 					};
 
 					return {
-						render: () => {
+						render: (width: number) => {
 							const labelW = Math.max(...SETTINGS.map((r) => r.label.length));
 							const body: string[] = [];
 							const settingBodyLines: number[] = [];
@@ -230,8 +290,11 @@ export function registerPixCommand(pi: ExtensionAPI, runtime: PixRuntime): void
 								body.push(`${cursor} ${label}  ${theme.fg(isDefault ? "dim" : "success", value)}`);
 							}
 							const result = frameModal({
-								width: boxW,
-								maxHeight: modalHeight(tui.terminal?.rows),
+								width,
+								maxHeight: modalHeight(
+									tui.terminal?.rows,
+									runtime.get(prettySection).maxRenderHeight,
+								),
 								header: [theme.fg("accent", theme.bold("  pix settings")), ""],
 								body,
 								footer: [
@@ -282,7 +345,18 @@ export function registerPixCommand(pi: ExtensionAPI, runtime: PixRuntime): void
 						},
 					};
 				},
-				{ overlay: true, overlayOptions: { anchor: "center", width: boxW, maxHeight: "80%" } },
+				{
+					overlay: true,
+					overlayOptions: () => {
+						const pretty = runtime.get(prettySection);
+						return {
+							anchor: "center",
+							width: pretty.maxRenderWidth,
+							maxHeight: pretty.maxRenderHeight,
+							margin: 2,
+						};
+					},
+				},
 			);
 		},
 	});
@@ -309,9 +383,9 @@ interface RuntimeModalResult {
 	maxBodyOffset: number;
 }
 
-function modalHeight(rows = 24): number {
+function modalHeight(rows = 24, limit: RenderSize = "80%"): number {
 	const safe = Number.isFinite(rows) ? Math.max(1, Math.floor(rows)) : 24;
-	return Math.max(1, Math.min(safe, Math.floor(safe * 0.8)));
+	return Math.max(1, Math.min(safe, resolveRenderSize(limit, safe)));
 }
 
 function pageBodyOffset(offset: number, size: number, max: number, direction: -1 | 1): number {

package/src/sections/index.ts

@@ -20,6 +20,7 @@ export {
 	type LsStyle,
 	type PrettyConfig,
 	prettySection,
+	type RenderSize,
 } from "./pretty.ts";
 
 import { collapseSection } from "./collapse.ts";

package/src/sections/pretty.ts

@@ -2,6 +2,7 @@ import { defineSection, enumOr, isObj, posNumOr } from "../schema.ts";
 
 export type IconMode = "nerd" | "unicode" | "ascii";
 export type LsStyle = "grid" | "tree";
+export type RenderSize = number | `${number}%`;
 
 export interface DiffConfig {
 	splitMinWidth: number;
@@ -11,6 +12,8 @@ export interface DiffConfig {
 export interface PrettyConfig {
 	icons: IconMode;
 	lsStyle: LsStyle;
+	maxRenderWidth: RenderSize;
+	maxRenderHeight: RenderSize;
 	maxPreviewLines: number;
 	maxRenderLines: number;
 	maxHighlightChars: number;
@@ -21,9 +24,20 @@ export interface PrettyConfig {
 const ICON_MODES: readonly IconMode[] = ["nerd", "unicode", "ascii"];
 const LS_STYLES: readonly LsStyle[] = ["grid", "tree"];
 
+function renderSizeOr(value: unknown, fallback: RenderSize): RenderSize {
+	if (typeof value === "number") return Number.isFinite(value) && value > 0 ? value : fallback;
+	if (typeof value !== "string") return fallback;
+	const match = value.match(/^(\d+(?:\.\d+)?)%$/);
+	if (!match) return fallback;
+	const percent = Number(match[1]);
+	return percent > 0 && percent <= 100 ? (value as `${number}%`) : fallback;
+}
+
 const DEFAULTS: Readonly<PrettyConfig> = {
 	icons: "nerd",
 	lsStyle: "grid",
+	maxRenderWidth: "65%",
+	maxRenderHeight: "80%",
 	maxPreviewLines: 80,
 	maxRenderLines: 150,
 	maxHighlightChars: 80_000,
@@ -40,6 +54,8 @@ export const prettySection = defineSection<"pretty", PrettyConfig>({
 		return {
 			icons: enumOr(raw.icons, ICON_MODES, DEFAULTS.icons),
 			lsStyle: enumOr(raw.lsStyle, LS_STYLES, DEFAULTS.lsStyle),
+			maxRenderWidth: renderSizeOr(raw.maxRenderWidth, DEFAULTS.maxRenderWidth),
+			maxRenderHeight: renderSizeOr(raw.maxRenderHeight, DEFAULTS.maxRenderHeight),
 			maxPreviewLines: posNumOr(raw.maxPreviewLines, DEFAULTS.maxPreviewLines),
 			maxRenderLines: posNumOr(raw.maxRenderLines, DEFAULTS.maxRenderLines),
 			maxHighlightChars: posNumOr(raw.maxHighlightChars, DEFAULTS.maxHighlightChars),