@xynogen/pix-pretty 1.17.2 → 1.18.0

package/package.json

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

@@ -1,5 +1,6 @@
 export let RST = "\x1b[0m";
 export const BOLD = "\x1b[1m";
+export const BOLD_OFF = "\x1b[22m";
 
 export const FG_LNUM = "\x1b[38;2;100;100;100m";
 export const FG_DIM = "\x1b[38;2;80;80;80m";
@@ -23,6 +24,14 @@ export function resolveBaseBackground(_theme: unknown): void {
 
 export const ANSI_CAPTURE_RE = /\x1b\[([0-9;]*)m/g;
 
+/** The ESC byte that opens every ANSI escape sequence. */
+export const ESC = "\x1b";
+
+/** True when a string already contains an ANSI escape sequence. */
+export function hasAnsi(s: string): boolean {
+	return s.includes(ESC);
+}
+
 // ---------------------------------------------------------------------------
 // Low-contrast fix (same as pi-diff)
 // ---------------------------------------------------------------------------

package/src/icons.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { dirIcon, fileIcon } from "./icons.ts";
+import { dirIcon, fileColor, fileIcon } from "./icons.ts";
 
 const theme = {
 	fg: (key: string, text: string) => `<${key}>${text}</${key}>`,
@@ -16,3 +16,20 @@ describe("theme-derived file icons", () => {
 		expect(dirIcon(theme)).toContain("<accent>");
 	});
 });
+
+describe("theme-derived file name color", () => {
+	test("colors a filename with the same role as its icon", () => {
+		expect(fileColor("example.ts", "example.ts", theme)).toBe(
+			"<syntaxType>example.ts</syntaxType>",
+		);
+		expect(fileColor("package.json", "package.json", theme)).toContain("<syntaxString>");
+	});
+
+	test("falls back to the text role for an unknown extension", () => {
+		expect(fileColor("notes.zzz", "notes.zzz", theme)).toBe("<text>notes.zzz</text>");
+	});
+
+	test("passes the name through unchanged when no theme is supplied", () => {
+		expect(fileColor("example.ts", "example.ts")).toBe("example.ts");
+	});
+});

package/src/icons.ts

@@ -100,3 +100,16 @@ export function fileIcon(fp: string, theme?: FgTheme): string {
 export function dirIcon(theme?: FgTheme): string {
 	return USE_ICONS ? `${paint({ glyph: "\ue5ff", color: "accent" }, theme)} ` : "";
 }
+
+/**
+ * Color a filename by its type, reusing the same per-extension palette the
+ * icons use (so name and icon share a hue). Unknown types fall back to the
+ * theme's default text color. Pure passthrough when no theme is supplied.
+ */
+export function fileColor(fp: string, name: string, theme?: FgTheme): string {
+	if (!theme) return name;
+	const base = basename(fp).toLowerCase();
+	const ext = extname(fp).slice(1).toLowerCase();
+	const spec = NAME_ICON[base] ?? EXT_ICON[ext];
+	return theme.fg(spec?.color ?? "text", name);
+}

package/src/renderers.ts

@@ -5,7 +5,7 @@ import { prettySection } from "@xynogen/pix-runtime/sections";
 import { FG_DIM, FG_RULE, RST } from "./ansi.js";
 import { MAX_PREVIEW_LINES } from "./config.js";
 import { hlBlock } from "./highlight.js";
-import { dirIcon, fileIcon } from "./icons.js";
+import { dirIcon, fileColor, fileIcon } from "./icons.js";
 import { lang } from "./lang.js";
 import type { FgTheme } from "./types.js";
 import { lnum, normalizeLineEndings, pluralize, rule, termW } from "./utils.js";
@@ -82,6 +82,13 @@ export function renderTree(text: string, basePath: string, theme?: FgTheme): str
 }
 
 /** Vertical tree view with connectors and icons. */
+/** Color a listing entry: dirs use the theme accent, files use their
+ *  per-extension hue (fileColor). Pure passthrough without a theme. */
+function entryColor(isDir: boolean, name: string, theme?: FgTheme): string {
+	if (!theme) return name;
+	return isDir ? theme.fg("accent", name) : fileColor(name, name, theme);
+}
+
 function renderLsTree(text: string, _basePath: string, theme?: FgTheme): string {
 	const lines = text.trim().split("\n").filter(Boolean);
 	if (!lines.length) return `${FG_DIM}(empty directory)${RST}`;
@@ -99,7 +106,7 @@ function renderLsTree(text: string, _basePath: string, theme?: FgTheme): string
 		const isDir = entry.endsWith("/");
 		const name = isDir ? entry.slice(0, -1) : entry;
 		const icon = isDir ? dirIcon(theme) : fileIcon(name, theme);
-		const displayName = isDir && theme ? theme.fg("accent", name) : name;
+		const displayName = entryColor(isDir, name, theme);
 
 		out.push(`${connector}${icon}${displayName}`);
 	}
@@ -130,7 +137,7 @@ function renderLsGrid(text: string, _basePath: string, theme?: FgTheme): string
 		const isDir = entry.endsWith("/");
 		const name = isDir ? entry.slice(0, -1) : entry;
 		const icon = isDir ? dirIcon(theme) : fileIcon(name, theme);
-		const displayName = isDir && theme ? theme.fg("accent", name) : name;
+		const displayName = entryColor(isDir, name, theme);
 		const cell = `${icon}${displayName}`;
 		cells.push(cell);
 		cellWidths.push(visibleWidth(cell));

package/src/types.ts

@@ -196,6 +196,10 @@ export type GrepResultDetails = {
 	pattern: string;
 	path?: string;
 	matchCount: number;
+	/** Search flags, so the renderer can rebuild the matcher to highlight hits:
+	 *  literal → escape metacharacters; ignoreCase → case-insensitive. */
+	literal?: boolean;
+	ignoreCase?: boolean;
 };
 
 export type RenderDetails =

package/src/utils.test.ts

@@ -13,6 +13,7 @@ import {
 	renderCollapsedToolRow,
 	renderDimPreview,
 	ruleFrame,
+	sectionRule,
 	setResultDetails,
 	viewportText,
 } from "./utils.js";
@@ -402,4 +403,76 @@ describe("renderDimPreview", () => {
 		expect(plain(raw)).toContain("call(foo)");
 		expect(raw).toContain("\x1b[");
 	});
+
+	it("highlights every regex match, not just a literal substring", () => {
+		// /te.t/ must light up both 'test' and 'text' — a literal indexOf can't.
+		const raw = renderDimPreview("test text", theme, { highlight: /te.t/g });
+		// Two bold-open codes = two highlighted hits.
+		expect(raw.split("\x1b[1m").length - 1).toBe(2);
+		expect(plain(raw)).toContain("test text");
+	});
+
+	it("does not loop on a zero-width regex match", () => {
+		// /x*/ matches empty everywhere — must terminate and keep content intact.
+		const raw = renderDimPreview("abc", theme, { highlight: /x*/g });
+		expect(plain(raw)).toContain("abc");
+	});
+
+	it("skips highlighting a line that already carries ANSI (no escape corruption)", () => {
+		// Pre-colored input: a match inside an escape would corrupt it, so the
+		// whole line is dimmed instead — no BOLD hit is injected.
+		const preColored = "\x1b[31mtest\x1b[0m done";
+		const raw = renderDimPreview(preColored, theme, { highlight: "test" });
+		expect(raw).not.toContain("\x1b[1m"); // no bold hit
+		expect(raw).toContain("\x1b[31m"); // original ANSI preserved
+	});
+
+	it("renders an === label === separator as a section divider", () => {
+		const raw = renderDimPreview("=== branch ===\nmain", theme, {});
+		// Label survives; the raw === markers are gone (replaced by a rule).
+		expect(plain(raw)).toContain("branch");
+		expect(plain(raw)).not.toContain("===");
+		expect(plain(raw)).toContain("─"); // divider glyph
+		expect(plain(raw)).toContain("main"); // ordinary lines untouched
+	});
+});
+
+describe("sectionRule", () => {
+	// Tagging theme so we can assert which role each fragment uses.
+	const tag: FgTheme = { fg: (key, text) => `<${key}>${text}</${key}>` };
+
+	it("left-aligns the label after a short lead rule, all muted", () => {
+		const out = sectionRule("=== versions ===", tag, 40) ?? "";
+		expect(out).not.toBeNull();
+		// One muted span wrapping the whole divider; label starts after 4 dashes.
+		expect(out).toBe("<muted>──── versions ──────────────────────────</muted>");
+	});
+
+	it("wraps an over-long label snugly with 2 dashes each side", () => {
+		const out = sectionRule("=== a very long section label here ===", tag, 20) ?? "";
+		expect(out).toBe("<muted>── a very long section label here ──</muted>");
+	});
+
+	it("accepts extra whitespace and 2+ equals signs", () => {
+		expect(sectionRule("==  dirty?  ==", tag, 40)).toContain("──── dirty? ");
+		expect(sectionRule("===== a b c =====", tag, 40)).toContain("──── a b c ");
+	});
+
+	it("returns null for a non-separator line", () => {
+		expect(sectionRule("just a normal line", tag, 20)).toBeNull();
+		expect(sectionRule("=== no closing", tag, 20)).toBeNull();
+		// Must span the whole line — leading text before the === disqualifies it.
+		expect(sectionRule("plain === middle === text", tag, 20)).toBeNull();
+	});
+
+	it("returns null when the line already carries ANSI", () => {
+		expect(sectionRule("\x1b[31m=== x ===\x1b[0m", tag, 20)).toBeNull();
+	});
+
+	it("caps the divider width on an ultra-wide terminal", () => {
+		// Ask for 400 columns — the visible width must stay capped (<= 72).
+		const out = sectionRule("=== x ===", tag, 400) ?? "";
+		const visible = out.replace(/<\/?[a-z]+>/g, "");
+		expect([...visible].length).toBeLessThanOrEqual(72);
+	});
 });

