@xynogen/pix-pretty 1.18.3 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.18.3",
+	"version": "1.19.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/gate-overlay.test.ts

@@ -158,6 +158,7 @@ describe("showOverlay — confirm mode", () => {
 				title: "SSH FILE TRANSFER",
 				body: [
 					"Intent: Copy a release artifact",
+					"Command: scp app.tar.gz host:/tmp",
 					"Host: deploy@example.com",
 					"Direction: Download",
 					"From: /srv/releases/app.tar.gz",
@@ -170,6 +171,8 @@ describe("showOverlay — confirm mode", () => {
 			},
 		);
 		const joined = captured.join("\n");
+		expect(joined).toContain("<dim>Intent:</dim> <text>Copy a release artifact</text>");
+		expect(joined).toContain("<dim>Command:</dim> <dim>scp app.tar.gz host:/tmp</dim>");
 		expect(joined).toContain("<dim>Host:</dim> <accent>deploy@example.com</accent>");
 		expect(joined).toContain("<dim>Direction:</dim> <warning>Download</warning>");
 		expect(joined).toContain("<dim>From:</dim> <text>/srv/releases/app.tar.gz</text>");
@@ -178,6 +181,44 @@ describe("showOverlay — confirm mode", () => {
 		expect(joined).toContain("<dim>Auth:</dim> <success>SSH key (no password)</success>");
 	});
 
+	// Regression guard (readability fix, pix-pretty 1.18.4): Intent:/Command:
+	// lines must go through the label/value colour map — a <dim> label plus a
+	// semantic value — never a bare bright value with the label stripped off.
+	// Pre-1.18.4 they were sliced and dumped as bright <text> with no label,
+	// which was hard to read on the modal background. Command value must be <dim>.
+	test("Intent/Command body lines keep a dim label and never drop it", async () => {
+		const coloredTheme = {
+			fg: (color: string, text: string) => `<${color}>${text}</${color}>`,
+			bg: (_color: string, text: string) => text,
+			bold: (text: string) => text,
+		};
+		let captured: string[] = [];
+		await showOverlay(
+			makeUI(
+				(comp) => {
+					captured = comp.render(100);
+					comp.handleInput(ENTER);
+				},
+				undefined,
+				coloredTheme,
+			),
+			{
+				mode: "sudo",
+				title: "ROOT COMMAND REQUEST",
+				accent: "error",
+				body: ["Intent: install a package", "Command: apt install foo"],
+				timeoutMs: 0,
+			},
+		);
+		const joined = captured.join("\n");
+		// Command label + value both dim; intent value stays readable text but is
+		// always prefixed by a dim label (never a bare label-less value).
+		expect(joined).toContain("<dim>Command:</dim> <dim>apt install foo</dim>");
+		expect(joined).toContain("<dim>Intent:</dim> <text>install a package</text>");
+		// The pre-1.18.4 bug: label stripped, value dumped bright with no dim label.
+		expect(joined).not.toContain("<text>apt install foo</text>"); // command value is dim, not text
+	});
+
 	test("wraps a long body command instead of truncating it", async () => {
 		// A command far wider than any modal width — must survive in full, wrapped.
 		const longCmd = `echo ${"pix-gate-installed-or-linked ".repeat(8)}done`;

package/src/gate-overlay.ts

@@ -176,8 +176,6 @@ function buildSections(opts: {
 	const inner = width - 4; // CHROME = 2 border + 2 padding
 	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("text", line.slice(8).trimStart());
 		if (line.startsWith("Warning:")) return theme.fg("warning", line);
 		if (line.startsWith("(") && line.endsWith(")")) return theme.fg("muted", line);
 
@@ -186,6 +184,8 @@ function buildSections(opts: {
 		const label = line.slice(0, separator + 1);
 		const value = line.slice(separator + 1).trimStart();
 		const valueColors: Record<string, string> = {
+			"Intent:": "text",
+			"Command:": "dim",
 			"Host:": "accent",
 			"Direction:": "warning",
 			"From:": "text",

package/src/utils.test.ts

@@ -7,6 +7,7 @@ import {
 	fillToolBackground,
 	formatCollapsedToolRow,
 	formatJson,
+	frameToolResult,
 	hideCollapsedToolCall,
 	padIcon,
 	pluralize,
@@ -16,11 +17,13 @@ import {
 	sectionRule,
 	setResultDetails,
 	termW,
+	unframeToolResult,
 	viewportText,
 } from "./utils.js";
 
 class MockTextComponent {
 	private text = "";
+	invalidations = 0;
 
 	setText(value: string): void {
 		this.text = value;
@@ -30,7 +33,9 @@ class MockTextComponent {
 		return this.text.split("\n");
 	}
 
-	invalidate(): void {}
+	invalidate(): void {
+		this.invalidations++;
+	}
 }
 
 // Counting variant: records how often the inner component is re-fitted, so a
@@ -190,6 +195,60 @@ describe("termW", () => {
 	});
 });
 
+describe("frameToolResult", () => {
+	it("wraps a component at render width and forwards invalidation", () => {
+		const child = new MockTextComponent();
+		child.setText("result");
+		const theme: FgTheme = { fg: (key, text) => `[${key}]${text}[/${key}]` };
+		const framed = frameToolResult(child, theme, false);
+
+		expect(framed.render(8)).toEqual([
+			"[success]────────[/success]",
+			"result",
+			"[success]────────[/success]",
+		]);
+		framed.setText("updated");
+		expect(framed.render(8)[1]).toBe("updated");
+		framed.invalidate();
+		expect(child.invalidations).toBe(1);
+	});
+
+	it("unwraps a framed component when a result collapses", () => {
+		const child = new MockTextComponent();
+		child.setText("expanded");
+		const theme: FgTheme = { fg: (key, text) => `[${key}]${text}[/${key}]` };
+		const framed = frameToolResult(child, theme, false);
+		framed.setText("collapsed");
+
+		expect(unframeToolResult(framed)).toBe(child);
+		expect(unframeToolResult(framed).render(20)).toEqual(["collapsed"]);
+	});
+
+	it("uses error rules for failed results", () => {
+		const child = new MockTextComponent();
+		child.setText("failed");
+		const theme: FgTheme = { fg: (key, text) => `[${key}]${text}[/${key}]` };
+
+		expect(frameToolResult(child, theme, true).render(4)).toEqual([
+			"[error]────[/error]",
+			"failed",
+			"[error]────[/error]",
+		]);
+	});
+
+	it("reuses an existing frame instead of nesting rules on rerender", () => {
+		const child = new MockTextComponent();
+		child.setText("result");
+		const theme: FgTheme = { fg: (key, text) => `[${key}]${text}[/${key}]` };
+		const first = frameToolResult(child, theme, false);
+		const nextTheme: FgTheme = { fg: (key, text) => `<${key}>${text}</${key}>` };
+		const rerendered = frameToolResult(first, nextTheme, true);
+
+		expect(rerendered).toBe(first);
+		expect(rerendered.render(4)).toEqual(["<error>────</error>", "result", "<error>────</error>"]);
+	});
+});
+
 describe("ruleFrame", () => {
 	it("wraps body with a rule top and bottom, then footer below the close", () => {
 		const out = ruleFrame(["a", "b"], ["… +3 more"], 10);

package/src/utils.ts

@@ -73,6 +73,24 @@ type ViewportComponent = {
 	invalidate(): void;
 };
 
+type ResultComponent = ViewportComponent & {
+	handleInput?(data: string): void;
+	wantsKeyRelease?: boolean;
+};
+
+type FramableComponent = Partial<ResultComponent> & Partial<TextComponentLike>;
+type ResultFrameTheme = {
+	fg: (key: "success" | "error", text: string) => string;
+};
+
+const RESULT_FRAME = Symbol("pix.resultFrame");
+type FramedResultComponent = ResultComponent & {
+	[RESULT_FRAME]: {
+		component: FramableComponent;
+		update(theme: ResultFrameTheme, isError: boolean): void;
+	};
+};
+
 class ViewportText implements TextComponentLike, ViewportComponent {
 	private text = "";
 	// Pi re-renders every frame (spinner/streaming). Two-level cache:
@@ -526,6 +544,58 @@ export function sectionRule(line: string, theme: FgTheme, width: number): string
 	return theme.fg("muted", `${"─".repeat(lead)}${label}${"─".repeat(tail)}`);
 }
 
+/** Decorate any tool result component with status-colored top/bottom rules. */
+export function frameToolResult<T extends FramableComponent & { setText(value: string): void }>(
+	component: T,
+	theme: ResultFrameTheme,
+	isError: boolean,
+): ResultComponent & { setText(value: string): void; getText?: () => string };
+export function frameToolResult(
+	component: FramableComponent,
+	theme: ResultFrameTheme,
+	isError: boolean,
+): ResultComponent;
+export function frameToolResult(
+	component: FramableComponent,
+	theme: ResultFrameTheme,
+	isError: boolean,
+): ResultComponent {
+	const existing = component as Partial<FramedResultComponent>;
+	if (existing[RESULT_FRAME]) {
+		existing[RESULT_FRAME].update(theme, isError);
+		return component as ResultComponent;
+	}
+	let frameTheme = theme;
+	let failed = isError;
+	const framed: FramedResultComponent & Partial<TextComponentLike> = {
+		[RESULT_FRAME]: {
+			component,
+			update(nextTheme, nextError) {
+				frameTheme = nextTheme;
+				failed = nextError;
+			},
+		},
+		wantsKeyRelease: component.wantsKeyRelease,
+		render(width) {
+			const paint = (line: string) => frameTheme.fg(failed ? "error" : "success", line);
+			return ruleFrame(component.render?.(width) ?? [], [], width, paint);
+		},
+		invalidate() {
+			component.invalidate?.();
+		},
+		handleInput: component.handleInput ? (data) => component.handleInput?.(data) : undefined,
+	};
+	if (component.setText) framed.setText = (value) => component.setText?.(value);
+	if (component.getText) framed.getText = () => component.getText?.() ?? "";
+	return framed;
+}
+
+/** Remove the result frame while preserving its underlying renderer component. */
+export function unframeToolResult<T extends FramableComponent>(component: T): T {
+	const framed = component as Partial<FramedResultComponent>;
+	return (framed[RESULT_FRAME]?.component ?? component) as T;
+}
+
 /**
  * Frame tool output the way bash/read/sudo do: a top rule, the body lines, a
  * bottom rule, then any footer lines (e.g. `… +N more`) below the close. The