@xynogen/pix-pretty 1.0.0

package/src/lang.ts

@@ -0,0 +1,67 @@
+import { basename, extname } from "node:path";
+
+import type { BundledLanguage } from "./types.js";
+
+export const EXT_LANG: Record<string, BundledLanguage> = {
+	ts: "typescript",
+	tsx: "tsx",
+	js: "javascript",
+	jsx: "jsx",
+	mjs: "javascript",
+	cjs: "javascript",
+	py: "python",
+	rb: "ruby",
+	rs: "rust",
+	go: "go",
+	java: "java",
+	c: "c",
+	cpp: "cpp",
+	h: "c",
+	hpp: "cpp",
+	cs: "csharp",
+	swift: "swift",
+	kt: "kotlin",
+	html: "html",
+	css: "css",
+	scss: "scss",
+	less: "css",
+	json: "json",
+	jsonc: "jsonc",
+	yaml: "yaml",
+	yml: "yaml",
+	toml: "toml",
+	md: "markdown",
+	mdx: "mdx",
+	sql: "sql",
+	sh: "bash",
+	bash: "bash",
+	zsh: "bash",
+	lua: "lua",
+	php: "php",
+	dart: "dart",
+	xml: "xml",
+	graphql: "graphql",
+	svelte: "svelte",
+	vue: "vue",
+	dockerfile: "dockerfile",
+	makefile: "make",
+	zig: "zig",
+	nim: "nim",
+	elixir: "elixir",
+	ex: "elixir",
+	erb: "erb",
+	hbs: "handlebars",
+};
+
+export function lang(fp: string): BundledLanguage | undefined {
+	const base = basename(fp).toLowerCase();
+	if (base === "dockerfile") return "dockerfile";
+	if (base === "makefile" || base === "gnumakefile") return "make";
+	if (base === ".envrc" || base === ".env") return "bash";
+	return EXT_LANG[extname(fp).slice(1).toLowerCase()];
+}
+
+// ---------------------------------------------------------------------------
+// Terminal image rendering (iTerm2 / Kitty / Ghostty inline image protocols)
+// Handles tmux passthrough for image protocols.
+// ---------------------------------------------------------------------------

package/src/paste-chips.test.ts