package/src/utils.ts

@@ -6,9 +6,10 @@ import {
 	BG_BASE,
 	BG_ERROR,
 	BOLD,
-	FG_GREEN,
+	BOLD_OFF,
 	FG_LNUM,
 	FG_RULE,
+	hasAnsi,
 	RST,
 } from "./ansi.js";
 import { MAX_PREVIEW_LINES } from "./config.js";
@@ -323,28 +324,62 @@ export type DimPreviewOptions = {
 	 *  the header is intentionally dropped (the collapsed row already carries the
 	 *  count, so a floating header above the frame is redundant). */
 	header?: string;
-	/** Pattern whose matches are highlighted (green bold) inside dim lines. */
-	highlight?: string;
+	/** Pattern whose matches are highlighted (bold, themed) inside dim lines.
+	 *  A string is matched literally (case-insensitive); a RegExp is used as-is
+	 *  (callers pass the compiled search pattern so regex greps highlight too). */
+	highlight?: string | RegExp;
 	/** Wrap the body in a top/bottom rule frame (overflow below), like bash/ls/mcp. */
 	frame?: boolean;
 	/** Tint the frame rules (green ok, red error) — same status color as bash/ls. */
 	paint?: RulePaint;
 };
 
-function dimLineWithHighlight(line: string, theme: FgTheme, pattern?: string): string {
-	if (!pattern) return theme.fg("dim", line);
-	const foldedLine = line.toLocaleLowerCase();
-	const foldedPattern = pattern.toLocaleLowerCase();
-	if (!foldedPattern) return theme.fg("dim", line);
+/** Compile a highlight pattern into a global RegExp, or null when it can't
+ *  match anything. Strings match literally (case-insensitive); a RegExp is
+ *  re-flagged global so every occurrence on a line lights up. */
+function toHighlightRegex(pattern: string | RegExp): RegExp | null {
+	if (typeof pattern !== "string") {
+		const flags = pattern.flags.includes("g") ? pattern.flags : `${pattern.flags}g`;
+		try {
+			return new RegExp(pattern.source, flags);
+		} catch {
+			return null;
+		}
+	}
+	if (!pattern) return null;
+	// Literal string → escape regex metacharacters, case-insensitive.
+	const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	try {
+		return new RegExp(escaped, "gi");
+	} catch {
+		return null;
+	}
+}
 
+function dimLineWithHighlight(line: string, theme: FgTheme, pattern?: string | RegExp): string {
+	if (!pattern) return theme.fg("dim", line);
+	// A line that already carries ANSI (e.g. a source that emitted its own color)
+	// can't be safely index-sliced — a match could land inside an escape and
+	// corrupt it. Skip highlighting and dim the whole line instead.
+	if (hasAnsi(line)) return theme.fg("dim", line);
+	const re = pattern ? toHighlightRegex(pattern) : null;
+	if (!re) return theme.fg("dim", line);
+
+	// Themed bold hit: theme.fg carries its own reset, so re-open BOLD after it
+	// and close with the bold-off code (\x1b[22m) to avoid leaking bold onward.
+	const hit = (s: string) => `${BOLD}${theme.fg("success", s)}${BOLD_OFF}`;
 	const parts: string[] = [];
 	let start = 0;
-	for (;;) {
-		const match = foldedLine.indexOf(foldedPattern, start);
-		if (match < 0) break;
-		if (match > start) parts.push(theme.fg("dim", line.slice(start, match)));
-		parts.push(`${FG_GREEN}${BOLD}${line.slice(match, match + pattern.length)}${RST}`);
-		start = match + pattern.length;
+	for (let m = re.exec(line); m !== null; m = re.exec(line)) {
+		const idx = m.index;
+		const text = m[0];
+		if (text.length === 0) {
+			re.lastIndex++; // zero-width match (e.g. /a*/) — advance to avoid a loop
+			continue;
+		}
+		if (idx > start) parts.push(theme.fg("dim", line.slice(start, idx)));
+		parts.push(hit(text));
+		start = idx + text.length;
 	}
 	if (start < line.length) parts.push(theme.fg("dim", line.slice(start)));
 	return parts.length > 0 ? parts.join("") : theme.fg("dim", line);
@@ -359,9 +394,12 @@ export function renderDimPreview(
 	const highlight = opts.highlight;
 	const output = normalizeLineEndings(text).trim() || "done";
 	const lines = output.split("\n");
+	const sw = Math.max(8, termW() - 4); // section-rule width inside the 2-space indent
 	const body = lines
 		.slice(0, maxLines)
-		.map((line) => `  ${dimLineWithHighlight(line, theme, highlight)}`);
+		.map(
+			(line) => `  ${sectionRule(line, theme, sw) ?? dimLineWithHighlight(line, theme, highlight)}`,
+		);
 	const header = opts.header ? `  ${theme.fg("dim", opts.header)}` : undefined;
 	const overflow =
 		lines.length > maxLines
@@ -459,6 +497,35 @@ export function rule(w: number, paint?: RulePaint): string {
 	return paint ? paint(glyphs) : `${FG_RULE}${glyphs}${RST}`;
 }
 
+/** Matches an `=== label ===` separator line (a common shell/echo idiom). */
+const SECTION_RE = /^\s*={2,}\s*(.+?)\s*={2,}\s*$/;
+
+/** Max width of a section divider — a full-width rule on an ultra-wide
+ *  terminal reads as noise, so cap it regardless of available columns. */
+const SECTION_RULE_MAX = 72;
+
+/** Fixed dash count before a left-aligned section label. */
+const SECTION_RULE_LEAD = 4;
+
+/**
+ * If `line` is an `=== label ===` separator, render it as a left-aligned
+ * section divider (`──── label ───────────`); otherwise return null. Callers
+ * fall back to their normal per-line rendering on null. Sized to `width` but
+ * capped at SECTION_RULE_MAX so it stays readable on wide terminals. Label and
+ * rule both use the muted role — theme-driven, ANSI-safe.
+ */
+export function sectionRule(line: string, theme: FgTheme, width: number): string | null {
+	const m = SECTION_RE.exec(line);
+	if (!m || hasAnsi(line)) return null;
+	const label = ` ${m[1]} `;
+	const w = Math.min(width, SECTION_RULE_MAX);
+	const trail = w - SECTION_RULE_LEAD - visibleWidth(label);
+	// Label fits → lead rule + trailing fill. Too long to fill → don't force a
+	// full-width rule; wrap it snugly with 2 dashes each side (`── long text ──`).
+	const [lead, tail] = trail >= 2 ? [SECTION_RULE_LEAD, trail] : [2, 2];
+	return theme.fg("muted", `${"─".repeat(lead)}${label}${"─".repeat(tail)}`);
+}
+
 /**
  * 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