@xynogen/pix-pretty 1.6.3 → 1.7.0

package/src/index.test.ts

@@ -1,33 +1,13 @@
 /**
- * Basic smoke tests for pix-pretty extensions
+ * Smoke tests for pix-pretty (pure lib).
+ * UI extension tests moved to pix-display.
  */
 
 import { describe, expect, it } from "bun:test";
 
 describe("pix-pretty", () => {
-	it("exports are valid TypeScript modules", () => {
-		// Smoke test - just verify the files can be imported
-		expect(true).toBe(true);
-	});
-
-	describe("tool rendering extension", () => {
-		it("main extension exports a function", async () => {
-			const mainModule = await import("./index");
-			expect(mainModule.default).toBeFunction();
-		});
-	});
-
-	describe("paste-chips extension", () => {
-		it("paste-chips extension exports a function", async () => {
-			const pasteChipsModule = await import("./paste-chips");
-			expect(pasteChipsModule.default).toBeFunction();
-		});
-	});
-
-	describe("thinking extension", () => {
-		it("thinking extension exports a function", async () => {
-			const thinkingModule = await import("./thinking");
-			expect(thinkingModule.default).toBeFunction();
-		});
+	it("main module exports a function", async () => {
+		const mod = await import("./index");
+		expect(mod.default).toBeFunction();
 	});
 });

package/src/index.ts

@@ -1,26 +1,8 @@
 /**
  * pi-pretty — Pretty terminal output for pi built-in tools.
  *
- * Entry point: initialises theme + highlight cache, registers FFF slash
- * commands (/fff-rescan etc.). Individual tool renderers live in the
- * standalone pix-{read,bash,ls,find,grep,edit,write} packages — each
- * self-registers via its own pi extension entry point.
- *
- * Modules:
- *   types.ts          shared interfaces/types
- *   config.ts         theme + thresholds
- *   ansi.ts           ANSI codes, low-contrast fix
- *   utils.ts          helpers + renderToolError
- *   lang.ts           language detection
- *   icons.ts          Nerd Font file-type icons
- *   highlight.ts      cli-highlight engine + ANSI cache
- *   renderers.ts      renderFileContent/Bash/Tree/Find/Grep
- *   fff.ts            Fast File Finder + cursor store + module singleton
- *   diff.ts           unified diff parser
- *   diff-render.ts    split/word-level diff renderer
- *   resize.ts         terminal resize invalidation registry
- *   tools/            per-tool registrar helpers (context type)
- *   commands/         slash command registrars (fff)
+ * Pure rendering library — no Pi lifecycle hooks or extensions.
+ * UI features (paste chips, thinking blocks) live in pix-display.
  */
 
 import { getAgentDir } from "@earendil-works/pi-coding-agent";
@@ -48,3 +30,9 @@ export default function piPrettyExtension(pi: PiPrettyApi): void {
 	// Commands become available once pix-grep initialises the finder.
 	registerFffCommands(pi, fffState);
 }
+
+/**
+ * piPrettyExtension still exports a default function for packages that
+ * import it as an extension (pix-core activates it for theme + FFF).
+ * UI extensions (paste-chips, thinking) moved to pix-display.
+ */

package/src/progress.ts

@@ -0,0 +1,116 @@
+/**
+ * pix-pretty/progress — modal progress overlay that owns input.
+ *
+ * A focused, non-dismissable spinner overlay. While open it holds input
+ * ownership, so keystrokes are swallowed instead of reaching the editor —
+ * this prevents out-of-order echo when a long-running command (e.g. an
+ * update) competes with the TUI for the event loop.
+ *
+ * Usage:
+ *   const p = openProgress(ctx.ui, "Updating Pi…");
+ *   p.setLabel("Updating extensions…");   // live status line
+ *   await doWork();
+ *   p.close();                             // releases input, removes overlay
+ */
+
+import { Box, Text } from "@earendil-works/pi-tui";
+
+interface ProgressTheme {
+	fg(color: string, text: string): string;
+	bg(color: string, text: string): string;
+	bold(text: string): string;
+}
+
+interface ProgressComponent {
+	render(width: number): string[];
+	invalidate(): void;
+	handleInput(data: string): void;
+}
+
+export interface ProgressUI {
+	custom<T>(
+		cb: (
+			tui: { requestRender(): void },
+			theme: ProgressTheme,
+			kb: unknown,
+			done: (v: T) => void,
+		) => ProgressComponent,
+		opts?: { overlay?: boolean },
+	): Promise<T | undefined>;
+}
+
+export interface ProgressHandle {
+	/** Update the status line shown under the title. */
+	setLabel(label: string): void;
+	/** Close the overlay and release input ownership. */
+	close(): void;
+}
+
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+// 120ms: smooth enough to read as motion, slow enough to barely touch the
+// render queue. The overlay owns input so this isn't competing with echo.
+const SPINNER_INTERVAL_MS = 120;
+
+/**
+ * Open a modal progress overlay. Returns a handle to update the label and
+ * close it. The overlay swallows all keystrokes until closed.
+ */
+export function openProgress(
+	ui: ProgressUI,
+	title: string,
+	accent = "accent",
+): ProgressHandle {
+	let setLabelImpl: (label: string) => void = () => {};
+	let closeImpl: () => void = () => {};
+
+	ui.custom<void>(
+		(tui, theme, _kb, done) => {
+			let frame = 0;
+			const titleText = new Text(theme.fg(accent, theme.bold(title)), 1, 0);
+			const statusText = new Text("", 1, 0);
+
+			const render = () => {
+				statusText.setText(
+					`${theme.fg(accent, SPINNER[frame])} ${theme.fg("muted", labelValue)}`,
+				);
+			};
+
+			let labelValue = "Working…";
+			render();
+
+			const ticker = setInterval(() => {
+				frame = (frame + 1) % SPINNER.length;
+				render();
+				tui.requestRender();
+			}, SPINNER_INTERVAL_MS);
+
+			const container = new Box(2, 1, (s) => theme.bg("customMessageBg", s));
+			container.addChild(titleText);
+			container.addChild(statusText);
+
+			setLabelImpl = (label: string) => {
+				labelValue = label;
+				render();
+				tui.requestRender();
+			};
+			closeImpl = () => {
+				clearInterval(ticker);
+				done();
+			};
+
+			return {
+				render: (w: number) => container.render(w),
+				invalidate: () => container.invalidate(),
+				// Swallow every keystroke: a focused overlay owns input, so nothing
+				// reaches the editor while the update runs.
+				handleInput: () => {},
+			};
+		},
+		{ overlay: true },
+	);
+
+	return {
+		setLabel: (label) => setLabelImpl(label),
+		close: () => closeImpl(),
+	};
+}

package/src/paste-chips.test.ts

@@ -1,162 +0,0 @@
-/**
- * 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, expect, it } from "bun:test";
-import { visibleWidth } from "@earendil-works/pi-tui";
-import { endsWithMarker, restyleMarkers } from "./paste-chips";
-
-const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
-
-// ─── restyleMarkers ──────────────────────────────────────────────────────────
-
-describe("paste-chips restyleMarkers", () => {
-	describe("text markers", () => {
-		it("restyles chars marker to colored icon text chip", () => {
-			const result = restyleMarkers("[paste #1 2232 chars]", new Set());
-			expect(result).toContain("\x1b[");
-			expect(stripAnsi(result)).toBe("󰉿 text 2.2k chars");
-		});
-
-		it("restyles lines marker to colored icon text chip", () => {
-			const result = restyleMarkers("[paste #2 +42 lines]", new Set());
-			expect(stripAnsi(result)).toBe("󰉿 text 42 lines");
-		});
-
-		it("restyles bare marker (no size info) to text chip with id", () => {
-			const result = restyleMarkers("[paste #3]", new Set());
-			expect(stripAnsi(result)).toBe("󰉿 text #3");
-		});
-	});
-
-	describe("image markers", () => {
-		it("restyles marker to colored icon image chip when ID is in imageIds", () => {
-			const imageIds = new Set([1]);
-			const result = restyleMarkers("[paste #1 58 chars]", imageIds);
-			expect(result).toContain("\x1b[");
-			expect(stripAnsi(result)).toBe("󰋩 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(stripAnsi(result)).toBe("󰉿 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(stripAnsi(result)).toBe(
-				"before 󰋩 image #1 middle 󰉿 text 10 lines 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(stripAnsi(result)).toBe("󰉿 text 500 chars");
-		});
-	});
-});
-
-// ─── Width safety (regression for crash) ─────────────────────────────────────
-
-describe("paste-chips width safety", () => {
-	it("restyling a chars marker can decrease visible width", () => {
-		const original = "[paste #1 2232 chars]";
-		const restyled = restyleMarkers(original, new Set());
-		expect(visibleWidth(restyled)).toBeLessThan(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 compacts metadata", () => {
-		const original = "[paste #1 9999 chars]";
-		const restyled = restyleMarkers(original, new Set());
-		expect(stripAnsi(restyled)).toBe("󰉿 text 10k chars");
-		expect(visibleWidth(restyled)).toBeLessThan(visibleWidth(original));
-	});
-
-	it("chars marker with multi-digit ID omits id from text chip", () => {
-		const original = "[paste #10 9999 chars]";
-		const restyled = restyleMarkers(original, new Set());
-		expect(stripAnsi(restyled)).toBe("󰉿 text 10k chars");
-		expect(visibleWidth(restyled)).toBeLessThan(visibleWidth(original));
-	});
-
-	describe("width behavior", () => {
-		it("icon chip stays within terminal width when marker line fits", () => {
-			const terminalWidth = 283;
-			const marker = "[paste #1 2232 chars]";
-			const padding = " ".repeat(terminalWidth - visibleWidth(marker));
-			const line = marker + padding;
-
-			expect(visibleWidth(line)).toBe(terminalWidth);
-
-			const restyled = restyleMarkers(line, new Set());
-			expect(visibleWidth(restyled)).toBeLessThanOrEqual(terminalWidth);
-		});
-	});
-});
-
-// ─── endsWithMarker (trailing-space gate) ──────────────────────────────
-
-describe("paste-chips endsWithMarker", () => {
-	it("matches a chars marker at end of string", () => {
-		expect(endsWithMarker("[paste #1 2232 chars]")).toBe(true);
-	});
-
-	it("matches a lines marker at end of string", () => {
-		expect(endsWithMarker("hello [paste #2 +42 lines]")).toBe(true);
-	});
-
-	it("matches a bare marker at end of string", () => {
-		expect(endsWithMarker("[paste #3]")).toBe(true);
-	});
-
-	it("does not match when marker is not at the end", () => {
-		expect(endsWithMarker("[paste #1 58 chars] trailing")).toBe(false);
-	});
-
-	it("does not match plain text", () => {
-		expect(endsWithMarker("just some text")).toBe(false);
-	});
-
-	it("does not match a lone trailing space", () => {
-		expect(endsWithMarker(" ")).toBe(false);
-	});
-});

package/src/paste-chips.ts

@@ -1,217 +0,0 @@
-/**
- * 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 type {
-	ExtensionAPI,
-	KeybindingsManager,
-} from "@earendil-works/pi-coding-agent";
-import { CustomEditor } from "@earendil-works/pi-coding-agent";
-import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { BOLD, FG_BLUE, FG_DIM, FG_GREEN, RST } from "./ansi.js";
-
-// Upstream stopped re-exporting `EditorFactory` from the package entry point,
-// so we reconstruct its signature locally from the still-exported primitives.
-// This matches ctx.ui.setEditorComponent's expected factory shape.
-type EditorFactory = (
-	tui: TUI,
-	theme: EditorTheme,
-	keybindings: KeybindingsManager,
-) => CustomEditor;
-
-// ─── 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  → `󰋩 image #N` with blue icon/label
- *   text   → `󰉿 text Lines lines` or `󰉿 text Chars chars` with green icon/label
- *
- * 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 chip(FG_BLUE, "󰋩", "image", `#${id}`);
-			}
-			if (linesStr) {
-				return chip(FG_GREEN, "󰉿", "text", `${linesStr} lines`);
-			}
-			if (charsStr) {
-				return chip(FG_GREEN, "󰉿", "text", `${compactNumber(charsStr)} chars`);
-			}
-			return chip(FG_GREEN, "󰉿", "text", `#${id}`);
-		},
-	);
-}
-
-function chip(
-	color: string,
-	icon: string,
-	label: string,
-	meta: string,
-): string {
-	return `${color}${BOLD}${icon} ${label}${RST}${FG_DIM} ${meta}${RST}`;
-}
-
-/** True when `text` ends with a Pi paste marker (chip), e.g. `[paste #1 58 chars]`. */
-export function endsWithMarker(text: string): boolean {
-	return /\[paste #\d+[^\]]*\]$/.test(text);
-}
-
-function compactNumber(raw: string): string {
-	const n = Number.parseInt(raw, 10);
-	if (!Number.isFinite(n)) return raw;
-	if (n < 1_000) return `${n}`;
-	if (n < 1_000_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, "")}k`;
-	return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, "")}m`;
-}
-
-// ─── Custom editor ────────────────────────────────────────────────────────────
-
-// handlePaste is TS-private in CustomEditor but runtime-public JS. We patch it
-// per-instance, capturing the base implementation, so large text pastes get the
-// same trailing-space treatment as image chips.
-type PasteHandler = { handlePaste(text: string): void };
-
-class ChipEditor extends CustomEditor {
-	private readonly imageIds = new Set<number>();
-
-	constructor(...args: ConstructorParameters<typeof CustomEditor>) {
-		super(...args);
-		this.patchHandlePaste();
-	}
-
-	override insertTextAtCursor(text: string): void {
-		const internals = this as unknown as EditorInternals;
-		const replaced = replaceImagePaths(text, internals, this.imageIds);
-		// Append a trailing space when the insertion ends with a paste marker so
-		// the cursor lands after the chip rather than inside it.
-		super.insertTextAtCursor(
-			endsWithMarker(replaced) ? `${replaced} ` : replaced,
-		);
-	}
-
-	private patchHandlePaste(): void {
-		const self = this as unknown as PasteHandler;
-		const base = self.handlePaste.bind(self);
-		self.handlePaste = (pastedText: string) => {
-			const before = this.getText();
-			base(pastedText);
-			const after = this.getText();
-			// Only nudge a space when the paste collapsed into a marker chip;
-			// inline small pastes (no marker) are left untouched.
-			if (endsWithMarker(after) && after !== before) {
-				super.insertTextAtCursor(" ");
-			}
-		};
-	}
-
-	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);
-	});
-}