@@ -0,0 +1,138 @@
+/**
+ * Tests for paste-chips marker restyling and width safety.
+ *
+ * Regression: restyling markers can widen lines (e.g. "#1" → "text"),
+ * which caused a TUI crash when the restyled line exceeded terminal width.
+ * See: pi-crash.log — "Rendered line 38 exceeds terminal width (285 > 283)"
+ */
+
+import { describe, it, expect } from "bun:test";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { restyleMarkers } from "./paste-chips";
+
+// ─── restyleMarkers ──────────────────────────────────────────────────────────
+
+describe("paste-chips restyleMarkers", () => {
+	describe("text markers", () => {
+		it("restyles chars marker to text label", () => {
+			const result = restyleMarkers("[paste #1 2232 chars]", new Set());
+			expect(result).toBe("[paste text 2232 chars]");
+		});
+
+		it("restyles lines marker to text label", () => {
+			const result = restyleMarkers("[paste #2 +42 lines]", new Set());
+			expect(result).toBe("[paste text +42]");
+		});
+
+		it("restyles bare marker (no size info) to text label", () => {
+			const result = restyleMarkers("[paste #3]", new Set());
+			expect(result).toBe("[paste text #3]");
+		});
+	});
+
+	describe("image markers", () => {
+		it("restyles marker to image label when ID is in imageIds", () => {
+			const imageIds = new Set([1]);
+			const result = restyleMarkers("[paste #1 58 chars]", imageIds);
+			expect(result).toBe("[paste image #1]");
+		});
+
+		it("does not restyle non-image ID as image", () => {
+			const imageIds = new Set([1]);
+			const result = restyleMarkers("[paste #2 100 chars]", imageIds);
+			expect(result).toBe("[paste text 100 chars]");
+		});
+	});
+
+	describe("multiple markers in one line", () => {
+		it("restyles all markers in a single line", () => {
+			const imageIds = new Set([1]);
+			const line =
+				"before [paste #1 58 chars] middle [paste #2 +10 lines] after";
+			const result = restyleMarkers(line, imageIds);
+			expect(result).toBe(
+				"before [paste image #1] middle [paste text +10] after",
+			);
+		});
+	});
+
+	describe("no markers", () => {
+		it("returns line unchanged when no markers present", () => {
+			const line = "just regular text with no paste markers";
+			expect(restyleMarkers(line, new Set())).toBe(line);
+		});
+
+		it("returns empty string unchanged", () => {
+			expect(restyleMarkers("", new Set())).toBe("");
+		});
+	});
+
+	describe("ANSI-styled markers", () => {
+		it("restyles markers embedded in ANSI sequences", () => {
+			const line = "\x1b[38;2;84;92;126m[paste #1 500 chars]\x1b[0m";
+			const result = restyleMarkers(line, new Set());
+			expect(result).toBe("\x1b[38;2;84;92;126m[paste text 500 chars]\x1b[0m");
+		});
+	});
+});
+
+// ─── Width safety (regression for crash) ─────────────────────────────────────
+
+describe("paste-chips width safety", () => {
+	it("restyling a chars marker can increase visible width", () => {
+		// This is the core issue: "#1" (2 chars) → "text" (4 chars) = +2 width
+		const original = "[paste #1 2232 chars]";
+		const restyled = restyleMarkers(original, new Set());
+		expect(visibleWidth(restyled)).toBeGreaterThan(visibleWidth(original));
+	});
+
+	it("restyling a lines marker can decrease visible width", () => {
+		// "[paste #2 +42 lines]" (20 chars) → "[paste text +42]" (16 chars) = -4 width
+		const original = "[paste #2 +42 lines]";
+		const restyled = restyleMarkers(original, new Set());
+		expect(visibleWidth(restyled)).toBeLessThan(visibleWidth(original));
+	});
+
+	it("restyling to image label changes width", () => {
+		// "[paste #1 58 chars]" (19 chars) → "[paste image #1]" (16 chars)
+		const imageIds = new Set([1]);
+		const original = "[paste #1 58 chars]";
+		const restyled = restyleMarkers(original, imageIds);
+		expect(visibleWidth(restyled)).not.toBe(visibleWidth(original));
+	});
+
+	it("chars marker with large char count widens by 2", () => {
+		// "[paste #N CCCC chars]" → "[paste text CCCC chars]"
+		// "#N" (2 chars for single digit) → "text" (4 chars) = exactly +2
+		const original = "[paste #1 9999 chars]";
+		const restyled = restyleMarkers(original, new Set());
+		expect(visibleWidth(restyled) - visibleWidth(original)).toBe(2);
+	});
+
+	it("chars marker with multi-digit ID has smaller delta", () => {
+		// "#10" (3 chars) → "text" (4 chars) = +1
+		const original = "[paste #10 9999 chars]";
+		const restyled = restyleMarkers(original, new Set());
+		expect(visibleWidth(restyled) - visibleWidth(original)).toBe(1);
+	});
+
+	describe("reproduces crash scenario", () => {
+		it("restyled line exceeds terminal width without clamping", () => {
+			// Simulate the crash: a line at exactly terminal width (283)
+			// containing a marker that widens by 2 after restyling.
+			const terminalWidth = 283;
+			const marker = "[paste #1 2232 chars]"; // 21 chars
+			const padding = " ".repeat(terminalWidth - visibleWidth(marker));
+			const line = marker + padding;
+
+			// Verify the original line fits
+			expect(visibleWidth(line)).toBe(terminalWidth);
+
+			// Restyle it — this WOULD exceed width without the fix
+			const restyled = restyleMarkers(line, new Set());
+			expect(visibleWidth(restyled)).toBeGreaterThan(terminalWidth);
+			// Specifically: "[paste text 2232 chars]" is 23 chars, +2 over original 21
+			expect(visibleWidth(restyled)).toBe(terminalWidth + 2);
+		});
+	});
+});

package/src/paste-chips.ts

