@heyhuynhgiabuu/pi-pretty 0.4.3 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heyhuynhgiabuu/pi-pretty",
-	"version": "0.4.3",
+	"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";
 
@@ -148,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");
 
 // ---------------------------------------------------------------------------
@@ -174,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");
 }
@@ -195,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");
 }
@@ -205,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 {
@@ -621,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));
@@ -629,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}`);
 	}
 

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);
+			}
+		});
+	});
 });