@xynogen/pix-pretty 1.18.2 → 1.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.18.2",
+	"version": "1.18.4",
 	"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

@@ -97,7 +97,7 @@ export function confirmOverlay(ui: ConfirmUI, opts: ConfirmOptions): Promise<boo
 					const updateCountdown = () => {
 						const remaining = Math.max(0, Math.ceil((deadlineMs - Date.now()) / SECOND_MS));
 						countdownLine =
-							theme.fg("dim", "Auto-cancel in ") +
+							theme.fg("muted", "Auto-cancel in ") +
 							theme.fg(remaining <= COUNTDOWN_WARN_S ? accent : "muted", `${remaining}s`);
 					};
 					updateCountdown();
@@ -121,12 +121,12 @@ export function confirmOverlay(ui: ConfirmUI, opts: ConfirmOptions): Promise<boo
 					render: (w: number) => {
 						const mw = modalWidth(w);
 						const inner = mw - 4;
-						const footer = [theme.fg("dim", "─".repeat(inner))];
+						const footer = [theme.fg("muted", "─".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"),
+							theme.fg("muted", "↑↓ choose • ←→/PgUp/PgDn inspect • enter select • esc cancel"),
 						);
 
 						const result = frameModal({
@@ -141,7 +141,7 @@ export function confirmOverlay(ui: ConfirmUI, opts: ConfirmOptions): Promise<boo
 							bg: (s) => theme.bg("customMessageBg", s),
 							fg: (s) => theme.fg("text", s),
 							overflowLine: ({ page, totalPages }) =>
-								theme.fg("dim", `←→/PgUp/PgDn inspect • ${page}/${totalPages}`),
+								theme.fg("muted", `←→/PgUp/PgDn inspect • ${page}/${totalPages}`),
 						});
 						pager.sync(result);
 						return result.lines;

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,16 +176,16 @@ 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("dim", line.slice(8).trimStart());
 		if (line.startsWith("Warning:")) return theme.fg("warning", line);
-		if (line.startsWith("(") && line.endsWith(")")) return theme.fg("dim", line);
+		if (line.startsWith("(") && line.endsWith(")")) return theme.fg("muted", line);
 
 		const separator = line.indexOf(":");
 		if (separator < 1) return theme.fg("text", line);
 		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",
@@ -198,7 +198,7 @@ function buildSections(opts: {
 			? `${theme.fg("dim", label)} ${theme.fg(valueColor, value)}`
 			: theme.fg("text", line);
 	});
-	const footer = [theme.fg("dim", "─".repeat(inner))];
+	const footer = [theme.fg("muted", "─".repeat(inner))];
 
 	if (countdownLine !== undefined) footer.push(countdownLine);
 
@@ -206,14 +206,14 @@ function buildSections(opts: {
 	if (stage === "select") {
 		footer.push(...selectList.render(inner));
 		footer.push("");
-		footer.push(theme.fg("dim", "↑↓ choose • ←→/PgUp/PgDn inspect • enter select • esc deny"));
+		footer.push(theme.fg("muted", "↑↓ choose • ←→/PgUp/PgDn inspect • enter select • esc deny"));
 	} else {
 		const label = config.mode === "sudo" ? (config.passwordLabel ?? "Sudo password:") : "Password:";
-		footer.push(theme.fg("muted", label));
+		footer.push(theme.fg("dim", 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"));
+		footer.push(theme.fg("muted", "←→/PgUp/PgDn inspect • enter confirm • esc cancel"));
 	}
 
 	return { header, body, footer };
@@ -302,7 +302,7 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 				// Arm the dead-man's switch (only when a timeout was requested).
 				if (timeoutMs > 0) {
 					const urgencyColor = (s: number): string =>
-						s <= 5 ? "error" : s <= 15 ? "warning" : "dim";
+						s <= 5 ? "error" : s <= 15 ? "warning" : "muted";
 					const countdownText = (s: number): string => {
 						const color = urgencyColor(s);
 						const text = `auto-deny in ${s}s`;
@@ -389,7 +389,7 @@ export function showOverlay(ui: OverlayUI, config: OverlayConfig): Promise<Overl
 							bg: (s) => theme.bg("customMessageBg", s),
 							fg: (s) => theme.fg("text", s),
 							overflowLine: ({ page, totalPages }) =>
-								theme.fg("dim", `←→/PgUp/PgDn inspect • ${page}/${totalPages}`),
+								theme.fg("muted", `←→/PgUp/PgDn inspect • ${page}/${totalPages}`),
 						});
 						pager.sync(result);
 						return result.lines;

package/src/modal-frame.ts

@@ -546,14 +546,14 @@ interface FgTheme {
 
 /**
  * Canonical SelectList theme for interactive overlays.
- * accent = active/selected, muted = descriptions, dim = scroll/hints, warning = no-match.
+ * accent = active/selected, dim = descriptions, muted = scroll/hints, warning = no-match.
  */
 export function selectListTheme(theme: FgTheme, accent = "accent"): SelectListThemeConfig {
 	return {
 		selectedPrefix: (t) => theme.fg(accent, t),
 		selectedText: (t) => theme.fg(accent, t),
-		description: (t) => theme.fg("muted", t),
-		scrollInfo: (t) => theme.fg("dim", t),
+		description: (t) => theme.fg("dim", t),
+		scrollInfo: (t) => theme.fg("muted", t),
 		noMatch: (t) => theme.fg("warning", t),
 	};
 }

package/src/progress.ts

@@ -92,7 +92,7 @@ export function openProgress(ui: ProgressUI, title: string, accent = "accent"):
 						maxHeight: terminalModalHeight(tui.terminal?.rows),
 						minHeight: MIN_MODAL_HEIGHT,
 						header: [theme.fg(accent, theme.bold(title))],
-						body: [`${theme.fg(accent, SPINNER[frame] ?? "")} ${theme.fg("muted", labelValue)}`],
+						body: [`${theme.fg(accent, SPINNER[frame] ?? "")} ${theme.fg("dim", labelValue)}`],
 						color: (s) => theme.fg(accent, s),
 						bg: (s) => theme.bg("customMessageBg", s),
 					}).lines;

package/src/utils.test.ts

@@ -300,6 +300,16 @@ describe("formatJson", () => {
 describe("collapsed tool rows", () => {
 	const rowTheme = { fg: (_key: string, text: string) => text, bold: (text: string) => text };
 
+	it("uses dim for the target and muted for tertiary metadata", () => {
+		const taggedTheme = {
+			fg: (key: string, text: string) => `<${key}>${text}</${key}>`,
+			bold: (text: string) => text,
+		};
+		expect(formatCollapsedToolRow(taggedTheme, "read", "src/a.ts", "12 lines")).toContain(
+			"<dim>src/a.ts</dim> <muted>·</muted> <muted>12 lines</muted>",
+		);
+	});
+
 	it("renders a consistent status, tool, target, and metadata row", () => {
 		// The status marker is width-normalized to 2 cells (padIcon) so wide glyphs
 		// align with narrow ones; a 1-cell `✓` therefore carries one pad space.

package/src/utils.ts

@@ -293,8 +293,8 @@ export function formatCollapsedToolRow(
 	const icon = padIcon(COLLAPSED_TOOL_GLYPH[status]);
 	const parts = [
 		`${theme.fg(status, icon)} ${theme.fg("toolTitle", theme.bold(tool))}`,
-		target ? theme.fg("muted", target) : "",
-		meta ? `${theme.fg("dim", "·")} ${theme.fg("dim", meta)}` : "",
+		target ? theme.fg("dim", target) : "",
+		meta ? `${theme.fg("muted", "·")} ${theme.fg("muted", meta)}` : "",
 	].filter(Boolean);
 	return parts.join(" ");
 }
@@ -406,7 +406,7 @@ export function renderDimPreview(
 	const header = opts.header ? `  ${theme.fg("dim", opts.header)}` : undefined;
 	const overflow =
 		lines.length > maxLines
-			? `  ${theme.fg("dim", `… ${pluralize(lines.length - maxLines, "more line")}`)}`
+			? `  ${theme.fg("muted", `… ${pluralize(lines.length - maxLines, "more line")}`)}`
 			: undefined;
 
 	if (opts.frame) {