@@ -0,0 +1,160 @@
+/**
+ * paste-chips — collapse pasted image paths into Pi paste markers, and
+ * re-render all paste markers with type-aware labels.
+ *
+ *   /tmp/pi-clipboard-abc.png   →  buffer: [paste #1 58 chars]
+ *                                  display: [paste image #1]
+ *
+ *   long pasted text            →  buffer: [paste #2 +42 lines]
+ *                                  display: [paste text +42]
+ *
+ * Atomic deletion + cursor handling come from Pi's marker grammar.
+ * On submit, getExpandedText() restores the real path/text for the model.
+ * The display rewrite is purely visual (render layer); buffer is untouched.
+ */
+
+import { CustomEditor } from "@earendil-works/pi-coding-agent";
+import type {
+	EditorFactory,
+	ExtensionAPI,
+	KeybindingsManager,
+} from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const IMAGE_EXTS = new Set([
+	".png",
+	".jpg",
+	".jpeg",
+	".gif",
+	".webp",
+	".bmp",
+	".tif",
+	".tiff",
+	".heic",
+	".heif",
+]);
+
+// Group 1 = prefix char (or empty at start), Group 2 = path
+const PATH_RE = /(^|[^\w/])((?:~|\/)[^\s,;'"(){}[\]]+)/g;
+
+// Pi's marker grammar — must match exactly for atomic segmentation.
+// e.g. `[paste #1 58 chars]` or `[paste #2 +42 lines]`
+const MARKER_RE = /\[paste #(\d+)( (\+(\d+) lines|(\d+) chars))?\]/g;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function extOf(p: string): string {
+	const dot = p.lastIndexOf(".");
+	return dot >= 0 ? p.slice(dot).toLowerCase() : "";
+}
+
+function isImagePath(p: string): boolean {
+	return IMAGE_EXTS.has(extOf(p));
+}
+
+function makeMarker(id: number, charCount: number): string {
+	return `[paste #${id} ${charCount} chars]`;
+}
+
+// ─── Editor internals (Pi's TS-private fields are runtime-public JS) ─────────
+
+type EditorInternals = {
+	pastes: Map<number, string>;
+	pasteCounter: number;
+};
+
+// ─── Path → marker rewriter ──────────────────────────────────────────────────
+
+/**
+ * Walk `text`, for each image path: allocate a new paste ID, register the
+ * real path in editor.pastes, remember the ID as an image, and emit a
+ * Pi-format marker so deletion is atomic.
+ */
+function replaceImagePaths(
+	text: string,
+	internals: EditorInternals,
+	imageIds: Set<number>,
+): string {
+	return text.replace(PATH_RE, (_, prefix: string, rawPath: string) => {
+		if (!isImagePath(rawPath)) return prefix + rawPath;
+		internals.pasteCounter += 1;
+		const id = internals.pasteCounter;
+		internals.pastes.set(id, rawPath);
+		imageIds.add(id);
+		return prefix + makeMarker(id, rawPath.length);
+	});
+}
+
+// ─── Display rewriter ────────────────────────────────────────────────────────
+
+/**
+ * Re-style every paste marker in a rendered line:
+ *   image  → `[paste image #N]`
+ *   text   → `[paste text +Lines]` or `[paste text Chars]`
+ *
+ * Width-preserving is not required — Pi re-wraps each render call.
+ */
+export function restyleMarkers(line: string, imageIds: Set<number>): string {
+	return line.replace(
+		MARKER_RE,
+		(_full, idStr, _g2, _g3, linesStr, charsStr) => {
+			const id = Number.parseInt(idStr, 10);
+			if (imageIds.has(id)) {
+				return `[paste image #${id}]`;
+			}
+			if (linesStr) {
+				return `[paste text +${linesStr}]`;
+			}
+			if (charsStr) {
+				return `[paste text ${charsStr} chars]`;
+			}
+			return `[paste text #${id}]`;
+		},
+	);
+}
+
+// ─── Custom editor ────────────────────────────────────────────────────────────
+
+class ChipEditor extends CustomEditor {
+	private readonly imageIds = new Set<number>();
+
+	constructor(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) {
+		super(tui, theme, keybindings);
+	}
+
+	override insertTextAtCursor(text: string): void {
+		const internals = this as unknown as EditorInternals;
+		super.insertTextAtCursor(replaceImagePaths(text, internals, this.imageIds));
+	}
+
+	override render(width: number): string[] {
+		const raw = super.render(width);
+		return raw.map((line) => {
+			const restyled = restyleMarkers(line, this.imageIds);
+			// Restyling may widen lines (e.g. "#1" → "text"), so clamp to width.
+			if (visibleWidth(restyled) > width) {
+				return truncateToWidth(restyled, width, "");
+			}
+			return restyled;
+		});
+	}
+}
+
+// ─── Extension ────────────────────────────────────────────────────────────────
+
+export default function (pi: ExtensionAPI) {
+	pi.on("session_start", (_event, ctx) => {
+		if (!ctx.hasUI) return;
+		const factory: EditorFactory = (tui, theme, keybindings) =>
+			new ChipEditor(tui, theme, keybindings);
+		ctx.ui.setEditorComponent(factory);
+	});
+
+	pi.on("session_shutdown", (_event, ctx) => {
+		if (!ctx.hasUI) return;
+		ctx.ui.setEditorComponent(undefined);
+	});
+}

package/src/renderers.ts

@@ -0,0 +1,222 @@
+import { basename, dirname } from "node:path";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+
+import {
+	BOLD,
+	FG_BLUE,
+	FG_DIM,
+	FG_GREEN,
+	FG_RED,
+	FG_RULE,
+	FG_YELLOW,
+	RST,
+} from "./ansi.js";
+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";
+
+/** Render syntax-highlighted file content with line numbers. */
+export async function renderFileContent(
+	content: string,
+	filePath: string,
+	offset = 1,
+	maxLines = MAX_PREVIEW_LINES,
+): Promise<string> {
+	const normalizedContent = normalizeLineEndings(content);
+	const lines = normalizedContent.split("\n");
+	const total = lines.length;
+	const show = lines.slice(0, maxLines);
+	const lg = lang(filePath);
+	const hl = await hlBlock(show.join("\n"), lg);
+
+	const tw = termW();
+	const startLine = offset;
+	const endLine = startLine + show.length - 1;
+	const nw = Math.max(3, String(endLine).length);
+	const gw = nw + 3; // num + " │ "
+	const cw = Math.max(1, tw - gw);
+
+	const out: string[] = [];
+	out.push(rule(tw));
+
+	for (let i = 0; i < hl.length; i++) {
+		const ln = startLine + i;
+		const code = hl[i] ?? show[i] ?? "";
+		const display = truncateToWidth(code, cw, `${FG_DIM}›`);
+		out.push(`${lnum(ln, nw)} ${FG_RULE}│${RST} ${display}${RST}`);
+	}
+
+	out.push(rule(tw));
+	if (total > maxLines) {
+		out.push(
+			`${FG_DIM}  … ${total - maxLines} more lines (${total} total)${RST}`,
+		);
+	}
+	return out.join("\n");
+}
+
+/** Render bash output with colored exit code and stderr highlighting. */
+export function renderBashOutput(
+	text: string,
+	exitCode: number | null,
+): { summary: string; body: string } {
+	const isOk = exitCode === 0;
+	const statusFg = isOk ? FG_GREEN : FG_RED;
+	const statusIcon = isOk ? "✓" : "✗";
+	const codeStr =
+		exitCode !== null
+			? `${statusFg}${statusIcon} exit ${exitCode}${RST}`
+			: `${FG_YELLOW}⚡ killed${RST}`;
+
+	const lines = text.split("\n");
+	const maxShow = MAX_PREVIEW_LINES;
+	const show = lines.slice(0, maxShow);
+	const remaining = lines.length - maxShow;
+
+	let body = show.join("\n");
+	if (remaining > 0) {
+		body += `\n${FG_DIM}  … ${remaining} more lines${RST}`;
+	}
+
+	return { summary: codeStr, body };
+}
+
+/** Render ls output as a tree view with icons. */
+export function renderTree(text: string, _basePath: string): string {
+	const lines = text.trim().split("\n").filter(Boolean);
+	if (!lines.length) return `${FG_DIM}(empty directory)${RST}`;
+
+	const out: string[] = [];
+	const total = lines.length;
+	const show = lines.slice(0, MAX_PREVIEW_LINES);
+
+	for (let i = 0; i < show.length; i++) {
+		const entry = show[i].trim();
+		const isLast = i === show.length - 1 && total <= MAX_PREVIEW_LINES;
+		const prefix = isLast ? "└── " : "├── ";
+		const connector = `${FG_RULE}${prefix}${RST}`;
+
+		// Detect directories (entries ending with /)
+		const isDir = entry.endsWith("/");
+		const name = isDir ? entry.slice(0, -1) : entry;
+		const icon = isDir ? dirIcon() : fileIcon(name);
+		const fg = isDir ? FG_BLUE + BOLD : "";
+		const reset = isDir ? RST : "";
+
+		out.push(`${connector}${icon}${fg}${name}${reset}`);
+	}
+
+	if (total > MAX_PREVIEW_LINES) {
+		out.push(
+			`${FG_RULE}└── ${RST}${FG_DIM}… ${total - MAX_PREVIEW_LINES} 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
+//
+// If @ff-labs/fff-node is installed, find/grep use FFF for speed + frecency.
+// If not, falls back to wrapping SDK tools (current behavior).
+// ---------------------------------------------------------------------------