@xynogen/pix-pretty 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.10.0",
+	"version": "1.11.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/config.ts

@@ -20,6 +20,15 @@ const pc = config(prettySection);
 
 export const MAX_HL_CHARS = pixOrEnvInt("PRETTY_MAX_HL_CHARS", pc.maxHighlightChars, 80_000);
 
+// Per-LINE guard. MAX_HL_CHARS caps the whole block, but cli-highlight's
+// highlight.js tokenizer backtracks catastrophically on a single very long
+// line (a multi-KB JSON string value, a minified one-liner) and freezes the
+// render thread. JSON can't be hard-wrapped without splitting values mid-token
+// (which breaks highlighting), so a block containing any line past this width
+// is returned plain instead. ponytail: fixed threshold; make it a pix.json knob
+// only if a real file legitimately needs highlighted lines wider than this.
+export const MAX_HL_LINE_CHARS = envInt("PRETTY_MAX_HL_LINE_CHARS", 2_000);
+
 export const MAX_PREVIEW_LINES = pixOrEnvInt("PRETTY_MAX_PREVIEW_LINES", pc.maxPreviewLines, 80);
 
 export const CACHE_LIMIT = pixOrEnvInt("PRETTY_CACHE_LIMIT", pc.cacheLimit, 128);

package/src/highlight.test.ts

@@ -23,4 +23,14 @@ describe("active-theme syntax highlighting", () => {
 		await hlBlock("const value = 1", "typescript", theme("30;40;50"));
 		expect(_cache.size).toBe(2);
 	});
+
+	test("bails to plain (never highlights) when any line exceeds the per-line guard", async () => {
+		// Regression: a single multi-KB JSON string value made cli-highlight's
+		// tokenizer backtrack and froze the render thread. The guard returns the
+		// block unhighlighted (no ANSI, not cached) instead of tokenizing it.
+		const mega = JSON.stringify({ blurb: "x".repeat(5000) });
+		const out = await hlBlock(mega, "json", theme("10;20;30"));
+		expect(out.join("\n")).toBe(mega); // untouched, no ANSI escapes injected
+		expect(_cache.size).toBe(0); // not cached — it never went through highlight()
+	});
 });

package/src/highlight.ts

@@ -1,5 +1,5 @@
 import { normalizeShikiContrast } from "./ansi.js";
-import { CACHE_LIMIT, MAX_HL_CHARS } from "./config.js";
+import { CACHE_LIMIT, MAX_HL_CHARS, MAX_HL_LINE_CHARS } from "./config.js";
 import type { BundledLanguage, FgTheme } from "./types.js";
 
 // Engine: cli-highlight (highlight.js-backed, synchronous ANSI output).
@@ -139,6 +139,13 @@ export async function hlBlock(
 ): Promise<string[]> {
 	if (!code) return [""];
 	if (!language || code.length > MAX_HL_CHARS) return code.split("\n");
+	// A single mega-line makes highlight.js backtrack catastrophically and freezes
+	// the render thread — bail to plain before it reaches cli-highlight. Cheap
+	// scan: split is already needed for the plain fallback and the cache miss path.
+	const rawLines = code.split("\n");
+	for (const line of rawLines) {
+		if (line.length > MAX_HL_LINE_CHARS) return rawLines;
+	}
 
 	const hljsLang = toHljsLang(language);
 	if (!hljsLang) return code.split("\n");

package/src/utils.test.ts

@@ -4,10 +4,12 @@ import { MAX_PREVIEW_LINES } from "./config.js";
 import type { FgTheme } from "./types.js";
 import {
 	formatCollapsedToolRow,
+	formatJson,
 	hideCollapsedToolCall,
 	pluralize,
 	renderCollapsedToolRow,
 	renderDimPreview,
+	ruleFrame,
 	setResultDetails,
 } from "./utils.js";
 
@@ -17,6 +19,23 @@ function plain(text: string): string {
 	return text.replace(ANSI, "");
 }
 
+describe("ruleFrame", () => {
+	it("wraps body with a rule top and bottom, then footer below the close", () => {
+		const out = ruleFrame(["a", "b"], ["… +3 more"], 10);
+		expect(out).toHaveLength(5);
+		expect(plain(out[0]!)).toBe("─".repeat(10)); // top rule
+		expect(out.slice(1, 3)).toEqual(["a", "b"]); // body
+		expect(plain(out[3]!)).toBe("─".repeat(10)); // bottom rule closes the block
+		expect(plain(out[4]!)).toBe("… +3 more"); // footer after the close
+	});
+
+	it("closes the block even with no footer", () => {
+		const out = ruleFrame(["only"], [], 4);
+		expect(plain(out[0]!)).toBe("────");
+		expect(plain(out.at(-1)!)).toBe("────");
+	});
+});
+
 // Minimal theme: fg() passes text through untouched.
 const theme: FgTheme = { fg: (_key, text) => text };
 
@@ -36,6 +55,55 @@ describe("pluralize", () => {
 	});
 });
 
