@heyhuynhgiabuu/pi-pretty 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heyhuynhgiabuu/pi-pretty",
-	"version": "0.4.2",
+	"version": "0.4.4",
 	"description": "Pretty terminal output for pi — syntax-highlighted file reads, colored bash output, tree-view directory listings, and more.",
 	"author": "huynhgiabuu",
 	"license": "MIT",

package/release-notes/v0.4.4.md

@@ -0,0 +1,28 @@
+# pi-pretty 0.4.4
+
+## Summary
+This patch release fixes terminal background tearing/misaligned cells by enforcing the pi-tui line-width contract for background-filled tool output.
+
+## What changed
+- Clamp every background-filled tool line to the active terminal width before adding background padding.
+- Use `@mariozechner/pi-tui` `truncateToWidth()` and `visibleWidth()` so ANSI escapes and wide Unicode cells are measured correctly.
+- Preserve the configured tool background after ANSI reset sequences even when truncation occurs.
+- Remove the 80-column minimum width floor so narrow terminals do not receive over-wide rendered lines.
+- Replace custom read-output truncation with pi-tui's ANSI-aware truncation helper.
+- Add regression coverage for expanded ANSI tool headers, wide characters, and narrow terminal widths.
+
+## Files
+- `src/index.ts`
+- `test/bash-rendering.test.ts`
+- `package.json`
+- `package-lock.json`
+
+## Verification
+- `npm run lint` ✅
+- `npm run typecheck` ✅
+- `npm test` ✅ (69 tests)
+
+## Upgrade notes
+No configuration changes are required.
+
+This release specifically follows the pi-tui requirement that rendered component lines must not exceed the available width, preventing terminal auto-wrap artifacts in red/error and themed tool backgrounds.

package/src/index.ts

@@ -41,6 +41,7 @@ import type {
 	ReadToolInput,
 	ToolRenderResultOptions,
 } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import { codeToANSI } from "@shikijs/cli";
 import type { BundledLanguage, BundledTheme } from "shiki";
 
@@ -134,13 +135,11 @@ function getThemeBgAnsi(theme: BgTheme, key: string): string | null {
 }
 
 /** Read themed tool backgrounds and update BG_BASE / BG_ERROR + RST.
- *  Call once when theme is first available. Idempotent. */
-let _bgBaseResolved = false;
+ *  Recompute on each render so runtime theme changes are respected. */
 function resolveBaseBackground(theme: BgTheme | null | undefined): void {
-	if (_bgBaseResolved || !theme?.getBgAnsi) return;
-	_bgBaseResolved = true;
+	if (!theme?.getBgAnsi) return;
 
-	BG_BASE = getThemeBgAnsi(theme, "toolSuccessBg") ?? BG_DEFAULT;
+	BG_BASE = getThemeBgAnsi(theme, "toolBg") ?? getThemeBgAnsi(theme, "background") ?? BG_DEFAULT;
 	BG_ERROR = getThemeBgAnsi(theme, "toolErrorBg") ?? BG_BASE;
 	RST = `\x1b[0m${BG_BASE}`;
 }
@@ -150,7 +149,6 @@ function renderToolError(error: string, theme: FgTheme): string {
 }
 
 const ESC_RE = "\u001b";
-const ANSI_RE = new RegExp(`${ESC_RE}\\[[0-9;]*m`, "g");
 const ANSI_CAPTURE_RE = new RegExp(`${ESC_RE}\\[([0-9;]*)m`, "g");
 
 // ---------------------------------------------------------------------------
