@xynogen/pix-pretty 1.13.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.13.0",
+	"version": "1.14.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/utils.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "bun:test";
 import { MAX_PREVIEW_LINES } from "./config.js";
 import type { FgTheme } from "./types.js";
 import {
+	dotJoin,
 	formatCollapsedToolRow,
 	formatJson,
 	hideCollapsedToolCall,
@@ -35,6 +36,28 @@ describe("ruleFrame", () => {
 		expect(plain(out[0]!)).toBe("────");
 		expect(plain(out.at(-1)!)).toBe("────");
 	});
+
+	it("paints both rules via the supplied paint fn, neutral by default", () => {
+		const green = (s: string) => `<G>${s}</G>`;
+		const ok = ruleFrame(["x"], [], 4, green);
+		expect(ok[0]).toBe("<G>────</G>");
+		expect(ok.at(-1)).toBe("<G>────</G>"); // both top and bottom rule painted
+		const neutral = ruleFrame(["x"], [], 4);
+		expect(neutral[0]).toContain("50;50;50"); // FG_RULE default tint
+	});
+});
+
+describe("dotJoin", () => {
+	it("joins non-empty parts with a middot, dropping falsy pieces", () => {
+		expect(dotJoin(["a", "b", "c"])).toBe("a · b · c");
+		expect(dotJoin(["a", "", null, undefined, false, "b"])).toBe("a · b");
+		expect(dotJoin(["only"])).toBe("only");
+		expect(dotJoin([])).toBe("");
+	});
+
+	it("paints the separator when a paint fn is supplied", () => {
+		expect(dotJoin(["a", "b"], (s) => `<${s}>`)).toBe("a< · >b");
+	});
 });
 
 // Minimal theme: fg() passes text through untouched.
@@ -202,15 +225,24 @@ describe("renderDimPreview", () => {
 		expect(out).toContain("body");
 	});
 
-	it("frames the body with a rule top and bottom, header above the top rule", () => {
+	it("frames the body with a rule top and bottom, dropping the redundant header", () => {
 		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
+		// No floating header in framed mode — the collapsed row carries the count.
+		expect(out).not.toContain("2 files");
+		expect(lines[0]).toMatch(/^─+$/); // top rule is the first line
 		expect(lines.at(-1)).toMatch(/^─+$/); // bottom rule closes the block
 	});
 
+	it("paints the frame rules when a paint fn is given", () => {
+		const tag: FgTheme = { fg: (k, v) => `<${k}>${v}` };
+		const out = renderDimPreview("a\nb", tag, {
+			frame: true,
+			paint: (s: string) => tag.fg("success", s),
+		});
+		expect(out).toContain("<success>─");
+	});
+
 	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 }));

package/src/utils.ts

@@ -156,6 +156,19 @@ export function padIcon(glyph: string, width = 2): string {
 	return pad > 0 ? glyph + " ".repeat(pad) : glyph;
 }
 
+/**
+ * Join non-empty parts with a middot separator: `dotJoin(["a", "", "b"])` → `"a · b"`.
+ * Empty/nullish parts are dropped so callers can pass conditional pieces inline.
+ * Pass `paint` (e.g. `(s) => theme.fg("dim", s)`) to tint the separator to theme.
+ */
+export function dotJoin(
+	parts: Array<string | false | null | undefined>,
+	paint?: RulePaint,
+): string {
+	const sep = paint ? paint(" · ") : " · ";
+	return parts.filter((p): p is string => Boolean(p)).join(sep);
+}
+
 type CollapsedToolTheme = {
 	fg: (
 		key: "success" | "error" | "warning" | "toolTitle" | "muted" | "dim",
@@ -205,16 +218,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 line shown above the body. NON-FRAMED mode only — in framed mode
+	 *  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;
-	/** Wrap the body in a top/bottom rule frame (header above, overflow below), like bash/read/mcp. */
+	/** 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 {
@@ -255,9 +268,9 @@ export function renderDimPreview(
 			: 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] : [])];
+		// One shape regardless of line count: a single framed box, no floating
+		// header (the collapsed row carries the count). Rules follow status color.
+		const out = ruleFrame(body, overflow ? [overflow] : [], undefined, opts.paint);
 		return fillToolBackground(out.join("\n"));
 	}
 
@@ -336,8 +349,13 @@ export function shortPath(cwd: string, home: string, p: string): string {
 	return p.replace(home, "~");
 }
 
-export function rule(w: number): string {
-	return `${FG_RULE}${"─".repeat(w)}${RST}`;
+/** Paints a rule line. Callers pass `(s) => theme.fg(status, s)` so the frame
+ *  tint follows the active theme (success/error/warning). Default = neutral FG_RULE. */
+export type RulePaint = (glyphs: string) => string;
+
+export function rule(w: number, paint?: RulePaint): string {
+	const glyphs = "─".repeat(w);
+	return paint ? paint(glyphs) : `${FG_RULE}${glyphs}${RST}`;
 }
 
 /**
@@ -350,8 +368,9 @@ export function ruleFrame(
 	bodyLines: string[],
 	footerLines: string[] = [],
 	width?: number,
+	paint?: RulePaint,
 ): string[] {
-	const r = rule(width ?? termW());
+	const r = rule(width ?? termW(), paint);
 	return [r, ...bodyLines, r, ...footerLines];
 }