@xynogen/pix-pretty 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.3.1",
+	"version": "1.3.3",
 	"description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, FFF search, and paste chip formatting",
 	"type": "module",
 	"main": "src/index.ts",

package/src/fff.ts

@@ -123,7 +123,6 @@ export class CursorStore {
 
 /**
  * Convert FFF GrepResult items to ripgrep-style "file:line:content" text.
- * This ensures pi-pretty's renderGrepResults works unchanged.
  */
 export function fffFormatGrepText(items: GrepMatch[], limit: number): string {
 	const capped = items.slice(0, limit);

package/src/renderers.ts

@@ -1,4 +1,3 @@
-import { basename, dirname } from "node:path";
 import { truncateToWidth } from "@earendil-works/pi-tui";
 
 import {
@@ -15,7 +14,7 @@ import { MAX_PREVIEW_LINES } from "./config.js";
 import { hlBlock } from "./highlight.js";
 import { dirIcon, fileIcon } from "./icons.js";
 import { lang } from "./lang.js";
-import { lnum, normalizeLineEndings, rule, termW } from "./utils.js";
+import { lnum, normalizeLineEndings, pluralize, rule, termW } from "./utils.js";
 
 /** Render syntax-highlighted file content with line numbers. */
 export async function renderFileContent(
@@ -51,7 +50,7 @@ export async function renderFileContent(
 	out.push(rule(tw));
 	if (total > maxLines) {
 		out.push(
-			`${FG_DIM}  … ${total - maxLines} more lines (${total} total)${RST}`,
+			`${FG_DIM}  … ${pluralize(total - maxLines, "more line")} (${total} total)${RST}`,
 		);
 	}
 	return out.join("\n");
@@ -77,7 +76,7 @@ export function renderBashOutput(
 
 	let body = show.join("\n");
 	if (remaining > 0) {
-		body += `\n${FG_DIM}  … ${remaining} more lines${RST}`;
+		body += `\n${FG_DIM}  … ${pluralize(remaining, "more line")}${RST}`;
 	}
 
 	return { summary: codeStr, body };
@@ -110,110 +109,13 @@ export function renderTree(text: string, _basePath: string): string {
 
 	if (total > MAX_PREVIEW_LINES) {
 		out.push(
-			`${FG_RULE}└── ${RST}${FG_DIM}… ${total - MAX_PREVIEW_LINES} more entries${RST}`,
+			`${FG_RULE}└── ${RST}${FG_DIM}… ${pluralize(total - MAX_PREVIEW_LINES, "more entry", "more entries")}${RST}`,
 		);
 	}
 
 	return out.join("\n");
 }
 
-/** Render find results grouped by directory with icons. */
-export function renderFindResults(text: string): string {
-	const lines = text.trim().split("\n").filter(Boolean);
-	if (!lines.length) return `${FG_DIM}(no matches)${RST}`;
-
-	// Group by directory
-	const groups = new Map<string, string[]>();
-	for (const line of lines) {
-		const trimmed = line.trim();
-		const dir = dirname(trimmed) || ".";
-		const file = basename(trimmed);
-		if (!groups.has(dir)) groups.set(dir, []);
-		const bucket = groups.get(dir);
-		if (bucket) bucket.push(file);
-	}
-
-	const out: string[] = [];
-	let count = 0;
-
-	for (const [dir, files] of groups) {
-		if (count > 0) out.push(""); // blank line between groups
-		out.push(`${dirIcon()}${FG_BLUE}${BOLD}${dir}/${RST}`);
-		for (let i = 0; i < files.length; i++) {
-			if (count >= MAX_PREVIEW_LINES) {
-				out.push(`  ${FG_DIM}… ${lines.length - count} more files${RST}`);
-				return out.join("\n");
-			}
-			const isLast = i === files.length - 1;
-			const prefix = isLast ? "└── " : "├── ";
-			const icon = fileIcon(files[i]);
-			out.push(`  ${FG_RULE}${prefix}${RST}${icon}${files[i]}`);
-			count++;
-		}
-	}
-
-	return out.join("\n");
-}
-
-/** Render grep results with highlighted matches and line numbers. */
-export async function renderGrepResults(
-	text: string,
-	pattern: string,
-): Promise<string> {
-	const lines = normalizeLineEndings(text).split("\n");
-	if (!lines.length || (lines.length === 1 && !lines[0].trim()))
-		return `${FG_DIM}(no matches)${RST}`;
-
-	const out: string[] = [];
-	let currentFile = "";
-	let count = 0;
-
-	// Try to build a regex for highlighting
-	let re: RegExp | null = null;
-	try {
-		re = new RegExp(`(${pattern})`, "gi");
-	} catch {
-		// invalid regex — skip highlighting
-	}
-
-	for (const line of lines) {
-		if (count >= MAX_PREVIEW_LINES) {
-			out.push(`${FG_DIM}  … more matches${RST}`);
-			break;
-		}
-
-		// ripgrep-style: "file:line:content" or "file-line-content" or just "file"
-		const fileMatch = line.match(/^(.+?)[:-](\d+)[:-](.*)$/);
-		if (fileMatch) {
-			const [, file, lineNo, content] = fileMatch;
-			if (file !== currentFile) {
-				if (currentFile) out.push(""); // blank line between files
-				const icon = fileIcon(file);
-				out.push(`${icon}${FG_BLUE}${BOLD}${file}${RST}`);
-				currentFile = file;
-			}
-
-			const nw = Math.max(3, lineNo.length);
-			let display = content;
-			if (re) {
-				display = content.replace(re, `${RST}${FG_YELLOW}${BOLD}$1${RST}`);
-			}
-			out.push(
-				`  ${lnum(Number(lineNo), nw)} ${FG_RULE}│${RST} ${display}${RST}`,
-			);
-			count++;
-		} else if (line.trim() === "--") {
-			// ripgrep separator
-			out.push(`  ${FG_DIM}  ···${RST}`);
-		} else if (line.trim()) {
-			out.push(line);
-			count++;
-		}
-	}
-
-	return out.join("\n");
-}
-
 // ---------------------------------------------------------------------------
 // FFF integration (optional) — Fast File Finder with frecency & SIMD search
 //

package/src/tools/find.ts

@@ -4,8 +4,6 @@ import type {
 	ToolRenderResultOptions,
 } from "@earendil-works/pi-coding-agent";
 
-import { FG_DIM, RST } from "../ansi.js";
-import { renderFindResults } from "../renderers.js";
 import type {
 	FindParams,
 	FindResultDetails,
@@ -19,8 +17,8 @@ import {
 	appendNotices,
 	fillToolBackground,
 	getTextContent,
-	isTextContent,
 	makeTextResult,
+	renderDimPreview,
 	renderToolError,
 	setResultDetails,
 } from "../utils.js";
@@ -137,22 +135,8 @@ export function registerFindTool(
 				return text;
 			}
 
-			const d = result.details;
-			if (d?._type === "findResult" && d.text) {
-				const rendered = renderFindResults(d.text);
-				const info = `${FG_DIM}${d.matchCount} files${RST}`;
-				text.setText(fillToolBackground(`  ${info}\n${rendered}`));
-				return text;
-			}
-
-			const fallback = result.content?.[0];
-			const fallbackText =
-				fallback && isTextContent(fallback) ? fallback.text : "found";
-			text.setText(
-				fillToolBackground(
-					`  ${theme.fg("dim", String(fallbackText).slice(0, 120))}`,
-				),
-			);
+			const output = getTextContent(result) || "found";
+			text.setText(renderDimPreview(output, theme));
 			return text;
 		},
 	});

package/src/tools/grep.ts

@@ -4,12 +4,9 @@ import type {
 	ToolRenderResultOptions,
 } from "@earendil-works/pi-coding-agent";
 
-import { FG_DIM, RST } from "../ansi.js";
 import { fffFormatGrepText } from "../fff.js";
-import { renderGrepResults } from "../renderers.js";
 import type {
 	GrepParams,
-	GrepRenderState,
 	GrepResultDetails,
 	PiPrettyApi,
 	RenderContextLike,
@@ -25,9 +22,10 @@ import {
 	isTextContent,
 	makeTextResult,
 	normalizeLineEndings,
+	pluralize,
+	renderDimPreview,
 	renderToolError,
 	setResultDetails,
-	termW,
 } from "../utils.js";
 import type { ToolContext } from "./context.js";
 
@@ -155,7 +153,7 @@ export function registerGrepTool(
 			result: ToolResultLike<GrepResultDetails>,
 			_opt: ToolRenderResultOptions,
 			theme: ThemeLike,
-			renderCtx: RenderContextLike<GrepRenderState>,
+			renderCtx: RenderContextLike,
 		) {
 			const text = renderCtx.lastComponent ?? new TextComponent("", 0, 0);
 
@@ -165,37 +163,15 @@ export function registerGrepTool(
 			}
 
 			const d = result.details;
-			if (d?._type === "grepResult" && d.text) {
-				const key = `grep:${d.pattern}:${d.matchCount}:${termW()}`;
-				if (renderCtx.state._gk !== key) {
-					renderCtx.state._gk = key;
-					const info = `${FG_DIM}${d.matchCount} matches${RST}`;
-					renderCtx.state._gt = fillToolBackground(`  ${info}`);
-
-					renderGrepResults(d.text, d.pattern)
-						.then((rendered: string) => {
-							if (renderCtx.state._gk !== key) return;
-							renderCtx.state._gt = fillToolBackground(
-								`  ${info}\n${rendered}`,
-							);
-							renderCtx.invalidate();
-						})
-						.catch(() => {});
-				}
-				text.setText(
-					renderCtx.state._gt ??
-						fillToolBackground(`  ${FG_DIM}${d.matchCount} matches${RST}`),
-				);
-				return text;
-			}
-
-			const fallback = result.content?.[0];
-			const fallbackText =
-				fallback && isTextContent(fallback) ? fallback.text : "searched";
+			const output = getTextContent(result) || "searched";
 			text.setText(
-				fillToolBackground(
-					`  ${theme.fg("dim", String(fallbackText).slice(0, 120))}`,
-				),
+				renderDimPreview(output, theme, {
+					header:
+						d?._type === "grepResult"
+							? pluralize(d.matchCount, "match", "matches")
+							: undefined,
+					highlight: d?._type === "grepResult" ? d.pattern : undefined,
+				}),
 			);
 			return text;
 		},

package/src/tools/ls.ts

@@ -3,7 +3,6 @@ import type {
 	ExtensionContext,
 	LsToolInput,
 } from "@earendil-works/pi-coding-agent";
-
 import { FG_DIM, RST } from "../ansi.js";
 import { renderTree } from "../renderers.js";
 import type {
@@ -17,7 +16,6 @@ import type {
 import {
 	fillToolBackground,
 	getTextContent,
-	isTextContent,
 	renderToolError,
 	setResultDetails,
 } from "../utils.js";
@@ -98,13 +96,9 @@ export function registerLsTool(
 				return text;
 			}
 
-			const fallback = result.content?.[0];
-			const fallbackText =
-				fallback && isTextContent(fallback) ? fallback.text : "listed";
+			const output = getTextContent(result) || "listed";
 			text.setText(
-				fillToolBackground(
-					`  ${theme.fg("dim", String(fallbackText).slice(0, 120))}`,
-				),
+				fillToolBackground(`  ${theme.fg("dim", output.slice(0, 120))}`),
 			);
 			return text;
 		},

package/src/tools/multi-grep.ts

@@ -4,13 +4,10 @@ import type {
 	ToolRenderResultOptions,
 } from "@earendil-works/pi-coding-agent";
 
-import { FG_DIM, RST } from "../ansi.js";
 import { fffFormatGrepText } from "../fff.js";
-import { renderGrepResults } from "../renderers.js";
 import type {
 	GrepResultDetails,
 	MultiGrepParams,
-	MultiGrepRenderState,
 	PiPrettyApi,
 	RenderContextLike,
 	ThemeLike,
@@ -21,14 +18,16 @@ import {
 	appendNotices,
 	buildLiteralAlternationPattern,
 	countRipgrepMatches,
+	fillToolBackground,
 	getConstraintBackedPath,
 	getErrorMessage,
 	getTextContent,
-	isTextContent,
 	makeTextResult,
 	normalizeLineEndings,
+	pluralize,
+	renderDimPreview,
+	renderToolError,
 	shouldIgnoreCaseForPatterns,
-	termW,
 	trimToUndefined,
 } from "../utils.js";
 import type { ToolContext } from "./context.js";
@@ -278,7 +277,7 @@ export function registerMultiGrepTool(
 				theme.fg("accent", patterns.map((p) => `"${p}"`).join(", "));
 			content += path;
 			if (constraints) content += theme.fg("muted", ` (${constraints})`);
-			text.setText(content);
+			text.setText(fillToolBackground(content));
 			return text;
 		},
 
@@ -286,43 +285,26 @@ export function registerMultiGrepTool(
 			result: ToolResultLike<GrepResultDetails | { error?: string }>,
 			_opt: ToolRenderResultOptions,
 			theme: ThemeLike,
-			renderCtx: RenderContextLike<MultiGrepRenderState>,
+			renderCtx: RenderContextLike,
 		) {
 			const text = renderCtx.lastComponent ?? new TextComponent("", 0, 0);
 
 			if (renderCtx.isError) {
-				text.setText(
-					`\n${theme.fg("error", getTextContent(result) || "Error")}`,
-				);
+				text.setText(renderToolError(getTextContent(result) || "Error", theme));
 				return text;
 			}
 
 			const d = result.details;
-			if (d && "_type" in d && d._type === "grepResult" && d.text) {
-				const key = `mgrep:${d.pattern}:${d.matchCount}:${termW()}`;
-				if (renderCtx.state._mgk !== key) {
-					renderCtx.state._mgk = key;
-					const info = `${FG_DIM}${d.matchCount} matches${RST}`;
-					renderCtx.state._mgt = `  ${info}`;
-
-					renderGrepResults(d.text, d.pattern)
-						.then((rendered: string) => {
-							if (renderCtx.state._mgk !== key) return;
-							renderCtx.state._mgt = `  ${info}\n${rendered}`;
-							renderCtx.invalidate();
-						})
-						.catch(() => {});
-				}
-				text.setText(
-					renderCtx.state._mgt ?? `  ${FG_DIM}${d.matchCount} matches${RST}`,
-				);
-				return text;
-			}
-
-			const fallback = result.content?.[0];
-			const fallbackText =
-				fallback && isTextContent(fallback) ? fallback.text : "searched";
-			text.setText(`  ${theme.fg("dim", String(fallbackText).slice(0, 120))}`);
+			const isGrep = d && "_type" in d && d._type === "grepResult";
+			const output = getTextContent(result) || "searched";
+			text.setText(
+				renderDimPreview(output, theme, {
+					header: isGrep
+						? pluralize(d.matchCount, "match", "matches")
+						: undefined,
+					highlight: isGrep ? d.pattern : undefined,
+				}),
+			);
 			return text;
 		},
 	});

package/src/types.ts

@@ -211,8 +211,6 @@ export type MultiGrepParams = {
 	limit?: number;
 };
 
-export type GrepRenderState = { _gk?: string; _gt?: string };
-
 export type EditRenderState = {
 	_pk?: string;
 	_pt?: string;
@@ -229,8 +227,6 @@ export type WriteRenderState = {
 	_nft?: string;
 };
 
-export type MultiGrepRenderState = { _mgk?: string; _mgt?: string };
-
 export type FindResultDetails = {
 	_type: "findResult";
 	text: string;

package/src/utils.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "bun:test";
+
+import { MAX_PREVIEW_LINES } from "./config.js";
+import type { FgTheme } from "./types.js";
+import { pluralize, renderDimPreview } from "./utils.js";
+
+// Strip ANSI escapes so assertions test content, not color codes.
+const ANSI = /\x1b\[[0-9;]*m/g;
+function plain(text: string): string {
+	return text.replace(ANSI, "");
+}
+
+// Minimal theme: fg() passes text through untouched.
+const theme: FgTheme = { fg: (_key, text) => text };
+
+describe("pluralize", () => {
+	it("uses singular for count of 1", () => {
+		expect(pluralize(1, "match", "matches")).toBe("1 match");
+	});
+
+	it("uses plural for count != 1", () => {
+		expect(pluralize(0, "match", "matches")).toBe("0 matches");
+		expect(pluralize(2, "match", "matches")).toBe("2 matches");
+	});
+
+	it("defaults plural to noun + s", () => {
+		expect(pluralize(1, "line")).toBe("1 line");
+		expect(pluralize(3, "line")).toBe("3 lines");
+	});
+});
+
+describe("renderDimPreview", () => {
+	it("renders 'done' for empty input", () => {
+		expect(plain(renderDimPreview("", theme))).toContain("done");
+	});
+
+	it("shows every line when under the cap", () => {
+		const out = plain(renderDimPreview("a\nb\nc", theme));
+		expect(out).toContain("a");
+		expect(out).toContain("b");
+		expect(out).toContain("c");
+		expect(out).not.toContain("more line");
+	});
+
+	it("does not add overflow marker at exactly the cap", () => {
+		const body = Array.from({ length: MAX_PREVIEW_LINES }, (_, i) => `L${i}`);
+		const out = plain(renderDimPreview(body.join("\n"), theme));
+		expect(out).not.toContain("more line");
+	});
+
+	it("adds singular overflow marker for 1 extra line", () => {
+		const body = Array.from(
+			{ length: MAX_PREVIEW_LINES + 1 },
+			(_, i) => `L${i}`,
+		);
+		const out = plain(renderDimPreview(body.join("\n"), theme));
+		expect(out).toContain("… 1 more line");
+		expect(out).not.toContain("more lines");
+	});
+
+	it("adds plural overflow marker for many extra lines", () => {
+		const body = Array.from(
+			{ length: MAX_PREVIEW_LINES + 3 },
+			(_, i) => `L${i}`,
+		);
+		const out = plain(renderDimPreview(body.join("\n"), theme));
+		expect(out).toContain("… 3 more lines");
+	});
+
+	it("respects a custom maxLines", () => {
+		const out = plain(renderDimPreview("a\nb\nc\nd", theme, { maxLines: 2 }));
+		expect(out).toContain("… 2 more lines");
+	});
+
+	it("prepends a header line when given", () => {
+		const out = plain(renderDimPreview("body", theme, { header: "5 matches" }));
+		expect(out).toContain("5 matches");
+		expect(out).toContain("body");
+	});
+
+	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)
+		expect(raw).toContain("\x1b[");
+		expect(plain(raw)).toContain("foo bar foo");
+	});
+
+	it("does not throw on an invalid highlight regex", () => {
+		expect(() =>
+			renderDimPreview("text", theme, { highlight: "(" }),
+		).not.toThrow();
+	});
+});

package/src/utils.ts

@@ -5,10 +5,13 @@ import {
 	ANSI_CAPTURE_RE,
 	BG_BASE,
 	BG_ERROR,
+	BOLD,
+	FG_GREEN,
 	FG_LNUM,
 	FG_RULE,
 	RST,
 } from "./ansi.js";
+import { MAX_PREVIEW_LINES } from "./config.js";
 import type {
 	FgTheme,
 	ToolContent,
@@ -48,6 +51,64 @@ export function fillToolBackground(text: string, bg = BG_BASE): string {
 		.join("\n");
 }
 
+export function pluralize(
+	count: number,
+	noun: string,
+	plural?: string,
+): string {
+	return `${count} ${count === 1 ? noun : (plural ?? `${noun}s`)}`;
+}
+
+export type DimPreviewOptions = {
+	maxLines?: number;
+	header?: string;
+	/** Pattern whose matches are highlighted (green bold) inside dim lines. */
+	highlight?: string;
+};
+
+function safeHighlightRegex(pattern: string): RegExp | null {
+	try {
+		return new RegExp(`(${pattern})`, "gi");
+	} catch {
+		return null;
+	}
+}
+
+function dimLineWithHighlight(
+	line: string,
+	theme: FgTheme,
+	re: RegExp | null,
+): string {
+	if (!re) return theme.fg("dim", line);
+	// split with capture group: odd indexes are matches
+	return line
+		.split(re)
+		.map((part, i) =>
+			i % 2 ? `${FG_GREEN}${BOLD}${part}${RST}` : theme.fg("dim", part),
+		)
+		.join("");
+}
+
+export function renderDimPreview(
+	text: string,
+	theme: FgTheme,
+	opts: DimPreviewOptions = {},
+): string {
+	const maxLines = opts.maxLines ?? MAX_PREVIEW_LINES;
+	const re = opts.highlight ? safeHighlightRegex(opts.highlight) : null;
+	const output = normalizeLineEndings(text).trim() || "done";
+	const lines = output.split("\n");
+	const preview = lines
+		.slice(0, maxLines)
+		.map((line) => `  ${dimLineWithHighlight(line, theme, re)}`);
+	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}`)}`);
+	}
+	return fillToolBackground(preview.join("\n"));
+}
+
 let _cachedTermW: number | undefined;
 let _termWResizeBound = false;