@@ -176,10 +174,6 @@ function normalizeShikiContrast(ansi: string): string {
 // Utilities
 // ---------------------------------------------------------------------------
 
-function strip(s: string): string {
-	return s.replace(ANSI_RE, "");
-}
-
 function normalizeLineEndings(text: string): string {
 	return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
 }
@@ -197,8 +191,9 @@ function fillToolBackground(text: string, bg = BG_BASE): string {
 		.split("\n")
 		.map((line) => {
 			const normalized = preserveToolBackground(line, bg);
-			const padding = Math.max(0, width - strip(normalized).length);
-			return `${bg}${normalized}${" ".repeat(padding)}${RST}`;
+			const fitted = preserveToolBackground(truncateToWidth(normalized, width, ""), bg);
+			const padding = Math.max(0, width - visibleWidth(fitted));
+			return `${bg}${fitted}${" ".repeat(padding)}${RST}`;
 		})
 		.join("\n");
 }
@@ -207,7 +202,7 @@ function termW(): number {
 	const stderrWithColumns = process.stderr as NodeJS.WriteStream & { columns?: number };
 	const raw =
 		process.stdout.columns || stderrWithColumns.columns || Number.parseInt(process.env.COLUMNS ?? "", 10) || 200;
-	return Math.max(80, Math.min(raw - 4, 210));
+	return Math.max(1, Math.min(raw - 4, 210));
 }
 
 function shortPath(cwd: string, home: string, p: string): string {
@@ -440,47 +435,6 @@ export const __imageInternals = {
 	},
 };
 
-/**
- * Render base64 image inline using iTerm2 inline image protocol.
- * Protocol: ESC ] 1337 ; File=[args] : base64data BEL
- */
-function renderIterm2Image(base64Data: string, opts: { width?: string; name?: string } = {}): string {
-	const args: string[] = ["inline=1", "preserveAspectRatio=1"];
-	if (opts.width) args.push(`width=${opts.width}`);
-	if (opts.name) args.push(`name=${Buffer.from(opts.name).toString("base64")}`);
-	const byteSize = Math.ceil((base64Data.length * 3) / 4);
-	args.push(`size=${byteSize}`);
-	const seq = `\x1b]1337;File=${args.join(";")}:${base64Data}\x07`;
-	return tmuxWrap(seq);
-}
-
-/**
- * Render base64 image inline using Kitty graphics protocol.
- * Protocol: ESC _G <key>=<value>,...; <base64data> ESC \
- * Chunked in 4096-byte pieces as required by protocol.
- * Supported by: Kitty, Ghostty
- */
-function renderKittyImage(base64Data: string, opts: { cols?: number } = {}): string {
-	const chunks: string[] = [];
-	const CHUNK_SIZE = 4096;
-
-	for (let i = 0; i < base64Data.length; i += CHUNK_SIZE) {
-		const chunk = base64Data.slice(i, i + CHUNK_SIZE);
-		const isFirst = i === 0;
-		const isLast = i + CHUNK_SIZE >= base64Data.length;
-		const more = isLast ? 0 : 1;
-
-		if (isFirst) {
-			const colPart = opts.cols ? `,c=${opts.cols}` : "";
-			chunks.push(tmuxWrap(`\x1b_Ga=T,f=100,t=d,m=${more}${colPart};${chunk}\x1b\\`));
-		} else {
-			chunks.push(tmuxWrap(`\x1b_Gm=${more};${chunk}\x1b\\`));
-		}
-	}
-
-	return chunks.join("");
-}
-
 /**
  * Get human-readable file size
  */
@@ -664,7 +618,7 @@ async function renderFileContent(
 	const endLine = startLine + show.length - 1;
 	const nw = Math.max(3, String(endLine).length);
 	const gw = nw + 3; // num + " │ "
-	const cw = Math.max(20, tw - gw);
+	const cw = Math.max(1, tw - gw);
 
 	const out: string[] = [];
 	out.push(rule(tw));
@@ -672,25 +626,7 @@ async function renderFileContent(
 	for (let i = 0; i < hl.length; i++) {
 		const ln = startLine + i;
 		const code = hl[i] ?? show[i] ?? "";
-		const plain = strip(code);
-		// Truncate if wider than available
-		let display = code;
-		if (plain.length > cw) {
-			let vis = 0;
-			let j = 0;
-			while (j < code.length && vis < cw - 1) {
-				if (code[j] === "\x1b") {
-					const e = code.indexOf("m", j);
-					if (e !== -1) {
-						j = e + 1;
-						continue;
-					}
-				}
-				vis++;
-				j++;
-			}
-			display = `${code.slice(0, j)}${RST}${FG_DIM}›${RST}`;
-		}
+		const display = truncateToWidth(code, cw, `${FG_DIM}›`);
 		out.push(`${lnum(ln, nw)} ${FG_RULE}│${RST} ${display}${RST}`);
 	}
 
@@ -1156,8 +1092,9 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			if (_fffPartialIndex) {
 				ctx.ui?.notify?.("FFF: scan timed out — using partial index. Run /fff-rescan when ready.", "warning");
 			} else {
-				ctx.ui?.setStatus?.("fff", "FFF indexed");
-				setTimeout(() => ctx.ui?.setStatus?.("fff", undefined), 3000);
+				const ui = ctx.ui;
+				ui?.setStatus?.("fff", "FFF indexed");
+				setTimeout(() => ui?.setStatus?.("fff", undefined), 3000);
 			}
 		} catch (error: unknown) {
 			ctx.ui?.notify?.(`FFF init failed: ${getErrorMessage(error)}`, "error");
@@ -1242,45 +1179,15 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 
 			const d = result.details as RenderDetails | undefined;
 
-			// Image rendering
+			// Image reads keep the original image content so Pi's native TUI renderer
+			// can display it exactly once. pi-pretty only renders metadata here;
+			// rendering another inline image caused duplicate previews.
 			if (d?._type === "readImage") {
-				const tw = termW();
-				const out: string[] = [];
-				const fname = basename(d.filePath);
 				const byteSize = Math.ceil(((d.data as string).length * 3) / 4);
 				const sizeStr = humanSize(byteSize);
 				const mimeStr = d.mimeType ?? "image";
 
-				out.push(`  ${fileIcon(d.filePath)}${FG_DIM}${mimeStr} · ${sizeStr}${RST}`);
-				out.push(rule(tw));
-
-				const protocol = detectImageProtocol();
-				const passthroughWarning = getTmuxPassthroughWarning(protocol);
-				if (passthroughWarning) {
-					out.push(`  ${FG_YELLOW}${passthroughWarning}${RST}`);
-				} else if (protocol === "kitty") {
-					if (d.mimeType && d.mimeType !== "image/png") {
-						out.push(
-							`  ${FG_YELLOW}Kitty/Ghostty inline preview currently supports PNG payloads (got ${d.mimeType})${RST}`,
-						);
-					} else {
-						const imgCols = Math.min(tw - 4, 80);
-						out.push(renderKittyImage(d.data, { cols: imgCols }));
-					}
-				} else if (protocol === "iterm2") {
-					const imgWidth = Math.min(tw - 4, 80);
-					out.push(
-						renderIterm2Image(d.data, {
-							width: `${imgWidth}`,
-							name: fname,
-						}),
-					);
-				} else {
-					out.push(`  ${FG_DIM}(Inline image preview requires Ghostty, iTerm2, WezTerm, or Kitty)${RST}`);
-				}
-
-				out.push(rule(tw));
-				text.setText(fillToolBackground(out.join("\n")));
+				text.setText(fillToolBackground(`  ${fileIcon(d.filePath)}${FG_DIM}${mimeStr} · ${sizeStr}${RST}`));
 				return text;
 			}
 

package/test/bash-rendering.test.ts

@@ -1,3 +1,4 @@
+import { visibleWidth } from "@mariozechner/pi-tui";
 import { describe, expect, it } from "vitest";
 
 import piPrettyExtension from "../src/index.js";
@@ -18,6 +19,11 @@ const mockTheme = {
 	bold: (text: string) => text,
 };
 
+const ansiMockTheme = {
+	fg: (_key: string, text: string) => `\x1b[31m${text}\x1b[0m`,
+	bold: (text: string) => `\x1b[1m${text}\x1b[22m`,
+};
+
 function mockToolFactory(exec: any) {
 	return (_cwd: string) => ({
 		name: "mock",
@@ -27,6 +33,20 @@ function mockToolFactory(exec: any) {
 	});
 }
 
+function withStdoutColumns<T>(columns: number, fn: () => T): T {
+	const descriptor = Object.getOwnPropertyDescriptor(process.stdout, "columns");
+	Object.defineProperty(process.stdout, "columns", { configurable: true, value: columns });
+	try {
+		return fn();
+	} finally {
+		if (descriptor) {
+			Object.defineProperty(process.stdout, "columns", descriptor);
+		} else {
+			delete (process.stdout as NodeJS.WriteStream & { columns?: number }).columns;
+		}
+	}
+}
+
 function loadBashTool() {
 	const noopExec = async () => ({ content: [{ type: "text", text: "" }] });
 	const tools = new Map<string, any>();
@@ -106,4 +126,42 @@ describe("bash renderCall expansion", () => {
 		expect(collapsed.getText()).toContain("5s timeout");
 		expect(expanded.getText()).toContain("5s timeout");
 	});
+
+	it("truncates expanded ANSI tool headers to the terminal width before padding backgrounds", () => {
+		withStdoutColumns(84, () => {
+			const bashTool = loadBashTool();
+			const command = `printf '${"界".repeat(120)}'`;
+
+			const rendered = bashTool.renderCall({ command }, ansiMockTheme, {
+				lastComponent: new MockText(),
+				isError: false,
+				state: {},
+				expanded: true,
+				invalidate: () => {},
+			});
+
+			for (const line of rendered.getText().split("\n")) {
+				expect(visibleWidth(line)).toBeLessThanOrEqual(80);
+			}
+		});
+	});
+
+	it("does not exceed narrow terminal widths", () => {
+		withStdoutColumns(24, () => {
+			const bashTool = loadBashTool();
+			const command = `printf '${"x".repeat(120)}'`;
+
+			const rendered = bashTool.renderCall({ command }, ansiMockTheme, {
+				lastComponent: new MockText(),
+				isError: false,
+				state: {},
+				expanded: true,
+				invalidate: () => {},
+			});
+
+			for (const line of rendered.getText().split("\n")) {
+				expect(visibleWidth(line)).toBeLessThanOrEqual(20);
+			}
+		});
+	});
 });

package/test/fff-integration.test.ts

@@ -11,7 +11,7 @@
 import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { CursorStore, fffFormatGrepText } from "../src/fff-helpers.js";
 import piPrettyExtension, { type PiPrettyDeps } from "../src/index.js";
 import {
@@ -314,6 +314,7 @@ describe("piPrettyExtension integration", () => {
 	}
 
 	beforeEach(() => {
+		vi.useRealTimers();
 		tools = new Map();
 		events = new Map();
 		mockPi = {
@@ -336,6 +337,10 @@ describe("piPrettyExtension integration", () => {
 		piPrettyExtension(mockPi, deps);
 	}
 
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
 	async function loadWithFFF(finderOverrides?: Record<string, any>) {
 		load(true, finderOverrides);
 		const start = events.get("session_start")!;
@@ -714,6 +719,29 @@ describe("piPrettyExtension integration", () => {
 			}));
 		});
 
+		it("delayed FFF status clear does not read a stale session ctx", async () => {
+			vi.useFakeTimers();
+			const setStatus = vi.fn();
+			let stale = false;
+			const ctx = {
+				cwd: "/tmp/test",
+				get ui() {
+					if (stale) throw new Error("stale ctx");
+					return { setStatus };
+				},
+			};
+
+			load(true);
+			const start = events.get("session_start")!;
+			await start({}, ctx);
+			stale = true;
+
+			vi.advanceTimersByTime(3000);
+
+			expect(setStatus).toHaveBeenNthCalledWith(1, "fff", "FFF indexed");
+			expect(setStatus).toHaveBeenNthCalledWith(2, "fff", undefined);
+		});
+
 		it("shutdown → subsequent find falls back to SDK", async () => {
 			await loadWithFFF();
 			await events.get("session_shutdown")!();

package/test/image-rendering.test.ts

@@ -128,11 +128,8 @@ describe("image rendering terminal detection", () => {
 		expect(__imageInternals.getTmuxPassthroughWarning("kitty")).toBeNull();
 	});
 
-	it("renders explicit warning for read image when tmux passthrough is off", async () => {
-		process.env.TMUX = "/tmp/tmux-1000/default,123,0";
-		process.env.TERM_PROGRAM = "tmux";
-		process.env.KITTY_WINDOW_ID = "1";
-		__imageInternals.setTmuxAllowPassthroughOverrideForTests(false);
+	it("renders image metadata without a second inline preview", async () => {
+		process.env.TERM_PROGRAM = "kitty";
 
 		const readTool = loadReadTool(async () => ({
 			content: [{ type: "image", data: Buffer.from("fake").toString("base64"), mimeType: "image/png" }],
@@ -147,25 +144,10 @@ describe("image rendering terminal detection", () => {
 			invalidate: () => {},
 		});
 
-		expect(rendered.getText()).toContain("allow-passthrough is off");
-	});
-
-	it("warns on non-PNG payloads for kitty protocol", async () => {
-		process.env.TERM_PROGRAM = "kitty";
-
-		const readTool = loadReadTool(async () => ({
-			content: [{ type: "image", data: Buffer.from("jpeg").toString("base64"), mimeType: "image/jpeg" }],
-		}));
-
-		const result = await readTool.execute("t1", { path: "media/photo.jpg" }, null, null, {});
-		const rendered = readTool.renderResult(result, {}, {}, {
-			lastComponent: new MockText(),
-			isError: false,
-			state: {},
-			expanded: false,
-			invalidate: () => {},
-		});
-
-		expect(rendered.getText()).toContain("supports PNG payloads");
+		expect(rendered.getText()).toContain("image/png");
+		expect(rendered.getText()).not.toContain("\x1b_G");
+		expect(result.content).toEqual([
+			{ type: "image", data: Buffer.from("fake").toString("base64"), mimeType: "image/png" },
+		]);
 	});
 });