+describe("formatJson", () => {
+	it("reindents a JSON string into a multiline block", () => {
+		expect(formatJson('{"a":1,"b":2}')).toBe('{\n  "a": 1,\n  "b": 2\n}');
+	});
+
+	it("reindents an object value", () => {
+		expect(formatJson({ a: 1 })).toBe('{\n  "a": 1\n}');
+	});
+
+	it("falls back to the raw string for non-JSON input", () => {
+		expect(formatJson("not json")).toBe("not json");
+	});
+
+	it("reindenting a mega JSON one-liner breaks it into short, still-valid lines", () => {
+		// A JSON one-liner is the pathological render case. Reindenting alone splits
+		// it into short lines; it must NOT be hard-wrapped (that would split string
+		// values mid-token) so the block stays valid JSON for syntax highlighting.
+		const obj = { results: Array.from({ length: 300 }, (_, i) => ({ i, name: `item-${i}` })) };
+		const mega = JSON.stringify(obj); // one long line
+		const out = formatJson(mega, { wrapWidth: 80, maxLines: 9999 });
+		expect(out.split("\n").length).toBeGreaterThan(300); // broken into many lines
+		expect(() => JSON.parse(out)).not.toThrow(); // still valid JSON → highlightable
+	});
+
+	it("hard-wraps a NON-JSON mega-line but leaves JSON untouched", () => {
+		// A genuine non-JSON one-liner (multi-KB plain string) still gets wrapped so
+		// the TUI never measures a single huge line.
+		const plain = "x".repeat(7806); // not JSON
+		const wrapped = formatJson(plain, { wrapWidth: 80, maxLines: 9999 });
+		const lines = wrapped.split("\n");
+		expect(Math.max(...lines.map((l) => l.length))).toBeLessThanOrEqual(80);
+		expect(wrapped.replace(/\n/g, "").length).toBe(plain.length); // lossless
+	});
+
+	it("caps line count with a `+N more` footer", () => {
+		const obj = Object.fromEntries(Array.from({ length: 200 }, (_, i) => [`k${i}`, i]));
+		const out = formatJson(obj, { maxLines: 10 });
+		const lines = out.split("\n");
+		expect(lines.length).toBe(11); // 10 + footer
+		expect(lines.at(-1)).toMatch(/^… \+\d+ more$/);
+	});
+
+	it("applies a hard char ceiling as a last-resort guard", () => {
+		const out = formatJson({ blob: "y".repeat(5000) }, { maxChars: 100, maxLines: 999 });
+		expect(out.length).toBeLessThanOrEqual(100);
+		expect(out.endsWith("…")).toBe(true);
+	});
+});
+
 describe("collapsed tool rows", () => {
 	const rowTheme = { fg: (_key: string, text: string) => text, bold: (text: string) => text };
 
@@ -119,6 +187,24 @@ describe("renderDimPreview", () => {
 		expect(out).toContain("body");
 	});
 
+	it("frames the body with a rule top and bottom, header above the top rule", () => {
+		const out = plain(renderDimPreview("a\nb", theme, { frame: true, header: "2 files" }));
+		const lines = out.split("\n");
+		// header, top rule, a, b, bottom rule
+		expect(lines[0]).toContain("2 files");
+		expect(lines[1]).toMatch(/^─+$/); // top rule
+		expect(lines.at(-1)).toMatch(/^─+$/); // bottom rule closes the block
+	});
+
+	it("frames overflow footer below the bottom rule", () => {
+		const body = Array.from({ length: MAX_PREVIEW_LINES + 2 }, (_, i) => `L${i}`);
+		const out = plain(renderDimPreview(body.join("\n"), theme, { frame: true }));
+		const lines = out.split("\n");
+		// overflow marker is the LAST line, below the closing rule
+		expect(lines.at(-1)).toContain("… 2 more lines");
+		expect(lines.at(-2)).toMatch(/^─+$/); // bottom rule sits above the footer
+	});
+
 	it("highlights matched keyword with non-dim styling", () => {
 		const raw = renderDimPreview("foo bar foo", theme, { highlight: "foo" });
 		// matched 'foo' wrapped in yellow/bold ANSI (not produced by stub fg)

package/src/utils.ts

@@ -52,6 +52,77 @@ export function pluralize(count: number, noun: string, plural?: string): string
 	return `${count} ${count === 1 ? noun : (plural ?? `${noun}s`)}`;
 }
 
+export interface FormatJsonOptions {
+	/** Hard char ceiling for the whole block; a longer block is clipped with an ellipsis. */
+	maxChars?: number;
+	/** Line ceiling; excess lines are dropped for a `… +N more` footer. Default MAX_PREVIEW_LINES. */
+	maxLines?: number;
+	/**
+	 * Fallback per-line hard-wrap for NON-JSON input only. When the value parses
+	 * as JSON, reindenting already breaks any mega-line into short lines AND the
+	 * result stays valid JSON, so callers can still syntax-highlight it — wrapping
+	 * it would split string values mid-token and defeat highlighting. This only
+	 * bites a genuine non-JSON one-liner (a multi-KB plain string) the TUI can't
+	 * wrap on its own. 0 disables.
+	 */
+	wrapWidth?: number;
+}
+
+// Hard-wrap a single line into `width`-char chunks. Preserves all characters
+// (this is wrapping, not truncation) so the data stays complete.
+function hardWrapLine(line: string, width: number): string[] {
+	if (width <= 0 || line.length <= width) return [line];
+	const out: string[] = [];
+	for (let i = 0; i < line.length; i += width) out.push(line.slice(i, i + width));
+	return out;
+}
+
+/**
+ * Pretty-print a JSON-ish value for terminal display and bound its cost.
+ *
+ * Splitting an object into short lines is itself a win: the TUI measures/wraps
+ * per line, so one huge line is the pathological case; a re-serialized object
+ * is many cheap lines even when it has more total chars.
+ *
+ * Bounds applied in order: parse+reindent → (non-JSON only) hard-wrap long
+ * lines → line cap (`… +N more`) → char cap. This shapes only the DISPLAY
+ * string; callers keep the untruncated payload for the model. The formatted
+ * JSON stays valid so callers can syntax-highlight it. Pure and host-agnostic.
+ */
+export function formatJson(value: unknown, options: FormatJsonOptions = {}): string {
+	const { maxChars, maxLines = MAX_PREVIEW_LINES, wrapWidth = 0 } = options;
+
+	let text: string;
+	let isJson = true;
+	try {
+		const parsed = typeof value === "string" ? JSON.parse(value) : value;
+		text = JSON.stringify(parsed, null, 2);
+	} catch {
+		// Not JSON (or a circular object) — fall back to a plain string, still bounded.
+		text = typeof value === "string" ? value : String(value);
+		isJson = false;
+	}
+
+	let lines = text.split("\n");
+	// Only hard-wrap non-JSON: wrapping reindented JSON would split string values
+	// mid-token and invalidate the block for downstream highlighting. JSON is
+	// already short-lined after reindent, so it never needs this guard.
+	if (wrapWidth > 0 && !isJson) lines = lines.flatMap((line) => hardWrapLine(line, wrapWidth));
+
+	if (lines.length > maxLines) {
+		const hidden = lines.length - maxLines;
+		lines = [...lines.slice(0, maxLines), `… +${hidden} more`];
+	}
+
+	let out = lines.join("\n");
+	if (maxChars !== undefined && out.length > maxChars) {
+		// Char cap is a last-resort guard (e.g. many wrapped lines under the line
+		// cap still exceeding the budget).
+		out = `${out.slice(0, Math.max(0, maxChars - 1))}…`;
+	}
+	return out;
+}
+
 export type CollapsedToolStatus = "success" | "error" | "warning";
 
 type CollapsedToolTheme = {
@@ -103,9 +174,16 @@ export function hideCollapsedToolCall(
 
 export type DimPreviewOptions = {
 	maxLines?: number;
+	/** Header line shown above the body (or above the top rule when framed).
+	 *  Pass the tool's SEMANTIC count here (e.g. `pluralize(matchCount, "match")`)
+	 *  — the same value the collapsed summary row uses — so top and collapsed
+	 *  never disagree. Do not recount the body: notices/blank lines make a body
+	 *  line-count diverge from the semantic count. */
 	header?: string;
 	/** Pattern whose matches are highlighted (green bold) inside dim lines. */
 	highlight?: string;
+	/** Wrap the body in a top/bottom rule frame (header above, overflow below), like bash/read/mcp. */
+	frame?: boolean;
 };
 
 function dimLineWithHighlight(line: string, theme: FgTheme, pattern?: string): string {
@@ -136,14 +214,25 @@ export function renderDimPreview(
 	const highlight = opts.highlight;
 	const output = normalizeLineEndings(text).trim() || "done";
 	const lines = output.split("\n");
-	const preview = lines
+	const body = lines
 		.slice(0, maxLines)
 		.map((line) => `  ${dimLineWithHighlight(line, theme, highlight)}`);
-	if (opts.header) preview.unshift(`  ${theme.fg("dim", opts.header)}`);
-	if (lines.length > maxLines) {
-		const more = pluralize(lines.length - maxLines, "more line");
-		preview.push(`  ${theme.fg("dim", `… ${more}`)}`);
+	const header = opts.header ? `  ${theme.fg("dim", opts.header)}` : undefined;
+	const overflow =
+		lines.length > maxLines
+			? `  ${theme.fg("dim", `… ${pluralize(lines.length - maxLines, "more line")}`)}`
+			: undefined;
+
+	if (opts.frame) {
+		// Same layout as bash/read/mcp: header above the top rule, body between the
+		// rules, overflow footer below the bottom rule.
+		const out = [...(header ? [header] : []), ...ruleFrame(body, overflow ? [overflow] : [])];
+		return fillToolBackground(out.join("\n"));
 	}
+
+	const preview = body;
+	if (header) preview.unshift(header);
+	if (overflow) preview.push(overflow);
 	return fillToolBackground(preview.join("\n"));
 }
 
@@ -220,6 +309,21 @@ export function rule(w: number): string {
 	return `${FG_RULE}${"─".repeat(w)}${RST}`;
 }
 
+/**
+ * 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
+ * single source of the "rule top, rule bottom" invariant so every tool's result
+ * block is framed identically — MCP and the shell tools share this.
+ */
+export function ruleFrame(
+	bodyLines: string[],
+	footerLines: string[] = [],
+	width?: number,
+): string[] {
+	const r = rule(width ?? termW());
+	return [r, ...bodyLines, r, ...footerLines];
+}
+
 export function lnum(n: number, w: number): string {
 	const v = String(n);
 	return `${FG_LNUM}${" ".repeat(Math.max(0, w - v.length))}${v}${RST}`;